From 8574d8651862e2e1ccb966ac6847d89ddf1d1c36 Mon Sep 17 00:00:00 2001
From: Zouheir Layine <zlayine@enjin.io>
Date: Mon, 21 Oct 2024 15:43:19 +0100
Subject: [PATCH] fix settings icon

---
 resources/js/components/pages/Settings.vue    |  11 +-
 .../js/components/pages/SettingsHelp.vue      | 105 ++++++++----------
 .../components/pages/SettingsWalletDaemon.vue |  11 +-
 3 files changed, 65 insertions(+), 62 deletions(-)

diff --git a/resources/js/components/pages/Settings.vue b/resources/js/components/pages/Settings.vue
index 6232e33..bb704a6 100644
--- a/resources/js/components/pages/Settings.vue
+++ b/resources/js/components/pages/Settings.vue
@@ -3,10 +3,10 @@
         <div class="mt-4 flow-root relative">
             <LoadingCircle v-if="loading" class="mt-40" :size="44" />
             <template v-else>
-                <SettingsHelp />
+                <SettingsHelp v-model:help="showHelp" />
                 <div class="flex flex-col space-y-4">
                     <SettingsWalletApp />
-                    <SettingsWalletDaemon />
+                    <SettingsWalletDaemon v-model:help="showHelp" />
                 </div>
 
                 <div class="flex flex-col space-y-4 mt-4">
@@ -62,6 +62,7 @@ import VerifyPasswordModal from './VerifyPasswordModal.vue';
 import SettingsWalletApp from './SettingsWalletApp.vue';
 import SettingsWalletDaemon from './SettingsWalletDaemon.vue';
 import SettingsHelp from './SettingsHelp.vue';
+import { publicKeyToAddress } from '~/util/address';
 
 const router = useRouter();
 const appStore = useAppStore();
