thirdweb 5.102.7-nightly-3f747601135809eedf86a150752f4b5f12c99776-20250617000426 → 5.103.0

package/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx

@@ -0,0 +1,301 @@
+import type { Token } from "../../../../../bridge/index.js";
+import { defineChain } from "../../../../../chains/utils.js";
+import type { ThirdwebClient } from "../../../../../client/client.js";
+import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
+import { radius, spacing } from "../../../../core/design-system/index.js";
+import { useTransactionDetails } from "../../../../core/hooks/useTransactionDetails.js";
+import type { PaymentMethod } from "../../../../core/machines/paymentMachine.js";
+import { getFiatCurrencyIcon } from "../../ConnectWallet/screens/Buy/fiat/currencies.js";
+import { FiatValue } from "../../ConnectWallet/screens/Buy/swap/FiatValue.js";
+import { StepConnectorArrow } from "../../ConnectWallet/screens/Buy/swap/StepConnector.js";
+import { WalletRow } from "../../ConnectWallet/screens/Buy/swap/WalletRow.js";
+import { Container } from "../../components/basic.js";
+import { Text } from "../../components/text.js";
+import type { UIOptions } from "../BridgeOrchestrator.js";
+import { TokenBalanceRow } from "../common/TokenBalanceRow.js";
+
+export function PaymentOverview(props: {
+  uiOptions: UIOptions;
+  receiver: string;
+  sender?: string;
+  client: ThirdwebClient;
+  paymentMethod: PaymentMethod;
+  toToken: Token;
+  fromAmount: string;
+  toAmount: string;
+}) {
+  const theme = useCustomTheme();
+  const sender =
+    props.sender ||
+    (props.paymentMethod.type === "wallet"
+      ? props.paymentMethod.payerWallet.getAccount()?.address
+      : undefined);
+  const isDifferentRecipient =
+    props.receiver.toLowerCase() !== sender?.toLowerCase();
+  return (
+    <Container>
+      {/* Sell */}
+      <Container
+        bg="tertiaryBg"
+        flex="column"
+        style={{
+          borderRadius: radius.lg,
+          border: `1px solid ${theme.colors.borderColor}`,
+        }}
+      >
+        {sender && (
+          <Container
+            flex="row"
+            gap="sm"
+            px="md"
+            py="sm"
+            style={{
+              borderBottom: `1px solid ${theme.colors.borderColor}`,
+            }}
+          >
+            <WalletRow
+              address={sender}
+              client={props.client}
+              iconSize="md"
+              textSize="sm"
+            />
+          </Container>
+        )}
+        {props.paymentMethod.type === "wallet" && (
+          <TokenBalanceRow
+            token={props.paymentMethod.originToken}
+            client={props.client}
+            amount={props.fromAmount}
+            onClick={() => {}}
+            style={{
+              background: "transparent",
+              borderRadius: 0,
+              border: "none",
+            }}
+          />
+        )}
+        {props.paymentMethod.type === "fiat" && (
+          <Container
+            flex="row"
+            gap="sm"
+            px="md"
+            py="sm"
+            center="y"
+            style={{ justifyContent: "space-between" }}
+          >
+            <Container flex="row" gap="sm" center="y">
+              {getFiatCurrencyIcon({
+                currency: props.paymentMethod.currency,
+                size: "lg",
+              })}
+              <Container flex="column" gap="3xs" center="y">
+                <Text size="sm" color="primaryText" style={{ fontWeight: 600 }}>
+                  {props.paymentMethod.currency}
+                </Text>
+                <Text size="xs" color="secondaryText">
+                  {props.paymentMethod.onramp.charAt(0).toUpperCase() +
+                    props.paymentMethod.onramp.slice(1)}
+                </Text>
+              </Container>
+            </Container>
+            <Text size="sm" color="primaryText" style={{ fontWeight: 600 }}>
+              {props.fromAmount}
+            </Text>
+          </Container>
+        )}
+      </Container>
+      {/* Connector Icon */}
+      <StepConnectorArrow />
+      {/* Buy */}
+      <Container
+        flex="column"
+        bg="tertiaryBg"
+        style={{
+          borderRadius: radius.lg,
+          border: `1px solid ${theme.colors.borderColor}`,
+        }}
+      >
+        {isDifferentRecipient && (
+          <Container
+            flex="row"
+            gap="sm"
+            px="md"
+            py="sm"
+            style={{
+              borderBottom: `1px solid ${theme.colors.borderColor}`,
+            }}
+          >
+            <WalletRow
+              address={props.receiver}
+              client={props.client}
+              iconSize="md"
+              textSize="sm"
+            />
+          </Container>
+        )}
+        {props.uiOptions.mode === "direct_payment" && (
+          <Container
+            flex="row"
+            gap="sm"
+            p="md"
+            center="y"
+            style={{ justifyContent: "space-between" }}
+          >
+            <Container flex="column" gap="3xs" center="y" style={{ flex: 1 }}>
+              <Text size="sm" color="primaryText" style={{ fontWeight: 600 }}>
+                {props.uiOptions.metadata?.title || "Payment"}
+              </Text>
+              {props.uiOptions.metadata?.description && (
+                <Text size="xs" color="secondaryText">
+                  {props.uiOptions.metadata.description}
+                </Text>
+              )}
+            </Container>
+            <Container
+              flex="column"
+              gap="3xs"
+              center="y"
+              style={{ alignItems: "flex-end" }}
+            >
+              <FiatValue
+                tokenAmount={props.uiOptions.paymentInfo.amount}
+                token={props.toToken}
+                client={props.client}
+                chain={defineChain(props.toToken.chainId)}
+                weight={600}
+                color="primaryText"
+                size="sm"
+              />
+              <Text size="xs" color="secondaryText">
+                {props.uiOptions.paymentInfo.amount} {props.toToken.symbol}
+              </Text>
+            </Container>
+          </Container>
+        )}
+        {props.uiOptions.mode === "fund_wallet" && (
+          <TokenBalanceRow
+            token={props.toToken}
+            client={props.client}
+            amount={props.toAmount}
+            onClick={() => {}}
+            style={{
+              background: "transparent",
+              borderRadius: 0,
+              border: "none",
+            }}
+          />
+        )}
+        {props.uiOptions.mode === "transaction" && (
+          <TransactionOverViewCompact
+            uiOptions={props.uiOptions}
+            client={props.client}
+          />
+        )}
+      </Container>
+    </Container>
+  );
+}
+
+const TransactionOverViewCompact = (props: {
+  uiOptions: Extract<UIOptions, { mode: "transaction" }>;
+  client: ThirdwebClient;
+}) => {
+  const theme = useCustomTheme();
+  const txInfo = useTransactionDetails({
+    transaction: props.uiOptions.transaction,
+    client: props.client,
+  });
+
+  if (!txInfo.data) {
+    // Skeleton loading state
+    return (
+      <Container
+        flex="row"
+        gap="sm"
+        p="md"
+        center="y"
+        style={{ justifyContent: "space-between" }}
+      >
+        <Container flex="column" gap="3xs" center="y" style={{ flex: 1 }}>
+          {/* Title skeleton */}
+          <div
+            style={{
+              width: "120px",
+              height: "16px",
+              backgroundColor: theme.colors.skeletonBg,
+              borderRadius: spacing.xs,
+            }}
+          />
+          {/* Description skeleton - only if metadata exists */}
+          {props.uiOptions.metadata?.description && (
+            <div
+              style={{
+                width: "80px",
+                height: "12px",
+                backgroundColor: theme.colors.skeletonBg,
+                borderRadius: spacing.xs,
+              }}
+            />
+          )}
+        </Container>
+        <Container
+          flex="column"
+          gap="3xs"
+          center="y"
+          style={{ alignItems: "flex-end" }}
+        >
+          {/* Function name skeleton */}
+          <div
+            style={{
+              width: "100px",
+              height: "24px",
+              backgroundColor: theme.colors.skeletonBg,
+              borderRadius: spacing.sm,
+            }}
+          />
+        </Container>
+      </Container>
+    );
+  }
+
+  return (
+    <Container
+      flex="row"
+      gap="sm"
+      p="md"
+      center="y"
+      style={{ justifyContent: "space-between" }}
+    >
+      <Container flex="column" gap="3xs" center="y" style={{ flex: 1 }}>
+        <Text size="sm" color="primaryText" style={{ fontWeight: 600 }}>
+          {props.uiOptions.metadata?.title || "Transaction"}
+        </Text>
+        {props.uiOptions.metadata?.description && (
+          <Text size="xs" color="secondaryText">
+            {props.uiOptions.metadata.description}
+          </Text>
+        )}
+      </Container>
+      <Container
+        flex="column"
+        gap="3xs"
+        center="y"
+        style={{ alignItems: "flex-end" }}
+      >
+        <Text
+          size="xs"
+          color="secondaryText"
+          style={{
+            fontFamily: "monospace",
+            textAlign: "right",
+            backgroundColor: theme.colors.secondaryButtonBg,
+            padding: `${spacing.xs} ${spacing.sm}`,
+            borderRadius: spacing.sm,
+          }}
+        >
+          {txInfo.data.functionInfo.functionName}
+        </Text>
+      </Container>
+    </Container>
+  );
+};

