[PLA-1387] [PLA-1385] fix app title and settings page (#43)

enjin · Oct 31, 2023 · 4093369 · 4093369
1 parent c1a0563
commit 4093369
Show file tree

Hide file tree

Showing 9 changed files with 84 additions and 31 deletions.
diff --git a/resources/js/components/App.vue b/resources/js/components/App.vue
@@ -20,7 +20,7 @@ import ScaleTransition from '~/components/ScaleTransition.vue';
 import SideNavbar from '~/components/SideNavbar.vue';
 import SnackbarGroup from '~/components/SnackbarGroup.vue';
 import UserNavbar from '~/components/UserNavbar.vue';
-import { watch } from 'vue';
+import { computed, watch } from 'vue';
 import { useRouter } from 'vue-router';
 
 const appStore = useAppStore();
@@ -30,6 +30,20 @@ const router = useRouter();
     await appStore.init();
 })();
 
+const canaryHost = computed(() => appStore.config.network === 'canary');
+
+(() => {
+    if (window.bootstrap?.name) {
+        return;
+    }
+
+    if (canaryHost.value) {
+        document.title = 'Canary Enjin Platform';
+    } else {
+        document.title = 'Enjin Platform';
+    }
+})();
+
 watch(
     () => appStore.loggedIn,
     () => {

diff --git a/resources/js/components/SideNavbar.vue b/resources/js/components/SideNavbar.vue
@@ -46,22 +46,13 @@ import CanaryEnjinLogo from '~/components/CanaryEnjinLogo.vue';
 
 const navigations = computed(() => useAppStore().navigations);
 
-const canaryHost = computed(
-    () =>
-        window.location.origin.includes('canary') ||
-        window.location.origin.includes('staging') ||
-        useAppStore().config.network === 'canary'
-);
+const canaryHost = computed(() => useAppStore().config.network === 'canary');
 
-(() => {
-    if (!canaryHost.value) {
-        document.title = 'Canary Enjin Platform';
-    } else {
-        document.title = 'Enjin Platform';
+const pageTitle = () => {
+    if (window.bootstrap?.name) {
+        return window.bootstrap.name;
     }
-})();
 
-const pageTitle = () => {
     if (canaryHost.value) {
         return 'Canary Platform';
     } else {

diff --git a/resources/js/components/SignTransaction.vue b/resources/js/components/SignTransaction.vue
@@ -9,11 +9,19 @@
             <span v-else>Signing</span>
         </DialogTitle>
         <div class="flex flex-col space-y-2 mt-4 relative">
-            <div class="inline-flex space-x-2 mb-2">
+            <div v-if="signing">
+                <span>
+                    <span> Address: </span>
+                    <span class="font-bold">
+                        {{ addressShortHex(connectionStore.account.address) }}
+                    </span>
+                </span>
+            </div>
+            <div class="inline-flex space-x-1 mb-2">
                 <span> Transaction fee: </span>
                 <LoadingCircle v-if="loadingApi" :size="20" class="my-auto text-primary" />
                 <span v-else class="font-bold animate-fade-in">
-                    {{ `${feeCost} ENJ` }}
+                    {{ `${feeCost} ${currencySymbolByNetwork(useAppStore().config.network)}` }}
                 </span>
             </div>
             <div v-if="loadingApi" class="py-20 animate-fade-in">
@@ -40,7 +48,7 @@
             </div>
             <div v-else class="py-20">
                 <LoadingCircle class="my-auto text-primary" :size="42" />
-                <p class="text-center text-lg mt-2">Please sign your transaction in your wallet</p>
+                <p class="text-center text-lg mt-2">Please sign the transaction in your wallet</p>
             </div>
         </div>
     </Modal>
@@ -56,8 +64,9 @@ import { ref } from 'vue';
 import LoadingCircle from './LoadingCircle.vue';
 import snackbar from '~/util/snackbar';
 import Identicon from './Identicon.vue';
-import { formatPriceFromENJ } from '~/util';
+import { currencySymbolByNetwork, formatPriceFromENJ } from '~/util';
 import { useConnectionStore } from '~/store/connection';
+import { useAppStore } from '~/store';
 
 const props = defineProps<{
     transaction: any;

diff --git a/resources/js/components/UserNavbar.vue b/resources/js/components/UserNavbar.vue
@@ -64,14 +64,13 @@ const help = ref(false);
 const appStore = useAppStore();
 
 const navigations = computed(() => appStore.navigations);
-const canaryHost = computed(
-    () =>
-        window.location.origin.includes('canary') ||
-        window.location.origin.includes('staging') ||
-        useAppStore().config.network === 'canary'
-);
+const canaryHost = computed(() => useAppStore().config.network === 'canary');
 
 const pageTitle = () => {
+    if (window.bootstrap?.name) {
+        return window.bootstrap.name;
+    }
+
     if (canaryHost.value) {
         return 'Canary Platform';
     } else {

diff --git a/resources/js/components/WalletConnectButton.vue b/resources/js/components/WalletConnectButton.vue
@@ -6,7 +6,7 @@
             >
                 <WalletIcon class="h-6 w-6" />
                 <LoadingCircle v-if="loading" class="!text-white" />
-                <span v-else class="hidden sm:block">{{ walletSession ? 'Wallet connected' : 'Connect wallet' }}</span>
+                <span v-else class="hidden sm:block">{{ walletSession ? walletName : 'Connect wallet' }}</span>
             </MenuButton>
         </div>
         <ScaleTransition>
@@ -68,6 +68,15 @@ const connectionStore = useConnectionStore();
 
 const loading = ref(false);
 const showAccountsModal = ref(false);
+const walletName = computed(() => {
+    if (connectionStore.provider === 'wc') {
+        return 'Enjin Wallet';
+    } else if (connectionStore.provider === 'polkadot.js') {
+        return 'Polkadot.JS';
+    }
+
+    return '';
+});
 
 const walletSession = computed(() => connectionStore.wallet);
 

diff --git a/resources/js/components/pages/Settings.vue b/resources/js/components/pages/Settings.vue
@@ -162,7 +162,7 @@ const tokenName = ref();
 const walletAccount = ref(publicKeyToAddress(appStore.user?.account));
 const enableTokenCreate = ref(false);
 const enableAccountModify = ref(true);
-const loading = ref(appStore.user ? false : true);
+const loading = ref(appStore.user || !appStore.hasMultiTenantPackage ? false : true);
 const creating = ref(false);
 const updating = ref(false);
 
@@ -287,4 +287,12 @@ watch(
         }
     }
 );
+
+(() => {
+    setTimeout(() => {
+        if (loading.value) {
+            loading.value = false;
+        }
+    }, 2000);
+})();
 </script>
diff --git a/resources/js/shims-vue.d.ts b/resources/js/shims-vue.d.ts
@@ -7,7 +7,9 @@ declare module '*.vue' {
 
 interface Window {
     bootstrap: {
+        network: string;
         url: string;
         daemon: string;
+        name: string;
     };
 }
diff --git a/resources/js/store/index.ts b/resources/js/store/index.ts
@@ -65,11 +65,21 @@ export const useAppStore = defineStore('app', {
                         link,
                     };
                 });
-                if (this.hasBeamPackage) this.addBeamNavigation();
-                if (this.hasFuelTanksPackage) this.addFuelTanksNavigation();
-                if (this.hasMarketplacePackage) this.addMarketplaceNavigation();
 
-                if (this.loggedIn) await this.getUser();
+                if (this.hasBeamPackage) {
+                    this.addBeamNavigation();
+                }
+                if (this.hasFuelTanksPackage) {
+                    this.addFuelTanksNavigation();
+                }
+                if (this.hasMarketplacePackage) {
+                    this.addMarketplaceNavigation();
+                }
+
+                if (this.loggedIn && this.hasMultiTenantPackage) {
+                    await this.getUser();
+                }
+
                 await useConnectionStore().getSession();
 
                 return await this.fetchCollectionIds();
@@ -120,6 +130,14 @@ export const useAppStore = defineStore('app', {
             if (window.bootstrap?.daemon) {
                 this.config.daemon = window.bootstrap.daemon;
             }
+
+            if (window.bootstrap?.name) {
+                document.title = window.bootstrap.name;
+            }
+
+            if (window.bootstrap?.network) {
+                this.config.network = window.bootstrap.network;
+            }
         },
         async checkURL(url: URL) {
             try {
@@ -248,5 +266,8 @@ export const useAppStore = defineStore('app', {
         hasMarketplacePackage(state: AppState) {
             return state.config.packages.find((p) => p.name === 'platform-marketplace');
         },
+        hasMultiTenantPackage(state: AppState) {
+            return state.config.packages.find((p) => p.name === 'platform-multi-tenant');
+        },
     },
 });
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
@@ -15,7 +15,7 @@
     <script>
         global = globalThis
         window.__dynamic_base__ = '/vendor/platform-ui/build';
-        window.bootstrap = { url: window.location.origin, daemon: "{{ Enjin\Platform\Support\Account::daemon()['public_key'] }}" }
+        window.bootstrap = { name: "{{ env('APP_NAME') }}", network: "{{ env('NETWORK') }}" , url: window.location.origin, daemon: "{{ Enjin\Platform\Support\Account::daemon()['public_key'] }}" }
     </script>
 
 	@vite('resources/js/app.ts', 'vendor/platform-ui/build')