thirdweb 5.46.2-nightly-d3f43a757bf14b3329f1d0e413ee71f8f98e963a-20240816000358 → 5.47.0-nightly-f0d6e343eea28cd49863ba4794b89d6b070c52b2-20240818000714

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

@@ -318,8 +318,8 @@ export function ConnectButton(props: ConnectButtonProps) {
         variant="primary"
         type="button"
         style={{
-          minWidth: "150px",
-          minHeight: "52px",
+          minWidth: "165px",
+          height: "50px",
           ...props.connectButton?.style,
         }}
       >
@@ -420,8 +420,8 @@ function ConnectButtonInner(
         variant="primary"
         type="button"
         style={{
-          minWidth: "150px",
-          minHeight: "52px",
+          minWidth: "165px",
+          height: "50px",
           fontSize: "16px",
           ...props.connectButton?.style,
         }}
@@ -459,8 +459,8 @@ function ConnectButtonInner(
           variant="primary"
           type="button"
           style={{
-            minWidth: "150px",
-            minHeight: "52px",
+            minWidth: "165px",
+            height: "50px",
             ...props.connectButton?.style,
           }}
         >
@@ -480,8 +480,8 @@ function ConnectButtonInner(
             }}
             className={props.signInButton?.className}
             style={{
-              minWidth: "150px",
-              minHeight: "52px",
+              minWidth: "165px",
+              minHeight: "50px",
               ...props.signInButton?.style,
             }}
           >

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

@@ -25,7 +25,6 @@ import {
   type Theme,
   fontSize,
   iconSize,
-  media,
   radius,
   spacing,
 } from "../../../core/design-system/index.js";
@@ -61,13 +60,13 @@ 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 { 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";
 import { fadeInAnimation } from "../design-system/animations.js";
 import { StyledButton } from "../design-system/elements.js";
 import type { LocaleId } from "../types.js";
+import { Blobbie } from "./Blobbie.js";
 import { MenuButton, MenuLink } from "./MenuButton.js";
 import { ScreenSetupContext, useSetupScreen } from "./Modal/screen.js";
 import {
@@ -78,7 +77,6 @@ import { TransactionsScreen } from "./TransactionsScreen.js";
 import { onModalUnmount } from "./constants.js";
 import { CoinsIcon } from "./icons/CoinsIcon.js";
 import { FundsIcon } from "./icons/FundsIcon.js";
-import { GenericWalletIcon } from "./icons/GenericWalletIcon.js";
 import { OutlineWalletIcon } from "./icons/OutlineWalletIcon.js";
 import { ShuffleIconLucide } from "./icons/ShuffleIconLucide.js";
 import { SmartWalletBadgeIcon } from "./icons/SmartAccountBadgeIcon.js";
@@ -125,9 +123,9 @@ export const ConnectedWalletDetails: React.FC<{
   const { connectLocale: locale, client } = props;
 
   const setRootEl = useContext(SetRootElementContext);
-  const activeWallet = useActiveWallet();
   const activeAccount = useActiveAccount();
   const walletChain = useActiveWalletChain();
+  const theme = useCustomTheme();
 
   const { ensAvatarQuery, addressOrENS, balanceQuery } =
     useConnectedWalletDetails(
@@ -196,20 +194,30 @@ export const ConnectedWalletDetails: React.FC<{
       {ensAvatarQuery.data ? (
         <Img
           src={ensAvatarQuery.data}
-          width={iconSize.sm}
-          height={iconSize.sm}
+          width="50px"
+          height="50px"
           style={{
-            borderRadius: radius.xs,
+            width: 50,
+            height: 50,
           }}
           client={client}
         />
-      ) : activeWallet?.id ? (
-        <WalletImage size={iconSize.md} id={activeWallet.id} client={client} />
       ) : (
-        <GenericWalletIcon size={iconSize.md} />
+        activeAccount && <Blobbie address={activeAccount.address} size={50} />
       )}
-
-      <Container flex="column" gap="3xs">
+      <Container
+        flex="column"
+        gap="3xs"
+        px="sm"
+        py="xs"
+        style={{
+          border: `1px solid ${theme.colors.borderColor}`,
+          textOverflow: "ellipsis",
+          width: "115px",
+          whiteSpace: "nowrap",
+          borderRadius: `0 ${radius.md} ${radius.md} 0`,
+        }}
+      >
         {/* Address */}
 
         {addressOrENS ? (
@@ -376,25 +384,37 @@ function DetailsModal(props: {
       </IconButton>
 
       <Container px="lg" flex="column" center="x">
-        {ensAvatarQuery.data ? (
-          <Img
-            src={ensAvatarQuery.data}
-            width={iconSize.xxl}
-            height={iconSize.xxl}
-            style={{
-              borderRadius: radius.lg,
-            }}
-            client={client}
-          />
-        ) : activeWallet?.id ? (
-          <WalletImage
-            size={iconSize.xxl}
-            id={activeWallet.id}
-            client={client}
-          />
-        ) : (
-          <GenericWalletIcon size={iconSize.xxl} />
-        )}
+        <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}
+              style={{
+                borderRadius: radius.md,
+              }}
+              client={client}
+            />
+          ) : (
+            activeAccount && (
+              <Container
+                style={{ borderRadius: radius.md, overflow: "hidden" }}
+              >
+                <Blobbie
+                  address={activeAccount.address}
+                  size={Number(iconSize.xxl)}
+                />
+              </Container>
+            )
+          )}
+        </Container>
 
         <Spacer y="md" />
 
@@ -885,27 +905,17 @@ const WalletInfoButton = /* @__PURE__ */ StyledButton((_) => {
   return {
     all: "unset",
     background: theme.colors.connectedButtonBg,
-    border: `1px solid ${theme.colors.borderColor}`,
-    padding: `${spacing.xs} ${spacing.sm}`,
+    overflow: "hidden",
     borderRadius: radius.md,
     cursor: "pointer",
     display: "inline-flex",
     alignItems: "center",
-    minWidth: "150px",
-    minHeight: "52px",
-    gap: spacing.xs,
+    minWidth: "165px",
+    height: "50px",
     boxSizing: "border-box",
     WebkitTapHighlightColor: "transparent",
     lineHeight: "normal",
     animation: `${fadeInAnimation} 300ms ease`,
-    [media.mobile]: {
-      gap: spacing.sm,
-      padding: `${spacing.xs} ${spacing.xs}`,
-      img: {
-        width: `${iconSize.md}px`,
-        height: `${iconSize.md}px`,
-      },
-    },
     "&:hover": {
       transition: "background 250ms ease",
       background: theme.colors.connectedButtonBgHover,

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

@@ -3,7 +3,7 @@ import type { ConnectLocale } from "./types.js";
 const connectLocaleEn: ConnectLocale = {
   id: "en_US",
   signIn: "Sign in",
-  defaultButtonTitle: "Connect Wallet",
+  defaultButtonTitle: "Connect",
   connecting: "Connecting",
   switchNetwork: "Switch Network",
   switchingNetwork: "Switching Network",
@@ -95,7 +95,7 @@ const connectLocaleEn: ConnectLocale = {
     },
     signingScreen: {
       title: "Signing In",
-      prompt: "Sign the signature request in your wallet",
+      prompt: "Signing the signature request in your wallet",
       promptForSafe:
         "Sign signature request in your wallet & approve transaction in Safe",
       approveTransactionInSafe: "Approve transaction in Safe",

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

@@ -136,7 +136,7 @@ export function TransactionButton(props: TransactionButtonProps) {
           !unstyled
             ? {
                 opacity: !account || disabled ? 0.5 : 1,
-                minWidth: "150px",
+                minWidth: "165px",
                 position: "relative",
                 ...buttonProps.style,
               }

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.46.2-nightly-d3f43a757bf14b3329f1d0e413ee71f8f98e963a-20240816000358";
+export const version = "5.47.0-nightly-f0d6e343eea28cd49863ba4794b89d6b070c52b2-20240818000714";

package/src/wallets/smart/smart-wallet-zksync.test.ts

@@ -1,6 +1,7 @@
 import { beforeAll, describe, expect, it } from "vitest";
 import { TEST_CLIENT } from "../../../test/src/test-clients.js";
 import { ANVIL_PKEY_B } from "../../../test/src/test-wallets.js";
+import { abstractTestnet } from "../../chains/chain-definitions/abstract-testnet.js";
 import { zkSyncSepolia } from "../../chains/chain-definitions/zksync-sepolia.js";
 import { defineChain } from "../../chains/utils.js";
 import { getContract } from "../../contract/contract.js";
@@ -61,7 +62,7 @@ describe.runIf(process.env.TW_SECRET_KEY).skip(
       expect(tx.transactionHash.length).toBe(66);
     });
 
-    it("should send a transaction on zkcandy", async () => {
+    it.skip("should send a transaction on zkcandy", async () => {
       const zkCandy = defineChain(302);
       const zkCandySmartWallet = smartWallet({
         chain: zkCandy,
@@ -85,5 +86,31 @@ describe.runIf(process.env.TW_SECRET_KEY).skip(
       });
       expect(tx.transactionHash.length).toBe(66);
     });
+
+    it("should send a transaction on abstract", async () => {
+      const abstractSmartWallet = smartWallet({
+        chain: abstractTestnet,
+        gasless: true,
+      });
+      const account = await abstractSmartWallet.connect({
+        client: TEST_CLIENT,
+        personalAccount,
+      });
+      const tx = await sendTransaction({
+        transaction: claimTo({
+          contract: getContract({
+            address: "0x8A24a7Df38fA5fCCcFD1259e90Fb6996fDdfcADa", // edition drop
+            chain: abstractTestnet,
+            client,
+          }),
+          quantity: 1n,
+          to: account.address,
+          tokenId: 0n,
+        }),
+        account: smartAccount,
+      });
+      console.log("tx", tx.transactionHash);
+      expect(tx.transactionHash.length).toBe(66);
+    });
   },
 );