Merge pull request #351 from telosnetwork/350-create-new-tab-in-dev-t…

…ools-page-for-a-zkevm-faucet

#350 | adding zkEVM faucet in dev-tools page

src/i18n/en-us/index.js

@@ -325,6 +325,8 @@ export default {
             send_tlos_telos_subtitle: 'Use this tab to send TLOS tokens to a Telos native account.',
             send_tlos_evm_title: 'Send TLOS to EVM Address',
             send_tlos_evm_subtitle: 'Send TLOS tokens to an EVM compatible address with this option.',
+            send_tlos_zkevm_title: 'Send tTLOS to zkEVM Address',
+            send_tlos_zkevm_subtitle: 'Send tTLOS tokens to a zkEVM compatible address with this option.',
         },
         testnetEvmFaucet: {
             title: 'Get testnet EVM TLOS',

src/pages/testnet/DevelopersPage.vue

@@ -19,6 +19,9 @@ function faucet(send_to: string) {
 function evmFaucet(send_to_evm: string) {
     return store.dispatch('testnet/evmFaucet', send_to_evm);
 }
+function zkEvmFaucet(send_to_evm: string) {
+    return store.dispatch('testnet/zkEvmFaucet', send_to_evm);
+}
 function createAccount(form: {
   account_name: string;
   owner_key: string;
@@ -30,7 +33,7 @@ function getAccount(account: string) {
     return store.dispatch('testnet/getAccount', account);
 }
 
-const availableTabs = ['create', 'tlos-native', 'tlos-evm'];
+const availableTabs = ['create', 'tlos-native', 'tlos-evm', 'tlos-zkevm'];
 const defaultTab = 'create';
 
 const transactionId = ref('');
@@ -50,6 +53,10 @@ const tlosEvmLabel = computed(() => {
     return $q.screen.gt.sm ? 'Send TLOS (EVM)' : 'EVM TLOS';
 });
 
+const tlosZkEvmLabel = computed(() => {
+    return $q.screen.gt.sm ? 'Send tTLOS (ZK-EVM)' : 'ZK-EVM tTLOS';
+});
+
 // Result Notifications
 async function handleAnswer(answer: string | object, successMessage: string) {
     if (
@@ -209,6 +216,23 @@ async function onEvmFaucet() {
     }
 }
 
+async function onZkEvmFaucet() {
+    if (isValidEvmAddress()) {
+        submitting.value = true;
+        const result = await zkEvmFaucet(sendTlosForm.value.send_to_evm);
+        handleAnswer(result, '50.0 tTLOS were sent successfully');
+        submitting.value = false;
+    } else {
+        Notify.create({
+            message: 'Please provide a valid EVM address',
+            position: 'top',
+            color: 'negative',
+            textColor: 'white',
+            actions: [{ label: 'Dismiss', color: 'white' }],
+        });
+    }
+}
+
 async function onAccount() {
     if (!isCreateAccountButtonDisabled()) {
         submitting.value = true;
@@ -324,6 +348,11 @@ checkTabFromUrl();
           name="tlos-evm"
           :label="tlosEvmLabel"
         />
+        <q-tab
+          class="p-dev-page__tabs-tab"
+          name="tlos-zkevm"
+          :label="tlosZkEvmLabel"
+        />
       </q-tabs>
 
       <q-tab-panels class="p-dev-page__panels" v-model="tab" animated>
@@ -385,11 +414,6 @@ checkTabFromUrl();
             :disable="isCreateAccountButtonDisabled"
             @click="onAccount"
           ></q-btn>
-          <q-btn
-            v-if="transactionId"
-            class="p-dev-page__panel-btn p-dev-page__trx-id"
-            color="secondary"
-            ><a href="#" targe="_blank">{{ transactionId }}</a></q-btn
           >
         </q-tab-panel>
 
@@ -424,11 +448,6 @@ checkTabFromUrl();
             :loading="submitting"
             @click="onFaucet"
           ></q-btn>
-          <q-btn
-            v-if="transactionId"
-            class="p-dev-page__panel-btn p-dev-page__trx-id"
-            color="secondary"
-            ><a href="#" targe="_blank">{{ transactionId }}</a></q-btn
           >
         </q-tab-panel>
 
@@ -466,13 +485,50 @@ checkTabFromUrl();
             :loading="submitting"
             @click="onEvmFaucet"
           ></q-btn>
+        </q-tab-panel>
+
+        <q-tab-panel class="p-dev-page__panel" name="tlos-zkevm">
+          <q-card-section class="p-dev-page__panel-section">
+            <div class="text-h6">
+              {{ $t("pages.testnet_developers.send_tlos_zkevm_title") }}
+            </div>
+            <div class="text-subtitle2">
+              {{ $t("pages.testnet_developers.send_tlos_zkevm_subtitle") }}
+            </div>
+          </q-card-section>
+          <!-- Inputs and button for sending tTLOS to zkEVM address -->
+          <q-input
+            class="q-mb-lg"
+            ref="send_to_evm"
+            v-model="sendTlosForm.send_to_evm"
+            color="primary"
+            label="Send to zkEVM address"
+            :rules="[
+              (val) =>
+                /^0x[a-fA-F0-9]{40}$/.test(val) ||
+                'Please provide a valid EVM address with 0x prefix',
+            ]"
+            outlined="outlined"
+          ></q-input>
+          <div class="p-dev-page__expand"></div>
+          <q-btn
+            v-if="!transactionId"
+            class="p-dev-page__panel-btn"
+            color="primary"
+            label="Send testnet zkEVM tTLOS"
+            size="lg"
+            unelevated="unelevated"
+            :loading="submitting"
+            @click="onZkEvmFaucet"
+          ></q-btn>
           <q-btn
             v-if="transactionId"
             class="p-dev-page__panel-btn p-dev-page__trx-id"
             color="secondary"
-            ><a href="#" targe="_blank">{{ transactionId }}</a></q-btn
+            ><a href="#" target="_blank">{{ transactionId }}</a></q-btn
           >
         </q-tab-panel>
+
       </q-tab-panels>
     </q-card>
   </q-page>

src/store/testnet/actions.js

@@ -33,6 +33,17 @@ export const evmFaucet = async function (conntext, evmAddress) {
     }
 };
 
+export const zkEvmFaucet = async function (context, zkEvmAddress) {
+    try {
+        const response = await this.$axios.get(
+            `/v1/testnet/zkEvmFaucet/${zkEvmAddress}`
+        );
+        return response;
+    } catch (e) {
+        return e.message ? e.message : FAIL_MESSAGE;
+    }
+};
+
 export const account = async function (context, form) {
     try {
         const response = await this.$axios.post('/v1/testnet/account', {