feat: rainbow button (#1569)

* feat: rainbow button

* rainbow button styling

* example: with-next-wallet-button

* feat: @rainbow-me/button migration

* altered example

* example: updated with-next-rainbow-button

* minimum rainbowkit version

* mounted state to fix next hydration error

* removed defaultProps WalletButton, wallet required

* fix: merge conflicts

* fix: include projectId

* fix: filter array before return

* fix: cleanup proviers, UI bugs and // @ts-ignore

* fix: rename components

* fix: bring back wagmi

* feat: update example page with custom button and update prop names

* feat: push latest changes with UI fix on desktop and new mobile ui

* fix: remove unused code

* fix: ModalSizeProvider props

* fix: reinstall

* fix: reinstall

* fix: update wagmi and viem

* fix: prevent useEffect firing twice on intial render for react strict mode development

* fix: quick pr review fixes

* feat: add loading state, error handling and choose first connector

* fix: biome format

* fix: biome format

* fix: @ts-ignore

* fix: error handling, loading state and UX improvement

* PR reviews feedback

* feat: add loading state animations and UI fix

* feat: cleanup

* feat: cleanup

* fix: wallet buttons example section

* refactor: rainbowbutton api/props

* fix: check if injected is ready on desktop

* fix: if extension not installed for custom connector show them download option

* fix: show qr code and steps if wallet no installed

* fix: double useEffect call

* fix: error message

* feat: adding custom connector connected badge

* fix: add only popular wallets for custom wallet button

* feat: changeset version

* feat: improve UI / UX for WalletButton API and do proper coinbase wallet injection check

* fix: make other wallet be disabled if one wallet is already connecting

* fix: change i18n text for WalletButton component

* chore: rename package to @rainbow-me/rainbow-button

* fix: clean script

* fix: rainbow-button styles.css export

* fix: migrate rainbowkit to dependency of rainbow-button

* fix: rainbow-button peerDependencies mirror rainbowkit

* chore: add package keywords

* revert: error state

* refactor: borrow chain connection indicator component

* revert: coinbase wallet changes in favor of sister PR

* chore: clarify provider wrapper comment

* fix: button provider prop specificity

* chore: adjusted changesets

* fix: versioning so that changeset bumps to 0.1.0

* fix: react hydration error

* fix: detect if rainbow connector exists

* feat: next.js project - with-next-wallet-button

* feat: added unit test for WalletButton component

* feat: added unit test for WalletButton component

* fix: undo package.json

* fix: wallet-button example inconsistencies

* fix: remove unecessary wallet button connectors in example

* fix: amend example with WalletButton, WalletButton.Custom, Wagmi buttons

* fix: isMounted cleanup and Next type issue

* fix: nextpage type issue

* chore: remove env project id from examples

* chore: add missing codesandbox example configs

* chore: remove eslint-disable overrides

* fix: @wagmi/core import should only include types

* fix: rainbowconnector option types

* refactor: connectorsForWallets overload for walletbutton

* docs: walletbutton and rainbow-button placeholders

* docs: walletbutton demo

* fix: use client for rainbow-button package

* chore: remove unclear comment

* chore: refactor MobileStatus flow

* chore: refactor walletbuttoncontext

* chore: upgrade examples depens

* revert: 310 size in design system

* fix: dev scripts for rainbow-button package

* fix: clean script

* fix: styling bundle build watch error

* fix: disconnect button hydration error

---------

Co-authored-by: Daniel Sinclair <d@niel.nyc>

.changeset/sharp-feet-glow.md

@@ -0,0 +1,5 @@
+---
+"example": patch
+---
+
+Added 'Wallet buttons' section to test `WalletButton` API and added `RainbowButton` and `RainbowButton.Custom` examples

.changeset/spicy-readers-yawn.md

@@ -0,0 +1,65 @@
+---
+"@rainbow-me/rainbow-button": minor
+---
+
+The `RainbowButton` component is the simplest way to add support for Rainbow Wallet to dApps that use `wagmi` and prefer a more custom connector experience over [RainbowKit](https://www.rainbowkit.com/docs/installation).
+
+**1. Install `@rainbow-me/rainbow-button` and its peer dependencies**
+
+The package is compatible with Next.js, React, and Vite. Ensure that you follow peer dependency warnings.
+
+```bash
+npm install @rainbow-me/rainbow-button wagmi viem
+```
+
+**2. Configure with Wagmi and install the RainbowButton**
+
+Pass an instance of the `RainbowConnector` to your Wagmi connector list, and wrap your app in the `RainbowButtonProvider`. Then drop-in the `RainbowButton` component into your wallet list.
+
+```tsx
+import '@rainbow-me/rainbow-button/styles.css';
+import { RainbowButtonProvider, RainbowConnector } from "@rainbow-me/rainbow-button";
+
+const wagmiClient = createConfig({
+  connectors: [new RainbowConnector({ chains, projectId })],
+  publicClient
+});
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <WagmiConfig config={wagmiClient}>
+      <RainbowButtonProvider>
+        {/* Your App */}
+      </RainbowButtonProvider>
+    </WagmiConfig>
+  );
+};
+
+export const YourApp = () => {
+  return <RainbowButton />;
+};
+```
+
+You can also use the `RainbowButton.Custom` component for custom implementations and styling.
+
+```tsx
+<RainbowButton.Custom>
+  {({ ready, connect }) => {
+    return (
+      <button
+        type="button"
+        disabled={!ready}
+        onClick={connect}
+      >
+        Connect Rainbow
+      </button>
+    );
+  }}
+</RainbowButton.Custom>
+```
+
+**3. And that's it!**
+
+Now your users can enjoy a seamless connection experience for Rainbow — without any maintenance or headaches.
+
+A [`WalletButton`](https://www.rainbowkit.com/docs/wallet-button) component is also available in [RainbowKit](https://www.rainbowkit.com/docs/installation) if you'd like to adopt support for additional wallets.

.changeset/tame-eagles-hunt.md

@@ -0,0 +1,33 @@
+---
+"@rainbow-me/rainbowkit": minor
+---
+
+The new `WalletButton` component helps dApps with custom wallet list implementations adopt RainbowKit and all of it's maintenance-free benefits.
+
+```tsx
+import { WalletButton } from '@rainbow-me/rainbowkit';
+
+<WalletButton wallet="rainbow" />
+<WalletButton wallet="metamask" />
+<WalletButton wallet="coinbase" />
+```
+
+Like the `ConnectButton`, the `WalletButton.Custom` component is available for custom implementations and styling.
+
+```tsx
+<WalletButton.Custom wallet="rainbow">
+  {({ ready, connect }) => {
+    return (
+      <button
+        type="button"
+        disabled={!ready}
+        onClick={connect}
+      >
+        Connect Rainbow
+      </button>
+    );
+  }}
+</WalletButton.Custom>
+```
+
+Most dApps are best served by the [ConnectButton](https://www.rainbowkit.com/docs/connect-button). Reference the docs [here](https://www.rainbowkit.com/docs/wallet-button) for more information about `WalletButton` adoption and usecases.

examples/with-next-rainbow-button/.codesandbox/tasks.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://codesandbox.io/schemas/tasks.json",
+  "setupTasks": ["yarn add @rainbow-me/rainbow-button@latest", "yarn build"],
+  "tasks": {
+    "install-dependencies": {
+      "name": "Install Dependencies",
+      "command": "yarn add @rainbow-me/rainbow-button@latest"
+    },
+    "start-app": {
+      "name": "Run Dev Server",
+      "command": "yarn dev",
+      "runAtStart": true
+    }
+  }
+}

examples/with-next-rainbow-button/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

examples/with-next-rainbow-button/.gitignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo

examples/with-next-rainbow-button/README.md

@@ -0,0 +1,30 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

examples/with-next-rainbow-button/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/with-next-rainbow-button/next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+};
+
+module.exports = nextConfig;

examples/with-next-rainbow-button/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "with-next-rainbow-button",
+  "private": true,
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@rainbow-me/rainbow-button": "workspace:*",
+    "next": "^13.4.19",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "viem": "~1.19.4",
+    "wagmi": "~1.4.7"
+  },
+  "devDependencies": {
+    "@types/node": "^18.18.10",
+    "@types/react": "^18.2.37",
+    "eslint": "^8.15.0",
+    "eslint-config-next": "^13.4.19",
+    "typescript": "^5.0.4"
+  }
+}

