thirdweb 5.32.2-nightly-229561e1a79fe2ab3f010c5a8659c7e0fc497ec3-20240703090013 → 5.32.2

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

@@ -0,0 +1,118 @@
+import { ArrowRightIcon } from "@radix-ui/react-icons";
+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 { Spacer } from "../../../components/Spacer.js";
+import { TextDivider } from "../../../components/TextDivider.js";
+import { ToolTip } from "../../../components/Tooltip.js";
+import { Container } from "../../../components/basic.js";
+import { IconButton } from "../../../components/buttons.js";
+import { Input } from "../../../components/formElements.js";
+import { Text } from "../../../components/text.js";
+import { WalletSelectorButton } from "./WalletSelectorButton.js";
+
+export function ReceiverWalletDrawerScreen(props: {
+  receiverAddress: string;
+  onSelect: (address: string) => void;
+  client: ThirdwebClient;
+  onBack: () => void;
+}) {
+  const [address, setAddress] = useState<string>("");
+  const isValidAddress = useMemo(() => isAddress(address), [address]);
+  const showError = !!address && !isValidAddress;
+  const connectedWallets = useSyncExternalStore(
+    connectionManager.connectedWallets.subscribe,
+    connectionManager.connectedWallets.getValue,
+  );
+
+  function handleSubmit() {
+    props.onSelect(address);
+    props.onBack();
+  }
+
+  return (
+    <div>
+      <Text size="lg" color="primaryText">
+        Send to
+      </Text>
+      <Spacer y="lg" />
+
+      <div
+        style={{
+          position: "relative",
+        }}
+      >
+        <Input
+          data-error={showError}
+          value={address}
+          placeholder="Enter wallet address"
+          variant="outline"
+          onChange={(e) => setAddress(e.target.value)}
+          style={{
+            paddingRight: "50px",
+          }}
+          onKeyDown={(e) => {
+            if (isValidAddress && e.key === "Enter") {
+              handleSubmit();
+            }
+          }}
+        />
+
+        <ToolTip tip="Confirm">
+          <IconButton
+            disabled={!isValidAddress}
+            style={{
+              position: "absolute",
+              right: 0,
+              top: 0,
+              bottom: 0,
+              width: "40px",
+            }}
+            onClick={handleSubmit}
+            aria-label="Confirm"
+          >
+            <ArrowRightIcon width={iconSize.md} height={iconSize.md} />
+          </IconButton>
+        </ToolTip>
+      </div>
+
+      {showError && (
+        <>
+          <Spacer y="xs" />
+          <Text color="danger" size="sm">
+            Invalid address
+          </Text>
+        </>
+      )}
+
+      <Spacer y="lg" />
+      <TextDivider text="OR" />
+      <Spacer y="md" />
+
+      <Text size="sm">Connected</Text>
+      <Spacer y="xs" />
+
+      <Container flex="column" gap="sm">
+        {connectedWallets.map((w) => {
+          const address = (w.getAccount()?.address || "").toLowerCase();
+          return (
+            <WalletSelectorButton
+              address={address}
+              client={props.client}
+              onClick={() => {
+                props.onSelect(address);
+                props.onBack();
+              }}
+              key={w.id}
+              disableChevron
+              checked={address === props.receiverAddress.toLowerCase()}
+              walletId={w.id}
+            />
+          );
+        })}
+      </Container>
+    </div>
+  );
+}

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

@@ -0,0 +1,86 @@
+import { CheckIcon, ChevronDownIcon } from "@radix-ui/react-icons";
+import type { ThirdwebClient } from "../../../../../../client/client.js";
+import { shortenAddress } from "../../../../../../utils/address.js";
+import type { WalletId } from "../../../../../../wallets/wallet-types.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 { 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";
+
+export function WalletSelectorButton(props: {
+  address: string;
+  walletId: WalletId | undefined;
+  onClick: () => void;
+  client: ThirdwebClient;
+  containerStyle?: React.CSSProperties;
+  disableChevron?: boolean;
+  disabled?: boolean;
+  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"
+      style={{
+        borderRadius: radius.lg,
+        border: `1px solid ${theme.colors.borderColor}`,
+        ...props.containerStyle,
+      }}
+    >
+      <Button
+        fullWidth
+        disabled={props.disabled}
+        onClick={props.onClick}
+        variant="ghost"
+        style={{
+          justifyContent: "space-between",
+          padding: spacing.sm,
+          backgroundColor: theme.colors.tertiaryBg,
+        }}
+        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>
+        {!props.disableChevron && (
+          <ChevronDownIcon
+            width={iconSize.sm}
+            height={iconSize.sm}
+            style={{
+              color: theme.colors.secondaryText,
+            }}
+          />
+        )}
+
+        {props.checked && (
+          <CheckIcon width={iconSize.md} height={iconSize.md} />
+        )}
+      </Button>
+    </Container>
+  );
+}

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

