Merge branch 'main' into yash/ref-constructor-params

Author: kumaryash90

.changeset/curly-cycles-hammer.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+More helpful error messages for enclave and userop errors

.changeset/dirty-goats-invent.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix connecting to cb wallet browser extension when already on the same chain

.changeset/serious-bananas-boil.md

@@ -0,0 +1,9 @@
+---
+"thirdweb": minor
+---
+
+Improve NFT Components
+- Add custom resolver methods to NFTMedia, NFTName and NFTDescription
+- Add caching for the NFT-info-getter method to improve performance
+- Small fix to handle falsy values for NFT media src, name and description
+- Improve test coverage by extracting internal logics and testing them

apps/dashboard/src/@3rdweb-sdk/react/components/connect-wallet/index.tsx

@@ -150,7 +150,7 @@ export const CustomConnectWallet = (props: {
           <Link
             href={`/login${pathname ? `?next=${encodeURIComponent(pathname)}` : ""}`}
           >
-            Sign In
+            Connect Wallet
           </Link>
         </Button>
       </>

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/FaucetButton.tsx

@@ -146,7 +146,7 @@ export function FaucetButton({
         <Link
           href={`/login${pathname ? `?next=${encodeURIComponent(pathname)}` : ""}`}
         >
-          Sign In
+          Connect Wallet
         </Link>
       </Button>
     );

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/nft-property.tsx

@@ -1,4 +1,4 @@
-import { Card, Text } from "tw-components";
+import { Card } from "@/components/ui/card";
 
 interface NftPropertyProps {
   // biome-ignore lint/suspicious/noExplicitAny: FIXME
@@ -7,22 +7,17 @@ interface NftPropertyProps {
 
 export const NftProperty: React.FC<NftPropertyProps> = ({ property }) => {
   return (
-    <Card className="flex flex-col gap-2">
+    <Card className="flex flex-col gap-2 p-3">
       {property?.trait_type && (
-        <Text
-          size="label.sm"
-          color="primary.500"
-          textAlign="center"
-          lineHeight={1.2}
-        >
+        <p className="text-center text-link-foreground text-sm leading-[1.2]">
           {property?.trait_type}
-        </Text>
+        </p>
       )}
-      <Text size="label.md" textAlign="center">
+      <p className="text-center text-muted-foreground text-sm">
         {typeof property?.value === "object"
           ? JSON.stringify(property?.value || {})
           : property?.value}
-      </Text>
+      </p>
     </Card>
   );
 };

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/supply-cards.tsx

@@ -1,6 +1,4 @@
 "use client";
-
-import { Skeleton, Stat, StatLabel, StatNumber } from "@chakra-ui/react";
 import { useMemo } from "react";
 import type { ThirdwebContract } from "thirdweb";
 import {
@@ -9,7 +7,7 @@ import {
   totalSupply,
 } from "thirdweb/extensions/erc721";
 import { useReadContract } from "thirdweb/react";
-import { Card } from "tw-components";
+import { StatCard } from "../../overview/components/stat-card";
 
 interface SupplyCardsProps {
   contract: ThirdwebContract;
@@ -37,27 +35,22 @@ export const SupplyCards: React.FC<SupplyCardsProps> = ({ contract }) => {
   );
 
   return (
-    <div className="flex flex-col gap-3 md:flex-row md:gap-6">
-      <Card as={Stat}>
-        <StatLabel mb={{ base: 1, md: 0 }}>Total Supply</StatLabel>
-        <Skeleton isLoaded={nextTokenIdQuery.isSuccess}>
-          <StatNumber>{realTotalSupply.toString()}</StatNumber>
-        </Skeleton>
-      </Card>
-      <Card as={Stat}>
-        <StatLabel mb={{ base: 1, md: 0 }}>Claimed Supply</StatLabel>
-        <Skeleton isLoaded={totalSupplyQuery.isSuccess}>
-          <StatNumber>{totalSupplyQuery?.data?.toString()}</StatNumber>
-        </Skeleton>
-      </Card>
-      <Card as={Stat}>
-        <StatLabel mb={{ base: 1, md: 0 }}>Unclaimed Supply</StatLabel>
-        <Skeleton
-          isLoaded={totalSupplyQuery.isSuccess && nextTokenIdQuery.isSuccess}
-        >
-          <StatNumber>{unclaimedSupply}</StatNumber>
-        </Skeleton>
-      </Card>
+    <div className="flex flex-row gap-3 md:gap-6 [&>*]:grow">
+      <StatCard
+        value={realTotalSupply.toString()}
+        label="Total Supply"
+        isPending={nextTokenIdQuery.isPending}
+      />
+      <StatCard
+        value={totalSupplyQuery?.data?.toString() || "N/A"}
+        label="Claimed Supply"
+        isPending={totalSupplyQuery.isPending}
+      />
+      <StatCard
+        value={unclaimedSupply}
+        label="Unclaimed Supply"
+        isPending={totalSupplyQuery.isPending || nextTokenIdQuery.isPending}
+      />
     </div>
   );
 };

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/table.tsx

@@ -41,7 +41,6 @@ import type { NFT, ThirdwebContract } from "thirdweb";
 import * as ERC721Ext from "thirdweb/extensions/erc721";
 import * as ERC1155Ext from "thirdweb/extensions/erc1155";
 import { useReadContract } from "thirdweb/react";
-import { Heading, Text } from "tw-components";
 
 interface ContractOverviewNFTGetAllProps {
   contract: ThirdwebContract;
@@ -61,11 +60,7 @@ export const NFTGetAllTable: React.FC<ContractOverviewNFTGetAllProps> = ({
       {
         Header: "Token Id",
         accessor: (row) => row.id?.toString(),
-        Cell: (cell: CellProps<NFT, string>) => (
-          <Text size="body.md" fontFamily="mono">
-            {cell.value}
-          </Text>
-        ),
+        Cell: (cell: CellProps<NFT, string>) => <p>{cell.value}</p>,
       },
       {
         Header: "Media",
@@ -140,9 +135,9 @@ export const NFTGetAllTable: React.FC<ContractOverviewNFTGetAllProps> = ({
         Cell: (cell: CellProps<NFT, number>) => {
           if (cell.row.original.type === "ERC1155") {
             return (
-              <Text noOfLines={4} size="body.md" fontFamily="mono">
+              <p className="line-clamp-4 font-mono text-base">
                 {cell.row.original.supply.toString()}
-              </Text>
+              </p>
             );
           }
         },
@@ -267,9 +262,9 @@ export const NFTGetAllTable: React.FC<ContractOverviewNFTGetAllProps> = ({
                     // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
                     key={columnIndex}
                   >
-                    <Text as="label" size="label.sm" color="faded">
+                    <p className="text-muted-foreground">
                       {column.render("Header")}
-                    </Text>
+                    </p>
                   </Th>
                 ))}
                 {/* Need to add an empty header for the drawer button */}
@@ -352,7 +347,7 @@ export const NFTGetAllTable: React.FC<ContractOverviewNFTGetAllProps> = ({
               >
                 <Flex align="center" gap={4}>
                   <Spinner size="sm" />
-                  <Heading size="label.lg">Fetching new page</Heading>
+                  <p className="text-lg">Fetching new page</p>
                 </Flex>
               </Flex>
             )}
@@ -373,12 +368,12 @@ export const NFTGetAllTable: React.FC<ContractOverviewNFTGetAllProps> = ({
             icon={<ChevronLeftIcon className="size-4" />}
             onClick={() => previousPage()}
           />
-          <Text whiteSpace="nowrap">
+          <p className="whitespace-nowrap">
             Page <strong>{pageIndex + 1}</strong> of{" "}
             <Skeleton as="span" display="inline" isLoaded={querySuccess}>
               <strong>{pageCount}</strong>
             </Skeleton>
-          </Text>
+          </p>
           <IconButton
             isDisabled={!canNextPage || queryLoading}
             aria-label="next page"

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/listing-stats.tsx

@@ -1,8 +1,8 @@
-import { SkeletonContainer } from "@/components/ui/skeleton";
 import { useMemo } from "react";
 import type { ThirdwebContract } from "thirdweb";
 import { totalAuctions, totalListings } from "thirdweb/extensions/marketplace";
 import { useReadContract } from "thirdweb/react";
+import { StatCard } from "./stat-card";
 
 const TotalListingsStat: React.FC<{ contract: ThirdwebContract }> = ({
   contract,
@@ -82,20 +82,3 @@ export const ListingStatsV3: React.FC<ListingStatsV3Props> = ({
     </div>
   );
 };
-
-function StatCard(props: {
-  value: string;
-  isPending: boolean;
-  label: string;
-}) {
-  return (
-    <dl className="block rounded-lg border border-border bg-muted/50 p-4">
-      <dt className="mb-1.5 text-sm md:text-base">{props.label}</dt>
-      <SkeletonContainer
-        loadedData={props.isPending ? undefined : props.value}
-        skeletonData={"0000"}
-        render={(v) => <dd className="truncate font-semibold text-xl">{v}</dd>}
-      />
-    </dl>
-  );
-}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/stat-card.tsx

@@ -0,0 +1,18 @@
+import { SkeletonContainer } from "@/components/ui/skeleton";
+
+export function StatCard(props: {
+  value: string;
+  isPending: boolean;
+  label: string;
+}) {
+  return (
+    <dl className="block rounded-lg border border-border bg-muted/50 p-4">
+      <dt className="mb-1.5 text-sm md:text-base">{props.label}</dt>
+      <SkeletonContainer
+        loadedData={props.isPending ? undefined : props.value}
+        skeletonData={"0000"}
+        render={(v) => <dd className="truncate font-semibold text-xl">{v}</dd>}
+      />
+    </dl>
+  );
+}