React:Dapp开发

React:Dapp开发-链接钱包弹框rainbowkit

2022-07-26  本文已影响0人  精神病患者link常

文档:https://www.rainbowkit.com/docs/installation

各种效果如下:

按钮
链接钱包弹框
链接成功
点击地址
点击网络

自定义钱包-加入列表中


const TokenPocket = ({ chains }: MyWalletOptions): Wallet => ({
  id: 'TokenPocket',
  name: 'TokenPocket',
  iconUrl: ImageCommon.logo,  // 本地或者网络地址
  iconBackground: '#0c2f78',
  downloadUrls: {
    android: 'https://play.google.com/store/apps/details?id=vip.mytokenpocket',
    ios: 'https://apps.apple.com/cn/app/tokenpocket-trusted-wallet/id1436028697',
    qrCode: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAEYAQMAAAC9QHvPAAAABlBMVEX///8AAABVwtN+AAACj0lEQVRo3uWawbHDIAxEN+ODj5RAKe4s5nfmUlyCjz4w1tcukNSAwkwSC54OCAkkHERti7FdeCNZcXmDP/x5x77cWWMlLnMDWK/NKrK5woHVBO9254NKszLZnvXCy7yxi7/PcmUX8uFW+QHmzW6zE3Zj+6vuBDUEg8XOXc59p+Nl3oEfYJrPF8ayC5scoALoPj8rY2wXl9rn7t3P+hU0FpfpbSvLMIsZ1z1/hjAtw+7dLj6cLqbjDeRiPncKcZlv+LZ4loJ6nfMRYE6GT4plH985/gB9wyLMCI/NIMkkhbHc8yjapttnSsZnOdIH7HX1BxlCCoDmHpbBeoI+j8H07mx1PbdntUmZ7zGb+H3Cg9o/UpBzb8EZ//QSBzIWlYq58CDZtAy0utybsRrHDwA8c6UNxGXslBUeANqSP8kHXFO58aRMa1p3ePhChrioQCEyw662uulE5aZmKvwwomFipq9wLhVy7uO9WFegdliGEq1gLHHY9XI3f0YOqQCYkmEFrunCmSpBhsDOcU8sAjPdPvBxgDnkS8XPuKCxqRmXH4hTbkwhlzESl+Exa3f6bsmj6Bu3UNuczKJriHZ/WOjcqs3F9DwqNvMwasnQPgxsAN3nncOcjH9rdUdKqPCVIQQHZzyrSFzuUz5PjsttdreHMiUDjC3ZzlHQqqgrIz8Mzui1RrtWU8lOoVBBlpuSGXsU575j7QcQk0XzpnUPy/TWwld3p+NsUv3uI3Myi7H1PcpGUtXuJfROKjLT3lvxbBIjn6dg3T7ApEzLliRxumLk096UYUVn8KpQDetwOobPbyz85mb2mrybwviPR237s0VmAOg/A94NZGO3LoipDUzLGBsZMx2z4/LlmyiHZX64/QPNL9thE1XE0AAAAABJRU5ErkJggg==',
  },
  createConnector: () => {
    const connector = getWalletConnectConnector({ chains });

    return {
      connector,
      mobile: {
        getUri: async () => {
          const { uri } = (await connector.getProvider()).connector;
          return uri;
        },
      },
      qrCode: {
        getUri: async () =>
          (await connector.getProvider()).connector.uri,
        instructions: {
          learnMoreUrl: 'https://tokenpocket.pro/',
          steps: [
            {
              description:
                'We recommend putting TokenPocket on your home screen for faster access to your wallet.',
              step: 'install',
              title: 'Open the TokenPocket app',
            },
            {
              description:
                'After you scan, a connection prompt will appear for you to connect your wallet.',
              step: 'scan',
              title: 'Tap the scan button',
            },
          ],
        },
      },
    };
  },
});

加入列表


  const needsInjectedWalletFallback =
  typeof window !== 'undefined' &&
  window.ethereum &&
  // !window.ethereum.isMetaMask &&
  !window.ethereum.isCoinbaseWallet;

  const connectors = connectorsForWallets([
    {
      groupName: "WK Recommended",
      wallets: [
        TokenPocket({chains}),
        wallet.metaMask({ chains, shimDisconnect: true }),
        wallet.brave({ chains, shimDisconnect: true }),
        wallet.rainbow({ chains }),
        wallet.walletConnect({ chains }),
        wallet.coinbase({ appName: "WK", chains }),
        ...(needsInjectedWalletFallback ? [wallet.injected({ chains, shimDisconnect: true })] : []),
      ],
    }
])
上一篇下一篇

猜你喜欢

热点阅读