From 713b223e4511dccf3b93e47ce7a2acd692ff683e Mon Sep 17 00:00:00 2001
From: donnyquixotic <don@caleos.io>
Date: Fri, 15 Mar 2024 11:52:30 -0500
Subject: [PATCH 1/2] fix: testnet account check, typo

---
 src/pages/testnet/DevelopersPage.vue | 541 +++++++++++++++------------
 src/store/testnet/actions.js         |  13 +
 2 files changed, 317 insertions(+), 237 deletions(-)

diff --git a/src/pages/testnet/DevelopersPage.vue b/src/pages/testnet/DevelopersPage.vue
index fafd5ba6..e62c3dc4 100644
--- a/src/pages/testnet/DevelopersPage.vue
+++ b/src/pages/testnet/DevelopersPage.vue
@@ -4,13 +4,11 @@ import { useQuasar } from 'quasar';
 import { useRoute, useRouter } from 'vue-router';
 import { useStore } from 'vuex';
 import { Notify } from 'quasar';
-import { API } from 'src/types';
 
 const store = useStore();
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
-const $api = store['$api'] as API;
 
 // proxy functions for vuex actions
 function faucet(send_to: string) {
@@ -19,9 +17,16 @@ function faucet(send_to: string) {
 function evmFaucet(send_to_evm: string) {
     return store.dispatch('testnet/evmFaucet', send_to_evm);
 }
-function account(form: { account_name: string, owner_key: string, active_key: string }) {
+function createAccount(form: {
+  account_name: string;
+  owner_key: string;
+  active_key: string;
+}) {
     return store.dispatch('testnet/account', form);
 }
+function getAccount(account: string) {
+    return store.dispatch('testnet/getAccount', account);
+}
 
 const availableTabs = ['create', 'tlos-native', 'tlos-evm'];
 const defaultTab = 'create';
@@ -30,7 +35,6 @@ const transactionId = ref('');
 const submitting = ref(false);
 const tab = ref(defaultTab);
 
-
 // Tab labels
 const createLabel = computed(() => {
     return $q.screen.gt.sm ? 'Create Account' : 'Account';
@@ -65,7 +69,6 @@ async function handleAnswer(answer: string | object, successMessage: string) {
     }
 }
 
-
 const createAccountForm = ref({
     account_name: '',
     owner_key: '',
@@ -75,7 +78,6 @@ const createAccountForm = ref({
 });
 
 function checkAccountAvailability(account_name: string) {
-    
     // check if the account name has an invalid character,
     // allowed characters are lowercase letters and numbers from 1 to 5
     if (!/^[a-z1-5]+$/.test(account_name)) {
@@ -89,34 +91,41 @@ function checkAccountAvailability(account_name: string) {
         return 'Account name must be 12 characters long';
     }
 
-    return $api.getAccount(account_name).then(() => {
-        createAccountForm.value.available = false;
-        return 'Account already exists';
-    }).catch(() => {
-        createAccountForm.value.available = true;
-        return true;
-    }).finally(() => {
-        createAccountForm.value.checking_account = false;
-    });
+    return getAccount(account_name)
+        .then(() => {
+            createAccountForm.value.available = false;
+            return 'Account already exists';
+        })
+        .catch(() => {
+            createAccountForm.value.available = true;
+            return true;
+        })
+        .finally(() => {
+            createAccountForm.value.checking_account = false;
+        });
 }
 
 function isAnyInputInvalid() {
     return (
         !createAccountForm.value.account_name ||
-        createAccountForm.value.account_name.length !== 12 ||
-        !/^EOS[0-9A-Za-z]{50}$|^PUB_K1_[0-9A-Za-z]{50}$/i.test(createAccountForm.value.owner_key) ||
-        !/^EOS[0-9A-Za-z]{50}$|^PUB_K1_[0-9A-Za-z]{50}$/i.test(createAccountForm.value.active_key)
+    createAccountForm.value.account_name.length !== 12 ||
+    !/^EOS[0-9A-Za-z]{50}$|^PUB_K1_[0-9A-Za-z]{50}$/i.test(
+        createAccountForm.value.owner_key
+    ) ||
+    !/^EOS[0-9A-Za-z]{50}$|^PUB_K1_[0-9A-Za-z]{50}$/i.test(
+        createAccountForm.value.active_key
+    )
     );
 }
 
 function isCreateAccountButtonDisabled() {
     return (
         !createAccountForm.value.account_name ||
-        !createAccountForm.value.owner_key ||
-        !createAccountForm.value.active_key ||
-        !createAccountForm.value.available ||
-        submitting.value ||
-        isAnyInputInvalid()
+    !createAccountForm.value.owner_key ||
+    !createAccountForm.value.active_key ||
+    !createAccountForm.value.available ||
+    submitting.value ||
+    isAnyInputInvalid()
     );
 }
 
@@ -128,16 +137,19 @@ const sendTlosForm = ref({
     checking_account: false,
 });
 
-function checkAccountExists(account) {
-    return $api.getAccount(account).then(() => {
-        sendTlosForm.value.account_exists = true;
-        return true;
-    }).catch(() => {
-        sendTlosForm.value.account_exists = false;
-        return 'Account does not exist';
-    }).finally(() => {
-        sendTlosForm.value.checking_account = false;
-    });
+function checkAccountExists(account: string) {
+    return getAccount(account)
+        .then(() => {
+            sendTlosForm.value.account_exists = true;
+            return true;
+        })
+        .catch(() => {
+            sendTlosForm.value.account_exists = false;
+            return 'Account does not exist';
+        })
+        .finally(() => {
+            sendTlosForm.value.checking_account = false;
+        });
 }
 
 function isValidEvmAddress() {
@@ -185,7 +197,7 @@ async function onEvmFaucet() {
 async function onAccount() {
     if (!isCreateAccountButtonDisabled()) {
         submitting.value = true;
-        const result = await account({
+        const result = await createAccount({
             account_name: createAccountForm.value.account_name,
             owner_key: createAccountForm.value.owner_key,
             active_key: createAccountForm.value.active_key,
@@ -209,7 +221,11 @@ async function onAccount() {
                 textColor: 'white',
                 actions: [{ label: 'Dismiss', color: 'white' }],
             });
-        } else if (!/^EOS[0-9A-Za-z]{50}$|^PUB_K1_[0-9A-Za-z]{50}$/i.test(createAccountForm.value.owner_key)) {
+        } else if (
+            !/^EOS[0-9A-Za-z]{50}$|^PUB_K1_[0-9A-Za-z]{50}$/i.test(
+                createAccountForm.value.owner_key
+            )
+        ) {
             Notify.create({
                 message: 'Please provide a valid Owner key',
                 position: 'top',
@@ -217,7 +233,11 @@ async function onAccount() {
                 textColor: 'white',
                 actions: [{ label: 'Dismiss', color: 'white' }],
             });
-        } else if (!/^EOS[0-9A-Za-z]{50}$|^PUB_K1_[0-9A-Za-z]{50}$/i.test(createAccountForm.value.active_key)) {
+        } else if (
+            !/^EOS[0-9A-Za-z]{50}$|^PUB_K1_[0-9A-Za-z]{50}$/i.test(
+                createAccountForm.value.active_key
+            )
+        ) {
             Notify.create({
                 message: 'Please provide a valid Active key',
                 position: 'top',
@@ -240,7 +260,10 @@ function checkTabFromUrl() {
 }
 
 watch(route.query, (newQuery) => {
-    if (newQuery.tab && availableTabs.includes((newQuery.tab ?? defaultTab) as string)) {
+    if (
+        newQuery.tab &&
+    availableTabs.includes((newQuery.tab ?? defaultTab) as string)
+    ) {
         tab.value = newQuery.tab as string;
     } else {
         tab.value = defaultTab;
@@ -255,221 +278,265 @@ watch(tab, (newTab) => {
 checkTabFromUrl();
 </script>
 <template>
-<q-page class="p-dev-page flex flex-center">
+  <q-page class="p-dev-page flex flex-center">
     <div class="p-dev-page__title-card">
-        <div class="p-dev-page__title">{{ $t('pages.testnet_developers.page_title') }}</div>
-        <div class="text-subtitle2">{{ $t('pages.testnet_developers.page_subtitle') }}</div>
+      <div class="p-dev-page__title">
+        {{ $t("pages.testnet_developers.page_title") }}
+      </div>
+      <div class="text-subtitle2">
+        {{ $t("pages.testnet_developers.page_subtitle") }}
+      </div>
     </div>
     <q-card class="p-dev-page__main-card">
-        <q-tabs class="p-dev-page__tabs-tabs text-primary shadow-2" align="justify" v-model="tab" dense>
-            <q-tab class="p-dev-page__tabs-tab" name="create" :label="createLabel" />
-            <q-tab class="p-dev-page__tabs-tab" name="tlos-native" :label="tlosNativeLabel" />
-            <q-tab class="p-dev-page__tabs-tab" name="tlos-evm" :label="tlosEvmLabel" />
-        </q-tabs>
+      <q-tabs
+        class="p-dev-page__tabs-tabs text-primary shadow-2"
+        align="justify"
+        v-model="tab"
+        dense
+      >
+        <q-tab
+          class="p-dev-page__tabs-tab"
+          name="create"
+          :label="createLabel"
+        />
+        <q-tab
+          class="p-dev-page__tabs-tab"
+          name="tlos-native"
+          :label="tlosNativeLabel"
+        />
+        <q-tab
+          class="p-dev-page__tabs-tab"
+          name="tlos-evm"
+          :label="tlosEvmLabel"
+        />
+      </q-tabs>
+
+      <q-tab-panels class="p-dev-page__panels" v-model="tab" animated>
+        <q-tab-panel class="p-dev-page__panel" name="create">
+          <q-card-section class="p-dev-page__panel-section">
+            <div class="text-h6">
+              {{ $t("pages.testnet_developers.create_new_account_title") }}
+            </div>
+            <div class="text-subtitle2">
+              {{ $t("pages.testnet_developers.create_new_account_subtitle") }}
+            </div>
+          </q-card-section>
+          <q-input
+            class="q-mb-lg"
+            ref="account_name"
+            v-model="createAccountForm.account_name"
+            color="primary"
+            label="Account name"
+            outlined="outlined"
+            maxlength="12"
+            :loading="createAccountForm.checking_account"
+            :rules="[checkAccountAvailability]"
+          ></q-input>
+          <q-input
+            class="q-mb-lg"
+            ref="owner_key"
+            v-model="createAccountForm.owner_key"
+            color="primary"
+            label="Owner key"
+            :rules="[
+              (val) =>
+                /^EOS[0-9A-Za-z]{50}$|^PUB_K1_[0-9A-Za-z]{50}$/i.test(val) ||
+                'Please provide a valid Owner key',
+            ]"
+            outlined="outlined"
+          ></q-input>
+          <q-input
+            class="q-mb-lg"
+            ref="active_key"
+            v-model="createAccountForm.active_key"
+            color="primary"
+            label="Active key"
+            :rules="[
+              (val) =>
+                /^EOS[0-9A-Za-z]{50}$|^PUB_K1_[0-9A-Za-z]{50}$/i.test(val) ||
+                'Please provide a valid Active key',
+            ]"
+            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="Create testnet account"
+            size="lg"
+            unelevated="unelevated"
+            :loading="submitting"
+            :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>
+
+        <q-tab-panel class="p-dev-page__panel" name="tlos-native">
+          <q-card-section class="p-dev-page__panel-section">
+            <div class="text-h6">
+              {{ $t("pages.testnet_developers.send_tlos_telos_title") }}
+            </div>
+            <div class="text-subtitle2">
+              {{ $t("pages.testnet_developers.send_tlos_telos_subtitle") }}
+            </div>
+          </q-card-section>
+          <!-- we need to ensure the account does not exist with a rule -->
+          <q-input
+            class="q-mb-lg"
+            ref="send_to_evm"
+            v-model="sendTlosForm.send_to_zero"
+            color="primary"
+            label="Send to Telos account"
+            outlined="outlined"
+            :loading="sendTlosForm.checking_account"
+            :rules="[checkAccountExists]"
+          ></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 TLOS"
+            size="lg"
+            unelevated="unelevated"
+            :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>
 
-        <q-tab-panels class="p-dev-page__panels" v-model="tab" animated>
-            <q-tab-panel class="p-dev-page__panel" name="create">
-                <q-card-section class="p-dev-page__panel-section">
-                    <div class="text-h6">{{ $t('pages.testnet_developers.create_new_account_title') }}</div>
-                    <div class="text-subtitle2">{{ $t('pages.testnet_developers.create_new_account_subtitle') }}</div>
-                </q-card-section>
-                <q-input
-                    class="q-mb-lg"
-                    ref="account_name"
-                    v-model="createAccountForm.account_name"
-                    color="primary"
-                    label="Account name"
-                    outlined="outlined"
-                    maxlength="12"
-                    :loading="createAccountForm.checking_account"
-                    :rules="[
-                        checkAccountAvailability
-                    ]"></q-input>
-                <q-input
-                    class="q-mb-lg"
-                    ref="owner_key"
-                    v-model="createAccountForm.owner_key"
-                    color="primary"
-                    label="Owner key"
-                    :rules="[
-                        val => (/^EOS[0-9A-Za-z]{50}$|^PUB_K1_[0-9A-Za-z]{50}$/i.test(val)) ||
-                        'Please provide a valid Owner key'
-                    ]"
-                    outlined="outlined"></q-input>
-                <q-input
-                    class="q-mb-lg"
-                    ref="active_key"
-                    v-model="createAccountForm.active_key"
-                    color="primary"
-                    label="Active key"
-                    :rules="[
-                        val => (/^EOS[0-9A-Za-z]{50}$|^PUB_K1_[0-9A-Za-z]{50}$/i.test(val)) ||
-                        'Please provide a valid Active key'
-                    ]"
-                    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="Create testnet account"
-                    size="lg"
-                    unelevated="unelevated"
-                    :loading="submitting"
-                    :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>
-    
-            <q-tab-panel class="p-dev-page__panel" name="tlos-native">
-                <q-card-section class="p-dev-page__panel-section">
-                    <div class="text-h6">{{ $t('pages.testnet_developers.send_tlos_telos_title') }}</div>
-                    <div class="text-subtitle2">{{ $t('pages.testnet_developers.send_tlos_telos_subtitle') }}</div>
-                </q-card-section>
-                <!-- we need to ensure the account does not exist with a rule -->
-                <q-input
-                    class="q-mb-lg"
-                    ref="send_to_evm"
-                    v-model="sendTlosForm.send_to_zero"
-                    color="primary"
-                    label="Send to Telos account"
-                    outlined="outlined"
-                    :loading="sendTlosForm.checking_account"
-                    :rules="[
-                        checkAccountExists,
-                    ]"
-                    ></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 TLOS"
-                    size="lg"
-                    unelevated="unelevated"
-                    :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>
-    
-            <q-tab-panel class="p-dev-page__panel" name="tlos-evm">
-                <q-card-section class="p-dev-page__panel-section">
-                    <div class="text-h6">{{ $t('pages.testnet_developers.send_tlos_evm_title') }}</div>
-                    <div class="text-subtitle2">{{ $t('pages.testnet_developers.send_tlos_evm_subtitle') }}</div>
-                </q-card-section>
-                <!-- Inputs and button for sending TLOS to EVM address -->
-                <q-input
-                    class="q-mb-lg"
-                    ref="send_to_evm"
-                    v-model="sendTlosForm.send_to_evm"
-                    color="primary"
-                    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="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 EVM TLOS"
-                    size="lg"
-                    unelevated="unelevated"
-                    :loading="submitting"
-                    @click="onEvmFaucet"></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>
-        </q-tab-panels>
+        <q-tab-panel class="p-dev-page__panel" name="tlos-evm">
+          <q-card-section class="p-dev-page__panel-section">
+            <div class="text-h6">
+              {{ $t("pages.testnet_developers.send_tlos_evm_title") }}
+            </div>
+            <div class="text-subtitle2">
+              {{ $t("pages.testnet_developers.send_tlos_evm_subtitle") }}
+            </div>
+          </q-card-section>
+          <!-- Inputs and button for sending TLOS to EVM address -->
+          <q-input
+            class="q-mb-lg"
+            ref="send_to_evm"
+            v-model="sendTlosForm.send_to_evm"
+            color="primary"
+            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="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 EVM TLOS"
+            size="lg"
+            unelevated="unelevated"
+            :loading="submitting"
+            @click="onEvmFaucet"
+          ></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>
+      </q-tab-panels>
     </q-card>
-</q-page>
+  </q-page>
 </template>
 <style lang="scss">
-
 .flex-grow-1 {
-    flex-grow: 1;
+  flex-grow: 1;
 }
 .p-dev-page {
+  flex-direction: column;
+  &__main-card,
+  &__title-card {
+    margin: 20px auto 0px auto;
+    width: 90%;
+    max-width: 1000px;
+    padding: 0 93px;
+    min-height: 75vh;
+    display: flex;
     flex-direction: column;
-    &__main-card, &__title-card {
-        margin: 20px auto 0px auto;
-        width: 90%;
-        max-width: 1000px;
-        padding: 0 93px;
-        min-height: 75vh;
-        display: flex;
-        flex-direction: column;
-    }
-    &__title-card {
-        min-height: 0px;
-        margin-bottom: 16px;
-    }
-    &__title {
-        font-size: 24px;
-        font-weight: 600;
-        margin-bottom: 16px;
-    }
-    &__tabs-tabs {
-        display: block !important;
-        margin: 20px 16px;
-        font-size: 16px;
-        font-weight: 600;
-    }
-    &__tabs-tab {
-        text-transform: none !important;
-    }
-    &__panels {
-        flex-grow: 1;
-        display: flex;
-        flex-direction: column;
-        .q-panel {
-            flex-grow: 1;
-            display: flex;
-            flex-direction: column;
-        }
-    }
-    &__panel {
-        flex-grow: 1;
-        display: flex;
-        flex-direction: column;
-    }
-    &__panel-section {
-        margin-bottom: 46px;
-    }
-    &__panel-btn {
-        margin-bottom: 26px;
-        widows: 100%;
-    }
-    &__trx-id {
-        margin-bottom: 26px;
-        widows: 100%;
-    }
-    &__expand {
-        flex-grow: 1;
+  }
+  &__title-card {
+    min-height: 0px;
+    margin-bottom: 16px;
+  }
+  &__title {
+    font-size: 24px;
+    font-weight: 600;
+    margin-bottom: 16px;
+  }
+  &__tabs-tabs {
+    display: block !important;
+    margin: 20px 16px;
+    font-size: 16px;
+    font-weight: 600;
+  }
+  &__tabs-tab {
+    text-transform: none !important;
+  }
+  &__panels {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    .q-panel {
+      flex-grow: 1;
+      display: flex;
+      flex-direction: column;
     }
+  }
+  &__panel {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+  }
+  &__panel-section {
+    margin-bottom: 46px;
+  }
+  &__panel-btn {
+    margin-bottom: 26px;
+    widows: 100%;
+  }
+  &__trx-id {
+    margin-bottom: 26px;
+    widows: 100%;
+  }
+  &__expand {
+    flex-grow: 1;
+  }
 }
 
 @media (max-width: 850px) {
-    .p-dev-page {
-        &__main-card {
-            padding: 0 16px;
-            min-height: 70vh;
-        }
-        &__title-card {
-            padding: 0 16px;
-            min-height: 0px;
-        }
+  .p-dev-page {
+    &__main-card {
+      padding: 0 16px;
+      min-height: 70vh;
+    }
+    &__title-card {
+      padding: 0 16px;
+      min-height: 0px;
     }
+  }
 }
 </style>
diff --git a/src/store/testnet/actions.js b/src/store/testnet/actions.js
index 57e221b3..aec3df88 100644
--- a/src/store/testnet/actions.js
+++ b/src/store/testnet/actions.js
@@ -1,3 +1,5 @@
+import axios from 'axios';
+
 const FAIL_MESSAGE = 'Failed to call API';
 
 export const produce = async function (context, accountName) {
@@ -43,3 +45,14 @@ export const account = async function (context, form) {
         return e.message ? e.message : FAIL_MESSAGE;
     }
 };
+
+export const getAccount = async function (context, account) {
+    try {
+        const response = await axios.get(
+            `https://api-dev.telos.net/v1/accounts/${account}`
+        );
+        return response;
+    } catch (e) {
+        return e.message ? e.message : FAIL_MESSAGE;
+    }
+};

From b6d84a799edbd07028eb19caf0988b2c003e7433 Mon Sep 17 00:00:00 2001
From: donnyquixotic <don@caleos.io>
Date: Fri, 15 Mar 2024 13:14:07 -0500
Subject: [PATCH 2/2] fix: response handling from api account check,
 notifications for successful account creation

---
 src/pages/testnet/DevelopersPage.vue | 53 ++++++++++++++++++----------
 1 file changed, 34 insertions(+), 19 deletions(-)

diff --git a/src/pages/testnet/DevelopersPage.vue b/src/pages/testnet/DevelopersPage.vue
index e62c3dc4..fa6c642c 100644
--- a/src/pages/testnet/DevelopersPage.vue
+++ b/src/pages/testnet/DevelopersPage.vue
@@ -10,6 +10,8 @@ const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
 
+const TRANSACTION_RESPONSE_LENGTH = 64;
+
 // proxy functions for vuex actions
 function faucet(send_to: string) {
     return store.dispatch('testnet/faucet', send_to);
@@ -50,19 +52,22 @@ const tlosEvmLabel = computed(() => {
 
 // Result Notifications
 async function handleAnswer(answer: string | object, successMessage: string) {
-    if (typeof answer === 'string') {
+    if (
+        typeof answer === 'object' ||
+    answer.length === TRANSACTION_RESPONSE_LENGTH
+    ) {
         Notify.create({
-            message: answer,
+            message: successMessage,
             position: 'top',
-            color: 'negative',
+            color: 'primary',
             textColor: 'white',
             actions: [{ label: 'Dismiss', color: 'white' }],
         });
-    } else if (typeof answer === 'object') {
+    } else if (typeof answer === 'string') {
         Notify.create({
-            message: successMessage,
+            message: answer,
             position: 'top',
-            color: 'primary',
+            color: 'negative',
             textColor: 'white',
             actions: [{ label: 'Dismiss', color: 'white' }],
         });
@@ -92,13 +97,18 @@ function checkAccountAvailability(account_name: string) {
     }
 
     return getAccount(account_name)
-        .then(() => {
-            createAccountForm.value.available = false;
-            return 'Account already exists';
+        .then((response) => {
+            if (response.status === 200) {
+                // 200 indicates account is available
+                createAccountForm.value.available = true;
+                return true;
+            } else {
+                createAccountForm.value.available = false;
+                return 'Account already exists';
+            }
         })
-        .catch(() => {
-            createAccountForm.value.available = true;
-            return true;
+        .catch((e) => {
+            console.log(e);
         })
         .finally(() => {
             createAccountForm.value.checking_account = false;
@@ -139,13 +149,18 @@ const sendTlosForm = ref({
 
 function checkAccountExists(account: string) {
     return getAccount(account)
-        .then(() => {
-            sendTlosForm.value.account_exists = true;
-            return true;
+        .then((response) => {
+            if (response.status === 200) {
+                // 200 indicates account is available
+                sendTlosForm.value.account_exists = false;
+                return 'Account does not exist';
+            } else {
+                sendTlosForm.value.account_exists = true;
+                return true;
+            }
         })
-        .catch(() => {
-            sendTlosForm.value.account_exists = false;
-            return 'Account does not exist';
+        .catch((e) => {
+            console.log(e);
         })
         .finally(() => {
             sendTlosForm.value.checking_account = false;
@@ -202,7 +217,7 @@ async function onAccount() {
             owner_key: createAccountForm.value.owner_key,
             active_key: createAccountForm.value.active_key,
         });
-        handleAnswer(result, 'Account created successfully');
+        handleAnswer(result, `Account created successfully! txn: ${result}`);
         submitting.value = false;
     } else {
         if (!createAccountForm.value.available) {