near-dapp
Build NEAR Protocol dApps. Use for: (1) creating new NEAR dApps with `create-near-app` (Vite+React, Next.js), (2) adding NEAR wallet connection to existing apps with `@hot-labs/near-connect` and `near-connect-hooks`, (3) building frontend UI for NEAR smart contracts, (4) integrating wallet sign-in/sign-out, contract calls, and transaction signing into web applications.
来源信息
- 仓库
- near/agent-skills
- 最近来源活动
- 2026年2月17日 15:31
- 检测到的 SKILL.md 语言
- 英语
- 星标
- 14
- 分支
- 3
安装方式
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
检查来源文件
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
文件资源管理器
4 个文件正在显示 SKILL.md
SKILL.md
来源说明 · 只读预览- name
- near-dapp
- description
- Build NEAR Protocol dApps. Use for: (1) creating new NEAR dApps with `create-near-app` (Vite+React, Next.js), (2) adding NEAR wallet connection to existing apps with `@hot-labs/near-connect` and `near-connect-hooks`, (3) building frontend UI for NEAR smart contracts, (4) integrating wallet sign-in/sign-out, contract calls, and transaction signing into web applications.
# NEAR dApp
## 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](references/create-near-app.md)
2. Run scaffolding:
```bash
npx create-near-app@latest
```
Or with arguments:
```bash
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)
3. 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](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](references/near-connect.md)
**Quick setup:**
```bash
npm install near-connect-hooks @hot-labs/near-connect near-api-js
```
```tsx
// 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](references/near-connect.md)
```bash
npm install @hot-labs/near-connect
```
```typescript
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)
在 GitHub 查看