Skip to content

Commit b3b762c

Browse files
tom2drumtom2drum
committed
minor fixes
1 parent ee239d1 commit b3b762c

6 files changed

Lines changed: 115 additions & 23 deletions

File tree

‎toolkit/utils/consts.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import BigNumber from 'bignumber.js';
22

3-
// TODO @tom2drum check usage of these constants
43
export const ZERO = new BigNumber(0);
54

65
export const SECOND = 1_000;

‎ui/block/details/BlockDetailsBaseFeeCelo.tsx‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,17 @@
1-
// TODO @tom2drum refactor this to use TokenValue
21
import { Box, Flex } from '@chakra-ui/react';
3-
import BigNumber from 'bignumber.js';
42
import React from 'react';
53

64
import type { AddressParam } from 'types/api/addressParams';
75
import type { BlockBaseFeeCelo } from 'types/api/block';
86
import type { TokenInfo } from 'types/api/token';
97

108
import { Link } from 'toolkit/chakra/link';
11-
import { WEI, ZERO_ADDRESS } from 'toolkit/utils/consts';
9+
import { ZERO_ADDRESS } from 'toolkit/utils/consts';
1210
import AddressFromTo from 'ui/shared/address/AddressFromTo';
1311
import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
1412
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
15-
import TokenEntity from 'ui/shared/entities/token/TokenEntity';
1613
import IconSvg from 'ui/shared/IconSvg';
14+
import TokenValue from 'ui/shared/value/TokenValue';
1715

