├── plan.md ├── README.ar-AE.md ├── README.fr-FR.md ├── README.ru-RU.md ├── README.zh-HK.md ├── packages ├── tools │ ├── index.js │ └── utils.js ├── constants │ ├── index.js │ ├── keys.js │ └── chains.js ├── assets │ ├── images │ │ ├── close.png │ │ ├── MetaMask.png │ │ ├── bgBtHide.png │ │ ├── bgBtShow.png │ │ └── WalletConnect.png │ └── logos │ │ ├── metamask.png │ │ ├── BlockWallet.png │ │ ├── burnerwallet.png │ │ ├── fortmatic.svg │ │ ├── torus.svg │ │ ├── imtoken.svg │ │ ├── binancechainwallet.svg │ │ ├── venly.svg │ │ ├── coinbase.svg │ │ ├── walletconnect.svg │ │ ├── walletconnect-circle.svg │ │ ├── authereum.svg │ │ ├── portis.svg │ │ ├── metamask.svg │ │ └── bitski.svg ├── index.js ├── providers │ ├── index.js │ ├── connectors │ │ ├── burnerconnect.js │ │ ├── binancechainwallet.js │ │ ├── torus.js │ │ ├── index.js │ │ ├── authereum.js │ │ ├── blockmallet.js │ │ ├── metamask.js │ │ ├── portis.js │ │ ├── fortmatic.js │ │ ├── walletlink.js │ │ └── walletconnect.js │ └── providers │ │ └── index.js └── base │ └── index.jsx ├── images └── preview.png ├── public ├── favicon.ico └── index.html ├── babel.config.js ├── examples ├── assets │ ├── Bean.gif │ ├── logo.png │ ├── images.png │ └── logos │ │ ├── metamask.png │ │ ├── BlockWallet.png │ │ ├── burnerwallet.png │ │ ├── fortmatic.svg │ │ ├── torus.svg │ │ ├── imtoken.svg │ │ ├── binancechainwallet.svg │ │ ├── venly.svg │ │ ├── coinbase.svg │ │ ├── walletconnect.svg │ │ ├── walletconnect-circle.svg │ │ ├── authereum.svg │ │ ├── portis.svg │ │ ├── metamask.svg │ │ └── bitski.svg ├── main.js ├── App.vue └── components │ └── HelloWorld.vue ├── index.js ├── .gitignore ├── .npmignore ├── vue.config.js ├── LICENSE ├── package.json ├── .github └── workflows │ └── main.yml ├── NetWork.md ├── README.zh-CN.md ├── README.ja-JP.md └── README.md /plan.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /README.ar-AE.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /README.fr-FR.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /README.ru-RU.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /README.zh-HK.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/tools/index.js: -------------------------------------------------------------------------------- 1 | export * from "./utils"; -------------------------------------------------------------------------------- /packages/constants/index.js: -------------------------------------------------------------------------------- 1 | export * from "./chains"; 2 | export * from "./keys"; 3 | -------------------------------------------------------------------------------- /images/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Daudxu/eth-wallet-modal/HEAD/images/preview.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Daudxu/eth-wallet-modal/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /examples/assets/Bean.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Daudxu/eth-wallet-modal/HEAD/examples/assets/Bean.gif -------------------------------------------------------------------------------- /examples/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Daudxu/eth-wallet-modal/HEAD/examples/assets/logo.png -------------------------------------------------------------------------------- /examples/assets/images.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Daudxu/eth-wallet-modal/HEAD/examples/assets/images.png -------------------------------------------------------------------------------- /packages/assets/images/close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Daudxu/eth-wallet-modal/HEAD/packages/assets/images/close.png -------------------------------------------------------------------------------- /examples/assets/logos/metamask.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Daudxu/eth-wallet-modal/HEAD/examples/assets/logos/metamask.png -------------------------------------------------------------------------------- /packages/assets/logos/metamask.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Daudxu/eth-wallet-modal/HEAD/packages/assets/logos/metamask.png -------------------------------------------------------------------------------- /examples/assets/logos/BlockWallet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Daudxu/eth-wallet-modal/HEAD/examples/assets/logos/BlockWallet.png -------------------------------------------------------------------------------- /packages/assets/images/MetaMask.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Daudxu/eth-wallet-modal/HEAD/packages/assets/images/MetaMask.png -------------------------------------------------------------------------------- /packages/assets/images/bgBtHide.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Daudxu/eth-wallet-modal/HEAD/packages/assets/images/bgBtHide.png -------------------------------------------------------------------------------- /packages/assets/images/bgBtShow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Daudxu/eth-wallet-modal/HEAD/packages/assets/images/bgBtShow.png -------------------------------------------------------------------------------- /packages/assets/logos/BlockWallet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Daudxu/eth-wallet-modal/HEAD/packages/assets/logos/BlockWallet.png -------------------------------------------------------------------------------- /examples/assets/logos/burnerwallet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Daudxu/eth-wallet-modal/HEAD/examples/assets/logos/burnerwallet.png -------------------------------------------------------------------------------- /packages/assets/logos/burnerwallet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Daudxu/eth-wallet-modal/HEAD/packages/assets/logos/burnerwallet.png -------------------------------------------------------------------------------- /packages/assets/images/WalletConnect.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Daudxu/eth-wallet-modal/HEAD/packages/assets/images/WalletConnect.png -------------------------------------------------------------------------------- /packages/index.js: -------------------------------------------------------------------------------- 1 | import { Base } from "./base"; 2 | 3 | export * from "./constants"; 4 | export * from "./providers"; 5 | 6 | export default Base; 7 | -------------------------------------------------------------------------------- /examples/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | 4 | const app = createApp(App); 5 | 6 | app.mount("#app"); 7 | 8 | -------------------------------------------------------------------------------- /packages/constants/keys.js: -------------------------------------------------------------------------------- 1 | export const ETH_DAPP_WALLET_CONNECT_MODAL_ID = "ETH_DAPP_WALLET_CONNECT_MODAL_ID"; 2 | export const INJECTED_PROVIDER_ID = "injected"; -------------------------------------------------------------------------------- /packages/providers/index.js: -------------------------------------------------------------------------------- 1 | import * as connectors from "./connectors"; 2 | import * as providers from "./providers"; 3 | 4 | export { connectors, providers }; 5 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | // index.js 2 | if (process.env.NODE_ENV === 'production') { // 通过环境变量来决定入口文件 3 | module.exports = require('./lib/eth-wallet-modal.umd.min.js') 4 | } else { 5 | module.exports = require('./lib/eth-wallet-modal.umd.js') 6 | } 7 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | .history 5 | lib 6 | 7 | # local env files 8 | .env.local 9 | .env.*.local 10 | 11 | # Log files 12 | npm-debug.log* 13 | yarn-debug.log* 14 | yarn-error.log* 15 | pnpm-debug.log* 16 | 17 | # Editor directories and files 18 | .idea 19 | .vscode 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /packages/tools/utils.js: -------------------------------------------------------------------------------- 1 | import { CHAIN_DATA_LIST } from "../constants" 2 | 3 | export function getChainId (network) { 4 | const chains = Object.values(CHAIN_DATA_LIST); 5 | const match = ( 6 | chains, 7 | x => x.network === network, 8 | undefined 9 | ); 10 | if (!match) { 11 | throw new Error(`No chainId found match ${network}`); 12 | } 13 | return match.chainId; 14 | } -------------------------------------------------------------------------------- /packages/providers/connectors/burnerconnect.js: -------------------------------------------------------------------------------- 1 | import BurnerConnectProvider from '@burner-wallet/burner-connect-provider' 2 | 3 | const ConnectToBurnerConnect = async (options) => { 4 | options.defaultNetwork = options.defaultNetwork || options.chainId 5 | 6 | const provider = new BurnerConnectProvider(options) 7 | 8 | await provider.enable() 9 | 10 | return provider 11 | } 12 | 13 | export default ConnectToBurnerConnect 14 | -------------------------------------------------------------------------------- /examples/assets/logos/fortmatic.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/assets/logos/fortmatic.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/assets/logos/torus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /packages/assets/logos/torus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | node_modules/.bin/ 5 | build/ 6 | config/ 7 | static/ 8 | .babelrc 9 | .editorconfig 10 | .gitignore 11 | .npmignore 12 | .postcssrc.js 13 | index.html 14 | package-lock.json 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | .history 19 | #Editordirectoriesandfiles 20 | .idea 21 | .vscode 22 | *.suo 23 | *.ntvs* 24 | *.njsproj 25 | *.sln 26 | #忽略目录 27 | examples/ 28 | packages/ 29 | public/ 30 | #忽略指定文件 31 | vue.config.js 32 | babel.config.js 33 | *.map 34 | -------------------------------------------------------------------------------- /packages/providers/connectors/binancechainwallet.js: -------------------------------------------------------------------------------- 1 | const ConnectToBinanceChainWallet = async () => { 2 | let provider = null; 3 | if (typeof window.BinanceChain !== "undefined") { 4 | provider = window.BinanceChain; 5 | try { 6 | await provider.request({ method: "eth_requestAccounts" }); 7 | } catch (error) { 8 | throw new Error("User Rejected"); 9 | } 10 | } else { 11 | throw new Error("No Binance Chain Wallet found"); 12 | } 13 | return provider; 14 | }; 15 | 16 | export default ConnectToBinanceChainWallet; 17 | -------------------------------------------------------------------------------- /examples/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 15 | // ethWalletModel 16 | 26 | -------------------------------------------------------------------------------- /packages/providers/connectors/torus.js: -------------------------------------------------------------------------------- 1 | import Torus from '@toruslabs/torus-embed' 2 | 3 | const ConnectToTorus = async () => { 4 | return new Promise( (resolve, reject) => { 5 | (async () => { 6 | try { 7 | const torus = new Torus() 8 | await torus.init() 9 | await torus.login() 10 | const provider = torus.provider 11 | provider.torus = torus 12 | resolve(provider) 13 | } catch (err) { 14 | reject(err) 15 | } 16 | })().catch((e) => { 17 | reject("error:", e) 18 | }) 19 | }) 20 | } 21 | 22 | export default ConnectToTorus 23 | -------------------------------------------------------------------------------- /packages/providers/connectors/index.js: -------------------------------------------------------------------------------- 1 | import metamask from "./metamask"; 2 | import walletconnect from "./walletconnect"; 3 | import coinbase from "./walletlink"; 4 | import blockmallet from "./blockmallet"; 5 | import fortmatic from "./fortmatic"; 6 | import binancechainwallet from "./binancechainwallet"; 7 | import portis from "./portis"; 8 | import burnerconnect from "./burnerconnect"; 9 | import torus from "./torus"; 10 | import authereum from "./authereum"; 11 | 12 | export { 13 | metamask, 14 | walletconnect, 15 | coinbase, 16 | blockmallet, 17 | fortmatic, 18 | binancechainwallet, 19 | portis, 20 | burnerconnect, 21 | torus, 22 | authereum, 23 | }; 24 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | // vue.config.js 2 | 3 | module.exports = { 4 | // 将 examples 目录添加为新的页面 5 | pages: { 6 | index: { 7 | // page 的入口 8 | entry: 'examples/main.js', 9 | // 模板来源 10 | template: 'public/index.html', 11 | // 输出文件名 12 | filename: 'index.html' 13 | } 14 | }, 15 | 16 | chainWebpack: config => { 17 | config.module 18 | .rule('images') 19 | .use('url-loader') 20 | .loader('url-loader') 21 | .tap(options => Object.assign(options, { limit: 5000 })) 22 | }, 23 | 24 | configureWebpack: { 25 | output: { 26 | libraryExport: 'default' 27 | } 28 | }, 29 | 30 | publicPath: './', 31 | assetsDir: 'static' 32 | } -------------------------------------------------------------------------------- /packages/providers/connectors/authereum.js: -------------------------------------------------------------------------------- 1 | import Authereum from 'authereum' 2 | 3 | const ConnectToAuthereum = (options) => { 4 | return new Promise((resolve, reject) => { 5 | (async () => { 6 | try { 7 | const authereum = new Authereum({ 8 | networkName: options.chainName, 9 | }) 10 | const provider = authereum.getProvider() 11 | provider.authereum = authereum 12 | await provider.enable() 13 | resolve(provider) 14 | } catch (error) { 15 | return reject(error) 16 | } 17 | })().catch((e) => { 18 | reject("error:", e) 19 | }); 20 | 21 | }) 22 | 23 | 24 | } 25 | 26 | export default ConnectToAuthereum 27 | -------------------------------------------------------------------------------- /packages/providers/connectors/blockmallet.js: -------------------------------------------------------------------------------- 1 | const ConnectToBlockWallet = async () => { 2 | 3 | return await new Promise((resolve, reject) => { 4 | const handleProvider = () => { 5 | window.removeEventListener('ethereum#initialized', handleProvider); 6 | const { ethereum } = window; 7 | if (ethereum) { 8 | resolve(ethereum); 9 | } else { 10 | console.error('Unable to detect window.ethereum.'); 11 | reject("Unable to detect window.ethereum."); 12 | } 13 | }; 14 | 15 | if (window.ethereum) { 16 | handleProvider(); 17 | } else { 18 | window.addEventListener('ethereum#initialized', handleProvider, { 19 | once: true, 20 | }); 21 | } 22 | }); 23 | }; 24 | export default ConnectToBlockWallet; 25 | 26 | -------------------------------------------------------------------------------- /examples/assets/logos/imtoken.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/assets/logos/imtoken.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/providers/connectors/metamask.js: -------------------------------------------------------------------------------- 1 | const ConnectToMetamask = async () => { 2 | return new Promise((resolve, reject) => { 3 | (async () => { 4 | let provider = null; 5 | if (typeof window.ethereum !== 'undefined') { 6 | provider = window.ethereum; 7 | try { 8 | await provider.request({ method: 'eth_requestAccounts' }) 9 | } catch (error) { 10 | reject("User Rejected") 11 | throw new Error("User Rejected"); 12 | 13 | } 14 | } else if (window.web3) { 15 | provider = window.web3.currentProvider; 16 | } else if (window.celo) { 17 | provider = window.celo; 18 | } else { 19 | reject("No Web3 Provider found") 20 | throw new Error("No Web3 Provider found"); 21 | } 22 | resolve(provider); 23 | })().catch((e) => { 24 | reject("error:", e) 25 | }); 26 | }); 27 | 28 | }; 29 | 30 | export default ConnectToMetamask; 31 | -------------------------------------------------------------------------------- /packages/providers/connectors/portis.js: -------------------------------------------------------------------------------- 1 | import Portis from '@portis/web3'; 2 | 3 | const ConnectToPortis = async (options) => { 4 | return new Promise((resolve, reject) => { 5 | (async () => { 6 | if (options && options.id) { 7 | try { 8 | const id = options.id; 9 | const chainName = options.chainName || "mainnet"; 10 | var config = '' 11 | if(typeof(options.config) !== undefined){ 12 | config = options.config; 13 | } 14 | const pt = new Portis(id, chainName, config); 15 | await pt.provider.enable(); 16 | pt.provider._portis = pt; 17 | resolve(pt.provider); 18 | } catch (error) { 19 | return reject(error); 20 | } 21 | } else { 22 | return reject(new Error("Missing Portis Id")); 23 | } 24 | })().catch((e) => { 25 | reject("error:", e) 26 | }); 27 | }); 28 | }; 29 | 30 | export default ConnectToPortis; 31 | -------------------------------------------------------------------------------- /examples/assets/logos/binancechainwallet.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/assets/logos/binancechainwallet.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/assets/logos/venly.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /packages/assets/logos/venly.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Daudxu 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/providers/connectors/fortmatic.js: -------------------------------------------------------------------------------- 1 | import Fortmatic from 'fortmatic'; 2 | 3 | const ConnectToFortmatic = async (options) => { 4 | return new Promise((resolve, reject) => { 5 | (async () => { 6 | if (options && options.key) { 7 | try { 8 | const key = options.key; 9 | const fm = new Fortmatic(key, options.chainId); 10 | const provider = await fm.getProvider(); 11 | provider.fm = fm; 12 | await fm.user.login(); 13 | const isLoggedIn = await fm.user.isLoggedIn(); 14 | if (isLoggedIn) { 15 | resolve(provider); 16 | } else { 17 | reject('Failed to login to Fortmatic') 18 | throw new Error("Failed to login to Fortmatic"); 19 | } 20 | } catch (error) { 21 | reject(error) 22 | throw new Error(error); 23 | } 24 | } else { 25 | reject('Missing Fortmatic key') 26 | throw new Error("Missing Fortmatic key"); 27 | } 28 | })().catch((e) => { 29 | reject("error:", e) 30 | }); 31 | }); 32 | }; 33 | 34 | export default ConnectToFortmatic; 35 | -------------------------------------------------------------------------------- /packages/providers/connectors/walletlink.js: -------------------------------------------------------------------------------- 1 | import WalletLink from '@coinbase/wallet-sdk' 2 | 3 | const ConnectToWalletLink = ( 4 | opts 5 | ) => { 6 | return new Promise((resolve, reject) => { 7 | (async () => { 8 | const options = opts || {}; 9 | const infuraId = options.infuraId || ""; 10 | const chainId = options.chainId || 1; 11 | const appName = options.appName || ""; 12 | const appLogoUrl = options.appLogoUrl; 13 | const darkMode = options.darkMode || false; 14 | 15 | let rpc = options.rpc || undefined; 16 | if (options.infuraId && !options.rpc) { 17 | rpc = `https://mainnet.infura.io/v3/${infuraId}`; 18 | } 19 | 20 | const walletLink = new WalletLink({ 21 | appName, 22 | appLogoUrl, 23 | darkMode 24 | }); 25 | try { 26 | const provider = walletLink.makeWeb3Provider(rpc, chainId); 27 | await provider.send('eth_requestAccounts'); 28 | resolve(provider); 29 | } catch (e) { 30 | reject(e); 31 | } 32 | })().catch((e) => { 33 | reject("error:", e) 34 | }); 35 | 36 | }); 37 | }; 38 | 39 | export default ConnectToWalletLink; 40 | -------------------------------------------------------------------------------- /examples/assets/logos/coinbase.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/assets/logos/coinbase.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/providers/connectors/walletconnect.js: -------------------------------------------------------------------------------- 1 | import { getChainId } from "../../tools"; 2 | import WalletConnectProvider from "@walletconnect/web3-provider"; 3 | 4 | const ConnectToWalletConnect = async ( 5 | opts 6 | ) => { 7 | return await new Promise((resolve, reject) => { 8 | (async () => { 9 | let bridge = "https://bridge.walletconnect.org"; 10 | let qrcode = true; 11 | let infuraId = ""; 12 | let rpc = undefined; 13 | let chainId = 1; 14 | let qrcodeModalOptions = undefined; 15 | 16 | if (opts) { 17 | bridge = opts.bridge || bridge; 18 | qrcode = typeof opts.qrcode !== "undefined" ? opts.qrcode : qrcode; 19 | infuraId = opts.infuraId || ""; 20 | rpc = opts.rpc || undefined; 21 | chainId = 22 | opts.network && getChainId(opts.network) ? getChainId(opts.network) : 1; 23 | qrcodeModalOptions = opts.qrcodeModalOptions || undefined; 24 | } 25 | 26 | const provider = new WalletConnectProvider({ 27 | bridge, 28 | qrcode, 29 | infuraId, 30 | rpc, 31 | chainId, 32 | qrcodeModalOptions 33 | }); 34 | try { 35 | await provider.enable(); 36 | resolve(provider); 37 | } catch (e) { 38 | reject(e); 39 | } 40 | })().catch((e) => { 41 | reject("error:", e) 42 | }); 43 | }); 44 | }; 45 | 46 | export default ConnectToWalletConnect; 47 | -------------------------------------------------------------------------------- /examples/assets/logos/walletconnect.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/assets/logos/walletconnect.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/assets/logos/walletconnect-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/assets/logos/walletconnect-circle.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "eth-wallet-modal", 3 | "version": "1.1.6", 4 | "private": false, 5 | "scripts": { 6 | "dev": "vue-cli-service serve", 7 | "serve": "vue-cli-service serve", 8 | "build": "vue-cli-service build", 9 | "lint": "vue-cli-service lint", 10 | "lib": "vue-cli-service build --target lib --name eth-wallet-modal --dest lib packages/index.js" 11 | }, 12 | "keyword": [ 13 | "Dapp", 14 | "wallet", 15 | "vue", 16 | "model", 17 | "eth", 18 | "web3", 19 | "Provider", 20 | "ethers", 21 | "ethers.js", 22 | "web3js", 23 | "nft", 24 | "opensea" 25 | ], 26 | "homepage": "https://github.com/Daudxu/eth-wallet-modal", 27 | "bugs": { 28 | "url": "https://github.com/Daudxu/eth-wallet-modal/issues" 29 | }, 30 | "repository": { 31 | "type": "git", 32 | "url": "https://github.com/Daudxu/eth-wallet-modal.git" 33 | }, 34 | "dependencies": { 35 | "@burner-wallet/burner-connect-provider": "^0.1.1", 36 | "@coinbase/wallet-sdk": "^3.0.1", 37 | "@metamask/detect-provider": "^1.2.0", 38 | "@portis/web3": "^4.0.7", 39 | "@toruslabs/torus-embed": "^1.21.0", 40 | "@walletconnect/web3-provider": "^1.7.1", 41 | "authereum": "^0.1.14", 42 | "core-js": "^3.6.5", 43 | "fortmatic": "^2.2.1", 44 | "vue": "^3.0.0", 45 | "web3": "^1.7.1" 46 | }, 47 | "devDependencies": { 48 | "@vue/cli-plugin-babel": "~4.5.15", 49 | "@vue/cli-plugin-eslint": "~4.5.15", 50 | "@vue/cli-service": "~4.5.15", 51 | "@vue/compiler-sfc": "^3.0.0", 52 | "babel-eslint": "^10.1.0", 53 | "css-loader": "^6.6.0", 54 | "eslint": "^6.7.2", 55 | "eslint-plugin-vue": "^7.0.0", 56 | "style-loader": "^3.3.1" 57 | }, 58 | "eslintConfig": { 59 | "root": true, 60 | "env": { 61 | "node": true 62 | }, 63 | "extends": [ 64 | "plugin:vue/vue3-essential", 65 | "eslint:recommended" 66 | ], 67 | "parserOptions": { 68 | "parser": "babel-eslint" 69 | }, 70 | "rules": {} 71 | }, 72 | "browserslist": [ 73 | "> 1%", 74 | "last 2 versions", 75 | "not dead" 76 | ], 77 | "license": "MIT" 78 | } 79 | -------------------------------------------------------------------------------- /examples/assets/logos/authereum.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | authereum 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /packages/assets/logos/authereum.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | authereum 5 | Created with Sketch. 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: Build app and deploy to aliyun 2 | on: 3 | #监听push操作 4 | push: 5 | branches: 6 | # master分支，你也可以改成其他分支 7 | - master 8 | jobs: 9 | build-deploy-job: 10 | # runs-on 指定job任务运行所需要的虚拟机环境 11 | runs-on: ubuntu-latest 12 | steps: 13 | # 获取源码 14 | - name: Checkout 15 | # 使用action库 actions/checkout获取源码 16 | uses: actions/checkout@v2 17 | # 安装Node13 18 | - name: use Node.js 16.13.1 19 | # 使用action库 actions/setup-node安装node 20 | uses: actions/setup-node@v1 21 | with: 22 | node-version: 16.13.1 23 | # cache clean 24 | - name: npm cache clean --force 25 | run: npm cache clean --force 26 | # 安装依赖 27 | - name: npm install --registry=http://registry.npm.taobao.org/ 28 | run: npm install --registry=http://registry.npm.taobao.org/ 29 | # 打包 30 | - name: npm run build 31 | run: npm run build 32 | # 执行JamesIves/github-pages-deploy-action将项目发布到Github Pages 33 | - name: Deploy 34 | uses: JamesIves/github-pages-deploy-action@3.7.1 35 | with: 36 | # 该workflow需要操作repo，因此需要一个密钥，下面会讲到如何获取这个密钥 37 | ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} 38 | # 发布到的分支 39 | BRANCH: gh-pages 40 | # 要发布的文件夹 41 | FOLDER: dist 42 | # 部署 43 | - name: Sync files FTP 44 | uses: SamKirkland/FTP-Deploy-Action@4.2.0 45 | with: 46 | server: ${{ secrets.FTP_HOST }} 47 | username: ${{ secrets.FTP_USERNAME }} 48 | password: ${{ secrets.FTP_PASSWORD }} 49 | local-dir: './dist/' 50 | server-dir: ${{ secrets.FTP_REMOTE_FOLDER }} 51 | # src_account_type: org 52 | # dst_account_type: org 53 | Sync-Code-To-Gitee-job: 54 | # runs-on 指定job任务运行所需要的虚拟机环境 55 | runs-on: ubuntu-latest 56 | steps: 57 | # 同步代码到 gitee 58 | - name: Sync Github Repos To Gitee # 名字随便起 59 | uses: Yikun/hub-mirror-action@v1.1 # 使用Yikun/hub-mirror-action 60 | with: 61 | src: github/Daudxu 62 | dst: gitee/coding-365 63 | dst_key: ${{ secrets.GITEE_PRIVATE_KEY }} # SSH密钥对中的私钥 64 | dst_token: ${{ secrets.GITEE_TOKEN }} # Gitee账户的私人令牌 65 | account_type: user # 账户类型 66 | clone_style: "https" # 使用https方式进行clone，也可以使用ssh 67 | debug: true # 启用后会显示所有执行命令 68 | force_update: true # 启用后，强制同步，即强制覆盖目的端仓库 69 | static_list: 'dapp-wallet-modal' # 静态同步列表，在此填写需要同步的仓库名称，可填写多个 70 | timeout: '600s' # git超时设置，超时后会自动重试git操作 71 | -------------------------------------------------------------------------------- /packages/providers/providers/index.js: -------------------------------------------------------------------------------- 1 | import MetaMaskLogo from '../../assets/logos/metamask.svg' 2 | 3 | import WalletConnectLogo from '../../assets/logos/walletconnect-circle.svg' 4 | 5 | import CoinbaseLogo from '../../assets/logos/coinbase.svg' 6 | 7 | import BlockWalletLogo from '../../assets/logos/BlockWallet.png' 8 | 9 | import FortmaticLogo from '../../assets/logos/fortmatic.svg' 10 | 11 | import BinanceChainWalletLogo from '../../assets/logos/binancechainwallet.svg' 12 | 13 | import PortisLogo from '../../assets/logos/portis.svg' 14 | 15 | import BurnerWalletLogo from '../../assets/logos/burnerwallet.png' 16 | 17 | import TorusLogo from '../../assets/logos/torus.svg' 18 | 19 | import AuthereumLogo from '../../assets/logos/authereum.svg' 20 | 21 | export const WALLETCONNECT = { 22 | id: 'walletconnect', 23 | name: 'WalletConnect', 24 | logo: WalletConnectLogo, 25 | type: 'qrcode', 26 | check: 'isWalletConnect', 27 | } 28 | 29 | export const METAMASK = { 30 | id: 'metamask', 31 | name: 'MetaMask', 32 | logo: MetaMaskLogo, 33 | type: 'metamask', 34 | check: 'isMetaMask', 35 | } 36 | 37 | export const COINBASE = { 38 | id: 'coinbase', 39 | name: 'Coinbase', 40 | logo: CoinbaseLogo, 41 | type: 'coinbase', 42 | check: 'isCoinbase', 43 | } 44 | 45 | export const BLOCKWALLET = { 46 | id: 'blockmallet', 47 | name: 'BlockWallet ', 48 | logo: BlockWalletLogo, 49 | type: 'blockmallet', 50 | check: 'isBlockWallet ', 51 | } 52 | 53 | export const FORTMATIC = { 54 | id: 'fortmatic', 55 | name: 'Fortmatic', 56 | logo: FortmaticLogo, 57 | type: 'fortmatic', 58 | check: 'isFortmatic', 59 | } 60 | 61 | export const BINANCECHAINWALLET = { 62 | id: 'binancechainwallet', 63 | name: 'Binance Chain', 64 | logo: BinanceChainWalletLogo, 65 | type: 'injected', 66 | check: 'isBinanceChainWallet', 67 | } 68 | 69 | export const PORTIS = { 70 | id: 'portis', 71 | name: 'Portis', 72 | logo: PortisLogo, 73 | type: 'web', 74 | check: 'isPortis', 75 | } 76 | 77 | export const BURNERCONNECT = { 78 | id: 'burnerconnect', 79 | name: 'Burner Connect', 80 | logo: BurnerWalletLogo, 81 | type: 'web', 82 | check: 'isBurnerProvider', 83 | } 84 | 85 | export const TORUS = { 86 | id: 'torus', 87 | name: 'Torus', 88 | logo: TorusLogo, 89 | type: 'web', 90 | check: 'isTorus', 91 | } 92 | 93 | export const AUTHEREUM = { 94 | id: 'authereum', 95 | name: 'Authereum', 96 | logo: AuthereumLogo, 97 | type: 'web', 98 | check: 'isAuthereum', 99 | } 100 | -------------------------------------------------------------------------------- /NetWork.md: -------------------------------------------------------------------------------- 1 | 简单的方法就是直接通过网站 https://chainlist.org/，然后选择需要的网络连接到我们小狐狸钱包。 2 | 3 | 1.BSC主网 4 | 5 | NetWork Name：BSC 6 | 7 | RPC URL：https://bsc-dataseed.binance.org/ 8 | 9 | ID：56 10 | 11 | 符号：BNB 12 | 13 | URL：https://www.bscscan.com/ 14 | 15 | 2.BSC测试网 16 | 17 | NetWork Name：BSC Testnet 18 | 19 | RPC URL：https://data-seed-prebsc-1-s1.binance.org:8545/ 20 | 21 | ID：97 22 | 23 | 符号：BNB 24 | 25 | URL：https://testnet.bscscan.com/网络名称 26 | 27 | 测试币领取地址：https://testnet.binance.org/faucet-smart 28 | 29 | 3.OkexChian主网 30 | 31 | NetWork Name：OKExChain Mainnet 32 | 33 | RPC URL：https://exchainrpc.okex.org 34 | 35 | Chain ID：66 36 | 37 | Currency Symbol：OKT 38 | 39 | Block Explorer URL：https://www.oklink.com/okexchain 40 | 41 | 4.OKExChain测试网 42 | 43 | NetWork Name：OKExChain Testnet 44 | 45 | RPC URL：http://okexchaintest.okexcn.com:26659/ 46 | 47 | More RPC URLs 48 | 49 | Chain ID：65 50 | 51 | Currency Symbol：OKT 52 | 53 | Block Explorer URL：https://www.oklink.com/okexchain-test/ 54 | 55 | 5.Heco主网 56 | 57 | NetWork Name：Heco 58 | 59 | RPC URL：https://http-mainnet.hecochain.com 60 | 61 | ID：128 62 | 63 | 符号：HT 64 | 65 | URL：https://scan.hecochain.com 66 | 67 | 6.Heco测试网 68 | 69 | NetWork Name：Heco Testnet 70 | 71 | RPC URL：https://http-testnet.hecochain.com 72 | 73 | ID：256 74 | 75 | 符号：HT 76 | 77 | URL：https://scan.testent.hecochain.com 78 | 79 | 测试币领取地址：https://scan-testnet.hecochain.com/faucet 80 | 81 | 7.xDai侧链 82 | 83 | NetWork Name： xDai 84 | 85 | PRC URL：https://rpc.xdaichain.com/ 86 | 87 | ID：100 88 | 89 | 符号：xDai 90 | 91 | URL：https://blockscout.com/poa/xdai 92 | 93 | 测试币领取地址：https://xdai-faucet.top/ 94 | 95 | 8.Optimistic Ethereum 测试网 96 | 97 | NetWork Name：Optimistic Ethereum 98 | 99 | 新增 RPC URL： https://mainnet.optimism.io 100 | 101 | 链 ID（ChainID）：10 102 | 103 | 符号：ETH 104 | 105 | 区块浏览器 URL：https://mainnet-l2-explorer.surge.sh 106 | 107 | 9.虎符测试网络 108 | 109 | Network Name：HSC TESTNET（HSC测试网） 110 | 111 | New RPC URL： https://http-testnet.hoosmartchain.com 112 | 113 | Chain ID：170 114 | 115 | Currency Symbol（optional）：HOO 116 | 117 | Block Explorer URL（optional）： https://testnet.hscscan.com 118 | 119 | 10.FTM主网 120 | 121 | 网络名称：Fantom Opera 122 | 123 | RPC URL：https://rpcapi.fantom.network 124 | 125 | 链 ID：250 126 | 127 | 符号：FTM 128 | 129 | URL：https://ftmscan.com 130 | 131 | 11.FTM测试网 132 | 133 | Network Name：Fantom testnet 134 | 135 | New RPC Url： https://rpc.testnet.fantom.network/ 136 | 137 | ChainID：0xfa2 138 | 139 | Symbol：FTM 140 | 141 | URL：https://rpcapi.fantom.network 142 | 143 | 测试币领取地址：https://faucet.fantom.network 144 | 145 | 12.Matic主网 146 | 147 | 网络名称：Matic Mainnet 148 | 149 | 新增 URL：https://rpc-mainnet.matic.network 150 | 151 | 链id （ChainID）：137 152 | 153 | 13.Matic测试网 154 | 155 | 网络名称：Matic Testnet 156 | 157 | 新增 URL：https://rpc-mumbai.matic.today 158 | 159 | ChainID：80001 160 | 领取地址： https://faucet.polygon.technology/ 161 | 14.ParaState测试网 162 | 163 | 新的RPC URL：https://rpc.parastate.io:8545 164 | 165 | 链ID：123 166 | 167 | 货币符号（可选）：STATE 168 | 169 | 测试币领取地址：http://faucet.parastate.io/ 170 | 171 | 15.Kovan 测试网 172 | 173 | 测试币领取地址：https://gitter.im/kovan-testnet/faucet 174 | 175 | 16.Rinkeby测试网 176 | 177 | 测试币领取地址：https://www.rinkeby.io/#faucet 178 | 179 | 17.Goerli测试网 180 | 181 | 测试币领取地址：https://faucet.goerli.mudit.blog/ 182 | 183 | 18.Ropsten测试网 184 | 185 | 测试币领取地址：https://faucet.dimensions.network/ -------------------------------------------------------------------------------- /examples/assets/logos/portis.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/assets/logos/portis.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/assets/logos/metamask.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/assets/logos/metamask.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /examples/assets/logos/bitski.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | bitski-icon 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /packages/assets/logos/bitski.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | bitski-icon 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /examples/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 191 | 223 | -------------------------------------------------------------------------------- /packages/constants/chains.js: -------------------------------------------------------------------------------- 1 | export const CHAIN_DATA_LIST = { 2 | 1: { 3 | chainId: 1, 4 | chain: "ETH", 5 | network: "mainnet", 6 | networkId: 1 7 | }, 8 | 2: { 9 | chainId: 2, 10 | chain: "EXP", 11 | network: "expanse", 12 | networkId: 1 13 | }, 14 | 3: { 15 | chainId: 3, 16 | chain: "ETH", 17 | network: "ropsten", 18 | networkId: 3 19 | }, 20 | 4: { 21 | chainId: 4, 22 | chain: "ETH", 23 | network: "rinkeby", 24 | networkId: 4 25 | }, 26 | 5: { 27 | chainId: 5, 28 | chain: "ETH", 29 | network: "goerli", 30 | networkId: 5 31 | }, 32 | 6: { 33 | chainId: 6, 34 | chain: "ETC", 35 | network: "kotti", 36 | networkId: 6 37 | }, 38 | 8: { 39 | chainId: 8, 40 | chain: "UBQ", 41 | network: "ubiq", 42 | networkId: 88 43 | }, 44 | 9: { 45 | chainId: 9, 46 | chain: "UBQ", 47 | network: "ubiq-testnet", 48 | networkId: 2 49 | }, 50 | 10: { 51 | chainId: 10, 52 | chain: "ETH", 53 | network: "optimism", 54 | networkId: 10 55 | }, 56 | 11: { 57 | chainId: 11, 58 | chain: "META", 59 | network: "metadium", 60 | networkId: 11 61 | }, 62 | 12: { 63 | chainId: 12, 64 | chain: "META", 65 | network: "metadium-testnet", 66 | networkId: 12 67 | }, 68 | 18: { 69 | chainId: 18, 70 | chain: "TST", 71 | network: "thundercore-testnet", 72 | networkId: 18 73 | }, 74 | 22: { 75 | chainId: 22, 76 | chain: "LYX", 77 | network: "lukso-l14-testnet", 78 | networkId: 22 79 | }, 80 | 23: { 81 | chainId: 23, 82 | chain: "LYX", 83 | network: "lukso-l15-testnet", 84 | networkId: 23 85 | }, 86 | 30: { 87 | chainId: 30, 88 | chain: "RSK", 89 | network: "rsk", 90 | networkId: 30 91 | }, 92 | 31: { 93 | chainId: 31, 94 | chain: "RSK", 95 | network: "rsk-testnet", 96 | networkId: 31 97 | }, 98 | 42: { 99 | chainId: 42, 100 | chain: "ETH", 101 | network: "kovan", 102 | networkId: 42 103 | }, 104 | 56: { 105 | chainId: 56, 106 | chain: "BSC", 107 | network: "binance", 108 | networkId: 56 109 | }, 110 | 60: { 111 | chainId: 60, 112 | chain: "GO", 113 | network: "gochain", 114 | networkId: 60 115 | }, 116 | 61: { 117 | chainId: 61, 118 | chain: "ETC", 119 | network: "etc", 120 | networkId: 1 121 | }, 122 | 62: { 123 | chainId: 62, 124 | chain: "ETC", 125 | network: "etc-morden", 126 | networkId: 2 127 | }, 128 | 63: { 129 | chainId: 63, 130 | chain: "ETC", 131 | network: "etc-testnet", 132 | networkId: 7 133 | }, 134 | 64: { 135 | chainId: 64, 136 | chain: "ELLA", 137 | network: "ellaism", 138 | networkId: 64 139 | }, 140 | 69: { 141 | chainId: 69, 142 | chain: "ETH", 143 | network: "optimism-kovan", 144 | networkId: 69 145 | }, 146 | 76: { 147 | chainId: 76, 148 | chain: "MIX", 149 | network: "mix", 150 | networkId: 76 151 | }, 152 | 77: { 153 | chainId: 77, 154 | chain: "POA", 155 | network: "poa-sokol", 156 | networkId: 77 157 | }, 158 | 88: { 159 | chainId: 88, 160 | chain: "TOMO", 161 | network: "tomochain", 162 | networkId: 88 163 | }, 164 | 97: { 165 | chainId: 97, 166 | chain: "BSC", 167 | network: "binance-testnet", 168 | networkId: 97 169 | }, 170 | 99: { 171 | chainId: 99, 172 | chain: "POA", 173 | network: "poa-core", 174 | networkId: 99 175 | }, 176 | 100: { 177 | chainId: 100, 178 | chain: "XDAI", 179 | network: "xdai", 180 | networkId: 100 181 | }, 182 | 101: { 183 | chainId: 101, 184 | chain: "ETI", 185 | network: "etherinc", 186 | networkId: 1 187 | }, 188 | 108: { 189 | chainId: 108, 190 | chain: "TT", 191 | network: "thundercore", 192 | networkId: 108 193 | }, 194 | 162: { 195 | chainId: 162, 196 | chain: "PHT", 197 | network: "sirius", 198 | networkId: 162 199 | }, 200 | 163: { 201 | chainId: 163, 202 | chain: "PHT", 203 | network: "lightstreams", 204 | networkId: 163 205 | }, 206 | 211: { 207 | chainId: 211, 208 | chain: "FTN", 209 | network: "freight", 210 | networkId: 0 211 | }, 212 | 250: { 213 | chainId: 250, 214 | chain: "FTM", 215 | network: "fantom", 216 | networkId: 250 217 | }, 218 | 269: { 219 | chainId: 269, 220 | chain: "HPB", 221 | network: "hpb", 222 | networkId: 100 223 | }, 224 | 385: { 225 | chainId: 385, 226 | chain: "CRO", 227 | network: "lisinski", 228 | networkId: 385 229 | }, 230 | 820: { 231 | chainId: 820, 232 | chain: "CLO", 233 | network: "callisto", 234 | networkId: 1 235 | }, 236 | 821: { 237 | chainId: 821, 238 | chain: "CLO", 239 | network: "callisto-testnet", 240 | networkId: 2 241 | }, 242 | 137: { 243 | chainId: 137, 244 | chain: "MATIC", 245 | network: "matic", 246 | networkId: 137 247 | }, 248 | 42161: { 249 | chainId: 42161, 250 | chain: "ETH", 251 | network: "arbitrum", 252 | networkId: 42161 253 | }, 254 | 42220: { 255 | chainId: 42220, 256 | chain: "CELO", 257 | network: "celo", 258 | networkId: 42220 259 | }, 260 | 44787: { 261 | chainId: 44787, 262 | chain: "CELO", 263 | network: "celo-alfajores", 264 | networkId: 44787 265 | }, 266 | 62320: { 267 | chainId: 62320, 268 | chain: "CELO", 269 | network: "celo-baklava", 270 | networkId: 62320 271 | }, 272 | 80001: { 273 | chainId: 80001, 274 | chain: "MUMBAI", 275 | network: "mumbai", 276 | networkId: 80001 277 | }, 278 | 43113: { 279 | chainId: 43113, 280 | chain: "AVAX", 281 | network: "avalanche-fuji-testnet", 282 | networkId: 43113 283 | }, 284 | 43114: { 285 | chainId: 43114, 286 | chain: "AVAX", 287 | network: "avalanche-fuji-mainnet", 288 | networkId: 43114 289 | }, 290 | 246529: { 291 | chainId: 246529, 292 | chain: "ARTIS sigma1", 293 | network: "artis-s1", 294 | networkId: 246529 295 | }, 296 | 246785: { 297 | chainId: 246785, 298 | chain: "ARTIS tau1", 299 | network: "artis-t1", 300 | networkId: 246785 301 | }, 302 | 1007: { 303 | chainId: 1007, 304 | chain: "NewChain TestNet", 305 | network: "newchain-testnet", 306 | networkId: 1007 307 | }, 308 | 1012: { 309 | chainId: 1012, 310 | chain: "NewChain MainNet", 311 | network: "newchain-mainnet", 312 | networkId: 1012 313 | }, 314 | 421611: { 315 | chainId: 421611, 316 | chain: "ETH", 317 | network: "arbitrum-rinkeby", 318 | networkId: 421611 319 | } 320 | }; 321 | -------------------------------------------------------------------------------- /packages/base/index.jsx: -------------------------------------------------------------------------------- 1 | import { providers, connectors } from "../providers"; 2 | 3 | import bgBtShow from "../assets/images/bgBtHide.png"; 4 | import bgBtHide from "../assets/images/bgBtShow.png"; 5 | import closeMode from "../assets/images/close.png"; 6 | 7 | const ETH_WALLET_MODAL = "ETH_WALLET_MODAL"; 8 | 9 | const INITIAL_STATE = { show: false }; 10 | 11 | const defaultOpt = { 12 | logo: '', 13 | chainId: "" 14 | }; 15 | 16 | export class Base { 17 | show = INITIAL_STATE.show; 18 | options = []; 19 | providers = null; 20 | walletOptions = []; 21 | 22 | constructor(options = defaultOpt) { 23 | this.options = options; 24 | this.walletOptions = options.walletOptions; 25 | this.maskColor = options.maskColor ? options.maskColor : "rgb(30, 30, 30, 0.8)"; 26 | this.bgColor = options.bgColor ? options.bgColor : "#363636"; 27 | this.borderColor = options.borderColor ? options.borderColor : "#faba30"; 28 | this.providers = Object.keys(connectors).map((id) => { 29 | let providerInfo; 30 | providerInfo = this.getProviderInfoById(id); 31 | 32 | if (this.walletOptions[id]) { 33 | const options = this.walletOptions[id]; 34 | if (typeof options.displayView !== "undefined") { 35 | providerInfo = { 36 | ...providerInfo, 37 | ...this.walletOptions[id].displayView, 38 | }; 39 | } 40 | } 41 | 42 | return { 43 | ...providerInfo, 44 | connector: connectors[id], 45 | }; 46 | }); 47 | this.renderModal(); 48 | } 49 | getProviderInfoById (id) { 50 | return this.filterProviders("id", id); 51 | } 52 | 53 | filterProviders (param, value) { 54 | const match = this.filterMatches( 55 | Object.values(providers), 56 | x => x[param] === value, 57 | ); 58 | return match 59 | } 60 | 61 | filterMatches (array, condition) { 62 | let result = null; 63 | const matches = array.filter(condition); 64 | if (!!matches && matches.length) { 65 | result = matches[0]; 66 | } 67 | return result; 68 | } 69 | 70 | getUserOptions () { 71 | const providerList = this.providers.map(({ id }) => id); 72 | const userOptions = []; 73 | providerList.forEach((id) => { 74 | let provider = this.getProvider(id); 75 | if (typeof (this.walletOptions[id]) !== 'undefined') { 76 | const { id, name, logo, connector } = provider; 77 | userOptions.push({ 78 | id, 79 | name, 80 | logo, 81 | connector 82 | }); 83 | } 84 | }); 85 | // const providerList = []; 86 | 87 | // defaultProviderList.forEach((id) => { 88 | // const result = this.shouldDisplayProvider(id); 89 | // console.log('result', result) 90 | // if (result) { 91 | // providerList.push(id); 92 | // } 93 | // }); 94 | return userOptions; 95 | 96 | } 97 | 98 | shouldDisplayProvider (id) { 99 | const provider = this.getProvider(id); 100 | if (typeof provider !== "undefined") { 101 | const providerPackageOptions = this.walletOptions[id]; 102 | if (providerPackageOptions) { 103 | const isProvided = !!providerPackageOptions.package; 104 | if (isProvided) { 105 | const requiredOptions = provider.package 106 | ? provider.package.required 107 | : undefined; 108 | if (requiredOptions && requiredOptions.length) { 109 | const providedOptions = providerPackageOptions.options; 110 | if (providedOptions && Object.keys(providedOptions).length) { 111 | const matches = this.findMatchingRequiredOptions( 112 | requiredOptions, 113 | providedOptions 114 | ); 115 | if (requiredOptions.length === matches.length) { 116 | return true; 117 | } 118 | } 119 | } else { 120 | return true; 121 | } 122 | } 123 | } 124 | } 125 | return false; 126 | } 127 | getProvider (id) { 128 | return this.filterMatches( 129 | this.providers, 130 | x => x.id === id, 131 | ); 132 | } 133 | findMatchingRequiredOptions (requiredOptions, providedOptions) { 134 | const matches = requiredOptions.filter(requiredOption => { 135 | if (typeof requiredOption === "string") { 136 | return requiredOption in providedOptions; 137 | } 138 | const matches = this.findMatchingRequiredOptions( 139 | requiredOption, 140 | providedOptions 141 | ); 142 | return matches && matches.length; 143 | }); 144 | return matches; 145 | } 146 | 147 | 148 | 149 | connect = async () => { 150 | return await new Promise((resolve, reject) => { 151 | (async () => { 152 | var closeBtn = document.getElementById("eth-close-box"); 153 | closeBtn.onclick = function () { 154 | // $('#ETH_WALLET_MODAL .connect').unbind(); 155 | document.getElementById('ETH_WALLET_MODAL').style.display = "none" 156 | } 157 | var _this = this 158 | if (localStorage.getItem("injected")) { 159 | var name = localStorage.getItem("injected") 160 | _this.connectTo(name).then((res) => { 161 | resolve(res) 162 | }).catch((error) => { 163 | reject(error) 164 | }) 165 | } else { 166 | document.getElementById('ETH_WALLET_MODAL').style.display = 'block' 167 | var elements = document.getElementsByClassName('connect') 168 | Array.from(elements).forEach(function (element) { 169 | element.onclick = function () { 170 | var name = element.querySelector('.cl-connect-btu').attributes["alt"].value 171 | _this.connectTo(name).then((res) => { 172 | resolve(res) 173 | }).catch((error) => { 174 | reject(error) 175 | }) 176 | } 177 | 178 | }); 179 | } 180 | })().catch(e => console.log("error: " + e)); 181 | }); 182 | } 183 | 184 | async connectTo (name) { 185 | return await new Promise((resolve, reject) => { 186 | (async () => { 187 | var _this = this 188 | var connector = _this.getProvider(name).connector; 189 | connector(_this.walletOptions[name].options).then((res) => { 190 | document.getElementById('ETH_WALLET_MODAL').style.display = "none" 191 | localStorage.setItem("injected", name) 192 | resolve(res) 193 | }).catch((error) => { 194 | document.getElementById('ETH_WALLET_MODAL').style.display = "none" 195 | localStorage.removeItem('injected') 196 | reject(error) 197 | }) 198 | })().catch(error => reject(error)); 199 | }); 200 | } 201 | 202 | disconnect = async (provider) => { 203 | if (provider) { 204 | if (localStorage.getItem("injected") === "walletconnect") { 205 | provider.connector.killSession() 206 | localStorage.removeItem('walletconnect') 207 | localStorage.removeItem('loglevel:webpack-dev-server') 208 | } 209 | } 210 | localStorage.removeItem('injected') 211 | } 212 | 213 | 214 | 215 | renderModal () { 216 | var userWalletProviderList = this.getUserOptions(); 217 | const el = document.createElement("div"); 218 | el.id = ETH_WALLET_MODAL; 219 | document.body.appendChild(el); 220 | var htmllet = 221 | `
222 |
223 |
224 | 225 |
226 |
227 | `; 228 | if (typeof (this.options.logo) !== 'undefined') { 229 | htmllet += ` 230 | 233 | ` 234 | } 235 | userWalletProviderList.forEach((item) => { 236 | htmllet += ` 237 |
238 | 243 |
244 | ` 245 | }) 246 | htmllet += ` 247 |
248 |
249 |
250 | 329 | ` 330 | document.getElementById(ETH_WALLET_MODAL).innerHTML = htmllet; 331 | } 332 | 333 | 334 | } 335 | -------------------------------------------------------------------------------- /README.zh-CN.md: -------------------------------------------------------------------------------- 1 | [English](./README.md) | 简体中文 | [日本](./README.ja-JP.md) 2 | 3 |

4 | 以太坊集成钱包模态组件 5 |

6 | 7 | [![npm][npm]][npm-url] ![NPM](https://img.shields.io/npm/l/eth-wallet-modal) ![npm](https://img.shields.io/npm/dt/eth-wallet-modal?color=4D88DB&label=NPM%20Downloads) 8 | 9 | 10 |

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

13 | 14 | #### ⚠️ 注意 15 | 16 | 如果您需要减少不必要的导入并按需加载驱动程序，请访问 dapp-wallet-modal 项目 17 | 18 | ## 🚀 当前支持 19 |

20 | metamask 21 | walletconnect 22 | coinbase 23 | coinbase 24 | blockmallet 25 | binance 26 | portis 27 | burnerwallet 28 | torus 29 | authereum 30 |

31 | 32 | 33 | ## 🎉 演示预览 34 | 35 | ![preview](./images/preview.png) 36 | 37 | ## 💻 演示案例 38 | https://daudxu.github.io/eth-wallet-modal/ 39 | 40 | ## 🚩 使用方法 41 | 42 | ### 1️⃣ 安装 eth-wallet-modal NPM 软件包 43 | 44 | ``` 45 | npm install --save eth-wallet-modal 46 | # OR 47 | yarn add eth-wallet-modal 48 | ``` 49 | 50 | ### 2️⃣ 然后，您可以将eth钱包模式添加到Dapp中，如下所示 51 | 52 | ``` 53 | import Web3 from "web3"; 54 | import ethWalletModal from "eth-wallet-modal"; 55 | 56 | const providerOptions = { 57 | logo: LOGO, 58 | maskColor:'rgb(30, 30, 30, 0.8)', 59 | bgColor:'#363636', 60 | borderColor:'#faba30', 61 | chainId: CHAINID, 62 | walletOptions: { 63 | metamask: { 64 | displayView: { 65 | logo: MetaMaskLogo, 66 | name: "MetaMask", 67 | }, 68 | options: {} 69 | }, 70 | walletconnect: { 71 | displayView: { 72 | logo: WalletConnectLogo, 73 | name: "WalletConnect", 74 | }, 75 | options: { 76 | rpc: { 77 | 1: 'https://mainnet.infura.io/v3/9aa3d9a5b3bcs440fa88ea12eaa414516161', 78 | 4: 'https://rinkeby.infura.io/v3/9aa3d9a5b3bdc440fa88ea12ea221a4456161' 79 | }, 80 | chainId: CHAINID, 81 | bridge: 'https://bridge.walletconnect.org' 82 | } 83 | }, 84 | coinbase: { 85 | displayView: { 86 | logo: CoinbaseLogo, 87 | name: "Coinbase Wallet", 88 | }, 89 | options: { 90 | infuraId: '9aa3d95b3bxxaaxc440fasss88ea12eaa4456161', 91 | chainId: CHAINID, 92 | appName: 'Test', 93 | appLogoUrl: WalletConnectLogo, 94 | darkMode: false 95 | } 96 | }, 97 | ..... 98 | } 99 | 100 | } 101 | 102 | const walletModal = new ethWalletModal(providerOptions); 103 | 104 | const provider = await walletModal.connect(); 105 | 106 | const web3 = new Web3(provider); 107 | 108 | ``` 109 | 110 | ## 📝 参数选项说明 111 | 112 | | name | type | description | 113 | | --------------- | -------- | --------------------- | 114 | | providerOptions | object | see description below | 115 | | connect | function | return provider | 116 | | disconnect | function | provider or null | 117 | 118 | 119 | 120 | ##### providerOptions 参数说明 121 | 122 | | name | type | description | 123 | | --------------- | -------- | --------------------- | 124 | | logo | string | Your logo path address| 125 | | maskColor | string | mask Color | 126 | | bgColor | string | Modal background color| 127 | | borderColor | string | Modal border color | 128 | | chainId | int | chain Id | 129 | | walletOptions | array | See the table below | 130 | 131 | ##### walletOptions 参数说明 132 | 133 | | name | type | description | 134 | | --------------- | -------- | --------------------- | 135 | | metamask | array | See the metamask below| 136 | | walletconnect | array | See the walletconnect below | 137 | | coinbase | array | See the coinbase below| 138 | | blockmallet | array | See the blockmallet below| 139 | | fortmatic | array | See the fortmatic below| 140 | | binancechainwallet | array | See the binancechainwallet below| 141 | | portis | array | See the metamaskportis below | 142 | | burnerconnect | array | See the burnerconnect below | 143 | | torus | array | See the torus below | 144 | | authereum | array | See the authereum below | 145 | 146 | 147 | ##### metamask 148 | 149 | Official Doc: View Doc 150 | 151 | ``` 152 | metamask: { 153 | displayView: { 154 | logo: 'https://raw.org/metamask.svg' // 您定义用于显示钱包的徽标地址 155 | name: 'metamask' // 显示在你钱包显示的名字 156 | }, 157 | } 158 | ``` 159 | 160 | ##### walletconnect 161 | 162 | Official Doc: View Doc 163 | 164 | ``` 165 | walletconnect: { 166 | displayView: { 167 | logo: 'https://raw.org/walletconnect.svg' // 您定义用于显示钱包的徽标地址 168 | name: "WalletConnect", // 显示在你钱包显示的名字 169 | }, 170 | options: { 171 | rpc: { 172 | 1: 'Your infra 1 chain address', 173 | 4: 'Your infra 4(test Network) chain address' 174 | }, 175 | chainId: Blockchain network ID, 176 | bridge: 'https://bridge.walletconnect.org' 177 | } 178 | } 179 | 180 | // ⚠️ 配置参考官方文档 181 | ``` 182 | 183 | ##### coinbase 184 | 185 | Official Doc: View Doc 186 | 187 | ``` 188 | coinbase: { 189 | displayView: { 190 | logo: 'https://raw.org/coinbase.svg' // 您定义用于显示钱包的徽标地址 191 | name: "Coinbase Wallet", // 显示在你钱包显示的名字 192 | }, 193 | options: { 194 | infuraId: 'your infuraId ID', 195 | chainId: Blockchain network ID, 196 | appName: 'Your app name', 197 | appLogoUrl: Your app logo, 198 | darkMode: false 199 | } 200 | } 201 | 202 | // ⚠️ 配置参考官方文档 203 | ``` 204 | 205 | ##### blockmallet 206 | 207 | Official Doc: View Doc 208 | 209 | ``` 210 | blockmallet: { 211 | displayView: { 212 | logo: 'https://raw.org/blockmallet.svg' // 您定义用于显示钱包的徽标地址 213 | name: "blockmallet", // 显示在你钱包显示的名字 214 | }, 215 | } 216 | ``` 217 | 218 | ##### fortmatic 219 | 220 | Official Doc: View Doc 221 | 222 | ``` 223 | fortmatic: { 224 | displayView: { 225 | logo: 'https://raw.org/fortmatic.svg' // 您定义用于显示钱包的徽标地址 226 | name: "fortmatic", // 显示在你钱包显示的名字 227 | }, 228 | options: { 229 | chainId: Blockchain network ID, 230 | key:'your fortmatic key' 231 | } 232 | } 233 | 234 | // ⚠️ 配置参考官方文档 235 | ``` 236 | 237 | ##### binancechainwallet 238 | 239 | Official Doc View Doc 240 | 241 | ``` 242 | binancechainwallet: { 243 | displayView: { 244 | logo: 'https://raw.org/binancechainwallet.svg' // 您定义用于显示钱包的徽标地址 245 | name: "binancechainwallet", // 显示在你钱包显示的名字 246 | } 247 | } 248 | 249 | ``` 250 | 251 | ##### portis 252 | 253 | Official Doc: View Doc 254 | 255 | ``` 256 | portis: { 257 | displayView: { 258 | logo: 'https://raw.org/portis.svg' // 您定义用于显示钱包的徽标地址 259 | name: "portis", // 显示在你钱包显示的名字 260 | }, 261 | options: { 262 | chainName: 'rinkeby', // chain Name if 263 | id:'your protis key' 264 | } 265 | } 266 | 267 | // ⚠️ 配置参考官方文档 268 | ``` 269 | 选项 chainName 列表 270 | | 网络 | 描述 | 默认 Gas Relay Hub | 271 | | --------------- | -------- | --------------------- | 272 | | mainnet | Ethereum - main network| 0xD216153c06E857cD7f72665E0aF1d7D82172F494| 273 | | ropsten |Ethereum - ropsten network |0xD216153c06E857cD7f72665E0aF1d7D82172F494 | 274 | | rinkeby| Ethereum - rinkeby network| 0xD216153c06E857cD7f72665E0aF1d7D82172F494 | 275 | | goerli| Ethereum - goerli network | 0xD216153c06E857cD7f72665E0aF1d7D82172F494| 276 | |ubiq| UBQ - main network| -| 277 | |thundercoreTestnet| TT| - test network -| 278 | |orchid| RootStock - main network| -| 279 | |orchidTestnet| RootStock - test network| -| 280 | |kovan| Ethereum - kovan network| 0xD216153c06E857cD7f72665E0aF1d7D82172F494| 281 | |classic| Ethereum Classic - |main network -| 282 | |sokol| POA - test network| -| 283 | |core| POA - main network| -| 284 | |xdai| xDai - main network 0xD216153c06E857cD7f72665E0aF1d7D82172F494| 285 | |thundercore| TT - main network| -| 286 | |fuse| Fuse - main network |-| 287 | |lightstreams| Lightstreams |- main network -| 288 | |matic| MATIC - main network| -| 289 | |maticMumbai |MATIC - mumbai test network| -| 290 | |maticAlpha| MATIC - alpha network |-| 291 | |maticTestnet| MATIC - test network| -| 292 | official doc configuration 293 | 294 | 295 | ##### burnerconnect 296 | 297 | Official Doc: View Doc 298 | 299 | Progect address: View Doc 300 | 301 | ``` 302 | burnerconnect: { 303 | displayView: { 304 | logo: 'https://raw.org/burnerconnect.svg' // 您定义用于显示钱包的徽标地址 305 | name: "burnerconnect", // 显示在你钱包显示的名字 306 | }, 307 | options: { 308 | defaultNetwork: default Blockchain network ID, 309 | chainId: Blockchain network ID 310 | } 311 | }, 312 | ``` 313 | 314 | 315 | 316 | ##### torus 317 | 318 | Official Doc: View Doc 319 | 320 | ``` 321 | torus: { 322 | displayView: { 323 | logo: 'https://raw.org/torus.svg' // 您定义用于显示钱包的徽标地址 324 | name: "torus Wallet", // 显示在你钱包显示的名字 325 | } 326 | }, 327 | 328 | ``` 329 | 330 | ##### authereum 331 | 332 | Official Doc: View Doc 333 | 334 | ``` 335 | authereum: { 336 | displayView: { 337 | logo: 'https://raw.org/authereum.svg' // 您定义用于显示钱包的徽标地址 338 | name: "authereum", // 显示在你钱包显示的名字 339 | }, 340 | options: { 341 | chainName: 'rinkeby', // Need to pass in the chain Name eg： kova, rinkeby, mainne 342 | } 343 | }, 344 | 345 | // ⚠️ 配置参考官方文档 346 | ``` 347 | 选项 chainName 列表 348 | | 网络 | 描述 | 默认 Gas Relay Hub | 349 | | --------------- | -------- | --------------------- | 350 | | mainnet | Ethereum - main network| 0xD216153c06E857cD7f72665E0aF1d7D82172F494| 351 | | ropsten |Ethereum - ropsten network |0xD216153c06E857cD7f72665E0aF1d7D82172F494 | 352 | | rinkeby| Ethereum - rinkeby network| 0xD216153c06E857cD7f72665E0aF1d7D82172F494 | 353 | | goerli| Ethereum - goerli network | 0xD216153c06E857cD7f72665E0aF1d7D82172F494| 354 | |ubiq| UBQ - main network| -| 355 | |thundercoreTestnet| TT| - test network -| 356 | |orchid| RootStock - main network| -| 357 | |orchidTestnet| RootStock - test network| -| 358 | |kovan| Ethereum - kovan network| 0xD216153c06E857cD7f72665E0aF1d7D82172F494| 359 | |classic| Ethereum Classic - |main network -| 360 | |sokol| POA - test network| -| 361 | |core| POA - main network| -| 362 | |xdai| xDai - main network 0xD216153c06E857cD7f72665E0aF1d7D82172F494| 363 | |thundercore| TT - main network| -| 364 | |fuse| Fuse - main network |-| 365 | |lightstreams| Lightstreams |- main network -| 366 | |matic| MATIC - main network| -| 367 | |maticMumbai |MATIC - mumbai test network| -| 368 | |maticAlpha| MATIC - alpha network |-| 369 | |maticTestnet| MATIC - test network| -| 370 | 371 | 372 | 373 | ## 📖 Provider subscription Events 374 | 375 | ``` 376 | // Subscribe to accounts change 377 | provider.on("accountsChanged", (accounts: string[]) => { 378 | console.log(accounts); 379 | }); 380 | 381 | // Subscribe to chainId change 382 | provider.on("chainChanged", (chainId: number) => { 383 | console.log(chainId); 384 | }); 385 | 386 | // Subscribe to provider connection 387 | provider.on("connect", (info: { chainId: number }) => { 388 | console.log(info); 389 | }); 390 | 391 | // Subscribe to provider disconnection 392 | provider.on("disconnect", (error: { code: number; message: string }) => { 393 | console.log(error); 394 | }); 395 | ``` 396 | 397 | ## 🎾 Features 398 | 399 | - [v] Built for Ethereum using [Web3](https://github.com/ethereum/web3.js/). 400 | - [v] Implements [Graph Protocol](https://github.com/graphprotocol) to read blockchain. 401 | 402 | ## 📝 Changelog 403 | 404 | ##### 2022.02.21 405 | 406 | > v1.0.0 407 | init project 408 | 409 | ##### 2022.03.12 410 | > v1.1.3 411 | add fortmatic, binance, portis 412 | Mask background color customization 413 | Modal box background color customization 414 | Modal box border color customization 415 | 416 | ##### 2022.03.20 417 | > v1.1.6 418 | Add fortmatic, binance and Portis wallet support 419 | 420 | 421 | ## ✈️ other 422 | 423 | - Etherscan: https://etherscan.io/apis 424 | - Infura: https://infura.io/ 425 | - ETH Gas Station: https://docs.ethgasstation.info/ 426 | - Imgix: https://www.imgix.com/ 427 | 428 | [npm]: https://img.shields.io/npm/v/postcss-load-config.svg 429 | [npm-url]: https://npmjs.com/package/postcss-load-config 430 | [node]: https://img.shields.io/node/v/postcss-load-plugins.svg 431 | [node-url]: https://nodejs.org/ 432 | -------------------------------------------------------------------------------- /README.ja-JP.md: -------------------------------------------------------------------------------- 1 | [English](./README.md) | [简体中文](./README.zh-CN.md) | 日本 2 | 3 |

