Polishes for Onboarding
This commit is contained in:
Bill He
parent
fdd3fbd774
commit
1e7568ab96
@ -51,7 +51,7 @@ export const TransferStatusSteps = ({ status }: ElementProps) => {
|
||||
label: stringGetter({
|
||||
key: type === 'deposit' ? STRING_KEYS.DEPOSIT_TO_CHAIN : STRING_KEYS.WITHDRAW_TO_CHAIN,
|
||||
params: {
|
||||
CHAIN: status?.toChain?.chainData?.chainName,
|
||||
CHAIN: type === 'deposit' ? 'dYdX' : status?.toChain?.chainData?.chainName,
|
||||
},
|
||||
}),
|
||||
step: TransferStatusStep.ToChain,
|
||||
|
||||
@ -165,8 +165,8 @@ export const GenerateKeys = ({
|
||||
{[
|
||||
{
|
||||
status: EvmDerivedAccountStatus.Deriving,
|
||||
title: stringGetter({ key: STRING_KEYS.GENERATE_COSMOS_WALLET }),
|
||||
description: stringGetter({ key: STRING_KEYS.GENERATE_COSMOS_WALLET }),
|
||||
title: stringGetter({ key: STRING_KEYS.GENERATE_DYDX_WALLET }),
|
||||
description: stringGetter({ key: STRING_KEYS.VERIFY_WALLET_OWNERSHIP }),
|
||||
},
|
||||
status === EvmDerivedAccountStatus.EnsuringDeterminism && {
|
||||
status: EvmDerivedAccountStatus.EnsuringDeterminism,
|
||||
|
||||
@ -168,6 +168,19 @@ export const DepositButtonAndReceipt = ({
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'estimatedRouteDuration',
|
||||
label: <span>{stringGetter({ key: STRING_KEYS.ESTIMATED_TIME })}</span>,
|
||||
value: typeof summary?.estimatedRouteDuration === 'number' && (
|
||||
<Output
|
||||
type={OutputType.Text}
|
||||
value={stringGetter({
|
||||
key: STRING_KEYS.X_MINUTES_LOWERCASED,
|
||||
params: { X: Math.round(summary?.estimatedRouteDuration / 60) },
|
||||
})}
|
||||
/>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const isFormValid = !isDisabled && !isEditingSlippage;
|
||||
|
||||
@ -26,6 +26,7 @@ import { Link } from '@/components/Link';
|
||||
import { OutputType } from '@/components/Output';
|
||||
import { Tag } from '@/components/Tag';
|
||||
import { WithDetailsReceipt } from '@/components/WithDetailsReceipt';
|
||||
import { Icon, IconName } from '@/components/Icon';
|
||||
|
||||
import { ChainSelectMenu } from '@/views/forms/AccountManagementForms/ChainSelectMenu';
|
||||
|
||||
@ -37,6 +38,7 @@ import { MustBigNumber } from '@/lib/numbers';
|
||||
|
||||
import { TokenSelectMenu } from './TokenSelectMenu';
|
||||
import { WithdrawButtonAndReceipt } from './WithdrawForm/WithdrawButtonAndReceipt';
|
||||
import { isAddress } from 'viem';
|
||||
|
||||
export const WithdrawForm = () => {
|
||||
const stringGetter = useStringGetter();
|
||||
@ -59,6 +61,8 @@ export const WithdrawForm = () => {
|
||||
resources,
|
||||
} = useSelector(getTransferInputs, shallowEqual) || {};
|
||||
|
||||
const isValidAddress = toAddress && isAddress(toAddress);
|
||||
|
||||
const toToken = useMemo(
|
||||
() => (token ? resources?.tokenResources?.get(token) : undefined),
|
||||
[token, resources]
|
||||
@ -179,7 +183,6 @@ export const WithdrawForm = () => {
|
||||
|
||||
const onSelectChain = useCallback((chain: string) => {
|
||||
if (chain) {
|
||||
abacusStateManager.clearTransferInputValues();
|
||||
abacusStateManager.setTransferValue({
|
||||
field: TransferInputField.chain,
|
||||
value: chain,
|
||||
@ -190,7 +193,6 @@ export const WithdrawForm = () => {
|
||||
|
||||
const onSelectToken = useCallback((token: TransferInputTokenResource) => {
|
||||
if (token) {
|
||||
abacusStateManager.clearTransferInputValues();
|
||||
abacusStateManager.setTransferValue({
|
||||
field: TransferInputField.token,
|
||||
value: token.address,
|
||||
@ -265,7 +267,12 @@ export const WithdrawForm = () => {
|
||||
placeholder={stringGetter({ key: STRING_KEYS.ADDRESS })}
|
||||
onChange={onChangeAddress}
|
||||
value={toAddress || ''}
|
||||
label={stringGetter({ key: STRING_KEYS.DESTINATION })}
|
||||
label={
|
||||
<span>
|
||||
{stringGetter({ key: STRING_KEYS.DESTINATION })}{' '}
|
||||
{isValidAddress ? <Styled.CheckIcon iconName={IconName.Check} /> : null}
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
<ChainSelectMenu
|
||||
label={stringGetter({ key: STRING_KEYS.NETWORK })}
|
||||
@ -342,3 +349,10 @@ Styled.TransactionInfo = styled.span`
|
||||
Styled.FormInputButton = styled(Button)`
|
||||
${formMixins.inputInnerButton}
|
||||
`;
|
||||
|
||||
Styled.CheckIcon = styled(Icon)`
|
||||
margin: 0 1ch;
|
||||
|
||||
color: var(--color-positive);
|
||||
font-size: 0.625rem;
|
||||
`;
|
||||
|
||||
@ -1,14 +1,19 @@
|
||||
import { useState } from 'react';
|
||||
import { shallowEqual, useSelector } from 'react-redux';
|
||||
import styled, { type AnyStyledComponent } from 'styled-components';
|
||||
import { formatUnits } from 'viem';
|
||||
|
||||
import { TransferInputTokenResource } from '@/constants/abacus';
|
||||
import { ButtonAction, ButtonShape, ButtonSize, ButtonType } from '@/constants/buttons';
|
||||
import { STRING_KEYS } from '@/constants/localization';
|
||||
import { NumberSign } from '@/constants/numbers';
|
||||
|
||||
import { formatSeconds } from '@/lib/timeUtils';
|
||||
|
||||
import { layoutMixins } from '@/styles/layoutMixins';
|
||||
|
||||
import { useStringGetter } from '@/hooks';
|
||||
import { useAccountBalance } from '@/hooks/useAccountBalance';
|
||||
import { layoutMixins } from '@/styles/layoutMixins';
|
||||
|
||||
import { Button } from '@/components/Button';
|
||||
|
||||
@ -16,6 +21,7 @@ import { Details, DetailsItem } from '@/components/Details';
|
||||
import { DiffOutput } from '@/components/DiffOutput';
|
||||
import { Icon, IconName } from '@/components/Icon';
|
||||
import { Output, OutputType } from '@/components/Output';
|
||||
import { Tag } from '@/components/Tag';
|
||||
import { ToggleButton } from '@/components/ToggleButton';
|
||||
import { WithReceipt } from '@/components/WithReceipt';
|
||||
|
||||
@ -49,22 +55,14 @@ export const WithdrawButtonAndReceipt = ({
|
||||
const [isEditingSlippage, setIsEditingSlipapge] = useState(false);
|
||||
const stringGetter = useStringGetter();
|
||||
|
||||
// TODO: uncomment when we have a way to get token amount estimate from abacus
|
||||
// const { balance, queryStatus } = useAccountBalance({
|
||||
// addressOrDenom: withdrawToken?.address || undefined,
|
||||
// assetSymbol: withdrawToken?.symbol || undefined,
|
||||
// chainId: withdrawChain ? parseInt(withdrawChain) : undefined,
|
||||
// decimals: withdrawToken?.decimals || undefined,
|
||||
// isCosmosChain: false,
|
||||
// });
|
||||
|
||||
// const balanceBN = MustBigNumber(balance);
|
||||
// const newBalance =
|
||||
// // toAmountMin && withdrawToken && parseUnits(toAmountMin, withdrawToken.decimals).toString();
|
||||
|
||||
const { leverage } = useSelector(getSubaccount, shallowEqual) || {};
|
||||
const { summary, requestPayload } = useSelector(getTransferInputs, shallowEqual) || {};
|
||||
|
||||
const toAmount =
|
||||
summary?.toAmount &&
|
||||
withdrawToken?.decimals &&
|
||||
formatUnits(BigInt(summary.toAmount), withdrawToken?.decimals);
|
||||
|
||||
const feeSubitems: DetailsItem[] = [];
|
||||
|
||||
if (typeof summary?.gasFee === 'number') {
|
||||
@ -98,9 +96,27 @@ export const WithdrawButtonAndReceipt = ({
|
||||
),
|
||||
subitems: feeSubitems,
|
||||
},
|
||||
{
|
||||
key: 'wallet',
|
||||
label: (
|
||||
<span>
|
||||
{stringGetter({ key: STRING_KEYS.AMOUNT_RECEIVED })}{' '}
|
||||
{withdrawToken && <Tag>{withdrawToken?.symbol}</Tag>}
|
||||
</span>
|
||||
),
|
||||
value: (
|
||||
<Styled.DiffOutput
|
||||
type={OutputType.Asset}
|
||||
value={'0'}
|
||||
newValue={toAmount}
|
||||
sign={NumberSign.Positive}
|
||||
withDiff={Boolean(toAmount)}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'leverage',
|
||||
label: <span>{stringGetter({ key: STRING_KEYS.LEVERAGE })}</span>,
|
||||
label: <span>{stringGetter({ key: STRING_KEYS.ACCOUNT_LEVERAGE })}</span>,
|
||||
value: (
|
||||
<Styled.DiffOutput
|
||||
type={OutputType.Multiple}
|
||||
@ -137,25 +153,19 @@ export const WithdrawButtonAndReceipt = ({
|
||||
/>
|
||||
),
|
||||
},
|
||||
// TODO: uncomment when we have a way to get token amount estimate from abacus
|
||||
// {
|
||||
// key: 'wallet',
|
||||
// label: (
|
||||
// <span>
|
||||
// {stringGetter({ key: STRING_KEYS.WALLET })}{' '}
|
||||
// {withdrawToken && <Tag>{withdrawToken?.symbol}</Tag>}
|
||||
// </span>
|
||||
// ),
|
||||
// value: (
|
||||
// <Styled.DiffOutput
|
||||
// type={OutputType.Asset}
|
||||
// value={balanceBN?.toString()}
|
||||
// newValue={newBalance}
|
||||
// sign={NumberSign.Negative}
|
||||
// withDiff={Boolean(balance !== newBalance)}
|
||||
// />
|
||||
// ),
|
||||
// },
|
||||
{
|
||||
key: 'estimatedRouteDuration',
|
||||
label: <span>{stringGetter({ key: STRING_KEYS.ESTIMATED_TIME })}</span>,
|
||||
value: typeof summary?.estimatedRouteDuration === 'number' && (
|
||||
<Output
|
||||
type={OutputType.Text}
|
||||
value={stringGetter({
|
||||
key: STRING_KEYS.X_MINUTES_LOWERCASED,
|
||||
params: { X: Math.round(summary?.estimatedRouteDuration / 60) },
|
||||
})}
|
||||
/>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
const isFormValid = !isDisabled && !isEditingSlippage;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user