Update pegiAccountSelect component as the design

rsksmart · Oct 29, 2024 · 73cfd89 · 73cfd89
1 parent d5d95c7
commit 73cfd89
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 32 deletions.
diff --git a/src/common/components/layouts/Top.vue b/src/common/components/layouts/Top.vue
@@ -7,9 +7,7 @@
       <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="isPeginSelected">
-        <peg-in-account-select />
-      </div>
+      <peg-in-account-select v-if="isPeginSelected"/>
       <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"

diff --git a/src/pegin/components/create/PegInAccountSelect.vue b/src/pegin/components/create/PegInAccountSelect.vue
@@ -1,37 +1,52 @@
 <template>
-  <v-row>
+  <v-row >
     <v-col cols="7" class="d-flex align-center justify-end">
-      <v-row>
-        <span class="align-center">
-          {{ walletService.name().formal_name }} | {{ selectedAccountBalance.toBTCTrimmedString() }}
-          {{ environmentContext.getBtcTicker() }}
-          <v-tooltip
-            activator="parent"
-            location="bottom"
-          >{{ selectedAccountBalance.toBTCString() }} {{ environmentContext.getBtcTicker() }}
-          </v-tooltip>
-        </span>
-      </v-row>
+      <v-btn v-if="singleAccountType" variant="text" size="small"
+        density="compact" rounded="full" :icon="mdiContentCopy"
+            @click="copyFullAccountAddress"
+          />
+      <span class="align-center text-no-wrap">
+        {{ walletInfo }} | {{ selectedAccountBalance.toBTCTrimmedString() }}
+        {{ environmentContext.getBtcTicker() }}
+        <v-tooltip
+          activator="parent"
+          location="bottom"
+        >{{ selectedAccountBalance.toBTCString() }} {{ environmentContext.getBtcTicker() }}
+        </v-tooltip>
+      </span>
     </v-col>
-    <v-col cols="5">
+    <v-col cols="5" class="pa-0 d-flex align-center">
       <div v-if="singleAccountType" class="d-flex align-center justify-end ga-4">
         <v-btn
-            :color="selectedAccountTypeBadge.color"
-            variant="flat"
-            readonly="true"
-          >
-            {{ selectedAccountTypeBadge.text }}
-          </v-btn>
+              v-bind="props"
+              variant="plain"
+              class="h-100"
+            >
+              <template #default>
+                <v-chip v-show="selectedAccountType"
+                  variant="flat" :color="selectedAccountTypeBadge.color" density="compact">
+                  {{ selectedAccountTypeBadge.text }}
+                </v-chip>
+              </template>
+            </v-btn>
       </div>
-      <div v-else class="d-flex align-center justify-end ga-4">
-        <v-menu location="bottom">
+      <div v-else class="d-flex align-center justify-end h-100 w-100 pa-0">
+        <v-menu location="bottom" no-click-animation="true">
           <template v-slot:activator="{ props }">
             <v-btn
-              :color="selectedAccountTypeBadge.color"
               v-bind="props"
-              variant="elevated"
+              variant="plain"
+              class="h-100"
             >
-              {{ selectedAccountTypeBadge.text }}
+              <template #default>
+                <v-chip v-show="selectedAccountType"
+                  variant="flat" :color="selectedAccountTypeBadge.color" density="compact">
+                  {{ selectedAccountTypeBadge.text }}
+                </v-chip>
+              </template>
+              <template #append>
+                <v-icon :icon="mdiChevronDown" />
+              </template>
             </v-btn>
           </template>
           <v-list>
@@ -41,8 +56,14 @@
               :value="item.value"
               @click="accountChanged(item.value)"
             >
+            <template #title>
+              <span class="text-h6 mx-1">{{ item.title }}</span>
+            </template>
               <template #append>
-                    <v-chip tag="span" variant="flat" :color="item.appendColor" density="compact">
+                    <v-chip tag="span" variant="flat"
+                    :color="item.appendColor" density="compact"
+                    class="mx-3"
+                    >
                       {{ item.appendText }}
                     </v-chip>
                 </template>
@@ -61,13 +82,14 @@
 import {
   ref, defineComponent, computed,
 } from 'vue';
-import { mdiBitcoin, mdiInformation } from '@mdi/js';
+import { mdiBitcoin, mdiContentCopy, mdiChevronDown } from '@mdi/js';
 import * as constants from '@/common/store/constants';
-import { BtcAccount } from '@/common/types/pegInTx';
+import { BtcAccount, WalletAddress } from '@/common/types/pegInTx';
 import EnvironmentContextProviderService from '@/common/providers/EnvironmentContextProvider';
 import { useAction, useGetter, useStateAttribute } from '@/common/store/helper';
 import { AccountBalance, BtcWallet, SatoshiBig } from '@/common/types';
 import { WalletService } from '@/common/services';
+import { truncateString } from '@/common/utils';
 
 export default defineComponent({
   name: 'PegInAccountSelect',
@@ -79,6 +101,7 @@ export default defineComponent({
     const loadingBalance = useStateAttribute<boolean>('pegInTx', 'loadingBalance');
     const walletService = useStateAttribute<WalletService>('pegInTx', 'walletService');
     const stateSelectedAccount = useStateAttribute<BtcAccount>('pegInTx', 'selectedAccount');
+    const addressList = useStateAttribute<WalletAddress[]>('pegInTx', 'addressList');
     const selectAccount = useAction('pegInTx', constants.PEGIN_TX_SELECT_ACCOUNT_TYPE);
     const calculateTxFee = useAction('pegInTx', constants.PEGIN_TX_CALCULATE_TX_FEE);
     const selectedAccountBalance = useGetter<SatoshiBig>('pegInTx', constants.PEGIN_TX_GET_SELECTED_BALANCE);
@@ -125,10 +148,19 @@ export default defineComponent({
       return { color: selected?.appendColor, text: selected?.appendText };
     });
 
+    const firstBtcAddress = computed(() => addressList.value[0]?.address);
+
+    const walletInfo = computed(() => (!singleAccountType.value
+      ? walletService.value.name().formal_name : truncateString(firstBtcAddress.value)));
+
     function setSelectedAccount(account: string) {
       selectedAccountType.value = account;
     }
 
+    function copyFullAccountAddress() {
+      navigator.clipboard.writeText(firstBtcAddress.value);
+    }
+
     if (singleAccountType.value) {
       selectedAccountType.value = singleAccountType.value;
     } else {
@@ -148,7 +180,7 @@ export default defineComponent({
       environmentContext,
       selectedAccountType,
       loadingBalance,
-      mdiInformation,
+      mdiContentCopy,
       balances,
       mdiBitcoin,
       balancesPerAccountType,
@@ -159,6 +191,9 @@ export default defineComponent({
       walletService,
       selectedAccountBalance,
       accountChanged,
+      mdiChevronDown,
+      walletInfo,
+      copyFullAccountAddress,
     };
   },
 });

diff --git a/src/scss/settings.scss b/src/scss/settings.scss
@@ -26,7 +26,7 @@
       'gap': 1,
     ),
     'h6': (
-      'size': 24px,
+      'size': 0.75,
       'weight': 700,
       'line-height': 26.4px,
       'padding': 2px 4px 6px 4px,