chainid: bigint -> number

packages/thirdweb/src/chain/index.ts

@@ -4,7 +4,7 @@ import type { ApiChain } from "./types.js";
 
 export type Chain =
   | {
-      id: bigint | number;
+      id: number;
       rpc: string;
       nativeCurrency?: {
         name?: string;
@@ -14,7 +14,7 @@ export type Chain =
     }
   // TODO: add all possible chainIds somehow for autocompletion
   // eslint-disable-next-line @typescript-eslint/ban-types
-  | ((number | bigint) & {});
+  | (number & {});
 
 /**
  * Defines a chain based on the provided options.
@@ -49,7 +49,7 @@ type GetRpcUrlForChainOptions = {
  */
 export function getRpcUrlForChain(options: GetRpcUrlForChainOptions): string {
   // if the chain is just the chainId use the thirdweb rpc
-  if (typeof options.chain === "bigint" || typeof options.chain === "number") {
+  if (typeof options.chain === "number") {
     return `https://${options.chain.toString()}.rpc.thirdweb.com/${
       options.client.clientId
     }`;
@@ -70,11 +70,11 @@ export function getRpcUrlForChain(options: GetRpcUrlForChainOptions): string {
  * @returns The chain ID.
  * @internal
  */
-export function getChainIdFromChain(chain: Chain): bigint {
-  if (typeof chain === "bigint" || typeof chain === "number") {
-    return BigInt(chain);
+export function getChainIdFromChain(chain: Chain): number {
+  if (typeof chain === "number") {
+    return chain;
   }
-  return BigInt(chain.id);
+  return chain.id;
 }
 
 /**
@@ -84,11 +84,7 @@ export function getChainIdFromChain(chain: Chain): bigint {
  * @internal
  */
 export async function getChainSymbol(chain: Chain): Promise<string> {
-  if (
-    typeof chain === "bigint" ||
-    typeof chain === "number" ||
-    !chain.nativeCurrency?.symbol
-  ) {
+  if (typeof chain === "number" || !chain.nativeCurrency?.symbol) {
     const chainId = getChainIdFromChain(chain);
     return getChainDataForChainId(chainId)
       .then((data) => data.nativeCurrency.symbol)
@@ -109,11 +105,7 @@ export async function getChainSymbol(chain: Chain): Promise<string> {
  * @internal
  */
 export async function getChainDecimals(chain: Chain): Promise<number> {
-  if (
-    typeof chain === "bigint" ||
-    typeof chain === "number" ||
-    !chain.nativeCurrency?.decimals
-  ) {
+  if (typeof chain === "number" || !chain.nativeCurrency?.decimals) {
     const chainId = getChainIdFromChain(chain);
     return getChainDataForChainId(chainId)
       .then((data) => data.nativeCurrency.decimals)
@@ -137,11 +129,7 @@ export async function getChainDecimals(chain: Chain): Promise<number> {
 export async function getChainNativeCurrencyName(
   chain: Chain,
 ): Promise<string> {
-  if (
-    typeof chain === "bigint" ||
-    typeof chain === "number" ||
-    !chain.nativeCurrency?.name
-  ) {
+  if (typeof chain === "number" || !chain.nativeCurrency?.name) {
     const chainId = getChainIdFromChain(chain);
     return getChainDataForChainId(chainId)
       .then((data) => data.nativeCurrency.name)
@@ -167,7 +155,7 @@ type FetchChainResponse =
 /**
  * @internal
  */
-export function getChainDataForChainId(chainId: bigint): Promise<ApiChain> {
+export function getChainDataForChainId(chainId: number): Promise<ApiChain> {
   return withCache(
     async () => {
       const res = await fetch(`https://api.thirdweb.com/v1/chains/${chainId}`);

packages/thirdweb/src/gas/fee-data.ts

@@ -105,12 +105,12 @@ async function getDynamicFeeData(
 
   const chainId = getChainIdFromChain(chain);
   // flag chain testnet & flag chain
-  if (chainId === 220n || chainId === 1220n) {
+  if (chainId === 220 || chainId === 1220) {
     // these does not support eip-1559, for some reason even though `eth_maxPriorityFeePerGas` is available?!?
     // return null because otherwise TX break
     return { maxFeePerGas: null, maxPriorityFeePerGas: null };
     // mumbai & polygon
-  } else if (chainId === 80001n || chainId === 137n) {
+  } else if (chainId === 80001 || chainId === 137) {
     // for polygon, get fee data from gas station
     maxPriorityFeePerGas_ = await getPolygonGasPriorityFee(chainId);
   } else if (maxPriorityFeePerGas) {
@@ -130,7 +130,7 @@ async function getDynamicFeeData(
   maxFeePerGas = baseBlockFee * 2n + maxPriorityFeePerGas_;
 
   // special cased for Celo gas fees
-  if (chainId === 42220n || chainId === 44787n || chainId === 62320n) {
+  if (chainId === 42220 || chainId === 44787 || chainId === 62320) {
     maxPriorityFeePerGas_ = maxFeePerGas;
   }
 
@@ -184,11 +184,11 @@ async function getGasPrice(
 /**
  * @internal
  */
-function getGasStationUrl(chainId: 137n | 80001n): string {
+function getGasStationUrl(chainId: 137 | 80001): string {
   switch (chainId) {
-    case 137n:
+    case 137:
       return "https://gasstation.polygon.technology/v2";
-    case 80001n:
+    case 80001:
       return "https://gasstation-testnet.polygon.technology/v2";
   }
 }
@@ -200,11 +200,11 @@ const MIN_MUMBAI_GAS_PRICE = 1n; // 1 gwei
 /**
  * @internal
  */
-function getDefaultGasFee(chainId: 137n | 80001n): bigint {
+function getDefaultGasFee(chainId: 137 | 80001): bigint {
   switch (chainId) {
-    case 137n:
+    case 137:
       return MIN_POLYGON_GAS_PRICE;
-    case 80001n:
+    case 80001:
       return MIN_MUMBAI_GAS_PRICE;
   }
 }
@@ -214,9 +214,7 @@ function getDefaultGasFee(chainId: 137n | 80001n): bigint {
  * @returns The gas price
  * @internal
  */
-async function getPolygonGasPriorityFee(
-  chainId: 137n | 80001n,
-): Promise<bigint> {
+async function getPolygonGasPriorityFee(chainId: 137 | 80001): Promise<bigint> {
   const gasStationUrl = getGasStationUrl(chainId);
   try {
     const data = await (await fetch(gasStationUrl)).json();

packages/thirdweb/src/react/hooks/others/useChainQuery.ts

@@ -4,7 +4,7 @@ import { getChainDataForChainId } from "../../../chain/index.js";
 /**
  * @internal
  */
-function getChainQuery(chainId?: bigint) {
+function getChainQuery(chainId?: number) {
   // TODO make this aware of local overrides (developer passed into provider or something)
   return queryOptions({
     queryKey: ["chain", `${chainId}`] as const,
@@ -22,14 +22,14 @@ function getChainQuery(chainId?: bigint) {
 /**
  * @internal
  */
-export function useChainQuery(chainId?: bigint) {
+export function useChainQuery(chainId?: number) {
   return useQuery(getChainQuery(chainId));
 }
 
 /**
  * @internal
  */
-export function useChainsQuery(chainIds: bigint[]) {
+export function useChainsQuery(chainIds: number[]) {
   // this way the underlying queries end up shared with the single query!
   return useQueries({
     queries: chainIds.map(getChainQuery),

packages/thirdweb/src/react/providers/wallet-ui-states-provider.tsx

@@ -23,8 +23,8 @@ type ModalConfig = {
   };
   isEmbed?: boolean;
   onConnect?: (wallet: Wallet) => void;
-  chainId?: bigint;
-  chains?: bigint[];
+  chainId?: number;
+  chains?: number[];
   showThirdwebBranding?: boolean;
 };
 
@@ -63,8 +63,8 @@ export const WalletUIStatesProvider = (
       onLogout?: () => void;
     };
     onConnect?: (wallet: Wallet) => void;
-    chainId?: bigint;
-    chains?: bigint[];
+    chainId?: number;
+    chains?: number[];
     showThirdwebBranding?: boolean;
   }>,
 ) => {
@@ -243,8 +243,8 @@ type ModalConfigOptions = {
    */
   onConnect?: () => void;
 
-  chainId?: bigint;
-  chains?: bigint[];
+  chainId?: number;
+  chains?: number[];
 
   /**
    * By default the ConnectWallet Modal shows "powered by thirdweb" branding at the bottom of the modal.

packages/thirdweb/src/react/types/wallets.ts

@@ -119,12 +119,12 @@ export type ConnectUIProps = {
   /**
    * Chain Id to connect the wallet to
    */
-  chainId?: bigint;
+  chainId?: number;
 
   /**
    * List of all chains supported by the app
    */
-  chains?: bigint[];
+  chains?: number[];
 
   /**
    * Create a wallet instance

packages/thirdweb/src/react/ui/ConnectWallet/ConnectWallet.tsx

@@ -69,7 +69,7 @@ export function ConnectWallet(props: ConnectWalletProps) {
   const isNetworkMismatch =
     activeWalletChainId !== undefined &&
     props.chainId &&
-    activeWalletChainId !== BigInt(props.chainId);
+    activeWalletChainId !== props.chainId;
 
   // const [showSignatureModal, setShowSignatureModal] = useState(false);
   // const address = useActiveWalletAddress();
@@ -170,8 +170,8 @@ export function ConnectWallet(props: ConnectWalletProps) {
                   titleIconUrl: props.connectModal?.titleIcon,
                   // auth: props.auth,
                   onConnect: props.onConnect,
-                  chainId: props.chainId ? BigInt(props.chainId) : undefined,
-                  chains: props.chains?.map(BigInt),
+                  chainId: props.chainId ? props.chainId : undefined,
+                  chains: props.chains,
                   showThirdwebBranding:
                     props.connectModal?.showThirdwebBranding,
                 });
@@ -195,7 +195,7 @@ export function ConnectWallet(props: ConnectWalletProps) {
               style={props.switchButton?.style}
               className={props.switchButton?.className}
               switchNetworkBtnTitle={props.switchButton?.label}
-              targetChainId={BigInt(props.chainId)}
+              targetChainId={props.chainId}
             />
           );
         }
@@ -241,7 +241,7 @@ export function ConnectWallet(props: ConnectWalletProps) {
               //   props?.auth?.onLogout?.();
               // }
             }}
-            chains={props?.chains?.map(BigInt) || []}
+            chains={props?.chains || []}
           />
         );
       })()}
@@ -256,7 +256,7 @@ function SwitchNetworkButton(props: {
   style?: React.CSSProperties;
   className?: string;
   switchNetworkBtnTitle?: string;
-  targetChainId: bigint;
+  targetChainId: number;
 }) {
   const switchChain = useSwitchActiveWalletChain();
   const [switching, setSwitching] = useState(false);

packages/thirdweb/src/react/ui/ConnectWallet/ConnectWalletProps.ts

@@ -268,7 +268,7 @@ export type ConnectWalletProps = {
    * <ConnectWallet chainId={137} />
    * ```
    */
-  chainId?: bigint | number;
+  chainId?: number;
 
   /**
    * Array of chain ids that your app supports.
@@ -283,7 +283,7 @@ export type ConnectWalletProps = {
    * <ConnectWallet chains={[1, 137, 10]} />
    * ```
    */
-  chains?: (bigint | number)[];
+  chains?: number[];
 
   /**
    * Set the theme for the button and modal. By default it is set to `"dark"`

packages/thirdweb/src/react/ui/ConnectWallet/Details.tsx

@@ -80,7 +80,7 @@ export const ConnectedWalletDetails: React.FC<{
   detailsModal?: ConnectWallet_DetailsModalOptions;
   theme: "light" | "dark" | Theme;
   supportedTokens: SupportedTokens;
-  chains: bigint[];
+  chains: number[];
 }> = (props) => {
   const locale = useTWLocale().connectWallet;
   const activeWallet = useActiveWallet();