Skip to content

Latest commit

 

History

History
451 lines (358 loc) · 15.2 KB

README.zh-CN.md

File metadata and controls

451 lines (358 loc) · 15.2 KB
Raw

English | 简体中文 | 日本

Dapp Wallet Modal

npm NPM npm

一个以太坊提供商Dapp钱包集成解决方案

⚠️ 注意

如果你需要集成环境请前往，请访问 eth-wallet-modal 项目

🚀 当前支持

metamask walletconnect coinbase coinbase blockmallet binance portis burnerwallet torus authereum

🎉 演示预览

preview

💻 演示案例

https://daudxu.github.io/dapp-wallet-modal/

🚩 使用方法

1️⃣ 安装 dapp-wallet-modal NPM 软件包

npm install --save dapp-wallet-modal
# OR
yarn add dapp-wallet-modal

2️⃣ 然后，您可以将eth钱包模式添加到Dapp中，如下所示

import Web3 from "web3";

import ethWalletModal from "dapp-wallet-modal";

import detectEthereumProvider from '@metamask/detect-provider';

import WalletConnectProvider from "@walletconnect/web3-provider";

import CoinbaseWalletSDK from '@coinbase/wallet-sdk';

const  providerOptions = {
        logo: LOGO,
        maskColor:'rgb(30, 30, 30, 0.8)',
        bgColor:'#363636',
        borderColor:'#faba30',
        chainId: CHAINID,
        walletOptions: {
          metamask: {
            displayView: {
              logo: MetaMaskLogo, // your Wallet logo
              name: "MetaMask", // your Wallet name
            },
            options: {
              drive: detectEthereumProvider,  //  drive package
            }
          },
          walletconnect: {
            displayView: {
              logo: WalletConnectLogo,  // your Wallet logo
              name: "WalletConnect", // your Wallet name
            },
            options: {
              drive: WalletConnectProvider,  //  drive package
              rpc: {
                1: 'https://mainnet.infura.io/v3/9aa3d95b3bc440fa88ea12eaa414516161',
                4: 'https://rinkeby.infura.io/v3/9aa3d95b3bc440fa88ea12ea221a4456161'
              },
              chainId: CHAINID,
              bridge: 'https://bridge.walletconnect.org'
            }
          },
          coinbase: {
            displayView: {
              logo: CoinbaseLogo,  // your Wallet logo
              name: "Coinbase Wallet",  // your Wallet name
            },
            options: {
              drive: CoinbaseWalletSDK, //  drive package
              infuraId: '9aa3d95b3bxxxc440fa88ea12eaa4456161',
              chainId: CHAINID,
              appName: 'Digi',
              appLogoUrl: WalletConnectLogo,
              darkMode: false
            }
          },
          .....
        }

      }


const walletModal = new ethWalletModal(providerOptions);

const provider = await walletModal.connect();

const web3 = new Web3(provider);

📝 参数选项说明

name type description
providerOptions object see description below
connect function return provider
disconnect function provider or null
providerOptions 参数说明
name type description
logo string Your logo path address
maskColor string mask Color
bgColor string Modal background color
borderColor string Modal border color
chainId int chain Id
walletOptions array See the table below
walletOptions 参数说明
name type description
metamask array See the metamask below
walletconnect array See the walletconnect below
coinbase array See the coinbase below
blockmallet array See the blockmallet below
fortmatic array See the fortmatic below
binancechainwallet array See the binancechainwallet below
portis array See the metamaskportis below
burnerconnect array See the burnerconnect below
torus array See the torus below
authereum array See the authereum below
metamask

Official Doc: View Doc 

         metamask: {
            displayView: {
              logo: 'https://raw.org/metamask.svg' // 您定义用于显示钱包的徽标地址  
              name: 'metamask'  //  显示在你钱包显示的名字
            },
            options: {
               drive: your drive package or sdk
            }
          }
walletconnect

Official Doc: View Doc 

        walletconnect: {
          displayView: {
            logo: 'https://raw.org/walletconnect.svg' // 您定义用于显示钱包的徽标地址  
            name: "WalletConnect",   //  显示在你钱包显示的名字
          },
          options: {
            drive: your drive package or sdk, 
            rpc: {
              1: 'Your infra 1 chain address',
              4: 'Your infra 4(test Network) chain address'
            },
            chainId: Blockchain network ID,
            bridge: 'https://bridge.walletconnect.org'
          }
        }

// ⚠️ 配置参考官方文档
coinbase

Official Doc: View Doc 

         coinbase: {
            displayView: {
            logo: 'https://raw.org/coinbase.svg' // 您定义用于显示钱包的徽标地址  
            name: "Coinbase Wallet",  //  显示在你钱包显示的名字
            },
            options: {
              drive: your drive package or sdk, 
              infuraId: 'your infuraId ID',
              chainId: Blockchain network ID,
              appName: 'Your app name',
              appLogoUrl: Your app logo,
              darkMode: false
            }
          }
          
  // ⚠️ 配置参考官方文档
blockmallet

Official Doc: View Doc 

         blockmallet: {
            displayView: {
            logo: 'https://raw.org/blockmallet.svg' // 您定义用于显示钱包的徽标地址   
            name: "blockmallet",  //  显示在你钱包显示的名字
            },
          }
fortmatic

