-
Notifications
You must be signed in to change notification settings - Fork 70
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'feat/swap-lend-box-v2' into develop
- Loading branch information
Showing
47 changed files
with
2,324 additions
and
87 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import React from "react"; | ||
| import { ActionBox as ActionBoxV2 } from "@mrgnlabs/mrgn-ui"; | ||
| import { capture } from "@mrgnlabs/mrgn-utils"; | ||
| import { useMrgnlendStore } from "~/store"; | ||
|
|
||
| import { PageHeading } from "~/components/common/PageHeading"; | ||
|
|
||
| import { Loader } from "~/components/ui/loader"; | ||
| import { useWallet } from "~/components/wallet-v2"; | ||
|
|
||
| export default function DepositSwapPage() { | ||
| const [initialized] = useMrgnlendStore((state) => [state.initialized, state.extendedBankInfos]); | ||
| const { connected } = useWallet(); | ||
|
|
||
| return ( | ||
| <> | ||
| {!initialized && <Loader label="Loading marginfi..." className="mt-16" />} | ||
|
|
||
| {initialized && ( | ||
| <div className="w-full max-w-7xl mx-auto mb-20 px-5"> | ||
| <PageHeading heading="✨ Deposit Swap" body={<p>Swap any token and deposit in your chosen collateral.</p>} /> | ||
| <ActionBoxV2.DepositSwap | ||
| useProvider={true} | ||
| depositSwapProps={{ | ||
| connected: connected, | ||
| requestedDepositBank: undefined, | ||
| requestedSwapBank: undefined, | ||
| captureEvent: (event, properties) => { | ||
| capture(event, properties); | ||
| }, | ||
| }} | ||
| /> | ||
| </div> | ||
| )} | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
126 changes: 126 additions & 0 deletions
126
...omponents/action-box-v2/actions/deposit-swap-box/components/action-input/action-input.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| import React from "react"; | ||
|
|
||
| import { ActionType, ExtendedBankInfo } from "@mrgnlabs/marginfi-v2-ui-state"; | ||
| import { formatAmount } from "@mrgnlabs/mrgn-utils"; | ||
| import { usdFormatter, tokenPriceFormatter } from "@mrgnlabs/mrgn-common"; | ||
|
|
||
| import { Input } from "~/components/ui/input"; | ||
|
|
||
| import { BankSelect, DepositSwapAction } from "./components"; | ||
|
|
||
| type ActionInputProps = { | ||
| amountRaw: string; | ||
| amount: number | null; | ||
| nativeSolBalance: number; | ||
| walletAmount: number | undefined; | ||
| maxAmount: number; | ||
| banks: ExtendedBankInfo[]; | ||
| selectedBank: ExtendedBankInfo | null; | ||
| lendMode: ActionType; | ||
|
|
||
| connected: boolean; | ||
| showCloseBalance?: boolean; | ||
| isDialog?: boolean; | ||
| showTokenSelection?: boolean; | ||
| showTokenSelectionGroups?: boolean; | ||
| isMini?: boolean; | ||
|
|
||
| isInputDisabled?: boolean; | ||
|
|
||
| setAmountRaw: (amount: string) => void; | ||
| setSelectedBank: (bank: ExtendedBankInfo | null) => void; | ||
| }; | ||
|
|
||
| export const ActionInput = ({ | ||
| banks, | ||
| nativeSolBalance, | ||
| walletAmount, | ||
| maxAmount, | ||
| showCloseBalance, | ||
| connected, | ||
| isDialog, | ||
| showTokenSelection, | ||
| showTokenSelectionGroups, | ||
| amountRaw, | ||
| amount, | ||
| selectedBank, | ||
| lendMode, | ||
| isInputDisabled: _isInputDisabled, | ||
| setAmountRaw, | ||
| setSelectedBank, | ||
| }: ActionInputProps) => { | ||
| const amountInputRef = React.useRef<HTMLInputElement>(null); | ||
|
|
||
| const numberFormater = React.useMemo(() => new Intl.NumberFormat("en-US", { maximumFractionDigits: 10 }), []); | ||
|
|
||
| const isInputDisabled = React.useMemo( | ||
| () => (maxAmount === 0 && !showCloseBalance) || _isInputDisabled, | ||
| [maxAmount, showCloseBalance, _isInputDisabled] | ||
| ); | ||
|
|
||
| const formatAmountCb = React.useCallback( | ||
| (newAmount: string, bank: ExtendedBankInfo | null) => { | ||
| return formatAmount(newAmount, maxAmount, bank, numberFormater); | ||
| }, | ||
| [maxAmount, numberFormater] | ||
| ); | ||
|
|
||
| const handleInputChange = React.useCallback( | ||
| (newAmount: string) => { | ||
| setAmountRaw(formatAmountCb(newAmount, selectedBank)); | ||
| }, | ||
| [formatAmountCb, setAmountRaw, selectedBank] | ||
| ); | ||
|
|
||
| const isTokenSelectionAvailable = React.useMemo(() => { | ||
| if (showTokenSelection === undefined) return !isDialog; | ||
| else return showTokenSelection; | ||
| }, [showTokenSelection, isDialog]); | ||
|
|
||
| return ( | ||
| <div className="rounded-lg p-2.5 bg-mfi-action-box-background-dark"> | ||
| <div className="flex justify-center gap-1 items-center font-medium text-3xl"> | ||
| <div className="w-full flex-auto max-w-[162px]"> | ||
| <BankSelect | ||
| selectedBank={selectedBank} | ||
| setSelectedBank={(bank) => { | ||
| setSelectedBank(bank); | ||
| }} | ||
| isSelectable={isTokenSelectionAvailable} | ||
| showTokenSelectionGroups={showTokenSelectionGroups} | ||
| banks={banks} | ||
| nativeSolBalance={nativeSolBalance} | ||
| lendMode={lendMode} | ||
| connected={connected} | ||
| /> | ||
| </div> | ||
| <div className="flex-auto flex flex-col gap-0 items-end"> | ||
| <Input | ||
| type="text" | ||
| ref={amountInputRef} | ||
| inputMode="decimal" | ||
| value={amountRaw} | ||
| disabled={isInputDisabled} | ||
| onChange={(e) => handleInputChange(e.target.value)} | ||
| placeholder="0" | ||
| className="bg-transparent shadow-none min-w-[130px] text-right h-auto py-0 pr-0 outline-none focus-visible:outline-none focus-visible:ring-0 border-none text-base font-medium" | ||
| /> | ||
| {amount !== null && amount > 0 && selectedBank && ( | ||
| <span className="text-xs text-muted-foreground font-light"> | ||
| {tokenPriceFormatter(amount * selectedBank.info.oraclePrice.priceRealtime.price.toNumber())} | ||
| </span> | ||
| )} | ||
| </div> | ||
| </div> | ||
| {!isInputDisabled && ( | ||
| <DepositSwapAction | ||
| walletAmount={walletAmount} | ||
| maxAmount={maxAmount} | ||
| onSetAmountRaw={(amount) => handleInputChange(amount)} | ||
| selectedBank={selectedBank} | ||
| lendMode={lendMode} | ||
| /> | ||
| )} | ||
| </div> | ||
| ); | ||
| }; |
61 changes: 61 additions & 0 deletions
61
...2/actions/deposit-swap-box/components/action-input/components/bank-select/bank-select.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| import React from "react"; | ||
|
|
||
| import { ExtendedBankInfo, ActionType } from "@mrgnlabs/marginfi-v2-ui-state"; | ||
| import { computeBankRate, LendingModes } from "@mrgnlabs/mrgn-utils"; | ||
|
|
||
| import { SelectedBankItem, BankListWrapper } from "~/components/action-box-v2/components"; | ||
|
|
||
| import { BankTrigger, BankList } from "./components"; | ||
|
|
||
| type BankSelectProps = { | ||
| selectedBank: ExtendedBankInfo | null; | ||
| banks: ExtendedBankInfo[]; | ||
| nativeSolBalance: number; | ||
| lendMode: ActionType; | ||
| connected: boolean; | ||
| isSelectable?: boolean; | ||
| showTokenSelectionGroups?: boolean; | ||
| setSelectedBank: (selectedBank: ExtendedBankInfo | null) => void; | ||
| }; | ||
|
|
||
| export const BankSelect = ({ | ||
| selectedBank, | ||
| banks, | ||
| nativeSolBalance, | ||
| lendMode, | ||
| connected, | ||
| isSelectable = true, | ||
| showTokenSelectionGroups, | ||
| setSelectedBank, | ||
| }: BankSelectProps) => { | ||
| // idea check list if banks[] == 1 make it unselectable | ||
| const [isOpen, setIsOpen] = React.useState(false); | ||
|
|
||
| const lendingMode = React.useMemo( | ||
| () => | ||
| lendMode === ActionType.Deposit || lendMode === ActionType.Withdraw ? LendingModes.LEND : LendingModes.BORROW, | ||
| [lendMode] | ||
| ); | ||
| return ( | ||
| <> | ||
| <BankListWrapper | ||
| isOpen={isOpen} | ||
| setIsOpen={setIsOpen} | ||
| Trigger={<BankTrigger selectedBank={selectedBank} lendingMode={lendingMode} isOpen={isOpen} />} | ||
| Content={ | ||
| <BankList | ||
| isOpen={isOpen} | ||
| onClose={() => setIsOpen(false)} | ||
| selectedBank={selectedBank} | ||
| onSetSelectedBank={setSelectedBank} | ||
| lendMode={lendMode} | ||
| banks={banks} | ||
| nativeSolBalance={nativeSolBalance} | ||
| connected={connected} | ||
| showTokenSelectionGroups={showTokenSelectionGroups} | ||
| /> | ||
| } | ||
| /> | ||
| </> | ||
| ); | ||
| }; |
Oops, something went wrong.