Merge pull request #4447 from jbx-protocol/dev

Release 2024-08-30

.example.env

@@ -17,7 +17,7 @@ NEXT_PUBLIC_SUBGRAPH_URL=
 SUBGRAPH_URL=
 
 # wallet connect
-NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID
+NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=
 
 ##### Variables for complete functionality #####
 

src/packages/v2v3/components/V2V3Project/V2V3FundingCycleSection/FundingCycleDetails/FundingCycleListItem.tsx → src/components/FundingCycleListItem.tsx

@@ -1,7 +1,7 @@
 import { Tooltip } from 'antd'
 import { twMerge } from 'tailwind-merge'
 import { classNames } from 'utils/classNames'
-import { DiffedItem } from '../../../shared/DiffedItem'
+import { DiffedItem } from './DiffedItem'
 
 // e.g. 'Distribution limit', 'Start', 'End', etc.
 export function FundingCycleListItem({

src/components/NftRewards/AddNftCollectionForm/AddNftCollectionForm.tsx

@@ -1,14 +1,14 @@
 import { RightOutlined } from '@ant-design/icons'
 import { Trans, t } from '@lingui/macro'
 import { Form, FormInstance } from 'antd'
-import { useLockPageRulesWrapper } from 'components/Create/hooks/useLockPageRulesWrapper'
 import ExternalLink from 'components/ExternalLink'
 import TooltipLabel from 'components/TooltipLabel'
 import { JuiceInput } from 'components/inputs/JuiceTextInput'
 import { NftRewardTier } from 'models/nftRewards'
+import { CreateCollapse } from 'packages/v2v3/components/Create/components/CreateCollapse/CreateCollapse'
+import { OptionalHeader } from 'packages/v2v3/components/Create/components/OptionalHeader'
+import { useLockPageRulesWrapper } from 'packages/v2v3/components/Create/hooks/useLockPageRulesWrapper'
 import { inputMustExistRule } from 'utils/antdRules'
-import { CreateCollapse } from '../../Create/components/CreateCollapse/CreateCollapse'
-import { OptionalHeader } from '../../Create/components/OptionalHeader'
 import { RewardsList } from '../RewardsList/RewardsList'
 import { NftAdvancedFormItems } from './NftAdvancedFormItems'
 import { NftPaymentSuccessFormItems } from './NftPaymentSuccessFormItems'

src/components/NftRewards/RewardsList/AddEditRewardModal.tsx

@@ -14,6 +14,8 @@ import { VIDEO_FILE_TYPES } from 'constants/fileTypes'
 import { pinFile } from 'lib/api/ipfs'
 import random from 'lodash/random'
 import { NftRewardTier } from 'models/nftRewards'
+import { CreateCollapse } from 'packages/v2v3/components/Create/components/CreateCollapse/CreateCollapse'
+import { OptionalHeader } from 'packages/v2v3/components/Create/components/OptionalHeader'
 import { DEFAULT_NFT_MAX_SUPPLY } from 'packages/v2v3/constants/nftRewards'
 import { V2V3_CURRENCY_USD } from 'packages/v2v3/utils/currency'
 import { UploadRequestOption } from 'rc-upload/lib/interface'
@@ -28,8 +30,6 @@ import {
 } from 'utils/antdRules'
 import { withHttps } from 'utils/externalLink'
 import { ipfsGatewayUrl } from 'utils/ipfs'
-import { CreateCollapse } from '../../Create/components/CreateCollapse/CreateCollapse'
-import { OptionalHeader } from '../../Create/components/OptionalHeader'
 
 interface AddEditRewardModalFormProps {
   fileUrl: string

src/components/VolumeChart/hooks/useProjectTimeline.ts

@@ -1,8 +1,12 @@
 import { useQuery } from '@tanstack/react-query'
-import { PV_V4 } from 'constants/pv'
+import { PV_V2, PV_V4 } from 'constants/pv'
 import { readProvider } from 'constants/readProvider'
 import EthDater from 'ethereum-block-by-date'
-import { ProjectTlQuery, useProjectTlQuery } from 'generated/graphql'
+import {
+  ProjectTlQuery,
+  useProjectsQuery,
+  useProjectTlQuery,
+} from 'generated/graphql'
 import { client } from 'lib/apollo/client'
 import { PV } from 'models/pv'
 import { ProjectTlDocument } from 'packages/v4/graphql/client/graphql'
@@ -11,6 +15,8 @@ import { useMemo } from 'react'
 import { wadToFloat } from 'utils/format/formatNumber'
 import { getSubgraphIdForProject } from 'utils/graph'
 import { daysToMS, minutesToMS } from 'utils/units'
+import { RomanStormVariables } from 'constants/romanStorm'
+
 import { ProjectTimelinePoint, ProjectTimelineRange } from '../types'
 
 const COUNT = 30
@@ -24,6 +30,25 @@ export function useProjectTimeline({
   pv: PV
   range: ProjectTimelineRange
 }) {
+  const exceptionTimestamp = useMemo(() => {
+    return RomanStormVariables.PROJECT_ID === projectId
+      ? RomanStormVariables.SNAPSHOT_TIMESTAMP
+      : null
+  }, [projectId])
+
+  const { data: romanStormData } = useProjectsQuery({
+    client,
+    fetchPolicy: 'no-cache',
+    skip: projectId !== RomanStormVariables.PROJECT_ID,
+    variables: {
+      where: {
+        projectId,
+        pv: PV_V2,
+      },
+      block: { number: RomanStormVariables.SNAPSHOT_BLOCK },
+    },
+  })
+
   const { data: blockData, isLoading: isLoadingBlockNumbers } = useQuery({
     queryKey: ['block-numbers', range],
     queryFn: async () => {
@@ -70,22 +95,23 @@ export function useProjectTimeline({
     return { blocks, timestamps }
   }, [blockData])
 
-  const { data: v1v2v3QueryResult, loading: isLoadingQuery } = useProjectTlQuery({
-    client,
-    variables: {
-      id: blocks ? getSubgraphIdForProject(pv, projectId) : '',
-      ...blocks,
-    },
-    skip: pv === PV_V4
-  })
+  const { data: v1v2v3QueryResult, loading: isLoadingQuery } =
+    useProjectTlQuery({
+      client,
+      variables: {
+        id: blocks ? getSubgraphIdForProject(pv, projectId) : '',
+        ...blocks,
+      },
+      skip: pv === PV_V4,
+    })
 
   const { data: v4QueryResult } = useSubgraphQuery({
-    document: ProjectTlDocument, 
+    document: ProjectTlDocument,
     variables: {
       id: blocks ? projectId.toString() : '',
       ...blocks,
     },
-    enabled: pv === PV_V4
+    enabled: pv === PV_V4,
   })
 
   const points = useMemo(() => {
@@ -95,16 +121,31 @@ export function useProjectTimeline({
     const points: ProjectTimelinePoint[] = []
 
     for (let i = 0; i < COUNT; i++) {
-      const point = (queryResult as ProjectTlQuery)[`p${i}` as keyof typeof queryResult]
+      const point = (queryResult as ProjectTlQuery)[
+        `p${i}` as keyof typeof queryResult
+      ]
 
       if (!point) continue
-
-      points.push({
-        timestamp: timestamps[i],
-        trendingScore: wadToFloat(point.trendingScore),
-        balance: wadToFloat(point.currentBalance),
-        volume: wadToFloat(point.volume),
-      })
+      if (exceptionTimestamp && exceptionTimestamp > timestamps[i]) {
+        points.push({
+          timestamp: timestamps[i],
+          trendingScore: 0,
+          balance: 0,
+          volume: 0,
+        })
+      } else {
+        const volume =
+          projectId === RomanStormVariables.PROJECT_ID
+            ? point.volume.sub(romanStormData?.projects[0].volume || 0)
+            : point.volume
+
+        points.push({
+          timestamp: timestamps[i],
+          trendingScore: wadToFloat(point.trendingScore),
+          balance: wadToFloat(point.currentBalance),
+          volume: wadToFloat(volume),
+        })
+      }
     }
 
     return points

src/components/formItems/ProjectTwitter.tsx

@@ -1,7 +1,7 @@
 import { t } from '@lingui/macro'
 import { Form } from 'antd'
 
-import { TwitterHandleInputWrapper } from 'components/Create/components/pages/ProjectDetails/ProjectDetailsPage'
+import { TwitterHandleInputWrapper } from 'packages/v2v3/components/Create/components/pages/ProjectDetails/ProjectDetailsPage'
 import { FormItemExt } from './formItemExt'
 
 export default function ProjectTwitter({

src/components/modals/TransactionModal.tsx

@@ -4,7 +4,7 @@ import { readNetwork } from 'constants/networks'
 import { TxHistoryContext } from 'contexts/Transaction/TxHistoryContext'
 import { useWallet } from 'hooks/Wallet'
 import { TxStatus } from 'models/transaction'
-import Image from "next/legacy/image"
+import Image from 'next/legacy/image'
 import { PropsWithChildren, useContext, useMemo } from 'react'
 import EtherscanLink from '../EtherscanLink'
 
@@ -79,6 +79,7 @@ export default function TransactionModal(props: TransactionModalProps) {
     props.okText,
     props.switchNetworkText,
   ])
+
   const modalProps = {
     ...props,
     ...{

src/constants/romanStorm.ts

@@ -0,0 +1,9 @@
+const PROJECT_ID = 618
+const SNAPSHOT_BLOCK = 20229376
+const SNAPSHOT_TIMESTAMP = 1720050599
+
+export const RomanStormVariables = {
+  PROJECT_ID,
+  SNAPSHOT_BLOCK,
+  SNAPSHOT_TIMESTAMP,
+}

src/graphql/projects/projects.graphql

@@ -4,8 +4,9 @@ query Projects(
   $skip: Int,
   $orderBy: Project_orderBy
   $orderDirection: OrderDirection
+  $block: Block_height
 ) {
-  projects(where: $where, first: $first, skip: $skip) {
+  projects(where: $where, first: $first, skip: $skip, block: $block) {
     id
     projectId
     metadataUri

src/graphql/projects/trendingProjects.graphql

@@ -4,14 +4,15 @@ query TrendingProjects(
   $skip: Int
   $orderBy: Project_orderBy
   $orderDirection: OrderDirection
-  $block: Block_Height
+  $block: Block_height
 ) {
   projects(
     where: $where
     first: $first
     skip: $skip
     orderBy: $orderBy
     orderDirection: desc
+    block: $block
   ) {
     id
     projectId

src/hooks/Wallet/hooks/useChainUnsupported.ts

@@ -1,17 +1,26 @@
 import { useSetChain } from '@web3-onboard/react'
-import { useMemo } from 'react'
-
 import { readNetwork } from 'constants/networks'
+import { useCurrentRouteChainId } from 'packages/v4/hooks/useCurrentRouteChainId'
+import { useMemo } from 'react'
 
 export function useChainUnsupported() {
   const [{ connectedChain }] = useSetChain()
+
+  // get v4 chain id
+  const chainId = useCurrentRouteChainId()
+
   const chainUnsupported = useMemo(() => {
     if (!connectedChain) {
       return false
     }
 
+    // account for v4
+    if (chainId) {
+      return Number(connectedChain.id) !== chainId
+    }
+
     return Number(connectedChain.id) !== readNetwork.chainId
-  }, [connectedChain])
+  }, [connectedChain, chainId])
 
   return chainUnsupported
 }

src/hooks/useProjectEvents.ts

@@ -1,10 +1,13 @@
+import { useMemo } from 'react'
+
 import {
   OrderDirection,
   ProjectEvent_OrderBy,
-  useProjectEventsQuery
+  useProjectEventsQuery,
 } from 'generated/graphql'
 import { client } from 'lib/apollo/client'
 import { ProjectEventsQueryArgs } from 'models/projectEvents'
+import { RomanStormVariables } from 'constants/romanStorm'
 
 export function useProjectEvents({
   filter,
@@ -14,6 +17,13 @@ export function useProjectEvents({
   first,
   skip,
 }: ProjectEventsQueryArgs) {
+  const projectSnapshotTimestamp = useMemo(() => {
+    if (projectId === RomanStormVariables.PROJECT_ID) {
+      return RomanStormVariables.SNAPSHOT_TIMESTAMP
+    }
+    return null
+  }, [projectId])
+
   return useProjectEventsQuery({
     client,
     variables: {
@@ -27,6 +37,9 @@ export function useProjectEvents({
       where: {
         ...(pv ? { pv } : {}),
         ...(projectId ? { projectId } : {}),
+        ...(projectSnapshotTimestamp
+          ? { timestamp_gt: projectSnapshotTimestamp }
+          : {}),
         ...(from
           ? {
               // subgraph needs addresses to be lowercased

src/locales/messages.pot

@@ -1604,6 +1604,9 @@ msgstr ""
 msgid "<0>Edits to this project must be made before this deadline. This gives token holders time to verify the edits before they take effect.</0><1>For example: with a 1-day edit deadline, edits must be made at least 1 day before a cycle starts.</1>"
 msgstr ""
 
+msgid "Reserved {tokenTextPlural}: <0>{pendingReservedTokensFormatted} {tokenTextPlural}</0>"
+msgstr ""
+
 msgid "Send Message"
 msgstr ""
 
@@ -3056,6 +3059,9 @@ msgstr ""
 msgid "Set a duration for locked cycles."
 msgstr ""
 
+msgid "Enable project token transfers"
+msgstr ""
+
 msgid "Deadline"
 msgstr ""
 
@@ -3254,6 +3260,9 @@ msgstr ""
 msgid "Notifications"
 msgstr ""
 
+msgid "Enable decay rate"
+msgstr ""
+
 msgid "Logo"
 msgstr ""
 
@@ -3602,6 +3611,9 @@ msgstr ""
 msgid "Owner tools"
 msgstr ""
 
+msgid "{value} {tokenSymbol}/ETH"
+msgstr ""
+
 msgid "<0>Juicebox is a programmable crypto fundraising platform for web3. It helps people fund, operate, and scale their projects transparently using Ethereum, which is a type of programmable cryptocurrency.</0><1>Juicebox is funded and owned by its community.</1>"
 msgstr ""
 

src/components/Create/components/pages/FundingCycles/FundingCyclesPage.tsx → src/packages/v2v3/components/Create/components/pages/FundingCycles/FundingCyclesPage.tsx

@@ -7,13 +7,13 @@ import { Trans, t } from '@lingui/macro'
 import { Form, Tooltip } from 'antd'
 import { useWatch } from 'antd/lib/form/Form'
 import { Callout } from 'components/Callout/Callout'
-import { useLockPageRulesWrapper } from 'components/Create/hooks/useLockPageRulesWrapper'
 import { DurationInput } from 'components/inputs/DurationInput'
 import { JuiceDatePicker } from 'components/inputs/JuiceDatePicker'
 import { CREATE_FLOW } from 'constants/fathomEvents'
 import { trackFathomGoal } from 'lib/fathom'
 import moment from 'moment'
 import Link from 'next/link'
+import { useLockPageRulesWrapper } from 'packages/v2v3/components/Create/hooks/useLockPageRulesWrapper'
 import { useContext, useEffect } from 'react'
 import { useSetCreateFurthestPageReached } from 'redux/hooks/useEditingCreateFurthestPageReached'
 import { durationMustExistRule } from 'utils/antdRules'

src/components/Create/components/pages/PayoutsPage/components/RadioCard.tsx → src/packages/v2v3/components/Create/components/pages/PayoutsPage/components/RadioCard.tsx

@@ -1,4 +1,4 @@
-import { CheckedCircle } from 'components/Create/components/Selection/components/CheckedCircle'
+import { CheckedCircle } from 'packages/v2v3/components/Create/components/Selection/components/CheckedCircle'
 import { ReactNode } from 'react'
 import { twMerge } from 'tailwind-merge'
 

src/components/Create/components/pages/PayoutsPage/hooks/useAvailablePayoutsSelections.ts → src/packages/v2v3/components/Create/components/pages/PayoutsPage/hooks/useAvailablePayoutsSelections.ts

@@ -1,5 +1,5 @@
-import { determineAvailablePayoutsSelections } from 'components/Create/utils/determineAvailablePayoutsSelections'
 import { PayoutsSelection } from 'models/payoutsSelection'
+import { determineAvailablePayoutsSelections } from 'packages/v2v3/components/Create/utils/determineAvailablePayoutsSelections'
 import { useEditingDistributionLimit } from 'redux/hooks/useEditingDistributionLimit'
 
 export const useAvailablePayoutsSelections = (): Set<PayoutsSelection> => {

src/components/Create/components/pages/ProjectDetails/ProjectDetailsPage.tsx → src/packages/v2v3/components/Create/components/pages/ProjectDetails/ProjectDetailsPage.tsx

@@ -2,7 +2,6 @@ import { RightOutlined } from '@ant-design/icons'
 import { t, Trans } from '@lingui/macro'
 import { Col, Form, Row } from 'antd'
 import { Callout } from 'components/Callout/Callout'
-import { useLockPageRulesWrapper } from 'components/Create/hooks/useLockPageRulesWrapper'
 import { FormItems } from 'components/formItems'
 import { EthAddressInput } from 'components/inputs/EthAddressInput'
 import FormattedNumberInput from 'components/inputs/FormattedNumberInput'
@@ -15,6 +14,7 @@ import { constants } from 'ethers'
 import { useWallet } from 'hooks/Wallet'
 import { trackFathomGoal } from 'lib/fathom'
 import Link from 'next/link'
+import { useLockPageRulesWrapper } from 'packages/v2v3/components/Create/hooks/useLockPageRulesWrapper'
 import { V2V3CurrencyOption } from 'packages/v2v3/models/currencyOption'
 import {
   V2V3_CURRENCY_ETH,