From 97eee524259494aff4ef6815db5c303c9d1a4c97 Mon Sep 17 00:00:00 2001
From: Bobo <bobo.kovacevic@gmail.com>
Date: Fri, 13 Oct 2023 08:29:41 +0200
Subject: [PATCH 01/16] useNft hook

---
 .../header/modals/ModalAccountUnification.vue |  7 +++++
 .../modals/account-unification/AuStep3.vue    |  9 ++++--
 .../modals/account-unification/SelectNft.vue  | 17 +++++++++--
 src/hooks/useNft.ts                           | 28 +++++++++++++++++++
 4 files changed, 57 insertions(+), 4 deletions(-)
 create mode 100644 src/hooks/useNft.ts

diff --git a/src/components/header/modals/ModalAccountUnification.vue b/src/components/header/modals/ModalAccountUnification.vue
index 5bb23852a..dfbda9341 100644
--- a/src/components/header/modals/ModalAccountUnification.vue
+++ b/src/components/header/modals/ModalAccountUnification.vue
@@ -31,6 +31,7 @@
           :is-fetching-xc20-tokens="isFetchingXc20Tokens"
           :is-edit="false"
           @next="updateSteps(transferXc20Tokens.length > 0 ? 4 : 5)"
+          @on-select-nft="updateSteps(200)"
         />
       </div>
       <div v-else-if="currentStep === 100 && unifiedAccount">
@@ -68,6 +69,9 @@
       <div v-else-if="currentStep === 6">
         <au-step6 />
       </div>
+      <div v-else-if="currentStep === 200">
+        <select-nft :evm-address="selectedEvmAddress" @next="updateSteps(3)" />
+      </div>
       <div v-else>
         <user-account
           :set-account-name="setAccountName"
@@ -91,6 +95,7 @@ import AuStep3 from 'src/components/header/modals/account-unification/AuStep3.vu
 import AuStep4 from 'src/components/header/modals/account-unification/AuStep4.vue';
 import AuStep5 from 'src/components/header/modals/account-unification/AuStep5.vue';
 import AuStep6 from 'src/components/header/modals/account-unification/AuStep6.vue';
