diff --git a/src/views/forms/TransferForm.tsx b/src/views/forms/TransferForm.tsx index 71b3d40..9b27251 100644 --- a/src/views/forms/TransferForm.tsx +++ b/src/views/forms/TransferForm.tsx @@ -61,38 +61,53 @@ export const TransferForm = ({ const stringGetter = useStringGetter(); const { freeCollateral } = useSelector(getSubaccount, shallowEqual) || {}; const { dydxAddress } = useAccounts(); - const { - address: recipientAddress, - size, - fee, - } = useSelector(getTransferInputs, shallowEqual) || {}; const { transfer } = useSubaccount(); const { nativeTokenBalance, usdcBalance } = useAccountBalance(); const { selectedNetwork } = useSelectedNetwork(); const { tokensConfigs, usdcLabel, chainTokenLabel } = useTokenConfigs(); - // User Input - const [asset, setAsset] = useState(selectedAsset); + const { + address: recipientAddress, + size, + fee, + token, + } = useSelector(getTransferInputs, shallowEqual) || {}; // Form states const [error, setError] = useState(); const [isLoading, setIsLoading] = useState(false); - const balance = asset === DydxChainAsset.USDC ? freeCollateral?.current : nativeTokenBalance; - const newBalance = - asset === DydxChainAsset.USDC - ? freeCollateral?.postOrder - : MustBigNumber(nativeTokenBalance) - .minus(size?.size ?? 0) - .toNumber(); - const amount = asset === DydxChainAsset.USDC ? size?.usdcSize : size?.size; + // temp fix: TODO: reset fees when changing token in Abacus + const [currentFee, setCurrentFee] = useState(fee); + useEffect(() => { + setCurrentFee(fee); + }, [fee]); - const showNotEnoughGasWarning = fee && asset === DydxChainAsset.USDC && usdcBalance < fee; + const asset = (token ?? selectedAsset) as DydxChainAsset; + const isUSDCSelected = asset === DydxChainAsset.USDC; + const amount = isUSDCSelected ? size?.usdcSize : size?.size; + const showNotEnoughGasWarning = fee && isUSDCSelected && usdcBalance < fee; + const balance = isUSDCSelected ? freeCollateral?.current : nativeTokenBalance; // BN + const newBalanceBN = isUSDCSelected + ? MustBigNumber(freeCollateral?.postOrder) + : nativeTokenBalance.minus(size?.size ?? 0); + const amountBN = MustBigNumber(amount); const balanceBN = MustBigNumber(balance); - const newBalanceBN = MustBigNumber(newBalance); + + const onChangeAsset = (asset: DydxChainAsset) => { + setError(undefined); + setCurrentFee(undefined); + + if (asset) { + abacusStateManager.setTransferValue({ + value: asset, + field: TransferInputField.token, + }); + } + }; useEffect(() => { abacusStateManager.setTransferValue({ @@ -100,19 +115,13 @@ export const TransferForm = ({ field: TransferInputField.type, }); + onChangeAsset(selectedAsset); + return () => { abacusStateManager.clearTransferInputValues(); }; }, []); - useEffect(() => { - setError(undefined); - abacusStateManager.setTransferValue({ - value: asset, - field: TransferInputField.token, - }); - }, [asset]); - const { sanctionedAddresses } = useRestrictions(); const isAddressValid = useMemo( @@ -134,11 +143,6 @@ export const TransferForm = ({ setError(undefined); try { - // Subtract fees from amount if sending native tokens - const amountToTransfer = ( - asset === DydxChainAsset.CHAINTOKEN ? amountBN.minus(fee) : amountBN - ).toNumber(); - const screenResults = await screenAddresses({ addresses: [recipientAddress!, dydxAddress!], }); @@ -157,9 +161,9 @@ export const TransferForm = ({ ); } else { const txResponse = await transfer( - amountToTransfer, + amountBN.toNumber(), recipientAddress as string, - tokensConfigs[asset].denom, + tokensConfigs[asset]?.denom ); if (txResponse?.code === 0) { @@ -200,7 +204,7 @@ export const TransferForm = ({ const onChangeAmount = (value?: number) => { abacusStateManager.setTransferValue({ value, - field: asset === DydxChainAsset.USDC ? TransferInputField.usdcSize : TransferInputField.size, + field: isUSDCSelected ? TransferInputField.usdcSize : TransferInputField.size, }); }; @@ -226,7 +230,7 @@ export const TransferForm = ({ value: DydxChainAsset.CHAINTOKEN, label: ( - {/* */} + {chainTokenLabel} ), @@ -249,15 +253,15 @@ export const TransferForm = ({ key: 'amount', label: ( - {stringGetter({ key: STRING_KEYS.AVAILABLE })} {tokensConfigs[asset].name} + {stringGetter({ key: STRING_KEYS.AVAILABLE })} {tokensConfigs[asset]?.name} ), value: ( @@ -340,8 +344,8 @@ export const TransferForm = ({ {assetOptions.map(({ value, label }) => ( @@ -355,12 +359,16 @@ export const TransferForm = ({ type={InputType.Number} onChange={({ floatValue }: NumberFormatValues) => onChangeAmount(floatValue)} value={amount ?? undefined} - slotRight={renderFormInputButton({ - label: stringGetter({ key: STRING_KEYS.MAX }), - isInputEmpty: size?.usdcSize == null, - onClear: () => onChangeAmount(undefined), - onClick: () => onChangeAmount(balanceBN.toNumber()), - })} + slotRight={ + isUSDCSelected && + balanceBN.gt(0) && + renderFormInputButton({ + label: stringGetter({ key: STRING_KEYS.MAX }), + isInputEmpty: size?.usdcSize == null, + onClear: () => onChangeAmount(undefined), + onClick: () => onChangeAmount(balanceBN.toNumber()), + }) + } disabled={isLoading} /> @@ -369,7 +377,7 @@ export const TransferForm = ({ {stringGetter({ key: STRING_KEYS.TRANSFER_INSUFFICIENT_GAS, - params: { USDC_BALANCE: `(${usdcBalance})` }, + params: { USDC_BALANCE: `(${usdcBalance} USDC)` }, })} )} @@ -379,9 +387,9 @@ export const TransferForm = ({ diff --git a/src/views/forms/TransferForm/TransferButtonAndReceipt.tsx b/src/views/forms/TransferForm/TransferButtonAndReceipt.tsx index 7e8c415..3e13ac7 100644 --- a/src/views/forms/TransferForm/TransferButtonAndReceipt.tsx +++ b/src/views/forms/TransferForm/TransferButtonAndReceipt.tsx @@ -23,14 +23,14 @@ import { MustBigNumber } from '@/lib/numbers'; type ElementProps = { selectedAsset: DydxChainAsset; - fees?: number; + fee?: number; isDisabled?: boolean; isLoading?: boolean; }; export const TransferButtonAndReceipt = ({ selectedAsset, - fees, + fee, isDisabled, isLoading, }: ElementProps) => { @@ -47,43 +47,46 @@ export const TransferButtonAndReceipt = ({ const { current: equity, postOrder: newEquity } = equityInfo || {}; const { current: leverage, postOrder: newLeverage } = leverageInfo || {}; - // TODO(@aforaleka): add wallet balance for DYDX - const balance = selectedAsset === DydxChainAsset.USDC ? equity : nativeTokenBalance; - const newBalance = - selectedAsset === DydxChainAsset.USDC - ? newEquity - : MustBigNumber(nativeTokenBalance) - .minus(size?.size ?? 0) - .toNumber(); + const isUSDCSelected = selectedAsset === DydxChainAsset.USDC; + + const balance = isUSDCSelected ? equity : nativeTokenBalance; + const newNativeTokenBalance = nativeTokenBalance + .minus(size?.size ?? 0) + .minus(fee ?? 0) // show balance after fees for button receipt + .toNumber(); + + const newBalance = isUSDCSelected ? newEquity : newNativeTokenBalance; const transferDetailItems = [ { key: 'fees', label: ( - {stringGetter({ key: STRING_KEYS.FEES })} {tokensConfigs[selectedAsset].name} + {stringGetter({ key: STRING_KEYS.FEES })} {tokensConfigs[selectedAsset]?.name} ), - value: , + value: , }, { key: 'balance', label: ( - {stringGetter({ key: STRING_KEYS.BALANCE })} {tokensConfigs[selectedAsset].name} + {stringGetter({ key: STRING_KEYS.BALANCE })}{' '} + {tokensConfigs[selectedAsset]?.name} ), value: ( ), }, - selectedAsset === DydxChainAsset.USDC && { + isUSDCSelected && { key: 'leverage', label: {stringGetter({ key: STRING_KEYS.LEVERAGE })}, value: (