diff --git a/apps/marginfi-v2-ui/src/components/common/Mint/MintCardWrapper.tsx b/apps/marginfi-v2-ui/src/components/common/Mint/MintCardWrapper.tsx index 9a48bb2691..a57e6db399 100644 --- a/apps/marginfi-v2-ui/src/components/common/Mint/MintCardWrapper.tsx +++ b/apps/marginfi-v2-ui/src/components/common/Mint/MintCardWrapper.tsx @@ -14,6 +14,11 @@ 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; } @@ -21,6 +26,12 @@ interface MintCardWrapperProps { export const MintCardWrapper: React.FC = ({ mintCard, ...props }) => { const [extendedBankInfos] = useMrgnlendStore((state) => [state.extendedBankInfos]); + // XXX + + const { connected } = useWallet(); + + /// YYY + const [requestedAction, setRequestedAction] = React.useState(ActionType.MintLST); const transformedActionGate = React.useMemo(() => getBlockedActions(), []); @@ -31,6 +42,7 @@ export const MintCardWrapper: React.FC = ({ mintCard, ...p null, [extendedBankInfos] ); + return ( @@ -73,33 +85,42 @@ export const MintCardWrapper: React.FC = ({ mintCard, ...p )} {mintCard.title === "LST" ? ( - -
- - -
-
+
+ + Stake {mintCard.title} + + ), + title: "Stake LST", + }} + /> + + bank?.info?.state?.mint.equals(LST_MINT)), + }} + dialogProps={{ + trigger: ( + + ), + title: "Unstake LST", + }} + /> +
) : transformedActionGate?.find((value) => value === ActionType.MintYBX) ? (
) : ( - -
- -
-
+ // + //
+ // + //
+ //
+ <> )}
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 index 32a09b1f8f..7c6754b225 100644 --- 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 ( - + diff --git a/packages/mrgn-ui/src/components/action-box-v2/actions/stake-box/components/action-input/action-input.tsx b/packages/mrgn-ui/src/components/action-box-v2/actions/stake-box/components/action-input/action-input.tsx index 1e29884214..bd796971f5 100644 --- a/packages/mrgn-ui/src/components/action-box-v2/actions/stake-box/components/action-input/action-input.tsx +++ b/packages/mrgn-ui/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} />
diff --git a/packages/mrgn-ui/src/components/action-box-v2/actions/stake-box/components/action-input/components/bank-select/bank-select.tsx b/packages/mrgn-ui/src/components/action-box-v2/actions/stake-box/components/action-input/components/bank-select/bank-select.tsx index c79db06f16..81f28632b0 100644 --- a/packages/mrgn-ui/src/components/action-box-v2/actions/stake-box/components/action-input/components/bank-select/bank-select.tsx +++ b/packages/mrgn-ui/src/components/action-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 index 34e45c55bc..fd68801528 100644 --- 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} />
@@ -124,22 +130,6 @@ export const StakeBox = ({ buttonLabel={ActionType.MintLST ? "Mint LST" : "Unstake LST"} />
- -
- -
); }; diff --git a/packages/mrgn-ui/src/components/action-box-v2/components/action-wrappers/action-box-navigator.tsx b/packages/mrgn-ui/src/components/action-box-v2/components/action-wrappers/action-box-navigator.tsx index bfed85db7c..655fd5a2f9 100644 --- a/packages/mrgn-ui/src/components/action-box-v2/components/action-wrappers/action-box-navigator.tsx +++ b/packages/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 ( <>
@@ -96,7 +107,7 @@ export const ActionBoxNavigator = ({
) : ( - {actionTitles[selectedAction]} + {titleText} )}