Merge pull request #59 from re2005/feature/init-parameters-for-chains

feat: make chain list extendable

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))

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(() => {

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')

docs/index.md

@@ -6,61 +6,89 @@
 yarn add ethers vue-dapp
 ```
 
-
 ## Quick Start
 
 Step 1. Add plugin to your app:
 
 ```javascript
 import { VueDapp } from "vue-dapp";
+
 const app = createApp(App);
 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 {
-  MetaMaskConnector,
-  WalletConnectConnector,
-  CoinbaseWalletConnector,
-  useBoard,
+    MetaMaskConnector,
+    WalletConnectConnector,
+    CoinbaseWalletConnector,
+    useBoard,
 } from "vue-dapp";
 
-setup() {
-  const { open } = useBoard();
-  const infuraId = "";
-  const connectors = [
-    new MetaMaskConnector({
-      appUrl: "http://localhost:3000",
-    }),
-    new WalletConnectConnector({
-      qrcode: true,
-      rpc: {
-        1: `https://mainnet.infura.io/v3/${infuraId}`,
-        4: `https://rinkeby.infura.io/v3/${infuraId}`,
-      },
-    }),
-    new CoinbaseWalletConnector({
-      appName: "Vue Dapp",
-      jsonRpcUrl: `https://mainnet.infura.io/v3/${infuraId}`,
-    }),
-  ];
-  return {
-    connectors,
-    open,
-  };
+setup()
+{
+    const { open } = useBoard();
+    const infuraId = "";
+    const connectors = [
+        new MetaMaskConnector({
+            appUrl: "http://localhost:3000",
+        }),
+        new WalletConnectConnector({
+            qrcode: true,
+            rpc: {
+                1: `https://mainnet.infura.io/v3/${infuraId}`,
+                4: `https://rinkeby.infura.io/v3/${infuraId}`,
+            },
+        }),
+        new CoinbaseWalletConnector({
+            appName: "Vue Dapp",
+            jsonRpcUrl: `https://mainnet.infura.io/v3/${infuraId}`,
+        }),
+    ];
+    return {
+        connectors,
+        open,
+    };
 }
 ```
 
-Take a look at [Configurations](https://vue-dapp-docs.netlify.app/configurations) for more informations about Vue CLI, Vite, and Nuxt3 configurations.
+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).

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;

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,