Connect Wallet Docs

docs/onboarding/25 Connect Wallet/0 Overview.mdx

@@ -0,0 +1,72 @@
+---
+slug: /connect-wallet
+title: Overview
+hide_title: true
+---
+
+import QuickstartCard from "@components/QuickstartCard";
+
+# Connect Wallet
+
+Connect Wallet is an out-of-the-box UI solution for connecting users' wallets to web3 applications and games. With its customizable UI and extensive wallet options, this component allows for flexibility in supporting various wallet types including non-custodial, custodial, [smart wallets](/smart-wallet), and embedded wallets.
+
+## Features
+
+- **Simplified Onboarding**
+  - Simplifies wallet connection across gaming, web, and mobile platforms.
+  - Use embedded wallets with [smart wallets](/smart-wallet) to enable a seamless, gasless, “web2” style login experience. Use [local wallets](/wallet/local-wallet) in combination with [smart wallets](/smart-wallet) to build invisible wallet experiences. The button will automatically optimize the user experience for the configured wallet configuration. We can support the following types of logins:
+    - Email
+    - Sign in with socials (Google, Facebook, Apple, Twitter, Bitbucket, Github, Linkedin, Discord, Twitch, Microsoft)
+    - Phone number with embedded wallet
+    - Password
+    - No login (session keys) with local wallet
+    - "Checkout as guest" with local wallet: proceed without a login
+- **Simplified Developer Experience**: a complete and fully customizable component that can be easily integrated into your application. Infrastructure such as RPCs, storage and account abstraction infrastructure included out of the box - no need to rely on a third-party provider.
+- **Customizable Wallet Configuration**
+  - Support for 170+ popular wallet providers and various types of wallets, including non-custodial, custodial, ERC-4337 [smart wallets](/smart-wallet), and embedded (social and email) wallets.
+  - Build a custom wallet configurator or leverage our built-in options.
+  - Gasless and signless wallet experiences are supported by combining [smart wallet](/smart-wallet) with [local wallet](/wallet/local-wallet).
+  - Native [Safe](/wallet/safe) multi-sig functionality.
+- **Support for ERC-4337 smart wallets**: Easily use any wallet as a smart wallet signer by wrapping it in the `smartWallet()` configurator.
+- **Social and Email Wallets:** Web2 user flows, such as sign-in with Google, enabled by using the thirdweb Embedded Wallet.
+- **Customizable Branding**: Customize the button to fit your brand with an updatable logo, welcome screen and theme.
+- **Customizable Theme**: Ability to customize the theme, including creating a completely custom UI, configuration theme colors, modal or dropdown menu, modal size, the recommended wallets, the displayed token balance, add displaying terms of service links.
+- **Powerful Hooks**: Provide fine-grained control over how the component looks and behaves.
+- **Faucet Links**: By default, a recommended faucet is linked in the modal to allow your users to easily obtain funds.
+- **Multiple Languages Supported**
+  - Connect Wallet component available in [React](/react/react.connectwallet), [React-Native](/react-native/connectwallet), and [Unity](/unity/connectwallet).
+- **Composability**
+  - Customize the supported wallets in Connect Wallet or build a custom connector using the [Wallet SDK](/wallet/build-a-wallet) to integrate into Connect Wallet by building a configurator.
+- **Send, Receive & View Transactions**: functionality to send and receive funds & view your transaction history built in. This list of default tokens that can be sent is completely customizable.
+- **SIWE (Sign In With Ethereum Support)**: [Auth](/auth) is completely integrated into the button, all you need to do is pass `auth=true` and what message you want the user to sign
+
+![Connect Wallet](./assets/narrow-wide.png)
+
+## References
+
+<div className="row" style={{ marginBottom: 12, padding: 8, paddingTop: 0 }}>
+  <div className="col col--4" style={{ padding: 8 }}>
+    <QuickstartCard
+      name="React"
+      link="/react/react.connectwallet"
+      image="/assets/languages/react.png"
+      description="Using Connect Wallet in React apps."
+    />
+  </div>
+  <div className="col col--4" style={{ padding: 8 }}>
+    <QuickstartCard
+      name="React-Native"
+      link="/react-native/react-native.connectwallet"
+      image="/assets/languages/react-native.png"
+      description="Using Connect Wallet in mobile apps"
+    />
+  </div>
+  <div className="col col--4" style={{ padding: 8 }}>
+    <QuickstartCard
+      name="Unity"
+      link="/unity/connectwallet"
+      image="/assets/languages/unity.webp"
+      description="Using Connect Wallet in Unity Games."
+    />
+  </div>
+</div>

docs/onboarding/25 Connect Wallet/1 How it Works.mdx

