From 039429146922cef52c2582a816a455068452a1c7 Mon Sep 17 00:00:00 2001 From: Johnny D Date: Sat, 9 Sep 2023 15:10:42 +1000 Subject: [PATCH] Edit NFTs [2/2]: Edit NFTs post-pay modal data (#4056) --- .../RewardsList/AddEditRewardModal.tsx | 3 +- .../pages/NftRewards/AddNftCollectionForm.tsx | 109 +----------------- .../pages/NftRewards/NftAdvancedFormItems.tsx | 26 +++++ .../NftRewards/NftPaymentSuccessFormItems.tsx | 100 ++++++++++++++++ .../pages/EditNftsPage/EditNftsPage.tsx | 4 +- ...seEditingNfts.tsx.ts => useEditingNfts.ts} | 0 .../pages/NewEditNftsPage/EditNftsPage.tsx | 8 +- .../EnableNftsCard.tsx | 2 +- .../EnableNftsModal.tsx | 0 .../LaunchNftsCollection.tsx} | 0 .../UploadAndLaunchNftsButton.tsx | 4 +- .../LaunchNftCollection/index.tsx | 1 + .../EditCollectionDetailsSection.tsx | 4 +- .../EditNftsPostPaySection.tsx | 91 +++++++++++++++ .../useEditNftsPostPayForm.ts | 24 ++++ .../UpdateNftsPage}/EditNftsSection.tsx | 2 +- .../UpdateNftsPage/UpdateNftsPage.tsx} | 9 +- .../NewEditNftsPage/UpdateNftsPage/index.tsx | 1 + src/locales/messages.pot | 6 + 19 files changed, 274 insertions(+), 120 deletions(-) create mode 100644 src/components/Create/components/pages/NftRewards/NftAdvancedFormItems.tsx create mode 100644 src/components/Create/components/pages/NftRewards/NftPaymentSuccessFormItems.tsx rename src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/EditNftsPage/hooks/{useEditingNfts.tsx.ts => useEditingNfts.ts} (100%) rename src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/{ => LaunchNftCollection}/EnableNftsCard.tsx (94%) rename src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/{ => LaunchNftCollection}/EnableNftsModal.tsx (100%) rename src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/{LaunchNftsPage.tsx => LaunchNftCollection/LaunchNftsCollection.tsx} (100%) rename src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/{ => LaunchNftCollection}/UploadAndLaunchNftsButton.tsx (93%) create mode 100644 src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/LaunchNftCollection/index.tsx rename src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/{EditNftsPage => NewEditNftsPage/UpdateNftsPage}/EditCollectionDetailsSection.tsx (93%) create mode 100644 src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/UpdateNftsPage/EditNftsPostPaySection/EditNftsPostPaySection.tsx create mode 100644 src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/UpdateNftsPage/EditNftsPostPaySection/useEditNftsPostPayForm.ts rename src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/{EditNftsPage => NewEditNftsPage/UpdateNftsPage}/EditNftsSection.tsx (97%) rename src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/{EditNftsPage/EditNftsTabs.tsx => NewEditNftsPage/UpdateNftsPage/UpdateNftsPage.tsx} (65%) create mode 100644 src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/UpdateNftsPage/index.tsx diff --git a/src/components/Create/components/RewardsList/AddEditRewardModal.tsx b/src/components/Create/components/RewardsList/AddEditRewardModal.tsx index e4a548db69..9070bedd72 100644 --- a/src/components/Create/components/RewardsList/AddEditRewardModal.tsx +++ b/src/components/Create/components/RewardsList/AddEditRewardModal.tsx @@ -233,12 +233,11 @@ export const AddEditRewardModal = ({ rules={[inputMustExistRule({ label: t`Minimum Contribution` })]} > } /> -
+
state.editingV2Project.nftRewards.postPayModal, - ) - const hasNfts = !!Form.useWatch('rewards', form)?.length return ( @@ -170,74 +157,7 @@ export const AddNftCollectionForm = ({ header={} hideDivider > -
-

- - Show your supporters a pop-up with a message and a link - after they receive an NFT. You can use this to direct - supporters to your project's website, a Discord server, - or somewhere else. - -

- - The message that will be shown to supporters after - they receive an NFT. - - } - /> - } - > - - - - The text on the button at the bottom of the - pop-up. You can preview this below. - - } - /> - } - > - - - - Supporters will be sent to this page if they click - the button on your pop-up. You can preview this - below. - - } - /> - } - extra={t`If you leave this blank, the button will close the pop-up.`} - > - - - } - onClick={postPayModal.open} - > - Preview - -
+ } hideDivider > - - - - - - +
@@ -277,14 +186,6 @@ export const AddNftCollectionForm = ({
- - {postPayModalData && ( - - )} ) } diff --git a/src/components/Create/components/pages/NftRewards/NftAdvancedFormItems.tsx b/src/components/Create/components/pages/NftRewards/NftAdvancedFormItems.tsx new file mode 100644 index 0000000000..e035f83fae --- /dev/null +++ b/src/components/Create/components/pages/NftRewards/NftAdvancedFormItems.tsx @@ -0,0 +1,26 @@ +import { t } from '@lingui/macro' +import { Form } from 'antd' +import { JuiceSwitch } from 'components/inputs/JuiceSwitch' +import { + PREVENT_OVERSPENDING_EXPLANATION, + USE_DATASOURCE_FOR_REDEEM_EXPLANATION, +} from 'components/strings' + +export function NftAdvancedFormItems() { + return ( + <> + + + + + + + + ) +} diff --git a/src/components/Create/components/pages/NftRewards/NftPaymentSuccessFormItems.tsx b/src/components/Create/components/pages/NftRewards/NftPaymentSuccessFormItems.tsx new file mode 100644 index 0000000000..b22f35cab1 --- /dev/null +++ b/src/components/Create/components/pages/NftRewards/NftPaymentSuccessFormItems.tsx @@ -0,0 +1,100 @@ +import { EyeOutlined } from '@ant-design/icons' +import { Trans, t } from '@lingui/macro' +import { Form } from 'antd' +import { NftPostPayModal } from 'components/NftRewards/NftPostPayModal' +import TooltipLabel from 'components/TooltipLabel' +import { CreateButton } from 'components/buttons/CreateButton' +import { JuiceTextArea } from 'components/inputs/JuiceTextArea' +import { JuiceInput } from 'components/inputs/JuiceTextInput' +import { useModal } from 'hooks/useModal' +import { useAppSelector } from 'redux/hooks/useAppSelector' + +export function NftPaymentSuccessFormItems({ + hidePreview, +}: { + hidePreview?: boolean +}) { + const postPayModal = useModal() + const postPayModalData = useAppSelector( + state => state.editingV2Project.nftRewards.postPayModal, + ) + return ( + <> +
+

+ + Show your supporters a pop-up with a message and a link after they + receive an NFT. You can use this to direct supporters to your + project's website, a Discord server, or somewhere else. + +

+ + The message that will be shown to supporters after they + receive an NFT. + + } + /> + } + > + + + + The text on the button at the bottom of the pop-up. You can + preview this below. + + } + /> + } + > + + + + Supporters will be sent to this page if they click the button + on your pop-up. You can preview this below. + + } + /> + } + extra={t`If you leave this blank, the button will close the pop-up.`} + > + + + {hidePreview ? null : ( + } + onClick={postPayModal.open} + > + Preview + + )} +
+ {postPayModalData && ( + + )} + + ) +} diff --git a/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/EditNftsPage/EditNftsPage.tsx b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/EditNftsPage/EditNftsPage.tsx index 3007660961..dbe37a62f4 100644 --- a/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/EditNftsPage/EditNftsPage.tsx +++ b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/EditNftsPage/EditNftsPage.tsx @@ -8,7 +8,7 @@ import Image from 'next/image' import Link from 'next/link' import { useContext } from 'react' import { settingsPagePath } from 'utils/routes' -import { EditNftsTabs } from './EditNftsTabs' +import { UpdateNftsPage } from '../NewEditNftsPage/UpdateNftsPage' import blueberry from '/public/assets/images/blueberry-ol.png' export function EditNftsPage() { @@ -61,5 +61,5 @@ export function EditNftsPage() { ) } - return + return } diff --git a/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/EditNftsPage/hooks/useEditingNfts.tsx.ts b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/EditNftsPage/hooks/useEditingNfts.ts similarity index 100% rename from src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/EditNftsPage/hooks/useEditingNfts.tsx.ts rename to src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/EditNftsPage/hooks/useEditingNfts.ts diff --git a/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/EditNftsPage.tsx b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/EditNftsPage.tsx index ededc40b4d..740c39789a 100644 --- a/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/EditNftsPage.tsx +++ b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/EditNftsPage.tsx @@ -4,9 +4,9 @@ import { V2V3ProjectContext } from 'contexts/v2v3/Project/V2V3ProjectContext' import { useNftDeployerCanReconfigure } from 'hooks/JB721Delegate/contractReader/useNftDeployerCanReconfigure' import { useHasNftRewards } from 'hooks/JB721Delegate/useHasNftRewards' import { useContext } from 'react' -import { EditNftsTabs } from '../EditNftsPage/EditNftsTabs' -import { EnableNftsCard } from './EnableNftsCard' -import { LaunchNftsPage } from './LaunchNftsPage' +import { EnableNftsCard } from './LaunchNftCollection/EnableNftsCard' +import { LaunchNftsPage } from './LaunchNftCollection/LaunchNftsCollection' +import { UpdateNftsPage } from './UpdateNftsPage' export function EditNftsPage() { const { projectId } = useContext(ProjectMetadataContext) @@ -22,7 +22,7 @@ export function EditNftsPage() { return } if (hasExistingNfts) { - return + return } else if (!nftDeployerCanReconfigure) { return } else { diff --git a/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/EnableNftsCard.tsx b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/LaunchNftCollection/EnableNftsCard.tsx similarity index 94% rename from src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/EnableNftsCard.tsx rename to src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/LaunchNftCollection/EnableNftsCard.tsx index 25ad82fd00..c8ab9b2eed 100644 --- a/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/EnableNftsCard.tsx +++ b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/LaunchNftCollection/EnableNftsCard.tsx @@ -9,7 +9,7 @@ export function EnableNftsCard() { const [enableNftsModalOpen, setEnableNftsModalOpen] = useState(false) return ( <> -
+
{`No { const [form] = useForm() diff --git a/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/UpdateNftsPage/EditNftsPostPaySection/EditNftsPostPaySection.tsx b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/UpdateNftsPage/EditNftsPostPaySection/EditNftsPostPaySection.tsx new file mode 100644 index 0000000000..0e89354040 --- /dev/null +++ b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/UpdateNftsPage/EditNftsPostPaySection/EditNftsPostPaySection.tsx @@ -0,0 +1,91 @@ +import { Trans } from '@lingui/macro' +import { Button, Form } from 'antd' +import { NftPaymentSuccessFormItems } from 'components/Create/components/pages/NftRewards/NftPaymentSuccessFormItems' +import { PV_V2 } from 'constants/pv' +import { ProjectMetadataContext } from 'contexts/shared/ProjectMetadataContext' +import { useEditProjectDetailsTx } from 'hooks/v2v3/transactor/useEditProjectDetailsTx' +import { uploadProjectMetadata } from 'lib/api/ipfs' +import { revalidateProject } from 'lib/api/nextjs' +import { useCallback, useContext, useState } from 'react' +import { emitInfoNotification } from 'utils/notifications' +import { + EditNftsPostPayFormFields, + useEditNftsPostPayForm, +} from './useEditNftsPostPayForm' + +export function EditNftsPostPaySection() { + const [loading, setLoading] = useState() + const { projectMetadata, refetchProjectMetadata, projectId } = useContext( + ProjectMetadataContext, + ) + const { form, initialValues } = useEditNftsPostPayForm() + + const editProjectDetailsTx = useEditProjectDetailsTx() + + const onProjectFormSaved = useCallback(async () => { + setLoading(true) + + const fields: EditNftsPostPayFormFields = form.getFieldsValue(true) + const uploadedMetadata = await uploadProjectMetadata({ + ...projectMetadata, + nftPaymentSuccessModal: { + ctaText: fields.postPayButtonText, + ctaLink: fields.postPayButtonLink, + content: fields.postPayMessage, + }, + }) + + if (!uploadedMetadata.Hash) { + setLoading(false) + return + } + + const txSuccess = await editProjectDetailsTx( + { + cid: uploadedMetadata.Hash, + }, + { + onConfirmed: async () => { + setLoading(false) + + emitInfoNotification('NFT post-pay data changed', { + description: 'Your new NFT post-pay has been saved.', + }) + + if (projectId) { + await revalidateProject({ + pv: PV_V2, + projectId: String(projectId), + }) + } + refetchProjectMetadata() + }, + onError: () => { + setLoading(false) + }, + onCancelled: () => { + setLoading(false) + }, + }, + ) + + if (!txSuccess) { + setLoading(false) + } + }, [ + editProjectDetailsTx, + form, + projectMetadata, + projectId, + refetchProjectMetadata, + ]) + + return ( +
+ + + + ) +} diff --git a/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/UpdateNftsPage/EditNftsPostPaySection/useEditNftsPostPayForm.ts b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/UpdateNftsPage/EditNftsPostPaySection/useEditNftsPostPayForm.ts new file mode 100644 index 0000000000..b921ea3e23 --- /dev/null +++ b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/UpdateNftsPage/EditNftsPostPaySection/useEditNftsPostPayForm.ts @@ -0,0 +1,24 @@ +import { Form } from 'antd' +import { ProjectMetadataContext } from 'contexts/shared/ProjectMetadataContext' +import { useContext } from 'react' + +export interface EditNftsPostPayFormFields { + postPayMessage: string | undefined + postPayButtonText: string | undefined + postPayButtonLink: string | undefined +} + +export const useEditNftsPostPayForm = () => { + const { projectMetadata } = useContext(ProjectMetadataContext) + const [form] = Form.useForm() + + const initialValues: EditNftsPostPayFormFields = { + postPayMessage: projectMetadata?.nftPaymentSuccessModal?.content, + postPayButtonText: projectMetadata?.nftPaymentSuccessModal?.ctaText, + postPayButtonLink: projectMetadata?.nftPaymentSuccessModal?.ctaLink, + } + return { + form, + initialValues, + } +} diff --git a/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/EditNftsPage/EditNftsSection.tsx b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/UpdateNftsPage/EditNftsSection.tsx similarity index 97% rename from src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/EditNftsPage/EditNftsSection.tsx rename to src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/UpdateNftsPage/EditNftsSection.tsx index d0e4b9ee46..e61124cb5b 100644 --- a/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/EditNftsPage/EditNftsSection.tsx +++ b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/UpdateNftsPage/EditNftsSection.tsx @@ -7,7 +7,7 @@ import { useUpdateCurrentCollection } from 'components/v2v3/V2V3Project/V2V3Proj import { useHasNftRewards } from 'hooks/JB721Delegate/useHasNftRewards' import { useCallback, useState } from 'react' -import { useEditingNfts } from './hooks/useEditingNfts.tsx' +import { useEditingNfts } from '../../EditNftsPage/hooks/useEditingNfts' export function EditNftsSection() { const [submitLoading, setSubmitLoading] = useState(false) diff --git a/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/EditNftsPage/EditNftsTabs.tsx b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/UpdateNftsPage/UpdateNftsPage.tsx similarity index 65% rename from src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/EditNftsPage/EditNftsTabs.tsx rename to src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/UpdateNftsPage/UpdateNftsPage.tsx index 071cc0cbf5..07b8545546 100644 --- a/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/EditNftsPage/EditNftsTabs.tsx +++ b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/UpdateNftsPage/UpdateNftsPage.tsx @@ -1,9 +1,10 @@ import { t } from '@lingui/macro' import { Tabs } from 'antd' import { EditCollectionDetailsSection } from './EditCollectionDetailsSection' +import { EditNftsPostPaySection } from './EditNftsPostPaySection/EditNftsPostPaySection' import { EditNftsSection } from './EditNftsSection' -export function EditNftsTabs() { +export function UpdateNftsPage() { const items = [ { label: t`NFTs`, key: 'nfts', children: }, { @@ -11,7 +12,11 @@ export function EditNftsTabs() { key: 'collection', children: , }, - // TODO: add advanced tab + { + label: t`Post-pay popup`, + key: 'post-pay', + children: , + }, ] return diff --git a/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/UpdateNftsPage/index.tsx b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/UpdateNftsPage/index.tsx new file mode 100644 index 0000000000..009d19ecd3 --- /dev/null +++ b/src/components/v2v3/V2V3Project/V2V3ProjectSettings/pages/NewEditNftsPage/UpdateNftsPage/index.tsx @@ -0,0 +1 @@ +export * from './UpdateNftsTabs' diff --git a/src/locales/messages.pot b/src/locales/messages.pot index f3bacdfd41..60d8f2429a 100644 --- a/src/locales/messages.pot +++ b/src/locales/messages.pot @@ -1511,6 +1511,9 @@ msgstr "" msgid "Current" msgstr "" +msgid "Save post-pay popup" +msgstr "" + msgid "Next cycle, the project will issue {0} tokens per 1 ETH. The cycle after that, the project will issue {1} tokens per 1 ETH." msgstr "" @@ -4478,6 +4481,9 @@ msgstr "" msgid "Percentage to reserve" msgstr "" +msgid "Post-pay popup" +msgstr "" + msgid "All assets" msgstr ""