Update to prod

src/components/Project/ProjectTabs/ProjectTab.tsx

@@ -1,5 +1,5 @@
 import { Tab } from '@headlessui/react'
-import { ReactNode, useRef } from 'react'
+import React, { ReactNode, useRef } from 'react'
 import { twMerge } from 'tailwind-merge'
 
 interface ProjectTabProps {
@@ -26,14 +26,6 @@ export const ProjectTab: React.FC<ProjectTabProps> = ({
       onClick={onClick}
     >
       {({ selected }) => {
-        if (selected && tabRef.current) {
-          tabRef.current.scrollIntoView({
-            behavior: 'smooth',
-            block: 'nearest',
-            inline: 'start',
-          })
-        }
-
         return (
           <div
             className={twMerge(

src/components/VolumeChart/components/TimelineViewSelector.tsx

@@ -1,15 +1,65 @@
 import { t } from '@lingui/macro'
+import { JuiceListbox } from 'components/inputs/JuiceListbox'
 import React from 'react'
-import { classNames } from 'utils/classNames'
+import { twMerge } from 'tailwind-merge'
 import { ProjectTimelineView } from '../types'
 
-export default function TimelineViewSelector({
+export default function TimelineViewSelector(props: {
+  timelineView: ProjectTimelineView
+  setTimelineView: React.Dispatch<React.SetStateAction<ProjectTimelineView>>
+}) {
+  return (
+    <>
+      <MobileTimelineViewSelector {...props} />
+      <DesktopTimelineViewSelector {...props} />
+    </>
+  )
+}
+
+const MobileTimelineViewSelector = ({
   timelineView,
   setTimelineView,
 }: {
   timelineView: ProjectTimelineView
   setTimelineView: React.Dispatch<React.SetStateAction<ProjectTimelineView>>
-}) {
+}) => {
+  const opts = (): { label: string; value: ProjectTimelineView }[] => [
+    {
+      label: t`Volume`,
+      value: 'volume',
+    },
+    {
+      label: t`In Juicebox`,
+      value: 'balance',
+    },
+    {
+      label: t`Trending`,
+      value: 'trendingScore',
+    },
+  ]
+
+  const handleChange = (value: ProjectTimelineView) => {
+    setTimelineView(value)
+  }
+
+  return (
+    <JuiceListbox
+      className="w-full max-w-[116px] text-xs uppercase md:hidden"
+      buttonClassName="text-xs uppercase py-1 px-2"
+      options={opts()}
+      value={opts().find(o => o.value === timelineView)}
+      onChange={v => handleChange(v.value)}
+    />
+  )
+}
+
+const DesktopTimelineViewSelector = ({
+  timelineView,
+  setTimelineView,
+}: {
+  timelineView: ProjectTimelineView
+  setTimelineView: React.Dispatch<React.SetStateAction<ProjectTimelineView>>
+}) => {
   const tab = (view: ProjectTimelineView) => {
     const selected = view === timelineView
 
@@ -28,7 +78,7 @@ export default function TimelineViewSelector({
 
     return (
       <div
-        className={classNames(
+        className={twMerge(
           'cursor-pointer text-sm uppercase',
           selected
             ? 'font-medium text-grey-500 dark:text-slate-100'
@@ -40,9 +90,8 @@ export default function TimelineViewSelector({
       </div>
     )
   }
-
   return (
-    <div className="flex gap-3">
+    <div className="mb-2 hidden gap-3 md:flex">
       {tab('volume')}
       {tab('balance')}
       {tab('trendingScore')}

src/components/inputs/FormattedNumberInput.tsx

@@ -110,5 +110,5 @@ export default function FormattedNumberInput({
         {accessory && <div>{accessory}</div>}
       </div>
     </div>
-  );
+  )
 }

src/locales/messages.pot

@@ -92,6 +92,9 @@ msgstr ""
 msgid "Claim {tokensLabel} as ERC-20"
 msgstr ""
 
+msgid "Save project"
+msgstr ""
+
 msgid "Total issuance"
 msgstr ""
 
@@ -293,6 +296,9 @@ msgstr ""
 msgid "Project tokens"
 msgstr ""
 
+msgid "NFT Credits"
+msgstr ""
+
 msgid "You must grant permission to migrate your V1 tokens."
 msgstr ""
 
@@ -2807,6 +2813,9 @@ msgstr ""
 msgid "We've disabled payments because the project has opted to reserve 100% of new tokens. You would receive no tokens from your payment."
 msgstr ""
 
+msgid "Get notifications"
+msgstr ""
+
 msgid "Unarchiving your project has the following effects:"
 msgstr ""
 

src/packages/v1/components/V1Project/V1ProjectToolsDrawer/V1ProjectToolsDrawer.tsx

@@ -1,13 +1,13 @@
 import { Trans } from '@lingui/macro'
 import { Divider, Drawer, Space, Tabs } from 'antd'
-import { AddToProjectBalanceForm } from 'components/Project/ProjectToolsDrawer/AddToProjectBalanceForm'
-import { ExportSection } from 'components/Project/ProjectToolsDrawer/ExportSection'
-import { TransferOwnershipForm } from 'components/Project/ProjectToolsDrawer/TransferOwnershipForm'
 import { useIsUserAddress } from 'hooks/useIsUserAddress'
 import { V1ProjectContext } from 'packages/v1/contexts/Project/V1ProjectContext'
 import { useAddToBalanceTx } from 'packages/v1/hooks/transactor/useAddToBalanceTx'
 import { useSafeTransferFromTx } from 'packages/v1/hooks/transactor/useSafeTransferFromTx'
 import { useSetProjectUriTx } from 'packages/v1/hooks/transactor/useSetProjectUriTx'
+import { AddToProjectBalanceForm } from 'packages/v2v3/components/V2V3Project/V2V3ProjectToolsDrawer/AddToProjectBalanceForm'
+import { ExportSection } from 'packages/v2v3/components/V2V3Project/V2V3ProjectToolsDrawer/ExportSection'
+import { TransferOwnershipForm } from 'packages/v2v3/components/V2V3Project/V2V3ProjectToolsDrawer/TransferOwnershipForm'
 import { useContext } from 'react'
 import ArchiveV1Project from './ArchiveV1Project'
 import { ExportPayoutModsButton } from './ExportPayoutModsButton'

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

@@ -3,11 +3,15 @@ import EtherscanLink from 'components/EtherscanLink'
 import ExternalLink from 'components/ExternalLink'
 import { JuiceModal } from 'components/modals/JuiceModal'
 import { Formik } from 'formik'
-import Image from "next/legacy/image"
+import { useWallet } from 'hooks/Wallet'
+import Image from 'next/legacy/image'
+import { useNftCredits } from 'packages/v2v3/hooks/JB721Delegate/useNftCredits'
+import React, { ReactNode } from 'react'
 import { twMerge } from 'tailwind-merge'
 import { helpPagePath } from 'utils/helpPagePath'
 import { MessageSection } from './components/MessageSection'
 import { ReceiveSection } from './components/ReceiveSection'
+import { usePayAmounts } from './hooks/usePayAmounts'
 import {
   PayProjectModalFormValues,
   usePayProjectModal,
@@ -16,8 +20,6 @@ import {
 export const PayProjectModal: React.FC = () => {
   const {
     open,
-    primaryAmount,
-    secondaryAmount,
     validationSchema,
     isTransactionPending,
     isTransactionConfirmed,
@@ -27,6 +29,7 @@ export const PayProjectModal: React.FC = () => {
     setOpen,
     onPaySubmit,
   } = usePayProjectModal()
+  const { formattedTotalAmount } = usePayAmounts()
 
   return (
     <Formik<PayProjectModalFormValues>
@@ -50,7 +53,7 @@ export const PayProjectModal: React.FC = () => {
             position="top"
             okLoading={props.isSubmitting || isTransactionPending}
             okButtonForm="PayProjectModalForm"
-            okText={t`Pay ${primaryAmount}`}
+            okText={t`Pay ${formattedTotalAmount.primaryAmount}`}
             cancelText={
               isTransactionPending || isTransactionConfirmed
                 ? t`Close`
@@ -97,19 +100,7 @@ export const PayProjectModal: React.FC = () => {
             ) : (
               <>
                 <div className="flex flex-col divide-y divide-grey-200 dark:divide-slate-500">
-                  <div className="flex justify-between gap-3 py-3">
-                    <span className="font-medium">
-                      <Trans>Total amount</Trans>
-                    </span>
-                    <div>
-                      <span>{primaryAmount}</span>{' '}
-                      {secondaryAmount && (
-                        <span className="text-grey-500 dark:text-slate-200">
-                          ({secondaryAmount})
-                        </span>
-                      )}
-                    </div>
-                  </div>
+                  <AmountSection />
 
                   <ReceiveSection className="py-6" />
 
@@ -172,3 +163,61 @@ export const PayProjectModal: React.FC = () => {
     </Formik>
   )
 }
+
+const AmountSection = () => {
+  const { userAddress } = useWallet()
+  const { data: nftCredits } = useNftCredits(userAddress)
+  const { formattedAmount, formattedNftCredits, formattedTotalAmount } =
+    usePayAmounts()
+
+  const RowData = ({
+    label,
+    primaryAmount,
+    secondaryAmount,
+  }: {
+    label: ReactNode
+    primaryAmount: ReactNode
+    secondaryAmount: ReactNode
+  }) => (
+    <div className="flex justify-between gap-3 py-3">
+      <span className="font-medium">{label}</span>
+      <div>
+        <span>{primaryAmount}</span>{' '}
+        {secondaryAmount && (
+          <span className="text-grey-500 dark:text-slate-200">
+            ({secondaryAmount})
+          </span>
+        )}
+      </div>
+    </div>
+  )
+
+  if (!nftCredits?.gt(0) || !formattedNftCredits)
+    return (
+      <RowData
+        label={t`Total amount`}
+        primaryAmount={formattedTotalAmount?.primaryAmount}
+        secondaryAmount={formattedTotalAmount?.secondaryAmount}
+      />
+    )
+
+  return (
+    <div>
+      <RowData
+        label={t`Amount`}
+        primaryAmount={formattedAmount.primaryAmount}
+        secondaryAmount={formattedAmount.secondaryAmount}
+      />
+      <RowData
+        label={t`NFT Credits`}
+        primaryAmount={`-${formattedNftCredits.primaryAmount}`}
+        secondaryAmount={`-${formattedNftCredits.secondaryAmount}`}
+      />
+      <RowData
+        label={t`Total amount`}
+        primaryAmount={formattedTotalAmount?.primaryAmount}
+        secondaryAmount={formattedTotalAmount?.secondaryAmount}
+      />
+    </div>
+  )
+}