From d139935fe9f9e40121817b23d265daf3b4b5b712 Mon Sep 17 00:00:00 2001
From: Jonatan <jonatan@jontes.page>
Date: Tue, 9 Jan 2024 08:09:45 +0100
Subject: [PATCH] Add Profile (#5)

---
 web/src/Layout.tsx           | 15 +++++++++-
 web/src/UserProfile.tsx      |  9 ++----
 web/src/user/ProfilePage.tsx | 58 ++++++++++++++++++++++++++++++++++++
 3 files changed, 75 insertions(+), 7 deletions(-)
 create mode 100644 web/src/user/ProfilePage.tsx

diff --git a/web/src/Layout.tsx b/web/src/Layout.tsx
index cf596e4..7a8d749 100644
--- a/web/src/Layout.tsx
+++ b/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}
diff --git a/web/src/UserProfile.tsx b/web/src/UserProfile.tsx
index 9f7c590..eb229d1 100644
--- a/web/src/UserProfile.tsx
+++ b/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 && (
diff --git a/web/src/user/ProfilePage.tsx b/web/src/user/ProfilePage.tsx
new file mode 100644
index 0000000..9456d69
--- /dev/null
+++ b/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>
+    );
+};