examples/with-next-rainbow-button/pages/_app.tsx

@@ -0,0 +1,33 @@
+import "../styles/global.css";
+import "@rainbow-me/rainbow-button/styles.css";
+import type { AppProps } from "next/app";
+import { configureChains, createConfig, WagmiConfig } from "wagmi";
+import { mainnet } from "wagmi/chains";
+import { publicProvider } from "wagmi/providers/public";
+import { RainbowButtonProvider, RainbowConnector } from "@rainbow-me/rainbow-button";
+
+const { chains, publicClient, webSocketPublicClient } = configureChains(
+  [mainnet],
+  [publicProvider()]
+);
+
+const projectId = "YOUR_PROJECT_ID";
+
+const wagmiClient = createConfig({
+  autoConnect: true,
+  connectors: [new RainbowConnector({ chains, projectId })],
+  publicClient,
+  webSocketPublicClient,
+});
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <WagmiConfig config={wagmiClient}>
+      <RainbowButtonProvider>
+        <Component {...pageProps} />
+      </RainbowButtonProvider>
+    </WagmiConfig>
+  );
+}
+
+export default MyApp;

examples/with-next-rainbow-button/pages/index.tsx

@@ -0,0 +1,31 @@
+
+import type { NextPage } from "next";
+import { useEffect, useState } from "react";
+import { useAccount, useDisconnect } from "wagmi";
+import { RainbowButton } from "@rainbow-me/rainbow-button";
+
+const Home: NextPage = () => {
+  const { isConnected } = useAccount();
+  const { disconnect } = useDisconnect();
+
+  const [isMounted, setIsMounted] = useState(false);
+  useEffect(() => setIsMounted(true), []);
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100vh',
+        gap: 10,
+      }}
+    >
+      <RainbowButton />
+      {isMounted && isConnected && <button onClick={() => disconnect()}>Disconnect</button>}
+    </div>
+  )
+};
+
+export default Home;

examples/with-next-rainbow-button/styles/global.css

@@ -0,0 +1,8 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

examples/with-next-rainbow-button/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}

examples/with-next-wallet-button/.codesandbox/tasks.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://codesandbox.io/schemas/tasks.json",
+  "setupTasks": ["yarn add @rainbow-me/rainbowkit@latest", "yarn build"],
+  "tasks": {
+    "install-dependencies": {
+      "name": "Install Dependencies",
+      "command": "yarn add @rainbow-me/rainbowkit@latest"
+    },
+    "start-app": {
+      "name": "Run Dev Server",
+      "command": "yarn dev",
+      "runAtStart": true
+    }
+  }
+}

examples/with-next-wallet-button/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

examples/with-next-wallet-button/.gitignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo