Merge branch 'main' of https://github.com/thirdweb-dev/docs

docs/onboarding/0 0 Home.mdx

@@ -11,6 +11,7 @@ import LanguageCard from "@components/landing-page/LanguageCard";
 import ToolCardsSection from "@components/landing-page/ToolCardsSection";
 import WalletsCardsSection from "@components/landing-page/WalletsCardsSection";
 import ContractsCardsSection from "@components/landing-page/ContractsCardsSection";
+import PaymentsCardsSection from "@components/landing-page/PaymentsCardsSection";
 import InfrastructureCardsSection from "@components/landing-page/InfrastructureCardsSection";
 import SolutionsCardsSection from "@components/landing-page/SolutionsCardsSection";
 import LearnSection from "@components/landing-page/LearnSection";
@@ -25,6 +26,7 @@ import ResourcesSection from "@components/landing-page/ResourcesSection";
 <WalletsCardsSection />
 <ContractsCardsSection />
 <InfrastructureCardsSection />
+<PaymentsCardsSection />
 <ToolCardsSection />
 
 <h2>SDKs</h2>

docs/onboarding/12 Wallet/0 Overview.mdx

@@ -161,37 +161,30 @@ The Wallet SDK comes out of the box with support for the most popular wallets th
       description="Connect with OKX Wallet"
     />
   </div>
-
-{" "}
-<div className="col col--4" style={{ padding: 8 }}>
-  <QuickstartCard
-    name="Core Wallet"
-    link="/wallet/core-wallet"
-    image="/assets/wallets/core.png"
-    description="Connect with Core Wallet"
-  />
-</div>
-
-{" "}
-<div className="col col--4" style={{ padding: 8 }}>
-  <QuickstartCard
-    name="Coin98 Wallet"
-    link="/wallet/coin98-wallet"
-    image="/assets/wallets/coin98.png"
-    description="Connect with Coin98 Wallet"
-  />
-</div>
-
-{" "}
-<div className="col col--4" style={{ padding: 8 }}>
-  <QuickstartCard
-    name="Rabby Wallet"
-    link="/wallet/rabby-wallet"
-    image="/assets/wallets/rabby.svg"
-    description="Connect with Rabby Wallet"
-  />
-</div>
-
+  <div className="col col--4" style={{ padding: 8 }}>
+    <QuickstartCard
+      name="Core Wallet"
+      link="/wallet/core-wallet"
+      image="/assets/wallets/core.png"
+      description="Connect with Core Wallet"
+    />
+  </div>
+  <div className="col col--4" style={{ padding: 8 }}>
+    <QuickstartCard
+      name="Coin98 Wallet"
+      link="/wallet/coin98-wallet"
+      image="/assets/wallets/coin98.png"
+      description="Connect with Coin98 Wallet"
+    />
+  </div>
+  <div className="col col--4" style={{ padding: 8 }}>
+    <QuickstartCard
+      name="Rabby Wallet"
+      link="/wallet/rabby-wallet"
+      image="/assets/wallets/rabby.svg"
+      description="Connect with Rabby Wallet"
+    />
+  </div>
   <div className="col col--4" style={{ padding: 8 }}>
     <QuickstartCard
       name="Defi Wallet"
@@ -200,6 +193,14 @@ The Wallet SDK comes out of the box with support for the most popular wallets th
       description="Connect with Defi Wallet"
     />
   </div>
+  <div className="col col--4" style={{ padding: 8 }}>
+    <QuickstartCard
+      name="OneKey Wallet"
+      link="/wallet/onekey-wallet"
+      image="/assets/wallets/onekey.png"
+      description="Connect with OneKey Wallet"
+    />
+  </div>
 </div>
 
 <br />

docs/onboarding/12 Wallet/4 Wallets/OneKey Wallet.mdx

