インストール

要件

  • React 19+ — ホストアプリが react と react-dom を提供します（これらは peerDependencies です）。

  • ウォレット — MetaMask ブラウザ拡張機能、または QR フォールバック用の EIP-681 対応モバイルウォレット（MetaMask Mobile、Rainbow など）。

  • Polygon メインネット — 送金は Polygon（chainId 137）上で決済（送金が確定する）されます。

  • Alchemy API キー — Polygon メインネット用の API キーで、ホストアプリの環境変数として設定します。

インストール

お使いのパッケージマネージャーでパッケージを追加します。

pnpm add jpyc-tipjar-widget
# react / react-dom are peerDependencies and must already exist in the host app

viem と qrcode.react は依存関係として自動的にインストールされます。

環境変数を設定する

process.env.NEXT_PUBLIC_* の値はホストアプリのビルド時にインライン展開されます。ホストの .env.local に以下を設定してください。

NEXT_PUBLIC_ALCHEMY_API_KEY=...
NEXT_PUBLIC_TIPJAR_RECIPIENT_ADDRESS=0x...

  • NEXT_PUBLIC_ALCHEMY_API_KEY — Polygon メインネット用の Alchemy API キー。

  • NEXT_PUBLIC_TIPJAR_RECIPIENT_ADDRESS — 投げ銭を受け取るウォレットアドレス。

Tailwind CSS

このウィジェットは Tailwind のユーティリティクラスでスタイリングされています。ホストアプリが Tailwind を使用している場合は、ウィジェットのクラスをスキャン対象に含めてください。

// tailwind.config.js (host app)
module.exports = {
  content: [
    './src/**/*.{js,jsx,res.js}',
    './node_modules/jpyc-tipjar-widget/**/*.js', // add this
  ],
}

動作確認

ページにウィジェットをレンダリングし、マウントされることを確認します。

import TipJar from "jpyc-tipjar-widget"

export default function Page() {
  return <TipJar />
}

MetaMask がインストールされていれば接続ボタンが表示され、そうでなければ EIP-681 の QR フォールバックが表示されます。

トラブルシューティング

  • ウィジェットにスタイルが適用されない — Tailwind の content glob に node_modules/jpyc-tipjar-widget/**/*.js が含まれていることを確認してください。

  • 受取アドレスが指定されていない — recipientAddress をプロップとして渡すか、NEXT_PUBLIC_TIPJAR_RECIPIENT_ADDRESS を設定してください。

  • QR コードが表示されず MetaMask もない — 受取アドレスが有効な Polygon アドレスであることを確認してください。QR はそのアドレス向けの EIP-681 URI をエンコードしています。