Skip to content

Commit

Permalink
Apply suggestions from code review
Browse files Browse the repository at this point in the history
Co-authored-by: albertov19 <[email protected]>
  • Loading branch information
0xlukem and albertov19 authored Oct 1, 2024
1 parent 64136ee commit 092dc76
Show file tree
Hide file tree
Showing 3 changed files with 9 additions and 9 deletions.
6 changes: 3 additions & 3 deletions .snippets/code/builders/toolkit/wallets/rainbowkit/wagmi2.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ import { QueryClientProvider, QueryClient } from '@tanstack/react-query';

import { type Chain } from 'viem'

export const danceboxChain = {
export const danceboxEVMChain = {
id: 5678,
name: "Dancebox",
name: "Dancebox EVM Appchain",
nativeCurrency: { name: "TANGO", symbol: "TANGO", decimals: 18 },
rpcUrls: {
default: { http: ['https://fraa-dancebox-3001-rpc.a.dancebox.tanssi.network'] }
Expand All @@ -21,6 +21,6 @@ export const danceboxChain = {
export const config = getDefaultConfig({
appName: 'My Tanssi Appchain',
projectId: 'process.env.NEXT_PUBLIC_PROJECT_ID',
chains: [danceboxChain],
chains: [danceboxEVMChain ],
ssr: true,
});
2 changes: 1 addition & 1 deletion builders/toolkit/integrations/wallets/.pages
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,6 @@ title: Wallets
hide: false
nav:
- 'index.md'
- 'rainbowkit.md'
- 'Rainbowkit': 'rainbowkit.md'


10 changes: 5 additions & 5 deletions builders/toolkit/integrations/wallets/rainbowkit.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ description: Learn how to integrate RainbowKit into your appchain created with T

## Introduction

[RainbowKit](https://www.rainbowkit.com/docs/introduction){target=\_blank} RainbowKit is a React library that adds wallet connection capabilities to a dApp. It supports numerous wallets and enables features such as switching connection chains, ENS address resolution, and balance display out-of-the-box. RainbowKit offers customization options for all EVM-compatible chains, making it possible to easily connect wallets to your appchain.
[RainbowKit](https://www.rainbowkit.com/docs/introduction){target=\_blank} is a React library that adds wallet connection capabilities to a dApp. It supports numerous wallets and enables features such as switching connection chains, ENS address resolution, and balance display out-of-the-box. RainbowKit offers customization options for all EVM-compatible chains, making it possible to connect wallets to your appchain easily.


RainbowKit bundles together mulitple tools to simplify adding wallet connection to your dApp:
Expand Down Expand Up @@ -73,19 +73,19 @@ Your starting screen should look like this:

Open the project in your code editor and take a look at the directory and file structure, paying particular attention to the `wagmi.ts` file. This file is where you can configure which chains are included in the list of networks that users can connect to through your dApp.

Since Dancebox is a custom appchain on Tanssi, it cannot be imported directly from `wagmi/chains`. Instead, you need to manually define the chain in the `wagmi.ts` file. For example, if your appchain uses the Tanssi demo appchain (Dancebox) or another EVM-compatible chain, you can add the necessary configurations manually.
Since the Dancebox EVM demo appchain is a custom appchain on Tanssi, it cannot be imported directly from `wagmi/chains`. Instead, you must manually define the chain in the `wagmi.ts` file. For example, if your appchain uses the Tanssi demo appchain (Dancebox) or another EVM-compatible chain, you can add the necessary configurations manually.

Here is the configuration for the Dancebox demo appchain on Tanssi:

=== "Dancebox Demo Appchain"
=== "Dancebox Demo EVM Appchain"
```js title="src/wagmi.ts"
--8<-- 'code/builders/toolkit/wallets/rainbowkit/wagmi.ts'
```
To add support for the Dancebox appchain on Tanssi, update `wagmi.ts` as shown above. You will learn how to generate the `projectId` value for WalletConnect in the next section.
To add support for the Dancebox demo EVM appchain on Tanssi, update `wagmi.ts` as shown above. You will learn how to generate the `projectId` value for WalletConnect in the next section.

## Manual Setup

If you want to add RainbowKit to an existing React application, you can complete a manual setup. The following sections will guide you through using the manual setup to install and import needed dependencies, configure chain connections to support the Dancebox appchain on Tanssi, and make RainbowKit functionality available to users of your dApp. You will also learn how to specify which chain the **Connect Wallet** button should connect to by default and how to customize the RainbowKit theme to fit your project.
If you want to add RainbowKit to an existing React application, you can complete a manual setup. The following sections will guide you through using the manual setup to install and import needed dependencies, configure chain connections to support the Dancebox demo EVM appchain on Tanssi, and make RainbowKit functionality available to users of your dApp. You will also learn how to specify which chain the **Connect Wallet** button should connect to by default and how to customize the RainbowKit theme to fit your project.

### Checking Prerequisites {: #checking-prerequisites }

Expand Down

0 comments on commit 092dc76

Please sign in to comment.