near-dapp_skill

Overview

This skill helps you build NEAR Protocol dApps and integrate wallet functionality into web apps. It supports scaffolding new projects with create-near-app, adding React wallet hooks via near-connect-hooks, and using the low-level @hot-labs/near-connect API for non-React or advanced flows. You can read contract state, call transactions, transfer NEAR, and handle signing/connection flows.

How this skill works

For new projects, run the create-near-app scaffolder to generate Vite+React or Next.js templates and optional Rust/TypeScript contracts. For existing apps, install near-connect-hooks and wrap your root with NearProvider, then use useNearWallet() to sign in/out, read view functions, and call contract methods. For vanilla JS or non-React environments, use @hot-labs/near-connect to create a NearConnector, subscribe to wallet events, and call wallet/connect APIs directly.

When to use it

• Create a new NEAR dApp quickly with a configured frontend and contract template.
• Add NEAR wallet sign-in/sign-out, contract calls, and transaction signing to an existing React app.
• Integrate NEAR features into non-React or vanilla JavaScript projects using a connector.
• Perform contract reads (view) without requiring user wallet access.
• Execute write operations (contract calls, transfers) that require user signatures.

Best practices

• Develop and test on testnet before deploying to mainnet to avoid lost funds.
• Wrap the app root with NearProvider when using React hooks to centralize config.
• Handle async errors and wallet popups gracefully; always check signedAccountId before write calls.
• Use near-api-js utilities for reliable conversions between NEAR and yoctoNEAR.
• Supply appropriate gas and deposit for contract calls; default gas is 30000000000000 (30 TGas).

Example use cases

• Scaffold a new Vite+React NEAR dApp with a Rust contract using create-near-app.
• Add a Sign in with NEAR button and signer flows to an existing React marketplace using near-connect-hooks.
• Implement a token transfer UI that converts NEAR to yoctoNEAR before calling transfer().
• Integrate a serverless function that reads contract state with viewFunction and displays balances.
• Build a custom wallet flow in a vanilla JS site using NearConnector and wallet event listeners.