ConnectKit => RainbowKit (#124)

frontend/next.config.js

@@ -13,4 +13,9 @@ module.exports = {
     APP_VERSION: pkg.version,
     COMMIT_HASH: commitHash,
   },
+  webpack: (config) => {
+    // required for rainbowkit
+    config.externals.push("pino-pretty", "lokijs", "encoding");
+    return config;
+  },
 };

frontend/package.json

@@ -11,9 +11,9 @@
     "update-liquity-abis": "ts-node ./scripts/update-liquity-abis.ts"
   },
   "dependencies": {
+    "@rainbow-me/rainbowkit": "^2.0.5",
     "@react-spring/web": "^9.7.3",
     "@tanstack/react-query": "^5.29.2",
-    "connectkit": "^1.7.2",
     "dnum": "^2.11.0",
     "focus-trap-react": "^10.2.3",
     "next": "14.2.1",

frontend/src/app/contracts/page.tsx

@@ -16,7 +16,7 @@ import {
   useTrovesStats,
 } from "@/src/liquity-utils";
 import { css } from "@/styled-system/css";
-import { useModal as useConnectKitModal } from "connectkit";
+import { useConnectModal } from "@rainbow-me/rainbowkit";
 import * as dn from "dnum";
 import { match, P } from "ts-pattern";
 import { useAccount } from "wagmi";
@@ -74,7 +74,7 @@ export default function Contracts() {
 }
 
 function AccountDetails() {
-  const connectKitModal = useConnectKitModal();
+  const rainbowKitModal = useConnectModal();
   const { address } = useAccount();
 
   const {
@@ -106,7 +106,7 @@ function AccountDetails() {
         .otherwise(() => ({
           label: "Connect Wallet",
           onClick: () => {
-            connectKitModal.setOpen(true);
+            rainbowKitModal.openConnectModal?.();
           },
         }))}
       lines={4}

frontend/src/comps/Ethereum/Ethereum.tsx

@@ -1,31 +1,45 @@
 "use client";
 
+import "@rainbow-me/rainbowkit/styles.css";
+
 import type { Address } from "@/src/types";
-import type { ReactNode } from "react";
+import type { ComponentProps, ReactNode } from "react";
 import type { Chain } from "wagmi/chains";
 
 import { useConfig } from "@/src/comps/Config/Config";
 import { WALLET_CONNECT_PROJECT_ID } from "@/src/env";
+import { useTheme } from "@/src/theme";
+import { getDefaultConfig, lightTheme, RainbowKitProvider } from "@rainbow-me/rainbowkit";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { ConnectKitProvider, getDefaultConfig as getDefaultConnectKitConfig } from "connectkit";
 import { useMemo } from "react";
-import { createConfig, http, WagmiProvider } from "wagmi";
+import { http, WagmiProvider } from "wagmi";
 
 const queryClient = new QueryClient();
 
 export function Ethereum({ children }: { children: ReactNode }) {
   const wagmiConfig = useWagmiConfig();
+  const rainbowKitProps = useRainbowKitProps();
   return (
     <WagmiProvider config={wagmiConfig}>
       <QueryClientProvider client={queryClient}>
-        <ConnectKitProvider>
+        <RainbowKitProvider {...rainbowKitProps}>
           {children}
-        </ConnectKitProvider>
+        </RainbowKitProvider>
       </QueryClientProvider>
     </WagmiProvider>
   );
 }
 
+function useRainbowKitProps(): Omit<ComponentProps<typeof RainbowKitProvider>, "children"> {
+  const theme = useTheme();
+  return {
+    modalSize: "compact",
+    theme: lightTheme({
+      accentColor: theme.color("accent"),
+    }),
+  };
+}
+
 function useWagmiConfig() {
   const { config } = useConfig();
   return useMemo(() => {
@@ -39,15 +53,15 @@ function useWagmiConfig() {
       contractEnsResolver: config.chainContractEnsResolver,
       contractMulticall: config.chainContractMulticall,
     });
-    return createConfig(getDefaultConnectKitConfig({
+    return getDefaultConfig({
       appName: "Liquity v2",
+      projectId: WALLET_CONNECT_PROJECT_ID,
       chains: [chain],
       transports: {
         [chain.id]: http(config.chainRpcUrl),
       },
       ssr: true,
-      walletConnectProjectId: WALLET_CONNECT_PROJECT_ID,
-    }));
+    });
   }, [config]);
 }
 

frontend/src/comps/TopBar/AccountButton.tsx

@@ -1,31 +1,34 @@
-import { shortenAddress } from "@/src/eth-utils";
-import { ConnectKitButton } from "connectkit";
+import { ConnectButton } from "@rainbow-me/rainbowkit";
 import { match, P } from "ts-pattern";
 import { IconAccount } from "./icons";
 import { MenuItem } from "./MenuItem";
 
 export function AccountButton() {
   return (
-    <ConnectKitButton.Custom>
-      {({ isConnected, show, address, ensName }) => (
-        <button onClick={show}>
-          <MenuItem
-            icon={<IconAccount />}
-            label={match({ isConnected, address, ensName })
-              .with({
-                ensName: P.string.minLength(1),
-                isConnected: true,
-              }, ({ ensName }) => ensName)
-              .with({
-                address: P.string.minLength(42),
-                isConnected: true,
-              }, ({ address }) => (
-                shortenAddress(address, 4)
-              ))
-              .otherwise(() => "Connect")}
-          />
-        </button>
-      )}
-    </ConnectKitButton.Custom>
+    <ConnectButton.Custom>
+      {({ account, chain, openAccountModal, openChainModal, openConnectModal }) => {
+        const button = match({ account, chain })
+          .with(
+            // wrong network
+            { chain: { unsupported: true } },
+            () => ({ label: "Wrong network", onClick: openChainModal }),
+          )
+          .with(
+            // connected
+            { account: P.nonNullable },
+            ({ account }) => ({ label: account.displayName, onClick: openAccountModal }),
+          )
+          .otherwise(
+            // disconnected / not ready
+            () => ({ label: "Connect", onClick: openConnectModal }),
+          );
+
+        return button && (
+          <button onClick={button.onClick} type="button">
+            <MenuItem icon={<IconAccount />} label={button.label} />
+          </button>
+        );
+      }}
+    </ConnectButton.Custom>
   );
 }