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 Settings
+ New
+
+
+ -
+ Bill History
+
+
+ -
+ Logout
+
+
+
+
+ {/* 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 ? (
+
+ ) : (
+
{
+ setAddressCopied(true);
+ setTimeout(() => {
+ setAddressCopied(false);
+ }, 800);
+ }}
+ >
+
+
+ )} */}
+
+ );
+};