From 63081123519a0af816e65582b59042597e8c5789 Mon Sep 17 00:00:00 2001
From: Thibaut Sardan <github@thib.top>
Date: Thu, 26 Sep 2024 22:13:06 +0100
Subject: [PATCH] other idea

---
 src/components/DelegateCard.tsx | 34 ++++++++++-----
 src/components/IdentityIcon.tsx | 75 +++++++++++++++++++++++++++++++++
 src/components/IdentityInfo.tsx | 68 ------------------------------
 3 files changed, 98 insertions(+), 79 deletions(-)
 create mode 100644 src/components/IdentityIcon.tsx
 delete mode 100644 src/components/IdentityInfo.tsx

diff --git a/src/components/DelegateCard.tsx b/src/components/DelegateCard.tsx
index c58d05b..d9aceb8 100644
--- a/src/components/DelegateCard.tsx
+++ b/src/components/DelegateCard.tsx
@@ -6,14 +6,15 @@ import { ContentReveal } from './ui/content-reveal'
 import { cn } from '@/lib/utils'
 import { sanitizeString } from '@/lib/utils'
 import { useNetwork } from '@/contexts/NetworkContext'
-import { toast } from 'sonner'
 import { LinkIcon } from 'lucide-react'
 
 import Markdown from 'react-markdown'
 import { H, H2, H3, Hr, P } from './ui/md'
 import { AnchorLink } from './ui/anchorLink'
