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 - {`${address} - ) : ( - - )} +
{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 - {`${address} - ) : ( - 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 + {`${address} +); 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"