メインコンテンツまでスキップ

Chiaでdappを構築する

DIGのすべてのプリミティブはそれぞれ単独で文書化されています — 足場作り、ページ内ウォレット、読み取りパス、支出、デプロイ。このページは、それらを1つの出荷済みdappにまとめる一本の流れです。 空のフォルダから始め、自分のドメインでChiaメインネット上に動く、ウォレット対応のReactアプリを完成させます。

公開までの流れ全体は無料です — 足場作り、開発、プレビューには一切費用がかかりません。$DIGでの均一なcapsule価格を支払うのはデプロイのステップだけです。

new ──▶ dev ──▶ wire wallet (dig-sdk) ──▶ build a spend (chip35) ──▶ deploy ──▶ custom domain
 free    free          free                       free            capsule price    free

必要なもの​

  • digstore CLIがインストールされていること。
  • Node 18以上とnpm。
  • 資金を入れたChiaウォレット — デプロイのステップでのみ必要です（$DIGでの均一なcapsule価格 + わずかなXCH手数料）。それ以前はすべて無料です。

1. Reactアプリを足場作りする — 無料、チェーンなし​

digstore newは、実行可能でウォレット対応済みのプロジェクトを書き出します。Reactテンプレートを選びましょう。

digstore new vite-react my-dapp
cd my-dapp

Vite + Reactアプリ、dig.toml（output-dir = "dist"、build-command = "npm install && npm run build"）、そしてすでにページ内ウォレットに配線されたApp.jsxが手に入ります。storeはmintされず、何も支出されません — newは純粋にローカルで完結します。

npmがお好みですか？npm create dig-app

npm create dig-app@latest my-dapp -- --template vite-reactは同じテンプレートをnpmから直接足場作りします — JSの入口であり、始めるのにdigstoreのインストールは不要です。5つすべてのテンプレートと2つの入口の比較についてはアプリを足場作りするを参照してください。

2. 実際の読み取りパスに対して開発する — 無料​

digstore dev

devはあなたのビルドを実行し、その出力を本物のchia://読み取りパス（コンパイル → 検証 → 復号）で配信し、window.chia開発用シムを注入するため、本物のウォレットなしでウォレットフローを構築できます。src/App.jsxを編集して保存すると、ページはライブリロードされます — チェーンとの対話も支出も一切発生せず、まさに訪問者が受け取るものが表示されます。

3. SDKでウォレットを配線する — window.chia + WalletConnectフォールバック​

足場はwindow.chiaと直接やり取りしますが、これはDIG Browserの中では完璧に機能します。他のブラウザのユーザーもサポートするために、SDKを追加しましょう。SDKは注入されたwindow.chiaウォレットを優先し、WalletConnect → Sageにフォールバックします。1つの正規化された面の下に隠れているため、ウォレットフローは一度書くだけで済みます。

npm i @dignetwork/dig-sdk
npm i @walletconnect/sign-client   # optional: only for the WalletConnect fallback
// src/App.jsx
import { useState } from "react";
import { ChiaProvider } from "@dignetwork/dig-sdk";

export default function App() {
  const [address, setAddress] = useState(null);

  async function login() {
    // "auto" prefers the injected DIG Browser wallet, else WalletConnect → Sage.
    const provider = await ChiaProvider.connect({
      mode: "auto",
      walletConnect: {
        projectId: import.meta.env.VITE_WC_PROJECT_ID, // a PUBLIC build-time value
        metadata: {
          name: "My DIG dapp",
          description: "Built with @dignetwork/dig-sdk",
          url: "https://my-dapp.example",
          icons: ["https://my-dapp.example/icon.png"],
        },
        onUri: (uri) => console.log("Scan to connect:", uri), // render a QR
      },
    });
    setAddress(await provider.getAddress());
  }

  return (
    <main>
      <h1>My DIG dapp</h1>
      <button onClick={login}>Connect wallet</button>
      {address && <p>Connected: {address}</p>}
    </main>
  );
}

1回のconnect()呼び出しが、DIG Browser内では（QRコードもリレーもなしに）、それ以外の場所ではWalletConnect経由で機能します。provider.backendでどのトランスポートが接続されたかがわかります。メソッド名と結果の形はどちらの場合も同一です — 統合ガイドはwindow.chiaを使うを、正確なメソッド／パラメータ／戻り値／エラーの契約については規範的なwindow.chiaプロバイダー仕様を参照してください。

WalletConnectのプロジェクトIDは公開のビルド時の値です

VITE_WC_PROJECT_IDはあなたのバンドルにコンパイルされ、世界中から読み取り可能です — これはWalletConnectクラウドIDとして正しい扱いです。決してウォレットのシード、デプロイキー、その他の秘密情報をバンドルに入れないでください。capsuleはサーバー側の秘密情報を持たない盲目な静的アーティファクトです。

4. 支出を構築して署名する — SDK経由のchip35 wasm​

あなたのdappがオンチェーンで何かを行う必要があるとき（storeをmintする、メタデータを更新する、CAT決済を構築するなど）、正規のCHIP-0035支出ビルダーで支出を構築し、それをウォレットに渡して署名させます。SDKはそのビルダーを/spendサブパスで再エクスポートしており、支出バンドルを決して自前で組み立てることはありません。

