Merge branch 'main' into payments

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/17 Engine/Guides/3 Relayer.mdx

@@ -42,35 +42,60 @@ With this ID, you're meta-transaction relayer endpoint will be at `POST - /relay
 
 ## Step 2: Use your relayer endpoint to sponsor transactions
 
-Now that we've setup our endpoint, we can use it to sponsor transactions using the `@thirdweb-dev/sdk` package.
-
-All we need to do is instantiate the SDK to be aware of our meta-transaction relayer endpoint, and it will attempt to send all transactions through the endpoint.
-
-In the following snippet, we instantiate the SDK with the standard configuration, and additionally specify the `gasless.engine.relayerUrl` parameter to enable meta-transaction relaying.
-
-```ts
-// Only instantiating the SDK with private key for demo purposes
-const sdk = ThirdwebSDK.fromPrivateKey("<private-key>", "arbitrum-goerli", {
-  gasless: {
-    // Here we specify our engine relayer URL that we created earlier
-    engine: {
-      relayerUrl:
-        "http://0.0.0.0:3005/relayer/4cc2b996-27dd-4263-a9ab-0997905c5e29",
-    },
-  },
-  secretKey: "<thirdweb-api-secret-key>",
-});
+Now that we've setup our endpoint, we can use it to sponsor transactions for our users using the `@thirdweb-dev/react` package on the client-side.
+
+All we need to do is setup the SDK to be aware of our meta-transaction relayer endpoint using the `ThirdwebProvider`, and it will attempt to send all transactions through the endpoint.
+
+In the following snippet, we setup the `ThirdwebProvider`, and additionally specify the `sdkOptions.gasless.engine.relayerUrl` parameter to enable meta-transaction relaying.
+
+```tsx
+import { ThirdwebProvider } from "@thirdweb-dev/react";
+
+export default function App() {
+  return (
+    <ThirdwebProvider
+      activeChain="polygon"
+      sdkOptions={{
+        gasless: {
+          engine: {
+            // Here we specify our engine relayer URL that we created earlier
+            relayerUrl:
+              "http://0.0.0.0:3005/relayer/4cc2b996-27dd-4263-a9ab-0997905c5e29",
+          },
+        },
+      }}
+    >
+      <Component />
+    </ThirdwebProvider>
+  );
+}
 ```
 
-Now, when we send a transaction to a contract with this instance of the SDK, it will be forwarded through our meta-transaction relayer and sponsored by the Engine backend wallet instead of forcing the user to spend funds.
+And we'll need to add a `ConnectWallet` button into our app to allow our user's to connect their wallets - this button is highly customizable, for more you can read into the [details of using the ConnectWallet button](https://portal.thirdweb.com/connect).
 
 ```tsx
-const contract = await sdk.getContract(
-  "0x7A0CE8524bea337f0beE853B68fAbDE145dAC0A0",
-);
+import { ConnectWallet } from "@thirdweb-dev/react";
+
+export function Connect() {
+  return <ConnectWallet />;
+}
+```
+
+Now, when we send a transaction to a contract from the user's connected wallet, it will be forwarded through our meta-transaction relayer and sponsored by the Engine backend wallet instead of forcing the user to spend funds.
+
+```tsx
+import { useContract } from "@thirdweb-dev/react";
+
+export default function Component() {
+  const contract = useContract("0x7A0CE8524bea337f0beE853B68fAbDE145dAC0A0");
+
+  const mint = async () => {
+    // This mint transaction will automatically use the engine relayer
+    await contract.erc20.mint(1);
+  };
 
-// This transaction will automatically go through the meta-transaction relayer!
-const tx = await contract.erc20.mint(1);
+  return <Button onClick={mint}>Approve</Button>;
+}
 ```
 
 Using this simple flow, you can use Engine as a meta-transaction relayer to sponsor funds for your users!

docs/onboarding/18 Smart Wallet/4 Infrastructure.mdx

@@ -76,7 +76,7 @@ To use thirdweb's account abstraction infrastructure, you need to setup a billin
 
 **Pricing**:
 
-- **Bundler**: Transaction bundle calls (non-sponsored calls) are free to use.
-- **Paymaster**: 10% premium on top of network fee based on your usage.
+- **Bundler**: 10% premium on top of network fee
+- **Paymaster**: 10% premium on top of network fee
 
 Find more information on the different billing tiers by visiting [thirdweb's pricing page](https://thirdweb.com/pricing).

docs/onboarding/2 Explore/Contracts/Marketplace.mdx

@@ -34,14 +34,14 @@ You could use the Marketplace contract to:
   <div className="col col--6" style={{ marginTop: 8 }}>
     <QuickstartCard
       name="Guide: Create an NFT Marketplace with the SDK"
-      link="https://portal.thirdweb.com/guides/nft-marketplace-with-typescript-next"
+      link="https://blog.thirdweb.com/guides/nft-marketplace-with-typescript-next"
       image="/assets/icons/education.png"
     />
   </div>
   <div className="col col--6" style={{ marginTop: 8 }}>
     <QuickstartCard
       name="Guide: List an NFT For Auction and Place a Bid with the SDK"
-      link="https://portal.thirdweb.com/guides/auction-button-react"
+      link="https://blog.thirdweb.com/guides/auction-button-react"
       image="/assets/icons/education.png"
     />
   </div>

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 }}>