アーキテクチャ¶

概要¶

このウィジェットは ReScript からコンパイルされた自己完結型の React コンポーネントです。サーバーレスのオンチェーン直接送金を行います。訪問者は Polygon 上の JPYC を受取アドレスのウォレットへ直接送金し、バックエンドが資金を預かることは一切ありません。MetaMask が利用できない場合は、モバイルウォレットがスキャンできる EIP-681 QR コードへとグレースフルにフォールバックします。

主要コンポーネント¶

ソースは src/ 配下のレイヤーに整理されています:

レイヤー	責務
`Entry.res`	公開エントリーポイント — `default` エクスポートと `~variant` プロップ。
`Theme.res`	バリアント（`rich` / `simple`）ごとに集約されたスタイル。
`bindings/`	外部ライブラリへの最小限のバインディング: `Viem`、`BrowserEthereum`、`QRCode`、`Clipboard`。
`domain/`	純粋な値とロジック: `Chain`、`Jpyc`、`TipAmount`、`PaymentUri`。副作用はありません。
`effects/`	副作用: `WalletProvider` 抽象とその `MetaMaskProvider` 実装。
`components/`	UI: `TipJar`、`AmountSelector`、`ConnectButton`、`TxStatus`、`QrFallback`。

設計原則¶

サーバーレス / 資金を預からない（non-custodial） — すべての送金はオンチェーンで直接行われ、受取先は任意のウォレットアドレスです。
層ごとの純粋性 — domain/ は純粋なロジックを保持し、effects/ は副作用を分離し、bindings/ は外部ライブラリとの接触面を最小限に保ちます。
グレースフルフォールバック — MetaMask がなくても、ウィジェットは EIP-681 QR コードを介して動作するため、モバイルウォレットのユーザーが行き詰まることはありません。

送金フロー¶

        graph TD
    A[Visitor] --> B[AmountSelector]
    B --> C{MetaMask available?}
    C -->|Yes| D[ConnectButton → MetaMaskProvider]
    D --> E[viem: JPYC transfer on Polygon]
    E --> F[TxStatus]
    C -->|No| G[QrFallback: EIP-681 QR]
    G --> H[Mobile wallet sends transfer]

QR フォールバック仕様¶

スキーム: EIP-681
フォーマット: ethereum:<JPYC>@137/transfer?address=<recipient>&uint256=<amount-wei>
金額の扱い: プリセットまたはカスタム金額が指定されている場合は uint256 クエリが含まれます。金額が入力されていない場合はクエリが省略され、ウォレット側で入力が求められます。
レンダリング: qrcode.react の QRCodeSVG（純粋な SVG、SSR セーフ）。