refactor: fetch and set white label space in composable

snapshot-labs · Oct 1, 2024 · 92b8ed3 · 92b8ed3
1 parent 4dda944
commit 92b8ed3
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 44 deletions.
diff --git a/apps/ui/src/components/Layout/App.vue b/apps/ui/src/components/Layout/App.vue
@@ -19,12 +19,9 @@ const sidebarSwipeEnabled = ref(true);
 const route = useRoute();
 const router = useRouter();
 const uiStore = useUiStore();
-const spacesStore = useSpacesStore();
 const { modalOpen } = useModal();
 const { init, setAppName, app } = useApp();
-const { isWhiteLabel } = useWhiteLabel();
-const { param } = useRouteParser('space');
-const { address, networkId } = useResolve(param);
+const { isWhiteLabel, space: whiteLabelSpace } = useWhiteLabel();
 const { setFavicon } = useFavicon();
 const { web3 } = useWeb3();
 const { isSwiping, direction } = useSwipe(el, {
@@ -137,24 +134,17 @@ watch(
       return;
     }
 
-    if (!address.value || !networkId.value) return;
-
-    await spacesStore.fetchSpace(address.value, networkId.value);
-    const space = spacesStore.spacesMap.get(
-      `${networkId.value}:${address.value}`
-    );
-
-    if (!space) return;
+    if (!whiteLabelSpace.value) return;
 
     const faviconUrl = getStampUrl(
       'space',
-      space.id,
+      whiteLabelSpace.value.id,
       16,
-      getCacheHash(space.avatar)
+      getCacheHash(whiteLabelSpace.value.avatar)
     );
     setFavicon(faviconUrl);
 
-    setAppName(space.name);
+    setAppName(whiteLabelSpace.value.name);
   },
   { immediate: true }
 );

diff --git a/apps/ui/src/composables/useResolve.ts b/apps/ui/src/composables/useResolve.ts
@@ -6,14 +6,14 @@ export function useResolve(id: Ref<string>) {
   const networkId: Ref<NetworkID | null> = ref(null);
   const address: Ref<string | null> = ref(null);
 
-  const { isWhiteLabel, resolver: whiteLabelResolver } = useWhiteLabel();
+  const { isWhiteLabel, resolved: whiteLabelResolved, space } = useWhiteLabel();
 
   watch(
-    id,
-    async id => {
-      if (isWhiteLabel.value) {
-        networkId.value = whiteLabelResolver.value.networkId;
-        address.value = whiteLabelResolver.value.address;
+    [id, () => whiteLabelResolved.value],
+    async ([id, whiteLabelResolved]) => {
+      if (whiteLabelResolved && isWhiteLabel.value && space.value) {
+        networkId.value = space.value.network;
+        address.value = space.value.id;
         resolved.value = true;
 
         return true;

diff --git a/apps/ui/src/composables/useWhiteLabel.ts b/apps/ui/src/composables/useWhiteLabel.ts
@@ -1,6 +1,6 @@
 import { getNetwork } from '@/networks';
 import { useSpacesStore } from '@/stores/spaces';
-import { NetworkID } from '@/types';
+import { Space } from '@/types';
 
 const NETWORK = 's';
 const DEFAULT_DOMAIN = import.meta.env.VITE_HOST || 'localhost';
@@ -10,27 +10,29 @@ const isWhiteLabel = ref(false);
 const isCustomDomain = ref(domain !== DEFAULT_DOMAIN);
 const failed = ref(false);
 const resolved = ref(domain === DEFAULT_DOMAIN);
-const resolver = reactive<{
-  address: string | null;
-  networkId: NetworkID | null;
-}>({
-  address: null,
-  networkId: null
-});
+const space = ref<Space | null>(null);
+
+async function getSpace(domain: string): Promise<Space | null> {
+  const loadSpacesParams: Record<string, string> = {};
 
-async function getSpaceId(domain: string): Promise<string | null> {
   // Resolve white label domain locally if mapping is provided
   // for easier local testing
-  // e.g. VITE_WHITE_LABEL_MAPPING='127.0.0.1;s:snapshot.eth'
+  // e.g. VITE_WHITE_LABEL_MAPPING='127.0.0.1;snapshot.eth'
   const localMapping = import.meta.env.VITE_WHITE_LABEL_MAPPING;
   if (localMapping) {
     const [localDomain, localSpaceId] = localMapping.split(';');
-    if (domain === localDomain) return localSpaceId;
+    if (domain === localDomain) {
+      loadSpacesParams.id = localSpaceId;
+    }
+  } else {
+    loadSpacesParams.domain = domain;
   }
 
   const spacesStore = useSpacesStore();
   const network = getNetwork(NETWORK);
-  const space = (await network.api.loadSpaces({ limit: 1 }, { domain }))[0];
+  const space = (
+    await network.api.loadSpaces({ limit: 1 }, loadSpacesParams)
+  )[0];
 
   if (!space) return null;
 
@@ -39,23 +41,19 @@ async function getSpaceId(domain: string): Promise<string | null> {
     [space.id]: space
   };
 
-  return space.id;
+  return space;
 }
 
 export function useWhiteLabel() {
   async function init() {
     if (resolved.value) return;
 
     try {
-      const id = await getSpaceId(domain);
-
-      if (!id) return;
-
-      const [networkId, spaceId] = id.split(':') as [NetworkID, string];
+      space.value = await getSpace(domain);
 
-      resolver.address = spaceId;
-      resolver.networkId = networkId;
-      isWhiteLabel.value = true;
+      if (space.value) {
+        isWhiteLabel.value = true;
+      }
     } catch (e) {
       console.log(e);
       failed.value = true;
@@ -69,7 +67,7 @@ export function useWhiteLabel() {
     isWhiteLabel,
     isCustomDomain,
     failed,
-    resolved,
-    resolver: computed(() => resolver)
+    space,
+    resolved
   };
 }