berachain · larrythecucumber321 · Apr 3, 2024 · Apr 5, 2024 · Apr 5, 2024 · Apr 5, 2024
diff --git a/apps/magic-rainbow/CHANGELOG.md b/apps/magic-rainbow/CHANGELOG.md
diff --git a/apps/magic-rainbow/README.md b/apps/magic-rainbow/README.md
@@ -0,0 +1,50 @@
+# Berachain with Magic Wallet and RainbowKit
+
+[Magic](https://magic.link/) offers passwordless Ethereum wallets and provides authentication options such as email and social login (Google, Facebook, etc). [RainbowKit](https://www.rainbowkit.com/) is a React library offering an intuitive wallet-connection interface.
+
+This repository provides a guide on integrating Magic with RainbowKit on Berachain Testnet.
+
+👉 Try the [demo](https://stunning-bubblegum-33f884.netlify.app/)
+
+## Requirements
+
+- Node v20.11.0
+- pnpm (or another prefered package manager)
+- Wallet with testnet $BERA tokens - See the [Berachain Artio Faucet](https://artio.faucet.berachain.com)
+
+## Getting Started
+
+### 1 - Install Dependencies
+
+```bash
+# FROM: ./magic-rainbow
+
+pnpm install;
+```
+
+### 2 - Get Magic API Key
+
+Go to [https://dashboard.magic.link/signup](https://dashboard.magic.link/signup]), sign up for an account, create an app on Berachain to get an API key.
+
+![Magic Signup](./README/magic-signup.png)
+
+### 3 - Replace API Key
+
+In `./src/index.tsx`, replace `YOUR_MAGIC_API_KEY` with the API key obtained from the Magic dashboard.
+
+### 4 - Run App
+
+```bash
+# FROM: ./magic-rainbow
+
+pnpm start;
+```
+
+### 5 - Send Transaction Using Magic Wallet
+
+1. In the running app, click the "Connect Wallet" button and select "Magic". Follow the prompts to sign in to your Magic wallet.
+2. Copy the connected Magic wallet address
+3. Send testnet $BERA tokens to the connected Magic wallet address
+4. Use the form to send testnet $BERA tokens to another address from the connected Magic wallet
+
+![Magic Successful Transaction](./README/magic-successful-transaction.png)
diff --git a/apps/magic-rainbow/README/magic-signup.png b/apps/magic-rainbow/README/magic-signup.png
diff --git a/apps/magic-rainbow/README/magic-successful-transaction.png b/apps/magic-rainbow/README/magic-successful-transaction.png
diff --git a/apps/magic-rainbow/package.json b/apps/magic-rainbow/package.json
@@ -0,0 +1,54 @@
+{
+  "name": "magic-rainbow",
+  "version": "1.0.0",
+  "private": true,
+  "dependencies": {
+    "@magiclabs/wagmi-connector": "^2.0.0",
+    "@rainbow-me/rainbowkit": "^2.0.5",
+    "@tanstack/react-query": "^5.28.14",
+    "@testing-library/jest-dom": "^6.2.0",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.2",
+    "@types/node": "^18.19.3",
+    "@types/react": "^18.2.64",
+    "@wagmi/core": "^2.6.15",
+    "buffer": "npm:[email protected]",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "typescript": "5.4.2",
+    "util": "0.12.4",
+    "viem": "^2.9.9",
+    "wagmi": "^2.5.18",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "dev": "react-scripts start",
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!@rainbow-me)/\"",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@types/react-dom": "^18.2.24"
+  }
+}
diff --git a/apps/magic-rainbow/public/favicon.ico b/apps/magic-rainbow/public/favicon.ico
diff --git a/apps/magic-rainbow/public/index.html b/apps/magic-rainbow/public/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Magic + Berachain</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/apps/magic-rainbow/public/logo192.png b/apps/magic-rainbow/public/logo192.png
diff --git a/apps/magic-rainbow/public/logo512.png b/apps/magic-rainbow/public/logo512.png
diff --git a/apps/magic-rainbow/public/manifest.json b/apps/magic-rainbow/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "RainbowKit App",
+  "name": "RainbowKit App Example",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/apps/magic-rainbow/public/robots.txt b/apps/magic-rainbow/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/apps/magic-rainbow/src/App.tsx b/apps/magic-rainbow/src/App.tsx
@@ -0,0 +1,18 @@
+import { ConnectButton } from "@rainbow-me/rainbowkit";
+import { useAccount } from "wagmi";
+import SendTransaction from "./SendTransaction";
+
+const App = () => {
+  const { isConnected } = useAccount();
+
+  return (
+    <div className="App">
+      <h1>Magic + RainbowKit + Berachain</h1>
+      <h2>🪄🌈🐻⛓️</h2>
+      <ConnectButton />
+      {isConnected && <SendTransaction />}
+    </div>
+  );
+};
+
+export default App;
diff --git a/apps/magic-rainbow/src/RainbowMagicConnector.ts b/apps/magic-rainbow/src/RainbowMagicConnector.ts
@@ -0,0 +1,41 @@
+import { dedicatedWalletConnector } from "@magiclabs/wagmi-connector";
+import { Wallet, WalletDetailsParams } from "@rainbow-me/rainbowkit";
+
+import { Chain } from "wagmi/chains";
+import { createConnector as createWagmiConnector } from "wagmi";
+
+export const getRainbowMagicWallet = (options: any) => {
+  return () => rainbowMagicWallet(options);
+};
+
+export const rainbowMagicWallet = ({
+  chains,
+  apiKey,
+}: {
+  chains: Chain[];
+  apiKey: string;
+}): Wallet => ({
+  id: "magic",
+  name: "Magic",
+  rdns: "Magic",
+  iconUrl: "https://dashboard.magic.link/images/logo.svg",
+  iconBackground: "#fff",
+  installed: true,
+  downloadUrls: {},
+  createConnector: (walletDetails: WalletDetailsParams) =>
+    createWagmiConnector((config) => ({
+      ...dedicatedWalletConnector({
+        chains: chains,
+        options: {
+          apiKey: apiKey,
+          magicSdkConfiguration: {
+            network: {
+              rpcUrl: "https://artio.rpc.berachain.com",
+              chainId: 80085,
+            },
+          },
+        },
+      })(config),
+      ...walletDetails,
+    })),
+});
diff --git a/apps/magic-rainbow/src/SendTransaction.tsx b/apps/magic-rainbow/src/SendTransaction.tsx
@@ -0,0 +1,78 @@
+import { Address, parseEther } from "viem";
+
+import { useState } from "react";
+import { useSendTransaction, useWaitForTransactionReceipt } from "wagmi";
+import { getClient } from "@wagmi/core";
+import { config } from "./index";
+
+const Divider = () => {
+  return <div className="divider" />;
+};
+
+const SendTransaction = () => {
+  const client = getClient(config);
+  const [address, setAddress] = useState<Address | string>("");
+  const [amount, setAmount] = useState<string>("0.001");
+  const { data: hash, sendTransaction, error } = useSendTransaction();
+
+  const submitSend = async () => {
+    sendTransaction({ to: address as Address, value: parseEther(amount) });
+  };
+
+  const { isLoading, isSuccess, data } = useWaitForTransactionReceipt({
+    hash,
+  });
+
+  return (
+    <>
+      <h2>Send BERA</h2>
+      <div className={"send-container"}>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            submitSend();
+          }}
+        >
+          <input
+            value={address || ""}
+            placeholder="Receiving Address"
+            onChange={(e) => setAddress(e.target.value as Address)}
+          />
+          <input
+            value={amount}
+            placeholder="Amount of BERA"
+            onChange={(e) => setAmount(e.target.value as string)}
+          />
+          <button
+            className="submit-button"
+            disabled={isLoading || !sendTransaction || !address || !amount}
+            type="submit"
+          >
+            {isLoading ? "Sending..." : "Send"}
+          </button>
+        </form>
+      </div>
+      {hash && isSuccess && (
+        <div className="confirmation-container">
+          <Divider />
+          <p>
+            Successfully sent {amount} BERA. View transaction on{" "}
+            <a
+              href={`${client.chain.blockExplorers.default.url}/tx/${hash}`}
+              target="_blank"
+              rel="noreferrer"
+            >
+              Explorer
+            </a>
+          </p>
+          <p>Gas used in transaction: {data?.gasUsed.toString()}</p>
+        </div>
+      )}
+      {error && (
+        <div>An error occurred preparing the transaction: {error.message}</div>
+      )}
+    </>
+  );
+};
+
+export default SendTransaction;