[Experiment] Remove clientId from serverThirdwebClient

Author: MananTank

apps/dashboard/src/@/components/ui/decimal-input.tsx

@@ -0,0 +1,40 @@
+import { Input } from "./input";
+
+export function DecimalInput(props: {
+  value: string;
+  onChange: (value: string) => void;
+  maxValue?: number;
+  id?: string;
+  className?: string;
+}) {
+  return (
+    <Input
+      id={props.id}
+      type="text"
+      value={props.value}
+      className={props.className}
+      inputMode="decimal"
+      onChange={(e) => {
+        const number = Number(e.target.value);
+        // ignore if string becomes invalid number
+        if (Number.isNaN(number)) {
+          return;
+        }
+
+        if (props.maxValue && number > props.maxValue) {
+          return;
+        }
+
+        // replace leading multiple zeros with single zero
+        let cleanedValue = e.target.value.replace(/^0+/, "0");
+
+        // replace leading zero before decimal point
+        if (!cleanedValue.includes(".")) {
+          cleanedValue = cleanedValue.replace(/^0+/, "");
+        }
+
+        props.onChange(cleanedValue || "0");
+      }}
+    />
+  );
+}

apps/dashboard/src/@/constants/thirdweb-client.client.ts

@@ -1,3 +1,4 @@
+import { NEXT_PUBLIC_DASHBOARD_CLIENT_ID } from "./public-envs";
 import { getConfiguredThirdwebClient } from "./thirdweb.server";
 
 export function getClientThirdwebClient(params?: {
@@ -7,5 +8,7 @@ export function getClientThirdwebClient(params?: {
   return getConfiguredThirdwebClient({
     secretKey: params?.jwt ?? undefined,
     teamId: params?.teamId ?? undefined,
+    type: "client",
+    clientId: NEXT_PUBLIC_DASHBOARD_CLIENT_ID,
   });
 }

apps/dashboard/src/@/constants/thirdweb-client.server.ts

@@ -1,9 +1,12 @@
 import "server-only";
 
+import { NEXT_PUBLIC_DASHBOARD_CLIENT_ID } from "./public-envs";
 import { DASHBOARD_THIRDWEB_SECRET_KEY } from "./server-envs";
 import { getConfiguredThirdwebClient } from "./thirdweb.server";
 
 export const serverThirdwebClient = getConfiguredThirdwebClient({
   teamId: undefined,
   secretKey: DASHBOARD_THIRDWEB_SECRET_KEY,
+  clientId: NEXT_PUBLIC_DASHBOARD_CLIENT_ID,
+  type: "server",
 });

apps/dashboard/src/@/constants/thirdweb.server.ts

@@ -1,7 +1,4 @@
-import {
-  NEXT_PUBLIC_DASHBOARD_CLIENT_ID,
-  NEXT_PUBLIC_IPFS_GATEWAY_URL,
-} from "@/constants/public-envs";
+import { NEXT_PUBLIC_IPFS_GATEWAY_URL } from "@/constants/public-envs";
 import {
   THIRDWEB_BRIDGE_URL,
   THIRDWEB_BUNDLER_DOMAIN,
@@ -22,10 +19,21 @@ import {
 import { getZkPaymasterData } from "thirdweb/wallets/smart";
 import { getVercelEnv } from "../../lib/vercel-utils";
 
-export function getConfiguredThirdwebClient(options: {
-  secretKey: string | undefined;
-  teamId: string | undefined;
-}): ThirdwebClient {
+export function getConfiguredThirdwebClient(
+  options:
+    | {
+        type: "server";
+        secretKey: string;
+        clientId: string | undefined;
+        teamId: string | undefined;
+      }
+    | {
+        type: "client";
+        clientId: string;
+        secretKey: string | undefined;
+        teamId: string | undefined;
+      },
+): ThirdwebClient {
   if (getVercelEnv() !== "production") {
     // if not on production: run this when creating a client to set the domains
     setThirdwebDomains({
@@ -73,16 +81,30 @@ export function getConfiguredThirdwebClient(options: {
     });
   }
 
-  return createThirdwebClient({
-    teamId: options.teamId,
-    secretKey: options.secretKey,
-    clientId: NEXT_PUBLIC_DASHBOARD_CLIENT_ID,
-    config: {
-      storage: {
-        gatewayUrl: NEXT_PUBLIC_IPFS_GATEWAY_URL,
-      },
-    },
-  });
+  return createThirdwebClient(
+    // this ternary is purely for making typescript happy - both are same object
+    options.type === "server"
+      ? {
+          teamId: options.teamId,
+          secretKey: options.secretKey,
+          clientId: options.clientId,
+          config: {
+            storage: {
+              gatewayUrl: NEXT_PUBLIC_IPFS_GATEWAY_URL,
+            },
+          },
+        }
+      : {
+          teamId: options.teamId,
+          secretKey: options.secretKey,
+          clientId: options.clientId,
+          config: {
+            storage: {
+              gatewayUrl: NEXT_PUBLIC_IPFS_GATEWAY_URL,
+            },
+          },
+        },
+  );
 }
 
 /**

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

@@ -18,7 +18,7 @@ import {
   ChevronRightIcon,
   ExternalLinkIcon,
 } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { type ThirdwebContract, toTokens } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";
 import {
@@ -199,6 +199,7 @@ export function RecentTransfers(props: {
 }) {
   const rowsPerPage = 10;
   const [page, setPage] = useState(0);
+  const [hasFetchedOnce, setHasFetchedOnce] = useState(false);
 
   const tokenQuery = useTokenTransfers({
     chainId: props.clientContract.chain.id,
@@ -207,11 +208,18 @@ export function RecentTransfers(props: {
     limit: rowsPerPage,
   });
 
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (!tokenQuery.isPending) {
+      setHasFetchedOnce(true);
+    }
+  }, [tokenQuery.isPending]);
+
   return (
     <div>
       <RecentTransfersUI
         data={tokenQuery.data ?? []}
-        isPending={tokenQuery.isPending}
+        isPending={tokenQuery.isPending && !hasFetchedOnce}
         rowsPerPage={rowsPerPage}
         tokenMetadata={{
           decimals: props.decimals,

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

@@ -1,19 +1,11 @@
 "use client";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { SkeletonContainer } from "@/components/ui/skeleton";
 import { cn } from "@/lib/utils";
 import { useMutation, useQuery } from "@tanstack/react-query";
 import { TransactionButton } from "components/buttons/TransactionButton";
-import {
-  CheckIcon,
-  CircleIcon,
-  MinusIcon,
-  PlusIcon,
-  XIcon,
-} from "lucide-react";
+import { CheckIcon, CircleIcon, XIcon } from "lucide-react";
 import { useTheme } from "next-themes";
 import { useState } from "react";
 import { toast } from "sonner";
@@ -33,6 +25,7 @@ import {
 import { useActiveAccount, useSendTransaction } from "thirdweb/react";
 import { getClaimParams } from "thirdweb/utils";
 import { tryCatch } from "utils/try-catch";
+import { DecimalInput } from "../../../../../../../../../../@/components/ui/decimal-input";
 import { getSDKTheme } from "../../../../../../../../components/sdk-component-theme";
 import { PublicPageConnectButton } from "../../../_components/PublicPageConnectButton";
 import { getCurrencyMeta } from "../../_utils/getCurrencyMeta";
@@ -53,7 +46,7 @@ export function ClaimTokenCardUI(props: {
     symbol: string;
   };
 }) {
-  const [quantity, setQuantity] = useState(1);
+  const [quantity, setQuantity] = useState("1");
   const account = useActiveAccount();
   const { theme } = useTheme();
   const sendClaimTx = useSendTransaction({
@@ -216,6 +209,7 @@ export function ClaimTokenCardUI(props: {
               quantity={quantity}
               setQuantity={setQuantity}
               id="token-amount"
+              symbol={props.symbol}
             />
             {/* <p className="text-xs text-muted-foreground">Maximum purchasable: {tokenData.maxPurchasable} tokens</p> */}
           </div>
@@ -246,9 +240,7 @@ export function ClaimTokenCardUI(props: {
             {/* Quantity */}
             <div className="flex justify-between font-medium text-sm">
               <span>Quantity</span>
-              <span>
-                {quantity} Token{quantity > 1 ? "s" : ""}
-              </span>
+              <span>{quantity}</span>
             </div>
 
             {/* Total Price */}
@@ -265,7 +257,7 @@ export function ClaimTokenCardUI(props: {
                               claimParamsData.pricePerTokenWei,
                               claimParamsData.decimals,
                             ),
-                          ) * quantity
+                          ) * Number(quantity)
                         } ${claimParamsData.symbol}`
                       : undefined
                   }
@@ -293,7 +285,7 @@ export function ClaimTokenCardUI(props: {
               txChainID={props.contract.chain.id}
               disabled={approveAndClaim.isPending || !claimParamsData}
             >
-              Buy Token{quantity > 1 ? "s" : ""}
+              Buy
             </TransactionButton>
           ) : (
             <PublicPageConnectButton connectButtonClassName="!w-full" />
@@ -350,39 +342,25 @@ function StepUI(props: {
 }
 
 function PriceInput(props: {
-  quantity: number;
-  setQuantity: (quantity: number) => void;
+  quantity: string;
+  setQuantity: (quantity: string) => void;
   id: string;
+  symbol: string;
 }) {
   return (
-    <div className="flex items-center">
-      <Input
+    <div className="relative">
+      <DecimalInput
         id={props.id}
-        type="number"
-        value={props.quantity}
-        onChange={(e) =>
-          props.setQuantity(Math.max(1, Number(e.target.value) || 1))
-        }
-        min="1"
-        className="!text-xl h-12 rounded-r-none border-r-0 font-semibold "
+        value={String(props.quantity)}
+        onChange={(value) => {
+          console.log("value", value);
+          props.setQuantity(value);
+        }}
+        className="!text-2xl h-auto truncate bg-muted/50 pr-14 font-bold"
       />
-
-      <Button
-        variant="outline"
-        className="h-12 w-16 rounded-none border-r-0 bg-background p-0 disabled:opacity-100"
-        onClick={() => props.setQuantity(props.quantity - 1)}
-        disabled={props.quantity <= 1}
-      >
-        <MinusIcon className="size-4" />
-      </Button>
-
-      <Button
-        className="h-12 w-16 rounded-l-none bg-background p-0 disabled:opacity-100"
-        variant="outline"
-        onClick={() => props.setQuantity(props.quantity + 1)}
-      >
-        <PlusIcon className="size-4" />
-      </Button>
+      <div className="-translate-y-1/2 absolute top-1/2 right-4 text-base text-muted-foreground">
+        {props.symbol}
+      </div>
     </div>
   );
 }

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/assets/create/distribution/token-sale.tsx

@@ -3,7 +3,7 @@
 import { FormFieldSetup } from "@/components/blocks/FormFieldSetup";
 import { TokenSelector } from "@/components/blocks/TokenSelector";
 import { DynamicHeight } from "@/components/ui/DynamicHeight";
-import { Input } from "@/components/ui/input";
+import { DecimalInput } from "@/components/ui/decimal-input";
 import { Switch } from "@/components/ui/switch";
 import type { ThirdwebClient } from "thirdweb";
 import type { TokenDistributionForm } from "../form";
@@ -112,38 +112,3 @@ export function TokenSaleSection(props: {
     </DynamicHeight>
   );
 }
-
-function DecimalInput(props: {
-  value: string;
-  onChange: (value: string) => void;
-  maxValue?: number;
-}) {
-  return (
-    <Input
-      type="text"
-      value={props.value}
-      inputMode="decimal"
-      onChange={(e) => {
-        const number = Number(e.target.value);
-        // ignore if string becomes invalid number
-        if (Number.isNaN(number)) {
-          return;
-        }
-
-        if (props.maxValue && number > props.maxValue) {
-          return;
-        }
-
-        // replace leading multiple zeros with single zero
-        let cleanedValue = e.target.value.replace(/^0+/, "0");
-
-        // replace leading zero before decimal point
-        if (!cleanedValue.includes(".")) {
-          cleanedValue = cleanedValue.replace(/^0+/, "");
-        }
-
-        props.onChange(cleanedValue || "0");
-      }}
-    />
-  );
-}