From f36d8ac9d49be2643bca4143b798c2a79f2c4ebd Mon Sep 17 00:00:00 2001
From: Alexandros Kalogerakis <akalogerakis@unicorndomain.gr>
Date: Wed, 22 Jan 2025 13:57:42 +0200
Subject: [PATCH 1/3] feat: change active account on dapp login

---
 src/composables/accounts.ts                   | 23 ++++-
 src/popup/components/AccountCard.vue          | 26 ------
 src/popup/components/AccountInfo.vue          | 72 +++++++++++-----
 .../components/AccountSelectOptionsItem.vue   | 19 +++--
 .../AddressBook/AddressBookList.vue           | 38 ++-------
 .../components/FormSelectOptionsHeader.vue    |  3 +-
 .../Modals/AccountSelectOptions.vue           |  4 +-
 src/popup/components/PanelItem.vue            |  6 +-
 src/popup/components/form/FormSelect.vue      |  1 +
 src/popup/locales/en.json                     |  4 +-
 src/popup/pages/Popups/ConnectBase.vue        | 83 ++++++++++++++++---
 11 files changed, 170 insertions(+), 109 deletions(-)

diff --git a/src/composables/accounts.ts b/src/composables/accounts.ts
index accba67eb..64b2a53f9 100644
--- a/src/composables/accounts.ts
+++ b/src/composables/accounts.ts
@@ -30,10 +30,10 @@ import { tg } from '@/popup/plugins/i18n';
 import migrateAccountsVuexToComposable from '@/migrations/001-accounts-vuex-to-composable';
 
 import { ProtocolAdapterFactory } from '@/lib/ProtocolAdapterFactory';
+import { useStorageRef, useAuth, useModals } from '@/composables';
 
