Merge pull request #8549 from kodadot/teleport-warning

teleport warning followup

assets/styles/global.scss

@@ -587,3 +587,6 @@ a.has-text-grey {
 .has-text-inherit {
   color: inherit !important;
 }
+.cursor-default {
+  cursor: default;
+}

components/teleport/EDWarningModal.vue

@@ -0,0 +1,90 @@
+<template>
+  <NeoModal
+    :value="isModalActive"
+    scroll="clip"
+    :enable-mobile="false"
+    content-class="mx-4 "
+    :can-cancel="false">
+    <div class="px-6 py-5 width-350">
+      <div class="is-flex mb-4 is-align-items-center">
+        <NeoIcon
+          icon="triangle-exclamation"
+          pack="fasr"
+          class="mr-3"
+          size="medium" />
+        <span class="has-text-weight-bold">{{
+          $t('teleport.fundLossRisk')
+        }}</span>
+      </div>
+      <div
+        class="is-flex is-flex-direction-column px-4 bakground-warning-red border border-color-k-red">
+        <span class="my-3">
+          {{
+            $t('teleport.insufficientExistentialDeposit', [
+              existentialDeposit,
+              currency,
+            ])
+          }}
+          <b>{{ $t('teleport.lossOfFunds') }}</b>
+        </span>
+        <div class="is-flex py-4">
+          <NeoCheckbox
+            v-model="checked"
+            class="mr-3 is-size-7"
+            :label="$t('teleport.checkboxLabel')" />
+        </div>
+      </div>
+      <div
+        class="is-flex mt-5 is-align-items-center is-justify-content-space-between">
+        <NeoButton
+          variant="pill"
+          :disabled="!checked"
+          class="mr-4"
+          no-shadow
+          :label="$t('massmint.mobileDisclaimer.continueAnyway')"
+          @click="emit('continue')" />
+        <NeoButton
+          variant="pill"
+          :label="$t('autoTeleport.close')"
+          @click="emit('close')" />
+      </div>
+    </div>
+  </NeoModal>
+</template>
+
+<script setup lang="ts">
+import { NeoButton, NeoCheckbox, NeoIcon, NeoModal } from '@kodadot1/brick'
+
+const props = defineProps<{
+  modelValue: boolean
+  existentialDeposit: number
+  currency: Currency
+}>()
+
+const isModalActive = useVModel(props, 'modelValue')
+const checked = ref(false)
+watch(isModalActive, () => {
+  checked.value = false
+})
+
+const emit = defineEmits(['close', 'continue'])
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/styles/abstracts/variables.scss';
+
+.width-350 {
+  max-width: 350px;
+}
+
+.bakground-warning-red {
+  @include ktheme() {
+    background-color: theme('k-redaccent2');
+  }
+}
+.border-color-k-red {
+  @include ktheme() {
+    border-color: theme('k-red') !important;
+  }
+}
+</style>

components/teleport/FundsAtRiskWarning.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="has-text-danger is-flex is-align-items-center cursor-default">
+    <NeoIcon
+      icon="triangle-exclamation"
+      pack="fasr"
+      class="mr-3"
+      size="medium" />
+    <span>{{ $t('teleport.fundsAtRisk') }} -&nbsp;</span>
+    <NeoTooltip
+      multiline
+      :multiline-width="256"
+      :auto-close="['outside', 'inside']">
+      <u>{{ $t('teleport.why') }}</u>
+      <template #content>
+        <div class="has-text-left py-2 is-flex is-flex-direction-column">
+          <span class="mb-3">
+            {{
+              $t('teleport.existentialDepositTooltip', [
+                targetExistentialDepositAmount,
+              ])
+            }}
+          </span>
+          <a
+            v-safe-href="
+              'https://hello.kodadot.xyz/multi-chain/existential-deposit'
+            "
+            target="_blank"
+            class="has-text-k-blue">
+            {{ $t('teleport.whatIsExistentialDeposit') }}
+          </a>
+        </div>
+      </template>
+    </NeoTooltip>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { NeoIcon, NeoTooltip } from '@kodadot1/brick'
+defineProps<{
+  targetExistentialDepositAmount: number
+}>()
+</script>

components/teleport/Teleport.vue

@@ -1,5 +1,7 @@
 <template>
-  <form class="mx-auto teleport-container" @submit.prevent="teleport">
+  <form
+    class="mx-auto teleport-container"
+    @submit.prevent="checkEDBeforeTeleport">
     <Loader v-model="isLoading" :status="status" />
     <h1 class="is-size-3 has-text-weight-bold">
       {{ $t('teleport.page') }}
@@ -81,36 +83,26 @@
 
     <div
       v-if="myBalance !== undefined"
-      class="is-size-7 is-flex is-justify-content-end is-align-items-center">
-      <span class="is-flex is-align-items-center">
-        <span class="mr-2">{{ $t('general.balance') }}:</span
-        >{{ myBalanceWithoutDivision.toFixed(4) }}{{ currency }}
-      </span>
-      <NeoButton
-        no-shadow
-        rounded
-        size="small"
-        class="ml-2"
-        @click="handleMaxClick"
-        >{{ $t('teleport.max') }}</NeoButton
-      >
+      class="is-size-7 is-flex justify-content align-items flex-direction">
+      <TeleportFundsAtRiskWarning
+        v-if="insufficientExistentialDeposit"
+        :target-existential-deposit-amount="targetExistentialDepositAmount" />
+      <div class="is-flex">
+        <span class="is-flex is-align-items-center">
+          <span class="mr-2">{{ $t('general.balance') }}:</span
+          >{{ myBalanceWithoutDivision.toFixed(4) }}{{ currency }}
+        </span>
+        <NeoButton
+          no-shadow
+          rounded
+          size="small"
+          class="ml-2"
+          @click="handleMaxClick"
+          >{{ $t('teleport.max') }}</NeoButton
+        >
+      </div>
     </div>
 
-    <a
-      v-if="insufficientExistentialDeposit"
-      v-safe-href="
-        `https://support.polkadot.network/support/solutions/articles/65000168651-what-is-the-existential-deposit`
-      "
-      target="_blank"
-      class="has-text-danger">
-      {{
-        $t('teleport.insufficientExistentialDeposit', [
-          targetExistentialDepositAmount,
-          currency,
-        ])
-      }}
-    </a>
-
     <NeoButton
       :label="teleportLabel"
       size="large"
@@ -139,6 +131,17 @@
       {{ $t('teleport.ownerMessage') }}
     </div>
   </form>
+  <TeleportEdWarningModal
+    v-model="insufficientEDModalOpen"
+    :existential-deposit="targetExistentialDepositAmount"
+    :currency="currency"
+    @continue="
+      () => {
+        insufficientEDModalOpen = false
+        teleport()
+      }
+    "
+    @close="insufficientEDModalOpen = false" />
 </template>
 
 <script setup lang="ts">
@@ -155,9 +158,8 @@ import formatBalance from '@/utils/format/balance'
 import Loader from '@/components/shared/Loader.vue'
 import shortAddress from '@/utils/shortAddress'
 import { chainIcons, getChainName } from '@/utils/chain'
-import NeoInput from '~/libs/ui/src/components/NeoInput/NeoInput.vue'
 import NetworkDropdown from './NetworkDropdown.vue'
-import { NeoButton, NeoField } from '@kodadot1/brick'
+import { NeoButton, NeoField, NeoInput } from '@kodadot1/brick'
 import { blockExplorerOf } from '@/utils/config/chain.config'
 import { simpleDivision } from '@/utils/balance'
 import { useFiatStore } from '@/stores/fiat'
@@ -180,6 +182,7 @@ const toChain = ref(Chain.ASSETHUBPOLKADOT) //Selected destination parachain
 const amount = ref(0) //Required amount to be transfered is stored here
 const unsubscribeKusamaBalance = ref()
 const teleportFee = ref()
+const insufficientEDModalOpen = ref(false)
 
 const DOT_BUFFER_FEE = 100000000 // 0.01
 const KSM_BUFFER_FEE = 1000000000 // 0.001
@@ -222,7 +225,7 @@ const insufficientExistentialDeposit = computed(() => {
 
 const teleportLabel = computed(() => {
   if (insufficientBalance.value) {
-    return $i18n.t('teleport.insufficientBalance', [currency])
+    return $i18n.t('teleport.insufficientBalance', [currency.value])
   }
 
   if (insufficientAmountAfterFees.value && amount.value !== 0) {
@@ -403,6 +406,14 @@ const handleMaxClick = () => {
     Math.floor((myBalanceWithoutDivision.value || 0) * 10 ** 4) / 10 ** 4
 }
 
+const checkEDBeforeTeleport = () => {
+  if (insufficientExistentialDeposit.value) {
+    insufficientEDModalOpen.value = true
+  } else {
+    teleport()
+  }
+}
+
 const teleport = async () => {
   await sendXCM({
     amount: amountToTeleport.value,
@@ -437,6 +448,20 @@ onBeforeUnmount(() => {
 </script>
 <style lang="scss" scoped>
 @import '@/assets/styles/abstracts/variables';
+$xs-breakpoint: 400px;
+
+.flex-direction {
+  @include until($xs-breakpoint) {
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+}
+.align-items {
+  align-items: center;
+  @include until($xs-breakpoint) {
+    align-items: flex-start;
+  }
+}
 
 .teleport-container {
   @include tablet {
@@ -451,6 +476,13 @@ onBeforeUnmount(() => {
   }
 }
 
+.justify-content {
+  justify-content: space-between;
+  @include until($xs-breakpoint) {
+    justify-content: flex-end;
+  }
+}
+
 .is-absolute-right {
   position: absolute;
   right: 2rem;

locales/en.json

@@ -1088,7 +1088,15 @@
     "tweetDonation": "Tweet about your awesome donation",
     "donationSentTo": "Your donation will be sent to:",
     "ownerMessage": "(You Are Owner)",
-    "insufficientExistentialDeposit": "Sending less than the required Existential Deposit amount will result in fund loss, min value to send is [ {0} + fees ] {1}"
+    "insufficientExistentialDeposit": "Transferring Less Than {0} {1} (existential deposit) + Fees Will Lead To An Irreversible",
+    "fundsAtRisk": "Funds at risk",
+    "fundLossRisk": "Funds Loss Risk",
+    "lossOfFunds": "Loss Of Funds.",
+    "why": "Why?",
+    "existentialDepositTooltip": "Amounts Below {0} + Fees Risk Being Lost. Enter The Minimum To Proceed.",
+    "whatIsExistentialDeposit": "What is Existential Deposit?",
+    "checkboxLabel": "I understand this action will lead to an irreversible loss of funds."
+
   },
   "preferences": {
     "basic": "basic user interface",

utils/teleport.ts

@@ -248,7 +248,9 @@ export const getTransactionFee = async ({
   return info.partialFee.toString()
 }
 
-export const getChainCurrency = (chain: Chain) => {
+export type Currency = 'KSM' | 'DOT'
+
+export const getChainCurrency = (chain: Chain): Currency => {
   switch (chain) {
     case Chain.KUSAMA:
     case Chain.BASILISK: