Account unification - avatar selection (#975)

* 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>
AstarNetwork · Oct 24, 2023 · ba55301 · ba55301
1 parent 88bce99
commit ba55301
Show file tree

Hide file tree

Showing 22 changed files with 375 additions and 133 deletions.
diff --git 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
@@ -8,70 +8,92 @@
     @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"
           :is-staking="isStaking"
           :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
@@ -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
@@ -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
@@ -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
@@ -74,7 +74,7 @@ export default defineComponent({
     },
   },
   emits: ['next'],
-  setup(props, { emit }) {
+  setup(_, { emit }) {
     const next = (): void => {
       emit('next');
     };