Skip to content

[MNY-341] Payment Details UI improvements #8576

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
graphite-app merged 1 commit into from
Dec 19, 2025
+112 −68
Merged

[MNY-341] Payment Details UI improvements #8576

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/yummy-squids-rush.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"thirdweb": patch
---

Payment Details UI improvements for bridge widget components
2 changes: 1 addition & 1 deletion packages/thirdweb/src/react/web/ui/Bridge/common/TokenBalanceRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
style={{
display: "flex",
justifyContent: "space-between",
padding: `${spacing.sm} ${spacing.md}`,
padding: `${spacing.md} ${spacing.md}`,

Check warning on line 36 in packages/thirdweb/src/react/web/ui/Bridge/common/TokenBalanceRow.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/Bridge/common/TokenBalanceRow.tsx#L36 

Added line #L36 was not covered by tests
...style,
}}
variant="secondary"
Expand Down
39 changes: 24 additions & 15 deletions packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@
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 {
Expand Down Expand Up @@ -306,12 +310,12 @@

<Container
flex="column"
gap="sm"
gap="md+"

Check warning on line 313 in packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx#L313 

Added line #L313 was not covered by tests
style={{
backgroundColor: theme.colors.tertiaryBg,
border: `1px solid ${theme.colors.borderColor}`,
borderRadius: radius.md,
padding: `${spacing.sm} ${spacing.md}`,
borderRadius: radius.xl,
padding: `${spacing.md} ${spacing.md}`,

Check warning on line 318 in packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx#L317-L318 

Added lines #L317 - L318 were not covered by tests
}}
>
{preparedQuote.steps.map((step, stepIndex) => (
Expand All @@ -323,24 +327,24 @@
{/* Step Header */}
<Container
flex="row"
gap="md"
gap="sm"

Check warning on line 330 in packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx#L330 

Added line #L330 was not covered by tests
style={{ alignItems: "center" }}
>
<Container
center="both"
flex="row"
style={{
backgroundColor: theme.colors.accentButtonBg,
borderRadius: "50%",
color: theme.colors.accentButtonText,
backgroundColor: theme.colors.modalBg,
border: `1px solid ${theme.colors.borderColor}`,
borderRadius: radius.full,
color: theme.colors.secondaryText,

Check warning on line 340 in packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx#L337-L340 

Added lines #L337 - L340 were not covered by tests
flexShrink: 0,
fontSize: "12px",
fontWeight: "bold",
height: "24px",
width: "24px",
height: `${iconSize.lg}px`,
width: `${iconSize.lg}px`,

Check warning on line 344 in packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx#L343-L344 

Added lines #L343 - L344 were not covered by tests
}}
>
<Text color="accentButtonText" size="xs">
<Text color="secondaryText" size="sm">

Check warning on line 347 in packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx#L347 

Added line #L347 was not covered by tests
{stepIndex + 1}
</Text>
</Container>
Expand All @@ -352,7 +356,7 @@
style={{ flex: 1 }}
>
<Container flex="column" gap="3xs" style={{ flex: 1 }}>
<Text color="primaryText" size="sm">
<Text color="primaryText" size="sm" weight={500}>

Check warning on line 359 in packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx#L359 

Added line #L359 was not covered by tests
{step.destinationToken.chainId !==
step.originToken.chainId ? (
<>
Expand Down Expand Up @@ -401,11 +405,16 @@
</Container>
)}

<Spacer y="lg" />
<Spacer y="md" />

Check warning on line 408 in packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx#L408 

Added line #L408 was not covered by tests

{/* Action Buttons */}
<Container flex="column" gap="sm">
<Button fullWidth onClick={handleConfirm} variant="accent">
<Button
fullWidth
onClick={handleConfirm}
variant="primary"
style={{ borderRadius: radius.full }}

Check warning on line 416 in packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx#L412-L416 

Added lines #L412 - L416 were not covered by tests
>
{confirmButtonLabel || "Confirm Payment"}
</Button>
</Container>
Expand Down
14 changes: 7 additions & 7 deletions packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,17 +47,17 @@
flex="column"
style={{
border: `1px solid ${theme.colors.borderColor}`,
borderRadius: radius.lg,
borderRadius: radius.xl,

Check warning on line 50 in packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx#L50 

Added line #L50 was not covered by tests
}}
>
{sender && (
<Container
flex="row"
gap="sm"
px="md"
py="sm"
py="md"

Check warning on line 58 in packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx#L58 

Added line #L58 was not covered by tests
style={{
borderBottom: `1px solid ${theme.colors.borderColor}`,
borderBottom: `1px dashed ${theme.colors.borderColor}`,

Check warning on line 60 in packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx#L60 

Added line #L60 was not covered by tests
}}
>
<WalletRow
Expand Down Expand Up @@ -88,7 +88,7 @@
flex="row"
gap="sm"
px="md"
py="sm"
py="md"

Check warning on line 91 in packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx#L91 

Added line #L91 was not covered by tests
style={{ justifyContent: "space-between" }}
>
{/* left */}
Expand Down Expand Up @@ -122,17 +122,17 @@
flex="column"
style={{
border: `1px solid ${theme.colors.borderColor}`,
borderRadius: radius.lg,
borderRadius: radius.xl,

Check warning on line 125 in packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx#L125 

Added line #L125 was not covered by tests
}}
>
{isDifferentRecipient && (
<Container
flex="row"
gap="sm"
px="md"
py="sm"
py="md"

Check warning on line 133 in packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx#L133 

Added line #L133 was not covered by tests
style={{
borderBottom: `1px solid ${theme.colors.borderColor}`,
borderBottom: `1px dashed ${theme.colors.borderColor}`,

Check warning on line 135 in packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx#L135 

Added line #L135 was not covered by tests
}}
>
<WalletRow
Expand Down
9 changes: 6 additions & 3 deletions packages/thirdweb/src/react/web/ui/ConnectWallet/icons/OutlineWalletIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import type { IconFC } from "./types.js";

/**
* @internal
*/
export const OutlineWalletIcon: IconFC = (props) => {
export const OutlineWalletIcon = (props: {
size?: string;
color?: string;
style?: React.CSSProperties;
}) => {
Comment on lines +4 to +8
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

# Read the OutlineWalletIcon.tsx file
cat -n "packages/thirdweb/src/react/web/ui/ConnectWallet/icons/OutlineWalletIcon.tsx"

Repository: thirdweb-dev/js

Length of output: 1800

🏁 Script executed:

# Check for React imports at the very top of the file
head -20 "packages/thirdweb/src/react/web/ui/ConnectWallet/icons/OutlineWalletIcon.tsx" | grep -n "import"

Repository: thirdweb-dev/js

Length of output: 41

🏁 Script executed:

# Check the entire file for any React import
rg "import.*React" "packages/thirdweb/src/react/web/ui/ConnectWallet/icons/OutlineWalletIcon.tsx"

Repository: thirdweb-dev/js

Length of output: 41

🏁 Script executed:

# View the entire file to check for any imports
wc -l "packages/thirdweb/src/react/web/ui/ConnectWallet/icons/OutlineWalletIcon.tsx"

Repository: thirdweb-dev/js

Length of output: 138

🏁 Script executed:

# View the full file from beginning to end
cat "packages/thirdweb/src/react/web/ui/ConnectWallet/icons/OutlineWalletIcon.tsx"

Repository: thirdweb-dev/js

Length of output: 1555

Add explicit return type and import React.

Per TypeScript guidelines, this function requires an explicit return type annotation and a React import. The code currently uses React.CSSProperties on line 7 without importing React, which will cause a type-checking error.

+import React from 'react';
+
 /**
  * @internal
  */
-export const OutlineWalletIcon = (props: {
+export const OutlineWalletIcon = (props: {
   size?: string;
   color?: string;
   style?: React.CSSProperties;
-}) => {
+}): JSX.Element => {
🤖 Prompt for AI Agents 
packages/thirdweb/src/react/web/ui/ConnectWallet/icons/OutlineWalletIcon.tsx
lines 4-8: the component uses React types but doesn't import React and lacks an
explicit return type; add an import for React (e.g. import React from 'react')
at the top and annotate the component with an explicit return type (for example
use React.FC<Props> or : JSX.Element) so the props typing (React.CSSProperties)
and the component signature type-check correctly.

return (
<svg
fill="none"
Expand All @@ -12,6 +14,7 @@ export const OutlineWalletIcon: IconFC = (props) => {
viewBox="0 0 24 24"
width={props.size}
xmlns="http://www.w3.org/2000/svg"
style={props.style}
>
<path
d="M19 7V4C19 3.73478 18.8946 3.48043 18.7071 3.29289C18.5196 3.10536 18.2652 3 18 3H5C4.46957 3 3.96086 3.21071 3.58579 3.58579C3.21071 3.96086 3 4.46957 3 5C3 5.53043 3.21071 6.03914 3.58579 6.41421C3.96086 6.78929 4.46957 7 5 7H20C20.2652 7 20.5196 7.10536 20.7071 7.29289C20.8946 7.48043 21 7.73478 21 8V12M21 12H18C17.4696 12 16.9609 12.2107 16.5858 12.5858C16.2107 12.9609 16 13.4696 16 14C16 14.5304 16.2107 15.0391 16.5858 15.4142C16.9609 15.7893 17.4696 16 18 16H21C21.2652 16 21.5196 15.8946 21.7071 15.7071C21.8946 15.5196 22 15.2652 22 15V13C22 12.7348 21.8946 12.4804 21.7071 12.2929C21.5196 12.1054 21.2652 12 21 12Z"
Expand Down
17 changes: 10 additions & 7 deletions packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/StepConnector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
import { ChevronDownIcon } from "@radix-ui/react-icons";
import { useCustomTheme } from "../../../../../../core/design-system/CustomThemeProvider.js";
import {
iconSize,
radius,
} from "../../../../../../core/design-system/index.js";
import { Container } from "../../../../components/basic.js";

export function StepConnectorArrow() {
Expand All @@ -9,26 +13,25 @@
center="both"
flex="row"
style={{
marginBottom: "-10px",
marginTop: "-10px",
marginBottom: "-12px",
marginTop: "-12px",

Check warning on line 17 in packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/StepConnector.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/StepConnector.tsx#L16-L17 

Added lines #L16 - L17 were not covered by tests
position: "relative",
width: "100%",
zIndex: 1000,
}}
>
<Container
center="both"
color="primaryText"
color="secondaryText"

Check warning on line 25 in packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/StepConnector.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/StepConnector.tsx#L25 

Added line #L25 was not covered by tests
flex="row"
style={{
backgroundColor: theme.colors.modalBg,
border: `1px solid ${theme.colors.borderColor}`,
borderRadius: "100%",
height: "30px",
width: "30px",
borderRadius: radius.full,
padding: "6px",

Check warning on line 31 in packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/StepConnector.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/StepConnector.tsx#L30-L31 

Added lines #L30 - L31 were not covered by tests
}}
>
<ChevronDownIcon height={16} width={16} />
<ChevronDownIcon height={iconSize["sm+"]} width={iconSize["sm+"]} />

Check warning on line 34 in packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/StepConnector.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/StepConnector.tsx#L34 

Added line #L34 was not covered by tests
</Container>
</Container>
);
Expand Down
23 changes: 22 additions & 1 deletion packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
import {
fontSize,
iconSize,
radius,
} from "../../../../../../core/design-system/index.js";
import { useConnectedWallets } from "../../../../../../core/hooks/wallets/useConnectedWallets.js";
import {
Expand Down Expand Up @@ -58,7 +59,27 @@
size={iconSizeValue}
/>
) : (
<OutlineWalletIcon size={iconSizeValue} />
<Container
borderColor="borderColor"
bg="modalBg"
flex="row"
center="both"
style={{
borderStyle: "solid",
borderWidth: "1px",
borderRadius: radius.full,
width: `${iconSizeValue}px`,
height: `${iconSizeValue}px`,
position: "relative",
}}

Check warning on line 74 in packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletRow.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletRow.tsx#L62-L74 

Added lines #L62 - L74 were not covered by tests
>
<OutlineWalletIcon
style={{
position: "absolute",
inset: "25%",
}}
/>
</Container>

Check warning on line 82 in packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletRow.tsx

View check run for this annotation

Codecov / codecov/patch

packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletRow.tsx#L76-L82 

Added lines #L76 - L82 were not covered by tests
)}
<Container flex="column" gap="3xs">
{props.label ? (
Expand Down
71 changes: 37 additions & 34 deletions packages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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<typeof PaymentDetails> = {
args: {
Expand Down
Loading