thirdweb 5.33.0 → 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.33.0";
+export const version = "5.34.0-nightly-f6ff5a78fc2d65f0f250b154f1405210ca57ce0a-20240706000322";