thirdweb 5.32.3 → 5.34.0-nightly-f6ff5a78fc2d65f0f250b154f1405210ca57ce0a-20240706000322

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

@@ -0,0 +1,255 @@
+import { useQueries } from "@tanstack/react-query";
+import { useMemo } from "react";
+import type { Chain } from "../../../../../chains/types.js";
+import { getCachedChain } from "../../../../../chains/utils.js";
+import type { ThirdwebClient } from "../../../../../client/client.js";
+import { getContract } from "../../../../../contract/contract.js";
+import { getOwnedNFTs as getErc721OwnedNFTs } from "../../../../../extensions/erc721/read/getOwnedNFTs.js";
+import { isERC721 } from "../../../../../extensions/erc721/read/isERC721.js";
+import { getOwnedNFTs as getErc1155OwnedNFTs } from "../../../../../extensions/erc1155/read/getOwnedNFTs.js";
+import { isERC1155 } from "../../../../../extensions/erc1155/read/isERC1155.js";
+import type { Theme } from "../../../../core/design-system/index.js";
+import type { SupportedNFTs } from "../../../../core/utils/defaultTokens.js";
+import { useActiveAccount } from "../../../hooks/wallets/useActiveAccount.js";
+import { useActiveWalletChain } from "../../../hooks/wallets/useActiveWalletChain.js";
+import { MediaRenderer } from "../../MediaRenderer/MediaRenderer.js";
+import { Skeleton } from "../../components/Skeleton.js";
+import { Spacer } from "../../components/Spacer.js";
+import { Container, Line, ModalHeader } from "../../components/basic.js";
+
+const fetchNFTs = async (
+  client: ThirdwebClient,
+  chain: Chain,
+  nftAddress: string,
+  owner: string,
+) => {
+  const contract = getContract({
+    address: nftAddress,
+    chain,
+    client,
+  });
+
+  const erc721 = await isERC721({ contract }).catch(() => {
+    throw new Error(
+      `Failed to read contract bytecode for NFT ${nftAddress} on ${chain.name || chain.id}, is this NFT on the correct chain?`,
+    );
+  });
+  if (erc721) {
+    const result = await getErc721OwnedNFTs({
+      contract,
+      owner: owner,
+    });
+    return result.map((nft) => ({
+      ...nft,
+      quantityOwned: BigInt(1),
+      address: contract.address,
+      chain,
+    }));
+  }
+
+  const erc1155 = await isERC1155({ contract }).catch(() => false);
+  if (erc1155) {
+    const result = await getErc1155OwnedNFTs({
+      contract,
+      address: owner,
+    });
+    return result.map((nft) => ({ ...nft, address: contract.address, chain }));
+  }
+
+  throw new Error(
+    `NFT at ${nftAddress} on chain ${chain.id} is not ERC721 or ERC1155, or does not properly identify itself as supporting either interface`,
+  );
+};
+
+/**
+ * @internal
+ */
+export function ViewNFTs(props: {
+  supportedNFTs?: SupportedNFTs;
+  theme: Theme | "light" | "dark";
+  onBack: () => void;
+  client: ThirdwebClient;
+}) {
+  const activeAccount = useActiveAccount();
+  const activeChain = useActiveWalletChain();
+
+  if (!activeChain?.id || !activeAccount?.address) {
+    return null;
+  }
+
+  const nftList = useMemo(() => {
+    const nfts = [];
+    if (!props.supportedNFTs) return [];
+    for (const chainId in props.supportedNFTs) {
+      if (props.supportedNFTs[chainId]) {
+        nfts.push(
+          ...props.supportedNFTs[chainId].map((address) => ({
+            address,
+            chain: getCachedChain(Number.parseInt(chainId)),
+          })),
+        );
+      }
+    }
+    return nfts;
+  }, [props.supportedNFTs]);
+
+  const results = useQueries({
+    queries: nftList.map((nft) => ({
+      queryKey: ["readContract", nft.chain.id, nft.address],
+      queryFn: () =>
+        fetchNFTs(props.client, nft.chain, nft.address, activeAccount?.address),
+    })),
+  });
+
+  return (
+    <Container
+      style={{
+        minHeight: "300px",
+      }}
+    >
+      <Container p="lg">
+        <ModalHeader title="View NFTs" onBack={props.onBack} />
+      </Container>
+      <Line />
+      <Container
+        px="sm"
+        scrollY
+        style={{
+          maxHeight: "500px",
+        }}
+      >
+        <Spacer y="md" />
+        <Container
+          style={{
+            display: "grid",
+            gridTemplateColumns: "1fr 1fr",
+            gap: "12px",
+          }}
+        >
+          {results.map((result, index) => {
+            if (result.error) {
+              console.error(result.error);
+              return null;
+            }
+            return result.isLoading || !result.data ? (
+              <Skeleton
+                key={`${nftList[index]?.chain?.id}:${nftList[index]?.address}`}
+                height="160px"
+                width="160px"
+              />
+            ) : (
+              result.data.map((nft) => (
+                <NftCard
+                  key={`${nft.chain.id}:${nft.address}:${nft.id}`}
+                  {...nft}
+                  client={props.client}
+                  chain={nft.chain}
+                  theme={props.theme}
+                />
+              ))
+            );
+          })}
+        </Container>
+        <Spacer y="lg" />
+      </Container>
+    </Container>
+  );
+}
+
+function NftCard(
+  props: Awaited<ReturnType<typeof fetchNFTs>>[number] & {
+    client: ThirdwebClient;
+    chain: Chain;
+    theme: Theme | "light" | "dark";
+  },
+) {
+  const theme =
+    typeof props.theme === "string" ? props.theme : props.theme.type;
+  const themeObject = typeof props.theme === "string" ? undefined : props.theme;
+  const content = (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "4px",
+        alignItems: "center",
+      }}
+    >
+      <div
+        style={{
+          position: "relative",
+          display: "flex",
+          flexShrink: 0,
+          alignItems: "center",
+          width: "160px",
+          height: "160px",
+          borderRadius: "8px",
+          overflow: "hidden",
+          background:
+            theme === "light" ? "rgba(0, 0, 0, 0.10)" : "rgba(0, 0, 0, 0.20)",
+        }}
+      >
+        {props.metadata.image && (
+          <MediaRenderer
+            src={props.metadata.image}
+            style={{
+              width: "100%",
+              height: "100%",
+            }}
+            client={props.client}
+          />
+        )}
+        {props.quantityOwned > 1 && (
+          <div
+            style={{
+              position: "absolute",
+              bottom: "4px",
+              right: "4px",
+              background:
+                themeObject?.colors?.modalBg ??
+                (theme === "light" ? "white" : "black"),
+              fontSize: "10px",
+              padding: "4px 4px",
+              width: "20px",
+              height: "20px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              borderRadius: "100%",
+            }}
+          >
+            {props.quantityOwned.toString()}
+          </div>
+        )}
+        {props.chain.icon && (
+          <img
+            alt={props.chain.name}
+            style={{
+              position: "absolute",
+              bottom: "4px",
+              left: "4px",
+              width: "20px",
+              height: "20px",
+            }}
+            src={props.chain.icon.url}
+          />
+        )}
+      </div>
+      <span style={{ fontWeight: 600 }}>{props.metadata.name}</span>
+    </div>
+  );
+
+  if (props.chain.name) {
+    return (
+      <a
+        href={`https://thirdweb.com/${props.chain.id}/${props.address}/nfts/${props.id}`}
+        target="_blank"
+        rel="noreferrer"
+      >
+        {content}
+      </a>
+    );
+  }
+
+  return content;
+}

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

