fix(mfi-v2-ui): mrgnlend state not updating after actionbox transactions

apps/marginfi-v2-ui/src/components/common/Announcements/Announcements.tsx

@@ -9,6 +9,7 @@ import { ActionBox } from "@mrgnlabs/mrgn-ui";
 import { capture, LendingModes, cn } from "@mrgnlabs/mrgn-utils";
 import { ExtendedBankInfo, ActionType } from "@mrgnlabs/marginfi-v2-ui-state";
 
+import { useMrgnlendStore } from "~/store";
 import { useWallet } from "~/components/wallet-v2/hooks/use-wallet.hook";
 
 import "swiper/css";
@@ -71,6 +72,7 @@ const Pagination = ({ itemsLength }: PaginationProps) => {
 };
 
 export const Announcements = ({ items }: AnnouncementsProps) => {
+  const [fetchMrgnlendState] = useMrgnlendStore((state) => [state.fetchMrgnlendState]);
   const { connected } = useWallet();
   const [requestedAction, setRequestedAction] = React.useState<ActionType>();
   const [requestedBank, setRequestedBank] = React.useState<ExtendedBankInfo | null>(null);
@@ -113,6 +115,9 @@ export const Announcements = ({ items }: AnnouncementsProps) => {
                       captureEvent: (event, properties) => {
                         capture(event, properties);
                       },
+                      onComplete: () => {
+                        fetchMrgnlendState();
+                      },
                     }}
                     dialogProps={{
                       trigger: (

apps/marginfi-v2-ui/src/components/common/AssetList/NewAssetBanner.tsx

@@ -8,12 +8,14 @@ import { capture } from "@mrgnlabs/mrgn-utils";
 import { ActionType, ExtendedBankInfo } from "@mrgnlabs/marginfi-v2-ui-state";
 
 import { Button } from "~/components/ui/button";
+import { useMrgnlendStore } from "~/store";
 
 type NewAssetBannerProps = {
   bankInfo: ExtendedBankInfo;
 };
 
 export const NewAssetBanner = ({ bankInfo }: NewAssetBannerProps) => {
+  const [fetchMrgnlendState] = useMrgnlendStore((state) => [state.fetchMrgnlendState]);
   const { connected } = useWallet();
   const [isBannerVisible, setIsBannerVisible] = React.useState(false);
 
@@ -50,6 +52,9 @@ export const NewAssetBanner = ({ bankInfo }: NewAssetBannerProps) => {
                   captureEvent: (event, properties) => {
                     capture(event, properties);
                   },
+                  onComplete: () => {
+                    fetchMrgnlendState();
+                  },
                 }}
                 dialogProps={{
                   title: `Deposit ${bankInfo.meta.tokenSymbol}`,
@@ -72,6 +77,9 @@ export const NewAssetBanner = ({ bankInfo }: NewAssetBannerProps) => {
                   captureEvent: (event, properties) => {
                     capture(event, properties);
                   },
+                  onComplete: () => {
+                    fetchMrgnlendState();
+                  },
                 }}
                 dialogProps={{
                   title: `Deposit ${bankInfo.meta.tokenSymbol}`,

apps/marginfi-v2-ui/src/components/common/Mint/BankIntegrationCard.tsx

@@ -10,6 +10,7 @@ import { Button } from "~/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
 import { IconMrgn } from "~/components/ui/icons";
 import { Skeleton } from "~/components/ui/skeleton";
+import { useMrgnlendStore } from "~/store";
 
 interface IntegrationCardProps {
   bank: ExtendedBankInfo;
@@ -18,6 +19,7 @@ interface IntegrationCardProps {
 
 export const BankIntegrationCard = ({ bank, isInLendingMode }: IntegrationCardProps) => {
   const { connected } = useWallet();
+  const [fetchMrgnlendState] = useMrgnlendStore((state) => [state.fetchMrgnlendState]);
   const depositData = React.useMemo(() => getDepositsData(bank, isInLendingMode, true), [bank, isInLendingMode]);
   const rateData = React.useMemo(() => getRateData(bank, isInLendingMode), [bank, isInLendingMode]);
 
@@ -65,6 +67,9 @@ export const BankIntegrationCard = ({ bank, isInLendingMode }: IntegrationCardPr
             connected: connected,
             requestedLendType: isInLendingMode ? ActionType.Deposit : ActionType.Borrow,
             requestedBank: bank,
+            onComplete: () => {
+              fetchMrgnlendState();
+            },
           }}
           dialogProps={{
             title: `${isInLendingMode ? "Deposit" : "Borrow"} ${bank.meta.tokenSymbol}`,

apps/marginfi-v2-ui/src/components/common/Portfolio/LendingPortfolio/LendingPortfolio.tsx

@@ -6,8 +6,8 @@ import { IconInfoCircle } from "@tabler/icons-react";
 
 import { numeralFormatter } from "@mrgnlabs/mrgn-common";
 import { usdFormatter, usdFormatterDyn } from "@mrgnlabs/mrgn-common";
-import { ActiveBankInfo, ActionType } from "@mrgnlabs/marginfi-v2-ui-state";
-import { borrow, LendingModes } from "@mrgnlabs/mrgn-utils";
+import { ActiveBankInfo } from "@mrgnlabs/marginfi-v2-ui-state";
+import { LendingModes } from "@mrgnlabs/mrgn-utils";
 
 import { useMrgnlendStore, useUiStore, useUserProfileStore } from "~/store";
 
@@ -99,6 +99,17 @@ export const LendingPortfolio = () => {
     }
   }, [accountSummary.healthFactor]);
 
+  const isLoading = React.useMemo(
+    () =>
+      (!isStoreInitialized ||
+        walletConnectionDelay ||
+        isRefreshingStore ||
+        (!isStoreInitialized && accountSummary.balance === 0)) &&
+      !lendingBanks.length &&
+      !borrowingBanks.length,
+    [isStoreInitialized, walletConnectionDelay, isRefreshingStore, accountSummary.balance, lendingBanks, borrowingBanks]
+  );
+
   // Introduced this useEffect to show the loader for 2 seconds after wallet connection. This is to avoid the flickering of the loader, since the isRefreshingStore isnt set immediately after the wallet connection.
   useEffect(() => {
     if (connected) {
@@ -115,14 +126,7 @@ export const LendingPortfolio = () => {
     return <WalletButton />;
   }
 
-  if (
-    (!isStoreInitialized ||
-      walletConnectionDelay ||
-      isRefreshingStore ||
-      (!isStoreInitialized && accountSummary.balance === 0)) &&
-    !lendingBanks.length &&
-    !borrowingBanks.length
-  ) {
+  if (isLoading) {
     return <Loader label={connected ? "Loading positions" : "Loading"} />;
   }
 

apps/marginfi-v2-ui/src/components/common/Portfolio/PortfolioAssetCard.tsx

@@ -15,7 +15,7 @@ import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "~/
 import { Button } from "~/components/ui/button";
 import { Skeleton } from "~/components/ui/skeleton";
 import { useWallet } from "~/components/wallet-v2/hooks/use-wallet.hook";
-import { useUiStore } from "~/store";
+import { useMrgnlendStore, useUiStore } from "~/store";
 
 interface PortfolioAssetCardProps {
   bank: ActiveBankInfo;
@@ -168,6 +168,7 @@ const PortfolioAction = ({
 }) => {
   const { walletContextState, connected } = useWallet();
   const [setIsWalletAuthDialogOpen] = useUiStore((state) => [state.setIsWalletAuthDialogOpen]);
+  const [fetchMrgnlendState] = useMrgnlendStore((state) => [state.fetchMrgnlendState]);
   const isDust = React.useMemo(() => requestedBank?.isActive && requestedBank?.position.isDust, [requestedBank]);
 
   const buttonText = React.useMemo(() => {
@@ -197,6 +198,9 @@ const PortfolioAction = ({
           captureEvent: (event, properties) => {
             capture(event, properties);
           },
+          onComplete: () => {
+            fetchMrgnlendState();
+          },
           onConnect: () => setIsWalletAuthDialogOpen(true),
         }}
         isDialog={true}
@@ -221,6 +225,9 @@ const PortfolioAction = ({
           captureEvent: (event, properties) => {
             capture(event, properties);
           },
+          onComplete: () => {
+            fetchMrgnlendState();
+          },
           onConnect: () => setIsWalletAuthDialogOpen(true),
         }}
         isDialog={true}

apps/marginfi-v2-ui/src/components/desktop/AssetList/AssetList.tsx

@@ -27,12 +27,14 @@ import { AssetRow } from "./components";
 import { useWallet } from "~/components/wallet-v2/hooks/use-wallet.hook";
 
 export const AssetsList = () => {
-  const [isStoreInitialized, extendedBankInfos, nativeSolBalance, selectedAccount] = useMrgnlendStore((state) => [
-    state.initialized,
-    state.extendedBankInfos,
-    state.nativeSolBalance,
-    state.selectedAccount,
-  ]);
+  const [isStoreInitialized, extendedBankInfos, nativeSolBalance, selectedAccount, fetchMrgnlendState] =
+    useMrgnlendStore((state) => [
+      state.initialized,
+      state.extendedBankInfos,
+      state.nativeSolBalance,
+      state.selectedAccount,
+      state.fetchMrgnlendState,
+    ]);
   const [denominationUSD, setShowBadges] = useUserProfileStore((state) => [state.denominationUSD, state.setShowBadges]);
   const [poolFilter, isFilteredUserPositions, sortOption, lendingMode, setLendingMode] = useUiStore((state) => [
     state.poolFilter,
@@ -166,9 +168,19 @@ export const AssetsList = () => {
       nativeSolBalance,
       selectedAccount,
       connected,
-      walletContextState
+      walletContextState,
+      fetchMrgnlendState
     );
-  }, [connected, walletContextState, globalBanks, isInLendingMode, denominationUSD, nativeSolBalance, selectedAccount]);
+  }, [
+    connected,
+    walletContextState,
+    globalBanks,
+    isInLendingMode,
+    denominationUSD,
+    nativeSolBalance,
+    selectedAccount,
+    fetchMrgnlendState,
+  ]);
 
   const isolatedPoolTableData = React.useMemo(() => {
     return makeData(
@@ -178,7 +190,8 @@ export const AssetsList = () => {
       nativeSolBalance,
       selectedAccount,
       connected,
-      walletContextState
+      walletContextState,
+      fetchMrgnlendState
     );
   }, [
     connected,
@@ -188,6 +201,7 @@ export const AssetsList = () => {
     denominationUSD,
     nativeSolBalance,
     selectedAccount,
+    fetchMrgnlendState,
   ]);
 
   const tableColumns = React.useMemo(() => {

apps/marginfi-v2-ui/src/components/desktop/AssetList/utils/columnDataUtils.tsx

@@ -292,11 +292,13 @@ const ActionBoxCell = ({
   isInLendingMode,
   connected,
   walletContextState,
+  fetchMrgnlendState,
 }: {
   bank: ExtendedBankInfo;
   isInLendingMode: boolean;
   connected: boolean;
   walletContextState: WalletContextStateOverride | WalletContextState;
+  fetchMrgnlendState: () => void;
 }) => {
   const currentAction = getCurrentAction(isInLendingMode, bank);
   const isDust = bank.isActive && bank.position.isDust;
@@ -311,6 +313,9 @@ const ActionBoxCell = ({
           connected: connected,
           walletContextState,
           requestedBank: bank,
+          onComplete: () => {
+            fetchMrgnlendState();
+          },
         }}
         dialogProps={{
           title: `${currentAction} ${bank.meta.tokenSymbol}`,
@@ -332,6 +337,9 @@ const ActionBoxCell = ({
           requestedLendType: currentAction,
           connected: connected,
           walletContextState,
+          onComplete: () => {
+            fetchMrgnlendState();
+          },
         }}
         dialogProps={{
           title: `${currentAction} ${bank.meta.tokenSymbol}`,
@@ -351,7 +359,8 @@ export const getAction = (
   isInLendingMode: boolean,
   marginfiAccount: MarginfiAccountWrapper | null,
   connected: boolean,
-  walletContextState: WalletContextStateOverride | WalletContextState
+  walletContextState: WalletContextStateOverride | WalletContextState,
+  fetchMrgnlendState: () => void
 ) => {
   const currentAction = getCurrentAction(isInLendingMode, bank);
   const isDust = bank.isActive && bank.position.isDust;
@@ -369,6 +378,7 @@ export const getAction = (
                   isInLendingMode={isInLendingMode}
                   connected={connected}
                   walletContextState={walletContextState}
+                  fetchMrgnlendState={fetchMrgnlendState}
                 />
               </div>
             </TooltipTrigger>
@@ -384,6 +394,7 @@ export const getAction = (
             isInLendingMode={isInLendingMode}
             connected={connected}
             walletContextState={walletContextState}
+            fetchMrgnlendState={fetchMrgnlendState}
           />
         </div>
       )}

apps/marginfi-v2-ui/src/components/desktop/AssetList/utils/tableHelperUtils.tsx

@@ -35,7 +35,8 @@ export const makeData = (
   nativeSolBalance: number,
   marginfiAccount: MarginfiAccountWrapper | null,
   connected: boolean,
-  walletContextState: WalletContextStateOverride | WalletContextState
+  walletContextState: WalletContextStateOverride | WalletContextState,
+  fetchMrgnlendState: () => void
 ) => {
   return data.map(
     (bank) =>
@@ -48,7 +49,14 @@ export const makeData = (
         bankCap: assetUtils.getBankCapData(bank, isInLendingMode, denominationUSD),
         utilization: assetUtils.getUtilizationData(bank),
         position: assetUtils.getPositionData(bank, denominationUSD, nativeSolBalance, isInLendingMode),
-        action: assetUtils.getAction(bank, isInLendingMode, marginfiAccount, connected, walletContextState),
+        action: assetUtils.getAction(
+          bank,
+          isInLendingMode,
+          marginfiAccount,
+          connected,
+          walletContextState,
+          fetchMrgnlendState
+        ),
       } as AssetListModel)
   );
 };

apps/marginfi-v2-ui/src/pages/index.tsx

@@ -34,32 +34,19 @@ const AssetsList = dynamic(async () => (await import("~/components/desktop/Asset
 export default function HomePage() {
   const router = useRouter();
   const { walletContextState, walletAddress, isOverride, connected } = useWallet();
-  const [previousTxn, lendingMode, setIsWalletOpen, setIsWalletAuthDialogOpen, setPreviousTxn, setIsActionComplete] =
-    useUiStore((state) => [
-      state.previousTxn,
-      state.lendingMode,
-      state.setIsWalletOpen,
-      state.setIsWalletAuthDialogOpen,
-      state.setPreviousTxn,
-      state.setIsActionComplete,
-    ]);
-  const [
-    marginfiClient,
-    isStoreInitialized,
-    isRefreshingStore,
-    selectedAccount,
-    extendedBankInfos,
-    accountSummary,
-    nativeSolBalance,
-  ] = useMrgnlendStore((state) => [
-    state.marginfiClient,
-    state.initialized,
-    state.isRefreshingStore,
-    state.selectedAccount,
-    state.extendedBankInfos,
-    state.accountSummary,
-    state.nativeSolBalance,
+  const [previousTxn, lendingMode, setIsWalletAuthDialogOpen] = useUiStore((state) => [
+    state.previousTxn,
+    state.lendingMode,
+    state.setIsWalletAuthDialogOpen,
   ]);
+  const [isStoreInitialized, isRefreshingStore, selectedAccount, extendedBankInfos, fetchMrgnlendState] =
+    useMrgnlendStore((state) => [
+      state.initialized,
+      state.isRefreshingStore,
+      state.selectedAccount,
+      state.extendedBankInfos,
+      state.fetchMrgnlendState,
+    ]);
 
   const [actionMode, refreshState] = useActionBoxStore()((state) => [state.actionMode, state.refreshState]);
 
@@ -121,6 +108,9 @@ export default function HomePage() {
                     captureEvent: (event, properties) => {
                       capture(event, properties);
                     },
+                    onComplete: () => {
+                      fetchMrgnlendState();
+                    },
                     onConnect: () => setIsWalletAuthDialogOpen(true),
                   }}
                 />
@@ -147,6 +137,9 @@ export default function HomePage() {
                   requestedLendType: lendingMode === LendingModes.LEND ? ActionType.Deposit : ActionType.Borrow,
                   connected: connected,
                   walletContextState: walletContextState,
+                  onComplete: () => {
+                    fetchMrgnlendState();
+                  },
                   onConnect: () => setIsWalletAuthDialogOpen(true),
                 }}
               />