refactor: use headlessui in favor of shad, remove radix dep (#4352)

package.json

@@ -77,7 +77,6 @@
     "@lingui/macro": "^4.0.0",
     "@lingui/react": "^4.0.0",
     "@metamask/providers": "^10.0.0",
-    "@radix-ui/react-accordion": "^1.1.2",
     "@reduxjs/toolkit": "^1.6.2",
     "@supabase/auth-helpers-nextjs": "^0.5.4",
     "@supabase/auth-helpers-react": "^0.3.1",

src/components/v2v3/V2V3Project/ProjectDashboard/components/EthPerTokenAccordion.tsx

@@ -0,0 +1,138 @@
+import { Disclosure, Transition } from '@headlessui/react'
+import {
+  ChevronDownIcon,
+  ChevronUpIcon,
+  InformationCircleIcon,
+} from '@heroicons/react/24/solid'
+import { Trans, t } from '@lingui/macro'
+import { Button, Tooltip } from 'antd'
+import { Fragment, useCallback, useState } from 'react'
+import { V2V3_CURRENCY_ETH } from 'utils/v2v3/currency'
+import { formatRedemptionRate } from 'utils/v2v3/math'
+import { useProjectContext } from '../hooks/useProjectContext'
+import { useProjectPageQueries } from '../hooks/useProjectPageQueries'
+import { useTokensPanel } from '../hooks/useTokensPanel'
+import { useTokensPerEth } from '../hooks/useTokensPerEth'
+
+const DisclosureToggleButton = ({ open }: { open: boolean }) => {
+  return (
+    <div className="relative h-4 w-4">
+      <Transition
+        show={!open}
+        as={Fragment}
+        enter="transition-opacity ease-in-out duration-150"
+        enterFrom="opacity-0"
+        enterTo="opacity-100"
+        leave="transition-opacity ease-in-out duration-150"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+      >
+        <ChevronDownIcon className="absolute h-4 w-4" aria-hidden="true" />
+      </Transition>
+      <Transition
+        show={open}
+        as={Fragment}
+        enter="transition-opacity ease-in-out duration-150"
+        enterFrom="opacity-0"
+        enterTo="opacity-100"
+        leave="transition-opacity ease-in-out duration-150"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+      >
+        <ChevronUpIcon className="absolute h-6 w-6" aria-hidden="true" />
+      </Transition>
+    </div>
+  )
+}
+
+export const EthPerTokenAccordion = () => {
+  const { fundingCycleMetadata } = useProjectContext()
+  const { receivedTickets, receivedTokenSymbolText } = useTokensPerEth({
+    amount: 1,
+    currency: V2V3_CURRENCY_ETH,
+  })
+  const { totalSupply } = useTokensPanel()
+  const { setProjectPageTab } = useProjectPageQueries()
+
+  const [open, setOpen] = useState<boolean>(false)
+
+  const handleViewTokenInfoClicked = useCallback(
+    () => setProjectPageTab('tokens'),
+    [setProjectPageTab],
+  )
+
+  if (!receivedTickets || receivedTickets === '0') return null
+
+  return (
+    <Disclosure as="div">
+      {() => {
+        return (
+          <div>
+            <Disclosure.Button
+              className="w-full py-5 outline-none"
+              onClick={() => setOpen(!open)}
+            >
+              <>
+                <div className="text-primary mb-0 flex w-full items-center justify-between gap-6 text-start text-sm font-medium">
+                  1 ETH = {receivedTickets} {receivedTokenSymbolText}
+                  <DisclosureToggleButton open={open} />
+                </div>
+
+                <Transition
+                  show={open}
+                  as={Fragment}
+                  enter="transition-all ease-in-out duration-150"
+                  enterFrom="max-h-0 overflow-hidden opacity-0"
+                  enterTo="max-h-[1000px] overflow-hidden opacity-100"
+                  leave="transition-all ease-in-out duration-150"
+                  leaveFrom="max-h-[1000px] overflow-hidden opacity-100"
+                  leaveTo="max-h-0 overflow-hidden opacity-0"
+                >
+                  <Disclosure.Panel className="mt-4 cursor-default pr-12 text-start text-grey-600 dark:text-slate-200">
+                    <div className="flex justify-between">
+                      <span>
+                        <Trans>Total token supply: {totalSupply}</Trans>
+                      </span>
+                      <Button
+                        className="h-auto p-0 font-semibold"
+                        type="link"
+                        onClick={handleViewTokenInfoClicked}
+                      >
+                        <Trans>View token info</Trans>
+                      </Button>
+                    </div>
+
+                    {fundingCycleMetadata && (
+                      <Tooltip
+                        title={t`Redemption rate determines what proportion of this project's treasury can be reclaimed by a token holder by redeeming their tokens.`}
+                      >
+                        <div className="mt-5">
+                          <Trans>
+                            Current redemption rate:{' '}
+                            {formatRedemptionRate(
+                              fundingCycleMetadata?.redemptionRate,
+                            )}
+                            %
+                          </Trans>
+                        </div>
+                      </Tooltip>
+                    )}
+
+                    <div className="mt-4 flex items-center gap-1">
+                      <InformationCircleIcon className="h-4 w-4 text-grey-400 dark:text-slate-300" />
+                      <span className="text-xs text-grey-500 dark:text-slate-200">
+                        <Trans>
+                          New tokens are minted each time a payment is made
+                        </Trans>
+                      </span>
+                    </div>
+                  </Disclosure.Panel>
+                </Transition>
+              </>
+            </Disclosure.Button>
+          </div>
+        )
+      }}
+    </Disclosure>
+  )
+}

src/components/v2v3/V2V3Project/ProjectDashboard/components/PayRedeemCard.tsx

@@ -44,7 +44,7 @@ import { projectCartActions } from '../redux/projectCartSlice'
 import { emitConfirmationDeletionModal } from '../utils/modals'
 import { CartItemBadge } from './CartItemBadge'
 import { ClaimErc20Callout } from './ClaimErc20Callout'
-import { EthPerTokenAccordian } from './EthPerTokenAccordian'
+import { EthPerTokenAccordion } from './EthPerTokenAccordion'
 import { PayProjectModal } from './PayProjectModal/PayProjectModal'
 import { ProjectCartNftReward } from './ReduxProjectCartProvider'
 import { SmallNftSquare } from './SmallNftSquare'
@@ -156,9 +156,7 @@ export const PayRedeemCard: React.FC<PayRedeemCardProps> = ({ className }) => {
         </div>
       </div>
 
-      {/* Extra matter */}
-
-      <EthPerTokenAccordian className="mt-4" />
+      <EthPerTokenAccordion />
 
       {!payerIssuanceRate.enabled && !payerIssuanceRate.loading && (
         <Callout.Info

src/components/v2v3/V2V3Project/ProjectDashboard/components/ProjectHeader/components/ProjectHeaderPopupMenu.tsx

@@ -1,4 +1,3 @@
-import { cn } from '@/lib/utils'
 import { WrenchScrewdriverIcon } from '@heroicons/react/24/outline'
 import { Trans } from '@lingui/macro'
 import { BookmarkButtonIcon } from 'components/buttons/BookmarkButton/BookmarkButtonIcon'
@@ -9,6 +8,7 @@ import { V2V3ProjectToolsDrawer } from 'components/v2v3/V2V3Project/V2V3ProjectT
 import { PV_V2 } from 'constants/pv'
 import useMobile from 'hooks/useMobile'
 import { useMemo, useState } from 'react'
+import { twJoin } from 'tailwind-merge'
 import { PopupMenu } from '../../../../../../ui/PopupMenu'
 import { SocialLink } from '../../../hooks/useAboutPanel'
 import { useSocialLinks } from '../../../hooks/useSocialLinks'
@@ -41,7 +41,7 @@ export function ProjectHeaderPopupMenu({
   return (
     <>
       <PopupMenu
-        className={cn('z-20', className)}
+        className={twJoin('z-20', className)}
         menuButtonIconClassName="h-8 w-8"
         items={[
           ...(isMobile

src/components/v2v3/V2V3Project/ProjectDashboard/components/TokensPanel/components/__snapshots__/ReservedTokensSubPanel.test.tsx.snap

@@ -116,7 +116,7 @@ exports[`ReservedTokensSubPanel renders 1`] = `
               </span>
             </span>
             <div
-              class="relative"
+              class="relative flex items-center justify-center"
               data-headlessui-state=""
             >
               <button

tailwind.config.js

@@ -5,8 +5,6 @@ module.exports = {
   content: [
     './src/pages/**/*.{js,ts,jsx,tsx}',
     './src/components/**/*.{js,ts,jsx,tsx}',
-    './app/**/*.{ts,tsx}',
-    './src/**/*.{ts,tsx}',
   ],
   darkMode: 'class', // Use class for now, switch to media later
   important: true,