diff --git a/src/components/Modals/AssetAmountSelectActionModal/index.tsx b/src/components/Modals/AssetAmountSelectActionModal/index.tsx index 1ded312f..3434fa80 100644 --- a/src/components/Modals/AssetAmountSelectActionModal/index.tsx +++ b/src/components/Modals/AssetAmountSelectActionModal/index.tsx @@ -1,5 +1,4 @@ -import Image from 'next/image' -import { useState } from 'react' +import { useCallback, useState } from 'react' import Button from 'components/Button' import Card from 'components/Card' @@ -24,7 +23,7 @@ interface Props { accountSummaryChange?: AccountChange onClose: () => void onChange: (value: BigNumber) => void - onAction: (value: BigNumber) => void + onAction: (value: BigNumber, isMax: boolean) => void } export default function AssetAmountSelectActionModal(props: Props) { @@ -44,14 +43,17 @@ export default function AssetAmountSelectActionModal(props: Props) { const [amount, setAmount] = useState(BN(0)) const maxAmount = BN(coinBalances.find(byDenom(asset.denom))?.amount ?? 0) - const handleAmountChange = (value: BigNumber) => { - setAmount(value) - onChange(value) - } + const handleAmountChange = useCallback( + (value: BigNumber) => { + setAmount(value) + onChange(value) + }, + [onChange], + ) - const handleActionClick = () => { - onAction(amount) - } + const handleActionClick = useCallback(() => { + onAction(amount, amount.eq(maxAmount)) + }, [amount, maxAmount, onAction]) return ( )} - {accountLendAmount && ( + {accountLentAmount && ( <> } + title={} sub={'Deposited'} />
diff --git a/src/components/Modals/LendAndReclaim/index.tsx b/src/components/Modals/LendAndReclaim/index.tsx index 19eefdce..0fed9bf3 100644 --- a/src/components/Modals/LendAndReclaim/index.tsx +++ b/src/components/Modals/LendAndReclaim/index.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react' +import { useCallback, useState } from 'react' import useStore from 'store' import useToggle from 'hooks/useToggle' @@ -7,31 +7,29 @@ import useCurrentAccount from 'hooks/useCurrentAccount' import useLendAndReclaimModal from 'hooks/useLendAndReclaimModal' import DetailsHeader from 'components/Modals/LendAndReclaim/DetailsHeader' import AssetAmountSelectActionModal from 'components/Modals/AssetAmountSelectActionModal' +import AccountBalanceSettableCoin from 'types/classes/AccountBalanceSettableCoin' -const getAccountChange = (isLend: boolean, value: BigNumber, denom: string): AccountChange => { - const makeCoin = (denom: string, shouldNegate: boolean) => [ - { - amount: (shouldNegate ? value.negated() : value).toString(), - denom, - }, - ] - - return { - deposits: makeCoin(denom, isLend), - lends: makeCoin(denom, !isLend), - } -} - -function LendAndReclaimModal() { - const lend = useStore((s) => s.lend) - const reclaim = useStore((s) => s.reclaim) +function LendAndReclaimModalController() { const currentAccount = useCurrentAccount() - const { config, close } = useLendAndReclaimModal() - const [isConfirming, setIsConfirming] = useToggle() - const [accountChange, setAccountChange] = useState() + const { config } = useLendAndReclaimModal() if (!config || !currentAccount) return null + return +} + +interface Props { + currentAccount: Account + config: LendAndReclaimModalConfig +} + +function LendAndReclaimModal({ currentAccount, config }: Props) { + const lend = useStore((s) => s.lend) + const reclaim = useStore((s) => s.reclaim) + const { close } = useLendAndReclaimModal() + const [isConfirming, setIsConfirming] = useToggle() + const [accountChange, setAccountChange] = useState() + const { data, action } = config const { asset } = data @@ -39,26 +37,34 @@ function LendAndReclaimModal() { const actionText = isLendAction ? 'Lend' : 'Withdraw' const coinBalances = currentAccount[isLendAction ? 'deposits' : 'lends'] ?? [] - const handleAmountChange = (value: BigNumber) => { - setAccountChange(getAccountChange(isLendAction, value, asset.denom)) - } + const handleAmountChange = useCallback( + (value: BigNumber) => { + setAccountChange(getAccountChange(isLendAction, value, asset.denom)) + }, + [asset.denom, isLendAction], + ) - const handleAction = async (value: BigNumber) => { - setIsConfirming(true) + const handleAction = useCallback( + async (value: BigNumber, isMax: boolean) => { + setIsConfirming(true) - const options = { - fee: hardcodedFee, - accountId: currentAccount.id, - coin: { - denom: asset.denom, - amount: value.toString(), - }, - } - await (isLendAction ? lend : reclaim)(options) + const coin = new AccountBalanceSettableCoin( + asset.denom, + value.integerValue().toString(), + isMax, + ) + const options = { + fee: hardcodedFee, + accountId: currentAccount.id, + coin, + } + await (isLendAction ? lend : reclaim)(options) - setIsConfirming(false) - close() - } + setIsConfirming(false) + close() + }, + [asset.denom, close, currentAccount.id, isLendAction, lend, reclaim, setIsConfirming], + ) return ( { + const makeCoin = (denom: string, shouldNegate: boolean) => [ + { + amount: (shouldNegate ? value.negated() : value).toString(), + denom, + }, + ] + + return { + deposits: makeCoin(denom, isLend), + lends: makeCoin(denom, !isLend), + } +} + +export default LendAndReclaimModalController diff --git a/src/components/Modals/ModalsContainer.tsx b/src/components/Modals/ModalsContainer.tsx index 72acb066..65df7f4e 100644 --- a/src/components/Modals/ModalsContainer.tsx +++ b/src/components/Modals/ModalsContainer.tsx @@ -3,7 +3,7 @@ import BorrowModal from 'components/Modals/Borrow/BorrowModal' import FundAndWithdrawModal from 'components/Modals/FundWithdraw/FundAndWithdrawModal' import AddVaultBorrowAssetsModal from 'components/Modals/AddVaultAssets/AddVaultBorrowAssetsModal' import UnlockModal from 'components/Modals/Unlock/UnlockModal' -import LendAndReclaimModal from 'components/Modals/LendAndReclaim' +import LendAndReclaimModalController from 'components/Modals/LendAndReclaim' export default function ModalsContainer() { return ( @@ -14,7 +14,7 @@ export default function ModalsContainer() { - + ) } diff --git a/src/components/Toaster.tsx b/src/components/Toaster.tsx index c3300b66..38cf4095 100644 --- a/src/components/Toaster.tsx +++ b/src/components/Toaster.tsx @@ -43,12 +43,7 @@ export default function Toaster() { {toast.message}
-
) diff --git a/src/store/slices/broadcast.ts b/src/store/slices/broadcast.ts index e157b6f7..bf1954b2 100644 --- a/src/store/slices/broadcast.ts +++ b/src/store/slices/broadcast.ts @@ -6,7 +6,7 @@ import { ENV } from 'constants/env' import { Store } from 'store' import { getSingleValueFromBroadcastResult } from 'utils/broadcast' import { formatAmountWithSymbol } from 'utils/formatters' -import { BN } from 'utils/helpers' +import AccountBalanceSettableCoin from 'types/classes/AccountBalanceSettableCoin' export default function createBroadcastSlice( set: SetState, @@ -213,7 +213,7 @@ export default function createBroadcastSlice( ) return !!response.result }, - lend: async (options: { fee: StdFee; accountId: string; coin: Coin }) => { + lend: async (options: { fee: StdFee; accountId: string; coin: AccountBalanceSettableCoin }) => { const msg = { update_credit_account: { account_id: options.accountId, @@ -233,14 +233,17 @@ export default function createBroadcastSlice( ) return !!response.result }, - reclaim: async (options: { fee: StdFee; accountId: string; coin: Coin }) => { - const reclaim = { denom: options.coin.denom, amount: { exact: BN(options.coin.amount) } } + reclaim: async (options: { + fee: StdFee + accountId: string + coin: AccountBalanceSettableCoin + }) => { const msg = { update_credit_account: { account_id: options.accountId, actions: [ { - reclaim, + reclaim: options.coin.toActionCoin(), }, ], }, @@ -250,7 +253,7 @@ export default function createBroadcastSlice( handleResponseMessages( response, - `Successfully deposited ${formatAmountWithSymbol(options.coin)}`, + `Successfully withdrew ${formatAmountWithSymbol(options.coin)}`, ) return !!response.result }, diff --git a/src/types/classes/AccountBalanceSettableCoin.ts b/src/types/classes/AccountBalanceSettableCoin.ts new file mode 100644 index 00000000..5c71b4c3 --- /dev/null +++ b/src/types/classes/AccountBalanceSettableCoin.ts @@ -0,0 +1,22 @@ +import { ActionCoin } from 'types/generated' + +class AccountBalanceSettableCoin implements Coin { + public denom: string + public amount: string + public setAccountBalance: boolean + + constructor(denom: string, amount: string, setAccountBalance: boolean) { + this.denom = denom + this.amount = amount + this.setAccountBalance = setAccountBalance + } + + toActionCoin(): ActionCoin { + return { + denom: this.denom, + amount: this.setAccountBalance ? 'account_balance' : { exact: this.amount }, + } + } +} + +export default AccountBalanceSettableCoin diff --git a/src/types/generated.d.ts b/src/types/generated.d.ts new file mode 100644 index 00000000..664ebf23 --- /dev/null +++ b/src/types/generated.d.ts @@ -0,0 +1 @@ +export { ActionCoin } from 'types/generated/mars-credit-manager/MarsCreditManager.types' diff --git a/src/types/interfaces/store/broadcast.d.ts b/src/types/interfaces/store/broadcast.d.ts index 38524275..acd2ea82 100644 --- a/src/types/interfaces/store/broadcast.d.ts +++ b/src/types/interfaces/store/broadcast.d.ts @@ -1,3 +1,5 @@ +type AccountBalanceSettableCoin = import('types/classes/AccountBalanceSettableCoin') + interface BroadcastResult { result?: import('@marsprotocol/wallet-connector').TxBroadcastResult error?: string @@ -16,8 +18,16 @@ interface BroadcastSlice { deposit: (options: { fee: StdFee; accountId: string; coin: Coin }) => Promise unlock: (options: { fee: StdFee; vault: Vault; amount: string }) => Promise withdraw: (options: { fee: StdFee; accountId: string; coin: Coin }) => Promise - lend: (options: { fee: StdFee; accountId: string; coin: Coin }) => Promise - reclaim: (options: { fee: StdFee; accountId: string; coin: Coin }) => Promise + lend: (options: { + fee: StdFee + accountId: string + coin: AccountBalanceSettableCoin + }) => Promise + reclaim: (options: { + fee: StdFee + accountId: string + coin: AccountBalanceSettableCoin + }) => Promise repay: (options: { fee: StdFee accountId: string diff --git a/src/types/stargate.d.ts b/src/types/stargate.d.ts index 721934bf..3a3c2cf9 100644 --- a/src/types/stargate.d.ts +++ b/src/types/stargate.d.ts @@ -1,6 +1,6 @@ type Coin = { - readonly denom: string - readonly amount: string + denom: string + amount: string } type StdFee = {