From 45a6495c4b44e12f64d25f2b140c8f3b0bb7014f Mon Sep 17 00:00:00 2001
From: Viterbo <viter.rod@gmail.com>
Date: Thu, 18 Jan 2024 04:27:51 -0300
Subject: [PATCH] Simpler flow for Telos Cloud Login

---
 env.js                                    |   4 +-
 src/antelope/stores/account.ts            |   8 +-
 src/antelope/wallets/ual/MetakeepUAL.ts   |  20 +-
 src/boot/ual.js                           |   2 +-
 src/i18n/en-us/index.js                   |   1 +
 src/pages/home/HomePage.vue               |  59 ++-
 src/pages/home/LoginButtons.vue           | 543 ++++++++++++++++++++++
 test/jest/utils/antelope/store-account.ts |   4 +-
 8 files changed, 594 insertions(+), 47 deletions(-)
 create mode 100644 src/pages/home/LoginButtons.vue

diff --git a/env.js b/env.js
index f6ffdbd1..7e8c945a 100644
--- a/env.js
+++ b/env.js
@@ -11,7 +11,9 @@ const sharedEnv = {
     PROJECT_ID: '2392473d6d98499c7138cd2d705a791f',
     METAKEEP_APP_ID_NATIVE: 'ad5e05fb-280a-41ae-b186-5a2654567b92',
     METAKEEP_APP_ID_EVM: 'd190c88f-1bb5-4e16-bc48-96dbf33b77e0',
-    GOOGLE_APP_ID: '56634824599-ff3iu788c32c3s7ec65cs4bieop9gpgv.apps.googleusercontent.com',
+    // GOOGLE_APP_ID: '56634824599-ff3iu788c32c3s7ec65cs4bieop9gpgv.apps.googleusercontent.com',
+    GOOGLE_APP_ID: '639241197544-kcubenhmti6u7ef3uj360n2lcl5cmn8c.apps.googleusercontent.com',
+    // FIXME: This is a auxillary key for the app, it should be replaced for the one commented
 };
 
 const TESTNET = {
diff --git a/src/antelope/stores/account.ts b/src/antelope/stores/account.ts
index bc92cae6..9540aa4e 100644
--- a/src/antelope/stores/account.ts
+++ b/src/antelope/stores/account.ts
@@ -38,7 +38,7 @@ import {
 } from 'src/antelope';
 
 
-export interface LoginNativeActionData {
+export interface loginZeroActionData {
     authenticator: Authenticator,
     network: string,
 }
@@ -110,8 +110,8 @@ export const useAccountStore = defineStore(store_name, {
     },
     actions: {
         trace: createTraceFunction(store_name),
-        async loginNative({ authenticator, network }: LoginNativeActionData): Promise<boolean> {
-            this.trace('loginNative', authenticator, network);
+        async loginZero({ authenticator, network }: loginZeroActionData): Promise<boolean> {
+            this.trace('loginZero', authenticator, network);
             let success = false;
             try {
                 await authenticator.init();
@@ -254,7 +254,7 @@ export const useAccountStore = defineStore(store_name, {
                             console.error(authenticators.map(a => a.getName()).join(', '));
                             throw new Error('antelope.account.error_auto_login');
                         }
-                        this.loginNative({
+                        this.loginZero({
                             authenticator,
                             network,
                         });
diff --git a/src/antelope/wallets/ual/MetakeepUAL.ts b/src/antelope/wallets/ual/MetakeepUAL.ts
index 625cf683..329ef195 100644
--- a/src/antelope/wallets/ual/MetakeepUAL.ts
+++ b/src/antelope/wallets/ual/MetakeepUAL.ts
@@ -205,11 +205,9 @@ export class MetakeepAuthenticator extends Authenticator {
                     public_key: publicKey,
                 });
                 const accountExists = response?.data?.account_names.length>0;
-                console.log('accountExists: ', accountExists, 'pero la descartamos');
                 if (accountExists) {
                     accountName = response.data.account_names[0];
                 } else {
-                    console.log('vamos a crear la cuenta');
                     accountName = await this.createAccount(publicKey);
                 }
 
@@ -326,6 +324,16 @@ class MetakeepUser extends User {
         this.reasonCallback = callback;
     }
 
+    handleCatchError(error: any): Error {
+        if (
+            (error as unknown as {status:string}).status === 'USER_REQUEST_DENIED'
+        ) {
+            return new Error('antelope.evm.error_transaction_canceled');
+        } else {
+            return new Error('antelope.evm.error_send_transaction');
+        }
+    }
+
     /**
     * @param transaction    The transaction to be signed (a object that matches the RpcAPI structure).
     */
@@ -423,13 +431,7 @@ class MetakeepUser extends User {
             return Promise.resolve(finalResponse);
 
         } catch (e: any) {
-            if (e.status) {
-                throw new Error(e.status);
-            } else if (e.message) {
-                throw new Error(e.message);
-            } else {
-                throw new Error('Unknown error');
-            }
+            throw this.handleCatchError(e);
         }
     }
 
diff --git a/src/boot/ual.js b/src/boot/ual.js
index c2985c62..7552bbba 100644
--- a/src/boot/ual.js
+++ b/src/boot/ual.js
@@ -50,7 +50,7 @@ export default boot(async ({ app, store }) => {
             }).catch((e) => {
                 throw e;
             });
-            if (store.state.account.justViewer) {
+            if (store.state.account.justViewer || localStorage.getItem('justViewer')) {
                 permission = 'active';
             } else {
                 await new Promise((resolve) => {
diff --git a/src/i18n/en-us/index.js b/src/i18n/en-us/index.js
index 8c64e79f..0fb64ec1 100644
--- a/src/i18n/en-us/index.js
+++ b/src/i18n/en-us/index.js
@@ -31,6 +31,7 @@ export default {
         view_any_account: 'View Any Account',
         connect_with_wallet: 'Connect Your Wallet',
         telos_cloud_wallet: 'Telos Cloud Wallet',
+        telos_cloud_login: 'Telos Cloud Login',
         sign_with_google: 'Sign with Google',
         sign_with_facebook: 'Sign with Facebook',
         sign_with_x: 'Sign with X',
diff --git a/src/pages/home/HomePage.vue b/src/pages/home/HomePage.vue
index 3aa11ddb..c5083977 100644
--- a/src/pages/home/HomePage.vue
+++ b/src/pages/home/HomePage.vue
@@ -1,36 +1,51 @@
 <script setup lang="ts">
 import { computed,  onMounted,  ref } from 'vue';
 
-import NativeLoginButton from 'pages/home/NativeLoginButton.vue';
-import EVMLoginButtons from 'pages/home/EVMLoginButtons.vue';
+import LoginButtons from 'pages/home/LoginButtons.vue';
 import { Menu } from 'src/pages/home/MenuType';
 import { LocationQueryValue, useRoute, useRouter } from 'vue-router';
+import { CURRENT_CONTEXT, useChainStore } from 'src/antelope';
 
-type TabReference = 'evm' | 'zero';
+type TabReference = 'evm' | 'zero' | 'unset';
 
 const route = useRoute();
 const router = useRouter();
+const chainStore = useChainStore();
 
-const tab = ref<TabReference>('evm');
-const currentMenu = ref<Menu>(Menu.MAIN);
-
-const showLoginBtns = computed((): boolean => currentMenu.value === Menu.MAIN);
+const tab = ref<TabReference>('unset');
 const walletOption = computed(() => route.query.login as LocationQueryValue);
 
-function goBack(): void {
-    currentMenu.value = Menu.MAIN;
+function setChainForTab(tab: TabReference): void {
+    // set chain
+    if (!process.env.CHAIN_NAME) {
+        console.error('No chain name specified in environment config; the application will not run correctly');
+    } else {
+        const chainNetworkNames: Record<string, string> = (tab === 'zero') ? {
+            'telos': 'telos',
+            'telos-testnet': 'telos-testnet',
+        } : {
+            'telos': 'telos-evm',
+            'telos-testnet': 'telos-evm-testnet',
+        };
+        const network: string = chainNetworkNames[process.env.CHAIN_NAME];
+        chainStore.setChain(CURRENT_CONTEXT, network);
+    }
 }
 
 function setTab(login: TabReference): void {
     if (route.path !== login){
         router.replace({ path: route.path, query:{ login } });
         tab.value = login;
+        setChainForTab(login);
     }
 }
 
 onMounted(() => {
     if (walletOption.value){
-        tab.value = walletOption.value as TabReference;
+        setTab(walletOption.value as TabReference);
+    } else {
+        // set evm as default
+        setTab('evm');
     }
 });
 
@@ -47,7 +62,7 @@ onMounted(() => {
                     class="c-home__logo"
                 ></div>
                 <div class="c-home__button-container">
-                    <div v-if="showLoginBtns" class="c-home__network-toggle-container" role="tablist">
+                    <div class="c-home__network-toggle-container" role="tablist">
                         <button
                             :class="{
                                 'c-home__network-toggle-button': true,
@@ -75,28 +90,12 @@ onMounted(() => {
                             {{ $t('global.native') }}
                         </button>
                     </div>
-                    <div v-else>
-                        <q-btn
-                            class="c-home__menu-back-button"
-                            flat
-                            dense
-                            icon="arrow_back_ios"
-                            @click="goBack"
-                        >
 
-                            {{ $t('global.back') }}
-                        </q-btn>
-                    </div>
-
-                    <NativeLoginButton
-                        v-if="tab === 'zero'"
-                        v-model="currentMenu"
+                    <LoginButtons
+                        :chain="tab"
                     />
 
-                    <EVMLoginButtons
-                        v-else-if="tab === 'evm'"
-                        v-model="currentMenu"
-                    />
+
                 </div>
                 <div class="c-home__external-link">
                     <a
diff --git a/src/pages/home/LoginButtons.vue b/src/pages/home/LoginButtons.vue
new file mode 100644
index 00000000..91c18e71
--- /dev/null
+++ b/src/pages/home/LoginButtons.vue
@@ -0,0 +1,543 @@
+<script lang="ts">
+import {
+    CURRENT_CONTEXT,
+    getAntelope,
+    useAccountStore,
+    useChainStore,
+    useFeedbackStore,
+    usePlatformStore,
+} from 'src/antelope';
+import {
+    ComponentInternalInstance,
+    computed,
+    defineComponent,
+    getCurrentInstance,
+    ref,
+} from 'vue';
+import { QSpinnerFacebook } from 'quasar';
+import { MetaKeepAuth } from 'src/antelope/wallets';
+import InlineSvg from 'vue-inline-svg';
+import { GoogleCredentials, googleCtrl } from 'src/pages/home/GoogleOneTap';
+import { MetakeepAuthenticator } from 'src/antelope/wallets/ual/MetakeepUAL';
+
+export default defineComponent({
+    name: 'LoginButtons',
+    components: {
+        QSpinnerFacebook,
+        InlineSvg,
+    },
+    props: {
+        chain: {
+            type: String,
+        },
+    },
+    setup(props, { emit }) {
+        const ant = getAntelope();
+        const accountStore = useAccountStore();
+        const chainStore = useChainStore();
+
+        const globalProps = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties;
+        const isMobile = ref(usePlatformStore().isMobile);
+        const isBraveBrowser = ref((navigator as any).brave && (navigator as any).brave.isBrave());
+
+        const showEVMButtons = computed(() => props.chain === 'evm');
+        const showZeroButtons = computed(() => props.chain === 'zero');
+
+        // EVM Login -----------------------------------------------------------
+        const supportsMetamask = computed(() => {
+            const e = window.ethereum as unknown as { [key:string]: boolean };
+            return e && e.isMetaMask && !supportsSafePal.value && !unsupportedExtensions.value; //
+        });
+
+        const supportsSafePal = computed(() => {
+            const e = window.ethereum as unknown as { [key:string]: boolean };
+            return e && (isMobile.value ? e.isSafePal : e._isSafePal);
+        });
+
+        const supportsBrave = computed(() => {
+            const e = window.ethereum as unknown as { [key:string]: boolean };
+            return e && e.isBraveWallet;
+        });
+
+        const showMetamaskButton = computed(() => !isMobile.value || supportsMetamask.value);
+        const showSafePalButton = computed(() => !isMobile.value || supportsSafePal.value);
+        const injectedProviderDetected = computed(() => !!window.ethereum);
+        const showWalletConnectButton = computed(() => !isMobile.value || !injectedProviderDetected.value || (isMobile.value && isBraveBrowser.value)); // temp solution until Brave support is added https://github.com/telosnetwork/telos-wallet/issues/501
+        const showBraveButton = isBraveBrowser.value && !isMobile.value;
+
+        const unsupportedExtensions = computed(() => {
+            const e = window.ethereum as unknown as { [key:string]: boolean };
+            return e && (e.isBraveWallet || e.isCoinbaseWallet); // replace this with a regex to check for unknown/unsupported extensions see https://github.com/telosnetwork/telos-wallet/issues/500
+        });
+
+        const selectedOAuthProvider = ref('');
+
+        const redirectToMetamaskDownload = () => {
+            window.open('https://metamask.io/download/', '_blank');
+        };
+
+        const redirectToSafepalDownload = () => {
+            window.open('https://www.safepal.com/en/download', '_blank');
+        };
+
+        const setMetamaskEVM = async () => {
+            setEVMAuthenticator('Metamask', CURRENT_CONTEXT);
+        };
+        const setMetaKeepEVM = async (data:GoogleCredentials) => {
+            const name = 'MetaKeep';
+            const auth = ant.wallets.getAuthenticator(name);
+            if (auth) {
+                (auth as MetaKeepAuth).setEmail(data.email);
+            }
+            setEVMAuthenticator(name, CURRENT_CONTEXT);
+        };
+        const setBraveEVM = async () => {
+            setEVMAuthenticator('Brave', CURRENT_CONTEXT);
+        };
+        const setSafePalEVM = async () => {
+            setEVMAuthenticator('SafePal', CURRENT_CONTEXT);
+        };
+        const setWalletConnectEVM = async () => {
+            setEVMAuthenticator('WalletConnect', CURRENT_CONTEXT);
+        };
+
+        const setEVMAuthenticator = async(name: string, label: string) => {
+            const auth = ant.wallets.getAuthenticator(name);
+            if (!auth) {
+                console.error(`${name} authenticator not found`);
+                return;
+            }
+            const authenticator = auth.newInstance(label);
+            const accountStore = useAccountStore();
+            const chainStore = useChainStore();
+
+            const network = chainStore.currentChain.settings.getNetwork();
+            const correctChainId = useChainStore().currentChain.settings.getChainId();
+            accountStore.loginEVM({ authenticator, network }).then(async () => {
+                // we verify that the authenticator is connected to the correct network
+                if (!await authenticator.isConnectedTo(correctChainId)) {
+                    const networkName = useChainStore().getChain(label).settings.getDisplay();
+                    const warningMessage = globalProps.$t('evm_wallet.incorrect_network', { networkName });
+                    globalProps.$warningNotification(warningMessage);
+                }
+            });
+        };
+
+        const notifyNoProvider = (provider:string) => {
+            const message = globalProps.$t('home.multiple_providers_notification_message');
+            ant.config.notifyFailureMessage(message);
+        };
+
+        const notifyEnableBrave = () => {
+            const message = globalProps.$t('home.enable_brave_notification_message');
+            ant.config.notifyFailureMessage(message);
+        };
+
+        const isLoading = (loginName: string) => useFeedbackStore().isLoading(loginName);
+
+        // Telos Zero Login ----------------------------------------------------
+        const ualAuthenticators = ant.config.authenticatorsGetter();
+        const loginTelosZero = (idx:number, justViewer:Boolean = false) => {
+            if (justViewer) {
+                localStorage.setItem('justViewer', 'true');
+            } else {
+                localStorage.removeItem('justViewer');
+            }
+            const network = chainStore.currentChain.settings.getNetwork();
+            const authenticator = ualAuthenticators[idx];
+            accountStore.loginZero({ authenticator, network });
+        };
+        const getZeroAuthenticator = (name: string) => {
+            const idx = ualAuthenticators.map(a => a.getName()).indexOf(name);
+            return ualAuthenticators[idx];
+        };
+        const setMetakeepZero = (credentials:GoogleCredentials) => {
+            const name = 'metakeep.ual';
+            const auth = getZeroAuthenticator(name) as MetakeepAuthenticator;
+            auth.setUserCredentials(credentials);
+            const idx = ualAuthenticators.map(a => a.getName()).indexOf(name);
+            loginTelosZero(idx);
+        };
+        const setCleosViewerZero = () => {
+            const idx = ant.config.authenticatorsGetter().map(a => a.getName()).indexOf('cleos');
+            loginTelosZero(idx, true);
+        };
+        const redirectToNewAccountWebsite = () => {
+            window.open('https://app.telos.net/accounts/add');
+        };
+
+        // Telos Cloud login ----------------------------------------------------
+        const performTelosCloudLogin = (data: GoogleCredentials) => {
+            if (!data) {
+                console.error('performTelosCloudLogin() data is null');
+                return;
+            }
+            if (props.chain === 'zero') {
+                setMetakeepZero(data);
+            } else {
+                setMetaKeepEVM(data);
+            }
+        };
+
+        const showGoogleLoading = ref(false);
+        const googleSubscription = googleCtrl.onSuccessfulLogin.subscribe({
+            next: (data) => {
+                if (data) {
+                    showGoogleLoading.value = true;
+                    ant.config.notifyNeutralMessageHandler(globalProps.$t('antelope.account.logging_in_as', { account: data.email }));
+                    performTelosCloudLogin(data);
+                }
+            },
+        });
+
+        // we check the div is present before trying to render the google button
+        const googleBtnLoop = setInterval(() => {
+            const googleBtn = document.getElementById('google_btn');
+            if (googleBtn !== null) {
+                googleCtrl.renderButton('google_btn');
+                clearInterval(googleBtnLoop);
+            }
+        }, 100);
+
+
+        return {
+            isLoading,
+            supportsMetamask,
+            supportsBrave,
+            supportsSafePal,
+            showMetamaskButton,
+            showBraveButton,
+            showSafePalButton,
+            showWalletConnectButton,
+            setMetamaskEVM,
+            setMetaKeepEVM,
+            setBraveEVM,
+            setSafePalEVM,
+            setWalletConnectEVM,
+            notifyNoProvider,
+            notifyEnableBrave,
+            redirectToMetamaskDownload,
+            redirectToSafepalDownload,
+            googleSubscription,
+            showGoogleLoading,
+            googleCtrl,
+            showEVMButtons,
+            showZeroButtons,
+            ualAuthenticators,
+            loginTelosZero,
+            setCleosViewerZero,
+            redirectToNewAccountWebsite,
+        };
+    },
+    unmounted() {
+        this.googleSubscription?.unsubscribe();
+    },
+});
+</script>
+
+<template>
+<div class="c-login-buttons">
+
+    <!-- Telos Cloud Button -->
+    <div class="c-login-buttons__option c-login-buttons__option--telos-cloud">
+        <div class="c-login-buttons__cloud-btn-container">
+            <div class="c-login-buttons__cloud-btn-line-title">
+                <img
+                    width="24"
+                    class="c-login-buttons__icon c-login-buttons__icon--cloud"
+                    src="~assets/icon--telos-cloud.svg"
+                >
+                <span>{{ $t('home.telos_cloud_login') }}</span>
+            </div>
+
+            <!-- Google One Tap render button -->
+            <div v-if="showGoogleLoading" class="c-login-buttons__google-loading">
+                <div class="c-login-buttons__loading"><QSpinnerFacebook /></div>
+            </div>
+            <div
+                v-else
+                id="google_btn"
+                :data-client_id="googleCtrl.clientId"
+                class="c-login-buttons__google-btn"
+            >
+                <div class="c-login-buttons__loading"><QSpinnerFacebook /></div>
+            </div>
+
+        </div>
+    </div>
+
+    <template v-if="showEVMButtons">
+        <!-- Brave Authenticator button -->
+        <div
+            v-if="showBraveButton"
+            class="c-login-buttons__option"
+            @click="supportsBrave ? setBraveEVM() : notifyEnableBrave()"
+        >
+            <template v-if="isLoading('Brave.login')">
+                <div class="c-login-buttons__loading"><QSpinnerFacebook /></div>
+            </template>
+            <template v-else>
+                <InlineSvg
+                    :src="require('src/assets/evm/brave_lion.svg')"
+                    class="c-login-buttons__icon c-login-buttons__icon--brave"
+                    height="24"
+                    width="24"
+                    aria-hidden="true"
+                />
+                {{ supportsBrave ? $t('home.brave') : $t('home.brave') }}
+            </template>
+        </div>
+
+        <!-- Metamask Authenticator button -->
+        <div
+            v-if="showMetamaskButton"
+            class="c-login-buttons__option"
+            @click="supportsMetamask ?  setMetamaskEVM() : supportsSafePal ? notifyNoProvider('Metamask') : redirectToMetamaskDownload()"
+        >
+            <template v-if="isLoading('Metamask.login')">
+                <div class="c-login-buttons__loading"><QSpinnerFacebook /></div>
+            </template>
+            <template v-else>
+                <InlineSvg
+                    :src="require('src/assets/evm/metamask_fox.svg')"
+                    class="c-login-buttons__icon c-login-buttons__icon--metamask"
+                    height="24"
+                    width="24"
+                    aria-hidden="true"
+                />
+                {{ supportsMetamask ? $t('home.metamask') : $t('home.install_metamask') }}
+            </template>
+        </div>
+
+        <!-- WalletConnect Authenticator button -->
+        <div
+            v-if="showWalletConnectButton"
+            class="c-login-buttons__option"
+            @click="setWalletConnectEVM()"
+        >
+            <template v-if="isLoading('WalletConnect.login')">
+                <div class="c-login-buttons__loading"><QSpinnerFacebook /></div>
+            </template>
+            <template v-else>
+                <InlineSvg
+                    :src="require('src/assets/evm/wallet_connect.svg')"
+                    class="c-login-buttons__icon c-login-buttons__icon--wallet-connect"
+                    height="24"
+                    width="24"
+                    aria-hidden="true"
+                />
+                {{ $t('home.walletconnect') }}
+            </template>
+        </div>
+
+        <!-- Safepal Authenticator button -->
+        <div
+            v-if="showSafePalButton"
+            class="c-login-buttons__option"
+            @click="supportsSafePal ? setSafePalEVM() : redirectToSafepalDownload()"
+        >
+            <template v-if="isLoading('SafePal.login')">
+                <div class="c-login-buttons__loading"><QSpinnerFacebook /></div>
+            </template>
+            <template v-else>
+                <InlineSvg
+                    :src="require('src/assets/evm/safepal.svg')"
+                    class="c-login-buttons__icon c-login-buttons__icon--safepal"
+                    height="24"
+                    width="24"
+                    aria-hidden="true"
+                />
+                {{ supportsSafePal ? $t('home.safepal') : $t('home.install_safepal') }}
+            </template>
+        </div>
+
+        <!-- Brave Authenticator button -->
+        <div
+            v-if="showBraveButton"
+            class="c-login-buttons__option"
+            @click="supportsBrave ? setBraveEVM() : notifyEnableBrave()"
+        >
+            <template v-if="isLoading('Brave.login')">
+                <div class="c-login-buttons__loading"><QSpinnerFacebook /></div>
+            </template>
+            <template v-else>
+                <InlineSvg
+                    :src="require('src/assets/evm/brave_lion.svg')"
+                    class="c-login-buttons__icon c-login-buttons__icon--brave"
+                    height="24"
+                    width="24"
+                    aria-hidden="true"
+                />
+                {{ supportsBrave ? $t('home.brave') : $t('home.brave') }}
+            </template>
+        </div>
+    </template>
+
+    <template v-if="showZeroButtons">
+        <!-- Authenticator buttons -->
+        <template
+            v-for="(wallet, idx) in ualAuthenticators"
+            :key="idx"
+        >
+            <div
+                v-if="wallet.getName() !== 'metakeep.ual'"
+                class="c-login-buttons__option"
+                @click="loginTelosZero(idx)"
+            >
+                <template v-if="isLoading(wallet.getStyle().text)">
+                    <div class="c-login-buttons__loading"><QSpinnerFacebook /></div>
+                </template>
+                <template v-else>
+                    <img
+                        :src="wallet.getStyle().icon"
+                        width="24"
+                        class="c-login-buttons__ual-logo"
+                    >
+                    {{ wallet.getStyle().text }} {{  wallet.getName()  }}
+                </template>
+            </div>
+        </template>
+
+        <hr class="c-login-buttons__hr">
+
+        <div
+            class="c-login-buttons__option c-login-buttons__option--centered"
+            tabindex="0"
+            aria-role="button"
+            @keyup.enter="setCleosViewerZero"
+            @click="setCleosViewerZero"
+        >
+            {{ $t('home.view_any_account') }}
+        </div>
+
+        <div
+            class="c-login-buttons__option c-login-buttons__option--centered"
+            tabindex="0"
+            aria-role="button"
+            @keyup.enter="redirectToNewAccountWebsite"
+            @click="redirectToNewAccountWebsite"
+        >
+            {{ $t('home.create_new_account') }}
+        </div>
+    </template>
+</div>
+</template>
+
+<style lang="scss">
+.c-login-buttons {
+    $self: &;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 14px;
+
+    &__loading{
+        width: 100%;
+        text-align: center;
+        color: $white;
+    }
+
+    &__header{
+        display: inline-block;
+        font-size: 16px;
+        margin-bottom: 16px;
+    }
+
+    &__icon {
+        margin-top: -1px;
+        transition: all 0.3s;
+        &--disabled {
+            opacity: 0.5;
+        }
+    }
+
+    &__cloud-btn-container {
+        display: flex;
+        width: 100%;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 8px;
+    }
+
+    &__cloud-btn-line-icons {
+        display: flex;
+        width: 100%;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        gap: 8px;
+    }
+
+    &__cloud-btn-line-title {
+        display: flex;
+        width: 100%;
+        flex-direction: row;
+        justify-content: flex-start;
+        align-items: center;
+        gap: 8px;
+    }
+
+    &__title {
+        @include text--header-4;
+        color: $white;
+        text-align: center;
+    }
+
+    &__sub-title {
+        color: $white;
+    }
+
+    &__option {
+        display: flex;
+        gap: 8px;
+
+        width: 224px;
+        height: 54px;
+        color: $white;
+        outline-color: $white;
+        outline-width: 1px;
+        outline-style: solid;
+        border-radius: 4px;
+        font-size: 16px;
+        font-weight: 500;
+        padding: 14px;
+        cursor: pointer;
+
+        &:hover:not(&--disabled) {
+            color: $white;
+            outline-color: $white;
+            outline-width: 2px;
+        }
+
+        &:not(:hover) #{$self}__icon {
+            &--metamask, &--safepal, &--wallet-connect {
+                opacity: 0.8;
+
+                @include mobile-only {
+                    opacity: 1;
+                }
+            }
+        }
+
+        &--telos-cloud {
+            height: max-content;
+            &:not(:hover) {
+                outline-width: 0;
+                @include gradient_border();
+            }
+        }
+
+        &--disabled {
+            color: #9289b1;
+            outline-color: #9289b1;
+            cursor: not-allowed;
+        }
+    }
+
+    &__hr {
+        width: 224px;
+    }
+}
+</style>
diff --git a/test/jest/utils/antelope/store-account.ts b/test/jest/utils/antelope/store-account.ts
index 121a70ed..a2f74294 100644
--- a/test/jest/utils/antelope/store-account.ts
+++ b/test/jest/utils/antelope/store-account.ts
@@ -21,7 +21,7 @@ const getAuthenticator = jest.fn().mockImplementation(() => null);
 const getEVMAuthenticator = jest.fn().mockImplementation(() => MockData.EvmAuthenticator);
 const getNativeAuthenticator = jest.fn().mockImplementation(() => null);
 
-const loginNative = jest.fn().mockImplementation(() => ({
+const loginZero = jest.fn().mockImplementation(() => ({
     then: jest.fn().mockImplementation((cb: any) => cb()),
 }));
 const loginEVM = jest.fn().mockImplementation(() => ({
@@ -76,7 +76,7 @@ const AccountActions = {
     getAuthenticator,
     getEVMAuthenticator,
     getNativeAuthenticator,
-    loginNative,
+    loginZero,
     loginEVM,
     logout,
     autoLogin,