thirdweb 5.64.0 → 5.64.2

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

@@ -4,7 +4,9 @@ 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 type { AuthOption } from "../../../../wallets/types.js";
 import type { WalletId } from "../../../../wallets/wallet-types.js";
+import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
 import { radius } from "../../../core/design-system/index.js";
 import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js";
 import { getLastAuthProvider } from "../../../core/utils/storage.js";
@@ -13,8 +15,15 @@ import {
   genericWalletIcon,
   getSocialIcon,
 } from "../../../core/utils/walletIcon.js";
+import { EmailIcon } from "../ConnectWallet/icons/EmailIcon.js";
+import { FingerPrintIcon } from "../ConnectWallet/icons/FingerPrintIcon.js";
+import { GuestIcon } from "../ConnectWallet/icons/GuestIcon.js";
+import { OutlineWalletIcon } from "../ConnectWallet/icons/OutlineWalletIcon.js";
+import { PhoneIcon } from "../ConnectWallet/icons/PhoneIcon.js";
 import { Img } from "./Img.js";
 
+type WalletImageState = { uri: string; authProvider?: AuthOption };
+
 /**
  * @internal
  */
@@ -24,7 +33,8 @@ export function WalletImage(props: {
   client: ThirdwebClient;
   style?: React.CSSProperties;
 }) {
-  const [image, setImage] = useState<string | undefined>(undefined);
+  const theme = useCustomTheme();
+  const [image, setImage] = useState<WalletImageState | undefined>(undefined);
   const activeWallet = useActiveWallet();
   useEffect(() => {
     async function fetchImage() {
@@ -33,7 +43,7 @@ export function WalletImage(props: {
       // show the admin EOA icon for smart
       const storage = webLocalStorage;
       const activeEOAId = props.id;
-      let image: string | undefined;
+      let image: WalletImageState | undefined;
 
       if (
         activeEOAId === "inApp" &&
@@ -43,17 +53,22 @@ export function WalletImage(props: {
         // when showing an active wallet icon - check last auth provider and override the IAW icon
         const lastAuthProvider = await getLastAuthProvider(storage);
         image = lastAuthProvider
-          ? getSocialIcon(lastAuthProvider)
-          : genericWalletIcon;
+          ? {
+              uri: getSocialIcon(lastAuthProvider),
+              authProvider: lastAuthProvider as AuthOption,
+            }
+          : { uri: "", authProvider: "wallet" };
       } else {
         const mipdImage = getInstalledWalletProviders().find(
           (x) => x.info.rdns === activeEOAId,
         )?.info.icon;
 
         if (mipdImage) {
-          image = mipdImage;
+          image = { uri: mipdImage };
         } else {
-          image = await getWalletInfo(activeEOAId, true);
+          image = {
+            uri: await getWalletInfo(activeEOAId, true),
+          };
         }
       }
 
@@ -62,10 +77,34 @@ export function WalletImage(props: {
     fetchImage();
   }, [props.id, activeWallet]);
 
-  if (image) {
+  if (image?.authProvider === "email") {
+    return <EmailIcon size={props.size} color={theme.colors.accentText} />;
+  }
+
+  if (image?.authProvider === "phone") {
+    return <PhoneIcon size={props.size} color={theme.colors.accentText} />;
+  }
+
+  if (image?.authProvider === "passkey") {
+    return (
+      <FingerPrintIcon size={props.size} color={theme.colors.accentText} />
+    );
+  }
+
+  if (image?.authProvider === "wallet") {
+    return (
+      <OutlineWalletIcon size={props.size} color={theme.colors.accentText} />
+    );
+  }
+
+  if (image?.authProvider === "guest") {
+    return <GuestIcon size={props.size} color={theme.colors.accentText} />;
+  }
+
+  if (image?.uri) {
     return (
       <Img
-        src={image}
+        src={image.uri}
         width={props.size}
         height={props.size}
         loading="eager"
@@ -101,17 +140,5 @@ function WalletImageQuery(props: {
     );
   }
 
-  return (
-    <Img
-      client={props.client}
-      src={walletImage.isLoading ? undefined : walletImage.data}
-      fallbackImage={genericWalletIcon}
-      width={props.size}
-      height={props.size}
-      loading="eager"
-      style={{
-        borderRadius: radius.md,
-      }}
-    />
-  );
+  return <OutlineWalletIcon size={props.size} />;
 }

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

@@ -131,7 +131,12 @@ export function WalletAuth(props: {
         size={props.size}
         meta={props.meta || {}}
         walletConnect={props.walletConnect}
-        modalHeader={{ title: props.inAppLocale.linkWallet, onBack: back }}
+        modalHeader={{
+          title: props.isLinking
+            ? props.inAppLocale.linkWallet
+            : props.inAppLocale.signInWithWallet,
+          onBack: back,
+        }}
         walletIdsToHide={["inApp"]}
         disableSelectionDataReset={true}
       />
@@ -141,7 +146,14 @@ export function WalletAuth(props: {
   return (
     <Container animate="fadein" fullHeight flex="column">
       <Container p="lg">
-        <ModalHeader title={props.inAppLocale.linkWallet} onBack={back} />
+        <ModalHeader
+          title={
+            props.isLinking
+              ? props.inAppLocale.linkWallet
+              : props.inAppLocale.signInWithWallet
+          }
+          onBack={back}
+        />
       </Container>
 
       <Container

package/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx

@@ -24,15 +24,14 @@ import {
   spacing,
 } from "../../../core/design-system/index.js";
 import { setLastAuthProvider } from "../../../core/utils/storage.js";
-import {
-  emailIcon,
-  getSocialIcon,
-  passkeyIcon,
-  phoneIcon,
-  socialIcons,
-} from "../../../core/utils/walletIcon.js";
+import { socialIcons } from "../../../core/utils/walletIcon.js";
 import { useSetSelectionData } from "../../providers/wallet-ui-states-provider.js";
 import { WalletTypeRowButton } from "../../ui/ConnectWallet/WalletTypeRowButton.js";
+import { EmailIcon } from "../../ui/ConnectWallet/icons/EmailIcon.js";
+import { FingerPrintIcon } from "../../ui/ConnectWallet/icons/FingerPrintIcon.js";
+import { GuestIcon } from "../../ui/ConnectWallet/icons/GuestIcon.js";
+import { OutlineWalletIcon } from "../../ui/ConnectWallet/icons/OutlineWalletIcon.js";
+import { PhoneIcon } from "../../ui/ConnectWallet/icons/PhoneIcon.js";
 import { Img } from "../../ui/components/Img.js";
 import { Spacer } from "../../ui/components/Spacer.js";
 import { TextDivider } from "../../ui/components/TextDivider.js";
@@ -413,7 +412,7 @@ export const ConnectWalletSocialOptions = (
         ) : (
           <WalletTypeRowButton
             client={props.client}
-            icon={emailIcon}
+            icon={EmailIcon}
             onClick={() => {
               setManualInputMode("email");
             }}
@@ -451,7 +450,7 @@ export const ConnectWalletSocialOptions = (
         ) : (
           <WalletTypeRowButton
             client={props.client}
-            icon={phoneIcon}
+            icon={PhoneIcon}
             onClick={() => {
               setManualInputMode("phone");
             }}
@@ -463,7 +462,7 @@ export const ConnectWalletSocialOptions = (
       {passKeyEnabled && (
         <WalletTypeRowButton
           client={props.client}
-          icon={passkeyIcon}
+          icon={FingerPrintIcon}
           onClick={() => {
             handlePassKeyLogin();
           }}
@@ -476,7 +475,7 @@ export const ConnectWalletSocialOptions = (
       {siweEnabled && (
         <WalletTypeRowButton
           client={props.client}
-          icon={getSocialIcon("")}
+          icon={OutlineWalletIcon}
           onClick={() => {
             handleWalletLogin();
           }}
@@ -488,7 +487,7 @@ export const ConnectWalletSocialOptions = (
       {guestEnabled && (
         <WalletTypeRowButton
           client={props.client}
-          icon={getSocialIcon("guest")}
+          icon={GuestIcon}
           onClick={() => {
             handleGuestLogin();
           }}
@@ -500,7 +499,7 @@ export const ConnectWalletSocialOptions = (
       {props.isLinking && (
         <WalletTypeRowButton
           client={props.client}
-          icon={getSocialIcon("")}
+          icon={OutlineWalletIcon}
           onClick={() => {
             handleWalletLogin();
           }}

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.64.0";
+export const version = "5.64.2";

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

@@ -20,6 +20,7 @@ import { sendAndConfirmTransaction } from "../../transaction/actions/send-and-co
 import { sendBatchTransaction } from "../../transaction/actions/send-batch-transaction.js";
 import { waitForReceipt } from "../../transaction/actions/wait-for-tx-receipt.js";
 import { isContractDeployed } from "../../utils/bytecode/is-contract-deployed.js";
+import { sleep } from "../../utils/sleep.js";
 import type { Account, Wallet } from "../interfaces/wallet.js";
 import { generateAccount } from "../utils/generateAccount.js";
 import { smartWallet } from "./smart-wallet.js";
@@ -332,15 +333,17 @@ describe.runIf(process.env.TW_SECRET_KEY).sequential(
           }),
           account: newSmartAccount,
         }),
-        sendAndConfirmTransaction({
-          transaction: claimTo({
-            contract,
-            quantity: 1n,
-            to: newSmartAccount.address,
-            tokenId: 0n,
+        sleep(1000).then(() =>
+          sendAndConfirmTransaction({
+            transaction: claimTo({
+              contract,
+              quantity: 1n,
+              to: newSmartAccount.address,
+              tokenId: 0n,
+            }),
+            account: newSmartAccount,
           }),
-          account: newSmartAccount,
-        }),
+        ),
       ]);
       expect(txs.length).toEqual(2);
       expect(txs.every((t) => t.transactionHash.length === 66)).toBe(true);

package/src/extensions/prebuilts/deploy-split.test.ts

@@ -1,31 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { ANVIL_CHAIN } from "~test/chains.js";
-import { TEST_CLIENT } from "~test/test-clients.js";
-import { TEST_ACCOUNT_D } from "~test/test-wallets.js";
-import { isAddress } from "../../utils/address.js";
-import { deploySplitContract } from "./deploy-split.js";
-
-describe.runIf(process.env.TW_SECRET_KEY)("deploy-split contract", () => {
-  it("should deploy Split contract", async () => {
-    const address = await deploySplitContract({
-      account: TEST_ACCOUNT_D,
-      client: TEST_CLIENT,
-      chain: ANVIL_CHAIN,
-      params: {
-        name: "split-contract",
-        payees: [
-          "0x12345674b599ce99958242b3D3741e7b01841DF3",
-          "0xA6f11e47dE28B3dB934e945daeb6F538E9019694",
-        ],
-        shares: [
-          5100n, // 51%
-          4900n, // 49%
-        ],
-      },
-    });
-    expect(address).toBeDefined();
-    expect(isAddress(address)).toBe(true);
-    // Further tests to verify the functionality of this contract
-    // are done in other Split tests
-  });
-});

package/src/extensions/split/read/getAllRecipientsAddresses.test.ts

@@ -1,41 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { ANVIL_CHAIN } from "~test/chains.js";
-import { TEST_CONTRACT_URI } from "~test/ipfs-uris.js";
-import { TEST_CLIENT } from "~test/test-clients.js";
-import { TEST_ACCOUNT_C } from "~test/test-wallets.js";
-import { getContract } from "../../../contract/contract.js";
-import { deploySplitContract } from "../../../extensions/prebuilts/deploy-split.js";
-import { getAllRecipientsAddresses } from "./getAllRecipientsAddresses.js";
-
-const chain = ANVIL_CHAIN;
-const client = TEST_CLIENT;
-
-describe.runIf(process.env.TW_SECRET_KEY)("getAllRecipientsAddresses", () => {
-  it("should work", async () => {
-    const payees = [
-      "0x12345674b599ce99958242b3D3741e7b01841DF3",
-      "0xA6f11e47dE28B3dB934e945daeb6F538E9019694",
-    ];
-    const address = await deploySplitContract({
-      account: TEST_ACCOUNT_C,
-      client: TEST_CLIENT,
-      chain: ANVIL_CHAIN,
-      params: {
-        name: "split-contract",
-        contractURI: TEST_CONTRACT_URI, // just to speed up the test
-        payees,
-        shares: [
-          5100n, // 51%
-          4900n, // 49%
-        ],
-      },
-    });
-    const contract = getContract({
-      address,
-      chain,
-      client,
-    });
-    const result = await getAllRecipientsAddresses({ contract });
-    expect(result).toStrictEqual(payees);
-  });
-});

package/src/extensions/split/read/getAllRecipientsPercentages.test.ts

@@ -1,50 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { ANVIL_CHAIN } from "~test/chains.js";
-import { TEST_CONTRACT_URI } from "~test/ipfs-uris.js";
-import { TEST_CLIENT } from "~test/test-clients.js";
-import { TEST_ACCOUNT_C } from "~test/test-wallets.js";
-import { getContract } from "../../../contract/contract.js";
-import { deploySplitContract } from "../../../extensions/prebuilts/deploy-split.js";
-import { getAllRecipientsPercentages } from "./getAllRecipientsPercentages.js";
-
-const chain = ANVIL_CHAIN;
-const client = TEST_CLIENT;
-
-describe.runIf(process.env.TW_SECRET_KEY)("getAllRecipientsPercentages", () => {
-  it("should work", async () => {
-    const payees = [
-      "0x12345674b599ce99958242b3D3741e7b01841DF3",
-      "0xA6f11e47dE28B3dB934e945daeb6F538E9019694",
-    ];
-    const address = await deploySplitContract({
-      account: TEST_ACCOUNT_C,
-      client: TEST_CLIENT,
-      chain: ANVIL_CHAIN,
-      params: {
-        name: "split-contract",
-        contractURI: TEST_CONTRACT_URI, // just to speed up the test
-        payees,
-        shares: [
-          5100n, // 51%
-          4900n, // 49%
-        ],
-      },
-    });
-    const contract = getContract({
-      address,
-      chain,
-      client,
-    });
-    const result = await getAllRecipientsPercentages({ contract });
-    expect(result).toStrictEqual([
-      {
-        address: "0x12345674b599ce99958242b3D3741e7b01841DF3",
-        splitPercentage: 51,
-      },
-      {
-        address: "0xA6f11e47dE28B3dB934e945daeb6F538E9019694",
-        splitPercentage: 49,
-      },
-    ]);
-  });
-});

package/src/extensions/split/read/getRecipientSplitPercentage.test.ts

@@ -1,49 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { ANVIL_CHAIN } from "~test/chains.js";
-import { TEST_CONTRACT_URI } from "~test/ipfs-uris.js";
-import { TEST_CLIENT } from "~test/test-clients.js";
-import { TEST_ACCOUNT_C } from "~test/test-wallets.js";
-import { getContract } from "../../../contract/contract.js";
-import { deploySplitContract } from "../../../extensions/prebuilts/deploy-split.js";
-import { getRecipientSplitPercentage } from "./getRecipientSplitPercentage.js";
-
-const chain = ANVIL_CHAIN;
-const client = TEST_CLIENT;
-const account = TEST_ACCOUNT_C;
-
-describe.runIf(process.env.TW_SECRET_KEY)("getRecipientSplitPercentage", () => {
-  it("should work", async () => {
-    const payees = [
-      "0x12345674b599ce99958242b3D3741e7b01841DF3",
-      "0xA6f11e47dE28B3dB934e945daeb6F538E9019694",
-    ];
-    const address = await deploySplitContract({
-      account,
-      client: TEST_CLIENT,
-      chain: ANVIL_CHAIN,
-      params: {
-        name: "split-contract",
-        contractURI: TEST_CONTRACT_URI, // just to speed up the test
-        payees,
-        shares: [
-          5100n, // 51%
-          4900n, // 49%
-        ],
-      },
-    });
-    const contract = getContract({
-      address,
-      chain,
-      client,
-    });
-    const result = await getRecipientSplitPercentage({
-      contract,
-      recipientAddress: "0x12345674b599ce99958242b3D3741e7b01841DF3",
-    });
-
-    expect(result).toStrictEqual({
-      address: "0x12345674b599ce99958242b3D3741e7b01841DF3",
-      splitPercentage: 51,
-    });
-  });
-});