Merge branch 'main' into yash/add-api-snippets

Author: 0xFirekeeper

apps/dashboard/src/@/components/contracts/import-contract/modal.tsx

@@ -231,13 +231,13 @@ function ImportForm(props: {
             </Button>
           ) : (
             <Button className="gap-2" type="submit">
-              {addContractToProject.isPending ? (
+              {form.formState.isSubmitting ? (
                 <Spinner className="size-4" />
               ) : (
                 <ArrowDownToLineIcon className="size-4" />
               )}
 
-              {addContractToProject.isPending ? "Importing" : "Import"}
+              {form.formState.isSubmitting ? "Importing" : "Import"}
             </Button>
           )}
         </div>

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx

@@ -28,7 +28,7 @@ export async function ERC20PublicPage(props: {
     contractMetadata,
     activeClaimCondition,
     tokenDecimals,
-    tokenInfo,
+    tokenInfoFromUB,
     functionSelectors,
     tokenPriceData,
   ] = await Promise.all([
@@ -51,8 +51,8 @@ export async function ERC20PublicPage(props: {
     }),
   ]);
 
-  if (!contractMetadata.image && tokenInfo) {
-    contractMetadata.image = tokenInfo.iconUri;
+  if (!contractMetadata.image && tokenInfoFromUB) {
+    contractMetadata.image = tokenInfoFromUB.iconUri;
   }
 
   const [contractCreator, claimConditionCurrencyMeta] = await Promise.all([
@@ -70,24 +70,15 @@ export async function ERC20PublicPage(props: {
   const cookieStore = await cookies();
   const isDashboardUser = cookieStore.has(HAS_USED_DASHBOARD);
 
-  const buyEmbed = (
-    <BuyEmbed
-      chainMetadata={props.chainMetadata}
-      claimConditionMeta={
-        activeClaimCondition && claimConditionCurrencyMeta
-          ? {
-              activeClaimCondition,
-              claimConditionCurrency: claimConditionCurrencyMeta,
-            }
-          : undefined
-      }
-      clientContract={props.clientContract}
-      tokenAddress={props.clientContract.address}
-      tokenDecimals={tokenDecimals}
-      tokenName={contractMetadata.name}
-      tokenSymbol={contractMetadata.symbol}
-    />
-  );
+  const claimConditionMeta =
+    activeClaimCondition && claimConditionCurrencyMeta
+      ? {
+          activeClaimCondition,
+          claimConditionCurrency: claimConditionCurrencyMeta,
+        }
+      : undefined;
+  const isUBSupported = !!tokenInfoFromUB;
+  const showBuyEmbed = isUBSupported || claimConditionMeta;
 
   return (
     <div className="flex grow flex-col">
@@ -116,21 +107,33 @@ export async function ERC20PublicPage(props: {
 
       <div className="container flex max-w-5xl grow flex-col pt-8 pb-10">
         <div className="flex grow flex-col gap-8">
-          <div className="sm:flex sm:justify-center w-full sm:border sm:border-dashed sm:bg-accent/20 sm:py-12 rounded-lg overflow-hidden relative">
-            <GridPattern
-              width={30}
-              height={30}
-              x={-1}
-              y={-1}
-              strokeDasharray={"4 2"}
-              className="text-border dark:text-border/70"
-              style={{
-                maskImage:
-                  "linear-gradient(to bottom right,white,transparent,transparent)",
-              }}
-            />
-            <div className="sm:w-[420px] z-10">{buyEmbed}</div>
-          </div>
+          {showBuyEmbed && (
+            <div className="sm:flex sm:justify-center w-full sm:border sm:border-dashed sm:bg-accent/20 sm:py-12 rounded-lg overflow-hidden relative">
+              <GridPattern
+                width={30}
+                height={30}
+                x={-1}
+                y={-1}
+                strokeDasharray={"4 2"}
+                className="text-border dark:text-border/70"
+                style={{
+                  maskImage:
+                    "linear-gradient(to bottom right,white,transparent,transparent)",
+                }}
+              />
+              <div className="sm:w-[420px] z-10">
+                <BuyEmbed
+                  chainMetadata={props.chainMetadata}
+                  claimConditionMeta={claimConditionMeta}
+                  clientContract={props.clientContract}
+                  tokenAddress={props.clientContract.address}
+                  tokenDecimals={tokenDecimals}
+                  tokenName={contractMetadata.name}
+                  tokenSymbol={contractMetadata.symbol}
+                />
+              </div>
+            </div>
+          )}
 
           {tokenPriceData ? (
             <>

apps/portal/package.json

@@ -10,6 +10,7 @@
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tabs": "^1.1.12",
     "@radix-ui/react-tooltip": "1.2.7",
+    "@scalar/api-reference-react": "^0.7.42",
     "@tanstack/react-query": "5.81.5",
     "@tryghost/content-api": "^1.11.28",
     "class-variance-authority": "^0.7.1",

apps/portal/src/app/Header.tsx

@@ -51,6 +51,10 @@ const links = [
     href: "/insight",
     name: "Insight",
   },
+  {
+    href: "/reference",
+    name: "API Reference",
+  },
 ];
 
 const toolLinks = [
@@ -281,7 +285,7 @@ export function Header() {
                   }}
                 >
                   <NavLink href={link.href} name={link.name} />
-                  {pathname.startsWith(link.href) && (
+                  {pathname?.startsWith(link.href) && (
                     <div className="bg-violet-700 h-[2px] inset-x-0 rounded-full absolute -bottom-1" />
                   )}
                 </li>
@@ -526,7 +530,7 @@ function NavLink(props: {
     <Link
       className={clsx(
         "font-medium text-base transition-colors hover:text-foreground xl:text-sm",
-        pathname.startsWith(props.href)
+        pathname?.startsWith(props.href)
           ? "text-foreground"
           : "text-muted-foreground",
         props.icon ? "flex flex-row gap-3" : "",

apps/portal/src/app/reference/ScalarClient.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { ApiReferenceReact } from "@scalar/api-reference-react";
+import "@scalar/api-reference-react/style.css";
+import "./scalar.css";
+import { useTheme } from "next-themes";
+import { useEffect } from "react";
+
+export function ScalarApiReference() {
+  const { theme } = useTheme();
+
+  // scaler is using light-mode and dark-mode classes for theming
+  useEffect(() => {
+    if (theme === "dark") {
+      document.body.classList.remove("light-mode");
+      document.body.classList.add("dark-mode");
+    } else {
+      document.body.classList.remove("dark-mode");
+      document.body.classList.add("light-mode");
+    }
+  }, [theme]);
+
+  return (
+    <ApiReferenceReact
+      configuration={{
+        url: "https://api.thirdweb.com/openapi.json",
+        theme: "deepSpace",
+        layout: "modern",
+        showSidebar: true,
+        hideModels: false,
+        hideDarkModeToggle: true, // Hide since portal controls theme
+        hideDownloadButton: false,
+        hideTestRequestButton: false,
+      }}
+    />
+  );
+}

apps/portal/src/app/reference/page.tsx

@@ -0,0 +1,19 @@
+import { createMetadata } from "@/components/Document";
+import { ScalarApiReference } from "./ScalarClient";
+
+export const metadata = createMetadata({
+  image: {
+    title: "API Reference",
+    icon: "thirdweb",
+  },
+  title: "thirdweb API Reference",
+  description: "Complete REST API reference for all thirdweb services",
+});
+
+export default function ApiReferencePage() {
+  return (
+    <div className="container max-sm:px-0">
+      <ScalarApiReference />
+    </div>
+  );
+}

apps/portal/src/app/reference/scalar.css

@@ -0,0 +1,15 @@
+.scalar-app {
+  --scalar-background-1: hsl(var(--background));
+  --scalar-background-2: hsl(var(--card));
+}
+
+/* fixes sticky sidebar and header on mobile */
+.scalar-app .references-navigation-list,
+.scalar-app .references-header {
+  position: sticky;
+  top: var(--sticky-top-height);
+}
+
+.scalar-app .references-navigation-list {
+  height: calc(100vh - var(--sticky-top-height));
+}

packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AllWalletsUI.tsx

@@ -28,7 +28,6 @@ import { WalletEntryButton } from "../WalletEntryButton.js";
 function AllWalletsUI(props: {
   onBack: () => void;
   onSelect: (wallet: Wallet) => void;
-  specifiedWallets: Wallet[];
   size: "compact" | "wide";
   client: ThirdwebClient;
   recommendedWallets: Wallet[] | undefined;
@@ -39,17 +38,11 @@ function AllWalletsUI(props: {
   const setSelectionData = useSetSelectionData();
 
   const walletList = useMemo(() => {
-    return walletInfos
-      .filter((wallet) => {
-        return (
-          props.specifiedWallets.findIndex((x) => x.id === wallet.id) === -1
-        );
-      })
-      .filter(
-        (info) =>
-          info.id !== "inApp" && info.id !== "embedded" && info.id !== "smart",
-      );
-  }, [props.specifiedWallets]);
+    return walletInfos.filter(
+      (info) =>
+        info.id !== "inApp" && info.id !== "embedded" && info.id !== "smart",
+    );
+  }, []);
 
   const fuseInstance = useMemo(() => {
     return new Fuse(walletList, {

packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModalContent.tsx

@@ -173,7 +173,6 @@ export const ConnectModalContent = (props: {
         onSelect={setScreen}
         recommendedWallets={props.recommendedWallets}
         size={props.size}
-        specifiedWallets={props.wallets}
       />
     </Suspense>
   );

packages/thirdweb/src/react/web/wallets/in-app/WalletAuth.tsx

@@ -104,7 +104,6 @@ export function WalletAuth(props: {
             }}
             recommendedWallets={undefined}
             size={props.size}
-            specifiedWallets={[]}
           />
         </Suspense>
       );