mcpField
N
near-dapp

near-dapp

github.com/nearDevelopment1674 installsUpdated 4w ago
Repository

About near-dapp

A skill for creating NEAR dApps and adding wallet connectivity to existing React or non-React apps. It routes development tasks to scaffolding, React hooks, or the lower-level connector setup.

Key features

  1. 01Create apps with create-near-app
  2. 02React wallet connection with hooks
  3. 03Non-React wallet connector setup
  4. 04Read and write contract state

Use cases

  1. 01Start a NEAR dApp from scratch
  2. 02Add wallet login to a React app
  3. 03Connect a wallet in vanilla JavaScript
  4. 04Read or call NEAR contract methods

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/near/agent-skills --skill near-dapp

After installing, type/near-dappin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
create-near-app.md
near-connect-hooks.md
near-connect.md

Details

From the project README

NEAR dApp

Upstream Documentation

Decision Router

Determine which path to follow:

Path A: New Project

User wants to create a new NEAR dApp from scratch.

  1. Read references/create-near-app.md
  2. Run scaffolding:
npx create-near-app@latest

Or with arguments:

npx create-near-app my-app --frontend vite-react --contract rs --install

Framework options: vite-react | next-app | next-page Contract options: rs (Rust) | ts (TypeScript)

  1. If user needs wallet connection in the scaffolded app, also follow Path B.
Path B: Existing Project

User wants to add NEAR wallet connection to an existing React app.

  1. Read references/near-connect-hooks.md — React hooks API and patterns
  2. If user needs low-level wallet API or non-React integration, also read references/near-connect.md

Quick setup:

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

// 1. Wrap app root with NearProvider
import { NearProvider } from 'near-connect-hooks';

<NearProvider config={{ network: 'mainnet' }}>
  <App />
</NearProvider>

// 2. Use hook in components
import { useNearWallet } from 'near-connect-hooks';

const { signedAccountId, signIn, signOut, viewFunction, callFunction } = useNearWallet();
Path C: Non-React or Vanilla JS

Use @hot-labs/near-connect directly without React hooks.

  1. Read references/near-connect.md
npm install @hot-labs/near-connect

import { NearConnector } from "@hot-labs/near-connect";

const connector = new NearConnector({ network: "mainnet" });
connector.on("wallet:signIn", async (t) => {
  const wallet = await connector.wallet();
  const address = t.accounts[0].accountId;
});
await connector.connect();

Key Patterns

  • Read contract state (no wallet): viewFunction({ contractId, method, args })
  • Write to contract (wallet required): callFunction({ contractId, method, args, deposit })
  • Transfer NEAR: transfer({ receiverId, amount })
  • NEAR ↔ yoctoNEAR: Use nearToYocto() / yoctoToNear() from near-api-js
  • 1 NEAR = "1000000000000000000000000" yoctoNEAR
  • Default gas: "30000000000000" (30 TGas)

Comments

Markdown supported