import { ChiaProvider } from "@dignetwork/dig-sdk";
import * as spend from "@dignetwork/dig-sdk/spend"; // the chip35 wasm builder

async function doSpend() {
  spend.init();

  // Build coin spends with the wasm builder, e.g. spend.mintStore(...) /
  // spend.updateStoreMetadata(...) / spend.buildDigPayment(...). The builder is
  // offline and pure — no keys, no network.
  const coinSpends = /* spend.mintStore({ ... }) */ [];

  // Hand them to the wallet to sign (the wallet holds the keys, not your dapp).
  const provider = await ChiaProvider.connect({ mode: "auto" });
  const aggregatedSignature = await provider.signCoinSpends(coinSpends);
  // → combine into a spend bundle and broadcast.
}

これはhubが使っているのと全く同じパターンです。wasmでブラウザ内にバンドルを構築し、ウォレットで署名する。 この支出ビルダーはエコシステム全体にわたる唯一の正規の支出バンドルの源であるため、あなたのdappはhubやCLIとバイト単位で同一の支出を生成します。

検証済みの暗号化されたコンテンツを読み取るには（たとえば、別のstoreのデータをあなたのdapp内にレンダリングするなど）、SDKのDigClientを使います。

import { DigClient } from "@dignetwork/dig-sdk";

const dig = new DigClient();                 // defaults to https://rpc.dig.net
const html = await dig.readText({
  urn: "urn:dig:chia:<storeId>/index.html",
  root: "<onchain-root-hex>",                 // the trust anchor, read from the chain
});

DigClientはブラウザ内でURNの鍵を導出し、オンチェーンのrootに対して包含を検証し、復号します — 配信元のホストは盲目のままです。dig RPCとは？を参照してください。

アクセスに課金しますか？Paywallを使いましょう

収益化のため — コンテンツの支払い解除、あるいはNFT所有によるゲート制御 — SDKには、接続済みのChiaProviderと支出ビルダーを組み合わせ、支払いを手作業で配線せずに済む高レベルの**Paywall**ヘルパーが用意されています。paywall.requestPayment({ amount, owner })はdappのオーナーに支払いを行い受領証を返し、paywall.verifyReceipt(...) / paywall.proveAccess({ nft | collection })がアクセスをゲート制御します。

import { ChiaProvider, Paywall } from "@dignetwork/dig-sdk";

const provider = await ChiaProvider.connect({ mode: "auto" });
const paywall = new Paywall({ provider });
const receipt = await paywall.requestPayment({ amount: 5, owner: "<your-address>" });
if (await paywall.verifyReceipt(receipt)) { /* unlock the content */ }

5. オンチェーンにデプロイする​

ビルドとプレビューは無料です。支出が発生するのはこのステップだけです。まず一度だけstoreを作成します。

digstore init my-dapp --dir dist      # mint the store's first capsule (uniform capsule price + XCH fee)

initはメインネット上にChiaシングルトンをmintします — ランチャーIDがあなたのstore IDになります。それをdig.toml（store-id = "<64-hex>"）にコピーしてください。それ以降は、1つのコマンドで新しいcapsuleを構築・公開できます。

digstore deploy --json                # runs build-command, stages dist/, advances the root

各deployは、均一なcapsule価格で新しい不変のcapsuleを公開します。確定した瞬間、あなたのdappはdig RPC経由で、そのURN / chia://アドレスによって読み取り可能になります — 暗号化され、検証済みで、停止させることは不可能であり、登録も追加の支払いも不要です。（フレンドリーな*.on.dig.netのWebアドレスは、別の任意のステップです — 次のセクションを参照してください。）すべてのコミットでpush-to-deployするには、GitHub Actionsからデプロイするを設定してください。

6. 自分のドメインに載せる​

あなたのstoreはすでにURN / dig://アドレスによって到達可能ですが、フレンドリーなWeb URLのためには名前を登録します。storeが*.on.dig.netサブドメインを得るのは、DIGHUbでハンドルを登録したときです。これは、storeをその名前に固定する、別途有料の登録です（登録がなければ*.on.dig.netアドレスもありません）。代わりに自分が所有するドメインから配信したい場合は、DIGHUb ↗でTLS付きのカスタムドメインを追加してください。ドメインをstoreに向けると、DIGHUbが証明書を処理します。どちらの方法でも、あなたのdappは基盤としては完全に分散化されたままで、人に優しいURLから読み込まれます。

CHIP-54の.digハンドルが実現すれば、storeは人が読みやすい.dig名でもアドレス指定できるようになります。それまでは、DIGHUb経由のカスタムドメインがデプロイをブランド化する方法です。

dappを出荷しました​

空のフォルダから、Chiaメインネット上で自分のドメインに実在する、ウォレット対応のReactアプリまでたどり着きました — 足場作り、ページ内ウォレット、SDK、支出ビルダー、読み取りパス、デプロイというすべてのプリミティブに触れました。完成版はサンプルギャラリーからクローンできます。