V4 nft forms currency symbol [2/n]

src/components/NftRewards/AddNftCollectionForm/AddNftCollectionForm.tsx

@@ -34,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()
 
@@ -59,7 +61,11 @@ 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,5 +1,5 @@
 import { QuestionCircleOutlined } from '@ant-design/icons'
-import { t, Trans } from '@lingui/macro'
+import { Trans, t } from '@lingui/macro'
 import { Form, Modal, Tooltip } from 'antd'
 import InputAccessoryButton from 'components/buttons/InputAccessoryButton'
 import { WarningCallout } from 'components/Callout/WarningCallout'
@@ -17,7 +17,6 @@ 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'
@@ -56,6 +55,7 @@ export const NEW_NFT_ID_LOWER_LIMIT = 1000000
 
 export const AddEditRewardModal = ({
   className,
+  currencySymbol,
   editingData,
   nftRewards,
   open,
@@ -64,6 +64,7 @@ export const AddEditRewardModal = ({
   withEditWarning = false,
 }: {
   className?: string
+  currencySymbol: string
   editingData?: NftRewardTier | undefined
   nftRewards: NftRewardsData
   open?: boolean
@@ -245,11 +246,7 @@ export const AddEditRewardModal = ({
           rules={[inputMustExistRule({ label: t`Minimum Contribution` })]}
         >
           <FormattedNumberInput
-            accessory={
-              <InputAccessoryButton
-                content={nftCurrency === V2V3_CURRENCY_USD ? 'USD' : 'ETH'}
-              />
-            }
+            accessory={<InputAccessoryButton content={currencySymbol} />}
           />
         </Form.Item>
         <Form.Item>

src/components/NftRewards/RewardsList/RewardItem.tsx

@@ -6,7 +6,6 @@ import { JuiceVideoThumbnailOrImage } from 'components/JuiceVideo/JuiceVideoThum
 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'
@@ -29,11 +28,13 @@ function numberUpToPrecisionFormat(
 export const RewardItem = ({
   reward,
   nftRewards,
+  priceCurrencySymbol,
   onEditClicked,
   onDeleteClicked,
 }: {
   reward: NftRewardTier
   nftRewards: NftRewardsData
+  priceCurrencySymbol: string
   onEditClicked?: () => void
   onDeleteClicked?: () => void
 }) => {
@@ -97,9 +98,9 @@ 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

@@ -10,8 +10,8 @@ import { createContext, useCallback, useContext, useState } from 'react'
 import { NftRewardsData } from 'redux/slices/shared/v2ProjectTypes'
 import { sortNftsByContributionFloor } from 'utils/nftRewards'
 import { AddEditRewardModal } from './AddEditRewardModal'
-import { RewardItem } from './RewardItem'
 import { useRewards } from './hooks/useRewards'
+import { RewardItem } from './RewardItem'
 
 const RewardsListContext = createContext<ReturnType<typeof useRewards>>({
   rewards: [],
@@ -34,6 +34,7 @@ type RewardsListProps = FormItemInput<NftRewardTier[]> & {
   allowCreate?: boolean
   withEditWarning?: boolean
   nftRewardsData: NftRewardsData
+  priceCurrencySymbol: string
 }
 
 interface RewardsListChildrenExports {
@@ -44,6 +45,7 @@ interface RewardsListChildrenExports {
 export const RewardsList: React.FC<React.PropsWithChildren<RewardsListProps>> &
   RewardsListChildrenExports = ({
   allowCreate = false,
+  priceCurrencySymbol,
   value,
   onChange,
   withEditWarning,
@@ -82,6 +84,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 +115,7 @@ export const RewardsList: React.FC<React.PropsWithChildren<RewardsListProps>> &
         )}
       </div>
       <AddEditRewardModal
+        currencySymbol={priceCurrencySymbol}
         open={modal.visible}
         editingData={selectedReward}
         nftRewards={nftRewardsData}

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

@@ -1,11 +1,12 @@
 import { AddNftCollectionForm } from 'components/NftRewards/AddNftCollectionForm/AddNftCollectionForm'
 import { CREATE_FLOW } from 'constants/fathomEvents'
 import { trackFathomGoal } from 'lib/fathom'
+import { V2V3_CURRENCY_USD } from 'packages/v2v3/utils/currency'
 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 { Wizard } from '../../Wizard/Wizard'
 import { useCreateFlowNftRewardsForm } from './hooks/useCreateFlowNftRewardsForm'
 
 export function NftRewardsPage() {
@@ -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,6 +1,7 @@
 import { t } from '@lingui/macro'
 import { RewardsList } from 'components/NftRewards/RewardsList/RewardsList'
 import { NftRewardTier } from 'models/nftRewards'
+import { V2V3_CURRENCY_USD } from 'packages/v2v3/utils/currency'
 import { useCallback, useMemo } from 'react'
 import { useAppDispatch } from 'redux/hooks/useAppDispatch'
 import { useAppSelector } from 'redux/hooks/useAppSelector'
@@ -65,9 +66,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}

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

@@ -1,11 +1,13 @@
 import { AddNftCollectionForm } from 'components/NftRewards/AddNftCollectionForm/AddNftCollectionForm'
 import { CREATE_FLOW } from 'constants/fathomEvents'
+import { JBChainId, NATIVE_TOKEN_SYMBOLS } from 'juice-sdk-core'
 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 { useChainId } from 'wagmi'
 import { PageContext } from '../../Wizard/contexts/PageContext'
+import { Wizard } from '../../Wizard/Wizard'
 import { useCreateFlowNftRewardsForm } from './hooks/useCreateFlowNftRewardsForm'
 
 export function NftRewardsPage() {
@@ -22,13 +24,16 @@ export function NftRewardsPage() {
 
   useSetCreateFurthestPageReached('nftRewards')
 
+  const chainId = useChainId()
+
   return (
     <AddNftCollectionForm
       form={form}
       initialValues={initialValues}
       postPayModalData={postPayModalData}
       nftRewardsData={nftRewardsData}
       okButton={<Wizard.Page.ButtonControl />}
+      priceCurrencySymbol={NATIVE_TOKEN_SYMBOLS[chainId as JBChainId]}
       onFinish={() => {
         goToNextPage?.()
         trackFathomGoal(CREATE_FLOW.NFT_NEXT_CTA)

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

@@ -1,12 +1,14 @@
 import { t } from '@lingui/macro'
 import { RewardsList } from 'components/NftRewards/RewardsList/RewardsList'
+import { JBChainId, NATIVE_TOKEN_SYMBOLS } from 'juice-sdk-core'
 import { NftRewardTier } from 'models/nftRewards'
 import { useCallback, useMemo } from 'react'
 import { useAppDispatch } from 'redux/hooks/useAppDispatch'
 import { useAppSelector } from 'redux/hooks/useAppSelector'
 import { creatingV2ProjectActions } from 'redux/slices/creatingV2Project'
 import { formatEnabled } from 'utils/format/formatBoolean'
 import { v4 } from 'uuid'
+import { useChainId } from 'wagmi'
 import { ReviewDescription } from '../ReviewDescription'
 
 export const RewardsReview = () => {
@@ -65,9 +67,12 @@ export const RewardsReview = () => {
     return formatEnabled(nftRewardsData.flags.preventOverspending)
   }, [nftRewardsData.flags.preventOverspending])
 
+  const chainId = useChainId()
+
   return (
     <div className="flex flex-col gap-12">
       <RewardsList
+        priceCurrencySymbol={NATIVE_TOKEN_SYMBOLS[chainId as JBChainId]}
         nftRewardsData={nftRewardsData}
         value={rewards}
         onChange={setRewards}