エコシステムウォレット クイックスタート — Sequence ソリューション

pnpm install @0xsequence/connect

import { SequenceConnect, createConfig, createContractPermission, createExplicitSession, useOpenConnectModal, type SequenceConnectConfig } from "@0xsequence/connect";
import { parseUnits } from "viem";
import { useAccount, useDisconnect } from "wagmi";

const config: SequenceConnectConfig = createConfig({
  projectAccessKey: "<your-project-access-key>",
  signIn: {
    projectName: 'Sequence Web SDK Demo',
  },
  walletUrl: 'https://acme-wallet.ecosystem-demo.xyz/',
  dappOrigin: window.location.origin,
  appName: 'Sequence Web SDK Demo',
  chainIds: [42161],
  defaultChainId: 42161,
  explicitSession: createExplicitSession({
    chainId: 42161,
    nativeTokenSpending: {
      valueLimit: 0n
    },
    expiresIn: {
      hours: 24, // Session lasts for 24 hours
    },
    permissions: [
      // Request a permission to spend up to 100 tokens on behalf of the user
      createContractPermission({
        address: '0x...',
        functionSignature: 'function transfer(address to, uint256 amount)',
        rules: [
          {
            param: 'to',
            type: 'address',
            condition: 'EQUAL',
            value: '0x...' // The address where dApp can spend the tokens
                },
          {
            param: 'amount',
            type: 'uint256',
            condition: 'LESS_THAN_OR_EQUAL',
            value: parseUnits('100', 6), // Max cumulative amount of 100 tokens
            cumulative: true
          }
        ]
      })
    ]
  })
});

export const App = () => {
  return (
    <SequenceConnect config={config}>
      <Homepage />
    </SequenceConnect>
  );
};

const Homepage = () => {

  const { address } = useAccount()
  const { disconnect } = useDisconnect()
  const { setOpenConnectModal } = useOpenConnectModal()
  
  return (
    <div>
      {address ? (
        <button onClick={() => disconnect()}>Disconnect</button>
      ) : (
        <>
          Connected address: {address}
          <button onClick={() => setOpenConnectModal(true)}>Connect</button>
        </>
      )}
    </div>
  );
};