feat: added lockdrop account UI

src/App.vue

@@ -65,7 +65,7 @@ import {
 import { setCurrentWallet } from 'src/v2/app.container';
 import { container } from 'src/v2/common';
 import { Symbols } from 'src/v2/symbols';
-import { useAccount, useAppRouter, useDecommission } from 'src/hooks';
+import { ETHEREUM_EXTENSION, useAccount, useAppRouter, useDecommission } from 'src/hooks';
 import { LOCAL_STORAGE } from 'src/config/localStorage';
 import {
   AccountLedgerChangedMessage,
@@ -206,7 +206,8 @@ export default defineComponent({
     // Handle wallet change so we can inject proper wallet
     let previousAddress: string | undefined = undefined;
     watch([isEthWallet, currentWallet, isH160, currentAccountName], async () => {
-      setCurrentWallet(isEthWallet.value, currentWallet.value);
+      const isLockdropAccount = !isH160.value && currentAccountName.value === ETHEREUM_EXTENSION;
+      setCurrentWallet(isEthWallet.value, currentWallet.value, isLockdropAccount);
 
       // Subscribe to an account specific dApp staking v3 data.
       if (!isDappStakingV3.value) return;

src/components/assets/Account.vue

@@ -5,6 +5,13 @@
         <div class="account-bg" :style="{ backgroundImage: `url(${bg})` }" />
 
         <div class="wallet-tab">
+          <div v-if="isLockdropAccount && isAllowLockdropDispatch" class="row--lockdrop">
+            <span>{{ $t('assets.lockdropAccount') }}</span>
+            <span class="text--switch-account" @click="toggleEvmWalletSchema">
+              {{ $t(isH160 ? 'assets.switchToNative' : 'assets.switchToEvm') }}
+            </span>
+          </div>
+          <div v-else />
           <div class="wallet-tab__bg">
             <!-- EVM -->
             <template v-if="isH160">
@@ -112,6 +119,11 @@
         }}</span>
       </div>
     </div>
+    <modal-lockdrop-warning
+      v-if="isLockdropAccount && !isH160"
+      :is-modal="isModalLockdropWarning"
+      :handle-modal="handleModalLockdropWarning"
+    />
   </div>
 </template>
 <script lang="ts">
@@ -131,16 +143,19 @@ import {
   usePrice,
   useWalletIcon,
   useAccountUnification,
+  useConnectWallet,
 } from 'src/hooks';
 import { useEvmAccount } from 'src/hooks/custom-signature/useEvmAccount';
 import { getEvmMappedSs58Address, setAddressMapping } from 'src/hooks/helper/addressUtils';
 import { useStore } from 'src/store';
 import { computed, defineComponent, ref, watch, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
+import ModalLockdropWarning from 'src/components/assets/modals/ModalLockdropWarning.vue';
 
 export default defineComponent({
   components: {
     AuIcon,
+    ModalLockdropWarning,
   },
   props: {
     ttlErc20Amount: {
@@ -155,6 +170,9 @@ export default defineComponent({
   setup(props) {
     const balUsd = ref<number | null>(null);
     const isCheckingSignature = ref<boolean>(false);
+    const isLockdropAccount = ref<boolean>(false);
+    const isModalLockdropWarning = ref<boolean>(true);
+
     const {
       currentAccount,
       currentAccountName,
@@ -163,6 +181,7 @@ export default defineComponent({
       isAccountUnification,
     } = useAccount();
 
+    const { toggleEvmWalletSchema } = useConnectWallet();
     const { balance, isLoadingBalance } = useBalance(currentAccount);
     const { nativeTokenUsd } = usePrice();
     const { requestSignature } = useEvmAccount();
@@ -176,7 +195,7 @@ export default defineComponent({
     const isH160 = computed<boolean>(() => store.getters['general/isH160Formatted']);
     const isEthWallet = computed<boolean>(() => store.getters['general/isEthWallet']);
 
-    const { currentNetworkIdx, isZkEvm } = useNetworkInfo();
+    const { currentNetworkIdx, isZkEvm, isAllowLockdropDispatch } = useNetworkInfo();
 
     const isWalletConnect = computed<boolean>(() => {
       const currentWallet = store.getters['general/currentWallet'];
@@ -213,6 +232,10 @@ export default defineComponent({
       return isLoadingBalance.value;
     });
 
+    const handleModalLockdropWarning = ({ isOpen }: { isOpen: boolean }) => {
+      isModalLockdropWarning.value = isOpen;
+    };
+
     watch(
       [balance, nativeTokenUsd, currentAccount, isH160],
       () => {
@@ -248,6 +271,8 @@ export default defineComponent({
       async () => {
         const apiRef = $api;
         if (!isEthWallet.value) {
+          isLockdropAccount.value = false;
+
           return;
         }
         if (
@@ -262,8 +287,14 @@ export default defineComponent({
           const ss58 = getEvmMappedSs58Address(currentAccount.value);
           if (!ss58) return;
           const { data } = await apiRef.query.system.account<FrameSystemAccountInfo>(ss58);
+          if (Number(data.free.toString()) > 0) {
+            isLockdropAccount.value = true;
+          } else {
+            isLockdropAccount.value = false;
+          }
         } catch (error: any) {
           console.error(error.message);
+          isLockdropAccount.value = false;
         }
       },
       { immediate: false }
@@ -313,10 +344,15 @@ export default defineComponent({
       bg,
       currentNetworkIdx,
       currentNetworkName,
+      isLockdropAccount,
+      isModalLockdropWarning,
+      isAllowLockdropDispatch,
       isWalletConnect,
+      handleModalLockdropWarning,
       getShortenAddress,
       copyAddress,
       showAccountUnificationModal,
+      toggleEvmWalletSchema,
     };
   },
 });

src/components/assets/modals/ModalLockdropWarning.vue

@@ -0,0 +1,98 @@
+<template>
+  <modal-wrapper
+    :is-modal-open="isModal"
+    title=""
+    :is-closing="isClosingModal"
+    :close-modal="closeModal"
+  >
+    <div class="wrapper--modal">
+      <div class="row--title">
+        <div class="icon--warning">
+          <astar-icon-warning size="40" />
+        </div>
+        <span>{{ $t('warning.warning') }}</span>
+      </div>
+      <div class="row--warning-box">
+        <span>{{ $t('assets.modals.lockdropWarning.warning') }} </span>
+      </div>
+      <div class="row--message">
+        <span class="text--message">
+          {{ $t('assets.modals.lockdropWarning.note') }}
+        </span>
+      </div>
+      <div class="box--list">
+        <li>
+          <span>
+            {{ $t('assets.modals.lockdropWarning.list1') }}
+          </span>
+        </li>
+        <li>
+          <span>
+            {{ $t('assets.modals.lockdropWarning.list2') }}
+          </span>
+        </li>
+        <li>
+          <span>
+            {{ $t('assets.modals.lockdropWarning.list3') }}
+          </span>
+        </li>
+        <li>
+          <span>
+            {{ $t('assets.modals.lockdropWarning.list4') }}
+          </span>
+        </li>
+      </div>
+
+      <div class="wrapper__row--button">
+        <astar-button class="button--confirm" @click="closeModal">
+          {{ $t('assets.modals.lockdropWarning.moveFundsNow') }}
+        </astar-button>
+      </div>
+    </div>
+  </modal-wrapper>
+</template>
+<script lang="ts">
+import { wait } from '@astar-network/astar-sdk-core';
+import { fadeDuration } from '@astar-network/astar-ui';
+import ModalWrapper from 'src/components/common/ModalWrapper.vue';
+import { useNetworkInfo } from 'src/hooks';
+import { buildTransferPageLink } from 'src/router';
+import { defineComponent, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+export default defineComponent({
+  components: { ModalWrapper },
+  props: {
+    isModal: {
+      type: Boolean,
+      required: true,
+    },
+    handleModal: {
+      type: Function,
+      required: true,
+    },
+  },
+  setup(props) {
+    const router = useRouter();
+    const { nativeTokenSymbol } = useNetworkInfo();
+
+    const isClosingModal = ref<boolean>(false);
+    const closeModal = async (): Promise<void> => {
+      isClosingModal.value = true;
+      await wait(fadeDuration);
+      props.handleModal({ isOpen: false });
+      isClosingModal.value = false;
+      router.push(buildTransferPageLink(nativeTokenSymbol.value));
+    };
+
+    return {
+      closeModal,
+      isClosingModal,
+    };
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@use 'src/components/assets/styles/modal-lockdrop-warning.scss';
+</style>

src/components/assets/styles/account.scss

@@ -266,7 +266,7 @@
   position: relative;
   margin-bottom: 16px;
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
   .wallet-tab__bg {
     background-color: rgba(255, 255, 255, 0.3);
     padding: 4px;
@@ -355,3 +355,16 @@
     gap: 16px;
   }
 }
+
+.row--lockdrop {
+  display: flex;
+  column-gap: 8px;
+  color: black;
+  font-weight: 800;
+}
+
+.text--switch-account {
+  color: $neon-blue;
+  text-decoration: underline;
+  cursor: pointer;
+}

src/components/assets/styles/modal-lockdrop-warning.scss

@@ -0,0 +1,64 @@
+@import 'src/css/quasar.variables.scss';
+
+.wrapper__row--button {
+  display: flex;
+  justify-content: center;
+}
+
+.button--confirm {
+  width: 344px;
+  font-size: 22px;
+  font-weight: 600;
+  height: 44px;
+  @media (min-width: $sm) {
+    width: 412px;
+  }
+}
+
+.row--title {
+  display: flex;
+  justify-content: center;
+  column-gap: 8px;
+  margin-bottom: 28px;
+  width: 100%;
+  color: $warning-yellow;
+  font-size: 32px;
+  font-weight: 700;
+}
+
+.box--list {
+  margin-bottom: 24px;
+  padding: 0px 14px;
+  @media (min-width: $sm) {
+    padding: 0;
+  }
+}
+
+.row--warning-box {
+  width: 100%;
+  padding: 8px;
+  background-color: $warning-yellow;
+  margin-bottom: 32px;
+  color: $navy-1;
+  font-weight: 800;
+  font-size: 16px;
+}
+
+.icon--warning {
+  margin-top: -4px;
+}
+
+.text--message {
+  font-weight: 600;
+}
+
+.row--message {
+  margin-bottom: 8px;
+  padding: 0px 14px;
+  @media (min-width: $sm) {
+    padding: 0;
+  }
+}
+
+.body--dark {
+}

src/components/assets/transfer/LocalTransfer.vue

@@ -227,7 +227,7 @@ export default defineComponent({
   },
   setup(props) {
     const { iconWallet } = useWalletIcon();
-    const { currentAccount, currentAccountName, multisig } = useAccount();
+    const { currentAccount, currentAccountName, multisig, isLockdropAccount } = useAccount();
     const { nativeTokenSymbol, currentNetworkName, isSupportAuTransfer, isZkEvm } =
       useNetworkInfo();
     const t = computed<Asset>(() => props.token);
@@ -286,6 +286,7 @@ export default defineComponent({
       isZkEvm,
       currentNetworkName,
       isSupportAuTransfer,
+      isLockdropAccount,
       isValidEvmAddress,
       setSelectedTip,
       transfer,

src/components/header/modals/ModalNetworkWallet.vue

@@ -250,7 +250,7 @@ export default defineComponent({
     const selectNetwork = async (): Promise<void> => {
       const networkIdxRef = selNetworkId.value;
       const { isEndpointChange, newEndpoint } = getNewEndpoint();
-      if (isEndpointChange) {
+      if (isEndpointChange || networkIdxRef === endpointKey.LOCAL) {
         localStorage.setItem(NETWORK_IDX, networkIdxRef.toString());
         localStorage.setItem(
           SELECTED_ENDPOINT,
@@ -274,7 +274,7 @@ export default defineComponent({
 
     const isDisabled = computed<boolean>(() => {
       const { isEndpointChange } = getNewEndpoint();
-      if (!isEndpointChange) {
+      if (!isEndpointChange && selNetworkId.value !== endpointKey.LOCAL) {
         return true;
       }
       if (isSelectLightClient.value) {
@@ -413,6 +413,14 @@ export default defineComponent({
         randomizedEndpoint(endpointKey.ASTAR_ZKEVM);
         return;
       }
+      if (networkIdx === endpointKey.LOCAL || networkIdx === endpointKey.CUSTOM) {
+        randomizedEndpoint(endpointKey.ASTAR);
+        randomizedEndpoint(endpointKey.SHIDEN);
+        randomizedEndpoint(endpointKey.SHIBUYA);
+        randomizedEndpoint(endpointKey.ZKATANA);
+        randomizedEndpoint(endpointKey.ASTAR_ZKEVM);
+        return;
+      }
     };
 
     watch(