Fix Ui details on btc select

I've updated the PeginAccount select inserted on the top bar in order to stick the interaction as the proposed UX
rsksmart · Oct 24, 2024 · 55a8075 · 55a8075
1 parent 7aeb884
commit 55a8075
Show file tree

Hide file tree

Showing 14 changed files with 122 additions and 262 deletions.
diff --git a/src/common/components/layouts/Top.vue b/src/common/components/layouts/Top.vue
@@ -7,101 +7,10 @@
       <h1 class="text-purple text-h5">PowPeg</h1>
     </div>
     <div class="d-flex align-center ga-5">
-      <div class="d-flex align-center ga-2" v-if="connectedBtcWallet">
-        <span>
-          {{ connectedBtcWallet }} | {{ selectedBtcAccountBalance }}
-          <v-tooltip
-            activator="parent"
-            location="bottom"
-          >{{ selectedBtcAccountBalance.toBTCString() }} {{ environmentContext.getBtcTicker() }}
-          </v-tooltip>
-        </span>
+      <div class="d-flex align-center ga-2" v-if="isPeginSelected">
+        <peg-in-account-select />
       </div>
-      <div class="d-flex align-center ga-4">
-        <v-menu>
-          <template v-slot:activator="{ props }">
-            <v-btn
-              color="primary"
-              v-bind="props"
-            >
-              {{ selectedAccountType }}
-            </v-btn>
-          </template>
-          <template #append-inner>
-          <v-chip v-show="selectedAccountType"
-            variant="flat" :color="selectedAccountTypeBadge.color" density="compact">
-            {{ selectedAccountTypeBadge.text }}
-          </v-chip>
-        </template>
-        <template #item="{ props, item }">
-          <v-list-item v-bind="props" class="d-flex px-3 ga-2">
-            <template #title>
-              <span class="text-h4">{{ props.title }}</span>
-            </template>
-              <template #prepend>
-                <v-chip :prepend-icon="mdiBitcoin" class="btc-icon">
-                  {{ environmentContext.getBtcTicker() }}
-              </v-chip>
-            </template>
-            <template #append>
-                <v-chip tag="span" variant="flat" :color="item.raw.appendColor" density="compact">
-                  {{ item.raw.appendText }}
-                </v-chip>
-            </template>
-          </v-list-item>
-        </template>
-        </v-menu>
-      <v-select
-        :disabled="loadingBalance"
-        flat
-        hide-details
-        rounded="lg"
-        variant="solo"
-        density="default"
-        placeholder="Select the account"
-        :items="balancesPerAccountType"
-        v-model="selectedAccountType"
-        >
-        <template #prepend-inner>
-          <v-chip :prepend-icon="mdiBitcoin" class="btc-icon">
-            {{ environmentContext.getBtcTicker() }}
-          </v-chip>
-        </template>
-        <template #append-inner>
-          <v-chip v-show="selectedAccountType"
-            variant="flat" :color="selectedAccountTypeBadge.color" density="compact">
-            {{ selectedAccountTypeBadge.text }}
-          </v-chip>
-        </template>
-        <template #item="{ props, item }">
-          <v-list-item v-bind="props" class="d-flex px-3 ga-2">
-            <template #title>
-              <span class="text-h4">{{ props.title }}</span>
-            </template>
-              <template #prepend>
-                <v-chip :prepend-icon="mdiBitcoin" class="btc-icon">
-                  {{ environmentContext.getBtcTicker() }}
-              </v-chip>
-            </template>
-            <template #append>
-                <v-chip tag="span" variant="flat" :color="item.raw.appendColor" density="compact">
-                  {{ item.raw.appendText }}
-                </v-chip>
-            </template>
-          </v-list-item>
-        </template>
-      </v-select>
-      <v-tooltip :text="tooltipText" location="bottom" max-width="240">
-        <template v-slot:activator="{ props }">
-          <v-icon :icon="mdiInformation" v-bind="props" color="green" />
-        </template>
-      </v-tooltip>
-      <div v-if="loadingBalance" class="d-flex align-center ga-2">
-        <span>Loading balances...</span>
-        <v-progress-circular size="small" indeterminate color="bw-500"/>
-      </div>
-    </div>
-      <div class="d-flex align-center ga-2" v-if="truncatedAccount && accountBalance">
+      <div class="d-flex align-center ga-2" v-else-if="truncatedAccount && accountBalance">
         <v-btn variant="text" size="small" density="compact" rounded="full" :icon="mdiContentCopy"
           @click="copyFullAccountAddress"
         />
