init

components/web3Connect/Button.vue

@@ -0,0 +1,60 @@
+<template>
+  <b-button :type="type" v-bind="$attrs" @click="onLogIn">{{ $t(actionText) }}</b-button>
+</template>
+
+<script>
+import { mapActions } from 'vuex'
+
+import Web3Connect from './Modal'
+
+import { detectMob } from '@/utils'
+
+export default {
+  inheritAttrs: false,
+  props: {
+    type: {
+      type: String,
+      default: 'is-primary'
+    },
+    actionText: {
+      type: String,
+      default: () => 'connect'
+    }
+  },
+  computed: {
+    hasInjectedProvider() {
+      return Boolean(window.ethereum)
+    }
+  },
+  methods: {
+    ...mapActions('metamask', ['initialize']),
+    async web3Connect(name) {
+      this.$store.dispatch('loading/enable', {})
+      try {
+        await this.initialize({
+          providerName: name
+        })
+      } catch (e) {
+        console.error(e)
+      }
+      this.$store.dispatch('loading/disable')
+    },
+    onLogIn() {
+      if (detectMob() && this.hasInjectedProvider) {
+        this.web3Connect('mobileWallet')
+        return
+      }
+
+      this.$buefy.modal.open({
+        parent: this,
+        component: Web3Connect,
+        hasModalCard: true,
+        width: 440,
+        props: {
+          web3Connect: this.web3Connect
+        }
+      })
+    }
+  }
+}
+</script>

components/web3Connect/Modal.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="modal-card box box-modal is-wallet-modal">
+    <header class="box-modal-header is-spaced">
+      <div class="box-modal-title">{{ $t('yourWallet') }}</div>
+      <button type="button" class="delete" @click="$emit('close')" />
+    </header>
+    <div class="note">
+      {{ $t('pleaseSelectYourWeb3Wallet') }}
+    </div>
+    <div class="field is-grouped is-grouped-centered is-grouped-multiline wallets">
+      <div class="control">
+        <button
+          v-show="isGeneric"
+          class="button is-small is-background is-generic"
+          @click="_web3Connect('generic')"
+        >
+          {{ $t('otherWallet') }}
+        </button>
+        <button v-show="!isMetamask" class="button is-small is-dark is-metamask" @click="onBoarding">
+          Install Metamask
+        </button>
+        <button
+          v-show="isMetamask"
+          class="button is-small is-background is-metamask"
+          @click="_web3Connect('metamask')"
+        >
+          Metamask
+        </button>
+        <button class="button is-small is-background is-walletConnect" @click="_web3Connect('walletConnect')">
+          WalletConnect
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Metamask from '@metamask/onboarding'
+
+export default {
+  props: {
+    web3Connect: {
+      type: Function,
+      required: true
+    }
+  },
+  computed: {
+    isMetamask() {
+      return window.ethereum?.isMetaMask
+    },
+    isGeneric() {
+      return !this.isMetamask && window.ethereum
+    }
+  },
+  mounted() {
+    if (!this.isMetamask) {
+      this.onboarding = new Metamask()
+    }
+  },
+  methods: {
+    onBoarding() {
+      this.onboarding.startOnboarding()
+    },
+    async _web3Connect(name) {
+      await this.web3Connect(name)
+
+      this.$parent.close()
+    }
+  }
+}
+</script>

components/web3Connect/index.js

@@ -0,0 +1 @@
+export { default as ConnectButton } from './Button'