feat: wagmi rainbowkit config

README.md

@@ -5,3 +5,7 @@
 # Prettier
 
 [README](packages/prettier-config/README.md)
+
+# Wagmi and RainbowKit Config
+
+[README](packages/wagmi-rainbowkit-config/README.md)

packages/wagmi-rainbowkit-config/README.md

@@ -0,0 +1,29 @@
+# Wagmi and RainbowKit Config
+
+Provides reusable wagmi & rainbowkit config
+
+1. Install the peerDependencies of wagmi rainbowkit config:
+
+```sh
+npx install-peerdeps -Y --dev @offchainlabs/wagmi-rainbowkit-config
+```
+
+2. Usage
+   Create WagmiConfig and RainbowKit Provider based on app name, chains to be used on dApp, and your desired custom RainbowKit theme config. Custom theme config can be seen on RainbowKit's [documentation](https://www.rainbowkit.com/docs/custom-theme).
+
+```typescript
+const Providers = createWagmiRainbowKitProvider({
+  appName: 'my awesome app', // required
+  allowedChains: [mainnet, arbitrum, arbitrumNova], // optional
+  customProviders: [infuraProvider({ apiKey: 'yourInfuraApiKey' })], // optional
+  customTheme: { // optional
+    colors: {
+      accentColor: "#1366C1",
+    },
+  }
+})
+
+<Providers>
+  <AppContent />
+</Providers>
+```

packages/wagmi-rainbowkit-config/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@offchainlabs/wagmi-rainbowkit-config",
+  "version": "0.1.0",
+  "description": "Shareable Offchain labs wagmi and rainbowkit config",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/OffchainLabs/config-monorepo.git",
+    "directory": "packages/wagmi-rainbowkit-config"
+  },
+  "author": "Offchain Labs, Inc.",
+  "license": "MIT",
+  "peerDependencies": {
+    "@types/react": "^18.0.38",
+    "react": "^18.2.0",
+    "typescript": "^4.7.4",
+    "wagmi": "^0.12.12"
+  },
+  "devDependencies": {
+    "@types/lodash.merge": "^4.6.7",
+    "@types/react": "^18.0.38",
+    "react": "^18.2.0",
+    "typescript": "^4.7.4",
+    "wagmi": "^0.12.12"
+  },
+  "scripts": {
+    "build": "rm -r dist && tsc"
+  },
+  "dependencies": {
+    "@rainbow-me/rainbowkit": "^0.12.9",
+    "lodash.merge": "^4.6.2"
+  }
+}

packages/wagmi-rainbowkit-config/src/arbitrumNova.ts

@@ -0,0 +1,20 @@
+import { Chain } from "wagmi";
+
+export const arbitrumNova: Chain = {
+  id: 42170,
+  name: "Arbitrum Nova",
+  network: "arbitrum-nova",
+  nativeCurrency: { name: "Ether", symbol: "ETH", decimals: 18 },
+  rpcUrls: {
+    default: {
+      http: ["https://nova.arbitrum.io/rpc"],
+    },
+    public: {
+      http: ["https://nova.arbitrum.io/rpc"],
+    },
+  },
+  blockExplorers: {
+    etherscan: { name: "Arbiscan", url: "https://nova.arbiscan.io" },
+    default: { name: "Arbiscan", url: "https://nova.arbiscan.io" },
+  },
+};

packages/wagmi-rainbowkit-config/src/index.js

@@ -0,0 +1 @@
+export { createWagmiRainbowKitProvider } from "./setup";

packages/wagmi-rainbowkit-config/src/setup.tsx

@@ -0,0 +1,106 @@
+import { ReactNode } from "react";
+import {
+  createClient,
+  configureChains,
+  mainnet,
+  goerli,
+  WagmiConfig,
+  Chain,
+  ChainProviderFn,
+} from "wagmi";
+import { arbitrum, arbitrumGoerli } from "@wagmi/core/chains";
+import { publicProvider } from "wagmi/providers/public";
+import {
+  RainbowKitProvider,
+  Theme,
+  connectorsForWallets,
+  darkTheme,
+  getDefaultWallets,
+} from "@rainbow-me/rainbowkit";
+import { trustWallet, ledgerWallet } from "@rainbow-me/rainbowkit/wallets";
+import merge from "lodash.merge";
+import {
+  StaticJsonRpcProvider,
+  WebSocketProvider,
+} from "@ethersproject/providers";
+
+import { arbitrumNova } from "./arbitrumNova";
+
+/**
+ * Create WagmiConfig and RainbowKit Provider based on app name, chains to be used on dApp,
+ * and your desired custom RainbowKit theme config
+ *
+ * @param appName - the name you want to show on wallets
+ * @param allowedChains - `Chain[]` from wagmi; default: [mainnet, arbitrum, arbitrumNova, goerli, arbitrumGoerli]
+ * @param customProviders - add providers you'd like to use in addition to `publicProvider()`
+ * @param customTheme - Override the dark theme from RainbowKit; default font family: 'Space Grotesk'
+ *    https://www.rainbowkit.com/docs/custom-theme
+ * @returns a RainbowKit Provider wrapped by `<WagmiConfig/>` which accepts `ReactNode` as children
+ */
+export function createWagmiRainbowKitProvider({
+  appName,
+  allowedChains = [mainnet, arbitrum, arbitrumNova, goerli, arbitrumGoerli],
+  customProviders,
+  customTheme,
+}: {
+  appName: string;
+  allowedChains?: Chain[];
+  customProviders?: ChainProviderFn<
+    Chain,
+    StaticJsonRpcProvider,
+    WebSocketProvider
+  >[];
+  customTheme?: Theme;
+}) {
+  const { chains, provider, webSocketProvider } = configureChains(
+    allowedChains,
+    [merge(publicProvider(), customProviders)]
+  );
+
+  const theme = merge(
+    darkTheme(),
+    {
+      colors: {
+        accentColor: "#1366C1",
+      },
+      fonts: {
+        body: "'Space Grotesk', sans-serif",
+      },
+    } as Theme,
+    customTheme
+  );
+
+  const appInfo = {
+    appName,
+  };
+
+  const { wallets } = getDefaultWallets({
+    ...appInfo,
+    chains,
+  });
+
+  const connectors = connectorsForWallets([
+    ...wallets,
+    {
+      groupName: "More",
+      wallets: [trustWallet({ chains }), ledgerWallet({ chains })],
+    },
+  ]);
+
+  const client = createClient({
+    autoConnect: true,
+    connectors,
+    provider,
+    webSocketProvider,
+  });
+
+  const WagmiRainbowKitProviders = ({ children }: { children: ReactNode }) => (
+    <WagmiConfig client={client}>
+      <RainbowKitProvider chains={chains} theme={theme} appInfo={appInfo}>
+        {children}
+      </RainbowKitProvider>
+    </WagmiConfig>
+  );
+
+  return WagmiRainbowKitProviders;
+}

packages/wagmi-rainbowkit-config/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noUncheckedIndexedAccess": true,
+    "jsx": "react-jsx",
+    "outDir": "dist",
+    "declaration": true,
+    "declarationMap": true
+  },
+  "include": ["src/*"]
+}