feat: refactored the arena with new tradestore

mrgnlabs · Dec 9, 2024 · 74da9f0 · 74da9f0
1 parent 3aeeaac
commit 74da9f0
Show file tree

Hide file tree

Showing 22 changed files with 938 additions and 672 deletions.
diff --git a/apps/marginfi-v2-trading/src/components/common/Header/Header.tsx b/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";
@@ -33,16 +33,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 +60,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 +111,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 && (

diff --git a/apps/marginfi-v2-trading/src/components/common/Pool/PoolListItem.tsx b/apps/marginfi-v2-trading/src/components/common/Pool/PoolListItem.tsx
@@ -7,7 +7,7 @@ import { ExtendedBankInfo } from "@mrgnlabs/marginfi-v2-ui-state";
 import { tokenPriceFormatter, percentFormatter, usdFormatter, numeralFormatter } from "@mrgnlabs/mrgn-common";
 import { cn } from "@mrgnlabs/mrgn-utils";
 
-import { useTradeStore, useTradeStoreV2 } from "~/store";
+import { useTradeStoreV2 } from "~/store";
 
 import { Button } from "~/components/ui/button";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "~/components/ui/tooltip";

diff --git a/apps/marginfi-v2-trading/src/components/common/Pool/PoolShare.tsx b/apps/marginfi-v2-trading/src/components/common/Pool/PoolShare.tsx
@@ -18,6 +18,8 @@ import { GroupData } from "~/store/tradeStore";
 
 import { Popover, PopoverContent, PopoverTrigger } from "~/components/ui/popover";
 import { Button } from "~/components/ui/button";
+import { ArenaPoolV2 } from "~/store/tradeStoreV2";
+import { useExtendedPool } from "~/hooks/useExtendedPools";
 
 const shareLinks = [
   {
@@ -43,10 +45,11 @@ const buildShareUrl = (link: string, url: string, text: string) => {
 };
 
 type PoolShareProps = {
-  activeGroup: GroupData;
+  activePool: ArenaPoolV2;
 };
 
-export const PoolShare = ({ activeGroup }: PoolShareProps) => {
+export const PoolShare = ({ activePool }: PoolShareProps) => {
+  const extendedPool = useExtendedPool(activePool);
   const [isUrlCopied, setIsUrlCopied] = React.useState(false);
   const copyUrlRef = React.useRef<HTMLInputElement>(null);
 
@@ -61,7 +64,7 @@ export const PoolShare = ({ activeGroup }: PoolShareProps) => {
     <Popover>
       <PopoverTrigger asChild>
         <Button size="sm" variant="outline" className="mt-4">
-          <IconShare size={16} /> Share {activeGroup.pool.token.meta.tokenSymbol} pool
+          <IconShare size={16} /> Share {extendedPool.tokenBank.meta.tokenSymbol} pool
         </Button>
       </PopoverTrigger>
       <PopoverContent className="pb-2">
@@ -70,10 +73,10 @@ export const PoolShare = ({ activeGroup }: PoolShareProps) => {
             <input
               ref={copyUrlRef}
               className="appearance-none text-xs bg-background border rounded-md w-full overflow-auto px-2 py-1 select-all outline-none"
-              value={`${window.location.origin}/trade/${activeGroup.client.group.address.toBase58()}`}
+              value={`${window.location.origin}/trade/${extendedPool.groupPk.toBase58()}`}
               readOnly
             />
-            <CopyToClipboard text={`${window.location.origin}/trade/${activeGroup.client.group.address.toBase58()}`}>
+            <CopyToClipboard text={`${window.location.origin}/trade/${extendedPool.groupPk.toBase58()}`}>
               <button
                 onClick={handleCopyUrl}
                 className="cursor-pointer rounded-md p-2 transition-colors hover:bg-accent"
@@ -86,8 +89,8 @@ export const PoolShare = ({ activeGroup }: PoolShareProps) => {
             <span className="-translate-y-0.5 font-medium">Share to:</span>
             <ul className="flex items-center justify-center gap-1">
               {shareLinks.map((link, index) => {
-                const url = `${window.location.origin}/trade/${activeGroup.client.group.address.toBase58()}`;
-                const text = `Long / short ${activeGroup.pool.token.meta.tokenSymbol} with leverage in The Arena`;
+                const url = `${window.location.origin}/trade/${extendedPool.groupPk.toBase58()}`;
+                const text = `Long / short ${extendedPool.tokenBank.meta.tokenSymbol} with leverage in The Arena`;
                 return (
                   <li key={index}>
                     <Link