gui: improve responsiveness (#367)

anchor/src/react/glam.tsx

@@ -11,7 +11,7 @@ import {
 import { useQuery } from "@tanstack/react-query";
 import { atomWithStorage } from "jotai/utils";
 
-import type { StateModel } from "../models";
+import type { DelegateAcl, StateModel } from "../models";
 import { GlamClient } from "../client";
 import { useAtomValue, useSetAtom } from "jotai/react";
 import { LAMPORTS_PER_SOL, PublicKey } from "@solana/web3.js";
@@ -36,9 +36,10 @@ interface TokenPrice {
 
 interface GlamProviderContext {
   glamClient: GlamClient;
-  activeGlamState?: GlamStateCache;
   vault: Vault;
+  activeGlamState?: GlamStateCache;
   glamStatesList: GlamStateCache[];
+  delegateAcls: DelegateAcl[];
   allGlamStates: StateModel[];
   userWallet: UserWallet;
   prices: TokenPrice[];
@@ -127,6 +128,7 @@ export function GlamProvider({
   const setActiveGlamState = useSetAtom(activeGlamStateAtom);
   const setGlamStatesList = useSetAtom(glamStatesListAtom);
 
+  const [delegateAcls, setDelegateAcls] = useState([] as DelegateAcl[]);
   const [vault, setVault] = useState({} as Vault);
   const [userWallet, setUserWallet] = useState({} as UserWallet);
   const wallet = useWallet();
@@ -162,7 +164,7 @@ export function GlamProvider({
     if (activeGlamState?.pubkey && wallet?.publicKey) {
       console.log(
         "fetching vault data for active glam state:",
-        activeGlamState.pubkey.toBase58(),
+        activeGlamState.address,
       );
       const vault = glamClient.getVaultPda(activeGlamState.pubkey);
       const balances = await fetchBalances(glamClient, vault);
@@ -231,7 +233,23 @@ export function GlamProvider({
     }
 
     refreshVaultHoldings();
-  }, [allGlamStatesData, activeGlamState, wallet, cluster]);
+  }, [allGlamStatesData, wallet, cluster]);
+
+  const refreshDelegateAcls = async () => {
+    if (activeGlamState?.pubkey) {
+      console.log(
+        "fetching delegate acls for active glam state:",
+        activeGlamState.address,
+      );
+      const glamState = await glamClient.fetchState(activeGlamState?.pubkey);
+      console.log("delegate acls:", glamState.delegateAcls);
+      setDelegateAcls(glamState.delegateAcls);
+    }
+  };
+
+  useEffect(() => {
+    refreshDelegateAcls();
+  }, [activeGlamState]);
 
   //
   // Fetch token prices https://station.jup.ag/docs/apis/price-api-v2
@@ -357,9 +375,10 @@ export function GlamProvider({
 
   const value: GlamProviderContext = {
     glamClient,
-    activeGlamState,
     vault,
+    activeGlamState,
     glamStatesList: useAtomValue(glamStatesListAtom),
+    delegateAcls,
     allGlamStates,
     userWallet,
     jupTokenList,
@@ -369,6 +388,7 @@ export function GlamProvider({
     driftUser,
     refresh: async () => {
       refreshVaultHoldings();
+      refreshDelegateAcls();
     },
   };
 

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

@@ -137,7 +137,7 @@ export default function Create() {
 
   return (
     <PageContentWrapper>
-      <div className="w-4/6 self-center">
+      <div className="w-full xl:w-2/3 self-center">
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
             <div className="flex space-x-4 items-top">

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

@@ -97,46 +97,48 @@ export default function VaultPoliciesPage() {
 
   return (
     <PageContentWrapper>
-      <Form {...form}>
-        <div className="flex space-x-4 space-y-4 items-top flex-col">
-          <FormField
-            control={form.control}
-            name="assets"
-            render={({ field }) => (
-              <FormItem className="w-full">
-                <FormLabel>Vault Assets</FormLabel>
-                <FormControl>
-                  <TokenMultiSelect
-                    selected={field.value}
-                    onChange={field.onChange}
-                  />
-                </FormControl>
-                <FormDescription>
-                  Select the assets allowed in the vault.
-                </FormDescription>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          <div className="flex space-x-4">
-            <Button
-              className="w-1/2"
-              variant="ghost"
-              onClick={(event) => handleReset(event)}
-            >
-              Reset
-            </Button>
-            <Button
-              className="w-1/2"
-              type="submit"
-              loading={isTxPending}
-              onClick={(event) => handleUpdateAssets(event)}
-            >
-              Submit
-            </Button>
+      <div className="w-full xl:w-2/3 self-center">
+        <Form {...form}>
+          <div className="flex space-x-4 space-y-4 items-top flex-col ">
+            <FormField
+              control={form.control}
+              name="assets"
+              render={({ field }) => (
+                <FormItem className="w-full">
+                  <FormLabel>Vault Assets</FormLabel>
+                  <FormControl>
+                    <TokenMultiSelect
+                      selected={field.value}
+                      onChange={field.onChange}
+                    />
+                  </FormControl>
+                  <FormDescription>
+                    Select the assets allowed in the vault.
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <div className="flex space-x-4">
+              <Button
+                className="w-1/2"
+                variant="ghost"
+                onClick={(event) => handleReset(event)}
+              >
+                Reset
+              </Button>
+              <Button
+                className="w-1/2"
+                type="submit"
+                loading={isTxPending}
+                onClick={(event) => handleUpdateAssets(event)}
+              >
+                Submit
+              </Button>
+            </div>
           </div>
-        </div>
-      </Form>
+        </Form>
+      </div>
     </PageContentWrapper>
   );
 }

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

@@ -1012,7 +1012,7 @@ export default function Trade() {
   const exactMode = swapForm.watch("exactMode");
   return (
     <PageContentWrapper>
-      <div className="w-4/6 self-center">
+      <div className="w-full xl:w-2/3 self-center">
         <Tabs
           defaultValue="swap"
           className="w-full"

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

@@ -26,7 +26,7 @@ const wrapSchema = z.object({
 type WrapSchema = z.infer<typeof wrapSchema>;
 
 export default function Wrap() {
-  const { activeGlamState, vault, userWallet, glamClient } = useGlam();
+  const { activeGlamState, vault, userWallet, glamClient, refresh } = useGlam();
 
   const [amountAsset, setAmountAsset] = useState<string>("SOL");
   const [direction, setDirection] = useState<string>("wrap");
@@ -112,6 +112,8 @@ export default function Wrap() {
       });
     }
     setIsTxPending(false);
+
+    await refresh(); // refresh vault
   };
 
   const handleClear = (event: React.MouseEvent<HTMLButtonElement>) => {

playground/src/components/PageAccess.tsx

@@ -16,15 +16,15 @@ export default function PageAccess({
 }: {
   perms: "vault" | "mint" | "all";
 }) {
-  const { allGlamStates, activeGlamState } = useGlam();
+  const { delegateAcls, allGlamStates, activeGlamState, refresh } = useGlam();
   const { getLabel } = usePubkeyLabels();
 
-  const fund = (allGlamStates || []).find(
+  const state = (allGlamStates || []).find(
     (s) => s.idStr === activeGlamState?.address,
   );
 
   const data = useMemo(() => {
-    if (!fund) return [];
+    if (!state) return [];
 
     let treeDataPermissions = vaultTreeDataPermissions;
     if (perms === "mint") {
@@ -40,16 +40,16 @@ export default function PageAccess({
         (lvl1: any) => lvl1.children?.map((node: any) => node.id) || [],
       ) || [];
 
-    const owner = fund.owner?.pubkey
+    const owner = state.owner?.pubkey
       ? [
           {
-            pubkey: fund.owner.pubkey.toBase58(),
+            pubkey: state.owner.pubkey.toBase58(),
             label: "Owner",
             tags: flatPermissions,
           },
         ]
       : [];
-    const delegates = (fund.delegateAcls || []).map((acl: any) => {
+    const delegates = (delegateAcls || []).map((acl: any) => {
       const pubkey = acl.pubkey.toBase58();
       return {
         pubkey,
@@ -58,14 +58,10 @@ export default function PageAccess({
       };
     });
     return owner.concat(delegates);
-  }, [fund, getLabel]);
+  }, [state, getLabel]);
 
   const handleSuccess = useCallback(() => {
-    // Force a re-render when a key is modified
-    // This will cause getData to run again with the latest fund data
-    window.setTimeout(() => {
-      window.location.reload();
-    }, 1000);
+    refresh();
   }, []);
 
   return (

playground/src/components/access/data-table-refresh.tsx

@@ -7,16 +7,19 @@ import { Button } from "@/components/ui/button";
 
 interface DataTableRefreshProps<TData> {
   table: Table<TData>;
+  onClick?: () => Promise<void>;
 }
 
 export function DataTableRefresh<TData>({
   table,
+  onClick,
 }: DataTableRefreshProps<TData>) {
   return (
     <Button
       variant="outline"
       size="icon"
       className="ml-auto hidden h-8 lg:flex"
+      onClick={onClick}
     >
       <ReloadIcon className="h-4 w-4" />
     </Button>

playground/src/components/access/data-table-toolbar.tsx

@@ -48,7 +48,7 @@ export function DataTableToolbar<TData>({
   const [treeData, setTreeData] = useState<TreeNodeData>(treeDataPermissions);
 
   const { updateLabel } = usePubkeyLabels();
-  const { glamClient, activeGlamState } = useGlam();
+  const { glamClient, activeGlamState, refresh } = useGlam();
 
   const toggleExpandCollapse = () => {
     setIsExpanded(!isExpanded);
@@ -121,8 +121,6 @@ export function DataTableToolbar<TData>({
       setTreeData(treeDataPermissions);
       closeButtonRef.current?.click();
 
-      // Wait for blockchain confirmation and refresh
-      await new Promise((resolve) => setTimeout(resolve, 1000));
       onSuccess?.();
     } catch (e) {
       toast({
@@ -232,7 +230,7 @@ export function DataTableToolbar<TData>({
           </Button>
         )}
       </div>
-      <DataTableRefresh table={table} />
+      <DataTableRefresh onClick={refresh} table={table} />
     </div>
   );
 }

playground/src/components/access/data-table.tsx

@@ -120,7 +120,7 @@ export function DataTable<TData extends KeyData>({
     setIsExpanded(!isExpanded);
   };
 
-  const { glamClient, activeGlamState } = useGlam();
+  const { glamClient, activeGlamState, refresh } = useGlam();
 
   // Helper function to reset states
   const resetStates = () => {

playground/src/components/ui/multiple-select.tsx

@@ -51,6 +51,7 @@ function MultiSelect<T extends Option>({
   filterOption,
 }: MultiSelectProps<T>) {
   const [open, setOpen] = React.useState(false);
+  const [batchSize, setBatchSize] = React.useState(100);
   const [searchInputValue, setSearchInputValue] = React.useState("");
 
   const selectedSet = React.useMemo(() => new Set(selected), [selected]);
@@ -61,7 +62,10 @@ function MultiSelect<T extends Option>({
   );
 
   const filteredOptions = React.useMemo(() => {
-    if (!open) return [];
+    if (!open) {
+      setBatchSize(100);
+      return [];
+    }
     if (!searchInputValue) return availableOptions;
     return availableOptions.filter((option) =>
       filterOption
@@ -70,8 +74,6 @@ function MultiSelect<T extends Option>({
     );
   }, [open, availableOptions, searchInputValue, filterOption]);
 
-  const [batchSize, setBatchSize] = React.useState(100);
-
   React.useEffect(() => {
     if (batchSize < filteredOptions.length) {
       const timeout = setTimeout(() => {