Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Slash のご紹介と WalletConnect V2 対応について

Yagi
June 22, 2023

Slash のご紹介と WalletConnect V2 対応について

Web3 @ Startup Loft #4 -Tokyo Blockchain Tech Meetup- での登壇資料
https://aws-startup-lofts.com/apj/loft/tokyo/event/af73789e-25ae-4f1f-bf9f-57337cea0c62

Yagi

June 22, 2023
Tweet

Other Decks in Technology

Transcript

  1. TOKYO BLOCKCHAIN TECH MEETUP 2023 Slash のご紹介と WalletConnect V2 対応について

    + AWS活用の目的 Copyright © 2023 Slash Fintech Limited All Rights Reserved. 1 Tatsuya Yagi, CTO at Slash Fintech Limited June 21, 2023
  2. 2 内容についての注意点 • 本資料では、2023 年 6 月 19 日 時点の内容についてご説明しています。

    • 本プレゼンテーションの内容は情報提供の目的のみであり、投資助言ではありませ ん。暗号通貨やブロックチェーン技術に関する投資は高いリスクを伴います。投資決 定は各自の責任で行ってください。 • 本プレゼンテーションの内容は提供する情報の正確性と信頼性を確保するよう努め ますが、その正確性を保証するものではなく、不正確または不作為(不法行為また は契約その他)から生じるいかなる損失または損害に対しても責任を負いません。 Copyright © 2023 Slash Fintech Limited All Rights Reserved.
  3. • Yagi • CTO • ex-AWS Japan SA • それ以前はアプリ屋

    3 自己紹介 & チーム @yagi_slash COO : @tokio_slash https://twitter.com/tokio_slash VPoE : @kyohei_nft https://twitter.com/kyohei_nft Engineer & BD 積極採用中 https://twitter.com/SATOSHINSUKE11 CEO : @SATOSHINSUKE11 Copyright © 2023 Slash Fintech Limited All Rights Reserved.
  4. 4 News! 「Alice NFT Project by Slash 」が AL Giveaway

    イベントを開催中 🚀 Twitter を今すぐチェック👇 https://twitter.com/Alice_slash_NFT 「Slash Vaults」Beta Release 間近! Twitter をチェック!👇 https://twitter.com/SlashWeb3 Copyright © 2023 Slash Fintech Limited All Rights Reserved.
  5. 7 分散型流動性を活用する 暗号通貨決済ソリューション Copyright © 2023 Slash Fintech Limited All

    Rights Reserved. あらゆる暗号通貨で支払える 受け取りたい暗号通貨で受け取れる 決済ゲートウェイ ※ 2023.01.28 時点では、Ethereum, BNB Chain, Polygon, Avalanche, Astar, Dogechain 上の ERC20 ベースのトークンでの支払いに対応
  6. 8 Slash Payment はグロース期 EVM系パブリックチェーンの現時点での特徴を活用して大規模導入を推進中。 CEXへの入金 暗号通貨種数の限界を突破 https://help.zoomex.com/ja-JP/article/189 2022年1月時点で MAU

    3000万人 MetaMaskに完全対応 https://metamask.io/ プラットフォームに依存しない ユーザー向けリワード(OAT) https://galxe.com/slash/campaigns 支払はトークン、受け取りは日本円 クレカ決済の隣にトークン決済の選択肢 https://corp.zaif.jp/info/17201/ 上位 3 DEX だけで 1.3兆円(2023年6月18日時点) を超える流動性TVLを活用 https://defillama.com/protocols/dexes Copyright © 2023 Slash Fintech Limited All Rights Reserved.
  7. 9 NFT をキーに、あらゆる暗号通貨を Deposit , Withdraw, TimeLock できる。 Deposit された暗号通貨は、Slash

    Payment での支払に使用でき、貯めている 間はレンディングを行うことができる。 Copyright © 2023 Slash Fintech Limited All Rights Reserved. ※ 2023.06.21 時点では開発中で、 Beta Relasesに向けた最終調整中です ※対応する NFT(Non Fungible Token)規格は ERC721 のみをサポートしています。 Coming soon …
  8. 10 NFT 保有者 2.4 億人を DeFi ユーザーに DeFi MAU 2.5百万人、NFT

    保有者数の約 1/100。 アクティブDeFiユーザーは 2.5百万人 2023年5月時点 https://dune.com/rchen8/defi-users-over-time NFT 保有者数の世界平均は3% = 約2.4億人 2022年9月時点 https://www.statista.com/statistics/1297745/defi-user-number/ Web3 Gamingにより更に拡大が期待される Copyright © 2023 Slash Fintech Limited All Rights Reserved.
  9. 11 Slash Vaults が実現する世界 NFTを持っていれば利用可能。暗号通貨を自ら Deposit できることに加え、Time Lock した SVL(Slash

    Vision Labs Token)量に応じたReward, レンディングプロトコルからの Reward, 第三者からの Airdrop によって自動 的に暗号通貨が増えていく。 Withdraw もできるし、Slash Payment でも使える。 Deposit Withdraw Slash Payment Airdrop Withdraw to pay Lending Reward Time Lock Reward Copyright © 2023 Slash Fintech Limited All Rights Reserved.
  10. 12 その他のプロダクト Alice NFT Project https://twitter.com/Alice_slash_NFT Slash Payment Shopify Integration

    開発中 Slash Gift Card Store 開発中 クリエイティブエージェンシーと プロモーション動画、Swag制作 Copyright © 2023 Slash Fintech Limited All Rights Reserved.
  11. 18 MetaMask の WalletConnect V2 への対応状況 Slash <> Consensys の直通

    Slack にて、6/13 に MetaMask から WalletConnect に正式にサポートを提出済 みとの連絡をもらうも ... - 6/13 : WalletConnect V2 対応を正式にサブ ミット。6/16に承認されるとのこと (Consensysの担当チームより) - 6/19 : WalletConnect Explorer には未だ掲載 されていない - Not sure if at the same time for Android and iOS. Most likely first Android and then iOS と のこと WalletConnect Explorer 6/19 時点 V2 に MetaMask は出てこない https://walletconnect.com/explorer?type=wallet&version=2&page=1 Copyright © 2023 Slash Fintech Limited All Rights Reserved.
  12. 19 MetaMask の WalletConnect v2 への対応状況 Slash <> Consensys の直通

    Slack にて、6/13 に MetaMask から WalletConnect に正式にサポートを提出済 みとの連絡をもらうも ... - 6/13 : WalletConnect v2 対応を正式にサブ ミット。6/16に承認されるとのこと (Consensysの担当チームより) - 6/19 : WalletConnect Explorer には未だ掲載 されていない - Not sure if at the same time for Android and iOS. Most likely first Android and then iOS と のこと WalletConnect Explorer 6/19 時点 V2 に MetaMask は出てこない https://walletconnect.com/explorer?type=wallet&version=2&page=1 モバイルアプリ対応は間に合 わないかも!? Copyright © 2023 Slash Fintech Limited All Rights Reserved.
  13. 20 著名 dApps での Wallet サポート状況 6/19時点。いずれも MetaMask や Coinbase

    Wallet などの著名 Wallet は個別にサポートしている。 Etherscan V1 と V2 両方サポート https://etherscan.io/address/0x388c818ca8b9251b393131c08a736a67cc b19297#readContract Uniswap V2 のみサポート https://app.uniswap.org/#/swap curve.fi blocknative 経由で V1 のみサポート https://app.uniswap.org/#/swap - PancakeSwap … V1 のみサポート - Galxe … V1 のみサポート - Dapp Radar … V1 のみサポート Copyright © 2023 Slash Fintech Limited All Rights Reserved.
  14. 21 著名 dApps での Wallet サポート状況 6/19時点。いずれも MetaMask や Coinbase

    Wallet などの著名 Wallet は個別にサポートしている。 Etherscan V1 と V2 両方サポート https://etherscan.io/address/0x388c818ca8b9251b393131c08a736a67cc b19297#readContract Uniswap V2 のみサポート https://app.uniswap.org/#/swap curve.fi blocknative 経由で V1 のみサポート https://app.uniswap.org/#/swap - PancakeSwap … V1 のみサポート - Galxe … V1 のみサポート - Dapp Radar … V1 のみサポート MetaMask への導線は 個別に準備が必要そう Copyright © 2023 Slash Fintech Limited All Rights Reserved.
  15. 22 MetaMask Connect の実装パターン 使用可能なライブラリは複数あるが、どれも辛みがあった。 - window.ethereum.request をそのまま使う - web3.js

    を使う - ethers.js を使う - wagmi を使う - MetaMask SDK を使う - viem を使う - Thirdweb SDK を使う - WalletConnect V1 を使う Copyright © 2023 Slash Fintech Limited All Rights Reserved.
  16. 23 MetaMask Connect の実装パターン 使用可能なライブラリは複数あるが、どれも辛みがあった。 - window.ethereum.request をそのまま使う -> さすがにWrapperなしで実装したくはない

    - web3.js を使う -> Slash Payment で使用していたが、ethers.js, viem 台頭する今、依存し続けたくない。 - ethers.js を使う -> Slash Payment で使用していたが、provider 周りは web3.js に依存していたので大幅な改修が必要。また最 新版 ethers.js v6 はまだまだ不安定なので v5 を使わないと危険。 - wagmi を使う -> デフォルトライブラリがReactベース(Slashは今はVuejs)。wagmi 0系は ethers.js で動くが wagmi 1系 は web3.js, ethers.js と互換性のない viem の使用が必須? - MetaMask SDK を使う -> 2022年12月末検証時点では接続確立レイテンシが他と比べて大きかった(10秒以上差があることも) - viem を使う -> ライブラリとして未成熟。web3.js, ethers.js と互換性なし。ただしデファクトになりつつあるwagmi 1系では必 要... - Thirdweb SDK を使う -> Reactベース。Vuejsで使えるかどうか調べきれず - WaletConnect v1 を使う -> Browser Extension での導線が存在せず、モバイルデバイス上での導線しかない。そもそもSunset… Copyright © 2023 Slash Fintech Limited All Rights Reserved.
  17. 24 MetaMask Connect の実装パターン 使用可能なライブラリは複数あるが、どれも辛みがあった。 - window.ethereum.request をそのまま使う -> さすがにWrapperなしで実装したくはない

    - web3.js を使う -> Slash Payment で使用していたが、ethers.js, viem 台頭する今、依存し続けたくない。 - ethers.js を使う -> Slash Payment で使用していたが、provider 周りは web3.js に依存していたので大幅な改修が必要。また最 新版 ethers.js v6 はまだまだ不安定なので v5 を使わないと危険。 - wagmi を使う -> デフォルトライブラリがReactベース(Slashは今はVuejs)。wagmi 0系は ethers.js で動くが wagmi 1系 は web3.js, ethers.js と互換性のない viem の使用が必須? - MetaMask SDK を使う -> 2022年12月末検証時点では接続確立レイテンシが他と比べて大きかった(10秒以上差があることも) - viem を使う -> ライブラリとして未成熟。web3.js, ethers.js と互換性なし。ただしデファクトになりつつあるwagmi 1系では必 要... - Thirdweb SDK を使う -> Reactベース。Vuejsで使えるかどうか調べきれず - WaletConnect v1 を使う -> Browser Extension での導線が存在せず、モバイルデバイス上での導線しかない。そもそもSunset… どれもつらい Copyright © 2023 Slash Fintech Limited All Rights Reserved.
  18. 25 モバイルデバイス上での MetaMask 画面遷移パターン ※MMM = MetaMask Mobile - dApps

    を MMM Browser で使用するパターン - Web3.givenProvider.eth.requestAccounts() を使用すると、この 導線になる。 - ユーザーは Wallet 接続画面を二回見ることになり、決済完了後も 自動的に元の画面に戻ることはない。 UXが悪い。 - ブラウザが変わるので色々面倒(セッション共有できないので加盟店 サイト側でのログインが維持できないなど) - MMM Browser は window.open が undefined な Webview - 以上の理由からこの方法は避けたい - dApps を Default Browser(Safari, Chromeなど) で使用するパターン - WalletConnect V1, MetaMask SDK を使用すると、この導線にな る。 - ユーザーは Connect Wallet や Approval, Sign のときだけMMM で行うが、操作後は自動的に元アプリに戻る - この動作をする実装方法をとりたい。 Copyright © 2023 Slash Fintech Limited All Rights Reserved.
  19. 26 モバイルデバイス上での MetaMask 画面遷移パターン ※MMM = MetaMask Mobile - dApps

    を MMM Browser で使用するパターン - Web3.givenProvider.eth.requestAccounts() を使用すると、この 導線になる。 - ユーザーは Wallet 接続画面を二回見ることになり、決済完了後も 自動的に元の画面に戻ることはない。 UXが悪い。 - ブラウザが変わるので色々面倒(セッション共有できないので加盟店 サイト側でのログインが維持できないなど) - MMM Browser は window.open が undefined な Webview - 以上の理由からこの方法は避けたい - dApps を Default Browser(Safari, Chromeなど) で使用するパターン - WalletConnect V1, MetaMask SDK を使用すると、この導線にな る。 - ユーザーは Connect Wallet や Approval, Sign のときだけMMM で行うが、操作後は自動的に元アプリに戻る - この動作をする実装方法をとりたい。 WalletConnect V1 が動き続け てくれるのが一番楽なのにorz Copyright © 2023 Slash Fintech Limited All Rights Reserved.
  20. 27 WalletConnect V2 への移行パス Dapps の移行元構成は 12 種類* 例示されており、それぞれにおいて移行パスが異なる。 *2023年6月19日時点

    https://docs.walletconnect.com/2.0/advanced/migration-from-v1.x/dapps 12種類の移行元構成例と、移行方法が説明されてい る。 Copyright © 2023 Slash Fintech Limited All Rights Reserved.
  21. 28 WalletConnect V2 への移行パス Dapps の移行元構成は 12 種類* 例示されており、それぞれにおいて移行パスが異なる。 ※

    2023年6月19日時点 https://docs.walletconnect.com/2.0/advanced/migration-from-v1.x/dapps 12種類の移行元構成例と、移行方法が説明されている。 過渡期みがすごい Copyright © 2023 Slash Fintech Limited All Rights Reserved.
  22. 29 Slash で WalletConnect V2 対応方針 6/19時点。 - 新規(Slash Vaults

    など)の場合は、ethers.js v5, wagmi v0.12.x, web3modal 構成 で WalletConnect V2 のみサポート。Beta 期間にそれで事足りるか検証。 - 既存(Slash Payment など)の場合は、ethers.js v5, wagmi v0.12.x, web3modal 構成 で WalletConnect V2 をサポート。ただし既存実装の MetaMask 専用導線と WalletConnect V1 も 平行してサポート - 周辺ライブラリの継続的なウォッチ( Viem の成熟度など) Copyright © 2023 Slash Fintech Limited All Rights Reserved. Tips - Vuejsを使っていると wagmi/core だけを使用することになるが、 wagmi/core には v0.12.x は存在しない。そのため wagmi/core だけ package.json に書くと、WalletConnect V2の公式ドキュメントに記載の通りバージョン指定できているか わかりづらい。そのため package.json 上は "wagmi": "^0.12.x", と宣言し、コード上で wagmi/core から import するよう実 装するほうがわかりやすい。 - 参照処理はサーバーサイドに寄せることで、フロントエンドライブラリの変更の影響を受けにくくできる。 方針
  23. dApps 開発はどうしても 3rd party に多く依存する 31 - 前述のとおり、フロントエンドで依存するライブラリの選定が非常に複雑 - その上、他にも以下のような

    3rd party tools にも依存している。これらのUpdateを把握し続ける 必要がある。 RPCノードプロバイダ ・Infura ・Alchemy ・QuickNode SaaS ・Bitquery ・Moralis ・Coinmarketcap ・Weglot ・Sentry ・center.dev ・1 inch ・WalletConnect ・Firebase ・Fireblocks ・Datadog DEX Web2 & Smart Contract ・Uniswap V2 ・Uniswap V3 ・SushiSwap ・PancakeSwap ・BiSwap ・QuickSwap ・Trader Joe ・Pangolin ・DogeSwap V2 ・KibbleSwap ・YodedexRouter ・1 inch クラウド ・AWS ・Cloudflare ・Vercel Copyright © 2023 Slash Fintech Limited All Rights Reserved.
  24. 32 dApps 開発はどうしても 3rd party に多く依存する - 前述のとおり、フロントエンドで依存するライブラリの選定が非常に複雑。 - その上、他にも以下のような

    3rd party tools にも依存している。これらのUpdateを把握し続ける 必要がある。 RPCノードプロバイダ ・Infura ・Alchemy ・QuickNode SaaS ・Bitquery ・Moralis ・Coinmarketcap ・Weglot ・Sentry ・center.dev ・1 inch ・WalletConnect ・Firebase ・Fireblocks ・Datadog DEX Web2 & Smart Contract ・Uniswap V2 ・Uniswap V3 ・SushiSwap ・PancakeSwap ・BiSwap ・QuickSwap ・Trader Joe ・Pangolin ・DogeSwap V2 ・KibbleSwap ・YodedexRouter ・1 inch クラウド ・AWS ・Cloudflare ・Vercel やらなければならないことを 減らしたい Copyright © 2023 Slash Fintech Limited All Rights Reserved.
  25. 34 利用しているAWSサービス - プロダクト毎にAWSアカウントを分けており、全アカウントをほぼ CTO一人で管理しているので Control Tower, IAM Identity Center

    は欠かせない - 各アカウントには、テスト環境と本番環境合わせて 4 環境がホストされるのが一般的なので、 VPC 数でいうと 20 以上になる。これらの管理には AWS CDK を使用 - シード投資家の MZ Web3 Fund* 様のおかげで AWS Activate が有効化されているため、大き なクレジットに加えて、 SaaS のディスカウントも積極的に利用( Notion, Slack, Datadog, Vercel, QuickNode など) - 利用サービス - Fe : CloudFront w/ WAF -> S3 || Amplify Hosting - Be : ALB -> ECS Fargate -> Aurora || API Gateway -> S3 - Worker & Batch : ECS Fargate -> RDS Proxy -> Aurora, DynamoDB and S3 - その他 : ECR, QuickSight, CloudWatch Family, Code Family, Lambda, Kinesis Firehose, Secrets Manager, Parameter Store, Glue, Athena, Lightsail, Workmail - 検証予定サービス - CodeGuru, CodeWhisperer, Kendra, Neptune, その他 Generative AI系 *https://web3.mzfund.co.jp/ Copyright © 2023 Slash Fintech Limited All Rights Reserved.
  26. 36 まとめ - Slash は「暗号通貨決済」を軸にオンチェーン上での可能性を追求している集団です。 - WalletConnect は超有用だが短期的には V2 だけに依存するのは危険。MetaMask

    のモバイルアプリ対応は 6/28 の V1 Sunset には間に合わないかもしれない。周辺ラ イブラリ郡はアップデート真っ只中。フロントエンドエンジニアの継続的リソース確保が 重要。 - AWS 活用して仕事を減らしまくって大事なところに注力しましょう。 Copyright © 2023 Slash Fintech Limited All Rights Reserved.
  27. Contact us 37 DEV VERSE PTE. LTD. (SINGAPORE) SLASH FINTECH

    LIMITED (BVI Company Number: 2083138) Residence Address/ 4th Floor, Water’s Edge Building, Meridian Plaza, Road Town, Tortola, British Virgin Islands Residence Address/ 18 Robinson Road, #20-02 18 Robinson, Singapore 048547 Aoyama Sogo Accounting Office Singapore Pte.Ltd. Development /Shareholder Management Headquarter Financial & Legal Support Slash One Asia Lawyers/Tetsuo Kurita / DEV VERSE Copyright © 2023 Slash Fintech Limited All Rights Reserved.