🎯

near-connect-hooks

🎯Skill

from near/agent-skills

What it does

Provides React hooks for seamless NEAR Protocol wallet integration, enabling wallet connection, smart contract interactions, and token transfers in React/Next.js applications.

📦

Part of

near/agent-skills(7 items)

near-connect-hooks

Installation

Quick InstallInstall with npx

npx skills add near/agent-skills

Quick InstallInstall with npx

npx skills add near/agent-skills --skill <skill-name>

📖 Extracted from docs: near/agent-skills

Need more details? View full documentation on GitHub →

3Installs

AddedFeb 4, 2026

View on GitHub Back to Skills

Skill Details

SKILL.md

React hooks for NEAR Protocol wallet integration using @hot-labs/near-connect. Use when building React/Next.js apps that need NEAR wallet connection, smart contract calls (view and change methods), token transfers, access key management, or NEP-413 message signing. Triggers on queries about NEAR wallet hooks, NearProvider setup, useNearWallet hook, or NEAR dApp React integration.

Overview

# near-connect-hooks

React hooks library for NEAR wallet integration built on @hot-labs/near-connect.

Installation

```bash

npm install near-connect-hooks @hot-labs/near-connect near-api-js

```

Quick Start

1. Wrap App with NearProvider

```tsx

import { NearProvider } from 'near-connect-hooks';

function App() {

return (

);

}

```

2. Use the Hook

```tsx

import { useNearWallet } from 'near-connect-hooks';

function WalletButton() {

const { signedAccountId, loading, signIn, signOut } = useNearWallet();

if (loading) return

;

if (!signedAccountId) return ;

return ;

}

```

Core API

Hook Properties

| Property | Type | Description |

|----------|------|-------------|

| signedAccountId | string | Connected account ID or empty string |

| loading | boolean | Initialization state |

| provider | JsonRpcProvider | Direct RPC provider access |

| connector | NearConnector | Direct connector access |

Authentication

```tsx

const { signIn, signOut } = useNearWallet();

await signIn(); // Opens wallet selector

await signOut(); // Disconnects wallet

```

View Functions (Read-Only)

```tsx

const { viewFunction } = useNearWallet();

const result = await viewFunction({

contractId: 'contract.near',

method: 'get_data',

args: { key: 'value' } // optional

});

```

Call Functions (State Changes)

```tsx

const { callFunction } = useNearWallet();

await callFunction({

contractId: 'contract.near',

method: 'set_data',

args: { key: 'value' },

gas: '30000000000000', // optional, default: 30 TGas

deposit: '1000000000000000000000000' // optional, 1 NEAR in yoctoNEAR

});

```

Transfers

```tsx

const { transfer } = useNearWallet();

await transfer({

receiverId: 'recipient.near',

amount: '1000000000000000000000000' // 1 NEAR in yoctoNEAR

});

```

Account Info

```tsx

const { getBalance, getAccessKeyList, signedAccountId } = useNearWallet();

const balance = await getBalance(signedAccountId); // bigint in yoctoNEAR

const keys = await getAccessKeyList(signedAccountId); // AccessKeyList

```

NEP-413 Message Signing

```tsx

const { signNEP413Message } = useNearWallet();

const signed = await signNEP413Message({

message: 'Verify ownership',

recipient: 'app.near',

nonce: crypto.getRandomValues(new Uint8Array(32))

});

```

Access Key Management

```tsx

const { addFunctionCallKey, deleteKey } = useNearWallet();

// Add function call key

await addFunctionCallKey({

publicKey: 'ed25519:...',

contractId: 'contract.near',

methodNames: ['method1', 'method2'], // empty = all methods

allowance: '250000000000000000000000' // optional

});

// Delete key

await deleteKey({ publicKey: 'ed25519:...' });

```

Advanced Usage

Low-Level Transactions

```tsx

import { useNearWallet, Actions } from 'near-connect-hooks';

const { signAndSendTransaction, signAndSendTransactions } = useNearWallet();

// Single transaction with multiple actions

await signAndSendTransaction({

receiverId: 'contract.near',

actions: [

Actions.functionCall('method', { arg: 'value' }, '30000000000000', '0'),

Actions.transfer('1000000000000000000000000')

]

});

// Multiple transactions

await signAndSendTransactions([

{ receiverId: 'contract1.near', actions: [Actions.transfer('1000')] },

{ receiverId: 'contract2.near', actions: [Actions.functionCall('m', {}, '30000000000000', '0')] }

]);

```

Action Builders

```tsx

import { Actions } from 'near-connect-hooks';

Actions.transfer(amount)

Actions.functionCall(methodName, args, gas, deposit)

Actions.addFullAccessKey(publicKey)

Actions.addFunctionCallKey(publicKey, receiverId, methodNames, allowance)

Actions.deleteKey(publicKey)

```

Provider Configuration

```tsx

network: 'mainnet', // 'testnet' | 'mainnet'

providers: {

mainnet: ['https://free.rpc.fastnear.com'],

testnet: ['https://test.rpc.fastnear.com']

}

}}>

```

Reference Files

[API Reference](references/api-reference.md) - Full type definitions and method signatures
[Examples](references/examples.md) - Complete integration examples

More from this repository6

🎯

near-api-js🎯Skill

Enables comprehensive NEAR blockchain interactions in JavaScript/TypeScript, supporting account management, transactions, smart contract calls, and cryptographic operations.

🎯

near-smart-contracts🎯Skill

near-smart-contracts skill from near/agent-skills

🎯

near-connect🎯Skill

I apologize, but you haven't provided the actual description or context for the "near-connect" skill. Without seeing the specific details about what the skill does, I can't generate an accurate one...

🎯

near-ai🎯Skill

near-ai skill from near/agent-skills

🎯

near-kit🎯Skill

Enables seamless TypeScript interactions with NEAR Protocol blockchain, providing type-safe contract calls, transaction building, and wallet integration.

🎯

near-intents🎯Skill

Enables cross-chain token swaps across EVM, Solana, NEAR, TON, Stellar, and Tron using a simple 1Click REST API integration.