wip

components/modal/web3/Web3Modal.vue

@@ -1,32 +1,71 @@
 <template>
   <div
-    class="inline-block w-full max-w-md px-8 py-7 overflow-hidden text-left align-bottom transition-all transform bg-white border border-opacity-50 rounded-lg shadow-xl  dark:bg-dark-400 sm:my-8 sm:align-middle sm:p-6 border-green-light"
+    class="relative inline-block w-full max-w-md px-8 py-8 overflow-hidden text-left align-bottom transition-all transform bg-white border border-opacity-50 rounded-lg shadow-xl  dark:bg-dark-400 sm:my-16 sm:align-middle sm:p-6 border-green-light"
     role="dialog"
     aria-modal="true"
     aria-labelledby="modal-headline"
   >
-    <div>
-      <div class="mt-3 text-center sm:mt-5">
-        <h3 id="modal-headline" class="font-bold text-2xl">
+    <div class="py-8">
+      <div class="text-center">
+        <h3 id="modal-headline" class="font-bold text-2xl text-[#374253]">
           Connect your wallet
         </h3>
       </div>
 
-      <div class="my-10">
-        <button @click="connect">
-          Metamask
+      <div class="mt-8 w-full space-y-4">
+        <button
+          class="w-full px-6 py-3 text-left flex items-center h-[80px] border border-[#DBE5F4] rounded-[4px] text-lg text-[#374253] font-semibold hover:bg-background-light"
+          v-for="(wallet, key) in wallets"
+          :key="key"
+          @click="connect(wallet.connector)"
+        >
+          <div
+            style="background: radial-gradient(42.15% 42.15% at 48.94% 48.94%, #D6DAE0 75.67%, #F0F3F9 100%), #C4C4C4;"
+            class="mr-5 w-14 h-14 flex-shrink-0 rounded-full flex items-center justify-center border border-[#CCDCF3]"
+          >
+            <div
+              class="w-10 h-10 rounded-full inline-flex items-center justify-center bg-white"
+            >
+              <component :is="wallet.iconURL" class="w-7 h-7 text-white" />
+            </div>
+          </div>
+
+          {{ wallet.name }}
         </button>
       </div>
+
+      <div class="mt-6 text-center text-sm">
+        Need help connecting a wallet?
+        <nuxt-link to="/faqs" class="font-semibold text-ocean-blue-pure"
+          >Read our FAQ</nuxt-link
+        >
+      </div>
     </div>
+
+    <button class="absolute top-0 right-0 p-4" @click="close">
+      <svg
+        width="10"
+        height="10"
+        viewBox="0 0 10 10"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M0.279403 0.279336C-0.0930443 0.651784 -0.0930442 1.25564 0.279403 1.62809L3.65128 4.99997L0.279336 8.37191C-0.0931119 8.74436 -0.0931119 9.34822 0.279336 9.72066C0.651783 10.0931 1.25564 10.0931 1.62809 9.72066L5.00003 6.34872L8.37191 9.7206C8.74436 10.0931 9.34822 10.0931 9.72066 9.7206C10.0931 9.34816 10.0931 8.7443 9.72066 8.37185L6.34878 4.99997L9.7206 1.62815C10.093 1.2557 10.093 0.651844 9.7206 0.279396C9.34815 -0.0930521 8.74429 -0.093052 8.37184 0.279396L5.00003 3.65121L1.62816 0.279336C1.25571 -0.093112 0.651851 -0.093112 0.279403 0.279336Z"
+          fill="#1874FF"
+        />
+      </svg>
+    </button>
   </div>
 </template>
 
 <script>
-import { defineComponent, ref } from '@nuxtjs/composition-api'
+import { computed, defineComponent, ref } from '@nuxtjs/composition-api'
 import Input from '~/components/common/input/Input.vue'
 import { useModal } from '~/composables/useModal'
 import { useWeb3 } from '@kabbouchi/vue-web3'
 import { injected } from '~/connectors'
+import { SUPPORTED_WALLETS } from '~/constant/wallet'
 import ButtonCTA from '../../common/input/ButtonCTA.vue'
 import ButtonCTAOutlined from '../../common/input/ButtonCTAOutlined.vue'
 
@@ -36,15 +75,29 @@ export default defineComponent({
     const { close } = useModal()
     const { activate } = useWeb3()
 
-    const connect = async () => {
-      await activate(injected)
+    const connect = async (connector) => {
+      await activate(connector, console.log)
 
       close()
     }
+    const isMetamask = computed(() => window.ethereum && window.ethereum.isMetaMask)
+
+    const wallets = computed(() => Object.keys(SUPPORTED_WALLETS).map((key) => {
+      const wallet = SUPPORTED_WALLETS[key]
+
+      if (wallet.connector === injected && !isMetamask.value) {
+        return null
+      }
+
+      return wallet
+    }).filter(Boolean))
 
     return {
       close,
-      connect
+      connect,
+      wallets,
+      isMetamask,
+      injected,
     }
   },
 })

connectors/index.ts

@@ -1,6 +1,10 @@
 import { setWeb3LibraryCallback } from "@kabbouchi/vue-web3";
 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 INSTADAPP_LOGO_URL from "~/assets/logo/instadapp-logo-icon.svg?inline";
 
 import Web3 from "web3";
 
@@ -17,3 +21,16 @@ export const walletconnect = new WalletConnectConnector({
   },
   supportedChainIds: [1, 137]
 });
+
+
+// mainnet only
+export const portis = new PortisConnector({
+  dAppId: process.env.PORTIS_ID,
+  networks: [1]
+});
+
+export const walletlink = new WalletLinkConnector({
+  url: `https://mainnet.infura.io/v3/${process.env.INFURA_ID}`,
+  appName: "Instadapp",
+  appLogoUrl: INSTADAPP_LOGO_URL
+});

constant/wallet.ts

@@ -0,0 +1,38 @@
+import { AbstractConnector } from '@web3-react/abstract-connector'
+import { injected, walletconnect, portis, walletlink } 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'
+
+interface WalletInfo {
+  connector?: AbstractConnector;
+  name: string;
+  iconURL: string;
+}
+
+
+export const SUPPORTED_WALLETS: { [key: string]: WalletInfo } = {
+    METAMASK: {
+      connector: injected,
+      name: 'MetaMask',
+      iconURL: METAMASK_ICON_URL,
+    },
+    WALLET_CONNECT: {
+      connector: walletconnect,
+      name: 'WalletConnect',
+      iconURL: WALLETCONNECT_ICON_URL,
+    },
+    Portis: {
+      connector: portis,
+      name: 'Portis',
+      iconURL: PORTIS_ICON_URL,
+    },
+    WALLET_LINK: {
+      connector: walletlink,
+      name: 'Coinbase Wallet',
+      iconURL: COINBASE_ICON_URL,
+    },
+  }
+  

package.json

@@ -19,7 +19,9 @@
     "@vueuse/core": "^5.1.4",
     "@walletconnect/web3-provider": "^1.4.1",
     "@web3-react/injected-connector": "^6.0.7",
+    "@web3-react/portis-connector": "^6.1.9",
     "@web3-react/walletconnect-connector": "^6.2.4",
+    "@web3-react/walletlink-connector": "^6.2.3",
     "bignumber.js": "^9.0.1",
     "core-js": "^3.15.1",
     "css-color-function": "^1.3.3",