Use JazzIcon instead of BlockieAvatar

oasisprotocol · Aug 28, 2024 · 229d15b · 229d15b
1 parent b34d575
commit 229d15b
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 10 deletions.
diff --git a/packages/nextjs/components/scaffold-eth/Address.tsx b/packages/nextjs/components/scaffold-eth/Address.tsx
@@ -1,11 +1,11 @@
 import { useEffect, useState } from "react";
 import Link from "next/link";
+import { AccountAvatar } from "../AccountAvatar";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import { Address as AddressType, isAddress } from "viem";
 import { hardhat } from "viem/chains";
 import { useEnsAvatar, useEnsName } from "wagmi";
 import { CheckCircleIcon, DocumentDuplicateIcon } from "@heroicons/react/24/outline";
-import { BlockieAvatar } from "~~/components/scaffold-eth";
 import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
 import { getBlockExplorerAddressLink } from "~~/utils/scaffold-eth";
 
@@ -81,11 +81,7 @@ export const Address = ({ address, disableAddressLink, format, size = "base" }:
   return (
     <div className="flex items-center">
       <div className="flex-shrink-0">
-        <BlockieAvatar
-          address={address}
-          ensImage={ensAvatar}
-          size={(blockieSizeMap[size] * 24) / blockieSizeMap["base"]}
-        />
+        <AccountAvatar address={address} size={(blockieSizeMap[size] * 24) / blockieSizeMap["base"]} />
       </div>
       {disableAddressLink ? (
         <span className={`ml-1.5 text-${size} font-normal`}>{displayAddress}</span>

diff --git a/...ages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressInfoDropdown.tsx b/...ages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/AddressInfoDropdown.tsx
@@ -1,4 +1,5 @@
 import { useRef, useState } from "react";
+import { AccountAvatar } from "../../AccountAvatar";
 import { NetworkOptions } from "./NetworkOptions";
 import CopyToClipboard from "react-copy-to-clipboard";
 import { Address, useDisconnect } from "wagmi";
@@ -10,7 +11,6 @@ import {
   DocumentDuplicateIcon,
   QrCodeIcon,
 } from "@heroicons/react/24/outline";
-import { BlockieAvatar } from "~~/components/scaffold-eth";
 import { useOutsideClick } from "~~/hooks/scaffold-eth";
 
 type AddressInfoDropdownProps = {
@@ -43,7 +43,7 @@ export const AddressInfoDropdown = ({
       <details ref={dropdownRef} className="dropdown dropdown-end leading-3">
         <summary tabIndex={0} className="btn btn-secondary btn-sm pl-0 pr-2 shadow-md dropdown-toggle gap-0 !h-auto">
           <div className="hidden sm:block">
-            <BlockieAvatar address={address} size={30} ensImage={ensAvatar} />
+            <AccountAvatar address={address} size={30} />
           </div>
           <span className="ml-2 mr-1 ">{displayName}</span>
           <ChevronDownIcon className="h-6 w-4  ml-2 sm:ml-0" />

diff --git a/packages/nextjs/pages/_app.tsx b/packages/nextjs/pages/_app.tsx
@@ -1,12 +1,12 @@
 import { useEffect, useState } from "react";
 import type { AppProps } from "next/app";
+import { AccountAvatar } from "../components/AccountAvatar";
 import { RainbowKitProvider, darkTheme, lightTheme } from "@rainbow-me/rainbowkit";
 import "@rainbow-me/rainbowkit/styles.css";
 import { ThemeProvider, useTheme } from "next-themes";
 import NextNProgress from "nextjs-progressbar";
 import { Toaster } from "react-hot-toast";
 import { WagmiConfig } from "wagmi";
-import { BlockieAvatar } from "~~/components/scaffold-eth";
 import { useNativeCurrencyPrice } from "~~/hooks/scaffold-eth";
 import { useGlobalState } from "~~/services/store/store";
 import { wagmiConfig } from "~~/services/web3/wagmiConfig";
@@ -33,7 +33,7 @@ const ScaffoldEthApp = ({ Component, pageProps }: AppProps) => {
   return (
     <RainbowKitProvider
       chains={appChains.chains}
-      avatar={BlockieAvatar}
+      avatar={AccountAvatar}
       theme={mounted ? (isDarkMode ? darkTheme() : lightTheme()) : lightTheme()}
     >
       <div className="flex min-h-screen flex-col">