test: update hotfix branch (#895) (#896)

* feat: added lockdrop account warning

* fix: words

* hotfix: added a modal for disabling lockdrop account on Astar network (#892)

* feat: added lockdrop account warning

* fix: words

* fix: words (2)

src/components/assets/Account.vue

@@ -79,6 +79,11 @@
  </div>
  <native-asset-list v-if="!isH160" />
  </div>
+ <modal-lockdrop-warning
+ v-if="isLockdropAccount && !isH160"
+ :is-modal="isModalLockdropWarning"
+ :handle-modal="handleModalLockdropWarning"
+ />
  </div>
 </template>
 <script lang="ts">
@@ -102,12 +107,14 @@ import { useStore } from 'src/store';
 import { computed, defineComponent, ref, watch, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
 import NativeAssetList from 'src/components/assets/NativeAssetList.vue';
+import ModalLockdropWarning from 'src/components/assets/modals/ModalLockdropWarning.vue';
 import { ETHEREUM_EXTENSION } from 'src/hooks';
 import { supportWalletObj } from 'src/config/wallets';
 
 export default defineComponent({
  components: {
  NativeAssetList,
+ ModalLockdropWarning,
  },
  props: {
  ttlErc20Amount: {
@@ -123,6 +130,7 @@ export default defineComponent({
  const balUsd = ref<number | null>(null);
  const isCheckingSignature = ref<boolean>(false);
  const isLockdropAccount = ref<boolean>(false);
+ const isModalLockdropWarning = ref<boolean>(true);
  const { toggleEvmWalletSchema } = useConnectWallet();
  const { currentAccount, currentAccountName, multisig } = useAccount();
  const { balance, isLoadingBalance } = useBalance(currentAccount);
@@ -155,6 +163,10 @@ export default defineComponent({
  return multisig.value ? supportWalletObj[multisig.value.signatory.source].img : '';
  });
 
+ const handleModalLockdropWarning = ({ isOpen }: { isOpen: boolean }) => {
+ isModalLockdropWarning.value = isOpen;
+ };
+
  const copyAddress = () => {
  copy(currentAccount.value);
  store.dispatch('general/showAlertMsg', {
@@ -248,6 +260,8 @@ export default defineComponent({
  multisig,
  supportWalletObj,
  signatoryIconWallet,
+ isModalLockdropWarning,
+ handleModalLockdropWarning,
  getShortenAddress,
  copyAddress,
  toggleEvmWalletSchema,

src/components/assets/modals/ModalLockdropWarning.vue

@@ -0,0 +1,78 @@
+<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--message">
+ <span class="text--message">{{ $t('assets.modals.lockdropWarning.message') }}</span>
+ </div>
+ <div class="box--list">
+ <li>
+ <span>
+ {{ $t('assets.modals.lockdropWarning.list1') }}
+ </span>
+ </li>
+ <li>
+ <span>
+ {{ $t('assets.modals.lockdropWarning.list2') }}
+ </span>
+ </li>
+ </div>
+ <div class="row--end-date">
+ <span>{{ $t('assets.modals.lockdropWarning.closeTime') }} </span>
+ </div>
+ <div class="wrapper__row--button">
+ <astar-button class="button--confirm" @click="closeModal">
+ {{ $t('assets.modals.lockdropWarning.gotIt') }}</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 { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+ components: { ModalWrapper },
+ props: {
+ isModal: {
+ type: Boolean,
+ required: true,
+ },
+ handleModal: {
+ type: Function,
+ required: true,
+ },
+ },
+ setup(props) {
+ const isClosingModal = ref<boolean>(false);
+ const closeModal = async (): Promise<void> => {
+ isClosingModal.value = true;
+ await wait(fadeDuration);
+ props.handleModal({ isOpen: false });
+ isClosingModal.value = false;
+ };
+
+ return {
+ closeModal,
+ isClosingModal,
+ };
+ },
+});
+</script>
+
+<style lang="scss" scoped>
+@use 'src/components/assets/styles/modal-lockdrop-warning.scss';
+</style>

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

@@ -0,0 +1,65 @@
+@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--end-date {
+ width: 100%;
+ text-align: center;
+ padding: 24px;
+ background-color: $warning-yellow;
+ margin-bottom: 32px;
+ color: $navy-1;
+ font-weight: 800;
+ font-size: 20px;
+}
+
+.icon--warning {
+ margin-top: -4px;
+}
+
+.text--message {
+ font-weight: 600;
+}
+
+.row--message {
+ margin-bottom: 32px;
+ padding: 0px 14px;
+ @media (min-width: $sm) {
+ padding: 0;
+ }
+}
+
+.body--dark {
+}

src/i18n/en-US/index.ts

@@ -499,6 +499,16 @@ export default {
  tooltip:
  'We keep {amount} {symbol} in origin chain account to avoid losing the funds. When depositing from origin chain, only tokens that are above the minimum balance are transferable.',
  },
+ lockdropWarning: {
+ message:
+ 'The Lockdrop account will be deprecated in the upcoming update, as its purpose has been fulfilled. Please transfer your funds to another substrate wallet immediately.',
+ list1:
+ "Please transfer your funds from this account by the specified date. Retrieval won't be possible after that.",
+ list2:
+ 'Please note that unstaking in dApp staking will require 10 eras (approximately 10 days).',
+ closeTime: 'UTC 23:59 12th September 2023',
+ gotIt: 'Got it',
+ },
  },
  },
  dashboard: {