@@ -129,34 +38,30 @@ import { useAction, useGetter, useStateAttribute } from '@/common/store/helper';
 import { useRoute, useRouter } from 'vue-router';
 import { useTheme } from 'vuetify';
 import {
-  mdiContentCopy, mdiLinkOff, mdiBitcoin, mdiInformation,
+  mdiContentCopy, mdiLinkOff,
 } from '@mdi/js';
+import PegInAccountSelect from '@/pegin/components/create/PegInAccountSelect.vue';
 import * as constants from '@/common/store/constants';
 import { computed, ref, watch } from 'vue';
 import { truncateString } from '@/common/utils';
-import {
-  AccountBalance, BtcAccount, SatoshiBig, WeiBig,
-} from '@/common/types';
+import { WeiBig } from '@/common/types';
 import EnvironmentContextProviderService from '@/common/providers/EnvironmentContextProvider';
 
 export default {
   name: 'TopBar',
+  components: {
+    PegInAccountSelect,
+  },
   setup() {
     const router = useRouter();
     const route = useRoute();
     const themeLight = ref(false);
-    const selectedAccountType = ref();
     const vuetifyTheme = useTheme();
 
     const account = useGetter<string>('web3Session', constants.SESSION_GET_CHECKSUMMED_ACCOUNT);
-    const connectedBtcWallet = useGetter<string>('pegInTx', constants.WALLET_NAME);
-    const selectedBtcAccountBalance = useGetter<SatoshiBig>('pegInTx', constants.PEGIN_TX_GET_SELECTED_BALANCE);
-    const stateSelectedAccount = useStateAttribute<BtcAccount>('pegInTx', 'selectedAccount');
     const truncatedAccount = computed(() => truncateString(account.value));
 
     const balance = useStateAttribute<WeiBig>('web3Session', 'balance');
-    const loadingBalance = useStateAttribute<boolean>('pegInTx', 'loadingBalance');
-    const balances = useStateAttribute<AccountBalance>('pegInTx', 'balances');
     const environmentContext = EnvironmentContextProviderService.getEnvironmentContext();
 
     const accountBalance = computed(() => {
@@ -166,33 +71,6 @@ export default {
 
     const clearSession = useAction('web3Session', constants.WEB3_SESSION_CLEAR_ACCOUNT);
 
-    const balancesPerAccountType = computed(() => ([
-      {
-        title: balances.value.legacy.toBTCTrimmedString(),
-        value: constants.BITCOIN_LEGACY_ADDRESS,
-        appendText: 'Legacy',
-        appendColor: 'pink',
-      },
-      {
-        title: balances.value.segwit.toBTCTrimmedString(),
-        value: constants.BITCOIN_SEGWIT_ADDRESS,
-        appendText: 'Segwit',
-        appendColor: 'orange',
-      },
-      {
-        title: balances.value.nativeSegwit.toBTCTrimmedString(),
-        value: constants.BITCOIN_NATIVE_SEGWIT_ADDRESS,
-        appendText: 'Native Segwit',
-        appendColor: 'teal',
-      },
-    ]));
-
-    const selectedAccountTypeBadge = computed(() => {
-      const selected = balancesPerAccountType.value
-        .find(({ value }) => value === selectedAccountType.value);
-      return { color: selected?.appendColor, text: selected?.appendText };
-    });
-
     function disconnectWallet() {
       clearSession();
       router.push({ name: 'Home' });
@@ -210,16 +88,10 @@ export default {
       return vuetifyTheme.global.current.value.dark ? require('@/assets/logo-rootstock-white.svg') : require('@/assets/logo-rootstock-black.svg');
     }
 
-    if (stateSelectedAccount.value) {
-      selectedAccountType.value = stateSelectedAccount.value;
-    }
-
     watch(themeLight, (enabledLight) => {
       vuetifyTheme.global.name.value = enabledLight ? 'light' : 'dark';
     });
 
-    const tooltipText = 'Listed amounts represent the balance using addresses from your first account including change.';
-
     return {
       goHome,
       getLogoSrc,
@@ -232,15 +104,7 @@ export default {
       accountBalance,
       balance,
       environmentContext,
-      connectedBtcWallet,
-      selectedBtcAccountBalance,
-      loadingBalance,
-      balancesPerAccountType,
-      selectedAccountType,
-      mdiBitcoin,
-      mdiInformation,
-      selectedAccountTypeBadge,
-      tooltipText,
+      isPeginSelected: computed(() => route.name === 'Create'),
     };
   },
 };

diff --git a/src/common/router/index.ts b/src/common/router/index.ts
@@ -63,7 +63,7 @@ const routes: Readonly<RouteRecordRaw[]> = [
     path: '/pegin',
     name: 'PegIn',
     component: () => import(/* webpackChunkName: "pegin" */ '../../pegin/views/PegIn.vue'),
-    beforeEnter: [checkAcceptedTerms, checkRSKConnection],
+    beforeEnter: [checkAcceptedTerms],
   },
   {
     path: '/pegout',

diff --git a/src/common/services/EnkryptService.ts b/src/common/services/EnkryptService.ts
@@ -36,7 +36,7 @@ export default class EnkryptService extends WalletService {
   }
 
   availableAccounts(): BtcAccount[] {
-    return [constants.BITCOIN_NATIVE_SEGWIT_ADDRESS];
+    return [BtcAccount.BITCOIN_NATIVE_SEGWIT_ADDRESS];
   }
 
   isConnected(): Promise<boolean> {

diff --git a/src/common/services/LeatherService.ts b/src/common/services/LeatherService.ts
@@ -35,7 +35,7 @@ export default class LeatherService extends WalletService {
   // eslint-disable-next-line class-methods-use-this
   public availableAccounts(): BtcAccount[] {
     return [
-      constants.BITCOIN_NATIVE_SEGWIT_ADDRESS,
+      BtcAccount.BITCOIN_NATIVE_SEGWIT_ADDRESS,
     ];
   }
 

diff --git a/src/common/services/LedgerService.ts b/src/common/services/LedgerService.ts
@@ -22,9 +22,9 @@ export default class LedgerService extends WalletService {
   // eslint-disable-next-line class-methods-use-this
   public availableAccounts(): BtcAccount[] {
     return [
-      constants.BITCOIN_LEGACY_ADDRESS,
-      constants.BITCOIN_SEGWIT_ADDRESS,
-      constants.BITCOIN_NATIVE_SEGWIT_ADDRESS,
+      BtcAccount.BITCOIN_LEGACY_ADDRESS,
+      BtcAccount.BITCOIN_SEGWIT_ADDRESS,
+      BtcAccount.BITCOIN_NATIVE_SEGWIT_ADDRESS,
     ];
   }
 
@@ -113,14 +113,14 @@ export default class LedgerService extends WalletService {
     let addressList: Array<WalletAddress> = [];
     const { legacy, segwit, nativeSegwit } = this.addressesToFetch;
     addressList = addressList.concat(
-      this.getDerivedAddresses(legacy.count, legacy.lastIndex, constants.BITCOIN_LEGACY_ADDRESS),
+      this.getDerivedAddresses(legacy.count, legacy.lastIndex, BtcAccount.BITCOIN_LEGACY_ADDRESS),
     ).concat(
-      this.getDerivedAddresses(segwit.count, segwit.lastIndex, constants.BITCOIN_SEGWIT_ADDRESS),
+      this.getDerivedAddresses(segwit.count, segwit.lastIndex, BtcAccount.BITCOIN_SEGWIT_ADDRESS),
     ).concat(
       this.getDerivedAddresses(
         nativeSegwit.count,
         nativeSegwit.lastIndex,
-        constants.BITCOIN_NATIVE_SEGWIT_ADDRESS,
+        BtcAccount.BITCOIN_NATIVE_SEGWIT_ADDRESS,
       ),
     );
     return addressList;

diff --git a/src/common/services/TrezorService.ts b/src/common/services/TrezorService.ts
@@ -57,9 +57,9 @@ export default class TrezorService extends WalletService {
   // eslint-disable-next-line class-methods-use-this
   public availableAccounts(): BtcAccount[] {
     return [
-      constants.BITCOIN_LEGACY_ADDRESS,
-      constants.BITCOIN_SEGWIT_ADDRESS,
-      constants.BITCOIN_NATIVE_SEGWIT_ADDRESS,
+      BtcAccount.BITCOIN_LEGACY_ADDRESS,
+      BtcAccount.BITCOIN_SEGWIT_ADDRESS,
+      BtcAccount.BITCOIN_NATIVE_SEGWIT_ADDRESS,
     ];
   }
 

diff --git a/src/common/services/WalletService.ts b/src/common/services/WalletService.ts
@@ -294,9 +294,9 @@ export default abstract class WalletService {
 
   protected async setAccountsXpub(accountIdx: number): Promise<void> {
     this.extendedPubKeys = {
-      p2pkh: await this.getXpub(constants.BITCOIN_LEGACY_ADDRESS, accountIdx),
-      p2sh: await this.getXpub(constants.BITCOIN_SEGWIT_ADDRESS, accountIdx),
-      p2wpkh: await this.getXpub(constants.BITCOIN_NATIVE_SEGWIT_ADDRESS, accountIdx),
+      p2pkh: await this.getXpub(BtcAccount.BITCOIN_LEGACY_ADDRESS, accountIdx),
+      p2sh: await this.getXpub(BtcAccount.BITCOIN_SEGWIT_ADDRESS, accountIdx),
+      p2wpkh: await this.getXpub(BtcAccount.BITCOIN_NATIVE_SEGWIT_ADDRESS, accountIdx),
     };
   }
 

diff --git a/src/common/services/XverseService.ts b/src/common/services/XverseService.ts
@@ -110,7 +110,7 @@ export default class XverseService extends WalletService {
       }
 
       availableAccounts(): BtcAccount[] {
-        return [constants.BITCOIN_SEGWIT_ADDRESS];
+        return [BtcAccount.BITCOIN_SEGWIT_ADDRESS];
       }
 
       name(): Record<'formal_name' | 'short_name' | 'long_name', string> {

diff --git a/src/common/types/pegInTx.ts b/src/common/types/pegInTx.ts
@@ -3,9 +3,11 @@ import SatoshiBig from '@/common/types/SatoshiBig';
 import { WalletService } from '@/common/services';
 import * as constants from '@/common/store/constants';
 
-export type BtcAccount = 'BITCOIN_LEGACY_ADDRESS' |
-  'BITCOIN_SEGWIT_ADDRESS' |
-  'BITCOIN_NATIVE_SEGWIT_ADDRESS';
+export enum BtcAccount {
+  BITCOIN_LEGACY_ADDRESS = 'BITCOIN_LEGACY_ADDRESS',
+  BITCOIN_SEGWIT_ADDRESS = 'BITCOIN_SEGWIT_ADDRESS',
+  BITCOIN_NATIVE_SEGWIT_ADDRESS = 'BITCOIN_NATIVE_SEGWIT_ADDRESS'
+}
 
 export type BtcWallet = 'WALLET_LEDGER' | 'WALLET_TREZOR' | 'WALLET_LEATHER' | 'WALLET_XVERSE' | 'WALLET_ENKRYPT';
 

diff --git a/src/common/views/Home.vue b/src/common/views/Home.vue
@@ -138,7 +138,7 @@ export default {
 
     async function selectConversion(txType: NonNullable<TransactionType>) {
       addPeg(txType);
-      if (!rskAccount.value) {
+      if (txType === constants.PEG_OUT_TRANSACTION_TYPE && !rskAccount.value) {
         try {
           await connectWeb3();
         } catch (e) {