gui: minor improvements (#368)

anchor/src/react/glam.tsx

@@ -175,50 +175,36 @@ export function GlamProvider({
     }
   };
 
-  const { data: allGlamStatesData } = useQuery({
-    queryKey: ["/all-glam-states", activeGlamState?.pubkey],
+  const { data: glamStateModels } = useQuery({
+    queryKey: ["/all-glam-states", activeGlamState?.pubkey, cluster.network],
     queryFn: () => glamClient.fetchAllGlamStates(),
   });
   useEffect(() => {
+    if (!glamStateModels) return;
+
     if (process.env.NODE_ENV === "development") {
-      console.log(`[${cluster.network}] all glam states:`, allGlamStatesData);
+      console.log(`[${cluster.network}] all glam states:`, glamStateModels);
     }
-    const stateModels = (allGlamStatesData || []).sort(
-      (a: StateModel, b: StateModel) => {
-        if (!a.rawOpenfunds?.fundLaunchDate) {
-          return 1;
-        }
-        if (!b.rawOpenfunds?.fundLaunchDate) {
-          return -1;
-        }
-        if (a.rawOpenfunds?.fundLaunchDate > b.rawOpenfunds?.fundLaunchDate) {
-          return -1;
-        } else if (
-          a.rawOpenfunds?.fundLaunchDate < b.rawOpenfunds?.fundLaunchDate
-        ) {
-          return 1;
-        }
-        return 0;
-      },
-    );
-    setAllGlamStates(stateModels);
 
+    setAllGlamStates(glamStateModels);
+
+    // Find a list of glam states that the wallet has access to
     const glamStatesList = [] as GlamStateCache[];
-    stateModels.forEach((f: StateModel) => {
+    glamStateModels.forEach((f: StateModel) => {
       if (wallet?.publicKey?.equals(f.owner!.pubkey!)) {
         const stateCache = toStateCache(f);
         glamStatesList.push(stateCache);
       } else {
-        // Iterate over delegateAcls to find funds that the wallet has access to
         f.delegateAcls.forEach((acl: any) => {
           if (wallet?.publicKey?.equals(acl.pubkey)) {
             glamStatesList.push(toStateCache(f));
           }
         });
       }
     });
+    setGlamStatesList(glamStatesList);
+
     if (glamStatesList.length > 0) {
-      setGlamStatesList(glamStatesList);
       if (
         !activeGlamState ||
         !glamStatesList.find(
@@ -230,10 +216,12 @@ export function GlamProvider({
       ) {
         setActiveGlamState(glamStatesList[0]);
       }
+    } else {
+      setActiveGlamState({} as GlamStateCache);
     }
 
     refreshVaultHoldings();
-  }, [allGlamStatesData, wallet, cluster]);
+  }, [glamStateModels, wallet, cluster]);
 
   const refreshDelegateAcls = async () => {
     if (activeGlamState?.pubkey) {

playground/src/app/(mint)/mint/page.tsx

@@ -7,6 +7,8 @@ export default function MintsHome() {
   const { activeGlamState, userWallet } = useGlam();
 
   redirect(
-    activeGlamState && userWallet.pubkey ? "/mint/supply" : "/mint/create",
+    userWallet.pubkey && activeGlamState?.pubkey
+      ? "/mint/supply"
+      : "/mint/create",
   );
 }

playground/src/app/(shared)/settings/page.tsx

@@ -296,10 +296,6 @@ const SettingsPage: React.FC = () => {
         title: "RPC endpoint changed",
         description: `Active RPC endpoint set to ${selectedEndpoint.label}`,
       });
-      // Reload the page to force refreshing account menu
-      window.setTimeout(() => {
-        window.location.reload();
-      }, 1000);
     }
   };
 

playground/src/app/(vault)/vault/create/page.tsx

@@ -109,8 +109,9 @@ export default function Create() {
         name: values.productName,
         product: "Vault",
       });
+
       // Navigate using Next.js router
-      router.push("/vault/access");
+      router.push("/vault/holdings");
     } catch (error) {
       toast({
         title: "Error",

playground/src/app/(vault)/vault/holdings/page.tsx

@@ -44,6 +44,7 @@ export default function Holdings() {
     jupTokenList,
     prices,
     glamClient,
+    refresh,
   } = useGlam();
 
   const [showZeroBalances, setShowZeroBalances] = useState(true);
@@ -54,6 +55,10 @@ export default function Holdings() {
   const openSheet = () => setIsSheetOpen(true);
   const closeSheet = () => setIsSheetOpen(false);
 
+  useEffect(() => {
+    isSheetOpen || refresh();
+  }, [isSheetOpen]);
+
   const createSkeletonHolding = (): Holding => ({
     name: "",
     symbol: "",

playground/src/app/(vault)/vault/page.tsx

@@ -9,6 +9,8 @@ export default function VaultsHome() {
   const wallet = useWallet();
 
   redirect(
-    wallet.connected && activeGlamState ? "/vault/holdings" : "/vault/create",
+    wallet.connected && activeGlamState?.pubkey
+      ? "/vault/holdings"
+      : "/vault/create",
   );
 }

playground/src/components/PageIntegrations.tsx

@@ -17,7 +17,8 @@ import { useGlam, IntegrationName } from "@glam/anchor/react";
 
 export default function PageIntegrations() {
   const { glamClient, allGlamStates, activeGlamState } = useGlam();
-  const [selected, setSelected] = useState(0);
+  const [selected, setSelected] = useState(-1);
+  const [integrations, setIntegrations] = useState(allIntegrations);
 
   const toggleIntegration = useCallback(
     async (integ: Integration) => {
@@ -62,19 +63,27 @@ export default function PageIntegrations() {
           activeGlamState.pubkey,
           updated,
         );
+
+        setIntegrations((prevIntegrations) =>
+          prevIntegrations.map((integration) =>
+            integration.id === integ.id
+              ? { ...integration, enabled: !integration.enabled }
+              : integration,
+          ),
+        );
+
         toast({
           title: `Successfully ${action}d integration ${integration}`,
           description: <ExplorerLink path={`tx/${txSig}`} label={txSig} />,
         });
-
-        allIntegrations[integ.id].enabled = !integ.enabled;
       } catch (error) {
         toast({
           title: `Error enabling integration ${integration}`,
           description: parseTxError(error),
           variant: "destructive",
         });
       }
+      setSelected(-1);
     },
     [activeGlamState, glamClient, allGlamStates],
   );
@@ -87,9 +96,9 @@ export default function PageIntegrations() {
           Object.keys(acl.name)[0].toLowerCase(),
         ) || [];
 
-    allIntegrations.forEach((integ, index) => {
+    integrations.forEach((integ, index) => {
       if (enabled.includes(integ.name.toLowerCase())) {
-        allIntegrations[index].enabled = true;
+        integrations[index].enabled = true;
       }
     });
   }, [allGlamStates, activeGlamState]);
@@ -109,14 +118,14 @@ export default function PageIntegrations() {
           </div>
           <TabsContent value="all">
             <IntegrationsList
-              items={allIntegrations}
+              items={integrations}
               selected={selected}
               onSelect={toggleIntegration}
             />
           </TabsContent>
           <TabsContent value="active">
             <IntegrationsList
-              items={allIntegrations.filter((integ) => integ.enabled)}
+              items={integrations.filter((integ) => integ.enabled)}
               selected={selected}
               onSelect={toggleIntegration}
             />