Adds use client directives (#2921)

gregfromstl · web-flow · commit d77b6f67adc6 · 2024-05-03T19:33:45.000-07:00
diff --git a/.changeset/soft-wasps-change.md b/.changeset/soft-wasps-change.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": minor
+---
+
+Adds the 'use client' directive to all client-only components
diff --git a/packages/thirdweb/src/react/core/providers/RootElementContext.tsx b/packages/thirdweb/src/react/core/providers/RootElementContext.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { createContext } from "react";
 
 export const SetRootElementContext = createContext<
diff --git a/packages/thirdweb/src/react/core/providers/thirdweb-provider.tsx b/packages/thirdweb/src/react/core/providers/thirdweb-provider.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { useState } from "react";
 import {
diff --git a/packages/thirdweb/src/react/core/providers/wallet-connection.tsx b/packages/thirdweb/src/react/core/providers/wallet-connection.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { createContext } from "react";
 import type { Chain } from "../../../chains/types.js";
 import type { ThirdwebClient } from "../../../client/client.js";
diff --git a/packages/thirdweb/src/react/web/providers/wallet-ui-states-provider.tsx b/packages/thirdweb/src/react/web/providers/wallet-ui-states-provider.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { createContext, useContext, useState } from "react";
 import { CustomThemeProvider } from "../ui/design-system/CustomThemeProvider.js";
 import type { Theme } from "../ui/design-system/index.js";
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import styled from "@emotion/styled";
 import { useEffect, useMemo, useState } from "react";
 import { useSiweAuth } from "../../../core/hooks/auth/useSiweAuth.js";
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx
@@ -1,3 +1,4 @@
+"use client";
 import styled from "@emotion/styled";
 import {
   ChevronRightIcon,
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AllWalletsUI.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AllWalletsUI.tsx
@@ -1,3 +1,4 @@
+"use client";
 import styled from "@emotion/styled";
 import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
 import { CrossCircledIcon } from "@radix-ui/react-icons";
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AnyWalletConnectUI.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/AnyWalletConnectUI.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { Suspense, lazy, useEffect, useState } from "react";
 import type {
   InjectedSupportedWalletIds,
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { useEffect, useMemo } from "react";
 import type { Chain } from "../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModal.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModal.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { useCallback, useEffect, useState } from "react";
 import { useConnectUI } from "../../../../core/hooks/others/useWalletConnectionCtx.js";
 import { useActiveAccount } from "../../../../core/hooks/wallets/wallet-hooks.js";
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModalContent.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModalContent.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { Suspense, lazy, useCallback } from "react";
 import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
 import { useSiweAuth } from "../../../../core/hooks/auth/useSiweAuth.js";
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModalInline.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModalInline.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { Cross2Icon } from "@radix-ui/react-icons";
 import { useConnectUI } from "../../../../core/hooks/others/useWalletConnectionCtx.js";
 import { WalletUIStatesProvider } from "../../../providers/wallet-ui-states-provider.js";
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModalSkeleton.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectModalSkeleton.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { Container, noScrollBar } from "../../components/basic.js";
 import { useCustomTheme } from "../../design-system/CustomThemeProvider.js";
 import { StyledDiv } from "../../design-system/elements.js";
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/InjectedConnectUI.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/InjectedConnectUI.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { InjectedSupportedWalletIds } from "../../../../../wallets/__generated__/wallet-ids.js";
 import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/SmartWalletConnectUI.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/SmartWalletConnectUI.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/TOS.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/TOS.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { useConnectUI } from "../../../../core/hooks/others/useWalletConnectionCtx.js";
 import { Container } from "../../components/basic.js";
 import { Link } from "../../components/text.js";
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/screen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/screen.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { createContext, useContext, useEffect, useRef, useState } from "react";
 import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
 import { useConnectUI } from "../../../../core/hooks/others/useWalletConnectionCtx.js";
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/NetworkSelector.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/NetworkSelector.tsx
@@ -1,3 +1,4 @@
+"use client";
 import styled from "@emotion/styled";
 import { CrossCircledIcon, MagnifyingGlassIcon } from "@radix-ui/react-icons";
 import Fuse from "fuse.js";
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletEntryButton.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { getInstalledWalletProviders } from "../../../../wallets/injected/mipdStore.js";
 import type { WalletId } from "../../../../wallets/wallet-types.js";
 // import { localWalletMetadata } from "../../../../wallets/local/index._ts";
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { ChevronLeftIcon } from "@radix-ui/react-icons";
 import { Suspense, lazy, useEffect, useRef, useState } from "react";
 import type { InjectedSupportedWalletIds } from "../../../../wallets/__generated__/wallet-ids.js";
diff --git a/packages/thirdweb/src/react/web/ui/MediaRenderer/MediaRenderer.tsx b/packages/thirdweb/src/react/web/ui/MediaRenderer/MediaRenderer.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React, { useState, useRef, useEffect, Suspense, lazy } from "react";
 import {
   CarbonDocumentAudio,
diff --git a/packages/thirdweb/src/react/web/ui/TransactionButton/index.tsx b/packages/thirdweb/src/react/web/ui/TransactionButton/index.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { useState } from "react";
 import type { GaslessOptions } from "../../../../transaction/actions/gasless/types.js";
 import {
diff --git a/packages/thirdweb/src/react/web/ui/components/CopyIcon.tsx b/packages/thirdweb/src/react/web/ui/components/CopyIcon.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { CheckIcon, CopyIcon as CopyIconSVG } from "@radix-ui/react-icons";
 import { useClipboard } from "../hooks/useCopyClipboard.js";
 import { ToolTip } from "./Tooltip.js";
diff --git a/packages/thirdweb/src/react/web/ui/components/DragNDrop.tsx b/packages/thirdweb/src/react/web/ui/components/DragNDrop.tsx
@@ -1,3 +1,4 @@
+"use client";
 import styled from "@emotion/styled";
 import { UploadIcon } from "@radix-ui/react-icons";
 import { useState } from "react";
diff --git a/packages/thirdweb/src/react/web/ui/components/Drawer.tsx b/packages/thirdweb/src/react/web/ui/components/Drawer.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { keyframes } from "@emotion/react";
 import { Cross2Icon } from "@radix-ui/react-icons";
 import { forwardRef, useRef } from "react";
diff --git a/packages/thirdweb/src/react/web/ui/components/DynamicHeight.tsx b/packages/thirdweb/src/react/web/ui/components/DynamicHeight.tsx
@@ -1,3 +1,4 @@
+"use client";
 import type React from "react";
 import { useEffect, useRef, useState } from "react";
 
diff --git a/packages/thirdweb/src/react/web/ui/components/Img.tsx b/packages/thirdweb/src/react/web/ui/components/Img.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { useState } from "react";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { resolveScheme } from "../../../../utils/ipfs.js";
diff --git a/packages/thirdweb/src/react/web/ui/components/Modal.tsx b/packages/thirdweb/src/react/web/ui/components/Modal.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { keyframes } from "@emotion/react";
 import * as Dialog from "@radix-ui/react-dialog";
 import { FocusScope } from "@radix-ui/react-focus-scope";
diff --git a/packages/thirdweb/src/react/web/ui/components/OTPInput.tsx b/packages/thirdweb/src/react/web/ui/components/OTPInput.tsx
@@ -1,3 +1,4 @@
+"use client";
 import styled from "@emotion/styled";
 import { useEffect, useRef } from "react";
 import { useCustomTheme } from "../design-system/CustomThemeProvider.js";
diff --git a/packages/thirdweb/src/react/web/ui/components/Overlay.tsx b/packages/thirdweb/src/react/web/ui/components/Overlay.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { useCustomTheme } from "../design-system/CustomThemeProvider.js";
 import { fadeInAnimation } from "../design-system/animations.js";
 import { StyledDiv } from "../design-system/elements.js";
diff --git a/packages/thirdweb/src/react/web/ui/components/QRCode.tsx b/packages/thirdweb/src/react/web/ui/components/QRCode.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { keyframes } from "@emotion/react";
 import type React from "react";
 import { Suspense, lazy } from "react";
diff --git a/packages/thirdweb/src/react/web/ui/components/QRCode/QRCodeRenderer.tsx b/packages/thirdweb/src/react/web/ui/components/QRCode/QRCodeRenderer.tsx
@@ -1,3 +1,4 @@
+"use client";
 import type React from "react";
 import { type ReactElement, useMemo } from "react";
 import { encode } from "uqr";
diff --git a/packages/thirdweb/src/react/web/ui/components/Skeleton.tsx b/packages/thirdweb/src/react/web/ui/components/Skeleton.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { keyframes } from "@emotion/react";
 import { useCustomTheme } from "../design-system/CustomThemeProvider.js";
 import { StyledDiv } from "../design-system/elements.js";
diff --git a/packages/thirdweb/src/react/web/ui/components/Spinner.tsx b/packages/thirdweb/src/react/web/ui/components/Spinner.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { keyframes } from "@emotion/react";
 import { useCustomTheme } from "../design-system/CustomThemeProvider.js";
 import { StyledCircle, StyledSvg } from "../design-system/elements.js";
diff --git a/packages/thirdweb/src/react/web/ui/components/TextDivider.tsx b/packages/thirdweb/src/react/web/ui/components/TextDivider.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { useCustomTheme } from "../design-system/CustomThemeProvider.js";
 import { StyledDiv } from "../design-system/elements.js";
 import { fontSize, spacing } from "../design-system/index.js";
diff --git a/packages/thirdweb/src/react/web/ui/components/TokenIcon.tsx b/packages/thirdweb/src/react/web/ui/components/TokenIcon.tsx
@@ -1,3 +1,4 @@
+"use client";
 import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { useChainQuery } from "../../../core/hooks/others/useChainQuery.js";
diff --git a/packages/thirdweb/src/react/web/ui/components/Tooltip.tsx b/packages/thirdweb/src/react/web/ui/components/Tooltip.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { keyframes } from "@emotion/react";
 import styled from "@emotion/styled";
 import * as RadixTooltip from "@radix-ui/react-tooltip";
diff --git a/packages/thirdweb/src/react/web/ui/components/WalletImage.tsx b/packages/thirdweb/src/react/web/ui/components/WalletImage.tsx
@@ -1,3 +1,4 @@
+"use client";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { getInstalledWalletProviders } from "../../../../wallets/injected/mipdStore.js";
 import type { WalletId } from "../../../../wallets/wallet-types.js";
diff --git a/packages/thirdweb/src/react/web/ui/components/basic.tsx b/packages/thirdweb/src/react/web/ui/components/basic.tsx
@@ -1,3 +1,4 @@
+"use client";
 import type { CSSObject } from "@emotion/react";
 import { useCustomTheme } from "../design-system/CustomThemeProvider.js";
 import {
diff --git a/packages/thirdweb/src/react/web/ui/components/buttons.tsx b/packages/thirdweb/src/react/web/ui/components/buttons.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { useCustomTheme } from "../design-system/CustomThemeProvider.js";
 import { StyledButton } from "../design-system/elements.js";
 import {
diff --git a/packages/thirdweb/src/react/web/ui/components/formElements.tsx b/packages/thirdweb/src/react/web/ui/components/formElements.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { useCustomTheme } from "../design-system/CustomThemeProvider.js";
 import {
   StyledDiv,
diff --git a/packages/thirdweb/src/react/web/ui/components/modalElements.tsx b/packages/thirdweb/src/react/web/ui/components/modalElements.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { ChevronLeftIcon } from "@radix-ui/react-icons";
 import { useCustomTheme } from "../design-system/CustomThemeProvider.js";
 import { StyledH2 } from "../design-system/elements.js";
diff --git a/packages/thirdweb/src/react/web/ui/components/text.tsx b/packages/thirdweb/src/react/web/ui/components/text.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { useCustomTheme } from "../design-system/CustomThemeProvider.js";
 import { StyledAnchor, StyledSpan } from "../design-system/elements.js";
 import { type Theme, fontSize } from "../design-system/index.js";
diff --git a/packages/thirdweb/src/react/web/ui/components/token/TokenSymbol.tsx b/packages/thirdweb/src/react/web/ui/components/token/TokenSymbol.tsx
@@ -1,3 +1,4 @@
+"use client";
 import type { Chain } from "../../../../../chains/types.js";
 import { useChainQuery } from "../../../../core/hooks/others/useChainQuery.js";
 import {
diff --git a/packages/thirdweb/src/react/web/ui/design-system/CustomThemeProvider.tsx b/packages/thirdweb/src/react/web/ui/design-system/CustomThemeProvider.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { createContext, useContext } from "react";
 import { type Theme, darkThemeObj, lightThemeObj } from "./index.js";
 
diff --git a/packages/thirdweb/src/react/web/wallets/in-app/CountrySelector.tsx b/packages/thirdweb/src/react/web/wallets/in-app/CountrySelector.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { useQuery } from "@tanstack/react-query";
 import { useRef } from "react";
 import { useCustomTheme } from "../../ui/design-system/CustomThemeProvider.js";
diff --git a/packages/thirdweb/src/react/web/wallets/in-app/InAppWalletConnectUI.tsx b/packages/thirdweb/src/react/web/wallets/in-app/InAppWalletConnectUI.tsx
@@ -1,3 +1,4 @@
+"use client";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import { useSelectionData } from "../../providers/wallet-ui-states-provider.js";
 import { LoadingScreen } from "../shared/LoadingScreen.js";
diff --git a/packages/thirdweb/src/react/web/wallets/in-app/InAppWalletFormUI.tsx b/packages/thirdweb/src/react/web/wallets/in-app/InAppWalletFormUI.tsx
@@ -1,3 +1,4 @@
+"use client";
 import styled from "@emotion/styled";
 import { useCallback, useState } from "react";
 import type {
diff --git a/packages/thirdweb/src/react/web/wallets/in-app/InAppWalletOTPLoginUI.tsx b/packages/thirdweb/src/react/web/wallets/in-app/InAppWalletOTPLoginUI.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { preAuthenticate } from "../../../../wallets/in-app/core/authentication/index.js";
 import type { SendEmailOtpReturnType } from "../../../../wallets/in-app/implementations/index.js";
diff --git a/packages/thirdweb/src/react/web/wallets/in-app/InAppWalletSelectionUI.tsx b/packages/thirdweb/src/react/web/wallets/in-app/InAppWalletSelectionUI.tsx
@@ -1,3 +1,4 @@
+"use client";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import { useConnectUI } from "../../../core/hooks/others/useWalletConnectionCtx.js";
 import { useSetSelectionData } from "../../providers/wallet-ui-states-provider.js";
diff --git a/packages/thirdweb/src/react/web/wallets/in-app/InAppWalletSocialLogin.tsx b/packages/thirdweb/src/react/web/wallets/in-app/InAppWalletSocialLogin.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { useEffect, useRef, useState } from "react";
 import type { InAppWalletSocialAuth } from "../../../../wallets/in-app/core/wallet/index.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
diff --git a/packages/thirdweb/src/react/web/wallets/in-app/InputSelectionUI.tsx b/packages/thirdweb/src/react/web/wallets/in-app/InputSelectionUI.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { useState } from "react";
 import { Spacer } from "../../ui/components/Spacer.js";
 import { Button } from "../../ui/components/buttons.js";
diff --git a/packages/thirdweb/src/react/web/wallets/in-app/LinkButton.tsx b/packages/thirdweb/src/react/web/wallets/in-app/LinkButton.tsx
@@ -1,3 +1,4 @@
+"use client";
 import { useCustomTheme } from "../../ui/design-system/CustomThemeProvider.js";
 import { StyledButton } from "../../ui/design-system/elements.js";
 import { fontSize } from "../../ui/design-system/index.js";

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+"use client";`
`1`	`2`	`import { createContext } from "react";`
`2`	`3`
`3`	`4`	`export const SetRootElementContext = createContext<`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+"use client";`
`1`	`2`	`import { QueryClient, QueryClientProvider } from "@tanstack/react-query";`
`2`	`3`	`import { useState } from "react";`
`3`	`4`	`import {`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+"use client";`
`1`	`2`	`import { createContext, useContext, useState } from "react";`
`2`	`3`	`import { CustomThemeProvider } from "../ui/design-system/CustomThemeProvider.js";`
`3`	`4`	`import type { Theme } from "../ui/design-system/index.js";`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+"use client";`
	`2`	`+`
`1`	`3`	`import styled from "@emotion/styled";`
`2`	`4`	`import { useEffect, useMemo, useState } from "react";`
`3`	`5`	`import { useSiweAuth } from "../../../core/hooks/auth/useSiweAuth.js";`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+"use client";`
`1`	`2`	`import { Suspense, lazy, useEffect, useState } from "react";`
`2`	`3`	`import type {`
`3`	`4`	`InjectedSupportedWalletIds,`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+"use client";`
`1`	`2`	`import { useEffect, useMemo } from "react";`
`2`	`3`	`import type { Chain } from "../../../../../chains/types.js";`
`3`	`4`	`import type { ThirdwebClient } from "../../../../../client/client.js";`