Skip to content
This repository has been archived by the owner on Jan 5, 2024. It is now read-only.

Commit

Permalink
Fix merge conflicts
Browse files Browse the repository at this point in the history
  • Loading branch information
Ian Mukherjee committed Dec 15, 2023
2 parents 47f40c7 + 67563ea commit ddadf8d
Show file tree
Hide file tree
Showing 36 changed files with 815 additions and 190 deletions.
63 changes: 32 additions & 31 deletions docs/onboarding/12 Wallet/0 Overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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 />
Expand Down
68 changes: 68 additions & 0 deletions docs/onboarding/12 Wallet/4 Wallets/OneKey Wallet.mdx
Original file line number Diff line number Diff line change
@@ -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.
73 changes: 49 additions & 24 deletions docs/onboarding/17 Engine/Guides/3 Relayer.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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!
Expand Down
4 changes: 2 additions & 2 deletions docs/onboarding/18 Smart Wallet/4 Infrastructure.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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).
4 changes: 2 additions & 2 deletions docs/onboarding/2 Explore/Contracts/Marketplace.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
2 changes: 2 additions & 0 deletions docs/onboarding/21 Embedded Wallet/0 Overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}>
Expand Down
Loading

0 comments on commit ddadf8d

Please sign in to comment.