Add Profile (#5)

web/src/Layout.tsx

@@ -3,10 +3,12 @@ import { MenuSVG } from '@ensdomains/thorin';
 import { FC, PropsWithChildren, useState } from 'react';
 
 import { Header } from './header/Header';
+import { ProfilePage } from './user/ProfilePage';
 import { UserProfile } from './UserProfile';
 
 export const Layout: FC<PropsWithChildren<{}>> = ({ children }) => {
  const [headerExpanded, setHeaderExpanded] = useState(false);
+ const [userExanded, setUserExpanded] = useState(false);
 
  return (
  <>
@@ -17,6 +19,13 @@ export const Layout: FC<PropsWithChildren<{}>> = ({ children }) => {
  }}
  />
  )}
+ {userExanded && (
+ <ProfilePage
+ onClose={() => {
+ setUserExpanded(false);
+ }}
+ />
+ )}
  <div className="w-full mx-auto max-w-xl px-4 pt-8 pb-16 flex flex-col gap-4">
  <div className="flex justify-between items-center pb-2">
  <div className="flex gap-4 items-center">
@@ -32,7 +41,11 @@ export const Layout: FC<PropsWithChildren<{}>> = ({ children }) => {
  </button>
  </div>
  <div className="h-12">
- <UserProfile />
+ <UserProfile
+ onClick={() => {
+ setUserExpanded(true);
+ }}
+ />
  </div>
  </div>
  {children}

web/src/UserProfile.tsx

@@ -1,24 +1,21 @@
 import { formatAddress } from '@ens-tools/format';
 import { useWeb3Modal } from '@web3modal/wagmi/react';
 import { FC } from 'react';
-import { useAccount, useDisconnect, useEnsAvatar, useEnsName } from 'wagmi';
+import { useAccount, useEnsAvatar, useEnsName } from 'wagmi';
 
-export const UserProfile: FC = () => {
+export const UserProfile: FC<{ onClick: () => void }> = ({ onClick }) => {
  const { open } = useWeb3Modal();
  const { address } = useAccount();
  const { data: name } = useEnsName({ address });
  const { data: avatar } = useEnsAvatar({
  name,
  });
- const { disconnect } = useDisconnect();
 
  if (address) {
  return (
  <button
+ onClick={onClick}
  className="flex h-12 items-center gap-2 pl-1.5 pr-6 justify-center rounded-3xl bg-ens-light-background-primary dark:bg-ens-dark-background-primary"
- onClick={() => {
- disconnect();
- }}
  >
  <div className="w-9 aspect-square rounded-full overflow-hidden bg-ens-light-background-secondary dark:bg-ens-dark-background-secondary">
  {avatar && (

web/src/user/ProfilePage.tsx

@@ -0,0 +1,58 @@
+import { CopySVG, ExitSVG } from '@ensdomains/thorin';
+import { FC, useState } from 'react';
+import { useAccount, useDisconnect } from 'wagmi';
+
+import { Dialog } from '../dialog/Dialog';
+
+export const ProfilePage: FC<{ onClose: () => void }> = ({ onClose }) => {
+ const user = useAccount();
+ const [display, setDisplay] = useState(
+ user.address.slice(0, 6) + '...' + user.address.slice(-4)
+ );
+
+ (async () => {
+ const data = await fetch(
+ 'https://worker.enstate.rs/a/' + user.address
+ ).then((response) => response.json());
+
+ if (data.name) {
+ setDisplay(data.name);
+ }
+
+ if (data.display) {
+ setDisplay(data.display);
+ }
+ })();
+
+ const { disconnect } = useDisconnect();
+
+ return (
+ <div className="z-50 absolute animate-from-top">
+ <Dialog onClose={onClose} variant="top" closeVariant="center">
+ <div className="items-center flex-col w-full space-y-4">
+ <button
+ title={'Click to copy ' + user.address}
+ onClick={() => {
+ // eslint-disable-next-line no-undef
+ navigator.clipboard.writeText(user.address);
+ }}
+ className="justify-center w-full flex flex-row items-center gap-x-2 active:scale-90 transition-transform"
+ >
+ <CopySVG />
+ {display}
+ </button>
+ <button
+ onClick={() => {
+ disconnect();
+ onClose();
+ }}
+ className="justify-center w-full text-ens-light-red-primary dark:text-ens-light-red-primary flex flex-row items-center gap-x-2 scale-90 transition-transform"
+ >
+ <ExitSVG />
+ Disconnect
+ </button>
+ </div>
+ </Dialog>
+ </div>
+ );
+};