From e454f941fd58102cc6f57dff50c402daaa8b31b7 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Wed, 13 Dec 2023 19:19:18 +0700
Subject: [PATCH 1/3] teleport ED modal  + bug fix

---
 components/teleport/EDWarningModal.vue |  86 +++++++++++++++++++
 components/teleport/Teleport.vue       | 113 ++++++++++++++++++-------
 locales/en.json                        |  10 ++-
 3 files changed, 176 insertions(+), 33 deletions(-)
 create mode 100644 components/teleport/EDWarningModal.vue

diff --git a/components/teleport/EDWarningModal.vue b/components/teleport/EDWarningModal.vue
new file mode 100644
index 0000000000..15e7840edc
--- /dev/null
+++ b/components/teleport/EDWarningModal.vue
@@ -0,0 +1,86 @@
+<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])
+          }}
+          <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
+}>()
+
+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>
diff --git a/components/teleport/Teleport.vue b/components/teleport/Teleport.vue
index 11054e7f3f..a8f4fcfb7e 100644
--- a/components/teleport/Teleport.vue
+++ b/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,58 @@
 
     <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 is-justify-content-space-between is-align-items-center">
+      <div
+        v-if="insufficientExistentialDeposit"
+        class="has-text-danger is-flex is-align-items-center">
+        <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>
+      <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 +163,16 @@
       {{ $t('teleport.ownerMessage') }}
     </div>
   </form>
+  <EDWarningModal
+    v-model="insufficientEDModalOpen"
+    :existential-deposit="targetExistentialDepositAmount"
+    @continue="
+      () => {
+        insufficientEDModalOpen = false
+        teleport()
+      }
+    "
+    @close="insufficientEDModalOpen = false" />
 </template>
 
 <script setup lang="ts">
@@ -155,13 +189,19 @@ 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,
+  NeoIcon,
+  NeoInput,
+  NeoTooltip,
+} from '@kodadot1/brick'
 import { blockExplorerOf } from '@/utils/config/chain.config'
 import { simpleDivision } from '@/utils/balance'
 import { useFiatStore } from '@/stores/fiat'
 import { existentialDeposit } from '@kodadot1/static'
+import EDWarningModal from './EDWarningModal.vue'
 
 const {
   chainBalances,
@@ -180,6 +220,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 +263,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 +444,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,
diff --git a/locales/en.json b/locales/en.json
index c80910bc4d..4f67c98cc1 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -1085,7 +1085,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} + 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",

From e724e551813314611d7536679cbf6a5dde5ffb54 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Thu, 14 Dec 2023 11:05:09 +0700
Subject: [PATCH 2/3] code review

---
 assets/styles/global.scss                  |  3 +
 components/teleport/FundsAtRiskWarning.vue | 42 +++++++++++++
 components/teleport/Teleport.vue           | 70 ++++++++--------------
 3 files changed, 71 insertions(+), 44 deletions(-)
 create mode 100644 components/teleport/FundsAtRiskWarning.vue

