Telos EVM generated address update

src/antelope/config/index.ts

@@ -40,6 +40,7 @@ export class AntelopeConfig {
     private __notify_success_copy_handler: () => void = alert;
     private __notify_failure_message_handler: (message: string, payload?: AntelopeErrorPayload) => void = alert;
     private __notify_failure_action_handler: (message: string, payload?: AntelopeErrorPayload) => void = alert;
+    private __notify_warning_action_handler: (message: string, payload?: AntelopeErrorPayload) => void = alert;
     private __notify_disconnected_handler: () => void = alert;
     private __notify_neutral_message_handler: (message: string) => (() => void) = () => (() => void 0);
     private __notify_remember_info_handler: (title: string, message: string | ComplexMessage[], payload: string, key: string) => (() => void) = () => (() => void 0);
@@ -158,6 +159,10 @@ export class AntelopeConfig {
         return this.__notify_failure_action_handler;
     }
 
+    get notifyWarningWithAction() {
+        return this.__notify_warning_action_handler;
+    }
+
     get notifyDisconnectedHandler() {
         return this.__notify_disconnected_handler;
     }
@@ -228,6 +233,10 @@ export class AntelopeConfig {
         this.__notify_failure_action_handler = handler;
     }
 
+    public setNotifyWarningWithAction(handler: (message: string, payload?: AntelopeErrorPayload) => void) {
+        this.__notify_warning_action_handler = handler;
+    }
+
     public setNotifyDisconnectedHandler(handler: () => void) {
         this.__notify_disconnected_handler = handler;
     }

src/boot/antelope.ts

@@ -34,6 +34,7 @@ export default boot(({ app }) => {
     ant.config.setNotifySuccessCopyHandler(app.config.globalProperties.$notifySuccessCopy);
     ant.config.setNotifyFailureMessage(app.config.globalProperties.$notifyFailure);
     ant.config.setNotifyFailureWithAction(app.config.globalProperties.$notifyFailureWithAction);
+    ant.config.setNotifyWarningWithAction(app.config.globalProperties.$notifyWarningWithAction);
     ant.config.setNotifyDisconnectedHandler(app.config.globalProperties.$notifyDisconnected);
     ant.config.setNotifyNeutralMessageHandler(app.config.globalProperties.$notifyNeutralMessage);
     ant.config.setNotifyRememberInfoHandler(app.config.globalProperties.$notifyRememberInfo);

src/boot/errorHandling.js

@@ -67,6 +67,7 @@ const crossIcon = require('src/assets/icon--cross.svg');
 const infoIcon  = require('src/assets/icon--info.svg');
 const checkIcon = require('src/assets/icon--check.svg');
 const discoIcon = require('src/assets/icon--disconnected.svg');
+const warningIcon = require('src/assets/icon--warning.svg');
 
 const html = `
     <div class="c-notify__container c-notify__container--{type} c-notify__container--{random}">
@@ -257,6 +258,16 @@ const notifyFailureWithAction = function(message, payload) {
     );
 };
 
+const notifyWarningWithAction = function(message, payload) {
+    return notifyMessage.bind(this)(
+        'error',
+        warningIcon,
+        this.$t('notification.warning_title').toUpperCase(),
+        message,
+        new NotificationAction(payload),
+    );
+};
+
 const notifyDisconnected = function() {
     return notifyMessage.bind(this)(
         'error',
@@ -331,6 +342,7 @@ export default boot(({ app, store }) => {
     app.config.globalProperties.$notifySuccessCopy        = notifySuccessCopy.bind(store);
     app.config.globalProperties.$notifyFailure            = notifyFailure.bind(store);
     app.config.globalProperties.$notifyFailureWithAction  = notifyFailureWithAction.bind(store);
+    app.config.globalProperties.$notifyWarningWithAction  = notifyWarningWithAction.bind(store);
     app.config.globalProperties.$notifyDisconnected       = notifyDisconnected.bind(store);
     app.config.globalProperties.$notifyNeutralMessage     = notifyNeutralMessage.bind(store);
     app.config.globalProperties.$notifyRememberInfo       = notifyRememberInfo.bind(store);
@@ -339,6 +351,7 @@ export default boot(({ app, store }) => {
     store['$notifySuccessCopy']                           = app.config.globalProperties.$notifySuccessCopy;
     store['$notifyFailure']                               = app.config.globalProperties.$notifyFailure;
     store['$notifyFailureWithAction']                     = app.config.globalProperties.$notifyFailureWithAction;
+    store['$notifyWarningWithAction']                     = app.config.globalProperties.$notifyWarningWithAction;
     store['$notifyDisconnected']                          = app.config.globalProperties.$notifyDisconnected;
     store['$notifyNeutralMessage']                        = app.config.globalProperties.$notifyNeutralMessage;
     store['$notifyRememberInfo']                          = app.config.globalProperties.$notifyRememberInfo;

src/i18n/en-us/index.js

@@ -345,6 +345,7 @@ export default {
         neutral_message_updating_erc20_allowance: 'Updating <b>{symbol}</b> allowance for <b>{spender}</b>',
         neutral_message_updating_nft_allowance: 'Updating <b>{tokenText}</b> allowance for <b>{operator}</b>',
         dont_show_message_again: 'Don\'t show me this message again',
+        warning_title: 'Warning!',
     },
     resources: {
         title: 'Network Resources',
@@ -483,13 +484,14 @@ export default {
         withdraw_1: 'Withdraw your TLOS from the EVM,',
         withdraw_2: 'fast, free and instant.',
         add_evm_network: 'Add EVM Network',
-        first_deposit: 'NOTE: This is your first deposit so an additional “create” action ' +
-        'will be included',
         address_not_exist: 'NOTE: The recipient address does not exist so an additional “create” ' +
         'action will be included',
         dont_send_to_exchanges: 'DO NOT SEND TO EXCHANGE ADDRESS (e.g. KuCoin, Gate.io etc.). THIS ' +
         'WILL RESULT IN A LOSS OF FUNDS. RATHER SEND TO YOUR OWN METAMASK ' +
         'ADDRESS THEN TRANSFER TO THE EXCHANGE ADDRESS.',
+        evm_address_not_found: 'No linked Telos EVM address found, click below to generate one.',
+        evm_address_disclaimer: 'THIS ADDRESS IS ONLY FOR SENDING \'TLOS\' ON THE TELOS EVM. DO NOT SEND ANY OTHER TOKEN TO THIS ADDRESS. DO NOT SEND ANY TOKEN FROM ANOTHER NETWORK. THERE ARE NO PRIVATE KEYS AND FUNDS WILL BE LOST FOREVER.',
+        evm_disclaimer_confirmation: 'I Understand',
         create_evm_for: 'Create EVM address for {account}',
         created_evm_for: 'EVM address created for {account}',
         cant_deposit_more: 'Cannot deposit more than native TLOS balance: {balance}',

src/pages/native/balance/DepositEVM.vue

@@ -1,6 +1,5 @@
 <script>
 import { mapGetters, mapActions } from 'vuex';
-const MINIMUM_RAM_BYTES = 1000;
 
 export default {
     name: 'WithdrawEVM',
@@ -9,13 +8,12 @@ export default {
     data() {
         return {
             depositAmount: '0',
-            depositOwnAddress: false,
             recipientAddress: '',
             recipientAddressExists: true,
         };
     },
     computed: {
-        ...mapGetters('account', ['isAuthenticated', 'accountName', 'evmAddress']),
+        ...mapGetters('account', ['isAuthenticated', 'accountName']),
         showDlg: {
             get() {
                 return this.showDepositEVMDlg;
@@ -86,40 +84,6 @@ export default {
                 this.recipientAddressExists = false;
             }
         },
-        async generateAddress(){
-            const accountInfo = await this.$store.$api.getAccount(this.accountName);
-
-            if (accountInfo.ram_quota - accountInfo.ram_usage <= MINIMUM_RAM_BYTES){ // If account (often newly created account) does not have sufficient RAM, notify user
-                this.$errorNotification(this.$t('resources.insufficient_ram'));
-                return;
-            }
-            const actions = [];
-            if (!this.evmAddress) {
-                actions.push({
-                    account: 'eosio.evm',
-                    name: 'create',
-                    data: {
-                        account: this.accountName.toLowerCase(),
-                        data: 'create',
-                    },
-                });
-            }
-            try {
-                const transaction = await this.$store.$api.signTransaction(
-                    actions,
-                    this.$t('components.create_evm_for', { account: this.accountName }),
-                );
-                await this.setEvmState();
-                this.$successNotification(this.$t('components.created_evm_for', { account: this.accountName }));
-                this.depositAmount = '0';
-                this.depositOwnAddress = false;
-                this.recipientAddress = this.evmAddress;
-                this.recipientAddressExists = true;
-
-            } catch (error) {
-                this.$errorNotification(error);
-            }
-        },
         async deposit() {
             let amount = parseFloat(this.depositAmount);
             if (amount > parseFloat(this.nativeTLOSBalance)) {
@@ -163,7 +127,6 @@ export default {
                 this.$emit('updateBalances');
 
                 this.depositAmount = '0';
-                this.depositOwnAddress = false;
                 this.recipientAddress = '';
                 this.recipientAddressExists = true;
                 this.showDlg = false;
@@ -179,9 +142,6 @@ export default {
             if (this.showDlg) {
                 this.$emit('addEvmNetwork');
             };
-            if (this.evmAddress){
-                this.recipientAddress = this.evmAddress;
-            }
         },
     },
 };
@@ -267,15 +227,7 @@ export default {
                     @click="deposit"
                 />
             </div>
-            <div v-if="!recipientAddress && !evmAddress" class="row justify-center">
-                <q-btn
-                    class="purpleGradient depositBtn"
-                    no-caps
-                    rounded
-                    label="Generate Linked EVM address"
-                    @click="generateAddress"
-                />
-            </div>
+
             <div class="row justify-center">
                 <div
                     class="lightBlue depositAddressToggle q-mt-xs"
@@ -285,20 +237,6 @@ export default {
                 </div>
             </div>
             <div class="row justify-center q-mt-md">
-                <div v-if="!evmAddress && depositOwnAddress" class="note">
-                    {{$t('components.first_deposit')}}
-                </div>
-                <div
-                    v-if="
-                        !recipientAddressExists &&
-                            !depositOwnAddress &&
-                            recipientAddress != ''
-                    "
-                    class="note"
-                >
-                    {{$t('components.address_not_exist')}}
-                </div>
-
                 <q-card-section class="q-pt-sm text-warning">
                     {{$t('components.dont_send_to_exchanges')}}
                 </q-card-section>

src/pages/native/balance/WithdrawEVM.vue

@@ -1,5 +1,7 @@
 <script>
 import { mapGetters, mapActions } from 'vuex';
+import { getAntelope } from 'src/antelope';
+const MINIMUM_RAM_BYTES = 1000;
 
 export default {
     name: 'WithdrawEVM',
@@ -8,10 +10,12 @@ export default {
     data() {
         return {
             withdrawAmount: '0',
+            displayAddress: false,
+            ant : getAntelope(),
         };
     },
     computed: {
-        ...mapGetters('account', ['isAuthenticated', 'accountName']),
+        ...mapGetters('account', ['isAuthenticated', 'accountName', 'evmAddress']),
         showDlg: {
             get() {
                 return this.showWithdrawEVMDlg;
@@ -32,6 +36,49 @@ export default {
                 this.withdrawAmount = Number(this.withdrawAmount).toString();
             }
         },
+        displayEvmAddress() {
+
+            this.ant.config.notifyWarningWithAction(this.$t('components.evm_address_disclaimer'), {
+                label: this.ant.config.localizationHandler(this.$t('components.evm_disclaimer_confirmation')),
+                handler: () => {
+                    // user confirms they understand the single use-case for the generated evm address
+                    this.displayAddress = true;
+                },
+            });
+        },
+        copyAddress() {
+            navigator.clipboard.writeText(this.evmAddress);
+            this.ant.config.notifySuccessCopyHandler();
+        },
+        async generateAddress(){
+            const accountInfo = await this.$store.$api.getAccount(this.accountName);
+
+            if (accountInfo.ram_quota - accountInfo.ram_usage <= MINIMUM_RAM_BYTES){ // If account (often newly created account) does not have sufficient RAM, notify user
+                this.$errorNotification(this.$t('resources.insufficient_ram'));
+                return;
+            }
+            const actions = [];
+            if (!this.evmAddress) {
+                actions.push({
+                    account: 'eosio.evm',
+                    name: 'create',
+                    data: {
+                        account: this.accountName.toLowerCase(),
+                        data: 'create',
+                    },
+                });
+            }
+            try {
+                const transaction = await this.$store.$api.signTransaction(
+                    actions,
+                    this.$t('components.create_evm_for', { account: this.accountName }),
+                );
+                await this.setEvmState();
+                this.$successNotification(this.$t('components.created_evm_for', { account: this.accountName }));
+            } catch (error) {
+                this.$errorNotification(error);
+            }
+        },
         async withdraw() {
             let amount = parseFloat(this.withdrawAmount);
             if (amount > parseFloat(this.evmTLOSBalance)) {
@@ -64,7 +111,6 @@ export default {
             }
         },
     },
-    watch: {},
 };
 </script>
 
@@ -96,6 +142,43 @@ export default {
             <div class="text-center text-subtitle2 text-grey-4">
                 {{$t('components.withdraw_1')}}<br >{{$t('components.withdraw_2')}}
             </div>
+            <div
+                v-if="displayAddress"
+            >
+                <q-btn
+                    class="purpleGradient addressCopyBtn"
+                    no-caps
+                    rounded
+                    icon="content_copy"
+                    :label="evmAddress"
+                    @click="copyAddress"
+                />
+            </div>
+            <div v-if="evmAddress && !displayAddress">
+                <q-btn
+                    class="purpleGradient generateAccountBtn"
+                    no-caps
+                    rounded
+                    label="Display Linked EVM Address"
+                    @click="displayEvmAddress"
+                />
+            </div>
+            <div v-if="!evmAddress" class="row justify-center">
+                <div
+                    class="note"
+                >
+                    {{$t('components.evm_address_not_found')}}
+                </div>
+            </div>
+            <div v-if="!evmAddress" class="row justify-center">
+                <q-btn
+                    class="purpleGradient generateAccountBtn"
+                    no-caps
+                    rounded
+                    label="Generate Linked EVM address"
+                    @click="generateAddress"
+                />
+            </div>
             <div class="text-center q-mt-md">
                 <div class="inputAmount row items-center ">
                     <input
@@ -110,11 +193,11 @@ export default {
                         TLOS
                     </label>
                 </div>
-                <div class="" @click="withdrawAmount=evmTLOSBalance">Max: {{ evmTLOSBalance }}</div>
+                <div class="" @click="withdrawAmount=evmTLOSBalance">Max: {{ evmTLOSBalance || '0' }}</div>
             </div>
             <div class="row justify-center q-mt-md q-mb-lg">
                 <q-btn
-                    :disabled="!(parseFloat(withdrawAmount) > 0)"
+                    :disabled="!(evmTLOSBalance > 0) && !evmAddress"
                     class="purpleGradient withdrawBtn"
                     no-caps
                     rounded
@@ -136,4 +219,19 @@ export default {
     flex-basis: 15rem;
     height: 3rem;
 }
+.generateAccountBtn, .addressCopyBtn {
+  flex-basis: 15rem;
+  height: 3rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.addressCopyBtn{
+    font-size: 18px;
+    word-break: break-all;
+    height: fit-content;
+}
+
 </style>
+
+