1816
type ItemProps = BlockBaseFeeCelo['breakdown'][number] & {
1917
addressFrom: AddressParam;
@@ -26,10 +24,10 @@ const BreakDownItem = ({ amount, percentage, address, addressFrom, token }: Item
2624
return (
2725
<Flex alignItems="center" columnGap={ 2 } flexWrap="wrap">
2826
<Box color="text.secondary">{ percentage }% of amount</Box>
29-
<Flex columnGap={ 2 }>
30-
{ BigNumber(amount).dividedBy(WEI).toFixed() }
31-
<TokenEntity token={ token } noCopy onlySymbol/>
32-
</Flex>
27+
<TokenValue
28+
amount={ amount }
29+
token={ token }
30+
/>
3331
{ isBurning ? (
3432
<>
3533
<AddressEntity address={ addressFrom } truncation="constant"/>
@@ -46,8 +44,6 @@ interface Props {
4644
}
4745

4846
const BlockDetailsBaseFeeCelo = ({ data }: Props) => {
49-
const totalBaseFee = BigNumber(data.amount).dividedBy(WEI).toFixed();
50-
5147
const totalFeeLabel = (
5248
<Box whiteSpace="pre-wrap">
5349
<span>The FeeHandler regularly burns 80% of its tokens. Non-CELO tokens are swapped to CELO beforehand. The remaining 20% are sent to the </span>
@@ -70,10 +66,10 @@ const BlockDetailsBaseFeeCelo = ({ data }: Props) => {
7066
Base fee total
7167
</DetailedInfo.ItemLabel>
7268
<DetailedInfo.ItemValue multiRow flexDirection="column" alignItems="flex-start">
73-
<Flex columnGap={ 2 }>
74-
{ totalBaseFee }
75-
<TokenEntity token={ data.token } noCopy onlySymbol/>
76-
</Flex>
69+
<TokenValue
70+
amount={ data.amount }
71+
token={ data.token }
72+
/>
7773
{ data.breakdown.length > 0 && (
7874
<Flex flexDir="column" rowGap={ 2 } mt={ 2 }>
7975
{ data.breakdown.map((item, index) => (

‎ui/shared/value/AssetValue.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ export interface Props extends Omit<BoxProps, 'prefix' | 'suffix'>, Omit<Calcula
2020
tooltipContent?: React.ReactNode;
2121
}
2222

23-
// TODO @tom2drum refactor usage in favor of NativeCoinValue
2423
const AssetValue = ({
2524
amount,
2625
asset,

‎ui/shared/value/TokenValue.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@ import AssetValue from './AssetValue';
1313
interface Props extends Omit<AssetValueProps, 'asset'> {
1414
token: TokenInfo;
1515
tokenEntityProps?: Omit<TokenEntityProps, 'token'> & BoxProps;
16-
layer?: 'L1' | 'L2';
16+
layer?: 'L1';
1717
}
1818

19-
const TokenValue = ({ token, tokenEntityProps, layer = 'L1', ...rest }: Props) => {
19+
const TokenValue = ({ token, tokenEntityProps, layer, ...rest }: Props) => {
2020
const TokenComponent = layer === 'L1' ? TokenEntityL1 : TokenEntity;
2121

2222
const asset = (

‎ui/showcases/Values.tsx‎

Lines changed: 102 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import BigNumber from 'bignumber.js';
22
import React from 'react';
33

44
import AssetValue from 'ui/shared/value/AssetValue';
5+
import GasPriceValue from 'ui/shared/value/GasPriceValue';
6+
import NativeCoinValue from 'ui/shared/value/NativeCoinValue';
57
import SimpleValue from 'ui/shared/value/SimpleValue';
68
import TokenValue from 'ui/shared/value/TokenValue';
79

@@ -77,7 +79,100 @@ const ValuesShowcase = () => {
7779
</Section>
7880

7981
<Section>
80-
<SectionHeader>ValueWithUsd</SectionHeader>
82+
<SectionHeader>NativeCoinValue</SectionHeader>
83+
<SectionSubHeader>Units</SectionSubHeader>
84+
<SamplesStack>
85+
<Sample label="wei">
86+
<NativeCoinValue
87+
amount="1000000000000000000000000"
88+
units="wei"
89+
maxW="200px"
90+
/>
91+
</Sample>
92+
</SamplesStack>
93+
<SamplesStack>
94+
<Sample label="gwei">
95+
<NativeCoinValue
96+
amount="1000000000000000000000000"
97+
units="gwei"
98+
maxW="200px"
99+
/>
100+
</Sample>
101+
</SamplesStack>
102+
<SamplesStack>
103+
<Sample label="ether">
104+
<NativeCoinValue
105+
amount="1000000000000000000000000"
106+
units="ether"
107+
maxW="200px"
108+
/>
109+
</Sample>
110+
</SamplesStack>
111+
112+
<SectionSubHeader>Gwei threshold</SectionSubHeader>
113+
<SamplesStack>
114+
<Sample label="gweiThreshold: undefined">
115+
<NativeCoinValue
116+
amount="100000000000"
117+
units="wei"
118+
maxW="200px"
119+
/>
120+
</Sample>
121+
<Sample label="gweiThreshold: 5">
122+
<NativeCoinValue
123+
amount="100000000000"
124+
units="wei"
125+
gweiThreshold={ 5 }
126+
maxW="200px"
127+
/>
128+
</Sample>
129+
</SamplesStack>
130+
131+
<SectionSubHeader>Gwei tooltip</SectionSubHeader>
132+
<SamplesStack>
133+
<Sample label="true">
134+
<NativeCoinValue
135+
amount="100000000000"
136+
units="wei"
137+
gweiTooltip
138+
maxW="200px"
139+
/>
140+
</Sample>
141+
</SamplesStack>
142+
143+
<SectionSubHeader>Layout</SectionSubHeader>
144+
<SamplesStack>
145+
<Sample label="horizontal">
146+
<NativeCoinValue
147+
amount="1000000000000000"
148+
exchangeRate="4200"
149+
layout="horizontal"
150+
maxW="200px"
151+
/>
152+
</Sample>
153+
<Sample label="vertical">
154+
<NativeCoinValue
155+
amount="1000000000000000"
156+
exchangeRate="4200"
157+
layout="vertical"
158+
maxW="200px"
159+
/>
160+
</Sample>
161+
</SamplesStack>
162+
</Section>
163+
164+
<Section>
165+
<SectionHeader>TokenValue</SectionHeader>
166+
<SectionSubHeader>Examples</SectionSubHeader>
167+
<SamplesStack>
168+
<Sample label="convertible token">
169+
<TokenValue amount="1000000000000000000000000" token={ TOKEN } maxW="400px"/>
170+
</Sample>
171+
</SamplesStack>
172+
</Section>
173+
174+
<Section>
175+
<SectionHeader>AssetValue</SectionHeader>
81176
<SectionSubHeader>Layout</SectionSubHeader>
82177
<SamplesStack>
83178
<Sample label="horizontal">
@@ -126,14 +221,17 @@ const ValuesShowcase = () => {
126221
</Section>
127222

128223
<Section>
129-
<SectionHeader>TokenValue</SectionHeader>
224+
<SectionHeader>GasPriceValue</SectionHeader>
130225
<SectionSubHeader>Examples</SectionSubHeader>
131226
<SamplesStack>
132-
<Sample label="convertible token">
133-
<TokenValue amount="1000000000000000000000000" token={ TOKEN } maxW="400px"/>
227+
<Sample label="default">
228+
<GasPriceValue
229+
amount="420000"
230+
/>
134231
</Sample>
135232
</SamplesStack>
136233
</Section>
234+
137235
</Container>
138236
);
139237
};

‎ui/txnWithdrawals/arbitrumL2/ArbitrumL2TxnWithdrawalsValue.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const ArbitrumL2TxnWithdrawalsValue = ({ data, loading }: Props) => {
3131
<TokenValue
3232
amount={ data.token.amount ?? '0' }
3333
token={ token }
34-
layer="L2"
34+
layer="L1"
3535
tokenEntityProps={{ noIcon: true }}
3636
loading={ loading }
3737
/>

0 commit comments

Comments
 (0)