USDCでガス代を支払えるデモサイトを作った
デモの動かし方と挙動
USDCをガス代として、USDCを送金するWebアプリ
※リポジトリ
※挙動の様子
1. 環境変数を設定する
.envファイルを作成する
NEXT_PUBLIC_BUNDLER_PREFIX = "https://public.pimlico.io/v2/"
NEXT_PUBLIC_BASE_SEPOLIA_USDC = '0x036CbD53842c5426634e7929541eC2318f3dCF7e'
NEXT_PUBLIC_BASE_SEPOLIA_PAYMASTER = '0x31BE08D380A21fc740883c0BC434FcFc88740b58'
NEXT_PUBLIC_MAX_GAS_USDC = "1"
NEXT_PUBLIC_PRIVATEKEY = "0x..."
2. Next.jsのWeb UIを立ち上げる
npm run dev
3. Web UI上で送金を行う
以下動画のような流れとなる（最上部のものを再掲）
- Wallet接続
- 送金
どんな仕組みになっているか
そもそものAccount Abstraction
登場人物
| No. | 名称 | 種別 | 概要 |
|---|---|---|---|
| 1 | ユーザーウォレット | EOA | いわゆるウォレット |
| 2 | Bundler | EOA | 各ユーザーウォレットからの依頼をまとめてTxを実行する |
| 3 | Entry Point | Contract | Txをオンチェーン上で検証・実行依頼する関所 |
| 4 | Walletコントラクト | Contract | ユーザーウォレットごとに作られるコントラクト |
| 5 | Paymaster | Contract | Walletコントラクトのガス代を肩代わりしてくれる |
処理の流れ① 〜基本形（Paymasterを使わない）〜
正確には違うが、おおよその処理はこんな感じ
1.ユーザーウォレットからBundlerへ取引実行依頼
2.BundlerがUser Operationをまとめて、Entry Pointへ投げる
3.Entry PointがWalletコントラクトへ実行して良いかチェックする
4.Entry PointがWalletコントラクトを実行し、User Operationを処理する
処理の流れ② 〜Paymasterがガス代を肩代わり〜
まず、上記①の1の前の段階で、PaymasterからEntry Pointへガス代のDepositを行う
次に、3の前にPaymasterへガス代をPaymasterへ肩代わりさせて良いかEntry Pointへチェックを行う
最後のトランザクション実行においては、PaymasterがDepositしたものをガス代として使用する
今回のCircle提供のPaymasterを使うと
Circleが用意しているPaymasterにて、Walletコントラクトよりガス代分相当のUSDCを利用料として徴収している
実装してみての感想
便利だなと思った点
ハッカソンやプロジェクトに協力した際、様々なチェーンでステーブルコインをもらう。この時、メインどころのチェーンに移したい際にそもそものガス代分のネイティブトークンを用意しなければならないのだが、このガス代用意が不要となる。
よって、ステーブルコイン受け取り → 使う といった基本の動線がスムーズになる
考えどころだなと思った点
Paymasterが利用できるための権限を得るUIUXが頭の使い所だと感じた
今回は、WalletコントラクトにUSDCを持たせる必要があったが、そもそもWalletに送金する手間が生じる。
この動線をなるべくスマートにやりたい。
ジャストアイデアではあるが、以下がパッと思いついたところ
- ガス代の代わりに用いるトークンについて、クレジットカードなどで購入させてWalletコントr買うとに入金する（Paypayチャージするような動線）
- 利用料無料となるためのNFTを購入してもらう
- 現金でサブスクリプション結んで、Paymaster運営側がホワイトリスト登録
Discussion