@@ -0,0 +1,125 @@
+import type { Chain } from "../../../../../chains/types.js";
+import type { ThirdwebClient } from "../../../../../client/client.js";
+import { fontSize } from "../../../../core/design-system/index.js";
+import { useWalletBalance } from "../../../../core/hooks/others/useWalletBalance.js";
+import {
+  type SupportedTokens,
+  defaultTokens,
+} from "../../../../core/utils/defaultTokens.js";
+import { useActiveAccount } from "../../../hooks/wallets/useActiveAccount.js";
+import { useActiveWalletChain } from "../../../hooks/wallets/useActiveWalletChain.js";
+import { Skeleton } from "../../components/Skeleton.js";
+import { Spacer } from "../../components/Spacer.js";
+import { TokenIcon } from "../../components/TokenIcon.js";
+import { Container, Line, ModalHeader } from "../../components/basic.js";
+import { Text } from "../../components/text.js";
+import { formatTokenBalance } from "./formatTokenBalance.js";
+import {
+  type ERC20OrNativeToken,
+  NATIVE_TOKEN,
+  isNativeToken,
+} from "./nativeToken.js";
+
+/**
+ * @internal
+ */
+export function ViewTokens(props: {
+  supportedTokens?: SupportedTokens;
+  onBack: () => void;
+  client: ThirdwebClient;
+}) {
+  const activeChain = useActiveWalletChain();
+  const supportedTokens = props.supportedTokens || defaultTokens;
+
+  if (!activeChain) {
+    return null;
+  }
+
+  const tokenList =
+    (activeChain?.id ? supportedTokens[activeChain.id] : undefined) || [];
+
+  return (
+    <Container
+      style={{
+        minHeight: "300px",
+      }}
+    >
+      <Container p="lg">
+        <ModalHeader title="View Funds" onBack={props.onBack} />
+      </Container>
+      <Line />
+      <Container
+        px="sm"
+        scrollY
+        style={{
+          maxHeight: "500px",
+        }}
+      >
+        <Spacer y="md" />
+
+        <TokenInfo
+          token={NATIVE_TOKEN}
+          chain={activeChain}
+          client={props.client}
+        />
+
+        {tokenList.map((token) => {
+          return (
+            <TokenInfo
+              token={token}
+              key={token.address}
+              chain={activeChain}
+              client={props.client}
+            />
+          );
+        })}
+        <Spacer y="lg" />
+      </Container>
+    </Container>
+  );
+}
+
+function TokenInfo(props: {
+  token: ERC20OrNativeToken;
+  chain: Chain;
+  client: ThirdwebClient;
+}) {
+  const account = useActiveAccount();
+  const tokenBalanceQuery = useWalletBalance({
+    address: account?.address,
+    chain: props.chain,
+    tokenAddress: isNativeToken(props.token) ? undefined : props.token.address,
+    client: props.client,
+  });
+
+  const tokenName = isNativeToken(props.token)
+    ? tokenBalanceQuery.data?.name
+    : props.token.name;
+
+  return (
+    <Container flex="row" gap="sm" p="sm">
+      <TokenIcon
+        token={props.token}
+        chain={props.chain}
+        size="lg"
+        client={props.client}
+      />
+
+      <Container flex="column" gap="xxs">
+        {tokenName ? (
+          <Text size="sm" color="primaryText">
+            {tokenName}
+          </Text>
+        ) : (
+          <Skeleton height={fontSize.md} width="150px" />
+        )}
+
+        {tokenBalanceQuery.data ? (
+          <Text size="xs"> {formatTokenBalance(tokenBalanceQuery.data)}</Text>
+        ) : (
+          <Skeleton height={fontSize.xs} width="100px" />
+        )}
+      </Container>
+    </Container>
+  );
+}

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

