Merge pull request #4432 from jbx-protocol/dev

release: 2024-08-20

.gitignore

@@ -42,3 +42,4 @@ src/generated
 # tsc
 *.tsbuildinfo
 
+.vercel

next.config.js

@@ -176,7 +176,7 @@ const nextConfig = removeImports({
           ...SECURITY_HEADERS,
         ],
       },
-    ]
+    ];
   },
   images: {
     remotePatterns: [

package.json

@@ -21,7 +21,7 @@
     "i18n:extract": "./scripts/extract-translations-template.sh",
     "i18n:extract-source-locale": "NODE_ENV=development lingui extract --locale en",
     "i18n:lint": "./scripts/lint-translations-template.sh",
-    "postinstall": "yarn i18n:compile",
+    "postinstall": "yarn i18n:compile && ./scripts/clean-deps.sh",
     "lint": "next lint",
     "lint-staged": "lint-staged",
     "lint:fix": "yarn lint --fix",
@@ -66,7 +66,6 @@
     "@jbx-protocol/juice-721-delegate-v3-4": "npm:@jbx-protocol/[email protected]",
     "@jbx-protocol/juice-contracts-v3": "5.0.1",
     "@jbx-protocol/juice-delegates-registry": "1.0.3",
-    "@jbx-protocol/juice-v3-migration": "1.0.0",
     "@jbx-protocol/project-handles": "^2.0.5",
     "@lingui/cli": "^4.0.0",
     "@lingui/detect-locale": "^4.0.0",
@@ -88,18 +87,18 @@
     "@walletconnect/web3-provider": "^1.8.0",
     "@web3-onboard/coinbase": "^2.4.1",
     "@web3-onboard/core": "^2.22.2",
-    "@web3-onboard/gnosis": "^2.3.1",
-    "@web3-onboard/injected-wallets": "^2.11.1",
+    "@web3-onboard/gnosis": "^2.3.2",
+    "@web3-onboard/injected-wallets": "^2.11.2",
     "@web3-onboard/react": "^2.9.2",
     "@web3-onboard/walletconnect": "^2.6.1",
     "antd": "^4.24.0",
     "apollo-link-scalars": "^4.0.2",
     "autolinker": "^3.14.3",
-    "axios": "1.6.0",
+    "axios": "^1.7.4",
     "bottleneck": "^2.19.5",
     "discord.js": "^14.9.0",
     "dompurify": "^3.0.5",
-    "eslint-config-next": "^13.4.3",
+    "eslint-config-next": "^14.2.5",
     "ethereum-block-by-date": "1.4.6",
     "ethers": "^5.7.0",
     "fathom-client": "^3.6.0",
@@ -116,17 +115,17 @@
     "lottie-react": "^2.4.0",
     "mjml": "^4.15.3",
     "mustache": "^4.2.0",
-    "next": "^13.4.3",
+    "next": "^14.2.5",
     "object-hash": "^3.0.0",
     "pino": "^8.11.0",
     "pino-pretty": "^10.0.0",
     "postcss": "^8.4.31",
-    "postmark": "^3.0.15",
+    "postmark": "^4.0.4",
     "prop-types": "^15.8.1",
     "qs": "^6.12.2",
     "quill": "^1.3.7",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.11",
     "react-quill": "^2.0.0",
     "react-redux": "^8",
@@ -140,8 +139,8 @@
     "tiny-invariant": "^1.2.0",
     "use-deep-compare-effect": "^1.6.1",
     "uuid": "^8.3.2",
-    "viem": "^2.16.5",
-    "wagmi": "^2.10.9",
+    "viem": "2.12.0",
+    "wagmi": "^2.12.5",
     "yarn": "^1.22.22",
     "yup": "^1.4.0"
   },

scripts/clean-deps.sh

@@ -0,0 +1,2 @@
+rm -Rf node_modules/@jbx-protocol/**/goerli node_modules/@jbx-protocol/**/dry-run
+rm -f node_modules/@jbx-protocol/**/*.sol

src/components/AMMPrices/hooks/useERC20UniswapPrice.ts

@@ -37,6 +37,7 @@ interface State {
 type Props = {
   tokenSymbol: string | undefined
   tokenAddress: string | undefined
+  enabled?: boolean
 }
 
 /**
@@ -128,7 +129,11 @@ async function getPoolState(poolContract: Contract) {
  * Hook to fetch the Uniswap price for a given token.
  * Uniswap-related code inspired by https://docs.uniswap.org/sdk/guides/fetching-prices.
  */
-export function useUniswapPriceQuery({ tokenSymbol, tokenAddress }: Props) {
+export function useUniswapPriceQuery({
+  tokenSymbol,
+  tokenAddress,
+  enabled,
+}: Props) {
   return useQuery({
     queryKey: ['uniswap-price', tokenSymbol, tokenAddress],
     queryFn: async () => {
@@ -186,6 +191,6 @@ export function useUniswapPriceQuery({ tokenSymbol, tokenAddress }: Props) {
       }
     },
     refetchInterval: 30000, // refetch every 30 seconds
-    enabled: Boolean(tokenAddress && tokenSymbol),
+    enabled: Boolean(tokenAddress && tokenSymbol && enabled),
   })
 }

src/components/AboutDashboard/components/AboutTheProtocolSection.tsx

@@ -3,7 +3,7 @@ import { Trans, t } from '@lingui/macro'
 import { Button } from 'antd'
 import ExternalLink from 'components/ExternalLink'
 import { TickIconListItem } from 'components/TickIconListItem'
-import Image from 'next/image'
+import Image from "next/legacy/image"
 import { SectionContainer } from './SectionContainer'
 import illustration from '/public/assets/images/about/illustration2.webp'
 

src/components/AboutDashboard/components/HeroSection.tsx

@@ -1,5 +1,5 @@
 import { Trans } from '@lingui/macro'
-import Image from 'next/image'
+import Image from "next/legacy/image"
 import { twMerge } from 'tailwind-merge'
 import { SectionContainer } from './SectionContainer'
 import illustration from '/public/assets/images/about/hero.webp'

src/components/AboutDashboard/components/JuiceboxDaoSection.tsx

@@ -1,5 +1,5 @@
 import { Trans } from '@lingui/macro'
-import Image from 'next/image'
+import Image from "next/legacy/image"
 import { JoinOurDiscordButton } from './JoinOurDiscordButton'
 import { SectionContainer } from './SectionContainer'
 import illustration from '/public/assets/images/about/illustration3.webp'

src/components/AboutDashboard/components/OurMissionSection.tsx

@@ -2,7 +2,7 @@ import { Trans } from '@lingui/macro'
 import { ONE_BILLION } from 'constants/numbers'
 import { useProtocolLogQuery } from 'generated/graphql'
 import { client } from 'lib/apollo/client'
-import Image from 'next/image'
+import Image from "next/legacy/image"
 import { twMerge } from 'tailwind-merge'
 import { formatAmount } from 'utils/format/formatAmount'
 import { fromWad } from 'utils/format/formatNumber'

src/components/ActivityList.tsx

@@ -4,11 +4,11 @@ import { Button, Divider } from 'antd'
 import Loading from 'components/Loading'
 import { JuiceListbox } from 'components/inputs/JuiceListbox'
 import { PV_V1, PV_V2 } from 'constants/pv'
+import { useProjectEvents } from 'hooks/useProjectEvents'
 import {
   ProjectEventFilter,
   ProjectEventsQueryArgs,
-  useProjectEvents,
-} from 'hooks/useProjectEvents'
+} from 'models/projectEvents'
 import { useMemo, useState } from 'react'
 import { AnyProjectEvent } from './activityEventElems/AnyProjectEvent'
 
@@ -17,7 +17,10 @@ export interface ActivityOption {
   value: ProjectEventFilter
 }
 
-export 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/Confetti.tsx

@@ -0,0 +1,6 @@
+import confettiData from 'data/lottie/confetti-animation-juicebox.json'
+import Lottie from 'lottie-react'
+
+export default function Confetti({ className }: { className?: string }) {
+  return <Lottie className={className} animationData={confettiData} />
+}

src/components/Contact/Contact.tsx

@@ -6,7 +6,7 @@ import { JuiceTextArea } from 'components/inputs/JuiceTextArea'
 import { JuiceInput } from 'components/inputs/JuiceTextInput'
 import { ThemeContext } from 'contexts/Theme/ThemeContext'
 import { createContactMessage } from 'lib/api/discord'
-import Image from 'next/image'
+import Image from "next/legacy/image"
 import { useContext, useState } from 'react'
 import contactHeroDark from '/public/assets/images/contact-hero-od.webp'
 import contactHeroLight from '/public/assets/images/contact-hero-ol.webp'

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

@@ -7,7 +7,7 @@ import { XLButton } from 'components/buttons/XLButton'
 import { readNetwork } from 'constants/networks'
 import { useWallet } from 'hooks/Wallet'
 import { NetworkName } from 'models/networkName'
-import Image from 'next/image'
+import Image from "next/legacy/image"
 import { useRouter } from 'next/router'
 import { useCallback, useMemo, useState } from 'react'
 import DeploySuccessHero from '/public/assets/images/create-success-hero.webp'

src/components/DomainBadge.tsx

@@ -1,8 +1,6 @@
-import Image from 'next/image'
-import Link from 'next/link'
+import Image from "next/legacy/image"
 import { useMemo } from 'react'
 import { twMerge } from 'tailwind-merge'
-import { getJuicecrowdUrl } from 'utils/juicecrowd'
 import { Badge } from './Badge'
 
 type DomainBadgeProps = {
@@ -26,11 +24,6 @@ export const DomainBadge: React.FC<DomainBadgeProps> = ({
     if (domain === 'juicecrowd') return '/assets/images/juicecrowd-logo.webp'
   }, [domain])
 
-  const linkUrl = useMemo(() => {
-    if (!domain || !projectId) return undefined
-    if (domain === 'juicecrowd') return getJuicecrowdUrl(projectId)
-  }, [projectId, domain])
-
   if (!customDomainImageSrc) return null
 
   const badge = (
@@ -45,12 +38,5 @@ export const DomainBadge: React.FC<DomainBadgeProps> = ({
     </Badge>
   )
 
-  if (linkUrl)
-    return (
-      <Link href={linkUrl} target="_blank" rel="noopener noreferrer">
-        {badge}
-      </Link>
-    )
-
   return badge
 }

src/components/FormItemWarningText.tsx

@@ -1,9 +1,9 @@
-import { InfoCircleOutlined } from '@ant-design/icons'
+import { InformationCircleIcon } from '@heroicons/react/24/outline'
 import { PropsWithChildren } from 'react'
 
 export default function FormItemWarningText({
   children,
-  icon = <InfoCircleOutlined />,
+  icon = <InformationCircleIcon className="inline h-4 w-4" />,
 }: PropsWithChildren<{ icon?: JSX.Element }>) {
   return (
     <p className="text-warning-800 dark:text-warning-100">

src/components/Home/BuiltForSection/BuiltForBlobAndImage.tsx

@@ -1,5 +1,5 @@
 import { ThemeContext } from 'contexts/Theme/ThemeContext'
-import Image from 'next/image'
+import Image from "next/legacy/image"
 import { useContext } from 'react'
 import buildersImage from '/public/assets/images/home/why-juicebox/builders.webp'
 import crowdfundingImage from '/public/assets/images/home/why-juicebox/crowdfunding.webp'

src/components/Home/ConclusionSection/ConclusionSection.tsx

@@ -2,7 +2,7 @@ import { Trans } from '@lingui/macro'
 import { Button } from 'antd'
 import { TickIconList } from 'components/Home/ConclusionSection/TickIconList'
 import { SectionContainer } from 'components/Home/SectionContainer'
-import Image from 'next/image'
+import Image from "next/legacy/image"
 import Link from 'next/link'
 
 export function ConclusionSection() {

src/components/Home/HowJuiceboxWorksSection/HowJuiceboxWorksSection.tsx

@@ -8,7 +8,7 @@ import ExternalLink from 'components/ExternalLink'
 import { SectionContainer } from 'components/Home/SectionContainer'
 import { SectionHeading } from 'components/Home/SectionHeading'
 import { XLButton } from 'components/buttons/XLButton'
-import Image from 'next/image'
+import Image from "next/legacy/image"
 import Link from 'next/link'
 import sassyBlueberry from '/public/assets/images/sassy-blueberry.webp'
 

src/components/Home/JuicyPicksSection/components/ExploreCategories.tsx

@@ -6,7 +6,7 @@ import { SectionHeading } from 'components/Home/SectionHeading'
 import Loading from 'components/Loading'
 import template from 'lodash/template'
 import { projectTagText } from 'models/project-tags'
-import Image from 'next/image'
+import Image from "next/legacy/image"
 
 export const ExploreCategories = () => {
   const { tags, isLoading } = useExploreCategories()

src/components/Home/SuccessStoriesSection/SuccessStoriesCard.tsx

@@ -5,7 +5,7 @@ import ETHAmount from 'components/currency/ETHAmount'
 import ProjectLogo from 'components/ProjectLogo'
 import { useProjectMetadata } from 'hooks/useProjectMetadata'
 import { ProjectTagName, projectTagText } from 'models/project-tags'
-import Image from 'next/image'
+import Image from "next/legacy/image"
 import Link from 'next/link'
 
 import {

src/components/IconedImage.tsx

@@ -1,4 +1,4 @@
-import { ImageProps } from 'next/image'
+import { ImageProps } from "next/legacy/image"
 import { ReactNode } from 'react'
 import { JuiceVideoThumbnailOrImage } from './JuiceVideo/JuiceVideoThumbnailOrImage'
 

src/components/JuiceVideo/JuiceVideoOrImgPreview.tsx

@@ -1,7 +1,7 @@
 import { CloseOutlined } from '@ant-design/icons'
 import { JuiceVideoPreview } from 'components/JuiceVideo/JuiceVideoPreview'
 import { useContentType } from 'hooks/useContentType'
-import { ImageProps } from 'next/image'
+import { ImageProps } from "next/legacy/image"
 import { stopPropagation } from 'react-stop-propagation'
 import { fileTypeIsVideo } from 'utils/nftRewards'
 

src/components/JuiceVideo/JuiceVideoThumbnailOrImage.tsx

@@ -1,6 +1,6 @@
 import { LoadingOutlined } from '@ant-design/icons'
 import { useContentType } from 'hooks/useContentType'
-import { ImageProps } from 'next/image'
+import { ImageProps } from "next/legacy/image"
 import { useCallback, useState } from 'react'
 import { twMerge } from 'tailwind-merge'
 import { fileTypeIsVideo } from 'utils/nftRewards'

src/components/Loading.tsx

@@ -1,4 +1,4 @@
-import { LoadingOutlined } from '@ant-design/icons'
+import LoadingOutlined from '@ant-design/icons/LoadingOutlined'
 import { Spin } from 'antd'
 import { SpinSize } from 'antd/lib/spin'
 import { twMerge } from 'tailwind-merge'

src/components/Logo.tsx

@@ -1,6 +1,6 @@
 import { ThemeOption } from 'constants/theme/themeOption'
 import { ThemeContext } from 'contexts/Theme/ThemeContext'
-import Image from 'next/image'
+import Image from "next/legacy/image"
 import { useContext } from 'react'
 import { twMerge } from 'tailwind-merge'
 import LIGHT_JUICE_LOGO from '/public/assets/juice-logo-full_black.svg'

src/components/NftRewards/RewardImage/RewardImage.tsx

@@ -1,4 +1,4 @@
-import { ImageProps } from 'next/image'
+import { ImageProps } from "next/legacy/image"
 import { stopPropagation } from 'react-stop-propagation'
 import { classNames } from 'utils/classNames'
 

src/components/Project/ProjectHeader/CoverPhoto.tsx

@@ -1,5 +1,5 @@
 // import { useProjectMetadataContext } from 'contexts/ProjectMetadataContext'
-import Image from 'next/image'
+import Image from "next/image"
 import { useMemo } from 'react'
 import { twMerge } from 'tailwind-merge'
 import { useCoverPhoto } from './hooks/useCoverPhoto'

src/components/Project/ProjectHeader/EditProjectHandleButton.tsx

@@ -1,4 +1,4 @@
-import { EditOutlined } from '@ant-design/icons'
+import { PencilSquareIcon } from '@heroicons/react/24/outline'
 import { t, Trans } from '@lingui/macro'
 import { Button, Tooltip } from 'antd'
 import { ProjectMetadataContext } from 'contexts/ProjectMetadataContext'
@@ -24,7 +24,7 @@ export function EditProjectHandleButton() {
           })}
           legacyBehavior
         >
-          <Button type="link" icon={<EditOutlined />}>
+          <Button type="link" icon={<PencilSquareIcon />}>
             <span>
               <Trans>Add handle</Trans>
             </span>

src/components/Project/ProjectHeader/GnosisSafeBadge.tsx

@@ -1,4 +1,3 @@
-import Icon from '@ant-design/icons'
 import { plural, Trans } from '@lingui/macro'
 import { Tooltip } from 'antd'
 import { useQueuedSafeTransactions } from 'hooks/safe/useQueuedSafeTransactions'
@@ -100,7 +99,7 @@ function BadgeMightHaveNotice({
       }
     >
       <div className="relative flex">
-        <Icon component={() => <SafeIcon href={href} />} />
+        <SafeIcon href={href} />
         <Notice />
       </div>
     </Tooltip>

src/components/Project/ProjectHeader/ProjectHeaderPopupMenu.tsx

@@ -6,14 +6,15 @@ import { SubscribeButtonIcon } from 'components/buttons/SubscribeButton/Subscrib
 import { useSubscribeButton } from 'components/buttons/SubscribeButton/hooks/useSubscribeButton'
 import { PV_V2 } from 'constants/pv'
 import useMobile from 'hooks/useMobile'
-import { SocialLink } from 'packages/v2v3/components/V2V3Project/ProjectDashboard/hooks/useAboutPanel'
 import { V2V3ProjectToolsDrawer } from 'packages/v2v3/components/V2V3Project/V2V3ProjectToolsDrawer'
 import { useMemo, useState } from 'react'
 import { twJoin } from 'tailwind-merge'
 import { PopupMenu } from '../../ui/PopupMenu'
 import { SocialLinkButton } from './SocialLinkButton'
 import { useSocialLinks } from './hooks/useSocialLinks'
 
+type SocialLink = 'twitter' | 'discord' | 'telegram' | 'website'
+
 export function ProjectHeaderPopupMenu({
   className,
   projectId,

src/components/Project/ProjectTabs/EmptyScreen.tsx

@@ -1,6 +1,6 @@
 import { t } from '@lingui/macro'
 import { useJuiceTheme } from 'contexts/Theme/useJuiceTheme'
-import Image from 'next/image'
+import Image from "next/image"
 import { twMerge } from 'tailwind-merge'
 
 export const EmptyScreen = ({