Davidesegullo/t1.5.0 feature wallet connect

package.json

@@ -22,6 +22,9 @@
     "@ledgerhq/hw-transport-webhid": "^6.20.0",
     "@ledgerhq/hw-transport-webusb": "^6.20.0",
     "@quasar/extras": "^1.0.0",
+    "@walletconnect/browser-utils": "^1.7.8",
+    "@walletconnect/client": "^1.7.8",
+    "@walletconnect/qrcode-modal": "^1.7.8",
     "axios": "^0.21.1",
     "bech32": "^2.0.0",
     "bignumber.js": "^9.0.2",
@@ -54,6 +57,7 @@
     "@types/w3c-web-hid": "^1.0.2",
     "@typescript-eslint/eslint-plugin": "^4.16.1",
     "@typescript-eslint/parser": "^4.16.1",
+    "@walletconnect/types": "^1.7.8",
     "eslint": "^7.14.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.19.1",

src/components/BalanceSummary.vue

@@ -41,7 +41,7 @@
         </div>
       </div>
 
-      <q-btn :disable="!session || (session && session.sessionType !== 'keplr')" @click="openSendDialog" class="send-btn btn-medium text-h6 col-12 col-md-3 text-weight-medium" rounded unelevated color="primary" text-color="dark" padding="12px 26px">
+      <q-btn :disable="!session || (session && session.sessionType !== 'keplr' && session.sessionType !== 'walletconnect')" @click="openSendDialog" class="send-btn btn-medium text-h6 col-12 col-md-3 text-weight-medium" rounded unelevated color="primary" text-color="dark" padding="12px 26px">
         SEND <q-icon class="q-ml-auto rotate-270" name="svguse:icons.svg#arrow-right|0 0 14 14" size="14px" color="dark" />
       </q-btn>
     </div>

src/components/BalancesTable.vue

@@ -56,11 +56,11 @@
           </p>
         </q-td>
         <q-td key="actions" class="actions" :props="props">
-          <q-btn flat unelevated padding="4px" @click.stop="openSendDialog(props.row)" :disable="!session || (session && session.sessionType !== 'keplr')">
+          <q-btn flat unelevated padding="4px" @click.stop="openSendDialog(props.row)" :disable="!session || (session && session.sessionType !== 'keplr' && session.sessionType !== 'walletconnect')">
             <q-icon class="rotate-270" name="svguse:icons.svg#arrow-right|0 0 14 14" size="14px" color="primary" />
           </q-btn>
 
-          <q-btn flat unelevated padding="2px" @click.stop="" :disable="!session || (session && session.sessionType !== 'keplr')">
+          <q-btn flat unelevated padding="2px" @click.stop="" :disable="!session || (session && session.sessionType !== 'keplr' && session.sessionType !== 'walletconnect')">
             <q-icon name="svguse:icons.svg#vertical-dots|0 0 4 16" size="16px" color="primary" />
 
             <q-menu class="menu-list" anchor="center left" self="center middle" :offset="[90, 0]">

src/components/FantokensSummary.vue

@@ -9,7 +9,7 @@
 Try to istance your first fantoken serie.
       </p>
 
-      <q-btn :disable="!session || (session && session.sessionType !== 'keplr')" class="btn-medium text-h6 text-weight-medium col-12 col-md-auto" rounded unelevated color="primary" text-color="dark" padding="12px 28px" to="/fantokens/issue">
+      <q-btn :disable="!session || (session && session.sessionType !== 'keplr' && session.sessionType !== 'walletconnect')" class="btn-medium text-h6 text-weight-medium col-12 col-md-auto" rounded unelevated color="primary" text-color="dark" padding="12px 28px" to="/fantokens/issue">
         CREATE FANTOKEN <q-icon class="validators-icon" name="svguse:icons.svg#arrow-right|0 0 14 14" size="14px" color="dark" />
       </q-btn>
     </div>

src/components/FantokensTable.vue

