From 669dd669c4373296d7bd0bf31c8dd9273ae1c922 Mon Sep 17 00:00:00 2001 From: greg Date: Thu, 25 Apr 2024 19:11:47 -0700 Subject: [PATCH] Miscellaneous fixes (#368) --- src/app/typescript/v5/react/ThirdwebProvider/page.mdx | 8 ++++++++ .../typescript/v5/react/components/ConnectButton/page.mdx | 6 ++++++ .../v5/react/components/TransactionButton/page.mdx | 8 ++++---- src/app/typescript/v5/react/connecting-wallets/page.mdx | 2 +- src/app/typescript/v5/react/page.mdx | 2 ++ 5 files changed, 21 insertions(+), 5 deletions(-) diff --git a/src/app/typescript/v5/react/ThirdwebProvider/page.mdx b/src/app/typescript/v5/react/ThirdwebProvider/page.mdx index 60e0d968..1a469339 100644 --- a/src/app/typescript/v5/react/ThirdwebProvider/page.mdx +++ b/src/app/typescript/v5/react/ThirdwebProvider/page.mdx @@ -9,6 +9,14 @@ export const metadata = createMetadata({ `ThirdwebProvider` is a light-weight component that sets up React Query context for thirdweb SDK hooks. + + + ThirdwebProvider uses context and does not currently support server-side rendering. + + If you're using a framework like Next.js, you'll need to opt-out of SSR with "use client" or whatever your framework of choice supports. + + + ```tsx import { ThirdwebProvider } from "thirdweb/react"; diff --git a/src/app/typescript/v5/react/components/ConnectButton/page.mdx b/src/app/typescript/v5/react/components/ConnectButton/page.mdx index 6ea1deb7..98a18970 100644 --- a/src/app/typescript/v5/react/components/ConnectButton/page.mdx +++ b/src/app/typescript/v5/react/components/ConnectButton/page.mdx @@ -41,6 +41,12 @@ To mark a wallet as `Recommended`, pass in the `recommended: true` property in t Refer to [Props](#props) to see all the available configuration options + + + This example uses [In-App Wallets](/connect/in-app-wallet/overview), a special type of wallet that allows users to connect to your app using email, social logins, or other custom forms of authentication. + + + ```tsx import { ConnectButton } from "thirdweb/react"; import { createWallet, inAppWallet } from "thirdweb/wallets"; diff --git a/src/app/typescript/v5/react/components/TransactionButton/page.mdx b/src/app/typescript/v5/react/components/TransactionButton/page.mdx index 039eebe3..68084ae3 100644 --- a/src/app/typescript/v5/react/components/TransactionButton/page.mdx +++ b/src/app/typescript/v5/react/components/TransactionButton/page.mdx @@ -39,16 +39,16 @@ function Example() { contract, method: "mint", params: [address, amount], - }) + }); return tx; }} - onTransactionSent={(result) => + onTransactionSent={(result) => { console.log("Transaction submitted", result.transactionHash); }} - onTransactionConfirmed={(receipt) => + onTransactionConfirmed={(receipt) => { console.log("Transaction confirmed", receipt.transactionHash); }} - onError={(error) => + onError={(error) => { console.error("Transaction error", error); }} > diff --git a/src/app/typescript/v5/react/connecting-wallets/page.mdx b/src/app/typescript/v5/react/connecting-wallets/page.mdx index e6bfd724..bc9d9fb2 100644 --- a/src/app/typescript/v5/react/connecting-wallets/page.mdx +++ b/src/app/typescript/v5/react/connecting-wallets/page.mdx @@ -30,7 +30,7 @@ The SDK supports 350+ wallets out of the box, all you need to pass is their id. ## Using Components -You can use [`ConnectButton`](/typescript/v5/react/components/ConnectButton) or [`ConnectEmbed`](/typescript/v5/react/components/ConnectButton) component for a quick, easy and customizable UI. +You can use [`ConnectButton`](/typescript/v5/react/components/ConnectButton) or [`ConnectEmbed`](/typescript/v5/react/components/ConnectEmbed) component for a quick, easy and customizable UI. These components provide a beautiful UI for connecting various wallets and take care of a lot of wallet-specific edge cases - so you can focus on building your app. diff --git a/src/app/typescript/v5/react/page.mdx b/src/app/typescript/v5/react/page.mdx index 2c2a4c39..d43564c2 100644 --- a/src/app/typescript/v5/react/page.mdx +++ b/src/app/typescript/v5/react/page.mdx @@ -18,6 +18,8 @@ import { ## Get Started +Many of the components and hooks in the React SDK use a [`client`](/typescript/v5/core/client) to interface with the core SDK and your private RPC endpoints. You'll need to create a `clientId` in the [Dashboard](https://thirdweb.com/create-api-key) to generate this client. +