feat: v4 archive projects

src/locales/messages.pot

@@ -227,6 +227,9 @@ msgstr ""
 msgid "Error downloading participants, try again."
 msgstr ""
 
+msgid "Edit next ruleset"
+msgstr ""
+
 msgid "Set a future date & time to start your project's first cycle."
 msgstr ""
 
@@ -1427,6 +1430,9 @@ msgstr ""
 msgid "What do we value?"
 msgstr ""
 
+msgid "Ruleset configuration"
+msgstr ""
+
 msgid "Add a brief one-sentence summary of your project."
 msgstr ""
 
@@ -3815,6 +3821,9 @@ msgstr ""
 msgid "DeFi"
 msgstr ""
 
+msgid "Make changes to your ruleset settings and rules"
+msgstr ""
+
 msgid "While enabled, this project will use the custom behavior defined in the contract above when somebody redeems from this project. Exercise caution."
 msgstr ""
 

src/packages/v4/views/V4ProjectSettings/ArchiveProjectSettingsPage.tsx

@@ -0,0 +1,167 @@
+import { Trans } from '@lingui/macro'
+import { Button, Statistic } from 'antd'
+import { Callout } from 'components/Callout/Callout'
+import { useJBProjectMetadataContext } from 'juice-sdk-react'
+import { uploadProjectMetadata } from 'lib/api/ipfs'
+import { useEditProjectDetailsTx } from 'packages/v4/hooks/useEditProjectDetailsTx'
+import { useCallback, useState } from 'react'
+import { emitErrorNotification, emitInfoNotification } from 'utils/notifications'
+
+export function ArchiveProjectSettingsPage() {
+  const [loading, setLoading] = useState(false)
+
+  const editV4ProjectDetailsTx = useEditProjectDetailsTx()
+  const { metadata } = useJBProjectMetadataContext()
+
+  const projectMetadata = metadata.data
+
+  const setArchived = useCallback(async (archived: boolean) => {
+    if (!projectMetadata) return
+
+    setLoading(true)
+
+    const uploadedMetadata = await uploadProjectMetadata({
+      ...projectMetadata,
+      archived,
+    })
+
+    if (!uploadedMetadata.Hash) {
+      setLoading(false)
+      return
+    }
+
+    editV4ProjectDetailsTx(
+      uploadedMetadata.Hash as `0x${string}`, {
+        onTransactionPending: () => null,
+        onTransactionConfirmed: () => {
+          setLoading(false)
+          emitInfoNotification('Project archived', {
+            description: 'Your project has been archived.',
+          })
+
+          // v4Todo: part of v2, not sure if necessary 
+          // if (projectId) {
+          //   await revalidateProject({
+          //     pv: PV_V4,
+          //     projectId: String(projectId),
+          //   })
+          // }
+        },
+        onTransactionError: (error: unknown) => {
+          console.error(error)
+          setLoading(false)
+          emitErrorNotification(`Error launching ruleset: ${error}`)
+        },
+      }
+    )
+  }, [
+    editV4ProjectDetailsTx,
+    projectMetadata,
+  ])
+
+  if (projectMetadata?.archived) {
+    return (
+      <div className="flex flex-col gap-4">
+        <Statistic
+          title={<Trans>Project state</Trans>}
+          valueRender={() => <Trans>Archived</Trans>}
+        />
+
+        <div>
+          <p>
+            <Trans>Unarchiving your project has the following effects:</Trans>
+          </p>
+
+          <ul className="list-disc pl-10">
+            <li>
+              <Trans>Your project will appear as 'active'.</Trans>
+            </li>
+            <li>
+              <Trans>
+                Your project can receive payments through the juicebox.money
+                app.
+              </Trans>
+            </li>
+          </ul>
+        </div>
+
+        <p>
+          <Trans>
+            Allow a few days for your project to appear in the "active" projects
+            list on the Projects page.
+          </Trans>
+        </p>
+        <div>
+          <Button
+            onClick={() => setArchived(false)}
+            loading={loading}
+            type="primary"
+          >
+            <span>
+              <Trans>Unarchive project</Trans>
+            </span>
+          </Button>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex flex-col gap-4">
+      <Statistic
+        title={<Trans>Project state</Trans>}
+        valueRender={() => <Trans>Active</Trans>}
+      />
+
+      <div>
+        <p>
+          <Trans>Archiving your project has the following effects:</Trans>
+        </p>
+
+        <ul className="list-disc pl-10">
+          <li>
+            <Trans>Your project will appear as 'archived'.</Trans>
+          </li>
+          <li>
+            <Trans>
+              Your project can't receive payments through the juicebox.money
+              app.
+            </Trans>
+          </li>
+          <li>
+            <Trans>
+              Unless payments to this project are paused in your cycle's
+              rules, your project can still receive payments directly through
+              the Juicebox protocol contracts.
+            </Trans>
+          </li>
+        </ul>
+      </div>
+
+      <div>
+        <p>
+          <Trans>
+            Allow a few days for your project to appear in the "archived"
+            projects list on the Projects page.
+          </Trans>
+        </p>
+
+        <Callout.Info>
+          <Trans>You can unarchive your project at any time.</Trans>
+        </Callout.Info>
+      </div>
+
+      <div>
+        <Button
+          onClick={() => setArchived(true)}
+          loading={loading}
+          type="primary"
+        >
+          <span>
+            <Trans>Archive project</Trans>
+          </span>
+        </Button>
+      </div>
+    </div>
+  )
+}

src/packages/v4/views/V4ProjectSettings/ProjectDetailsSettingsPage/ProjectDetailsSettingsPage.tsx

@@ -1,18 +1,17 @@
 import { useForm } from 'antd/lib/form/Form'
 import { ProjectDetailsForm, ProjectDetailsFormFields } from 'components/Project/ProjectSettings/ProjectDetailsForm'
 import { PROJECT_PAY_CHARACTER_LIMIT } from 'constants/numbers'
-import { ProjectMetadataContext } from 'contexts/ProjectMetadataContext'
+import { useJBProjectMetadataContext } from 'juice-sdk-react'
 import { uploadProjectMetadata } from 'lib/api/ipfs'
 import { useEditProjectDetailsTx } from 'packages/v4/hooks/useEditProjectDetailsTx'
 
-import { useCallback, useContext, useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { withoutHttps } from 'utils/http'
 import { emitErrorNotification, emitInfoNotification } from 'utils/notifications'
 
 export function ProjectDetailsSettingsPage() {
-  const { projectMetadata, refetchProjectMetadata } = useContext(
-    ProjectMetadataContext,
-  )
+  const { metadata } = useJBProjectMetadataContext()
+  const projectMetadata = metadata.data
 
   const [loadingSaveChanges, setLoadingSaveChanges] = useState<boolean>()
   const [projectForm] = useForm<ProjectDetailsFormFields>()
@@ -63,7 +62,6 @@ export function ProjectDetailsSettingsPage() {
           //     projectId: String(projectId),
           //   })
           // }
-          refetchProjectMetadata()
         },
         onTransactionError: (error: unknown) => {
           console.error(error)
@@ -75,7 +73,6 @@ export function ProjectDetailsSettingsPage() {
   }, [
     editProjectDetailsTx,
     projectForm,
-    refetchProjectMetadata,
     projectMetadata,
   ])
 
@@ -90,8 +87,7 @@ export function ProjectDetailsSettingsPage() {
       coverImageUri: projectMetadata?.coverImageUri ?? '',
       description: projectMetadata?.description ?? '',
       projectTagline: projectMetadata?.projectTagline ?? '',
-      projectRequiredOFACCheck:
-        projectMetadata?.projectRequiredOFACCheck ?? false,
+      projectRequiredOFACCheck: false, // OFAC not supported in V4 yet
       twitter: projectMetadata?.twitter ?? '',
       discord,
       telegram,
@@ -107,7 +103,6 @@ export function ProjectDetailsSettingsPage() {
     projectMetadata?.coverImageUri,
     projectMetadata?.description,
     projectMetadata?.projectTagline,
-    projectMetadata?.projectRequiredOFACCheck,
     projectMetadata?.twitter,
     projectMetadata?.discord,
     projectMetadata?.telegram,

src/packages/v4/views/V4ProjectSettings/ProjectSettingsContent.tsx

@@ -5,6 +5,7 @@ import { Button, Layout } from 'antd'
 import Link from 'next/link'
 import { useMemo } from 'react'
 import { twJoin } from 'tailwind-merge'
+import { ArchiveProjectSettingsPage } from './ArchiveProjectSettingsPage'
 import { CreateErc20TokenSettingsPage } from './CreateErc20TokenSettingsPage'
 import { EditCyclePage } from './EditCyclePage/EditCyclePage'
 import { useSettingsPagePath } from './hooks/useSettingsPagePath'
@@ -16,14 +17,14 @@ const SettingsPageComponents: {
   [k in SettingsPageKey]: () => JSX.Element | null
 } = {
   general: ProjectDetailsSettingsPage,
-  handle: () => null, //ProjectHandleSettingsPage,
+  // handle: () => null, //ProjectHandleSettingsPage,
   cycle: EditCyclePage,
   // nfts: () => null, //EditNftsPage,
   payouts: () => null, //PayoutsSettingsPage,
-  reservedtokens: () => null, //ReservedTokensSettingsPage,
-  transferownership: () => null, //TransferOwnershipSettingsPage,
-  archiveproject: () => null, //ArchiveProjectSettingsPage,
-  heldfees: () => null, //ProcessHeldFeesPage,
+  // reservedtokens: () => null, //ReservedTokensSettingsPage,
+  // transferownership: () => null, //TransferOwnershipSettingsPage,
+  archiveproject: ArchiveProjectSettingsPage,
+  // heldfees: () => null, //ProcessHeldFeesPage,
   createerc20: CreateErc20TokenSettingsPage,
 }
 
@@ -33,14 +34,14 @@ const V4SettingsPageKeyTitleMap = (
   [k in SettingsPageKey]: string
 } => ({
   general: t`General`,
-  handle: t`Project handle`,
+  // handle: t`Project handle`,
   cycle: t`Cycle configuration`,
   payouts: t`Payouts`,
-  reservedtokens: t`Reserved token recipients`,
+  // reservedtokens: t`Reserved token recipients`,
   // nfts: hasExistingNfts ? t`Edit NFT collection` : t`Launch New NFT Collection`,
-  transferownership: t`Transfer ownership`,
+  // transferownership: t`Transfer ownership`,
   archiveproject: t`Archive project`,
-  heldfees: t`Process held fees`,
+  // heldfees: t`Process held fees`,
   createerc20: t`Create ERC-20 token`,
 })
 

src/packages/v4/views/V4ProjectSettings/ProjectSettingsDashboard.tsx

@@ -14,14 +14,14 @@ import { useSettingsPagePath } from './hooks/useSettingsPagePath'
 
 export type SettingsPageKey =
   | 'general'
-  | 'handle'
+  // | 'handle' -> commenting out not necessary for v4
   | 'cycle'
   // | 'nfts'
   | 'payouts'
-  | 'reservedtokens'
-  | 'transferownership'
+  // | 'reservedtokens'
+  // | 'transferownership'
   | 'archiveproject'
-  | 'heldfees'
+  // | 'heldfees'
   | 'createerc20'
 
 function SettingsCard({ children }: { children: React.ReactNode }) {
@@ -146,6 +146,11 @@ export function ProjectSettingsDashboard() {
                   <Trans>Basic details</Trans>
                 </Link>
               </li>
+              <li>
+                <Link href={useSettingsPagePath('archiveproject')}>
+                  <Trans>Archive</Trans>
+                </Link>
+              </li>
               {/* <li>
                 <Link href={useSettingsPagePath('handle')}>
                   <Trans>Project handle</Trans>
@@ -155,13 +160,13 @@ export function ProjectSettingsDashboard() {
           </SettingsGroupCard>
 
           <SettingsGroupCard
-            title={<Trans>Cycle configuration</Trans>}
+            title={<Trans>Ruleset configuration</Trans>}
             subtitle={
-              <Trans>Make changes to your cycle settings and rules</Trans>
+              <Trans>Make changes to your ruleset settings and rules</Trans>
             }
           >
             <Link href={useSettingsPagePath('cycle')}>
-              <Trans>Edit next cycle</Trans>
+              <Trans>Edit next ruleset</Trans>
             </Link>
           </SettingsGroupCard>
           <SettingsGroupCard
@@ -176,14 +181,14 @@ export function ProjectSettingsDashboard() {
                   </Link>
                 </li>
               )}
-              <li>
+              {/* <li>
                 <Link href={useSettingsPagePath('heldfees')}>
                   <Trans>Process held fees</Trans>
                 </Link>
-              </li>
+              </li> */}
             </ul>
           </SettingsGroupCard>
-          <SettingsGroupCard
+          {/* <SettingsGroupCard
             title={<Trans>Manage</Trans>}
             subtitle={<Trans>Manage your project's state and ownership</Trans>}
           >
@@ -193,13 +198,8 @@ export function ProjectSettingsDashboard() {
                   <Trans>Transfer ownership</Trans>
                 </Link>
               </li>
-              <li>
-                <Link href={useSettingsPagePath('archiveproject')}>
-                  <Trans>Archive</Trans>
-                </Link>
-              </li>
             </ul>
-          </SettingsGroupCard>
+          </SettingsGroupCard> */}
         </div>
       </section>
     </ProjectSettingsLayout>