add a bit of documentation around ui components

Author: jnsdls

packages/thirdweb-react/docs/react.connectwallet.md

@@ -4,8 +4,31 @@
 
 ## ConnectWallet variable
 
+> This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
+A component that allows the user to connect their wallet.
+
+The button has to be wrapped in a `ThirdwebProvider` in order to function.
+
 <b>Signature:</b>
 
 ```typescript
 ConnectWallet: React.FC<ConnectWalletProps>
 ```
+
+## Example
+
+
+```javascript
+import { ConnectWallet } from '@thirdweb-dev/react';
+
+const App = () => {
+ return (
+  <div>
+    <ConnectWallet />
+  </div>
+)
+}
+```
+

packages/thirdweb-react/docs/react.md

@@ -156,12 +156,12 @@ import { useWalletConnect } from "@thirdweb-dev/react"
 
 |  Variable | Description |
 |  --- | --- |
-|  [ConnectWallet](./react.connectwallet.md) |  |
+|  [ConnectWallet](./react.connectwallet.md) | <p><b><i>(BETA)</i></b> A component that allows the user to connect their wallet.</p><p>The button has to be wrapped in a <code>ThirdwebProvider</code> in order to function.</p> |
 |  [MediaRenderer](./react.mediarenderer.md) | <p>This component can be used to render any media type, including image, audio, video, and html files. Its convenient for rendering NFT media files, as these can be a variety of different types. The component falls back to a external link if the media type is not supported.</p><p>Props: [MediaRendererProps](./react.mediarendererprops.md)</p> |
 |  [ThirdwebNftMedia](./react.thirdwebnftmedia.md) | <b><i>(BETA)</i></b> |
 |  [ThirdwebProvider](./react.thirdwebprovider.md) | The <code>&lt;ThirdwebProvider /&gt;</code> component lets you control what networks you want users to connect to, what types of wallets can connect to your app, and the settings for the \[Typescript SDK\](https://docs.thirdweb.com/typescript). |
 |  [ThirdwebSDKProvider](./react.thirdwebsdkprovider.md) | <p><b><i>(BETA)</i></b> A barebones wrapper around the Thirdweb SDK.</p><p>You can use this in order to be able to pass a provider &amp; signer directly to the SDK.</p> |
-|  [Web3Button](./react.web3button.md) |  |
+|  [Web3Button](./react.web3button.md) | <p><b><i>(BETA)</i></b> A component that allows the user to call an on-chain function on a contract.</p><p>The button has to be wrapped in a <code>ThirdwebProvider</code> in order to function.</p> |
 
 ## Type Aliases
 

packages/thirdweb-react/docs/react.web3button.md

@@ -4,8 +4,31 @@
 
 ## Web3Button variable
 
+> This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.
+> 
+
+A component that allows the user to call an on-chain function on a contract.
+
+The button has to be wrapped in a `ThirdwebProvider` in order to function.
+
 <b>Signature:</b>
 
 ```typescript
 Web3Button: React.FC<PropsWithChildren<Web3ButtonProps>>
 ```
+
+## Example
+
+
+```javascript
+import { Web3Button } from '@thirdweb-dev/react';
+
+const App = () => {
+ return (
+  <div>
+    <Web3Button contractAddress="0x..." functionName="mint" />
+  </div>
+)
+}
+```
+

packages/thirdweb-react/etc/react.api.md

@@ -153,7 +153,7 @@ export type ClaimTokenParams = {
 
 // Warning: (ae-forgotten-export) The symbol "ConnectWalletProps" needs to be exported by the entry point thirdweb-dev-react.cjs.d.ts
 //
-// @public (undocumented)
+// @beta
 export const ConnectWallet: React_2.FC<ConnectWalletProps>;
 
 // @beta
@@ -1847,7 +1847,7 @@ export type WalletLinkConnectorType = "walletLink" | "coinbase" | {
 
 // Warning: (ae-forgotten-export) The symbol "Web3ButtonProps" needs to be exported by the entry point thirdweb-dev-react.cjs.d.ts
 //
-// @public (undocumented)
+// @beta
 export const Web3Button: React.FC<PropsWithChildren<Web3ButtonProps>>;
 
 // Warnings were encountered during analysis:

packages/thirdweb-react/src/components/ConnectWallet/index.tsx

@@ -86,6 +86,27 @@ const chainIdToCurrencyMap: Record<
   [ChainId.Mumbai]: "polygon",
 };
 
+/**
+ * A component that allows the user to connect their wallet.
+ *
+ * The button has to be wrapped in a `ThirdwebProvider` in order to function.
+ *
+ * @example
+ * ```javascript
+ * import { ConnectWallet } from '@thirdweb-dev/react';
+ *
+ * const App = () => {
+ *  return (
+ *   <div>
+ *     <ConnectWallet />
+ *   </div>
+ * )
+ * }
+ * ```
+ *
+ *
+ * @beta
+ */
 export const ConnectWallet: React.FC<ConnectWalletProps> = ({
   ...themeProps
 }) => {

packages/thirdweb-react/src/components/Web3Button/index.tsx

@@ -25,6 +25,27 @@ interface Web3ButtonProps extends ThemeProviderProps {
   isDisabled?: boolean;
 }
 
+/**
+ * A component that allows the user to call an on-chain function on a contract.
+ *
+ * The button has to be wrapped in a `ThirdwebProvider` in order to function.
+ *
+ * @example
+ * ```javascript
+ * import { Web3Button } from '@thirdweb-dev/react';
+ *
+ * const App = () => {
+ *  return (
+ *   <div>
+ *     <Web3Button contractAddress="0x..." functionName="mint" />
+ *   </div>
+ * )
+ * }
+ * ```
+ *
+ *
+ * @beta
+ */
 export const Web3Button: React.FC<PropsWithChildren<Web3ButtonProps>> = ({
   contractAddress,
   functionName,