@@ -5,6 +5,7 @@ import type { BuyWithFiatStatus } from "../../../../../../../pay/buyWithFiat/get
 import { isSwapRequiredPostOnramp } from "../../../../../../../pay/buyWithFiat/isSwapRequiredPostOnramp.js";
 import { openOnrampPopup } from "../openOnRamppopup.js";
 import { addPendingTx } from "../swap/pendingSwapTx.js";
+import type { PayerInfo } from "../types.js";
 import { OnrampStatusScreen } from "./FiatStatusScreen.js";
 import { FiatSteps, fiatQuoteToPartialQuote } from "./FiatSteps.js";
 import { PostOnRampSwapFlow } from "./PostOnRampSwapFlow.js";
@@ -46,6 +47,7 @@ export function FiatFlow(props: {
   onDone: () => void;
   isBuyForTx: boolean;
   isEmbed: boolean;
+  payer: PayerInfo;
 }) {
   const hasTwoSteps = isSwapRequiredPostOnramp(props.quote);
   const [screen, setScreen] = useState<Screen>(
@@ -116,6 +118,7 @@ export function FiatFlow(props: {
         }}
         isBuyForTx={props.isBuyForTx}
         isEmbed={props.isEmbed}
+        payer={props.payer}
       />
     );
   }

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

@@ -177,6 +177,8 @@ function OnrampStatusScreenUI(props: {
             }
           : undefined
       }
+      fromAddress={props.quote.fromAddress.toLowerCase()}
+      toAddress={props.quote.toAddress.toLowerCase()}
     />
   );
 

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

@@ -1,6 +1,7 @@
 import { ExternalLinkIcon } from "@radix-ui/react-icons";
 import { getCachedChain } from "../../../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
