thirdweb 5.40.0-nightly-3848327373e49aa83c5902e6a16d5b8e96cf1eeb-20240726000343 → 5.40.1-nightly-b128530355f0dc47d897bd2ef7c3823752ea9b6c-20240727000321

package/src/react/web/ui/ConnectWallet/screens/Buy/DirectPaymentModeScreen.tsx

@@ -0,0 +1,266 @@
+import { useQuery } from "@tanstack/react-query";
+import type { Chain } from "../../../../../../chains/types.js";
+import type { ThirdwebClient } from "../../../../../../client/client.js";
+import { NATIVE_TOKEN_ADDRESS } from "../../../../../../constants/addresses.js";
+import { getContract } from "../../../../../../contract/contract.js";
+import { decimals } from "../../../../../../extensions/erc20/read/decimals.js";
+import { shortenAddress } from "../../../../../../utils/address.js";
+import { formatNumber } from "../../../../../../utils/formatNumber.js";
+import { toTokens } from "../../../../../../utils/units.js";
+import type { Account } from "../../../../../../wallets/interfaces/wallet.js";
+import { useCustomTheme } from "../../../../../core/design-system/CustomThemeProvider.js";
+import { iconSize, spacing } from "../../../../../core/design-system/index.js";
+import type { PayUIOptions } from "../../../../../core/hooks/connection/ConnectButtonProps.js";
+import { useChainQuery } from "../../../../../core/hooks/others/useChainQuery.js";
+import { useActiveWallet } from "../../../../../core/hooks/wallets/useActiveWallet.js";
+import type { TokenInfo } from "../../../../../core/utils/defaultTokens.js";
+import { useEnsName } from "../../../../../core/utils/wallet.js";
+import { LoadingScreen } from "../../../../wallets/shared/LoadingScreen.js";
+import type { PayEmbedConnectOptions } from "../../../PayEmbed.js";
+import { ChainIcon } from "../../../components/ChainIcon.js";
+import { Img } from "../../../components/Img.js";
+import { Spacer } from "../../../components/Spacer.js";
+import { TokenIcon } from "../../../components/TokenIcon.js";
+import { WalletImage } from "../../../components/WalletImage.js";
+import { Container, Line, ModalHeader } from "../../../components/basic.js";
+import { Button } from "../../../components/buttons.js";
+import { Text } from "../../../components/text.js";
+import { ConnectButton } from "../../ConnectButton.js";
+import { type ERC20OrNativeToken, isNativeToken } from "../nativeToken.js";
+import type { SupportedChainAndTokens } from "./swap/useSwapSupportedChains.js";
+
+export function DirectPaymentModeScreen(props: {
+  client: ThirdwebClient;
+  payUiOptions: Extract<PayUIOptions, { mode: "direct_payment" }>;
+  supportedDestinations: SupportedChainAndTokens;
+  payerAccount: Account | undefined;
+  connectOptions: PayEmbedConnectOptions | undefined;
+  onContinue: (
+    tokenAmount: string,
+    toChain: Chain,
+    toToken: ERC20OrNativeToken,
+  ) => void;
+}) {
+  const {
+    payUiOptions,
+    supportedDestinations,
+    client,
+    onContinue,
+    payerAccount,
+  } = props;
+  const theme = useCustomTheme();
+  const activeWallet = useActiveWallet();
+  const metadata = payUiOptions.metadata;
+  const paymentInfo = payUiOptions.paymentInfo;
+  const { data: chainData } = useChainQuery(paymentInfo.chain);
+  const { data: sellerEns } = useEnsName({
+    client,
+    address: paymentInfo.sellerAddress,
+  });
+
+  const totalCostQuery = useQuery({
+    queryKey: ["amount", paymentInfo],
+    queryFn: async () => {
+      let tokenDecimals = 18;
+      if (paymentInfo.token && !isNativeToken(paymentInfo.token)) {
+        tokenDecimals = await decimals({
+          contract: getContract({
+            address: paymentInfo.token.address,
+            chain: paymentInfo.chain,
+            client,
+          }),
+        });
+      }
+      let cost: string;
+      if ("amountWei" in paymentInfo) {
+        cost = toTokens(paymentInfo.amountWei, tokenDecimals);
+      } else {
+        cost = paymentInfo.amount;
+      }
+      return cost;
+    },
+  });
+
+  const totalCost = totalCostQuery.data;
+  if (!chainData || totalCost === undefined) {
+    return <LoadingScreen />;
+  }
+
+  const token: TokenInfo = paymentInfo.token
+    ? {
+        ...paymentInfo.token,
+        icon:
+          paymentInfo.token?.icon ||
+          supportedDestinations
+            .find((c) => c.chain.id === paymentInfo.chain.id)
+            ?.tokens.find(
+              (t) =>
+                t.address.toLowerCase() ===
+                paymentInfo.token?.address.toLowerCase(),
+            )?.icon,
+      }
+    : {
+        address: NATIVE_TOKEN_ADDRESS,
+        name: chainData.nativeCurrency.name,
+        symbol: chainData.nativeCurrency.symbol,
+        icon: chainData.icon?.url,
+      };
+
+  return (
+    <Container p="lg">
+      <ModalHeader title={metadata?.name || "Payment Details"} />
+
+      <Spacer y="lg" />
+      <Container>
+        {metadata?.image ? (
+          <Img
+            client={client}
+            src={metadata?.image}
+            style={{
+              width: "100%",
+              borderRadius: spacing.md,
+              backgroundColor: theme.colors.tertiaryBg,
+            }}
+          />
+        ) : activeWallet ? (
+          <Container
+            flex="row"
+            center="both"
+            style={{
+              padding: spacing.md,
+              marginBottom: spacing.md,
+              borderRadius: spacing.md,
+              backgroundColor: theme.colors.tertiaryBg,
+            }}
+          >
+            <WalletImage
+              size={iconSize.xl}
+              id={activeWallet.id}
+              client={client}
+            />
+            <div
+              style={{
+                flexGrow: 1,
+                borderBottom: "6px dotted",
+                borderColor: theme.colors.secondaryIconColor,
+                marginLeft: spacing.md,
+                marginRight: spacing.md,
+              }}
+            />
+            <ChainIcon
+              client={client}
+              size={iconSize.xl}
+              chainIconUrl={chainData.icon?.url}
+            />
+          </Container>
+        ) : null}
+        <Spacer y="md" />
+        <Container flex="row">
+          <Container flex="column" expand>
+            <Text size="md" color="primaryText" weight={700}>
+              {"Price"}
+            </Text>
+          </Container>
+          <Container expand>
+            <Container
+              flex="row"
+              gap="xs"
+              center="y"
+              style={{ justifyContent: "right" }}
+            >
+              <TokenIcon
+                chain={paymentInfo.chain}
+                client={props.client}
+                size="sm"
+                token={token}
+              />
+              <Text color="primaryText" size="md" weight={700}>
+                {String(formatNumber(Number(totalCost), 6))} {token.symbol}
+              </Text>
+            </Container>
+          </Container>
+        </Container>
+        <Spacer y="md" />
+        <Line />
+        <Spacer y="md" />
+        <Container flex="row">
+          <Container flex="column" expand>
+            <Text size="xs" color="secondaryText">
+              Network
+            </Text>
+          </Container>
+          <Container expand>
+            <Container
+              flex="row"
+              gap="xs"
+              center="y"
+              style={{ justifyContent: "right" }}
+            >
+              <ChainIcon
+                chainIconUrl={chainData.icon?.url}
+                size="xs"
+                client={props.client}
+              />
+              <Text
+                size="xs"
+                color="secondaryText"
+                style={{ textAlign: "right" }}
+              >
+                {chainData.name}
+              </Text>
+            </Container>
+          </Container>
+        </Container>
+        <Spacer y="sm" />
+        <Container flex="row">
+          <Container flex="column" expand>
+            <Text size="xs" color="secondaryText">
+              Seller
+            </Text>
+          </Container>
+          <Container expand>
+            <Container
+              flex="row"
+              gap="xs"
+              center="y"
+              style={{ justifyContent: "right" }}
+            >
+              <Text
+                size="xs"
+                color="secondaryText"
+                style={{ textAlign: "right" }}
+              >
+                {sellerEns || shortenAddress(paymentInfo.sellerAddress)}
+              </Text>
+            </Container>
+          </Container>
+        </Container>
+      </Container>
+      <Spacer y="xl" />
+      {payerAccount ? (
+        <Button
+          variant="accent"
+          fullWidth
+          onClick={() => {
+            onContinue(totalCost, paymentInfo.chain, token);
+          }}
+        >
+          Choose Payment Method
+        </Button>
+      ) : (
+        <div>
+          <ConnectButton
+            {...props.connectOptions}
+            client={client}
+            theme={theme}
+            connectButton={{
+              style: {
+                width: "100%",
+              },
+            }}
+          />
+        </div>
+      )}
+    </Container>
+  );
+}

