From 9f3424ce64bd8cb3bb9ba245d00e1ab4d9705cb4 Mon Sep 17 00:00:00 2001 From: Kien Ngo Date: Wed, 22 Nov 2023 22:51:26 -0500 Subject: [PATCH] Add Rabby wallet (#1089) --- docs/onboarding/12 Wallet/0 Overview.mdx | 9 +++ .../12 Wallet/4 Wallets/Rabby Wallet.mdx | 45 +++++++++++++ .../3 Supported Wallets.mdx | 8 +++ docs/react/Connecting Wallets.mdx | 3 +- docs/react/wallets/rabbyWallet.mdx | 67 +++++++++++++++++++ static/assets/wallets/rabby.svg | 30 +++++++++ 6 files changed, 161 insertions(+), 1 deletion(-) create mode 100644 docs/onboarding/12 Wallet/4 Wallets/Rabby Wallet.mdx create mode 100644 docs/react/wallets/rabbyWallet.mdx create mode 100644 static/assets/wallets/rabby.svg diff --git a/docs/onboarding/12 Wallet/0 Overview.mdx b/docs/onboarding/12 Wallet/0 Overview.mdx index f349fc981..b86c2a859 100644 --- a/docs/onboarding/12 Wallet/0 Overview.mdx +++ b/docs/onboarding/12 Wallet/0 Overview.mdx @@ -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" /> + +
+ +

diff --git a/docs/onboarding/12 Wallet/4 Wallets/Rabby Wallet.mdx b/docs/onboarding/12 Wallet/4 Wallets/Rabby Wallet.mdx new file mode 100644 index 000000000..a7e7245d0 --- /dev/null +++ b/docs/onboarding/12 Wallet/4 Wallets/Rabby Wallet.mdx @@ -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. + +
+ recommended (optional) +
+ +Show this wallet as "recommended" in the [ConnectWallet Modal](/react/react.connectwallet). + +```ts +RabbyWallet({ + // highlight-start + recommended: true, + // highlight-end +}); +``` + +
+
+ +## Methods + +Inherits all the public methods from the [`AbstractClientWallet`](interfaces/abstract-client-wallet) class. \ No newline at end of file diff --git a/docs/onboarding/20 Connect/3 Connect Wallet Component/3 Supported Wallets.mdx b/docs/onboarding/20 Connect/3 Connect Wallet Component/3 Supported Wallets.mdx index 04d439306..cf82dcee8 100644 --- a/docs/onboarding/20 Connect/3 Connect Wallet Component/3 Supported Wallets.mdx +++ b/docs/onboarding/20 Connect/3 Connect Wallet Component/3 Supported Wallets.mdx @@ -151,6 +151,14 @@ The following wallets are supported by the SDKs: description="Connect with Coin98 Wallet" /> +
+ +
diff --git a/docs/react/Connecting Wallets.mdx b/docs/react/Connecting Wallets.mdx index e075531ed..46ea66ecd 100644 --- a/docs/react/Connecting Wallets.mdx +++ b/docs/react/Connecting Wallets.mdx @@ -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) |
diff --git a/docs/react/wallets/rabbyWallet.mdx b/docs/react/wallets/rabbyWallet.mdx new file mode 100644 index 000000000..9ef0b092e --- /dev/null +++ b/docs/react/wallets/rabbyWallet.mdx @@ -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 + +
+ recommended (optional) +
+ +Show this wallet as "recommended" in the [ConnectWallet Modal](/react/react.connectwallet). + +```ts +rabbyWallet({ + // highlight-start + recommended: true, + // highlight-end +}); +``` + +
+
+ +## 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 + + + +``` + +## 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
...
; +} +``` \ No newline at end of file diff --git a/static/assets/wallets/rabby.svg b/static/assets/wallets/rabby.svg new file mode 100644 index 000000000..702bf6ff2 --- /dev/null +++ b/static/assets/wallets/rabby.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +