Skip to content

Commit

Permalink
feat(trading): use 2 dps for formatting (#46)
Browse files Browse the repository at this point in the history
* chore: format balances in deposits with 2 dps

* chore: use 2dps for formatting everywhere in sidebar
  • Loading branch information
oldalbus authored Oct 23, 2024
1 parent 0778bff commit 9158278
Show file tree
Hide file tree
Showing 7 changed files with 42 additions and 9 deletions.
19 changes: 16 additions & 3 deletions apps/trading/components/asset-option/asset-option.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,9 @@ import { type AssetERC20 } from '@vegaprotocol/assets';
import { Emblem } from '@vegaprotocol/emblem';
import { truncateMiddle } from '@vegaprotocol/ui-toolkit';
import { addDecimalsFormatNumber, isAssetNative } from '@vegaprotocol/utils';
import { getErc20Abi } from 'apps/trading/lib/utils/get-erc20-abi';
import { getErc20Abi } from '../../lib/utils/get-erc20-abi';
import { useAccount, useBalance, useReadContracts } from 'wagmi';
import { DEFAULT_DISPLAY_DPS } from '../../lib/constants';

export const AssetOption = ({
asset,
Expand Down Expand Up @@ -52,7 +53,15 @@ const NativeTokenBalance = (props: AssetBalanceProps) => {

if (!data) return null;

return <>{addDecimalsFormatNumber(data.value.toString(), data.decimals)}</>;
return (
<>
{addDecimalsFormatNumber(
data.value.toString(),
data.decimals,
DEFAULT_DISPLAY_DPS
)}
</>
);
};

const TokenBalance = (props: AssetBalanceProps) => {
Expand Down Expand Up @@ -85,5 +94,9 @@ const TokenBalance = (props: AssetBalanceProps) => {

if (!value || !decimals) return null;

return <>{addDecimalsFormatNumber(value.toString(), decimals)}</>;
return (
<>
{addDecimalsFormatNumber(value.toString(), decimals, DEFAULT_DISPLAY_DPS)}
</>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import {
DefaultBadge,
PendingBadge,
} from '../transaction-dialog/transaction-badge';
import { DEFAULT_DISPLAY_DPS } from '../../lib/constants';

type FeedbackDialogProps = {
data?: TxDeposit;
Expand Down Expand Up @@ -45,7 +46,11 @@ const Content = (props: { tx: TxDeposit }) => {
{t('Deposit')} <br />
{data && data.asset && (
<span className="text-surface-1-fg text-2xl">
{addDecimalsFormatNumber(data.amount, data.asset.decimals)}{' '}
{addDecimalsFormatNumber(
data.amount,
data.asset.decimals,
DEFAULT_DISPLAY_DPS
)}{' '}
{data.asset.symbol}
</span>
)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import { FormGroup } from '@vegaprotocol/ui-toolkit';
import { AssetOption } from '../../asset-option';
import { type AssetERC20 } from '@vegaprotocol/assets';
import { useT } from '../../../lib/use-t';
import { formatNumber } from '@vegaprotocol/utils';
import { DEFAULT_DISPLAY_DPS } from '../../../lib/constants';

export const ToAssetTargeted = (props: {
toAsset: AssetERC20;
Expand All @@ -10,7 +12,10 @@ export const ToAssetTargeted = (props: {
const t = useT();
return (
<FormGroup label={t('Asset')} labelFor="asset">
<AssetOption asset={props.toAsset} balance={props.balance} />
<AssetOption
asset={props.toAsset}
balance={formatNumber(props.balance, DEFAULT_DISPLAY_DPS)}
/>
</FormGroup>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ import { type QueryKey } from '@tanstack/react-query';
import { type RouteResponse } from '@0xsquid/sdk/dist/types';
import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
import { TokenOption } from '../token-option';
import { DEFAULT_DISPLAY_DPS } from '../../../lib/constants';

export function ToAsset(props: {
control: Control<FormFields>;
Expand Down Expand Up @@ -56,7 +57,8 @@ export function ToAsset(props: {
<>
{addDecimalsFormatNumber(
estimate.toAmount,
token.decimals
token.decimals,
DEFAULT_DISPLAY_DPS
)}
</>
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ import { AccountType } from '@vegaprotocol/types';
import { BRIDGE_ABI } from '@vegaprotocol/smart-contracts';

import { useT } from '../../lib/use-t';
import { APP_TOKEN_ID } from '../../lib/constants';
import { APP_TOKEN_ID, DEFAULT_DISPLAY_DPS } from '../../lib/constants';

import {
FormSecondaryActionButton,
Expand Down Expand Up @@ -297,7 +297,8 @@ const WithdrawForm = ({
asset={asset}
balance={addDecimalsFormatNumber(
a.balance,
asset.decimals
asset.decimals,
DEFAULT_DISPLAY_DPS
)}
/>
</TradingRichSelectOption>
Expand Down
2 changes: 2 additions & 0 deletions apps/trading/lib/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,3 +15,5 @@ export const ONBOARDING_TARGET_ASSET = APP_TOKEN_ID;
// be done if the swap was not successfull
export const SQUID_RECEIVER_ADDRESS =
'0xE7477a9aDb9BA0d00Af8f4d8e5E53A532C650ffa' as Address;

export const DEFAULT_DISPLAY_DPS = 2;
7 changes: 6 additions & 1 deletion libs/accounts/src/lib/transfer-form.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
toBigNum,
removeDecimal,
addDecimalsFormatNumber,
formatNumber,
} from '@vegaprotocol/utils';
import { useT } from './use-t';
import {
Expand All @@ -32,6 +33,8 @@ import { useTransferFeeQuery } from './__generated__/TransferFee';
import { normalizeTransfer } from './utils';
import { Emblem } from '@vegaprotocol/emblem';

const DEFAULT_DISPLAY_DPS = 2;

interface FormFields {
toVegaKey: string;
asset: string; // This is used to simply filter the from account list, the fromAccount type should be used in the tx
Expand Down Expand Up @@ -607,7 +610,9 @@ const AssetOption = ({
: asset.source.__typename}
</div>
</div>
<div className="ml-auto text-sm">{asset.balance}</div>
<div className="ml-auto text-sm">
{formatNumber(asset.balance, DEFAULT_DISPLAY_DPS)}
</div>
</div>
);
};

0 comments on commit 9158278

Please sign in to comment.