fix: actionbox v2 in onboarding

mrgnlabs · Sep 27, 2024 · cfbb81a · cfbb81a
1 parent d33d5c5
commit cfbb81a
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 11 deletions.
diff --git a/apps/marginfi-v2-ui/src/pages/_app.tsx b/apps/marginfi-v2-ui/src/pages/_app.tsx
@@ -55,11 +55,24 @@ type MrgnAppProps = { path: string };
 
 export default function MrgnApp({ Component, pageProps, path }: AppProps & MrgnAppProps) {
   const [setIsFetchingData, isOraclesStale] = useUiStore((state) => [state.setIsFetchingData, state.isOraclesStale]);
-  const [isMrgnlendStoreInitialized, isRefreshingMrgnlendStore, fetchMrgnlendState] = useMrgnlendStore((state) => [
+  const [
+    isMrgnlendStoreInitialized,
+    isRefreshingMrgnlendStore,
+    marginfiClient,
+    selectedAccount,
+    extendedBankInfos,
+    nativeSolBalance,
+    fetchMrgnlendState,
+  ] = useMrgnlendStore((state) => [
     state.initialized,
     state.isRefreshingStore,
+    state.marginfiClient,
+    state.selectedAccount,
+    state.extendedBankInfos,
+    state.nativeSolBalance,
     state.fetchMrgnlendState,
   ]);
+
   const [isLstStoreInitialised, isRefreshingLstStore] = useLstStore((state) => [
     state.initialized,
     state.isRefreshingStore,
@@ -129,7 +142,7 @@ export default function MrgnApp({ Component, pageProps, path }: AppProps & MrgnA
 
                     <Analytics />
                     <Tutorial />
-                    <AuthDialog />
+                    <AuthDialog mrgnState={{ marginfiClient, selectedAccount, extendedBankInfos, nativeSolBalance }} />
                     <ToastContainer position="bottom-left" theme="dark" />
                   </LipClientProvider>
                 </MrgnlendProvider>

diff --git a/packages/mrgn-ui/src/components/actionbox-v2/actions/lend-box/lend-box.tsx b/packages/mrgn-ui/src/components/actionbox-v2/actions/lend-box/lend-box.tsx
@@ -8,6 +8,8 @@ import {
   ActionType,
   TokenAccountMap,
   AccountSummary,
+  computeAccountSummary,
+  DEFAULT_ACCOUNT_SUMMARY,
 } from "@mrgnlabs/marginfi-v2-ui-state";
 import { ActionMethod, MarginfiActionParams, PreviousTxn } from "@mrgnlabs/mrgn-utils";
 import { MarginfiAccountWrapper, MarginfiClient } from "@mrgnlabs/marginfi-client-v2";
@@ -35,7 +37,7 @@ export type LendBoxProps = {
   banks: ExtendedBankInfo[];
   requestedLendType: ActionType;
   requestedBank?: ExtendedBankInfo;
-  accountSummary?: AccountSummary;
+  accountSummaryArg?: AccountSummary;
 
   onConnect?: () => void;
   onComplete: (previousTxn: PreviousTxn) => void;
@@ -50,7 +52,7 @@ export const LendBox = ({
   marginfiClient,
   banks,
   selectedAccount,
-  accountSummary,
+  accountSummaryArg,
   requestedLendType,
   requestedBank,
   onConnect,
@@ -99,6 +101,12 @@ export const LendBox = ({
     state.setErrorMessage,
   ]);
 
+  const accountSummary = React.useMemo(() => {
+    return (
+      accountSummaryArg ?? (selectedAccount ? computeAccountSummary(selectedAccount, banks) : DEFAULT_ACCOUNT_SUMMARY)
+    );
+  }, [accountSummaryArg, selectedAccount, banks]);
+
   const [setIsSettingsDialogOpen] = useActionBoxStore((state) => [state.setIsSettingsDialogOpen]);
 
   const { amount, debouncedAmount, walletAmount, maxAmount } = useActionAmounts({

diff --git a/...-ui/src/components/wallet-v2/components/sign-up/components/onboarding/screens/deposit.tsx b/...-ui/src/components/wallet-v2/components/sign-up/components/onboarding/screens/deposit.tsx
@@ -6,7 +6,7 @@ import { ActionBox } from "~/components/actionbox-v2";
 
 import { ScreenWrapper, WalletSeperator } from "~/components/wallet-v2/components/sign-up/components";
 import { useWallet } from "~/components/wallet-v2/hooks/use-wallet.hook";
-import { IconLoader } from "@tabler/icons-react";
+import { IconLoader2 } from "@tabler/icons-react";
 
 interface DepositTokenProps extends OnrampScreenProps {}
 
@@ -47,10 +47,10 @@ export const DepositToken = ({ mrgnState, successProps, onNext, onClose }: Depos
           }}
         />
       ) : (
-        <>
-          <IconLoader size={18} className="animate-spin-slow" />
+        <div className="flex flex-col items-center gap-2">
+          <IconLoader2 size={18} className="animate-spin" />
           <span>Loading...</span>
-        </>
+        </div>
       )}
       {/* <ActionBox
         requestedAction={ActionType.Deposit}

diff --git a/packages/mrgn-ui/src/components/wallet-v2/components/sign-up/sign-up.tsx b/packages/mrgn-ui/src/components/wallet-v2/components/sign-up/sign-up.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { useRouter } from "next/router";
 
-import { MarginfiClient } from "@mrgnlabs/marginfi-client-v2";
+import { MarginfiAccountWrapper, MarginfiClient } from "@mrgnlabs/marginfi-client-v2";
 import { ExtendedBankInfo } from "@mrgnlabs/marginfi-v2-ui-state";
 
 import { Dialog, DialogContent } from "~/components/ui/dialog";
@@ -13,8 +13,8 @@ import { Progress } from "~/components/ui/progress";
 
 type AuthDialogProps = {
   mrgnState?: {
-    marginfiClient: MarginfiClient;
-    selectedAccount: string;
+    marginfiClient: MarginfiClient | null;
+    selectedAccount: MarginfiAccountWrapper | null;
     extendedBankInfos: ExtendedBankInfo[];
     nativeSolBalance: number;
   };