Account unification - avatar selection

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"
@@ -86,7 +91,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';
@@ -96,11 +108,13 @@ import NativeAssetList from 'src/components/assets/NativeAssetList.vue';
 import EvmNativeToken from 'src/components/assets/EvmNativeToken.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,
     EvmNativeToken,
+    AuIcon,
   },
   props: {
     ttlErc20Amount: {
@@ -126,6 +140,7 @@ export default defineComponent({
     const { nativeTokenUsd } = usePrice();
     const { requestSignature } = useEvmAccount();
     const { iconWallet } = useWalletIcon();
+    const { unifiedAccount, isAccountUnified } = useAccountUnification();
 
     const store = useStore();
     const { t } = useI18n();
@@ -238,6 +253,8 @@ export default defineComponent({
       supportWalletObj,
       signatoryIconWallet,
       isAccountUnification,
+      unifiedAccount,
+      isAccountUnified,
       getShortenAddress,
       copyAddress,
       showAccountUnificationModal,

src/components/header/modals/ModalAccountUnification.vue

@@ -30,7 +30,10 @@
           :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)"
         />
       </div>
       <div v-else-if="currentStep === 100 && unifiedAccount">
@@ -40,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">
@@ -61,13 +67,21 @@
         <au-step5
           :account-name="accountName"
           :selected-evm-address="selectedEvmAddress"
+          :avatar-url="avatar?.image ?? ''"
           :is-busy="isLoading"
           @next="updateSteps(6)"
         />
       </div>
       <div v-else-if="currentStep === 6">
         <au-step6 />
       </div>
+      <div v-else-if="currentStep === 200">
+        <select-nft
+          :evm-address="unifiedAccount ? unifiedAccount.evmAddress : selectedEvmAddress"
+          :avatar-metadata="avatar"
+          @next="setAvatar"
+        />
+      </div>
       <div v-else>
         <user-account
           :set-account-name="setAccountName"
@@ -91,7 +105,8 @@ 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';
 
 export default defineComponent({
   components: {
@@ -103,6 +118,7 @@ export default defineComponent({
     AuStep4,
     AuStep5,
     AuStep6,
+    SelectNft,
   },
   props: {
     isOpen: {
@@ -122,9 +138,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 +149,7 @@ export default defineComponent({
       isLoadingDappStaking,
       accountName,
       isSendingXc20Tokens,
+      unifiedAccount,
       setAccountName,
       setWeb3,
       handleTransferXc20Tokens,
@@ -171,28 +186,46 @@ 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 ? 100 : 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) {
           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);
+        if (unifiedAccount.value) {
+          await updateAccount(
+            unifiedAccount.value.nativeAddress,
+            accountName.value,
+            avatar.value?.contractAddress,
+            avatar.value?.tokenId
+          );
+          await checkIfUnified(unifiedAccount.value?.nativeAddress);
+        }
       }
 
       currentStep.value = step;
@@ -222,6 +255,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');
       }
@@ -245,12 +280,14 @@ export default defineComponent({
       isLoading,
       totalCost,
       unifiedAccount,
+      avatar,
       closeModal,
       backModal,
       updateSteps,
       setWeb3,
       setAccountName,
       handleTransferXc20Tokens,
+      setAvatar,
     };
   },
 });

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>

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: {},

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');
     };

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');
     };

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" :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,
     };
   },
 });