thirdweb 5.39.0 → 5.40.0

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/ConfirmationScreen.tsx

@@ -13,6 +13,7 @@ import {
   iconSize,
 } from "../../../../../../core/design-system/index.js";
 import { useChainName } from "../../../../../../core/hooks/others/useChainQuery.js";
+import { useEnsName } from "../../../../../../core/utils/wallet.js";
 import { Skeleton } from "../../../../components/Skeleton.js";
 import { Spacer } from "../../../../components/Spacer.js";
 import { Spinner } from "../../../../components/Spinner.js";
@@ -61,6 +62,9 @@ export function SwapConfirmationScreen(props: {
 
   const receiver = props.quote.swapDetails.toAddress;
   const sender = props.quote.swapDetails.fromAddress;
+  const isDifferentRecipient = receiver.toLowerCase() !== sender.toLowerCase();
+
+  const ensName = useEnsName({ client: props.client, address: receiver });
 
   return (
     <Container p="lg">
@@ -93,15 +97,17 @@ export function SwapConfirmationScreen(props: {
       </ConfirmItem>
 
       {/* Receive */}
-      <ConfirmItem label="Receive">
-        <RenderTokenInfo
-          chain={props.toChain}
-          amount={String(formatNumber(Number(props.toAmount), 6))}
-          symbol={props.toTokenSymbol}
-          token={props.toToken}
-          client={props.client}
-        />
-      </ConfirmItem>
+      {!isDifferentRecipient && (
+        <ConfirmItem label="Receive">
+          <RenderTokenInfo
+            chain={props.toChain}
+            amount={String(formatNumber(Number(props.toAmount), 6))}
+            symbol={props.toTokenSymbol}
+            token={props.toToken}
+            client={props.client}
+          />
+        </ConfirmItem>
+      )}
 
       {/* Fees  */}
       <ConfirmItem label="Fees">
@@ -110,7 +116,7 @@ export function SwapConfirmationScreen(props: {
 
       {/* Time  */}
       <ConfirmItem label="Time">
-        <Text color="primaryText">
+        <Text size="sm" color="primaryText">
           ~
           {formatSeconds(
             props.quote.swapDetails.estimated.durationSeconds || 0,
@@ -119,9 +125,11 @@ export function SwapConfirmationScreen(props: {
       </ConfirmItem>
 
       {/* Send to  */}
-      {receiver !== sender && (
-        <ConfirmItem label="Send to">
-          <Text color="primaryText">{shortenAddress(receiver)}</Text>
+      {isDifferentRecipient && (
+        <ConfirmItem label="Seller">
+          <Text color="primaryText" size="sm">
+            {ensName.data || shortenAddress(receiver)}
+          </Text>
         </ConfirmItem>
       )}
 
@@ -252,7 +260,7 @@ export function SwapConfirmationScreen(props: {
   );
 }
 
-const ConnectorLine = /* @__PURE__ */ StyledDiv(() => {
+export const ConnectorLine = /* @__PURE__ */ StyledDiv(() => {
   const theme = useCustomTheme();
   return {
     height: "4px",
@@ -278,21 +286,21 @@ function RenderTokenInfo(props: {
       }}
     >
       <Container flex="row" center="y" gap="xs">
-        <Text color="primaryText" size="md">
+        <Text color="primaryText" size="sm">
           {props.amount} {props.symbol}
         </Text>
         <PayTokenIcon
           token={props.token}
           chain={props.chain}
-          size="sm"
+          size="xs"
           client={props.client}
         />
       </Container>
 
       {name ? (
-        <Text size="sm">{name}</Text>
+        <Text size="xs">{name}</Text>
       ) : (
-        <Skeleton width={"100px"} height={fontSize.sm} />
+        <Skeleton width={"100px"} height={fontSize.xs} />
       )}
     </Container>
   );
@@ -312,7 +320,7 @@ function ConfirmItem(props: {
           justifyContent: "space-between",
         }}
       >
-        <Text size="md" color="secondaryText">
+        <Text size="sm" color="secondaryText">
           {props.label}
         </Text>
         {props.children}

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/Fees.tsx

@@ -25,15 +25,19 @@ export function SwapFees(props: {
         return (
           <Container
             key={`${fee.token.chainId}_${fee.token.tokenAddress}_${feeAmount}`}
-            flex="row"
+            flex="column"
             gap="xxs"
           >
-            <Text color="primaryText" size="sm">
+            <Text color="primaryText" size="sm" style={{ textAlign: "right" }}>
               {feeAmount === 0 ? "~" : ""}
               {feeAmount} {fee.token.symbol}
             </Text>
-            <Text color="secondaryText" size="sm">
-              (${(fee.amountUSDCents / 100).toFixed(2)})
+            <Text
+              color="secondaryText"
+              size="xs"
+              style={{ textAlign: "right" }}
+            >
+              ${(fee.amountUSDCents / 100).toFixed(2)}
             </Text>
           </Container>
         );

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/PayWithCrypto.tsx

@@ -6,6 +6,7 @@ import type { Account } from "../../../../../../../wallets/interfaces/wallet.js"
 import {
   fontSize,
   iconSize,
+  radius,
   spacing,
 } from "../../../../../../core/design-system/index.js";
 import { useChainName } from "../../../../../../core/hooks/others/useChainQuery.js";
@@ -36,6 +37,7 @@ export function PayWithCrypto(props: {
   client: ThirdwebClient;
   freezeChainAndTokenSelection?: boolean;
   payerAccount: Account;
+  swapRequired: boolean;
 }) {
   const { name } = useChainName(props.chain);
 
@@ -55,11 +57,16 @@ export function PayWithCrypto(props: {
         borderWidth: "1px",
         borderTopWidth: 0,
         borderStyle: "solid",
-        borderBottom: "none",
         flexWrap: "nowrap",
         justifyContent: "space-between",
         minHeight: "64px",
         alignItems: "center",
+        ...(props.swapRequired
+          ? { borderBottom: "none" }
+          : {
+              borderBottomLeftRadius: radius.md,
+              borderBottomRightRadius: radius.md,
+            }),
       }}
     >
       {/* Left */}
@@ -81,13 +88,13 @@ export function PayWithCrypto(props: {
           size="md"
           client={props.client}
         />
-        <Container flex="column" gap="xxs">
+        <Container flex="column" gap="3xs">
           <Container flex="row" gap="xs" center="y" color="primaryText">
             <TokenSymbol token={props.token} chain={props.chain} size="sm" />
             <ChevronDownIcon width={iconSize.sm} height={iconSize.sm} />
           </Container>
           {name ? (
-            <Text size="xs"> {name}</Text>
+            <Text size="xs">{name}</Text>
           ) : (
             <Skeleton width="90px" height={fontSize.xs} />
           )}
@@ -118,7 +125,7 @@ export function PayWithCrypto(props: {
             color={props.value ? "primaryText" : "secondaryText"}
             style={{}}
           >
-            {formatNumber(Number(props.value), 6) || "--"}
+            {formatNumber(Number(props.value), 6) || ""}
           </Text>
         )}
 
@@ -126,7 +133,7 @@ export function PayWithCrypto(props: {
           <GenericWalletIcon size={fontSize.xs} />
           {balanceQuery.data ? (
             <Text size="xs" color="secondaryText" weight={500}>
-              {formatTokenBalance(balanceQuery.data, true)}
+              {formatTokenBalance(balanceQuery.data, false)}
             </Text>
           ) : (
             <Skeleton width="70px" height={fontSize.xs} />

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/SwapFlow.tsx

@@ -14,12 +14,11 @@ type SwapFlowProps = {
   onBack?: () => void;
   buyWithCryptoQuote: BuyWithCryptoQuote;
   payer: PayerInfo;
-  onViewPendingTx: () => void;
   client: ThirdwebClient;
   isFiatFlow: boolean;
   onDone: () => void;
   onTryAgain: () => void;
-  isBuyForTx: boolean;
+  transactionMode: boolean;
   isEmbed: boolean;
 };
 
@@ -79,11 +78,10 @@ export function SwapFlow(props: SwapFlowProps) {
         title={props.title}
         onBack={props.onBack}
         onTryAgain={props.onTryAgain}
-        onViewPendingTx={props.onViewPendingTx}
         swapTxHash={swapTxHash}
         client={props.client}
         onDone={props.onDone}
-        isBuyForTx={props.isBuyForTx}
+        transactionMode={props.transactionMode}
         isEmbed={props.isEmbed}
         quote={quote}
       />

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/SwapStatusScreen.tsx

@@ -19,12 +19,11 @@ type UIStatus = "pending" | "success" | "failed" | "partialSuccess";
 export function SwapStatusScreen(props: {
   title: string;
   onBack?: () => void;
-  onViewPendingTx: () => void;
   swapTxHash: string;
   client: ThirdwebClient;
   onTryAgain: () => void;
   onDone: () => void;
-  isBuyForTx: boolean;
+  transactionMode: boolean;
   isEmbed: boolean;
   quote: BuyWithCryptoQuote;
 }) {
@@ -91,7 +90,7 @@ export function SwapStatusScreen(props: {
               />
               <Spacer y="sm" />
               <Text color={"primaryText"} size="lg">
-                Buy Success
+                Buy Complete
               </Text>
             </Container>
 
@@ -100,7 +99,7 @@ export function SwapStatusScreen(props: {
             <Spacer y="sm" />
             {!props.isEmbed && (
               <Button variant="accent" fullWidth onClick={props.onDone}>
-                {props.isBuyForTx ? "Continue Transaction" : "Done"}
+                {props.transactionMode ? "Continue Transaction" : "Done"}
               </Button>
             )}
           </>

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/TransferFlow.tsx

@@ -0,0 +1,243 @@
+import { CheckCircledIcon, CrossCircledIcon } from "@radix-ui/react-icons";
+import { useState } from "react";
+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 { transfer } from "../../../../../../../extensions/erc20/write/transfer.js";
+import { sendAndConfirmTransaction } from "../../../../../../../transaction/actions/send-and-confirm-transaction.js";
+import { prepareTransaction } from "../../../../../../../transaction/prepare-transaction.js";
+import { toWei } from "../../../../../../../utils/units.js";
+import { iconSize } from "../../../../../../core/design-system/index.js";
+import { useChainSymbol } from "../../../../../../core/hooks/others/useChainQuery.js";
+import { Spacer } from "../../../../components/Spacer.js";
+import { Spinner } from "../../../../components/Spinner.js";
+import { StepBar } from "../../../../components/StepBar.js";
+import { SwitchNetworkButton } from "../../../../components/SwitchNetwork.js";
+import { Container, Line, ModalHeader } from "../../../../components/basic.js";
+import { Button } from "../../../../components/buttons.js";
+import { Text } from "../../../../components/text.js";
+import { type ERC20OrNativeToken, isNativeToken } from "../../nativeToken.js";
+import { Step } from "../Stepper.js";
+import { WalletRow } from "../WalletSelectorButton.js";
+import { TokenInfoRow } from "../pay-transactions/TokenInfoRow.js";
+import type { PayerInfo } from "../types.js";
+import { ConnectorLine } from "./ConfirmationScreen.js";
+
+type TrasnferFlowProps = {
+  title: string;
+  onBack?: () => void;
+  payer: PayerInfo;
+  receiverAddress: string;
+  client: ThirdwebClient;
+  onDone: () => void;
+  chain: Chain;
+  token: ERC20OrNativeToken;
+  tokenAmount: string;
+  transactionMode?: boolean;
+};
+
+export function TransferFlow(props: TrasnferFlowProps) {
+  const {
+    title,
+    onBack,
+    receiverAddress,
+    client,
+    payer,
+    onDone,
+    chain,
+    token,
+    tokenAmount,
+    transactionMode,
+  } = props;
+  const [step, setStep] = useState<"transfer" | "execute">("transfer");
+  const [status, setStatus] = useState<"idle" | "pending" | "error" | "done">(
+    "idle",
+  );
+  const { symbol } = useChainSymbol(chain);
+
+  return (
+    <Container p="lg">
+      <ModalHeader title={title} onBack={onBack} />
+      <Spacer y="xl" />
+
+      {transactionMode && (
+        <>
+          <StepBar steps={2} currentStep={step === "transfer" ? 1 : 2} />
+          <Spacer y="sm" />
+          <Text size="sm">
+            {step === "transfer"
+              ? "Step 1 of 2 - Transfer funds"
+              : "Step 2 of 2 - Finalize transaction"}
+          </Text>
+          <Spacer y="xl" />
+        </>
+      )}
+
+      {/* Sender Address */}
+      <Container
+        flex="row"
+        center="y"
+        style={{
+          justifyContent: "space-between",
+        }}
+      >
+        <Text size="sm">From</Text>
+        <WalletRow address={payer.account.address} client={client} />
+      </Container>
+
+      <Spacer y="md" />
+      <Line />
+      <Spacer y="md" />
+
+      {/* Receiver Address */}
+      <Container
+        flex="row"
+        center="y"
+        style={{
+          justifyContent: "space-between",
+        }}
+      >
+        <Text size="sm">To</Text>
+        <WalletRow address={receiverAddress} client={client} />
+      </Container>
+
+      <Spacer y="md" />
+      <Line />
+      <Spacer y="md" />
+
+      {/* Token Info */}
+      <TokenInfoRow
+        chainId={chain.id}
+        client={client}
+        label={"Amount"}
+        tokenAmount={tokenAmount}
+        tokenSymbol={isNativeToken(token) ? symbol || "" : token.symbol}
+        tokenAddress={
+          isNativeToken(token) ? NATIVE_TOKEN_ADDRESS : token.address
+        }
+      />
+
+      <Spacer y="lg" />
+
+      {transactionMode && (
+        <>
+          <Spacer y="sm" />
+          <Container
+            gap="sm"
+            flex="row"
+            style={{
+              justifyContent: "space-between",
+            }}
+            center="y"
+            color="accentText"
+          >
+            <Step
+              isDone={step === "execute"}
+              isActive={step === "transfer"}
+              label={step === "transfer" ? "Transfer" : "Done"}
+            />
+            <ConnectorLine />
+            <Step
+              isDone={false}
+              label="Finalize"
+              isActive={step === "execute"}
+            />
+          </Container>
+          <Spacer y="lg" />
+        </>
+      )}
+
+      {status === "error" && (
+        <>
+          <Container flex="row" gap="xs" center="both" color="danger">
+            <CrossCircledIcon width={iconSize.sm} height={iconSize.sm} />
+            <Text color="danger" size="sm">
+              {step === "transfer" ? "Failed to Transfer" : "Failed to Execute"}
+            </Text>
+          </Container>
+          <Spacer y="md" />
+        </>
+      )}
+
+      {!transactionMode && step === "execute" && status === "done" && (
+        <>
+          <Container flex="row" gap="xs" center="both" color="success">
+            <CheckCircledIcon width={iconSize.sm} height={iconSize.sm} />
+            <Text color="success" size="sm">
+              {"Payment completed"}
+            </Text>
+          </Container>
+          <Spacer y="md" />
+        </>
+      )}
+
+      {/* Execute */}
+      {payer.chain.id !== chain.id ? (
+        <SwitchNetworkButton
+          fullWidth
+          variant="accent"
+          switchChain={async () => {
+            await props.payer.wallet.switchChain(chain);
+          }}
+        />
+      ) : (
+        <Button
+          variant="accent"
+          fullWidth
+          disabled={status === "pending"}
+          onClick={async () => {
+            if (step === "execute") {
+              onDone();
+              return;
+            }
+
+            try {
+              setStatus("pending");
+
+              const transaction = isNativeToken(token)
+                ? prepareTransaction({
+                    client,
+                    chain,
+                    to: receiverAddress,
+                    value: toWei(tokenAmount),
+                  })
+                : transfer({
+                    contract: getContract({
+                      address: token.address,
+                      chain: chain,
+                      client: client,
+                    }),
+                    to: receiverAddress,
+                    amount: tokenAmount,
+                  });
+
+              await sendAndConfirmTransaction({
+                account: props.payer.account,
+                transaction,
+              });
+
+              setStep("execute");
+              if (transactionMode) {
+                setStatus("idle");
+              } else {
+                setStatus("done");
+              }
+            } catch (e) {
+              console.error(e);
+              setStatus("error");
+            }
+          }}
+          gap="xs"
+        >
+          {step === "execute" && (status === "done" ? "Done" : "Continue")}
+          {step === "transfer" &&
+            (status === "pending" ? "Confirming" : "Confirm")}
+          {status === "pending" && (
+            <Spinner size="sm" color="accentButtonText" />
+          )}
+        </Button>
+      )}
+    </Container>
+  );
+}

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletSwitcherDrawerContent.tsx

@@ -1,7 +1,12 @@
 import { PlusIcon } from "@radix-ui/react-icons";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import type { Wallet } from "../../../../../../../wallets/interfaces/wallet.js";
-import { iconSize } from "../../../../../../core/design-system/index.js";
+import { useCustomTheme } from "../../../../../../core/design-system/CustomThemeProvider.js";
+import {
+  iconSize,
+  radius,
+  spacing,
+} from "../../../../../../core/design-system/index.js";
 import { useConnectedWallets } from "../../../../../hooks/wallets/useConnectedWallets.js";
 import { Spacer } from "../../../../components/Spacer.js";
 import { Container } from "../../../../components/basic.js";
@@ -18,6 +23,7 @@ export function WalletSwitcherDrawerContent(props: {
   onConnect: () => void;
   selectedAddress: string;
 }) {
+  const theme = useCustomTheme();
   const connectedWallets = useConnectedWallets();
 
   // if all wallets are connected and showAll wallets is disabled, hide the connect button
@@ -27,12 +33,6 @@ export function WalletSwitcherDrawerContent(props: {
 
   return (
     <Container>
-      <Text size="lg" color="primaryText">
-        Pay with
-      </Text>
-
-      <Spacer y="lg" />
-
       <Container flex="column" gap="xs">
         {connectedWallets.map((w) => {
           const address = w.getAccount()?.address;
@@ -47,20 +47,33 @@ export function WalletSwitcherDrawerContent(props: {
                 props.onBack();
               }}
               disableChevron
-              checked={address === props.selectedAddress}
+              checked={false}
             />
           );
         })}
+        {!hideConnectButton && (
+          <Button
+            variant="secondary"
+            fullWidth
+            onClick={props.onConnect}
+            gap="xs"
+            bg="tertiaryBg"
+            style={{
+              borderRadius: radius.lg,
+              border: `1px solid ${theme.colors.borderColor}`,
+              padding: spacing.sm,
+            }}
+          >
+            <Container flex="row" gap="sm" center="y" expand>
+              <PlusIcon width={iconSize.md} height={iconSize.md} />
+              <Text size="sm" color="primaryText">
+                Add Another Wallet
+              </Text>
+            </Container>
+          </Button>
+        )}
       </Container>
-
-      <Spacer y="xxl" />
-
-      {!hideConnectButton && (
-        <Button variant="accent" fullWidth onClick={props.onConnect} gap="xs">
-          <PlusIcon width={iconSize.sm} height={iconSize.sm} />
-          Connect Wallet
-        </Button>
-      )}
+      <Spacer y="sm" />
     </Container>
   );
 }

package/src/react/web/ui/ConnectWallet/screens/nativeToken.ts

@@ -1,3 +1,4 @@
+import { NATIVE_TOKEN_ADDRESS } from "../../../../../constants/addresses.js";
 import type { TokenInfo } from "../../../../core/utils/defaultTokens.js";
 
 export type NativeToken = { nativeToken: true };
@@ -10,7 +11,10 @@ export const NATIVE_TOKEN: NativeToken = { nativeToken: true };
 export function isNativeToken(
   token: Partial<TokenInfo> | NativeToken,
 ): token is NativeToken {
-  return "nativeToken" in token;
+  return (
+    "nativeToken" in token ||
+    token.address?.toLowerCase() === NATIVE_TOKEN_ADDRESS.toLowerCase()
+  );
 }
 
 export type ERC20OrNativeToken = TokenInfo | NativeToken;