Skip to content

Commit 4e32a22

Browse files
kien-ngokien-ngo
committed
update
1 parent 7973d64 commit 4e32a22

File tree

4 files changed

+325
-253
lines changed

4 files changed

+325
-253
lines changed

‎packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx‎

Lines changed: 69 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import type { Account } from "../../../../../../wallets/interfaces/wallet.js";
1212
import type { WalletId } from "../../../../../../wallets/wallet-types.js";
1313
import {
1414
type Theme,
15+
fontSize,
1516
spacing,
1617
} from "../../../../../core/design-system/index.js";
1718
import type {
@@ -33,13 +34,15 @@ import {
3334
DrawerOverlay,
3435
useDrawer,
3536
} from "../../../components/Drawer.js";
37+
import { Skeleton } from "../../../components/Skeleton.js";
3638
import { Spacer } from "../../../components/Spacer.js";
3739
import { Spinner } from "../../../components/Spinner.js";
3840
import { SwitchNetworkButton } from "../../../components/SwitchNetwork.js";
3941
import { Container, Line, ModalHeader } from "../../../components/basic.js";
4042
import { Button } from "../../../components/buttons.js";
4143
import { Text } from "../../../components/text.js";
42-
import { TokenSymbol } from "../../../components/token/TokenSymbol.js";
44+
import { TokenProvider } from "../../../prebuilt/Token/provider.js";
45+
import { TokenSymbol } from "../../../prebuilt/Token/symbol.js";
4346
import { ConnectButton } from "../../ConnectButton.js";
4447
import { ChainButton, NetworkSelectorContent } from "../../NetworkSelector.js";
4548
import type { ConnectLocale } from "../../locale/types.js";
@@ -685,18 +688,37 @@ function SelectedTokenInfo(props: {
685688
</Text>
686689

687690
<Container flex="row" gap="xxs" center="y">
688-
<TokenSymbol
689-
token={props.selectedToken}
690-
chain={props.selectedChain}
691-
size="md"
692-
color="secondaryText"
693-
/>
694-
<PayTokenIcon
691+
<TokenProvider
692+
address={
693+
isNativeToken(props.selectedToken)
694+
? NATIVE_TOKEN_ADDRESS
695+
: props.selectedToken.address
696+
}
695697
chain={props.selectedChain}
696698
client={props.client}
697-
size="sm"
698-
token={props.selectedToken}
699-
/>
699+
>
700+
<Text size="md" color="secondaryText">
701+
<TokenSymbol
702+
symbolResolver={
703+
isNativeToken(props.selectedToken)
704+
? undefined
705+
: props.selectedToken.symbol
706+
}
707+
loadingComponent={
708+
<Skeleton width="70px" height={fontSize.md} />
709+
}
710+
fallbackComponent={
711+
<Skeleton width="70px" height={fontSize.md} />
712+
}
713+
/>
714+
</Text>
715+
<PayTokenIcon
716+
chain={props.selectedChain}
717+
client={props.client}
718+
size="sm"
719+
token={props.selectedToken}
720+
/>
721+
</TokenProvider>
700722
</Container>
701723
</Container>
702724

@@ -1138,16 +1160,24 @@ function SwapScreenContent(props: {
11381160
{errorMsg && (
11391161
<div>
11401162
{errorMsg.minAmount && (
1141-
<Text color="danger" size="sm" center multiline>
1142-
Minimum amount is {errorMsg.minAmount}{" "}
1143-
<TokenSymbol
1144-
token={toToken}
1145-
chain={toChain}
1146-
size="sm"
1147-
inline
1148-
color="danger"
1149-
/>
1150-
</Text>
1163+
<TokenProvider
1164+
address={
1165+
isNativeToken(toToken) ? NATIVE_TOKEN_ADDRESS : toToken.address
1166+
}
1167+
client={props.client}
1168+
chain={toChain}
1169+
>
1170+
<Text color="danger" size="sm" center multiline>
1171+
Minimum amount is {errorMsg.minAmount}{" "}
1172+
<Text color="danger" inline>
1173+
<TokenSymbol
1174+
symbolResolver={
1175+
isNativeToken(toToken) ? undefined : toToken.icon
1176+
}
1177+
/>
1178+
</Text>
1179+
</Text>
1180+
</TokenProvider>
11511181
)}
11521182

11531183
{errorMsg.msg?.map((msg) => (
@@ -1386,16 +1416,24 @@ function FiatScreenContent(props: {
13861416
{errorMsg && (
13871417
<div>
13881418
{errorMsg.minAmount && (
1389-
<Text color="danger" size="sm" center multiline>
1390-
Minimum amount is {errorMsg.minAmount}{" "}
1391-
<TokenSymbol
1392-
token={toToken}
1393-
chain={toChain}
1394-
size="sm"
1395-
inline
1396-
color="danger"
1397-
/>
1398-
</Text>
1419+
<TokenProvider
1420+
address={
1421+
isNativeToken(toToken) ? NATIVE_TOKEN_ADDRESS : toToken.address
1422+
}
1423+
client={props.client}
1424+
chain={toChain}
1425+
>
1426+
<Text color="danger" size="sm" center multiline>
1427+
Minimum amount is {errorMsg.minAmount}{" "}
1428+
<Text color="danger" inline>
1429+
<TokenSymbol
1430+
symbolResolver={
1431+
isNativeToken(toToken) ? undefined : toToken.icon
1432+
}
1433+
/>
1434+
</Text>
1435+
</Text>
1436+
</TokenProvider>
13991437
)}
14001438

14011439
{errorMsg.msg?.map((msg) => (

‎packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/pay-transactions/BuyTxHistoryButton.tsx‎

Lines changed: 66 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import styled from "@emotion/styled";
22
import { getCachedChain } from "../../../../../../../chains/utils.js";
33
import type { ThirdwebClient } from "../../../../../../../client/client.js";
4+
import { TokenProvider } from "../../../../../../../react/web/ui/prebuilt/Token/provider.js";
45
import { formatNumber } from "../../../../../../../utils/formatNumber.js";
56
import { useCustomTheme } from "../../../../../../core/design-system/CustomThemeProvider.js";
67
import { spacing } from "../../../../../../core/design-system/index.js";
@@ -37,73 +38,81 @@ export function BuyTxHistoryButton(props: {
3738
paddingBlock: spacing.sm,
3839
}}
3940
>
40-
<Container
41-
flex="row"
42-
center="y"
43-
gap="sm"
44-
style={{
45-
flex: 1,
46-
}}
41+
<TokenProvider
42+
address={props.txInfo.status.quote.toToken.tokenAddress}
43+
client={props.client}
44+
chain={getCachedChain(props.txInfo.status.quote.toToken.chainId)}
4745
>
48-
<PayTokenIcon
49-
client={props.client}
50-
chain={getCachedChain(props.txInfo.status.quote.toToken.chainId)}
51-
size="md"
52-
token={{
53-
address: props.txInfo.status.quote.toToken.tokenAddress,
54-
}}
55-
/>
56-
57-
<div
46+
<Container
47+
flex="row"
48+
center="y"
49+
gap="sm"
5850
style={{
5951
flex: 1,
60-
display: "flex",
61-
flexDirection: "column",
62-
justifyContent: "center",
6352
}}
6453
>
65-
{/* Row 1 */}
66-
<Container
67-
flex="row"
68-
gap="xs"
69-
center="y"
70-
style={{
71-
justifyContent: "space-between",
54+
<PayTokenIcon
55+
client={props.client}
56+
chain={getCachedChain(props.txInfo.status.quote.toToken.chainId)}
57+
size="md"
58+
token={{
59+
address: props.txInfo.status.quote.toToken.tokenAddress,
7260
}}
73-
>
74-
<Text size="sm" color="primaryText">
75-
Buy{" "}
76-
{formatNumber(
77-
Number(
78-
props.txInfo.type === "swap"
79-
? props.txInfo.status.quote.toAmount
80-
: props.txInfo.status.quote.estimatedToTokenAmount,
81-
),
82-
6,
83-
)}{" "}
84-
{props.txInfo.status.quote.toToken.symbol}
85-
</Text>
86-
</Container>
61+
/>
8762

88-
<Spacer y="xxs" />
89-
90-
{/* Row 2 */}
91-
<Container
92-
flex="row"
93-
center="y"
94-
gap="xxs"
63+
<div
9564
style={{
96-
justifyContent: "space-between",
65+
flex: 1,
66+
display: "flex",
67+
flexDirection: "column",
68+
justifyContent: "center",
9769
}}
9870
>
99-
<ChainName
100-
chain={getCachedChain(props.txInfo.status.quote.toToken.chainId)}
101-
size="xs"
102-
client={props.client}
103-
/>
104-
</Container>
105-
</div>
106-
</Container>
71+
{/* Row 1 */}
72+
<Container
73+
flex="row"
74+
gap="xs"
75+
center="y"
76+
style={{
77+
justifyContent: "space-between",
78+
}}
79+
>
80+
<Text size="sm" color="primaryText">
81+
Buy{" "}
82+
{formatNumber(
83+
Number(
84+
props.txInfo.type === "swap"
85+
? props.txInfo.status.quote.toAmount
86+
: props.txInfo.status.quote.estimatedToTokenAmount,
87+
),
88+
6,
89+
)}{" "}
90+
{props.txInfo.status.quote.toToken.symbol}
91+
</Text>
92+
</Container>
93+
94+
<Spacer y="xxs" />
95+
96+
{/* Row 2 */}
97+
<Container
98+
flex="row"
99+
center="y"
100+
gap="xxs"
101+
style={{
102+
justifyContent: "space-between",
103+
}}
104+
>
105+
<ChainName
106+
chain={getCachedChain(
107+
props.txInfo.status.quote.toToken.chainId,
108+
)}
109+
size="xs"
110+
client={props.client}
111+
/>
112+
</Container>
113+
</div>
114+
</Container>
115+
</TokenProvider>
107116

108117
{/* Status */}
109118
<Container flex="row" gap="xxs" center="y">

0 commit comments

Comments
 (0)