[DRAFT][POC] Feat: New Accounts and Vaults view switcher

src/popup/components/AccountSelectOptionsItem.vue

@@ -14,6 +14,7 @@
         avatar-size="rg"
         avatar-borderless
         is-list-name
+        show-protocol-icon
         class="account-info"
       />
       <TokenAmount

src/popup/components/AccountSelector.vue

@@ -24,17 +24,19 @@
           @update:modelValue="$emit('update:modelValue', $event)"
         >
           <template #current-text="{ text }">
-            <div v-if="!avatarOnly">
-              <Truncate
-                class="account-select-text"
-                :str="text"
+            <slot>
+              <div v-if="!avatarOnly">
+                <Truncate
+                  class="account-select-text"
+                  :str="text"
+                />
+              </div>
+              <Avatar
+                v-if="avatarOnly"
+                :address="modelValue.toString()"
+                size="sm"
               />
-            </div>
-            <Avatar
-              v-if="avatarOnly"
-              :address="modelValue.toString()"
-              size="sm"
-            />
+            </slot>
           </template>
         </FormSelect>
       </BtnPill>
@@ -73,7 +75,7 @@ export default defineComponent({
     event: 'select',
   },
   props: {
-    modelValue: { type: [String, Number], default: null },
+    modelValue: { type: [String, Number], default: '' },
     options: { type: Array as PropType<IFormSelectOption[]>, default: () => null },
     avatarOnly: Boolean,
   },

src/popup/components/AccountSwiper.vue

@@ -54,7 +54,31 @@
         @change="setCurrentSlide"
       />
 
-      <ToggleMultisigButton :is-multisig="isMultisig" />
+      <div
+        v-if="accounts.length > 1"
+        class="dashboard-header-info"
+      >
+        <BtnPill
+          class="account-select-btn"
+          hollow
+        >
+          <FormSelect
+            :default-text="$t('dashboard.selectAccount')"
+            :model-value="activeAccount.address"
+            class="account-select-input"
+            unstyled
+            account-select
+            @update:model-value="(address: string) => $emit('select-account', address)"
+          >
+            <template #current-text>
+              <div class="account-number">
+                <span class="account-number-current">{{ activeIdx + 1 }}</span>
+                / {{ accounts.length }}
+              </div>
+            </template>
+          </FormSelect>
+        </BtnPill>
+      </div>
     </div>
   </div>
 </template>
@@ -69,36 +93,45 @@ import {
   ref,
   watch,
 } from 'vue';
-import { RouteLocation } from 'vue-router';
-import { Swiper, SwiperSlide } from 'swiper/vue';
+import { RouteLocationNamedRaw } from 'vue-router';
 import SwiperCore from 'swiper';
+import { Swiper, SwiperSlide } from 'swiper/vue';
 import { Virtual } from 'swiper/modules';
+
 import { getAddressColor } from '@/utils';
-import { IS_MOBILE_APP, PROTOCOL_AETERNITY } from '@/constants';
+import { PROTOCOL_AETERNITY } from '@/constants';
+import { useAccounts } from '@/composables';
 
 import AccountCardAdd from './AccountCardAdd.vue';
 import AccountSwiperSlide from './AccountSwiperSlide.vue';
 import BulletSwitcher from './BulletSwitcher.vue';
-import ToggleMultisigButton from './ToggleMultisigButton.vue';
+import BtnPill from './buttons/BtnPill.vue';
+import FormSelect from './form/FormSelect.vue';
 
 SwiperCore.use([Virtual]);
 
 export default defineComponent({
   components: {
-    ToggleMultisigButton,
     BulletSwitcher,
     AccountSwiperSlide,
     Swiper,
     SwiperSlide,
     AccountCardAdd,
+    BtnPill,
+    FormSelect,
   },
   props: {
     activeIdx: { type: Number, required: true },
-    to: { type: Object as PropType<RouteLocation>, required: true },
+    to: { type: Object as PropType<RouteLocationNamedRaw>, required: true },
     addressList: { type: Array as PropType<string[]>, required: true },
     isMultisig: Boolean,
   },
+  emits: {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    'select-account': (idx: number) => undefined,
+  },
   setup(props, { emit }) {
+    const { activeAccount, accounts } = useAccounts();
     const customSwiper = ref();
     const currentIdx = ref(0);
 
@@ -114,7 +147,7 @@ export default defineComponent({
     function onSlideChange() {
       const { activeIndex } = swiper.value;
       if (activeIndex < props.addressList.length && activeIndex >= 0) {
-        emit('selectAccount', activeIndex);
+        emit('select-account', activeIndex);
       }
       if (currentIdx.value !== activeIndex) {
         currentIdx.value = activeIndex;
@@ -137,10 +170,12 @@ export default defineComponent({
     });
 
     return {
-      IS_MOBILE_APP,
       PROTOCOL_AETERNITY,
       currentIdx,
       customSwiper,
+      activeAccount,
+      accounts,
+      swiper,
       getAccountColor,
       onSlideChange,
       setCurrentSlide,
@@ -154,13 +189,37 @@ export default defineComponent({
 </style>
 
 <style lang="scss" scoped>
-@use '../../styles/mixins';
+@use '@/styles/mixins';
+@use '@/styles/typography';
 
 .account-swiper {
   .account-swiper-bottom {
-    @include mixins.flex(space-between, center, row);
-
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     padding-inline: var(--screen-padding-x);
   }
+
+  .dashboard-header-info {
+    display: flex;
+    align-items: flex-end;
+
+    .account-select-btn {
+      padding: 0;
+      margin-left: auto;
+    }
+
+    .account-select-input {
+      padding: 4px 10px;
+    }
+
+    .account-number {
+      @extend %face-sans-14-medium;
+
+      margin-right: 2px;
+      opacity: 0.4;
+      line-height: 1;
+    }
+  }
 }
 </style>

src/popup/components/AccountSwiperSlide.vue

@@ -30,7 +30,7 @@
 
 <script lang="ts">
 import { computed, defineComponent, PropType } from 'vue';
-import { RouteLocation } from 'vue-router';
+import { RouteLocationNamedRaw } from 'vue-router';
 
 import { getAddressColor } from '@/utils';
 
@@ -48,7 +48,7 @@ export default defineComponent({
   props: {
     idx: { type: Number, default: -1 },
     address: { type: String, default: '' },
-    to: { type: Object as PropType<RouteLocation>, default: null },
+    to: { type: Object as PropType<RouteLocationNamedRaw>, default: null },
     active: Boolean,
     hideNext: Boolean,
   },

src/popup/components/DashboardBase.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="dashboard-base">
+    <div style="padding: 0 16px; margin-bottom: var(--gap);">
+      <Tabs>
+        <Tab
+          :to="{ name: ROUTE_ACCOUNT }"
+        >
+          <div style="line-height: 1.3em;">
+            Accounts<br>
+            <TotalWalletAmount
+              :total-balance="balancesTotal"
+              style="font-size: 13px; font-weight: normal;"
+              class="total-amount"
+            />
+          </div>
+        </Tab>
+        <Tab
+          :to="{ name: ROUTE_MULTISIG_ACCOUNT }"
+        >
+          <div style="line-height: 1.3em; text-align: center;">
+            Multisig Vaults<br>
+            <span style="font-size: 12px; opacity: 0.4; font-weight: normal;">
+              Switch to see amount
+            </span>
+          </div>
+        </Tab>
+      </Tabs>
+    </div>
+
+    <div class="dashboard-base-swiper">
+      <slot name="swiper" />
+    </div>
+
+    <div class="dashboard-base-cards">
+      <div
+        v-if="$slots.buttons"
+        class="buttons-row"
+      >
+        <slot name="buttons" />
+      </div>
+
+      <slot name="widgets" />
+
+      <DashboardCard
+        v-if="!isSeedBackedUp"
+        :title="$t('dashboard.backUpCard.title')"
+        :description="$t('dashboard.backUpCard.description')"
+        :btn-text="$t('dashboard.backUpCard.button')"
+        :icon="WarningTriangleIcon"
+        :to="{ name: 'settings-seed-phrase' }"
+        data-cy="backup-seed-phrase"
+        variant="danger"
+      />
+
+      <slot name="cards" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { PropType, defineComponent } from 'vue';
+import type { IAccount, IFormSelectOption } from '@/types';
+import { useUi } from '@/composables';
+import { ROUTE_ACCOUNT, ROUTE_MULTISIG_ACCOUNT } from '@/popup/router/routeNames';
+
+import DashboardCard from './DashboardCard.vue';
+import TotalWalletAmount from './TotalWalletAmount.vue';
+import Tab from './tabs/Tab.vue';
+import Tabs from './tabs/Tabs.vue';
+
+import WarningTriangleIcon from '../../icons/warning-triangle.svg?vue-component';
+
+export default defineComponent({
+  name: 'DashboardBase',
+  components: {
+    DashboardCard,
+    TotalWalletAmount,
+    Tab,
+    Tabs,
+  },
+  props: {
+    accounts: { type: Array as PropType<IAccount[]>, default: () => [] },
+    accountsSelectOptions: { type: Array as PropType<IFormSelectOption[]>, default: null },
+    activeAccountAddress: { type: String, default: '' },
+    activeIdx: { type: Number, default: 0 },
+    balancesTotal: { type: String, default: null },
+  },
+  emits: {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    'select-account': (address: string) => undefined,
+  },
+  setup() {
+    const { isSeedBackedUp } = useUi();
+
+    return {
+      ROUTE_ACCOUNT,
+      ROUTE_MULTISIG_ACCOUNT,
+      isSeedBackedUp,
+      WarningTriangleIcon,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@/styles/variables';
+@use '@/styles/typography';
+@use '@/styles/mixins';
+
+.dashboard-base {
+  display: flex;
+  flex-direction: column;
+
+  .dashboard-base-cards {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap);
+    margin-top: 8px;
+    padding-inline: var(--screen-padding-x);
+    padding-bottom: var(--screen-padding-x);
+
+    .buttons-row {
+      display: flex;
+      gap: var(--gap);
+    }
+  }
+}
+</style>