From 04994863ab6ec7a1e73e8e2ab577825a9c7a0932 Mon Sep 17 00:00:00 2001
From: Leonardo Custodio <leonardo@custodio.me>
Date: Tue, 25 Jul 2023 19:01:57 -0300
Subject: [PATCH] pr feedback

---
 resources/js/components/UserNavbar.vue        | 22 +++++--------------
 .../js/components/WalletConnectButton.vue     | 22 ++-----------------
 resources/js/store/index.ts                   |  5 +++++
 resources/js/util/index.ts                    | 19 ++++++++++++++++
 4 files changed, 31 insertions(+), 37 deletions(-)

diff --git a/resources/js/components/UserNavbar.vue b/resources/js/components/UserNavbar.vue
index 9c82d4c..370a397 100644
--- a/resources/js/components/UserNavbar.vue
+++ b/resources/js/components/UserNavbar.vue
@@ -24,7 +24,9 @@
                     <WalletIcon class="h-6 w-6 text-gray-400 cursor-pointer" @click="connectWallet" />
                     <Suspense>
                         <WalletConnectButton></WalletConnectButton>
-                        <template #fallback><div class="text-gray-600">Loading</div></template>
+                        <template #fallback>
+                            <LoadingCircle></LoadingCircle>
+                        </template>
                     </Suspense>
                     <InformationCircleIcon class="h-6 w-6 text-gray-400 cursor-pointer" @click="openHelp" />
                     <NotificationsList />
@@ -61,6 +63,7 @@ import WalletConnectButton from '~/components/WalletConnectButton.vue';
 import { WalletConnectModalSign } from '@walletconnect/modal-sign-html';
 import { getAppMetadata } from '@walletconnect/utils';
 import { SessionTypes } from '@walletconnect/types';
+import LoadingCircle from '~/components/LoadingCircle.vue';
 
 const open = ref(false);
 const help = ref(false);
@@ -70,22 +73,7 @@ const appStore = useAppStore();
 const navigations = computed(() => appStore.navigations);
 
 const connectWallet = async () => {
-    const walletConnect = new WalletConnectModalSign({
-        projectId: 'a4b92f550ab3039f7e084a879882bc96',
-        metadata: getAppMetadata(),
-        modalOptions: {
-            themeMode: 'light',
-            explorerRecommendedWalletIds: ['bdc9433ffdaee55d31737d83b931caa1f17e30666f5b8e03eea794bac960eb4a'],
-            enableExplorer: true,
-            walletImages: {},
-            themeVariables: {
-                '--wcm-background-color': '#7567CE',
-                '--wcm-accent-color': '#7567CE',
-                '--wcm-accent-fill-color': '#FFFFFF',
-            },
-        },
-    });
-
+    const walletConnect = appStore.getWeb3Modal();
     let session: SessionTypes.Struct | undefined = await walletConnect.getSession();
 
     if (!session) {
diff --git a/resources/js/components/WalletConnectButton.vue b/resources/js/components/WalletConnectButton.vue
index 9b752e7..2a0ff0b 100644
--- a/resources/js/components/WalletConnectButton.vue
+++ b/resources/js/components/WalletConnectButton.vue
@@ -5,29 +5,11 @@
 </template>
 
 <script setup>
-import { WalletConnectModalSign } from '@walletconnect/modal-sign-html';
-import { getAppMetadata } from '@walletconnect/utils';
 import { useAppStore } from '~/store';
 
 const appStore = useAppStore();
-
-const walletConnect = new WalletConnectModalSign({
-    projectId: 'a4b92f550ab3039f7e084a879882bc96',
-    metadata: getAppMetadata(),
-    modalOptions: {
-        themeMode: 'light',
-        explorerRecommendedWalletIds: ['bdc9433ffdaee55d31737d83b931caa1f17e30666f5b8e03eea794bac960eb4a'],
-        enableExplorer: true,
-        walletImages: {},
-        themeVariables: {
-            '--wcm-background-color': '#7567CE',
-            '--wcm-accent-color': '#7567CE',
-            '--wcm-accent-fill-color': '#FFFFFF',
-        },
-    },
-});
-
-let session = await walletConnect.getSession();
+const walletConnect = appStore.getWeb3Modal();
+const session = await walletConnect.getSession();
 const hasValidSession = session && session.acknowledged;
 
 if (hasValidSession) {
diff --git a/resources/js/store/index.ts b/resources/js/store/index.ts
index 9d71f08..1937441 100644
--- a/resources/js/store/index.ts
+++ b/resources/js/store/index.ts
@@ -5,6 +5,8 @@ import { ApiService } from '~/api';
 import snackbar from '~/util/snackbar';
 import { AuthApi } from '~/api/auth';
 import { CollectionApi } from '~/api/collection';
+import { WalletConnectModalSign } from '@walletconnect/modal-sign-html';
+import { wcOptions } from '~/util';
 
 export const useAppStore = defineStore('app', {
     state: (): AppState => ({
@@ -192,6 +194,9 @@ export const useAppStore = defineStore('app', {
         setCollections(collections: string[]) {
             this.collections = collections;
         },
+        getWeb3Modal() {
+            return new WalletConnectModalSign(wcOptions);
+        },
     },
     getters: {
         hasValidConfig(state: AppState) {
diff --git a/resources/js/util/index.ts b/resources/js/util/index.ts
index 5039369..41459db 100644
--- a/resources/js/util/index.ts
+++ b/resources/js/util/index.ts
@@ -1,6 +1,8 @@
 import { TokenIdSelectType } from '~/types/types.enums';
 import { TokenIdType } from '~/types/types.interface';
 import snackbar from '~/util/snackbar';
+import { getAppMetadata } from '@walletconnect/utils';
+import { WalletConnectModalSignOptions } from '@walletconnect/modal-sign-html';
 
 export const formatData = (entries: any, type = 'object') => {
     const data: { [key: string]: any } = type === 'object' ? {} : [];
@@ -130,3 +132,20 @@ export const currencySymbolByNetwork = (network: string) => {
 
     return 'ENJ';
 };
+
+export const wcProjectId = 'a4b92f550ab3039f7e084a879882bc96';
+export const wcOptions: WalletConnectModalSignOptions = {
+    projectId: wcProjectId,
+    metadata: getAppMetadata(),
+    modalOptions: {
+        themeMode: 'light',
+        explorerRecommendedWalletIds: ['bdc9433ffdaee55d31737d83b931caa1f17e30666f5b8e03eea794bac960eb4a'],
+        enableExplorer: true,
+        walletImages: {},
+        themeVariables: {
+            '--wcm-background-color': '#7567CE',
+            '--wcm-accent-color': '#7567CE',
+            '--wcm-accent-fill-color': '#FFFFFF',
+        },
+    },
+};