From 69c05c770ffa0d7cf5386d271973761db5aef2a9 Mon Sep 17 00:00:00 2001 From: yoanslvy <97676023+yoanslvy@users.noreply.github.com> Date: Fri, 13 Oct 2023 18:32:51 +0200 Subject: [PATCH] feature: cometh connect doc --- .../12 Wallet/4 Wallets/ComethConnect.mdx | 96 +++++++++++++ docs/react/Connecting Wallets.mdx | 1 + docs/react/hooks/wallet/usecomethconnect.mdx | 44 ++++++ docs/react/wallets/comethConnect.mdx | 130 ++++++++++++++++++ 4 files changed, 271 insertions(+) create mode 100644 docs/onboarding/12 Wallet/4 Wallets/ComethConnect.mdx create mode 100644 docs/react/hooks/wallet/usecomethconnect.mdx create mode 100644 docs/react/wallets/comethConnect.mdx diff --git a/docs/onboarding/12 Wallet/4 Wallets/ComethConnect.mdx b/docs/onboarding/12 Wallet/4 Wallets/ComethConnect.mdx new file mode 100644 index 000000000..484f3d031 --- /dev/null +++ b/docs/onboarding/12 Wallet/4 Wallets/ComethConnect.mdx @@ -0,0 +1,96 @@ +--- +slug: /wallet/cometh +title: Cometh Connect +sidebar_position: 11 +--- + +import Tabs from "@theme/Tabs"; +import TabItem from "@theme/TabItem"; +import CodeBlock from "@theme/CodeBlock"; + +Prompt users to connect to your app with [Cometh Connect](https://docs.cometh.io/connect/cometh-connect/what-is-connect). + +## Usage + +To be able to interact with Cometh Connect, you need to create an account and get an apiKey from [cometh dashboard](https://app.cometh.io/dashboard) + +You also need to indicate the chain that you are working on. For now, Cometh Connect supports these [networks](https://docs.cometh.io/connect/cometh-connect/supported-networks) + +```javascript +import { Polygon } from "@thirdweb-dev/chains"; +import { ComethConnect } from "@thirdweb-dev/wallets"; + +const options = { + apiKey: API_KEY, + chain: Polygon, +}; +const wallet = new ComethConnect(options); + +wallet.connect(); +``` + +## Configuration + +Optionally, provide a configuration object when instantiating the `ComethConnect` class. + +
+ clientId (recommended) +
+ +Provide `clientId` to use the thirdweb RPCs for given `chains` + +You can create a client ID for your application from [thirdweb dashboard](https://thirdweb.com/create-api-key). + +```javascript +import { Polygon } from "@thirdweb-dev/chains"; +import { ComethConnect } from "@thirdweb-dev/wallets"; + +const options = { + apiKey: API_KEY, + chain: Polygon, +}; +const wallet = new ComethConnect( + { + clientId: "YOUR_CLIENT_ID", + }, + options, +); +``` + +
+
+ +
+ walletAddress +
+ +Connect to an existing Cometh Connect smart wallet + +This parameter allow you to connect to a user that already created a Cometh Connect smart wallet, see our [`docs`](https://docs.cometh.io/connect/cometh-connect/create-a-wallet#connect-to-an-existing-wallet) for more info. + +```javascript +import { Polygon } from "@thirdweb-dev/chains"; +import { ComethConnect } from "@thirdweb-dev/wallets"; + +const options = { + apiKey: API_KEY, + chain: Polygon, + walletAddress: walletAddress, +}; +const wallet = new ComethConnect(options); +``` + +
+
+ +## Tutorial + +[wallet creation](https://docs.cometh.io/connect/cometh-connect/create-a-wallet) + +[send transactions](https://docs.cometh.io/connect/cometh-connect/send-transactions) + +You can go to our [docs](https://docs.cometh.io/connect/cometh-connect) to get more info regarding advanced features (gasless transactions, recovery, multi device) + +## Methods + +Inherits all the public methods from the [`AbstractClientWallet`](interfaces/abstract-client-wallet) class. diff --git a/docs/react/Connecting Wallets.mdx b/docs/react/Connecting Wallets.mdx index 26320647a..77b7f46b7 100644 --- a/docs/react/Connecting Wallets.mdx +++ b/docs/react/Connecting Wallets.mdx @@ -32,6 +32,7 @@ There are two ways you connect user's wallet to your application using thirdweb' | Blocto Wallet | [`bloctoWallet`](/react/react.blocto) | | Frame Wallet | [`frameWallet`](/react/react.frame) | | Phantom | [`phantomWallet`](/react/react.phantom) | +| Cometh Connect | [`comethConnect`](/react/react.cometh) |
diff --git a/docs/react/hooks/wallet/usecomethconnect.mdx b/docs/react/hooks/wallet/usecomethconnect.mdx new file mode 100644 index 000000000..017594863 --- /dev/null +++ b/docs/react/hooks/wallet/usecomethconnect.mdx @@ -0,0 +1,44 @@ +--- +title: useComethConnect +slug: /react.usecomethconnect +displayed_sidebar: react +sidebar_position: 17 +--- + +Hook that prompts users to connect their [Cometh Connect](/wallet/cometh) wallet to your app. + +```jsx +import { useComethConnect } from "@thirdweb-dev/react"; +``` + +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. + +To be able to interact with Cometh Connect, you need to create an account and get an apiKey from [cometh dashboard](https://app.cometh.io/dashboard) + +You also need to indicate the chain that you are working on. For now, Cometh Connect supports these [networks](https://docs.cometh.io/connect/cometh-connect/supported-networks) + +## Usage + +```jsx +import { Polygon } from "@thirdweb-dev/chains"; +import { useComethConnect } from "@thirdweb-dev/react"; + + +function App() { + const connectWithCometh = useComethConnect(); + + const options = { + // Place your Cometh Connect API key here. + apiKey: "API_KEY", + chain: Polygon, + //this parameter is optionnal (allows reconnection) + walletAddress:"WALLET_ADDRESS" + }, + + return ( + + ); +} +``` diff --git a/docs/react/wallets/comethConnect.mdx b/docs/react/wallets/comethConnect.mdx new file mode 100644 index 000000000..a21b83409 --- /dev/null +++ b/docs/react/wallets/comethConnect.mdx @@ -0,0 +1,130 @@ +--- +title: comethConnect +slug: /react.cometh +displayed_sidebar: react +sidebar_position: 11 +--- + +A wallet configurator for [MetaMask](/wallet/metamask) which allows integrating the wallet with React + +To be able to interact with Cometh Connect, you need to create an account and get an apiKey from [cometh dashboard](https://app.cometh.io/dashboard) + +You also need to indicate the chain that you are working on. For now, Cometh Connect supports these [networks](https://docs.cometh.io/connect/cometh-connect/supported-networks) + +```tsx +import { Polygon } from "@thirdweb-dev/chains"; +import { ComethConnect } from "@thirdweb-dev/wallets"; + +const options = { + apiKey: API_KEY, + chain: Polygon, +}; +const wallet = new ComethConnect(options); + +wallet.connect(); +``` + + + +### options + +
+ clientId (recommended) +
+ +Provide `clientId` to use the thirdweb RPCs for given `chains` + +You can create a client ID for your application from [thirdweb dashboard](https://thirdweb.com/create-api-key). + +```javascript +import { Polygon } from "@thirdweb-dev/chains"; +import { ComethConnect } from "@thirdweb-dev/wallets"; + +const options = { + apiKey: API_KEY, + chain: Polygon, +}; +const wallet = new ComethConnect( + { + clientId: "YOUR_CLIENT_ID", + }, + options, +); +``` + +
+
+ +
+ walletAddress +
+ +Connect to an existing Cometh Connect smart wallet + +This parameter allow you to connect to a user that already created a Cometh Connect smart wallet, see our [`docs`](https://docs.cometh.io/connect/cometh-connect/create-a-wallet#connect-to-an-existing-wallet) for more info. + +```javascript +import { Polygon } from "@thirdweb-dev/chains"; +import { ComethConnect } from "@thirdweb-dev/wallets"; + +const options = { + apiKey: API_KEY, + chain: Polygon, + walletAddress: walletAddress, +}; +const wallet = new ComethConnect(options); +``` + +
+
+ +## Usage with `Cometh Connect` + +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. + +Wallet Address is optionnal in the option config. + +```tsx +const options = { + apiKey: "bef322c7-2612-4f91-ab1d-65c99c88c758", + chain: Gnosis, + walletAddress: walletAddress, +}; + + + +; +``` + +## 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 options = { + apiKey: API_KEY, + chain: Polygon, + walletAddress: walletAddress, +}; + +function App() { + const connect = useConnect(); + + const handleConnect = async () => { + await connect(comethConnect(options)); + }; + + return
...
; +} +```