@@ -71,6 +72,12 @@ const loading = ref(appStore.user || !appStore.hasMultiTenantPackage ? false : t
 const confirmModal = ref(false);
 const verifyPasswordModal = ref(false);
 
+const walletAccount = computed(() =>
+    appStore.isMultiTenant ? publicKeyToAddress(appStore.user?.account) : appStore.config.daemon
+);
+
+const showHelp = ref(walletAccount.value);
+
 const isMultiTenant = computed(() => appStore.isMultiTenant);
 
 const logout = async () => {
diff --git a/resources/js/components/pages/SettingsHelp.vue b/resources/js/components/pages/SettingsHelp.vue
index 1bd2710..a38bfc0 100644
--- a/resources/js/components/pages/SettingsHelp.vue
+++ b/resources/js/components/pages/SettingsHelp.vue
@@ -1,69 +1,58 @@
 <template>
-    <div
-        class="flex justify-end md:absolute w-auto top-0 cursor-pointer transition-all z-40"
-        :class="{
-            'right-0 absolute': showHelp,
-            'right-0 md:-right-10': !showHelp,
-        }"
-    >
-        <QuestionMarkCircleIcon
-            v-if="!showHelp"
-            class="m-2 w-5 h-5 cursor-pointer text-light-content dark:text-dark-content"
-            stroke-width="36"
-            @click="showHelp = true"
-        />
-        <XMarkIcon
-            v-else
-            class="h-5 w-5 m-2 cursor-pointer text-light-content-strong dark:text-dark-content-strong"
-            @click="showHelp = false"
-        />
-    </div>
     <Transition
-        enter-active-class="transition-all duration-300"
-        leave-active-class="transition-all duration-300"
-        enter-from-class="w-[0px] absolute right-0 md:translate-x-20 scale-0 h-[0px]"
-        leave-to-class="w-[0px] absolute right-0 md:translate-x-20 scale-0 h-[0px]"
-        enter-to-class="w-[100%] translate-x-0 scale-100 h-[350px] md:h-[200px]"
-        leave-from-class="w-[100%] translate-x-0 scale-100 h-[350px] md:h-[200px]"
+        enter-active-class="transition-all duration-500 ease-out"
+        leave-active-class="transition-all duration-500"
+        enter-from-class="max-h-[0px]"
+        leave-to-class="max-h-[0px]"
+        enter-to-class="max-h-[350px]"
+        leave-from-class="max-h-[350px]"
     >
-        <div
-            v-if="showHelp"
-            class="ml-auto flex flex-col mb-6 transition-all rounded-md bg-[#0284c7] p-3 text-white overflow-hidden"
-        >
-            <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 this:</p>
-            <ul class="list-disc py-4 px-6">
-                <li>
-                    <span class="font-bold">Manually: </span>Using a wallet app like
-                    <a class="underline" target="_blank" href="https://enjin.io/technology/wallet"
-                        >Enjin Wallet (mobile)</a
-                    >
-                    or
-                    <a class="underline" target="_blank" href="https://polkadot.js.org/extension/"
-                        >Polkadot{.js} browser extension (desktop)</a
-                    >
-                </li>
-                <li>
-                    <span class="font-bold">Automatically: </span>Using a
+        <div v-if="showHelp" class="overflow-hidden">
+            <div
+                class="ml-auto flex flex-col mb-6 transition-all rounded-md bg-[#0284c7] p-3 text-white overflow-hidden"
+            >
+                <div class="flex justify-end right-0 absolute w-auto top-0 cursor-pointer transition-all z-40">
+                    <XMarkIcon
+                        class="h-5 w-5 m-2 cursor-pointer text-light-content-strong dark:text-dark-content-strong"
+                        @click="showHelp = false"
+                    />
+                </div>
+                <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 this:
+                </p>
+                <ul class="list-disc py-4 px-6">
+                    <li>
+                        <span class="font-bold">Manually: </span>Using a wallet app like
+                        <a class="underline" target="_blank" href="https://enjin.io/technology/wallet"
+                            >Enjin Wallet (mobile)</a
+                        >
+                        or
+                        <a class="underline" target="_blank" href="https://polkadot.js.org/extension/"
+                            >Polkadot{.js} browser extension (desktop)</a
+                        >
+                    </li>
+                    <li>
+                        <span class="font-bold">Automatically: </span>Using a
+                        <a class="underline" target="_blank" href="https://docs.enjin.io/docs/using-wallet-daemon"
+                            >Daemon Wallet</a
+                        >, which automatically signs requests as long as its running.
+                    </li>
+                </ul>
+                <p>
+                    You can choose to configure either or both based on your needs. For detailed instructions on setting
+                    up a Daemon wallet,
                     <a class="underline" target="_blank" href="https://docs.enjin.io/docs/using-wallet-daemon"
-                        >Daemon Wallet</a
-                    >, which automatically signs requests as long as its running.
-                </li>
-            </ul>
-            <p>
-                You can choose to configure either or both based on your needs. For detailed instructions on setting up
-                a Daemon wallet,
-                <a class="underline" target="_blank" href="https://docs.enjin.io/docs/using-wallet-daemon"
-                    >visit our docs</a
-                >.
-            </p>
+                        >visit our docs</a
+                    >.
+                </p>
+            </div>
         </div>
     </Transition>
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-import { QuestionMarkCircleIcon, XMarkIcon } from '@heroicons/vue/24/outline';
+import { XMarkIcon } from '@heroicons/vue/24/outline';
 
-const showHelp = ref(false);
+const showHelp = defineModel<boolean>('help');
 </script>
diff --git a/resources/js/components/pages/SettingsWalletDaemon.vue b/resources/js/components/pages/SettingsWalletDaemon.vue
index 49c8551..fe9e27a 100644
--- a/resources/js/components/pages/SettingsWalletDaemon.vue
+++ b/resources/js/components/pages/SettingsWalletDaemon.vue
@@ -1,11 +1,16 @@
 <template>
     <CollapseCard dusk-id="walletDaemonTab" title="Daemon Wallet" :actions="false" :isOpen="true">
         <template #icon>
-            <div class="ml-2">
+            <div class="flex space-x-2 ml-2">
                 <Tooltip class="!flex items-center" :text="tooltipText">
                     <div v-if="operational" class="rounded-full w-3 h-3 bg-green-400"></div>
                     <div v-else class="rounded-full w-3 h-3 bg-red-500"></div>
                 </Tooltip>
+                <QuestionMarkCircleIcon
+                    class="m-2 w-5 h-5 cursor-pointer text-light-content dark:text-dark-content"
+                    stroke-width="36"
+                    @click.stop="showHelp = true"
+                />
             </div>
         </template>
         <div>
@@ -206,13 +211,15 @@ import { useAppStore } from '~/store';
 import snackbar from '~/util/snackbar';
 import { snackbarErrors } from '~/util';
 import FormInput from '../FormInput.vue';
-import { KeyIcon } from '@heroicons/vue/24/outline';
+import { KeyIcon, QuestionMarkCircleIcon } from '@heroicons/vue/24/outline';
 import LoadingCircle from '../LoadingCircle.vue';
 import CopyTextIcon from '../CopyTextIcon.vue';
 import ConfirmModal from '../ConfirmModal.vue';
 import { publicKeyToAddress } from '~/util/address';
 import Tooltip from '../Tooltip.vue';
 
+const showHelp = defineModel<boolean>('help');
+
 const appStore = useAppStore();
 
 const creating = ref(false);