@@ -0,0 +1,70 @@
+---
+slug: /connect-wallet/how-it-works
+title: How it Works
+---
+
+import QuickstartCard from "@components/QuickstartCard";
+
+## Pre-Built Component Built Using the Wallet SDK
+
+Connect Wallet is built using the [Wallet SDK](/wallet) to make it easy to connect users to front-end applications. Each supported language comes with wallet configurators that can specify the supported wallets in the component.
+
+Connect Wallet acts as the user interface for wallet-related actions such as sending funds, executing transactions, viewing balances, and even creating wallets for users.
+
+## Creating Wallets
+
+The Connect Wallet component allows developers to create three types of wallets for their users optionally:
+
+- [**ERC-4337 Smart Wallets**](/smart-wallet): Create smart contract accounts for your users.
+- [**Embedded Wallets**](/wallet/paper): Authenticate your wallet by creating email or social wallets including Facebook, Twitter, or Google.
+- [**Low-level local wallets**](/wallet/local-wallet): create a “checkout as guest” experience for users.
+
+## Default Wallets
+
+The following wallet providers are added to Connect Wallet if the `supportedWallets` object is not specified.
+
+- [MetaMask](/wallet/metamask)
+- [Coinbase Wallet](/wallet/coinbase-wallet)
+- [WalletConnect](/wallet/walletconnect-v2)
+- [Trust Wallet](/wallet/trust-wallet)
+- [Rainbow](/wallet/rainbow)
+- [Zerion Wallet](wallet/zerion-wallet)
+- [Phantom](/wallet/phantom)
+
+## Available Wallet Configurators
+
+These configurators are available out of the box to add to the supported wallets on Connect Wallet
+
+<div className="row" style={{ marginBottom: 12, padding: 8, paddingTop: 0 }}>
+  <div className="col col--4" style={{ padding: 8 }}>
+    <QuickstartCard
+      name="React"
+      link="/react/connecting-wallets"
+      image="/assets/languages/react.png"
+      description="Available Connect Wallet Configurators in React"
+    />
+  </div>
+  <div className="col col--4" style={{ padding: 8 }}>
+    <QuickstartCard
+      name="React-Native"
+      link="/react/connecting-wallets"
+      image="/assets/languages/react-native.png"
+      description="Available Connect Wallet Configurators in React-Native"
+    />
+  </div>
+  <div className="col col--4" style={{ padding: 8 }}>
+    <QuickstartCard
+      name="Unity"
+      link="/unity/connectwallet#supported-wallets"
+      image="/assets/languages/unity.webp"
+      description="Available Connect Wallet Configurators in Unity."
+    />
+  </div>
+</div>
+
+## Terminology
+
+- **Configurators**: Pre-built configuration objects that can be added to the supported wallets object to facilitate connections to various wallet providers. These configurators are built using the Wallet SDK and specify all the settings to provide a simple abstraction layer for application integration.
+- **Custodial Wallets**: Wallets where a third-party service manages the private keys. Users rely on the service to manage their assets securely.
+- **Non-Custodial Wallets**: Wallets where the private keys are solely in the user's possession, giving them full control over their assets.
+- **Self-Custodial Wallets**: Similar to non-custodial wallets, self-custodial wallets allow users full control over their private keys and assets but may offer additional features like backup solutions.

docs/onboarding/25 Connect Wallet/2 Getting Started.mdx

