From 99ec94dcf953a1856df2ffeba7521c202f9b1828 Mon Sep 17 00:00:00 2001
From: Dominik Stumpf <s.dominik.work@gmail.com>
Date: Wed, 10 Jul 2024 21:34:12 +0200
Subject: [PATCH] chore: pull UserGuildPins

---
 .../Notifications/Notifications.tsx           | 24 ++---
 .../components/UsersGuildPins.tsx             | 99 +++++++++++++++++++
 2 files changed, 111 insertions(+), 12 deletions(-)
 create mode 100644 src/v2/components/Account/components/AccountModal/components/UsersGuildPins.tsx

diff --git a/src/components/common/Layout/components/Account/components/Notifications/Notifications.tsx b/src/components/common/Layout/components/Account/components/Notifications/Notifications.tsx
index beb0f5ca4a..977ce3b20d 100644
--- a/src/components/common/Layout/components/Account/components/Notifications/Notifications.tsx
+++ b/src/components/common/Layout/components/Account/components/Notifications/Notifications.tsx
@@ -1,5 +1,6 @@
 import { usePostHogContext } from "@/components/Providers/PostHogProvider"
 import { useWeb3ConnectionManager } from "@/components/Web3ConnectionManager/hooks/useWeb3ConnectionManager"
+import { Button } from "@/components/ui/Button"
 import {
   Divider,
   Icon,
@@ -16,7 +17,6 @@ import { ActivityLogProvider } from "components/[guild]/activity/ActivityLogCont
 import useUser from "components/[guild]/hooks/useUser"
 import useLocalStorage from "hooks/useLocalStorage"
 import dynamic from "next/dynamic"
-import AccountButton from "../AccountButton"
 import WebInboxSkeleton from "../Web3Inbox/WebInboxSkeleton"
 import NotificationsActivityLog from "./components/NotificationsActivityLog"
 import NotificationsSection from "./components/NotificationsSection"
@@ -51,22 +51,22 @@ const Notifications = () => {
       {({ isOpen }) => (
         <>
           <PopoverTrigger>
-            <AccountButton
+            <Button
               aria-label="Notifications"
               onClick={() => {
                 setClickedOnNotifications(true)
                 if (isOpen) return
                 captureEvent("opened UserActivityLogPopover")
               }}
-              sx={{
-                "@keyframes notification": {
-                  "0%": { transform: "rotate(0deg)" },
-                  "2.5%": { transform: "rotate(15deg)" },
-                  "5%": { transform: "rotate(-15deg)" },
-                  "7.5": { transform: "rotate(15deg)" },
-                  "10%": { transform: "rotate(0deg)" },
-                },
-              }}
+              // sx={{
+              //   "@keyframes notification": {
+              //     "0%": { transform: "rotate(0deg)" },
+              //     "2.5%": { transform: "rotate(15deg)" },
+              //     "5%": { transform: "rotate(-15deg)" },
+              //     "7.5": { transform: "rotate(15deg)" },
+              //     "10%": { transform: "rotate(0deg)" },
+              //   },
+              // }}
             >
               <Icon
                 as={Bell}
@@ -77,7 +77,7 @@ const Notifications = () => {
                     : "notification 4s ease-in-out infinite"
                 }
               />
-            </AccountButton>
+            </Button>
           </PopoverTrigger>
 
           <PopoverContent
diff --git a/src/v2/components/Account/components/AccountModal/components/UsersGuildPins.tsx b/src/v2/components/Account/components/AccountModal/components/UsersGuildPins.tsx
new file mode 100644
index 0000000000..23c07a6bad
--- /dev/null
+++ b/src/v2/components/Account/components/AccountModal/components/UsersGuildPins.tsx
@@ -0,0 +1,99 @@
+import { AccountSectionTitle } from "@/components/Account/components/AccountModal/components/AccountSection"
+import { accountModalAtom } from "@/components/Providers/atoms"
+import { Alert, AlertDescription } from "@/components/ui/Alert"
+import { Badge } from "@/components/ui/Badge"
+import { Skeleton } from "@/components/ui/Skeleton"
+import useUsersGuildPins from "@/hooks/useUsersGuildPins"
+import { Info } from "@phosphor-icons/react/dist/ssr"
+import { useAtomValue, useSetAtom } from "jotai"
+import Link from "next/link"
+
+const UsersGuildPins = () => {
+  const isAccountModalOpen = useAtomValue(accountModalAtom)
+  const { data, error, isValidating } = useUsersGuildPins(!isAccountModalOpen)
+
+  return (
+    <>
+      <AccountSectionTitle title="Guild Pins" />
+
+      {error && (
+        <Alert variant="info" className="mb-3">
+          <Info weight="bold" className="size-6" />
+          <AlertDescription>
+            There was an error while fetching your pins, some may not be visible.
+          </AlertDescription>
+        </Alert>
+      )}
+
+      <div
+        className="invisible-scrollbar -mx-4 relative min-w-full overflow-x-auto"
+        style={{
+          maskImage:
+            "linear-gradient(to right, transparent 0px, black 16px, black calc(100% - 16px), transparent)",
+        }}
+      >
+        <div className="flex min-w-full px-4">
+          {isValidating ? (
+            [...Array(3)].map((_, i) => <GuildPinSkeleton key={i} />)
+          ) : data?.length ? (
+            data.map((pin) => (
+              <GuildPin
+                key={pin.tokenId}
+                image={pin.image}
+                name={pin.name}
+                guild={pin.attributes
+                  .find((attribute) => attribute.trait_type === "guildId")
+                  .value.toString()}
+                rank={pin.attributes
+                  .find((attribute) => attribute.trait_type === "rank")
+                  .value.toString()}
+              />
+            ))
+          ) : (
+            <p className="text-sm">You haven't minted any Guild Pins yet</p>
+          )}
+        </div>
+      </div>
+    </>
+  )
+}
+
+const GuildPin = ({
+  name,
+  image,
+  guild,
+  rank,
+}: {
+  name: string
+  image: string
+  guild: string
+  rank: string
+}) => {
+  const setIsAccountModalOpen = useSetAtom(accountModalAtom)
+
+  return (
+    <Link
+      href={`/${guild}`}
+      onClick={() => setIsAccountModalOpen(false)}
+      className="peer -ml-10 transition-transform first:ml-0 hover:scale-105 peer-hover:translate-x-8"
+    >
+      <div className="relative size-20 rounded-full border-2 border-card bg-card">
+        <img src={image} alt={name} />
+
+        <div className="-bottom-1 -translate-x-1/2 absolute left-1/2 flex rounded-lg border-2 border-card bg-card font-semibold">
+          <Badge variant="secondary" size="sm">
+            #{rank}
+          </Badge>
+        </div>
+      </div>
+    </Link>
+  )
+}
+
+const GuildPinSkeleton = () => (
+  <div className="-ml-10 relative size-20 rounded-full border-2 border-card bg-card first:ml-0">
+    <Skeleton className="size-full rounded-full" />
+  </div>
+)
+
+export { UsersGuildPins }