From 56a1c0a467e4adcc4d40794d89b0d853f2cd8803 Mon Sep 17 00:00:00 2001 From: MananTank Date: Fri, 19 Dec 2025 12:57:51 +0000 Subject: [PATCH] [MNY-341] Payment Details UI improvements (#8576) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ## PR-Codex overview This PR focuses on improving the Payment Details UI for bridge widget components in the `thirdweb` package, enhancing layout, styling, and functionality. ### Detailed summary - Adjusted `padding` in `TokenBalanceRow.tsx`. - Replaced `OutlineWalletIcon` with a styled `Container` in `WalletRow.tsx`. - Updated `borderRadius` and `borderBottom` styles in `PaymentOverview.tsx`. - Enhanced `StepConnectorArrow` styles and added `iconSize` for `ChevronDownIcon`. - Modified `OutlineWalletIcon` definition to accept `size`, `color`, and `style` props. - Refactored `cryptoPaymentMethod` and `ethCryptoPaymentMethod` structures for clarity. - Updated `PaymentDetails.tsx` styles, including `gap`, `borderRadius`, and button styles. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` ## Summary by CodeRabbit * **Bug Fixes** * Improved bridge payment details UI with enhanced spacing, borders, and styling * Updated wallet row display with better visual presentation when disconnected * Refined typography and color usage across payment interface components * Enhanced border radius and padding consistency throughout bridge widget ✏️ Tip: You can customize this high-level summary in your review settings. --- .changeset/yummy-squids-rush.md | 5 ++ .../web/ui/Bridge/common/TokenBalanceRow.tsx | 2 +- .../Bridge/payment-details/PaymentDetails.tsx | 39 ++++++---- .../payment-details/PaymentOverview.tsx | 14 ++-- .../ConnectWallet/icons/OutlineWalletIcon.tsx | 9 ++- .../screens/Buy/swap/StepConnector.tsx | 17 +++-- .../screens/Buy/swap/WalletRow.tsx | 23 +++++- .../stories/Bridge/PaymentDetails.stories.tsx | 71 ++++++++++--------- 8 files changed, 112 insertions(+), 68 deletions(-) create mode 100644 .changeset/yummy-squids-rush.md diff --git a/.changeset/yummy-squids-rush.md b/.changeset/yummy-squids-rush.md new file mode 100644 index 00000000000..588cf510c79 --- /dev/null +++ b/.changeset/yummy-squids-rush.md @@ -0,0 +1,5 @@ +--- +"thirdweb": patch +--- + +Payment Details UI improvements for bridge widget components diff --git a/packages/thirdweb/src/react/web/ui/Bridge/common/TokenBalanceRow.tsx b/packages/thirdweb/src/react/web/ui/Bridge/common/TokenBalanceRow.tsx index 9121abcff8f..e2ecc746b0e 100644 --- a/packages/thirdweb/src/react/web/ui/Bridge/common/TokenBalanceRow.tsx +++ b/packages/thirdweb/src/react/web/ui/Bridge/common/TokenBalanceRow.tsx @@ -33,7 +33,7 @@ export function TokenBalanceRow({ style={{ display: "flex", justifyContent: "space-between", - padding: `${spacing.sm} ${spacing.md}`, + padding: `${spacing.md} ${spacing.md}`, ...style, }} variant="secondary" diff --git a/packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx b/packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx index 9b27c18e39b..c4fe8073b51 100644 --- a/packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx +++ b/packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx @@ -4,7 +4,11 @@ import { defineChain } from "../../../../../chains/utils.js"; import type { ThirdwebClient } from "../../../../../client/client.js"; import type { SupportedFiatCurrency } from "../../../../../pay/convert/type.js"; import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js"; -import { radius, spacing } from "../../../../core/design-system/index.js"; +import { + iconSize, + radius, + spacing, +} from "../../../../core/design-system/index.js"; import { useChainsQuery } from "../../../../core/hooks/others/useChainQuery.js"; import type { BridgePrepareResult } from "../../../../core/hooks/useBridgePrepare.js"; import { @@ -306,12 +310,12 @@ export function PaymentDetails({ {preparedQuote.steps.map((step, stepIndex) => ( @@ -323,24 +327,24 @@ export function PaymentDetails({ {/* Step Header */} - + {stepIndex + 1} @@ -352,7 +356,7 @@ export function PaymentDetails({ style={{ flex: 1 }} > - + {step.destinationToken.chainId !== step.originToken.chainId ? ( <> @@ -401,11 +405,16 @@ export function PaymentDetails({ )} - + {/* Action Buttons */} - diff --git a/packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx b/packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx index e3ba81ad9df..f1ed1ecf928 100644 --- a/packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx +++ b/packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx @@ -47,7 +47,7 @@ export function PaymentOverview(props: { flex="column" style={{ border: `1px solid ${theme.colors.borderColor}`, - borderRadius: radius.lg, + borderRadius: radius.xl, }} > {sender && ( @@ -55,9 +55,9 @@ export function PaymentOverview(props: { flex="row" gap="sm" px="md" - py="sm" + py="md" style={{ - borderBottom: `1px solid ${theme.colors.borderColor}`, + borderBottom: `1px dashed ${theme.colors.borderColor}`, }} > {/* left */} @@ -122,7 +122,7 @@ export function PaymentOverview(props: { flex="column" style={{ border: `1px solid ${theme.colors.borderColor}`, - borderRadius: radius.lg, + borderRadius: radius.xl, }} > {isDifferentRecipient && ( @@ -130,9 +130,9 @@ export function PaymentOverview(props: { flex="row" gap="sm" px="md" - py="sm" + py="md" style={{ - borderBottom: `1px solid ${theme.colors.borderColor}`, + borderBottom: `1px dashed ${theme.colors.borderColor}`, }} > { +export const OutlineWalletIcon = (props: { + size?: string; + color?: string; + style?: React.CSSProperties; +}) => { return ( { viewBox="0 0 24 24" width={props.size} xmlns="http://www.w3.org/2000/svg" + style={props.style} > - + ); diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletRow.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletRow.tsx index 5d46b2e6818..5b0908bf237 100644 --- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletRow.tsx +++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletRow.tsx @@ -5,6 +5,7 @@ import { isSmartWallet } from "../../../../../../../wallets/smart/index.js"; import { fontSize, iconSize, + radius, } from "../../../../../../core/design-system/index.js"; import { useConnectedWallets } from "../../../../../../core/hooks/wallets/useConnectedWallets.js"; import { @@ -58,7 +59,27 @@ export function WalletRow(props: { size={iconSizeValue} /> ) : ( - + + + )} {props.label ? ( diff --git a/packages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsx b/packages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsx index b721e0bac51..ea0c284eae5 100644 --- a/packages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsx +++ b/packages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsx @@ -1,7 +1,6 @@ import type { Meta, StoryObj } from "@storybook/react"; import { PaymentDetails } from "../../react/web/ui/Bridge/payment-details/PaymentDetails.js"; import type { PaymentMethod } from "../../react/web/ui/Bridge/types.js"; -import { stringify } from "../../utils/json.js"; import { ModalThemeWrapper, storyClient } from "../utils.js"; import { buyWithApprovalQuote, @@ -22,41 +21,45 @@ const fiatPaymentMethod: PaymentMethod = { type: "fiat", }; -const cryptoPaymentMethod: PaymentMethod = JSON.parse( - stringify({ - balance: 100000000n, - originToken: { - address: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48", - chainId: 1, - decimals: 6, - iconUri: - "https://assets.coingecko.com/coins/images/6319/large/USD_Coin_icon.png", - name: "USD Coin", - priceUsd: 1.0, - symbol: "USDC", +const cryptoPaymentMethod: PaymentMethod = { + action: "buy", + balance: 100000000n, + hasEnoughBalance: true, + originToken: { + address: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48", + chainId: 1, + decimals: 6, + iconUri: + "https://assets.coingecko.com/coins/images/6319/large/USD_Coin_icon.png", + name: "USD Coin", + prices: { + USD: 1.0, }, - payerWallet: STORY_MOCK_WALLET, - type: "wallet", - }), -); - -const ethCryptoPaymentMethod: PaymentMethod = JSON.parse( - stringify({ - balance: 1000000000000000000n, - originToken: { - address: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE", - chainId: 1, - decimals: 18, - iconUri: - "https://assets.coingecko.com/coins/images/6319/large/USD_Coin_icon.png", - name: "Ethereum", - priceUsd: 2500.0, - symbol: "ETH", + symbol: "USDC", + }, + payerWallet: STORY_MOCK_WALLET, + type: "wallet", +}; + +const ethCryptoPaymentMethod: PaymentMethod = { + action: "buy", + balance: 1000000000000000000n, + hasEnoughBalance: true, + originToken: { + address: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE", + chainId: 1, + decimals: 18, + iconUri: + "https://assets.coingecko.com/coins/images/6319/large/USD_Coin_icon.png", + name: "Ethereum", + prices: { + USD: 2500.0, }, - payerWallet: STORY_MOCK_WALLET, - type: "wallet", - }), -); + symbol: "ETH", + }, + payerWallet: STORY_MOCK_WALLET, + type: "wallet", +}; const meta: Meta = { args: {