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 })] : []),
],
}
])