Change warning on EVM local transfer (#783)

* update warning message

* update css & only visible on EVM input

* show prev warning

* only visible isH160

* update warning message

Author: sirius651

src/components/assets/transfer/LocalTransfer.vue

@@ -132,10 +132,29 @@
               >
                 {{ $t('assets.modals.notSendToEvmExchanges') }}
               </span>
-              <span v-else :class="isChecked ? 'color--gray1' : 'color--not-checked'">
+              <span v-else-if="!isH160" :class="isChecked ? 'color--gray1' : 'color--not-checked'">
                 {{ $t('assets.modals.notSendToExchanges') }}
               </span>
             </div>
+            <span
+              v-if="isH160 && !isNativeToEvm"
+              :class="isChecked ? 'color--gray1' : 'color--not-checked'"
+            >
+              <div class="row--warning-title">
+                <div class="icon--warning">
+                  <astar-icon-warning size="20" />
+                </div>
+                <span
+                  class="text--title-evm-warning"
+                  :class="isChecked ? 'color--gray1' : 'color--not-checked'"
+                >
+                  {{ $t('warning.warning') }}
+                </span>
+              </div>
+              <div class="text--warn">
+                {{ $t('assets.modals.notDestIsLedgerAccount') }}
+              </div>
+            </span>
           </label>
         </div>
       </div>

src/components/assets/transfer/styles/local-transfer.scss

@@ -292,6 +292,18 @@
   column-gap: 8px;
 }
 
+.text--dot {
+  position: relative;
+  top: 4px;
+  font-size: 24px;
+  font-weight: 700;
+}
+
+.text--warn {
+  padding-left: 10px;
+  line-height: 20px;
+}
+
 .text--title-evm-warning {
   font-weight: 700;
   font-size: 14px;

src/i18n/en-US/index.ts

@@ -403,6 +403,10 @@ export default {
       notSendToExchanges: 'I’m NOT sending tokens to Exchanges',
       notSendToEvmExchanges:
         "I’m NOT sending tokens to Exchange's EVM deposit addresses. I understand that if I do so, the funds will likely be lost.",
+      understandWarning: 'I understand the following. If don’t, I will lose my funds.',
+      notDestIsLedgerAccount:
+        'The destination address is neither a ledger native account nor an exchange address. I understand that if I do so, the funds will likely be lost.',
+      notDestIsExchangeAddress: 'Destination address is not an Exchange address',
       youWillReceive: 'You will receive',
       faucetNextRequest: 'Time left until the next request',
       countDown: '{hrs} hrs {mins} mins {secs} secs',