feat: use native currency symbol on v4 NFT forms

src/components/NftRewards/AddNftCollectionForm/AddNftCollectionForm.tsx

@@ -1,18 +1,19 @@
-import { RightOutlined } from '@ant-design/icons'
-import { Trans, t } from '@lingui/macro'
 import { Form, FormInstance } from 'antd'
-import ExternalLink from 'components/ExternalLink'
-import TooltipLabel from 'components/TooltipLabel'
-import { JuiceInput } from 'components/inputs/JuiceTextInput'
 import { NftPostPayModalConfig, NftRewardTier } from 'models/nftRewards'
+import { Trans, t } from '@lingui/macro'
+
 import { CreateCollapse } from 'packages/v2v3/components/Create/components/CreateCollapse/CreateCollapse'
-import { OptionalHeader } from 'packages/v2v3/components/Create/components/OptionalHeader'
-import { useLockPageRulesWrapper } from 'packages/v2v3/components/Create/hooks/useLockPageRulesWrapper'
-import { NftRewardsData } from 'redux/slices/shared/v2ProjectTypes'
-import { inputMustExistRule } from 'utils/antdRules'
-import { RewardsList } from '../RewardsList/RewardsList'
+import ExternalLink from 'components/ExternalLink'
+import { JuiceInput } from 'components/inputs/JuiceTextInput'
 import { NftAdvancedFormItems } from './NftAdvancedFormItems'
 import { NftPaymentSuccessFormItems } from './NftPaymentSuccessFormItems'
