Merge branch 'main' into transaction-status-context-modal-migration

README.md

@@ -43,7 +43,7 @@ Open source interface for Guild.xyz -- a tool for platformless membership manage
 
 1. `npm i`
 2. `npm run dev`
-3. If you don't have the secret environment variables, copy the `.env.examples` as `.env.local`.
+3. If you don't have the secret environment variables, copy the `.env.example` as `.env.local`.
 
 Open [http://localhost:3000](http://localhost:3000) in your browser to see the result.
 

src/app/oauth-result/page.tsx

@@ -54,7 +54,7 @@ const OauthResultPage = ({ searchParams }: { searchParams: OAuthResultParams })
     <div className="flex h-[90vh] flex-col justify-center p-10 text-center">
       <h1 className="mb-3 font-bold text-2xl">
         {searchParams.status === "success"
-          ? `${rewardConfig?.name} successfully conneted!`
+          ? `${rewardConfig?.name} successfully connected!`
           : searchParams.platform
             ? `${rewardConfig?.name} connection failed`
             : "Connection unsuccessful"}

src/rewards/Token/ClaimTokenButton.tsx

@@ -1,5 +1,4 @@
 import { ButtonProps, Tooltip, useDisclosure } from "@chakra-ui/react"
-import { useRolePlatform } from "components/[guild]/RolePlatforms/components/RolePlatformProvider"
 import dynamic from "next/dynamic"
 import { claimTextButtonTooltipLabel } from "rewards/SecretText/TextCardButton"
 import { RewardCardButton } from "rewards/components/RewardCardButton"
@@ -12,25 +11,30 @@ import {
   GeogatedCountryPopover,
   useIsFromGeogatedCountry,
 } from "./GeogatedCountryAlert"
-import { TokenRewardProvider } from "./TokenRewardContext"
+import { TokenRewardProvider, useTokenRewardContext } from "./TokenRewardContext"
 
 type Props = {
   isDisabled?: boolean
-  rolePlatform: RolePlatform
+  rolePlatform: RolePlatform // TODO: decide if it should be a prop or we should get it from context!
 } & ButtonProps
 
 const DynamicClaimTokenModal = dynamic(() => import("./ClaimTokenModal"))
 
-const ClaimTokenButton = ({ isDisabled, children, ...rest }: Props) => {
-  const rolePlatform = useRolePlatform()
+const ClaimTokenButton = ({
+  isDisabled,
+  rolePlatform,
+  children,
+  ...rest
+}: Props) => {
+  const { guildPlatform } = useTokenRewardContext()
 
   const { isOpen, onOpen, onClose } = useDisclosure()
   const isFromGeogatedCountry = useIsFromGeogatedCountry()
 
   const { isAvailable } = getRolePlatformTimeframeInfo(rolePlatform)
 
   return (
-    <TokenRewardProvider guildPlatform={rolePlatform.guildPlatform}>
+    <TokenRewardProvider guildPlatform={guildPlatform}>
       <GeogatedCountryPopover isDisabled={!isFromGeogatedCountry}>
         <Tooltip
           isDisabled={!isAvailable}

src/rewards/Token/EditTokenModal.tsx

@@ -170,8 +170,8 @@ const EditTokenModal = ({
     if (!!snapshotRequirement && changeSnapshot) {
       await submitEditRequirement({
         ...snapshotRequirement,
+        ...data.snapshotRequirement,
         id: snapshotRequirement?.id!, // just to make TS happy...
-        data: data?.data?.guildPlatformId ? data.data : snapshotRequirement?.data,
       })
     }
 

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,18 +1,33 @@
+import { useDisclosure } from "@/hooks/useDisclosure"
+import { MenuDivider, MenuItem, useColorModeValue } from "@chakra-ui/react"
 import {
-  MenuDivider,
-  MenuItem,
-  useColorModeValue,
-  useDisclosure,
-} from "@chakra-ui/react"
-import { Coin, Pencil, TrashSimple, Wallet } from "@phosphor-icons/react"
+  ArrowSquareOut,
+  ArrowsLeftRight,
+  Coin,
+  Pencil,
+  TrashSimple,
+  Wallet,
+} from "@phosphor-icons/react"
 import EditRewardAvailabilityMenuItem from "components/[guild]/AccessHub/components/EditRewardAvailabilityMenuItem"
 import PlatformCardMenu from "components/[guild]/RolePlatforms/components/PlatformCard/components/PlatformCardMenu"
 import useToast from "hooks/useToast"
+import dynamic from "next/dynamic"
+import { useState } from "react"
 import { GuildPlatform } from "types"
+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"
+
+const DynamicTransferPoolOwnershipDialog = dynamic(() =>
+  import("./TransferPoolOwnershipDialog").then(
+    (module) => module.TransferPoolOwnershipDialog
+  )
+)
 
 const TokenRewardCardEditMenu = ({
   guildPlatform,
@@ -37,6 +52,18 @@ const TokenRewardCardEditMenu = ({
     onClose: editOnClose,
   } = useDisclosure()
 
+  const {
+    onOpen: transferOwnershipOnOpen,
+    isOpen: transferOwnershipIsOpen,
+    setValue: transferOwnershipSetValue,
+  } = useDisclosure()
+
+  const {
+    onOpen: poolDetailsOnOpen,
+    isOpen: poolDetailsIsOpen,
+    setValue: poolDetailsSetValue,
+  } = useDisclosure()
+
   const {
     isOpen: deleteIsOpen,
     onOpen: deleteOnOpen,
@@ -47,6 +74,18 @@ const TokenRewardCardEditMenu = ({
 
   const removeColor = useColorModeValue("red.600", "red.300")
 
+  const { address } = useAccount()
+  const { data } = usePool(
+    // TODO: should we use `guildPlatform.platformGuildData.contractAddress` here instead?
+    guildPlatform.platformGuildData
+      ?.chain as (typeof ERC20_SUPPORTED_CHAINS)[number],
+    BigInt(guildPlatform.platformGuildData?.poolId ?? "0") // We'll never use this fallback, since poolId is defined at this point
+  )
+
+  const isPoolOwner = data?.owner?.toLowerCase() === address?.toLowerCase()
+
+  const [shouldHideTransferButton, setShouldHideTransferButton] = useState(false)
+
   return (
     <>
       <PlatformCardMenu>
@@ -63,6 +102,14 @@ const TokenRewardCardEditMenu = ({
         <MenuItem icon={<Wallet />} onClick={withdrawOnOpen}>
           Withdraw from pool
         </MenuItem>
+        {isPoolOwner && !shouldHideTransferButton && (
+          <MenuItem icon={<ArrowsLeftRight />} onClick={transferOwnershipOnOpen}>
+            Transfer pool ownership
+          </MenuItem>
+        )}
+        <MenuItem icon={<ArrowSquareOut />} onClick={poolDetailsOnOpen}>
+          View pool details
+        </MenuItem>
         <MenuDivider />
         <MenuItem icon={<TrashSimple />} onClick={deleteOnOpen} color={removeColor}>
           Remove reward
@@ -95,6 +142,22 @@ const TokenRewardCardEditMenu = ({
       />
 
       <EditTokenModal onClose={editOnClose} isOpen={editIsOpen} />
+
+      {isPoolOwner && (
+        <DynamicTransferPoolOwnershipDialog
+          open={transferOwnershipIsOpen}
+          onOpenChange={transferOwnershipSetValue}
+          /**
+           * The proper way of doing this would be to wait for the TX receipt when transferring ownership, then mutate `usePool`'s data, but this will work too for now
+           */
+          onSuccess={() => setShouldHideTransferButton(true)}
+        />
+      )}
+
+      <PoolDetailsDialog
+        open={poolDetailsIsOpen}
+        onOpenChange={poolDetailsSetValue}
+      />
     </>
   )
 }