package/src/react/web/ui/ConnectWallet/screens/Buy/ReceiverWalletSelectionScreen.tsx

@@ -3,7 +3,7 @@ import { useMemo, useState, useSyncExternalStore } from "react";
 import type { ThirdwebClient } from "../../../../../../client/client.js";
 import { isAddress } from "../../../../../../utils/address.js";
 import { iconSize } from "../../../../../core/design-system/index.js";
-import { connectionManager } from "../../../../index.js";
+import { useConnectionManager } from "../../../../../core/providers/connection-manager.js";
 import { Spacer } from "../../../components/Spacer.js";
 import { TextDivider } from "../../../components/TextDivider.js";
 import { ToolTip } from "../../../components/Tooltip.js";
@@ -22,6 +22,7 @@ export function ReceiverWalletDrawerScreen(props: {
   const [address, setAddress] = useState<string>("");
   const isValidAddress = useMemo(() => isAddress(address), [address]);
   const showError = !!address && !isValidAddress;
+  const connectionManager = useConnectionManager();
   const connectedWallets = useSyncExternalStore(
     connectionManager.connectedWallets.subscribe,
     connectionManager.connectedWallets.getValue,

package/src/react/web/ui/ConnectWallet/screens/Buy/TransactionModeScreen.tsx

@@ -0,0 +1,253 @@
+import type { Chain } from "../../../../../../chains/types.js";
+import type { ThirdwebClient } from "../../../../../../client/client.js";
+import { NATIVE_TOKEN_ADDRESS } from "../../../../../../constants/addresses.js";
+import { formatNumber } from "../../../../../../utils/formatNumber.js";
+import { toTokens } from "../../../../../../utils/units.js";
+import type { Account } from "../../../../../../wallets/interfaces/wallet.js";
+import { useCustomTheme } from "../../../../../core/design-system/CustomThemeProvider.js";
+import { iconSize, spacing } from "../../../../../core/design-system/index.js";
+import type { PayUIOptions } from "../../../../../core/hooks/connection/ConnectButtonProps.js";
+import { useChainQuery } from "../../../../../core/hooks/others/useChainQuery.js";
+import { useActiveWallet } from "../../../../../core/hooks/wallets/useActiveWallet.js";
+import { hasSponsoredTransactionsEnabled } from "../../../../../core/utils/wallet.js";
+import { LoadingScreen } from "../../../../wallets/shared/LoadingScreen.js";
+import type { PayEmbedConnectOptions } from "../../../PayEmbed.js";
+import { ChainIcon } from "../../../components/ChainIcon.js";
+import { Img } from "../../../components/Img.js";
+import { Spacer } from "../../../components/Spacer.js";
+import { TokenIcon } from "../../../components/TokenIcon.js";
+import { WalletImage } from "../../../components/WalletImage.js";
+import { Container, Line, ModalHeader } from "../../../components/basic.js";
+import { Button } from "../../../components/buttons.js";
+import { Text } from "../../../components/text.js";
+import { ConnectButton } from "../../ConnectButton.js";
+import type { ERC20OrNativeToken } from "../nativeToken.js";
+import { useTransactionCostAndData } from "./main/useBuyTxStates.js";
+import type { SupportedChainAndTokens } from "./swap/useSwapSupportedChains.js";
+
+export function TransactionModeScreen(props: {
+  client: ThirdwebClient;
+  payUiOptions: Extract<PayUIOptions, { mode: "transaction" }>;
+  supportedDestinations: SupportedChainAndTokens;
+  payerAccount: Account | undefined;
+  connectOptions: PayEmbedConnectOptions | undefined;
+  onContinue: (
+    tokenAmount: string,
+    toChain: Chain,
+    toToken: ERC20OrNativeToken,
+  ) => void;
+}) {
+  const {
+    payUiOptions,
+    client,
+    payerAccount,
+    supportedDestinations,
+    onContinue,
+  } = props;
+  const { data: chainData } = useChainQuery(payUiOptions.transaction.chain);
+  const metadata = payUiOptions.metadata;
+  const { data: transactionCostAndData } = useTransactionCostAndData({
+    transaction: payUiOptions.transaction,
+    account: payerAccount,
+    supportedDestinations,
+  });
+  const theme = useCustomTheme();
+  const activeWallet = useActiveWallet();
+  const sponsoredTransactionsEnabled =
+    hasSponsoredTransactionsEnabled(activeWallet);
+
+  if (!transactionCostAndData || !chainData) {
+    return <LoadingScreen />;
+  }
+
+  return (
+    <Container p="lg">
+      <ModalHeader title={metadata?.name || "Transaction"} />
+
+      <Spacer y="lg" />
+      <Container>
+        {metadata?.image ? (
+          <Img
+            client={client}
+            src={metadata?.image}
+            style={{
+              width: "100%",
+              borderRadius: spacing.md,
+              backgroundColor: theme.colors.tertiaryBg,
+            }}
+          />
+        ) : activeWallet ? (
+          <Container
+            flex="row"
+            center="both"
+            style={{
+              padding: spacing.md,
+              marginBottom: spacing.md,
+              borderRadius: spacing.md,
+              backgroundColor: theme.colors.tertiaryBg,
+            }}
+          >
+            <WalletImage
+              size={iconSize.xl}
+              id={activeWallet.id}
+              client={client}
+            />
+            <div
+              style={{
+                flexGrow: 1,
+                borderBottom: "6px dotted",
+                borderColor: theme.colors.secondaryIconColor,
+                marginLeft: spacing.md,
+                marginRight: spacing.md,
+              }}
+            />
+            <ChainIcon
+              client={client}
+              size={iconSize.xl}
+              chainIconUrl={chainData.icon?.url}
+            />
+          </Container>
+        ) : null}
+        <Spacer y="md" />
+        <Container flex="row">
+          <Container flex="column" expand>
+            <Text size="md" color="primaryText" weight={700}>
+              {"Price"}
+            </Text>
+          </Container>
+          <Container expand>
+            <Container
+              flex="row"
+              gap="xs"
+              center="y"
+              style={{ justifyContent: "right" }}
+            >
+              <TokenIcon
+                chain={payUiOptions.transaction.chain}
+                client={props.client}
+                size="sm"
+                token={transactionCostAndData.token}
+              />
+              <Text color="primaryText" size="md" weight={700}>
+                {String(
+                  formatNumber(
+                    Number(
+                      toTokens(
+                        transactionCostAndData.transactionValueWei,
+                        transactionCostAndData.decimals,
+                      ),
+                    ),
+                    6,
+                  ),
+                )}{" "}
+                {transactionCostAndData.token.symbol}
+              </Text>
+            </Container>
+          </Container>
+        </Container>
+        <Spacer y="md" />
+        <Line />
+        <Spacer y="md" />
+        <Container flex="row">
+          <Container flex="column" expand>
+            <Text size="xs" color="secondaryText">
+              Gas Fees
+            </Text>
+          </Container>
+          <Container expand>
+            <Container
+              flex="row"
+              gap="xs"
+              center="y"
+              style={{ justifyContent: "right" }}
+            >
+              <Text
+                color={sponsoredTransactionsEnabled ? "success" : "primaryText"}
+                size="xs"
+              >
+                {sponsoredTransactionsEnabled
+                  ? "Sponsored"
+                  : `${String(
+                      formatNumber(
+                        Number(
+                          toTokens(
+                            transactionCostAndData.gasCostWei,
+                            chainData.nativeCurrency.decimals,
+                          ),
+                        ),
+                        6,
+                      ),
+                    )} ${chainData.nativeCurrency.symbol}`}
+              </Text>
+            </Container>
+          </Container>
+        </Container>
+        <Spacer y="sm" />
+        <Container flex="row">
+          <Container flex="column" expand>
+            <Text size="xs" color="secondaryText">
+              Network
+            </Text>
+          </Container>
+          <Container expand>
+            <Container
+              flex="row"
+              gap="xs"
+              center="y"
+              style={{ justifyContent: "right" }}
+            >
+              <ChainIcon
+                chainIconUrl={chainData.icon?.url}
+                size="xs"
+                client={props.client}
+              />
+              <Text
+                size="xs"
+                color="secondaryText"
+                style={{ textAlign: "right" }}
+              >
+                {chainData.name}
+              </Text>
+            </Container>
+          </Container>
+        </Container>
+      </Container>
+      <Spacer y="xl" />
+      {payerAccount ? (
+        <Button
+          variant="accent"
+          fullWidth
+          onClick={() => {
+            let totalCostWei = transactionCostAndData.transactionValueWei;
+            if (
+              transactionCostAndData.token.address === NATIVE_TOKEN_ADDRESS &&
+              !sponsoredTransactionsEnabled
+            ) {
+              totalCostWei += transactionCostAndData.gasCostWei;
+            }
+            onContinue(
+              toTokens(totalCostWei, transactionCostAndData.decimals),
+              payUiOptions.transaction.chain,
+              transactionCostAndData.token,
+            );
+          }}
+        >
+          Choose Payment Method
+        </Button>
+      ) : (
+        <div>
+          <ConnectButton
+            {...props.connectOptions}
+            client={client}
+            theme={theme}
+            connectButton={{
+              style: {
+                width: "100%",
+              },
+            }}
+          />
+        </div>
+      )}
+    </Container>
+  );
+}

package/src/react/web/ui/ConnectWallet/screens/Buy/WalletSelectorButton.tsx

@@ -8,12 +8,14 @@ import {
   radius,
   spacing,
 } from "../../../../../core/design-system/index.js";
-import { useConnectedWallets } from "../../../../hooks/wallets/useConnectedWallets.js";
+import { useConnectedWallets } from "../../../../../core/hooks/wallets/useConnectedWallets.js";
+import { useEnsAvatar, useEnsName } from "../../../../../core/utils/wallet.js";
+import { Img } from "../../../components/Img.js";
 import { WalletImage } from "../../../components/WalletImage.js";
 import { Container } from "../../../components/basic.js";
 import { Button } from "../../../components/buttons.js";
 import { Text } from "../../../components/text.js";
-import { GenericWalletIcon } from "../../icons/GenericWalletIcon.js";
+import { SmartWalletBadgeIcon } from "../../icons/SmartAccountBadgeIcon.js";
 
 export function WalletSelectorButton(props: {
   address: string;
@@ -26,11 +28,6 @@ export function WalletSelectorButton(props: {
   checked?: boolean;
 }) {
   const theme = useCustomTheme();
-  const connectedWallets = useConnectedWallets();
-  const walletId =
-    props.walletId ||
-    connectedWallets.find((x) => x.getAccount()?.address === props.address)?.id;
-
   return (
     <Container
       bg="tertiaryBg"
@@ -52,21 +49,7 @@ export function WalletSelectorButton(props: {
         }}
         gap="sm"
       >
-        <Container flex="row" center="y" gap="sm" color="secondaryText">
-          {walletId ? (
-            <WalletImage
-              id={walletId}
-              size={iconSize.md}
-              client={props.client}
-            />
-          ) : (
-            <GenericWalletIcon size={iconSize.md} />
-          )}
-
-          <Text size="sm" color="primaryText">
-            {shortenAddress(props.address)}
-          </Text>
-        </Container>
+        <WalletRow client={props.client} address={props.address} />
         {!props.disableChevron && (
           <ChevronDownIcon
             width={iconSize.sm}
@@ -84,3 +67,51 @@ export function WalletSelectorButton(props: {
     </Container>
   );
 }
+
+export function WalletRow(props: {
+  client: ThirdwebClient;
+  address: string;
+  walletId?: WalletId;
+}) {
+  const { client, address } = props;
+  const connectedWallets = useConnectedWallets();
+  const wallet = connectedWallets.find(
+    (x) => x.getAccount()?.address === props.address,
+  );
+  const walletId = props.walletId || wallet?.id;
+  const ensNameQuery = useEnsName({
+    client,
+    address,
+  });
+  const addressOrENS = ensNameQuery.data || shortenAddress(address);
+  const ensAvatarQuery = useEnsAvatar({
+    client,
+    ensName: ensNameQuery.data,
+  });
+  return (
+    <Container flex="row" center="y" gap="sm" color="secondaryText">
+      {ensAvatarQuery.data ? (
+        <Img
+          src={ensAvatarQuery.data}
+          width={iconSize.md}
+          height={iconSize.md}
+          style={{
+            borderRadius: radius.sm,
+          }}
+          client={props.client}
+        />
+      ) : walletId ? (
+        <WalletImage id={walletId} size={iconSize.md} client={props.client} />
+      ) : null}
+
+      <Text size="sm" color="primaryText">
+        {addressOrENS || shortenAddress(props.address)}
+      </Text>
+      {walletId === "smart" && (
+        <Container color="accentText" center="both">
+          <SmartWalletBadgeIcon size={iconSize.sm} />
+        </Container>
+      )}
+    </Container>
+  );
+}

package/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatFlow.tsx

@@ -43,10 +43,9 @@ export function FiatFlow(props: {
   client: ThirdwebClient;
   testMode: boolean;
   theme: "light" | "dark";
-  onViewPendingTx: () => void;
   openedWindow: Window | null;
   onDone: () => void;
-  isBuyForTx: boolean;
+  transactionMode: boolean;
   isEmbed: boolean;
   payer: PayerInfo;
 }) {
@@ -93,7 +92,6 @@ export function FiatFlow(props: {
         client={props.client}
         intentId={props.quote.intentId}
         onBack={props.onBack}
-        onViewPendingTx={props.onViewPendingTx}
         hasTwoSteps={hasTwoSteps}
         openedWindow={popupWindow}
         quote={props.quote}
@@ -101,7 +99,7 @@ export function FiatFlow(props: {
         onShowSwapFlow={(_status) => {
           setScreen({ id: "postonramp-swap", data: _status });
         }}
-        isBuyForTx={props.isBuyForTx}
+        transactionMode={props.transactionMode}
         isEmbed={props.isEmbed}
       />
     );
@@ -115,12 +113,11 @@ export function FiatFlow(props: {
         quote={fiatQuoteToPartialQuote(props.quote)}
         client={props.client}
         onBack={props.onBack}
-        onViewPendingTx={props.onViewPendingTx}
         onDone={props.onDone}
         onSwapFlowStarted={() => {
           // no op
         }}
-        isBuyForTx={props.isBuyForTx}
+        transactionMode={props.transactionMode}
         isEmbed={props.isEmbed}
         payer={props.payer}
       />