refactor: project metadata context

src/components/NftRewards/NftTierCard.tsx

@@ -9,7 +9,7 @@ import { stopPropagation } from 'react-stop-propagation'
 import { twMerge } from 'tailwind-merge'
 import { classNames } from 'utils/classNames'
 import { parseWad } from 'utils/format/formatNumber'
-import { convertToNewIpfsGateway } from 'utils/ipfs'
+import { pinataToGatewayUrl } from 'utils/ipfs'
 import { QuantitySelector } from './QuantitySelector'
 
 // The clickable cards on the project page
@@ -36,7 +36,7 @@ export function NftTierCard({
   const [previousQuantity, setPreviousQuantity] = useState<number>(1)
 
   const fileUrl = rewardTier?.fileUrl
-    ? convertToNewIpfsGateway(rewardTier.fileUrl)
+    ? pinataToGatewayUrl(rewardTier.fileUrl)
     : undefined
 
   const hasQuantitySelected = quantitySelected > 0

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

@@ -6,8 +6,8 @@ import ExternalLink from 'components/ExternalLink'
 import { JuiceVideoThumbnailOrImage } from 'components/JuiceVideo/JuiceVideoThumbnailOrImage'
 import Loading from 'components/Loading'
 import { JuiceModal } from 'components/modals/JuiceModal'
-import { useProjectMetadata } from 'components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectMetadata'
 import { PV_V2 } from 'constants/pv'
+import { useProjectMetadataContext } from 'contexts/shared/ProjectMetadataContext'
 import { Formik } from 'formik'
 import { useIpfsFilePicker } from 'hooks/useIpfsFilePicker/useIpfsFilePicker'
 import { useContext } from 'react'
@@ -31,7 +31,7 @@ export const AddProjectUpdateModal = ({
   setOpen: React.Dispatch<React.SetStateAction<boolean>>
 }) => {
   const { loadProjectUpdates } = useContext(ProjectUpdatesContext)
-  const { projectId } = useProjectMetadata()
+  const { projectId } = useProjectMetadataContext()
   const project = projectId
     ? getSubgraphIdForProject(PV_V2, projectId)
     : undefined

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

@@ -1,14 +1,14 @@
 import { useCoverPhoto } from 'components/v2v3/V2V3Project/ProjectDashboard/hooks/useCoverPhoto'
+import { useProjectMetadataContext } from 'contexts/shared/ProjectMetadataContext'
 import Image from 'next/image'
 import { useMemo } from 'react'
 import { twMerge } from 'tailwind-merge'
-import { useProjectMetadata } from '../../hooks/useProjectMetadata'
 
 const RS_PROJECT_ID = 618
 
 export const CoverPhoto = () => {
   const { coverImageUrl, coverImageAltText } = useCoverPhoto()
-  const { projectId } = useProjectMetadata()
+  const { projectId } = useProjectMetadataContext()
   const hasCoverImage = !!coverImageUrl
 
   const applyDarkerCoverPhoto = useMemo(() => {

src/components/v2v3/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/components/HistorySubPanel.tsx

@@ -3,7 +3,7 @@ import { ChevronDownIcon } from '@heroicons/react/24/outline'
 import { Trans, t } from '@lingui/macro'
 import { Button } from 'antd'
 import { useProjectContext } from 'components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectContext'
-import { useProjectMetadata } from 'components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectMetadata'
+import { useProjectMetadataContext } from 'contexts/shared/ProjectMetadataContext'
 import { BigNumber } from 'ethers'
 import useProjectDistributionLimit from 'hooks/v2v3/contractReader/useProjectDistributionLimit'
 import { V2V3CurrencyOption } from 'models/v2v3/currencyOption'
@@ -21,7 +21,7 @@ import { usePastFundingCycles } from '../hooks/usePastFundingCycles'
 import { HistoricalConfigurationPanel } from './HistoricalConfigurationPanel'
 
 export const HistorySubPanel = () => {
-  const { projectId } = useProjectMetadata()
+  const { projectId } = useProjectMetadataContext()
   const { fundingCycle } = useProjectContext()
 
   const [isFetchingMore, setIsFetchingMore] = useState<boolean>()
@@ -170,7 +170,7 @@ function FormattedWithdrawnAmount({
   configuration: BigNumber
   withdrawnAmount: BigNumber
 }) {
-  const { projectId } = useProjectMetadata()
+  const { projectId } = useProjectMetadataContext()
   const { primaryETHTerminal } = useProjectContext()
 
   const { data: distributionLimit } = useProjectDistributionLimit({

src/components/v2v3/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/hooks/useConfigurationPanel/useCycleSection.test.ts

@@ -4,7 +4,7 @@
 
 import { renderHook } from '@testing-library/react'
 import { useProjectContext } from 'components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectContext'
-import { useProjectMetadata } from 'components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectMetadata'
+import { useProjectMetadataContext } from 'contexts/shared/ProjectMetadataContext'
 import useProjectDistributionLimit from 'hooks/v2v3/contractReader/useProjectDistributionLimit'
 import { useProjectUpcomingFundingCycle } from 'hooks/v2v3/contractReader/useProjectUpcomingFundingCycle'
 import { useCycleSection } from './useCycleSection'
@@ -13,9 +13,7 @@ import { useFormatConfigurationCyclesSection } from './useFormatConfigurationCyc
 jest.mock(
   'components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectContext',
 )
-jest.mock(
-  'components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectMetadata',
-)
+jest.mock('contexts/shared/ProjectMetadataContext')
 jest.mock('hooks/v2v3/contractReader/useProjectDistributionLimit')
 jest.mock('hooks/v2v3/contractReader/useProjectUpcomingFundingCycle')
 jest.mock('./useFormatConfigurationCyclesSection')
@@ -26,7 +24,7 @@ describe('useCycleSection', () => {
   })
 
   it('calls the dependent hooks correctly', () => {
-    ;(useProjectMetadata as jest.Mock).mockReturnValue({
+    ;(useProjectMetadataContext as jest.Mock).mockReturnValue({
       projectId: 'projectIdMock',
     })
     ;(useProjectContext as jest.Mock).mockReturnValue({
@@ -45,7 +43,7 @@ describe('useCycleSection', () => {
 
     renderHook(() => useCycleSection('current'))
 
-    expect(useProjectMetadata).toHaveBeenCalled()
+    expect(useProjectMetadataContext).toHaveBeenCalled()
     expect(useProjectContext).toHaveBeenCalled()
     expect(useProjectUpcomingFundingCycle).toHaveBeenCalledWith({
       projectId: 'projectIdMock',

src/components/v2v3/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/hooks/useConfigurationPanel/useCycleSection.ts

@@ -1,14 +1,13 @@
 import { useProjectContext } from 'components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectContext'
-import { useProjectMetadata } from 'components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectMetadata'
+import { useProjectMetadataContext } from 'contexts/shared/ProjectMetadataContext'
 import useProjectDistributionLimit from 'hooks/v2v3/contractReader/useProjectDistributionLimit'
 import { useProjectUpcomingFundingCycle } from 'hooks/v2v3/contractReader/useProjectUpcomingFundingCycle'
 import { ConfigurationPanelTableData } from '../../components/ConfigurationPanel'
 import { useFormatConfigurationCyclesSection } from './useFormatConfigurationCyclesSection'
-
 export const useCycleSection = (
   type: 'current' | 'upcoming',
 ): ConfigurationPanelTableData => {
-  const { projectId } = useProjectMetadata()
+  const { projectId } = useProjectMetadataContext()
 
   const {
     fundingCycle,

src/components/v2v3/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/hooks/useConfigurationPanel/useExtensionSection.ts.ts

@@ -1,14 +1,13 @@
 import { useProjectContext } from 'components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectContext'
-import { useProjectMetadata } from 'components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectMetadata'
+import { useProjectMetadataContext } from 'contexts/shared/ProjectMetadataContext'
 import { useProjectUpcomingFundingCycle } from 'hooks/v2v3/contractReader/useProjectUpcomingFundingCycle'
 import { ConfigurationPanelTableData } from '../../components/ConfigurationPanel'
 import { useFormatConfigurationExtensionSection } from './useFormatConfigurationExtensionSection'
 
 export const useExtensionSection = (
   type: 'current' | 'upcoming',
 ): ConfigurationPanelTableData | null => {
-  const { projectId } = useProjectMetadata()
-
+  const { projectId } = useProjectMetadataContext()
   const { fundingCycleMetadata } = useProjectContext()
   const { data: upcomingFundingCycleData } = useProjectUpcomingFundingCycle({
     projectId,

src/components/v2v3/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/hooks/useConfigurationPanel/useHistoricalConfigurationPanel.test.ts

@@ -15,14 +15,11 @@ jest.mock(
     }),
   }),
 )
-jest.mock(
-  'components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectMetadata',
-  () => ({
-    useProjectMetadata: () => ({
-      projectId: 'mockProjectId',
-    }),
+jest.mock('contexts/shared/ProjectMetadataContext', () => ({
+  useProjectMetadataContext: () => ({
+    projectId: 'mockProjectId',
   }),
-)
+}))
 
 jest.mock('hooks/v2v3/contractReader/useProjectDistributionLimit', () => ({
   __esModule: true,

src/components/v2v3/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/hooks/useConfigurationPanel/useHistoricalConfigurationPanel.ts

@@ -1,5 +1,5 @@
 import { useProjectContext } from 'components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectContext'
-import { useProjectMetadata } from 'components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectMetadata'
+import { useProjectMetadataContext } from 'contexts/shared/ProjectMetadataContext'
 import useProjectDistributionLimit from 'hooks/v2v3/contractReader/useProjectDistributionLimit'
 import {
   V2V3FundingCycle,
@@ -17,7 +17,7 @@ export const useHistoricalConfigurationPanel = ({
   fundingCycle: V2V3FundingCycle
   metadata: V2V3FundingCycleMetadata
 }) => {
-  const { projectId } = useProjectMetadata()
+  const { projectId } = useProjectMetadataContext()
   const { primaryETHTerminal: terminal, tokenSymbol } = useProjectContext()
   const { data: distributionLimitData } = useProjectDistributionLimit({
     projectId,

src/components/v2v3/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/hooks/useConfigurationPanel/useOtherRulesSection.test.ts

@@ -4,16 +4,14 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { renderHook } from '@testing-library/react'
 import { useProjectContext } from 'components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectContext'
-import { useProjectMetadata } from 'components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectMetadata'
+import { useProjectMetadataContext } from 'contexts/shared/ProjectMetadataContext'
 import { useProjectUpcomingFundingCycle } from 'hooks/v2v3/contractReader/useProjectUpcomingFundingCycle'
 import { useOtherRulesSection } from './useOtherRulesSection'
 
 jest.mock(
   'components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectContext',
 )
-jest.mock(
-  'components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectMetadata',
-)
+jest.mock('contexts/shared/ProjectMetadataContext')
 
 jest.mock('hooks/v2v3/contractReader/useProjectUpcomingFundingCycle', () => ({
   useProjectUpcomingFundingCycle: jest.fn(),
@@ -22,8 +20,8 @@ jest.mock('hooks/v2v3/contractReader/useProjectUpcomingFundingCycle', () => ({
 const mockUseProjectContext = useProjectContext as jest.MockedFunction<
   typeof useProjectContext
 >
-const mockUseProjectMetadata = useProjectMetadata as jest.MockedFunction<
-  typeof useProjectMetadata
+const mockUseProjectMetadata = useProjectMetadataContext as jest.MockedFunction<
+  typeof useProjectMetadataContext
 >
 const mockUseProjectUpcomingFundingCycle =
   useProjectUpcomingFundingCycle as jest.MockedFunction<

src/components/v2v3/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/hooks/useConfigurationPanel/useOtherRulesSection.ts

@@ -1,14 +1,13 @@
 import { useProjectContext } from 'components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectContext'
-import { useProjectMetadata } from 'components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectMetadata'
+import { useProjectMetadataContext } from 'contexts/shared/ProjectMetadataContext'
 import { useProjectUpcomingFundingCycle } from 'hooks/v2v3/contractReader/useProjectUpcomingFundingCycle'
 import { ConfigurationPanelTableData } from '../../components/ConfigurationPanel'
 import { useFormatConfigurationOtherRulesSection } from './useFormatConfigurationOtherRulesSection'
 
 export const useOtherRulesSection = (
   type: 'current' | 'upcoming',
 ): ConfigurationPanelTableData => {
-  const { projectId } = useProjectMetadata()
-
+  const { projectId } = useProjectMetadataContext()
   const { fundingCycleMetadata } = useProjectContext()
   const { data: upcomingFundingCycleData } = useProjectUpcomingFundingCycle({
     projectId,

src/components/v2v3/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/hooks/useConfigurationPanel/useTokenSection.test.ts

@@ -15,14 +15,11 @@ jest.mock(
   }),
 )
 
-jest.mock(
-  'components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectMetadata',
-  () => ({
-    useProjectMetadata: () => ({
-      projectId: 'mockProjectId',
-    }),
+jest.mock('contexts/shared/ProjectMetadataContext', () => ({
+  useProjectMetadataContext: () => ({
+    projectId: 'mockProjectId',
   }),
-)
+}))
 
 jest.mock('hooks/v2v3/contractReader/useProjectUpcomingFundingCycle', () => ({
   __esModule: true,

src/components/v2v3/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/hooks/useConfigurationPanel/useTokenSection.ts

@@ -1,14 +1,13 @@
 import { useProjectContext } from 'components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectContext'
-import { useProjectMetadata } from 'components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectMetadata'
+import { useProjectMetadataContext } from 'contexts/shared/ProjectMetadataContext'
 import { useProjectUpcomingFundingCycle } from 'hooks/v2v3/contractReader/useProjectUpcomingFundingCycle'
 import { ConfigurationPanelTableData } from '../../components/ConfigurationPanel'
 import { useFormatConfigurationTokenSection } from './useFormatConfigurationTokenSection'
 
 export const useTokenSection = (
   type: 'current' | 'upcoming',
 ): ConfigurationPanelTableData => {
-  const { projectId } = useProjectMetadata()
-
+  const { projectId } = useProjectMetadataContext()
   const {
     fundingCycle,
     fundingCycleMetadata,

src/components/v2v3/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/hooks/useCurrentUpcomingDistributionLimit.ts

@@ -1,12 +1,12 @@
 import { useProjectContext } from 'components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectContext'
-import { useProjectMetadata } from 'components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectMetadata'
+import { useProjectMetadataContext } from 'contexts/shared/ProjectMetadataContext'
 import useProjectDistributionLimit from 'hooks/v2v3/contractReader/useProjectDistributionLimit'
 import { useProjectUpcomingFundingCycle } from 'hooks/v2v3/contractReader/useProjectUpcomingFundingCycle'
 
 export const useCurrentUpcomingDistributionLimit = (
   type: 'current' | 'upcoming',
 ) => {
-  const { projectId } = useProjectMetadata()
+  const { projectId } = useProjectMetadataContext()
   const {
     primaryETHTerminal,
     distributionLimit: currentDistributionLimit,

src/components/v2v3/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/hooks/useCurrentUpcomingPayoutSplits.ts

@@ -1,13 +1,13 @@
 import { useProjectContext } from 'components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectContext'
-import { useProjectMetadata } from 'components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectMetadata'
 import { ETH_PAYOUT_SPLIT_GROUP } from 'constants/splits'
+import { useProjectMetadataContext } from 'contexts/shared/ProjectMetadataContext'
 import useProjectSplits from 'hooks/v2v3/contractReader/useProjectSplits'
 import { useProjectUpcomingFundingCycle } from 'hooks/v2v3/contractReader/useProjectUpcomingFundingCycle'
 
 export const useCurrentUpcomingPayoutSplits = (
   type: 'current' | 'upcoming',
 ) => {
-  const { projectId } = useProjectMetadata()
+  const { projectId } = useProjectMetadataContext()
   const { payoutSplits: currentPayoutSplits } = useProjectContext()
 
   const {

src/components/v2v3/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/hooks/useCurrentUpcomingSubPanel.test.ts

@@ -1,24 +1,22 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { renderHook } from '@testing-library/react-hooks'
 import { useProjectContext } from 'components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectContext'
-import { useProjectMetadata } from 'components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectMetadata'
+import { useProjectMetadataContext } from 'contexts/shared/ProjectMetadataContext'
 import { BigNumber } from 'ethers'
 import { useProjectUpcomingFundingCycle } from 'hooks/v2v3/contractReader/useProjectUpcomingFundingCycle'
 import { useCurrentUpcomingSubPanel } from './useCurrentUpcomingSubPanel'
 
 jest.mock(
   'components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectContext',
 )
-jest.mock(
-  'components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectMetadata',
-)
+jest.mock('contexts/shared/ProjectMetadataContext')
 jest.mock('hooks/v2v3/contractReader/useProjectUpcomingFundingCycle')
 
 const mockUseProjectContext = useProjectContext as jest.MockedFunction<
   typeof useProjectContext
 >
-const mockUseProjectMetadata = useProjectMetadata as jest.MockedFunction<
-  typeof useProjectMetadata
+const mockUseProjectMetadata = useProjectMetadataContext as jest.MockedFunction<
+  typeof useProjectMetadataContext
 >
 const mockUseProjectUpcomingFundingCycle =
   useProjectUpcomingFundingCycle as jest.MockedFunction<

src/components/v2v3/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/hooks/useCurrentUpcomingSubPanel.ts

@@ -1,14 +1,14 @@
 import { t } from '@lingui/macro'
 import { useFundingCycleCountdown } from 'components/v2v3/V2V3Project/ProjectDashboard/hooks/useFundingCycleCountdown'
 import { useProjectContext } from 'components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectContext'
-import { useProjectMetadata } from 'components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectMetadata'
 import { timeSecondsToDateString } from 'components/v2v3/V2V3Project/ProjectDashboard/utils/timeSecondsToDateString'
+import { useProjectMetadataContext } from 'contexts/shared/ProjectMetadataContext'
 import { useProjectUpcomingFundingCycle } from 'hooks/v2v3/contractReader/useProjectUpcomingFundingCycle'
 import { BallotState } from 'models/v2v3/fundingCycle'
 import { useMemo } from 'react'
 
 export const useCurrentUpcomingSubPanel = (type: 'current' | 'upcoming') => {
-  const { projectId } = useProjectMetadata()
+  const { projectId } = useProjectMetadataContext()
   const {
     fundingCycle,
     loading: { fundingCycleLoading },

src/components/v2v3/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/hooks/usePayoutsSubPanel.test.ts

@@ -4,7 +4,7 @@
 
 import { renderHook } from '@testing-library/react'
 import { useProjectContext } from 'components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectContext'
-import { useProjectMetadata } from 'components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectMetadata'
+import { useProjectMetadataContext } from 'contexts/shared/ProjectMetadataContext'
 import { BigNumber } from 'ethers'
 import { parseWad } from 'utils/format/formatNumber'
 import { V2V3_CURRENCY_ETH } from 'utils/v2v3/currency'
@@ -14,9 +14,7 @@ import { usePayoutsSubPanel } from './usePayoutsSubPanel'
 jest.mock(
   'components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectContext',
 )
-jest.mock(
-  'components/v2v3/V2V3Project/ProjectDashboard/hooks/useProjectMetadata',
-)
+jest.mock('contexts/shared/ProjectMetadataContext')
 
 describe('usePayoutsSubPanel', () => {
   const DefaultProjectContext = {
@@ -41,7 +39,7 @@ describe('usePayoutsSubPanel', () => {
   }
   beforeEach(() => {
     ;(useProjectContext as jest.Mock).mockReturnValue(DefaultProjectContext)
-    ;(useProjectMetadata as jest.Mock).mockReturnValue(
+    ;(useProjectMetadataContext as jest.Mock).mockReturnValue(
       DefaultUseProjectMetadata,
     )
   })

src/components/v2v3/V2V3Project/ProjectDashboard/components/NftRewardsPanel/RedeemNftsSection/RedeemNftTile.tsx

@@ -2,7 +2,7 @@ import { Tooltip } from 'antd'
 import { JuiceVideoThumbnailOrImage } from 'components/JuiceVideo/JuiceVideoThumbnailOrImage'
 import { NftRewardTier } from 'models/nftRewards'
 import { useMemo } from 'react'
-import { convertToNewIpfsGateway } from 'utils/ipfs'
+import { pinataToGatewayUrl } from 'utils/ipfs'
 
 export function RedeemNftTile({
   rewardTier,
@@ -14,7 +14,7 @@ export function RedeemNftTile({
   const _name = rewardTier?.name ?? `NFT ${tokenId}`
   const fileUrl = useMemo(() => {
     if (!rewardTier?.fileUrl) return
-    return convertToNewIpfsGateway(rewardTier.fileUrl)
+    return pinataToGatewayUrl(rewardTier.fileUrl)
   }, [rewardTier?.fileUrl])
   return (
     <Tooltip title={_name} placement="bottom">