+import SelectNft from './account-unification/SelectNft.vue';
 import { UnifiedAccount } from 'src/store/general/state';
 
 export default defineComponent({
@@ -103,6 +108,7 @@ export default defineComponent({
     AuStep4,
     AuStep5,
     AuStep6,
+    SelectNft,
   },
   props: {
     isOpen: {
@@ -193,6 +199,7 @@ export default defineComponent({
         // Make a call to update unified account identity
         await updateAccount(unifiedAccount.value.nativeAddress, accountName.value);
         await checkIfUnified(unifiedAccount.value.nativeAddress);
+      } else if (step === 200) {
       }
 
       currentStep.value = step;
diff --git a/src/components/header/modals/account-unification/AuStep3.vue b/src/components/header/modals/account-unification/AuStep3.vue
index b29d342e1..32c8bef5d 100644
--- a/src/components/header/modals/account-unification/AuStep3.vue
+++ b/src/components/header/modals/account-unification/AuStep3.vue
@@ -31,7 +31,7 @@
           {{ $t('wallet.unifiedAccount.accountIcon') }}
         </div>
         <!-- TODO: open the select NFT modal (SelectNft.vue) -->
-        <button type="button" class="box--account-icon">
+        <button type="button" class="box--account-icon" @click="selectNft">
           <jazzicon :address="currentAccount" :diameter="32" class="icon" />
         </button>
       </div>
@@ -78,12 +78,16 @@ export default defineComponent({
       default: false,
     },
   },
-  emits: ['next'],
+  emits: ['next', 'onSelectNft'],
   setup(props, { emit }) {
     const next = () => {
       emit('next');
     };
 
+    const selectNft = () => {
+      emit('onSelectNft');
+    };
+
     const { currentAccount } = useAccount();
     const accountNameSet = ref<boolean>(false);
 
@@ -102,6 +106,7 @@ export default defineComponent({
       accountNameSet,
       next,
       updateAccountName,
+      selectNft,
     };
   },
 });
diff --git a/src/components/header/modals/account-unification/SelectNft.vue b/src/components/header/modals/account-unification/SelectNft.vue
index f0d5d3dfd..ca32742ba 100644
--- a/src/components/header/modals/account-unification/SelectNft.vue
+++ b/src/components/header/modals/account-unification/SelectNft.vue
@@ -13,22 +13,35 @@
 
     <!-- Action -->
     <div>
-      <astar-button class="btn">Next</astar-button>
+      <astar-button class="btn" @click="next">Next</astar-button>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
+import { useNft } from 'src/hooks/useNft';
+import { defineComponent, onMounted } from 'vue';
 
 export default defineComponent({
   components: {},
+  props: {
+    evmAddress: {
+      type: String,
+      required: true,
+    },
+  },
   emits: ['next'],
   setup(props, { emit }) {
+    const { ownedNfts, getOwnedNfts } = useNft();
+
     const next = () => {
       emit('next');
     };
 
+    onMounted(() => {
+      getOwnedNfts(props.evmAddress);
+    });
+
     const icon_img = {
       astar_gradient: require('/src/assets/img/astar_icon.svg'),
     };
diff --git a/src/hooks/useNft.ts b/src/hooks/useNft.ts
new file mode 100644
index 000000000..b36ec65d5
--- /dev/null
+++ b/src/hooks/useNft.ts
@@ -0,0 +1,28 @@
+import { ref } from 'vue';
+import { NftMetadata } from 'src/v2/models';
+import { useNetworkInfo } from './useNetworkInfo';
+import { container } from 'src/v2/common';
+import { INftRepository } from 'src/v2/repositories';
+import { Symbols } from 'src/v2/symbols';
+
+export function useNft() {
+  const { currentNetworkName } = useNetworkInfo();
+  const ownedNfts = ref<NftMetadata[]>([]);
+  const isBusy = ref<boolean>(false);
+
+  const getOwnedNfts = async (ownerAddress: string): Promise<void> => {
+    const nftRepository = container.get<INftRepository>(Symbols.NftRepository);
+
+    try {
+      isBusy.value = true;
+      ownedNfts.value = await nftRepository.getOwnedTokens(
+        currentNetworkName.value.toLowerCase(),
+        ownerAddress
+      );
+    } finally {
+      isBusy.value = false;
+    }
+  };
+
+  return { ownedNfts, isBusy, getOwnedNfts };
+}

From 6e3a6ccf066d9f5e34c5c065808a3c71eb244366 Mon Sep 17 00:00:00 2001
From: Bobo <bobo.kovacevic@gmail.com>
Date: Fri, 13 Oct 2023 13:04:14 +0200
Subject: [PATCH 02/16] Select and display NFT avatar

---
 .../header/modals/ModalAccountUnification.vue | 18 ++++++++-
 .../modals/account-unification/AuStep3.vue    | 11 ++++--
 .../modals/account-unification/SelectNft.vue  | 39 ++++++++++---------
 src/hooks/useNft.ts                           | 16 +++++++-
 src/hooks/wallet/useAccountUnification.ts     | 12 +++++-
 src/i18n/en-US/index.ts                       |  3 +-
 6 files changed, 70 insertions(+), 29 deletions(-)

diff --git a/src/components/header/modals/ModalAccountUnification.vue b/src/components/header/modals/ModalAccountUnification.vue
index dfbda9341..7fa48a732 100644
--- a/src/components/header/modals/ModalAccountUnification.vue
+++ b/src/components/header/modals/ModalAccountUnification.vue
@@ -30,6 +30,7 @@
           :selected-evm-address="selectedEvmAddress"
           :is-fetching-xc20-tokens="isFetchingXc20Tokens"
           :is-edit="false"
+          :avatar="avatar"
           @next="updateSteps(transferXc20Tokens.length > 0 ? 4 : 5)"
           @on-select-nft="updateSteps(200)"
         />
@@ -70,7 +71,7 @@
         <au-step6 />
       </div>
       <div v-else-if="currentStep === 200">
-        <select-nft :evm-address="selectedEvmAddress" @next="updateSteps(3)" />
+        <select-nft :evm-address="selectedEvmAddress" @next="setAvatar" />
       </div>
       <div v-else>
         <user-account
@@ -97,6 +98,7 @@ import AuStep5 from 'src/components/header/modals/account-unification/AuStep5.vu
 import AuStep6 from 'src/components/header/modals/account-unification/AuStep6.vue';
 import SelectNft from './account-unification/SelectNft.vue';
 import { UnifiedAccount } from 'src/store/general/state';
+import { NftMetadata } from 'src/v2/models';
 
 export default defineComponent({
   components: {
@@ -128,6 +130,7 @@ export default defineComponent({
     const { currentAccount } = useAccount();
     const isLoading = computed<boolean>(() => store.getters['general/isLoading']);
     const totalCost = ref<string>('');
+    const avatar = ref<NftMetadata | undefined>(undefined);
     const unifiedAccount = computed<UnifiedAccount>(
       () => store.getters['general/getUnifiedAccount']
     );
@@ -183,13 +186,20 @@ export default defineComponent({
       window.removeEventListener('resize', onHeightChange);
     });
 
+    const setAvatar = async (nft: NftMetadata): Promise<void> => {
+      avatar.value = nft;
+      await updateSteps(3);
+    };
+
     const updateSteps = async (step: number): Promise<void> => {
       if (step === 6) {
         // Make a call to unify accounts
         const success = await unifyAccounts(
           currentAccount.value,
           selectedEvmAddress.value,
-          accountName.value
+          accountName.value,
+          avatar.value?.contractAddress,
+          avatar.value?.tokenId
         );
 
         if (!success) {
@@ -229,6 +239,8 @@ export default defineComponent({
         return '';
       } else if (currentStep.value === 100) {
         return t('wallet.unifiedAccount.editUnifiedAccount');
+      } else if (currentStep.value === 200) {
+        return t('wallet.unifiedAccount.selectAvatar');
       } else {
         return t('wallet.unifiedAccount.yourAccount');
       }
@@ -252,12 +264,14 @@ export default defineComponent({
       isLoading,
       totalCost,
       unifiedAccount,
+      avatar,
       closeModal,
       backModal,
       updateSteps,
       setWeb3,
       setAccountName,
       handleTransferXc20Tokens,
+      setAvatar,
     };
   },
 });
diff --git a/src/components/header/modals/account-unification/AuStep3.vue b/src/components/header/modals/account-unification/AuStep3.vue
index 32c8bef5d..6a97fadfe 100644
--- a/src/components/header/modals/account-unification/AuStep3.vue
+++ b/src/components/header/modals/account-unification/AuStep3.vue
@@ -30,9 +30,9 @@
         <div class="label">
           {{ $t('wallet.unifiedAccount.accountIcon') }}
         </div>
-        <!-- TODO: open the select NFT modal (SelectNft.vue) -->
         <button type="button" class="box--account-icon" @click="selectNft">
-          <jazzicon :address="currentAccount" :diameter="32" class="icon" />
+          <img v-if="avatar" :src="avatar.image" class="icon" />
+          <jazzicon v-else :address="currentAccount" :diameter="32" class="icon" />
         </button>
       </div>
     </div>
@@ -51,7 +51,8 @@
 
 <script lang="ts">
 import { useAccount } from 'src/hooks';
-import { defineComponent, ref } from 'vue';
+import { NftMetadata } from 'src/v2/models';
+import { defineComponent, ref, PropType } from 'vue';
 import Jazzicon from 'vue3-jazzicon/src/components';
 
 export default defineComponent({
@@ -77,6 +78,10 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    avatar: {
+      type: Object as PropType<NftMetadata | undefined>,
+      default: undefined,
+    },
   },
   emits: ['next', 'onSelectNft'],
   setup(props, { emit }) {
diff --git a/src/components/header/modals/account-unification/SelectNft.vue b/src/components/header/modals/account-unification/SelectNft.vue
index ca32742ba..94a881421 100644
--- a/src/components/header/modals/account-unification/SelectNft.vue
+++ b/src/components/header/modals/account-unification/SelectNft.vue
@@ -2,12 +2,17 @@
   <div class="wrapper--account-unification">
     <div class="list--nfts">
       <div
-        v-for="nft in nfts"
-        :key="nft.img"
+        v-for="(nft, index) in ownedNfts"
+        :key="`nft-${index}`"
         class="item"
-        :class="nft.isSelected && 'item--selected'"
+        :class="selectedIndex === index && 'item--selected'"
+        @click="selectedIndex = index"
       >
-        <img :src="nft.img" alt="NFT" />
+        <img :src="nft.image" :alt="nft.name" />
+      </div>
+      <div v-if="ownedNfts.length === 0 && !isBusy" class="item">
+        You don't have NFTs minted at the moment. When you mint some you will be able to update your
+        unified account with a NFT. For the moment default icon will be used.
       </div>
     </div>
 
@@ -20,7 +25,7 @@
 
 <script lang="ts">
 import { useNft } from 'src/hooks/useNft';
-import { defineComponent, onMounted } from 'vue';
+import { defineComponent, onMounted, ref } from 'vue';
 
 export default defineComponent({
   components: {},
@@ -32,29 +37,25 @@ export default defineComponent({
   },
   emits: ['next'],
   setup(props, { emit }) {
-    const { ownedNfts, getOwnedNfts } = useNft();
+    const { ownedNfts, isBusy, getOwnedNfts } = useNft();
+    const selectedIndex = ref<number>(-1);
 
     const next = () => {
-      emit('next');
+      if (selectedIndex.value > -1) {
+        emit('next', ownedNfts.value[selectedIndex.value]);
+      } else {
+        emit('next');
+      }
     };
 
     onMounted(() => {
       getOwnedNfts(props.evmAddress);
     });
 
-    const icon_img = {
-      astar_gradient: require('/src/assets/img/astar_icon.svg'),
-    };
-
-    const nfts = [
-      { img: icon_img.astar_gradient, isSelected: true },
-      { img: icon_img.astar_gradient, isSelected: false },
-      { img: icon_img.astar_gradient, isSelected: false },
-      { img: icon_img.astar_gradient, isSelected: false },
-    ];
-
     return {
-      nfts,
+      ownedNfts,
+      selectedIndex,
+      isBusy,
       next,
     };
   },
diff --git a/src/hooks/useNft.ts b/src/hooks/useNft.ts
index b36ec65d5..29e0142e2 100644
--- a/src/hooks/useNft.ts
+++ b/src/hooks/useNft.ts
@@ -13,12 +13,24 @@ export function useNft() {
   const getOwnedNfts = async (ownerAddress: string): Promise<void> => {
     const nftRepository = container.get<INftRepository>(Symbols.NftRepository);
 
+    ownerAddress = '0xe42A2ADF3BEe1c195f4D72410421ad7908388A6a';
+
     try {
       isBusy.value = true;
-      ownedNfts.value = await nftRepository.getOwnedTokens(
-        currentNetworkName.value.toLowerCase(),
+      const nfts = await nftRepository.getOwnedTokens(
+        'astar', //currentNetworkName.value.toLowerCase(),
         ownerAddress
       );
+
+      // Update image uri to use IPFS gateway
+      ownedNfts.value = nfts.map((nft) => {
+        nft.image = nft.image.replace('ipfs://', 'https://gateway.pinata.cloud/ipfs/');
+        return nft;
+      });
+
+      for (let i = 0; i < 3; i++) {
+        ownedNfts.value.push(...ownedNfts.value);
+      }
     } finally {
       isBusy.value = false;
     }
diff --git a/src/hooks/wallet/useAccountUnification.ts b/src/hooks/wallet/useAccountUnification.ts
index 938645922..20410ad62 100644
--- a/src/hooks/wallet/useAccountUnification.ts
+++ b/src/hooks/wallet/useAccountUnification.ts
@@ -323,13 +323,21 @@ export const useAccountUnification = () => {
   const unifyAccounts = async (
     nativeAddress: string,
     evmAddress: string,
-    accountName: string
+    accountName: string,
+    avatarContractAddress?: string,
+    avatarId?: string
   ): Promise<boolean> => {
     const unificationService = container.get<IAccountUnificationService>(
       Symbols.AccountUnificationService
     );
 
-    return unificationService.unifyAccounts(nativeAddress, evmAddress, accountName);
+    return unificationService.unifyAccounts(
+      nativeAddress,
+      evmAddress,
+      accountName,
+      avatarContractAddress,
+      avatarId
+    );
   };
 
   const updateAccount = async (nativeAddress: string, accountName: string): Promise<void> => {
diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
index 7e67c92b0..71ca21b7c 100644
--- a/src/i18n/en-US/index.ts
+++ b/src/i18n/en-US/index.ts
@@ -208,7 +208,7 @@ export default {
       haveStakingBalance:
         'You have some Staking balance. Those staked token will not be merged to the unified account. Please unstake first.',
       unifiedAccountName: 'Unified Account Name',
-      accountIcon: 'Account icon (we are working on adding your own NFT as an account icon)',
+      accountIcon: 'Account icon',
       balanceTransferred: 'Your balance in the EVM account are going to be transferred.',
       readyToUnify:
         'Now xcTokens are sent and you are ready to unify both accounts! Please check below before confirm.',
@@ -223,6 +223,7 @@ export default {
       techDocs: 'Tech docs',
       sendingXc20: 'Start sending XC20 tokens, please wait...',
       editUnifiedAccount: 'Edit Unified Account',
+      selectAvatar: 'Select Avatar',
       save: 'Save',
     },
   },

From 064fc6d7572aead1b8f5995c0cd60f42365bcf8f Mon Sep 17 00:00:00 2001
From: Bobo <bobo.kovacevic@gmail.com>
Date: Fri, 13 Oct 2023 14:45:42 +0200
Subject: [PATCH 03/16] Read avatar url

---
 .../modals/account-unification/AuStep3.vue    | 12 ++---------
 .../styles/modal-account-unification.scss     |  4 ++--
 src/hooks/useAccount.ts                       | 21 +++++++++++++++++++
 src/hooks/useNft.ts                           | 12 +++++++----
 src/hooks/wallet/useAccountUnification.ts     |  5 +++--
 src/store/general/state.ts                    |  1 +
 src/v2/models/Identity.ts                     |  8 +++++++
 .../implementations/IdentityRepository.ts     |  5 +++--
 8 files changed, 48 insertions(+), 20 deletions(-)

diff --git a/src/components/header/modals/account-unification/AuStep3.vue b/src/components/header/modals/account-unification/AuStep3.vue
index 6a97fadfe..822b7c0af 100644
--- a/src/components/header/modals/account-unification/AuStep3.vue
+++ b/src/components/header/modals/account-unification/AuStep3.vue
@@ -20,7 +20,7 @@
             :placeholder="$t('wallet.unifiedAccount.unifiedAccountName')"
             :maxlength="32"
             :value="accountName"
-            @input="(event) => updateAccountName(event)"
+            @input="(event) => setAccountName(event)"
           />
         </div>
       </div>
@@ -41,7 +41,7 @@
     <div>
       <astar-button
         class="btn"
-        :disabled="accountName === '' || isFetchingXc20Tokens || !accountNameSet"
+        :disabled="accountName === '' || isFetchingXc20Tokens"
         @click="next()"
         >{{ isEdit ? $t('wallet.unifiedAccount.save') : $t('next') }}</astar-button
       >
@@ -94,23 +94,15 @@ export default defineComponent({
     };
 
     const { currentAccount } = useAccount();
-    const accountNameSet = ref<boolean>(false);
 
     const icon_img = {
       metamask: require('/src/assets/img/metamask.png'),
     };
 
-    const updateAccountName = (event: any): void => {
-      accountNameSet.value = true;
-      props.setAccountName(event);
-    };
-
     return {
       icon_img,
       currentAccount,
-      accountNameSet,
       next,
-      updateAccountName,
       selectNft,
     };
   },
diff --git a/src/components/header/styles/modal-account-unification.scss b/src/components/header/styles/modal-account-unification.scss
index 75075d6c4..0edecee6e 100644
--- a/src/components/header/styles/modal-account-unification.scss
+++ b/src/components/header/styles/modal-account-unification.scss
@@ -275,8 +275,8 @@
     }
     .icon {
       margin-right: 12px;
-      height: 32px;
-      width: 32px;
+      height: 48px;
+      width: 48px;
       flex-shrink: 0;
       border-radius: 9999px;
       object-fit: cover;
diff --git a/src/hooks/useAccount.ts b/src/hooks/useAccount.ts
index 10ff40252..c795eb2b9 100644
--- a/src/hooks/useAccount.ts
+++ b/src/hooks/useAccount.ts
@@ -12,6 +12,8 @@ import { Symbols } from 'src/v2/symbols';
 import { computed, ref, watch } from 'vue';
 import { useNetworkInfo } from './useNetworkInfo';
 import { endpointKey } from 'src/config/chainEndpoints';
+import { INftRepository } from 'src/v2/repositories';
+import { useNft } from './useNft';
 
 export const ETHEREUM_EXTENSION = 'Ethereum Extension';
 
@@ -20,6 +22,7 @@ const DELAY = 100;
 
 export const useAccount = () => {
   const store = useStore();
+  const { getProxiedUrl } = useNft();
   const { currentNetworkIdx } = useNetworkInfo();
   const multisig = ref<Multisig>();
 
@@ -81,20 +84,38 @@ export const useAccount = () => {
 
     if (mapped) {
       const identityRepository = container.get<IdentityRepository>(Symbols.IdentityRepository);
+      const nftRepository = container.get<INftRepository>(Symbols.NftRepository);
       const identity = await identityRepository.getIdentity(isEvmAddress ? mapped : address);
       const name = identity?.display || '';
 
+      let avatarUrl: string | undefined;
+      const avatarContractAddress = identity?.getAvatarContractAddress();
+      const avatarTokenId = identity?.getAvatarTokenId();
+      if (avatarContractAddress && avatarTokenId) {
+        const nft = await nftRepository.getNftMetadata(
+          'astar', // TODO replace with currentNetworkName.value.toLowerCase(),
+          avatarContractAddress,
+          avatarTokenId
+        );
+
+        if (nft) {
+          avatarUrl = getProxiedUrl(nft.image);
+        }
+      }
+
       if (isValidEvmAddress(address)) {
         store.commit('general/setUnifiedAccount', {
           nativeAddress: mapped,
           evmAddress: address,
           name,
+          avatarUrl,
         });
       } else {
         store.commit('general/setUnifiedAccount', {
           nativeAddress: address,
           evmAddress: mapped,
           name,
+          avatarUrl,
         });
       }
     } else {
diff --git a/src/hooks/useNft.ts b/src/hooks/useNft.ts
index 29e0142e2..71a460e62 100644
--- a/src/hooks/useNft.ts
+++ b/src/hooks/useNft.ts
@@ -13,18 +13,18 @@ export function useNft() {
   const getOwnedNfts = async (ownerAddress: string): Promise<void> => {
     const nftRepository = container.get<INftRepository>(Symbols.NftRepository);
 
-    ownerAddress = '0xe42A2ADF3BEe1c195f4D72410421ad7908388A6a';
+    ownerAddress = '0xe42A2ADF3BEe1c195f4D72410421ad7908388A6a'; // TODO: remove this line
 
     try {
       isBusy.value = true;
       const nfts = await nftRepository.getOwnedTokens(
-        'astar', //currentNetworkName.value.toLowerCase(),
+        'astar', //TODO currentNetworkName.value.toLowerCase(),
         ownerAddress
       );
 
       // Update image uri to use IPFS gateway
       ownedNfts.value = nfts.map((nft) => {
-        nft.image = nft.image.replace('ipfs://', 'https://gateway.pinata.cloud/ipfs/');
+        nft.image = getProxiedUrl(nft.image);
         return nft;
       });
 
@@ -36,5 +36,9 @@ export function useNft() {
     }
   };
 
-  return { ownedNfts, isBusy, getOwnedNfts };
+  const getProxiedUrl = (ipfsUri: string): string => {
+    return ipfsUri.replace('ipfs://', 'https://gateway.pinata.cloud/ipfs/');
+  };
+
+  return { ownedNfts, isBusy, getOwnedNfts, getProxiedUrl };
 }
diff --git a/src/hooks/wallet/useAccountUnification.ts b/src/hooks/wallet/useAccountUnification.ts
index 20410ad62..51a76ff06 100644
--- a/src/hooks/wallet/useAccountUnification.ts
+++ b/src/hooks/wallet/useAccountUnification.ts
@@ -24,7 +24,7 @@ import { useStore } from 'src/store';
 import { XcmAssets } from 'src/store/assets/state';
 import { container } from 'src/v2/common';
 import { ExtrinsicStatusMessage, IEventAggregator } from 'src/v2/messaging';
-import { Asset } from 'src/v2/models';
+import { Asset, IdentityData } from 'src/v2/models';
 import { DappCombinedInfo } from 'src/v2/models/DappsStaking';
 import { IAccountUnificationService, IDappStakingService, IIdentityService } from 'src/v2/services';
 import { Symbols } from 'src/v2/symbols';
@@ -341,8 +341,9 @@ export const useAccountUnification = () => {
   };
 
   const updateAccount = async (nativeAddress: string, accountName: string): Promise<void> => {
+    // TODO update avatar also
     const identityService = container.get<IIdentityService>(Symbols.IdentityService);
-    await identityService.setIdentity(nativeAddress, { display: accountName });
+    await identityService.setIdentity(nativeAddress, new IdentityData(accountName));
   };
 
   const getCost = async (): Promise<string> => {
diff --git a/src/store/general/state.ts b/src/store/general/state.ts
index bd8733b7f..858a5564b 100644
--- a/src/store/general/state.ts
+++ b/src/store/general/state.ts
@@ -34,6 +34,7 @@ export type UnifiedAccount = {
   nativeAddress: string;
   evmAddress: string;
   name: string;
+  avatarUrl?: string;
 };
 
 export type ConnectionType = 'connected' | 'connecting' | 'offline';
diff --git a/src/v2/models/Identity.ts b/src/v2/models/Identity.ts
index d6ede78eb..13ded3c7d 100644
--- a/src/v2/models/Identity.ts
+++ b/src/v2/models/Identity.ts
@@ -11,6 +11,14 @@ export class IdentityData {
     this.display = display;
     this.additional = additional;
   }
+
+  getAvatarContractAddress(): string | undefined {
+    return this.additional?.find((x) => x.key === 'avatarNftAddress')?.value;
+  }
+
+  getAvatarTokenId(): string | undefined {
+    return this.additional?.find((x) => x.key === 'avatarNftId')?.value;
+  }
 }
 
 export interface Deposit {
diff --git a/src/v2/repositories/implementations/IdentityRepository.ts b/src/v2/repositories/implementations/IdentityRepository.ts
index 1acdad25e..73c814a9a 100644
--- a/src/v2/repositories/implementations/IdentityRepository.ts
+++ b/src/v2/repositories/implementations/IdentityRepository.ts
@@ -40,9 +40,10 @@ export class IdentityRepository implements IIdentityRepository {
     const identity = result.unwrapOrDefault();
     const data = new IdentityData(u8aToString(identity.info.display.asRaw), []);
     identity.info.additional.forEach((x) => {
+      // Seems dirty. The problem here is that some raw data is treated as ASCII and some as bytes
       data.additional?.push({
-        key: x[0].toHuman() as string,
-        value: x[1].toHuman() as string,
+        key: JSON.parse(JSON.stringify(x[0].toHuman())).Raw,
+        value: JSON.parse(JSON.stringify(x[1].toHuman())).Raw,
       });
     });
 

From 693ec429539140f583a42b382479d171a2238ccd Mon Sep 17 00:00:00 2001
From: Bobo <bobo.kovacevic@gmail.com>
Date: Mon, 16 Oct 2023 10:57:59 +0200
Subject: [PATCH 04/16] Avatar selection done

---
 src/components/assets/Account.vue             | 17 +++++++--
 .../header/modals/ModalAccountUnification.vue | 29 ++++++++++-----
 .../modals/account-unification/AuIcon.vue     | 35 +++++++++++++++++++
 .../modals/account-unification/AuStep3.vue    |  6 +++-
 .../modals/account-unification/SelectNft.vue  | 23 +++++++++---
 .../account-unification/UserAccount.vue       | 18 +++-------
 .../styles/modal-account-unification.scss     | 17 ++++-----
 src/hooks/useAccount.ts                       | 11 ++++--
 src/hooks/useNft.ts                           |  2 +-
 src/hooks/wallet/useAccountUnification.ts     | 21 +++++++++--
 src/store/general/state.ts                    |  2 ++
 11 files changed, 136 insertions(+), 45 deletions(-)
 create mode 100644 src/components/header/modals/account-unification/AuIcon.vue

diff --git a/src/components/assets/Account.vue b/src/components/assets/Account.vue
index 28c0b7747..e807d9a99 100644
--- a/src/components/assets/Account.vue
+++ b/src/components/assets/Account.vue
@@ -15,8 +15,9 @@
     <div class="container">
       <div class="row--details">
         <div class="column-account-name">
+          <au-icon v-if="isAccountUnified" :unified-account="unifiedAccount" />
           <img
-            v-if="iconWallet"
+            v-else-if="iconWallet"
             width="24"
             :src="iconWallet"
             alt="wallet-icon"
@@ -103,7 +104,14 @@ import copy from 'copy-to-clipboard';
 import { ethers } from 'ethers';
 import { $api } from 'src/boot/api';
 import { endpointKey, providerEndpoints } from 'src/config/chainEndpoints';
-import { useAccount, useBalance, useNetworkInfo, usePrice, useWalletIcon } from 'src/hooks';
+import {
+  useAccount,
+  useAccountUnification,
+  useBalance,
+  useNetworkInfo,
+  usePrice,
+  useWalletIcon,
+} from 'src/hooks';
 import { useEvmAccount } from 'src/hooks/custom-signature/useEvmAccount';
 import { getEvmMappedSs58Address, setAddressMapping } from 'src/hooks/helper/addressUtils';
 import { useStore } from 'src/store';
@@ -114,12 +122,14 @@ import EvmNativeToken from 'src/components/assets/EvmNativeToken.vue';
 import ModalLockdropWarning from 'src/components/assets/modals/ModalLockdropWarning.vue';
 import { ETHEREUM_EXTENSION } from 'src/hooks';
 import { supportWalletObj } from 'src/config/wallets';
+import AuIcon from '../header/modals/account-unification/AuIcon.vue';
 
 export default defineComponent({
   components: {
     NativeAssetList,
     ModalLockdropWarning,
     EvmNativeToken,
+    AuIcon,
   },
   props: {
     ttlErc20Amount: {
@@ -147,6 +157,7 @@ export default defineComponent({
     const { nativeTokenUsd } = usePrice();
     const { requestSignature } = useEvmAccount();
     const { iconWallet } = useWalletIcon();
+    const { unifiedAccount, isAccountUnified } = useAccountUnification();
 
     const store = useStore();
     const { t } = useI18n();
@@ -272,6 +283,8 @@ export default defineComponent({
       signatoryIconWallet,
       isModalLockdropWarning,
       isAccountUnification,
+      unifiedAccount,
+      isAccountUnified,
       handleModalLockdropWarning,
       getShortenAddress,
       copyAddress,
diff --git a/src/components/header/modals/ModalAccountUnification.vue b/src/components/header/modals/ModalAccountUnification.vue
index 7fa48a732..f17f003e9 100644
--- a/src/components/header/modals/ModalAccountUnification.vue
+++ b/src/components/header/modals/ModalAccountUnification.vue
@@ -30,6 +30,7 @@
           :selected-evm-address="selectedEvmAddress"
           :is-fetching-xc20-tokens="isFetchingXc20Tokens"
           :is-edit="false"
+          :is-busy="isLoading"
           :avatar="avatar"
           @next="updateSteps(transferXc20Tokens.length > 0 ? 4 : 5)"
           @on-select-nft="updateSteps(200)"
@@ -42,7 +43,10 @@
           :selected-evm-address="unifiedAccount.evmAddress"
           :is-fetching-xc20-tokens="false"
           :is-edit="true"
+          :is-busy="isLoading"
+          :avatar="avatar"
           @next="updateSteps(101)"
+          @on-select-nft="updateSteps(200)"
         />
       </div>
       <div v-else-if="currentStep === 4">
@@ -71,7 +75,7 @@
         <au-step6 />
       </div>
       <div v-else-if="currentStep === 200">
-        <select-nft :evm-address="selectedEvmAddress" @next="setAvatar" />
+        <select-nft :evm-address="selectedEvmAddress" :avatar-metadata="avatar" @next="setAvatar" />
       </div>
       <div v-else>
         <user-account
@@ -97,7 +101,6 @@ import AuStep4 from 'src/components/header/modals/account-unification/AuStep4.vu
 import AuStep5 from 'src/components/header/modals/account-unification/AuStep5.vue';
 import AuStep6 from 'src/components/header/modals/account-unification/AuStep6.vue';
 import SelectNft from './account-unification/SelectNft.vue';
-import { UnifiedAccount } from 'src/store/general/state';
 import { NftMetadata } from 'src/v2/models';
 
 export default defineComponent({
@@ -131,9 +134,6 @@ export default defineComponent({
     const isLoading = computed<boolean>(() => store.getters['general/isLoading']);
     const totalCost = ref<string>('');
     const avatar = ref<NftMetadata | undefined>(undefined);
-    const unifiedAccount = computed<UnifiedAccount>(
-      () => store.getters['general/getUnifiedAccount']
-    );
 
     const {
       selectedEvmAddress,
@@ -144,6 +144,7 @@ export default defineComponent({
       isLoadingDappStaking,
       accountName,
       isSendingXc20Tokens,
+      unifiedAccount,
       setAccountName,
       setWeb3,
       handleTransferXc20Tokens,
@@ -180,6 +181,10 @@ export default defineComponent({
 
     onMounted(async () => {
       totalCost.value = await getCost();
+
+      if (unifiedAccount.value?.avatarMetadata) {
+        avatar.value = unifiedAccount.value?.avatarMetadata;
+      }
     });
 
     onUnmounted(() => {
@@ -188,7 +193,7 @@ export default defineComponent({
 
     const setAvatar = async (nft: NftMetadata): Promise<void> => {
       avatar.value = nft;
-      await updateSteps(3);
+      await updateSteps(unifiedAccount.value ? 100 : 3);
     };
 
     const updateSteps = async (step: number): Promise<void> => {
@@ -207,9 +212,15 @@ export default defineComponent({
         }
       } else if (step === 101) {
         // Make a call to update unified account identity
-        await updateAccount(unifiedAccount.value.nativeAddress, accountName.value);
-        await checkIfUnified(unifiedAccount.value.nativeAddress);
-      } else if (step === 200) {
+        if (unifiedAccount.value) {
+          await updateAccount(
+            unifiedAccount.value.nativeAddress,
+            accountName.value,
+            unifiedAccount.value.avatarMetadata?.contractAddress,
+            unifiedAccount.value.avatarMetadata?.tokenId
+          );
+          await checkIfUnified(unifiedAccount.value?.nativeAddress);
+        }
       }
 
       currentStep.value = step;
diff --git a/src/components/header/modals/account-unification/AuIcon.vue b/src/components/header/modals/account-unification/AuIcon.vue
new file mode 100644
index 000000000..5d2068917
--- /dev/null
+++ b/src/components/header/modals/account-unification/AuIcon.vue
@@ -0,0 +1,35 @@
+<template>
+  <img
+    v-if="unifiedAccount?.avatarUrl"
+    :src="unifiedAccount?.avatarUrl"
+    class="text--account-name__icon"
+  />
+  <jazzicon
+    v-else
+    class="text--account-name__icon"
+    :address="unifiedAccount?.nativeAddress"
+    :diameter="32"
+  />
+</template>
+
+<script lang="ts">
+import { UnifiedAccount } from 'src/store/general/state';
+import { defineComponent, PropType } from 'vue';
+import Jazzicon from 'vue3-jazzicon/src/components';
+
+export default defineComponent({
+  components: { [Jazzicon.name]: Jazzicon },
+  props: {
+    unifiedAccount: {
+      type: Object as PropType<UnifiedAccount | undefined>,
+      required: true,
+    },
+  },
+
+  setup() {},
+});
+</script>
+
+<style lang="scss" scoped>
+@use 'src/components/header/styles/modal-account-unification.scss';
+</style>
diff --git a/src/components/header/modals/account-unification/AuStep3.vue b/src/components/header/modals/account-unification/AuStep3.vue
index 822b7c0af..d68ff835d 100644
--- a/src/components/header/modals/account-unification/AuStep3.vue
+++ b/src/components/header/modals/account-unification/AuStep3.vue
@@ -41,7 +41,7 @@
     <div>
       <astar-button
         class="btn"
-        :disabled="accountName === '' || isFetchingXc20Tokens"
+        :disabled="accountName === '' || isFetchingXc20Tokens || isBusy"
         @click="next()"
         >{{ isEdit ? $t('wallet.unifiedAccount.save') : $t('next') }}</astar-button
       >
@@ -74,6 +74,10 @@ export default defineComponent({
       type: Boolean,
       required: true,
     },
+    isBusy: {
+      type: Boolean,
+      required: true,
+    },
     isEdit: {
       type: Boolean,
       default: false,
diff --git a/src/components/header/modals/account-unification/SelectNft.vue b/src/components/header/modals/account-unification/SelectNft.vue
index 94a881421..0bcc5433e 100644
--- a/src/components/header/modals/account-unification/SelectNft.vue
+++ b/src/components/header/modals/account-unification/SelectNft.vue
@@ -10,10 +10,10 @@
       >
         <img :src="nft.image" :alt="nft.name" />
       </div>
-      <div v-if="ownedNfts.length === 0 && !isBusy" class="item">
-        You don't have NFTs minted at the moment. When you mint some you will be able to update your
-        unified account with a NFT. For the moment default icon will be used.
-      </div>
+    </div>
+    <div v-if="ownedNfts.length === 0 && !isBusy" class="item">
+      You don't have NFTs minted at the moment. When you mint some you will be able to update your
+      unified account with a NFT. For the moment default icon will be used.
     </div>
 
     <!-- Action -->
@@ -25,7 +25,8 @@
 
 <script lang="ts">
 import { useNft } from 'src/hooks/useNft';
-import { defineComponent, onMounted, ref } from 'vue';
+import { NftMetadata } from 'src/v2/models';
+import { defineComponent, onMounted, ref, PropType, watch } from 'vue';
 
 export default defineComponent({
   components: {},
@@ -34,6 +35,10 @@ export default defineComponent({
       type: String,
       required: true,
     },
+    avatarMetadata: {
+      type: Object as PropType<NftMetadata | undefined>,
+      default: undefined,
+    },
   },
   emits: ['next'],
   setup(props, { emit }) {
@@ -52,6 +57,14 @@ export default defineComponent({
       getOwnedNfts(props.evmAddress);
     });
 
+    watch([ownedNfts], () => {
+      selectedIndex.value = ownedNfts.value.findIndex(
+        (nft) =>
+          nft.contractAddress === props.avatarMetadata?.contractAddress &&
+          nft.tokenId === props.avatarMetadata?.tokenId
+      );
+    });
+
     return {
       ownedNfts,
       selectedIndex,
diff --git a/src/components/header/modals/account-unification/UserAccount.vue b/src/components/header/modals/account-unification/UserAccount.vue
index 22a497eb8..4c4d5a00c 100644
--- a/src/components/header/modals/account-unification/UserAccount.vue
+++ b/src/components/header/modals/account-unification/UserAccount.vue
@@ -3,11 +3,7 @@
     <!-- unified -->
     <div v-if="isAccountUnified">
       <div class="text--account-name">
-        <jazzicon
-          class="text--account-name__icon"
-          :address="unifiedAccount?.nativeAddress"
-          :diameter="32"
-        />
+        <au-icon :unified-account="unifiedAccount" />
         <div>{{ unifiedAccount?.name }}</div>
       </div>
       <div class="box--wallet-list">
@@ -141,18 +137,17 @@
 
 <script lang="ts">
 import { useStore } from 'src/store';
-import { computed, defineComponent, ref } from 'vue';
+import { computed, defineComponent } from 'vue';
 import { useAccount, useWalletIcon, useNetworkInfo, useAccountUnification } from 'src/hooks';
 import { getShortenAddress } from '@astar-network/astar-sdk-core';
 import copy from 'copy-to-clipboard';
 import { useI18n } from 'vue-i18n';
 import { providerEndpoints } from 'src/config/chainEndpoints';
 import Help from 'src/components/header/modals/account-unification/Help.vue';
-import { UnifiedAccount } from 'src/store/general/state';
-import Jazzicon from 'vue3-jazzicon/src/components';
+import AuIcon from './AuIcon.vue';
 
 export default defineComponent({
-  components: { Help, [Jazzicon.name]: Jazzicon },
+  components: { Help, AuIcon },
   props: {
     setAccountName: {
       type: Function,
@@ -170,12 +165,9 @@ export default defineComponent({
     const { currentAccount, currentAccountName } = useAccount();
     const { t } = useI18n();
     const { currentNetworkIdx } = useNetworkInfo();
+    const { unifiedAccount, isAccountUnified } = useAccountUnification();
 
     const isH160 = computed<boolean>(() => store.getters['general/isH160Formatted']);
-    const unifiedAccount = computed<UnifiedAccount | undefined>(
-      () => store.getters['general/getUnifiedAccount']
-    );
-    const isAccountUnified = computed<boolean>(() => unifiedAccount.value !== undefined);
     const walletIcons = {
       substrate: require('/src/assets/img/logo-polkadot-js.png'),
       evm: require('/src/assets/img/ethereum.png'),
diff --git a/src/components/header/styles/modal-account-unification.scss b/src/components/header/styles/modal-account-unification.scss
index 0edecee6e..feb436358 100644
--- a/src/components/header/styles/modal-account-unification.scss
+++ b/src/components/header/styles/modal-account-unification.scss
@@ -39,14 +39,15 @@
   line-height: 24px;
   font-weight: 700;
   margin-bottom: 8px;
-  .text--account-name__icon {
-    margin-right: 12px;
-    height: 32px;
-    width: 32px;
-    flex-shrink: 0;
-    border-radius: 9999px;
-    object-fit: cover;
-  }
+}
+
+.text--account-name__icon {
+  margin-right: 6px;
+  height: 32px;
+  width: 32px;
+  flex-shrink: 0;
+  border-radius: 9999px;
+  object-fit: cover;
 }
 
 .box--wallet-list {
diff --git a/src/hooks/useAccount.ts b/src/hooks/useAccount.ts
index c795eb2b9..19a528779 100644
--- a/src/hooks/useAccount.ts
+++ b/src/hooks/useAccount.ts
@@ -14,6 +14,7 @@ import { useNetworkInfo } from './useNetworkInfo';
 import { endpointKey } from 'src/config/chainEndpoints';
 import { INftRepository } from 'src/v2/repositories';
 import { useNft } from './useNft';
+import { NftMetadata } from 'src/v2/models';
 
 export const ETHEREUM_EXTENSION = 'Ethereum Extension';
 
@@ -23,7 +24,7 @@ const DELAY = 100;
 export const useAccount = () => {
   const store = useStore();
   const { getProxiedUrl } = useNft();
-  const { currentNetworkIdx } = useNetworkInfo();
+  const { currentNetworkIdx, currentNetworkName } = useNetworkInfo();
   const multisig = ref<Multisig>();
 
   const isH160Formatted = computed(() => store.getters['general/isH160Formatted']);
@@ -89,11 +90,13 @@ export const useAccount = () => {
       const name = identity?.display || '';
 
       let avatarUrl: string | undefined;
+      let nft: NftMetadata | undefined;
+
       const avatarContractAddress = identity?.getAvatarContractAddress();
       const avatarTokenId = identity?.getAvatarTokenId();
       if (avatarContractAddress && avatarTokenId) {
-        const nft = await nftRepository.getNftMetadata(
-          'astar', // TODO replace with currentNetworkName.value.toLowerCase(),
+        nft = await nftRepository.getNftMetadata(
+          currentNetworkName.value.toLowerCase(),
           avatarContractAddress,
           avatarTokenId
         );
@@ -109,6 +112,7 @@ export const useAccount = () => {
           evmAddress: address,
           name,
           avatarUrl,
+          avatarMetadata: { ...nft, image: avatarUrl },
         });
       } else {
         store.commit('general/setUnifiedAccount', {
@@ -116,6 +120,7 @@ export const useAccount = () => {
           evmAddress: mapped,
           name,
           avatarUrl,
+          avatarMetadata: { ...nft, image: avatarUrl },
         });
       }
     } else {
diff --git a/src/hooks/useNft.ts b/src/hooks/useNft.ts
index 71a460e62..c67111c6a 100644
--- a/src/hooks/useNft.ts
+++ b/src/hooks/useNft.ts
@@ -18,7 +18,7 @@ export function useNft() {
     try {
       isBusy.value = true;
       const nfts = await nftRepository.getOwnedTokens(
-        'astar', //TODO currentNetworkName.value.toLowerCase(),
+        currentNetworkName.value.toLowerCase(),
         ownerAddress
       );
 
diff --git a/src/hooks/wallet/useAccountUnification.ts b/src/hooks/wallet/useAccountUnification.ts
index 51a76ff06..57a530749 100644
--- a/src/hooks/wallet/useAccountUnification.ts
+++ b/src/hooks/wallet/useAccountUnification.ts
@@ -34,6 +34,7 @@ import Web3 from 'web3';
 import { AbiItem } from 'web3-utils';
 import { useNetworkInfo } from '../useNetworkInfo';
 import { IIdentityRepository } from 'src/v2/repositories';
+import { UnifiedAccount } from 'src/store/general/state';
 
 const provider = get(window, 'ethereum');
 
@@ -69,6 +70,11 @@ export const useAccountUnification = () => {
   const xcmAssets = computed<XcmAssets>(() => store.getters['assets/getAllAssets']);
   const gas = computed<GasTip>(() => store.getters['general/getGas']);
 
+  const unifiedAccount = computed<UnifiedAccount | undefined>(
+    () => store.getters['general/getUnifiedAccount']
+  );
+  const isAccountUnified = computed<boolean>(() => unifiedAccount.value !== undefined);
+
   const setAccountName = (event: any) => {
     accountName.value = typeof event === 'string' ? event : event.target.value;
   };
@@ -340,10 +346,17 @@ export const useAccountUnification = () => {
     );
   };
 
-  const updateAccount = async (nativeAddress: string, accountName: string): Promise<void> => {
-    // TODO update avatar also
+  const updateAccount = async (
+    nativeAddress: string,
+    accountName: string,
+    avatarContractAddress?: string,
+    avatarTokenId?: string
+  ): Promise<void> => {
+    const identity = new IdentityData(accountName, []);
+    identity.additional?.push({ avatarNftAddres: avatarContractAddress! });
+    identity.additional?.push({ avatarNftId: avatarTokenId! });
     const identityService = container.get<IIdentityService>(Symbols.IdentityService);
-    await identityService.setIdentity(nativeAddress, new IdentityData(accountName));
+    await identityService.setIdentity(nativeAddress, identity);
   };
 
   const getCost = async (): Promise<string> => {
@@ -369,6 +382,8 @@ export const useAccountUnification = () => {
     isLoadingDappStaking,
     accountName,
     isSendingXc20Tokens,
+    unifiedAccount,
+    isAccountUnified,
     setAccountName,
     setWeb3,
     handleTransferXc20Tokens,
diff --git a/src/store/general/state.ts b/src/store/general/state.ts
index 858a5564b..6f1e046a6 100644
--- a/src/store/general/state.ts
+++ b/src/store/general/state.ts
@@ -2,6 +2,7 @@ import { GasTip } from '@astar-network/astar-sdk-core';
 import type { Extensions } from 'src/hooks/useMetaExtensions';
 import { endpointKey } from 'src/config/chainEndpoints';
 import { LOCAL_STORAGE } from 'src/config/localStorage';
+import { NftMetadata } from 'src/v2/models';
 
 export type SubstrateAccount = {
   address: string;
@@ -35,6 +36,7 @@ export type UnifiedAccount = {
   evmAddress: string;
   name: string;
   avatarUrl?: string;
+  avatarMetadata?: NftMetadata;
 };
 
 export type ConnectionType = 'connected' | 'connecting' | 'offline';

From 305c8822af75ce9242a475fd044a6038b31607b4 Mon Sep 17 00:00:00 2001
From: Bobo <bobo.kovacevic@gmail.com>
Date: Mon, 16 Oct 2023 12:00:01 +0200
Subject: [PATCH 05/16] Removed Bluez url

---
 src/v2/repositories/implementations/NftRepository.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/v2/repositories/implementations/NftRepository.ts b/src/v2/repositories/implementations/NftRepository.ts
index f51d2a96c..2b217ac03 100644
--- a/src/v2/repositories/implementations/NftRepository.ts
+++ b/src/v2/repositories/implementations/NftRepository.ts
@@ -7,8 +7,6 @@ import { TOKEN_API_URL } from '@astar-network/astar-sdk-core';
 
 @injectable()
 export class NftRepository implements INftRepository {
-  private readonly baseUrl = 'https://api.bluez.app/api/nft/v3/API_KEY';
-
   public async getOwnedTokens(network: string, ownerAddress: string): Promise<NftMetadata[]> {
     const ownedTokensUrl = `${TOKEN_API_URL}/v1/${network}/nft/owned/${ownerAddress}?pageKey=1&pageSize=100`;
     const result = await axios.get(ownedTokensUrl);

From 73bc1b838045dc56f771cf67d08366fa5b0a5226 Mon Sep 17 00:00:00 2001
From: Bobo <bobo.kovacevic@gmail.com>
Date: Mon, 16 Oct 2023 13:51:16 +0200
Subject: [PATCH 06/16] Code cleanup and refactoring

---
 .../header/modals/ModalAccountUnification.vue | 10 ++++---
 src/hooks/useNft.ts                           |  6 -----
 src/hooks/wallet/useAccountUnification.ts     |  8 +++---
 src/v2/services/IIdentityService.ts           |  5 ++++
 .../AccountUnificationService.ts              | 26 ++++---------------
 .../implementations/IdentityService.ts        | 20 +++++++++++++-
 6 files changed, 40 insertions(+), 35 deletions(-)

diff --git a/src/components/header/modals/ModalAccountUnification.vue b/src/components/header/modals/ModalAccountUnification.vue
index f17f003e9..8274f7be8 100644
--- a/src/components/header/modals/ModalAccountUnification.vue
+++ b/src/components/header/modals/ModalAccountUnification.vue
@@ -75,7 +75,11 @@
         <au-step6 />
       </div>
       <div v-else-if="currentStep === 200">
-        <select-nft :evm-address="selectedEvmAddress" :avatar-metadata="avatar" @next="setAvatar" />
+        <select-nft
+          :evm-address="unifiedAccount ? unifiedAccount.evmAddress : selectedEvmAddress"
+          :avatar-metadata="avatar"
+          @next="setAvatar"
+        />
       </div>
       <div v-else>
         <user-account
@@ -216,8 +220,8 @@ export default defineComponent({
           await updateAccount(
             unifiedAccount.value.nativeAddress,
             accountName.value,
-            unifiedAccount.value.avatarMetadata?.contractAddress,
-            unifiedAccount.value.avatarMetadata?.tokenId
+            avatar.value?.contractAddress,
+            avatar.value?.tokenId
           );
           await checkIfUnified(unifiedAccount.value?.nativeAddress);
         }
diff --git a/src/hooks/useNft.ts b/src/hooks/useNft.ts
index c67111c6a..247995958 100644
--- a/src/hooks/useNft.ts
+++ b/src/hooks/useNft.ts
@@ -13,8 +13,6 @@ export function useNft() {
   const getOwnedNfts = async (ownerAddress: string): Promise<void> => {
     const nftRepository = container.get<INftRepository>(Symbols.NftRepository);
 
-    ownerAddress = '0xe42A2ADF3BEe1c195f4D72410421ad7908388A6a'; // TODO: remove this line
-
     try {
       isBusy.value = true;
       const nfts = await nftRepository.getOwnedTokens(
@@ -27,10 +25,6 @@ export function useNft() {
         nft.image = getProxiedUrl(nft.image);
         return nft;
       });
-
-      for (let i = 0; i < 3; i++) {
-        ownedNfts.value.push(...ownedNfts.value);
-      }
     } finally {
       isBusy.value = false;
     }
diff --git a/src/hooks/wallet/useAccountUnification.ts b/src/hooks/wallet/useAccountUnification.ts
index 57a530749..cf551eca9 100644
--- a/src/hooks/wallet/useAccountUnification.ts
+++ b/src/hooks/wallet/useAccountUnification.ts
@@ -352,11 +352,11 @@ export const useAccountUnification = () => {
     avatarContractAddress?: string,
     avatarTokenId?: string
   ): Promise<void> => {
-    const identity = new IdentityData(accountName, []);
-    identity.additional?.push({ avatarNftAddres: avatarContractAddress! });
-    identity.additional?.push({ avatarNftId: avatarTokenId! });
     const identityService = container.get<IIdentityService>(Symbols.IdentityService);
-    await identityService.setIdentity(nativeAddress, identity);
+    await identityService.setIdentity(
+      nativeAddress,
+      identityService.createIdentityData(accountName, avatarContractAddress, avatarTokenId)
+    );
   };
 
   const getCost = async (): Promise<string> => {
diff --git a/src/v2/services/IIdentityService.ts b/src/v2/services/IIdentityService.ts
index e59c69dad..43af7f81f 100644
--- a/src/v2/services/IIdentityService.ts
+++ b/src/v2/services/IIdentityService.ts
@@ -2,4 +2,9 @@ import { IdentityData } from '../models';
 
 export interface IIdentityService {
   setIdentity(address: string, data: IdentityData): Promise<void>;
+  createIdentityData(
+    display: string,
+    avatarNftAddress?: string,
+    avatarNftId?: string
+  ): IdentityData;
 }
diff --git a/src/v2/services/implementations/AccountUnificationService.ts b/src/v2/services/implementations/AccountUnificationService.ts
index 28b0a2fa5..c7edf23eb 100644
--- a/src/v2/services/implementations/AccountUnificationService.ts
+++ b/src/v2/services/implementations/AccountUnificationService.ts
@@ -5,6 +5,7 @@ import {
   WalletType,
   IAccountUnificationService,
   IGasPriceProvider,
+  IIdentityService,
 } from 'src/v2/services';
 import {
   IAccountUnificationRepository,
@@ -12,9 +13,8 @@ import {
   ISystemRepository,
 } from 'src/v2/repositories';
 import { decodeAddress } from '@polkadot/util-crypto';
-import { ExtrinsicStatusMessage, IEventAggregator } from 'src/v2/messaging';
+import { IEventAggregator } from 'src/v2/messaging';
 import { Guard } from 'src/v2/common';
-import { IdentityData } from 'src/v2/models';
 import { MetamaskWalletService } from './MetamaskWalletService';
 
 @injectable()
@@ -27,7 +27,8 @@ export class AccountUnificationService implements IAccountUnificationService {
     private unificationRepo: IAccountUnificationRepository,
     @inject(Symbols.EventAggregator) private eventAggregator: IEventAggregator,
     @inject(Symbols.EthCallRepository) private ethCallRepository: IEthCallRepository,
-    @inject(Symbols.GasPriceProvider) private gasPriceProvider: IGasPriceProvider
+    @inject(Symbols.GasPriceProvider) private gasPriceProvider: IGasPriceProvider,
+    @inject(Symbols.IdentityService) private identityService: IIdentityService
   ) {}
 
   public async unifyAccounts(
@@ -72,7 +73,7 @@ export class AccountUnificationService implements IAccountUnificationService {
         nativeAddress,
         evmAddress,
         signedPayload,
-        this.createIdentityData(accountName, avatarNftAddress, avatarNftId)
+        this.identityService.createIdentityData(accountName, avatarNftAddress, avatarNftId)
       );
       const polkadotWallet = this.walletFactory(WalletType.Polkadot);
 
@@ -98,21 +99,4 @@ export class AccountUnificationService implements IAccountUnificationService {
 
     return await this.unificationRepo.getMappedEvmAddress(nativeAddress);
   }
-
-  private createIdentityData(
-    display: string,
-    avatarNftAddress?: string,
-    avatarNftId?: string
-  ): IdentityData {
-    const data = new IdentityData(display);
-
-    if (avatarNftAddress && avatarNftId) {
-      data.additional = [
-        { key: 'avatarNftAddress', value: avatarNftAddress },
-        { key: 'avatarNftId', value: avatarNftId },
-      ];
-    }
-
-    return data;
-  }
 }
diff --git a/src/v2/services/implementations/IdentityService.ts b/src/v2/services/implementations/IdentityService.ts
index 0114defde..1a4db6616 100644
--- a/src/v2/services/implementations/IdentityService.ts
+++ b/src/v2/services/implementations/IdentityService.ts
@@ -3,9 +3,10 @@ import { IdentityData } from 'src/v2/models';
 import { Symbols } from 'src/v2/symbols';
 import { IWalletService } from '../IWalletService';
 import { IIdentityRepository } from 'src/v2/repositories';
+import { IIdentityService } from '../IIdentityService';
 
 @injectable()
-export class IdentityService {
+export class IdentityService implements IIdentityService {
   constructor(
     @inject(Symbols.WalletFactory) readonly walletFactory: () => IWalletService,
     @inject(Symbols.IdentityRepository) readonly identityRepository: IIdentityRepository
@@ -19,4 +20,21 @@ export class IdentityService {
       senderAddress: address,
     });
   }
+
+  public createIdentityData(
+    display: string,
+    avatarNftAddress?: string,
+    avatarNftId?: string
+  ): IdentityData {
+    const data = new IdentityData(display);
+
+    if (avatarNftAddress && avatarNftId) {
+      data.additional = [
+        { key: 'avatarNftAddress', value: avatarNftAddress },
+        { key: 'avatarNftId', value: avatarNftId },
+      ];
+    }
+
+    return data;
+  }
 }

From 9aa84a10221c2b6ec68a396deaddf2f34e3254a1 Mon Sep 17 00:00:00 2001
From: Bobo <bobo.kovacevic@gmail.com>
Date: Mon, 16 Oct 2023 15:38:40 +0200
Subject: [PATCH 07/16] Show avatar on unification overview

---
 src/components/assets/Account.vue             |  6 ++++-
 .../header/modals/ModalAccountUnification.vue |  1 +
 .../modals/account-unification/AuIcon.vue     | 25 ++++++++-----------
 .../modals/account-unification/AuStep5.vue    | 15 ++++++++---
 .../account-unification/UserAccount.vue       |  5 +++-
 5 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/src/components/assets/Account.vue b/src/components/assets/Account.vue
index e807d9a99..292f0ea47 100644
--- a/src/components/assets/Account.vue
+++ b/src/components/assets/Account.vue
@@ -15,7 +15,11 @@
     <div class="container">
       <div class="row--details">
         <div class="column-account-name">
-          <au-icon v-if="isAccountUnified" :unified-account="unifiedAccount" />
+          <au-icon
+            v-if="isAccountUnified"
+            :native-address="unifiedAccount?.nativeAddress"
+            :icon-url="unifiedAccount?.avatarUrl"
+          />
           <img
             v-else-if="iconWallet"
             width="24"
diff --git a/src/components/header/modals/ModalAccountUnification.vue b/src/components/header/modals/ModalAccountUnification.vue
index 8274f7be8..f710eb174 100644
--- a/src/components/header/modals/ModalAccountUnification.vue
+++ b/src/components/header/modals/ModalAccountUnification.vue
@@ -67,6 +67,7 @@
         <au-step5
           :account-name="accountName"
           :selected-evm-address="selectedEvmAddress"
+          :avatar-url="avatar?.image ?? ''"
           :is-busy="isLoading"
           @next="updateSteps(6)"
         />
diff --git a/src/components/header/modals/account-unification/AuIcon.vue b/src/components/header/modals/account-unification/AuIcon.vue
index 5d2068917..e917eb76d 100644
--- a/src/components/header/modals/account-unification/AuIcon.vue
+++ b/src/components/header/modals/account-unification/AuIcon.vue
@@ -1,15 +1,6 @@
 <template>
-  <img
-    v-if="unifiedAccount?.avatarUrl"
-    :src="unifiedAccount?.avatarUrl"
-    class="text--account-name__icon"
-  />
-  <jazzicon
-    v-else
-    class="text--account-name__icon"
-    :address="unifiedAccount?.nativeAddress"
-    :diameter="32"
-  />
+  <img v-if="iconUrl" :src="iconUrl" class="text--account-name__icon" />
+  <jazzicon v-else class="text--account-name__icon" :address="nativeAddress" :diameter="32" />
 </template>
 
 <script lang="ts">
@@ -20,9 +11,15 @@ import Jazzicon from 'vue3-jazzicon/src/components';
 export default defineComponent({
   components: { [Jazzicon.name]: Jazzicon },
   props: {
-    unifiedAccount: {
-      type: Object as PropType<UnifiedAccount | undefined>,
-      required: true,
+    nativeAddress: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    iconUrl: {
+      type: String,
+      required: false,
+      default: undefined,
     },
   },
 
diff --git a/src/components/header/modals/account-unification/AuStep5.vue b/src/components/header/modals/account-unification/AuStep5.vue
index 964132484..36dad639c 100644
--- a/src/components/header/modals/account-unification/AuStep5.vue
+++ b/src/components/header/modals/account-unification/AuStep5.vue
@@ -6,8 +6,11 @@
 
     <div class="wrapper--unified-account">
       <div>
-        <!-- Todo: check the account's NFT image -->
-        <jazzicon :address="currentAccount" :diameter="80" class="icon--unified-account" />
+        <au-icon
+          :native-address="currentAccount"
+          :icon-url="avatarUrl"
+          class="icon--unified-account"
+        />
       </div>
       <div class="text--unified-account">{{ accountName }}</div>
       <div class="box--wallet-list">
@@ -48,10 +51,10 @@
 import { useAccount, useWalletIcon } from 'src/hooks';
 import { defineComponent, ref } from 'vue';
 import { getShortenAddress } from '@astar-network/astar-sdk-core';
-import Jazzicon from 'vue3-jazzicon/src/components';
+import AuIcon from './AuIcon.vue';
 
 export default defineComponent({
-  components: { [Jazzicon.name]: Jazzicon },
+  components: { AuIcon },
   props: {
     selectedEvmAddress: {
       type: String,
@@ -61,6 +64,10 @@ export default defineComponent({
       type: String,
       required: true,
     },
+    avatarUrl: {
+      type: String,
+      required: true,
+    },
     isBusy: {
       type: Boolean,
       required: true,
diff --git a/src/components/header/modals/account-unification/UserAccount.vue b/src/components/header/modals/account-unification/UserAccount.vue
index 4c4d5a00c..8d8eb8b48 100644
--- a/src/components/header/modals/account-unification/UserAccount.vue
+++ b/src/components/header/modals/account-unification/UserAccount.vue
@@ -3,7 +3,10 @@
     <!-- unified -->
     <div v-if="isAccountUnified">
       <div class="text--account-name">
-        <au-icon :unified-account="unifiedAccount" />
+        <au-icon
+          :native-address="unifiedAccount?.nativeAddress"
+          :icon-url="unifiedAccount?.avatarUrl"
+        />
         <div>{{ unifiedAccount?.name }}</div>
       </div>
       <div class="box--wallet-list">

From 8e8b492da7a078960d34fc930487a13b62d4ae5e Mon Sep 17 00:00:00 2001
From: Bobo <bobo.kovacevic@gmail.com>
Date: Fri, 13 Oct 2023 08:27:54 +0200
Subject: [PATCH 08/16] Fix for provider not set or invalid error (#970)

* Fix for provider not set or invalid error

* Don't use gas station on Shibuya

* fix: disabled transaction speed ui for Shibuya EVM (#971)

---------

Co-authored-by: impelcrypto <92044428+impelcrypto@users.noreply.github.com>
---
 src/components/assets/transfer/LocalTransfer.vue    |  2 +-
 src/config/web3/index.ts                            |  1 +
 src/config/web3/utils/index.ts                      |  9 +++++++++
 src/hooks/transfer/useTokenTransfer.ts              |  4 ++--
 src/hooks/useGasPrice.ts                            | 13 +++++++++++--
 src/v2/app.container.ts                             |  4 ++++
 .../implementations/AssetsRepository.ts             | 10 +---------
 .../implementations/MetamaskWalletService.ts        | 11 ++++++++---
 8 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/src/components/assets/transfer/LocalTransfer.vue b/src/components/assets/transfer/LocalTransfer.vue
index 0c0c81834..e2be43a79 100644
--- a/src/components/assets/transfer/LocalTransfer.vue
+++ b/src/components/assets/transfer/LocalTransfer.vue
@@ -102,7 +102,7 @@
         </div>
       </div>
 
-      <div class="separator" />
+      <div v-if="isEnableSpeedConfiguration" class="separator" />
 
       <speed-configuration
         v-if="isEnableSpeedConfiguration"
diff --git a/src/config/web3/index.ts b/src/config/web3/index.ts
index 973873cb4..96457121d 100644
--- a/src/config/web3/index.ts
+++ b/src/config/web3/index.ts
@@ -9,6 +9,7 @@ export {
   getTokenExplorer,
   fetchErc20TokenInfo,
   getTokenDetails,
+  checkIsSetGasByWallet,
 } from 'src/config/web3/utils';
 
 export { contractInstance, Staking } from 'src/config/web3/contracts';
diff --git a/src/config/web3/utils/index.ts b/src/config/web3/utils/index.ts
index bad07f3f2..f519eae92 100644
--- a/src/config/web3/utils/index.ts
+++ b/src/config/web3/utils/index.ts
@@ -221,3 +221,12 @@ export const fetchErc20TokenInfo = async ({
     return null;
   }
 };
+
+export const checkIsSetGasByWallet = (chainId: EVM): boolean => {
+  switch (chainId) {
+    case EVM.SHIBUYA_TESTNET:
+      return true;
+    default:
+      return false;
+  }
+};
diff --git a/src/hooks/transfer/useTokenTransfer.ts b/src/hooks/transfer/useTokenTransfer.ts
index 5fd364bf6..7bc62da7e 100644
--- a/src/hooks/transfer/useTokenTransfer.ts
+++ b/src/hooks/transfer/useTokenTransfer.ts
@@ -126,13 +126,13 @@ export function useTokenTransfer(selectedToken: Ref<Asset>) {
     if (isLoading.value) return;
     const transferAmtRef = Number(transferAmt.value);
     try {
-      if (transferAmtRef > fromAddressBalance.value) {
+      if (transferAmtRef && transferAmtRef > fromAddressBalance.value) {
         errMsg.value = t('warning.insufficientBalance', {
           token: selectedToken.value.metadata.symbol,
         });
       } else if (toAddress.value && !isValidDestAddress.value) {
         errMsg.value = 'warning.inputtedInvalidDestAddress';
-      } else if (!transferableBalance.value && !isH160.value) {
+      } else if (transferAmtRef && !transferableBalance.value && !isH160.value) {
         errMsg.value = t('warning.insufficientBalance', {
           token: nativeTokenSymbol.value,
         });
diff --git a/src/hooks/useGasPrice.ts b/src/hooks/useGasPrice.ts
index b8bfcbac1..88957fc27 100644
--- a/src/hooks/useGasPrice.ts
+++ b/src/hooks/useGasPrice.ts
@@ -30,6 +30,8 @@ export const useGasPrice = (isFetch = false) => {
   const network = computed<string>(() => {
     return isMainnet ? currentNetworkName.value.toLowerCase() : 'shibuya';
   });
+  const isH160 = computed<boolean>(() => store.getters['general/isH160Formatted']);
+  const isShibuyaEvm = computed<boolean>(() => isH160.value && network.value === 'shibuya');
 
   const setSelectedGas = (speed: Speed): void => {
     selectedGas.value = {
@@ -86,14 +88,21 @@ export const useGasPrice = (isFetch = false) => {
     return (
       currentWallet !== SupportWallet.TalismanEvm &&
       currentWallet !== SupportWallet.SubWalletEvm &&
-      currentWallet !== SupportWallet.OneKeyEvm
+      currentWallet !== SupportWallet.OneKeyEvm &&
+      !isShibuyaEvm.value
     );
   });
 
   watch(
     [network, $web3],
     async () => {
-      if (isFetch && network.value && !gas.value && $web3.value) {
+      if (
+        isFetch &&
+        network.value &&
+        !gas.value &&
+        $web3.value &&
+        isEnableSpeedConfiguration.value
+      ) {
         // console.info('gas price', network.value, gas.value);
         await dispatchGasPrice(network.value);
       }
diff --git a/src/v2/app.container.ts b/src/v2/app.container.ts
index 163f2bd09..940687064 100644
--- a/src/v2/app.container.ts
+++ b/src/v2/app.container.ts
@@ -79,6 +79,10 @@ export function setCurrentWallet(
   currentWallet: string,
   isLockdrop: boolean
 ): void {
+  if (!currentWallet) {
+    return;
+  }
+
   currentWalletType = isEthWallet ? WalletType.Metamask : WalletType.Polkadot;
   currentWalletName = currentWallet;
   isLockdropAccount = isLockdrop;
diff --git a/src/v2/repositories/implementations/AssetsRepository.ts b/src/v2/repositories/implementations/AssetsRepository.ts
index 1226ba9f3..933a4a94e 100644
--- a/src/v2/repositories/implementations/AssetsRepository.ts
+++ b/src/v2/repositories/implementations/AssetsRepository.ts
@@ -13,7 +13,7 @@ import { IAssetsRepository } from './../IAssetsRepository';
 import { BN } from '@polkadot/util';
 import { TransactionConfig } from 'web3-eth';
 import Web3 from 'web3';
-import { buildEvmAddress, getEvmGas } from '@astar-network/astar-sdk-core';
+import { buildEvmAddress } from '@astar-network/astar-sdk-core';
 import { AbiItem } from 'web3-utils';
 import ERC20_ABI from 'src/config/abi/ERC20.json';
 import { IGasPriceProvider } from 'src/v2/services';
@@ -44,14 +44,8 @@ export class AssetsRepository implements IAssetsRepository {
     web3: Web3;
   }): Promise<TransactionConfig> {
     const { contractAddress, senderAddress, toAddress, amount, decimals } = param;
-    const [nonce, gasPrice] = await Promise.all([
-      web3.eth.getTransactionCount(senderAddress),
-      getEvmGas(web3, this.gasPriceProvider.getGas().price),
-    ]);
     if (contractAddress === astarNativeTokenErcAddr) {
       return {
-        nonce,
-        gasPrice: web3.utils.toHex(gasPrice),
         from: senderAddress,
         to: toAddress,
         value: web3.utils.toWei(String(amount), 'ether'),
@@ -60,8 +54,6 @@ export class AssetsRepository implements IAssetsRepository {
       const contract = new web3.eth.Contract(ERC20_ABI as AbiItem[], contractAddress);
       const amt = ethers.utils.parseUnits(String(amount), decimals).toString();
       return {
-        nonce,
-        gasPrice: web3.utils.toHex(gasPrice),
         from: senderAddress,
         to: contractAddress,
         value: '0x0',
diff --git a/src/v2/services/implementations/MetamaskWalletService.ts b/src/v2/services/implementations/MetamaskWalletService.ts
index aa3ee13c6..8d7f324fd 100644
--- a/src/v2/services/implementations/MetamaskWalletService.ts
+++ b/src/v2/services/implementations/MetamaskWalletService.ts
@@ -18,6 +18,7 @@ import {
 import { WalletService } from 'src/v2/services/implementations';
 import { Symbols } from 'src/v2/symbols';
 import Web3 from 'web3';
+import { checkIsSetGasByWallet } from 'src/config/web3';
 
 @injectable()
 export class MetamaskWalletService extends WalletService implements IWalletService {
@@ -127,17 +128,21 @@ export class MetamaskWalletService extends WalletService implements IWalletServi
         web3.eth.getTransactionCount(from),
         getEvmGas(web3, this.gasPriceProvider.getGas().price),
       ]);
+
       const rawTx = {
         nonce,
-        gasPrice: web3.utils.toHex(gasPrice),
         from,
         to,
         value: value ? value : '0x0',
         data,
       };
-      const estimatedGas = await web3.eth.estimateGas(rawTx);
+
+      const connectedChainId = await web3.eth.net.getId();
+      const isSetGasByWallet = checkIsSetGasByWallet(connectedChainId);
+      const txParam = isSetGasByWallet ? rawTx : { ...rawTx, gasPrice: web3.utils.toHex(gasPrice) };
+      const estimatedGas = await web3.eth.estimateGas(txParam);
       const transactionHash = await web3.eth
-        .sendTransaction({ ...rawTx, gas: estimatedGas })
+        .sendTransaction({ ...txParam, gas: estimatedGas })
         .once('transactionHash', (transactionHash) => {
           this.eventAggregator.publish(new BusyMessage(true));
         })

From 2d23d3a6cec4d4f14d6c988e8286dff1458e585c Mon Sep 17 00:00:00 2001
From: Bobo <bobo.kovacevic@gmail.com>
Date: Fri, 13 Oct 2023 10:08:26 +0200
Subject: [PATCH 09/16] Lockdrop logic removed (#954)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Lockdrop logic removed

* more lockdrop removed (#957)

* fix: fetch dApps staking data after changing accounts (#955)

* fix: fetch staked dapps data for EVM wallets

* fix: clean up

* fix: position for page column

* Account unification (#925)

* Unification service skeleton

* Started with unify account implementation

* Unifiy account implemented - not working

* It works

* Error handling

* Mapped accounts getter functions

* Set identity logic (#931)

* Create and update identity

* Update identity works

* NFT metadata fetch

* Account unification batch call

* Comment

* Native asset transfer support for unified accounts (#938)

* Native token transfer

* Use unified SS50 for dApps staking

* getIdentity fix

* Update NFT repo to use Token API endpoints

* Update test call

* feat: added AccountUnification modal (#935)

* feat: added AccountUnification modal

* Add UI modals for account unification

* refactor: ModalConnectWallet

* Remove the wallet connect section on the user account modal

* Add type

* Add NFT select modal

* Add unify accounts icon button on the asset page

* Add dark theme, replace tailwind css to pure css

* remove body tag from style

* Replace rem to px

* Add styles for mobile screens

* Add static texts

* Adjust styles

* Update help

* feat: implemented logic in the ‘account unification’ modal (#936)

* feat: load the evm account from metamask

* feat: checks the staking info

* refactor: clean up

* feat: added close modal in step 2

* feat: removed account name input

* rollback: account name

* feat: added XC20 tokens which are required to transfer to unified account

* feat: updated 'accountName' logic

* feat: added jazzicon in Step 3

* adjust class naming rule

* clean up

* test: refactor useAccountUnification.ts

* fix: allow AU on local node

* test: refactor useAccountUnification.ts (2)

* test: refactor useAccountUnification.ts (3)

* Fix media query

* Use i18n

* Add help texts using i18n

---------

Co-authored-by: Ayumi Takahashi <ayumee528@gmail.com>

* Fix for reading staking data from UA (#942)

* Fix for reading staking data from UA

* Removed unnecessary store read

* Account unification call refactoring

* Adjust the checkbox position

* UA logic integration (#943)

* Basic integration implemented

* Disable submit button on action

* Rename from Step to AuStep

* use i18n

* add the emojis to i18 file

* feat: transfer XC20 tokens to the unified SS58 account (#944)

* feat: transfer XC20 tokens to unified SS58 account

* feat: transfer XC20 tokens to unified SS58 account (2)

* feat: added XCM tokens on shibuya

* feat: added XCM tokens on shibuya (2)

* refactor: clean up

* fix: updated receiving faucet account

* Accounts - show UA name and modal (#948)

* fix: account unification modals (#953)

* fix: connect MetaMask after users click connect button

* fix: updated words

* feat: added a check input for sending submit transaction

* fix: words

* fix: getMappedNativeAddress and getMappedEvmAddress functions

* Fix for breaking changes on Shibuya (#958)

* Moonfit added (#937) (#939)

* Uplift to the latest Quasar version (#940)

* feat: updated XCM with equilibrium to V3 (#946)

* fix: let space wrap and height grow for cards in banner (#947)

* let space wrap and height grow

* minimum width added, aligned bottom

* Remove lockdrop (#951)

* hotfix: update the hotfix branch (#920)

* fix: rollback

* fix: update ci yml files

* Lockdrop switch removed

* Removed toggleEvmWalletSchema

---------

Co-authored-by: impelcrypto <92044428+impelcrypto@users.noreply.github.com>

* fix: fetch dApps staking data after changing accounts (#955)

* fix: fetch staked dapps data for EVM wallets

* fix: clean up

* fix: position for page column

* Methods naming fix top match the latest runtime upgrade

---------

Co-authored-by: impelcrypto <92044428+impelcrypto@users.noreply.github.com>
Co-authored-by: Gregory Luneau <greg@astar.network>

* Display unification costs (#959)

* Display unification costs

* Limit account length

* fix: updated sending ERC20 tokens logic and displaying the destination balance for EVM address (considering deducting staked amount)

* fix: odd space issue

* Display and edit unified account (#963)

* Display unified account details

* Edit unified account

* Cleanup

* Update src/components/header/modals/account-unification/AuStep3.vue

Co-authored-by: impelcrypto <92044428+impelcrypto@users.noreply.github.com>

---------

Co-authored-by: impelcrypto <92044428+impelcrypto@users.noreply.github.com>

---------

Co-authored-by: impelcrypto <impelcrypto@gmail.com>
Co-authored-by: impelcrypto <92044428+impelcrypto@users.noreply.github.com>
Co-authored-by: Ayumi Takahashi <ayumee528@gmail.com>
Co-authored-by: Gregory Luneau <greg@astar.network>

* Fix for provider not set or invalid error (#970)

* Fix for provider not set or invalid error

* Don't use gas station on Shibuya

* fix: disabled transaction speed ui for Shibuya EVM (#971)

---------

Co-authored-by: impelcrypto <92044428+impelcrypto@users.noreply.github.com>

---------

Co-authored-by: Gregory Luneau <greg@astar.network>
Co-authored-by: impelcrypto <92044428+impelcrypto@users.noreply.github.com>
Co-authored-by: impelcrypto <impelcrypto@gmail.com>
Co-authored-by: Ayumi Takahashi <ayumee528@gmail.com>
---
 src/App.vue                                   |  4 +-
 src/components/assets/Account.vue             | 35 ---------
 .../assets/modals/ModalLockdropWarning.vue    | 78 -------------------
 src/components/assets/styles/account.scss     |  6 --
 .../assets/styles/modal-lockdrop-warning.scss | 65 ----------------
 src/config/chainEndpoints.ts                  |  6 +-
 src/i18n/en-US/index.ts                       | 14 ----
 src/i18n/fr/index.ts                          |  4 -
 src/i18n/it/index.ts                          |  5 +-
 src/i18n/ja/index.ts                          |  4 -
 src/i18n/kr/index.ts                          |  3 -
 src/i18n/pt/index.ts                          |  4 -
 src/i18n/zh-TW/index.ts                       |  1 -
 src/i18n/zh/index.ts                          |  1 -
 src/v2/app.container.ts                       | 13 +---
 15 files changed, 8 insertions(+), 235 deletions(-)
 delete mode 100644 src/components/assets/modals/ModalLockdropWarning.vue
 delete mode 100644 src/components/assets/styles/modal-lockdrop-warning.scss

diff --git a/src/App.vue b/src/App.vue
index 3ef8969f4..fbcd9c1c4 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -130,9 +130,7 @@ export default defineComponent({
 
     // Handle wallet change so we can inject proper wallet
     watch([isEthWallet, currentWallet, isH160, currentAccountName], () => {
-      // Todo: delete after we remove the lockdrop service
-      const isLockdropAccount = !isH160.value && currentAccountName.value === ETHEREUM_EXTENSION;
-      setCurrentWallet(isEthWallet.value, currentWallet.value, isLockdropAccount);
+      setCurrentWallet(isEthWallet.value, currentWallet.value);
     });
 
     const removeSplashScreen = () => {
diff --git a/src/components/assets/Account.vue b/src/components/assets/Account.vue
index 292f0ea47..5badf50ef 100644
--- a/src/components/assets/Account.vue
+++ b/src/components/assets/Account.vue
@@ -1,17 +1,5 @@
 <template>
   <div class="wrapper--account">
-    <div v-if="isLockdropAccount && !isH160" class="container--lockdrop-warning">
-      <div>
-        <span class="text--warning-bold">{{ $t('assets.inLockdropAccount') }}</span>
-      </div>
-      <ul class="row--warning-list">
-        <li class="text--warning">
-          {{ $t('assets.cantTransferToExcahges') }}
-        </li>
-        <li class="text--warning">{{ $t('assets.noHash') }}</li>
-      </ul>
-    </div>
-
     <div class="container">
       <div class="row--details">
         <div class="column-account-name">
@@ -94,11 +82,6 @@
       </div>
       <native-asset-list v-if="!isH160" />
     </div>
-    <modal-lockdrop-warning
-      v-if="isLockdropAccount && !isH160"
-      :is-modal="isModalLockdropWarning"
-      :handle-modal="handleModalLockdropWarning"
-    />
   </div>
 </template>
 <script lang="ts">
@@ -123,7 +106,6 @@ import { computed, defineComponent, ref, watch, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
 import NativeAssetList from 'src/components/assets/NativeAssetList.vue';
 import EvmNativeToken from 'src/components/assets/EvmNativeToken.vue';
-import ModalLockdropWarning from 'src/components/assets/modals/ModalLockdropWarning.vue';
 import { ETHEREUM_EXTENSION } from 'src/hooks';
 import { supportWalletObj } from 'src/config/wallets';
 import AuIcon from '../header/modals/account-unification/AuIcon.vue';
@@ -131,7 +113,6 @@ import AuIcon from '../header/modals/account-unification/AuIcon.vue';
 export default defineComponent({
   components: {
     NativeAssetList,
-    ModalLockdropWarning,
     EvmNativeToken,
     AuIcon,
   },
@@ -148,8 +129,6 @@ export default defineComponent({
   setup(props) {
     const balUsd = ref<number | null>(null);
     const isCheckingSignature = ref<boolean>(false);
-    const isLockdropAccount = ref<boolean>(false);
-    const isModalLockdropWarning = ref<boolean>(true);
     const {
       currentAccount,
       currentAccountName,
@@ -188,10 +167,6 @@ export default defineComponent({
       return multisig.value ? supportWalletObj[multisig.value.signatory.source].img : '';
     });
 
-    const handleModalLockdropWarning = ({ isOpen }: { isOpen: boolean }) => {
-      isModalLockdropWarning.value = isOpen;
-    };
-
     const copyAddress = () => {
       copy(currentAccount.value);
       store.dispatch('general/showAlertMsg', {
@@ -240,7 +215,6 @@ export default defineComponent({
       async () => {
         const apiRef = $api;
         if (!isEthWallet.value) {
-          isLockdropAccount.value = false;
           return;
         }
         if (
@@ -255,14 +229,8 @@ export default defineComponent({
           const ss58 = getEvmMappedSs58Address(currentAccount.value);
           if (!ss58) return;
           const { data } = await apiRef.query.system.account<FrameSystemAccountInfo>(ss58);
-          if (Number(data.free.toString()) > 0) {
-            isLockdropAccount.value = true;
-          } else {
-            isLockdropAccount.value = false;
-          }
         } catch (error: any) {
           console.error(error.message);
-          isLockdropAccount.value = false;
         }
       },
       { immediate: false }
@@ -278,18 +246,15 @@ export default defineComponent({
       isH160,
       isEthWallet,
       balUsd,
-      isLockdropAccount,
       isSkeleton,
       totalBal,
       ETHEREUM_EXTENSION,
       multisig,
       supportWalletObj,
       signatoryIconWallet,
-      isModalLockdropWarning,
       isAccountUnification,
       unifiedAccount,
       isAccountUnified,
-      handleModalLockdropWarning,
       getShortenAddress,
       copyAddress,
       showAccountUnificationModal,
diff --git a/src/components/assets/modals/ModalLockdropWarning.vue b/src/components/assets/modals/ModalLockdropWarning.vue
deleted file mode 100644
index dcf54a888..000000000
--- a/src/components/assets/modals/ModalLockdropWarning.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
-  <modal-wrapper
-    :is-modal-open="isModal"
-    title=""
-    :is-closing="isClosingModal"
-    :close-modal="closeModal"
-  >
-    <div class="wrapper--modal">
-      <div class="row--title">
-        <div class="icon--warning">
-          <astar-icon-warning size="40" />
-        </div>
-        <span>{{ $t('warning.warning') }}</span>
-      </div>
-      <div class="row--message">
-        <span class="text--message">{{ $t('assets.modals.lockdropWarning.message') }}</span>
-      </div>
-      <div class="box--list">
-        <li>
-          <span>
-            {{ $t('assets.modals.lockdropWarning.list1') }}
-          </span>
-        </li>
-        <li>
-          <span>
-            {{ $t('assets.modals.lockdropWarning.list2') }}
-          </span>
-        </li>
-      </div>
-      <div class="row--end-date">
-        <span>{{ $t('assets.modals.lockdropWarning.closeTime') }} </span>
-      </div>
-      <div class="wrapper__row--button">
-        <astar-button class="button--confirm" @click="closeModal">
-          {{ $t('assets.modals.lockdropWarning.gotIt') }}</astar-button
-        >
-      </div>
-    </div>
-  </modal-wrapper>
-</template>
-<script lang="ts">
-import { wait } from '@astar-network/astar-sdk-core';
-import { fadeDuration } from '@astar-network/astar-ui';
-import ModalWrapper from 'src/components/common/ModalWrapper.vue';
-import { defineComponent, ref } from 'vue';
-
-export default defineComponent({
-  components: { ModalWrapper },
-  props: {
-    isModal: {
-      type: Boolean,
-      required: true,
-    },
-    handleModal: {
-      type: Function,
-      required: true,
-    },
-  },
-  setup(props) {
-    const isClosingModal = ref<boolean>(false);
-    const closeModal = async (): Promise<void> => {
-      isClosingModal.value = true;
-      await wait(fadeDuration);
-      props.handleModal({ isOpen: false });
-      isClosingModal.value = false;
-    };
-
-    return {
-      closeModal,
-      isClosingModal,
-    };
-  },
-});
-</script>
-
-<style lang="scss" scoped>
-@use 'src/components/assets/styles/modal-lockdrop-warning.scss';
-</style>
diff --git a/src/components/assets/styles/account.scss b/src/components/assets/styles/account.scss
index e6f5f60a9..416f84489 100644
--- a/src/components/assets/styles/account.scss
+++ b/src/components/assets/styles/account.scss
@@ -127,12 +127,6 @@
   cursor: pointer;
 }
 
-.container--lockdrop-warning {
-  background: $warning-yellow;
-  border-radius: 6px;
-  padding: 16px 24px;
-}
-
 .text--warning-bold {
   color: $navy-1;
   font-weight: 700;
diff --git a/src/components/assets/styles/modal-lockdrop-warning.scss b/src/components/assets/styles/modal-lockdrop-warning.scss
deleted file mode 100644
index fff9e5b9b..000000000
--- a/src/components/assets/styles/modal-lockdrop-warning.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-@import 'src/css/quasar.variables.scss';
-
-.wrapper__row--button {
-  display: flex;
-  justify-content: center;
-}
-
-.button--confirm {
-  width: 344px;
-  font-size: 22px;
-  font-weight: 600;
-  height: 44px;
-  @media (min-width: $sm) {
-    width: 412px;
-  }
-}
-
-.row--title {
-  display: flex;
-  justify-content: center;
-  column-gap: 8px;
-  margin-bottom: 28px;
-  width: 100%;
-  color: $warning-yellow;
-  font-size: 32px;
-  font-weight: 700;
-}
-
-.box--list {
-  margin-bottom: 24px;
-  padding: 0px 14px;
-  @media (min-width: $sm) {
-    padding: 0;
-  }
-}
-
-.row--end-date {
-  width: 100%;
-  text-align: center;
-  padding: 24px;
-  background-color: $warning-yellow;
-  margin-bottom: 32px;
-  color: $navy-1;
-  font-weight: 800;
-  font-size: 20px;
-}
-
-.icon--warning {
-  margin-top: -4px;
-}
-
-.text--message {
-  font-weight: 600;
-}
-
-.row--message {
-  margin-bottom: 32px;
-  padding: 0px 14px;
-  @media (min-width: $sm) {
-    padding: 0;
-  }
-}
-
-.body--dark {
-}
diff --git a/src/config/chainEndpoints.ts b/src/config/chainEndpoints.ts
index fbe5cffbc..bc74e522d 100644
--- a/src/config/chainEndpoints.ts
+++ b/src/config/chainEndpoints.ts
@@ -39,7 +39,7 @@ export const providerEndpoints: ChainProvider[] = [
     info: 'Smart contract platform for decentralized applications (dapps) on the Polkadot network',
     endpoints: [
       { name: 'Astar', endpoint: 'wss://rpc.astar.network' },
-      // { name: 'Dwellir', endpoint: 'wss://astar-rpc.dwellir.com' },
+      { name: 'Dwellir', endpoint: 'wss://astar-rpc.dwellir.com' },
       { name: 'Blast', endpoint: 'wss://astar.public.blastapi.io' },
       { name: 'OnFinality', endpoint: 'wss://astar.api.onfinality.io/public-ws' },
       { name: 'RadiumBlock', endpoint: 'wss://astar.public.curie.radiumblock.co/ws' },
@@ -68,7 +68,7 @@ export const providerEndpoints: ChainProvider[] = [
     info: 'Smart contract platform for decentralized applications (dapps) on the Kusama network',
     endpoints: [
       { name: 'Shiden', endpoint: 'wss://rpc.shiden.astar.network' },
-      // { name: 'Dwellir', endpoint: 'wss://shiden-rpc.dwellir.com' },
+      { name: 'Dwellir', endpoint: 'wss://shiden-rpc.dwellir.com' },
       { name: 'Blast', endpoint: 'wss://shiden.public.blastapi.io' },
       { name: 'OnFinality', endpoint: 'wss://shiden.api.onfinality.io/public-ws' },
       { name: 'Light Client (experimental)', endpoint: 'light://substrate-connect/kusama/shiden' },
@@ -96,7 +96,7 @@ export const providerEndpoints: ChainProvider[] = [
     info: 'The test network of the layer 2 scaling blockchain',
     endpoints: [
       { name: 'Shibuya', endpoint: 'wss://rpc.shibuya.astar.network' },
-      // { name: 'Dwellir', endpoint: 'wss://shibuya-rpc.dwellir.com' },
+      { name: 'Dwellir', endpoint: 'wss://shibuya-rpc.dwellir.com' },
       { name: 'Blast', endpoint: 'wss://shibuya.public.blastapi.io/' },
       { name: 'Light Client (experimental)', endpoint: 'light://substrate-connect/tokyo/shibuya' },
     ],
diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
index 71ca21b7c..d0f1fcedd 100644
--- a/src/i18n/en-US/index.ts
+++ b/src/i18n/en-US/index.ts
@@ -94,7 +94,6 @@ export default {
     staking: 'Staking',
     contract: 'Contract',
     ecosystem: 'Ecosystem',
-    plasmLockdrop: 'Plasm Lockdrop',
     closeSidebar: 'Close sidebar',
     twitter: 'Twitter',
     telegram: 'Telegram',
@@ -440,7 +439,6 @@ export default {
     xvmAssets: 'XVM (Cross Virtual Machine) ERC-20 Assets',
     nativeAccount: 'Native Account',
     evmAccount: 'EVM Account',
-    switchToNative: 'Switch to Lockdrop',
     switchToEvm: 'Switch to EVM',
     totalBalance: 'Total Balance',
     transfer: 'Transfer',
@@ -460,8 +458,6 @@ export default {
     yourEvmDeposit: 'Your EVM deposit',
     yourVestingInfo: 'Your Vesting Info',
     yourStaking: 'Your Staking',
-    lockdropAccount: 'Lockdrop Account',
-    inLockdropAccount: 'You are in a Lockdrop account',
     cantTransferToExcahges: "You can't transfer to Exchanges",
     noHash: 'Your transaction will not have a hash',
     addToWallet: 'Add to wallet',
@@ -562,16 +558,6 @@ export default {
         tooltip:
           'We keep {amount} {symbol} in origin chain account to avoid losing the funds. When depositing from origin chain, only tokens that are above the minimum balance are transferable.',
       },
-      lockdropWarning: {
-        message:
-          'The Lockdrop account will be deprecated in the upcoming update, as its purpose has been fulfilled. Please transfer your funds to another substrate wallet immediately.',
-        list1:
-          "Please transfer your funds from this account by the specified date. Retrieval won't be possible after that.",
-        list2:
-          'Please note that unstaking in dApp staking will require 10 eras (approximately 10 days).',
-        closeTime: 'UTC 23:59 12th September 2023',
-        gotIt: 'Got it',
-      },
     },
   },
   dashboard: {
diff --git a/src/i18n/fr/index.ts b/src/i18n/fr/index.ts
index 6d6f4a3f7..1d5b09139 100644
--- a/src/i18n/fr/index.ts
+++ b/src/i18n/fr/index.ts
@@ -74,7 +74,6 @@ export default {
     dappStaking: 'dApp Staking',
     staking: 'Mise en jeu',
     contract: 'Contrat',
-    plasmLockdrop: 'Plasm Lockdrop',
     closeSidebar: 'Fermer la barre latérale',
     twitter: 'Twitter',
     telegram: 'Telegram',
@@ -317,7 +316,6 @@ export default {
     xvmAssets: 'Actifs XVM ERC20',
     nativeAccount: 'Compte natif',
     evmAccount: 'Compte EVM',
-    switchToNative: 'Basculer vers le Lockdrop',
     switchToEvm: 'Basculer vers EVM',
     totalBalance: 'Solde total',
     transfer: 'Transférer',
@@ -333,8 +331,6 @@ export default {
     yourEvmDeposit: 'Votre dépôt EVM',
     yourVestingInfo: 'Vos informations de Vesting',
     yourStaking: 'Votre mise en jeu',
-    lockdropAccount: 'Compte de Lockdrop',
-    inLockdropAccount: 'Vous vous trouvez sur un compte Lockdrop',
     cantTransferToExcahges: 'Vous ne pouvez pas transférer vers des exchanges',
     noHash: "Votre transaction n'aura pas de hash",
     addToWallet: 'Ajouter au portefeuille',
diff --git a/src/i18n/it/index.ts b/src/i18n/it/index.ts
index ccb8e076d..4d249d641 100644
--- a/src/i18n/it/index.ts
+++ b/src/i18n/it/index.ts
@@ -71,7 +71,6 @@ export default {
     dappStaking: 'dApp Staking',
     staking: 'Staking',
     contract: 'Contratto',
-    plasmLockdrop: 'Plasm Lockdrop',
     closeSidebar: 'Chiudi barra laterale',
     twitter: 'Twitter',
     telegram: 'Telegram',
@@ -313,7 +312,7 @@ export default {
     xvmAssets: 'Asset XVM ERC20',
     nativeAccount: 'Account Nativo',
     evmAccount: 'Account EVM',
-    switchToNative: 'Passa al Lockdrop',
+
     switchToEvm: 'Passa a EVM',
     totalBalance: 'Bilancio Totale',
     transfer: 'Trasferisci',
@@ -329,8 +328,6 @@ export default {
     yourEvmDeposit: 'Il tuo deposito EVM',
     yourVestingInfo: 'Informazioni Vesting',
     yourStaking: 'Il tuo Staking',
-    lockdropAccount: 'Account Lockdrop',
-    inLockdropAccount: 'Sei in un account Lockdrop',
     cantTransferToExcahges: 'Non puoi trasferire agli Exchange',
     noHash: 'La tua transazione non avrà un hash',
     addToWallet: 'Aggiungi al wallet',
diff --git a/src/i18n/ja/index.ts b/src/i18n/ja/index.ts
index a12de357c..d0a3ff7c3 100644
--- a/src/i18n/ja/index.ts
+++ b/src/i18n/ja/index.ts
@@ -70,7 +70,6 @@ export default {
     dappStaking: 'dApp Staking',
     staking: 'Staking',
     contract: 'Contract',
-    plasmLockdrop: 'Plasm Lockdrop',
     closeSidebar: 'Close sidebar',
     twitter: 'Twitter',
     telegram: 'Telegram',
@@ -311,7 +310,6 @@ export default {
     xvmAssets: 'XVM ERC-20 Assets',
     nativeAccount: 'Native Account',
     evmAccount: 'EVM Account',
-    switchToNative: 'Switch to Lockdrop',
     switchToEvm: 'Switch to EVM',
     totalBalance: 'Total Balance',
     transfer: 'Transfer',
@@ -327,8 +325,6 @@ export default {
     yourEvmDeposit: 'Your EVM deposit',
     yourVestingInfo: 'Your Vesting Info',
     yourStaking: 'Your Staking',
-    lockdropAccount: 'Lockdrop Account',
-    inLockdropAccount: 'You are in a Lockdrop account',
     cantTransferToExcahges: '取引所には送金できません。',
     noHash: 'このトランザクションにハッシュはつきません。',
     addToWallet: 'Add to wallet',
diff --git a/src/i18n/kr/index.ts b/src/i18n/kr/index.ts
index 7ff2b2ed0..6a5672fe3 100644
--- a/src/i18n/kr/index.ts
+++ b/src/i18n/kr/index.ts
@@ -70,7 +70,6 @@ export default {
     dappStaking: '디앱 스테이킹',
     staking: '스테이킹',
     contract: '컨트랙트',
-    plasmLockdrop: '플라즘 락드롭',
     closeSidebar: '사이드바 닫기',
     twitter: '트위터',
     telegram: '텔레그램',
@@ -325,8 +324,6 @@ export default {
     yourEvmDeposit: 'EVM 예치금',
     yourVestingInfo: '베스팅 정보',
     yourStaking: '스테이킹 수량',
-    lockdropAccount: '락드롭 계정',
-    inLockdropAccount: '락드롭 계정에 연결',
     cantTransferToExcahges: '거래소로 전송 불가',
     noHash: '거래 해시 없음',
     addToWallet: '지갑에 추가',
diff --git a/src/i18n/pt/index.ts b/src/i18n/pt/index.ts
index 05f21b972..64e58d815 100644
--- a/src/i18n/pt/index.ts
+++ b/src/i18n/pt/index.ts
@@ -70,7 +70,6 @@ export default {
     dappStaking: 'dApp Staking',
     staking: 'Staking',
     contract: 'Contrato',
-    plasmLockdrop: 'Plasm Lockdrop',
     closeSidebar: 'Fechar barra lateral',
     twitter: 'Twitter',
     telegram: 'Telegram',
@@ -310,7 +309,6 @@ export default {
     xvmAssets: 'Ativos XVM ERC20',
     nativeAccount: 'Conta Nativa',
     evmAccount: 'Conta EVM',
-    switchToNative: 'Alternar para Lockdrop',
     switchToEvm: 'Alternar para EVM',
     totalBalance: 'Saldo Total',
     transfer: 'Transferir',
@@ -326,8 +324,6 @@ export default {
     yourEvmDeposit: 'Seu Depósito EVM',
     yourVestingInfo: 'Suas Infos de Vesting',
     yourStaking: 'Seu Stake',
-    lockdropAccount: 'Conta Lockdrop',
-    inLockdropAccount: 'Você está em uma conta Lockdrop',
     cantTransferToExcahges: 'Você não pode transferir para Corretoras',
     noHash: 'Sua transação não terá um hash',
     addToWallet: 'Adicionar à carteira',
diff --git a/src/i18n/zh-TW/index.ts b/src/i18n/zh-TW/index.ts
index 63688b9b1..8af8af1ef 100644
--- a/src/i18n/zh-TW/index.ts
+++ b/src/i18n/zh-TW/index.ts
@@ -14,7 +14,6 @@ export default {
     darkMode: '夜間模式',
     dApps: 'dApps',
     store: 'Store',
-    plasmLockdrop: 'Plasm 鎖倉空投',
     closeSidebar: '關閉側邊欄',
     twitter: 'Twitter',
     telegram: 'Telegram',
diff --git a/src/i18n/zh/index.ts b/src/i18n/zh/index.ts
index 07b2b5b77..e7263398c 100644
--- a/src/i18n/zh/index.ts
+++ b/src/i18n/zh/index.ts
@@ -14,7 +14,6 @@ export default {
     darkMode: '夜间模式',
     dApps: 'dApps',
     store: 'Store',
-    plasmLockdrop: 'Plasm 锁仓空投',
     closeSidebar: '关闭侧边栏',
     twitter: 'Twitter',
     telegram: 'Telegram',
diff --git a/src/v2/app.container.ts b/src/v2/app.container.ts
index 940687064..01cd9d704 100644
--- a/src/v2/app.container.ts
+++ b/src/v2/app.container.ts
@@ -71,21 +71,14 @@ import { IdentityRepository } from './repositories/implementations/IdentityRepos
 
 let currentWalletType = WalletType.Polkadot;
 let currentWalletName = '';
-// Todo: delete after we remove the lockdrop service
-let isLockdropAccount = false;
-
-export function setCurrentWallet(
-  isEthWallet: boolean,
-  currentWallet: string,
-  isLockdrop: boolean
-): void {
+
+export function setCurrentWallet(isEthWallet: boolean, currentWallet: string): void {
   if (!currentWallet) {
     return;
   }
 
   currentWalletType = isEthWallet ? WalletType.Metamask : WalletType.Polkadot;
   currentWalletName = currentWallet;
-  isLockdropAccount = isLockdrop;
 
   container.removeConstant(Symbols.CurrentWallet);
   container.addConstant<string>(Symbols.CurrentWallet, currentWalletName);
@@ -116,7 +109,7 @@ export default function buildDependencyContainer(network: endpointKey): void {
     .toFactory(() => {
       return () =>
         container.get<IDappStakingService>(
-          currentWalletType === WalletType.Polkadot || isLockdropAccount
+          currentWalletType === WalletType.Polkadot
             ? Symbols.DappStakingService
             : Symbols.EvmDappStakingService
         );

From 29f1bdc82a9194a19d252c5b025cacf5d22c28c9 Mon Sep 17 00:00:00 2001
From: Gregory Luneau <greg@astar.network>
Date: Mon, 16 Oct 2023 08:07:33 -0500
Subject: [PATCH 10/16] feat: Add Metamask Astar Snap to native wallet options
 (#933)

* add snap to native wallet options

* Compilation errors fix

* Fix for compilation errors fix

* snap utils

* no extra line

* inject

* extension listed

* 3rd time is the charm

* feat: updated UI logic for the MetaMask snap (#941)

* fix: connect to metamask snap smoothly

* fix: allow the snap only on Shibuya, moved snapUtils to the snap module

* fix: updated loading animation

* fix: display accounts after users add Astar and Polkadot Snap (#949)

* fix: enable MetaMask snap only in dev mode (#952)

* remove console logs

* remove unused code

* remove unused ethereum provider

* Update ModalConnectWallet.vue

* Update useAccount.ts

* fix: enable snap in staging

* fix: build error

* using astar npm

* correct snapId

---------

Co-authored-by: Bobo <bobo.kovacevic@gmail.com>
Co-authored-by: impelcrypto <92044428+impelcrypto@users.noreply.github.com>
Co-authored-by: impelcrypto <impelcrypto@gmail.com>
---
 package.json                                  |  2 +
 src/boot/api.ts                               | 10 +-
 .../header/modals/ModalConnectWallet.vue      | 63 +++++++++---
 src/config/wallets.ts                         | 13 +++
 src/hooks/types/CustomSignature.ts            |  8 --
 src/hooks/useAccount.ts                       | 15 ++-
 src/hooks/useConnectWallet.ts                 |  3 +-
 src/hooks/wallet/useAccountUnification.ts     |  2 +-
 src/modules/snap/index.ts                     | 98 +++++++++++++++++++
 .../implementations/PolkadotWalletService.ts  | 12 ++-
 yarn.lock                                     | 20 +++-
 11 files changed, 214 insertions(+), 32 deletions(-)
 create mode 100644 src/modules/snap/index.ts

diff --git a/package.json b/package.json
index 2ed9608a0..07f632d7a 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,8 @@
   "dependencies": {
     "@astar-network/astar-sdk-core": "^0.2.5",
     "@astar-network/astar-ui": "^0.0.104",
+    "@astar-network/metamask-astar-adapter": "^0.5.4",
+    "@astar-network/metamask-astar-types": "^0.6.1",
     "@ethersproject/bignumber": "^5.5.0",
     "@polkadot/api": "^10.9.1",
     "@polkadot/api-contract": "^10.9.1",
diff --git a/src/boot/api.ts b/src/boot/api.ts
index 4b22434ab..cb831f385 100644
--- a/src/boot/api.ts
+++ b/src/boot/api.ts
@@ -16,7 +16,9 @@ import { useExtensions } from 'src/hooks/useExtensions';
 import { useMetaExtensions } from 'src/hooks/useMetaExtensions';
 import { computed, ref, watchPostEffect } from 'vue';
 import Web3 from 'web3';
-import { supportWalletObj } from 'src/config/wallets';
+import { SupportWallet, supportWalletObj } from 'src/config/wallets';
+import { initiatePolkdatodSnap } from 'src/modules/snap';
+import { initPolkadotSnap } from '@astar-network/metamask-astar-adapter';
 
 let $api: ApiPromise | undefined;
 const $web3 = ref<Web3>();
@@ -131,6 +133,12 @@ export default boot(async ({ store }) => {
   // execute extension process automatically if selectedAddress is linked or mobile device
   const wallet = String(localStorage.getItem(SELECTED_WALLET));
   const isSubstrateWallet = supportWalletObj.hasOwnProperty(wallet);
+
+  if (wallet === SupportWallet.Snap) {
+    const isSnapInstalled = await initiatePolkdatodSnap();
+    isSnapInstalled && (await initPolkadotSnap());
+  }
+
   if (isSubstrateWallet) {
     if (selectedAddress !== null || isMobileDevice) {
       const { extensions } = useExtensions(api, store);
diff --git a/src/components/header/modals/ModalConnectWallet.vue b/src/components/header/modals/ModalConnectWallet.vue
index 40e8ba992..a6ed57270 100644
--- a/src/components/header/modals/ModalConnectWallet.vue
+++ b/src/components/header/modals/ModalConnectWallet.vue
@@ -13,7 +13,7 @@
           </span>
         </div>
         <div class="wrapper--wallets">
-          <div
+          <button
             v-for="(wallet, index) in evmWallets"
             :key="index"
             class="box__row--wallet box--hover--active"
@@ -29,7 +29,7 @@
                 {{ castWalletName(wallet.name) }}
               </span>
             </div>
-          </div>
+          </button>
         </div>
       </div>
       <div>
@@ -39,12 +39,13 @@
           </span>
         </div>
         <div class="wrapper--wallets">
-          <div
+          <button
             v-for="(wallet, index) in nativeWallets"
             :key="index"
+            :disabled="checkIsDisabledWallet(wallet.source)"
             class="box__row--wallet box--hover--active"
             :class="currentWallet === wallet.source && 'border--active'"
-            @click="setSubstrateWalletModal(wallet.source)"
+            @click="!checkIsDisabledWallet(wallet.source) && setSubstrateWalletModal(wallet.source)"
           >
             <div class="box--img">
               <img :src="wallet.img" />
@@ -54,7 +55,7 @@
                 {{ castWalletName(wallet.name) }}
               </span>
             </div>
-          </div>
+          </button>
         </div>
         <div v-if="selWallet && isNoExtension" class="box--no-extension">
           <div class="title--no-extension">
@@ -108,7 +109,7 @@
           </span>
         </div>
         <div class="wrapper--wallets">
-          <div
+          <button
             class="box__row--wallet box--hover--active"
             :class="currentWallet === SupportMultisig.Polkasafe && 'border--active'"
             @click="setPolkasafeModal()"
@@ -122,7 +123,7 @@
             <div>
               <span> PolkaSafe </span>
             </div>
-          </div>
+          </button>
         </div>
       </div>
       <!-- temporarily disable until we implement account selection UI -->
@@ -151,22 +152,27 @@
 </template>
 <script lang="ts">
 import { wait } from '@astar-network/astar-sdk-core';
+import { initPolkadotSnap } from '@astar-network/metamask-astar-adapter';
+import { get } from 'lodash-es';
 import { $api } from 'src/boot/api';
+import { endpointKey } from 'src/config/chainEndpoints';
 import {
+  SupportMultisig,
+  SupportWallet,
+  Wallet,
   supportAllWalletsObj,
+  supportEvmWalletObj,
   supportEvmWallets,
-  SupportWallet,
   supportWallets,
-  Wallet,
-  SupportMultisig,
 } from 'src/config/wallets';
 import { useAccount, useNetworkInfo } from 'src/hooks';
-import { isMobileDevice } from 'src/hooks/helper/wallet';
+import { getInjectedExtensions, isMobileDevice } from 'src/hooks/helper/wallet';
 import { useExtensions } from 'src/hooks/useExtensions';
+import { initiatePolkdatodSnap } from 'src/modules/snap';
 import { useStore } from 'src/store';
-import { computed, defineComponent, PropType, ref } from 'vue';
-import { endpointKey } from 'src/config/chainEndpoints';
 import { SubstrateAccount } from 'src/store/general/state';
+import { PropType, computed, defineComponent, ref } from 'vue';
+import { productionOrigin } from 'src/links';
 
 export default defineComponent({
   props: {
@@ -205,7 +211,8 @@ export default defineComponent({
   },
   setup(props) {
     const store = useStore();
-    const { currentAccountName, disconnectAccount, isAccountUnification } = useAccount();
+    const { currentAccountName, disconnectAccount, isAccountUnification, isSnapEnabled } =
+      useAccount();
     const isClosing = ref<boolean>(false);
     const { currentNetworkIdx } = useNetworkInfo();
 
@@ -217,10 +224,20 @@ export default defineComponent({
       props.setCloseModal();
     };
 
+    const checkIsDisabledWallet = (source: SupportWallet): boolean => {
+      if (source === SupportWallet.Snap && window.location.origin === productionOrigin) {
+        return true;
+      }
+      return false;
+    };
+
     const nativeWallets = computed(() => {
       return supportWallets
         .map((it) => {
           const { isSupportMobileApp, isSupportBrowserExtension } = it;
+          if (it.source === SupportWallet.Snap) {
+            return isSnapEnabled.value ? it : undefined;
+          }
           if (isMobileDevice) {
             return isSupportMobileApp ? it : undefined;
           } else {
@@ -258,7 +275,24 @@ export default defineComponent({
       }
     };
 
+    const handleMetaMaskSnap = async (): Promise<void> => {
+      const provider = get(window, supportEvmWalletObj[SupportWallet.MetaMask].ethExtension);
+      const [address] = (await provider.request({ method: 'eth_requestAccounts' })) as string;
+      if (!address) return;
+      const isSnapInstalled = await initiatePolkdatodSnap();
+      if (isSnapInstalled) {
+        await initPolkadotSnap();
+        useExtensions($api!!, store);
+        const extensions = await getInjectedExtensions(true);
+        const isExtensionsUpdated = extensions.some((it) => it.name === SupportWallet.Snap);
+        // Memo: Sync the metamask extension for users who visit our portal first time
+        !isExtensionsUpdated && (await wait(3000));
+      }
+    };
     const setSubstrateWalletModal = async (source: string): Promise<void> => {
+      if (source === SupportWallet.Snap) {
+        await handleMetaMaskSnap();
+      }
       await closeModal();
       props.setWalletModal(source);
     };
@@ -293,6 +327,7 @@ export default defineComponent({
       setEvmWalletModal,
       disconnectAccount,
       setPolkasafeModal,
+      checkIsDisabledWallet,
       setAccountUnificationModal,
       currentNetworkIdx,
       endpointKey,
diff --git a/src/config/wallets.ts b/src/config/wallets.ts
index a34c7c7b0..47382d097 100644
--- a/src/config/wallets.ts
+++ b/src/config/wallets.ts
@@ -24,6 +24,7 @@ export enum SupportWallet {
   HanaEvm = 'hanaEvm',
   OneKeyEvm = 'OneKeyEvm',
   OneKeyNative = 'OneKey',
+  Snap = 'Snap',
 }
 
 export enum SupportMultisig {
@@ -53,6 +54,7 @@ export const WalletModalOption = {
   HanaEvm: SupportWallet.HanaEvm,
   OneKey: SupportWallet.OneKeyNative,
   OneKeyEvm: SupportWallet.OneKeyEvm,
+  Snap: SupportWallet.Snap,
 };
 
 export const SubstrateWallets = [
@@ -67,6 +69,7 @@ export const SubstrateWallets = [
   SupportWallet.Wallet3,
   SupportWallet.HanaNative,
   SupportWallet.OneKeyNative,
+  SupportWallet.Snap,
 ];
 
 export interface Wallet {
@@ -91,6 +94,16 @@ export const supportWalletObj = {
     isSupportBrowserExtension: true,
     isSupportMobileApp: false,
   },
+  [SupportWallet.Snap]: {
+    img: require('/src/assets/img/metamask.png'),
+    name: 'Astar Snap',
+    source: SupportWallet.Snap,
+    // Todo: update URLs
+    walletUrl: 'https://metamask.io/flask/',
+    guideUrl: 'https://docs.astar.network/docs/build/integrations/wallets/astar-safe',
+    isSupportBrowserExtension: true,
+    isSupportMobileApp: false,
+  },
   [SupportWallet.TalismanNative]: {
     img: require('/src/assets/img/logo-talisman.svg'),
     name: 'Talisman (Native)',
diff --git a/src/hooks/types/CustomSignature.ts b/src/hooks/types/CustomSignature.ts
index 93c9bf1d4..3327d7bbe 100644
--- a/src/hooks/types/CustomSignature.ts
+++ b/src/hooks/types/CustomSignature.ts
@@ -28,11 +28,3 @@ export interface EcdsaAddressFormat {
   ss58?: string;
   h160?: string;
 }
-
-declare global {
-  interface Window {
-    ethereum?: EthereumProvider;
-    talismanEth?: EthereumProvider;
-    SubWallet?: EthereumProvider;
-  }
-}
diff --git a/src/hooks/useAccount.ts b/src/hooks/useAccount.ts
index 19a528779..b784251ee 100644
--- a/src/hooks/useAccount.ts
+++ b/src/hooks/useAccount.ts
@@ -1,6 +1,7 @@
 import { isValidEvmAddress, toSS58Address, wait } from '@astar-network/astar-sdk-core';
+import { endpointKey } from 'src/config/chainEndpoints';
 import { LOCAL_STORAGE } from 'src/config/localStorage';
-import { SupportMultisig } from 'src/config/wallets';
+import { SupportMultisig, SupportWallet } from 'src/config/wallets';
 import { Multisig } from 'src/modules/multisig';
 import { useStore } from 'src/store';
 import { SubstrateAccount } from 'src/store/general/state';
@@ -11,7 +12,6 @@ import { IAccountUnificationService } from 'src/v2/services';
 import { Symbols } from 'src/v2/symbols';
 import { computed, ref, watch } from 'vue';
 import { useNetworkInfo } from './useNetworkInfo';
-import { endpointKey } from 'src/config/chainEndpoints';
 import { INftRepository } from 'src/v2/repositories';
 import { useNft } from './useNft';
 import { NftMetadata } from 'src/v2/models';
@@ -31,6 +31,7 @@ export const useAccount = () => {
   const currentEcdsaAccount = computed(() => store.getters['general/currentEcdsaAccount']);
   const substrateAccounts = computed(() => store.getters['general/substrateAccounts']);
   const currentAddress = computed(() => store.getters['general/selectedAddress']);
+  const isSnapEnabled = computed<boolean>(() => currentNetworkIdx.value === endpointKey.SHIBUYA);
   const unifiedAccount = computed(() => store.getters['general/getUnifiedAccount']);
 
   const isAccountUnification = computed<boolean>(() => {
@@ -222,6 +223,15 @@ export const useAccount = () => {
     { immediate: true }
   );
 
+  const checkIsResetSnap = async (): Promise<void> => {
+    const storedWallet = String(localStorage.getItem(LOCAL_STORAGE.SELECTED_WALLET));
+    if (!isSnapEnabled.value && storedWallet === SupportWallet.Snap) {
+      await disconnectAccount();
+      window.location.reload();
+    }
+  };
+
+  watch([currentAddress], checkIsResetSnap, { immediate: true });
   watch([unifiedAccount], () => {
     if (unifiedAccount.value) {
       currentAccountName.value = unifiedAccount.value.name;
@@ -235,6 +245,7 @@ export const useAccount = () => {
     senderSs58Account,
     multisig,
     isMultisig,
+    isSnapEnabled,
     isAccountUnification,
     isH160Formatted,
     disconnectAccount,
diff --git a/src/hooks/useConnectWallet.ts b/src/hooks/useConnectWallet.ts
index 3f1c2938c..5832e2b2e 100644
--- a/src/hooks/useConnectWallet.ts
+++ b/src/hooks/useConnectWallet.ts
@@ -192,11 +192,12 @@ export const useConnectWallet = () => {
     modalName.value = wallet;
   };
 
-  const requestExtensionsIfFirstAccess = (wallet: SupportWallet): void => {
+  const requestExtensionsIfFirstAccess = async (wallet: SupportWallet): Promise<void> => {
     // Memo: displays accounts menu for users who use the portal first time
     const isSubstrateWallet = supportWalletObj.hasOwnProperty(wallet);
     const storedAddress = localStorage.getItem(SELECTED_ADDRESS);
     const isFirstAccess = storedAddress === null || storedAddress === ETHEREUM_EXTENSION;
+
     if (isFirstAccess && isSubstrateWallet) {
       const { extensions } = useExtensions($api!!, store);
       const { metaExtensions, extensionCount } = useMetaExtensions($api!!, extensions)!!;
diff --git a/src/hooks/wallet/useAccountUnification.ts b/src/hooks/wallet/useAccountUnification.ts
index cf551eca9..3eb45aa78 100644
--- a/src/hooks/wallet/useAccountUnification.ts
+++ b/src/hooks/wallet/useAccountUnification.ts
@@ -36,7 +36,7 @@ import { useNetworkInfo } from '../useNetworkInfo';
 import { IIdentityRepository } from 'src/v2/repositories';
 import { UnifiedAccount } from 'src/store/general/state';
 
-const provider = get(window, 'ethereum');
+const provider = get(window, 'ethereum') as any;
 
 export interface TransferXc20Token {
   assetId: string;
diff --git a/src/modules/snap/index.ts b/src/modules/snap/index.ts
new file mode 100644
index 000000000..7e7cb402a
--- /dev/null
+++ b/src/modules/snap/index.ts
@@ -0,0 +1,98 @@
+import { web3EnablePromise } from '@polkadot/extension-dapp';
+import type { InjectedMetamaskExtension } from '@astar-network/metamask-astar-adapter/src/types';
+import { InjectedExtension } from '@polkadot/extension-inject/types';
+import { SnapInstallationParamNames } from '@astar-network/metamask-astar-adapter';
+import type { MetamaskPolkadotSnap } from '@astar-network/metamask-astar-adapter/build/snap';
+import {
+  isMetamaskSnapsSupported,
+  isPolkadotSnapInstalled,
+} from '@astar-network/metamask-astar-adapter/build/utils';
+import type { UnitConfiguration } from '@astar-network/metamask-astar-types';
+
+// Todo: move to Astar.js
+
+export type SnapNetworks = 'astar' | 'shiden' | 'shibuya';
+export interface SnapConfig {
+  networkName: SnapNetworks;
+  wsRpcUrl?: string;
+  addressPrefix?: number;
+  unit?: UnitConfiguration;
+}
+
+export const snapId = process.env.DEV ? 'local:http://localhost:8081' : 'npm:@astar-network/snap';
+console.info('snapId', snapId);
+
+export async function enablePolkadotSnap(
+  config: SnapConfig = { networkName: 'shibuya' },
+  snapOrigin?: string,
+  snapInstallationParams: Record<SnapInstallationParamNames, unknown> = {}
+): Promise<MetamaskPolkadotSnap> {
+  // check all conditions
+  if (!window.ethereum) {
+    throw new Error('Metamask is not installed');
+  }
+  if (!(await isMetamaskSnapsSupported())) {
+    throw new Error("Current Metamask version doesn't support snaps");
+  }
+  if (!config.networkName) {
+    config.networkName = 'shibuya';
+  }
+
+  const isInstalled = await isPolkadotSnapInstalled(snapId);
+  console.info('isPolkadotSnapInstalled', isInstalled);
+
+  if (!isInstalled) {
+    // // enable snap
+    await window.ethereum.request({
+      method: 'wallet_requestSnaps',
+      params: {
+        [snapId]: { ...snapInstallationParams },
+      },
+    });
+  }
+
+  // Return a value of type MetamaskPolkadotSnap
+  return {} as MetamaskPolkadotSnap;
+}
+
+export async function installPolkadotSnap(): Promise<boolean> {
+  try {
+    await enablePolkadotSnap({ networkName: 'shibuya' }, snapId);
+    console.info('Snap installed!!');
+    return true;
+  } catch (err) {
+    console.error(err);
+    return false;
+  }
+}
+
+export async function getInjectedMetamaskExtension(): Promise<InjectedMetamaskExtension | null> {
+  const extensions = await web3EnablePromise;
+  return getMetamaskExtension(extensions || []) || null;
+}
+
+function getMetamaskExtension(
+  extensions: InjectedExtension[]
+): InjectedMetamaskExtension | undefined {
+  return extensions.find((item) => item.name === 'metamask-astar-snap') as unknown as
+    | InjectedMetamaskExtension
+    | undefined;
+}
+
+export interface SnapInitializationResponse {
+  isSnapInstalled: boolean;
+  snap?: MetamaskPolkadotSnap;
+}
+
+export async function initiatePolkdatodSnap(): Promise<SnapInitializationResponse> {
+  try {
+    console.info('Attempting to connect to snap...');
+    // Todo: update network params
+    const metamaskPolkadotSnap = await enablePolkadotSnap({ networkName: 'shibuya' }, snapId);
+    console.info('Snap installed!');
+    return { isSnapInstalled: true, snap: metamaskPolkadotSnap };
+  } catch (e) {
+    console.error(e);
+    return { isSnapInstalled: false };
+  }
+}
diff --git a/src/v2/services/implementations/PolkadotWalletService.ts b/src/v2/services/implementations/PolkadotWalletService.ts
index 9e9e1e4ca..3f677337e 100644
--- a/src/v2/services/implementations/PolkadotWalletService.ts
+++ b/src/v2/services/implementations/PolkadotWalletService.ts
@@ -25,6 +25,7 @@ import { Symbols } from 'src/v2/symbols';
 import { WalletService } from './WalletService';
 import { ASTAR_SS58_FORMAT } from '@astar-network/astar-sdk-core';
 import { IApi } from 'src/v2/integration';
+import { SupportWallet } from 'src/config/wallets';
 
 @injectable()
 export class PolkadotWalletService extends WalletService implements IWalletService {
@@ -60,10 +61,15 @@ export class PolkadotWalletService extends WalletService implements IWalletServi
     Guard.ThrowIfUndefined('extrinsic', extrinsic);
     Guard.ThrowIfUndefined('senderAddress', senderAddress);
 
+    const isSnap =
+      String(localStorage.getItem(LOCAL_STORAGE.SELECTED_WALLET)) === SupportWallet.Snap;
+    const isDetectExtensionsAction = !isMobileDevice || !isSnap;
+
     let result: string | null = null;
     try {
       return new Promise<string>(async (resolve, reject) => {
-        !isMobileDevice && this.detectExtensionsAction(true);
+        isDetectExtensionsAction && this.detectExtensionsAction(true);
+
         await this.checkExtension();
         let tip = transactionTip?.toString();
         if (!tip) {
@@ -102,7 +108,8 @@ export class PolkadotWalletService extends WalletService implements IWalletServi
             },
             (result) => {
               try {
-                !isMobileDevice && this.detectExtensionsAction(false);
+                isDetectExtensionsAction && this.detectExtensionsAction(false);
+                isSnap && this.eventAggregator.publish(new BusyMessage(true));
                 if (result.isCompleted) {
                   if (!this.isExtrinsicFailed(result.events)) {
                     if (result.isError) {
@@ -124,7 +131,6 @@ export class PolkadotWalletService extends WalletService implements IWalletServi
                       );
                     }
                   }
-
                   this.eventAggregator.publish(new BusyMessage(false));
                   if (finalizedCallback) {
                     finalizedCallback(result);
diff --git a/yarn.lock b/yarn.lock
index f5987191f..238f9cf35 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -50,6 +50,22 @@
     "@iconify-prerendered/vue-ic" "^0.21.1672653513"
     vue "^3.2.23"
 
+"@astar-network/metamask-astar-adapter@^0.5.4":
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/@astar-network/metamask-astar-adapter/-/metamask-astar-adapter-0.5.4.tgz#41529d6a8a0af4d7f75401db36b30f153a903d41"
+  integrity sha512-8vSvzeEIUVQ2AraStytBx0QX0PPuu8jY6jLhU1N+Bp+Iw0lWWfxSo4UyNeKEWKFaq0KZnJTgD/uf21NqjwCB/A==
+  dependencies:
+    "@polkadot/api" "^10.9.1"
+    "@polkadot/extension-inject" "^0.46.5"
+    "@polkadot/types-augment" "^10.9.1"
+
+"@astar-network/metamask-astar-types@^0.6.1":
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/@astar-network/metamask-astar-types/-/metamask-astar-types-0.6.1.tgz#926bf394dbf37ab66474ad3d294d496b0b366769"
+  integrity sha512-DU8KKdBiJazHv/Zm9PV3Gu1L+8D7kNmlFuX0DljU9SInhIxvqRhvj8P23illUPY47b9W0cV5SetGtoLf/RQzgg==
+  dependencies:
+    "@polkadot/api" "^10.9.1"
+
 "@babel/code-frame@7.12.11":
   version "7.12.11"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.11.tgz#f4ad435aa263db935b8f10f2c552d23fb716a63f"
@@ -3027,7 +3043,7 @@
   dependencies:
     "@babel/runtime" "^7.9.6"
 
-"@polkadot/extension-inject@0.46.5":
+"@polkadot/extension-inject@0.46.5", "@polkadot/extension-inject@^0.46.5":
   version "0.46.5"
   resolved "https://registry.yarnpkg.com/@polkadot/extension-inject/-/extension-inject-0.46.5.tgz#6abee0eb28a73fd1a9461f257cac5875c2e9fc63"
   integrity sha512-QcpkCMuv7iFbWjufkw14JRozpEYFyjP0H8KOJ8IsHGfPd2DPiismQ0NXr+AS7f6U+0I+Rhv9E4dnXxtJPROVMQ==
@@ -3131,7 +3147,7 @@
   dependencies:
     "@types/chrome" "^0.0.171"
 
-"@polkadot/types-augment@10.9.1":
+"@polkadot/types-augment@10.9.1", "@polkadot/types-augment@^10.9.1":
   version "10.9.1"
   resolved "https://registry.yarnpkg.com/@polkadot/types-augment/-/types-augment-10.9.1.tgz#5f1c1225c04ffbfe243629a46087c9c9de25a6b3"
   integrity sha512-OY9/jTMFRFqYdkUnfcGwqMLC64A0Q25bjvCuVQCVjsPFKE3wl0Kt5rNT01eV2UmLXrR6fY0xWbR2w80bLA7CIQ==

From 84ebec8e18d102030750edfe5b5dcb623d40693c Mon Sep 17 00:00:00 2001
From: Bobo <bobo.kovacevic@gmail.com>
Date: Fri, 13 Oct 2023 10:08:26 +0200
Subject: [PATCH 11/16] Lockdrop logic removed (#954)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Lockdrop logic removed

* more lockdrop removed (#957)

* fix: fetch dApps staking data after changing accounts (#955)

* fix: fetch staked dapps data for EVM wallets

* fix: clean up

* fix: position for page column

* Account unification (#925)

* Unification service skeleton

* Started with unify account implementation

* Unifiy account implemented - not working

* It works

* Error handling

* Mapped accounts getter functions

* Set identity logic (#931)

* Create and update identity

* Update identity works

* NFT metadata fetch

* Account unification batch call

* Comment

* Native asset transfer support for unified accounts (#938)

* Native token transfer

* Use unified SS50 for dApps staking

* getIdentity fix

* Update NFT repo to use Token API endpoints

* Update test call

* feat: added AccountUnification modal (#935)

* feat: added AccountUnification modal

* Add UI modals for account unification

* refactor: ModalConnectWallet

* Remove the wallet connect section on the user account modal

* Add type

* Add NFT select modal

* Add unify accounts icon button on the asset page

* Add dark theme, replace tailwind css to pure css

* remove body tag from style

* Replace rem to px

* Add styles for mobile screens

* Add static texts

* Adjust styles

* Update help

* feat: implemented logic in the ‘account unification’ modal (#936)

* feat: load the evm account from metamask

* feat: checks the staking info

* refactor: clean up

* feat: added close modal in step 2

* feat: removed account name input

* rollback: account name

* feat: added XC20 tokens which are required to transfer to unified account

* feat: updated 'accountName' logic

* feat: added jazzicon in Step 3

* adjust class naming rule

* clean up

* test: refactor useAccountUnification.ts

* fix: allow AU on local node

* test: refactor useAccountUnification.ts (2)

* test: refactor useAccountUnification.ts (3)

* Fix media query

* Use i18n

* Add help texts using i18n

---------

Co-authored-by: Ayumi Takahashi <ayumee528@gmail.com>

* Fix for reading staking data from UA (#942)

* Fix for reading staking data from UA

* Removed unnecessary store read

* Account unification call refactoring

* Adjust the checkbox position

* UA logic integration (#943)

* Basic integration implemented

* Disable submit button on action

* Rename from Step to AuStep

* use i18n

* add the emojis to i18 file

* feat: transfer XC20 tokens to the unified SS58 account (#944)

* feat: transfer XC20 tokens to unified SS58 account

* feat: transfer XC20 tokens to unified SS58 account (2)

* feat: added XCM tokens on shibuya

* feat: added XCM tokens on shibuya (2)

* refactor: clean up

* fix: updated receiving faucet account

* Accounts - show UA name and modal (#948)

* fix: account unification modals (#953)

* fix: connect MetaMask after users click connect button

* fix: updated words

* feat: added a check input for sending submit transaction

* fix: words

* fix: getMappedNativeAddress and getMappedEvmAddress functions

* Fix for breaking changes on Shibuya (#958)

* Moonfit added (#937) (#939)

* Uplift to the latest Quasar version (#940)

* feat: updated XCM with equilibrium to V3 (#946)

* fix: let space wrap and height grow for cards in banner (#947)

* let space wrap and height grow

* minimum width added, aligned bottom

* Remove lockdrop (#951)

* hotfix: update the hotfix branch (#920)

* fix: rollback

* fix: update ci yml files

* Lockdrop switch removed

* Removed toggleEvmWalletSchema

---------

Co-authored-by: impelcrypto <92044428+impelcrypto@users.noreply.github.com>

* fix: fetch dApps staking data after changing accounts (#955)

* fix: fetch staked dapps data for EVM wallets

* fix: clean up

* fix: position for page column

* Methods naming fix top match the latest runtime upgrade

---------

Co-authored-by: impelcrypto <92044428+impelcrypto@users.noreply.github.com>
Co-authored-by: Gregory Luneau <greg@astar.network>

* Display unification costs (#959)

* Display unification costs

* Limit account length

* fix: updated sending ERC20 tokens logic and displaying the destination balance for EVM address (considering deducting staked amount)

* fix: odd space issue

* Display and edit unified account (#963)

* Display unified account details

* Edit unified account

* Cleanup

* Update src/components/header/modals/account-unification/AuStep3.vue

Co-authored-by: impelcrypto <92044428+impelcrypto@users.noreply.github.com>

---------

Co-authored-by: impelcrypto <92044428+impelcrypto@users.noreply.github.com>

---------

Co-authored-by: impelcrypto <impelcrypto@gmail.com>
Co-authored-by: impelcrypto <92044428+impelcrypto@users.noreply.github.com>
Co-authored-by: Ayumi Takahashi <ayumee528@gmail.com>
Co-authored-by: Gregory Luneau <greg@astar.network>

* Fix for provider not set or invalid error (#970)

* Fix for provider not set or invalid error

* Don't use gas station on Shibuya

* fix: disabled transaction speed ui for Shibuya EVM (#971)

---------

Co-authored-by: impelcrypto <92044428+impelcrypto@users.noreply.github.com>

---------

Co-authored-by: Gregory Luneau <greg@astar.network>
Co-authored-by: impelcrypto <92044428+impelcrypto@users.noreply.github.com>
Co-authored-by: impelcrypto <impelcrypto@gmail.com>
Co-authored-by: Ayumi Takahashi <ayumee528@gmail.com>
---
 src/components/assets/Account.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/assets/Account.vue b/src/components/assets/Account.vue
index 5badf50ef..4e771b65c 100644
--- a/src/components/assets/Account.vue
+++ b/src/components/assets/Account.vue
@@ -253,8 +253,11 @@ export default defineComponent({
       supportWalletObj,
       signatoryIconWallet,
       isAccountUnification,
+<<<<<<< HEAD
       unifiedAccount,
       isAccountUnified,
+=======
+>>>>>>> 372fe9b5 (Lockdrop logic removed (#954))
       getShortenAddress,
       copyAddress,
       showAccountUnificationModal,

From ead23788271a1e2c27a5d8ce7af5c925f8799e0a Mon Sep 17 00:00:00 2001
From: Gregory Luneau <greg@astar.network>
Date: Mon, 16 Oct 2023 08:07:33 -0500
Subject: [PATCH 12/16] feat: Add Metamask Astar Snap to native wallet options
 (#933)

* add snap to native wallet options

* Compilation errors fix

* Fix for compilation errors fix

* snap utils

* no extra line

* inject

* extension listed

* 3rd time is the charm

* feat: updated UI logic for the MetaMask snap (#941)

* fix: connect to metamask snap smoothly

* fix: allow the snap only on Shibuya, moved snapUtils to the snap module

* fix: updated loading animation

* fix: display accounts after users add Astar and Polkadot Snap (#949)

* fix: enable MetaMask snap only in dev mode (#952)

* remove console logs

* remove unused code

* remove unused ethereum provider

* Update ModalConnectWallet.vue

* Update useAccount.ts

* fix: enable snap in staging

* fix: build error

* using astar npm

* correct snapId

---------

Co-authored-by: Bobo <bobo.kovacevic@gmail.com>
Co-authored-by: impelcrypto <92044428+impelcrypto@users.noreply.github.com>
Co-authored-by: impelcrypto <impelcrypto@gmail.com>
---
 src/components/assets/Account.vue | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/assets/Account.vue b/src/components/assets/Account.vue
index 4e771b65c..5badf50ef 100644
--- a/src/components/assets/Account.vue
+++ b/src/components/assets/Account.vue
@@ -253,11 +253,8 @@ export default defineComponent({
       supportWalletObj,
       signatoryIconWallet,
       isAccountUnification,
-<<<<<<< HEAD
       unifiedAccount,
       isAccountUnified,
-=======
->>>>>>> 372fe9b5 (Lockdrop logic removed (#954))
       getShortenAddress,
       copyAddress,
       showAccountUnificationModal,

From 81fc3041f9b5c6817918a467ebb793bd6e930bc1 Mon Sep 17 00:00:00 2001
From: Bobo <bobo.kovacevic@gmail.com>
Date: Mon, 16 Oct 2023 16:02:51 +0200
Subject: [PATCH 13/16] Merge

---
 src/hooks/useAccount.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/hooks/useAccount.ts b/src/hooks/useAccount.ts
index 93d7f94b2..b784251ee 100644
--- a/src/hooks/useAccount.ts
+++ b/src/hooks/useAccount.ts
@@ -12,12 +12,9 @@ import { IAccountUnificationService } from 'src/v2/services';
 import { Symbols } from 'src/v2/symbols';
 import { computed, ref, watch } from 'vue';
 import { useNetworkInfo } from './useNetworkInfo';
-<<<<<<< HEAD
 import { INftRepository } from 'src/v2/repositories';
 import { useNft } from './useNft';
 import { NftMetadata } from 'src/v2/models';
-=======
->>>>>>> main
 
 export const ETHEREUM_EXTENSION = 'Ethereum Extension';
 

From acffba301fb68ec8dd4da144df479401f7509b86 Mon Sep 17 00:00:00 2001
From: Bobo <bobo.kovacevic@gmail.com>
Date: Mon, 16 Oct 2023 16:23:11 +0200
Subject: [PATCH 14/16] Removed unused variables

---
 src/components/header/modals/account-unification/AuStep1Evm.vue | 2 +-
 .../header/modals/account-unification/AuStep1Native.vue         | 2 +-
 src/components/header/modals/account-unification/AuStep2.vue    | 2 +-
 src/components/header/modals/account-unification/AuStep5.vue    | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/header/modals/account-unification/AuStep1Evm.vue b/src/components/header/modals/account-unification/AuStep1Evm.vue
index 5ab061daf..65c230054 100644
--- a/src/components/header/modals/account-unification/AuStep1Evm.vue
+++ b/src/components/header/modals/account-unification/AuStep1Evm.vue
@@ -31,7 +31,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
+import { defineComponent } from 'vue';
 
 export default defineComponent({
   components: {},
diff --git a/src/components/header/modals/account-unification/AuStep1Native.vue b/src/components/header/modals/account-unification/AuStep1Native.vue
index 788f3bbaa..ec5db8493 100644
--- a/src/components/header/modals/account-unification/AuStep1Native.vue
+++ b/src/components/header/modals/account-unification/AuStep1Native.vue
@@ -65,7 +65,7 @@ export default defineComponent({
     },
   },
   emits: ['next'],
-  setup(props, { emit }) {
+  setup(_, { emit }) {
     const next = () => {
       emit('next');
     };
diff --git a/src/components/header/modals/account-unification/AuStep2.vue b/src/components/header/modals/account-unification/AuStep2.vue
index 229a4edfc..8cd582e5d 100644
--- a/src/components/header/modals/account-unification/AuStep2.vue
+++ b/src/components/header/modals/account-unification/AuStep2.vue
@@ -74,7 +74,7 @@ export default defineComponent({
     },
   },
   emits: ['next'],
-  setup(props, { emit }) {
+  setup(_, { emit }) {
     const next = (): void => {
       emit('next');
     };
diff --git a/src/components/header/modals/account-unification/AuStep5.vue b/src/components/header/modals/account-unification/AuStep5.vue
index 36dad639c..2e9f7f043 100644
--- a/src/components/header/modals/account-unification/AuStep5.vue
+++ b/src/components/header/modals/account-unification/AuStep5.vue
@@ -74,7 +74,7 @@ export default defineComponent({
     },
   },
   emits: ['next'],
-  setup(props, { emit }) {
+  setup(_, { emit }) {
     const isChecked = ref<boolean>(false);
 
     const next = (): void => {

From 63a6481e3ee117d41c5c1b5cd1679a4d8b1d34a0 Mon Sep 17 00:00:00 2001
From: Bobo <bobo.kovacevic@gmail.com>
Date: Mon, 16 Oct 2023 22:00:36 +0200
Subject: [PATCH 15/16] Enum for unification steps

---
 .../header/modals/ModalAccountUnification.vue | 90 ++++++++++++-------
 .../modals/account-unification/SelectNft.vue  |  3 +-
 src/i18n/en-US/index.ts                       |  2 +
 3 files changed, 59 insertions(+), 36 deletions(-)

diff --git a/src/components/header/modals/ModalAccountUnification.vue b/src/components/header/modals/ModalAccountUnification.vue
index f710eb174..c649331e8 100644
--- a/src/components/header/modals/ModalAccountUnification.vue
+++ b/src/components/header/modals/ModalAccountUnification.vue
@@ -8,11 +8,15 @@
     @close="closeModal"
   >
     <div class="wrapper--modal-account">
-      <div v-if="currentStep === 1">
+      <div v-if="currentStep === UnificationSteps.Welcome">
         <au-step1-evm v-if="isH160" :handle-back="backModal" />
-        <au-step1-native v-else :total-cost="totalCost" @next="updateSteps(2)" />
+        <au-step1-native
+          v-else
+          :total-cost="totalCost"
+          @next="updateSteps(UnificationSteps.ConnectMetamask)"
+        />
       </div>
-      <div v-else-if="currentStep === 2">
+      <div v-else-if="currentStep === UnificationSteps.ConnectMetamask">
         <au-step2
           :selected-evm-address="selectedEvmAddress"
           :is-connected-network="isConnectedNetwork"
@@ -20,10 +24,10 @@
           :is-loading-dapp-staking="isLoadingDappStaking"
           :set-web3="setWeb3"
           :close-modal="closeModal"
-          @next="updateSteps(3)"
+          @next="updateSteps(UnificationSteps.SetNameAndAvatar)"
         />
       </div>
-      <div v-else-if="currentStep === 3">
+      <div v-else-if="currentStep === UnificationSteps.SetNameAndAvatar">
         <au-step3
           :account-name="accountName"
           :set-account-name="setAccountName"
@@ -32,11 +36,17 @@
           :is-edit="false"
           :is-busy="isLoading"
           :avatar="avatar"
-          @next="updateSteps(transferXc20Tokens.length > 0 ? 4 : 5)"
-          @on-select-nft="updateSteps(200)"
+          @next="
+            updateSteps(
+              transferXc20Tokens.length > 0
+                ? UnificationSteps.TransferXC20
+                : UnificationSteps.Overview
+            )
+          "
+          @on-select-nft="updateSteps(UnificationSteps.SelectAvatar)"
         />
       </div>
-      <div v-else-if="currentStep === 100 && unifiedAccount">
+      <div v-else-if="currentStep === UnificationSteps.EditIdentity && unifiedAccount">
         <au-step3
           :account-name="accountName"
           :set-account-name="setAccountName"
@@ -46,36 +56,30 @@
           :is-busy="isLoading"
           :avatar="avatar"
           @next="updateSteps(101)"
-          @on-select-nft="updateSteps(200)"
+          @on-select-nft="updateSteps(UnificationSteps.SelectAvatar)"
         />
       </div>
-      <div v-else-if="currentStep === 4">
-        <step4
-          :transfer-xc20-tokens="transferXc20Tokens"
-          :handle-transfer-xc20-tokens="handleTransferXc20Tokens"
-          :is-sending-xc20-tokens="isSendingXc20Tokens"
-          @next="updateSteps(5)"
-        />
+      <div v-else-if="currentStep === UnificationSteps.TransferXC20">
         <au-step4
           :transfer-xc20-tokens="transferXc20Tokens"
           :handle-transfer-xc20-tokens="handleTransferXc20Tokens"
           :is-sending-xc20-tokens="isSendingXc20Tokens"
-          @next="updateSteps(5)"
+          @next="updateSteps(UnificationSteps.Overview)"
         />
       </div>
-      <div v-else-if="currentStep === 5">
+      <div v-else-if="currentStep === UnificationSteps.Overview">
         <au-step5
           :account-name="accountName"
           :selected-evm-address="selectedEvmAddress"
           :avatar-url="avatar?.image ?? ''"
           :is-busy="isLoading"
-          @next="updateSteps(6)"
+          @next="updateSteps(UnificationSteps.Success)"
         />
       </div>
-      <div v-else-if="currentStep === 6">
+      <div v-else-if="currentStep === UnificationSteps.Success">
         <au-step6 />
       </div>
-      <div v-else-if="currentStep === 200">
+      <div v-else-if="currentStep === UnificationSteps.SelectAvatar">
         <select-nft
           :evm-address="unifiedAccount ? unifiedAccount.evmAddress : selectedEvmAddress"
           :avatar-metadata="avatar"
@@ -85,7 +89,11 @@
       <div v-else>
         <user-account
           :set-account-name="setAccountName"
-          @next="unifiedAccount ? updateSteps(100) : updateSteps(1)"
+          @next="
+            unifiedAccount
+              ? updateSteps(UnificationSteps.EditIdentity)
+              : updateSteps(UnificationSteps.Welcome)
+          "
         />
       </div>
     </div>
@@ -108,6 +116,18 @@ import AuStep6 from 'src/components/header/modals/account-unification/AuStep6.vu
 import SelectNft from './account-unification/SelectNft.vue';
 import { NftMetadata } from 'src/v2/models';
 
+enum UnificationSteps {
+  Welcome = 1,
+  ConnectMetamask = 2,
+  SetNameAndAvatar = 3,
+  TransferXC20 = 4,
+  Overview = 5,
+  Success = 6,
+  EditIdentity = 100,
+  ExecuteUpdateIdentity = 101,
+  SelectAvatar = 200,
+}
+
 export default defineComponent({
   components: {
     UserAccount,
@@ -198,11 +218,13 @@ export default defineComponent({
 
     const setAvatar = async (nft: NftMetadata): Promise<void> => {
       avatar.value = nft;
-      await updateSteps(unifiedAccount.value ? 100 : 3);
+      await updateSteps(
+        unifiedAccount.value ? UnificationSteps.EditIdentity : UnificationSteps.SetNameAndAvatar
+      );
     };
 
     const updateSteps = async (step: number): Promise<void> => {
-      if (step === 6) {
+      if (step === UnificationSteps.Success) {
         // Make a call to unify accounts
         const success = await unifyAccounts(
           currentAccount.value,
@@ -215,8 +237,7 @@ export default defineComponent({
         if (!success) {
           return;
         }
-      } else if (step === 101) {
-        // Make a call to update unified account identity
+      } else if (step === UnificationSteps.ExecuteUpdateIdentity) {
         if (unifiedAccount.value) {
           await updateAccount(
             unifiedAccount.value.nativeAddress,
@@ -237,25 +258,25 @@ export default defineComponent({
     const { t } = useI18n();
 
     const modalTitle = computed((): string => {
-      if (currentStep.value === 1) {
+      if (currentStep.value === UnificationSteps.Welcome) {
         if (isH160.value) {
           return t('wallet.unifiedAccount.create');
         } else {
           return t('wallet.unifiedAccount.readCarefully');
         }
-      } else if (currentStep.value === 2) {
+      } else if (currentStep.value === UnificationSteps.ConnectMetamask) {
         return `${t('wallet.unifiedAccount.create')} : 1`;
-      } else if (currentStep.value === 3) {
+      } else if (currentStep.value === UnificationSteps.SetNameAndAvatar) {
         return `${t('wallet.unifiedAccount.create')} : 2`;
-      } else if (currentStep.value === 4) {
+      } else if (currentStep.value === UnificationSteps.TransferXC20) {
         return `${t('wallet.unifiedAccount.create')} : 3`;
-      } else if (currentStep.value === 5) {
+      } else if (currentStep.value === UnificationSteps.Overview) {
         return `${t('wallet.unifiedAccount.create')} : 4`;
-      } else if (currentStep.value === 6) {
+      } else if (currentStep.value === UnificationSteps.Success) {
         return '';
-      } else if (currentStep.value === 100) {
+      } else if (currentStep.value === UnificationSteps.EditIdentity) {
         return t('wallet.unifiedAccount.editUnifiedAccount');
-      } else if (currentStep.value === 200) {
+      } else if (currentStep.value === UnificationSteps.SelectAvatar) {
         return t('wallet.unifiedAccount.selectAvatar');
       } else {
         return t('wallet.unifiedAccount.yourAccount');
@@ -288,6 +309,7 @@ export default defineComponent({
       setAccountName,
       handleTransferXc20Tokens,
       setAvatar,
+      UnificationSteps,
     };
   },
 });
diff --git a/src/components/header/modals/account-unification/SelectNft.vue b/src/components/header/modals/account-unification/SelectNft.vue
index 0bcc5433e..28cdfafc1 100644
--- a/src/components/header/modals/account-unification/SelectNft.vue
+++ b/src/components/header/modals/account-unification/SelectNft.vue
@@ -12,8 +12,7 @@
       </div>
     </div>
     <div v-if="ownedNfts.length === 0 && !isBusy" class="item">
-      You don't have NFTs minted at the moment. When you mint some you will be able to update your
-      unified account with a NFT. For the moment default icon will be used.
+      {{ $t('wallet.unifiedAccount.noNfts') }}
     </div>
 
     <!-- Action -->
diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
index d0f1fcedd..2bb4a83cd 100644
--- a/src/i18n/en-US/index.ts
+++ b/src/i18n/en-US/index.ts
@@ -224,6 +224,8 @@ export default {
       editUnifiedAccount: 'Edit Unified Account',
       selectAvatar: 'Select Avatar',
       save: 'Save',
+      noNfts:
+        "You don't have NFTs minted at the moment. When you mint some you will be able to update your unified account with a NFT. For the moment default icon will be used.",
     },
   },
   installWallet: {

From c4cb432f810c31d1109a6ac3dae490585e4f4829 Mon Sep 17 00:00:00 2001
From: Bobo <bobo.kovacevic@gmail.com>
Date: Thu, 19 Oct 2023 08:57:34 +0200
Subject: [PATCH 16/16] Bug fix for avatar broken image

---
 src/components/header/modals/account-unification/AuStep3.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/header/modals/account-unification/AuStep3.vue b/src/components/header/modals/account-unification/AuStep3.vue
index d68ff835d..544b1b7e0 100644
--- a/src/components/header/modals/account-unification/AuStep3.vue
+++ b/src/components/header/modals/account-unification/AuStep3.vue
@@ -31,7 +31,7 @@
           {{ $t('wallet.unifiedAccount.accountIcon') }}
         </div>
         <button type="button" class="box--account-icon" @click="selectNft">
-          <img v-if="avatar" :src="avatar.image" class="icon" />
+          <img v-if="avatar?.image" :src="avatar.image" class="icon" />
           <jazzicon v-else :address="currentAccount" :diameter="32" class="icon" />
         </button>
       </div>