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>
AstarNetwork · Oct 13, 2023 · f89539e · f89539e
1 parent eae40f1
commit f89539e
Show file tree

Hide file tree

Showing 62 changed files with 2,918 additions and 64 deletions.
diff --git a/src-pwa/pwa-flag.d.ts b/src-pwa/pwa-flag.d.ts
@@ -0,0 +1,10 @@
+/* eslint-disable */
+// THIS FEATURE-FLAG FILE IS AUTOGENERATED,
+//  REMOVAL OR CHANGES WILL CAUSE RELATED TYPES TO STOP WORKING
+import 'quasar/dist/types/feature-flag';
+
+declare module 'quasar/dist/types/feature-flag' {
+  interface QuasarFeatureFlags {
+    pwa: true;
+  }
+}
diff --git a/src/assets/img/astar_icon.svg b/src/assets/img/astar_icon.svg
diff --git a/src/components/assets/Account.vue b/src/components/assets/Account.vue
@@ -21,6 +21,23 @@
               <span class="text--accent">{{ $n(totalBal) }} USD</span>
             </div>
             <div class="column__icons">
+              <div v-if="isAccountUnification">
+                <button
+                  type="button"
+                  class="icon--primary icon--account"
+                  @click="showAccountUnificationModal()"
+                >
+                  <!-- TODO: will move a new icon to the AstarUI later -->
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" class="icon">
+                    <path
+                      d="M480-492.309q-57.749 0-98.874-41.124-41.125-41.125-41.125-98.874 0-57.75 41.125-98.874 41.125-41.125 98.874-41.125 57.749 0 98.874 41.125 41.125 41.124 41.125 98.874 0 57.749-41.125 98.874-41.125 41.124-98.874 41.124ZM180.001-187.694v-88.922q0-29.384 15.962-54.422 15.961-25.038 42.653-38.5 59.308-29.077 119.654-43.615T480-427.691q61.384 0 121.73 14.538 60.346 14.538 119.654 43.615 26.692 13.462 42.653 38.5 15.962 25.038 15.962 54.422v88.922H180.001ZM240-247.693h480v-28.923q0-12.154-7.039-22.5-7.038-10.346-19.115-16.885-51.692-25.461-105.418-38.577Q534.702-367.693 480-367.693t-108.428 13.115q-53.726 13.116-105.418 38.577-12.077 6.539-19.115 16.885Q240-288.77 240-276.616v28.923Zm240-304.614q33 0 56.5-23.5t23.5-56.5q0-33-23.5-56.5t-56.5-23.5q-33 0-56.5 23.5t-23.5 56.5q0 33 23.5 56.5t56.5 23.5Zm0-80Zm0 384.614Z"
+                    />
+                  </svg>
+                </button>
+                <q-tooltip>
+                  <span class="text--tooltip">Unify accounts</span>
+                </q-tooltip>
+              </div>
               <div>
                 <button id="copyAddress" type="button" class="icon--primary" @click="copyAddress">
                   <astar-icon-copy />
