Adds RainbowKit to Integrations > Wallets #956
Conversation
There was a problem hiding this comment.
Overall, great job! I really liked the customization section and being able to default to Moonbase and show different Moonbeam-themed colors. A couple of things:
- If you can use the syntax for adding in lines, please do so! You can actually add the comments above the snippet syntax so that will allow you to manually specify comments
- If using comments, make sure to add a space between the slashes and the text and capitalize the first letter in the comment, i.e.,
// This is a comment - For images, some of them looked a little blurry. Not sure why that happened, but could you try taking those again?
- Also for images, the green background on your chrome window is not ideal. Can you please create another chrome profile and set it to a dark background? You can see other screenshots on the docs as example, but thats the easiest way I've found to keep all the screenshots consistent
- For the arrows on the images - two different colors were used, but I'd prefer to use one. I know it says in the standards guide to use brand colors and to default to the style guide in the repo haha but that's not really there yet, so that's my fault. Typically, we have one color for dark backgrounds and another for light (but we may not need that... I'll have to test out the new brand colors)
Adds suggestions from the initial review. I will update the content per conversation comments in a separate commit. Co-authored-by: Erin Shaben <[email protected]>
…t' into dawn/add-rainbow-kit
|
@dawnkelly09 - I'm working my way down the list of PRs finally haha. I know we've synced about this. But just let me know when this is ready to review again 🙂 |
.snippets/code/builders/integrations/wallets/rainbowkit/terminal/cli-quickstart.md
Outdated
Show resolved
Hide resolved
|
|
||
| You can connect your MetaMask mobile wallet to the Moonbase Alpha TestNet in a couple of ways. You can manually add the Moonbase Alpha TestNet configurations from the **Networks** section of the **Settings** menu. Or you can also open up the **Browser** from MetaMask mobile and navigate to [docs.moonbeam.network](/){target=\_blank}, click on **Connect MetaMask** at the top of the page, and select **Moonbase Alpha** from the menu. Follow the prompts to automatically add Moonbase Alpha as a custom network without manually inputting the network configurations. | ||
|
|
||
| Next, add a file called `.env.local` to your root project directory to store your WalletConnect `projectId`. Ensure your project contains a `.gitignore` file in this same directory and `.env*.local` is added to the list of files to ignore. Add your `projectId` to the `.env.local` file as follows: |
There was a problem hiding this comment.
It should really be steps. You should be able to indent the snippets by 2 or 4 spaces and the numbers will render as they should
| - An existing dApp built with [React](https://react.dev/){target=\_blank} and you want to use the manual setup to connect to a mobile wallet via RainbowKit | ||
|
|
||
| - This example uses [Next.js](https://nextjs.org/docs){target=\_blank} with Typescript and the App Router. You can find examples for additional frameworks in the [RainbowKit examples repository](https://github.com/rainbow-me/rainbowkit/tree/main/examples){target=\_blank} |
There was a problem hiding this comment.
I'm a bit conflicted about the wording of these two bullet points. I read "This guide assumes you have an existing dApp built with React" and was like, ok great. Then I read that the example uses Next.js and App Router, fine. I assumed that adding those pieces would be part of the tutorial as we went, but they weren't. So I just feel like this needs to be more concise and like "You need a React project with Next.js, TypeScript, and the App Router"
There was a problem hiding this comment.
See if this is more clear now. I'm trying to convey they can use their preferred framework but, if they want the code example to work they should set it up a certain way.
There was a problem hiding this comment.
Yeah, that looks great! Thank you!
Description
This guide introduces RainbowKit and instructs the user on how to integrate Moonbeam support using the prebuilt app scaffolding or the manual build for a more custom integration
Checklist
Corresponding PRs
None
After Translation Requirements
moonbeam-docsrepo to remove imagesmoonbeam-docsrepo to remove variablesmoonbeam-mkdocsrepo to add redirects for Chinese siteItems to be Updated
Please list any of the items that will need to be added or deleted after the translations are done here.