クイックスタート

このガイドでは、インストール後に投げ銭ウィジェットを埋め込む手順を説明します。

前提条件

  • インストールが完了していること

  • NEXT_PUBLIC_TIPJAR_RECIPIENT_ADDRESS が設定されているか、プロップとして渡す受取アドレスが用意されていること

ウィジェットを埋め込む

デフォルトエクスポートをインポートし、React ツリーの任意の場所でレンダリングします。

import TipJar from "jpyc-tipjar-widget"

export default function Article() {
  return (
    <article>
      {/* rich (default) */}
      <TipJar />

      {/* simple layout + explicit recipient address */}
      <TipJar variant="simple" recipientAddress="0x..." />
    </article>
  )
}

ReScript から使う

ReScript プロジェクトでは、default エクスポートへのバインディングを 1 つ宣言します。

@module("jpyc-tipjar-widget") @react.component
external make: (
  ~recipientAddress: string=?,
  ~variant: [#rich | #simple]=?,
) => React.element = "default"

let default = make

// call site
<TipJarWidget variant=#simple />

投げ銭の流れ

  1. 訪問者はプリセットの金額を選ぶか、任意の金額を入力します。

  2. MetaMask がインストールされていれば、ウォレットを接続し、Polygon 上で JPYC を受取先へ直接送金します。

  3. MetaMask がない場合は EIP-681 の QR コードが表示され、モバイルウォレットでスキャンして送金します。

サーバーは資金を一切預かりません（サーバーレス・資金を預からない）。すべての送金はオンチェーンかつ直接行われます。

次のステップ