From 6d3947ab0ccaa51937fc65294e78fe312765522d Mon Sep 17 00:00:00 2001 From: MananTank Date: Thu, 6 Feb 2025 20:10:27 +0000 Subject: [PATCH] [TOOL-3314] Playground: Fix Next.js errors in Headless UI example pages (#6175) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixed "Can not import server (async) components in client components" error --- ## PR-Codex overview This PR introduces new preview components for wallet, NFT, token, and account functionalities in the `playground-web` application. It enhances code modularity by separating previews into distinct files, improving readability and maintainability. ### Detailed summary - Added `wallet-previews.tsx` with previews for `WalletIcon`, `WalletName`, and formatting options. - Created `nft-previews.tsx` with previews for `NFTMedia`, `NFTName`, and `NFTDescription`. - Introduced `token-previews.tsx` with previews for `TokenIcon`, `TokenName`, and `TokenSymbol`. - Developed `account-previews.tsx` for `AccountAddress`, `AccountName`, and `AccountBalance` with various configurations. - Updated example files (`wallet-examples.tsx`, `nft-examples.tsx`, `token-examples.tsx`, `account-examples.tsx`) to utilize new preview components, enhancing code clarity. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` --- .../headless-ui/account-examples.tsx | 187 ++++-------------- .../headless-ui/account-previews.tsx | 168 ++++++++++++++++ .../components/headless-ui/nft-examples.tsx | 71 ++----- .../components/headless-ui/nft-previews.tsx | 71 +++++++ .../components/headless-ui/token-examples.tsx | 85 ++------ .../components/headless-ui/token-previews.tsx | 88 +++++++++ .../headless-ui/wallet-examples.tsx | 33 +--- .../headless-ui/wallet-previews.tsx | 33 ++++ 8 files changed, 430 insertions(+), 306 deletions(-) create mode 100644 apps/playground-web/src/components/headless-ui/account-previews.tsx create mode 100644 apps/playground-web/src/components/headless-ui/nft-previews.tsx create mode 100644 apps/playground-web/src/components/headless-ui/token-previews.tsx create mode 100644 apps/playground-web/src/components/headless-ui/wallet-previews.tsx diff --git a/apps/playground-web/src/components/headless-ui/account-examples.tsx b/apps/playground-web/src/components/headless-ui/account-examples.tsx index f19bf9b9345..33273c77e69 100644 --- a/apps/playground-web/src/components/headless-ui/account-examples.tsx +++ b/apps/playground-web/src/components/headless-ui/account-examples.tsx @@ -1,20 +1,17 @@ -"use client"; - -import { THIRDWEB_CLIENT } from "@/lib/client"; -import { ethereum } from "thirdweb/chains"; -import { - AccountAddress, - AccountAvatar, - AccountBalance, - type AccountBalanceInfo, - AccountBlobbie, - AccountName, - AccountProvider, -} from "thirdweb/react"; -import { shortenAddress } from "thirdweb/utils"; import { CodeExample } from "../code/code-example"; - -const vitalikAddress = "0xd8da6bf26964af9d7eed9e03e53415d37aa96045"; +import { + AccountAddressBasicPreview, + AccountAddressFormatPreview, + AccountAvatarBasicPreview, + AccountBalanceBasicPreview, + AccountBalanceCustomTokenPreview, + AccountBalanceFormatPreview, + AccountBalanceUSDPreview, + AccountBlobbieBasicPreview, + AccountNameBasicPreview, + AccountNameCustomPreview, + ConnectDetailsButtonClonePreview, +} from "./account-previews"; /** * Show full wallet address with AccountAddress @@ -32,11 +29,7 @@ export function AccountAddressBasic() { - - - } + preview={} code={`import { AccountProvider, AccountAddress } from "thirdweb/react"; function App() { @@ -63,11 +56,7 @@ export function AccountAddressFormat() { - - - } + preview={} code={`import { AccountProvider, AccountAddress } from "thirdweb/react"; import { shortenAddress } from "thirdweb/utils"; @@ -98,11 +87,7 @@ export function AccountNameBasic() { - Loading...} /> - - } + preview={} code={`import { AccountProvider, AccountName } from "thirdweb/react"; function App() { @@ -126,14 +111,7 @@ export function AccountNameCustom() { - Loading...} - /> - - } + preview={} code={`import { AccountProvider, AccountName } from "thirdweb/react"; function App() { @@ -164,21 +142,14 @@ export function AccountBalanceBasic() { - Loading...} - /> - - } + preview={} code={`import { AccountProvider, AccountAddress } from "thirdweb/react"; import { shortenAddress } from "thirdweb/utils"; function App() { return - Loading...} /> @@ -202,15 +173,7 @@ export function AccountBalanceCustomToken() { - Loading...} - /> - - } + preview={} code={`import { AccountProvider, AccountAddress } from "thirdweb/react"; import { shortenAddress } from "thirdweb/utils"; @@ -218,9 +181,9 @@ const USDC_ETHEREUM = "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48"; function App() { return - Loading...} /> @@ -244,23 +207,13 @@ export function AccountBalanceFormat() { - - `${Math.ceil(props.balance * 1000) / 1000} ${props.symbol}` - } - loadingComponent={Loading...} - /> - - } + preview={} code={`import { AccountProvider, AccountAddress, type AccountBalanceFormatParams } from "thirdweb/react"; function App() { return - Loading...} formatFn={(props: AccountBalanceInfo) => \`\${Math.ceil(props.balance * 1000) / 1000} \${props.symbol}\`} /> @@ -284,23 +237,15 @@ export function AccountBalanceUSD() { - Loading...} - /> - - } + preview={} code={`import { AccountProvider, AccountAddress } from "thirdweb/react"; function App() { return ( - Loading...} /> @@ -328,14 +273,7 @@ export function AccountAvatarBasic() { - Loading...} - /> - - } + preview={} code={`import { AccountProvider, AccountAvatar } from "thirdweb/react"; function App() { @@ -362,11 +300,7 @@ export function AccountBlobbieBasic() { - - - } + preview={} code={`import { AccountProvider, AccountBlobbie } from "thirdweb/react"; function App() { @@ -394,58 +328,7 @@ export function ConnectDetailsButtonClone() { - - - } + preview={} code={`import { AccountProvider, AccountAvatar, AccountName, AccountBalance, AccountAddress, AccountBlobbie } from "thirdweb/react"; function App() { @@ -499,7 +382,7 @@ function App() { - + ) }`} lang="tsx" diff --git a/apps/playground-web/src/components/headless-ui/account-previews.tsx b/apps/playground-web/src/components/headless-ui/account-previews.tsx new file mode 100644 index 00000000000..67da67c00b8 --- /dev/null +++ b/apps/playground-web/src/components/headless-ui/account-previews.tsx @@ -0,0 +1,168 @@ +"use client"; + +import { THIRDWEB_CLIENT } from "@/lib/client"; +import { ethereum } from "thirdweb/chains"; +import { + AccountAddress, + AccountAvatar, + AccountBalance, + type AccountBalanceInfo, + AccountBlobbie, + AccountName, + AccountProvider, +} from "thirdweb/react"; +import { shortenAddress } from "thirdweb/utils"; + +const vitalikAddress = "0xd8da6bf26964af9d7eed9e03e53415d37aa96045"; + +export function AccountAddressBasicPreview() { + return ( + + + + ); +} + +export function AccountAddressFormatPreview() { + return ( + + + + ); +} + +export function AccountNameBasicPreview() { + return ( + + Loading...} /> + + ); +} + +export function AccountNameCustomPreview() { + return ( + + Loading...} + /> + + ); +} + +export function AccountBalanceBasicPreview() { + return ( + + Loading...} + /> + + ); +} + +export function AccountBalanceCustomTokenPreview() { + return ( + + Loading...} + /> + + ); +} + +export function AccountBalanceFormatPreview() { + return ( + + + `${Math.ceil(props.balance * 1000) / 1000} ${props.symbol}` + } + loadingComponent={Loading...} + /> + + ); +} + +export function AccountBalanceUSDPreview() { + return ( + + Loading...} + /> + + ); +} + +export function AccountAvatarBasicPreview() { + return ( + + Loading...} + /> + + ); +} + +export function AccountBlobbieBasicPreview() { + return ( + + + + ); +} + +export function ConnectDetailsButtonClonePreview() { + return ( + + + + ); +} diff --git a/apps/playground-web/src/components/headless-ui/nft-examples.tsx b/apps/playground-web/src/components/headless-ui/nft-examples.tsx index dcb549d2297..40622981b1c 100644 --- a/apps/playground-web/src/components/headless-ui/nft-examples.tsx +++ b/apps/playground-web/src/components/headless-ui/nft-examples.tsx @@ -1,16 +1,11 @@ -"use client"; - -import { THIRDWEB_CLIENT } from "@/lib/client"; -import { getContract } from "thirdweb"; -import { ethereum } from "thirdweb/chains"; -import { NFTDescription, NFTMedia, NFTName, NFTProvider } from "thirdweb/react"; import { CodeExample } from "../code/code-example"; - -const nftContract = getContract({ - address: "0xbd3531da5cf5857e7cfaa92426877b022e612cf8", - chain: ethereum, - client: THIRDWEB_CLIENT, -}); +import { + NftCardDemoPreview, + NftDescriptionBasicPreview, + NftMediaBasicPreview, + NftMediaOverridePreview, + NftNameBasicPreview, +} from "./nft-previews"; export function NftMediaBasic() { return ( @@ -25,14 +20,7 @@ export function NftMediaBasic() { - Loading...} - /> - - } + preview={} code={`import { NFTProvider, NFTMedia } from "thirdweb/react"; function App() { @@ -60,18 +48,7 @@ export function NftMediaOverride() { - - - } + preview={} code={`import { NFTProvider, NFTMedia } from "thirdweb/react"; function App() { @@ -104,11 +81,7 @@ export function NftNameBasic() { - Loading...} /> - - } + preview={} code={`import { NFTProvider, NFTName } from "thirdweb/react"; function App() { @@ -135,14 +108,7 @@ export function NftDescriptionBasic() { - Loading...} - /> - - } + preview={} code={`import { NFTProvider, NFTDescription } from "thirdweb/react"; function App() { @@ -170,24 +136,13 @@ export function NftCardDemo() { -
- - - Loading...} - /> -
- - } + preview={} code={`import { NFTProvider, NFTDescription, NFTName, NFTMedia } from "thirdweb/react"; function App() { return ( -
+
+ Loading...} + /> + + ); +} + +export function NftMediaOverridePreview() { + return ( + + + + ); +} + +export function NftNameBasicPreview() { + return ( + + Loading...} /> + + ); +} + +export function NftDescriptionBasicPreview() { + return ( + + Loading...} + /> + + ); +} + +export function NftCardDemoPreview() { + return ( + +
+ + + Loading...} + /> +
+ + ); +} diff --git a/apps/playground-web/src/components/headless-ui/token-examples.tsx b/apps/playground-web/src/components/headless-ui/token-examples.tsx index 06ea9ad4a52..9203f7e62a1 100644 --- a/apps/playground-web/src/components/headless-ui/token-examples.tsx +++ b/apps/playground-web/src/components/headless-ui/token-examples.tsx @@ -1,17 +1,11 @@ -"use client"; - -import { THIRDWEB_CLIENT } from "@/lib/client"; -import { NATIVE_TOKEN_ADDRESS } from "thirdweb"; -import { ethereum } from "thirdweb/chains"; -import { - TokenIcon, - TokenName, - TokenProvider, - TokenSymbol, -} from "thirdweb/react"; import { CodeExample } from "../code/code-example"; - -const USDC_ADDRESS = "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48"; +import { + TokenCardPreview, + TokenImageBasicPreview, + TokenImageOverridePreview, + TokenNameBasicPreview, + TokenSymbolBasicPreview, +} from "./token-previews"; export function TokenImageBasic() { return ( @@ -26,15 +20,7 @@ export function TokenImageBasic() {
- - - } + preview={} code={`import { TokenProvider, TokenIcon } from "thirdweb/react"; function App() { @@ -68,18 +54,7 @@ export function TokenImageOverride() {
- - - } + preview={} code={`import { TokenProvider, TokenIcon } from "thirdweb/react"; function App() { @@ -114,15 +89,7 @@ export function TokenNameBasic() { - Loading...} /> - - } + preview={} code={`import { TokenProvider, TokenName } from "thirdweb/react"; function App() { @@ -153,15 +120,7 @@ export function TokenSymbolBasic() { - Loading...} /> - - } + preview={} code={`import { TokenProvider, TokenSymbol } from "thirdweb/react"; function App() { @@ -194,27 +153,7 @@ export function TokenCard() { -
- -
- Loading...} - /> - Loading...} - /> -
-
- - } + preview={} code={`import { TokenProvider, TokenSymbol } from "thirdweb/react"; function App() { diff --git a/apps/playground-web/src/components/headless-ui/token-previews.tsx b/apps/playground-web/src/components/headless-ui/token-previews.tsx new file mode 100644 index 00000000000..933d41f6b97 --- /dev/null +++ b/apps/playground-web/src/components/headless-ui/token-previews.tsx @@ -0,0 +1,88 @@ +"use client"; + +import { THIRDWEB_CLIENT } from "@/lib/client"; +import { NATIVE_TOKEN_ADDRESS } from "thirdweb"; +import { ethereum } from "thirdweb/chains"; +import { + TokenIcon, + TokenName, + TokenProvider, + TokenSymbol, +} from "thirdweb/react"; + +const USDC_ADDRESS = "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48"; + +export function TokenImageBasicPreview() { + return ( + + + + ); +} + +export function TokenImageOverridePreview() { + return ( + + + + ); +} + +export function TokenNameBasicPreview() { + return ( + + Loading...} /> + + ); +} + +export function TokenSymbolBasicPreview() { + return ( + + Loading...} /> + + ); +} + +export function TokenCardPreview() { + return ( + +
+ +
+ Loading...} + /> + Loading...} + /> +
+
+ + ); +} diff --git a/apps/playground-web/src/components/headless-ui/wallet-examples.tsx b/apps/playground-web/src/components/headless-ui/wallet-examples.tsx index c91788eae2d..df3e4d30a52 100644 --- a/apps/playground-web/src/components/headless-ui/wallet-examples.tsx +++ b/apps/playground-web/src/components/headless-ui/wallet-examples.tsx @@ -1,7 +1,9 @@ -"use client"; - -import { WalletIcon, WalletName, WalletProvider } from "thirdweb/react"; import { CodeExample } from "../code/code-example"; +import { + WalletIconBasicPreview, + WalletNameBasicPreview, + WalletNameFormatPreview, +} from "./wallet-previews"; export function WalletIconBasic() { return ( @@ -16,14 +18,7 @@ export function WalletIconBasic() { - Loading...} - /> - - } + preview={} code={`import { WalletProvider, WalletIcon } from "thirdweb/react"; function App() { @@ -55,11 +50,7 @@ export function WalletNameBasic() { - Loading...} /> - - } + preview={} code={`import { WalletProvider, WalletName } from "thirdweb/react"; function App() { @@ -85,18 +76,14 @@ export function WalletNameFormat() { - `${str} Wallet`} /> - - } + preview={} code={`import { WalletProvider, WalletName } from "thirdweb/react"; function App() { return ( - Loading...} + Loading...} formatFn={(str: string) => \`\${str} Wallet\`} /> diff --git a/apps/playground-web/src/components/headless-ui/wallet-previews.tsx b/apps/playground-web/src/components/headless-ui/wallet-previews.tsx new file mode 100644 index 00000000000..bedcb692906 --- /dev/null +++ b/apps/playground-web/src/components/headless-ui/wallet-previews.tsx @@ -0,0 +1,33 @@ +"use client"; + +import { WalletIcon, WalletName, WalletProvider } from "thirdweb/react"; + +export function WalletIconBasicPreview() { + return ( + + Loading...} + /> + + ); +} + +export function WalletNameBasicPreview() { + return ( + + Loading...} /> + + ); +} + +export function WalletNameFormatPreview() { + return ( + + `${str} Wallet`} + loadingComponent={Loading...} + /> + + ); +}