Add connect wallet button

frontend/src/components/BaseButton.vue

@@ -13,6 +13,7 @@
       no-caps
       :outline="outline"
       :padding="padding"
+      :rounded="rounded"
       :size="size"
       :text-color="textColor"
       :type="type"
@@ -88,6 +89,12 @@ export default defineComponent({
       default: undefined,
     },
 
+    rounded: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+
     size: {
       type: String,
       required: false,

frontend/src/components/ConnectWallet.vue

@@ -1,69 +1,30 @@
 <template>
-  <div @click="connectWallet">
+  <div @click="connectWalletWithRedirect">
     <slot></slot>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, SetupContext } from '@vue/composition-api';
-import { Dark } from 'quasar';
-import useSettingsStore from 'src/store/settings';
 import useWalletStore from 'src/store/wallet';
-import Onboard from 'bnc-onboard';
 
 function useWallet(context: SetupContext, to: string) {
-  const { setProvider, configureProvider, userAddress } = useWalletStore();
-  const { setLastWallet } = useSettingsStore();
+  const { connectWallet, userAddress } = useWalletStore();
 
-  async function connectWallet() {
+  async function connectWalletWithRedirect() {
     // If user already connected wallet, continue (this branch is used when clicking e.g. the "Send" box
     // from the home page)
     if (userAddress.value && to) {
       await context.root.$router.push({ name: to });
       return;
     }
 
-    // Otherwise, prompt them for connection / wallet change
-    const rpcUrl = `https://mainnet.infura.io/v3/${String(process.env.INFURA_ID)}`;
-    const wallets = [
-      { walletName: 'metamask', preferred: true },
-      { walletName: 'walletConnect', infuraKey: process.env.INFURA_ID, preferred: true },
-      { walletName: 'fortmatic', apiKey: process.env.FORTMATIC_API_KEY, preferred: true },
-      { walletName: 'portis', apiKey: process.env.PORTIS_API_KEY },
-      { walletName: 'ledger', rpcUrl },
-      { walletName: 'torus', preferred: true },
-      { walletName: 'lattice', rpcUrl, appName: 'Umbra' },
-      { walletName: 'opera' },
-    ];
-    const walletChecks = [{ checkName: 'connect' }];
+    await connectWallet();
 
-    const onboard = Onboard({
-      dappId: process.env.BLOCKNATIVE_API_KEY,
-      darkMode: Dark.isActive,
-      networkId: 1,
-      walletSelect: { wallets },
-      walletCheck: walletChecks,
-      subscriptions: {
-        wallet: (wallet) => {
-          setProvider(wallet.provider);
-          if (wallet.name) setLastWallet(wallet.name);
-        },
-      },
-    });
-
-    // Clear existing wallet selection
-    onboard.walletReset();
-
-    // Connect wallet
-    await onboard.walletSelect();
-    await onboard.walletCheck();
-
-    // Finish setup
-    await configureProvider(); // get ENS name, CNS names, etc.
     if (to) await context.root.$router.push({ name: to }); // redirect to specified page
   }
 
-  return { connectWallet };
+  return { connectWalletWithRedirect };
 }
 
 export default defineComponent({

frontend/src/layouts/BaseLayout.vue

@@ -20,15 +20,15 @@
                     <span class="primary header-black q-ml-md">Umbra</span>
                   </div>
                   <div v-else-if="$q.screen.xs">
+                    <div v-if="isLoading" class="q-ml-md row">
+                      <q-spinner color="primary" size="1em" />
+                    </div>
                     <address-settings
-                      v-if="!isLoading"
+                      v-else-if="!isLoading && userDisplayAddress"
                       :userDisplayAddress="userDisplayAddress"
                       :advancedMode="advancedMode"
                       class="q-ml-md row"
                     />
-                    <div v-else class="q-ml-md row">
-                      <q-spinner color="primary" size="1em" />
-                    </div>
                   </div>
                 </div>
 
@@ -52,15 +52,28 @@
           <q-btn v-if="$q.screen.xs" flat @click="drawerRight = !drawerRight" icon="fas fa-bars" class="darkgrey" />
           <!-- ADDRESS AND SETTINGS AND NETWORK SELECTOR -->
           <div v-else class="col-sm-4">
-            <div v-if="!isLoading" class="row justify-end items-center no-wrap">
+            <div v-if="isLoading" class="row justify-end items-center">
+              <q-spinner color="primary" size="1em" />
+            </div>
+            <div v-else-if="!isLoading && userDisplayAddress" class="row justify-end items-center no-wrap">
               <div class="q-mr-md">
                 <address-settings :userDisplayAddress="userDisplayAddress" :advancedMode="advancedMode" class="row" />
               </div>
               <network-dropdown />
             </div>
-            <div v-else class="row justify-end items-center">
-              <q-spinner color="primary" size="1em" />
-            </div>
+            <connect-wallet v-else-if="!isLoading">
+              <div class="row justify-end items-center">
+                <connect-wallet>
+                  <base-button
+                    class="cursor-pointer"
+                    color="primary"
+                    label="Connect a wallet"
+                    :outline="true"
+                    :rounded="true"
+                  />
+                </connect-wallet>
+              </div>
+            </connect-wallet>
           </div>
         </div>
         <!-- Alpha warning -->
@@ -71,6 +84,7 @@
       </div>
     </q-header>
 
+    <!-- Mobile drawer -->
     <q-drawer side="right" v-model="drawerRight" behavior="mobile" elevated :width="200" class="bg-grey-3">
       <div class="row justify-end">
         <q-btn
@@ -85,9 +99,18 @@
       <div class="col q-col-gutter-y-sm q-px-md">
         <header-links :isDrawer="true" class="column q-col-gutter-y-sm" />
       </div>
-      <div class="row q-pt-sm q-px-md full-width">
+      <div v-if="!isLoading && userDisplayAddress" class="row q-pt-sm q-px-md full-width">
         <network-dropdown />
       </div>
+      <connect-wallet v-else-if="!isLoading">
+        <base-button
+          class="q-ml-md cursor-pointer"
+          color="primary"
+          label="Connect a wallet"
+          :outline="true"
+          :rounded="true"
+        />
+      </connect-wallet>
     </q-drawer>
 
     <q-page-container>
@@ -185,6 +208,8 @@
 
 <script lang="ts">
 import { defineComponent, ref } from '@vue/composition-api';
+import BaseButton from 'src/components/BaseButton.vue';
+import ConnectWallet from 'src/components/ConnectWallet.vue';
 import useSettingsStore from 'src/store/settings';
 import useWalletStore from 'src/store/wallet';
 import AddressSettings from './AddressSettings.vue';
@@ -193,7 +218,7 @@ import NetworkDropdown from './NetworkDropdown.vue';
 
 export default defineComponent({
   name: 'BaseLayout',
-  components: { AddressSettings, HeaderLinks, NetworkDropdown },
+  components: { AddressSettings, HeaderLinks, NetworkDropdown, ConnectWallet, BaseButton },
   setup() {
     const { advancedMode, toggleAdvancedMode, isDark, toggleDarkMode } = useSettingsStore();
     const { isLoading, userDisplayAddress, isAccountSetup } = useWalletStore();