@@ -0,0 +1,68 @@
+---
+slug: /wallet/onekey-wallet
+title: OneKey Wallet
+---
+
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import CodeBlock from "@theme/CodeBlock";
+
+Prompt users to connect to their [OneKey wallet](https://onekey.so).
+
+## Usage
+
+```javascript
+import { OneKeyWallet } from "@thirdweb-dev/wallets";
+
+const wallet = new OneKeyWallet();
+
+wallet.connect();
+```
+
+## Configuration
+
+Optionally, provide a configuration object when instantiating the `OneKeyWallet` class.
+
+<details>
+  <summary>projectId (recommended) </summary>
+  <div>
+
+This is only relevant if you want to use [WalletConnect](https://walletconnect.com/) for connecting to OneKey wallet mobile app when MetaMask is not injected.
+
+This `projectId` can be obtained at [cloud.walletconnect.com](https://cloud.walletconnect.com/). It is highly recommended to use your own project id and only use the default one for testing purposes.
+
+```javascript
+import { OneKeyWallet } from "@thirdweb-dev/wallets";
+
+const wallet = new OneKeyWallet(
+  // highlight-start
+  {
+    projectId: "YOUR_WALLET_CONNECT_PROJECT_ID",
+  },
+  // highlight-end
+);
+```
+
+</div>
+</details>
+
+<details>
+  <summary>recommended (optional) </summary>
+  <div>
+
+Show this wallet as "recommended" in the [ConnectWallet Modal](/react/react.connectwallet).
+
+```ts
+OneKeyWallet({
+  // highlight-start
+  recommended: true,
+  // highlight-end
+});
+```
+
+</div>
+</details>
+
+## Methods
+
+Inherits all the public methods from the [`AbstractClientWallet`](interfaces/abstract-client-wallet) class.

docs/onboarding/20 Connect/3 Connect Wallet Component/3 Supported Wallets.mdx

@@ -167,6 +167,14 @@ The following wallets are supported by the SDKs:
           description="Connect with Defi Wallet"
         />
       </div>
+      <div className="col col--4" style={{ padding: 8 }}>
+        <QuickstartCard
+          name="OneKey wallet"
+          link="/react/react.onekey"
+          image="/assets/wallets/onekey.png"
+          description="Connect with OneKey Wallet"
+        />
+      </div>
     </div>
   </TabItem>
   <TabItem value="react-native" label="React Native">

docs/onboarding/21 Embedded Wallet/0 Overview.mdx

@@ -12,6 +12,8 @@ Embedded wallets are wallets that get spun up for users when they first come int
 
 Users can login using their email address, social logins (twitter, apple, discord, etc), or any Open ID Compatible authentication service. Once they authenticate they are provisioned a wallet, which they can then use to perform on-chain actions like minting NFTs and sending transactions.
 
+Embedded wallets work with all EVM networks
+
 ![Hero image for Embedded wallet that shows default modal with Google and verification modal](./assets/embed-overview.svg)
 
 <div className="col col--12" style={{ padding: 8 }}>

docs/onboarding/21 Embedded Wallet/4 Custom Auth/1 Bring your Auth.mdx

@@ -1,35 +1,77 @@
 ---
 slug: /embedded-wallet/custom-auth
-title: Use your own auth
+title: Overview
 ---
 
-import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
+import Tabs from "@theme/Tabs";
 import QuickstartCard from "@components/QuickstartCard";
 
-By default, the embedded wallet service handles two things: auth, and spinning up crypto wallets tied to the auth. We require
-valid authentication to ensure a wallet is created for the right person.
-If you already have your own auth and only want to spin up wallets, we offer a simple way to hook up any **OpenID Connect ("OIDC") compatible** auth to create embedded wallets.
+Embedded wallets already support most popular login methods out of the box, but we also give app developers the flexibility to use 
+embedded wallets with any authentication method. If you have a valid authenticated user, you should be able to easily spin up an 
+embedded wallet for them irrespective of how they got authenticated.
+
+### Usecases
+
+This means that app developers can now
 
-## How it works
+- Spin up embedded wallets for users using their existing authentication service. For example, if you have a game where players log in using their username and password, you can now easily create wallets when they sign up.
+- Integrate with any social login provider. For example, if you have a game where you want to let users login with their Steam or Epic games credentials, you can now use embedded wallets to enable these experiences.
+- Use embedded wallets in non-frontend environments. For example, you could authenticate users with SSH and use embedded wallets with CLI tools.
+- Build completely custom authentication experiences. For example, you could ask users to verify their credentials with 2FA or passkey before you consider them authenticated and provision wallets for them.
 
-- An OIDC auth system has a public-private keypair, where the private key is used to sign auth tokens
+## Configuring custom auth
+
+We offer two options to setup your custom auth, one that is based on the [OIDC (Open ID Connect)](https://openid.net/developers/how-connect-works/) standard, and a generic option that lets you bring your own auth server. You can also use both options together if needed.
+
+### Setting up OIDC compatible auth
+
+An OIDC auth system has a public-private keypair, where the private key is used to sign auth tokens
 - The public key is uploaded to a public URL in JWKS format. The standard location is `https://{domain}.com/.well-known/jwks.json`
 - When a user logs in, a JWT token called the idToken is generated and signed by the private key. The OIDC spec provides an interface for fields that are used in this token.
-- We use the public key to verify that the JWT was signed correctly, and proceed to generate a wallet based on the `sub` (user identifier) value of the idToken.
+- This JWT is then passed to the embedded wallet to generate a wallet for the user.
+- We will verify the JWT against the public key to verify that the JWT was signed correctly. Upon successful verification, we will proceed to generate a wallet based on the `sub` (user identifier) value of the idToken.
+
+
+To setup an OIDC compatible auth, enable the first option in the configuration tab of the embedded wallet dashboard
+![Custom auth](../assets/customauthdb.png)
+
+You will be asked to enter the following values
+- The URL of the JWKS file (public key): This is used to verify the token was signed by you.
+- The `aud` value of the idToken: This is used to verify that thirdweb is the intended user of the token
+
+
+### Setting up generic auth
+
+Generic auth is a lower level option that can be used when you have your own auth server that you use to authenticate users
+- When a user logs in, you are able to generate a public identifier that allows you to identify the user.
+- You can pass this identifier to the embedded wallet to generate a wallet for the user.
+- When verifying the user, we will hit an endopint that you provide to verify the user's identity.
+- We will then generate a wallet for the user if the provided payload is valid.
+
+![How generic auth works](../assets/customauth.png)
+
+To use generic auth, enable the second option in the configuration tab of the embedded wallet dashboard
+
+![Generic auth dashboard](../assets/customauthdb2.png)
 
-## Configuration Setup
+You will be asked to enter an endpoint that we can hit to verify the user's identity. This endpoint should accept a POST request with a JSON body containing the following fields:
+- `payload`: This will correspont to the public identifier that was generated for your user.
+
+The endpoint should return a JSON body containing the following fields:
+  - `userId`: A uid for the user. Note that you can only create one wallet per `userId` at this point
+  - `email` (optional): If provided, the user will be able to access the same account outside of the platform for things like private key export // using with wallet connect etc.
+  - `exp` (optional): An expiration date for the user's wallet session. By default a session is 7 days long.
+
+
+You can also pass a list of headers. These headers will be sent with every request to your verification endpoint. You can use these to authenticate the request.
 
-In your API key settings, click edit, look for "Custom Auth" and provide the following values:
 
-- The URL of the JWKS file (public key)
-  - This is used to verify the token was signed by you.
-- The `aud` value of the idToken
-  - This is used to verify that thirdweb is the intended user of the token
 
 ## Authenticating a user
 
-Once you've logged in with your own auth, you can pass the user's JWT to the embedded wallet to authenticate and connect.
+
+### OIDC auth
 
 <Tabs>
 <TabItem value="react" label="React & React Native">
@@ -51,7 +93,7 @@ const handlePostLogin = async (jwt: string) => {
 
 </TabItem>
 
-<TabItem value="typescript" label="Other Frameworks">
+<TabItem value="typescript" label="Other Typescript Frameworks">
 
 In other frameworks, use your own instance of the wallet to authenticate and connect.
 
@@ -74,3 +116,53 @@ const walletAddress = await embeddedWallet.connect({ authResult });
 
 </TabItem>
 </Tabs>
+
+
+
+### Generic auth
+
+
+<Tabs>
+<TabItem value="react" label="React & React Native">
+
+In React and React Native, the `useEmbeddedWallet()` hook handles authentication and connection states.
+
+```typescript
+import { useEmbeddedWallet } from "@thirdweb-dev/react"; // or /react-native
+
+const embeddedWallet = useEmbeddedWallet();
+
+const handlePostLogin = async (jwt: string) => {
+  await embeddedWallet.connect({
+    strategy: "auth_endpoint",
+    payload,
+  });
+};
+```
+
+</TabItem>
+
+<TabItem value="typescript" label="Other Typescript Frameworks">
+
+In other frameworks, use your own instance of the wallet to authenticate and connect.
+
+```typescript
+import { EmbeddedWallet } from "@thirdweb-dev/wallets";
+import { Goerli } from "@thirdweb-dev/chains";
+
+const embeddedWallet = new EmbeddedWallet({
+  chain: Goerli, //  chain to connect to
+  clientId: "YOUR_CLIENT_ID", // Your thirdweb client ID
+});
+
+const authResult = await embeddedWallet.authenticate({
+  strategy: "auth_endpoint",
+  payload,
+});
+
+const walletAddress = await embeddedWallet.connect({ authResult });
+```
+
+</TabItem>
+</Tabs>
+