Official Doc: View Doc 

         fortmatic: {
            displayView: {
            logo: 'https://raw.org/fortmatic.svg' // 您定义用于显示钱包的徽标地址  
            name: "fortmatic",  //  显示在你钱包显示的名字
            },
            options: {
              drive: your drive package or sdk,
              chainId: Blockchain network ID,
              key:'your fortmatic key'
            }
          }

 // ⚠️ 配置参考官方文档
binancechainwallet

Official Doc View Doc 

         binancechainwallet: {
            displayView: {
            logo: 'https://raw.org/binancechainwallet.svg' // 您定义用于显示钱包的徽标地址  
            name: "binancechainwallet",  //  显示在你钱包显示的名字
            }
          }
portis

Official Doc: View Doc 

         portis: {
            displayView: {
            logo: 'https://raw.org/portis.svg' // 您定义用于显示钱包的徽标地址  
            name: "portis",  //  显示在你钱包显示的名字
            },
            options: {
                drive: your drive package or sdk, 
                chainName: 'rinkeby', //  chain Name if
                id:'your protis key' 
            }
          }

// ⚠️ 配置参考官方文档

选项 chainName 列表

网络 描述 默认 Gas Relay Hub
mainnet Ethereum - main network 0xD216153c06E857cD7f72665E0aF1d7D82172F494
ropsten Ethereum - ropsten network 0xD216153c06E857cD7f72665E0aF1d7D82172F494
rinkeby Ethereum - rinkeby network 0xD216153c06E857cD7f72665E0aF1d7D82172F494
goerli Ethereum - goerli network 0xD216153c06E857cD7f72665E0aF1d7D82172F494
ubiq UBQ - main network -
thundercoreTestnet TT - test network -
orchid RootStock - main network -
orchidTestnet RootStock - test network -
kovan Ethereum - kovan network 0xD216153c06E857cD7f72665E0aF1d7D82172F494
classic Ethereum Classic - main network -
sokol POA - test network -
core POA - main network -
xdai xDai - main network 0xD216153c06E857cD7f72665E0aF1d7D82172F494
thundercore TT - main network -
fuse Fuse - main network -
lightstreams Lightstreams - main network -
matic MATIC - main network -
maticMumbai MATIC - mumbai test network -
maticAlpha MATIC - alpha network -
maticTestnet MATIC - test network -
official doc configuration
burnerconnect

Official Doc: View Doc

Progect address: View Doc 

         burnerconnect: {
            displayView: {
            logo: 'https://raw.org/burnerconnect.svg'  // 您定义用于显示钱包的徽标地址  
            name: "burnerconnect",   //  显示在你钱包显示的名字
            },
            options: {
              drive: your drive package or sdk,
              defaultNetwork: default Blockchain network ID,
              chainId: Blockchain network ID
            }
          },
torus

Official Doc: View Doc

         torus: {
            displayView: {
            logo: 'https://raw.org/torus.svg'  // 您定义用于显示钱包的徽标地址  
            name: "torus Wallet",  //  显示在你钱包显示的名字
            },
            options: {
               drive: your drive package or sdk
            }
          },
authereum

Official Doc: View Doc 

         authereum: {
            displayView: {
            logo: 'https://raw.org/authereum.svg'  // 您定义用于显示钱包的徽标地址   
            name: "authereum",  // 显示在你钱包显示的名字
            },
            options: {
               drive: your drive package or sdk,
               chainName: 'rinkeby',  // Need to pass in the chain Name eg： kova, rinkeby, mainne
            }
          },

// ⚠️ 配置参考官方文档

选项 chainName 列表

网络 描述 默认 Gas Relay Hub
mainnet Ethereum - main network 0xD216153c06E857cD7f72665E0aF1d7D82172F494
ropsten Ethereum - ropsten network 0xD216153c06E857cD7f72665E0aF1d7D82172F494
rinkeby Ethereum - rinkeby network 0xD216153c06E857cD7f72665E0aF1d7D82172F494
goerli Ethereum - goerli network 0xD216153c06E857cD7f72665E0aF1d7D82172F494
ubiq UBQ - main network -
thundercoreTestnet TT - test network -
orchid RootStock - main network -
orchidTestnet RootStock - test network -
kovan Ethereum - kovan network 0xD216153c06E857cD7f72665E0aF1d7D82172F494
classic Ethereum Classic - main network -
sokol POA - test network -
core POA - main network -
xdai xDai - main network 0xD216153c06E857cD7f72665E0aF1d7D82172F494
thundercore TT - main network -
fuse Fuse - main network -
lightstreams Lightstreams - main network -
matic MATIC - main network -
maticMumbai MATIC - mumbai test network -
maticAlpha MATIC - alpha network -
maticTestnet MATIC - test network -

📖 Provider subscription Events

// Subscribe to accounts change
provider.on("accountsChanged", (accounts: string[]) => {
  console.log(accounts);
});

// Subscribe to chainId change
provider.on("chainChanged", (chainId: number) => {
  console.log(chainId);
});

// Subscribe to provider connection
provider.on("connect", (info: { chainId: number }) => {
  console.log(info);
});

// Subscribe to provider disconnection
provider.on("disconnect", (error: { code: number; message: string }) => {
  console.log(error);
});

🎾 Features

📝 Changelog

2022.03.12

v1.0.0
init project
add fortmatic, binance, portis Mask background color customization Modal box background color customization Modal box border color customization

2022.03.20

v1.0.3
Add fortmatic, binance and Portis wallet support

✈️ other