fix: improved store refreshing for all actionboxes

mrgnlabs · Dec 16, 2024 · 7b8d1f3 · 7b8d1f3
1 parent d6d9255
commit 7b8d1f3
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 87 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
@@ -34,15 +34,16 @@ const navItems = [
 
 export const Header = () => {
   const { connection } = useConnection();
-  const [initialized, userDataFetched, nativeSolBalance, fetchTradeState, referralCode, banksByBankPk] =
-    useTradeStoreV2((state) => [
+  const [initialized, userDataFetched, nativeSolBalance, fetchUserData, referralCode, banksByBankPk] = useTradeStoreV2(
+    (state) => [
       state.initialized,
       state.userDataFetched,
       state.nativeSolBalance,
-      state.fetchTradeState,
+      state.fetchUserData,
       state.referralCode,
       state.banksByBankPk,
-    ]);
+    ]
+  );
   const { priorityType, broadcastType, priorityFees, maxCap, maxCapType, setTransactionSettings } = useUiStore(
     (state) => ({
       priorityType: state.priorityType,
@@ -169,7 +170,7 @@ export const Header = () => {
               extendedBankInfos={extendedBankInfos}
               nativeSolBalance={nativeSolBalance}
               refreshState={() =>
-                fetchTradeState({
+                fetchUserData({
                   connection,
                   wallet,
                 })

diff --git a/apps/marginfi-v2-trading/src/components/common/Portfolio/PositionActionButtons.tsx b/apps/marginfi-v2-trading/src/components/common/Portfolio/PositionActionButtons.tsx
@@ -54,8 +54,7 @@ export const PositionActionButtons = ({
   const [multiStepToast, setMultiStepToast] = React.useState<MultiStepToastHandle | null>(null);
   const [isClosing, setIsClosing] = React.useState(false);
 
-  const [fetchTradeState, refreshGroup, setIsRefreshingStore, nativeSolBalance] = useTradeStoreV2((state) => [
-    state.fetchTradeState,
+  const [refreshGroup, setIsRefreshingStore, nativeSolBalance] = useTradeStoreV2((state) => [
     state.refreshGroup,
     state.setIsRefreshingStore,
     state.nativeSolBalance,
@@ -283,9 +282,11 @@ export const PositionActionButtons = ({
                 });
               },
               onComplete: () => {
-                fetchTradeState({
+                refreshGroup({
                   connection,
                   wallet,
+                  groupPk: arenaPool.groupPk,
+                  banks: [arenaPool.tokenBank.address, arenaPool.quoteBank.address],
                 });
               },
             }}
@@ -326,9 +327,11 @@ export const PositionActionButtons = ({
                 });
               },
               onComplete: () => {
-                fetchTradeState({
+                refreshGroup({
                   connection,
                   wallet,
+                  groupPk: arenaPool.groupPk,
+                  banks: [arenaPool.tokenBank.address, arenaPool.quoteBank.address],
                 });
               },
             }}

diff --git a/apps/marginfi-v2-trading/src/components/common/Swap/Swap.tsx b/apps/marginfi-v2-trading/src/components/common/Swap/Swap.tsx
@@ -22,7 +22,7 @@ export const Swap = ({ onLoad, initialInputMint }: SwapProps) => {
   const { walletContextState, wallet } = useWallet();
   const { connection } = useConnection();
   const [loadTimestamp, setLoadTimestamp] = React.useState(0);
-  const [fetchTradeState] = useTradeStoreV2((state) => [state.fetchTradeState]);
+  const [fetchUserData] = useTradeStoreV2((state) => [state.fetchUserData]);
   const router = useRouter();
 
   const initialMint = React.useMemo(() => {
@@ -46,7 +46,7 @@ export const Swap = ({ onLoad, initialInputMint }: SwapProps) => {
       endpoint: config.rpcEndpoint,
       passThroughWallet: walletContextState.wallet,
       onSuccess: ({ txid }: { txid: string }) => {
-        fetchTradeState({
+        fetchUserData({
           connection,
           wallet,
         });
@@ -69,7 +69,16 @@ export const Swap = ({ onLoad, initialInputMint }: SwapProps) => {
     setTimeout(() => {
       onLoad && onLoad();
     }, delay);
-  }, [initialInputMint, loadTimestamp, onLoad, walletContextState.wallet, initialMint]);
+  }, [
+    walletContextState.wallet,
+    initialInputMint,
+    initialMint,
+    loadTimestamp,
+    fetchUserData,
+    connection,
+    wallet,
+    onLoad,
+  ]);
 
   React.useEffect(() => {
     if (!initialInputMint) {

diff --git a/apps/marginfi-v2-trading/src/components/common/Yield/YieldRow.tsx b/apps/marginfi-v2-trading/src/components/common/Yield/YieldRow.tsx
@@ -28,10 +28,7 @@ interface props {
 export const YieldRow = ({ pool }: props) => {
   const { connection } = useConnection();
   const { connected, wallet } = useWallet();
-  const [nativeSolBalance, fetchTradeState] = useTradeStoreV2((state) => [
-    state.nativeSolBalance,
-    state.fetchTradeState,
-  ]);
+  const [nativeSolBalance, refreshStore] = useTradeStoreV2((state) => [state.nativeSolBalance, state.refreshGroup]);
 
   return (
     <div key={pool.groupPk.toBase58()} className="relative bg-background border rounded-xl mb-12 pt-5 pb-2 px-4">
@@ -72,7 +69,14 @@ export const YieldRow = ({ pool }: props) => {
         connection={connection}
         wallet={wallet}
         nativeSolBalance={nativeSolBalance}
-        fetchTradeState={fetchTradeState}
+        refreshStore={() =>
+          refreshStore({
+            connection,
+            wallet,
+            groupPk: pool.groupPk,
+            banks: [pool.tokenBank.address, pool.quoteBank.address],
+          })
+        }
       />
 
       <YieldItem
@@ -83,7 +87,14 @@ export const YieldRow = ({ pool }: props) => {
         connection={connection}
         wallet={wallet}
         nativeSolBalance={nativeSolBalance}
-        fetchTradeState={fetchTradeState}
+        refreshStore={() =>
+          refreshStore({
+            connection,
+            wallet,
+            groupPk: pool.groupPk,
+            banks: [pool.tokenBank.address, pool.quoteBank.address],
+          })
+        }
       />
     </div>
   );
@@ -97,7 +108,7 @@ const YieldItem = ({
   connection,
   wallet,
   nativeSolBalance,
-  fetchTradeState,
+  refreshStore,
 }: {
   pool: ArenaPoolV2Extended;
   bankType: "COLLATERAL" | "TOKEN";
@@ -106,7 +117,7 @@ const YieldItem = ({
   connection: Connection;
   wallet: Wallet;
   nativeSolBalance: number;
-  fetchTradeState: (args: { connection: Connection; wallet: Wallet }) => void;
+  refreshStore: () => void;
 }) => {
   const { marginfiClient, wrappedAccount, accountSummary } = useActionBoxProps(pool.groupPk, [
     pool.tokenBank,
@@ -195,10 +206,7 @@ const YieldItem = ({
                       });
                     },
                     onComplete: () => {
-                      fetchTradeState({
-                        connection,
-                        wallet,
-                      });
+                      refreshStore();
                     },
                   }}
                   dialogProps={{
@@ -256,10 +264,7 @@ const YieldItem = ({
                     });
                   },
                   onComplete: () => {
-                    fetchTradeState({
-                      connection,
-                      wallet,
-                    });
+                    refreshStore();
                   },
                 }}
                 dialogProps={{

diff --git a/...-v2-trading/src/components/common/trade-box-v2/components/info-messages/info-messages.tsx b/...-v2-trading/src/components/common/trade-box-v2/components/info-messages/info-messages.tsx
@@ -15,15 +15,7 @@ interface InfoMessagesProps {
   isActiveWithCollat: boolean;
   actionMethods: ActionMessageType[];
   setIsWalletOpen: (value: boolean) => void;
-  fetchTradeState: ({
-    connection,
-    wallet,
-    refresh,
-  }: {
-    connection?: Connection;
-    wallet?: Wallet;
-    refresh?: boolean;
-  }) => Promise<void>;
+  refreshStore: () => Promise<void>;
   refreshSimulation: () => void;
   connection: any;
   wallet: any;
@@ -37,7 +29,7 @@ export const InfoMessages = ({
   isActiveWithCollat,
   actionMethods = [],
   setIsWalletOpen,
-  fetchTradeState,
+  refreshStore,
   connection,
   wallet,
   refreshSimulation,
@@ -143,7 +135,7 @@ export const InfoMessages = ({
                       requestedBank: actionMethod.action.bank,
                       showAvailableCollateral: false,
                       captureEvent: () => console.log("Position added"),
-                      onComplete: () => fetchTradeState({ connection, wallet }),
+                      onComplete: () => refreshStore(),
                     }}
                     dialogProps={{
                       trigger: (
@@ -174,7 +166,7 @@ export const InfoMessages = ({
         requestedBank: activePool.quoteBank,
         showAvailableCollateral: false,
         captureEvent: () => console.log("Deposit Collateral"),
-        onComplete: () => fetchTradeState({ connection, wallet }),
+        onComplete: () => refreshStore(),
       }}
       dialogProps={{
         trigger: <Button className="w-full">Deposit Collateral</Button>,

diff --git a/apps/marginfi-v2-trading/src/components/common/trade-box-v2/trade-box.tsx b/apps/marginfi-v2-trading/src/components/common/trade-box-v2/trade-box.tsx
@@ -110,8 +110,7 @@ export const TradeBoxV2 = ({ activePool, side = "long" }: TradeBoxV2Props) => {
     state.setPreviousTxn,
   ]);
   const [setIsWalletOpen] = useWalletStore((state) => [state.setIsWalletOpen]);
-  const [fetchTradeState, nativeSolBalance, setIsRefreshingStore, refreshGroup] = useTradeStoreV2((state) => [
-    state.fetchTradeState,
+  const [nativeSolBalance, setIsRefreshingStore, refreshGroup] = useTradeStoreV2((state) => [
     state.nativeSolBalance,
     state.setIsRefreshingStore,
     state.refreshGroup,
@@ -474,7 +473,14 @@ export const TradeBoxV2 = ({ activePool, side = "long" }: TradeBoxV2Props) => {
               isActiveWithCollat={isActiveWithCollat}
               actionMethods={actionMethods}
               setIsWalletOpen={setIsWalletOpen}
-              fetchTradeState={fetchTradeState}
+              refreshStore={() =>
+                refreshGroup({
+                  connection,
+                  wallet,
+                  groupPk: activePoolExtended.groupPk,
+                  banks: [activePoolExtended.tokenBank.address, activePoolExtended.quoteBank.address],
+                })
+              }
               connection={connection}
               wallet={wallet}
               refreshSimulation={refreshSimulation}

diff --git a/apps/marginfi-v2-trading/src/store/tradeStoreV2.ts b/apps/marginfi-v2-trading/src/store/tradeStoreV2.ts
@@ -2,33 +2,18 @@ import { create, StateCreator } from "zustand";
 import { AddressLookupTableAccount, Connection, PublicKey, RpcResponseAndContext } from "@solana/web3.js";
 import { AnchorProvider, Program } from "@coral-xyz/anchor";
 import Fuse, { FuseResult } from "fuse.js";
-import {
-  ExtendedBankInfo,
-  makeExtendedBankInfo,
-  fetchTokenAccounts,
-  TokenAccountMap,
-  TokenAccount,
-} from "@mrgnlabs/marginfi-v2-ui-state";
+import { TokenAccountMap } from "@mrgnlabs/marginfi-v2-ui-state";
 import {
   getConfig,
-  Bank,
   OraclePrice,
   MARGINFI_IDL,
   MarginfiIdlType,
   MarginfiProgram,
-  BankRaw,
   MarginfiGroup,
   MarginfiAccount,
   MintDataMap,
-  MintData,
 } from "@mrgnlabs/marginfi-client-v2";
-import {
-  Wallet,
-  TokenMetadata,
-  getValueInsensitive,
-  BankMetadata,
-  chunkedGetRawMultipleAccountInfoOrdered,
-} from "@mrgnlabs/mrgn-common";
+import { Wallet, chunkedGetRawMultipleAccountInfoOrdered } from "@mrgnlabs/mrgn-common";
 
 import { POOLS_PER_PAGE } from "~/config/trade";
 import { TokenData } from "~/types";
@@ -45,10 +30,6 @@ import {
 import { PositionData } from "@mrgnlabs/mrgn-utils";
 import { ArenaBank, ArenaPoolSummary, ArenaPoolV2, BankData } from "~/types/trade-store.types";
 
-type TradeGroupsCache = {
-  [group: string]: [string, string];
-};
-
 export enum TradePoolFilterStates {
   TIMESTAMP = "timestamp",
   PRICE_MOVEMENT_ASC = "price-movement-asc",
@@ -61,18 +42,6 @@ export enum TradePoolFilterStates {
   APY_DESC = "apy-desc",
 }
 
-// export type TokenData = {
-//   price: number;
-//   priceChange24hr: number;
-//   volume24hr: number;
-//   volumeChange24hr: number;
-//   marketCap: number;
-// };
-
-// new types
-
-// api calls
-
 type TradeStoreV2State = {
   // keep track of store state
   initialized: boolean;
@@ -135,15 +104,6 @@ type TradeStoreV2State = {
   }) => Promise<void>;
 
   // fetch groups / banks
-  fetchTradeState: ({
-    connection,
-    wallet,
-    refresh,
-  }: {
-    connection?: Connection;
-    wallet?: Wallet;
-    refresh?: boolean;
-  }) => Promise<void>;
   fetchUserData: ({ connection, wallet }: { connection?: Connection; wallet?: Wallet }) => Promise<void>;
   refreshGroup: ({
     groupPk,
@@ -538,8 +498,6 @@ const stateCreator: StateCreator<TradeStoreV2State, [], []> = (set, get) => ({
     });
   },
 
-  fetchTradeState: async (args) => {},
-
   refreshGroup: async (args) => {
     const connection = args.connection || get().connection;
     const wallet = args.wallet || get().wallet;