diff --git a/packages/nextjs/components/dash-wind/containers/Header.tsx b/packages/nextjs/components/dash-wind/containers/Header.tsx index 221d2f3..dab87d5 100644 --- a/packages/nextjs/components/dash-wind/containers/Header.tsx +++ b/packages/nextjs/components/dash-wind/containers/Header.tsx @@ -9,8 +9,9 @@ import Bars3Icon from "@heroicons/react/24/outline/Bars3Icon"; import BellIcon from "@heroicons/react/24/outline/BellIcon"; import MoonIcon from "@heroicons/react/24/outline/MoonIcon"; import SunIcon from "@heroicons/react/24/outline/SunIcon"; -import UserIcon from "@heroicons/react/24/outline/UserIcon"; +// import UserIcon from "@heroicons/react/24/outline/UserIcon"; import { MyState, useMyDispatch, useMySelector } from "~~/components/dash-wind/app/store"; +import { Address } from "~~/components/web-3-crew/Address"; function Header() { const dispatch = useMyDispatch(); @@ -94,6 +95,39 @@ function Header() { {/* Profile icon, opening menu on click */}
+ + +
+ + {/* Profile icon, opening menu on click */} + {/*
*/} diff --git a/packages/nextjs/components/web-3-crew/Address.tsx b/packages/nextjs/components/web-3-crew/Address.tsx new file mode 100644 index 0000000..833afd6 --- /dev/null +++ b/packages/nextjs/components/web-3-crew/Address.tsx @@ -0,0 +1,129 @@ +import { useEffect, useState } from "react"; +import Link from "next/link"; +// import { CopyToClipboard } from "react-copy-to-clipboard"; +import { 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 { getBlockExplorerAddressLink, getTargetNetwork } from "~~/utils/scaffold-eth"; + +type TAddressProps = { + address?: string; + disableAddressLink?: boolean; + format?: "short" | "long"; + size?: "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl"; +}; + +const blockieSizeMap = { + xs: 6, + sm: 7, + base: 8, + lg: 9, + xl: 10, + "2xl": 12, + "3xl": 15, +}; + +/** + * Edit of Scaffold-Eth-2 `Address` components + */ +/** + * Displays an address (or ENS) with a Blockie image and option to copy address. + */ +export const Address = ({ address, disableAddressLink, format, size = "base" }: TAddressProps) => { + const [ens, setEns] = useState(); + const [ensAvatar, setEnsAvatar] = useState(); + // const [addressCopied, setAddressCopied] = useState(false); + + const { data: fetchedEns } = useEnsName({ address, enabled: isAddress(address ?? ""), chainId: 1 }); + const { data: fetchedEnsAvatar } = useEnsAvatar({ + name: fetchedEns, + enabled: Boolean(fetchedEns), + chainId: 1, + cacheTime: 30_000, + }); + + // We need to apply this pattern to avoid Hydration errors. + useEffect(() => { + setEns(fetchedEns); + }, [fetchedEns]); + + useEffect(() => { + setEnsAvatar(fetchedEnsAvatar); + }, [fetchedEnsAvatar]); + + // Skeleton UI + if (!address) { + return ( +
+
+
+
+
+
+ ); + } + + if (!isAddress(address)) { + return Wrong address; + } + + const blockExplorerAddressLink = getBlockExplorerAddressLink(getTargetNetwork(), address); + let displayAddress = address?.slice(0, 5) + "..." + address?.slice(-4); + + if (ens) { + displayAddress = ens; + } else if (format === "long") { + displayAddress = address; + } + + return ( +
+
+ +
+ {disableAddressLink ? ( + {displayAddress} + ) : getTargetNetwork().id === hardhat.id ? ( + + {displayAddress} + + ) : ( + + {displayAddress} + + )} + {/* {addressCopied ? ( +
+ ); +};