4 | イーサリアム統合ウォレットモーダルコンポーネント 5 |

6 | 7 | [![npm][npm]][npm-url] ![NPM](https://img.shields.io/npm/l/eth-wallet-modal) ![npm](https://img.shields.io/npm/dt/eth-wallet-modal?color=4D88DB&label=NPM%20Downloads) 8 | 9 | 10 |

11 | イーサリアムプロバイダーのDappウォレット統合ソリューション 12 |

13 | 14 | #### ⚠️ 知らせ 15 | 16 | 不要なインポートを減らし、オンデマンドでドライバーをロードする必要がある場合は、次のWebサイトにアクセスしてください。 dapp-wallet-modal 事業 17 | 18 | ## 🚀 現在のサポート 19 |

20 | metamask 21 | walletconnect 22 | coinbase 23 | coinbase 24 | blockmallet 25 | binance 26 | portis 27 | burnerwallet 28 | torus 29 | authereum 30 |

31 | 32 | 33 | ## 🎉 プレビュー 34 | 35 | ![preview](./images/preview.png) 36 | 37 | ## 💻 例 38 | https://daudxu.github.io/eth-wallet-modal/ 39 | 40 | ## 🚩 使用方法 41 | 42 | ### 1️⃣ eth-wallet-modal NPM パッケージをインストールします 43 | 44 | ``` 45 | npm install --save eth-wallet-modal 46 | # OR 47 | yarn add eth-wallet-modal 48 | ``` 49 | 50 | ### 2️⃣ 次に、次のように eth-wallet-modalを Dapp に追加できます。 51 | 52 | ``` 53 | import Web3 from "web3"; 54 | import ethWalletModal from "eth-wallet-modal"; 55 | 56 | const providerOptions = { 57 | logo: LOGO, 58 | maskColor:'rgb(30, 30, 30, 0.8)', 59 | bgColor:'#363636', 60 | borderColor:'#faba30', 61 | chainId: CHAINID, 62 | walletOptions: { 63 | metamask: { 64 | displayView: { 65 | logo: MetaMaskLogo, 66 | name: "MetaMask", 67 | }, 68 | options: {} 69 | }, 70 | walletconnect: { 71 | displayView: { 72 | logo: WalletConnectLogo, 73 | name: "WalletConnect", 74 | }, 75 | options: { 76 | rpc: { 77 | 1: 'https://mainnet.infura.io/v3/9aa3d95b3bc440fa88ea12eaa414516161', 78 | 4: 'https://rinkeby.infura.io/v3/9aa3d95b3bc440fa88ea12ea221a4456161' 79 | }, 80 | chainId: CHAINID, 81 | bridge: 'https://bridge.walletconnect.org' 82 | } 83 | }, 84 | coinbase: { 85 | displayView: { 86 | logo: CoinbaseLogo, 87 | name: "Coinbase Wallet", 88 | }, 89 | options: { 90 | infuraId: '9aa3d95b3bxxxc440fa88ea12eaa4456161', 91 | chainId: CHAINID, 92 | appName: 'Digi', 93 | appLogoUrl: WalletConnectLogo, 94 | darkMode: false 95 | } 96 | }, 97 | ..... 98 | } 99 | 100 | } 101 | 102 | const walletModal = new ethWalletModal(providerOptions); 103 | 104 | const provider = await walletModal.connect(); 105 | 106 | const web3 = new Web3(provider); 107 | 108 | ``` 109 | 110 | ## 📝 オプション 111 | 112 | | name | type | description | 113 | | --------------- | -------- | --------------------- | 114 | | providerOptions | object | see description below | 115 | | connect | function | return provider | 116 | | disconnect | function | provider or null | 117 | 118 | 119 | 120 | ##### providerOptions パラメータ 121 | 122 | | name | type | description | 123 | | --------------- | -------- | --------------------- | 124 | | logo | string | Your logo path address| 125 | | maskColor | string | mask Color | 126 | | bgColor | string | Modal background color| 127 | | borderColor | string | Modal border color | 128 | | chainId | int | chain Id | 129 | | walletOptions | array | See the table below | 130 | 131 | ##### walletOptions パラメータ 132 | 133 | | name | type | description | 134 | | --------------- | -------- | --------------------- | 135 | | metamask | array | See the metamask below| 136 | | walletconnect | array | See the walletconnect below | 137 | | coinbase | array | See the coinbase below| 138 | | blockmallet | array | See the blockmallet below| 139 | | fortmatic | array | See the fortmatic below| 140 | | binancechainwallet | array | See the binancechainwallet below| 141 | | portis | array | See the metamaskportis below | 142 | | burnerconnect | array | See the burnerconnect below | 143 | | torus | array | See the torus below | 144 | | authereum | array | See the authereum below | 145 | 146 | 147 | ##### metamask 148 | 149 | Official Doc: View Doc 150 | 151 | ``` 152 | metamask: { 153 | displayView: { 154 | logo: 'https://raw.org/metamask.svg' // ウォレットを表示するために定義するロゴアドレス. 155 | name: 'metamask' // 自分の財布の前面に表示されている名前. 156 | }, 157 | } 158 | ``` 159 | 160 | ##### walletconnect 161 | 162 | Official Doc: View Doc 163 | 164 | ``` 165 | walletconnect: { 166 | displayView: { 167 | logo: 'https://raw.org/walletconnect.svg' // ウォレットを表示するために定義するロゴアドレス. 168 | name: "WalletConnect", // 自分の財布の前面に表示されている名前. 169 | }, 170 | options: { 171 | rpc: { 172 | 1: 'Your infra 1 chain address', 173 | 4: 'Your infra 4(test Network) chain address' 174 | }, 175 | chainId: Blockchain network ID, 176 | bridge: 'https://bridge.walletconnect.org' 177 | } 178 | } 179 | 180 | // ⚠️ 構成リファレンスの公式ドキュメント 181 | ``` 182 | 183 | ##### coinbase 184 | 185 | Official Doc: View Doc 186 | 187 | ``` 188 | coinbase: { 189 | displayView: { 190 | logo: 'https://raw.org/coinbase.svg' // ウォレットを表示するために定義するロゴアドレス. 191 | name: "Coinbase Wallet", // 自分の財布の前面に表示されている名前. 192 | }, 193 | options: { 194 | infuraId: 'your infuraId ID', 195 | chainId: Blockchain network ID, 196 | appName: 'Your app name', 197 | appLogoUrl: Your app logo, 198 | darkMode: false 199 | } 200 | } 201 | 202 | // ⚠️ 構成リファレンスの公式ドキュメント 203 | ``` 204 | 205 | ##### blockmallet 206 | 207 | Official Doc: View Doc 208 | 209 | ``` 210 | blockmallet: { 211 | displayView: { 212 | logo: 'https://raw.org/blockmallet.svg' // ウォレットを表示するために定義するロゴアドレス. 213 | name: "blockmallet", // 自分の財布の前面に表示されている名前. 214 | }, 215 | } 216 | ``` 217 | 218 | ##### fortmatic 219 | 220 | Official Doc: View Doc 221 | 222 | ``` 223 | fortmatic: { 224 | displayView: { 225 | logo: 'https://raw.org/fortmatic.svg' // ウォレットを表示するために定義するロゴアドレス. 226 | name: "fortmatic", // 自分の財布の前面に表示されている名前. 227 | }, 228 | options: { 229 | chainId: Blockchain network ID, 230 | key:'your fortmatic key' 231 | } 232 | } 233 | 234 | // ⚠️ 構成リファレンスの公式ドキュメント 235 | ``` 236 | 237 | ##### binancechainwallet 238 | 239 | Official Doc View Doc 240 | 241 | ``` 242 | binancechainwallet: { 243 | displayView: { 244 | logo: 'https://raw.org/binancechainwallet.svg' // ウォレットを表示するために定義するロゴアドレス. 245 | name: "binancechainwallet", // 自分の財布の前面に表示されている名前. 246 | } 247 | } 248 | 249 | ``` 250 | 251 | ##### portis 252 | 253 | Official Doc: View Doc 254 | 255 | ``` 256 | portis: { 257 | displayView: { 258 | logo: 'https://raw.org/portis.svg' // ウォレットを表示するために定義するロゴアドレス. 259 | name: "portis", // 自分の財布の前面に表示されている名前. 260 | }, 261 | options: { 262 | chainName: 'rinkeby', // chain Name if 263 | id:'your protis key' 264 | } 265 | } 266 | 267 | // ⚠️ 構成リファレンスの公式ドキュメント 268 | ``` 269 | options chainName list 270 | | Network | Description | Default Gas Relay Hub | 271 | | --------------- | -------- | --------------------- | 272 | | mainnet | Ethereum - main network| 0xD216153c06E857cD7f72665E0aF1d7D82172F494| 273 | | ropsten |Ethereum - ropsten network |0xD216153c06E857cD7f72665E0aF1d7D82172F494 | 274 | | rinkeby| Ethereum - rinkeby network| 0xD216153c06E857cD7f72665E0aF1d7D82172F494 | 275 | | goerli| Ethereum - goerli network | 0xD216153c06E857cD7f72665E0aF1d7D82172F494| 276 | |ubiq| UBQ - main network| -| 277 | |thundercoreTestnet| TT| - test network -| 278 | |orchid| RootStock - main network| -| 279 | |orchidTestnet| RootStock - test network| -| 280 | |kovan| Ethereum - kovan network| 0xD216153c06E857cD7f72665E0aF1d7D82172F494| 281 | |classic| Ethereum Classic - |main network -| 282 | |sokol| POA - test network| -| 283 | |core| POA - main network| -| 284 | |xdai| xDai - main network 0xD216153c06E857cD7f72665E0aF1d7D82172F494| 285 | |thundercore| TT - main network| -| 286 | |fuse| Fuse - main network |-| 287 | |lightstreams| Lightstreams |- main network -| 288 | |matic| MATIC - main network| -| 289 | |maticMumbai |MATIC - mumbai test network| -| 290 | |maticAlpha| MATIC - alpha network |-| 291 | |maticTestnet| MATIC - test network| -| 292 | official doc configuration 293 | 294 | 295 | ##### burnerconnect 296 | 297 | Official Doc: View Doc 298 | 299 | Progect address: View Doc 300 | 301 | ``` 302 | burnerconnect: { 303 | displayView: { 304 | logo: 'https://raw.org/burnerconnect.svg' // ウォレットを表示するために定義するロゴアドレス. 305 | name: "burnerconnect", // 自分の財布の前面に表示されている名前. 306 | }, 307 | options: { 308 | defaultNetwork: default Blockchain network ID, 309 | chainId: Blockchain network ID 310 | } 311 | }, 312 | ``` 313 | 314 | 315 | 316 | ##### torus 317 | 318 | Official Doc: View Doc 319 | 320 | ``` 321 | torus: { 322 | displayView: { 323 | logo: 'https://raw.org/torus.svg' // ウォレットを表示するために定義するロゴアドレス. 324 | name: "torus Wallet", // 自分の財布の前面に表示されている名前. 325 | } 326 | }, 327 | 328 | ``` 329 | 330 | ##### authereum 331 | 332 | Official Doc: View Doc 333 | 334 | ``` 335 | authereum: { 336 | displayView: { 337 | logo: 'https://raw.org/authereum.svg' // ウォレットを表示するために定義するロゴアドレス. 338 | name: "authereum", // 自分の財布の前面に表示されている名前. 339 | }, 340 | options: { 341 | chainName: 'rinkeby', // Need to pass in the chain Name eg： kova, rinkeby, mainne 342 | } 343 | }, 344 | 345 | // ⚠️ 構成リファレンスの公式ドキュメント 346 | ``` 347 | options chainName list 348 | | Network | Description | Default Gas Relay Hub | 349 | | --------------- | -------- | --------------------- | 350 | | mainnet | Ethereum - main network| 0xD216153c06E857cD7f72665E0aF1d7D82172F494| 351 | | ropsten |Ethereum - ropsten network |0xD216153c06E857cD7f72665E0aF1d7D82172F494 | 352 | | rinkeby| Ethereum - rinkeby network| 0xD216153c06E857cD7f72665E0aF1d7D82172F494 | 353 | | goerli| Ethereum - goerli network | 0xD216153c06E857cD7f72665E0aF1d7D82172F494| 354 | |ubiq| UBQ - main network| -| 355 | |thundercoreTestnet| TT| - test network -| 356 | |orchid| RootStock - main network| -| 357 | |orchidTestnet| RootStock - test network| -| 358 | |kovan| Ethereum - kovan network| 0xD216153c06E857cD7f72665E0aF1d7D82172F494| 359 | |classic| Ethereum Classic - |main network -| 360 | |sokol| POA - test network| -| 361 | |core| POA - main network| -| 362 | |xdai| xDai - main network 0xD216153c06E857cD7f72665E0aF1d7D82172F494| 363 | |thundercore| TT - main network| -| 364 | |fuse| Fuse - main network |-| 365 | |lightstreams| Lightstreams |- main network -| 366 | |matic| MATIC - main network| -| 367 | |maticMumbai |MATIC - mumbai test network| -| 368 | |maticAlpha| MATIC - alpha network |-| 369 | |maticTestnet| MATIC - test network| -| 370 | 371 | 372 | 373 | ## 📖 Provider subscription Events 374 | 375 | ``` 376 | // Subscribe to accounts change 377 | provider.on("accountsChanged", (accounts: string[]) => { 378 | console.log(accounts); 379 | }); 380 | 381 | // Subscribe to chainId change 382 | provider.on("chainChanged", (chainId: number) => { 383 | console.log(chainId); 384 | }); 385 | 386 | // Subscribe to provider connection 387 | provider.on("connect", (info: { chainId: number }) => { 388 | console.log(info); 389 | }); 390 | 391 | // Subscribe to provider disconnection 392 | provider.on("disconnect", (error: { code: number; message: string }) => { 393 | console.log(error); 394 | }); 395 | ``` 396 | 397 | ## 🎾 Features 398 | 399 | - [v] Built for Ethereum using [Web3](https://github.com/ethereum/web3.js/). 400 | - [v] Implements [Graph Protocol](https://github.com/graphprotocol) to read blockchain. 401 | 402 | ## 📝 Changelog 403 | 404 | ##### 2022.02.21 405 | 406 | > v1.0.0 407 | init project 408 | 409 | ##### 2022.03.12 410 | > v1.1.3 411 | add fortmatic, binance, portis 412 | Mask background color customization 413 | Modal box background color customization 414 | Modal box border color customization 415 | 416 | ##### 2022.03.20 417 | > v1.1.6 418 | Add fortmatic, binance and Portis wallet support 419 | 420 | 421 | ## ✈️ other 422 | 423 | - Etherscan: https://etherscan.io/apis 424 | - Infura: https://infura.io/ 425 | - ETH Gas Station: https://docs.ethgasstation.info/ 426 | - Imgix: https://www.imgix.com/ 427 | 428 | [npm]: https://img.shields.io/npm/v/postcss-load-config.svg 429 | [npm-url]: https://npmjs.com/package/postcss-load-config 430 | [node]: https://img.shields.io/node/v/postcss-load-plugins.svg 431 | [node-url]: https://nodejs.org/ 432 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | English | [简体中文](./README.zh-CN.md) | [日本](./README.ja-JP.md) 2 | 3 |

4 | ETH Wallet Modal 5 |

6 | 7 | 8 | [![npm][npm]][npm-url] ![NPM](https://img.shields.io/npm/l/eth-wallet-modal) ![npm](https://img.shields.io/npm/dt/eth-wallet-modal?color=4D88DB&label=NPM%20Downloads) 9 | 10 | 11 |

12 | An Ethereum Provider Solution for Integrated Wallets and Dapps 13 |

14 | 15 | #### ⚠️ Notice 16 | 17 | If you need to reduce unnecessary imports and load drivers on demand, please go to the dapp-wallet-modal project 18 | 19 | ## 🚀 Current support 20 |

21 | metamask 22 | walletconnect 23 | coinbase 24 | coinbase 25 | blockmallet 26 | binance 27 | portis 28 | burnerwallet 29 | torus 30 | authereum 31 |

32 | 33 | 34 | ## 🎉 Preview 35 | 36 | ![preview](./images/preview.png) 37 | 38 | ## 💻 example 39 | https://daudxu.github.io/eth-wallet-modal/ 40 | 41 | ## 🚩 Usage 42 | 43 | ### 1️⃣ Install eth-wallet-modal NPM package 44 | 45 | ``` 46 | npm install --save eth-wallet-modal 47 | # OR 48 | yarn add eth-wallet-modal 49 | ``` 50 | 51 | ### 2️⃣ Then you can add eth-wallet-modal to your Dapp as follows 52 | 53 | ``` 54 | import Web3 from "web3"; 55 | import ethWalletModal from "eth-wallet-modal"; 56 | 57 | const providerOptions = { 58 | logo: LOGO, 59 | maskColor:'rgb(30, 30, 30, 0.8)', 60 | bgColor:'#363636', 61 | borderColor:'#faba30', 62 | chainId: CHAINID, 63 | walletOptions: { 64 | metamask: { 65 | displayView: { 66 | logo: MetaMaskLogo, 67 | name: "MetaMask", 68 | }, 69 | options: {} 70 | }, 71 | walletconnect: { 72 | displayView: { 73 | logo: WalletConnectLogo, 74 | name: "WalletConnect", 75 | }, 76 | options: { 77 | rpc: { 78 | 1: 'https://mainnet.infura.io/v3/9aa3d95b3bc440fa88ea12eaa414516161', 79 | 4: 'https://rinkeby.infura.io/v3/9aa3d95b3bc440fa88ea12ea221a4456161' 80 | }, 81 | chainId: CHAINID, 82 | bridge: 'https://bridge.walletconnect.org' 83 | } 84 | }, 85 | coinbase: { 86 | displayView: { 87 | logo: CoinbaseLogo, 88 | name: "Coinbase Wallet", 89 | }, 90 | options: { 91 | infuraId: '9aa3d95b3bxxxc440fa88ea12eaa4456161', 92 | chainId: CHAINID, 93 | appName: 'Digi', 94 | appLogoUrl: WalletConnectLogo, 95 | darkMode: false 96 | } 97 | }, 98 | ..... 99 | } 100 | 101 | } 102 | 103 | const walletModal = new ethWalletModal(providerOptions); 104 | 105 | const provider = await walletModal.connect(); 106 | 107 | const web3 = new Web3(provider); 108 | 109 | ``` 110 | 111 | ## 📝 Options 112 | 113 | | name | type | description | 114 | | --------------- | -------- | --------------------- | 115 | | providerOptions | object | see description below | 116 | | connect | function | return provider | 117 | | disconnect | function | provider or null | 118 | 119 | 120 | 121 | ##### providerOptions parameter 122 | 123 | | name | type | description | 124 | | --------------- | -------- | --------------------- | 125 | | logo | string | Your logo path address| 126 | | maskColor | string | mask Color | 127 | | bgColor | string | Modal background color| 128 | | borderColor | string | Modal border color | 129 | | chainId | int | chain Id | 130 | | walletOptions | array | See the table below | 131 | 132 | ##### walletOptions parameter 133 | 134 | | name | type | description | 135 | | --------------- | -------- | --------------------- | 136 | | metamask | array | See the metamask below| 137 | | walletconnect | array | See the walletconnect below | 138 | | coinbase | array | See the coinbase below| 139 | | blockmallet | array | See the blockmallet below| 140 | | fortmatic | array | See the fortmatic below| 141 | | binancechainwallet | array | See the binancechainwallet below| 142 | | portis | array | See the metamaskportis below | 143 | | burnerconnect | array | See the burnerconnect below | 144 | | torus | array | See the torus below | 145 | | authereum | array | See the authereum below | 146 | 147 | 148 | ##### metamask 149 | 150 | Official Doc: View Doc 151 | 152 | ``` 153 | metamask: { 154 | displayView: { 155 | logo: 'https://raw.org/metamask.svg' // The logo address you define to display your wallet. 156 | name: 'metamask' // The name displayed on the front of your own wallet. 157 | }, 158 | } 159 | ``` 160 | 161 | ##### walletconnect 162 | 163 | Official Doc: View Doc 164 | 165 | ``` 166 | walletconnect: { 167 | displayView: { 168 | logo: 'https://raw.org/walletconnect.svg' // The logo address you define to display your wallet. 169 | name: "WalletConnect", // The name displayed on the front of your own wallet. 170 | }, 171 | options: { 172 | rpc: { 173 | 1: 'Your infra 1 chain address', 174 | 4: 'Your infra 4(test Network) chain address' 175 | }, 176 | chainId: Blockchain network ID, 177 | bridge: 'https://bridge.walletconnect.org' 178 | } 179 | } 180 | 181 | // ⚠️ Configuration reference official documentation 182 | ``` 183 | 184 | ##### coinbase 185 | 186 | Official Doc: View Doc 187 | 188 | ``` 189 | coinbase: { 190 | displayView: { 191 | logo: 'https://raw.org/coinbase.svg' // The logo address you define to display your wallet. 192 | name: "Coinbase Wallet", // The name displayed on the front of your own wallet. 193 | }, 194 | options: { 195 | infuraId: 'your infuraId ID', 196 | chainId: Blockchain network ID, 197 | appName: 'Your app name', 198 | appLogoUrl: Your app logo, 199 | darkMode: false 200 | } 201 | } 202 | 203 | // ⚠️ Configuration reference official documentation 204 | ``` 205 | 206 | ##### blockmallet 207 | 208 | Official Doc: View Doc 209 | 210 | ``` 211 | blockmallet: { 212 | displayView: { 213 | logo: 'https://raw.org/blockmallet.svg' // The logo address you define to display your wallet. 214 | name: "blockmallet", // The name displayed on the front of your own wallet. 215 | }, 216 | } 217 | ``` 218 | 219 | ##### fortmatic 220 | 221 | Official Doc: View Doc 222 | 223 | ``` 224 | fortmatic: { 225 | displayView: { 226 | logo: 'https://raw.org/fortmatic.svg' // The logo address you define to display your wallet. 227 | name: "fortmatic", // The name displayed on the front of your own wallet. 228 | }, 229 | options: { 230 | chainId: Blockchain network ID, 231 | key:'your fortmatic key' 232 | } 233 | } 234 | 235 | // ⚠️ Configuration reference official documentation 236 | ``` 237 | 238 | ##### binancechainwallet 239 | 240 | Official Doc View Doc 241 | 242 | ``` 243 | binancechainwallet: { 244 | displayView: { 245 | logo: 'https://raw.org/binancechainwallet.svg' // The logo address you define to display your wallet. 246 | name: "binancechainwallet", // The name displayed on the front of your own wallet. 247 | } 248 | } 249 | 250 | ``` 251 | 252 | ##### portis 253 | 254 | Official Doc: View Doc 255 | 256 | ``` 257 | portis: { 258 | displayView: { 259 | logo: 'https://raw.org/portis.svg' // The logo address you define to display your wallet. 260 | name: "portis", // The name displayed on the front of your own wallet. 261 | }, 262 | options: { 263 | chainName: 'rinkeby', // chain Name if 264 | id:'your protis key' 265 | } 266 | } 267 | 268 | // ⚠️ Configuration reference official documentation 269 | ``` 270 | options chainName list 271 | | Network | Description | Default Gas Relay Hub | 272 | | --------------- | -------- | --------------------- | 273 | | mainnet | Ethereum - main network| 0xD216153c06E857cD7f72665E0aF1d7D82172F494| 274 | | ropsten |Ethereum - ropsten network |0xD216153c06E857cD7f72665E0aF1d7D82172F494 | 275 | | rinkeby| Ethereum - rinkeby network| 0xD216153c06E857cD7f72665E0aF1d7D82172F494 | 276 | | goerli| Ethereum - goerli network | 0xD216153c06E857cD7f72665E0aF1d7D82172F494| 277 | |ubiq| UBQ - main network| -| 278 | |thundercoreTestnet| TT| - test network -| 279 | |orchid| RootStock - main network| -| 280 | |orchidTestnet| RootStock - test network| -| 281 | |kovan| Ethereum - kovan network| 0xD216153c06E857cD7f72665E0aF1d7D82172F494| 282 | |classic| Ethereum Classic - |main network -| 283 | |sokol| POA - test network| -| 284 | |core| POA - main network| -| 285 | |xdai| xDai - main network 0xD216153c06E857cD7f72665E0aF1d7D82172F494| 286 | |thundercore| TT - main network| -| 287 | |fuse| Fuse - main network |-| 288 | |lightstreams| Lightstreams |- main network -| 289 | |matic| MATIC - main network| -| 290 | |maticMumbai |MATIC - mumbai test network| -| 291 | |maticAlpha| MATIC - alpha network |-| 292 | |maticTestnet| MATIC - test network| -| 293 | official doc configuration 294 | 295 | 296 | ##### burnerconnect 297 | 298 | Official Doc: View Doc 299 | 300 | Progect address: View Doc 301 | 302 | ``` 303 | burnerconnect: { 304 | displayView: { 305 | logo: 'https://raw.org/burnerconnect.svg' // The logo address you define to display your wallet. 306 | name: "burnerconnect", // The name displayed on the front of your own wallet. 307 | }, 308 | options: { 309 | defaultNetwork: default Blockchain network ID, 310 | chainId: Blockchain network ID 311 | } 312 | }, 313 | ``` 314 | 315 | 316 | 317 | ##### torus 318 | 319 | Official Doc: View Doc 320 | 321 | ``` 322 | torus: { 323 | displayView: { 324 | logo: 'https://raw.org/torus.svg' // The logo address you define to display your wallet. 325 | name: "torus Wallet", // The name displayed on the front of your own wallet. 326 | } 327 | }, 328 | 329 | ``` 330 | 331 | ##### authereum 332 | 333 | Official Doc: View Doc 334 | 335 | ``` 336 | authereum: { 337 | displayView: { 338 | logo: 'https://raw.org/authereum.svg' // The logo address you define to display your wallet. 339 | name: "authereum", // The name displayed on the front of your own wallet. 340 | }, 341 | options: { 342 | chainName: 'rinkeby', // Need to pass in the chain Name eg： kova, rinkeby, mainne 343 | } 344 | }, 345 | 346 | // ⚠️ Configuration reference official documentation 347 | ``` 348 | options chainName list 349 | | Network | Description | Default Gas Relay Hub | 350 | | --------------- | -------- | --------------------- | 351 | | mainnet | Ethereum - main network| 0xD216153c06E857cD7f72665E0aF1d7D82172F494| 352 | | ropsten |Ethereum - ropsten network |0xD216153c06E857cD7f72665E0aF1d7D82172F494 | 353 | | rinkeby| Ethereum - rinkeby network| 0xD216153c06E857cD7f72665E0aF1d7D82172F494 | 354 | | goerli| Ethereum - goerli network | 0xD216153c06E857cD7f72665E0aF1d7D82172F494| 355 | |ubiq| UBQ - main network| -| 356 | |thundercoreTestnet| TT| - test network -| 357 | |orchid| RootStock - main network| -| 358 | |orchidTestnet| RootStock - test network| -| 359 | |kovan| Ethereum - kovan network| 0xD216153c06E857cD7f72665E0aF1d7D82172F494| 360 | |classic| Ethereum Classic - |main network -| 361 | |sokol| POA - test network| -| 362 | |core| POA - main network| -| 363 | |xdai| xDai - main network 0xD216153c06E857cD7f72665E0aF1d7D82172F494| 364 | |thundercore| TT - main network| -| 365 | |fuse| Fuse - main network |-| 366 | |lightstreams| Lightstreams |- main network -| 367 | |matic| MATIC - main network| -| 368 | |maticMumbai |MATIC - mumbai test network| -| 369 | |maticAlpha| MATIC - alpha network |-| 370 | |maticTestnet| MATIC - test network| -| 371 | 372 | 373 | 374 | ## 📖 Provider subscription Events 375 | 376 | ``` 377 | // Subscribe to accounts change 378 | provider.on("accountsChanged", (accounts: string[]) => { 379 | console.log(accounts); 380 | }); 381 | 382 | // Subscribe to chainId change 383 | provider.on("chainChanged", (chainId: number) => { 384 | console.log(chainId); 385 | }); 386 | 387 | // Subscribe to provider connection 388 | provider.on("connect", (info: { chainId: number }) => { 389 | console.log(info); 390 | }); 391 | 392 | // Subscribe to provider disconnection 393 | provider.on("disconnect", (error: { code: number; message: string }) => { 394 | console.log(error); 395 | }); 396 | ``` 397 | 398 | ## 🎾 Features 399 | 400 | - [v] Built for Ethereum using [Web3](https://github.com/ethereum/web3.js/). 401 | - [v] Implements [Graph Protocol](https://github.com/graphprotocol) to read blockchain. 402 | 403 | ## 📝 Changelog 404 | 405 | ##### 2022.02.21 406 | 407 | > v1.0.0 408 | init project 409 | 410 | ##### 2022.03.12 411 | > v1.1.3 412 | add fortmatic, binance, portis 413 | Mask background color customization 414 | Modal box background color customization 415 | Modal box border color customization 416 | 417 | ##### 2022.03.20 418 | > v1.1.6 419 | Add fortmatic, binance and Portis wallet support 420 | 421 | 422 | ## ✈️ other 423 | 424 | - Etherscan: https://etherscan.io/apis 425 | - Infura: https://infura.io/ 426 | - ETH Gas Station: https://docs.ethgasstation.info/ 427 | - Imgix: https://www.imgix.com/ 428 | 429 | [npm]: https://img.shields.io/npm/v/postcss-load-config.svg 430 | [npm-url]: https://npmjs.com/package/postcss-load-config 431 | [node]: https://img.shields.io/node/v/postcss-load-plugins.svg 432 | [node-url]: https://nodejs.org/ 433 | --------------------------------------------------------------------------------