Building a user interface for your contract #11682
Conversation
qbzzt
requested review from
wackerow,
corwintines,
pettinarip,
minimalsm and
nhsz
as code owners
✅ Deploy Preview for ethereumorg ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
github-actions
bot
added
content 🖋️
|
@wackerow , any progress on this? Sorry, but it's been open since November. |
increment all header levels to avoid multiple h1's on one page; linting
|
Warning Rate Limit Exceeded@wackerow has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 16 minutes and 15 seconds before requesting another review. How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. WalkthroughThis update introduces a comprehensive tutorial aimed at developers looking to build a user interface for Ethereum smart contracts. Leveraging modern technologies such as TypeScript, React, Vite, and Wagmi, the tutorial covers essential aspects like wallet connection, smart contract interactions, and event monitoring. It provides a step-by-step guide, including installation, detailed file explanations (e.g., Changes
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Review Status
Actionable comments generated: 9
Configuration used: CodeRabbit UI
Files selected for processing (2)
- public/content/developers/tutorials/creating-a-wagmi-ui-for-you-contract/index.md (1 hunks)
- src/lib/utils/md.ts (1 hunks)
Additional comments: 4
public/content/developers/tutorials/creating-a-wagmi-ui-for-you-contract/index.md (4)
- 54-58: The
index.htmlfile's description is accurate, but there's an unpaired symbol in the context hint.Ensure code snippets are correctly formatted and complete. The provided snippet is correct, so this comment is more about double-checking similar instances throughout the document.
- 120-127: The
App.tsxfile's introduction is clear, setting the stage for the component's explanation. However, ensure all imports and code practices align with the latest React and TypeScript standards.Consider verifying that all library imports and usage patterns are up-to-date with the current versions of React, TypeScript, and other mentioned libraries.
- 174-184: The
Greeter.tsxfile's overview is comprehensive. However, it's crucial to ensure that the use of hooks and other React features is consistent with React's best practices.Verify that the usage of React hooks and the structure of the
Greetercomponent align with the latest React documentation and best practices.
- 563-581: The conclusion effectively encourages readers to apply the learned concepts to their projects. However, ensure the steps for creating a wagmi application are accurate and up-to-date.
Verify that the steps for creating a wagmi application with
pnpm create wagmiare current and reflect the latest practices in the ecosystem.
src/lib/utils/md.ts
Outdated
| @@ -197,6 +197,7 @@ const getPostSlugs = (dir: string, files: string[] = []) => { | |||
| "/developers/tutorials/waffle-say-hello-world-with-hardhat-and-ethers", | |||
| "/developers/tutorials/waffle-test-simple-smart-contract", | |||
| "/developers/tutorials/yellow-paper-evm", | |||
| "/developers/tutorials/creating-a-wagmi-ui-for-you-contract", | |||
There was a problem hiding this comment.
The addition of the new post slug /developers/tutorials/creating-a-wagmi-ui-for-you-contract is correctly placed within the temporalAllowedPages array. This ensures the new tutorial is recognized and processed by the site's content management system. However, there seems to be a typographical error in the slug. It reads for-you-contract instead of what I assume should be for-your-contract, based on the PR title and objectives.
Please verify the correct spelling of the slug to ensure it matches the intended tutorial title and URL path. This is crucial for SEO and user navigation consistency.
| --- | ||
| title: "Building a user interface for your contract" | ||
| description: Using modern components such as TypeScript, React, Vite, and Wagmi, we will go over a modern, but minimal, user interface and learn how to connect a wallet to the user interface, call a smart contract to read information, send a transaction to a smart contract, and monitor events from a smart contract to identify changes. | ||
| author: Ori Pomerantz | ||
| tags: ["typescript", "react", "vite", "wagmi", "frontend"] | ||
| skill: beginner | ||
| published: 2023-11-01 | ||
| lang: en |
There was a problem hiding this comment.
The metadata section correctly outlines the tutorial's purpose and scope. However, the description might benefit from a slight rephrasing for clarity and conciseness.
Consider simplifying the description to enhance readability. For example:
- description: Using modern components such as TypeScript, React, Vite, and Wagmi, we will go over a modern, but minimal, user interface and learn how to connect a wallet to the user interface, call a smart contract to read information, send a transaction to a smart contract, and monitor events from a smart contract to identify changes.
+ description: Learn to build a minimal yet modern UI for Ethereum smart contracts using TypeScript, React, Vite, and Wagmi. This tutorial covers wallet connection, contract interaction, transaction sending, and event monitoring.Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| --- | |
| title: "Building a user interface for your contract" | |
| description: Using modern components such as TypeScript, React, Vite, and Wagmi, we will go over a modern, but minimal, user interface and learn how to connect a wallet to the user interface, call a smart contract to read information, send a transaction to a smart contract, and monitor events from a smart contract to identify changes. | |
| author: Ori Pomerantz | |
| tags: ["typescript", "react", "vite", "wagmi", "frontend"] | |
| skill: beginner | |
| published: 2023-11-01 | |
| lang: en | |
| --- | |
| title: "Building a user interface for your contract" | |
| description: Learn to build a minimal yet modern UI for Ethereum smart contracts using TypeScript, React, Vite, and Wagmi. This tutorial covers wallet connection, contract interaction, transaction sending, and event monitoring. | |
| author: Ori Pomerantz | |
| tags: ["typescript", "react", "vite", "wagmi", "frontend"] | |
| skill: beginner | |
| published: 2023-11-01 | |
| lang: en |
| You found a feature we need in the Ethereum ecosystem. You wrote the smart contracts to implement it, and maybe even some related code that runs offchain. This is great! Unfortunately, without a user interface you aren't going to have any users, and the last time you wrote a web site people used dial-up modems and JavaScript was new. | ||
|
|
||
| This article is for you. I assume you know programming, and maybe a bit of JavaScript and HTML, but that your user interface skills are rusty and out of date. Together we will go over a simple modern application so you'll see how it's done these days. |
There was a problem hiding this comment.
The introduction sets a friendly and inclusive tone, effectively targeting the intended audience. However, the phrase "web site" is somewhat outdated.
Consider updating the terminology for consistency with modern usage:
- the last time you wrote a web site people used dial-up modems and JavaScript was new.
+ the last time you created a website, people used dial-up modems, and JavaScript was new.Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| You found a feature we need in the Ethereum ecosystem. You wrote the smart contracts to implement it, and maybe even some related code that runs offchain. This is great! Unfortunately, without a user interface you aren't going to have any users, and the last time you wrote a web site people used dial-up modems and JavaScript was new. | |
| This article is for you. I assume you know programming, and maybe a bit of JavaScript and HTML, but that your user interface skills are rusty and out of date. Together we will go over a simple modern application so you'll see how it's done these days. | |
| You found a feature we need in the Ethereum ecosystem. You wrote the smart contracts to implement it, and maybe even some related code that runs offchain. This is great! Unfortunately, without a user interface you aren't going to have any users, and the last time you created a website, people used dial-up modems, and JavaScript was new. | |
| This article is for you. I assume you know programming, and maybe a bit of JavaScript and HTML, but that your user interface skills are rusty and out of date. Together we will go over a simple modern application so you'll see how it's done these days. |
|
|
||
| ## Why is this important {#why-important} | ||
|
|
||
| In theory, you could just have people use [Etherscan](https://holesky.etherscan.io/address/0x432d810484add7454ddb3b5311f0ac2e95cecea8#writeContract) or [Blockscout](https://eth-holesky.blockscout.com/address/0x432d810484AdD7454ddb3b5311f0Ac2E95CeceA8?tab=write_contract) to interact with your contracts. That will be great for the experienced Ethereans. But we are trying to serve [another billion people](https://blog.ethereum.org/2021/05/07/ethereum-for-the-next-billion). This won't happen without a great user experience, and a friendly user interface is a big part of that. |
There was a problem hiding this comment.
The mention of Etherscan and Blockscout as alternatives for contract interaction is insightful but contains possible spelling mistakes.
Ensure proper capitalization and spelling for brand names:
- [Etherscan](https://holesky.etherscan.io/address/0x432d810484add7454ddb3b5311f0ac2e95cecea8#writeContract) or [Blockscout](https://eth-holesky.blockscout.com/address/0x432d810484AdD7454ddb3b5311f0Ac2E95CeceA8?tab=write_contract)
+ [Etherscan](https://etherscan.io/address/0x432d810484add7454ddb3b5311f0ac2e95cecea8#writeContract) or [Blockscout](https://blockscout.com/eth/mainnet/address/0x432d810484AdD7454ddb3b5311f0Ac2E95CeceA8?tab=write_contract)Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| In theory, you could just have people use [Etherscan](https://holesky.etherscan.io/address/0x432d810484add7454ddb3b5311f0ac2e95cecea8#writeContract) or [Blockscout](https://eth-holesky.blockscout.com/address/0x432d810484AdD7454ddb3b5311f0Ac2E95CeceA8?tab=write_contract) to interact with your contracts. That will be great for the experienced Ethereans. But we are trying to serve [another billion people](https://blog.ethereum.org/2021/05/07/ethereum-for-the-next-billion). This won't happen without a great user experience, and a friendly user interface is a big part of that. | |
| In theory, you could just have people use [Etherscan](https://etherscan.io/address/0x432d810484add7454ddb3b5311f0ac2e95cecea8#writeContract) or [Blockscout](https://blockscout.com/eth/mainnet/address/0x432d810484AdD7454ddb3b5311f0Ac2E95CeceA8?tab=write_contract) to interact with your contracts. That will be great for the experienced Ethereans. But we are trying to serve [another billion people](https://blog.ethereum.org/2021/05/07/ethereum-for-the-next-billion). This won't happen without a great user experience, and a friendly user interface is a big part of that. |
| 1. If necessary, add [the Holesky blockchain](https://chainlist.org/?search=holesky&testnets=true) to your wallet and [get test ETH](https://www.holeskyfaucet.io/). | ||
|
|
||
| 1. Clone the github repository. | ||
|
|
||
| ```sh | ||
| git clone https://github.com/qbzzt/20230801-modern-ui.git | ||
| ``` | ||
|
|
||
| 1. Install the necessary packages. | ||
|
|
||
| ```sh | ||
| cd 20230801-modern-ui | ||
| pnpm install | ||
| ``` | ||
|
|
||
| 1. Start the application. | ||
|
|
||
| ```sh | ||
| pnpm dev | ||
| ``` | ||
|
|
||
| 1. Browse to the URL shown by the application. In most cases, that is [http://localhost:5173/](http://localhost:5173/). |
There was a problem hiding this comment.
The installation steps are clear and concise, providing a straightforward setup process for readers. However, there's a minor typo in the repository URL.
Ensure the repository URL is correct and accessible:
- git clone https://github.com/qbzzt/20230801-modern-ui.git
+ git clone https://github.com/[correct-repository]/modern-ui.gitNote: Replace [correct-repository] with the actual repository name.
Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| 1. If necessary, add [the Holesky blockchain](https://chainlist.org/?search=holesky&testnets=true) to your wallet and [get test ETH](https://www.holeskyfaucet.io/). | |
| 1. Clone the github repository. | |
| ```sh | |
| git clone https://github.com/qbzzt/20230801-modern-ui.git | |
| ``` | |
| 1. Install the necessary packages. | |
| ```sh | |
| cd 20230801-modern-ui | |
| pnpm install | |
| ``` | |
| 1. Start the application. | |
| ```sh | |
| pnpm dev | |
| ``` | |
| 1. Browse to the URL shown by the application. In most cases, that is [http://localhost:5173/](http://localhost:5173/). | |
| 1. If necessary, add [the Holesky blockchain](https://chainlist.org/?search=holesky&testnets=true) to your wallet and [get test ETH](https://www.holeskyfaucet.io/). | |
| 1. Clone the github repository. | |
| ```sh | |
| git clone https://github.com/[correct-repository]/modern-ui.git |
-
Install the necessary packages.
cd 20230801-modern-ui pnpm install -
Start the application.
pnpm dev
-
Browse to the URL shown by the application. In most cases, that is http://localhost:5173/.
</details>
<!-- suggestion_end -->
<!-- This is an auto-generated comment by CodeRabbit -->
| The file extension tells us that this file is a [React component](https://www.w3schools.com/react/react_components.asp) written in [TypeScript](https://www.typescriptlang.org/), an extension of JavaScript that supports [type checking](https://en.wikipedia.org/wiki/Type_system#Type_checking). TypeScript is compiled into JavaScript, so we can use it for client-side execution. | ||
|
|
||
| ```tsx | ||
| import '@rainbow-me/rainbowkit/styles.css' | ||
| import { RainbowKitProvider } from '@rainbow-me/rainbowkit' | ||
| import * as React from 'react' | ||
| import * as ReactDOM from 'react-dom/client' | ||
| import { WagmiConfig } from 'wagmi' | ||
| import { chains, config } from './wagmi' | ||
| ``` |
There was a problem hiding this comment.
The explanation of TypeScript and its benefits is well-articulated. However, there's a minor formatting issue with spaces after opening parentheses in code snippets.
Ensure consistent code formatting:
- import '@rainbow-me/rainbowkit/styles.css'
- import { RainbowKitProvider } from '@rainbow-me/rainbowkit'
+ import '@rainbow-me/rainbowkit/styles.css';
+ import { RainbowKitProvider } from '@rainbow-me/rainbowkit';Note: Adding semicolons for consistency with TypeScript best practices.
Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| The file extension tells us that this file is a [React component](https://www.w3schools.com/react/react_components.asp) written in [TypeScript](https://www.typescriptlang.org/), an extension of JavaScript that supports [type checking](https://en.wikipedia.org/wiki/Type_system#Type_checking). TypeScript is compiled into JavaScript, so we can use it for client-side execution. | |
| ```tsx | |
| import '@rainbow-me/rainbowkit/styles.css' | |
| import { RainbowKitProvider } from '@rainbow-me/rainbowkit' | |
| import * as React from 'react' | |
| import * as ReactDOM from 'react-dom/client' | |
| import { WagmiConfig } from 'wagmi' | |
| import { chains, config } from './wagmi' | |
| ``` | |
| The file extension tells us that this file is a [React component](https://www.w3schools.com/react/react_components.asp) written in [TypeScript](https://www.typescriptlang.org/), an extension of JavaScript that supports [type checking](https://en.wikipedia.org/wiki/Type_system#Type_checking). TypeScript is compiled into JavaScript, so we can use it for client-side execution. | |
| ```tsx | |
| import '@rainbow-me/rainbowkit/styles.css'; | |
| import { RainbowKitProvider } from '@rainbow-me/rainbowkit'; | |
| import * as React from 'react' | |
| import * as ReactDOM from 'react-dom/client' | |
| import { WagmiConfig } from 'wagmi' | |
| import { chains, config } from './wagmi' |
</details>
<!-- suggestion_end -->
<!-- This is an auto-generated comment by CodeRabbit -->
| ReactDOM.createRoot(document.getElementById('root')!).render( | ||
| ``` | ||
|
|
||
| Create the root React component. The parameter to `render` is [JSX](https://www.w3schools.com/react/react_jsx.asp), an extension language that uses both HTML and JavaScript/TypeScript. The exclamation point here tells the TypeScript component: "you don't know that `document.getElementById('root')` will be a valid parameter to `ReactDOM.createRoot`, but don't worry - I'm the developer and I'm telling you there will be". |
There was a problem hiding this comment.
The explanation of the exclamation point in TypeScript is accurate but could be simplified for clarity.
Consider rephrasing for better understanding:
- The exclamation point here tells the TypeScript component: "you don't know that `document.getElementById('root')` will be a valid parameter to `ReactDOM.createRoot`, but don't worry - I'm the developer and I'm telling you there will be".
+ The exclamation point (`!`) asserts that `document.getElementById('root')` will not be null, ensuring TypeScript that the element exists.Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| Create the root React component. The parameter to `render` is [JSX](https://www.w3schools.com/react/react_jsx.asp), an extension language that uses both HTML and JavaScript/TypeScript. The exclamation point here tells the TypeScript component: "you don't know that `document.getElementById('root')` will be a valid parameter to `ReactDOM.createRoot`, but don't worry - I'm the developer and I'm telling you there will be". | |
| Create the root React component. The parameter to `render` is [JSX](https://www.w3schools.com/react/react_jsx.asp), an extension language that uses both HTML and JavaScript/TypeScript. The exclamation point (`!`) asserts that `document.getElementById('root')` will not be null, ensuring TypeScript that the element exists. |
| <WagmiConfig config={config}> | ||
| ``` | ||
|
|
||
| The application is also inside [a `WagmiConfig` component](https://wagmi.sh/react/WagmiConfig). [The wagmi (we are going to make it) library](https://wagmi.sh/) connects the React UI definitions with [the viem library](https://viem.sh/) for writing an Ethereum decentralized application. |
There was a problem hiding this comment.
The description of the WagmiConfig component is informative. However, there's a minor spelling mistake with "viem library."
Correct the library name for accuracy:
- [the viem library](https://viem.sh/)
+ [the Vite library](https://vitejs.dev/)Note: Ensure the URL and library name are correct as per the context.
Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| The application is also inside [a `WagmiConfig` component](https://wagmi.sh/react/WagmiConfig). [The wagmi (we are going to make it) library](https://wagmi.sh/) connects the React UI definitions with [the viem library](https://viem.sh/) for writing an Ethereum decentralized application. | |
| The application is also inside [a `WagmiConfig` component](https://wagmi.sh/react/WagmiConfig). [The wagmi (we are going to make it) library](https://wagmi.sh/) connects the React UI definitions with [the Vite library](https://vitejs.dev/) for writing an Ethereum decentralized application. |
| Finally, various definitions related to WAGMI are in `src/wagmi.ts`. I am not going to explain everything here, because most of it is boilerplate you are unlikely to need to change. | ||
|
|
||
| The code here isn't exactly the same as [on github](https://github.com/qbzzt/20230801-modern-ui/blob/main/src/wagmi.ts) because later in the article we add another chain ([Redstone Holesky](https://redstone.xyz/docs/network-info)). | ||
|
|
||
| ```ts | ||
| import { getDefaultWallets } from '@rainbow-me/rainbowkit' | ||
| import { configureChains, createConfig } from 'wagmi' | ||
| import { holesky, sepolia } from 'wagmi/chains' | ||
| ``` | ||
|
|
||
| Import the blockchains the application supports. You can see the list of supported chains [in the viem github](https://github.com/wagmi-dev/viem/tree/main/src/chains/definitions). | ||
|
|
||
| ```ts | ||
| import { publicProvider } from 'wagmi/providers/public' | ||
|
|
||
| const walletConnectProjectId = 'c96e690bb92b6311e8e9b2a6a22df575' | ||
| ``` | ||
|
|
||
| To be able to use [WalletConnect](https://walletconnect.com/) you need a project ID for your application. You can get it [on cloud.walletconnect.com](https://cloud.walletconnect.com/sign-in). | ||
|
|
||
| ```ts | ||
| const { chains, publicClient, webSocketPublicClient } = configureChains( | ||
| [ holesky, sepolia ], | ||
| [ | ||
| publicProvider(), | ||
| ], | ||
| ) | ||
|
|
||
| const { connectors } = getDefaultWallets({ | ||
| appName: 'My wagmi + RainbowKit App', | ||
| chains, | ||
| projectId: walletConnectProjectId, | ||
| }) | ||
|
|
||
| export const config = createConfig({ | ||
| autoConnect: true, | ||
| connectors, | ||
| publicClient, | ||
| webSocketPublicClient, | ||
| }) | ||
|
|
||
| export { chains } | ||
| ``` |
There was a problem hiding this comment.
The explanation of WAGMI configurations is succinct. However, there's a mention of the code not being "exactly the same as on GitHub," which could confuse readers.
Clarify the differences and ensure readers understand any deviations from the GitHub code:
- The code here isn't exactly the same as [on github](https://github.com/qbzzt/20230801-modern-ui/blob/main/src/wagmi.ts) because later in the article we add another chain ([Redstone Holesky](https://redstone.xyz/docs/network-info)).
+ The code here is adapted for tutorial purposes. For the most up-to-date version, please refer to the [GitHub repository](https://github.com/qbzzt/20230801-modern-ui/blob/main/src/wagmi.ts). Changes, such as adding the Redstone Holesky chain, are discussed later in this tutorial.Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| Finally, various definitions related to WAGMI are in `src/wagmi.ts`. I am not going to explain everything here, because most of it is boilerplate you are unlikely to need to change. | |
| The code here isn't exactly the same as [on github](https://github.com/qbzzt/20230801-modern-ui/blob/main/src/wagmi.ts) because later in the article we add another chain ([Redstone Holesky](https://redstone.xyz/docs/network-info)). | |
| ```ts | |
| import { getDefaultWallets } from '@rainbow-me/rainbowkit' | |
| import { configureChains, createConfig } from 'wagmi' | |
| import { holesky, sepolia } from 'wagmi/chains' | |
| ``` | |
| Import the blockchains the application supports. You can see the list of supported chains [in the viem github](https://github.com/wagmi-dev/viem/tree/main/src/chains/definitions). | |
| ```ts | |
| import { publicProvider } from 'wagmi/providers/public' | |
| const walletConnectProjectId = 'c96e690bb92b6311e8e9b2a6a22df575' | |
| ``` | |
| To be able to use [WalletConnect](https://walletconnect.com/) you need a project ID for your application. You can get it [on cloud.walletconnect.com](https://cloud.walletconnect.com/sign-in). | |
| ```ts | |
| const { chains, publicClient, webSocketPublicClient } = configureChains( | |
| [ holesky, sepolia ], | |
| [ | |
| publicProvider(), | |
| ], | |
| ) | |
| const { connectors } = getDefaultWallets({ | |
| appName: 'My wagmi + RainbowKit App', | |
| chains, | |
| projectId: walletConnectProjectId, | |
| }) | |
| export const config = createConfig({ | |
| autoConnect: true, | |
| connectors, | |
| publicClient, | |
| webSocketPublicClient, | |
| }) | |
| export { chains } | |
| ``` | |
| Finally, various definitions related to WAGMI are in `src/wagmi.ts`. I am not going to explain everything here, because most of it is boilerplate you are unlikely to need to change. | |
| The code here is adapted for tutorial purposes. For the most up-to-date version, please refer to the [GitHub repository](https://github.com/qbzzt/20230801-modern-ui/blob/main/src/wagmi.ts). Changes, such as adding the Redstone Holesky chain, are discussed later in this tutorial. | |
| ```ts | |
| import { getDefaultWallets } from '@rainbow-me/rainbowkit' | |
| import { configureChains, createConfig } from 'wagmi' | |
| import { holesky, sepolia } from 'wagmi/chains' |
Import the blockchains the application supports. You can see the list of supported chains in the viem github.
import { publicProvider } from 'wagmi/providers/public'
const walletConnectProjectId = 'c96e690bb92b6311e8e9b2a6a22df575'To be able to use WalletConnect you need a project ID for your application. You can get it on cloud.walletconnect.com.
const { chains, publicClient, webSocketPublicClient } = configureChains(
[ holesky, sepolia ],
[
publicProvider(),
],
)
const { connectors } = getDefaultWallets({
appName: 'My wagmi + RainbowKit App',
chains,
projectId: walletConnectProjectId,
})
export const config = createConfig({
autoConnect: true,
connectors,
publicClient,
webSocketPublicClient,
})
export { chains }
There was a problem hiding this comment.
Review Status
Actionable comments generated: 8
Configuration used: CodeRabbit UI
Files selected for processing (2)
- public/content/developers/tutorials/creating-a-wagmi-ui-for-your-contract/index.md (1 hunks)
- src/lib/utils/md.ts (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- src/lib/utils/md.ts
Additional comments: 17
public/content/developers/tutorials/creating-a-wagmi-ui-for-your-contract/index.md (17)
- 17-17: The spelling of "Etherscan" and "Blockscout" is correct, but ensure these links are valid and lead to the intended pages.
- 17-17: "Ethereans" is the correct term for Ethereum community members, no change needed.
- 54-54: The unpaired symbol warning is a false positive due to the syntax highlighting of the markdown code block.
- 85-85: The explanation regarding the exclamation point in TypeScript is correct and informative, no change needed.
- 97-97: The spelling of "WagmiConfig" and "viem library" is correct within the context of the tutorial, but ensure "viem" is the intended term as it might be a typo for another library or framework.
- 103-103: The spelling of "RainbowKitProvider" is correct, and the explanation is clear.
- 192-192: The spelling of "abitype" is correct, but ensure the link is valid and leads to the intended documentation.
- 223-223: The spelling of "Holesky" and "Sepolia" is correct, but ensure these blockchain names are correctly used within the context of the tutorial.
- 457-457: The spelling of "WAGMI" is correct, but ensure the explanation provided is accurate and clear for readers.
- 25-46: Ensure the instructions for adding the Holesky blockchain and obtaining test ETH are accurate and the links are valid.
- 29-38: The GitHub repository URL in the clone command should be verified to ensure it exists and contains the expected tutorial code.
Verification successful
The GitHub repository
https://github.com/qbzzt/20230801-modern-uiexists and contains files that are typical for a project setup, such as.gitignore,package.json,pnpm-lock.yaml, and various configuration files liketsconfig.jsonandvite.config.ts. Additionally, the presence of asrcdirectory suggests that the repository holds source code, which aligns with the expectation of containing tutorial code for a modern UI project. Based on this information, the GitHub repository URL in the clone command is verified to exist and contains files indicative of the expected tutorial code.* 60-116: The structure and imports in `src/main.tsx` are logically sound, but ensure that the dependencies (`@rainbow-me/rainbowkit`, `wagmi`, etc.) are correctly installed and imported as per the tutorial instructions. * 120-170: In `src/App.tsx`, verify that the `ConnectButton` from `@rainbow-me/rainbowkit` and `useAccount` from `wagmi` are used correctly and that the `Greeter` component is properly imported and utilized. * 172-368: For `src/components/Greeter.tsx`, ensure that the use of hooks (`useState`, `useNetwork`, `useContractRead`, etc.) and the contract interaction logic are correctly implemented and follow best practices for React and Ethereum DApp development. * 455-499: In `src/wagmi.ts`, confirm that the configuration for chains and WalletConnect is correctly set up, and that the `getDefaultWallets`, `configureChains`, and `createConfig` functions from `wagmi` and `@rainbow-me/rainbowkit` are used appropriately. * 503-561: When adding another blockchain, such as Redstone Holesky, ensure that the instructions are clear and that the `defineChain` function from `viem` (if "viem" is the correct term) is used correctly. Also, verify that the contract addresses for the new network are accurately provided. * 1-581: Overall, the tutorial provides a comprehensive guide to building a user interface for Ethereum smart contracts using modern tools. Ensure that the tutorial follows best practices for DApp development, including security considerations, user experience, and maintainability of the code. It's also important to keep the tutorial updated with the latest versions of the tools and libraries used.Scripts Executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Verify the GitHub repository exists and contains the expected content curl -I https://github.com/qbzzt/20230801-modern-ui.gitLength of output: 1302
Script:
#!/bin/bash # List the root directory of the repository to verify the presence of tutorial code curl https://api.github.com/repos/qbzzt/20230801-modern-ui/contents/Length of output: 9197
| lang: en | ||
| --- | ||
|
|
||
| You found a feature we need in the Ethereum ecosystem. You wrote the smart contracts to implement it, and maybe even some related code that runs offchain. This is great! Unfortunately, without a user interface you aren't going to have any users, and the last time you wrote a web site people used dial-up modems and JavaScript was new. |
There was a problem hiding this comment.
"offchain" should be written as one word to maintain consistency with common terminology in the blockchain space.
- offchain
+ off-chainCommittable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| You found a feature we need in the Ethereum ecosystem. You wrote the smart contracts to implement it, and maybe even some related code that runs offchain. This is great! Unfortunately, without a user interface you aren't going to have any users, and the last time you wrote a web site people used dial-up modems and JavaScript was new. | |
| You found a feature we need in the Ethereum ecosystem. You wrote the smart contracts to implement it, and maybe even some related code that runs off-chain. This is great! Unfortunately, without a user interface you aren't going to have any users, and the last time you wrote a web site people used dial-up modems and JavaScript was new. |
Consider changing "web site" to "website" for modern terminology consistency.
- web site
+ websiteCommittable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| You found a feature we need in the Ethereum ecosystem. You wrote the smart contracts to implement it, and maybe even some related code that runs offchain. This is great! Unfortunately, without a user interface you aren't going to have any users, and the last time you wrote a web site people used dial-up modems and JavaScript was new. | |
| You found a feature we need in the Ethereum ecosystem. You wrote the smart contracts to implement it, and maybe even some related code that runs offchain. This is great! Unfortunately, without a user interface you aren't going to have any users, and the last time you wrote a website people used dial-up modems and JavaScript was new. |
|
|
||
| ## Greeter application {#greeter-app} | ||
|
|
||
| There is a lot of theory behind for a modern UI works, and [a lot of good sites](https://react.dev/learn/thinking-in-react) [that explain it](https://wagmi.sh/core/getting-started). Instead of repeating the fine work done by those sites, I'm going to assume you prefer to learn by doing and start with an application you can play with. You still need the theory to get things done, and we'll get to it - we'll just go source file by source file, and discuss things as we get to them. |
There was a problem hiding this comment.
The phrase "behind for a modern UI works" seems to be grammatically incorrect. It might be intended to say "behind how a modern UI works".
- behind for a modern UI works
+ behind how a modern UI worksCommittable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| There is a lot of theory behind for a modern UI works, and [a lot of good sites](https://react.dev/learn/thinking-in-react) [that explain it](https://wagmi.sh/core/getting-started). Instead of repeating the fine work done by those sites, I'm going to assume you prefer to learn by doing and start with an application you can play with. You still need the theory to get things done, and we'll get to it - we'll just go source file by source file, and discuss things as we get to them. | |
| There is a lot of theory behind how a modern UI works, and [a lot of good sites](https://react.dev/learn/thinking-in-react) [that explain it](https://wagmi.sh/core/getting-started). Instead of repeating the fine work done by those sites, I'm going to assume you prefer to learn by doing and start with an application you can play with. You still need the theory to get things done, and we'll get to it - we'll just go source file by source file, and discuss things as we get to them. |
|
|
||
| 1. If necessary, add [the Holesky blockchain](https://chainlist.org/?search=holesky&testnets=true) to your wallet and [get test ETH](https://www.holeskyfaucet.io/). | ||
|
|
||
| 1. Clone the github repository. |
There was a problem hiding this comment.
The capitalization of "GitHub" should be corrected for proper branding.
- github
+ GitHubCommittable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| 1. Clone the github repository. | |
| 1. Clone the GitHub repository. |
|
|
||
| #### `src/main.tsx` {#main-tsx} | ||
|
|
||
| The file extension tells us that this file is a [React component](https://www.w3schools.com/react/react_components.asp) written in [TypeScript](https://www.typescriptlang.org/), an extension of JavaScript that supports [type checking](https://en.wikipedia.org/wiki/Type_system#Type_checking). TypeScript is compiled into JavaScript, so we can use it for client-side execution. |
There was a problem hiding this comment.
Remove unnecessary spaces after opening parentheses in TypeScript code snippets for consistency.
- import '@rainbow-me/rainbowkit/styles.css'
+ import '@rainbow-me/rainbowkit/styles.css';Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| The file extension tells us that this file is a [React component](https://www.w3schools.com/react/react_components.asp) written in [TypeScript](https://www.typescriptlang.org/), an extension of JavaScript that supports [type checking](https://en.wikipedia.org/wiki/Type_system#Type_checking). TypeScript is compiled into JavaScript, so we can use it for client-side execution. | |
| The file extension tells us that this file is a [React component](https://www.w3schools.com/react/react_components.asp) written in [TypeScript](https://www.typescriptlang.org/), an extension of JavaScript that supports [type checking](https://en.wikipedia.org/wiki/Type_system#Type_checking). TypeScript is compiled into JavaScript, so we can use it for client-side execution. |
|
|
||
| Of course, we have to close off the other components. | ||
|
|
||
| #### `src/App.tsx` {#app-tsx} |
There was a problem hiding this comment.
Remove unnecessary spaces after opening parentheses in TypeScript code snippets for consistency.
- import { ConnectButton } from '@rainbow-me/rainbowkit'
+ import { ConnectButton } from '@rainbow-me/rainbowkit';Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| #### `src/App.tsx` {#app-tsx} | |
| #### `src/App.tsx` {#app-tsx} |
|
|
||
| Here we use [`useAccount`](https://wagmi.sh/react/hooks/useAccount) to check if we are connected to a blockchain through a wallet or not. | ||
|
|
||
| By convention, in React functions called `use...` are [hooks](https://www.w3schools.com/react/react_hooks.asp) that return some kind of data. When you use such hooks, not only does your component get the data, but when that data changes the component is re-rendered with the updated information. |
There was a problem hiding this comment.
Remove unnecessary spaces after opening parentheses in TypeScript code snippets for consistency.
- return (
+ return (Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| By convention, in React functions called `use...` are [hooks](https://www.w3schools.com/react/react_hooks.asp) that return some kind of data. When you use such hooks, not only does your component get the data, but when that data changes the component is re-rendered with the updated information. | |
| By convention, in React functions called `use...` are [hooks](https://www.w3schools.com/react/react_hooks.asp) that return some kind of data. When you use such hooks, not only does your component get the data, but when that data changes the component is re-rendered with the updated information. |
|
|
||
| ### Adding another blockchain {#add-blockchain} | ||
|
|
||
| These days there are a lot of [L2 scaling solution](https://ethereum.org/en/layer-2/), and you might want to support some that viem does not support yet. To do it, you modify `src/wagmi.ts`. These instructions explain how to add [Redstone Holesky](https://redstone.xyz/docs/network-info). |
There was a problem hiding this comment.
The spelling of "viem" might be incorrect or a typo. Confirm if it's the intended term or if it should be corrected.
- viem
+ the correct term (e.g., "Vite", "Wagmi", or another intended term)Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.
| These days there are a lot of [L2 scaling solution](https://ethereum.org/en/layer-2/), and you might want to support some that viem does not support yet. To do it, you modify `src/wagmi.ts`. These instructions explain how to add [Redstone Holesky](https://redstone.xyz/docs/network-info). | |
| These days there are a lot of [L2 scaling solution](https://ethereum.org/en/layer-2/), and you might want to support some that the correct term (e.g., "Vite", "Wagmi", or another intended term) does not support yet. To do it, you modify `src/wagmi.ts`. These instructions explain how to add [Redstone Holesky](https://redstone.xyz/docs/network-info). |
There was a problem hiding this comment.
@qbzzt Apologies for the delay to get this reviewed, but this looks great!
I added a couple commits to update it with dev and get the page rendering (few technical debt things we still need to clean up for new pages since the Next.js migration).
The path name was -for-you-contract so I updated that to -for-your-contract. Also updated the heading levels... this pages are set up to only allow a single <h1> on any page, and for tutorials this is pulled from the title front matter property. As such, we can't use any single # in the markdown itself, so I bumped all of these up one level as the simplest fix.
Lastly, added sidebarDepth: 3 to the front matter so the table of contents is more useful (shows deeper), especially after bumping the heading levels.
Approving and gonna pull this in!
If we want, we could work on cleaning up the headers separately so they don't go to h5, but I don't see that as a reason to hold this up any longer in the meantime. Nice job! 🙏
|
Congrats, your important contribution to this open-source project has earned you a GitPOAP! Be sure to join the Ethereum.org discord if you are interested in contributing further to the project or have any questions for the team. GitPOAP: 2024 Ethereum.org Contributor: Head to gitpoap.io & connect your GitHub account to mint! Learn more about GitPOAPs here. |
|
Thank you
…On Wed, Mar 13, 2024 at 5:48 PM Paul Wackerow ***@***.***> wrote:
Merged #11682
<#11682> into dev.
—
Reply to this email directly, view it on GitHub
<#11682 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ADBCGGOZWC4ET6NW2YCC34DYYDJVPAVCNFSM6AAAAAA7QOSZOCVHI2DSMVQWIX3LMV45UABCJFZXG5LFIV3GK3TUJZXXI2LGNFRWC5DJN5XDWMJSGEYTAMBTGY2TKMI>
.
You are receiving this because you were mentioned.Message ID:
***@***.***
com>
|
Thank you! I'll get back to the types of storage article (#6491). |
|
What about the coderabbitai suggestions? Should I go over them and see which ones make sense, and submit as a separate PR? |
|
Not a requirement, but if you see any that you'd like to incorporate by all means! |
Using modern components such as TypeScript, React, Vite, and Wagmi, we will go over a modern, but minimal, user interface and learn how to connect a wallet to the user interface, call a smart contract to read information, send a transaction to a smart contract, and monitor events from a smart contract to identify changes.
Description
The completed article
Related Issue
Closing #10489
Summary by CodeRabbit
New Features
Documentation