thirdweb 5.48.0-nightly-cbd6fd87d0120c6013ef354fe8ff22293e4c08e2-20240820000346 → 5.48.0

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

@@ -19,6 +19,7 @@ import type { SmartWalletOptions } from "../../../../wallets/smart/types.js";
 import type { AppMetadata } from "../../../../wallets/types.js";
 import {
   CustomThemeProvider,
+  parseTheme,
   useCustomTheme,
 } from "../../../core/design-system/CustomThemeProvider.js";
 import {
@@ -51,15 +52,20 @@ import type {
   SupportedTokens,
 } from "../../../core/utils/defaultTokens.js";
 import { hasSmartAccount } from "../../../core/utils/isSmartWallet.js";
-import { useConnectedWalletDetails } from "../../../core/utils/wallet.js";
+import {
+  useConnectedWalletDetails,
+  useWalletInfo,
+} from "../../../core/utils/wallet.js";
 import { WalletUIStatesProvider } from "../../providers/wallet-ui-states-provider.js";
 import { ChainIcon } from "../components/ChainIcon.js";
 import { CopyIcon } from "../components/CopyIcon.js";
-import { Img } from "../components/Img.js";
+import { IconContainer } from "../components/IconContainer.js";
 import { Modal } from "../components/Modal.js";
 import { Skeleton } from "../components/Skeleton.js";
 import { Spacer } from "../components/Spacer.js";
 import { Spinner } from "../components/Spinner.js";
+import { ToolTip } from "../components/Tooltip.js";
+import { WalletImage } from "../components/WalletImage.js";
 import { Container, Line } from "../components/basic.js";
 import { Button, IconButton } from "../components/buttons.js";
 import { Link, Text } from "../components/text.js";
@@ -78,8 +84,6 @@ import { onModalUnmount } from "./constants.js";
 import { CoinsIcon } from "./icons/CoinsIcon.js";
 import { FundsIcon } from "./icons/FundsIcon.js";
 import { OutlineWalletIcon } from "./icons/OutlineWalletIcon.js";
-import { ShuffleIconLucide } from "./icons/ShuffleIconLucide.js";
-import { SmartWalletBadgeIcon } from "./icons/SmartAccountBadgeIcon.js";
 import { getConnectLocale } from "./locale/getConnectLocale.js";
 import type { ConnectLocale } from "./locale/types.js";
 import { LazyBuyScreen } from "./screens/Buy/LazyBuyScreen.js";
@@ -125,7 +129,6 @@ export const ConnectedWalletDetails: React.FC<{
   const setRootEl = useContext(SetRootElementContext);
   const activeAccount = useActiveAccount();
   const walletChain = useActiveWalletChain();
-  const theme = useCustomTheme();
 
   const { ensAvatarQuery, addressOrENS, balanceQuery } =
     useConnectedWalletDetails(
@@ -191,36 +194,37 @@ export const ConnectedWalletDetails: React.FC<{
       data-test="connected-wallet-details"
       onClick={openModal}
     >
-      {ensAvatarQuery.data ? (
-        <Img
-          src={ensAvatarQuery.data}
-          width="50px"
-          height="50px"
-          style={{
-            width: 50,
-            height: 50,
-          }}
-          client={client}
-        />
-      ) : (
-        activeAccount && <Blobbie address={activeAccount.address} size={50} />
-      )}
+      <Container
+        style={{
+          borderRadius: "100%",
+          overflow: "hidden",
+          width: "35px",
+          height: "35px",
+        }}
+      >
+        {ensAvatarQuery.data ? (
+          <img
+            alt=""
+            src={ensAvatarQuery.data}
+            style={{
+              width: "100%",
+              height: "100%",
+            }}
+          />
+        ) : (
+          activeAccount && <Blobbie address={activeAccount.address} size={35} />
+        )}
+      </Container>
       <Container
         flex="column"
-        gap="3xs"
-        px="sm"
-        py="xs"
+        gap="4xs"
         style={{
-          border: `1px solid ${theme.colors.borderColor}`,
           textOverflow: "ellipsis",
-          minWidth: "115px",
-          height: "50px",
           whiteSpace: "nowrap",
           borderRadius: `0 ${radius.md} ${radius.md} 0`,
         }}
       >
         {/* Address */}
-
         {addressOrENS ? (
           <Text
             size="xs"
@@ -231,7 +235,7 @@ export const ConnectedWalletDetails: React.FC<{
             {addressOrENS}
           </Text>
         ) : (
-          <Skeleton height={fontSize.sm} width="80px" />
+          <Skeleton height={fontSize.xs} width="80px" />
         )}
 
         {/* Balance */}
@@ -239,9 +243,12 @@ export const ConnectedWalletDetails: React.FC<{
           <Text
             className={`${TW_CONNECTED_WALLET}__balance`}
             size="xs"
-            weight={500}
+            color="secondaryText"
+            weight={400}
           >
-            {Number(balanceQuery.data.displayValue).toFixed(3)}{" "}
+            {Number.parseFloat(
+              Number(balanceQuery.data.displayValue).toFixed(3),
+            )}{" "}
             {balanceQuery.data.symbol}
           </Text>
         ) : (
@@ -282,6 +289,7 @@ function DetailsModal(props: {
       activeAccount,
       props.displayBalanceToken,
     );
+  const theme = parseTheme(props.theme);
 
   const activeWallet = useActiveWallet();
   const chainIconQuery = useChainIconUrl(walletChain);
@@ -340,8 +348,18 @@ function DetailsModal(props: {
       {chainNameQuery.isLoading ? (
         <Skeleton height={"16px"} width={"150px"} />
       ) : (
-        <Text color="primaryText" multiline>
+        <Text color="primaryText" size="md" multiline>
           {chainNameQuery.name || `Unknown chain #${walletChain?.id}`}
+          <Text color="secondaryText" size="xs">
+            {balanceQuery.data ? (
+              Number.parseFloat(
+                Number(balanceQuery.data.displayValue).toFixed(3),
+              )
+            ) : (
+              <Skeleton height="1em" width="100px" />
+            )}{" "}
+            {balanceQuery.data?.symbol}
+          </Text>
         </Text>
       )}
 
@@ -358,114 +376,103 @@ function DetailsModal(props: {
 
   let content = (
     <div>
-      <Spacer y="xl" />
-
-      <IconButton
-        style={{
-          position: "absolute",
-          top: spacing.lg,
-          left: spacing.lg,
-          transform: "translateX(-6px)",
-        }}
-        onClick={() => {
-          setScreen("wallet-manager");
-        }}
-      >
-        <div
-          style={{
-            width: `${iconSize.md}px`,
-            height: `${iconSize.md}px`,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-          }}
-        >
-          <ShuffleIconLucide size="20" />
-        </div>
-      </IconButton>
-
-      <Container px="lg" flex="column" center="x">
-        <Container
-          style={{
-            position: "relative",
-            height: `${iconSize.xxl}px`,
-            width: `${iconSize.xxl}px`,
-            overflow: "visible",
-          }}
-        >
-          {ensAvatarQuery.data ? (
-            <Img
-              src={ensAvatarQuery.data}
-              width={iconSize.xxl}
-              height={iconSize.xxl}
+      <Spacer y="xs" />
+      <Container p="lg" gap="sm" flex="row" center="y">
+        <ToolTip tip="Switch wallet">
+          <div
+            style={{
+              cursor: "pointer",
+            }}
+            onKeyDown={(e) => {
+              if (e.key === "w") {
+                setScreen("wallet-manager");
+              }
+            }}
+            onClick={() => {
+              setScreen("wallet-manager");
+            }}
+          >
+            <Container
               style={{
-                borderRadius: radius.md,
+                position: "relative",
+                height: `${iconSize.xl}px`,
+                width: `${iconSize.xl}px`,
               }}
-              client={client}
-            />
-          ) : (
-            activeAccount && (
+            >
               <Container
-                style={{ borderRadius: radius.md, overflow: "hidden" }}
+                style={{
+                  width: "100%",
+                  height: "100%",
+                  borderRadius: "100%",
+                  overflow: "hidden",
+                }}
               >
-                <Blobbie
-                  address={activeAccount.address}
-                  size={Number(iconSize.xxl)}
-                />
+                {ensAvatarQuery.data ? (
+                  <img
+                    src={ensAvatarQuery.data}
+                    style={{
+                      width: iconSize.xxl,
+                      height: iconSize.xxl,
+                    }}
+                    alt=""
+                  />
+                ) : (
+                  activeAccount && (
+                    <Blobbie
+                      address={activeAccount.address}
+                      size={Number(iconSize.xxl)}
+                    />
+                  )
+                )}
               </Container>
-            )
-          )}
-        </Container>
-
-        <Spacer y="md" />
-
-        <ConnectedToSmartWallet client={props.client} connectLocale={locale} />
-
-        {(activeWallet?.id === "embedded" || activeWallet?.id === "inApp") && (
-          <InAppWalletUserInfo client={props.client} />
-        )}
+              <Container
+                style={{
+                  position: "absolute",
+                  bottom: -2,
+                  right: -2,
+                }}
+              >
+                <IconContainer
+                  style={{
+                    background: theme.colors.modalBg,
+                  }}
+                  padding="4px"
+                >
+                  {activeWallet && (
+                    <WalletImage
+                      style={{ borderRadius: 0 }}
+                      id={activeWallet.id}
+                      client={client}
+                      size="12"
+                    />
+                  )}
+                </IconContainer>
+              </Container>
+            </Container>
+          </div>
+        </ToolTip>
 
-        {/* Address */}
-        <div
-          style={{
-            display: "flex",
-            gap: spacing.xxs,
-            alignItems: "center",
-            transform: "translateX(10px)",
-          }}
-          data-test="connected-wallet-address"
-          data-address={activeAccount?.address}
-        >
-          <Text color="primaryText" weight={500} size="md">
-            {addressOrENS}
-          </Text>
-          <IconButton
+        <Container flex="column" gap="3xs">
+          <div
             style={{
-              padding: "3px",
+              display: "flex",
+              gap: spacing.xxs,
+              alignItems: "center",
             }}
-            data-test="copy-address"
           >
-            <CopyIcon
-              text={activeAccount?.address || ""}
-              tip={locale.copyAddress}
-              side="top"
-            />
-          </IconButton>
-        </div>
-
-        <Spacer y="xxs" />
-
-        {/* Balance */}
-        <Text weight={500} size="sm">
-          {balanceQuery.data ? (
-            Number(balanceQuery.data.displayValue).toFixed(3)
-          ) : (
-            <Skeleton height="1em" width="100px" />
-          )}{" "}
-          {balanceQuery.data?.symbol}{" "}
-        </Text>
+            <Text color="primaryText" weight={500} size="md">
+              {addressOrENS}
+            </Text>
+            <IconButton>
+              <CopyIcon
+                text={activeAccount?.address || ""}
+                tip={locale.copyAddress}
+              />
+            </IconButton>
+          </div>
+          <InAppWalletUserInfo client={client} locale={locale} />
+        </Container>
       </Container>
-      <Spacer y="lg" />
       <Container px="lg">
         {/* Send, Receive, Swap */}
         <Container
@@ -911,10 +918,13 @@ const WalletInfoButton = /* @__PURE__ */ StyledButton((_) => {
     borderRadius: radius.md,
     cursor: "pointer",
     display: "inline-flex",
+    gap: spacing.xs,
+    padding: spacing.xs,
     alignItems: "center",
     minWidth: "165px",
     height: "50px",
     boxSizing: "border-box",
+    border: `1px solid ${theme.colors.borderColor}`,
     WebkitTapHighlightColor: "transparent",
     lineHeight: "normal",
     animation: `${fadeInAnimation} 300ms ease`,
@@ -963,20 +973,8 @@ function ConnectedToSmartWallet(props: {
   }, [activeAccount, chain, client, isSmartWallet]);
 
   const content = (
-    <Container
-      flex="row"
-      bg="secondaryButtonBg"
-      gap="xxs"
-      style={{
-        borderRadius: radius.md,
-        padding: `${spacing.xxs} ${spacing.sm} ${spacing.xxs} ${spacing.xs}`,
-      }}
-      center="y"
-    >
-      <Container flex="row" color="accentText" center="both">
-        <SmartWalletBadgeIcon size={iconSize.xs} />
-      </Container>
-      <Text size="xs" color="secondaryButtonText">
+    <Container flex="row" gap="3xs" center="y">
+      <Text size="xs" weight={400} color="secondaryText">
         {locale.connectedToSmartWallet}
       </Text>
     </Container>
@@ -998,8 +996,6 @@ function ConnectedToSmartWallet(props: {
         ) : (
           <Text size="sm"> {content}</Text>
         )}
-
-        <Spacer y="xs" />
       </>
     );
   }
@@ -1007,9 +1003,15 @@ function ConnectedToSmartWallet(props: {
   return null;
 }
 
-function InAppWalletUserInfo(props: { client: ThirdwebClient }) {
-  const { client } = props;
+function InAppWalletUserInfo(props: {
+  client: ThirdwebClient;
+  locale: ConnectLocale;
+}) {
+  const { client, locale } = props;
   const account = useActiveAccount();
+  const activeWallet = useActiveWallet();
+  const { data: walletInfo } = useWalletInfo(activeWallet?.id);
+  const isSmartWallet = hasSmartAccount(activeWallet);
 
   const userInfoQuery = useQuery({
     queryKey: ["in-app-wallet-user", client, account?.address],
@@ -1031,21 +1033,19 @@ function InAppWalletUserInfo(props: { client: ThirdwebClient }) {
     },
   });
 
-  if (userInfoQuery.data) {
+  if (isSmartWallet) {
+    return <ConnectedToSmartWallet client={client} connectLocale={locale} />;
+  }
+
+  if (userInfoQuery.data || walletInfo) {
     return (
-      <Container
-        flex="row"
-        center="x"
-        style={{
-          paddingBottom: spacing.xs,
-        }}
-      >
-        <Text size="sm">{userInfoQuery.data}</Text>
-      </Container>
+      <Text size="xs" weight={400}>
+        {userInfoQuery.data || walletInfo?.name}
+      </Text>
     );
   }
 
-  return null;
+  return <Skeleton width="50px" height="10px" />;
 }
 
 /**

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

@@ -28,7 +28,6 @@ export const MenuButton = /* @__PURE__ */ StyledButton((_) => {
     transition: "background-color 200ms ease, transform 200ms ease",
     "&:hover": {
       backgroundColor: theme.colors.tertiaryBg,
-      transform: "scale(1.01)",
       svg: {
         color: theme.colors.accentText,
       },

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

@@ -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>
 

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/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>
+  );
+};