Closed2ヶ月前にクローズ20

dynamicを使ってウォレット実装

https://www.dynamic.xyz/
ここら辺をひと通り作ってみてどんな感じか知りたい
サインアップ、ログイン
ログアウト
秘密鍵のimport, export
アカウント削除
所有トークンの表示

トップページ見た感じ基本的なwallet管理の他にここら辺はできるっぽい

いろんなパターンのアクセス制御
- 特定のトークンを所有しているか
- ブロックリストに入っていないか等
apple pay、クレカ、他のwalletからのdeposit

フロント側のコードをいじるというよりも機能のカスタマイズはほぼダッシュボードから行う形になりそうな印象

ここら辺見ればUIパターンのイメージできる
https://demo.dynamic.xyz/

イメージが掴めたからいざ実装

wagmiの場合も試す必要がありそう

wagmi-connector周りは気になる

viem:
yarn add viem @dynamic-labs/sdk-react-core @dynamic-labs/ethereum

wagmi:
yarn add viem @dynamic-labs/wagmi-connector wagmi @tanstack/react-query @dynamic-labs/sdk-react-core @dynamic-labs/ethereum

対応チェーンは@dynamic-labs/XXXのpackage追加で増やしていく感じなのか

このコードだけで「Login or sign up」のボタンとモーダルが見れるようになる

import {
  DynamicContextProvider,
  DynamicWidget,
} from '@dynamic-labs/sdk-react-core';
import { EthereumWalletConnectors } from '@dynamic-labs/ethereum';

export default function App() {
  return (
    <DynamicContextProvider
      settings={{
        environmentId: 'xxx',
        walletConnectors: [EthereumWalletConnectors],
      }}
    >
      <DynamicWidget />
    </DynamicContextProvider>
  );
}

というかこれだけで↓はもうできるのか

サインアップ、ログイン
秘密鍵のexport
所有FTの表示
アカウント削除

ここだけ別途追加する必要がある

ログアウト
所有NFTの表示
秘密鍵のimport

ここからのカスタマイズはここ見ながら

秘密鍵のimport

import { useDynamicWaas } from "@dynamic-labs/sdk-react-core";

const { importPrivateKey } = useDynamicWaas();

const privateKeyInput = "0x...";

await importPrivateKey({
  chainName: "EVM",
  privateKey: privateKeyInput,
});

ログアウト

const { handleLogOut } = useDynamicContext();

所有NFTの表示
機能として提供されていないので、Alchemyとかを使って取ってくる必要がある

dynamicの基本機能はここらへん
embedded wallletの実装のために必要な機能はUI含めてひと通りサポートされてる
（wagmi, ethersあたりも別package使って対応）

基本機能を使って接続したウォレット情報や、それらを使って何かしらのアクションを行う機能を提供してるのがここらへん

dynamic側が提供してるUIとは別で実装したい場合はHeadlessに使うこともできる感じ

実装メモ

Raw Sigining

import { keccak256, stringToHex } from 'viem';
import { DynamicWaasEVMConnector } from '@dynamic-labs/sdk-react-core';

const rawMessage = "Hello World";

const connector = primaryWallet.connector as DynamicWaasEVMConnector;
const hash = keccak256(stringToHex(rawMessage)).slice(2);

const signature = await connector.signRawMessage({
    accountAddress: primaryWallet.address,
    message: hash,
});
console.log("Signature:", signature);

authenticated user

const AuthenticateConnectedUserButton = () => {
  const { authenticateUser, isAuthenticating } = useAuthenticateConnectedUser();

  return (
    <button onClick={ authenticateUser } disable={ isAuthenticating }>
    { isAuthenticating ? 'Authenticating ...' : 'Authenticate connected wallet' }
    </button>
  )
}

このスクラップは2ヶ月前にクローズされました