From da08bec7735ff42a62b36365547a49ca29e00089 Mon Sep 17 00:00:00 2001 From: Manan Tank Date: Tue, 13 Feb 2024 23:40:10 +0530 Subject: [PATCH] react: JSDoc improvements --- packages/thirdweb/src/react/index.tsx | 8 +- .../src/react/providers/thirdweb-provider.tsx | 161 ++++++++++++++++-- 2 files changed, 154 insertions(+), 15 deletions(-) diff --git a/packages/thirdweb/src/react/index.tsx b/packages/thirdweb/src/react/index.tsx index 5b88bd0148c..3bc18d00217 100644 --- a/packages/thirdweb/src/react/index.tsx +++ b/packages/thirdweb/src/react/index.tsx @@ -1,4 +1,5 @@ export { darkTheme, lightTheme } from "./ui/design-system/index.js"; +export type { Theme, ThemeOverrides } from "./ui/design-system/index.js"; export { ConnectWallet } from "./ui/ConnectWallet/ConnectWallet.js"; export { ConnectEmbed } from "./ui/ConnectWallet/Modal/ConnectEmbed.js"; @@ -10,13 +11,15 @@ export type { ConnectWallet_DetailsButtonOptions, ConnectWallet_DetailsModalOptions, } from "./ui/ConnectWallet/ConnectWalletProps.js"; +export type { WelcomeScreen } from "./ui/ConnectWallet/screens/types.js"; +export type { NetworkSelectorProps } from "./ui/ConnectWallet/NetworkSelector.js";} export { TransactionButton, type TransactionButtonProps, } from "./ui/TransactionButton/index.js"; -export { ThirdwebProvider } from "./providers/thirdweb-provider.js"; +export { ThirdwebProvider, type ThirdwebProviderProps } from "./providers/thirdweb-provider.js"; export { useSetActiveAccount, @@ -54,3 +57,6 @@ export { coinbaseConfig } from "./wallets/coinbase/coinbaseConfig.js"; export { rainbowConfig } from "./wallets/rainbow/rainbowConfig.js"; export { walletConnectConfig } from "./wallets/walletConnect/walletConnectConfig.js"; export { zerionConfig } from "./wallets/zerion/zerionConfig.js"; + +export type { SupportedTokens } from "./ui/ConnectWallet/defaultTokens.js"; +export { defaultTokens } from "./ui/ConnectWallet/defaultTokens.js"; diff --git a/packages/thirdweb/src/react/providers/thirdweb-provider.tsx b/packages/thirdweb/src/react/providers/thirdweb-provider.tsx index cbcc8f771d6..9fa67ac3d0e 100644 --- a/packages/thirdweb/src/react/providers/thirdweb-provider.tsx +++ b/packages/thirdweb/src/react/providers/thirdweb-provider.tsx @@ -25,27 +25,30 @@ import { import { getChainIdFromChain } from "../../chain/index.js"; import type { DAppMetaData } from "../../wallets/types.js"; -export type ThirdwebProviderProps = { - children?: React.ReactNode; - wallets?: WalletConfig[]; - autoConnect?: boolean; - client: ThirdwebClient; - locale?: ThirdwebLocale; - dappMetadata?: DAppMetaData; -}; - /** - * The ThirdwebProvider is the root component for all Thirdweb React apps. - * It sets up the React Query client and the WalletProvider. + * The ThirdwebProvider is component is a provider component that sets up the React Query client and Wallet Connection Manager. + * To you thirdweb React SDK's hooks and components, you have to wrap your App component in a ThirdwebProvider. + * + * `ThirdwebProvider` requires a `client` prop which you can create using the `createClient` function. You must provide a `clientId` or `secretKey` in order to initialize a `client`. + * You can create an Api key for free at from the [Thirdweb Dashboard](https://thirdweb.com/create-api-key). * @param props - The props for the ThirdwebProvider * @returns Your app wrapped in the ThirdwebProvider * @example * ```jsx + * import { createClient } from "thirdweb"; * import { ThirdwebProvider } from "thirdweb/react"; * - * - * - * + * const client = createClient({ + * clientId: "", + * }) + * + * function Example() { + * return ( + * + * + * + * ) + * } * ``` */ export function ThirdwebProvider(props: ThirdwebProviderProps) { @@ -120,3 +123,133 @@ export function ThirdwebProvider(props: ThirdwebProviderProps) { ); } + +export type ThirdwebProviderProps = { + /** + * A client is the entry point to the thirdweb SDK. It is required for all other actions. You can create a client using the `createClient` function + * + * You must provide a `clientId` or `secretKey` in order to initialize a client. Pass `clientId` if you want for client-side usage and `secretKey` for server-side usage. + * + * ```tsx + * import { createClient } from "thirdweb"; + * + * const client = createClient({ + * clientId: "", + * }) + * ``` + */ + client: ThirdwebClient; + + /** + * Wrap component in ThirdwebProvider to use thirdweb hooks and components inside that component. + * @example + * ```tsx + * + * + * + * ``` + */ + children?: React.ReactNode; + /** + * Array of supported wallets. If not provided, default wallets will be used. + * + * Wallets provided here appear in the `ConnectWallet` Modal or in `ConnectEmbed` component's UI + * @example + * ```tsx + * import { metamaskConfig, coinbaseConfig, walletConnectConfig } from "thirdweb/react"; + * + * function Example() { + * return ( + * + * + * + * ) + * } + * ``` + */ + wallets?: WalletConfig[]; + + /** + * When the user has connected their wallet to your site, this flag determines whether or not you want to automatically connect to the last connected wallet when user visits your site again in the future. + * + * Defaults to `true` + */ + autoConnect?: boolean; + + /** + * locale object contains text used for all thirdweb components + * + * It allows you to change the language used in UI components or override the texts used in the UI + * + * React SDK comes out of the box with English (`en`), Spanish (`es`), Japanese (`js`) and Tagalog (`tl`) locale functions, but you can add support for any language you want just by passing an object with the required strings + * + * #### Using Built-in Locales + * + * ```tsx + * import { ThirdwebProvider, es } from "thirdweb/react"; + * + * const spanish = es(); + * + * function Example() { + * return ( + * + * + * + * ) + * } + * ``` + * + * ##### Overriding the locale + * + * ```tsx + * import { ThirdwebProvider, en } from "thirdweb/react"; + * + * // override some texts + * const english = en({ + * connectWallet: { + * confirmInWallet: "Confirm in your wallet", + * }, + * wallets: { + * metamaskWallet: { + * connectionScreen: { + * inProgress: "Awaiting Confirmation", + * instruction: "Accept connection request in your MetaMask wallet", + * }, + * }, + * }, + * }); + * + * function Example() { + * return ( + * + * + * + * ) + * } + * ``` + * + * #### Custom locale object + * + * ```tsx + * import { ThirdwebProvider } from "thirdweb/react"; + * + * function Example() { + * return ( + * + * + * + * ) + * } + * ``` + */ + locale?: ThirdwebLocale; + /** + * Metadata of the dApp that will be passed to connected wallet. Some wallets may display this information to the user. + */ + dappMetadata?: DAppMetaData; +};