diff --git a/assets/styles/global.scss b/assets/styles/global.scss
index 7164593029..2d81db7d31 100644
--- a/assets/styles/global.scss
+++ b/assets/styles/global.scss
@@ -587,3 +587,6 @@ a.has-text-grey {
 .has-text-inherit {
   color: inherit !important;
 }
+.cursor-default {
+  cursor: default;
+}
diff --git a/components/teleport/FundsAtRiskWarning.vue b/components/teleport/FundsAtRiskWarning.vue
new file mode 100644
index 0000000000..fc21a8a571
--- /dev/null
+++ b/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>
diff --git a/components/teleport/Teleport.vue b/components/teleport/Teleport.vue
index a8f4fcfb7e..c6dd51c1f7 100644
--- a/components/teleport/Teleport.vue
+++ b/components/teleport/Teleport.vue
@@ -83,42 +83,10 @@
 
     <div
       v-if="myBalance !== undefined"
-      class="is-size-7 is-flex is-justify-content-space-between is-align-items-center">
-      <div
+      class="is-size-7 is-flex justify-content align-items flex-direction">
+      <TeleportFundsAtRiskWarning
         v-if="insufficientExistentialDeposit"
-        class="has-text-danger is-flex is-align-items-center">
-        <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>
+        :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
@@ -163,7 +131,7 @@
       {{ $t('teleport.ownerMessage') }}
     </div>
   </form>
-  <EDWarningModal
+  <TeleportEdWarningModal
     v-model="insufficientEDModalOpen"
     :existential-deposit="targetExistentialDepositAmount"
     @continue="
@@ -190,18 +158,11 @@ import Loader from '@/components/shared/Loader.vue'
 import shortAddress from '@/utils/shortAddress'
 import { chainIcons, getChainName } from '@/utils/chain'
 import NetworkDropdown from './NetworkDropdown.vue'
-import {
-  NeoButton,
-  NeoField,
-  NeoIcon,
-  NeoInput,
-  NeoTooltip,
-} 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'
 import { existentialDeposit } from '@kodadot1/static'
-import EDWarningModal from './EDWarningModal.vue'
 
 const {
   chainBalances,
@@ -486,6 +447,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 {
@@ -500,6 +475,13 @@ onBeforeUnmount(() => {
   }
 }
 
+.justify-content {
+  justify-content: space-between;
+  @include until($xs-breakpoint) {
+    justify-content: flex-end;
+  }
+}
+
 .is-absolute-right {
   position: absolute;
   right: 2rem;

From dce616ec079be2612896ec19e2f43ca8df0bd063 Mon Sep 17 00:00:00 2001
From: daiagi <daiagi@gmail.com>
Date: Fri, 15 Dec 2023 10:00:41 +0700
Subject: [PATCH 3/3] add currency to EDWarningModal

---
 components/teleport/EDWarningModal.vue | 6 +++++-
 components/teleport/Teleport.vue       | 1 +
 locales/en.json                        | 2 +-
 utils/teleport.ts                      | 4 +++-
 4 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/components/teleport/EDWarningModal.vue b/components/teleport/EDWarningModal.vue
index 15e7840edc..b979cb2ed4 100644
--- a/components/teleport/EDWarningModal.vue
+++ b/components/teleport/EDWarningModal.vue
@@ -20,7 +20,10 @@
         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])
+            $t('teleport.insufficientExistentialDeposit', [
+              existentialDeposit,
+              currency,
+            ])
           }}
           <b>{{ $t('teleport.lossOfFunds') }}</b>
         </span>
@@ -55,6 +58,7 @@ import { NeoButton, NeoCheckbox, NeoIcon, NeoModal } from '@kodadot1/brick'
 const props = defineProps<{
   modelValue: boolean
   existentialDeposit: number
+  currency: Currency
 }>()
 
 const isModalActive = useVModel(props, 'modelValue')
diff --git a/components/teleport/Teleport.vue b/components/teleport/Teleport.vue
index c6dd51c1f7..7cf5a7af65 100644
--- a/components/teleport/Teleport.vue
+++ b/components/teleport/Teleport.vue
@@ -134,6 +134,7 @@
   <TeleportEdWarningModal
     v-model="insufficientEDModalOpen"
     :existential-deposit="targetExistentialDepositAmount"
+    :currency="currency"
     @continue="
       () => {
         insufficientEDModalOpen = false
diff --git a/locales/en.json b/locales/en.json
index 4f67c98cc1..40ef3fd842 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -1085,7 +1085,7 @@
     "tweetDonation": "Tweet about your awesome donation",
     "donationSentTo": "Your donation will be sent to:",
     "ownerMessage": "(You Are Owner)",
-    "insufficientExistentialDeposit": "Transferring Less Than {0} + Fees Will Lead To An Irreversible",
+    "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.",
diff --git a/utils/teleport.ts b/utils/teleport.ts
index af0f58bde9..f047e9bb7a 100644
--- a/utils/teleport.ts
+++ b/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: