thirdweb 5.32.2-nightly-a6ed6e66dae7f2fa239c76a57e93b545e5d8da8d-20240704000330 → 5.32.3

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

@@ -0,0 +1,66 @@
+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 { useConnectedWallets } from "../../../../../hooks/wallets/useConnectedWallets.js";
+import { Spacer } from "../../../../components/Spacer.js";
+import { Container } from "../../../../components/basic.js";
+import { Button } from "../../../../components/buttons.js";
+import { Text } from "../../../../components/text.js";
+import { WalletSelectorButton } from "../WalletSelectorButton.js";
+
+export function WalletSwitcherDrawerContent(props: {
+  client: ThirdwebClient;
+  showAllWallets: boolean;
+  wallets: Wallet[] | undefined;
+  onSelect: (wallet: Wallet) => void;
+  onBack: () => void;
+  onConnect: () => void;
+  selectedAddress: string;
+}) {
+  const connectedWallets = useConnectedWallets();
+
+  // if all wallets are connected and showAll wallets is disabled, hide the connect button
+  const hideConnectButton =
+    !props.showAllWallets &&
+    props.wallets?.every((w) => connectedWallets.includes(w));
+
+  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;
+          return (
+            <WalletSelectorButton
+              key={w.id}
+              walletId={w.id}
+              client={props.client}
+              address={address || ""}
+              onClick={() => {
+                props.onSelect(w);
+                props.onBack();
+              }}
+              disableChevron
+              checked={address === props.selectedAddress}
+            />
+          );
+        })}
+      </Container>
+
+      <Spacer y="xxl" />
+
+      {!hideConnectButton && (
+        <Button variant="accent" fullWidth onClick={props.onConnect} gap="xs">
+          <PlusIcon width={iconSize.sm} height={iconSize.sm} />
+          Connect Wallet
+        </Button>
+      )}
+    </Container>
+  );
+}

package/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/BuyTxHistory.tsx

@@ -13,12 +13,15 @@ import {
 } from "../../../../../../core/design-system/index.js";
 import { useChainExplorers } from "../../../../../../core/hooks/others/useChainQuery.js";
 import { useActiveAccount } from "../../../../../hooks/wallets/useActiveAccount.js";
+import { useActiveWallet } from "../../../../../hooks/wallets/useActiveWallet.js";
 import { useActiveWalletChain } from "../../../../../hooks/wallets/useActiveWalletChain.js";
+import { LoadingScreen } from "../../../../../wallets/shared/LoadingScreen.js";
 import { Skeleton } from "../../../../components/Skeleton.js";
 import { Spinner } from "../../../../components/Spinner.js";
 import { Container, Line, ModalHeader } from "../../../../components/basic.js";
 import { Button, ButtonLink } from "../../../../components/buttons.js";
 import { Text } from "../../../../components/text.js";
