feat: make chain list extendable

Update Board.vue Update useEthers.ts Update chainId.ts Update App.vue chore: extendable networks option chore: update docs Update index.md Update README.md fix: url and symbol Update README.md
vu3th · Aug 22, 2022 · 34e3802 · 34e3802
1 parent 9ed5b4a
commit 34e3802
Show file tree

Hide file tree

Showing 11 changed files with 121 additions and 176 deletions.
diff --git a/README.md b/README.md
@@ -38,14 +38,39 @@ app.use(VueDapp);
 app.mount("#app");
 ```
 
-Step 2. Add `<vd-board />` to your `App.vue` and add a button to open the board:
+Step 2. By default, VueDapp includes `Mainnet` and `Goerli` networks, but you can extend it to include other networks:
+
+```javascript
+app.use(VueDapp, {
+    80001: {
+        chainId: '0x' + 80001,
+        blockExplorerUrls: ['https://mumbai.polygonscan.com/'],
+        chainName: 'Mumbai',
+        rpcUrls: ['https://rpc-mumbai.maticvigil.com/'],
+        nativeCurrency: {
+            name: 'Mumbai',
+            decimals: 18,
+            symbol: 'MATIC',
+        },
+    },
+    1336: {
+        ...
+    }
+});
+
+```
+For more examples please check:
+https://github.com/wagmi-dev/wagmi/blob/main/packages/core/src/constants/chains.ts
+
+
+Step 3. Add `<vd-board />` to your `App.vue` and add a button to open the board:
 
 ```vue
 <button @click="open">Connect Wallet</button>
 <vd-board :connectors="connectors" dark />
 ```
 
-Step 3. Construct your connectors and use composable functions in your scripts:
+Step 4. Construct your connectors and use composable functions in your scripts:
 
 ```js
 import {
@@ -91,4 +116,4 @@ Gitcoin Grants: https://gitcoin.co/grants/3987/vue-dapp
 
 ## MIT license
 
-Copyright (c) 2021-present, Johnson Chen ([@chnejohnson](https://twitter.com/chnejohnson))
+Copyright (c) 2021-present, Johnson Chen ([@chnejohnson](https://twitter.com/chnejohnson))
diff --git a/demo/src/App.vue b/demo/src/App.vue
@@ -56,13 +56,12 @@ const connectors = [
   }),
 ]
 
-const supportedChainId = [
-  ChainId.Mainnet,
-  ChainId.Rinkeby,
-  ChainId.Arbitrum,
-  ChainId.Rinkarby,
-  ChainId.Polygon,
-]
+const { availableNetworks } = useEthers()
+
+const supportedChainId = Object.keys(availableNetworks.value).map((key) =>
+  Number(key),
+)
+
 const selectedChainId = ref(0)
 
 onActivated(() => {

diff --git a/demo/src/main.ts b/demo/src/main.ts
@@ -6,6 +6,18 @@ import { VueDapp } from 'vue-dapp'
 
 const app = createApp(App)
 
-app.use(VueDapp)
+app.use(VueDapp, {
+  80001: {
+    chainId: '0x' + 80001,
+    blockExplorerUrls: ['https://mumbai.polygonscan.com/'],
+    chainName: 'Mumbai',
+    rpcUrls: ['https://rpc-mumbai.maticvigil.com/'],
+    nativeCurrency: {
+      name: 'Mumbai',
+      decimals: 18,
+      symbol: 'MATIC',
+    },
+  },
+})
 
 app.mount('#app')
diff --git a/docs/index.md b/docs/index.md
@@ -18,14 +18,40 @@ app.use(VueDapp);
 app.mount("#app");
 ```
 
-Step 2. Add `<vd-board />` to your `App.vue` and add a button to open the board:
+Step 2. By default, VueDapp includes `Mainnet` and `Goerli` networks, but you can extend it to include other networks:
+
+```javascript
+app.use(VueDapp, {
+    networks: {
+        80001: {
+            chainId: '0x' + 80001,
+            blockExplorerUrls: ['https://mumbai.polygonscan.com/'],
+            chainName: 'Mumbai',
+            rpcUrls: ['https://rpc-mumbai.maticvigil.com/'],
+            nativeCurrency: {
+                name: 'Mumbai',
+                decimals: 18,
+                symbol: 'MATIC',
+            },
+        },
+        1336: {
+            ...
+        }
+    },
+});
+
+```
+For more examples please check:
+https://github.com/wagmi-dev/wagmi/blob/main/packages/core/src/constants/chains.ts
+
+Step 3. Add `<vd-board />` to your `App.vue` and add a button to open the board:
 
 ```vue
 <button @click="open">Connect Wallet</button>
 <vd-board :connectors="connectors" dark />
 ```
 
-Step 3. Construct your connectors and use composable functions in your scripts:
+Step 4. Construct your connectors and use composable functions in your scripts:
 
 ```js
 import {
@@ -63,4 +89,4 @@ setup() {
 
 Take a look at [Configurations](https://vue-dapp-docs.netlify.app/configurations) for more informations about Vue CLI, Vite, and Nuxt3 configurations.
 
-To see the demo code, check it out [here](https://github.com/chnejohnson/vue-dapp/blob/main/demo/src/App.vue).
+To see the demo code, check it out [here](https://github.com/chnejohnson/vue-dapp/blob/main/demo/src/App.vue).
diff --git a/src/components/Board.vue b/src/components/Board.vue
@@ -103,10 +103,7 @@ export default defineComponent({
 .wallet-item {
   display: flex;
   justify-content: center;
-  padding-top: 1rem;
-  padding-bottom: 0.6rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding: 1rem 1rem 0.6rem;
   margin: 0.5rem;
   border-radius: 0.75rem;
   cursor: pointer;
@@ -120,10 +117,7 @@ export default defineComponent({
 .wallet-item--dark {
   display: flex;
   justify-content: center;
-  padding-top: 1rem;
-  padding-bottom: 0.6rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding: 1rem 1rem 0.6rem;
   margin: 0.5rem;
   border-radius: 0.75rem;
   cursor: pointer;

diff --git a/src/composables/useEthers.ts b/src/composables/useEthers.ts
@@ -5,6 +5,8 @@ import {
   ExternalProvider,
 } from '@ethersproject/providers'
 import { BigNumber, Signer } from 'ethers'
+import { NETWORK_DETAILS } from '../constants'
+import { AddEthereumChainParameter } from '../wallets'
 
 export type { Web3Provider, Signer, Network }
 
@@ -17,6 +19,10 @@ const dnsAlias = ref('')
 const balance = ref<bigint>(BigInt(0))
 let updateBalanceInterval: any
 
+const availableNetworks = ref<{ [key: number]: AddEthereumChainParameter }>({
+  ...NETWORK_DETAILS,
+})
+
 const deactivate = () => {
   clearInterval(updateBalanceInterval)
   isActivated.value = false
@@ -136,6 +142,7 @@ export function useEthers() {
     address,
     dnsAlias,
     balance,
+    availableNetworks,
 
     // getters
     chainId,

diff --git a/src/constants/chainId.ts b/src/constants/chainId.ts
@@ -1,165 +1,39 @@
+import { AddEthereumChainParameter } from '../wallets'
+
 export enum ChainId {
-  Hardhat = 31337,
   Mainnet = 1,
-  Ropsten = 3,
-  Rinkeby = 4,
   Goerli = 5,
-  Kovan = 42,
-  xDai = 100,
-  Rinkarby = 421611,
-  Arbitrum = 42161,
-  Polygon = 137,
-  Mumbai = 80001,
-  Fantom = 250,
-  Avax = 43114,
-  Bsc = 56,
-  Gno = 100,
-  Optimism = 10,
-  Moonbeam = 1284,
-  Cronos = 25,
 }
 
 export const CHAIN_NAMES = {
-  [ChainId.Hardhat]: 'Hardhat',
   [ChainId.Mainnet]: 'Mainnet',
-  [ChainId.Ropsten]: 'Ropsten',
-  [ChainId.Kovan]: 'Kovan',
-  [ChainId.Rinkeby]: 'Rinkeby',
   [ChainId.Goerli]: 'Goerli',
-  [ChainId.xDai]: 'xDai',
-  [ChainId.Rinkarby]: 'Rinkarby',
-  [ChainId.Arbitrum]: 'Arbitrum',
-  [ChainId.Polygon]: 'Polygon',
-  [ChainId.Mumbai]: 'Mumbai',
-  [ChainId.Fantom]: 'Fantom',
-  [ChainId.Arbitrum]: 'Arbitrum',
-  [ChainId.Avax]: 'Avax',
-  [ChainId.Bsc]: 'Bsc',
-  [ChainId.Gno]: 'Gno',
-  [ChainId.Optimism]: 'Optimism',
-  [ChainId.Moonbeam]: 'Moonbeam',
-  [ChainId.Cronos]: 'Cronos',
 }
 
-// @todo add other network details. Refer to https://chainlist.org/
-export const NETWORK_DETAILS = {
-  [ChainId.Arbitrum]: {
-    chainId: '0x' + ChainId.Arbitrum.toString(16),
-    chainName: 'Arbitrum',
-    rpcUrls: ['https://arb1.arbitrum.io/rpc'],
-    blockExplorerUrls: ['https://arbiscan.io'],
+export const NETWORK_DETAILS: { [key: number]: AddEthereumChainParameter } = {
+  [ChainId.Mainnet]: {
+    chainId: '0x' + ChainId.Mainnet.toString(16),
+    chainName: 'Mainnet',
+    rpcUrls: [
+      'https://cloudflare-eth.com',
+      'https://rpc.ankr.com/eth',
+      'https://main-rpc.linkpool.io',
+    ],
+    blockExplorerUrls: ['https://etherscan.io'],
     nativeCurrency: {
       symbol: 'ETH',
       decimals: 18,
     },
   },
-  [ChainId.Rinkarby]: {
-    chainId: '0x' + ChainId.Rinkarby.toString(16),
-    chainName: 'RinkArby',
-    rpcUrls: ['https://rinkeby.arbitrum.io/rpc'],
-    blockExplorerUrls: ['https://rinkeby-explorer.arbitrum.io'],
+
+  [ChainId.Goerli]: {
+    chainId: '0x' + ChainId.Goerli.toString(16),
+    chainName: 'Goerli',
+    rpcUrls: ['https://goerli.optimism.io'],
+    blockExplorerUrls: ['https://goerli.etherscan.io'],
     nativeCurrency: {
       symbol: 'ETH',
       decimals: 18,
     },
   },
-  [ChainId.xDai]: {
-    chainId: '0x' + ChainId.xDai.toString(16),
-    chainName: 'xDAI',
-    rpcUrls: ['https://rpc.xdaichain.com'],
-    blockExplorerUrls: ['https://blockscout.com/poa/xdai'],
-    nativeCurrency: {
-      symbol: 'xDAI',
-      decimals: 18,
-    },
-  },
-  [ChainId.Polygon]: {
-    chainId: '0x' + ChainId.Polygon.toString(16),
-    chainName: 'Polygon Mainnet',
-    rpcUrls: ['https://polygon-rpc.com/'],
-    blockExplorerUrls: ['https://polygonscan.com/'],
-    nativeCurrency: {
-      symbol: 'MATIC',
-      decimals: 18,
-    },
-  },
-  [ChainId.Mumbai]: {
-    chainId: '0x' + ChainId.Mumbai.toString(16),
-    blockExplorerUrls: ['https://mumbai.polygonscan.com/'],
-    chainName: 'Mumbai',
-    rpcUrls: ['https://rpc-mumbai.maticvigil.com/'],
-    nativeCurrency: {
-      name: 'Polygon',
-      decimals: 18,
-      symbol: 'MATIC',
-    },
-  },
-  [ChainId.Fantom]: {
-    chainId: '0x' + ChainId.Fantom.toString(16),
-    blockExplorerUrls: ['https://ftmscan.com/'],
-    chainName: 'Fantom Opera',
-    rpcUrls: ['https://rpc.ftm.tools/'],
-    nativeCurrency: {
-      name: 'Fantom',
-      decimals: 18,
-      symbol: 'FTM',
-    },
-  },
-  [ChainId.Arbitrum]: {
-    chainId: '0x' + ChainId.Arbitrum.toString(16),
-    blockExplorerUrls: ['https://arbiscan.io'],
-    chainName: 'Arbitrum',
-    rpcUrls: ['https://arb1.arbitrum.io/rpc'],
-  },
-  [ChainId.Avax]: {
-    chainId: '0x' + ChainId.Avax.toString(16),
-    blockExplorerUrls: ['https://snowtrace.io'],
-    chainName: 'Avalanche Network',
-    rpcUrls: ['https://api.avax.network/ext/bc/C/rpc'],
-    nativeCurrency: {
-      name: 'AVAX',
-      decimals: 18,
-      symbol: 'AVAX',
-    },
-  },
-  [ChainId.Bsc]: {
-    chainId: '0x' + ChainId.Bsc.toString(16),
-    blockExplorerUrls: ['https://bscscan.com'],
-    chainName: 'Binance Smart Chain',
-    rpcUrls: ['https://bsc-dataseed.binance.org/'],
-    nativeCurrency: {
-      name: 'Binance Coin',
-      decimals: 18,
-      symbol: 'BNB',
-    },
-  },
-  [ChainId.Gno]: {
-    chainId: '0x' + ChainId.Gno.toString(16),
-    blockExplorerUrls: ['https://blockscout.com/xdai/mainnet'],
-    chainName: 'Gnosis Chain',
-    rpcUrls: ['https://rpc.gnosischain.com'],
-    nativeCurrency: {
-      name: 'xDai',
-      decimals: 18,
-      symbol: 'xDai',
-    },
-  },
-  [ChainId.Optimism]: {
-    chainId: '0x' + ChainId.Optimism.toString(16),
-    blockExplorerUrls: ['https://optimistic.etherscan.io'],
-    chainName: 'Optimism',
-    rpcUrls: ['https://mainnet.optimism.io'],
-  },
-  [ChainId.Moonbeam]: {
-    chainId: '0x' + ChainId.Moonbeam.toString(16),
-    blockExplorerUrls: ['https://moonscan.io/'],
-    chainName: 'Moonbeam',
-    rpcUrls: ['https://rpc.api.moonbeam.network'],
-  },
-  [ChainId.Cronos]: {
-    chainId: '0x' + ChainId.Cronos.toString(16),
-    blockExplorerUrls: ['https://cronoscan.com/'],
-    chainName: 'Cronos',
-    rpcUrls: ['https://evm.cronos.org'],
-  },
 }
diff --git a/src/plugin.ts b/src/plugin.ts
@@ -2,9 +2,15 @@ import { Plugin } from 'vue'
 import { clickOutside } from './directive'
 import Board from './components/Board.vue'
 import Modal from './components/Modal.vue'
+import { AddEthereumChainParameter } from './wallets'
+import { useEthers } from './composables/useEthers'
+import { NETWORK_DETAILS } from './constants'
 
 export const VueDapp: Plugin = {
-  install(app) {
+  install(app, options: { [key: number]: AddEthereumChainParameter }) {
+    const { availableNetworks } = useEthers()
+    availableNetworks.value = { ...NETWORK_DETAILS, ...options }
+
     app.directive('click-outside', clickOutside)
     app.component('vd-board', Board)
     app.component('vd-modal', Modal)