-import { useStorageRef } from './storageRef';
-import { useAuth } from './auth';
-import { useModals } from './modals';
+import AirGapIcon from '@/icons/air-gap.svg?vue-component';
+import PrivateKeyIcon from '@/icons/private-key.svg?vue-component';
 
 const {
   addCallback: onAccountChange,
@@ -206,6 +206,10 @@ export const useAccounts = createCustomScopedComposable(() => {
     return accounts.value.find((acc) => acc.globalIdx === globalIdx);
   }
 
+  function getAccountsSelectOptionsByProtocol(protocol: Protocol): IFormSelectOption[] {
+    return prepareAccountSelectOptions(accounts.value.filter((acc) => acc.protocol === protocol));
+  }
+
   /**
    * Access last used (or current) account of the protocol when accessing features
    * related to protocol different than the current account is using.
@@ -311,6 +315,17 @@ export const useAccounts = createCustomScopedComposable(() => {
     }
   }
 
+  function getAccountIcon(type: AccountType) {
+    switch (type) {
+      case ACCOUNT_TYPES.airGap:
+        return AirGapIcon;
+      case ACCOUNT_TYPES.privateKey:
+        return PrivateKeyIcon;
+      default:
+        return null;
+    }
+  }
+
   function resetAccounts() {
     mnemonic.value = '';
     accountsRaw.value = [];
@@ -347,6 +362,8 @@ export const useAccounts = createCustomScopedComposable(() => {
     getAccountByAddress,
     getAccountByGlobalIdx,
     getLastActiveProtocolAccount,
+    getAccountsSelectOptionsByProtocol,
+    getAccountIcon,
     onAccountChange,
     setActiveAccountByAddress,
     setActiveAccountByGlobalIdx,
diff --git a/src/popup/components/AccountCard.vue b/src/popup/components/AccountCard.vue
index abc09da2c..097b90bf9 100644
--- a/src/popup/components/AccountCard.vue
+++ b/src/popup/components/AccountCard.vue
@@ -22,14 +22,6 @@
     <template #bottom-left>
       <AccountCardTotalTokens :account="account" />
     </template>
-
-    <template #bottom-right>
-      <Component
-        :is="accountIcon"
-        v-if="accountIcon"
-        class="account-type-icon"
-      />
-    </template>
   </AccountCardBase>
 </template>
 
@@ -41,24 +33,18 @@ import {
 } from 'vue';
 import type { IAccount } from '@/types';
 import { useBalances } from '@/composables';
-import { ACCOUNT_TYPES } from '@/constants';
 
 import AccountInfo from './AccountInfo.vue';
 import BalanceInfo from './BalanceInfo.vue';
 import AccountCardTotalTokens from './AccountCardTotalTokens.vue';
 import AccountCardBase, { accountCardBaseCommonProps } from './AccountCardBase.vue';
 
-import AirGapIcon from '../../icons/air-gap.svg?vue-component';
-import PrivateKeyIcon from '../../icons/private-key.svg?vue-component';
-
 export default defineComponent({
   components: {
     AccountCardBase,
     AccountCardTotalTokens,
     AccountInfo,
     BalanceInfo,
-    AirGapIcon,
-    PrivateKeyIcon,
   },
   props: {
     account: { type: Object as PropType<IAccount>, required: true },
@@ -67,21 +53,9 @@ export default defineComponent({
   setup(props) {
     const { getAccountBalance } = useBalances();
 
-    const accountIcon = computed(() => {
-      switch (props.account.type) {
-        case ACCOUNT_TYPES.airGap:
-          return AirGapIcon;
-        case ACCOUNT_TYPES.privateKey:
-          return PrivateKeyIcon;
-        default:
-          return null;
-      }
-    });
-
     const numericBalance = computed(() => getAccountBalance(props.account.address).toNumber());
 
     return {
-      accountIcon,
       numericBalance,
     };
   },
diff --git a/src/popup/components/AccountInfo.vue b/src/popup/components/AccountInfo.vue
index f1fe4691b..ed6ddc51f 100644
--- a/src/popup/components/AccountInfo.vue
+++ b/src/popup/components/AccountInfo.vue
@@ -18,25 +18,35 @@
       class="account-details"
       :class="{ 'list-name': isListName }"
     >
-      <div
-        v-if="isMultisig"
-        class="account-name"
-        v-text="$t('multisig.multisigVault')"
-      />
-      <div
-        v-else-if="name"
-        class="account-name"
-      >
-        <ion-skeleton-text v-if="isLoading" animated />
-        <Truncate v-if="!isLoading" :str="name" />
+      <div class="account-with-icons">
+        <Component
+          :is="type && getAccountIcon(type)"
+          class="account-type-icon"
+        />
+        <div
+          v-if="isMultisig"
+          class="account-name"
+          v-text="$t('multisig.multisigVault')"
+        />
+        <template
+          v-else-if="name"
+        >
+          <ion-skeleton-text v-if="isLoading" animated />
+          <Truncate v-if="!isLoading" class="account-name" :str="name" />
+        </template>
+        <template
+          v-else
+        >
+          <Truncate
+            data-cy="account-name-number"
+            class="account-name"
+            :str="getDefaultAccountLabel(account)"
+          />
+        </template>
+        <div>
+          <slot name="after-address" />
+        </div>
       </div>
-      <Truncate
-        v-else
-        data-cy="account-name-number"
-        class="account-name"
-        :str="getDefaultAccountLabel(account)"
-      />
-
       <slot name="address">
         <CopyText
           v-if="address?.length"
@@ -72,11 +82,12 @@ import type { IAccount } from '@/types';
 import { getDefaultAccountLabel } from '@/utils';
 import { ProtocolAdapterFactory } from '@/lib/ProtocolAdapterFactory';
 import { useAeNames } from '@/protocols/aeternity/composables/aeNames';
+import { useAccounts } from '@/composables';
 
-import Avatar, { type AvatarSize } from './Avatar.vue';
-import CopyText from './CopyText.vue';
-import Truncate from './Truncate.vue';
-import AddressTruncated from './AddressTruncated.vue';
+import Avatar, { type AvatarSize } from '@/popup/components/Avatar.vue';
+import CopyText from '@/popup/components/CopyText.vue';
+import Truncate from '@/popup/components/Truncate.vue';
+import AddressTruncated from '@/popup/components/AddressTruncated.vue';
 
 export default defineComponent({
   components: {
@@ -102,6 +113,7 @@ export default defineComponent({
   },
   setup(props) {
     const { getName, getNameByNameHash } = useAeNames();
+    const { getAccountIcon, getAccountByAddress } = useAccounts();
 
     const isLoading = ref(true);
     const resolvedChainName = ref('');
@@ -111,6 +123,7 @@ export default defineComponent({
       || props.customName
       || getName(address.value).value
     ));
+    const type = computed(() => getAccountByAddress(props.account.address!)?.type);
 
     const explorerUrl = computed(
       () => (props.account.protocol)
@@ -136,8 +149,10 @@ export default defineComponent({
 
     return {
       name: resolvedChainName.value || name,
+      type,
       address,
       explorerUrl,
+      getAccountIcon,
       getDefaultAccountLabel,
       isLoading,
     };
@@ -171,11 +186,18 @@ export default defineComponent({
     max-width: var(--maxWidth);
     font-weight: 500;
 
+    .account-with-icons {
+      display: flex;
+      align-items: center;
+      max-width: 100%;
+    }
+
     .account-name {
       @extend %face-sans-16-medium;
 
       line-height: 20px; // Avoid cutting off bottom part of some letters, e.g.: "g"
       max-width: 100%;
+      flex: 1;
     }
 
     &.list-name {
@@ -213,5 +235,11 @@ export default defineComponent({
     height: 16px;
     margin: 0 0 4px 0;
   }
+
+  .account-type-icon {
+    width: 18px;
+    height: 18px;
+    margin-right: 4px;
+  }
 }
 </style>
diff --git a/src/popup/components/AccountSelectOptionsItem.vue b/src/popup/components/AccountSelectOptionsItem.vue
index 15af483c8..582c6af3e 100644
--- a/src/popup/components/AccountSelectOptionsItem.vue
+++ b/src/popup/components/AccountSelectOptionsItem.vue
@@ -17,7 +17,11 @@
         avatar-borderless
         is-list-name
         :show-protocol-icon="!hideProtocolIcon"
-      />
+      >
+        <template #after-address>
+          <slot name="after-address" />
+        </template>
+      </AccountInfo>
       <TokenAmount
         v-if="!hideBalance"
         :amount="balance"
@@ -80,23 +84,25 @@ export default defineComponent({
     const { getAccountBalance } = useBalances();
     const { getAccountByAddress } = useAccounts();
 
-    const account = props.customAccount ?? getAccountByAddress(props.option.value as string);
+    const account = computed(() => (
+      props.customAccount ?? getAccountByAddress(props.option.value as string)
+    ));
 
-    const bgColorStyle = computed(() => ({ '--bg-color': getAddressColor(account.address) }));
+    const bgColorStyle = computed(() => ({ '--bg-color': getAddressColor(account.value.address) }));
 
     const balance = computed(() => {
       switch (true) {
         case !!props.outsideBalance:
           return props.outsideBalance;
-        case !!account:
-          return getAccountBalance(account.address.toString()).toNumber();
+        case !!account.value:
+          return getAccountBalance(account.value.address.toString()).toNumber();
         default:
           return 0;
       }
     });
 
     const tokenSymbol = computed(
-      () => ProtocolAdapterFactory.getAdapter(account!.protocol).coinSymbol,
+      () => ProtocolAdapterFactory.getAdapter(account.value.protocol).coinSymbol,
     );
 
     return {
@@ -125,6 +131,7 @@ export default defineComponent({
     padding: 6px 8px;
     border-radius: 10px;
     width: 100%;
+    gap: 4px;
 
     &::before {
       top: 0;
diff --git a/src/popup/components/AddressBook/AddressBookList.vue b/src/popup/components/AddressBook/AddressBookList.vue
index 832b192fd..7eb2160a3 100644
--- a/src/popup/components/AddressBook/AddressBookList.vue
+++ b/src/popup/components/AddressBook/AddressBookList.vue
@@ -33,7 +33,6 @@
             protocol,
             isOwnAddress,
             nameAddress,
-            type,
           }, index) in accountsFiltered"
           :key="address"
           :to="
@@ -42,10 +41,10 @@
               : { name: ROUTE_ADDRESS_BOOK_EDIT, params: { id: address } }
           "
           class="address-book-item"
-          :style="bgColorStyle(isOwnAddress, nameAddress, address)"
+          :style="bgColorStyle(isOwnAddress, address)"
           :idx="index"
           data-cy="address-book-item"
-          @click="selectAddress(nameAddress, address)"
+          @click="selectAddress(nameAddress!, address)"
         >
           <AccountInfo
             :account="{ address, protocol }"
@@ -53,12 +52,6 @@
             :name-address="nameAddress"
             show-protocol-icon
           />
-          <template v-if="accountIcon(type) && isSelector" #bottom-right-icon>
-            <Component
-              :is="accountIcon(type)"
-              class="account-type-icon"
-            />
-          </template>
         </PanelItem>
       </div>
       <p
@@ -83,8 +76,8 @@ import { IonContent, IonHeader } from '@ionic/vue';
 import { Encoded } from '@aeternity/aepp-sdk';
 import { useRoute } from 'vue-router';
 
-import type { AccountType, ComponentRef } from '@/types';
-import { ACCOUNT_SELECT_TYPE_FILTER, ACCOUNT_TYPES } from '@/constants';
+import type { ComponentRef } from '@/types';
+import { ACCOUNT_SELECT_TYPE_FILTER } from '@/constants';
 import { ROUTE_ADDRESS_BOOK, ROUTE_ADDRESS_BOOK_EDIT } from '@/popup/router/routeNames';
 import { getAddressColor } from '@/utils';
 import { ProtocolAdapterFactory } from '@/lib/ProtocolAdapterFactory';
@@ -97,18 +90,9 @@ import InputSearch from '@/popup/components/InputSearch.vue';
 import AccountInfo from '@/popup/components/AccountInfo.vue';
 import AddressBookFilters from '@/popup/components/AddressBook/AddressBookFilters.vue';
 import PanelItem from '@/popup/components/PanelItem.vue';
-import BtnBase from '@/popup/components/buttons/BtnBase.vue';
-import BtnMain from '@/popup/components/buttons/BtnMain.vue';
-import IconWrapper from '@/popup/components/IconWrapper.vue';
-
-import AirGapIcon from '@/icons/air-gap.svg?vue-component';
-import PrivateKeyIcon from '@/icons/private-key.svg?vue-component';
 
 export default defineComponent({
   components: {
-    IconWrapper,
-    BtnMain,
-    BtnBase,
     IonHeader,
     IonContent,
     AccountInfo,
@@ -174,18 +158,7 @@ export default defineComponent({
       emit('update:hideButtons', hideOuterButtons.value);
     }, 100);
 
-    function accountIcon(type: AccountType) {
-      switch (type) {
-        case ACCOUNT_TYPES.airGap:
-          return AirGapIcon;
-        case ACCOUNT_TYPES.privateKey:
-          return PrivateKeyIcon;
-        default:
-          return null;
-      }
-    }
-
-    function bgColorStyle(isOwnAddress: boolean, nameAddress: String, address: String) {
+    function bgColorStyle(isOwnAddress: boolean, address: String) {
       return isOwnAddress ? { '--bg-color': getAddressColor(address) } : {};
     }
 
@@ -229,7 +202,6 @@ export default defineComponent({
       noRecordsMessage,
       protocolName,
       bgColorStyle,
-      accountIcon,
       selectAddress,
     };
   },
diff --git a/src/popup/components/FormSelectOptionsHeader.vue b/src/popup/components/FormSelectOptionsHeader.vue
index e687e74cf..eeaf7ee4e 100644
--- a/src/popup/components/FormSelectOptionsHeader.vue
+++ b/src/popup/components/FormSelectOptionsHeader.vue
@@ -2,7 +2,7 @@
   <div class="form-select-options-header">
     <span class="text-heading-5 text-muted title">{{ title }}</span>
     <InputSearch
-      v-if="optionsLength > SHOW_SEARCH_THRESHOLD"
+      v-if="optionsLength > SHOW_SEARCH_THRESHOLD && !hideSearch"
       :value="value"
       :placeholder="searchPlaceholder || $t('common.search')"
       class="search-field"
@@ -24,6 +24,7 @@ export default defineComponent({
     title: { type: String, default: '' },
     optionsLength: { type: Number, default: 0 },
     searchPlaceholder: { type: String, default: '' },
+    hideSearch: Boolean,
   },
   setup(props, { emit }) {
     function filterOptions(searchPhrase: string) {
diff --git a/src/popup/components/Modals/AccountSelectOptions.vue b/src/popup/components/Modals/AccountSelectOptions.vue
index e88d61248..7041ed9cb 100644
--- a/src/popup/components/Modals/AccountSelectOptions.vue
+++ b/src/popup/components/Modals/AccountSelectOptions.vue
@@ -13,6 +13,7 @@
         :title="title"
         :options-length="options.length"
         :search-placeholder="$t('pages.accounts.searchAccountsPlaceholder')"
+        :hide-search="hideSearch"
       />
     </template>
 
@@ -60,6 +61,7 @@ export default defineComponent({
     title: { type: String, default: null },
     value: { type: [String, Number], default: null },
     options: { type: Array as PropType<IFormSelectOption[]>, default: () => [] },
+    hideSearch: Boolean,
   },
   setup(props) {
     // TODO AIRGAP: implement multiple accounts selection
@@ -88,7 +90,7 @@ export default defineComponent({
   .items-list {
     display: flex;
     flex-direction: column;
-    row-gap: 2px;
+    row-gap: 8px;
     padding-inline: 8px;
   }
 }
diff --git a/src/popup/components/PanelItem.vue b/src/popup/components/PanelItem.vue
index 5454eec81..57fe99bed 100644
--- a/src/popup/components/PanelItem.vue
+++ b/src/popup/components/PanelItem.vue
@@ -115,9 +115,9 @@ export default defineComponent({
     overflow-x: hidden;
 
     :deep(.icon) {
-      width: 24px;
-      height: 24px;
-      margin-right: 8px;
+      width: 18px;
+      height: 18px;
+      margin-right: 4px;
     }
   }
 
diff --git a/src/popup/components/form/FormSelect.vue b/src/popup/components/form/FormSelect.vue
index 5eb2fb39d..f3f8aa55d 100644
--- a/src/popup/components/form/FormSelect.vue
+++ b/src/popup/components/form/FormSelect.vue
@@ -86,6 +86,7 @@ export default defineComponent({
         value: props.modelValue,
         options: props.options,
         title: props.defaultText,
+        hideSearch: true,
       })
         .then((val) => {
           emit('select', val);
diff --git a/src/popup/locales/en.json b/src/popup/locales/en.json
index c21c2b24c..a11b9dc70 100644
--- a/src/popup/locales/en.json
+++ b/src/popup/locales/en.json
@@ -833,7 +833,9 @@
       "networkRequest": "This dAppp is requesting permission to use the networks available in your Superhero wallet: {'<'}br /{'>'}{'<'}br /{'>'}{'<'}ul{'>'}{'<'}li {'>'}Mainnet{'<'}/li {'>'}{'<'}li {'>'}Testnet{'<'}/li {'>'}{'<'}/ul{'>'}",
       "transactionLabel": "Propose transactions",
       "transactionRequest": "This dApp may propose transactions. You are in charge of confirming them.",
-      "rememberMe": "Remember me"
+      "rememberMe": "Remember me",
+      "selectAccount": "Select account to connect with",
+      "ensureNetwork": "Kindly ensure that Superhero Wallet and dApp are connected to the same network before making any transaction."
     },
     "fungible-tokens": {
       "tokens": "Tokens | Token | Tokens",
diff --git a/src/popup/pages/Popups/ConnectBase.vue b/src/popup/pages/Popups/ConnectBase.vue
index ef28d308e..a2876a429 100644
--- a/src/popup/pages/Popups/ConnectBase.vue
+++ b/src/popup/pages/Popups/ConnectBase.vue
@@ -55,20 +55,36 @@
           v-text="$t('pages.connectConfirm.websiteRequestConnect')"
         />
       </div>
-      <template v-if="activeAccount">
+      <template v-if="selectedAccount">
         <!-- USER CARD -->
-        <AccountSelectOptionsItem
-          :custom-account="activeAccount"
-          hide-balance
-          hide-protocol-icon
+        <FormSelect
+          :model-value="selectedAccount.address"
+          :default-text="$t('pages.connectConfirm.selectAccount')"
+          :options="getAccountsSelectOptionsByProtocol(protocol)"
+          class="account-select-input"
+          item-title="value"
+          account-select
+          unstyled
+          hide-arrow
+          @select="selectedAccount = getAccountByAddress($event)"
         >
-          <template #right>
-            <NetworkButton
-              variant="outlined"
-              class="network-button"
-            />
+          <template #current-text>
+            <AccountSelectOptionsItem
+              :custom-account="selectedAccount"
+              hide-balance
+            >
+              <template #right>
+                <NetworkButton
+                  variant="outlined"
+                  class="network-button"
+                />
+              </template>
+              <template #after-address>
+                <ChevronDown class="chevron" />
+              </template>
+            </AccountSelectOptionsItem>
           </template>
-        </AccountSelectOptionsItem>
+        </FormSelect>
 
         <p
           class="text-description text-center permissions-header"
@@ -88,6 +104,11 @@
           </div>
         </div>
 
+        <p
+          class="ensure-network color-warning"
+          v-text="$t('pages.connectConfirm.ensureNetwork')"
+        />
+
         <div>
           <CheckBox
             v-model="rememberMe"
@@ -157,7 +178,7 @@ import {
   ref,
 } from 'vue';
 import { useI18n } from 'vue-i18n';
-import type { ConnectPermission } from '@/types';
+import type { ConnectPermission, IAccount } from '@/types';
 import { prepareUrlToDisplay } from '@/utils';
 import { RejectedByUserError } from '@/lib/errors';
 import {
@@ -180,14 +201,17 @@ import NetworkButton from '@/popup/components/NetworkButton.vue';
 import TemplateRenderer from '@/popup/components/TemplateRenderer.vue';
 import Truncate from '@/popup/components/Truncate.vue';
 import CheckBox from '@/popup/components/CheckBox.vue';
+import FormSelect from '@/popup/components/form/FormSelect.vue';
 
 import CheckMark from '@/icons/check-mark-circle-outline.svg?vue-component';
 import DappIcon from '@/icons/dapp.svg?vue-component';
 import TriangleRightIcon from '@/icons/triangle-right.svg?vue-component';
+import ChevronDown from '@/icons/chevron-down.svg?vue-component';
 
 export default defineComponent({
   components: {
     AccountSelectOptionsItem,
+    FormSelect,
     Card,
     Avatar,
     Modal,
@@ -201,6 +225,7 @@ export default defineComponent({
     CheckBox,
     DappIcon,
     TriangleRightIcon,
+    ChevronDown,
   },
   props: {
     access: { type: Array as PropType<ConnectPermission[]>, required: true },
@@ -209,7 +234,12 @@ export default defineComponent({
     const { t } = useI18n();
     const rememberMe = ref(true);
 
-    const { getLastActiveProtocolAccount } = useAccounts();
+    const {
+      getAccountsSelectOptionsByProtocol,
+      getLastActiveProtocolAccount,
+      getAccountByAddress,
+      setActiveAccountByAddress,
+    } = useAccounts();
     const {
       isUnknownDapp,
       popupProps,
@@ -245,6 +275,8 @@ export default defineComponent({
 
     const activeAccount = computed(() => getLastActiveProtocolAccount(protocol.value));
 
+    const selectedAccount = ref<IAccount | undefined>(getLastActiveProtocolAccount(protocol.value));
+
     const permission = computed(() => {
       const host = popupProps.value?.app?.host;
       return (host) ? permissions.value[host] : undefined;
@@ -291,6 +323,7 @@ export default defineComponent({
           address: rememberMe.value,
         });
       }
+      setActiveAccountByAddress(selectedAccount.value?.address);
       popupProps.value?.resolve();
     }
 
@@ -307,6 +340,10 @@ export default defineComponent({
       accessList,
       popupProps,
       activeAccount,
+      protocol,
+      selectedAccount,
+      getAccountsSelectOptionsByProtocol,
+      getAccountByAddress,
       dappIcon,
       sender,
       trustedDapp,
@@ -347,6 +384,10 @@ export default defineComponent({
       margin-block: 0 16px;
     }
 
+    .ensure-network {
+      margin: 0px 0px 15px 0px;
+    }
+
     .aepp-data {
       width: 100%;
 
@@ -356,6 +397,9 @@ export default defineComponent({
     }
 
     .network-button {
+      align-self: stretch;
+      margin: -6px -8px -6px 0px;
+      border-radius: 0px;
       pointer-events: none;
     }
 
@@ -444,6 +488,10 @@ export default defineComponent({
     }
   }
 
+  .account-select-input {
+    width: 100%;
+  }
+
   .permissions-header {
     margin-block: 16px;
   }
@@ -479,5 +527,14 @@ export default defineComponent({
   .remember-me {
     @extend %face-sans-15-medium;
   }
+
+  .chevron {
+    width: 10px;
+    height: 10px;
+    align-self: center;
+    opacity: 0.7;
+    margin-left: 1px;
+    padding-top: 4px;
+  }
 }
 </style>

From 04dbacd07d6fb861b4c81c27ccb020f627a46812 Mon Sep 17 00:00:00 2001
From: Alexandros Kalogerakis <akalogerakis@unicorndomain.gr>
Date: Fri, 17 Jan 2025 12:29:43 +0200
Subject: [PATCH 2/3] fix: popup being cut if the height of it is small

---
 src/popup/App.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/popup/App.vue b/src/popup/App.vue
index ed5cc1818..7877cc5c6 100644
--- a/src/popup/App.vue
+++ b/src/popup/App.vue
@@ -329,7 +329,6 @@ export default defineComponent({
 
   position: relative;
   display: flex;
-  justify-content: center;
   align-items: center;
   width: 100%;
   height: 100%;
@@ -340,7 +339,7 @@ export default defineComponent({
     position: relative;
     margin: 0 auto;
     width: 100%;
-    height: 100%;
+    height: 100vh;
     border-radius: var(--screen-border-radius);
     color: $color-white;
     background-color: var(--screen-bg-color);

From cde8e468e05bfb12b759d9c44d1f9fce17b13002 Mon Sep 17 00:00:00 2001
From: Alexandros Kalogerakis <akalogerakis@unicorndomain.gr>
Date: Mon, 27 Jan 2025 11:12:19 +0200
Subject: [PATCH 3/3] fix: welcome screen wording

---
 src/popup/locales/en.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/popup/locales/en.json b/src/popup/locales/en.json
index a11b9dc70..4f2bdd52b 100644
--- a/src/popup/locales/en.json
+++ b/src/popup/locales/en.json
@@ -949,7 +949,7 @@
       "generateWallet": "Create new wallet",
       "getStartedWithWallet": "Get started with Superhero Wallet",
       "importWallet": "Restore existing wallet",
-      "enterSeed": "Enter seed phrase",
+      "enterSeed": "with seed phrase",
       "seedPhrase": "Seed phrase",
       "enterSeedPhrase": "Please enter the words of your seed phrase (separated by spaces) in the correct order to restore your Superhero Wallet.",
       "importAccount": "Restore wallet",