Merge pull request telosnetwork#330 from telosnetwork/develop

feat: testnet faucet for evm only

src/boot/layouts.js

@@ -2,6 +2,7 @@ import { boot } from 'quasar/wrappers';
 import AuthLayout from '../layouts/AuthLayout.vue';
 import EmptyLayout from '../layouts/EmptyLayout.vue';
 import GuestLayout from '../layouts/GuestLayout.vue';
+import LogoLayout from '../layouts/LogoLayout.vue';
 import Gravatar from 'vue-gravatar';
 
 // "async" is optional;
@@ -10,5 +11,6 @@ export default boot(({ app }) => {
     app.component('LayoutMain', AuthLayout);
     app.component('LayoutEmpty', EmptyLayout);
     app.component('LayoutGuest', GuestLayout);
+    app.component('LayoutLogo', LogoLayout);
     app.component('v-gravatar', Gravatar);
 });

src/i18n/en-us/index.js

@@ -319,6 +319,9 @@ export default {
         testnetDevelopers: {
             title: 'Get a testnet account or testnet TLOS',
         },
+        testnetEvmFaucet: {
+            title: 'Get testnet EVM TLOS',
+        },
         tokens: {
             title: 'Token management',
         },

src/layouts/LogoLayout.vue

@@ -0,0 +1,30 @@
+<script>
+export default {
+    name: 'LogoLayout',
+};
+</script>
+
+<template>
+  <q-layout view="hHh lpR fFf">
+    <q-header class="bg-white">
+      <q-toolbar>
+        <q-toolbar-title class="flex items-center">
+          <a href="https://telos.net">
+            <img class="toolbar-img" src="branding/telos-logo-dark.png" />
+          </a>
+        </q-toolbar-title>
+      </q-toolbar>
+    </q-header>
+
+    <q-page-container>
+      <router-view />
+    </q-page-container>
+  </q-layout>
+</template>
+
+<style>
+.toolbar-img {
+  max-height: 30px;
+  cursor: pointer;
+}
+</style>

src/pages/testnet/TestnetEvmFaucet.vue

@@ -0,0 +1,67 @@
+<script>
+import { mapActions } from 'vuex';
+import { Notify } from 'quasar';
+
+export default {
+    name: 'TestnetEvmFaucet',
+    data() {
+        return {
+            form: {
+                send_to: null,
+                account_name: null,
+                owner_key: null,
+                active_key: null,
+            },
+            transactionId: null,
+            submitting: false,
+        };
+    },
+    methods: {
+        ...mapActions('testnet', ['evmFaucet']),
+        async onEvmFaucet() {
+            this.submitting = true;
+            const result = await this.evmFaucet(this.form.send_to_evm);
+            if (result) {
+                Notify.create({
+                    message: result instanceof Object ? 'Success!' : result,
+                    position: 'top',
+                    color: 'primary',
+                    textColor: 'white',
+                    actions: [{ label: 'Dismiss', color: 'white' }],
+                });
+                this.transactionId = result.transactionId;
+            }
+            this.submitting = false;
+        },
+    },
+};
+</script>
+
+<template lang="pug">
+q-page.flex.flex-center
+  q-card
+    q-card-section
+      div.center.text-h4 Testnet faucet
+    q-card-section
+      q-input.q-mb-lg(
+        ref="send_to_evm"
+        v-model="form.send_to_evm"
+        color="accent"
+        label="Send to EVM address"
+        :rules="[ val => /^0x[a-fA-F0-9]{40}$/.test(val) || 'Please provide a valid EVM address with 0x prefix']"
+        outlined
+      )
+      q-btn.full-width(
+        color="primary"
+        label="Send testnet EVM TLOS"
+        size="lg"
+        unelevated
+        :loading="submitting"
+        @click="onEvmFaucet"
+      )
+    q-card-section(v-if="transactionId")
+      a(
+        :href="`https://telos-test.bloks.io/transaction/${transactionId}`"
+        target="_blank"
+      ) Trx explorer
+</template>

src/router/routes.js

@@ -98,6 +98,15 @@ const routes = [
             guest: true,
         },
     },
+    {
+        path: '/testnet/evm-faucet',
+        component: () => import('pages/testnet/TestnetEvmFaucet.vue'),
+        meta: {
+            layout: 'logo',
+            title: 'pages.testnetEvmFaucet.title',
+            guest: true,
+        },
+    },
 
     // Tokens
     {