feat(token reward): pool details dialog

src/rewards/Token/PoolDetailsDialog.tsx

@@ -0,0 +1,83 @@
+import { Anchor } from "@/components/ui/Anchor"
+import { Badge, badgeVariants } from "@/components/ui/Badge"
+import { Button } from "@/components/ui/Button"
+import {
+  Dialog,
+  DialogBody,
+  DialogCloseButton,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/Dialog"
+import { useCopyToClipboard } from "@/hooks/useCopyToClipboard"
+import { cn } from "@/lib/utils"
+import { Check, Copy } from "@phosphor-icons/react/dist/ssr"
+import { useRolePlatform } from "components/[guild]/RolePlatforms/components/RolePlatformProvider"
+import { Dispatch, SetStateAction } from "react"
+import shortenHex from "utils/shortenHex"
+import { CHAIN_CONFIG, Chain } from "wagmiConfig/chains"
+
+type Props = {
+  open: boolean
+  onOpenChange: Dispatch<SetStateAction<boolean>>
+}
+
+export const PoolDetailsDialog = ({ open, onOpenChange }: Props) => {
+  const { guildPlatform } = useRolePlatform()
+
+  const { chain, poolId, contractAddress } = guildPlatform.platformGuildData
+
+  const chainIcon = CHAIN_CONFIG[chain as Chain].iconUrl
+  const chainName = CHAIN_CONFIG[chain as Chain].name
+  const blockExplorerUrl = CHAIN_CONFIG[chain as Chain].blockExplorerUrl
+
+  const { hasCopied, copyToClipboard } = useCopyToClipboard()
+
+  return (
+    <Dialog open={open} onOpenChange={(open) => onOpenChange(open)}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Pool details</DialogTitle>
+        </DialogHeader>
+
+        <DialogBody>
+          <div className="flex h-8 items-center justify-between">
+            <span className="font-bold">Chain</span>
+            <Badge>
+              <img src={chainIcon} alt={chainName} className="size-4" />
+              <span>{chainName}</span>
+            </Badge>
+          </div>
+
+          <div className="flex h-8 items-center justify-between">
+            <span className="font-bold">Contract</span>
+            <Badge>
+              <Anchor
+                href={`${blockExplorerUrl}/address/${contractAddress}`}
+                className="hover:underline-offset-1"
+                target="_blank"
+                showExternal
+              >
+                {shortenHex(contractAddress)}
+              </Anchor>
+            </Badge>
+          </div>
+
+          <div className="flex h-8 items-center justify-between">
+            <span className="font-bold">Pool ID</span>
+            <Button
+              className={cn(badgeVariants({ className: "" }))}
+              size="sm"
+              leftIcon={hasCopied ? <Check weight="bold" /> : <Copy weight="bold" />}
+              onClick={() => copyToClipboard(poolId.toString())}
+            >
+              {`#${poolId}`}
+            </Button>
+          </div>
+        </DialogBody>
+
+        <DialogCloseButton />
+      </DialogContent>
+    </Dialog>
+  )
+}

src/rewards/Token/TokenRewardCardEditMenu.tsx

@@ -1,11 +1,9 @@
-import { useCopyToClipboard } from "@/hooks/useCopyToClipboard"
 import { useDisclosure } from "@/hooks/useDisclosure"
 import { MenuDivider, MenuItem, useColorModeValue } from "@chakra-ui/react"
 import {
+  ArrowSquareOut,
   ArrowsLeftRight,
-  Check,
   Coin,
-  Copy,
   Pencil,
   TrashSimple,
   Wallet,
@@ -20,6 +18,7 @@ import { ERC20_SUPPORTED_CHAINS } from "utils/guildCheckout/constants"
 import { useAccount } from "wagmi"
 import EditTokenModal from "./EditTokenModal"
 import FundPoolModal from "./FundPoolModal"
+import { PoolDetailsDialog } from "./PoolDetailsDialog"
 import RemoveTokenRewardConfirmation from "./RemoveTokenRewardConfirmation"
 import WithdrawPoolModal from "./WithdrawPoolModal"
 import usePool from "./hooks/usePool"
@@ -59,7 +58,11 @@ const TokenRewardCardEditMenu = ({
     setValue: transferOwnershipSetValue,
   } = useDisclosure()
 
-  const { copyToClipboard, hasCopied } = useCopyToClipboard()
+  const {
+    onOpen: poolDetailsOnOpen,
+    isOpen: poolDetailsIsOpen,
+    setValue: poolDetailsSetValue,
+  } = useDisclosure()
 
   const {
     isOpen: deleteIsOpen,
@@ -104,15 +107,8 @@ const TokenRewardCardEditMenu = ({
             Transfer pool ownership
           </MenuItem>
         )}
-        <MenuItem
-          icon={hasCopied ? <Check /> : <Copy />}
-          onClick={() =>
-            copyToClipboard(
-              guildPlatform.platformGuildData?.poolId?.toString() ?? "Unknown pool"
-            )
-          }
-        >
-          Copy pool ID
+        <MenuItem icon={<ArrowSquareOut />} onClick={poolDetailsOnOpen}>
+          View pool details
         </MenuItem>
         <MenuDivider />
         <MenuItem icon={<TrashSimple />} onClick={deleteOnOpen} color={removeColor}>
@@ -157,6 +153,11 @@ const TokenRewardCardEditMenu = ({
           onSuccess={() => setShouldHideTransferButton(true)}
         />
       )}
+
+      <PoolDetailsDialog
+        open={poolDetailsIsOpen}
+        onOpenChange={poolDetailsSetValue}
+      />
     </>
   )
 }

src/v2/components/ui/Badge.tsx

@@ -2,7 +2,7 @@ import { cn } from "@/lib/utils"
 import { type VariantProps, cva } from "class-variance-authority"
 import { ElementRef, HTMLAttributes, forwardRef } from "react"
 
-const badgeVariants = cva(
+export const badgeVariants = cva(
   "inline-flex items-center rounded-md px-2 transition-colors focus:outline-none focus-visible:ring-4 focus:ring-ring font-medium max-w-max gap-1.5",
   {
     variants: {