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

Commit

Permalink
Add onekey wallet (#1110)
Browse files Browse the repository at this point in the history
* Fix typos

* Add OneKey wallet
  • Loading branch information
kien-ngo authored Dec 3, 2023
1 parent 09cf584 commit 9dbc287
Show file tree
Hide file tree
Showing 6 changed files with 200 additions and 31 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.
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
1 change: 1 addition & 0 deletions docs/react/Connecting Wallets.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ There are two ways you connect user's wallet to your application using thirdweb'
| Coin98 Wallet | [`coin98Wallet`](/react/react.coin98) |
| Rabby Wallet | [`rabbyWallet`](/react/react.rabby) |
| Defi Wallet | [`cryptoDefiWallet`](/react/react.defiwallet) |
| OneKey Wallet | [`oneKeyWallet`](/react/react.onekey) |

<br />

Expand Down
91 changes: 91 additions & 0 deletions docs/react/wallets/oneKeyWallet.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
---
title: oneKeyWallet
slug: /react.onekey
displayed_sidebar: react
---

import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import CodeBlock from "@theme/CodeBlock";
import { CustomizeWalletConfigurator } from "@components/build-wallet/CustomizeWalletConfigurator";

A wallet configurator for [OneKey Wallet](/wallet/onekey-wallet) which allows integrating the wallet with React.

```tsx
import { oneKeyWallet } from "@thirdweb-dev/react";

const oneKeyWalletConfig = oneKeyWallet(options);
```

## options

<details>
<summary>projectId (recommended) </summary>
<div>

Your project's unique identifier that can be obtained at [cloud.walletconnect.com](https://cloud.walletconnect.com).

Defaults to a common thirdweb projectId. We recommend getting your own projectId at
[cloud.walletconnect.com](https://cloud.walletconnect.com) when launching your project.

```javascript
import { oneKeyWallet } from "@thirdweb-dev/react";

oneKeyWallet(
// highlight-start
{
projectId: "<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>

## Usage with `ConnectWallet`

To allow users to connect to this wallet using the [ConnectWallet](/react/react.connectwallet) component, you can add it to [ThirdwebProvider's supportedWallets](/react/react.thirdwebprovider#supportedwallets-optional) prop.

```tsx
<ThirdwebProvider supportedWallets={[oneKeyWallet()]} clientId="your-client-id">
<YourApp />
</ThirdwebProvider>
```

## Usage with `useConnect`

you can use the `useConnect` hook to programmatically connect to the wallet without using the [ConnectWallet](/react/react.connectwallet) component.

The wallet also needs to be added in [ThirdwebProvider's supportedWallets](/react/react.thirdwebprovider#supportedwallets-optional) if you want the wallet to auto-connect on next page load.

```tsx
const oneKeyWalletConfig = oneKeyWallet();

function App() {
const connect = useConnect();

const handleConnect = async () => {
await connect(oneKeyWalletConfig, connectOptions);
};

return <div> ... </div>;
}
```
Binary file added static/assets/wallets/onekey.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

1 comment on commit 9dbc287

@vercel
Copy link

@vercel vercel bot commented on 9dbc287 Dec 3, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.