feat(AirdropRequirement): use Tailwind CSS and Radix UI (#1533)

src/components/[guild]/leaderboard/Snapshots/CreateSnapshotModal.tsx

@@ -146,7 +146,7 @@ const CreateSnapshotModal = ({ onClose, isOpen, onSuccess }: Props) => {
                 </Text>
                 <SnapshotTable
                   snapshotData={leaderboardToSnapshot}
-                  chakraProps={{ mt: 0 }}
+                  className="mt-0"
                 />
               </Box>
             </Stack>

src/components/[guild]/leaderboard/Snapshots/SnapshotModal.tsx

@@ -1,35 +1,30 @@
 import {
-  Center,
-  HStack,
-  Img,
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalHeader,
-  ModalOverlay,
-  Stack,
-  Text,
-} from "@chakra-ui/react"
+  Dialog,
+  DialogBody,
+  DialogCloseButton,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/Dialog"
+import { Schemas } from "@guildxyz/types"
 import { useAccessedGuildPoints } from "components/[guild]/AccessHub/hooks/useAccessedGuildPoints"
-import { useMemo } from "react"
+import { ReactNode, useMemo } from "react"
 import Star from "static/icons/star.svg"
+import { Requirement } from "types"
 import SnapshotTable from "./SnapshotTable"
 
-type Props = {
-  onClose: () => void
-  isOpen: boolean
-  snapshotRequirement: any
-}
-
-type SnapshotData = {
-  rank: number
-  address: `0x${string}`
-  points: number
-}
+// TODO: implement proper schemas in our types package and use those here
+type GuildRewardWithId = Schemas["GuildReward"] & { id: number }
 
-const SnapshotModal = ({ onClose, isOpen, snapshotRequirement }: Props) => {
-  const snapshotData: SnapshotData[] = useMemo(
+const SnapshotModal = ({
+  snapshotRequirement,
+  trigger,
+}: {
+  snapshotRequirement: Extract<Requirement, { type: "GUILD_SNAPSHOT" }>
+  trigger: ReactNode
+}) => {
+  const snapshotData = useMemo(
     () =>
       snapshotRequirement.data.snapshot
         .sort((a, b) => b.value - a.value)
@@ -44,70 +39,68 @@ const SnapshotModal = ({ onClose, isOpen, snapshotRequirement }: Props) => {
   const pointsRewards = useAccessedGuildPoints("ALL")
   const pointsReward = pointsRewards.find(
     (gp) => gp.id === snapshotRequirement.data.guildPlatformId
-  )
+  ) as Extract<GuildRewardWithId, { platformName: "POINTS" }> | undefined
+
+  if (!pointsReward) return null
 
   const pointData = pointsReward
     ? {
         id: pointsReward.id.toString(),
-        name: pointsReward.platformGuildData.name || "points",
-        image: pointsReward.platformGuildData.imageUrl ? (
-          <Img
+        name: pointsReward.platformGuildData?.name || "points",
+        image: pointsReward.platformGuildData?.imageUrl ? (
+          <img
             src={pointsReward.platformGuildData.imageUrl}
-            boxSize={5}
-            borderRadius={"full"}
+            className="size-5 rounded-full"
           />
         ) : (
-          <Center boxSize={5}>
+          <div className="flex size-5 items-center justify-center">
             <Star />
-          </Center>
+          </div>
         ),
       }
     : null
 
   return (
-    <>
-      <Modal size="lg" isOpen={isOpen} onClose={onClose} colorScheme="dark">
-        <ModalOverlay />
-        <ModalContent>
-          <ModalHeader>
-            <HStack>
-              <Text>{snapshotRequirement.name || "View snapshot"}</Text>
-            </HStack>
-          </ModalHeader>
-          <ModalCloseButton />
+    <Dialog>
+      <DialogTrigger asChild>{trigger}</DialogTrigger>
+      <DialogContent size="lg">
+        <DialogHeader>
+          <DialogTitle>{snapshotRequirement.name || "View snapshot"}</DialogTitle>
+        </DialogHeader>
+
+        <DialogBody>
+          <div className="mb-3 flex flex-col gap-1">
+            <div className="flex items-center justify-between gap-2">
+              <span className="text-muted-foreground">Snapshot type</span>
+              <span>{pointData ? "Point based" : "Custom upload"}</span>
+            </div>
+
+            {pointData && (
+              <div className="flex items-center justify-between gap-2">
+                <span className="text-muted-foreground">Point type</span>
+                <div className="flex items-center gap-0.5">
+                  {pointData.image}
+                  <span>{pointData.name}</span>
+                </div>
+              </div>
+            )}
+
+            {!!snapshotRequirement.createdAt && (
+              <div className="flex items-center justify-between gap-2">
+                <span className="text-muted-foreground">Created at</span>
+                <span>
+                  {new Date(snapshotRequirement.createdAt).toLocaleString()}
+                </span>
+              </div>
+            )}
+          </div>
 
-          <ModalBody>
-            <Stack gap={1} mb={3}>
-              <HStack justifyContent={"space-between"}>
-                <Text color={"GrayText"}>Snapshot type</Text>
-                <Text>{pointData ? "Point based" : "Custom upload"}</Text>
-              </HStack>
-              <HStack justifyContent={"space-between"}>
-                {pointData && (
-                  <>
-                    <Text color={"GrayText"}>Point type</Text>
-                    <HStack>
-                      {pointData.image}
-                      <Text>{pointData.name}</Text>
-                    </HStack>
-                  </>
-                )}
-              </HStack>
-              {!!snapshotRequirement.createdAt && (
-                <HStack justifyContent={"space-between"}>
-                  <Text color={"GrayText"}>Created at</Text>
-                  <Text>
-                    {new Date(snapshotRequirement.createdAt).toLocaleString()}
-                  </Text>
-                </HStack>
-              )}
-            </Stack>
+          <SnapshotTable snapshotData={snapshotData} />
+        </DialogBody>
 
-            <SnapshotTable snapshotData={snapshotData} />
-          </ModalBody>
-        </ModalContent>
-      </Modal>
-    </>
+        <DialogCloseButton />
+      </DialogContent>
+    </Dialog>
   )
 }