Configure rainbowkit to look better

apps/web/src/components/AddressAvatar.tsx

@@ -0,0 +1,69 @@
+import { cn } from "@repo/ui/lib/utils";
+import makeBlockie from "ethereum-blockies-base64";
+import Image from "next/image";
+import { useMemo } from "react";
+import { isAddress } from "viem";
+import { normalize } from "viem/ens";
+import { useEnsAddress, useEnsAvatar, useEnsName } from "wagmi";
+import { mainnetConfig } from "../utils/wallet";
+
+const transparentPixel =
+  "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+
+function AddressAvatar({
+  addressOrEns,
+  size,
+}: { addressOrEns: string; size: number }) {
+  const isEnsName = addressOrEns.endsWith(".eth");
+  const isAddr = isAddress(addressOrEns);
+
+  // If addressOrEns is an address, get the ens name
+  const { data: ensName } = useEnsName({
+    address: isAddr ? addressOrEns : undefined,
+    chainId: 1,
+    query: { enabled: !isEnsName && isAddr },
+    config: mainnetConfig,
+  });
+
+  let normalizedName: string | undefined;
+  try {
+    normalizedName = isEnsName
+      ? normalize(addressOrEns)
+      : ensName?.toLowerCase();
+  } catch (error) {}
+
+  // If we did not have the address and normalizedName is an ens name, get the ens address
+  const { data: ensAddress } = useEnsAddress({
+    name: normalizedName,
+    chainId: 1,
+    query: { enabled: !!normalizedName && !isAddr },
+    config: mainnetConfig,
+  });
+
+  // If normalizedName is an ens name, get the ens avatar
+  const { data: ensAvatar, isLoading } = useEnsAvatar({
+    name: normalizedName,
+    chainId: 1,
+    query: { enabled: !!normalizedName },
+    config: mainnetConfig,
+  });
+  const address = ensAddress ?? addressOrEns;
+  const src = useMemo(() => {
+    if (isLoading) return transparentPixel;
+    if (ensAvatar) return ensAvatar;
+    if (!isLoading && isAddress(address)) return makeBlockie(address);
+    return transparentPixel;
+  }, [ensAvatar, address, isLoading]);
+
+  return (
+    <Image
+      src={src}
+      alt=""
+      width={size}
+      height={size}
+      className={cn("rounded bg-gray-600")}
+    />
+  );
+}
+
+export default AddressAvatar;

apps/web/src/components/ConnectButton.tsx

@@ -1,5 +1,16 @@
+"use client";
+
 import { ConnectButton as RainbowConnectButton } from "@rainbow-me/rainbowkit";
+import { useConnectModal } from "@rainbow-me/rainbowkit";
+import { Button } from "@repo/ui/components/ui/button";
+import { useAccount } from "wagmi";
 
 export function ConnectButton() {
-  return <RainbowConnectButton showBalance={false} />;
+  const { address } = useAccount();
+  const { openConnectModal } = useConnectModal();
+  return address ? (
+    <RainbowConnectButton showBalance={false} />
+  ) : (
+    <Button onClick={openConnectModal}>Connect Wallet</Button>
+  );
 }

apps/web/src/components/VotingCard.tsx

@@ -47,7 +47,8 @@ const VotingCard = ({
         ) : (
           <>
             <h4 className="text-xl mb-6 text-accent">
-              Cast Your Vote ({votedProjects.length} / {maxVotedProjects})
+              Cast Your Vote ({votedProjects.length} / {maxVotedProjects}{" "}
+              projects)
             </h4>
             {Object.entries(votes).map(([project, voteCount]) => (
               <div
@@ -98,7 +99,7 @@ const VotingCard = ({
           disabled={votedProjects.length < 1 || !address}
           className="w-full py-2 rounded-lg mt-4 font-bold"
         >
-          {address ? "Vote" : "Connect Wallet"}
+          {address ? "Vote" : "Wallet not connected"}
         </Button>
       </CardFooter>
     </Card>

apps/web/src/constants.ts

@@ -0,0 +1,3 @@
+export const SITE_NAME = "Councilhaus";
+export const SITE_DESCRIPTION =
+  "Democratically allocate a budget across projects";

apps/web/src/context/WalletProvider.tsx

@@ -1,10 +1,15 @@
 "use client";
 
-import { RainbowKitProvider, darkTheme } from "@rainbow-me/rainbowkit";
+import {
+  type AvatarComponent,
+  RainbowKitProvider,
+  darkTheme,
+} from "@rainbow-me/rainbowkit";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import type { PropsWithChildren } from "react";
 import colors from "tailwindcss/colors";
 import { type State, WagmiProvider } from "wagmi";
+import AddressAvatar from "../components/AddressAvatar";
 import { WALLETCONNECT_CONFIG } from "../utils/wallet";
 
 interface Props extends PropsWithChildren {
@@ -13,6 +18,13 @@ interface Props extends PropsWithChildren {
 
 const queryClient = new QueryClient();
 
+const CustomAvatar: AvatarComponent = ({
+  address,
+  size,
+}: { address: string; size: number }) => {
+  return <AddressAvatar addressOrEns={address} size={size} />;
+};
+
 export function WalletProvider(props: Props) {
   return (
     <WagmiProvider
@@ -22,6 +34,7 @@ export function WalletProvider(props: Props) {
       <QueryClientProvider client={queryClient}>
         <RainbowKitProvider
           modalSize="compact"
+          avatar={CustomAvatar}
           theme={darkTheme({
             accentColor: colors.yellow[500],
             accentColorForeground: colors.gray[900],

apps/web/src/utils/wallet.ts

@@ -1,4 +1,5 @@
 "use client";
+
 import "@rainbow-me/rainbowkit/styles.css";
 import { getDefaultConfig } from "@rainbow-me/rainbowkit";
 import { createPublicClient } from "viem";
@@ -14,7 +15,9 @@ if (!WALLETCONNECT_PROJECT_ID) {
   );
 }
 
-export const WALLETCONNECT_CONFIG = getDefaultConfig({
+type RainbowKitConfig = ReturnType<typeof getDefaultConfig>;
+
+export const WALLETCONNECT_CONFIG: RainbowKitConfig = getDefaultConfig({
   appName: SITE_NAME,
   projectId: WALLETCONNECT_PROJECT_ID || "dummy",
   chains: [optimism],

package.json

@@ -28,6 +28,7 @@
   "dependencies": {
     "@rainbow-me/rainbowkit": "^2.1.5",
     "@tanstack/react-query": "^5.55.4",
+    "ethereum-blockies-base64": "^1.0.2",
     "viem": "2.x",
     "wagmi": "^2.12.8"
   }