fix: build errors

mrgnlabs · Oct 11, 2024 · 9eb2ffe · 9eb2ffe
1 parent be8e6f0
commit 9eb2ffe
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 66 deletions.
diff --git a/apps/marginfi-v2-ui/src/components/common/Mint/MintCardWrapper.tsx b/apps/marginfi-v2-ui/src/components/common/Mint/MintCardWrapper.tsx
@@ -14,13 +14,24 @@ import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
 import { ActionBoxDialog } from "~/components/common/ActionBox";
 import { LST_MINT } from "~/store/lstStore";
 
+/// XXX
+import { useWallet } from "~/components/wallet-v2/hooks/use-wallet.hook";
+
+/// YYY
+
 interface MintCardWrapperProps {
   mintCard: MintCardProps;
 }
 
 export const MintCardWrapper: React.FC<MintCardWrapperProps> = ({ mintCard, ...props }) => {
   const [extendedBankInfos] = useMrgnlendStore((state) => [state.extendedBankInfos]);
 
+  // XXX
+
+  const { connected } = useWallet();
+
+  /// YYY
+
   const [requestedAction, setRequestedAction] = React.useState<ActionType>(ActionType.MintLST);
 
   const transformedActionGate = React.useMemo(() => getBlockedActions(), []);
@@ -31,6 +42,7 @@ export const MintCardWrapper: React.FC<MintCardWrapperProps> = ({ mintCard, ...p
       null,
     [extendedBankInfos]
   );
+
   return (
     <Card variant="default" className="relative">
       <CardHeader className="pt-8">
@@ -73,33 +85,42 @@ export const MintCardWrapper: React.FC<MintCardWrapperProps> = ({ mintCard, ...p
         )}
 
         {mintCard.title === "LST" ? (
-          <ActionBoxDialog
-            requestedAction={requestedAction}
-            requestedBank={requestedAction === ActionType.UnstakeLST ? requestedBank : null}
-          >
-            <div className="flex items-center gap-2">
-              <Button
-                variant="secondary"
-                size="lg"
-                className="mt-4"
-                onClick={() => {
-                  setRequestedAction(ActionType.MintLST);
-                }}
-              >
-                Stake {mintCard.title}
-              </Button>
-              <Button
-                variant="outline-dark"
-                size="lg"
-                className="mt-4 hover:text-primary"
-                onClick={() => {
-                  setRequestedAction(ActionType.UnstakeLST);
-                }}
-              >
-                Unstake {mintCard.title}
-              </Button>
-            </div>
-          </ActionBoxDialog>
+          <div className="flex items-center gap-2">
+            <ActionBox.Stake
+              isDialog={true}
+              useProvider={true}
+              stakeProps={{
+                connected: connected,
+                requestedActionType: ActionType.MintLST,
+              }}
+              dialogProps={{
+                trigger: (
+                  <Button variant="secondary" size="lg" className="mt-4">
+                    Stake {mintCard.title}
+                  </Button>
+                ),
+                title: "Stake LST",
+              }}
+            />
+
+            <ActionBox.Stake
+              isDialog={true}
+              useProvider={true}
+              stakeProps={{
+                connected: connected,
+                requestedActionType: ActionType.UnstakeLST,
+                requestedBank: extendedBankInfos.find((bank) => bank?.info?.state?.mint.equals(LST_MINT)),
+              }}
+              dialogProps={{
+                trigger: (
+                  <Button variant="outline-dark" size="lg" className="mt-4 hover:text-primary">
+                    Unstake {mintCard.title}
+                  </Button>
+                ),
+                title: "Unstake LST",
+              }}
+            />
+          </div>
         ) : transformedActionGate?.find((value) => value === ActionType.MintYBX) ? (
           <div className="flex items-center gap-2">
             <Button
@@ -116,17 +137,18 @@ export const MintCardWrapper: React.FC<MintCardWrapperProps> = ({ mintCard, ...p
             </Button>
           </div>
         ) : (
-          <ActionBoxDialog
-            requestedAction={ActionType.MintYBX}
-            requestedBank={null}
-            //requestedToken={new PublicKey("2s37akK2eyBbp8DZgCm7RtsaEz8eJP3Nxd4urLHQv7yB")}
-          >
-            <div className="flex items-center gap-2">
-              <Button variant="secondary" size="lg" className="mt-4">
-                Stake
-              </Button>
-            </div>
-          </ActionBoxDialog>
+          // <ActionBoxDialog
+          //   requestedAction={ActionType.MintYBX}
+          //   requestedBank={null}
+          //   //requestedToken={new PublicKey("2s37akK2eyBbp8DZgCm7RtsaEz8eJP3Nxd4urLHQv7yB")}
+          // >
+          //   <div className="flex items-center gap-2">
+          //     <Button variant="secondary" size="lg" className="mt-4">
+          //       Stake
+          //     </Button>
+          //   </div>
+          // </ActionBoxDialog>
+          <></>
         )}
       </CardContent>
     </Card>

diff --git a/packages/mrgn-ui/src/components/action-box-v2/action-box.tsx b/packages/mrgn-ui/src/components/action-box-v2/action-box.tsx
@@ -180,10 +180,11 @@ const Stake = (
   } else {
     combinedProps = stakeProps as StakeBoxProps;
   }
+
   return (
     <ActionBox {...actionBoxProps}>
       <ActionBoxWrapper showSettings={true} isDialog={props.isDialog} actionMode={ActionType.MintLST}>
-        <ActionBoxNavigator selectedAction={ActionType.MintLST}>
+        <ActionBoxNavigator selectedAction={ActionType.MintLST} bank={combinedProps.requestedBank}>
           <StakeBox {...combinedProps} isDialog={props.isDialog} />
         </ActionBoxNavigator>
       </ActionBoxWrapper>

diff --git a/...i/src/components/action-box-v2/actions/stake-box/components/action-input/action-input.tsx b/...i/src/components/action-box-v2/actions/stake-box/components/action-input/action-input.tsx
@@ -20,7 +20,7 @@ type ActionInputProps = {
   showCloseBalance?: boolean;
   isDialog?: boolean;
   isMini?: boolean;
-
+  isSelectable?: boolean;
   setAmountRaw: (amount: string) => void;
   setSelectedBank: (bank: ExtendedBankInfo | null) => void;
 };
@@ -33,7 +33,7 @@ export const ActionInput = ({
   showCloseBalance,
   connected,
   isDialog,
-
+  isSelectable,
   amountRaw,
   selectedBank,
   lendMode,
@@ -73,6 +73,7 @@ export const ActionInput = ({
             nativeSolBalance={nativeSolBalance}
             actionMode={lendMode}
             connected={connected}
+            isSelectable={isSelectable}
           />
         </div>
         <div className="flex-auto">

diff --git a/...n-box-v2/actions/stake-box/components/action-input/components/bank-select/bank-select.tsx b/...n-box-v2/actions/stake-box/components/action-input/components/bank-select/bank-select.tsx
@@ -13,6 +13,7 @@ interface BankSelectProps {
   nativeSolBalance: number;
   actionMode: ActionType;
   connected: boolean;
+  isSelectable?: boolean;
 
   setSelectedBank: (selectedTokenBank: ExtendedBankInfo | null) => void;
 }
@@ -23,10 +24,10 @@ export const BankSelect = ({
   nativeSolBalance,
   actionMode,
   connected,
+  isSelectable,
 
   setSelectedBank,
 }: BankSelectProps) => {
-  const isSelectable = React.useMemo(() => true, []);
   const [isOpen, setIsOpen] = React.useState(false);
 
   return (
@@ -50,6 +51,7 @@ export const BankSelect = ({
               banks={banks}
               nativeSolBalance={nativeSolBalance}
               connected={connected}
+              isSelectable={isSelectable}
             />
           }
         />

diff --git a/packages/mrgn-ui/src/components/action-box-v2/actions/stake-box/stake-box.tsx b/packages/mrgn-ui/src/components/action-box-v2/actions/stake-box/stake-box.tsx
@@ -1,9 +1,9 @@
-import React from "react";
+import React, { useEffect } from "react";
 
 import { ActionInput } from "./components/action-input";
 import { MarginfiAccountWrapper, MarginfiClient } from "@mrgnlabs/marginfi-client-v2";
 import { AccountSummary, ActionType, ExtendedBankInfo } from "@mrgnlabs/marginfi-v2-ui-state";
-import { PreviousTxn } from "@mrgnlabs/mrgn-utils";
+import { LstData, PreviousTxn } from "@mrgnlabs/mrgn-utils";
 import { useStakeBoxStore } from "./store";
 import { useActionAmounts } from "~/components/action-box-v2/hooks";
 import { AmountPreview } from "./components/amount-preview";
@@ -13,6 +13,9 @@ import { WalletContextStateOverride } from "~/components/wallet-v2/hooks/use-wal
 import { WalletContextState } from "@solana/wallet-adapter-react";
 import { useStakeSimulation } from "./hooks";
 
+import { useConnection } from "~/hooks/use-connection";
+import { Connection } from "@solana/web3.js";
+
 export type StakeBoxProps = {
   nativeSolBalance: number;
   walletContextState?: WalletContextStateOverride | WalletContextState;
@@ -79,6 +82,8 @@ export const StakeBox = ({
     state.setErrorMessage,
   ]);
 
+  const isSelectable = React.useMemo(() => (requestedBank?.meta.tokenSymbol === "LST" ? false : true), [requestedBank]);
+
   const { amount, debouncedAmount, walletAmount, maxAmount } = useActionAmounts({
     amountRaw,
     selectedBank,
@@ -98,11 +103,12 @@ export const StakeBox = ({
           amountRaw={amountRaw}
           maxAmount={maxAmount}
           connected={connected}
-          selectedBank={selectedBank}
-          lendMode={ActionType.MintLST}
-          isDialog={true}
+          selectedBank={requestedBank ?? selectedBank}
+          lendMode={actionMode}
+          isDialog={isDialog}
           setAmountRaw={setAmountRaw}
           setSelectedBank={setSelectedBank}
+          isSelectable={isSelectable}
         />
       </div>
       <div className="mb-6">
@@ -124,22 +130,6 @@ export const StakeBox = ({
           buttonLabel={ActionType.MintLST ? "Mint LST" : "Unstake LST"}
         />
       </div>
-
-      <div>
-        <StatsPreview
-          actionSummary={{
-            actionPreview: {
-              commission: 0,
-              currentPrice: 0,
-              projectedApy: 0,
-              supply: 0,
-            },
-          }}
-          actionMode={actionMode}
-          isLoading={isLoading}
-          selectedBank={selectedBank}
-        />
-      </div>
     </>
   );
 };
diff --git a/.../mrgn-ui/src/components/action-box-v2/components/action-wrappers/action-box-navigator.tsx b/.../mrgn-ui/src/components/action-box-v2/components/action-wrappers/action-box-navigator.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-import { ActionType } from "@mrgnlabs/marginfi-v2-ui-state";
+import { ActionType, ExtendedBankInfo } from "@mrgnlabs/marginfi-v2-ui-state";
 import { ToggleGroup, ToggleGroupItem } from "~/components/ui/toggle-group";
 import { IconSparkles } from "@tabler/icons-react";
 
@@ -9,6 +9,7 @@ interface ActionBoxNavigatorProps {
   actionTypes?: ActionType[];
   onSelectAction?: (action: ActionType) => void;
   children: React.ReactNode;
+  bank?: ExtendedBankInfo | null;
 }
 
 const actionTitles: { [key in ActionType]?: string } = {
@@ -17,7 +18,7 @@ const actionTitles: { [key in ActionType]?: string } = {
   [ActionType.Withdraw]: "You withdraw",
   [ActionType.Repay]: "You repay",
   [ActionType.RepayCollat]: "You repay with collateral",
-  [ActionType.MintLST]: "You stake",
+  [ActionType.MintLST]: "You swap",
   [ActionType.UnstakeLST]: "You unstake",
   [ActionType.Loop]: "You deposit",
 };
@@ -40,6 +41,7 @@ export const ActionBoxNavigator = ({
   selectedAction,
   onSelectAction,
   children,
+  bank,
 }: ActionBoxNavigatorProps) => {
   const childrenArray = React.Children.toArray(children);
   const isNavigator = React.useMemo(() => actionTypes && actionTypes.length > 1, [actionTypes]);
@@ -58,6 +60,15 @@ export const ActionBoxNavigator = ({
     }));
   }, [actionTypes, isNavigator]);
 
+  const isSolBank = React.useMemo(() => bank?.meta.tokenSymbol === "SOL", [bank]); // TODO: fix this, bank not set when sol currently
+  const titleText = React.useMemo(() => {
+    const title = actionTitles[selectedAction];
+    if (isSolBank && selectedAction === ActionType.MintLST) {
+      return "You stake";
+    }
+    return title || "";
+  }, [selectedAction, isSolBank]); //
+
   return (
     <>
       <div className="flex flex-row items-center justify-between mb-2">
@@ -96,7 +107,7 @@ export const ActionBoxNavigator = ({
               </ToggleGroup>
             </div>
           ) : (
-            <span className="text-sm font-normal text-muted-foreground">{actionTitles[selectedAction]}</span>
+            <span className="text-sm font-normal text-muted-foreground">{titleText}</span>
           )}
         </div>
       </div>