near-connect-hooks_skill

Overview

This skill provides React hooks to integrate NEAR Protocol wallets into React and Next.js apps using @hot-labs/near-connect. It exposes a NearProvider and a useNearWallet hook to handle authentication, view/call contract methods, transfers, access key management, and NEP-413 message signing. The hooks simplify common wallet flows while allowing low-level transaction control when needed.

How this skill works

Wrap your app with NearProvider to configure network and RPC endpoints. useNearWallet returns the connected account, loading state, RPC provider and connector, and a set of helpers for signIn/signOut, viewFunction, callFunction, transfer, access key operations, and NEP-413 signing. Advanced functions expose transaction builders and Actions for composing single or batched transactions and signing/sending them through the wallet.

When to use it

• Building React or Next.js dApps that require NEAR wallet authentication
• Calling view or change methods on NEAR smart contracts from the UI
• Sending NEAR token transfers or managing allowances programmatically
• Adding access-key-based UX for restricted contract operations
• Implementing NEP-413 message signing or low-level transaction flows

Best practices

• Wrap the entire app (or top-level layout) with NearProvider to ensure hooks initialize correctly
• Check loading and signedAccountId before rendering wallet-dependent UI to avoid flashes
• Use viewFunction for read-only calls and callFunction for state changes with sensible gas/deposit defaults
• Prefer action builders (Actions) for complex transactions to reduce manual error
• Use getBalance and getAccessKeyList to present accurate account state and to decide when to add/delete keys

Example use cases

• Add a Connect/Disconnect button that calls signIn and signOut and shows signedAccountId
• Fetch and display contract state with viewFunction and refresh after a callFunction mutation
• Send a one-off NEAR transfer using transfer with yoctoNEAR amounts
• Create temporary function-call access keys for third-party integrations via addFunctionCallKey and revoke with deleteKey
• Sign a NEP-413 message to verify wallet ownership during external onboarding