diff --git a/packages/nextjs/components/scaffold-eth/Address.tsx b/packages/nextjs/components/scaffold-eth/Address.tsx
index 3b0c9172d..c8af261db 100644
--- 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 Blockies from "react-blockies";
import { CopyToClipboard } from "react-copy-to-clipboard";
import { isAddress } from "viem";
import { useEnsAvatar, useEnsName } from "wagmi";
import { hardhat } from "wagmi/chains";
import { CheckCircleIcon, DocumentDuplicateIcon } from "@heroicons/react/24/outline";
+import { BlockieAvatar } from "~~/components/scaffold-eth";
import { getBlockExplorerAddressLink, getTargetNetwork } from "~~/utils/scaffold-eth";
type TAddressProps = {
@@ -78,24 +78,11 @@ export const Address = ({ address, disableAddressLink, format, size = "base" }:
return (
- {ensAvatar ? (
- // Don't want to use nextJS Image here (and adding remote patterns for the URL)
- // eslint-disable-next-line
-
- ) : (
-
- )}
+
{disableAddressLink ? (
{displayAddress}
diff --git a/packages/nextjs/components/scaffold-eth/BlockieAvatar.tsx b/packages/nextjs/components/scaffold-eth/BlockieAvatar.tsx
index 880a6aaad..9c1ea4d67 100644
--- a/packages/nextjs/components/scaffold-eth/BlockieAvatar.tsx
+++ b/packages/nextjs/components/scaffold-eth/BlockieAvatar.tsx
@@ -1,12 +1,15 @@
import { AvatarComponent } from "@rainbow-me/rainbowkit";
-import Blockies from "react-blockies";
+import { blo } from "blo";
// Custom Avatar for RainbowKit
-export const BlockieAvatar: AvatarComponent = ({ address, ensImage, size }) =>
- ensImage ? (
- // Don't want to use nextJS Image here (and adding remote patterns for the URL)
- // eslint-disable-next-line
-
- ) : (
-
30 ? 10 : 3.75} />
- );
+export const BlockieAvatar: AvatarComponent = ({ address, ensImage, size }) => (
+ // Don't want to use nextJS Image here (and adding remote patterns for the URL)
+ // eslint-disable-next-line @next/next/no-img-element
+
+);
diff --git a/packages/nextjs/components/scaffold-eth/Input/AddressInput.tsx b/packages/nextjs/components/scaffold-eth/Input/AddressInput.tsx
index 736dd8be0..d623caba0 100644
--- a/packages/nextjs/components/scaffold-eth/Input/AddressInput.tsx
+++ b/packages/nextjs/components/scaffold-eth/Input/AddressInput.tsx
@@ -1,5 +1,5 @@
import { useCallback, useEffect, useState } from "react";
-import Blockies from "react-blockies";
+import { blo } from "blo";
import { isAddress } from "viem";
import { Address } from "viem";
import { useEnsAddress, useEnsAvatar, useEnsName } from "wagmi";
@@ -74,7 +74,11 @@ export const AddressInput = ({ value, name, placeholder, onChange, disabled }: C
)
}
- suffix={value && }
+ suffix={
+ // Don't want to use nextJS Image here (and adding remote patterns for the URL)
+ // eslint-disable-next-line @next/next/no-img-element
+ value &&
+ }
/>
);
};
diff --git a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton.tsx b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton.tsx
index c41d8cf9a..803bb8c73 100644
--- a/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton.tsx
+++ b/packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton.tsx
@@ -96,7 +96,7 @@ export const RainbowKitCustomConnectButton = () => {
tabIndex={0}
className="btn btn-secondary btn-sm pl-0 pr-2 shadow-md dropdown-toggle gap-0 !h-auto"
>
-
+
{account.displayName}
diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json
index d3fd8ab89..de78c94a8 100644
--- a/packages/nextjs/package.json
+++ b/packages/nextjs/package.json
@@ -19,12 +19,12 @@
"@rainbow-me/rainbowkit": "1.0.8",
"@uniswap/sdk-core": "^4.0.1",
"@uniswap/v2-sdk": "^3.0.1",
+ "blo": "^1.0.1",
"daisyui": "^3.5.1",
"next": "^13.1.6",
"nextjs-progressbar": "^0.0.16",
"qrcode.react": "^3.1.0",
"react": "^18.2.0",
- "react-blockies": "^1.4.1",
"react-copy-to-clipboard": "^5.1.0",
"react-dom": "^18.2.0",
"react-fast-marquee": "^1.3.5",
@@ -39,7 +39,6 @@
"@trivago/prettier-plugin-sort-imports": "^4.1.1",
"@types/node": "^17.0.35",
"@types/react": "^18.0.9",
- "@types/react-blockies": "^1.4.1",
"@types/react-copy-to-clipboard": "^5.0.4",
"@typescript-eslint/eslint-plugin": "^5.39.0",
"autoprefixer": "^10.4.12",
diff --git a/yarn.lock b/yarn.lock
index 4719ef29d..197ccce3b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1825,12 +1825,12 @@ __metadata:
"@trivago/prettier-plugin-sort-imports": ^4.1.1
"@types/node": ^17.0.35
"@types/react": ^18.0.9
- "@types/react-blockies": ^1.4.1
"@types/react-copy-to-clipboard": ^5.0.4
"@typescript-eslint/eslint-plugin": ^5.39.0
"@uniswap/sdk-core": ^4.0.1
"@uniswap/v2-sdk": ^3.0.1
autoprefixer: ^10.4.12
+ blo: ^1.0.1
daisyui: ^3.5.1
eslint: ^8.15.0
eslint-config-next: ^13.1.6
@@ -1842,7 +1842,6 @@ __metadata:
prettier: ^2.8.4
qrcode.react: ^3.1.0
react: ^18.2.0
- react-blockies: ^1.4.1
react-copy-to-clipboard: ^5.1.0
react-dom: ^18.2.0
react-fast-marquee: ^1.3.5
@@ -2550,15 +2549,6 @@ __metadata:
languageName: node
linkType: hard
-"@types/react-blockies@npm:^1.4.1":
- version: 1.4.1
- resolution: "@types/react-blockies@npm:1.4.1"
- dependencies:
- "@types/react": "*"
- checksum: 66e1f9eb961eaa863bab02e143f0298516d9fa640f0737816ebc766b90ca1062c2dc18cbfda1c1679aa4be640172efe6931886207af4f01b8c894988f9df085a
- languageName: node
- linkType: hard
-
"@types/react-copy-to-clipboard@npm:^5.0.4":
version: 5.0.4
resolution: "@types/react-copy-to-clipboard@npm:5.0.4"
@@ -4556,6 +4546,13 @@ __metadata:
languageName: node
linkType: hard
+"blo@npm:^1.0.1":
+ version: 1.0.1
+ resolution: "blo@npm:1.0.1"
+ checksum: 2aff11ca1d49e616ffa81907b1a011130b2156f8199bf37df62a9689aeb2a0874c61885cc2f9c79df0d216e14c85cc62902404288f8058cd0b0c311d4f01c3f9
+ languageName: node
+ linkType: hard
+
"bn.js@npm:4.11.6":
version: 4.11.6
resolution: "bn.js@npm:4.11.6"
@@ -11034,7 +11031,7 @@ __metadata:
languageName: node
linkType: hard
-"prop-types@npm:^15.5.10, prop-types@npm:^15.8.1":
+"prop-types@npm:^15.8.1":
version: 15.8.1
resolution: "prop-types@npm:15.8.1"
dependencies:
@@ -11226,17 +11223,6 @@ __metadata:
languageName: node
linkType: hard
-"react-blockies@npm:^1.4.1":
- version: 1.4.1
- resolution: "react-blockies@npm:1.4.1"
- dependencies:
- prop-types: ^15.5.10
- peerDependencies:
- react: ">=15.0.0"
- checksum: 87139fc2cc682d34ff8633c58ce96f89826cc3127499b623fb1d8c99dd8e1fe21055750a051933ffc500ca9c88aa017930deae963ffc635135c02907e5d75e22
- languageName: node
- linkType: hard
-
"react-copy-to-clipboard@npm:^5.1.0":
version: 5.1.0
resolution: "react-copy-to-clipboard@npm:5.1.0"