Content for Frontend Setup in Base Camp

apps/base-docs/base-camp/docs/frontend-setup/building-an-onchain-app.md

@@ -0,0 +1,216 @@
+---
+title: Building an Onchain App
+description: Learn step-by-step how to turn a regular template app into an onchain app with a wallet connection.
+hide_table_of_contents: false
+---
+
+While it's convenient and fast to start from a template, the template may not fit your needs. Whether you prefer a different stack, or have already started building the traditional web components of your app, it's common to need to manually add onchain libraries to get your app working.
+
+In this guide, we'll build the beginnings of an app similar to the one created by the [RainbowKit] quick start, but we'll do it piece by piece. You can follow along, and swap out any of our library choices with the ones you prefer.
+
+---
+
+## Objectives
+
+By the end of this guide you should be able to:
+
+- Identify the role of a wallet aggregator in an onchain app
+- Debate the pros and cons of using a template
+- Add a wallet connection to a standard template app
+
+---
+
+## Creating the Traditional App
+
+Start by running the [Next.js] script to create a Next.js 13 app:
+
+```bash
+npx create-next-app@13 --use-yarn
+```
+
+:::info
+We're using specific versions of Next.js, wagmi, and viem to ensure things work as expected. It's generally a good idea to give new major versions a few months to settle, and in the fast-moving world of onchain apps, this is doubly true.
+:::
+
+This script will accept `.`, if you want to add the project to the root of a folder you've already created. Otherwise, name your project. Select each option in the generation script as you see fit. We recommend the following selections:
+
+- Use Typescript?: Yes
+- Use ESLint?: Yes
+- Use Tailwind?: Your preference
+- Use `src/` directory?: Yes
+- Use App Router?: **No**
+- Customize the default import alias?: No
+
+:::caution
+For now, we recommend that you **DO NOT** use App Router. If you do, you'll need to debug some additional config and dependency issues that are out of the scope of this guide.
+:::
+
+:::info
+
+The default Next.js script installs [Tailwind]. [RainbowKit]'s does not.
+
+:::
+
+Run your app with `yarn dev` to make sure it generated correctly.
+
+### Manually Installing RainbowKit, Wagmi, and Viem
+
+The [quick start] guide for RainbowKit also contains step-by-step instructions for manual install. We'll be following an adjusted version here. Most of the setup is actually for configuring [wagmi], which sits on top of [viem] and makes it much easier to write React that interacts with the blockchain.
+
+Start by installing the dependencies. Once again, we'll use specific versions to ensure compatibility. Update your `package.json` dependencies to include:
+
+```json
+    "@rainbow-me/rainbowkit": "^1.3.0",
+    "viem": "^1.19.7",
+    "wagmi": "^1.4.5"
+```
+
+Then run:
+
+```bash
+yarn install
+```
+
+:::info
+Onchain libraries and packages tend to require very current versions of Node. If you're not already using it, you may want to install [nvm].
+:::
+
+## Adding Imports, Connectors, Config
+
+In Next.js 13 with the pages router, the root of your app is found in `src/pages/_app_.tsx`, if you followed the recommended setup options. As we want the blockchain provider context to be available for the entire app, we'll add it here.
+
+### Imports
+
+Start with the imports:
+
+```typescript
+import '@rainbow-me/rainbowkit/styles.css';
+import { getDefaultWallets, RainbowKitProvider } from '@rainbow-me/rainbowkit';
+import { configureChains, createConfig, WagmiConfig } from 'wagmi';
+import { mainnet, base, baseGoerli } from 'wagmi/chains';
+import { publicProvider } from 'wagmi/providers/public';
+```
+
+:::caution
+If you're adapting this guide to a different set of libraries or platforms, you may need to import `styles.css` differently. You'll know this is the case if you get ugly text at the bottom of the page instead of a nice modal when you click the connect button.
+:::
+
+### Connectors
+
+Now, we'll configure the chains, wallet connectors, and providers for your app. We'll use the [`publicProvider`] for now, to get started. See our guide on [Connecting to the Blockchain] for more information on blockchain providers.
+
+```typescript
+const { chains, publicClient } = configureChains([mainnet, base, baseGoerli], [publicProvider()]);
+```
+
+The default connectors provided by RainbowKit automatically enable the most popular wallets, so we'll add that next:
+
+```typescript
+const { connectors } = getDefaultWallets({
+  appName: 'My RainbowKit App',
+  projectId: 'YOUR_PROJECT_ID',
+  chains,
+});
+```
+
+You'll need a `projectId` from [Wallet Connect Cloud], which you can get for free on their site. Make sure to insert it in the appropriate place.
+
+```danger
+Remember, everything on the frontend is public!  Be sure to configure the allowlist for your WalletConnect id!
+```
+
+### Config
+
+Finally, add the config for wagmi:
+
+```typescript
+const wagmiConfig = createConfig({
+  autoConnect: true,
+  connectors,
+  publicClient,
+});
+```
+
+Setting `autoConnect` to `true` will allow your app to automatically reconnect users once they connect for the first time. Most people want this.
+
+## Wrapping Context Providers
+
+You can now wrap your app with the context providers for RainbowKit and wagmi. This will make your connection to the blockchain available throughout your entire app without needing to pass anything through props.
+
+```typescript
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <WagmiConfig config={wagmiConfig}>
+          <RainbowKitProvider chains={chains}>{children}</RainbowKitProvider>
+        </WagmiConfig>
+      </body>
+    </html>
+  );
+}
+```
+
+## Adding the Connect Button
+
+You're now ready to add your connect button. You can do this anywhere in your app, thanks to the `RainbowKitProvider`. Common practice would be to place the button in your app's header. Since the Next.js template doesn't have one, we'll just add it to the top of the automatically generated page, rather than spending time implementing React components.
+
+Open up `index.tsx`, and import the `ConnectButton`:
+
+```typescript
+import { ConnectButton } from '@rainbow-me/rainbowkit';
+```
+
+Then, simply add the `ConnectButton` component at the top of the first `<div>`:
+
+```typescript
+// This function has been simplified to save space.
+export default function Home() {
+  return (
+    <main
+      className={`flex min-h-screen flex-col items-center justify-between p-24 ${inter.className}`}
+    >
+      <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
+        <ConnectButton />
+        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
+          Get started by editing&nbsp;
+          <code className="font-mono font-bold">src/pages/index.tsx</code>
+        </p>
+      </div>
+    </main>
+  );
+}
+```
+
+Run your app with `yarn dev`, and you should be able to use the RainbowKit connect button to connect with your wallet and switch between networks.
+
+You use the [Connect Button] props to modify its properties, or you can [customize the connect button] extensively. Some users dislike having the connect button display their token balance. Try disabling it with:
+
+```typescript
+<ConnectButton showBalance={false} />
+```
+
+---
+
+## Conclusion
+
+In this guide, you've learned how to assemble your onchain app from several pieces. You can use this knowledge to integrate a wallet connection with an existing site, or adjust the stack to meet your preferences. Finally, you've learned how to insert and customize the connect button.
+
+If you're looking to quickly bootstrap a simple app, you can always use a script, such as the RainbowKit [quit start]. If you're looking for a robust start for a consumer application, check out our [Build Onchain Apps] template!
+
+---
+
+[RainbowKit]: https://www.rainbowkit.com/
+[wagmi]: https://wagmi.sh/
+[viem]: https://viem.sh/
+[quick start]: https://www.rainbowkit.com/docs/installation
+[Next.js]: https://nextjs.org/
+[Tailwind]: https://tailwindcss.com/
+[nvm]: https://github.com/nvm-sh/nvm
+[WalletConnect]: https://cloud.walletconnect.com/
+[Connecting to the Blockchain]: https://docs.base.org/connecting-to-the-blockchain/overview
+[Wallet Connect Cloud]: https://cloud.walletconnect.com/
+[`publicProvider`]: https://wagmi.sh/react/providers/public
+[Connect Button]: https://www.rainbowkit.com/docs/connect-button
+[customize the connect button]: https://www.rainbowkit.com/docs/custom-connect-button
+[Build Onchain Apps]: https://github.com/coinbase/build-onchain-apps

