Skip to content

Commit a486c8a

Browse files
joaquim-vergesjoaquim-verges
committed
code cleanup
1 parent c6737a0 commit a486c8a

File tree

15 files changed

+121
-99
lines changed

15 files changed

+121
-99
lines changed

‎packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,11 +19,11 @@ import { Container } from "../components/basic.js";
1919
import { DirectPayment } from "./DirectPayment.js";
2020
import { ErrorBanner } from "./ErrorBanner.js";
2121
import { FundWallet } from "./FundWallet.js";
22-
import { PaymentDetails } from "./PaymentDetails.js";
2322
import { QuoteLoader } from "./QuoteLoader.js";
2423
import { StepRunner } from "./StepRunner.js";
25-
import { SuccessScreen } from "./SuccessScreen.js";
24+
import { PaymentDetails } from "./payment-details/PaymentDetails.js";
2625
import { PaymentSelection } from "./payment-selection/PaymentSelection.js";
26+
import { SuccessScreen } from "./payment-success/SuccessScreen.js";
2727

2828
export type UIOptions =
2929
| {

‎packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import { Spacer } from "../components/Spacer.js";
1616
import { Container, Line } from "../components/basic.js";
1717
import { Button } from "../components/buttons.js";
1818
import { Text } from "../components/text.js";
19-
import { ChainIcon } from "./TokenAndChain.js";
19+
import { ChainIcon } from "./common/TokenAndChain.js";
2020

2121
export interface DirectPaymentProps {
2222
/**

‎packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import { Container, ModalHeader } from "../components/basic.js";
1919
import { Button } from "../components/buttons.js";
2020
import { Input } from "../components/formElements.js";
2121
import { Text } from "../components/text.js";
22-
import { TokenAndChain } from "./TokenAndChain.js";
22+
import { TokenAndChain } from "./common/TokenAndChain.js";
2323

2424
export interface FundWalletProps {
2525
/**

‎packages/thirdweb/src/react/web/ui/Bridge/TokenAndChain.tsx‎ renamed to ‎packages/thirdweb/src/react/web/ui/Bridge/common/TokenAndChain.tsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
import { useMemo } from "react";
2-
import type { Token } from "../../../../bridge/index.js";
3-
import type { Chain } from "../../../../chains/types.js";
4-
import { getCachedChain } from "../../../../chains/utils.js";
5-
import type { ThirdwebClient } from "../../../../client/client.js";
6-
import { NATIVE_TOKEN_ADDRESS } from "../../../../constants/addresses.js";
7-
import { resolveScheme } from "../../../../utils/ipfs.js";
8-
import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
9-
import { iconSize } from "../../../core/design-system/index.js";
2+
import type { Token } from "../../../../../bridge/index.js";
3+
import type { Chain } from "../../../../../chains/types.js";
4+
import { getCachedChain } from "../../../../../chains/utils.js";
5+
import type { ThirdwebClient } from "../../../../../client/client.js";
6+
import { NATIVE_TOKEN_ADDRESS } from "../../../../../constants/addresses.js";
7+
import { resolveScheme } from "../../../../../utils/ipfs.js";
8+
import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
9+
import { iconSize } from "../../../../core/design-system/index.js";
1010
import {
1111
useChainIconUrl,
1212
useChainMetadata,
13-
} from "../../../core/hooks/others/useChainQuery.js";
14-
import { genericTokenIcon } from "../../../core/utils/walletIcon.js";
15-
import { CoinsIcon } from "../ConnectWallet/icons/CoinsIcon.js";
16-
import { isNativeToken } from "../ConnectWallet/screens/nativeToken.js";
17-
import { ChainName } from "../components/ChainName.js";
18-
import { Img } from "../components/Img.js";
19-
import { Container } from "../components/basic.js";
20-
import { fallbackChainIcon } from "../components/fallbackChainIcon.js";
21-
import { Text } from "../components/text.js";
13+
} from "../../../../core/hooks/others/useChainQuery.js";
14+
import { genericTokenIcon } from "../../../../core/utils/walletIcon.js";
15+
import { CoinsIcon } from "../../ConnectWallet/icons/CoinsIcon.js";
16+
import { isNativeToken } from "../../ConnectWallet/screens/nativeToken.js";
17+
import { ChainName } from "../../components/ChainName.js";
18+
import { Img } from "../../components/Img.js";
19+
import { Container } from "../../components/basic.js";
20+
import { fallbackChainIcon } from "../../components/fallbackChainIcon.js";
21+
import { Text } from "../../components/text.js";
2222

2323
export function TokenAndChain({
2424
token,

‎packages/thirdweb/src/react/web/ui/Bridge/TokenBalanceRow.tsx‎ renamed to ‎packages/thirdweb/src/react/web/ui/Bridge/common/TokenBalanceRow.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import styled from "@emotion/styled";
2-
import type { Token } from "../../../../bridge/index.js";
3-
import { getCachedChain } from "../../../../chains/utils.js";
4-
import type { ThirdwebClient } from "../../../../client/client.js";
5-
import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
6-
import { spacing } from "../../../core/design-system/index.js";
7-
import { FiatValue } from "../ConnectWallet/screens/Buy/swap/FiatValue.js";
8-
import { Container } from "../components/basic.js";
9-
import { Button } from "../components/buttons.js";
10-
import { Text } from "../components/text.js";
2+
import type { Token } from "../../../../../bridge/index.js";
3+
import { getCachedChain } from "../../../../../chains/utils.js";
4+
import type { ThirdwebClient } from "../../../../../client/client.js";
5+
import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
6+
import { spacing } from "../../../../core/design-system/index.js";
7+
import { FiatValue } from "../../ConnectWallet/screens/Buy/swap/FiatValue.js";
8+
import { Container } from "../../components/basic.js";
9+
import { Button } from "../../components/buttons.js";
10+
import { Text } from "../../components/text.js";
1111
import { TokenAndChain } from "./TokenAndChain.js";
1212

1313
export function TokenBalanceRow({

‎packages/thirdweb/src/react/web/ui/Bridge/PaymentDetails.tsx‎ renamed to ‎packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
"use client";
2-
import type { ThirdwebClient } from "../../../../client/client.js";
3-
import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
4-
import { radius, spacing } from "../../../core/design-system/index.js";
5-
import type { BridgePrepareResult } from "../../../core/hooks/useBridgePrepare.js";
6-
import type { PaymentMethod } from "../../../core/machines/paymentMachine.js";
7-
import {} from "../ConnectWallet/screens/Buy/fiat/currencies.js";
2+
import type { ThirdwebClient } from "../../../../../client/client.js";
3+
import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
4+
import { radius, spacing } from "../../../../core/design-system/index.js";
5+
import type { BridgePrepareResult } from "../../../../core/hooks/useBridgePrepare.js";
6+
import type { PaymentMethod } from "../../../../core/machines/paymentMachine.js";
7+
import {} from "../../ConnectWallet/screens/Buy/fiat/currencies.js";
88
import {
99
formatCurrencyAmount,
1010
formatTokenAmount,
11-
} from "../ConnectWallet/screens/formatTokenBalance.js";
12-
import { Spacer } from "../components/Spacer.js";
13-
import { Container, ModalHeader } from "../components/basic.js";
14-
import { Button } from "../components/buttons.js";
15-
import { Text } from "../components/text.js";
16-
import type { UIOptions } from "./BridgeOrchestrator.js";
11+
} from "../../ConnectWallet/screens/formatTokenBalance.js";
12+
import { Spacer } from "../../components/Spacer.js";
13+
import { Container, ModalHeader } from "../../components/basic.js";
14+
import { Button } from "../../components/buttons.js";
15+
import { Text } from "../../components/text.js";
16+
import type { UIOptions } from "../BridgeOrchestrator.js";
1717
import { PaymentOverview } from "./PaymentOverview.js";
1818

1919
export interface PaymentDetailsProps {

‎packages/thirdweb/src/react/web/ui/Bridge/PaymentOverview.tsx‎ renamed to ‎packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx‎

Lines changed: 37 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
1-
import type { Token } from "../../../../bridge/index.js";
2-
import type { ThirdwebClient } from "../../../../client/client.js";
3-
import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
4-
import { radius } from "../../../core/design-system/index.js";
5-
import type { PaymentMethod } from "../../../core/machines/paymentMachine.js";
6-
import { getFiatCurrencyIcon } from "../ConnectWallet/screens/Buy/fiat/currencies.js";
7-
import { StepConnectorArrow } from "../ConnectWallet/screens/Buy/swap/StepConnector.js";
8-
import { WalletRow } from "../ConnectWallet/screens/Buy/swap/WalletRow.js";
9-
import { Container } from "../components/basic.js";
10-
import { Text } from "../components/text.js";
11-
import type { UIOptions } from "./BridgeOrchestrator.js";
12-
import { TokenBalanceRow } from "./TokenBalanceRow.js";
1+
import type { Token } from "../../../../../bridge/index.js";
2+
import { defineChain } from "../../../../../chains/utils.js";
3+
import type { ThirdwebClient } from "../../../../../client/client.js";
4+
import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
5+
import { radius } from "../../../../core/design-system/index.js";
6+
import type { PaymentMethod } from "../../../../core/machines/paymentMachine.js";
7+
import { getFiatCurrencyIcon } from "../../ConnectWallet/screens/Buy/fiat/currencies.js";
8+
import { FiatValue } from "../../ConnectWallet/screens/Buy/swap/FiatValue.js";
9+
import { StepConnectorArrow } from "../../ConnectWallet/screens/Buy/swap/StepConnector.js";
10+
import { WalletRow } from "../../ConnectWallet/screens/Buy/swap/WalletRow.js";
11+
import { Container } from "../../components/basic.js";
12+
import { Text } from "../../components/text.js";
13+
import type { UIOptions } from "../BridgeOrchestrator.js";
14+
import { TokenBalanceRow } from "../common/TokenBalanceRow.js";
1315

1416
export function PaymentOverview(props: {
1517
uiOptions: UIOptions;
@@ -44,7 +46,8 @@ export function PaymentOverview(props: {
4446
<Container
4547
flex="row"
4648
gap="sm"
47-
p="sm"
49+
px="md"
50+
py="sm"
4851
style={{
4952
borderBottom: `1px solid ${theme.colors.borderColor}`,
5053
}}
@@ -115,7 +118,8 @@ export function PaymentOverview(props: {
115118
<Container
116119
flex="row"
117120
gap="sm"
118-
p="sm"
121+
px="md"
122+
py="sm"
119123
style={{
120124
borderBottom: `1px solid ${theme.colors.borderColor}`,
121125
}}
@@ -146,9 +150,25 @@ export function PaymentOverview(props: {
146150
</Text>
147151
)}
148152
</Container>
149-
<Text size="sm" color="secondaryText">
150-
{props.uiOptions.paymentInfo.amount} {props.toToken.symbol}
151-
</Text>
153+
<Container
154+
flex="column"
155+
gap="3xs"
156+
center="y"
157+
style={{ alignItems: "flex-end" }}
158+
>
159+
<FiatValue
160+
tokenAmount={props.uiOptions.paymentInfo.amount}
161+
token={props.toToken}
162+
client={props.client}
163+
chain={defineChain(props.toToken.chainId)}
164+
weight={600}
165+
color="primaryText"
166+
size="sm"
167+
/>
168+
<Text size="xs" color="secondaryText">
169+
{props.uiOptions.paymentInfo.amount} {props.toToken.symbol}
170+
</Text>
171+
</Container>
152172
</Container>
153173
)}
154174
{props.uiOptions.mode === "fund_wallet" && (

‎packages/thirdweb/src/react/web/ui/Bridge/payment-selection/TokenSelection.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import { Spacer } from "../../components/Spacer.js";
1111
import { Container } from "../../components/basic.js";
1212
import { Button } from "../../components/buttons.js";
1313
import { Text } from "../../components/text.js";
14-
import { TokenAndChain } from "../TokenAndChain.js";
14+
import { TokenAndChain } from "../common/TokenAndChain.js";
1515

1616
export interface TokenSelectionProps {
1717
paymentMethods: PaymentMethod[];
@@ -193,7 +193,7 @@ export function TokenSelection({
193193
flex="column"
194194
gap="sm"
195195
style={{
196-
maxHeight: "60vh",
196+
maxHeight: "400px",
197197
overflowY: "auto",
198198
scrollbarWidth: "none",
199199
}}

‎packages/thirdweb/src/react/web/ui/Bridge/PaymentSuccessDetails.tsx‎ renamed to ‎packages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsx‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,25 @@
22
import { CopyIcon } from "@radix-ui/react-icons";
33
import { useQuery } from "@tanstack/react-query";
44
import { useCallback } from "react";
5-
import type { Token } from "../../../../bridge/types/Token.js";
6-
import type { ChainMetadata } from "../../../../chains/types.js";
7-
import { defineChain, getChainMetadata } from "../../../../chains/utils.js";
8-
import { shortenHex } from "../../../../utils/address.js";
9-
import type { WindowAdapter } from "../../../core/adapters/WindowAdapter.js";
10-
import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
5+
import type { Token } from "../../../../../bridge/types/Token.js";
6+
import type { ChainMetadata } from "../../../../../chains/types.js";
7+
import { defineChain, getChainMetadata } from "../../../../../chains/utils.js";
8+
import { shortenHex } from "../../../../../utils/address.js";
9+
import type { WindowAdapter } from "../../../../core/adapters/WindowAdapter.js";
10+
import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
1111
import {
1212
iconSize,
1313
radius,
1414
spacing,
15-
} from "../../../core/design-system/index.js";
16-
import type { BridgePrepareResult } from "../../../core/hooks/useBridgePrepare.js";
17-
import type { CompletedStatusResult } from "../../../core/hooks/useStepExecutor.js";
18-
import { formatTokenAmount } from "../ConnectWallet/screens/formatTokenBalance.js";
19-
import { shorterChainName } from "../components/ChainName.js";
20-
import { Skeleton } from "../components/Skeleton.js";
21-
import { Spacer } from "../components/Spacer.js";
22-
import { Container, ModalHeader } from "../components/basic.js";
23-
import { Text } from "../components/text.js";
15+
} from "../../../../core/design-system/index.js";
16+
import type { BridgePrepareResult } from "../../../../core/hooks/useBridgePrepare.js";
17+
import type { CompletedStatusResult } from "../../../../core/hooks/useStepExecutor.js";
18+
import { formatTokenAmount } from "../../ConnectWallet/screens/formatTokenBalance.js";
19+
import { shorterChainName } from "../../components/ChainName.js";
20+
import { Skeleton } from "../../components/Skeleton.js";
21+
import { Spacer } from "../../components/Spacer.js";
22+
import { Container, ModalHeader } from "../../components/basic.js";
23+
import { Text } from "../../components/text.js";
2424

2525
interface TransactionInfo {
2626
type: "paymentId" | "transactionHash";
@@ -291,7 +291,7 @@ function CompletedStepDetailCard({
291291
);
292292
}
293293

294-
export interface PaymentSuccessDetailsProps {
294+
export interface PaymentReceitProps {
295295
/**
296296
* Prepared quote from Bridge.prepare
297297
*/
@@ -313,12 +313,12 @@ export interface PaymentSuccessDetailsProps {
313313
windowAdapter: WindowAdapter;
314314
}
315315

316-
export function PaymentSuccessDetails({
316+
export function PaymentReceipt({
317317
preparedQuote,
318318
completedStatuses,
319319
onBack,
320320
windowAdapter,
321-
}: PaymentSuccessDetailsProps) {
321+
}: PaymentReceitProps) {
322322
// Copy to clipboard
323323
const copyToClipboard = useCallback(async (text: string) => {
324324
try {
@@ -336,7 +336,7 @@ export function PaymentSuccessDetails({
336336
p="lg"
337337
style={{ maxHeight: "500px", minHeight: "250px", overflowY: "auto" }}
338338
>
339-
<ModalHeader title="Payment Details" onBack={onBack} />
339+
<ModalHeader title="Payment Receipt" onBack={onBack} />
340340

341341
<Spacer y="lg" />
342342

‎packages/thirdweb/src/react/web/ui/Bridge/SuccessScreen.tsx‎ renamed to ‎packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
"use client";
22
import { CheckIcon } from "@radix-ui/react-icons";
33
import { useState } from "react";
4-
import type { WindowAdapter } from "../../../core/adapters/WindowAdapter.js";
5-
import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
6-
import { iconSize } from "../../../core/design-system/index.js";
7-
import type { BridgePrepareResult } from "../../../core/hooks/useBridgePrepare.js";
8-
import type { CompletedStatusResult } from "../../../core/hooks/useStepExecutor.js";
9-
import { Spacer } from "../components/Spacer.js";
10-
import { Container, ModalHeader } from "../components/basic.js";
11-
import { Button } from "../components/buttons.js";
12-
import { Text } from "../components/text.js";
13-
import { PaymentSuccessDetails } from "./PaymentSuccessDetails.js";
4+
import type { WindowAdapter } from "../../../../core/adapters/WindowAdapter.js";
5+
import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
6+
import { iconSize } from "../../../../core/design-system/index.js";
7+
import type { BridgePrepareResult } from "../../../../core/hooks/useBridgePrepare.js";
8+
import type { CompletedStatusResult } from "../../../../core/hooks/useStepExecutor.js";
9+
import { Spacer } from "../../components/Spacer.js";
10+
import { Container, ModalHeader } from "../../components/basic.js";
11+
import { Button } from "../../components/buttons.js";
12+
import { Text } from "../../components/text.js";
13+
import { PaymentReceipt } from "./PaymentReceipt.js";
1414

1515
export interface SuccessScreenProps {
1616
/**
@@ -52,7 +52,7 @@ export function SuccessScreen({
5252

5353
if (viewState === "detail") {
5454
return (
55-
<PaymentSuccessDetails
55+
<PaymentReceipt
5656
preparedQuote={preparedQuote}
5757
completedStatuses={completedStatuses}
5858
windowAdapter={windowAdapter}
@@ -109,7 +109,7 @@ export function SuccessScreen({
109109
fullWidth
110110
onClick={() => setViewState("detail")}
111111
>
112-
View Transaction Details
112+
View Payment Receipt
113113
</Button>
114114

115115
<Button variant="accent" fullWidth onClick={onClose}>

0 commit comments

Comments
 (0)