-import { useCallback, useMemo } from 'react'
-import { IdentityInfo } from './IdentityInfo'
+import { useCallback, useMemo, useState } from 'react'
+import { IdentityIcon } from './IdentityIcon'
+import { PopoverContent, PopoverTrigger } from './ui/popover'
+import { Popover } from '@radix-ui/react-popover'
 
 interface Props {
   delegate: Delegate
@@ -31,8 +32,10 @@ export const DelegateCard = ({
   const { network } = useNetwork()
   const navigate = useNavigate()
   const { search } = useLocation()
+  const [isCopyPopoverOpen, setIsCopyPopoverOpen] = useState(false)
   const copyLink = useMemo(
-    () => `${window.location.host}/${network}/${sanitizeString(name)}`,
+    () =>
+      `${location.protocol}//${location.host}/${network}/${sanitizeString(name)}`,
     [name, network],
   )
   const shouldHideLongDescription =
@@ -44,9 +47,10 @@ export const DelegateCard = ({
 
   const onCopy = useCallback(() => {
     navigator.clipboard.writeText(copyLink)
-    toast.success('Copied to clipboard', {
-      duration: 1000,
-    })
+    setIsCopyPopoverOpen(true)
+    setTimeout(() => {
+      setIsCopyPopoverOpen(false)
+    }, 1000)
   }, [copyLink])
 
   const DelegateAvatar: React.FC = () => {
@@ -70,12 +74,20 @@ export const DelegateCard = ({
         <div className="w-full p-2">
           <div className="flex items-center justify-between">
             <div className="flex items-center gap-1 py-2 text-xl font-semibold">
-              <IdentityInfo address={address} name={name} />
               {hasShareButton && (
-                <Button variant="ghost" onClick={onCopy} size="icon">
-                  <LinkIcon className="h-4 w-4 text-accent-foreground" />
-                </Button>
+                <Popover open={isCopyPopoverOpen}>
+                  <PopoverTrigger onClick={(event) => event.stopPropagation()}>
+                    <Button variant="ghost" onClick={onCopy} size="icon">
+                      <LinkIcon className="h-4 w-4 text-accent-foreground" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-auto">
+                    Direct link copied!
+                  </PopoverContent>
+                </Popover>
               )}
+              <IdentityIcon address={address} />
+              <span>{name}</span>
             </div>
           </div>
           <div className="text-accent-foreground">
diff --git a/src/components/IdentityIcon.tsx b/src/components/IdentityIcon.tsx
new file mode 100644
index 0000000..ee3dbab
--- /dev/null
+++ b/src/components/IdentityIcon.tsx
@@ -0,0 +1,75 @@
+import { IoCheckmarkCircle, IoMail } from 'react-icons/io5'
+import { useIdentity } from '@/hooks/useIdentity'
+import { TbCircleDashedMinus, TbWorld } from 'react-icons/tb'
+import { Popover, PopoverContent, PopoverTrigger } from './ui/popover'
+import { AnchorLink } from './ui/anchorLink'
+import { BsTwitterX } from 'react-icons/bs'
+import { MessageCircleDashed, User } from 'lucide-react'
+
+interface Props {
+  address: string
+}
+
+export const IdentityIcon = ({ address }: Props) => {
+  const identity = useIdentity(address)
+
+  if (!identity?.display) return null
+
+  return (
+    <div className="flex items-center">
+      <Popover>
+        <PopoverTrigger>
+          {identity?.judgement ? (
+            <IoCheckmarkCircle className="mr-2 text-green-500" />
+          ) : (
+            <TbCircleDashedMinus className="mr-2 text-gray-500" />
+          )}
+        </PopoverTrigger>
+        <PopoverContent className="w-auto">
+          {identity.display && (
+            <p className="max-w-[15rem]">{identity.display}</p>
+          )}
+          {identity.legal && (
+            <div className="flex items-center gap-2">
+              <User className="h-5 w-5" />
+              {identity.legal}
+            </div>
+          )}
+          {identity.twitter && (
+            <div className="flex items-center gap-2">
+              <BsTwitterX />
+              <AnchorLink
+                href={`https://x.com/${identity.twitter?.toString().replace('@', '')}`}
+                target="_blank"
+              >
+                {identity.twitter}
+              </AnchorLink>
+            </div>
+          )}
+          {identity.email && (
+            <div className="flex items-center gap-2">
+              <IoMail />
+              <AnchorLink href={`mailto:${identity.email}`}>
+                {identity.email}
+              </AnchorLink>
+            </div>
+          )}
+          {identity.web && (
+            <div className="flex items-center gap-2">
+              <TbWorld />
+              <AnchorLink href={identity.web.toString()} target="_blank">
+                {identity.web}
+              </AnchorLink>
+            </div>
+          )}
+          {identity.matrix && (
+            <div className="flex items-center gap-2">
+              <MessageCircleDashed />
+              {identity.matrix}
+            </div>
+          )}
+        </PopoverContent>
+      </Popover>
+    </div>
+  )
+}
diff --git a/src/components/IdentityInfo.tsx b/src/components/IdentityInfo.tsx
deleted file mode 100644
index c95f7ce..0000000
--- a/src/components/IdentityInfo.tsx
+++ /dev/null
@@ -1,68 +0,0 @@
-import { BsTwitterX } from 'react-icons/bs'
-import { IoCheckmarkCircle, IoMail } from 'react-icons/io5'
-import { TbWorld } from 'react-icons/tb'
-import { Button } from './ui/button'
-import { useIdentity } from '@/hooks/useIdentity'
-import { TbCircleDashedMinus } from 'react-icons/tb'
-
-interface Props {
-  name: string
-  address: string
-}
-
-export const IdentityInfo = ({ name, address }: Props) => {
-  const identity = useIdentity(address)
-
-  return (
-    <>
-      {identity?.display ? (
-        <div className="flex items-center">
-          {identity?.display}
-          {identity?.judgement ? (
-            <IoCheckmarkCircle className="ml-4 text-green-500" />
-          ) : (
-            <TbCircleDashedMinus className="ml-4 text-gray-500" />
-          )}
-        </div>
-      ) : (
-        name
-      )}
-      {identity && (
-        <div
-          className={`flex items-center justify-around text-${identity?.judgement ? 'green' : 'gray'}-500`}
-        >
-          {identity?.web && (
-            <Button
-              variant="ghost"
-              onClick={() => window.open(identity?.web as string, '_blank')}
-              size="icon"
-            >
-              <TbWorld />
-            </Button>
-          )}
-          {identity?.twitter && (
-            <Button
-              variant="ghost"
-              onClick={() =>
-                window.open(
-                  `https://twitter.com/@${identity?.twitter}`,
-                  '_blank',
-                )
-              }
-              size="icon"
-            >
-              <BsTwitterX />
-            </Button>
-          )}
-          {identity?.email && (
-            <Button variant="ghost" size="icon">
-              <a href={`mailto:${identity?.email}`}>
-                <IoMail />
-              </a>
-            </Button>
-          )}
-        </div>
-      )}
-    </>
-  )
-}