UA logic integration (#943)

* Basic integration implemented * Disable submit button on action
AstarNetwork · Oct 2, 2023 · f4eed50 · f4eed50
1 parent d1e5375
commit f4eed50
Show file tree

Hide file tree

Showing 7 changed files with 71 additions and 59 deletions.
diff --git a/src/components/assets/Assets.vue b/src/components/assets/Assets.vue
@@ -4,8 +4,6 @@
       <div class="separator" />
     </div>
     <div class="container--assets">
-      <astar-button @click="unify()">Unify accounts</astar-button>
-      <astar-button @click="setIdentity()">Set setIdentity</astar-button>
       <div class="container--account">
         <div class="title--account">
           <span class="text--xl">
@@ -55,12 +53,8 @@ import { isValidEvmAddress } from '@astar-network/astar-sdk-core';
 import { useAccount, useBalance, useDispatchGetDapps, useNetworkInfo } from 'src/hooks';
 import { useStore } from 'src/store';
 import { EvmAssets, XcmAssets, XvmAssets } from 'src/store/assets/state';
-import { Asset, IdentityData } from 'src/v2/models';
+import { Asset } from 'src/v2/models';
 import { computed, defineComponent, ref, watch, watchEffect, onUnmounted } from 'vue';
-import { container } from 'src/v2/common';
-import { IAccountUnificationService, IIdentityService } from 'src/v2/services';
-import { Symbols } from 'src/v2/symbols';
-import { INftRepository } from 'src/v2/repositories';
 
 export default defineComponent({
   components: {
@@ -174,38 +168,6 @@ export default defineComponent({
       window.removeEventListener(event, handler);
     });
 
-    // Temp account unification test, TODO remove later
-    const unify = async () => {
-      const nativeAddress = 'XmSTidw9qbJJdC4ntotpzwCkR7iAgkMUnLv6rg29Qa3aoQa';
-      const evmAddress = '0x68F6F226c5D0C8124b62b98Ac797dD6208bAFE90';
-      const service = container.get<IAccountUnificationService>(Symbols.AccountUnificationService);
-      await service.unifyAccounts(nativeAddress, evmAddress, 'Bobo AU');
-      console.log('mapped native', await service.getMappedNativeAddress(evmAddress));
-      console.log('mapped evm', await service.getMappedEvmAddress(nativeAddress));
-    };
-
-    // Temp set identity test, TODO remove later
-    const setIdentity = async () => {
-      const tokenOwnerAddress = '0xe42A2ADF3BEe1c195f4D72410421ad7908388A6a';
-      const nftRepository = container.get<INftRepository>(Symbols.NftRepository);
-      const nfts = await nftRepository.getNftMetadata(
-        'astar',
-        '0x7b2152e51130439374672af463b735a59a47ea85',
-        '8893zß'
-      );
-      console.log(nfts);
-
-      const nativeAddress = 'XmSTidw9qbJJdC4ntotpzwCkR7iAgkMUnLv6rg29Qa3aoQa';
-      const service = container.get<IIdentityService>(Symbols.IdentityService);
-      await service.setIdentity(
-        nativeAddress,
-        new IdentityData('aaa', [
-          { key: 'ContractAddress', value: '0x18F6F226c5D0C8124b62b98Ac797dD6208bAFE90' },
-          { key: 'TokenId', value: '2000' },
-        ])
-      );
-    };
-
     return {
       evmAssets,
       isLoadingXcmAssetsAmount,
@@ -219,8 +181,6 @@ export default defineComponent({
       accountData,
       isModalXcmBridge,
       isLoading,
-      unify,
-      setIdentity,
     };
   },
 });

diff --git a/src/components/header/modals/ModalAccountUnification.vue b/src/components/header/modals/ModalAccountUnification.vue
@@ -39,6 +39,7 @@
         <step5
           :account-name="accountName"
           :selected-evm-address="selectedEvmAddress"
+          :is-busy="isLoading"
           @next="updateSteps(6)"
         />
       </div>
@@ -54,7 +55,7 @@
 <script lang="ts">
 import { useStore } from 'src/store';
 import { wait } from '@astar-network/astar-sdk-core';
-import { useAccountUnification, useBreakpoints } from 'src/hooks';
+import { useAccount, useAccountUnification, useBreakpoints } from 'src/hooks';
 import { computed, defineComponent, onUnmounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import UserAccount from 'src/components/header/modals/account-unification/UserAccount.vue';
@@ -92,6 +93,8 @@ export default defineComponent({
     const isSelected = ref<boolean>(false);
     const isClosing = ref<boolean>(false);
     const currentStep = ref<number>(0);
+    const { currentAccount } = useAccount();
+    const isLoading = computed<boolean>(() => store.getters['general/isLoading']);
 
     const {
       selectedEvmAddress,
@@ -103,6 +106,7 @@ export default defineComponent({
       accountName,
       setAccountName,
       setWeb3,
+      unifyAccounts,
     } = useAccountUnification();
 
     const closeModal = async (): Promise<void> => {
@@ -133,7 +137,20 @@ export default defineComponent({
       window.removeEventListener('resize', onHeightChange);
     });
 
-    const updateSteps = (step: number): void => {
+    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
+        );
+
+        if (!success) {
+          return;
+        }
+      }
+
       currentStep.value = step;
     };
 
@@ -178,6 +195,7 @@ export default defineComponent({
       isFetchingXc20Tokens,
       isLoadingDappStaking,
       accountName,
+      isLoading,
       closeModal,
       backModal,
       updateSteps,

diff --git a/src/components/header/modals/account-unification/Step5.vue b/src/components/header/modals/account-unification/Step5.vue
@@ -31,7 +31,7 @@
 
     <!-- Action -->
     <div>
-      <astar-button class="btn" @click="next()">
+      <astar-button :disabled="isBusy" class="btn" @click="next()">
         {{ $t('dappStaking.modals.submit') }}
       </astar-button>
     </div>
@@ -55,6 +55,10 @@ export default defineComponent({
       type: String,
       required: true,
     },
+    isBusy: {
+      type: Boolean,
+      required: true,
+    },
   },
   emits: ['next'],
   setup(props, { emit }) {

diff --git a/src/hooks/wallet/useAccountUnification.ts b/src/hooks/wallet/useAccountUnification.ts
@@ -15,7 +15,7 @@ import {
 import { MyStakeInfo, useCurrentEra } from 'src/hooks';
 import { container } from 'src/v2/common';
 import { DappCombinedInfo } from 'src/v2/models/DappsStaking';
-import { IDappStakingService } from 'src/v2/services';
+import { IAccountUnificationService, IDappStakingService } from 'src/v2/services';
 import { Symbols } from 'src/v2/symbols';
 import { BN } from '@polkadot/util';
 import ABI from 'src/config/abi/ERC20.json';
@@ -260,6 +260,18 @@ export const useAccountUnification = () => {
     }
   };
 
+  const unifyAccounts = async (
+    nativeAddress: string,
+    evmAddress: string,
+    accountName: string
+  ): Promise<boolean> => {
+    const unificationService = container.get<IAccountUnificationService>(
+      Symbols.AccountUnificationService
+    );
+
+    return unificationService.unifyAccounts(nativeAddress, evmAddress, accountName);
+  };
+
   watch([currentAccount], setWeb3);
   watch([web3], updateEvmProvider);
   watch([selectedEvmAddress, dapps, era], checkStakerInfo);
@@ -276,5 +288,6 @@ export const useAccountUnification = () => {
     accountName,
     setAccountName,
     setWeb3,
+    unifyAccounts,
   };
 };
diff --git a/src/v2/services/IAccountUnificationService.ts b/src/v2/services/IAccountUnificationService.ts
@@ -5,7 +5,7 @@ export interface IAccountUnificationService {
     accountName: string,
     avatarNftAddress?: string,
     avatarNftId?: string
-  ): Promise<void>;
+  ): Promise<boolean>;
   getMappedNativeAddress(evmAddress: string): Promise<string>;
   getMappedEvmAddress(nativeAddress: string): Promise<string>;
 }
diff --git a/src/v2/services/implementations/AccountUnificationService.ts b/src/v2/services/implementations/AccountUnificationService.ts
@@ -1,11 +1,21 @@
 import { injectable, inject } from 'inversify';
 import { Symbols } from 'src/v2/symbols';
-import { IWalletService, WalletType, IAccountUnificationService } from 'src/v2/services';
-import { IAccountUnificationRepository, ISystemRepository } from 'src/v2/repositories';
+import {
+  IWalletService,
+  WalletType,
+  IAccountUnificationService,
+  IGasPriceProvider,
+} from 'src/v2/services';
+import {
+  IAccountUnificationRepository,
+  IEthCallRepository,
+  ISystemRepository,
+} from 'src/v2/repositories';
 import { decodeAddress } from '@polkadot/util-crypto';
 import { ExtrinsicStatusMessage, IEventAggregator } from 'src/v2/messaging';
 import { Guard } from 'src/v2/common';
 import { IdentityData } from 'src/v2/models';
+import { MetamaskWalletService } from './MetamaskWalletService';
 
 @injectable()
 export class AccountUnificationService implements IAccountUnificationService {
@@ -15,7 +25,9 @@ export class AccountUnificationService implements IAccountUnificationService {
     @inject(Symbols.SystemRepository) private systemRepo: ISystemRepository,
     @inject(Symbols.AccountUnificationRepository)
     private unificationRepo: IAccountUnificationRepository,
-    @inject(Symbols.EventAggregator) private eventAggregator: IEventAggregator
+    @inject(Symbols.EventAggregator) private eventAggregator: IEventAggregator,
+    @inject(Symbols.EthCallRepository) private ethCallRepository: IEthCallRepository,
+    @inject(Symbols.GasPriceProvider) private gasPriceProvider: IGasPriceProvider
   ) {}
 
   public async unifyAccounts(
@@ -24,7 +36,7 @@ export class AccountUnificationService implements IAccountUnificationService {
     accountName: string,
     avatarNftAddress?: string,
     avatarNftId?: string
-  ): Promise<void> {
+  ): Promise<boolean> {
     try {
       const chainId = await this.systemRepo.getChainId();
       const genesisHash = await this.systemRepo.getBlockHash(0);
@@ -44,7 +56,15 @@ export class AccountUnificationService implements IAccountUnificationService {
       };
 
       // Sign payload with EVM account.
-      const evmWallet = this.walletFactory(WalletType.Metamask);
+      // TODO provide wallet name as the method parameter.
+      const evmWallet = new MetamaskWalletService(
+        this.systemRepo,
+        this.ethCallRepository,
+        this.eventAggregator,
+        'metamask',
+        this.gasPriceProvider
+      );
+      // const evmWallet = this.walletFactory(WalletType.Metamask);
       const signedPayload = await evmWallet.signPayload(domain, types, value);
 
       // Claim account with polkadot wallet.
@@ -60,14 +80,10 @@ export class AccountUnificationService implements IAccountUnificationService {
         extrinsic: transaction,
         senderAddress: nativeAddress,
       });
+
+      return true;
     } catch (error) {
-      const e = error as Error;
-      this.eventAggregator.publish(
-        new ExtrinsicStatusMessage({
-          success: false,
-          message: e.toString(),
-        })
-      );
+      return false;
     }
   }
 

diff --git a/src/v2/services/implementations/PolkadotWalletService.ts b/src/v2/services/implementations/PolkadotWalletService.ts
@@ -62,7 +62,7 @@ export class PolkadotWalletService extends WalletService implements IWalletServi
 
     let result: string | null = null;
     try {
-      return new Promise<string>(async (resolve) => {
+      return new Promise<string>(async (resolve, reject) => {
         !isMobileDevice && this.detectExtensionsAction(true);
         await this.checkExtension();
         let tip = transactionTip?.toString();
@@ -139,6 +139,7 @@ export class PolkadotWalletService extends WalletService implements IWalletServi
               } catch (error) {
                 this.eventAggregator.publish(new BusyMessage(false));
                 unsub();
+                reject(error as Error);
               }
             }
           );