@@ -0,0 +1,151 @@
+---
+slug: /connect-wallet/getting-started
+title: Getting Started
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+
+How to use Connect Wallet in your application
+
+## 1. Create an API Key
+
+To use Connect Wallet to its full capacity, you must create an API key with storage and RPC enabled. This is because storage is used to render the icons and images in the Connect Wallet component and our RPC edge to connect to the blockchain in your application.
+
+- Obtain an API key from the [thirdweb dashboard Settings page](https://thirdweb.com/create-api-key).
+- The API key will need to have the following settings: Storage and RPC as enabled services
+- Learn more about creating an API key and restricting which contracts the smart wallet can interact with [by viewing the API key documentation](/api-keys).
+- Copy your **`clientId`**. Since we are building a front-end application, we will need to use this key to build our application.
+
+## 2. Create an App
+
+To use Connect Wallet in a React app you can either:
+
+- Use the [create](https://portal.thirdweb.com/cli/create) command to create a new project with the dependencies already installed.
+- Add the dependencies to an existing project.
+
+For React-Native and Unity environments, skip to the **Add Dependencies to an Existing Project section.**
+
+### Create a New Project
+
+Open your terminal and run:
+
+```bash
+npx thirdweb create app
+
+```
+
+When prompted, select/input the following options:
+
+- A name for the project
+- `EVM` as the blockchain
+- Select your desired environment e.g. `Next.js`
+- `TypeScript` or `JavaScript` as the language.
+
+This will create a repository with the dependencies installed.
+
+### Add Dependencies to an Existing Project
+
+To add the dependencies to an existing project, run the following command:
+
+```bash
+npx thirdweb install
+
+```
+
+This will detect the environment you are working in and install the relevant dependencies.
+
+## 3. Wrap your Application in a thirdweb Provider
+
+To use the thirdweb SDK and Connect Wallet in React or React-Native, you need to wrap your application in a `ThirdwebProvider` and pass your `clientId`:
+
+```tsx
+import { ThirdwebProvider } from "@thirdweb/react"; // or @thirdweb/react-native;
+
+const App = () => {
+  return (
+    <ThirdwebProvider activeChain={"goerli"} clientId={"your-client-id"}>
+      <YourApp />
+    </ThirdwebProvider>
+  );
+};
+```
+
+For unity, you will need to add the `ThirdwebManager` prefab to your scene. Visit the [Unity documentation for more information](/unity/thirdwebmanager).
+
+## 4. Import Connect Wallet
+
+To use Connect Wallet in your application in React or React-Native, import it from the package corresponding to the language you are working in and then you can use the component in your application:
+
+```tsx
+import { ConnectWallet } from "@thirdweb/react"; // or @thirdweb/react-native;
+
+const YourApp = () => {
+  return (
+    <div>
+      <ConnectWallet />
+    </div>
+  );
+};
+```
+
+This will render the Connect Wallet component in your application:
+
+![Connect Wallet Component](./assets/connect-wallet-modal.png)
+![Connected](./assets/connect.png)
+
+If you are working in Unity, you will need to add the `ConnectWallet` prefab to your scene. Visit the [Unity documentation for more information](/unity/connectwallet).
+
+## 4. Customize the Supported Wallets
+
+To modify the wallet providers your Connect Wallet displays and allows users to connect with in React or React-Native, import the desired configurator from the package, depending on the environment you are working in, and provide an array of wallet configurations to the [`supportedWallets`](/react/react.thirdwebprovider#supportedwallets-optional) object in the `ThirdwebProvider`
+
+```tsx
+import {
+  ThirdwebProvider,
+  metaMaskWallet,
+  coinbaseWallet,
+  embeddedWallet,
+} from "@thirdweb/react"; // or @thirdweb/react-native;
+
+const App = () => {
+  return (
+    <ThirdwebProvider
+      activeChain={"goerli"}
+      clientId={"your-client-id"}
+      supportedWallets={[metaMaskWallet(), coinbaseWallet(), embeddedWallet()]}
+    >
+      <YourApp />
+    </ThirdwebProvider>
+  );
+};
+```
+
+For Unity, from the Inspector window, you can configure the options for the `ConnectWallet` prefab.
+
+## 5. Enable Gasless
+
+To enable gasless transactions for your users in React or React-Native, you can use [Smart Wallets](/smart-wallet) and enable `glasess=true` in the `ThirdwebProvider`:
+
+```tsx
+import { ThirdwebProvider, smartWallet, metaMaskWallet } from "@thirdweb/react"; // or @thirdweb/react-native;
+
+const App = () => {
+  return (
+    <ThirdwebProvider
+      activeChain={"goerli"}
+      clientId={"your-client-id"}
+      supportedWallets={[
+        smartWallet(metaMaskWallet(), {
+          factory: "YOUR_FACTORY_ADDRESS",
+          gasless: true,
+        }),
+      ]}
+    >
+      <YourApp />
+    </ThirdwebProvider>
+  );
+};
+```
+
+For Unity, follow this guide to [set up Smart Wallets in your game](/unity/thirdwebmanager#smart-wallet-options).

sidebars/onboarding.js

@@ -36,7 +36,7 @@ const sidebars = {
     {
       type: "link",
       label: "Connect Wallet",
-      href: "react/react.connectwallet",
+      href: "/connect-wallet",
     },
     {
       type: "link",
@@ -207,6 +207,13 @@ const sidebars = {
     },
   ],
 
+  connectWallet: [
+    {
+      type: "autogenerated",
+      dirName: "25 Connect Wallet",
+    },
+  ],
+
   publish: [
     {
       type: "autogenerated",

src/theme/DocSidebarItems/index.js

@@ -91,6 +91,10 @@ function DocSidebarItems({ items, ...props }) {
     const formatted =
       name.split("/")[1].charAt(0).toUpperCase() + name.split("/")[1].slice(1);
 
+    if (formatted === "Connect-wallet") {
+      return "Connect Wallet";
+    }
+
     if (formatted === "Sdk") {
       return "Contract SDK";
     }