From 38cb81f4db2f0b0c40abbe1e3bc3266c74781877 Mon Sep 17 00:00:00 2001
From: Zouheir Layine <zlayine@enjin.io>
Date: Tue, 1 Oct 2024 22:06:26 +0100
Subject: [PATCH] fix settings page

---
 resources/js/components/pages/Settings.vue    |   7 +-
 .../components/pages/SettingsWalletDaemon.vue | 254 ++++++++++++------
 2 files changed, 177 insertions(+), 84 deletions(-)

diff --git a/resources/js/components/pages/Settings.vue b/resources/js/components/pages/Settings.vue
index 9226f69..ee94a4e 100644
--- a/resources/js/components/pages/Settings.vue
+++ b/resources/js/components/pages/Settings.vue
@@ -3,10 +3,7 @@
         <div class="mt-4 flow-root">
             <LoadingCircle v-if="loading" class="mt-40" :size="44" />
             <template v-else>
-                <div
-                    v-if="!showInitialSetup"
-                    class="flex flex-col mb-6 w-full transition-all rounded-md bg-[#0284c7] p-3 text-white"
-                >
+                <div class="flex flex-col mb-6 w-full transition-all rounded-md bg-[#0284c7] p-3 text-white">
                     <p class="font-bold">Configuring Your Wallet</p>
                     <p>
                         To interact with the Enjin Platform, you need a wallet to sign your transactions. You can do
