Merge pull request #4566 from jbx-protocol/dev

Release: 21-12-24

Author: aeolianeth

package.json

@@ -106,8 +106,8 @@
     "graphql": "^16.8.1",
     "he": "^1.2.0",
     "jsonwebtoken": "^9.0.0",
-    "juice-sdk-core": "^11.5.0-alpha",
-    "juice-sdk-react": "^11.6.0-alpha",
+    "juice-sdk-core": "^12.2.4-alpha",
+    "juice-sdk-react": "^12.2.4-alpha",
     "juicebox-metadata-helper": "0.1.7",
     "less": "4.1.2",
     "lodash": "^4.17.21",

src/components/NftRewards/AddNftCollectionForm/AddNftCollectionForm.tsx

@@ -9,7 +9,7 @@ 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 { useLockPageRulesWrapper } from 'packages/v2v3/components/Create/hooks/useLockPageRulesWrapper'
-import { NftRewardsData } from 'redux/slices/shared/v2ProjectTypes'
+import { NftRewardsData } from 'redux/slices/v2v3/shared/v2ProjectTypes'
 import { inputMustExistRule } from 'utils/antdRules'
 import { RewardsList } from '../RewardsList/RewardsList'
 import { NftAdvancedFormItems } from './NftAdvancedFormItems'
@@ -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,10 +17,9 @@ 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 { NftRewardsData } from 'redux/slices/v2v3/shared/v2ProjectTypes'
 import {
   inputIsIntegerRule,
   inputIsValidUrlRule,
@@ -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,9 +6,8 @@ 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 { NftRewardsData } from 'redux/slices/v2v3/shared/v2ProjectTypes'
 import { isZeroAddress } from 'utils/address'
 import { hasLimitedSupply } from 'utils/nftRewards'
 import { prettyUrl } from 'utils/url'
@@ -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

@@ -7,11 +7,11 @@ 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 { NftRewardsData } from 'redux/slices/shared/v2ProjectTypes'
+import { NftRewardsData } from 'redux/slices/v2v3/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/components/formItems/ProjectDiscountRate.tsx

@@ -3,7 +3,7 @@ import { Form, Switch } from 'antd'
 import FormItemLabel from 'components/FormItemLabel'
 import FormItemWarningText from 'components/FormItemWarningText'
 import { DISCOUNT_RATE_EXPLANATION } from 'components/strings'
-import { DEFAULT_FUNDING_CYCLE_DATA } from 'redux/slices/shared/v2ProjectDefaultState'
+import { DEFAULT_FUNDING_CYCLE_DATA } from 'redux/slices/v2v3/shared/v2ProjectDefaultState'
 import NumberSlider from '../inputs/NumberSlider'
 import { FormItemExt } from './formItemExt'
 

src/components/formItems/ProjectReserved.tsx

@@ -15,7 +15,7 @@ import { useState } from 'react'
 import {
   DEFAULT_FUNDING_CYCLE_METADATA,
   DEFAULT_MINT_RATE,
-} from 'redux/slices/shared/v2ProjectDefaultState'
+} from 'redux/slices/v2v3/shared/v2ProjectDefaultState'
 import { formattedNum } from 'utils/format/formatNumber'
 import NumberSlider from '../inputs/NumberSlider'
 import FundingCycleDetailWarning from '../Project/FundingCycleDetailWarning'

src/hooks/ContractReader/useContractReadValue.ts

@@ -57,13 +57,11 @@ export function useContractReadValue<C extends string, V>({
       const newValue = _formatter(result)
 
       if (_valueDidChange(value, newValue)) {
-        console.info(
-          `📗 New >`,
-          functionName,
-          { args },
-          { newValue },
-          { contract: readContract?.address },
-        )
+        console.info(`📗 New >`, functionName, {
+          args,
+          newValue,
+          contract: readContract?.address,
+        })
         setValue(newValue)
       }
     } catch (err) {

src/hooks/ContractReader/util/useCallContractRead.ts

@@ -19,16 +19,13 @@ export async function callContractRead<T extends string>({
   try {
     console.info(`📚 Read >`, functionName)
     return await readContract[functionName](...(args ?? []))
-  } catch (err) {
-    console.error(
-      `📕 Read error >`,
-      functionName,
-      { args },
-      { err },
-      { contract: readContract.address },
-      { contracts },
-    )
+  } catch (error) {
+    console.error(`📕 Read error >`, functionName, error, {
+      args,
+      contract: readContract.address,
+      contracts,
+    })
 
-    throw err
+    throw error
   }
 }

src/hooks/Wallet/hooks/useChainUnsupported.ts

@@ -1,13 +1,13 @@
 import { useSetChain } from '@web3-onboard/react'
 import { readNetwork } from 'constants/networks'
-import { useCurrentRouteChainId } from 'packages/v4/hooks/useCurrentRouteChainId'
+import { useJBChainId } from 'juice-sdk-react'
 import { useMemo } from 'react'
 
 export function useChainUnsupported() {
   const [{ connectedChain }] = useSetChain()
 
   // get v4 chain id
-  const chainId = useCurrentRouteChainId()
+  const chainId = useJBChainId()
 
   const chainUnsupported = useMemo(() => {
     if (!connectedChain) {