Skip to content

Commit

Permalink
Added comma separated numbers to the activity section and receipt page (
Browse files Browse the repository at this point in the history
MystenLabs#4133)

* added comma seperated numbers to activity section and receipt page- remove the send btn on coins screen

* added balanceFormatOptions to amount field
  • Loading branch information
Jibz1 authored Aug 18, 2022
1 parent 6b98051 commit 0da98d2
Show file tree
Hide file tree
Showing 5 changed files with 39 additions and 15 deletions.
18 changes: 16 additions & 2 deletions wallet/src/ui/app/components/receipt-card/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,15 @@
// SPDX-License-Identifier: Apache-2.0

import cl from 'classnames';
import { useIntl } from 'react-intl';

import ExplorerLink from '_components/explorer-link';
import { ExplorerLinkType } from '_components/explorer-link/ExplorerLinkType';
import Icon, { SuiIcons } from '_components/icon';
import { formatDate } from '_helpers';
import { useFileExtentionType } from '_hooks';
import { GAS_SYMBOL } from '_redux/slices/sui-objects/Coin';
import { balanceFormatOptions } from '_shared/formatting';

import type { TxResultState } from '_redux/slices/txresults';

Expand All @@ -25,6 +27,8 @@ function ReceiptCard({ tranferType, txDigest }: TxResponseProps) {
? cl(st.arrowActionIcon, st.angledArrow)
: cl(st.arrowActionIcon, st.buyIcon);

const intl = useIntl();

const imgUrl = txDigest?.url
? txDigest?.url.replace(/^ipfs:\/\//, 'https://ipfs.io/ipfs/')
: false;
Expand Down Expand Up @@ -96,7 +100,11 @@ function ReceiptCard({ tranferType, txDigest }: TxResponseProps) {
{AssetCard}
{txDigest.amount && (
<div className={st.amount}>
{txDigest.amount} <span>{GAS_SYMBOL}</span>
{intl.formatNumber(
BigInt(txDigest.amount || 0),
balanceFormatOptions
)}{' '}
<span>{GAS_SYMBOL}</span>
</div>
)}
<div
Expand Down Expand Up @@ -128,7 +136,13 @@ function ReceiptCard({ tranferType, txDigest }: TxResponseProps) {
<div className={st.txFees}>
<div className={st.txInfoLabel}>Total Amount</div>
<div className={st.walletInfoValue}>
{txDigest.amount + txDigest.txGas} {GAS_SYMBOL}
{intl.formatNumber(
BigInt(
txDigest.amount + txDigest.txGas || 0
),
balanceFormatOptions
)}{' '}
{GAS_SYMBOL}
</div>
</div>
)}
Expand Down
10 changes: 9 additions & 1 deletion wallet/src/ui/app/components/transactions-card/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,14 @@

import cl from 'classnames';
import { memo } from 'react';
import { useIntl } from 'react-intl';
import { Link } from 'react-router-dom';

import Icon, { SuiIcons } from '_components/icon';
import { formatDate } from '_helpers';
import { useMiddleEllipsis } from '_hooks';
import { GAS_SYMBOL } from '_redux/slices/sui-objects/Coin';
import { balanceFormatOptions } from '_shared/formatting';

import type { TxResultState } from '_redux/slices/txresults';

Expand All @@ -29,6 +31,8 @@ function TransactionCard({ txn }: { txn: TxResultState }) {
TRUNCATE_PREFIX_LENGTH
);

const intl = useIntl();

const transferStatus = txn.status === 'success' ? 'Checkmark' : 'Close';

//TODO update the logic to account for other transfer type
Expand Down Expand Up @@ -90,7 +94,11 @@ function TransactionCard({ txn }: { txn: TxResultState }) {
{txn.amount && (
<>
<div className={st.txAmount}>
{txn.amount} {GAS_SYMBOL}
{intl.formatNumber(
BigInt(txn.amount || 0),
balanceFormatOptions
)}{' '}
{GAS_SYMBOL}
</div>
<div className={st.txFiatValue}></div>
</>
Expand Down
9 changes: 1 addition & 8 deletions wallet/src/ui/app/pages/home/tokens/coin-balance/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
import cl from 'classnames';
import { memo, useMemo } from 'react';
import { useIntl } from 'react-intl';
import { Link } from 'react-router-dom';

import { useMiddleEllipsis } from '_hooks';
import { Coin } from '_redux/slices/sui-objects/Coin';
Expand All @@ -26,10 +25,7 @@ function CoinBalance({ type, balance, mode = 'row-item' }: CoinProps) {
() => intl.formatNumber(balance, balanceFormatOptions),
[intl, balance]
);
const sendUrl = useMemo(
() => `/send?${new URLSearchParams({ type }).toString()}`,
[type]
);

const shortenType = useMiddleEllipsis(type, 30);
return (
<div className={cl(st.container, st[mode])}>
Expand All @@ -45,9 +41,6 @@ function CoinBalance({ type, balance, mode = 'row-item' }: CoinProps) {
{shortenType}
</span>
) : null}
<Link className={cl('btn', st.action)} to={sendUrl}>
Send
</Link>
</div>
</div>
);
Expand Down
5 changes: 3 additions & 2 deletions wallet/src/ui/app/pages/home/tokens/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,9 @@ function TokensPage() {
/>
<IconLink
icon={SuiIcons.HandCoins}
to="/"
disabled={true}
to={`/send?${new URLSearchParams({
type: GAS_TYPE_ARG,
}).toString()}`}
text="Send & Receive"
/>
<IconLink
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import AddressInput from '_components/address-input';
import Icon, { SuiIcons } from '_components/icon';
import LoadingIndicator from '_components/loading/LoadingIndicator';
import { DEFAULT_GAS_BUDGET_FOR_TRANSFER } from '_redux/slices/sui-objects/Coin';
import { balanceFormatOptions } from '_shared/formatting';

import type { FormValues } from '../';

Expand Down Expand Up @@ -76,7 +77,10 @@ function StepTwo({

<div className={st.responseCard}>
<div className={st.amount}>
{intl.formatNumber(BigInt(amount || 0))}{' '}
{intl.formatNumber(
BigInt(amount || 0),
balanceFormatOptions
)}{' '}
<span>{coinSymbol}</span>
</div>

Expand All @@ -94,7 +98,11 @@ function StepTwo({
Total Amount
</div>
<div className={st.walletInfoValue}>
{totalAmount} {coinSymbol}
{intl.formatNumber(
BigInt(totalAmount || 0),
balanceFormatOptions
)}{' '}
{coinSymbol}
</div>
</div>
</div>
Expand Down

0 comments on commit 0da98d2

Please sign in to comment.