package/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx

@@ -0,0 +1,186 @@
+"use client";
+import { useMemo } from "react";
+import type { ThirdwebClient } from "../../../../../client/client.js";
+import { checksumAddress } from "../../../../../utils/address.js";
+import { toTokens } from "../../../../../utils/units.js";
+import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
+import {
+  iconSize,
+  radius,
+  spacing,
+} from "../../../../core/design-system/index.js";
+import { useBuyWithFiatQuotesForProviders } from "../../../../core/hooks/pay/useBuyWithFiatQuotesForProviders.js";
+import { Img } from "../../components/Img.js";
+import { Spacer } from "../../components/Spacer.js";
+import { Spinner } from "../../components/Spinner.js";
+import { Container } from "../../components/basic.js";
+import { Button } from "../../components/buttons.js";
+import { Text } from "../../components/text.js";
+
+interface FiatProviderSelectionProps {
+  client: ThirdwebClient;
+  onProviderSelected: (provider: "coinbase" | "stripe" | "transak") => void;
+  toChainId: number;
+  toTokenAddress: string;
+  toAddress: string;
+  toAmount?: string;
+}
+
+const PROVIDERS = [
+  {
+    id: "coinbase" as const,
+    name: "Coinbase",
+    description: "Fast and secure payments",
+    iconUri: "https://i.ibb.co/LDJ3Rk2t/Frame-5.png",
+  },
+  {
+    id: "stripe" as const,
+    name: "Stripe",
+    description: "Trusted payment processing",
+    iconUri: "https://i.ibb.co/CpgQC2Lf/images-3.png",
+  },
+  {
+    id: "transak" as const,
+    name: "Transak",
+    description: "Global payment solution",
+    iconUri: "https://i.ibb.co/Xx2r882p/Transak-official-symbol-1.png",
+  },
+];
+
+export function FiatProviderSelection({
+  onProviderSelected,
+  client,
+  toChainId,
+  toTokenAddress,
+  toAddress,
+  toAmount,
+}: FiatProviderSelectionProps) {
+  const theme = useCustomTheme();
+
+  // Fetch quotes for all providers
+  const quoteQueries = useBuyWithFiatQuotesForProviders({
+    client,
+    chainId: toChainId,
+    tokenAddress: checksumAddress(toTokenAddress),
+    receiver: checksumAddress(toAddress),
+    amount: toAmount || "0",
+    currency: "USD",
+  });
+
+  const quotes = useMemo(() => {
+    return quoteQueries.map((q) => q.data).filter((q) => !!q);
+  }, [quoteQueries]);
+
+  // TODO: add a "remember my choice" checkbox
+
+  return (
+    <>
+      <Container flex="column" gap="sm">
+        {quotes.length > 0 ? (
+          quotes
+            .sort((a, b) => a.currencyAmount - b.currencyAmount)
+            .map((quote, index) => {
+              const provider = PROVIDERS.find(
+                (p) => p.id === quote.intent.onramp,
+              );
+              if (!provider) {
+                return null;
+              }
+
+              return (
+                <Container
+                  key={provider.id}
+                  animate="fadein"
+                  style={{
+                    animationDelay: `${index * 100}ms`,
+                  }}
+                >
+                  <Button
+                    variant="secondary"
+                    fullWidth
+                    onClick={() => onProviderSelected(provider.id)}
+                    style={{
+                      border: `1px solid ${theme.colors.borderColor}`,
+                      borderRadius: radius.md,
+                      padding: `${spacing.sm} ${spacing.md}`,
+                      backgroundColor: theme.colors.tertiaryBg,
+                      textAlign: "left",
+                    }}
+                  >
+                    <Container
+                      flex="row"
+                      gap="sm"
+                      style={{ width: "100%", alignItems: "center" }}
+                    >
+                      <Container
+                        style={{
+                          width: `${iconSize.md}px`,
+                          height: `${iconSize.md}px`,
+                          borderRadius: "50%",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          padding: spacing.xs,
+                          overflow: "hidden",
+                        }}
+                      >
+                        <Img
+                          src={provider.iconUri}
+                          alt={provider.name}
+                          width={iconSize.md}
+                          height={iconSize.md}
+                          client={client}
+                        />
+                      </Container>
+                      <Container flex="column" gap="3xs" style={{ flex: 1 }}>
+                        <Text
+                          size="md"
+                          color="primaryText"
+                          style={{ fontWeight: 600 }}
+                        >
+                          {provider.name}
+                        </Text>
+                      </Container>
+                      <Container
+                        flex="column"
+                        gap="3xs"
+                        style={{ alignItems: "flex-end" }}
+                      >
+                        <Text
+                          size="sm"
+                          color="primaryText"
+                          style={{ fontWeight: 500 }}
+                        >
+                          $
+                          {quote.currencyAmount.toLocaleString(undefined, {
+                            minimumFractionDigits: 2,
+                            maximumFractionDigits: 2,
+                          })}{" "}
+                          {quote.currency}
+                        </Text>
+                        <Text size="xs" color="secondaryText">
+                          {toTokens(
+                            quote.destinationAmount,
+                            quote.destinationToken.decimals,
+                          )}{" "}
+                          {quote.destinationToken.symbol}
+                        </Text>
+                      </Container>
+                    </Container>
+                  </Button>
+                </Container>
+              );
+            })
+        ) : (
+          <Container flex="column" center="both" style={{ minHeight: "120px" }}>
+            <Spinner size="lg" color="secondaryText" />
+            <Spacer y="sm" />
+            <Text size="sm" color="secondaryText" center>
+              Generating quotes...
+            </Text>
+          </Container>
+        )}
+      </Container>
+    </>
+  );
+}