+import { shortenAddress } from "../../../../../../../utils/address.js";
 import { formatNumber } from "../../../../../../../utils/formatNumber.js";
 import {
   fontSize,
@@ -37,6 +38,8 @@ export function OnRampTxDetailsTable(props: {
     text: FiatStatusMeta["status"];
     txHash?: string;
   };
+  fromAddress?: string;
+  toAddress?: string;
 }) {
   const onRampExplorers = useChainExplorers(
     getCachedChain(props.token.chainId),
@@ -112,6 +115,26 @@ export function OnRampTxDetailsTable(props: {
         </>
       )}
 
+      {props.fromAddress &&
+        props.toAddress &&
+        props.fromAddress !== props.toAddress && (
+          <>
+            {lineSpacer}
+            <Container
+              flex="row"
+              center="y"
+              style={{
+                justifyContent: "space-between",
+              }}
+            >
+              <Text>Send to</Text>
+              <Container flex="row" gap="xs" center="y">
+                <Text>{shortenAddress(props.toAddress)}</Text>
+              </Container>
+            </Container>
+          </>
+        )}
+
       {lineSpacer}
 
       {/* Transaction Hash link */}

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

@@ -5,7 +5,6 @@ import type { BuyWithCryptoQuote } from "../../../../../../../pay/buyWithCrypto/
 import { getPostOnRampQuote } from "../../../../../../../pay/buyWithFiat/getPostOnRampQuote.js";
 import type { BuyWithFiatStatus } from "../../../../../../../pay/buyWithFiat/getStatus.js";
 import { iconSize } from "../../../../../../core/design-system/index.js";
-import { useActiveAccount } from "../../../../../hooks/wallets/useActiveAccount.js";
 import { Spacer } from "../../../../components/Spacer.js";
 import { Spinner } from "../../../../components/Spinner.js";
 import { Container, ModalHeader } from "../../../../components/basic.js";
@@ -13,6 +12,7 @@ import { Button } from "../../../../components/buttons.js";
 import { Text } from "../../../../components/text.js";
 import { AccentFailIcon } from "../../../icons/AccentFailIcon.js";
 import { SwapFlow } from "../swap/SwapFlow.js";
+import type { PayerInfo } from "../types.js";
 
 export function PostOnRampSwap(props: {
   client: ThirdwebClient;
@@ -22,9 +22,8 @@ export function PostOnRampSwap(props: {
   onDone: () => void;
   isBuyForTx: boolean;
   isEmbed: boolean;
+  payer: PayerInfo;
 }) {
-  const account = useActiveAccount();
-
   const [lockedOnRampQuote, setLockedOnRampQuote] = useState<
     BuyWithCryptoQuote | undefined
   >(undefined);
@@ -92,7 +91,7 @@ export function PostOnRampSwap(props: {
     );
   }
 
-  if (!lockedOnRampQuote || !account) {
+  if (!lockedOnRampQuote) {
     return (
       <Container fullHeight>
         <Container p="lg">
@@ -118,7 +117,7 @@ export function PostOnRampSwap(props: {
 
   return (
     <SwapFlow
-      account={account}
+      payer={props.payer}
       buyWithCryptoQuote={lockedOnRampQuote}
       client={props.client}
       onBack={props.onBack}

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

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import type { BuyWithFiatStatus } from "../../../../../../../pay/buyWithFiat/getStatus.js";
+import type { PayerInfo } from "../types.js";
 import { type BuyWithFiatPartialQuote, FiatSteps } from "./FiatSteps.js";
 import { PostOnRampSwap } from "./PostOnRampSwap.js";
 
@@ -20,6 +21,7 @@ export function PostOnRampSwapFlow(props: {
   onSwapFlowStarted: () => void;
   isBuyForTx: boolean;
   isEmbed: boolean;
+  payer: PayerInfo;
 }) {
   const [statusForSwap, setStatusForSwap] = useState<
     BuyWithFiatStatus | undefined
@@ -35,6 +37,7 @@ export function PostOnRampSwapFlow(props: {
         onDone={props.onDone}
         isBuyForTx={props.isBuyForTx}
         isEmbed={props.isEmbed}
+        payer={props.payer}
       />
     );
   }

package/src/react/web/ui/ConnectWallet/screens/Buy/main/types.ts

@@ -1,3 +1,5 @@
+import type { BuyWithCryptoQuote } from "../../../../../../../pay/buyWithCrypto/getQuote.js";
+import type { BuyWithFiatQuote } from "../../../../../../../pay/buyWithFiat/getQuote.js";
 import type { PreparedTransaction } from "../../../../../../../transaction/prepare-transaction.js";
 
 export type BuyForTx = {
@@ -8,10 +10,6 @@ export type BuyForTx = {
 };
 
 export type SelectedScreen =
-  | {
-      id: "node";
-      node: React.ReactNode;
-    }
   | {
       id:
         | "main"
@@ -30,4 +28,17 @@ export type SelectedScreen =
   | {
       id: "select-currency";
       backScreen: SelectedScreen;
+    }
+  | {
+      id: "swap-flow";
+      quote: BuyWithCryptoQuote;
+    }
+  | {
+      id: "fiat-flow";
+      quote: BuyWithFiatQuote;
+      openedWindow: Window | null;
+    }
+  | {
+      id: "connect-payer-wallet";
+      backScreen: SelectedScreen;
     };

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

@@ -3,7 +3,9 @@ import { useState } from "react";
 import type { Chain } from "../../../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import type { BuyWithCryptoQuote } from "../../../../../../../pay/buyWithCrypto/getQuote.js";
+import { sendTransaction } from "../../../../../../../transaction/actions/send-transaction.js";
 import { waitForReceipt } from "../../../../../../../transaction/actions/wait-for-tx-receipt.js";
+import { shortenAddress } from "../../../../../../../utils/address.js";
 import { formatNumber } from "../../../../../../../utils/formatNumber.js";
 import { useCustomTheme } from "../../../../../../core/design-system/CustomThemeProvider.js";
 import {
@@ -11,10 +13,6 @@ import {
   iconSize,
 } from "../../../../../../core/design-system/index.js";
 import { useChainName } from "../../../../../../core/hooks/others/useChainQuery.js";
-import { useSendTransactionCore } from "../../../../../../core/hooks/transaction/useSendTransaction.js";
-import { useActiveWallet } from "../../../../../hooks/wallets/useActiveWallet.js";
-import { useActiveWalletChain } from "../../../../../hooks/wallets/useActiveWalletChain.js";
-import { useSwitchActiveWalletChain } from "../../../../../hooks/wallets/useSwitchActiveWalletChain.js";
 import { Skeleton } from "../../../../components/Skeleton.js";
 import { Spacer } from "../../../../components/Spacer.js";
 import { Spinner } from "../../../../components/Spinner.js";
@@ -27,6 +25,7 @@ import { StyledDiv } from "../../../../design-system/elements.js";
 import type { ERC20OrNativeToken } from "../../nativeToken.js";
 import { PayTokenIcon } from "../PayTokenIcon.js";
 import { Step } from "../Stepper.js";
+import type { PayerInfo } from "../types.js";
 import { SwapFees } from "./Fees.js";
 import { formatSeconds } from "./formatSeconds.js";
 import { addPendingTx } from "./pendingSwapTx.js";
@@ -49,15 +48,8 @@ export function SwapConfirmationScreen(props: {
   fromToken: ERC20OrNativeToken;
   fromTokenSymbol: string;
   isFiatFlow: boolean;
+  payer: PayerInfo;
 }) {
-  const activeChain = useActiveWalletChain();
-  const activeWallet = useActiveWallet();
-  const switchChain = useSwitchActiveWalletChain();
-  const sendTransactionMutation = useSendTransactionCore({
-    wallet: activeWallet,
-    switchChain,
-  });
-
   const isApprovalRequired = props.quote.approval !== undefined;
   const initialStep = isApprovalRequired ? "approval" : "swap";
 
@@ -66,6 +58,9 @@ export function SwapConfirmationScreen(props: {
     "pending" | "success" | "error" | "idle"
   >("idle");
 
+  const receiver = props.quote.swapDetails.toAddress;
+  const sender = props.quote.swapDetails.fromAddress;
+
   return (
     <Container p="lg">
       <ModalHeader title="Buy" onBack={props.onBack} />
@@ -85,17 +80,6 @@ export function SwapConfirmationScreen(props: {
         <Spacer y="lg" />
       )}
 
-      {/* Receive */}
-      <ConfirmItem label="Receive">
-        <RenderTokenInfo
-          chain={props.toChain}
-          amount={String(formatNumber(Number(props.toAmount), 4))}
-          symbol={props.toTokenSymbol}
-          token={props.toToken}
-          client={props.client}
-        />
-      </ConfirmItem>
-
       {/* Pay */}
       <ConfirmItem label="Pay">
         <RenderTokenInfo
@@ -107,6 +91,17 @@ export function SwapConfirmationScreen(props: {
         />
       </ConfirmItem>
 
+      {/* Receive */}
+      <ConfirmItem label="Receive">
+        <RenderTokenInfo
+          chain={props.toChain}
+          amount={String(formatNumber(Number(props.toAmount), 4))}
+          symbol={props.toTokenSymbol}
+          token={props.toToken}
+          client={props.client}
+        />
+      </ConfirmItem>
+
       {/* Fees  */}
       <ConfirmItem label="Fees">
         <SwapFees quote={props.quote} align="right" />
@@ -122,6 +117,13 @@ export function SwapConfirmationScreen(props: {
         </Text>
       </ConfirmItem>
 
+      {/* Send to  */}
+      {receiver !== sender && (
+        <ConfirmItem label="Send to">
+          <Text color="primaryText">{shortenAddress(receiver)}</Text>
+        </ConfirmItem>
+      )}
+
       <Spacer y="xl" />
 
       {/* Show 2 steps - Approve and confirm  */}
@@ -162,11 +164,13 @@ export function SwapConfirmationScreen(props: {
         </>
       )}
 
-      {activeChain && activeChain.id !== props.fromChain.id ? (
+      {props.payer.chain.id !== props.fromChain.id ? (
         <SwitchNetworkButton
           fullWidth
-          chain={props.fromChain}
           variant="accent"
+          switchChain={async () => {
+            await props.payer.wallet.switchChain(props.fromChain);
+          }}
         />
       ) : (
         <Button
@@ -178,9 +182,10 @@ export function SwapConfirmationScreen(props: {
               try {
                 setStatus("pending");
 
-                const tx = await sendTransactionMutation.mutateAsync(
-                  props.quote.approval,
-                );
+                const tx = await sendTransaction({
+                  account: props.payer.account,
+                  transaction: props.quote.approval,
+                });
 
                 await waitForReceipt({ ...tx, maxBlocksWaitTime: 50 });
                 // props.onQuoteFinalized(props.quote);
@@ -201,8 +206,8 @@ export function SwapConfirmationScreen(props: {
                 // Fix for inApp wallet
                 // Ideally - the pay server sends a non-legacy transaction to avoid this issue
                 if (
-                  activeWallet?.id === "inApp" ||
-                  activeWallet?.id === "embedded"
+                  props.payer.wallet.id === "inApp" ||
+                  props.payer.wallet.id === "embedded"
                 ) {
                   tx = {
                     ...props.quote.transactionRequest,
@@ -210,7 +215,10 @@ export function SwapConfirmationScreen(props: {
                   };
                 }
 
-                const _swapTx = await sendTransactionMutation.mutateAsync(tx);
+                const _swapTx = await sendTransaction({
+                  account: props.payer.account,
+                  transaction: tx,
+                });
 
                 await waitForReceipt({ ..._swapTx, maxBlocksWaitTime: 50 });
 
@@ -289,7 +297,10 @@ function RenderTokenInfo(props: {
   );
 }
 
-function ConfirmItem(props: { label: string; children: React.ReactNode }) {
+function ConfirmItem(props: {
+  label: string;
+  children: React.ReactNode;
+}) {
   return (
     <>
       <Container

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

@@ -2,16 +2,15 @@ import { ChevronDownIcon } from "@radix-ui/react-icons";
 import type { Chain } from "../../../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import { formatNumber } from "../../../../../../../utils/formatNumber.js";
+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";
 import { useWalletBalance } from "../../../../../../core/hooks/others/useWalletBalance.js";
 import type { TokenInfo } from "../../../../../../core/utils/defaultTokens.js";
-import { useActiveAccount } from "../../../../../hooks/wallets/useActiveAccount.js";
 import { Skeleton } from "../../../../components/Skeleton.js";
 import { Container } from "../../../../components/basic.js";
 import { Button } from "../../../../components/buttons.js";
@@ -36,12 +35,12 @@ export function PayWithCrypto(props: {
   isLoading: boolean;
   client: ThirdwebClient;
   freezeChainAndTokenSelection?: boolean;
+  payerAccount: Account;
 }) {
   const { name } = useChainName(props.chain);
-  const activeAccount = useActiveAccount();
 
   const balanceQuery = useWalletBalance({
-    address: activeAccount?.address,
+    address: props.payerAccount.address,
     chain: props.chain,
     tokenAddress: isNativeToken(props.token) ? undefined : props.token.address,
     client: props.client,
@@ -53,10 +52,8 @@ export function PayWithCrypto(props: {
       borderColor="borderColor"
       flex="row"
       style={{
-        borderRadius: radius.md,
-        borderBottomRightRadius: 0,
-        borderBottomLeftRadius: 0,
         borderWidth: "1px",
+        borderTopWidth: 0,
         borderStyle: "solid",
         borderBottom: "none",
         flexWrap: "nowrap",

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

@@ -3,16 +3,16 @@ import { getCachedChain } from "../../../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../../../../constants/addresses.js";
 import type { BuyWithCryptoQuote } from "../../../../../../../pay/buyWithCrypto/getQuote.js";
-import type { Account } from "../../../../../../../wallets/interfaces/wallet.js";
 import type { TokenInfo } from "../../../../../../core/utils/defaultTokens.js";
 import { type ERC20OrNativeToken, NATIVE_TOKEN } from "../../nativeToken.js";
+import type { PayerInfo } from "../types.js";
 import { SwapConfirmationScreen } from "./ConfirmationScreen.js";
 import { SwapStatusScreen } from "./SwapStatusScreen.js";
 
 type SwapFlowProps = {
   onBack?: () => void;
   buyWithCryptoQuote: BuyWithCryptoQuote;
-  account: Account;
+  payer: PayerInfo;
   onViewPendingTx: () => void;
   client: ThirdwebClient;
   isFiatFlow: boolean;
@@ -104,6 +104,7 @@ export function SwapFlow(props: SwapFlowProps) {
       onTryAgain={props.onTryAgain}
       quote={quote}
       isFiatFlow={props.isFiatFlow}
+      payer={props.payer}
     />
   );
 }