From 795660d5c34aaf4e13ca216a4565963873ef3aa1 Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Thu, 28 Jul 2022 00:37:54 +0100
Subject: [PATCH] feat: connect button drop down

---
 src/components/common/ConnectButton.tsx      | 63 +++++++++++++++++++-
 src/components/dashboard/DashboardLayout.tsx |  2 +-
 src/components/icons/CopyIcon.tsx            |  9 +++
 src/components/icons/LogoutIcon.tsx          |  9 +++
 4 files changed, 79 insertions(+), 4 deletions(-)
 create mode 100644 src/components/icons/CopyIcon.tsx
 create mode 100644 src/components/icons/LogoutIcon.tsx

diff --git a/src/components/common/ConnectButton.tsx b/src/components/common/ConnectButton.tsx
index 1832f507..7484c4d8 100644
--- a/src/components/common/ConnectButton.tsx
+++ b/src/components/common/ConnectButton.tsx
@@ -1,11 +1,51 @@
 import { ConnectButton as RainbowConnectButton } from "@rainbow-me/rainbowkit"
 import { useGetUserSites } from "~/queries/site"
-import { useAccount } from "wagmi"
+import { useAccount, useDisconnect } from "wagmi"
 import { Avatar } from "~/components/ui/Avatar";
+import type { HeaderLinkType } from "~/components/site/SiteHeader"
+import { DashboardIcon } from "../icons/DashboardIcon"
+import { LogoutIcon } from "../icons/LogoutIcon"
+import { CopyIcon } from "../icons/CopyIcon"
+import { IS_PROD } from "~/lib/constants"
+import { OUR_DOMAIN } from "~/lib/env"
+import { UniLink } from "../ui/UniLink"
+import { useState } from "react"
 
-export const ConnectButton = () => {
+export const ConnectButton: React.FC<{
+  left?: boolean
+}> = ({ left, }) => {
   const { data: viewer } = useAccount()
   const userSites = useGetUserSites(viewer?.address)
+  const { disconnect } = useDisconnect()
+
+  const addressDisplay = viewer?.address?.slice(0, 5) + "..." + viewer?.address?.slice(-4)
+  const [copyLabel, setCopyLabel] = useState(addressDisplay)
+
+  const dropdownLinks: HeaderLinkType[] = [
+    {
+      icon: <CopyIcon />,
+      label: copyLabel,
+      onClick() {
+        navigator.clipboard.writeText(viewer?.address || "")
+        setCopyLabel("Copied!")
+        setTimeout(() => {
+          setCopyLabel(addressDisplay)
+        }, 1000)
+      },
+    },
+    {
+      icon: <DashboardIcon />,
+      label: "Writer dashboard",
+      url: `${IS_PROD ? "https" : "http"}://${OUR_DOMAIN}/dashboard`,
+    },
+    {
+      icon: <LogoutIcon />,
+      label: "Disconnect",
+      onClick() {
+        disconnect()
+      },
+    },
+  ]
 
   return (
     <RainbowConnectButton.Custom>
@@ -38,7 +78,7 @@ export const ConnectButton = () => {
                 );
               }
               return (
-                <div className="flex" style={{ gap: 12 }}>
+                <div className="flex relative group" style={{ gap: 12 }}>
                   <button className="flex items-center" onClick={openAccountModal} type="button">
                     <Avatar
                       className="align-middle mr-2"
@@ -51,6 +91,23 @@ export const ConnectButton = () => {
                       <span className="text-left leading-none text-xs text-gray-400">{"@" + userSites.data?.[0]?.username || account.displayName}</span>
                     </div>
                   </button>
+                  <div className={`absolute hidden ${left ? "left" : "right"}-0 pt-2 group-hover:block top-full z-10 text-gray-600`}>
+                    <div className="bg-white rounded-lg ring-1 ring-zinc-100 min-w-[140px] shadow-md py-2">
+                      {dropdownLinks.map((link, i) => {
+                        return (
+                          <UniLink
+                            key={i}
+                            href={link.url}
+                            onClick={link.onClick}
+                            className="px-4 h-8 flex items-center w-full whitespace-nowrap hover:bg-zinc-100"
+                          >
+                            <span className="mr-2">{link.icon}</span>
+                            {link.label}
+                          </UniLink>
+                        )
+                      })}
+                    </div>
+                  </div>
                 </div>
               );
             })()}
diff --git a/src/components/dashboard/DashboardLayout.tsx b/src/components/dashboard/DashboardLayout.tsx
index 28abd02c..c5a5831c 100644
--- a/src/components/dashboard/DashboardLayout.tsx
+++ b/src/components/dashboard/DashboardLayout.tsx
@@ -77,7 +77,7 @@ export function DashboardLayout({
       <div className="flex">
         <DashboardSidebar>
           <div className="mb-2 px-5 pt-3 pb-2">
-            <ConnectButton />
+            <ConnectButton left={true} />
           </div>
 
           <div className="px-3 space-y-[2px] text-zinc-500">
diff --git a/src/components/icons/CopyIcon.tsx b/src/components/icons/CopyIcon.tsx
new file mode 100644
index 00000000..56277b03
--- /dev/null
+++ b/src/components/icons/CopyIcon.tsx
@@ -0,0 +1,9 @@
+import React from "react"
+
+export const CopyIcon: React.FC<React.ComponentPropsWithoutRef<"svg">> = (
+  props
+) => {
+  return (
+    <svg width="1em" height="1em" {...props} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5253"><path d="M832 128c-12.8-76.8-76.8-128-160-128h-448C102.4 0 0 102.4 0 224v448c0 76.8 57.6 140.8 128 160 12.8 76.8 76.8 128 160 128h512c89.6 0 160-70.4 160-160v-512c0-76.8-57.6-140.8-128-160zM64 672v-448C64 134.4 134.4 64 224 64h448c44.8 0 76.8 25.6 89.6 64H288C198.4 128 128 198.4 128 288v473.6c-38.4-12.8-64-44.8-64-89.6z m832 128c0 51.2-44.8 96-96 96h-512c-51.2 0-96-44.8-96-96v-512C192 236.8 236.8 192 288 192h512c51.2 0 96 44.8 96 96v512z" p-id="5254"></path></svg>
+  )
+}
diff --git a/src/components/icons/LogoutIcon.tsx b/src/components/icons/LogoutIcon.tsx
new file mode 100644
index 00000000..baf6f9bb
--- /dev/null
+++ b/src/components/icons/LogoutIcon.tsx
@@ -0,0 +1,9 @@
+import React from "react"
+
+export const LogoutIcon: React.FC<React.ComponentPropsWithoutRef<"svg">> = (
+  props
+) => {
+  return (
+    <svg width="1em" height="1em" {...props} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2564"><path d="M896 512c0-14.16-6.128-26.896-15.888-35.68l-160-144a48 48 0 0 0-64.224 71.36L722.912 464H432a48 48 0 1 0 0 96h290.912l-67.008 60.32a48 48 0 1 0 64.208 71.36l160-144A47.84 47.84 0 0 0 896 512zM416 832H224V192h192a48 48 0 1 0 0-96H176a48 48 0 0 0-48 48v736a48 48 0 0 0 48 48h240a48 48 0 1 0 0-96z" fill="" p-id="2565"></path></svg>
+  )
+}