From ba55301cc84c2d1beb920b431072cbdf6f9490c8 Mon Sep 17 00:00:00 2001
From: Bobo <bobo.kovacevic@gmail.com>
Date: Tue, 24 Oct 2023 12:40:59 +0200
Subject: [PATCH] Account unification - avatar selection (#975)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* useNft hook

* Select and display NFT avatar

* Read avatar url

* Avatar selection done

* Removed Bluez url

* Code cleanup and refactoring

* Show avatar on unification overview

* 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>

* Lockdrop logic removed (#954)

* 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>

* 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>

* Lockdrop logic removed (#954)

* 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>

* 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>

* Merge

* Removed unused variables

* Enum for unification steps

* Bug fix for avatar broken image

---------

Co-authored-by: impelcrypto <92044428+impelcrypto@users.noreply.github.com>
Co-authored-by: Gregory Luneau <greg@astar.network>
Co-authored-by: impelcrypto <impelcrypto@gmail.com>
Co-authored-by: Ayumi Takahashi <ayumee528@gmail.com>
---
 src/components/assets/Account.vue             |  11 +-
 .../header/modals/ModalAccountUnification.vue | 131 +++++++++++++-----
 .../modals/account-unification/AuIcon.vue     |  32 +++++
 .../modals/account-unification/AuStep1Evm.vue |   2 +-
 .../account-unification/AuStep1Native.vue     |   2 +-
 .../modals/account-unification/AuStep2.vue    |   2 +-
 .../modals/account-unification/AuStep3.vue    |  36 +++--
 .../modals/account-unification/AuStep5.vue    |  17 ++-
 .../modals/account-unification/SelectNft.vue  |  60 +++++---
 .../account-unification/UserAccount.vue       |  19 +--
 .../styles/modal-account-unification.scss     |  21 +--
 src/hooks/useAccount.ts                       |  28 +++-
 src/hooks/useNft.ts                           |  38 +++++
 src/hooks/wallet/useAccountUnification.ts     |  35 ++++-
 src/i18n/en-US/index.ts                       |   5 +-
 src/store/general/state.ts                    |   3 +
 src/v2/models/Identity.ts                     |   8 ++
 .../implementations/IdentityRepository.ts     |   5 +-
 .../implementations/NftRepository.ts          |   2 -
 src/v2/services/IIdentityService.ts           |   5 +
 .../AccountUnificationService.ts              |  26 +---
 .../implementations/IdentityService.ts        |  20 ++-
 22 files changed, 375 insertions(+), 133 deletions(-)
 create mode 100644 src/components/header/modals/account-unification/AuIcon.vue
 create mode 100644 src/hooks/useNft.ts

diff --git a/src/components/assets/Account.vue b/src/components/assets/Account.vue
index 3528a3623..7877d7f2d 100644
--- a/src/components/assets/Account.vue
+++ b/src/components/assets/Account.vue
@@ -3,8 +3,13 @@
     <div class="container">
       <div class="row--details">
         <div class="column-account-name">
+          <au-icon
+            v-if="isAccountUnified"
+            :native-address="unifiedAccount?.nativeAddress"
+            :icon-url="unifiedAccount?.avatarUrl"
+          />
           <img
-            v-if="iconWallet"
+            v-else-if="iconWallet"
             width="24"
             :src="iconWallet"
             alt="wallet-icon"
@@ -98,6 +103,7 @@ import {
   useNetworkInfo,
   usePrice,
   useWalletIcon,
+  useAccountUnification,
 } from 'src/hooks';
 import { useEvmAccount } from 'src/hooks/custom-signature/useEvmAccount';
 import { getEvmMappedSs58Address, setAddressMapping } from 'src/hooks/helper/addressUtils';
@@ -136,6 +142,7 @@ export default defineComponent({
     const { nativeTokenUsd } = usePrice();
     const { requestSignature } = useEvmAccount();
     const { iconWallet } = useWalletIcon();
+    const { unifiedAccount, isAccountUnified } = useAccountUnification();
 
     const store = useStore();
     const { t } = useI18n();
@@ -248,6 +255,8 @@ export default defineComponent({
       supportWalletObj,
       signatoryIconWallet,
       isAccountUnification,
+      unifiedAccount,
+      isAccountUnified,
       isZkEvm,
       getShortenAddress,
       copyAddress,
diff --git a/src/components/header/modals/ModalAccountUnification.vue b/src/components/header/modals/ModalAccountUnification.vue
index 5bb23852a..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,58 +24,76 @@
           :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"
           :selected-evm-address="selectedEvmAddress"
           :is-fetching-xc20-tokens="isFetchingXc20Tokens"
           :is-edit="false"
-          @next="updateSteps(transferXc20Tokens.length > 0 ? 4 : 5)"
+          :is-busy="isLoading"
+          :avatar="avatar"
+          @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"
           :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(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 === UnificationSteps.SelectAvatar">
+        <select-nft
+          :evm-address="unifiedAccount ? unifiedAccount.evmAddress : selectedEvmAddress"
+          :avatar-metadata="avatar"
+          @next="setAvatar"
+        />
+      </div>
       <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>
@@ -91,7 +113,20 @@ 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 { UnifiedAccount } from 'src/store/general/state';
+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: {
@@ -103,6 +138,7 @@ export default defineComponent({
     AuStep4,
     AuStep5,
     AuStep6,
+    SelectNft,
   },
   props: {
     isOpen: {
@@ -122,9 +158,7 @@ export default defineComponent({
     const { currentAccount } = useAccount();
     const isLoading = computed<boolean>(() => store.getters['general/isLoading']);
     const totalCost = ref<string>('');
-    const unifiedAccount = computed<UnifiedAccount>(
-      () => store.getters['general/getUnifiedAccount']
-    );
+    const avatar = ref<NftMetadata | undefined>(undefined);
 
     const {
       selectedEvmAddress,
@@ -135,6 +169,7 @@ export default defineComponent({
       isLoadingDappStaking,
       accountName,
       isSendingXc20Tokens,
+      unifiedAccount,
       setAccountName,
       setWeb3,
       handleTransferXc20Tokens,
@@ -171,28 +206,47 @@ export default defineComponent({
 
     onMounted(async () => {
       totalCost.value = await getCost();
+
+      if (unifiedAccount.value?.avatarMetadata) {
+        avatar.value = unifiedAccount.value?.avatarMetadata;
+      }
     });
 
     onUnmounted(() => {
       window.removeEventListener('resize', onHeightChange);
     });
 
+    const setAvatar = async (nft: NftMetadata): Promise<void> => {
+      avatar.value = nft;
+      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,
           selectedEvmAddress.value,
-          accountName.value
+          accountName.value,
+          avatar.value?.contractAddress,
+          avatar.value?.tokenId
         );
 
         if (!success) {
           return;
         }
-      } 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 === UnificationSteps.ExecuteUpdateIdentity) {
+        if (unifiedAccount.value) {
+          await updateAccount(
+            unifiedAccount.value.nativeAddress,
+            accountName.value,
+            avatar.value?.contractAddress,
+            avatar.value?.tokenId
+          );
+          await checkIfUnified(unifiedAccount.value?.nativeAddress);
+        }
       }
 
       currentStep.value = step;
@@ -204,24 +258,26 @@ 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 === UnificationSteps.SelectAvatar) {
+        return t('wallet.unifiedAccount.selectAvatar');
       } else {
         return t('wallet.unifiedAccount.yourAccount');
       }
@@ -245,12 +301,15 @@ export default defineComponent({
       isLoading,
       totalCost,
       unifiedAccount,
+      avatar,
       closeModal,
       backModal,
       updateSteps,
       setWeb3,
       setAccountName,
       handleTransferXc20Tokens,
+      setAvatar,
+      UnificationSteps,
     };
   },
 });
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..e917eb76d
--- /dev/null
+++ b/src/components/header/modals/account-unification/AuIcon.vue
@@ -0,0 +1,32 @@
+<template>
+  <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">
+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: {
+    nativeAddress: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    iconUrl: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+  },
+
+  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/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/AuStep3.vue b/src/components/header/modals/account-unification/AuStep3.vue
index b29d342e1..544b1b7e0 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>
@@ -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">
-          <jazzicon :address="currentAccount" :diameter="32" class="icon" />
+        <button type="button" class="box--account-icon" @click="selectNft">
+          <img v-if="avatar?.image" :src="avatar.image" class="icon" />
+          <jazzicon v-else :address="currentAccount" :diameter="32" class="icon" />
         </button>
       </div>
     </div>
@@ -41,7 +41,7 @@
     <div>
       <astar-button
         class="btn"
-        :disabled="accountName === '' || isFetchingXc20Tokens || !accountNameSet"
+        :disabled="accountName === '' || isFetchingXc20Tokens || isBusy"
         @click="next()"
         >{{ isEdit ? $t('wallet.unifiedAccount.save') : $t('next') }}</astar-button
       >
@@ -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({
@@ -73,35 +74,40 @@ export default defineComponent({
       type: Boolean,
       required: true,
     },
+    isBusy: {
+      type: Boolean,
+      required: true,
+    },
     isEdit: {
       type: Boolean,
       default: false,
     },
+    avatar: {
+      type: Object as PropType<NftMetadata | undefined>,
+      default: undefined,
+    },
   },
-  emits: ['next'],
+  emits: ['next', 'onSelectNft'],
   setup(props, { emit }) {
     const next = () => {
       emit('next');
     };
 
+    const selectNft = () => {
+      emit('onSelectNft');
+    };
+
     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/modals/account-unification/AuStep5.vue b/src/components/header/modals/account-unification/AuStep5.vue
index 964132484..2e9f7f043 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,13 +64,17 @@ export default defineComponent({
       type: String,
       required: true,
     },
+    avatarUrl: {
+      type: String,
+      required: true,
+    },
     isBusy: {
       type: Boolean,
       required: true,
     },
   },
   emits: ['next'],
-  setup(props, { emit }) {
+  setup(_, { emit }) {
     const isChecked = ref<boolean>(false);
 
     const next = (): void => {
diff --git a/src/components/header/modals/account-unification/SelectNft.vue b/src/components/header/modals/account-unification/SelectNft.vue
index f0d5d3dfd..28cdfafc1 100644
--- a/src/components/header/modals/account-unification/SelectNft.vue
+++ b/src/components/header/modals/account-unification/SelectNft.vue
@@ -2,46 +2,72 @@
   <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>
+    <div v-if="ownedNfts.length === 0 && !isBusy" class="item">
+      {{ $t('wallet.unifiedAccount.noNfts') }}
+    </div>
 
     <!-- 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 { NftMetadata } from 'src/v2/models';
+import { defineComponent, onMounted, ref, PropType, watch } from 'vue';
 
 export default defineComponent({
   components: {},
+  props: {
+    evmAddress: {
+      type: String,
+      required: true,
+    },
+    avatarMetadata: {
+      type: Object as PropType<NftMetadata | undefined>,
+      default: undefined,
+    },
+  },
   emits: ['next'],
   setup(props, { emit }) {
+    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');
+      }
     };
 
-    const icon_img = {
-      astar_gradient: require('/src/assets/img/astar_icon.svg'),
-    };
+    onMounted(() => {
+      getOwnedNfts(props.evmAddress);
+    });
 
-    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 },
-    ];
+    watch([ownedNfts], () => {
+      selectedIndex.value = ownedNfts.value.findIndex(
+        (nft) =>
+          nft.contractAddress === props.avatarMetadata?.contractAddress &&
+          nft.tokenId === props.avatarMetadata?.tokenId
+      );
+    });
 
     return {
-      nfts,
+      ownedNfts,
+      selectedIndex,
+      isBusy,
       next,
     };
   },
diff --git a/src/components/header/modals/account-unification/UserAccount.vue b/src/components/header/modals/account-unification/UserAccount.vue
index 22a497eb8..8d8eb8b48 100644
--- a/src/components/header/modals/account-unification/UserAccount.vue
+++ b/src/components/header/modals/account-unification/UserAccount.vue
@@ -3,10 +3,9 @@
     <!-- unified -->
     <div v-if="isAccountUnified">
       <div class="text--account-name">
-        <jazzicon
-          class="text--account-name__icon"
-          :address="unifiedAccount?.nativeAddress"
-          :diameter="32"
+        <au-icon
+          :native-address="unifiedAccount?.nativeAddress"
+          :icon-url="unifiedAccount?.avatarUrl"
         />
         <div>{{ unifiedAccount?.name }}</div>
       </div>
@@ -141,18 +140,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 +168,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 75075d6c4..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 {
@@ -275,8 +276,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 731527de9..b784251ee 100644
--- a/src/hooks/useAccount.ts
+++ b/src/hooks/useAccount.ts
@@ -12,6 +12,9 @@ import { IAccountUnificationService } from 'src/v2/services';
 import { Symbols } from 'src/v2/symbols';
 import { computed, ref, watch } from 'vue';
 import { useNetworkInfo } from './useNetworkInfo';
+import { INftRepository } from 'src/v2/repositories';
+import { useNft } from './useNft';
+import { NftMetadata } from 'src/v2/models';
 
 export const ETHEREUM_EXTENSION = 'Ethereum Extension';
 
@@ -20,7 +23,8 @@ const DELAY = 100;
 
 export const useAccount = () => {
   const store = useStore();
-  const { currentNetworkIdx } = useNetworkInfo();
+  const { getProxiedUrl } = useNft();
+  const { currentNetworkIdx, currentNetworkName } = useNetworkInfo();
   const multisig = ref<Multisig>();
 
   const isH160Formatted = computed(() => store.getters['general/isH160Formatted']);
@@ -82,20 +86,42 @@ 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;
+      let nft: NftMetadata | undefined;
+
+      const avatarContractAddress = identity?.getAvatarContractAddress();
+      const avatarTokenId = identity?.getAvatarTokenId();
+      if (avatarContractAddress && avatarTokenId) {
+        nft = await nftRepository.getNftMetadata(
+          currentNetworkName.value.toLowerCase(),
+          avatarContractAddress,
+          avatarTokenId
+        );
+
+        if (nft) {
+          avatarUrl = getProxiedUrl(nft.image);
+        }
+      }
+
       if (isValidEvmAddress(address)) {
         store.commit('general/setUnifiedAccount', {
           nativeAddress: mapped,
           evmAddress: address,
           name,
+          avatarUrl,
+          avatarMetadata: { ...nft, image: avatarUrl },
         });
       } else {
         store.commit('general/setUnifiedAccount', {
           nativeAddress: address,
           evmAddress: mapped,
           name,
+          avatarUrl,
+          avatarMetadata: { ...nft, image: avatarUrl },
         });
       }
     } else {
diff --git a/src/hooks/useNft.ts b/src/hooks/useNft.ts
new file mode 100644
index 000000000..247995958
--- /dev/null
+++ b/src/hooks/useNft.ts
@@ -0,0 +1,38 @@
+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;
+      const nfts = await nftRepository.getOwnedTokens(
+        currentNetworkName.value.toLowerCase(),
+        ownerAddress
+      );
+
+      // Update image uri to use IPFS gateway
+      ownedNfts.value = nfts.map((nft) => {
+        nft.image = getProxiedUrl(nft.image);
+        return nft;
+      });
+    } finally {
+      isBusy.value = false;
+    }
+  };
+
+  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 23a4f0cb1..6949008c3 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';
@@ -34,7 +34,7 @@ import Web3 from 'web3';
 import { AbiItem } from 'web3-utils';
 import { useNetworkInfo } from '../useNetworkInfo';
 import { IIdentityRepository } from 'src/v2/repositories';
-import { EthereumProvider } from '../types/CustomSignature';
+import { UnifiedAccount } from 'src/store/general/state';
 
 const provider = get(window, 'ethereum') as any;
 
@@ -70,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;
   };
@@ -324,18 +329,34 @@ 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> => {
+  const updateAccount = async (
+    nativeAddress: string,
+    accountName: string,
+    avatarContractAddress?: string,
+    avatarTokenId?: string
+  ): Promise<void> => {
     const identityService = container.get<IIdentityService>(Symbols.IdentityService);
-    await identityService.setIdentity(nativeAddress, { display: accountName });
+    await identityService.setIdentity(
+      nativeAddress,
+      identityService.createIdentityData(accountName, avatarContractAddress, avatarTokenId)
+    );
   };
 
   const getCost = async (): Promise<string> => {
@@ -361,6 +382,8 @@ export const useAccountUnification = () => {
     isLoadingDappStaking,
     accountName,
     isSendingXc20Tokens,
+    unifiedAccount,
+    isAccountUnified,
     setAccountName,
     setWeb3,
     handleTransferXc20Tokens,
diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
index d502b2397..d8b865e5e 100644
--- a/src/i18n/en-US/index.ts
+++ b/src/i18n/en-US/index.ts
@@ -209,7 +209,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.',
@@ -218,7 +218,10 @@ export default {
       userTutorials: 'Documentation and tutorials',
       sendingXc20: 'Start sending XC20 tokens, please wait...',
       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: {
diff --git a/src/store/general/state.ts b/src/store/general/state.ts
index bd8733b7f..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;
@@ -34,6 +35,8 @@ export type UnifiedAccount = {
   nativeAddress: string;
   evmAddress: string;
   name: string;
+  avatarUrl?: string;
+  avatarMetadata?: NftMetadata;
 };
 
 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,
       });
     });
 
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);
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;
+  }
 }