@@ -68,6 +68,8 @@ export type WalletDetailsModalScreen =
   | "network-switcher"
   | "pending-tx"
   | "view-funds"
+  | "view-tokens"
+  | "view-nfts"
   | "private-key"
   | "manage-wallet"
   | "wallet-connect-receiver"

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.32.3";
+export const version = "5.34.0-nightly-f6ff5a78fc2d65f0f250b154f1405210ca57ce0a-20240706000322";

package/src/wallets/coinbase/coinbaseWebSDK.ts

@@ -373,7 +373,7 @@ function onConnect(
     await provider.disconnect();
   }
 
-  function onDisconnect() {
+  async function onDisconnect() {
     disconnect();
     emitter.emit("disconnect", undefined);
   }
@@ -401,7 +401,7 @@ function onConnect(
   return [
     account,
     chain,
-    disconnect,
+    onDisconnect,
     (newChain) => switchChainCoinbaseWalletSDK(provider, newChain),
   ];
 }

package/src/wallets/injected/index.ts

@@ -228,7 +228,7 @@ async function onConnect(
     provider.removeListener("disconnect", onDisconnect);
   }
 
-  function onDisconnect() {
+  async function onDisconnect() {
     disconnect();
     emitter.emit("disconnect", undefined);
   }
@@ -258,7 +258,7 @@ async function onConnect(
   return [
     account,
     chain,
-    disconnect,
+    onDisconnect,
     (newChain) => switchChain(provider, newChain),
   ] as const;
 }

package/src/wallets/smart/index.ts

@@ -203,9 +203,6 @@ async function createSmartAccount(
       ]);
       const isDeployed = await isContractDeployed(accountContract);
       if (!isDeployed) {
-        console.log(
-          "Account contract not deployed yet. Deploying account before signing message",
-        );
         await _deployAccount({
           options,
           account,

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

@@ -1,7 +1,7 @@
 import { beforeAll, describe, expect, it } from "vitest";
 import { TEST_CLIENT } from "../../../test/src/test-clients.js";
 import { typedData } from "../../../test/src/typed-data.js";
-import { verifySignature } from "../../auth/verifySignature.js";
+import { verifySignature } from "../../auth/verify-signature.js";
 import { arbitrumSepolia } from "../../chains/chain-definitions/arbitrum-sepolia.js";
 import { type ThirdwebContract, getContract } from "../../contract/contract.js";
 import { parseEventLogs } from "../../event/actions/parse-logs.js";

package/dist/cjs/auth/verifySignature.js

@@ -1,137 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.verifyEOASignature = verifyEOASignature;
-exports.verifyContractWalletSignature = verifyContractWalletSignature;
-exports.verifySignature = verifySignature;
-const viem_1 = require("viem");
-const contract_js_1 = require("../contract/contract.js");
-const isValidSignature_js_1 = require("../extensions/erc1271/__generated__/isValidSignature/read/isValidSignature.js");
-const hex_js_1 = require("../utils/encoding/hex.js");
-const hashMessage_js_1 = require("../utils/hashing/hashMessage.js");
-/**
- * Verifies the signature of a message using an Ethereum account's EOA (Externally Owned Account).
- * @param options - The options for verifying the signature.
- * @returns A boolean indicating whether the signature is valid.
- * @throws An error if the signature is invalid.
- * @example
- * ```ts
- * import { verifyEOASignature } from 'thirdweb/auth';
- *
- * const isValid = await verifyEOASignature({
- *  message: '0x1234567890123456789012345678901234567890',
- *  signature: '0x1234567890123456789012345678901234567890',
- *  address: '0x1234567890123456789012345678901234567890',
- * });
- * ```
- * @auth
- */
-async function verifyEOASignature(options) {
-    const messageHash = (0, hashMessage_js_1.hashMessage)(options.message);
-    if (!(0, hex_js_1.isHex)(options.signature)) {
-        return false;
-    }
-    const recoveredAddress = await (0, viem_1.recoverAddress)({
-        hash: messageHash,
-        signature: options.signature,
-    });
-    if (recoveredAddress.toLowerCase() === options.address.toLowerCase()) {
-        return true;
-    }
-    return false;
-}
-const EIP1271_MAGICVALUE = "0x1626ba7e";
-/**
- * Verifies the signature of a contract wallet.
- * @param options - The parameters for verifying the signature.
- * @returns A boolean indicating whether the signature is valid.
- * @throws An error if the signature is invalid.
- * @example
- * ```ts
- * import { verifyContractWalletSignature } from 'thirdweb/auth';
- *
- * const isValid = await verifyContractWalletSignature({
- *  message: '0x1234567890123456789012345678901234567890',
- *  signature: '0x1234567890123456789012345678901234567890',
- *  address: '0x1234567890123456789012345678901234567890',
- *  chain: ...,
- *  client: ...,
- * });
- * ```
- * @auth
- */
-async function verifyContractWalletSignature(options) {
-    if (!(0, hex_js_1.isHex)(options.signature)) {
-        throw new Error("Invalid signature");
-    }
-    const contract = (0, contract_js_1.getContract)({
-        address: options.address,
-        chain: options.chain,
-        client: options.client,
-    });
-    const messageHash = (0, hashMessage_js_1.hashMessage)(options.message);
-    const result = await (0, isValidSignature_js_1.isValidSignature)({
-        contract,
-        hash: messageHash,
-        signature: options.signature,
-    });
-    return result === EIP1271_MAGICVALUE;
-}
-/**
- * Verifies the signature based on the provided options.
- * Handles smart contract wallet signatures and EOA signatures.
- * **IMPORTANT: in order to check smart contract signatures, a chain and client must be provided.**
- * @param options - The options for signature verification.
- * @returns A boolean indicating whether the signature is valid or not.
- * @example
- * ```ts
- * import { verifySignature } from 'thirdweb/auth';
- *
- * const isValid = await verifySignature({
- *  message: 'Your message to sign',
- *  signature: '0x91db0222ec371a8c18d3b187a6d2e77789bffca1b96826ef6b8708e0d4a66c80312fc3ae95b8fbc147265abf539bb6f360152be61a0e1411d7f5771a599e769a1c',
- *  address: '0xda9C7A86AeE76701FC1c23ae548e8E93Ba3e42A5',
- *  client: thirdwebClient,
- *  chain: chain
- * });
- * ```
- * @auth
- */
-let warningTriggered = false;
-async function verifySignature(options) {
-    try {
-        const isValidEOASig = await verifyEOASignature(options);
-        if (isValidEOASig) {
-            return true;
-        }
-    }
-    catch {
-        // no-op, we skip to contract signature check
-    }
-    if (isVerifyContractWalletSignatureParams(options)) {
-        try {
-            return await verifyContractWalletSignature(options);
-        }
-        catch {
-            // no-op we skip to return false
-        }
-    }
-    else if (!warningTriggered) {
-        // We only trigger this warning once
-        warningTriggered = true;
-        console.error(`
-      Failed to verify EOA signature and no chain or client provided.
-
-      If you mean to use a smart account, please provide a chain and client.
-      For more information on how to setup a smart account with Auth, see https://portal.thirdweb.com/connect/auth
-    `);
-    }
-    // if we reach here, we have no way to verify the signature
-    return false;
-}
-function isVerifyContractWalletSignatureParams(options) {
-    return ("chain" in options &&
-        options.chain !== undefined &&
-        "client" in options &&
-        options.client !== undefined);
-}
-//# sourceMappingURL=verifySignature.js.map

package/dist/cjs/auth/verifySignature.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"verifySignature.js","sourceRoot":"","sources":["../../../src/auth/verifySignature.ts"],"names":[],"mappings":";;AAgCA,gDAgBC;AA8BD,sEAsBC;AA2BD,0CA2BC;AA1JD,+BAAsC;AAGtC,yDAAsD;AACtD,uHAAiH;AACjH,qDAAiD;AACjD,oEAA8D;AAS9D;;;;;;;;;;;;;;;;GAgBG;AACI,KAAK,UAAU,kBAAkB,CAAC,OAAiC;IACxE,MAAM,WAAW,GAAG,IAAA,4BAAW,EAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAEjD,IAAI,CAAC,IAAA,cAAK,EAAC,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC;QAC9B,OAAO,KAAK,CAAC;IACf,CAAC;IAED,MAAM,gBAAgB,GAAG,MAAM,IAAA,qBAAc,EAAC;QAC5C,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,OAAO,CAAC,SAAS;KAC7B,CAAC,CAAC;IAEH,IAAI,gBAAgB,CAAC,WAAW,EAAE,KAAK,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,EAAE,CAAC;QACrE,OAAO,IAAI,CAAC;IACd,CAAC;IACD,OAAO,KAAK,CAAC;AACf,CAAC;AASD,MAAM,kBAAkB,GAAG,YAAY,CAAC;AAExC;;;;;;;;;;;;;;;;;;GAkBG;AACI,KAAK,UAAU,6BAA6B,CACjD,OAA4C;IAE5C,IAAI,CAAC,IAAA,cAAK,EAAC,OAAO,CAAC,SAAS,CAAC,EAAE,CAAC;QAC9B,MAAM,IAAI,KAAK,CAAC,mBAAmB,CAAC,CAAC;IACvC,CAAC;IAED,MAAM,QAAQ,GAAG,IAAA,yBAAW,EAAC;QAC3B,OAAO,EAAE,OAAO,CAAC,OAAO;QACxB,KAAK,EAAE,OAAO,CAAC,KAAK;QACpB,MAAM,EAAE,OAAO,CAAC,MAAM;KACvB,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,IAAA,4BAAW,EAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAEjD,MAAM,MAAM,GAAG,MAAM,IAAA,sCAAgB,EAAC;QACpC,QAAQ;QACR,IAAI,EAAE,WAAW;QACjB,SAAS,EAAE,OAAO,CAAC,SAAS;KAC7B,CAAC,CAAC;IAEH,OAAO,MAAM,KAAK,kBAAkB,CAAC;AACvC,CAAC;AAMD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,IAAI,gBAAgB,GAAG,KAAK,CAAC;AACtB,KAAK,UAAU,eAAe,CAAC,OAA8B;IAClE,IAAI,CAAC;QACH,MAAM,aAAa,GAAG,MAAM,kBAAkB,CAAC,OAAO,CAAC,CAAC;QACxD,IAAI,aAAa,EAAE,CAAC;YAClB,OAAO,IAAI,CAAC;QACd,CAAC;IACH,CAAC;IAAC,MAAM,CAAC;QACP,6CAA6C;IAC/C,CAAC;IACD,IAAI,qCAAqC,CAAC,OAAO,CAAC,EAAE,CAAC;QACnD,IAAI,CAAC;YACH,OAAO,MAAM,6BAA6B,CAAC,OAAO,CAAC,CAAC;QACtD,CAAC;QAAC,MAAM,CAAC;YACP,gCAAgC;QAClC,CAAC;IACH,CAAC;SAAM,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC7B,oCAAoC;QACpC,gBAAgB,GAAG,IAAI,CAAC;QACxB,OAAO,CAAC,KAAK,CAAC;;;;;KAKb,CAAC,CAAC;IACL,CAAC;IACD,2DAA2D;IAC3D,OAAO,KAAK,CAAC;AACf,CAAC;AAED,SAAS,qCAAqC,CAC5C,OAA8B;IAE9B,OAAO,CACL,OAAO,IAAI,OAAO;QAClB,OAAO,CAAC,KAAK,KAAK,SAAS;QAC3B,QAAQ,IAAI,OAAO;QACnB,OAAO,CAAC,MAAM,KAAK,SAAS,CAC7B,CAAC;AACJ,CAAC"}