@@ -104,8 +101,6 @@ const loading = ref(appStore.user || !appStore.hasMultiTenantPackage ? false : t
 const confirmModal = ref(false);
 const verifyPasswordModal = ref(false);
 
-const tokens = computed(() => appStore.user?.apiTokens);
-const showInitialSetup = computed(() => !appStore.hasValidConfig && isMultiTenant.value && !tokens.value?.length);
 const isMultiTenant = computed(() => appStore.isMultiTenant);
 
 const logout = async () => {
diff --git a/resources/js/components/pages/SettingsWalletDaemon.vue b/resources/js/components/pages/SettingsWalletDaemon.vue
index a367dd6..5f76f7c 100644
--- a/resources/js/components/pages/SettingsWalletDaemon.vue
+++ b/resources/js/components/pages/SettingsWalletDaemon.vue
@@ -11,94 +11,184 @@
         <div>
             <div class="p-6 text-light-content dark:text-dark-content">
                 <div class="flex flex-col space-y-4">
-                    <p v-if="!walletAccount" class="text-sm">Daemon Wallet is not configured at the moment</p>
-                    <p v-else class="text-sm">Daemon Wallet is configured</p>
-                    <label
-                        v-if="walletAccount"
-                        class="text-light-content dark:text-dark-content bg-light-surface-background dark:bg-dark-surface-background hover:text-white hover:bg-light-surface-brand text-sm rounded-md mr-auto p-2 cursor-pointer transition-all"
-                        name="walletAccount"
-                        disabled
-                        @click="copyText(walletAccount)"
+                    <Transition
+                        enter-active-class="transition ease-out duration-300"
+                        leave-active-class="transition ease-in duration-300"
+                        enter-from-class="transform opacity-0 "
+                        enter-to-class="transform opacity-100"
+                        leave-from-class="transform opacity-100"
+                        leave-to-class="transform opacity-0"
+                        mode="out-in"
                     >
-                        {{ walletAccount }}
-                    </label>
-                    <template v-if="isMultiTenant">
-                        <p class="text-sm">
-                            To configure a new Daemon wallet, you'll need to create an API token. This token will be
-                            used to authenticate your Daemon wallet with your Platform account.
-                        </p>
-                        <div v-if="tokens.length">
-                            <span class="text-xl mb-4">My API Tokens</span>
-                            <div class="grid grid-cols-1 gap-4">
-                                <div
-                                    class="bg-light-surface-background dark:bg-dark-surface-background !bg-opacity-50 p-3 shadow sm:rounded-lg sm:p-4 flex justify-between items-center gr"
-                                    v-for="token in tokens"
-                                    :key="token.name"
+                        <div v-if="creationFlow" class="flex flex-col space-y-4">
+                            <div class="text-sm">
+                                <span> API Token was successfully created. Token: </span>
+                                <CopyTextIcon
+                                    v-if="tokens[0].plainTextToken"
+                                    ref="copyIconRef"
+                                    class="cursor-pointer inline-flex"
+                                    :text="
+                                        tokens[0].plainTextToken.substring(
+                                            tokens[0].plainTextToken?.indexOf('|') + 1 ?? 0
+                                        )
+                                    "
                                 >
-                                    <div class="flex-1 truncate flex items-center">
-                                        <KeyIcon class="w-5 h-5 mr-4 text-green-500" />
-                                        <span class="text-light-content-strong dark:text-dark-content-strong mr-4">
-                                            {{ token.name }}
-                                        </span>
-                                        <span class="text-light-content dark:text-dark-content text-sm mt-1 truncate">
-                                            <span v-if="!token.plainTextToken">
-                                                {{ '*******' }}
-                                            </span>
-                                            <CopyTextIcon
-                                                v-if="token.plainTextToken"
-                                                ref="copyIconRef"
-                                                class="cursor-pointer flex mr-4"
-                                                :text="
-                                                    token.plainTextToken.substring(
-                                                        token.plainTextToken?.indexOf('|') + 1 ?? 0
-                                                    )
-                                                "
-                                            >
-                                                <span class="truncate">
-                                                    {{
-                                                        token.plainTextToken?.substring(
-                                                            token.plainTextToken?.indexOf('|') + 1 ?? 0
-                                                        )
-                                                    }}
-                                                </span>
-                                            </CopyTextIcon>
-                                        </span>
-                                    </div>
+                                    <span class="truncate text-light-content-brand dark:text-dark-content-brand">
+                                        {{
+                                            tokens[0].plainTextToken?.substring(
+                                                tokens[0].plainTextToken?.indexOf('|') + 1 ?? 0
+                                            )
+                                        }}
+                                    </span>
+                                </CopyTextIcon>
+                            </div>
+                            <Transition
+                                enter-active-class="transition ease-out duration-300"
+                                leave-active-class="transition ease-in duration-300"
+                                enter-from-class="transform opacity-0 "
+                                enter-to-class="transform opacity-100"
+                                leave-from-class="transform opacity-100"
+                                leave-to-class="transform opacity-0"
+                                mode="out-in"
+                            >
+                                <div v-if="!walletAccount" class="flex flex-col space-y-4">
+                                    <span class="text-sm">
+                                        To enable automatic signing of your platform requests, Set up a Daemon wallet
+                                        with the API Token above and run it once to complete the setup. We'll notify you
+                                        here once the configuration is successful. Detailed configuration instructions
+                                        can be found in our
+                                        <a
+                                            href="https://docs.enjin.io/docs/using-wallet-daemon"
+                                            target="_blank"
+                                            class="text-light-content-brand dark:text-dark-content-brand"
+                                        >
+                                            documentation.
+                                        </a>
+                                    </span>
+                                    <LoadingCircle
+                                        class="py-2 text-light-content-brand dark:text-dark-content-brand"
+                                        :size="28"
+                                    />
+                                    <p class="text-sm">
+                                        Please configure your Daemon wallet with the above API Token and run it once in
+                                        order to complete the configuration.
+                                    </p>
                                     <Btn
-                                        class="flex-shrink-0"
-                                        :dusk="`btn__revoke-api-${token.name}`"
-                                        error
-                                        @click="confirmRevoke(token.name)"
+                                        primary
+                                        class="mx-auto"
+                                        :loading="loadingUser"
+                                        :disabled="loadingUser"
+                                        @click="refreshWalletAccount"
                                     >
-                                        Revoke
+                                        Check wallet account
                                     </Btn>
                                 </div>
-                            </div>
+                                <p v-else class="text-sm">
+                                    Setup complete! Daemon Wallet account
+                                    <span class="text-light-content-brand dark:text-dark-content-brand">
+                                        {{ walletAccount }}
+                                    </span>
+                                    is now configured with your Enjin Platform account. As long as the Daemon Wallet is
+                                    running, it will be used to automatically sign and broadcast all platform requests
+                                    to the blockchain.
+                                </p>
+                            </Transition>
                         </div>
-
-                        <div class="flex items-end space-x-4 mb-4">
-                            <FormInput
-                                v-if="enableTokenCreate"
-                                class="sm:w-[300px] flex-1 sm:flex-none"
-                                v-model="tokenName"
-                                name="tokenName"
-                                placeholder="Enter token name"
-                            />
-                            <Btn
-                                dusk="btn__create-api-token"
-                                primary
-                                class="py-2.5 disabled:!bg-primary"
-                                @click="createApiToken"
-                                :disabled="creating"
+                        <div v-else class="flex flex-col space-y-4">
+                            <p v-if="!walletAccount" class="text-sm">Daemon Wallet is not configured at the moment</p>
+                            <p v-else class="text-sm">Daemon Wallet is configured</p>
+                            <label
+                                v-if="walletAccount"
+                                class="text-light-content dark:text-dark-content bg-light-surface-background dark:bg-dark-surface-background hover:text-white hover:bg-light-surface-brand text-sm rounded-md mr-auto p-2 cursor-pointer transition-all"
+                                name="walletAccount"
+                                disabled
+                                @click="copyText(walletAccount)"
                             >
-                                <div v-if="!creating" class="flex items-center">
-                                    <KeyIcon class="w-4 h-4 mr-2 flex-shrink-0" />
-                                    <span class="truncate"> Create API Token </span>
+                                {{ walletAccount }}
+                            </label>
+                            <template v-if="!isMultiTenant">
+                                <p class="text-sm">
+                                    To configure a new Daemon wallet, you'll need to create an API token. This token
+                                    will be used to authenticate your Daemon wallet with your Platform account.
+                                </p>
+                                <div v-if="tokens.length">
+                                    <span class="text-xl mb-4">My API Tokens</span>
+                                    <div class="grid grid-cols-1 gap-4">
+                                        <div
+                                            class="bg-light-surface-background dark:bg-dark-surface-background !bg-opacity-50 p-3 shadow sm:rounded-lg sm:p-4 flex justify-between items-center gr"
+                                            v-for="token in tokens"
+                                            :key="token.name"
+                                        >
+                                            <div class="flex-1 truncate flex items-center">
+                                                <KeyIcon class="w-5 h-5 mr-4 text-green-500" />
+                                                <span
+                                                    class="text-light-content-strong dark:text-dark-content-strong mr-4"
+                                                >
+                                                    {{ token.name }}
+                                                </span>
+                                                <span
+                                                    class="text-light-content dark:text-dark-content text-sm mt-1 truncate"
+                                                >
+                                                    <span v-if="!token.plainTextToken">
+                                                        {{ '*******' }}
+                                                    </span>
+                                                    <CopyTextIcon
+                                                        v-if="token.plainTextToken"
+                                                        ref="copyIconRef"
+                                                        class="cursor-pointer flex mr-4"
+                                                        :text="
+                                                            token.plainTextToken.substring(
+                                                                token.plainTextToken?.indexOf('|') + 1 ?? 0
+                                                            )
+                                                        "
+                                                    >
+                                                        <span class="truncate">
+                                                            {{
+                                                                token.plainTextToken?.substring(
+                                                                    token.plainTextToken?.indexOf('|') + 1 ?? 0
+                                                                )
+                                                            }}
+                                                        </span>
+                                                    </CopyTextIcon>
+                                                </span>
+                                            </div>
+                                            <Btn
+                                                class="flex-shrink-0"
+                                                :dusk="`btn__revoke-api-${token.name}`"
+                                                error
+                                                @click="confirmRevoke(token.name)"
+                                            >
+                                                Revoke
+                                            </Btn>
+                                        </div>
+                                    </div>
                                 </div>
-                                <LoadingCircle v-else class="w-4 h-4 text-white" />
-                            </Btn>
+
+                                <div class="flex items-end space-x-4 mb-4">
+                                    <FormInput
+                                        v-if="enableTokenCreate"
+                                        class="sm:w-[300px] flex-1 sm:flex-none"
+                                        v-model="tokenName"
+                                        name="tokenName"
+                                        placeholder="Enter token name"
+                                    />
+                                    <Btn
+                                        dusk="btn__create-api-token"
+                                        primary
+                                        class="py-2.5 disabled:!bg-primary"
+                                        @click="createApiToken"
+                                        :disabled="creating"
+                                    >
+                                        <div v-if="!creating" class="flex items-center">
+                                            <KeyIcon class="w-4 h-4 mr-2 flex-shrink-0" />
+                                            <span class="truncate"> Create API Token </span>
+                                        </div>
+                                        <LoadingCircle v-else class="w-4 h-4 text-white" />
+                                    </Btn>
+                                </div>
+                            </template>
                         </div>
-                    </template>
+                    </Transition>
                 </div>
             </div>
         </div>
@@ -135,6 +225,8 @@ const enableTokenCreate = ref(false);
 const tokenName = ref();
 const confirmModal = ref(false);
 const confirmModalName = ref();
+const creationFlow = ref(false);
+const loadingUser = ref(false);
 
 const tokens = computed(() => appStore.user?.apiTokens ?? []);
 
@@ -192,6 +284,12 @@ const copyText = (text: string) => {
     snackbar.info({ title: 'Copied to clipboard!' });
 };
 
+const refreshWalletAccount = async () => {
+    loadingUser.value = true;
+    await appStore.getUser();
+    loadingUser.value = false;
+};
+
 watch(
     () => appStore.user,
     (userVal) => {