+import type { PayerInfo } from "../types.js";
 import {
   BuyTxHistoryButton,
   BuyTxHistoryButtonHeight,
@@ -40,6 +43,18 @@ export function BuyTxHistory(props: {
   isEmbed: boolean;
 }) {
   const [selectedTx, setSelectedTx] = useState<TxStatusInfo | null>(null);
+  const activeChain = useActiveWalletChain();
+  const activeWallet = useActiveWallet();
+  const activeAccount = useActiveAccount();
+
+  const payer: PayerInfo | undefined =
+    activeChain && activeAccount && activeWallet
+      ? { chain: activeChain, account: activeAccount, wallet: activeWallet }
+      : undefined;
+
+  if (!payer) {
+    return <LoadingScreen />;
+  }
 
   if (selectedTx) {
     return (
@@ -50,6 +65,7 @@ export function BuyTxHistory(props: {
         onDone={props.onDone}
         isBuyForTx={props.isBuyForTx}
         isEmbed={props.isEmbed}
+        payer={payer}
       />
     );
   }

package/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/FiatDetailsScreen.tsx

@@ -8,6 +8,7 @@ import { useBuyWithFiatStatus } from "../../../../../../core/hooks/pay/useBuyWit
 import { Container, Line, ModalHeader } from "../../../../components/basic.js";
 import { OnRampTxDetailsTable } from "../fiat/FiatTxDetailsTable.js";
 import { PostOnRampSwapFlow } from "../fiat/PostOnRampSwapFlow.js";
+import type { PayerInfo } from "../types.js";
 import { getBuyWithFiatStatusMeta } from "./statusMeta.js";
 
 export function FiatDetailsScreen(props: {
@@ -17,6 +18,7 @@ export function FiatDetailsScreen(props: {
   onDone: () => void;
   isBuyForTx: boolean;
   isEmbed: boolean;
+  payer: PayerInfo;
 }) {
   const initialStatus = props.status;
   const [stopPolling, setStopPolling] = useState(false);
@@ -69,6 +71,7 @@ export function FiatDetailsScreen(props: {
         onSwapFlowStarted={() => {
           setStopPolling(true);
         }}
+        payer={props.payer}
       />
     );
   }

package/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/SwapDetailsScreen.tsx

@@ -3,6 +3,7 @@ import { getCachedChain } from "../../../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import type { BuyWithCryptoQuote } from "../../../../../../../pay/buyWithCrypto/getQuote.js";
 import type { ValidBuyWithCryptoStatus } from "../../../../../../../pay/buyWithCrypto/getStatus.js";
+import { shortenAddress } from "../../../../../../../utils/address.js";
 import {
   fontSize,
   iconSize,
@@ -79,6 +80,8 @@ type SwapTxDetailsData = {
   destinationTxHash?: string;
   isPartialSuccess: boolean;
   estimatedDuration: number;
+  fromAddress: string;
+  toAddress: string;
 };
 
 export function SwapTxDetailsTable(
@@ -132,6 +135,8 @@ export function SwapTxDetailsTable(
       isPartialSuccess,
       destinationTxHash: status.destination?.transactionHash,
       sourceTxHash: status.source?.transactionHash,
+      fromAddress: status.fromAddress,
+      toAddress: status.toAddress,
     };
   } else {
     const quote = props.quote;
@@ -150,6 +155,8 @@ export function SwapTxDetailsTable(
       },
       isPartialSuccess: false,
       estimatedDuration: quote.swapDetails.estimated.durationSeconds || 0,
+      fromAddress: quote.swapDetails.fromAddress,
+      toAddress: quote.swapDetails.toAddress,
     };
   }
 
@@ -270,6 +277,26 @@ export function SwapTxDetailsTable(
         </>
       )}
 
+      {uiData.fromAddress.toLowerCase() !== uiData.toAddress.toLowerCase() && (
+        <>
+          {lineSpacer}
+          <Container
+            flex="row"
+            center="y"
+            style={{
+              justifyContent: "space-between",
+            }}
+          >
+            <Text>Send to</Text>
+            <Container flex="row" gap="xs" center="y">
+              <Text color="primaryText">
+                {shortenAddress(uiData.toAddress)}
+              </Text>
+            </Container>
+          </Container>
+        </>
+      )}
+
       {lineSpacer}
 
       {/* source chain Tx hash link */}

package/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/TxDetailsScreen.tsx

@@ -1,4 +1,5 @@
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
+import type { PayerInfo } from "../types.js";
 import { FiatDetailsScreen } from "./FiatDetailsScreen.js";
 import { SwapDetailsScreen } from "./SwapDetailsScreen.js";
 import type { TxStatusInfo } from "./useBuyTransactionsToShow.js";
@@ -10,6 +11,7 @@ export function TxDetailsScreen(props: {
   onDone: () => void;
   isBuyForTx: boolean;
   isEmbed: boolean;
+  payer: PayerInfo;
 }) {
   const { statusInfo } = props;
 
@@ -32,6 +34,7 @@ export function TxDetailsScreen(props: {
         onDone={props.onDone}
         isBuyForTx={props.isBuyForTx}
         isEmbed={props.isEmbed}
+        payer={props.payer}
       />
     );
   }

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

@@ -0,0 +1,9 @@
+import type { Chain } from "../../../../../../chains/types.js";
+import type { Wallet } from "../../../../../../wallets/interfaces/wallet.js";
+import type { Account } from "../../../../../../wallets/interfaces/wallet.js";
+
+export type PayerInfo = {
+  wallet: Wallet;
+  chain: Chain;
+  account: Account;
+};

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

@@ -0,0 +1,63 @@
+import { useEffect, useState } from "react";
+import { useActiveAccount } from "../../../../hooks/wallets/useActiveAccount.js";
+import { useActiveWallet } from "../../../../hooks/wallets/useActiveWallet.js";
+import { useActiveWalletChain } from "../../../../hooks/wallets/useActiveWalletChain.js";
+import type { PayerInfo } from "./types.js";
+
+export function usePayerSetup() {
+  const wallet = useActiveWallet();
+  const account = useActiveAccount();
+  const activeChain = useActiveWalletChain();
+
+  const [_payer, setPayer] = useState<PayerInfo | undefined>();
+
+  useEffect(() => {
+    const wallet = _payer?.wallet;
+
+    function update() {
+      if (!wallet) {
+        setPayer(undefined);
+        return;
+      }
+
+      const account = wallet.getAccount();
+      const chain = wallet.getChain();
+      if (account && chain) {
+        console.log("updated to", account, chain);
+
+        setPayer({
+          account,
+          chain,
+          wallet,
+        });
+      } else {
+        setPayer(undefined);
+      }
+    }
+
+    if (wallet) {
+      const unsubChainChanged = wallet.subscribe("chainChanged", update);
+      const unsubAccountChanged = wallet.subscribe("accountChanged", update);
+      return () => {
+        unsubChainChanged();
+        unsubAccountChanged();
+      };
+    }
+
+    return undefined;
+  }, [_payer]);
+
+  const initialPayer =
+    account && activeChain && wallet
+      ? { account, chain: activeChain, wallet }
+      : undefined;
+
+  // return the payer state if its set
+  // otherwise return the active wallet as payer
+  const payer: PayerInfo | undefined = _payer || initialPayer;
+
+  return {
+    payer,
+    setPayer,
+  };
+}

package/src/react/web/ui/ConnectWallet/screens/Details/WalletManagerScreen.tsx

@@ -0,0 +1,203 @@
+import { CheckIcon, CrossCircledIcon, PlusIcon } from "@radix-ui/react-icons";
+import { useState } from "react";
+import type { Chain } from "../../../../../../chains/types.js";
+import type { ThirdwebClient } from "../../../../../../client/client.js";
+import { shortenAddress } from "../../../../../../utils/address.js";
+import type {
+  Account,
+  Wallet,
+} from "../../../../../../wallets/interfaces/wallet.js";
+import { useCustomTheme } from "../../../../../core/design-system/CustomThemeProvider.js";
+import {
+  fontSize,
+  iconSize,
+  spacing,
+} from "../../../../../core/design-system/index.js";
+import { useWalletBalance } from "../../../../../core/hooks/others/useWalletBalance.js";
+import { useActiveWallet } from "../../../../hooks/wallets/useActiveWallet.js";
+import { useConnectedWallets } from "../../../../hooks/wallets/useConnectedWallets.js";
+import { useDisconnect } from "../../../../hooks/wallets/useDisconnect.js";
+import { useSetActiveWallet } from "../../../../hooks/wallets/useSetActiveWallet.js";
+import { Skeleton } from "../../../components/Skeleton.js";
+import { Spacer } from "../../../components/Spacer.js";
+import { ToolTip } from "../../../components/Tooltip.js";
+import { WalletImage } from "../../../components/WalletImage.js";
+import { Container, Line, ModalHeader } from "../../../components/basic.js";
+import { Button, IconButton } from "../../../components/buttons.js";
+import { Text } from "../../../components/text.js";
+import { WalletButtonEl } from "../../WalletEntryButton.js";
+import {
+  WalletSwitcherConnectionScreen,
+  type WalletSwitcherConnectionScreenProps,
+} from "../WalletSwitcherConnectionScreen.js";
+import { formatTokenBalance } from "../formatTokenBalance.js";
+
+export function WalletManagerScreen(
+  props: Omit<
+    WalletSwitcherConnectionScreenProps,
+    "onSelect" | "isEmbed" | "selectedWallet"
+  > & {
+    activeAccount: Account;
+    activeWallet: Wallet;
+    activeChain: Chain;
+  },
+) {
+  const [screen, setScreen] = useState<"wallets" | "connect">("wallets");
+  const connectedWallets = useConnectedWallets();
+  const setActive = useSetActiveWallet();
+
+  // if all wallets are connected and showAll wallets is disabled, hide the connect button
+  const hideConnectButton =
+    !props.showAllWallets &&
+    props.wallets?.every((w) => connectedWallets.includes(w));
+
+  if (screen === "connect") {
+    return (
+      <WalletSwitcherConnectionScreen
+        {...props}
+        isEmbed={false}
+        onSelect={(w) => {
+          setActive(w);
+          props.onBack();
+        }}
+      />
+    );
+  }
+
+  return (
+    <Container>
+      <Container p="lg">
+        <ModalHeader title="Wallets" onBack={props.onBack} />
+      </Container>
+
+      <Line />
+      <Spacer y="md" />
+
+      <Container
+        px="md"
+        style={{
+          minHeight: "150px",
+        }}
+      >
+        <Container flex="column" gap="xs">
+          {connectedWallets.map((w) => {
+            return (
+              <WalletManangerButton
+                key={w.id}
+                client={props.client}
+                // address={address || ""}
+                onClick={() => {
+                  setActive(w);
+                  props.onBack();
+                }}
+                chain={props.activeChain}
+                wallet={w}
+              />
+            );
+          })}
+        </Container>
+      </Container>
+
+      <Spacer y="xxl" />
+
+      <Container p="lg">
+        {!hideConnectButton && (
+          <Button
+            variant="accent"
+            fullWidth
+            onClick={() => {
+              setScreen("connect");
+            }}
+            gap="xs"
+          >
+            <PlusIcon width={iconSize.sm} height={iconSize.sm} />
+            Connect Wallet
+          </Button>
+        )}
+      </Container>
+    </Container>
+  );
+}
+
+function WalletManangerButton(props: {
+  wallet: Wallet;
+  client: ThirdwebClient;
+  chain: Chain;
+  onClick: () => void;
+}) {
+  const theme = useCustomTheme();
+  const activeWallet = useActiveWallet();
+  const { disconnect } = useDisconnect();
+  const walletId = props.wallet.id;
+  const address = props.wallet.getAccount()?.address;
+  const balanceQuery = useWalletBalance({
+    address: address,
+    chain: props.chain,
+    client: props.client,
+  });
+
+  return (
+    <div
+      style={{
+        position: "relative",
+      }}
+    >
+      <WalletButtonEl
+        onClick={props.onClick}
+        style={{
+          justifyContent: "space-between",
+        }}
+      >
+        <Container flex="row" gap="sm" center="y">
+          <WalletImage client={props.client} id={walletId} size={iconSize.xl} />
+
+          <div>
+            <Text color="primaryText">{shortenAddress(address || "")}</Text>
+            <Spacer y="xxs" />
+            {balanceQuery.data ? (
+              <Text size="sm" color="secondaryText">
+                {formatTokenBalance(balanceQuery.data)}
+              </Text>
+            ) : (
+              <Skeleton width="100px" height={fontSize.sm} />
+            )}
+          </div>
+        </Container>
+      </WalletButtonEl>
+
+      <div
+        style={{
+          position: "absolute",
+          zIndex: 1,
+          right: spacing.xxs,
+          top: "50%",
+          transform: "translateY(-50%)",
+        }}
+      >
+        {activeWallet?.id === props.wallet.id ? (
+          <ToolTip tip="Active Wallet">
+            <IconButton>
+              <CheckIcon width={iconSize.md} height={iconSize.md} />
+            </IconButton>
+          </ToolTip>
+        ) : (
+          <ToolTip tip="Disconnect">
+            <IconButton
+              onClick={() => {
+                disconnect(props.wallet);
+              }}
+            >
+              <CrossCircledIcon
+                width={iconSize.md}
+                height={iconSize.md}
+                style={{
+                  color: theme.colors.danger,
+                }}
+              />
+            </IconButton>
+          </ToolTip>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/react/web/ui/ConnectWallet/screens/SendFunds.tsx

@@ -136,8 +136,6 @@ function SendFundsForm(props: {
   });
 
   const { receiverAddress, setReceiverAddress, amount, setAmount } = props;
-  const showInvalidAddressError = receiverAddress;
-
   const sendTokenMutation = useSendToken(props.client);
 
   function getErrorMessage(error?: TXError) {
@@ -155,7 +153,7 @@ function SendFundsForm(props: {
       return locale.insufficientFunds;
     }
 
-    return locale.transactionFailed;
+    return message;
   }
 
   if (!activeChain) {
@@ -281,7 +279,6 @@ function SendFundsForm(props: {
         </Label>
         <Spacer y="sm" />
         <Input
-          data-error={showInvalidAddressError}
           required
           id="receiver"
           placeholder={"0x... or ENS name"}
@@ -292,15 +289,6 @@ function SendFundsForm(props: {
           }}
         />
 
-        {showInvalidAddressError && (
-          <>
-            <Spacer y="xs" />
-            <Text color="danger" size="sm">
-              {locale.invalidAddress}
-            </Text>
-          </>
-        )}
-
         <Spacer y="lg" />
 
         {/* Amount  */}

package/src/react/web/ui/ConnectWallet/screens/SignatureScreen.tsx

@@ -29,7 +29,7 @@ import { WalletLogoSpinner } from "./WalletLogoSpinner.js";
 type Status = "signing" | "failed" | "idle";
 
 export const SignatureScreen: React.FC<{
-  onDone: () => void;
+  onDone: (() => void) | undefined;
   modalSize: "compact" | "wide";
   termsOfServiceUrl?: string;
   privacyPolicyUrl?: string;
@@ -56,7 +56,7 @@ export const SignatureScreen: React.FC<{
     try {
       setStatus("signing");
       await siweAuth.doLogin();
-      onDone();
+      onDone?.();
     } catch (err) {
       await wait(1000);
       setStatus("failed");

package/src/react/web/ui/ConnectWallet/screens/WalletSwitcherConnectionScreen.tsx

@@ -0,0 +1,83 @@
+import type { Chain } from "../../../../../chains/types.js";
+import type { ThirdwebClient } from "../../../../../client/client.js";
+import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
+import type { SmartWalletOptions } from "../../../../../wallets/smart/types.js";
+import type { AppMetadata } from "../../../../../wallets/types.js";
+import { useConnectedWallets } from "../../../hooks/wallets/useConnectedWallets.js";
+import { getDefaultWallets } from "../../../wallets/defaultWallets.js";
+import { ConnectModalContent } from "../Modal/ConnectModalContent.js";
+import { useSetupScreen } from "../Modal/screen.js";
+import type { ConnectLocale } from "../locale/types.js";
+
+export type WalletSwitcherConnectionScreenProps = {
+  chain: Chain | undefined;
+  chains: Chain[] | undefined;
+  client: ThirdwebClient;
+  wallets: Wallet[] | undefined;
+  appMetadata: AppMetadata | undefined;
+  connectLocale: ConnectLocale;
+  isEmbed: boolean;
+  accountAbstraction: SmartWalletOptions | undefined;
+  onSelect: (wallet: Wallet) => void;
+  recommendedWallets: Wallet[] | undefined;
+  showAllWallets: boolean;
+  walletConnect:
+    | {
+        projectId?: string;
+      }
+    | undefined;
+  onBack: () => void;
+};
+
+export function WalletSwitcherConnectionScreen(
+  props: WalletSwitcherConnectionScreenProps,
+) {
+  const connectedWallets = useConnectedWallets();
+  const wallets =
+    props.wallets ||
+    getDefaultWallets({
+      appMetadata: props.appMetadata,
+      chains: props.chains,
+    });
+
+  const screenSetup = useSetupScreen({
+    size: "compact",
+    welcomeScreen: undefined,
+    wallets: wallets,
+  });
+
+  return (
+    <ConnectModalContent
+      accountAbstraction={props.accountAbstraction}
+      auth={undefined}
+      chain={props.chain}
+      chains={props.chains}
+      client={props.client}
+      connectLocale={props.connectLocale}
+      isEmbed={props.isEmbed}
+      isOpen={true}
+      meta={{
+        showThirdwebBranding: false,
+      }}
+      onClose={() => {}}
+      onConnect={(w) => {
+        props.onSelect(w);
+        props.onBack();
+      }}
+      recommendedWallets={props.recommendedWallets}
+      screenSetup={screenSetup}
+      welcomeScreen={undefined}
+      wallets={wallets}
+      setModalVisibility={() => {}}
+      shouldSetActive={false}
+      showAllWallets={props.showAllWallets}
+      size="compact"
+      walletConnect={props.walletConnect}
+      modalHeader={{
+        title: "Connect",
+        onBack: props.onBack,
+      }}
+      walletIdsToHide={connectedWallets.map((x) => x.id)}
+    />
+  );
+}

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

@@ -70,4 +70,5 @@ export type WalletDetailsModalScreen =
   | "view-funds"
   | "private-key"
   | "manage-wallet"
-  | "wallet-connect-receiver";
+  | "wallet-connect-receiver"
+  | "wallet-manager";