@@ -98,7 +115,13 @@ export default defineComponent({
   setup(props) {
     const balUsd = ref<number | null>(null);
     const isCheckingSignature = ref<boolean>(false);
-    const { currentAccount, currentAccountName, multisig } = useAccount();
+    const {
+      currentAccount,
+      currentAccountName,
+      multisig,
+      showAccountUnificationModal,
+      isAccountUnification,
+    } = useAccount();
     const { balance, isLoadingBalance } = useBalance(currentAccount);
     const { nativeTokenUsd } = usePrice();
     const { requestSignature } = useEvmAccount();
@@ -214,8 +237,10 @@ export default defineComponent({
       multisig,
       supportWalletObj,
       signatoryIconWallet,
+      isAccountUnification,
       getShortenAddress,
       copyAddress,
+      showAccountUnificationModal,
     };
   },
 });

diff --git a/src/components/assets/Assets.vue b/src/components/assets/Assets.vue
@@ -150,8 +150,8 @@ export default defineComponent({
     watch([currentAccount], handleUpdateEvmAssets, { immediate: isH160.value });
     watchEffect(handleImportingCustomToken);
 
-    const isEnableXcm = computed(
-      () => !isShibuya.value && xcmAssets.value.assets && xcmAssets.value.assets.length > 0
+    const isEnableXcm = computed<boolean>(
+      () => xcmAssets.value.assets && xcmAssets.value.assets.length > 0
     );
 
     const handleEvmAssetLoader = (): void => {

diff --git a/src/components/assets/Erc20Currency.vue b/src/components/assets/Erc20Currency.vue
@@ -31,7 +31,8 @@
             </div>
           </div>
           <div class="column--asset-buttons column--buttons--multi">
-            <div v-if="token.isXC20" />
+            <!-- Memo: test checking if styling won't break -->
+            <!-- <div v-if="token.isXC20" /> -->
             <router-link :to="buildTransferPageLink(token.symbol)">
               <button class="btn btn--sm">
                 {{ $t('assets.transfer') }}

diff --git a/src/components/assets/styles/account.scss b/src/components/assets/styles/account.scss
@@ -100,8 +100,8 @@
   display: flex;
   justify-content: flex-end;
   column-gap: 24px;
-  @media (min-width: $xl) {
-    column-gap: 80px;
+  @media (max-width: $sm) {
+    column-gap: 16px;
   }
 }
 
@@ -156,3 +156,10 @@
     background-color: $body-bg-dark;
   }
 }
+
+.icon--primary.icon--account{
+  fill: $astar-blue;
+  &:hover{
+    fill: white;
+  }
+}
diff --git a/src/components/assets/styles/assets.scss b/src/components/assets/styles/assets.scss
@@ -12,7 +12,8 @@
 }
 
 .container--assets {
-  display: grid;
+  display: flex;
+  flex-direction: column;
   row-gap: 32px;
   margin-bottom: 24px;
   @media (min-width: $xxxl) {

diff --git a/src/components/header/Header.vue b/src/components/header/Header.vue
@@ -43,6 +43,7 @@
       :connect-ethereum-wallet="connectEthereumWallet"
       :selected-wallet="selectedWallet"
       :open-polkasafe-modal="openPolkasafeModal"
+      :open-account-unification-modal="openAccountUnificationModal"
     />
 
     <modal-account
@@ -62,11 +63,25 @@
       :disconnect-account="disconnectAccount"
       :current-account="currentAccount"
     />
+    <modal-account-unification
+      v-if="modalAccountUnificationSelect"
+      v-model:isOpen="modalAccountUnificationSelect"
+      :open-select-modal="openSelectModal"
+    />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRefs, computed, ref, watch } from 'vue';
+import {
+  defineComponent,
+  reactive,
+  toRefs,
+  computed,
+  ref,
+  watch,
+  onMounted,
+  onUnmounted,
+} from 'vue';
 import { useAccount, useConnectWallet } from 'src/hooks';
 import { useStore } from 'src/store';
 import { useRoute } from 'vue-router';
@@ -79,10 +94,14 @@ import NetworkButton from 'src/components/header/NetworkButton.vue';
 import ModalConnectWallet from 'src/components/header/modals/ModalConnectWallet.vue';
 import ModalAccount from 'src/components/header/modals/ModalAccount.vue';
 import ModalPolkasafe from 'src/components/header/modals/ModalPolkasafe.vue';
+import ModalAccountUnification from 'src/components/header/modals/ModalAccountUnification.vue';
 import ModalNetwork from 'src/components/header/modals/ModalNetwork.vue';
 import Logo from 'src/components/common/Logo.vue';
 import HeaderComp from './HeaderComp.vue';
 import { WalletModalOption } from 'src/config/wallets';
+import { container } from 'src/v2/common';
+import { IEventAggregator, UnifyAccountMessage } from 'src/v2/messaging';
+import { Symbols } from 'src/v2/symbols';
 
 interface Modal {
   modalNetwork: boolean;
@@ -100,6 +119,7 @@ export default defineComponent({
     HeaderComp,
     TroubleHelp,
     ModalPolkasafe,
+    ModalAccountUnification,
   },
   setup() {
     const { width, screenSize } = useBreakpoints();
@@ -117,13 +137,15 @@ export default defineComponent({
       selectedWallet,
       modalAccountSelect,
       modalPolkasafeSelect,
+      modalAccountUnificationSelect,
       setCloseModal,
       setWalletModal,
       openSelectModal,
       changeAccount,
       connectEthereumWallet,
       disconnectAccount,
       openPolkasafeModal,
+      openAccountUnificationModal,
     } = useConnectWallet();
 
     const clickAccountBtn = (): void => {
@@ -157,6 +179,17 @@ export default defineComponent({
     const route = useRoute();
     const path = computed<string>(() => route.path);
     const headerName = ref<string>('');
+    const eventAggregator = container.get<IEventAggregator>(Symbols.EventAggregator);
+
+    onMounted(() => {
+      eventAggregator.subscribe(UnifyAccountMessage.name, () => {
+        modalAccountUnificationSelect.value = true;
+      });
+    });
+
+    onUnmounted(() => {
+      eventAggregator.unsubscribe(UnifyAccountMessage.name, () => {});
+    });
 
     watch(
       path,
@@ -183,6 +216,7 @@ export default defineComponent({
       width,
       screenSize,
       isLoading,
+      modalAccountUnificationSelect,
       clickAccountBtn,
       clickNetworkBtn,
       setCloseModal,
@@ -192,6 +226,7 @@ export default defineComponent({
       connectEthereumWallet,
       disconnectAccount,
       openPolkasafeModal,
+      openAccountUnificationModal,
     };
   },
 });