Merge pull request #4417 from jbx-protocol/revert-4415-revert-4412-dev

Revert "Revert "Release: 2024-07-30""

.github/workflows/ci-run.yml

@@ -9,9 +9,11 @@ on:
       - synchronize
     branches:
       - main
+      - dev
   push:
     branches:
       - main
+      - dev
 
   # manual trigger from Github UI - Action tab
   workflow_dispatch:

.github/workflows/sepolia.yml

@@ -3,7 +3,7 @@ name: Deploy Migrations to Sepolia
 on:
   push:
     branches:
-      - main
+      - dev
   workflow_dispatch:
 
 jobs:

package.json

@@ -108,8 +108,8 @@
     "graphql": "^16.8.1",
     "he": "^1.2.0",
     "jsonwebtoken": "^9.0.0",
-    "juice-sdk-core": "^9.1.3-alpha",
-    "juice-sdk-react": "^9.2.3-alpha",
+    "juice-sdk-core": "^10.0.3-alpha",
+    "juice-sdk-react": "^10.0.1-alpha",
     "juicebox-metadata-helper": "0.1.7",
     "less": "4.1.2",
     "lodash": "^4.17.21",

src/components/ActivityList.tsx

@@ -12,12 +12,12 @@ import {
 import { useMemo, useState } from 'react'
 import { AnyProjectEvent } from './activityEventElems/AnyProjectEvent'
 
-interface ActivityOption {
+export interface ActivityOption {
   label: string
   value: ProjectEventFilter
 }
 
-const ALL_OPT = (): ActivityOption => ({ label: t`All activity`, value: 'all' })
+export const ALL_OPT = (): ActivityOption => ({ label: t`All activity`, value: 'all' })
 
 const PV1_OPTS = (): ActivityOption[] => [
   ALL_OPT(),

src/components/Create/components/pages/PayoutsPage/components/CreateFlowPayoutsTable.tsx

@@ -1,16 +1,16 @@
 import { Form } from 'antd'
 import { CURRENCY_METADATA, CurrencyName } from 'constants/currency'
-import { Split } from 'models/splits'
 import { PayoutsTable } from 'packages/v2v3/components/shared/PayoutsTable/PayoutsTable'
+import { Split } from 'packages/v2v3/models/splits'
 import {
   V2V3CurrencyName,
   getV2V3CurrencyOption,
 } from 'packages/v2v3/utils/currency'
 import { MAX_DISTRIBUTION_LIMIT } from 'packages/v2v3/utils/math'
+import { allocationToSplit, splitToAllocation } from 'packages/v2v3/utils/splitToAllocation'
 import { ReactNode } from 'react'
 import { useEditingDistributionLimit } from 'redux/hooks/useEditingDistributionLimit'
 import { fromWad, parseWad } from 'utils/format/formatNumber'
-import { allocationToSplit, splitToAllocation } from 'utils/splitToAllocation'
 import { usePayoutsForm } from '../hooks/usePayoutsForm'
 
 const DEFAULT_CURRENCY_NAME = CURRENCY_METADATA.ETH.name

src/components/Create/components/pages/PayoutsPage/components/TreasuryOptionsRadio.tsx

@@ -3,16 +3,16 @@ import { RadioGroup } from '@headlessui/react'
 import { t } from '@lingui/macro'
 import { Callout } from 'components/Callout/Callout'
 import { DeleteConfirmationModal } from 'components/modals/DeleteConfirmationModal'
+import { SwitchToUnlimitedModal } from 'components/PayoutsTable/SwitchToUnlimitedModal'
 import { useModal } from 'hooks/useModal'
 import { TreasurySelection } from 'models/treasurySelection'
+import { ConvertAmountsModal } from 'packages/v2v3/components/shared/PayoutsTable/ConvertAmountsModal'
 import { usePayoutsTable } from 'packages/v2v3/components/shared/PayoutsTable/hooks/usePayoutsTable'
-import { SwitchToUnlimitedModal } from 'packages/v2v3/components/shared/PayoutsTable/modals/SwitchToUnlimitedModal'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useAppSelector } from 'redux/hooks/useAppSelector'
 import { ReduxDistributionLimit } from 'redux/hooks/useEditingDistributionLimit'
 import { fromWad } from 'utils/format/formatNumber'
 import { Icons } from '../../../Icons'
-import { ConvertAmountsModal } from './ConvertAmountsModal'
 import { RadioCard } from './RadioCard'
 
 const treasuryOptions = () => [

src/components/Create/components/pages/PayoutsPage/hooks/usePayoutsForm.ts

@@ -1,11 +1,11 @@
 import { Form } from 'antd'
 import { TreasurySelection } from 'models/treasurySelection'
 import { AllocationSplit } from 'packages/v2v3/components/shared/Allocation/Allocation'
+import { allocationToSplit, splitToAllocation } from 'packages/v2v3/utils/splitToAllocation'
 import { useDebugValue, useEffect, useMemo } from 'react'
 import { useAppDispatch } from 'redux/hooks/useAppDispatch'
 import { useAppSelector } from 'redux/hooks/useAppSelector'
 import { useEditingPayoutSplits } from 'redux/hooks/useEditingPayoutSplits'
-import { allocationToSplit, splitToAllocation } from 'utils/splitToAllocation'
 
 type PayoutsFormProps = Partial<{
   selection: TreasurySelection

src/components/Create/components/pages/ProjectToken/hooks/useProjectTokenForm.ts

@@ -14,13 +14,13 @@ import {
   redemptionRateFrom,
   reservedRateFrom,
 } from 'packages/v2v3/utils/math'
+import { allocationToSplit, splitToAllocation } from 'packages/v2v3/utils/splitToAllocation'
 import { useDebugValue, useEffect, useMemo } from 'react'
 import { useAppDispatch } from 'redux/hooks/useAppDispatch'
 import { useAppSelector } from 'redux/hooks/useAppSelector'
 import { useEditingDistributionLimit } from 'redux/hooks/useEditingDistributionLimit'
 import { useEditingReservedTokensSplits } from 'redux/hooks/useEditingReservedTokensSplits'
 import { editingV2ProjectActions } from 'redux/slices/editingV2Project'
-import { allocationToSplit, splitToAllocation } from 'utils/splitToAllocation'
 import { useFormDispatchWatch } from '../../hooks/useFormDispatchWatch'
 
 export type ProjectTokensFormProps = Partial<{

src/components/Create/components/pages/ReviewDeploy/ReviewDeployPage.tsx

@@ -7,10 +7,10 @@ import ExternalLink from 'components/ExternalLink'
 import TransactionModal from 'components/modals/TransactionModal'
 import { TERMS_OF_SERVICE_URL } from 'constants/links'
 import { useWallet } from 'hooks/Wallet'
+import { emitConfirmationDeletionModal } from 'hooks/emitConfirmationDeletionModal'
 import useMobile from 'hooks/useMobile'
 import { useModal } from 'hooks/useModal'
 import { useRouter } from 'next/router'
-import { emitConfirmationDeletionModal } from 'packages/v2v3/components/V2V3Project/ProjectDashboard/utils/modals'
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react'
 import { useDispatch } from 'react-redux'
 import { useAppSelector } from 'redux/hooks/useAppSelector'

src/components/Create/components/pages/ReviewDeploy/components/FundingConfigurationReview/hooks/useFundingConfigurationReview.ts

@@ -3,13 +3,13 @@ import { useAvailablePayoutsSelections } from 'components/Create/components/page
 import { formatFundingCycleDuration } from 'components/Create/utils/formatFundingCycleDuration'
 import moment from 'moment'
 import { AllocationSplit } from 'packages/v2v3/components/shared/Allocation/Allocation'
+import { allocationToSplit, splitToAllocation } from 'packages/v2v3/utils/splitToAllocation'
 import { useCallback, useMemo } from 'react'
 import { useAppSelector } from 'redux/hooks/useAppSelector'
 import { useEditingDistributionLimit } from 'redux/hooks/useEditingDistributionLimit'
 import { useEditingPayoutSplits } from 'redux/hooks/useEditingPayoutSplits'
 import { DEFAULT_MUST_START_AT_OR_AFTER } from 'redux/slices/editingV2Project'
 import { formatFundingTarget } from 'utils/format/formatFundingTarget'
-import { allocationToSplit, splitToAllocation } from 'utils/splitToAllocation'
 
 export const useFundingConfigurationReview = () => {
   const { fundingCycleData, payoutsSelection, mustStartAtOrAfter } =

src/components/Create/components/pages/ReviewDeploy/components/ProjectTokenReview/hooks/useProjectTokenReview.ts

@@ -1,9 +1,9 @@
 import { AllocationSplit } from 'packages/v2v3/components/shared/Allocation/Allocation'
+import { allocationToSplit, splitToAllocation } from 'packages/v2v3/utils/splitToAllocation'
 import { useCallback, useMemo } from 'react'
 import { useAppSelector } from 'redux/hooks/useAppSelector'
 import { useEditingReservedTokensSplits } from 'redux/hooks/useEditingReservedTokensSplits'
 import { formatEnabled, formatPaused } from 'utils/format/formatBoolean'
-import { allocationToSplit, splitToAllocation } from 'utils/splitToAllocation'
 
 export const useProjectTokenReview = () => {
   const {

src/components/Create/utils/projectTokenSettingsToReduxFormat.ts

@@ -4,8 +4,8 @@ import {
   redemptionRateFrom,
   reservedRateFrom,
 } from 'packages/v2v3/utils/math'
+import { allocationToSplit } from 'packages/v2v3/utils/splitToAllocation'
 import { EMPTY_RESERVED_TOKENS_GROUPED_SPLITS } from 'redux/slices/editingV2Project'
-import { allocationToSplit } from 'utils/splitToAllocation'
 import { ProjectTokensFormProps } from '../components/pages/ProjectToken/hooks/useProjectTokenForm'
 
 export const projectTokenSettingsToReduxFormat = (

src/components/Navbar/components/TransactionList/TransactionsList.tsx

@@ -5,8 +5,8 @@ import BadgeIcon from 'components/BadgeIcon'
 import ExternalLink from 'components/ExternalLink'
 import Loading from 'components/Loading'
 import {
+  TransactionLog,
   TxHistoryContext,
-  timestampForTxLog,
 } from 'contexts/Transaction/TxHistoryContext'
 import { TxStatus } from 'models/transaction'
 import { useContext, useEffect, useMemo, useState } from 'react'
@@ -15,6 +15,11 @@ import { etherscanLink } from 'utils/etherscan'
 import { formatHistoricalDate } from 'utils/format/formatDate'
 import TxStatusIcon from './TxStatusIcon'
 
+// Prefer using tx.timestamp if tx has been mined. Otherwise use createdAt timestamp
+export const timestampForTxLog = (txLog: TransactionLog) => {
+  return txLog.tx?.timestamp ?? txLog.createdAt
+}
+
 export function TransactionsList({
   listClassName,
 }: {

src/packages/v2v3/components/shared/PayoutsTable/modals/SwitchToUnlimitedModal.tsx → src/components/PayoutsTable/SwitchToUnlimitedModal.tsx

@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/macro'
 import { Modal } from 'antd'
-import { ExternalLinkWithIcon } from 'packages/v2v3/components/V2V3Project/ProjectDashboard/components/ui/ExternalLinkWithIcon'
+import { ExternalLinkWithIcon } from 'components/ExternalLinkWithIcon'
 import { helpPagePath } from 'utils/routes'
 
 export function SwitchToUnlimitedModal({

src/components/Project/ProjectTabs/CyclesPayoutsTab/ConfigurationPanel.tsx

@@ -16,9 +16,9 @@ export type ConfigurationPanelTableData = {
 
 type ConfigurationPanelProps = {
   cycle: ConfigurationPanelTableData
-  token?: ConfigurationPanelTableData // V4TODO: don't make token optional
-  otherRules?: ConfigurationPanelTableData // V4TODO: don't make otherRules optional
-  extension?: ConfigurationPanelTableData | null // V4TODO: don't make extension optional
+  token: ConfigurationPanelTableData
+  otherRules: ConfigurationPanelTableData 
+  extension: ConfigurationPanelTableData | null 
 }
 
 export const ConfigurationPanel: React.FC<ConfigurationPanelProps> = ({
@@ -30,12 +30,8 @@ export const ConfigurationPanel: React.FC<ConfigurationPanelProps> = ({
   return (
     <div className="flex flex-col gap-8">
       <ConfigurationTable title={t`Cycle`} data={cycle} />
-      {token && ( // V4TODO: don't make token optional
-        <ConfigurationTable title={t`Token`} data={token} />
-      )}  
-      {otherRules && ( // V4TODO: don't make otherRules optional
-        <ConfigurationTable title={t`Other rules`} data={otherRules} />
-      )}
+      <ConfigurationTable title={t`Token`} data={token} />
+      <ConfigurationTable title={t`Other rules`} data={otherRules} />
       {extension && (
         <ConfigurationTable title={t`Extension`} data={extension} />
       )}

src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/CyclesPayoutsPanel/utils/flagPairToDatum.ts → src/components/Project/ProjectTabs/utils/flagPairToDatum.ts

@@ -1,6 +1,6 @@
 import { t } from '@lingui/macro'
-import { pairToDatum } from 'components/Project/ProjectHeader/utils/pairToDatum'
 import { ConfigurationPanelDatum } from 'components/Project/ProjectTabs/CyclesPayoutsTab/ConfigurationPanel'
+import { pairToDatum } from 'components/Project/ProjectTabs/utils/pairToDatum'
 
 export const flagPairToDatum = (
   name: string,

src/components/ProjectSafeDashboard/juiceboxTransactions/reconfigureFundingCyclesOf/ReconfigurationRichPreview.tsx

@@ -7,8 +7,8 @@ import FundingCycleDetails from 'packages/v2v3/components/V2V3Project/V2V3Fundin
 import { V2V3ProjectContext } from 'packages/v2v3/contexts/Project/V2V3ProjectContext'
 import { deriveNextIssuanceRate } from 'packages/v2v3/utils/fundingCycle'
 import { formatReservedRate } from 'packages/v2v3/utils/math'
+import { toSplit } from 'packages/v2v3/utils/v2v3Splits'
 import { useContext } from 'react'
-import { toSplit } from 'utils/splits'
 import { LinkToSafeButton } from '../../LinkToSafeButton'
 import { useTransactionJBController } from './hooks/useTransactionJBController'
 

src/components/VolumeChart/hooks/useProjectTimeline.ts

@@ -67,16 +67,24 @@ export function useProjectTimeline({
     return { blocks, timestamps }
   }, [blockData])
 
-  const { data: queryResult, loading: isLoadingQuery } = useProjectTlQuery({
+  const { data: v1v2v3QueryResult, loading: isLoadingQuery } = useProjectTlQuery({
     client,
     variables: {
       id: blocks ? getSubgraphIdForProject(pv, projectId) : '',
       ...blocks,
     },
   })
+  // TODO: const { data: v4QueryResult } = useSubgraphQuery(ProjectTlDocument, {
+  //   where: {
+  //     projectId,
+  //   },
+  // })
 
   const points = useMemo(() => {
-    if (!queryResult || !timestamps) return
+    // TODO: if (!(v1v2v3QueryResult || v4QueryResult) || !timestamps) return
+    if (!v1v2v3QueryResult || !timestamps) return
+    // TODO: const queryResult = pv === PV_V4 ? v4QueryResult : v1v2v3QueryResult
+    const queryResult = v1v2v3QueryResult
 
     const points: ProjectTimelinePoint[] = []
 
@@ -94,7 +102,7 @@ export function useProjectTimeline({
     }
 
     return points
-  }, [timestamps, queryResult])
+  }, [timestamps, v1v2v3QueryResult])
 
   return {
     points,

src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/TokensPanel/components/AddTokenToMetamaskButton.tsx → src/components/buttons/AddTokenToMetamaskButton.tsx

@@ -2,9 +2,9 @@ import { Trans } from '@lingui/macro'
 import type { MetaMaskInpageProvider } from '@metamask/providers'
 import { Button } from 'antd'
 import { providers } from 'ethers'
-import { V2V3ProjectContext } from 'packages/v2v3/contexts/Project/V2V3ProjectContext'
-import { useContext } from 'react'
+import useNameOfERC20 from 'hooks/ERC20/useNameOfERC20'
 import { twMerge } from 'tailwind-merge'
+import { Hash } from 'viem'
 
 declare global {
   interface Window {
@@ -26,9 +26,13 @@ const useMetamask = () => {
   return ethereum as unknown as MetaMaskInpageProvider
 }
 
-function useAddTokenToWalletRequest() {
+function useAddTokenToWalletRequest({
+  tokenAddress,
+}:{
+  tokenAddress: Hash
+}) {
   const ethereum = useMetamask()
-  const { tokenAddress, tokenSymbol } = useContext(V2V3ProjectContext)
+  const { data: tokenSymbol } = useNameOfERC20(tokenAddress)
 
   if (!ethereum) {
     return
@@ -49,8 +53,16 @@ function useAddTokenToWalletRequest() {
   }
 }
 
-export function AddTokenToMetamaskButton({ className }: { className: string }) {
-  const addToken = useAddTokenToWalletRequest()
+export function AddTokenToMetamaskButton({ 
+  className,
+  tokenAddress
+}: { 
+  className: string,
+  tokenAddress: Hash
+}) {
+  const addToken = useAddTokenToWalletRequest({
+    tokenAddress
+  })
   if (!addToken) return null
 
   return (

src/components/formItems/ProjectDiscord.tsx

@@ -14,7 +14,7 @@ export default function ProjectDiscord({
       label={hideLabel ? undefined : t`Discord link`}
       {...formItemProps}
     >
-      <Input type="url" autoComplete="off" prefix="https://" />
+      <Input type="text" autoComplete="off" prefix="https://" />
     </Form.Item>
   )
 }

src/components/formItems/ProjectTelegram.tsx

@@ -14,7 +14,7 @@ export default function ProjectTelegam({
       label={hideLabel ? undefined : t`Telegram link`}
       {...formItemProps}
     >
-      <Input type="url" autoComplete="off" prefix="https://" />
+      <Input type="text" autoComplete="off" prefix="https://" />
     </Form.Item>
   )
 }

src/components/formItems/formHelpers.tsx

@@ -2,7 +2,7 @@ import { isAddress } from 'ethers/lib/utils'
 import { PayoutMod } from 'packages/v1/models/mods'
 import { permyriadToPercent } from 'utils/format/formatNumber'
 
-import { Split } from 'models/splits'
+import { Split } from 'packages/v2v3/models/splits'
 import { isEqualAddress, isZeroAddress } from 'utils/address'
 import { percentToPermyriad } from 'utils/format/formatNumber'
 

src/constants/splits.ts

@@ -1,4 +1,4 @@
-import { ETHPayoutSplitGroup, ReservedTokensSplitGroup } from 'models/splits'
+import { ETHPayoutSplitGroup, ReservedTokensSplitGroup } from 'packages/v2v3/models/splits'
 
 export const ETH_PAYOUT_SPLIT_GROUP: ETHPayoutSplitGroup = 1
 export const RESERVED_TOKEN_SPLIT_GROUP: ReservedTokensSplitGroup = 2

src/contexts/Transaction/EthersTxHistoryProvider.tsx

@@ -1,7 +1,8 @@
 import { readProvider } from 'constants/readProvider'
-import { TransactionLog, TxStatus } from 'models/transaction'
+import { TxStatus } from 'models/transaction'
 import { ReactNode, useEffect } from 'react'
-import { TxHistoryContext } from './TxHistoryContext'
+import { Hash } from 'viem'
+import { TransactionLog, TxHistoryContext } from './TxHistoryContext'
 import { useTransactions } from './useTransactions'
 
 const nowSeconds = () => Math.round(new Date().valueOf() / 1000)
@@ -45,7 +46,10 @@ const pollTransaction = async (
     txLog.callbacks?.onConfirmed?.(response)
     return {
       ...txLog,
-      tx: response,
+      tx: {
+        hash: response.hash as Hash,
+        timestamp: response.timestamp,
+      },
       status: TxStatus.success,
     }
   }