@@ -65,7 +65,7 @@
           </p>
         </q-td>
         <q-td key="actions" class="actions" :props="props">
-          <q-btn flat unelevated padding="2px" @click.stop="" :disable="!session || (session && session.sessionType !== 'keplr')">
+          <q-btn flat unelevated padding="2px" @click.stop="" :disable="!session || (session && session.sessionType !== 'keplr' && session.sessionType !== 'walletconnect')">
             <q-icon name="svguse:icons.svg#vertical-dots|0 0 4 16" size="16px" color="primary" />
 
             <q-menu class="menu-list" anchor="center left" self="center middle" :offset="[90, 0]">

src/constants/network.ts

@@ -2,16 +2,16 @@ import { NetworkConfig } from 'src/models';
 
 // Default network
 export const network: NetworkConfig = {
-  id: 'bigbang-test-4',
+  id: 'b-public-testnet-1',
   name: 'BitSong Testnet',
   description: 'BitSong Testnet',
   logo: 'logo.svg',
   website: 'https://bitsong.io',
-  apiURL: 'https://api.testnet.bitsong.network',
+  apiURL: 'https://lcd.b-public-testnet-1.bitsong.network',
   faucetURL: 'https://faucet.testnet.bitsong.network',
-  rpcURL: 'https://rpc.testnet.bitsong.network',
+  rpcURL: 'https://rpc.b-public-testnet-1.bitsong.network',
   explorerURL: 'https://www.mintscan.io/bitsong/',
-  minBlockHeight: 1,
+  minBlockHeight: 6995667,
   stakingDenom: 'BTSG',
   coinLookup: [
     {

src/layouts/MainLayout.vue

@@ -18,7 +18,7 @@
           </q-btn>
         </q-toolbar-title>
 
-        <q-btn class="btn-medium" :disable="!session || (session && session.sessionType !== 'keplr')" rounded unelevated color="primary" text-color="dark" padding="0 40px 0 26px" @click="openGetBTSGDialog">
+        <q-btn class="btn-medium" :disable="!session || (session && session.sessionType !== 'keplr' && session.sessionType !== 'walletconnect')" rounded unelevated color="primary" text-color="dark" padding="0 40px 0 26px" @click="openGetBTSGDialog">
           <q-icon class="btsg-coin-icon" name="svguse:icons.svg#coin|0 0 24 24" color="dark" size="24px" />
           <label class="text-body2 text-dark text-untransform no-pointer-events">Get BTSG</label>
         </q-btn>
@@ -91,6 +91,7 @@ import { useRouter } from 'vue-router';
 
 import MenuLink from 'src/components/MenuLink.vue';
 import FaucetDialog from 'src/components/FaucetDialog.vue';
+import { SessionType } from 'src/models';
 
 export default defineComponent({
   name: 'MainLayout',
@@ -123,7 +124,9 @@ export default defineComponent({
     });
 
     window.addEventListener('keplr_keystorechange', async () => {
-      await store.dispatch('authentication/init');
+      if (session.value && session.value.sessionType === SessionType.KEPLR) {
+        await store.dispatch('authentication/init');
+      }
     });
 
     onMounted(() => {

src/models/index.ts

@@ -21,3 +21,4 @@ export * from './supply';
 export * from './inflaction';
 export * from './faucet';
 export * from './fantoken';
+export * from './wallet-connect';

src/models/session.ts

@@ -2,6 +2,7 @@ export enum SessionType {
   KEPLR = 'keplr',
   LOCAL = 'local',
   LEDGER = 'ledger',
+  WALLET_CONNECT = 'walletconnect',
   EXTENSION = 'extension',
   EXPLORE = 'explore'
 }

src/models/wallet-connect.ts

@@ -0,0 +1,18 @@
+export interface PeerMeta {
+  description: string
+  icons: string[]
+  name: string
+  url: string
+}
+
+export interface WalletConnectPayload<T> {
+  event: string
+  params: T[]
+}
+
+export interface WalletConnectionParam {
+  accounts: string[]
+  chainId: number
+  peerId: string
+  peerMeta: PeerMeta
+}

src/modules/authentication/views/LoginHome.vue

@@ -7,16 +7,8 @@
     <q-list>
       <item clickable details to="login/explore" v-ripple leftIcon="svguse:icons.svg#anchor" title="Explore with any address" reverse />
       <item clickable details :disable="!keplrAvailable" v-ripple leftIcon="svguse:icons.svg#chrome" @click="keplrSignIn" title="Keplr Browser Extension" reverse />
-      <item clickable disable leftIcon="svguse:icons.svg#chrome" title="Bitsong Browser Extension" reverse>
-        <template v-slot:right>
-          <q-chip class="soon-chip text-weight-bold text-caption-2 text-uppercase" color="dark-4" text-color="white" size="sm">
-            <label class="text-center full-width">
-              Soon
-            </label>
-          </q-chip>
-        </template>
-      </item>
-      <item clickable class="q-my-none" leftIcon="svguse:icons.svg#phone|0 0 18 25" disable title="Ledger Bitsong App" reverse>
+      <item clickable details v-ripple leftIcon="svguse:icons.svg#phone|0 0 18 25" @click="walletConnectSignIn" title="Bitsong Mobile App" reverse />
+      <item clickable disable class="q-my-none" leftIcon="svguse:icons.svg#chrome" title="Bitsong Browser Extension" reverse>
         <template v-slot:right>
           <q-chip class="soon-chip text-weight-bold text-caption-2 text-uppercase" color="dark-4" text-color="white" size="sm">
             <label class="text-center full-width">
@@ -41,6 +33,7 @@ import { useStore } from 'src/store';
 import { useQuasar } from 'quasar';
 import { useRouter, useRoute } from 'vue-router';
 import { SessionType } from 'src/models';
+import { walletConnect } from 'src/services';
 
 import Item from 'src/components/Item.vue';
 
@@ -65,6 +58,22 @@ export default defineComponent({
       }
     }
 
+    const walletConnectSignIn = async () => {
+      try {
+        quasar.loading.show();
+
+        if (walletConnect.connected) {
+          await walletConnect.killSession();
+        }
+
+        await walletConnect.createSession();
+      } catch (error) {
+        console.error(error);
+      } finally {
+        quasar.loading.hide();
+      }
+    }
+
     const keplrSignIn = async () => {
       try {
         quasar.loading.show();
@@ -95,6 +104,7 @@ export default defineComponent({
       keplrAvailable,
       session,
       keplrSignIn,
+      walletConnectSignIn,
       signOut
     }
   }

src/modules/wallet/components/ValidatorDelegation.vue

@@ -8,15 +8,15 @@
     <q-skeleton type="text" width="160px" height="50px" animation-speed="700" dark square v-else></q-skeleton>
 
     <div class="btns row items-center justify-evenly q-gutter-sm">
-      <q-btn :disable="!session || (session && session.sessionType !== 'keplr') || loading" class="btn btn-medium-small text-body4 col col-md-auto" rounded unelevated color="primary" text-color="dark" @click="openStakeDialog(validator)">
+      <q-btn :disable="!session || (session && session.sessionType !== 'keplr' && session.sessionType !== 'walletconnect') || loading" class="btn btn-medium-small text-body4 col col-md-auto" rounded unelevated color="primary" text-color="dark" @click="openStakeDialog(validator)">
         delegate
       </q-btn>
-      <q-btn :disable="!session || (session && session.sessionType !== 'keplr') || !hasDelegations || loading" class="btn btn-medium-small text-body4 col col-md-auto" rounded unelevated outline color="primary" text-color="primary" @click="openUnstakeDialog(validator)">
+      <q-btn :disable="!session || (session && session.sessionType !== 'keplr' && session.sessionType !== 'walletconnect') || !hasDelegations || loading" class="btn btn-medium-small text-body4 col col-md-auto" rounded unelevated outline color="primary" text-color="primary" @click="openUnstakeDialog(validator)">
         <label class="cursor-pointer text-white">
           undelegate
         </label>
       </q-btn>
-      <q-btn :disable="!session || (session && session.sessionType !== 'keplr') || !hasDelegations || loading" class="btn btn-medium-small text-body4 col col-md-auto" rounded unelevated color="dark-3" text-color="white" @click="openRestakeDialog(validator)">
+      <q-btn :disable="!session || (session && session.sessionType !== 'keplr' && session.sessionType !== 'walletconnect') || !hasDelegations || loading" class="btn btn-medium-small text-body4 col col-md-auto" rounded unelevated color="dark-3" text-color="white" @click="openRestakeDialog(validator)">
         redelegate
       </q-btn>
     </div>

src/modules/wallet/components/ValidatorRewards.vue

@@ -8,7 +8,7 @@
     <q-skeleton type="text" width="160px" height="50px" animation-speed="700" dark square v-else></q-skeleton>
 
     <div class="row items-center justify-center full-width">
-      <q-btn @click="openClaimDialog" :disable="!session || (session && session.sessionType !== 'keplr') || validatorReward.length === 0 || loading" class="btn-medium-small text-body4" rounded unelevated color="primary" text-color="dark" padding="12px 28px">
+      <q-btn @click="openClaimDialog" :disable="!session || (session && session.sessionType !== 'keplr' && session.sessionType !== 'walletconnect') || validatorReward.length === 0 || loading" class="btn-medium-small text-body4" rounded unelevated color="primary" text-color="dark" padding="12px 28px">
         CLAIM
       </q-btn>
     </div>

src/modules/wallet/views/Fantokens.vue

@@ -6,7 +6,7 @@
           Fantoken Lab
         </h2>
 
-        <q-btn :disable="!session || (session && session.sessionType !== 'keplr')" v-if="fantokenByOwner.length > 0" class="create-btn btn-medium text-h6 text-weight-medium col-12 col-md-auto" rounded unelevated color="primary" text-color="dark" padding="12px 28px" to="/fantokens/issue">
+        <q-btn :disable="!session || (session && session.sessionType !== 'keplr' && session.sessionType !== 'walletconnect')" v-if="fantokenByOwner.length > 0" class="create-btn btn-medium text-h6 text-weight-medium col-12 col-md-auto" rounded unelevated color="primary" text-color="dark" padding="12px 28px" to="/fantokens/issue">
           CREATE FANTOKEN <q-icon class="arrow-icon" name="svguse:icons.svg#arrow-right|0 0 14 14" size="14px" color="dark" />
         </q-btn>
       </div>

src/modules/wallet/views/IssueFantoken.vue

@@ -103,7 +103,7 @@
                 </q-tooltip>
               </div> -->
             </div>
-            <q-btn type="submit" :loading="loading" :disable="!session || (session && session.sessionType !== 'keplr')" class="issue-btn btn-large text-body2 text-weight-medium" rounded unelevated color="primary" text-color="dark" padding="12px 26px">
+            <q-btn type="submit" :loading="loading" :disable="!session || (session && session.sessionType !== 'keplr' && session.sessionType !== 'walletconnect')" class="issue-btn btn-large text-body2 text-weight-medium" rounded unelevated color="primary" text-color="dark" padding="12px 26px">
               ISSUE
             </q-btn>
           </div>

src/modules/wallet/views/Portfolio.vue

@@ -36,7 +36,7 @@
 
         <q-btn
           @click="openClaimDialog"
-          :disable="!session || (session && session.sessionType !== 'keplr') || rewards.length === 0"
+          :disable="!session || (session && session.sessionType !== 'keplr' && session.sessionType !== 'walletconnect') || rewards.length === 0"
           class="btn-medium-large-small text-weight-medium text-body3"
           rounded
           unelevated

src/modules/wallet/views/Proposals.vue

@@ -5,7 +5,7 @@
         Proposals
       </h2>
 
-      <q-btn :disable="!session || (session && session.sessionType !== 'keplr')" to="/proposals/submit" class="create-btn btn-medium text-h6 q-ml-auto" rounded unelevated color="primary" text-color="dark" padding="12px 24px 10px 26px">
+      <q-btn :disable="!session || (session && session.sessionType !== 'keplr' && session.sessionType !== 'walletconnect')" to="/proposals/submit" class="create-btn btn-medium text-h6 q-ml-auto" rounded unelevated color="primary" text-color="dark" padding="12px 24px 10px 26px">
         Create New <q-icon class="btn-icon q-ml-auto" name="svguse:icons.svg#add|0 0 12 12" size="12px" color="white" />
       </q-btn>
     </div>

src/modules/wallet/views/SubmitProposal.vue

@@ -69,7 +69,6 @@
                   val => !!val || 'Field is required',
                   val => !isNaN(val) || 'Amount must be a decimal value',,
                   val => gtnZero(val) || 'Amount must be a greater then zero',
-                  val => !minAmount(val, minDeposit) || `inimum amount required ${minDeposit} ${network.stakingDenom}`,
                   val => compareBalance(val, availableCoins) || 'You don\'t have enough coins',
                   val => !isNegative(val) || 'Amount must be greater then zero'
                 ]"
@@ -99,7 +98,7 @@
               <label class="text-h5 text-capitalize no-pointer-events">Save Draft</label>
             </q-btn>
 
-            <q-btn type="submit" :loading="loading" :disable="!session || (session && session.sessionType !== 'keplr')" class="create-btn btn-medium text-h6 q-ml-auto" rounded unelevated color="primary" text-color="dark" padding="12px 24px 10px 26px">
+            <q-btn type="submit" :loading="loading" :disable="!session || (session && session.sessionType !== 'keplr' && session.sessionType !== 'walletconnect')" class="create-btn btn-medium text-h6 q-ml-auto" rounded unelevated color="primary" text-color="dark" padding="12px 24px 10px 26px">
               Publish
             </q-btn>
           </div>

src/services/index.ts

@@ -3,3 +3,4 @@ export * from './keybase';
 export * from './supply';
 export * from './faucet';
 export * from './fantoken';
+export { default as walletConnect } from './wallet-connect';

src/services/wallet-connect.ts

@@ -0,0 +1,59 @@
+import WalletConnect from '@walletconnect/client';
+import QRCodeModal from '@walletconnect/qrcode-modal';
+import { SessionType, WalletConnectionParam, WalletConnectPayload } from 'src/models';
+import Router from 'src/router';
+import Store from 'src/store';
+
+// Create a connector
+const walletConnect = new WalletConnect({
+  bridge: 'https://bridge.walletconnect.org', // Required
+  qrcodeModal: QRCodeModal,
+});
+
+const walletConnectSignIn = async (payload: WalletConnectPayload<WalletConnectionParam>) => {
+  const { accounts } = payload.params[0];
+
+  console.log(payload);
+
+  if (payload.params.length > 0) {
+    if (accounts.length > 0) {
+      const account = accounts[0];
+
+      await Store.dispatch('authentication/signIn', {
+        address: account,
+        sessionType: SessionType.WALLET_CONNECT
+      });
+
+      const path = { name: 'wallet' };
+      await Router.replace(path);
+    }
+  }
+}
+
+// Subscribe to connection events
+walletConnect.on('connect', async (error, payload) => {
+  if (error) {
+    throw error;
+  }
+
+  await walletConnectSignIn(payload);
+});
+
+walletConnect.on('session_update', async (error, payload) => {
+  if (error) {
+    throw error;
+  }
+
+  await walletConnectSignIn(payload);
+});
+
+walletConnect.on('disconnect', (error, payload) => {
+  if (error) {
+    throw error;
+  }
+
+  // Delete connector
+  console.log(payload);
+});
+
+export default walletConnect;