thirdweb 5.29.6 → 5.30.0-nightly-33777df88fb190c2af8ad25e4930040884996f1e-20240620000630

package/src/react/web/ui/ConnectWallet/icons/CoinsIcon.tsx

@@ -0,0 +1,46 @@
+import type { IconFC } from "./types.js";
+
+/**
+ * @internal
+ */
+export const CoinsIcon: IconFC = (props) => {
+  return (
+    <svg
+      width={props.size}
+      height={props.size}
+      role="presentation"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M18.0901 10.37C19.0354 10.7224 19.8766 11.3075 20.5358 12.0712C21.1951 12.8349 21.6512 13.7524 21.8618 14.7391C22.0725 15.7257 22.031 16.7495 21.7411 17.7158C21.4513 18.6822 20.9224 19.5598 20.2035 20.2676C19.4846 20.9754 18.5988 21.4905 17.6281 21.7652C16.6573 22.04 15.633 22.0655 14.6498 21.8395C13.6666 21.6134 12.7562 21.1431 12.0029 20.472C11.2496 19.8009 10.6777 18.9507 10.3401 18"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7 6H8V10"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16.7101 13.88L17.4101 14.59L14.5901 17.41"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};

package/src/react/web/ui/ConnectWallet/icons/{WalletIcon.tsx → GenericWalletIcon.tsx}

@@ -3,7 +3,7 @@ import type { IconFC } from "./types.js";
 /**
  * @internal
  */
-export const WalletIcon: IconFC = (props) => {
+export const GenericWalletIcon: IconFC = (props) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"

package/src/react/web/ui/ConnectWallet/icons/OutlineWalletIcon.tsx

@@ -0,0 +1,32 @@
+import type { IconFC } from "./types.js";
+
+/**
+ * @internal
+ */
+export const OutlineWalletIcon: IconFC = (props) => {
+  return (
+    <svg
+      width={props.size}
+      height={props.size}
+      viewBox="0 0 24 24"
+      role="presentation"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M19 7V4C19 3.73478 18.8946 3.48043 18.7071 3.29289C18.5196 3.10536 18.2652 3 18 3H5C4.46957 3 3.96086 3.21071 3.58579 3.58579C3.21071 3.96086 3 4.46957 3 5C3 5.53043 3.21071 6.03914 3.58579 6.41421C3.96086 6.78929 4.46957 7 5 7H20C20.2652 7 20.5196 7.10536 20.7071 7.29289C20.8946 7.48043 21 7.73478 21 8V12M21 12H18C17.4696 12 16.9609 12.2107 16.5858 12.5858C16.2107 12.9609 16 13.4696 16 14C16 14.5304 16.2107 15.0391 16.5858 15.4142C16.9609 15.7893 17.4696 16 18 16H21C21.2652 16 21.5196 15.8946 21.7071 15.7071C21.8946 15.5196 22 15.2652 22 15V13C22 12.7348 21.8946 12.4804 21.7071 12.2929C21.5196 12.1054 21.2652 12 21 12Z"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3 5V19C3 19.5304 3.21071 20.0391 3.58579 20.4142C3.96086 20.7893 4.46957 21 5 21H20C20.2652 21 20.5196 20.8946 20.7071 20.7071C20.8946 20.5196 21 20.2652 21 20V16"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};

package/src/react/web/ui/ConnectWallet/icons/WalletConnectIcon.tsx

@@ -0,0 +1,22 @@
+import type { IconFC } from "./types.js";
+
+/**
+ * @internal
+ */
+export const WalletConnectIcon: IconFC = (props) => {
+  return (
+    <svg
+      width={props.size}
+      height={props.size}
+      viewBox="0 0 24 24"
+      fill="none"
+      role="presentation"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M4.91334 7.73539C8.82714 4.0882 15.1729 4.0882 19.0867 7.73539L19.5577 8.17432C19.7534 8.35664 19.7534 8.65232 19.5577 8.83464L17.9464 10.3362C17.8485 10.4274 17.6899 10.4274 17.5921 10.3362L16.9439 9.73217C14.2134 7.18782 9.7866 7.18782 7.05614 9.73217L6.36193 10.379C6.26407 10.4702 6.10547 10.4702 6.0076 10.379L4.39629 8.87747C4.20056 8.69515 4.20056 8.39947 4.39629 8.21715L4.91334 7.73539ZM22.4191 10.8407L23.8532 12.1771C24.0489 12.3594 24.0489 12.6551 23.8532 12.8374L17.3867 18.8632C17.1911 19.0456 16.8738 19.0456 16.6781 18.8632L12.0886 14.5865C12.0397 14.5409 11.9604 14.5409 11.9115 14.5865L7.32202 18.8632C7.12638 19.0456 6.8091 19.0456 6.61337 18.8632L0.146771 12.8373C-0.0489237 12.655 -0.0489237 12.3593 0.146771 12.177L1.58087 10.8406C1.77657 10.6582 2.09384 10.6582 2.28954 10.8406L6.87907 15.1173C6.928 15.163 7.0073 15.163 7.05623 15.1173L11.6456 10.8406C11.8412 10.6582 12.1585 10.6582 12.3542 10.8406L16.9438 15.1173C16.9927 15.163 17.072 15.163 17.1209 15.1173L21.7105 10.8407C21.9061 10.6583 22.2234 10.6583 22.4191 10.8407Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};

package/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx

@@ -604,6 +604,7 @@ function SwapScreenContent(
             : toToken.address,
           toAmount: tokenAmount,
           client,
+          purchaseData: payOptions.purchaseData,
         }
       : undefined;
 
@@ -799,6 +800,8 @@ function FiatScreenContent(
           toAmount: tokenAmount,
           client,
           isTestMode: buyWithFiatOptions?.testMode,
+          purchaseData: props.payOptions.purchaseData,
+          fromAddress: account.address,
         }
       : undefined,
   );

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/PayWithCrypto.tsx

@@ -18,7 +18,7 @@ import { Button } from "../../../../components/buttons.js";
 import { Text } from "../../../../components/text.js";
 import { TokenSymbol } from "../../../../components/token/TokenSymbol.js";
 import type { TokenInfo } from "../../../defaultTokens.js";
-import { WalletIcon } from "../../../icons/WalletIcon.js";
+import { GenericWalletIcon } from "../../../icons/GenericWalletIcon.js";
 import { formatTokenBalance } from "../../formatTokenBalance.js";
 import { type NativeToken, isNativeToken } from "../../nativeToken.js";
 
@@ -126,7 +126,7 @@ export function PayWithCrypto(props: {
         )}
 
         <Container flex="row" gap="xxs" center="y" color="secondaryText">
-          <WalletIcon size={fontSize.xs} />
+          <GenericWalletIcon size={fontSize.xs} />
           {balanceQuery.data ? (
             <Text size="xs" color="secondaryText" weight={500}>
               {formatTokenBalance(balanceQuery.data, true)}

package/src/react/web/ui/ConnectWallet/screens/ManageWalletScreen.tsx

@@ -0,0 +1,122 @@
+"use client";
+import { ShuffleIcon } from "@radix-ui/react-icons";
+import type { ThirdwebClient } from "../../../../../client/client.js";
+import { isInAppWallet } from "../../../../../wallets/in-app/core/wallet/index.js";
+import { injectedProvider } from "../../../../../wallets/injected/mipdStore.js";
+import { fontSize, iconSize } from "../../../../core/design-system/index.js";
+import { useActiveWallet } from "../../../hooks/wallets/useActiveWallet.js";
+import { Spacer } from "../../components/Spacer.js";
+import { Container, Line, ModalHeader } from "../../components/basic.js";
+import { Text } from "../../components/text.js";
+import { MenuButton } from "../MenuButton.js";
+import { KeyIcon } from "../icons/KeyIcon.js";
+import { WalletConnectIcon } from "../icons/WalletConnectIcon.js";
+import type { ConnectLocale } from "../locale/types.js";
+import type { WalletDetailsModalScreen } from "./types.js";
+
+/**
+ * @internal
+ */
+export function ManageWalletScreen(props: {
+  onBack: () => void;
+  setScreen: (screen: WalletDetailsModalScreen) => void;
+  closeModal: () => void;
+  locale: ConnectLocale;
+  client: ThirdwebClient;
+}) {
+  const activeWallet = useActiveWallet();
+
+  return (
+    <Container
+      style={{
+        minHeight: "300px",
+      }}
+    >
+      <Container p="lg">
+        <ModalHeader title="Manage Wallet" onBack={props.onBack} />
+      </Container>
+      <Line />
+      <Container
+        px="sm"
+        scrollY
+        style={{
+          maxHeight: "500px",
+        }}
+      >
+        <Spacer y="md" />
+        <Container style={{ position: "relative", height: "250px" }}>
+          {/* Switch Metamask Account (only shows if the active wallet is MetaMask) */}
+          <SwitchMetamaskAccount
+            closeModal={props.closeModal}
+            connectLocale={props.locale}
+          />
+
+          {/* Wallet Connect Receiver */}
+          <MenuButton
+            onClick={() => {
+              props.setScreen("wallet-connect-receiver");
+            }}
+            style={{
+              fontSize: fontSize.sm,
+            }}
+          >
+            <WalletConnectIcon size={iconSize.md} />
+            <Text color="primaryText">Connect an App</Text>
+          </MenuButton>
+
+          {/* Private Key Export (if enabled) */}
+          {activeWallet &&
+            isInAppWallet(activeWallet) &&
+            !activeWallet.getConfig()?.hidePrivateKeyExport && (
+              <MenuButton
+                onClick={() => {
+                  props.setScreen("private-key");
+                }}
+                style={{
+                  fontSize: fontSize.sm,
+                }}
+              >
+                <KeyIcon size={iconSize.md} />
+                <Text color="primaryText">Export Private Key</Text>
+              </MenuButton>
+            )}
+        </Container>
+        <Spacer y="lg" />
+      </Container>
+    </Container>
+  );
+}
+
+function SwitchMetamaskAccount(props: {
+  closeModal: () => void;
+  connectLocale: ConnectLocale;
+}) {
+  const wallet = useActiveWallet();
+  const connectLocale = props.connectLocale;
+
+  if (wallet?.id !== "io.metamask") {
+    return null;
+  }
+
+  const injectedMetamaskProvider = injectedProvider("io.metamask");
+
+  if (!injectedMetamaskProvider) {
+    return null;
+  }
+
+  return (
+    <MenuButton
+      type="button"
+      onClick={async () => {
+        await injectedMetamaskProvider.request({
+          method: "wallet_requestPermissions",
+          params: [{ eth_accounts: {} }],
+        });
+        props.closeModal();
+      }}
+    >
+      <ShuffleIcon width={iconSize.md} height={iconSize.md} />
+      <Text color="primaryText">{connectLocale.switchAccount}</Text>
+    </MenuButton>
+  );
+}

package/src/react/web/ui/ConnectWallet/screens/SignatureScreen.tsx

@@ -10,6 +10,7 @@ import {
   spacing,
 } from "../../../../core/design-system/index.js";
 import { useSiweAuth } from "../../../../core/hooks/auth/useSiweAuth.js";
+import { useConnectUI } from "../../../../core/hooks/others/useWalletConnectionCtx.js";
 import { wait } from "../../../../core/utils/wait.js";
 import { useActiveWallet } from "../../../hooks/wallets/useActiveWallet.js";
 import { useDisconnect } from "../../../hooks/wallets/useDisconnect.js";
@@ -37,6 +38,7 @@ export const SignatureScreen: React.FC<{
   client: ThirdwebClient;
   auth: ConnectButtonProps["auth"];
 }> = (props) => {
+  const { client } = useConnectUI();
   const {
     onDone,
     modalSize,
@@ -146,7 +148,11 @@ export const SignatureScreen: React.FC<{
         ) : (
           <>
             <Container py="3xl">
-              <WalletLogoSpinner error={status === "failed"} id={wallet.id} />
+              <WalletLogoSpinner
+                client={client}
+                error={status === "failed"}
+                id={wallet.id}
+              />
             </Container>
 
             <Container flex="column" gap="md" animate="fadein" key={status}>

package/src/react/web/ui/ConnectWallet/screens/WalletConnectReceiverScreen.tsx

@@ -0,0 +1,165 @@
+"use client";
+import { ReloadIcon } from "@radix-ui/react-icons";
+import { useEffect, useState } from "react";
+import type { Chain } from "../../../../../chains/types.js";
+import type { ThirdwebClient } from "../../../../../client/client.js";
+import {
+  createWalletConnectClient,
+  createWalletConnectSession,
+} from "../../../../../wallets/wallet-connect/receiver/index.js";
+import type { WalletConnectClient } from "../../../../../wallets/wallet-connect/receiver/types.js";
+import { iconSize, spacing } from "../../../../core/design-system/index.js";
+import { useActiveWallet } from "../../../hooks/wallets/useActiveWallet.js";
+import { InputSelectionUI } from "../../../wallets/in-app/InputSelectionUI.js";
+import { Spacer } from "../../components/Spacer.js";
+import { Container, Line, ModalHeader } from "../../components/basic.js";
+import { Button } from "../../components/buttons.js";
+import { Text } from "../../components/text.js";
+import { WalletLogoSpinner } from "./WalletLogoSpinner.js";
+
+/**
+ * @internal
+ */
+export function WalletConnectReceiverScreen(props: {
+  onBack: () => void;
+  closeModal: () => void;
+  client: ThirdwebClient;
+  chains?: Chain[];
+}) {
+  const [walletConnectClient, setWalletConnectClient] = useState<
+    WalletConnectClient | undefined
+  >();
+  const activeWallet = useActiveWallet();
+  const [loading, setLoading] = useState(false);
+  const [errorConnecting, setErrorConnecting] = useState<false | string>(false);
+
+  useEffect(() => {
+    if (!activeWallet || !!errorConnecting) return;
+    createWalletConnectClient({
+      wallet: activeWallet,
+      client: props.client,
+      chains: props.chains,
+      onConnect: () => {
+        props.closeModal();
+        setLoading(false);
+      },
+    })
+      .then((wcClient) => {
+        setWalletConnectClient(wcClient);
+      })
+      .catch(() => {
+        setErrorConnecting("Failed to establish WalletConnect connection");
+      });
+  }, [
+    activeWallet,
+    props.client,
+    props.closeModal,
+    errorConnecting,
+    props.chains,
+  ]);
+
+  return (
+    <Container
+      style={{
+        minHeight: "300px",
+      }}
+    >
+      <Container p="lg">
+        <ModalHeader title="Connect an App" onBack={props.onBack} />
+      </Container>
+      <Line />
+      <Container
+        px="lg"
+        scrollY
+        style={{
+          maxHeight: "500px",
+        }}
+      >
+        <Container py="sm" style={{ position: "relative" }}>
+          <Container py="md">
+            <WalletLogoSpinner
+              client={props.client}
+              error={false}
+              id={"walletConnect"}
+              hideSpinner={!loading}
+            />
+          </Container>
+          <Container
+            animate="fadein"
+            style={{
+              animationDuration: "200ms",
+            }}
+          >
+            {!errorConnecting ? (
+              <>
+                <Text balance center multiline size="sm">
+                  Copy your connection URI from the external app.
+                </Text>
+                <Spacer y="xl" />
+                <InputSelectionUI
+                  type="text"
+                  disabled={
+                    loading || !!errorConnecting || !walletConnectClient
+                  }
+                  onSelect={async (value) => {
+                    setLoading(true);
+                    if (!walletConnectClient) {
+                      setErrorConnecting("No WalletConnect client found");
+                    } else {
+                      try {
+                        createWalletConnectSession({
+                          uri: value,
+                          walletConnectClient,
+                        });
+                      } catch (e) {
+                        setErrorConnecting(
+                          "Error creating WalletConnect session",
+                        );
+                      }
+                    }
+                  }}
+                  placeholder="WalletConnect URI"
+                  name="wcUri"
+                  emptyErrorMessage="Please enter a valid URI"
+                  submitButtonText="Connect"
+                />
+              </>
+            ) : (
+              <>
+                <Text center balance multiline size="sm">
+                  {errorConnecting}
+                </Text>
+                <Spacer y="md" />
+                <Container flex="row" center="x" animate="fadein">
+                  <Button
+                    fullWidth
+                    variant="accent"
+                    onClick={() => setErrorConnecting(false)}
+                    style={{
+                      gap: spacing.xs,
+                      alignItems: "center",
+                    }}
+                  >
+                    <ReloadIcon width={iconSize.sm} height={iconSize.sm} />{" "}
+                    Retry
+                  </Button>
+                </Container>
+              </>
+            )}
+          </Container>
+        </Container>
+      </Container>
+      <Container>
+        <Spacer y="lg" />
+        <Line />
+        <Container flex="row" center="x" p="lg">
+          <a href="https://google.com">
+            <Button variant="link" onClick={() => {}}>
+              Where do I find the URI?
+            </Button>
+          </a>
+        </Container>
+      </Container>
+    </Container>
+  );
+}

package/src/react/web/ui/ConnectWallet/screens/WalletLogoSpinner.tsx

@@ -1,8 +1,8 @@
 import { keyframes } from "@emotion/react";
+import type { ThirdwebClient } from "../../../../../client/client.js";
 import type { WalletId } from "../../../../../wallets/wallet-types.js";
 import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
 import { radius, spacing } from "../../../../core/design-system/index.js";
-import { useConnectUI } from "../../../../core/hooks/others/useWalletConnectionCtx.js";
 import { WalletImage } from "../../components/WalletImage.js";
 import { fadeInAnimation } from "../../design-system/animations.js";
 import { StyledDiv } from "../../design-system/elements.js";
@@ -11,8 +11,12 @@ import { StyledDiv } from "../../design-system/elements.js";
  *
  * @internal
  */
-export function WalletLogoSpinner(props: { error: boolean; id: WalletId }) {
-  const { client } = useConnectUI();
+export function WalletLogoSpinner(props: {
+  client: ThirdwebClient;
+  error: boolean;
+  id: WalletId;
+  hideSpinner?: boolean;
+}) {
   const loaderRadius = 20;
   const radiusFactor = 36 - loaderRadius;
   const dashArrayStart = 116 + radiusFactor;
@@ -31,29 +35,31 @@ export function WalletLogoSpinner(props: { error: boolean; id: WalletId }) {
         }}
       >
         <div data-img-container>
-          <svg
-            viewBox="0 0 110 110"
-            style={{
-              display: props.error ? "none" : "block",
-            }}
-            role="presentation"
-          >
-            <rect
-              x="2"
-              y="2"
-              width="106"
-              height="106"
-              rx={loaderRadius}
-              strokeDasharray={`${dashArrayStart} ${dashArrayEnd}`}
-              strokeDashoffset={dashOffset}
-              strokeLinecap="round"
-              fill="none"
-              strokeWidth={4}
-            />
-          </svg>
+          {!props.hideSpinner && (
+            <svg
+              viewBox="0 0 110 110"
+              style={{
+                display: props.error ? "none" : "block",
+              }}
+              role="presentation"
+            >
+              <rect
+                x="2"
+                y="2"
+                width="106"
+                height="106"
+                rx={loaderRadius}
+                strokeDasharray={`${dashArrayStart} ${dashArrayEnd}`}
+                strokeDashoffset={dashOffset}
+                strokeLinecap="round"
+                fill="none"
+                strokeWidth={4}
+              />
+            </svg>
+          )}
 
           <WalletBg>
-            <WalletImage id={props.id} size={"68"} client={client} />
+            <WalletImage id={props.id} size={"68"} client={props.client} />
           </WalletBg>
         </div>
       </div>

package/src/react/web/ui/ConnectWallet/screens/types.ts

@@ -58,3 +58,16 @@ export type WelcomeScreen =
       };
     }
   | (() => React.ReactNode);
+
+export type WalletDetailsModalScreen =
+  | "main"
+  | "export"
+  | "send"
+  | "receive"
+  | "buy"
+  | "network-switcher"
+  | "pending-tx"
+  | "view-funds"
+  | "private-key"
+  | "manage-wallet"
+  | "wallet-connect-receiver";

package/src/react/web/ui/ConnectWallet/useConnectModal.tsx

@@ -55,7 +55,7 @@ export function useConnectModal() {
         setRootEl(undefined);
       }
 
-      return new Promise((resolve, reject) => {
+      return new Promise<Wallet>((resolve, reject) => {
         setIsConnecting(true);
         getConnectLocale(props.locale || "en_US")
           .then((locale) => {

package/src/react/web/ui/components/CopyIcon.tsx

@@ -15,6 +15,7 @@ export const CopyIcon: React.FC<{
   hasCopied?: boolean;
 }> = (props) => {
   const { hasCopied, onCopy } = useClipboard(props.text);
+  const showCheckIcon = props.hasCopied || hasCopied;
 
   return (
     <div
@@ -31,13 +32,11 @@ export const CopyIcon: React.FC<{
       }}
     >
       <ToolTip tip={props.tip} side={props.side} align={props.align}>
-        {props.hasCopied || hasCopied ? (
-          <Container color="success">
-            <CheckIcon />
+        <div>
+          <Container color={showCheckIcon ? "success" : undefined}>
+            {showCheckIcon ? <CheckIcon /> : <CopyIconSVG />}
           </Container>
-        ) : (
-          <CopyIconSVG />
-        )}
+        </div>
       </ToolTip>
     </div>
   );

package/src/react/web/utils/canFitWideModal.ts

@@ -1,7 +1,7 @@
 import { wideModalScreenThreshold } from "../ui/ConnectWallet/constants.js";
 
 /**
- * Return true if the current screen size can fit the the wide connect modal
+ * Return true if the current screen size can fit the wide connect modal
  * @internal
  */
 export function canFitWideModal(): boolean {

package/src/react/web/wallets/in-app/InputSelectionUI.tsx

@@ -21,6 +21,7 @@ export function InputSelectionUI(props: {
   emptyErrorMessage?: string;
   submitButtonText: string;
   format?: "phone";
+  disabled?: boolean;
 }) {
   const [countryCodeInfo, setCountryCodeInfo] = useState("US +1");
   const [input, setInput] = useState("");
@@ -77,6 +78,7 @@ export function InputSelectionUI(props: {
           type={props.type}
           name={props.name}
           value={input}
+          disabled={props.disabled}
           onChange={(e) => {
             setInput(e.target.value);
             if (props.errorMessage) {
@@ -93,6 +95,7 @@ export function InputSelectionUI(props: {
         />
         <IconButton
           onClick={handleSelect}
+          disabled={props.disabled}
           style={{
             padding: spacing.md,
             borderRadius: `0 ${radius.lg} ${radius.lg} 0`,

package/src/react/web/wallets/shared/ConnectingScreen.tsx

@@ -27,7 +27,7 @@ export const ConnectingScreen: React.FC<{
   };
 }> = (props) => {
   const { locale } = props;
-  const { connectModal } = useConnectUI();
+  const { client, connectModal } = useConnectUI();
   return (
     <Container animate="fadein" fullHeight flex="column">
       <Container
@@ -51,6 +51,7 @@ export const ConnectingScreen: React.FC<{
       >
         <Container py="3xl">
           <WalletLogoSpinner
+            client={client}
             error={props.errorConnecting}
             id={props.walletId}
           />

package/src/transaction/read-contract.ts

@@ -78,7 +78,7 @@ export type ReadContractOptions<
  * import { readContract } from "thirdweb";
  * const result = await readContract({
  *  contract,
- *  method: "totalSupply",
+ *  method: "function totalSupply() view returns (uint256)",
  * });
  * ```
  */

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.29.6";
+export const version = "5.30.0-nightly-33777df88fb190c2af8ad25e4930040884996f1e-20240620000630";