Guard only apps and packages with wallet connect (#25)

MystenLabs · Oct 1, 2024 · 76b9ef1 · 76b9ef1
1 parent 6167a28
commit 76b9ef1
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 46 deletions.
diff --git a/app/src/app/apps/layout.tsx b/app/src/app/apps/layout.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { WalletConnectedContent } from "@/components/layouts/WalletConnectedContent";
 import { NetworkMissmatch } from "@/components/NetworkMissmatch";
 import {
   AppContext,
@@ -20,7 +21,10 @@ export default function AppsLayout({
   const { names: ownedNames } = useOwnedAndKioskSuinsNames();
 
   const [appValue, setAppValue] = useState<AppContextType["value"]>({
-    selectedSuinsName: JSON.parse(localStorage.getItem(LocalStorageKeys.SELECTED_NS_NAME) ?? '{}')?.selectedSuinsName ?? null,
+    selectedSuinsName:
+      JSON.parse(
+        localStorage.getItem(LocalStorageKeys.SELECTED_NS_NAME) ?? "{}",
+      )?.selectedSuinsName ?? null,
   });
 
   const selectSuinsName = (nftId: string) => {
@@ -31,38 +35,49 @@ export default function AppsLayout({
   };
 
   const setAndCacheValue = (value: AppContextType["value"]) => {
-    localStorage.setItem(LocalStorageKeys.SELECTED_NS_NAME, JSON.stringify(value));
+    localStorage.setItem(
+      LocalStorageKeys.SELECTED_NS_NAME,
+      JSON.stringify(value),
+    );
     setAppValue(value);
-  }
+  };
 
   useEffect(() => {
     if (
-      !ownedNames?.find((x) => x.nftId === appValue.selectedSuinsName?.nftId)
-      && appValue.selectedSuinsName?.nftId
+      !ownedNames?.find((x) => x.nftId === appValue.selectedSuinsName?.nftId) &&
+      appValue.selectedSuinsName?.nftId
     ) {
       setAppValue({ selectedSuinsName: null });
     }
   }, [ownedNames]);
 
   return (
-    <AppContext.Provider value={{ value: appValue, setValue: setAndCacheValue }}>
-      <div className="border-b border-border-classic">
-        <div className="container flex items-center gap-Regular pb-Regular">
-          <Text variant="xsmall/semibold" family="inter" className="max-md:hidden">
-            Selected Organization:
-          </Text>
-          <div className="w-[300px]">
-            <ComboBox
-              placeholder="Select a name..."
-              value={appValue.selectedSuinsName?.nftId}
-              options={formatNamesForComboBox(ownedNames)}
-              setValue={selectSuinsName}
-            />
+    <WalletConnectedContent>
+      <AppContext.Provider
+        value={{ value: appValue, setValue: setAndCacheValue }}
+      >
+        <div className="border-b border-border-classic">
+          <div className="container flex items-center gap-Regular pb-Regular">
+            <Text
+              variant="xsmall/semibold"
+              family="inter"
+              className="max-md:hidden"
+            >
+              Selected Organization:
+            </Text>
+            <div className="w-[300px]">
+              <ComboBox
+                placeholder="Select a name..."
+                value={appValue.selectedSuinsName?.nftId}
+                options={formatNamesForComboBox(ownedNames)}
+                setValue={selectSuinsName}
+              />
+            </div>
           </div>
         </div>
-      </div>
-      <NetworkMissmatch expectedNetwork="mainnet" />
-      {children}
-    </AppContext.Provider>
+        <NetworkMissmatch expectedNetwork="mainnet" />
+        {children}
+      </AppContext.Provider>
+    </WalletConnectedContent>
   );
 }
diff --git a/app/src/app/layout.tsx b/app/src/app/layout.tsx
@@ -4,11 +4,6 @@ import { everett, everettMono, inter } from "@/fonts";
 import { type Metadata } from "next";
 import { cn } from "@/lib/utils";
 import Providers from "@/components/providers/Providers";
-import Header from "@/components/Header";
-import Footer from "@/components/Footer";
-import { MVRContext, MVRSetup } from "@/components/providers/mvr-provider";
-import { useEffect, useState } from "react";
-import { getFullnodeUrl, SuiClient } from "@mysten/sui/client";
 import { BaseLayout } from "@/components/layouts/BaseLayout";
 
 export const metadata: Metadata = {

diff --git a/app/src/app/packages/layout.tsx b/app/src/app/packages/layout.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { WalletConnectedContent } from "@/components/layouts/WalletConnectedContent";
 import { NetworkMissmatch } from "@/components/NetworkMissmatch";
 import { useMVRContext } from "@/components/providers/mvr-provider";
 import { PackagesNetworkContext } from "@/components/providers/packages-provider";
@@ -14,31 +15,39 @@ export default function PackagesLayout({
 }: Readonly<{ children: React.ReactNode }>) {
   const { isCustom } = useMVRContext();
   const walletNetwork = useWalletNetwork();
-  const [network, setNetwork] = useState<Network>((isCustom || !walletNetwork) ? 'mainnet' : walletNetwork);
+  const [network, setNetwork] = useState<Network>(
+    isCustom || !walletNetwork ? "mainnet" : walletNetwork,
+  );
 
   useEffect(() => {
     if (isCustom) {
-        setNetwork('mainnet');
-        return;
-    };
+      setNetwork("mainnet");
+      return;
+    }
     if (!walletNetwork) return;
     setNetwork(walletNetwork);
   }, [isCustom, walletNetwork]);
 
   return (
-    <PackagesNetworkContext.Provider value={network}>
-      <div className="border-b border-border-classic">
-        <div className="container flex">
-          {Object.values(AvailableNetworks).map((net) => (
-            <TabTitle key={net} active={net === network} onClick={() => setNetwork(net as Network)}>
-              <Text variant="small/regular">{net}</Text>
-            </TabTitle>
-          ))}
+    <WalletConnectedContent>
+      <PackagesNetworkContext.Provider value={network}>
+        <div className="border-b border-border-classic">
+          <div className="container flex">
+            {Object.values(AvailableNetworks).map((net) => (
+              <TabTitle
+                key={net}
+                active={net === network}
+                onClick={() => setNetwork(net as Network)}
+              >
+                <Text variant="small/regular">{net}</Text>
+              </TabTitle>
+            ))}
+          </div>
         </div>
-      </div>
 
-      <NetworkMissmatch expectedNetwork={network} />
-      {children}
-    </PackagesNetworkContext.Provider>
+        <NetworkMissmatch expectedNetwork={network} />
+        {children}
+      </PackagesNetworkContext.Provider>
+    </WalletConnectedContent>
   );
 }
diff --git a/app/src/components/layouts/BaseLayout.tsx b/app/src/components/layouts/BaseLayout.tsx
@@ -6,7 +6,6 @@ import { getFullnodeUrl, SuiClient } from "@mysten/sui/client";
 import Header from "../Header";
 import Footer from "../Footer";
 import { LocalStorageKeys } from "@/data/localStorage";
-import { BaseContent } from "./BaseContent";
 import { Toaster } from 'sonner'
 
 export function BaseLayout({ children }: { children: React.ReactNode }) {
@@ -44,7 +43,7 @@ export function BaseLayout({ children }: { children: React.ReactNode }) {
       <div className="min-h-screen flex flex-col">
         <Toaster />
         <Header updateUseCustomAddress={updateUseCustomAddress} updateCustomAddress={updateCustomAddress} />
-        <BaseContent>{children}</BaseContent>
+        {children}
         <Footer />
       </div>
 

diff --git a/app/src/components/layouts/BaseContent.tsx → ...onents/layouts/WalletConnectedContent.tsx b/app/src/components/layouts/BaseContent.tsx → ...onents/layouts/WalletConnectedContent.tsx
@@ -5,7 +5,7 @@ import { Button } from "../ui/button";
 import Link from "next/link";
 import { Content } from "@/data/content";
 
-export function BaseContent({ children }: { children: React.ReactNode }) {
+export function WalletConnectedContent({ children }: { children: React.ReactNode }) {
   const activeAddress = useActiveAddress();
 
   if (!activeAddress) {