feat(mfi-trading): Arena refactor with optimized fetching & better quote token support

apps/marginfi-v2-trading/src/components/common/Header/Header.tsx

@@ -11,7 +11,7 @@ import { cn } from "@mrgnlabs/mrgn-utils";
 import { USDC_MINT } from "@mrgnlabs/mrgn-common";
 import { Settings } from "@mrgnlabs/mrgn-ui";
 
-import { useTradeStore, useUiStore } from "~/store";
+import { useTradeStoreV2, useUiStore } from "~/store";
 import { useWallet } from "~/components/wallet-v2/hooks/use-wallet.hook";
 import { useIsMobile } from "~/hooks/use-is-mobile";
 import { useConnection } from "~/hooks/use-connection";
@@ -24,6 +24,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "~/comp
 
 import { CreatePoolScriptDialog } from "../Pool/CreatePoolScript";
 import { CreatePoolSoon } from "../Pool/CreatePoolSoon";
+import { CreatePoolDialog } from "../Pool/CreatePoolDialog";
 
 const navItems = [
   { label: "Discover", href: "/" },
@@ -33,16 +34,15 @@ const navItems = [
 
 export const Header = () => {
   const { connection } = useConnection();
-  const [initialized, userDataFetched, groupMap, nativeSolBalance, fetchTradeState, referralCode] = useTradeStore(
-    (state) => [
+  const [initialized, userDataFetched, nativeSolBalance, fetchTradeState, referralCode, banksByBankPk] =
+    useTradeStoreV2((state) => [
       state.initialized,
       state.userDataFetched,
-      state.groupMap,
       state.nativeSolBalance,
       state.fetchTradeState,
       state.referralCode,
-    ]
-  );
+      state.banksByBankPk,
+    ]);
   const { priorityType, broadcastType, priorityFees, maxCap, maxCapType, setTransactionSettings } = useUiStore(
     (state) => ({
       priorityType: state.priorityType,
@@ -61,19 +61,13 @@ export const Header = () => {
   const [isReferralCopied, setIsReferralCopied] = React.useState(false);
 
   const extendedBankInfos = React.useMemo(() => {
-    const groups = [...groupMap.values()];
-    const tokens = groups.map((group) => group.pool.token);
-    const usdc = groups.find((group) => group.pool.quoteTokens[0].info.rawBank.mint.equals(USDC_MINT));
-
-    if (!usdc) return tokens;
-
-    return [usdc.pool.quoteTokens[0], ...tokens];
-  }, [groupMap]);
+    return Object.values(banksByBankPk);
+  }, [banksByBankPk]);
 
-  const ownPools = React.useMemo(() => {
-    const goups = [...groupMap.values()];
-    return goups.filter((group) => group?.client.group.admin?.toBase58() === wallet?.publicKey?.toBase58());
-  }, [groupMap, wallet]);
+  // const ownPools = React.useMemo(() => {
+  //   const goups = [...groupMap.values()];
+  //   return goups.filter((group) => group?.client.group.admin?.toBase58() === wallet?.publicKey?.toBase58());
+  // }, [groupMap, wallet]);
 
   React.useEffect(() => {
     if (!initialized) return;
@@ -118,13 +112,13 @@ export const Header = () => {
           </ul>
         </nav>
         <div className={cn("flex items-center gap-2")}>
-          {ownPools.length > 0 && (
+          {/* {ownPools.length > 0 && (
             <Link href="/admin">
               <Button variant="outline" size={isMobile ? "sm" : "default"}>
                 <IconPlus size={isMobile ? 14 : 18} /> Manage pools
               </Button>
             </Link>
-          )}
+          )} */}
           {
             // eslint-disable-next-line turbo/no-undeclared-env-vars
             process.env.NEXT_PUBLIC_ENABLE_BANK_SCRIPT && (

apps/marginfi-v2-trading/src/components/common/Pool/CreatePoolDialog/CreatePoolDialog.tsx

@@ -7,21 +7,21 @@ import { IconPlus } from "@tabler/icons-react";
 import { PublicKey } from "@solana/web3.js";
 import { cn } from "@mrgnlabs/mrgn-utils";
 
-import { useTradeStore } from "~/store";
 import { useIsMobile } from "~/hooks/use-is-mobile";
 
 import {
-  CreatePoolMint,
   CreatePoolForm,
   CreatePoolSuccess,
   CreatePoolState,
+  CreatePoolToken,
 } from "~/components/common/Pool/CreatePoolDialog/";
 import { Dialog, DialogContent, DialogTrigger } from "~/components/ui/dialog";
 import { Button } from "~/components/ui/button";
 import type { TokenData } from "~/types";
 
-import type { PoolData } from "./types";
+import type { PoolData, PoolMintData } from "./types";
 import { CreatePoolLoading } from "./components/CreatePoolLoading";
+import { CreatePoolQuote } from "./components/CreatePoolQuote";
 
 type CreatePoolDialogProps = {
   trigger?: React.ReactNode;
@@ -30,62 +30,77 @@ type CreatePoolDialogProps = {
 export type SUPPORTED_QUOTE_BANKS = "USDC" | "LST";
 
 export const CreatePoolDialog = ({ trigger }: CreatePoolDialogProps) => {
-  const [resetSearchResults, searchBanks] = useTradeStore((state) => [state.resetSearchResults, state.searchBanks]);
+  // const [resetSearchResults, searchBanks] = useTradeStore((state) => [state.resetSearchResults, state.searchBanks]);
   const [isOpen, setIsOpen] = React.useState(false);
-  const [createPoolState, setCreatePoolState] = React.useState<CreatePoolState>(CreatePoolState.MINT);
+  const [createPoolState, setCreatePoolState] = React.useState<CreatePoolState>(CreatePoolState.TOKEN);
   const [isSearchingToken, setIsSearchingToken] = React.useState(false);
   const [isTokenFetchingError, setIsTokenFetchingError] = React.useState(false);
   const [searchQuery, setSearchQuery] = React.useState("");
-  const [mintAddress, setMintAddress] = React.useState("");
   const [poolData, setPoolData] = React.useState<PoolData | null>(null);
   const [quoteBank, setQuoteBank] = React.useState<SUPPORTED_QUOTE_BANKS>("USDC");
   const [isSubmitting, setIsSubmitting] = React.useState(false);
 
   const { width, height } = useWindowSize();
   const isMobile = useIsMobile();
 
-  const fetchTokenInfo = React.useCallback(async () => {
-    setIsSearchingToken(true);
-
-    try {
-      const mint = new PublicKey(mintAddress);
-      const fetchTokenReq = await fetch(`/api/birdeye/token?address=${mint.toBase58()}`);
-
-      if (!fetchTokenReq.ok) {
-        throw new Error("Failed to fetch token info");
-      }
-
-      const tokenInfo = (await fetchTokenReq.json()) as TokenData;
-      if (!tokenInfo) {
-        throw new Error("Could not find token info");
+  const fetchTokenInfo = React.useCallback(
+    async (mintAddress: string) => {
+      setIsSearchingToken(true);
+
+      try {
+        const mint = new PublicKey(mintAddress);
+        const fetchTokenReq = await fetch(`/api/birdeye/token?address=${mint.toBase58()}`);
+
+        if (!fetchTokenReq.ok) {
+          throw new Error("Failed to fetch token info");
+        }
+
+        const tokenInfo = (await fetchTokenReq.json()) as TokenData;
+        if (!tokenInfo) {
+          throw new Error("Could not find token info");
+        }
+
+        const mintData: PoolMintData = {
+          mint: new PublicKey(tokenInfo.address),
+          name: tokenInfo.name,
+          symbol: tokenInfo.symbol,
+          icon: tokenInfo.imageUrl,
+          decimals: tokenInfo.decimals,
+        };
+
+        setIsSearchingToken(false);
+        if (createPoolState === CreatePoolState.QUOTE) {
+          setPoolData((prev) => {
+            if (!prev) return null;
+            return {
+              ...prev,
+              quoteToken: mintData,
+            };
+          });
+          setCreatePoolState(CreatePoolState.FORM);
+        } else {
+          setPoolData({
+            token: mintData,
+          });
+          setCreatePoolState(CreatePoolState.QUOTE);
+        }
+      } catch (e) {
+        console.error(e);
+        setPoolData(null);
+        setIsTokenFetchingError(true);
+        setIsSearchingToken(false);
       }
+    },
+    [createPoolState]
+  );
 
-      setPoolData({
-        mint: new PublicKey(tokenInfo.address),
-        name: tokenInfo.name,
-        symbol: tokenInfo.symbol,
-        icon: tokenInfo.imageUrl,
-        decimals: tokenInfo.decimals,
-        quoteBank: "USDC",
-      });
-
-      setIsSearchingToken(false);
-      setCreatePoolState(CreatePoolState.FORM);
-    } catch (e) {
-      console.error(e);
-      setPoolData(null);
-      setIsTokenFetchingError(true);
-      setIsSearchingToken(false);
-    }
-  }, [mintAddress]);
-
-  React.useEffect(() => {
-    if (!searchQuery.length) {
-      resetSearchResults();
-      return;
-    }
-    searchBanks(searchQuery);
-  }, [searchBanks, resetSearchResults, searchQuery]);
+  // React.useEffect(() => {
+  //   if (!searchQuery.length) {
+  //     resetSearchResults();
+  //     return;
+  //   }
+  //   searchBanks(searchQuery);
+  // }, [searchBanks, resetSearchResults, searchQuery]);
 
   const reset = React.useCallback(() => {
     setIsSearchingToken(false);
@@ -97,9 +112,8 @@ export const CreatePoolDialog = ({ trigger }: CreatePoolDialogProps) => {
   React.useEffect(() => {
     reset();
     setSearchQuery("");
-    setMintAddress("");
-    setCreatePoolState(CreatePoolState.MINT);
-  }, [isOpen, reset, setSearchQuery, setMintAddress, setCreatePoolState]);
+    setCreatePoolState(CreatePoolState.TOKEN);
+  }, [isOpen, reset, setSearchQuery, setCreatePoolState]);
 
   return (
     <>
@@ -117,7 +131,7 @@ export const CreatePoolDialog = ({ trigger }: CreatePoolDialogProps) => {
       <Dialog
         open={isOpen}
         onOpenChange={(open) => {
-          if (!open) resetSearchResults();
+          // if (!open) resetSearchResults();
           setIsOpen(open);
         }}
       >
@@ -131,11 +145,17 @@ export const CreatePoolDialog = ({ trigger }: CreatePoolDialogProps) => {
           )}
         </DialogTrigger>
         <DialogContent className="w-full space-y-4 sm:max-w-4xl md:max-w-4xl z-[70]">
-          {createPoolState === CreatePoolState.MINT && (
-            <CreatePoolMint
-              mintAddress={mintAddress}
+          {createPoolState === CreatePoolState.TOKEN && (
+            <CreatePoolToken
+              isSearchingToken={isSearchingToken}
+              fetchTokenInfo={fetchTokenInfo}
+              setIsOpen={setIsOpen}
+            />
+          )}
+          {createPoolState === CreatePoolState.QUOTE && (
+            <CreatePoolQuote
+              tokenMintAddress={poolData?.token?.mint.toBase58() ?? ""}
               isSearchingToken={isSearchingToken}
-              setMintAddress={setMintAddress}
               fetchTokenInfo={fetchTokenInfo}
               setIsOpen={setIsOpen}
             />