apps/base-docs/base-camp/docs/frontend-setup/wallet-connectors.md

@@ -0,0 +1,67 @@
+---
+title: Wallet Connectors
+description: Learn about how wallet connector libraries aggregate wallets and make it easier to connect to them from your app.
+hide_table_of_contents: false
+---
+
+One of the most intimidating tasks when building an onchain app is making that initial connection between your users' wallets, and your app. Initial research often surfaces a bewildering number of wallets, each with their own SDKs, and own methods to manage the connection. Luckily, you don't actually need to manage all of this on your own. There are a number of libraries specialized in creating a smooth and beautiful user experience to facilitate this connection.
+
+---
+
+## Objectives
+
+By the end of this guide you should be able to:
+
+- Identify the role of a wallet aggregator in an onchain app
+- Debate the pros and cons of using a template
+- Scaffold a new onchain app with RainbowKit
+
+---
+
+## Connecting to the Blockchain
+
+One of the many challenging tasks of building a frontend that can interface with your smart contracts is managing the user's connection between your onchain app and their [EOA] wallet. Not only is there an ever-growing suite of different wallets, but users can (and probably should!) use several different addresses within the same wallet app.
+
+[Rainbowkit] is one of several options that makes this a little bit easier by serving as an aggregator of wallets, and handling some of the details of connecting them. Alternatives include [ConnectKit], and [Dynamic], which are both excellent choices as well.
+
+Each of these include customizable UI/UX components for inviting the user to connect, displaying connection status, and selecting which wallet they wish to use.
+
+### Using the Quick Start
+
+If you're just trying to get up and running as quickly as possible, you can use RainbowKit's [quick start] script to scaffold an app from their template, with a single command. If you're using Yarn:
+
+```bash
+yarn create @rainbow-me/rainbowkit
+```
+
+:::info
+
+The script doesn't accept `.` as a project name, so you'll want to run this script in your `src` directory, or wherever you keep your projects. It will create a folder with the same name as your project, and install the project files inside.
+
+:::
+
+Once it's done, simply run the app with:
+
+```bash
+yarn run dev
+```
+
+Using the script is fast, but it does mean less choice. In this case, it builds the app on top of [Next.js], which is great if you want to use it, but not helpful if you prefer to work from a different framework, such as [Create React App], or [Remix]. The script also doesn't help you if you want to add an onchain integration to an existing site.
+
+---
+
+## Conclusion
+
+In this article, you've learned how libraries such as [Rainbowkit], [ConnectKit], and [Dynamic], aggregate wallets and make it easier for you to connect your app to your users' wallet of choice. You've also learned how you can use a template to quickly create the foundation of your app. Finally, you've learned that the cost of using a template is that it does make some choices for you.
+
+---
+
+[RainbowKit]: https://www.rainbowkit.com/
+[wagmi]: https://wagmi.sh/
+[wallet]: https://ethereum.org/en/developers/docs/accounts/
+[ConnectKit]: https://ethereum.org/en/developers/docs/accounts/
+[Dynamic]: https://www.dynamic.xyz/
+[quick start]: https://www.rainbowkit.com/docs/installation
+[Next.js]: https://nextjs.org/
+[Create React App]: https://create-react-app.dev/
+[Remix]: https://remix.run/