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

Commit

Permalink
Add Rabby wallet (#1089)
Browse files Browse the repository at this point in the history
  • Loading branch information
kien-ngo authored Nov 23, 2023
1 parent 6ca6721 commit 9f3424c
Show file tree
Hide file tree
Showing 6 changed files with 161 additions and 1 deletion.
9 changes: 9 additions & 0 deletions docs/onboarding/12 Wallet/0 Overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -179,6 +179,15 @@ The Wallet SDK comes out of the box with support for the most popular wallets th
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>

<br />
Expand Down
45 changes: 45 additions & 0 deletions docs/onboarding/12 Wallet/4 Wallets/Rabby Wallet.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
---
slug: /wallet/rabby-wallet
title: Rabby Wallet
---

import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import CodeBlock from "@theme/CodeBlock";

Prompt users to connect to their [Rabby wallet](https://rabby.io/).

## Usage

```javascript
import { RabbyWallet } from "@thirdweb-dev/wallets";

const wallet = new RabbyWallet();

wallet.connect();
```

## Configuration

Optionally, provide a configuration object when instantiating the `RabbyWallet` class.

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

Show this wallet as "recommended" in the [ConnectWallet Modal](/react/react.connectwallet).

```ts
RabbyWallet({
// 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 @@ -151,6 +151,14 @@ The following wallets are supported by the SDKs:
description="Connect with Coin98 Wallet"
/>
</div>
<div className="col col--4" style={{ padding: 8 }}>
<QuickstartCard
name="Rabby"
link="/react/react.rabby"
image="/assets/wallets/rabby.svg"
description="Connect with Rabby Wallet"
/>
</div>
</div>
</TabItem>
<TabItem value="react-native" label="React Native">
Expand Down
3 changes: 2 additions & 1 deletion docs/react/Connecting Wallets.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,9 @@ There are two ways you connect user's wallet to your application using thirdweb'
| Frame Wallet | [`frameWallet`](/react/react.frame) |
| Phantom | [`phantomWallet`](/react/react.phantom) |
| OKX Wallet | [`okxWallet`](/react/react.okx) |
| Core Wallet | [`okxWallet`](/react/react.core) |
| Core Wallet | [`coreWallet`](/react/react.core) |
| Coin98 Wallet | [`coin98Wallet`](/react/react.coin98) |
| Rabby Wallet | [`rabbyWallet`](/react/react.rabby) |

<br />

Expand Down
67 changes: 67 additions & 0 deletions docs/react/wallets/rabbyWallet.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
---
title: rabbyWallet
slug: /react.rabby
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 [Coin98 Wallet](/wallet/rabby-wallet) which allows integrating the wallet with React.

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

const coin98WalletConfig = rabbyWallet(options);
```

## options

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

Show this wallet as "recommended" in the [ConnectWallet Modal](/react/react.connectwallet).

```ts
rabbyWallet({
// 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={[rabbyWallet()]} 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 coin98WalletConfig = rabbyWallet();

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

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

return <div> ... </div>;
}
```
30 changes: 30 additions & 0 deletions static/assets/wallets/rabby.svg
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 9f3424c

@vercel
Copy link

@vercel vercel bot commented on 9f3424c Nov 23, 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.