Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move from react-blockies to blo #538

Merged
merged 2 commits into from
Sep 22, 2023
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 6 additions & 19 deletions packages/nextjs/components/scaffold-eth/Address.tsx
Original file line number Diff line number Diff line change
@@ -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 = {
Expand Down Expand Up @@ -78,24 +78,11 @@ export const Address = ({ address, disableAddressLink, format, size = "base" }:
return (
<div className="flex items-center">
<div className="flex-shrink-0">
{ensAvatar ? (
// Don't want to use nextJS Image here (and adding remote patterns for the URL)
// eslint-disable-next-line
<img
className="rounded-full"
src={ensAvatar}
width={(blockieSizeMap[size] * 24) / blockieSizeMap["base"]}
height={(blockieSizeMap[size] * 24) / blockieSizeMap["base"]}
alt={`${address} avatar`}
/>
) : (
<Blockies
className="mx-auto rounded-full"
size={blockieSizeMap[size]}
seed={address.toLowerCase()}
scale={3}
/>
)}
<BlockieAvatar
address={address}
ensImage={ensAvatar}
size={(blockieSizeMap[size] * 24) / blockieSizeMap["base"]}
/>
</div>
{disableAddressLink ? (
<span className={`ml-1.5 text-${size} font-normal`}>{displayAddress}</span>
Expand Down
22 changes: 13 additions & 9 deletions packages/nextjs/components/scaffold-eth/BlockieAvatar.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
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
<img className="rounded-full" src={ensImage} width={size} height={size} alt={`${address} avatar`} />
) : (
<Blockies className="rounded-full" seed={address?.toLowerCase() as string} scale={size > 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/next/no-img-element */
bpierre marked this conversation as resolved.
Show resolved Hide resolved
<img
className="rounded-full"
src={ensImage || blo(address as `0x${string}`)}
width={size}
height={size}
alt={`${address} avatar`}
/>
/* eslint-enable @next/next/no-img-element */
);
Original file line number Diff line number Diff line change
@@ -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";
Expand Down Expand Up @@ -74,7 +74,12 @@ export const AddressInput = ({ value, name, placeholder, onChange, disabled }: C
</div>
)
}
suffix={value && <Blockies className="!rounded-full" seed={value?.toLowerCase() as string} size={7} scale={5} />}
suffix={
// Don't want to use nextJS Image here (and adding remote patterns for the URL)
/* eslint-disable @next/next/no-img-element */
bpierre marked this conversation as resolved.
Show resolved Hide resolved
value && <img alt="" className="!rounded-full" src={blo(value as `0x${string}`)} width="35" height="35" />
/* eslint-enable @next/next/no-img-element */
}
/>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
<BlockieAvatar address={account.address} size={24} ensImage={account.ensAvatar} />
<BlockieAvatar address={account.address} size={30} ensImage={account.ensAvatar} />
<span className="ml-2 mr-1">{account.displayName}</span>
<ChevronDownIcon className="h-6 w-4 ml-2 sm:ml-0" />
</label>
Expand Down
3 changes: 1 addition & 2 deletions packages/nextjs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand Down
32 changes: 9 additions & 23 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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:
Expand Down Expand Up @@ -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"
Expand Down