near-dapp

NEAR dApp

上流ドキュメント

• Web3 アプリのクイックスタート — 公式の初めての dApp ガイド
• ウォレットコネクター — ここで使用する @hot-labs/near-connect コネクターの公式ドキュメント
• ウォレットログインのチュートリアル
• create-near-app リポジトリ — スキャフォールディングツールのソース（検証済みテンプレート：auction、auction-adv。--help の内容が正式な情報です）

選択ガイド

次に従うパスを判断します。

パス A：新規プロジェクト

NEAR dApp をゼロから作成する場合です。

1. references/create-near-app.md を読みます
2. スキャフォールディングを実行します。

npx create-near-app@latest

または、引数を指定します。

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

フレームワークの選択肢： vite-react | next-app | next-page コントラクトの選択肢： rs（Rust）| ts（TypeScript）

3. スキャフォールディングしたアプリでウォレット接続が必要な場合は、パス B も実行します。

パス B：既存のプロジェクト

既存の React アプリに NEAR ウォレット接続を追加する場合です。

1. React フックの API とパターンについて、references/near-connect-hooks.md を読みます
2. 低レベルのウォレット API または React 以外の連携が必要な場合は、references/near-connect.md も読みます

クイックセットアップ：

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();

パス C：React 以外または Vanilla JS

React フックを使わずに、@hot-labs/near-connect を直接使用します。

1. 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();

主なパターン

• コントラクトの状態を読み取る（ウォレット不要）：viewFunction({ contractId, method, args })
• コントラクトに書き込む（ウォレットが必要）：callFunction({ contractId, method, args, deposit })
• NEAR を送金する：transfer({ receiverId, amount })
• NEAR ↔ yoctoNEAR：near-api-js の nearToYocto() / yoctoToNear() を使用します
• 1 NEAR = "1000000000000000000000000" yoctoNEAR
• デフォルトのガス量："30000000000000"（30 TGas）