Add Ledger Connector

assets/icons/ledger.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 35">
+  <defs/>
+  <defs/>
+  <g id="prefix__Group_26536" data-name="Group 26536" transform="translate(-80 -205)">
+    <path id="prefix__Shape" d="M23.588 0h-16v21.583h21.6v-16A5.585 5.585 0 0023.588 0z" class="prefix__cls-1" transform="translate(85.739 205)"/>
+    <path id="prefix__Path_8749" d="M8.342 0H5.585A5.585 5.585 0 000 5.585v2.757h8.342z" class="prefix__cls-1" data-name="Path 8749" transform="translate(80 205)"/>
+    <path id="prefix__Rectangle-path" d="M0 7.59h8.342v8.342H0z" class="prefix__cls-1" transform="translate(80 210.739)"/>
+    <path id="prefix__Path_8750" d="M15.18 23.451h2.757a5.585 5.585 0 005.585-5.6V15.18H15.18z" class="prefix__cls-1" data-name="Path 8750" transform="translate(91.478 216.478)"/>
+    <path id="prefix__Path_8751" d="M7.59 15.18h8.342v8.342H7.59z" class="prefix__cls-1" data-name="Path 8751" transform="translate(85.739 216.478)"/>
+    <path id="prefix__Path_8752" d="M0 15.18v2.757a5.585 5.585 0 005.585 5.585h2.757V15.18z" class="prefix__cls-1" data-name="Path 8752" transform="translate(80 216.478)"/>
+  </g>
+</svg>

components/modal/web3/Web3Modal.vue

@@ -71,10 +71,11 @@ import { computed, defineComponent, ref } from '@nuxtjs/composition-api'
 import Input from '~/components/common/input/Input.vue'
 import { useModal } from '~/composables/useModal'
 import { useWeb3 } from '@instadapp/vue-web3'
-import { injected } from '~/connectors'
+import { injected, ledger } from '~/connectors'
 import { SUPPORTED_WALLETS } from '~/constant/wallet'
 import ButtonCTA from '../../common/input/ButtonCTA.vue'
 import ButtonCTAOutlined from '../../common/input/ButtonCTAOutlined.vue'
+import { Network, useNetwork } from '~/composables/useNetwork'
 
 export default defineComponent({
   props: {
@@ -87,6 +88,7 @@ export default defineComponent({
   setup() {
     const { close } = useModal()
     const { activate } = useWeb3()
+    const { activeNetworkId } = useNetwork()
 
     const connect = async (connector) => {
       await activate(connector, console.log)
@@ -102,6 +104,10 @@ export default defineComponent({
         return null
       }
 
+      if(wallet.connector === ledger && activeNetworkId.value !== Network.Mainnet) {
+        return null
+      }
+
       return wallet
     }).filter(Boolean))
 

connectors/index.ts

@@ -3,6 +3,7 @@ import { InjectedConnector } from "@web3-react/injected-connector";
 import { WalletConnectConnector } from "@web3-react/walletconnect-connector";
 import { PortisConnector } from "@web3-react/portis-connector";
 import { WalletLinkConnector } from "@web3-react/walletlink-connector";
+import { LedgerConnector } from "@web3-react/ledger-connector";
 
 import INSTADAPP_LOGO_URL from "~/assets/logo/instadapp-logo-icon.svg?inline";
 
@@ -44,3 +45,11 @@ if (process.client) {
 }
 
 export { gnosisSafe };
+
+const POLLING_INTERVAL = 12000;
+
+export const ledger = new LedgerConnector({
+  chainId: 1,
+  url: `https://mainnet.infura.io/v3/${process.env.INFURA_ID}`,
+  pollingInterval: POLLING_INTERVAL
+});

constant/wallet.ts

@@ -1,10 +1,11 @@
 import { AbstractConnector } from '@web3-react/abstract-connector'
-import { injected, walletconnect, portis, walletlink } from '~/connectors'
+import { injected, walletconnect, portis, walletlink, ledger } from '~/connectors'
 
 import METAMASK_ICON_URL from '~/assets/icons/metamask.svg?inline'
 import WALLETCONNECT_ICON_URL from '~/assets/icons/wallet-connect-icon.svg?inline'
 import PORTIS_ICON_URL from '~/assets/icons/portis.svg?inline'
 import COINBASE_ICON_URL from '~/assets/icons/coinbase.svg?inline'
+import LEDGER_ICON_URL from '~/assets/icons/ledger.svg?inline'
 
 interface WalletInfo {
   connector?: AbstractConnector;
@@ -34,5 +35,10 @@ export const SUPPORTED_WALLETS: { [key: string]: WalletInfo } = {
       name: 'Coinbase Wallet',
       iconURL: COINBASE_ICON_URL,
     },
+    LEDGER: {
+      connector: ledger,
+      name: 'Ledger',
+      iconURL: LEDGER_ICON_URL,
+    },
   }
   

package.json

@@ -22,6 +22,7 @@
     "@walletconnect/web3-provider": "^1.4.1",
     "@web3-react/core": "^6.1.9",
     "@web3-react/injected-connector": "^6.0.7",
+    "@web3-react/ledger-connector": "^6.1.9",
     "@web3-react/portis-connector": "^6.1.9",
     "@web3-react/walletconnect-connector": "^6.2.4",
     "@web3-react/walletlink-connector": "^6.2.3",