feat: updated admin page with new tradestore

mrgnlabs · Dec 9, 2024 · 4c5d6a2 · 4c5d6a2
1 parent 74da9f0
commit 4c5d6a2
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 30 deletions.
diff --git a/apps/marginfi-v2-trading/src/components/common/admin/admin-pool-card/admin-pool-card.tsx b/apps/marginfi-v2-trading/src/components/common/admin/admin-pool-card/admin-pool-card.tsx
@@ -6,74 +6,74 @@ import Link from "next/link";
 import { numeralFormatter, tokenPriceFormatter, percentFormatter, shortenAddress } from "@mrgnlabs/mrgn-common";
 import { cn } from "@mrgnlabs/mrgn-utils";
 
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "~/components/ui/tooltip";
-import type { GroupData } from "~/store/tradeStore";
 import { Button } from "~/components/ui/button";
 import { IconExternalLink } from "@tabler/icons-react";
+import { ArenaPoolV2 } from "~/store/tradeStoreV2";
+import { useExtendedPool } from "~/hooks/useExtendedPools";
 
 type AdminPoolCardProps = {
-  groupData: GroupData;
+  pool: ArenaPoolV2;
   last?: boolean;
 };
 
-export const AdminPoolCard = ({ groupData, last }: AdminPoolCardProps) => {
+export const AdminPoolCard = ({ pool, last }: AdminPoolCardProps) => {
+  const extendedPool = useExtendedPool(pool);
   return (
     <div className={cn("grid grid-cols-7 py-2 w-full items-center", !last && "border-b pb-3 mb-2")}>
       <div className="flex items-center gap-2">
         <Image
-          src={groupData.pool.token.meta.tokenLogoUri}
-          alt={groupData.pool.token.meta.tokenSymbol}
+          src={extendedPool.tokenBank.meta.tokenLogoUri}
+          alt={extendedPool.tokenBank.meta.tokenSymbol}
           width={32}
           height={32}
           className="rounded-full bg-background"
         />
-        <h2>{groupData.pool.token.meta.tokenSymbol}</h2>
+        <h2>{extendedPool.tokenBank.meta.tokenSymbol}</h2>
       </div>
-      {groupData.pool.token.tokenData && (
+      {extendedPool.tokenBank.tokenData && (
         <>
           <div>
-            {tokenPriceFormatter(groupData.pool.token.info.oraclePrice.priceRealtime.price.toNumber())}{" "}
+            {tokenPriceFormatter(extendedPool.tokenBank.info.oraclePrice.priceRealtime.price.toNumber())}{" "}
             <span
               className={cn(
                 "text-xs ml-2",
-                groupData.pool.token.tokenData.priceChange24hr > 0 ? "text-mrgn-success" : "text-mrgn-error"
+                extendedPool.tokenBank.tokenData.priceChange24hr > 0 ? "text-mrgn-success" : "text-mrgn-error"
               )}
             >
-              {groupData.pool.token.tokenData.priceChange24hr > 0 && "+"}
-              {percentFormatter.format(groupData.pool.token.tokenData.priceChange24hr / 100)}
+              {extendedPool.tokenBank.tokenData.priceChange24hr > 0 && "+"}
+              {percentFormatter.format(extendedPool.tokenBank.tokenData.priceChange24hr / 100)}
             </span>
           </div>
           <div>
-            ${numeralFormatter(groupData.pool.token.tokenData.volume24hr)}
-            {groupData.pool.token.tokenData.volumeChange24hr && (
+            ${numeralFormatter(extendedPool.tokenBank.tokenData.volume24hr)}
+            {extendedPool.tokenBank.tokenData.volumeChange24hr && (
               <span
                 className={cn(
                   "text-xs ml-2",
-                  groupData.pool.token.tokenData.volumeChange24hr > 0 ? "text-mrgn-success" : "text-mrgn-error"
+                  extendedPool.tokenBank.tokenData.volumeChange24hr > 0 ? "text-mrgn-success" : "text-mrgn-error"
                 )}
               >
-                {groupData.pool.token.tokenData.volumeChange24hr > 0 && "+"}
-                {percentFormatter.format(groupData.pool.token.tokenData.volumeChange24hr / 100)}
+                {extendedPool.tokenBank.tokenData.volumeChange24hr > 0 && "+"}
+                {percentFormatter.format(extendedPool.tokenBank.tokenData.volumeChange24hr / 100)}
               </span>
             )}
           </div>
-          <div>${numeralFormatter(groupData.pool.token.tokenData.marketCap)}</div>
-          <div>{groupData.pool.poolData && `$${numeralFormatter(groupData.pool.poolData.totalLiquidity)}`}</div>
+          <div>${numeralFormatter(extendedPool.tokenBank.tokenData.marketCap)}</div>
+          {/* <div>{extendedPool.poolData && `$${numeralFormatter(extendedPool.poolData.totalLiquidity)}`}</div> */}
         </>
       )}
       <div className="pl-5">
         <Link
-          href={`https://solscan.io/account/${groupData.client.group.admin}`}
+          href={`https://solscan.io/account/${pool.groupPk.toBase58()}`}
           className="flex items-center gap-1.5"
           target="_blank"
           rel="noopener noreferrer"
         >
-          {shortenAddress(groupData.client.group.admin || "")}{" "}
-          <IconExternalLink size={15} className="-translate-y-[1px]" />
+          {shortenAddress(pool.groupPk.toBase58() || "")} <IconExternalLink size={15} className="-translate-y-[1px]" />
         </Link>
       </div>
       <div className="flex items-center gap-2 justify-end">
-        <Link href={`/admin/${groupData.client.group.address.toBase58()}`} className="w-full">
+        <Link href={`/admin/${pool.groupPk.toBase58()}`} className="w-full">
           <Button variant="default" className="w-full">
             Details
           </Button>

diff --git a/apps/marginfi-v2-trading/src/pages/admin/index.tsx b/apps/marginfi-v2-trading/src/pages/admin/index.tsx
@@ -1,18 +1,26 @@
 import React from "react";
 
-import { useTradeStore } from "~/store";
+import { useTradeStore, useTradeStoreV2 } from "~/store";
 import { useWallet } from "~/components/wallet-v2/hooks/use-wallet.hook";
 import { Loader } from "~/components/common/Loader";
 import { AdminPoolCard } from "~/components/common/admin";
+import { useExtendedPools } from "~/hooks/useExtendedPools";
 
 export default function AdminPage() {
-  const [initialized, groupMap] = useTradeStore((state) => [state.initialized, state.groupMap]);
+  const [initialized, arenaPools, groupsByGroupPk] = useTradeStoreV2((state) => [
+    state.initialized,
+    state.arenaPools,
+    state.groupsByGroupPk,
+  ]);
+
   const { wallet } = useWallet();
 
   const ownPools = React.useMemo(() => {
-    const goups = [...groupMap.values()];
-    return goups.filter((group) => group.client.group.admin.toBase58() === wallet.publicKey?.toBase58());
-  }, [groupMap, wallet]);
+    const pools = Object.values(arenaPools);
+    return pools.filter(
+      (pool) => groupsByGroupPk[pool.groupPk.toBase58()]?.admin.toBase58() === wallet.publicKey?.toBase58()
+    );
+  }, [arenaPools, groupsByGroupPk, wallet]);
 
   return (
     <>
@@ -32,8 +40,8 @@ export default function AdminPage() {
                 <div />
               </div>
               <div className="bg-background border rounded-xl px-4 py-1">
-                {ownPools.map((group, i) => (
-                  <AdminPoolCard key={i} groupData={group} last={i === ownPools.length - 1} />
+                {ownPools.map((pool, i) => (
+                  <AdminPoolCard key={i} pool={pool} last={i === ownPools.length - 1} />
                 ))}
               </div>
             </div>