+import { NftRewardsData } from 'redux/slices/shared/v2ProjectTypes'
+import { OptionalHeader } from 'packages/v2v3/components/Create/components/OptionalHeader'
+import { RewardsList } from '../RewardsList/RewardsList'
+import { RightOutlined } from '@ant-design/icons'
+import TooltipLabel from 'components/TooltipLabel'
+import { inputMustExistRule } from 'utils/antdRules'
+import { useLockPageRulesWrapper } from 'packages/v2v3/components/Create/hooks/useLockPageRulesWrapper'
 
 export type NftRewardsFormProps = Partial<{
   rewards: NftRewardTier[]
@@ -33,13 +34,15 @@ export const AddNftCollectionForm = ({
   nftRewardsData,
   okButton,
   onFinish,
+  priceCurrencySymbol
 }: {
   form: FormInstance<NftRewardsFormProps>
   initialValues?: NftRewardsFormProps
   postPayModalData: NftPostPayModalConfig | undefined
   nftRewardsData: NftRewardsData
   okButton: React.ReactNode
   onFinish?: VoidFunction
+  priceCurrencySymbol: string
 }) => {
   const lockPageRulesWrapper = useLockPageRulesWrapper()
 
@@ -58,7 +61,7 @@ export const AddNftCollectionForm = ({
       >
         <div className="flex flex-col gap-6">
           <Form.Item noStyle name="rewards">
-            <RewardsList allowCreate nftRewardsData={nftRewardsData} />
+            <RewardsList allowCreate nftRewardsData={nftRewardsData} priceCurrencySymbol={priceCurrencySymbol} />
           </Form.Item>
 
           {hasNfts && (

src/components/NftRewards/RewardsList/AddEditRewardModal.tsx

@@ -1,35 +1,35 @@
-import { QuestionCircleOutlined } from '@ant-design/icons'
-import { t, Trans } from '@lingui/macro'
 import { Form, Modal, Tooltip } from 'antd'
-import InputAccessoryButton from 'components/buttons/InputAccessoryButton'
-import { WarningCallout } from 'components/Callout/WarningCallout'
-import { EthAddressInput } from 'components/inputs/EthAddressInput'
-import FormattedNumberInput from 'components/inputs/FormattedNumberInput'
-import { JuiceSwitch } from 'components/inputs/JuiceSwitch'
-import { JuiceTextArea } from 'components/inputs/JuiceTextArea'
-import { JuiceInput } from 'components/inputs/JuiceTextInput'
-import PrefixedInput from 'components/inputs/PrefixedInput'
 import { NftFileType, UploadNoStyle } from 'components/inputs/UploadNoStyle'
-import { VIDEO_FILE_TYPES } from 'constants/fileTypes'
-import { pinFile } from 'lib/api/ipfs'
-import random from 'lodash/random'
-import { NftRewardTier } from 'models/nftRewards'
-import { CreateCollapse } from 'packages/v2v3/components/Create/components/CreateCollapse/CreateCollapse'
-import { OptionalHeader } from 'packages/v2v3/components/Create/components/OptionalHeader'
-import { DEFAULT_NFT_MAX_SUPPLY } from 'packages/v2v3/constants/nftRewards'
-import { V2V3_CURRENCY_USD } from 'packages/v2v3/utils/currency'
-import { UploadRequestOption } from 'rc-upload/lib/interface'
-import { useCallback, useEffect, useLayoutEffect, useState } from 'react'
-import { NftRewardsData } from 'redux/slices/shared/v2ProjectTypes'
+import { Trans, t } from '@lingui/macro'
 import {
   inputIsIntegerRule,
   inputIsValidUrlRule,
   inputMustBeEthAddressRule,
   inputMustExistRule,
   inputNonZeroRule,
 } from 'utils/antdRules'
-import { withHttps } from 'utils/externalLink'
+import { useCallback, useEffect, useLayoutEffect, useState } from 'react'
+
+import { CreateCollapse } from 'packages/v2v3/components/Create/components/CreateCollapse/CreateCollapse'
+import { DEFAULT_NFT_MAX_SUPPLY } from 'packages/v2v3/constants/nftRewards'
+import { EthAddressInput } from 'components/inputs/EthAddressInput'
+import FormattedNumberInput from 'components/inputs/FormattedNumberInput'
+import InputAccessoryButton from 'components/buttons/InputAccessoryButton'
+import { JuiceInput } from 'components/inputs/JuiceTextInput'
+import { JuiceSwitch } from 'components/inputs/JuiceSwitch'
+import { JuiceTextArea } from 'components/inputs/JuiceTextArea'
+import { NftRewardTier } from 'models/nftRewards'
+import { NftRewardsData } from 'redux/slices/shared/v2ProjectTypes'
+import { OptionalHeader } from 'packages/v2v3/components/Create/components/OptionalHeader'
+import PrefixedInput from 'components/inputs/PrefixedInput'
+import { QuestionCircleOutlined } from '@ant-design/icons'
+import { UploadRequestOption } from 'rc-upload/lib/interface'
+import { VIDEO_FILE_TYPES } from 'constants/fileTypes'
+import { WarningCallout } from 'components/Callout/WarningCallout'
 import { ipfsGatewayUrl } from 'utils/ipfs'
+import { pinFile } from 'lib/api/ipfs'
+import random from 'lodash/random'
+import { withHttps } from 'utils/externalLink'
 
 interface AddEditRewardModalFormProps {
   fileUrl: string
@@ -56,6 +56,7 @@ export const NEW_NFT_ID_LOWER_LIMIT = 1000000
 
 export const AddEditRewardModal = ({
   className,
+  currencySymbol,
   editingData,
   nftRewards,
   open,
@@ -64,6 +65,7 @@ export const AddEditRewardModal = ({
   withEditWarning = false,
 }: {
   className?: string
+  currencySymbol: string
   editingData?: NftRewardTier | undefined
   nftRewards: NftRewardsData
   open?: boolean
@@ -247,7 +249,7 @@ export const AddEditRewardModal = ({
           <FormattedNumberInput
             accessory={
               <InputAccessoryButton
-                content={nftCurrency === V2V3_CURRENCY_USD ? 'USD' : 'ETH'}
+                content={currencySymbol}
               />
             }
           />

src/components/NftRewards/RewardsList/RewardItem.tsx

@@ -1,18 +1,18 @@
 import { DeleteOutlined, EditOutlined, LinkOutlined } from '@ant-design/icons'
 import { Trans, t } from '@lingui/macro'
+
 import EthereumAddress from 'components/EthereumAddress'
 import ExternalLink from 'components/ExternalLink'
 import { JuiceVideoThumbnailOrImage } from 'components/JuiceVideo/JuiceVideoThumbnailOrImage'
-import TooltipLabel from 'components/TooltipLabel'
-import round from 'lodash/round'
 import { NftRewardTier } from 'models/nftRewards'
-import { V2V3_CURRENCY_USD } from 'packages/v2v3/utils/currency'
-import { ReactNode } from 'react'
 import { NftRewardsData } from 'redux/slices/shared/v2ProjectTypes'
-import { isZeroAddress } from 'utils/address'
+import { ReactNode } from 'react'
+import { RewardItemButton } from './RewardItemButton'
+import TooltipLabel from 'components/TooltipLabel'
 import { hasLimitedSupply } from 'utils/nftRewards'
+import { isZeroAddress } from 'utils/address'
 import { prettyUrl } from 'utils/url'
-import { RewardItemButton } from './RewardItemButton'
+import round from 'lodash/round'
 
 const SIGNIFICANT_FIGURE_LIMIT = 6
 
@@ -29,11 +29,13 @@ function numberUpToPrecisionFormat(
 export const RewardItem = ({
   reward,
   nftRewards,
+  priceCurrencySymbol,
   onEditClicked,
   onDeleteClicked,
 }: {
   reward: NftRewardTier
   nftRewards: NftRewardsData
+  priceCurrencySymbol: string
   onEditClicked?: () => void
   onDeleteClicked?: () => void
 }) => {
@@ -97,9 +99,7 @@ export const RewardItem = ({
           <div className="grid grid-cols-2 gap-y-6 gap-x-16">
             <RewardStatLine
               title={t`Minimum contribution`}
-              stat={`${numberUpToPrecisionFormat(contributionFloor)} ${
-                nftCurrency === V2V3_CURRENCY_USD ? 'USD' : 'ETH'
-              }`}
+              stat={`${numberUpToPrecisionFormat(contributionFloor)} ${priceCurrencySymbol}`}
             />
             {hasLimitedSupply(maxSupply) && (
               <RewardStatLine

src/components/NftRewards/RewardsList/RewardsList.tsx

@@ -1,16 +1,17 @@
-import { PlusCircleOutlined } from '@ant-design/icons'
-import { Trans } from '@lingui/macro'
-import { Divider } from 'antd'
+import { createContext, useCallback, useContext, useState } from 'react'
+
+import { AddEditRewardModal } from './AddEditRewardModal'
 import { CreateButton } from 'components/buttons/CreateButton/CreateButton'
-import { useModal } from 'hooks/useModal'
+import { Divider } from 'antd'
 import { FormItemInput } from 'models/formItemInput'
-import { NftRewardTier } from 'models/nftRewards'
 import { MAX_NFT_REWARD_TIERS } from 'packages/v2v3/constants/nftRewards'
-import { createContext, useCallback, useContext, useState } from 'react'
+import { NftRewardTier } from 'models/nftRewards'
 import { NftRewardsData } from 'redux/slices/shared/v2ProjectTypes'
-import { sortNftsByContributionFloor } from 'utils/nftRewards'
-import { AddEditRewardModal } from './AddEditRewardModal'
+import { PlusCircleOutlined } from '@ant-design/icons'
 import { RewardItem } from './RewardItem'
+import { Trans } from '@lingui/macro'
+import { sortNftsByContributionFloor } from 'utils/nftRewards'
+import { useModal } from 'hooks/useModal'
 import { useRewards } from './hooks/useRewards'
 
 const RewardsListContext = createContext<ReturnType<typeof useRewards>>({
@@ -34,6 +35,7 @@ type RewardsListProps = FormItemInput<NftRewardTier[]> & {
   allowCreate?: boolean
   withEditWarning?: boolean
   nftRewardsData: NftRewardsData
+  priceCurrencySymbol: string
 }
 
 interface RewardsListChildrenExports {
@@ -44,6 +46,7 @@ interface RewardsListChildrenExports {
 export const RewardsList: React.FC<React.PropsWithChildren<RewardsListProps>> &
   RewardsListChildrenExports = ({
   allowCreate = false,
+  priceCurrencySymbol,
   value,
   onChange,
   withEditWarning,
@@ -82,6 +85,7 @@ export const RewardsList: React.FC<React.PropsWithChildren<RewardsListProps>> &
               <div key={reward.id}>
                 <RewardItem
                   nftRewards={nftRewardsData}
+                  priceCurrencySymbol={priceCurrencySymbol}
                   reward={reward}
                   onEditClicked={() => {
                     setSelectedReward(reward)
@@ -112,6 +116,7 @@ export const RewardsList: React.FC<React.PropsWithChildren<RewardsListProps>> &
         )}
       </div>
       <AddEditRewardModal
+        priceCurrencySymbol={priceCurrencySymbol}
         open={modal.visible}
         editingData={selectedReward}
         nftRewards={nftRewardsData}

src/packages/v2v3/components/Create/components/pages/NftRewards/NftRewardsPage.tsx

@@ -1,12 +1,13 @@
 import { AddNftCollectionForm } from 'components/NftRewards/AddNftCollectionForm/AddNftCollectionForm'
 import { CREATE_FLOW } from 'constants/fathomEvents'
+import { PageContext } from '../../Wizard/contexts/PageContext'
+import { V2V3_CURRENCY_USD } from 'packages/v2v3/utils/currency'
+import { Wizard } from '../../Wizard/Wizard'
 import { trackFathomGoal } from 'lib/fathom'
-import { useContext } from 'react'
 import { useAppSelector } from 'redux/hooks/useAppSelector'
-import { useSetCreateFurthestPageReached } from 'redux/hooks/useEditingCreateFurthestPageReached'
-import { Wizard } from '../../Wizard/Wizard'
-import { PageContext } from '../../Wizard/contexts/PageContext'
+import { useContext } from 'react'
 import { useCreateFlowNftRewardsForm } from './hooks/useCreateFlowNftRewardsForm'
+import { useSetCreateFurthestPageReached } from 'redux/hooks/useEditingCreateFurthestPageReached'
 
 export function NftRewardsPage() {
   const { goToNextPage } = useContext(PageContext)
@@ -22,9 +23,12 @@ export function NftRewardsPage() {
 
   useSetCreateFurthestPageReached('nftRewards')
 
+  const nftCurrency = nftRewardsData?.pricing.currency
+
   return (
     <AddNftCollectionForm
       form={form}
+      priceCurrencySymbol={nftCurrency === V2V3_CURRENCY_USD ? 'USD' : 'ETH'}
       initialValues={initialValues}
       postPayModalData={postPayModalData}
       nftRewardsData={nftRewardsData}

src/packages/v2v3/components/Create/components/pages/ReviewDeploy/components/RewardsReview/RewardsReview.tsx

@@ -1,13 +1,15 @@
-import { t } from '@lingui/macro'
-import { RewardsList } from 'components/NftRewards/RewardsList/RewardsList'
-import { NftRewardTier } from 'models/nftRewards'
 import { useCallback, useMemo } from 'react'
-import { useAppDispatch } from 'redux/hooks/useAppDispatch'
-import { useAppSelector } from 'redux/hooks/useAppSelector'
+
+import { NftRewardTier } from 'models/nftRewards'
+import { ReviewDescription } from '../ReviewDescription'
+import { RewardsList } from 'components/NftRewards/RewardsList/RewardsList'
+import { V2V3_CURRENCY_USD } from 'packages/v2v3/utils/currency'
 import { creatingV2ProjectActions } from 'redux/slices/creatingV2Project'
 import { formatEnabled } from 'utils/format/formatBoolean'
+import { t } from '@lingui/macro'
+import { useAppDispatch } from 'redux/hooks/useAppDispatch'
+import { useAppSelector } from 'redux/hooks/useAppSelector'
 import { v4 } from 'uuid'
-import { ReviewDescription } from '../ReviewDescription'
 
 export const RewardsReview = () => {
   const { nftRewards: nftRewardsData, fundingCycleMetadata } = useAppSelector(
@@ -65,9 +67,12 @@ export const RewardsReview = () => {
     return formatEnabled(nftRewardsData.flags.preventOverspending)
   }, [nftRewardsData.flags.preventOverspending])
 
+  const nftCurrency = nftRewardsData?.pricing.currency
+
   return (
     <div className="flex flex-col gap-12">
       <RewardsList
+        priceCurrencySymbol={nftCurrency === V2V3_CURRENCY_USD ? 'USD' : 'ETH'}
         nftRewardsData={nftRewardsData}
         value={rewards}
         onChange={setRewards}

src/packages/v2v3/components/V2V3Project/V2V3ProjectSettings/pages/EditNftsPage/LaunchNftCollection/LaunchNftsCollection.tsx

@@ -1,9 +1,10 @@
-import { Trans } from '@lingui/macro'
-import { Button } from 'antd'
 import { AddNftCollectionForm } from 'components/NftRewards/AddNftCollectionForm/AddNftCollectionForm'
+import { Button } from 'antd'
+import { Trans } from '@lingui/macro'
 import TransactionModal from 'components/modals/TransactionModal'
-import { useAppSelector } from 'redux/hooks/useAppSelector'
 import { TransactionSuccessModal } from '../../../TransactionSuccessModal'
+import { V2V3_CURRENCY_USD } from 'packages/v2v3/utils/currency'
+import { useAppSelector } from 'redux/hooks/useAppSelector'
 import { useLaunchNftsForm } from './hooks/useLaunchNftsForm'
 
 export function LaunchNftsPage() {
@@ -23,10 +24,13 @@ export function LaunchNftsPage() {
     state => state.creatingV2Project.nftRewards,
   )
 
+  const nftCurrency = nftRewardsData?.pricing.currency
+
   return (
     <>
       <AddNftCollectionForm
         form={form}
+        priceCurrencySymbol={nftCurrency === V2V3_CURRENCY_USD ? 'USD' : 'ETH'}
         postPayModalData={postPayModalData}
         nftRewardsData={nftRewardsData}
         okButton={

src/packages/v2v3/components/V2V3Project/V2V3ProjectSettings/pages/EditNftsPage/UpdateNftsPage/EditNftsSection.tsx

@@ -1,17 +1,19 @@
-import { t, Trans } from '@lingui/macro'
 import { Button, Empty } from 'antd'
+import { Trans, t } from '@lingui/macro'
+import { useCallback, useState } from 'react'
+
 import { Callout } from 'components/Callout/Callout'
 import Loading from 'components/Loading'
-import TransactionModal from 'components/modals/TransactionModal'
 import { RewardsList } from 'components/NftRewards/RewardsList/RewardsList'
-import { useUpdateCurrentCollection } from 'packages/v2v3/components/V2V3Project/V2V3ProjectSettings/pages/EditNftsPage/hooks/useUpdateCurrentCollection'
-import { useHasNftRewards } from 'packages/v2v3/hooks/JB721Delegate/useHasNftRewards'
-import { useCallback, useState } from 'react'
+import TransactionModal from 'components/modals/TransactionModal'
+import { TransactionSuccessModal } from '../../../TransactionSuccessModal'
+import { V2V3_CURRENCY_USD } from 'packages/v2v3/utils/currency'
 import { useAppSelector } from 'redux/hooks/useAppSelector'
 import { useEditingFundingCycleConfig } from '../../../hooks/useEditingFundingCycleConfig'
-import { useReconfigureFundingCycle } from '../../../hooks/useReconfigureFundingCycle'
-import { TransactionSuccessModal } from '../../../TransactionSuccessModal'
 import { useEditingNfts } from '../hooks/useEditingNfts'
+import { useHasNftRewards } from 'packages/v2v3/hooks/JB721Delegate/useHasNftRewards'
+import { useReconfigureFundingCycle } from '../../../hooks/useReconfigureFundingCycle'
+import { useUpdateCurrentCollection } from 'packages/v2v3/components/V2V3Project/V2V3ProjectSettings/pages/EditNftsPage/hooks/useUpdateCurrentCollection'
 
 export function EditNftsSection() {
   const nftRewardsData = useAppSelector(
@@ -60,6 +62,8 @@ export function EditNftsSection() {
 
   const hasDataSourceButNoNfts = hasNftRewards && !rewardTiers
 
+  const nftCurrency = nftRewardsData?.pricing.currency
+
   return (
     <>
       <Callout.Info className="text-primary mb-5 bg-smoke-100 dark:bg-slate-500">
@@ -68,6 +72,7 @@ export function EditNftsSection() {
 
       <div className="mb-8">
         <RewardsList
+          priceCurrencySymbol={nftCurrency === V2V3_CURRENCY_USD ? 'USD' : 'ETH'}
           nftRewardsData={nftRewardsData}
           value={rewardTiers}
           onChange={setRewardTiers}