thirdweb 5.47.1 → 5.48.0

package/src/react/web/ui/ConnectWallet/Modal/AllWalletsUI.tsx

@@ -34,6 +34,7 @@ function AllWalletsUI(props: {
   client: ThirdwebClient;
   recommendedWallets: Wallet[] | undefined;
   connectLocale: ConnectLocale;
+  disableSelectionDataReset?: boolean;
 }) {
   const { itemsToShow, lastItemRef } = useShowMore<HTMLLIElement>(10, 10);
   const setSelectionData = useSetSelectionData();
@@ -143,7 +144,9 @@ function AllWalletsUI(props: {
                       selectWallet={() => {
                         const wallet = createWallet(walletInfo.id);
                         props.onSelect(wallet);
-                        setSelectionData({});
+                        if (!props.disableSelectionDataReset) {
+                          setSelectionData({});
+                        }
                       }}
                       client={props.client}
                       recommendedWallets={props.recommendedWallets}

package/src/react/web/ui/ConnectWallet/Modal/AnyWalletConnectUI.tsx

@@ -267,6 +267,7 @@ export function AnyWalletConnectUI(props: {
           chain={props.chain}
           client={props.client}
           size={props.size}
+          walletConnect={props.walletConnect}
           connectLocale={props.connectLocale}
           meta={props.meta}
         />

package/src/react/web/ui/ConnectWallet/WalletSelector.tsx

@@ -87,6 +87,7 @@ export type WalletSelectorProps = {
       }
     | undefined;
   walletIdsToHide: WalletId[] | undefined;
+  disableSelectionDataReset?: boolean;
 };
 
 /**
@@ -278,6 +279,7 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
         recommendedWallets={props.recommendedWallets}
         chain={props.chain}
         showAllWallets={props.showAllWallets}
+        diableSelectionDataReset={props.disableSelectionDataReset}
       />
     );
 
@@ -305,6 +307,7 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
           recommendedWallets={props.recommendedWallets}
           chain={props.chain}
           showAllWallets={props.showAllWallets}
+          diableSelectionDataReset={props.disableSelectionDataReset}
         />
       );
 
@@ -348,6 +351,7 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
               recommendedWallets={props.recommendedWallets}
               chain={props.chain}
               showAllWallets={props.showAllWallets}
+              diableSelectionDataReset={props.disableSelectionDataReset}
             />
             {eoaWallets.length > 0 && (
               <>
@@ -418,6 +422,7 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
                     recommendedWallets={props.recommendedWallets}
                     chain={props.chain}
                     showAllWallets={props.showAllWallets}
+                    diableSelectionDataReset={props.disableSelectionDataReset}
                   />
                 </Container>
 
@@ -456,6 +461,7 @@ const WalletSelectorInner: React.FC<WalletSelectorProps> = (props) => {
             recommendedWallets={props.recommendedWallets}
             chain={props.chain}
             showAllWallets={props.showAllWallets}
+            diableSelectionDataReset={props.disableSelectionDataReset}
           />
         );
 
@@ -578,6 +584,7 @@ const WalletSelection: React.FC<{
   connectLocale: ConnectLocale;
   client: ThirdwebClient;
   chain: Chain | undefined;
+  diableSelectionDataReset?: boolean;
 }> = (props) => {
   const wallets = sortWallets(props.wallets, props.recommendedWallets);
   const { screen } = useScreenContext();
@@ -615,7 +622,9 @@ const WalletSelection: React.FC<{
               <WalletEntryButton
                 walletId={wallet.id}
                 selectWallet={() => {
-                  setSelectionData({});
+                  if (!props.diableSelectionDataReset) {
+                    setSelectionData({});
+                  }
                   props.selectWallet(wallet);
                 }}
                 connectLocale={props.connectLocale}

package/src/react/web/ui/ConnectWallet/locale/en.ts

@@ -12,7 +12,7 @@ const connectLocaleEn: ConnectLocale = {
   installed: "Installed",
   buy: "Buy",
   continueAsGuest: "Continue as guest",
-  connectAWallet: "Connect a wallet",
+  connectAWallet: "Connect a Wallet",
   newToWallets: "New to wallets?",
   getStarted: "Get started",
   guest: "Guest",

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

@@ -15,7 +15,6 @@ 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 { SmartWalletBadgeIcon } from "../../icons/SmartAccountBadgeIcon.js";
 
 export function WalletSelectorButton(props: {
   address: string;
@@ -107,11 +106,6 @@ export function WalletRow(props: {
       <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

@@ -68,6 +68,16 @@ export function FiatFlow(props: {
     props.openedWindow,
   );
 
+  const onPostOnrampSuccess = useCallback(() => {
+    // report the status of fiat status instead of post onramp swap status when post onramp swap is successful
+    getBuyWithFiatStatus({
+      intentId: props.quote.intentId,
+      client: props.client,
+    }).then((status) => {
+      props.onSuccess(status);
+    });
+  }, [props.onSuccess, props.quote.intentId, props.client]);
+
   if (screen.id === "step-1") {
     return (
       <FiatSteps
@@ -110,16 +120,6 @@ export function FiatFlow(props: {
     );
   }
 
-  const onPostOnrampSuccess = useCallback(() => {
-    // report the status of fiat status instead of post onramp swap status when post onramp swap is successful
-    getBuyWithFiatStatus({
-      intentId: props.quote.intentId,
-      client: props.client,
-    }).then((status) => {
-      props.onSuccess(status);
-    });
-  }, [props.onSuccess, props.quote.intentId, props.client]);
-
   if (screen.id === "postonramp-swap") {
     return (
       <PostOnRampSwapFlow

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

@@ -1,4 +1,4 @@
-import { CheckIcon, CrossCircledIcon, PlusIcon } from "@radix-ui/react-icons";
+import { CheckIcon, MinusIcon, PlusIcon } from "@radix-ui/react-icons";
 import { useState } from "react";
 import type { Chain } from "../../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../../client/client.js";
@@ -148,20 +148,19 @@ function WalletManangerButton(props: {
           justifyContent: "space-between",
         }}
       >
-        <Container flex="row" gap="sm" center="y">
-          <WalletImage client={props.client} id={walletId} size={iconSize.xl} />
+        <Container flex="row" gap="md" center="y">
+          <WalletImage client={props.client} id={walletId} size={iconSize.lg} />
 
-          <div>
+          <Container flex="column" gap="4xs">
             <Text color="primaryText">{shortenAddress(address || "")}</Text>
-            <Spacer y="xxs" />
             {balanceQuery.data ? (
-              <Text size="sm" color="secondaryText">
+              <Text size="xs" color="secondaryText" weight={400}>
                 {formatTokenBalance(balanceQuery.data)}
               </Text>
             ) : (
               <Skeleton width="100px" height={fontSize.sm} />
             )}
-          </div>
+          </Container>
         </Container>
       </WalletButtonEl>
 
@@ -187,11 +186,11 @@ function WalletManangerButton(props: {
                 disconnect(props.wallet);
               }}
             >
-              <CrossCircledIcon
+              <MinusIcon
                 width={iconSize.md}
                 height={iconSize.md}
                 style={{
-                  color: theme.colors.danger,
+                  color: theme.colors.secondaryText,
                 }}
               />
             </IconButton>

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

@@ -23,6 +23,7 @@ export function LinkProfileScreen(props: {
   onBack: () => void;
   locale: ConnectLocale;
   client: ThirdwebClient;
+  walletConnect: { projectId?: string } | undefined;
 }) {
   const activeWallet = useActiveWallet();
   const chain = useActiveWalletChain();
@@ -36,6 +37,7 @@ export function LinkProfileScreen(props: {
     return (
       <Suspense fallback={<LoadingScreen />}>
         <InAppWalletConnectUI
+          walletConnect={props.walletConnect}
           wallet={activeWallet as Wallet<"inApp">}
           done={() => {
             queryClient.invalidateQueries({ queryKey: ["profiles"] });

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

@@ -10,6 +10,7 @@ import { Img } from "../../components/Img.js";
 import { Spacer } from "../../components/Spacer.js";
 import { Container, Line, ModalHeader } from "../../components/basic.js";
 import { Text } from "../../components/text.js";
+import { Blobbie } from "../Blobbie.js";
 import { MenuButton } from "../MenuButton.js";
 import { AddUserIcon } from "../icons/AddUserIcon.js";
 import type { ConnectLocale } from "../locale/types.js";
@@ -98,13 +99,26 @@ export function LinkedProfilesScreen(props: {
                 }}
                 disabled // disabled until we have more data to show on a dedicated profile screen
               >
-                <Img
-                  src={getWalletIcon(profile.type)}
-                  width={iconSize.md}
-                  height={iconSize.md}
-                  loading="eager"
-                  client={props.client}
-                />
+                {profile.type === "wallet" && profile.details.address ? (
+                  <Container
+                    style={{
+                      width: "24px",
+                      height: "24px",
+                      borderRadius: "100%",
+                      overflow: "hidden",
+                    }}
+                  >
+                    <Blobbie address={profile.details.address} size={24} />
+                  </Container>
+                ) : (
+                  <Img
+                    src={getWalletIcon(profile.type)}
+                    width={iconSize.md}
+                    height={iconSize.md}
+                    loading="eager"
+                    client={props.client}
+                  />
+                )}
                 <Text color="primaryText">
                   {getProfileDisplayName(profile)}
                 </Text>

package/src/react/web/ui/TransactionButton/index.tsx

@@ -11,7 +11,7 @@ import { Button } from "../components/buttons.js";
 
 /**
  * TransactionButton component is used to render a button that triggers a transaction.
- * - It shows a "Switch Network" button if the connected wallet is on a different chain than the transaction.
+ * It shows a "Switch Network" button if the connected wallet is on a different chain than the transaction.
  * @param props - The props for this component.
  * Refer to [TransactionButtonProps](https://portal.thirdweb.com/references/typescript/v5/TransactionButtonProps) for details.
  * @example

package/src/react/web/ui/components/ChainIcon.tsx

@@ -2,6 +2,7 @@ import type { ThirdwebClient } from "../../../../client/client.js";
 import { resolveScheme } from "../../../../utils/ipfs.js";
 import { StyledDiv } from "../design-system/elements.js";
 import { Img } from "./Img.js";
+import { Container } from "./basic.js";
 
 export const fallbackChainIcon =
   "data:image/svg+xml;charset=UTF-8,%3csvg width='15' height='14' viewBox='0 0 15 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7 8.04238e-07C5.1435 8.04238e-07 3.36301 0.737501 2.05025 2.05025C0.7375 3.36301 0 5.1435 0 7C0 7.225 -1.52737e-07 7.445 0.0349998 7.665C0.16385 9.0151 0.68213 10.2988 1.52686 11.3598C2.37158 12.4209 3.50637 13.2137 4.79326 13.642C6.0801 14.0702 7.4637 14.1153 8.7758 13.7719C10.0879 13.4285 11.2719 12.7113 12.184 11.7075C13.0961 10.7038 13.6969 9.4567 13.9135 8.1178C14.1301 6.7789 13.9531 5.406 13.4039 4.16587C12.8548 2.92574 11.9573 1.87184 10.8204 1.13228C9.6835 0.392721 8.3563 -0.000649196 7 8.04238e-07ZM7 1C8.581 1.00137 10.0975 1.62668 11.22 2.74V3.24C9.2438 2.55991 7.0956 2.56872 5.125 3.265C4.96758 3.1116 4.76997 3.00586 4.555 2.96H4.43C4.37 2.75 4.315 2.54 4.27 2.325C4.225 2.11 4.2 1.92 4.175 1.715C5.043 1.24658 6.0137 1.00091 7 1ZM5.5 3.935C7.3158 3.32693 9.2838 3.34984 11.085 4C10.8414 5.2703 10.3094 6.4677 9.53 7.5C9.312 7.4077 9.0707 7.3855 8.8395 7.4366C8.6083 7.4877 8.3988 7.6094 8.24 7.785C8.065 7.685 7.89 7.585 7.74 7.47C6.7307 6.7966 5.8877 5.9023 5.275 4.855C5.374 4.73221 5.4461 4.58996 5.4866 4.43749C5.5271 4.28502 5.5351 4.12575 5.51 3.97L5.5 3.935ZM3.5 2.135C3.5 2.24 3.53 2.35 3.55 2.455C3.595 2.675 3.655 2.89 3.715 3.105C3.52353 3.21838 3.36943 3.38531 3.2717 3.58522C3.17397 3.78513 3.13688 4.00927 3.165 4.23C2.37575 4.7454 1.67078 5.3795 1.075 6.11C1.19455 5.3189 1.47112 4.55966 1.88843 3.87701C2.30575 3.19437 2.85539 2.60208 3.505 2.135H3.5ZM3.5 9.99C3.30481 10.0555 3.13037 10.1714 2.9943 10.3259C2.85822 10.4804 2.76533 10.6681 2.725 10.87H2.405C1.59754 9.9069 1.1146 8.7136 1.025 7.46L1.08 7.365C1.70611 6.3942 2.52463 5.562 3.485 4.92C3.62899 5.0704 3.81094 5.179 4.01162 5.2345C4.2123 5.2899 4.42423 5.2901 4.625 5.235C5.2938 6.3652 6.208 7.3306 7.3 8.06C7.505 8.195 7.715 8.32 7.925 8.44C7.9082 8.6312 7.9391 8.8237 8.015 9C7.1 9.7266 6.0445 10.256 4.915 10.555C4.78401 10.3103 4.57028 10.1201 4.31199 10.0184C4.05369 9.9167 3.76766 9.9102 3.505 10L3.5 9.99ZM7 12.99C5.9831 12.9903 4.98307 12.7304 4.095 12.235L4.235 12.205C4.43397 12.1397 4.61176 12.0222 4.74984 11.8648C4.88792 11.7074 4.98122 11.5158 5.02 11.31C6.2985 10.984 7.4921 10.3872 8.52 9.56C8.7642 9.7027 9.0525 9.75 9.3295 9.6927C9.6064 9.6355 9.8524 9.4778 10.02 9.25C10.7254 9.4334 11.4511 9.5275 12.18 9.53H12.445C11.9626 10.5673 11.1938 11.4451 10.2291 12.0599C9.2643 12.6747 8.144 13.0009 7 13V12.99ZM10.255 8.54C10.2545 8.3304 10.1975 8.1249 10.09 7.945C10.9221 6.8581 11.5012 5.5991 11.785 4.26C12.035 4.37667 12.2817 4.50667 12.525 4.65C13.0749 5.9495 13.1493 7.4012 12.735 8.75C11.9049 8.8142 11.0698 8.7484 10.26 8.555L10.255 8.54Z' fill='%23646D7A'/%3e%3c/svg%3e";
@@ -33,7 +34,7 @@ export const ChainIcon: React.FC<{
   };
 
   return (
-    <div
+    <Container
       style={{
         position: "relative",
         display: "flex",
@@ -49,7 +50,7 @@ export const ChainIcon: React.FC<{
         client={props.client}
       />
       {props.active && <ActiveDot />}
-    </div>
+    </Container>
   );
 };
 
@@ -58,7 +59,7 @@ const ActiveDot = /* @__PURE__ */ StyledDiv({
   height: "28%",
   borderRadius: "50%",
   position: "absolute",
-  top: "60%",
+  bottom: 0,
   right: 0,
   backgroundColor: "#00d395",
   boxShadow: "0 0 0 2px var(--bg)",

package/src/react/web/ui/components/CopyAddress.tsx

@@ -0,0 +1,34 @@
+"use client";
+import { spacing } from "../../../core/design-system/index.js";
+import { useClipboard } from "../hooks/useCopyClipboard.js";
+import { IconButton } from "./buttons.js";
+import { Text } from "./text.js";
+
+/**
+ * @internal
+ */
+export const CopyAddress: React.FC<{
+  addressOrEns: string;
+}> = (props) => {
+  const { hasCopied, onCopy } = useClipboard(props.addressOrEns);
+
+  return (
+    <IconButton
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          onCopy();
+        }
+      }}
+      onClick={onCopy}
+      style={{ padding: `${spacing["4xs"]} ${spacing.xxs}` }}
+    >
+      <Text
+        color={hasCopied ? "primaryText" : "secondaryText"}
+        weight={400}
+        size="sm"
+      >
+        {hasCopied ? "Copied address!" : props.addressOrEns}
+      </Text>
+    </IconButton>
+  );
+};

package/src/react/web/ui/components/IconContainer.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
+
+/**
+ * @internal
+ */
+export const IconContainer: React.FC<{
+  children: ReactNode | ReactNode[];
+  padding?: string;
+  style?: React.CSSProperties;
+}> = (props) => {
+  const theme = useCustomTheme();
+  return (
+    <div
+      style={{
+        position: "relative",
+        overflow: "hidden",
+        display: "flex",
+        justifyItems: "center",
+        flexShrink: 0,
+        alignItems: "center",
+        padding: props.padding ?? "6px",
+        borderRadius: "100%",
+        border: `1px solid ${theme.colors.borderColor}`,
+        ...props.style,
+      }}
+    >
+      {props.children}
+    </div>
+  );
+};

package/src/react/web/ui/components/Modal.tsx

@@ -114,7 +114,7 @@ export const Modal: React.FC<{
               {!props.hideCloseIcon && (
                 <CrossContainer>
                   <Dialog.Close asChild>
-                    <IconButton type="button" aria-label="Close">
+                    <IconButton autoFocus type="button" aria-label="Close">
                       <Cross2Icon
                         width={iconSize.md}
                         height={iconSize.md}

package/src/react/web/ui/components/WalletImage.tsx

@@ -4,7 +4,6 @@ import type { ThirdwebClient } from "../../../../client/client.js";
 import { webLocalStorage } from "../../../../utils/storage/webStorage.js";
 import { getWalletInfo } from "../../../../wallets/__generated__/getWalletInfo.js";
 import { getInstalledWalletProviders } from "../../../../wallets/injected/mipdStore.js";
-import { getStoredActiveWalletId } from "../../../../wallets/manager/index.js";
 import type { WalletId } from "../../../../wallets/wallet-types.js";
 import { radius } from "../../../core/design-system/index.js";
 import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js";
@@ -33,13 +32,7 @@ export function WalletImage(props: {
       // show auth provider icon for in-app wallets
       // show the admin EOA icon for smart
       const storage = webLocalStorage;
-      let activeEOAId = props.id;
-      if (props.id === "smart") {
-        const storedId = await getStoredActiveWalletId(storage);
-        if (storedId) {
-          activeEOAId = storedId;
-        }
-      }
+      const activeEOAId = props.id;
       let image: string | undefined;
 
       if (

package/src/react/web/ui/components/formElements.tsx

@@ -110,16 +110,16 @@ export const InputContainer = /* @__PURE__ */ StyledDiv(() => {
   return {
     display: "flex",
     borderRadius: radius.md,
-    boxShadow: `0 0 0px 1.5px ${theme.colors.borderColor}`,
+    boxShadow: `0 0 0px 1px ${theme.colors.borderColor}`,
     "&:focus-within": {
-      boxShadow: `0 0 0px 2px ${theme.colors.accentText}`,
+      boxShadow: `0 0 0px 1px ${theme.colors.accentText}`,
     },
     "input:focus": {
       boxShadow: "none",
     },
     // show error ring on container instead of input
     "&[data-error='true']": {
-      boxShadow: `0 0 0px 2px ${theme.colors.danger}`,
+      boxShadow: `0 0 0px 1px ${theme.colors.danger}`,
     },
   };
 });

package/src/react/web/wallets/in-app/CountrySelector.tsx

@@ -2,11 +2,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { useRef } from "react";
 import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
-import {
-  fontSize,
-  radius,
-  spacing,
-} from "../../../core/design-system/index.js";
+import { radius, spacing } from "../../../core/design-system/index.js";
 import { StyledOption, StyledSelect } from "../../ui/design-system/elements.js";
 
 export function CountrySelector({
@@ -47,8 +43,7 @@ export function CountrySelector({
           setCountryCode(e.target.value);
         }}
         style={{
-          paddingLeft: spacing.md,
-          paddingRight: "0",
+          padding: `${spacing.sm} ${spacing.md}`,
         }}
       >
         <Option
@@ -89,7 +84,6 @@ const Option = /* @__PURE__ */ StyledOption(() => {
 const Select = /* @__PURE__ */ StyledSelect((_) => {
   const theme = useCustomTheme();
   return {
-    fontSize: fontSize.sm,
     display: "block",
     padding: spacing.sm,
     boxSizing: "border-box",

package/src/react/web/wallets/in-app/InAppWalletConnectUI.tsx

@@ -14,6 +14,7 @@ import { OTPLoginUI } from "../shared/OTPLoginUI.js";
 import { PassKeyLogin } from "../shared/PassKeyLogin.js";
 import { SocialLogin } from "../shared/SocialLogin.js";
 import { InAppWalletFormUIScreen } from "./InAppWalletFormUI.js";
+import { WalletAuth } from "./WalletAuth.js";
 import { useInAppWalletLocale } from "./useInAppWalletLocale.js";
 
 /**
@@ -36,6 +37,7 @@ function InAppWalletConnectUI(props: {
   chain: Chain | undefined;
   connectLocale: ConnectLocale;
   isLinking?: boolean;
+  walletConnect: { projectId?: string } | undefined;
 }) {
   const data = useSelectionData();
   const setSelectionData = useSetSelectionData();
@@ -99,6 +101,22 @@ function InAppWalletConnectUI(props: {
     );
   }
 
+  if (state?.walletLogin) {
+    return (
+      <WalletAuth
+        meta={props.meta}
+        inAppLocale={locale}
+        walletConnect={props.walletConnect}
+        wallet={props.wallet}
+        client={props.client}
+        size={props.size}
+        done={done}
+        onBack={goBackToMain || (() => setSelectionData({}))}
+        locale={props.connectLocale}
+      />
+    );
+  }
+
   if (state?.socialLogin) {
     return (
       <SocialLogin

package/src/react/web/wallets/in-app/WalletAuth.tsx

@@ -0,0 +1,166 @@
+import { Suspense, useRef, useState } from "react";
+import { defineChain } from "../../../../chains/utils.js";
+import type { ThirdwebClient } from "../../../../client/client.js";
+import { linkProfile } from "../../../../wallets/in-app/core/wallet/profiles.js";
+import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
+import { iconSize } from "../../../core/design-system/index.js";
+import { useAddConnectedWallet } from "../../../core/hooks/wallets/useAddConnectedWallet.js";
+import AllWalletsUI from "../../ui/ConnectWallet/Modal/AllWalletsUI.js";
+import { WalletSelector } from "../../ui/ConnectWallet/WalletSelector.js";
+import type { ConnectLocale } from "../../ui/ConnectWallet/locale/types.js";
+import { Spacer } from "../../ui/components/Spacer.js";
+import { WalletImage } from "../../ui/components/WalletImage.js";
+import { Container, ModalHeader } from "../../ui/components/basic.js";
+import { getDefaultWallets } from "../defaultWallets.js";
+import { ErrorState } from "../shared/ErrorState.js";
+import { LoadingScreen } from "../shared/LoadingScreen.js";
+import { LoadingState } from "../shared/LoadingState.js";
+import type { InAppWalletLocale } from "../shared/locale/types.js";
+
+export function WalletAuth(props: {
+  wallet: Wallet<"inApp">;
+  client: ThirdwebClient;
+  done: () => void;
+  size: "compact" | "wide";
+  locale: ConnectLocale;
+  inAppLocale: InAppWalletLocale;
+  onBack: () => void;
+  walletConnect: { projectId?: string } | undefined;
+  meta?: {
+    title?: string;
+    titleIconUrl?: string;
+    showThirdwebBranding?: boolean;
+    termsOfServiceUrl?: string;
+    privacyPolicyUrl?: string;
+  };
+}) {
+  const { wallet, done } = props;
+  const addConnectedWallet = useAddConnectedWallet();
+  const walletToConnect = useRef<Wallet>();
+  const [status, setStatus] = useState<"loading" | "error" | "selecting">(
+    "selecting",
+  );
+  const [error, setError] = useState<string | undefined>();
+  const [showAll, setShowAll] = useState<boolean>(false);
+
+  const back = () => {
+    setStatus("selecting");
+    walletToConnect.current = undefined;
+    props.onBack();
+  };
+
+  async function login(walletToLink: Wallet) {
+    setStatus("loading");
+    walletToConnect.current = walletToLink;
+    try {
+      await linkProfile(wallet as Wallet<"inApp">, {
+        strategy: "wallet",
+        wallet: walletToLink,
+        chain: wallet.getChain() || defineChain(1),
+      }).catch((e) => {
+        setError(e.message);
+        throw e;
+      });
+      addConnectedWallet(walletToLink);
+      done();
+    } catch {
+      setStatus("error");
+    }
+  }
+
+  if (!walletToConnect.current) {
+    if (showAll) {
+      return (
+        <Suspense fallback={<LoadingScreen />}>
+          <AllWalletsUI
+            onBack={() => setShowAll(false)}
+            onSelect={async (newWallet) => {
+              login(newWallet);
+              setShowAll(false);
+            }}
+            client={props.client}
+            connectLocale={props.locale}
+            recommendedWallets={undefined}
+            specifiedWallets={[]}
+            size={props.size}
+            disableSelectionDataReset={true}
+          />
+        </Suspense>
+      );
+    }
+    return (
+      <WalletSelector
+        title={props.locale.connectAWallet}
+        wallets={getDefaultWallets()}
+        selectWallet={async (newWallet) => {
+          login(newWallet);
+        }}
+        onShowAll={() => {
+          setShowAll(true);
+        }}
+        done={() => {}}
+        goBack={back}
+        setModalVisibility={() => {}}
+        client={props.client}
+        connectLocale={props.locale}
+        isEmbed={false}
+        recommendedWallets={undefined}
+        chain={wallet.getChain()}
+        showAllWallets={true}
+        chains={[]}
+        size={props.size}
+        meta={props.meta || {}}
+        walletConnect={props.walletConnect}
+        modalHeader={{ title: props.inAppLocale.linkWallet, onBack: back }}
+        walletIdsToHide={["inApp"]}
+        disableSelectionDataReset={true}
+      />
+    );
+  }
+
+  return (
+    <Container animate="fadein" fullHeight flex="column">
+      <Container p="lg">
+        <ModalHeader title={props.inAppLocale.linkWallet} onBack={back} />
+      </Container>
+
+      <Container
+        px={props.size === "wide" ? "xxl" : "lg"}
+        expand
+        flex="column"
+        center="y"
+      >
+        <div>
+          {status === "error" ? (
+            <>
+              <ErrorState
+                onTryAgain={() => {
+                  if (!walletToConnect.current) {
+                    throw new Error("Failed to connect to unknown wallet");
+                  }
+                  login(walletToConnect.current);
+                }}
+                title={error || "Failed to Login"}
+              />
+              <Spacer y="lg" />
+            </>
+          ) : (
+            <>
+              <LoadingState
+                title="Sign in with your wallet"
+                subtitle="A pop-up prompt will appear to sign-in and verify your wallet"
+                icon={
+                  <WalletImage
+                    id={walletToConnect.current.id ?? ""}
+                    size={iconSize.xl}
+                    client={props.client}
+                  />
+                }
+              />
+            </>
+          )}
+        </div>
+      </Container>
+    </Container>
+  );
+}