fix: change networks logic

package.json

@@ -107,7 +107,7 @@
     "he": "^1.2.0",
     "jsonwebtoken": "^9.0.0",
     "juice-sdk-core": "^12.2.4-alpha",
-    "juice-sdk-react": "^12.2.4-alpha",
+    "juice-sdk-react": "^12.2.5-alpha",
     "juicebox-metadata-helper": "0.1.7",
     "less": "4.1.2",
     "lodash": "^4.17.21",

src/hooks/ContractReader/useContractReader.ts

@@ -16,7 +16,7 @@ export interface ContractReaderProps<ContractName extends string, V> {
 }
 
 export function useContractReader<ContractName extends string, V>({
-  contract,
+  contract, // name of the contract
   contracts,
   functionName,
   args,

src/hooks/ContractReader/util/useCallContractRead.ts

@@ -17,7 +17,7 @@ export async function callContractRead<T extends string>({
   contracts?: Record<T, Contract> | undefined
 }) {
   try {
-    console.info(`📚 Read >`, functionName)
+    console.info(`📚 Read >`, functionName, { contract: readContract, args })
     return await readContract[functionName](...(args ?? []))
   } catch (error) {
     console.error(`📕 Read error >`, functionName, error, {

src/hooks/Wallet/hooks/useChangeNetworks.ts

@@ -3,6 +3,10 @@ import { useCallback } from 'react'
 
 import { readNetwork } from 'constants/networks'
 
+/**
+ * Attempts to sync the user wallet's chain with the readNetwork (hard-coded per environment)
+ * @returns function to sync the user wallet's chain with the readNetwork
+ */
 export function useChangeNetworks() {
   const [{ chains }, setChain] = useSetChain()
 

src/hooks/Wallet/hooks/useSigner.ts

@@ -7,14 +7,20 @@ export function useSigner() {
   const [{ wallet }] = useConnectWallet()
   const chainUnsupported = useChainUnsupported()
   const signerProvider = useMemo(() => {
-    if (!wallet) return undefined
+    if (!wallet) {
+      return undefined
+    }
+
     return new providers.Web3Provider(wallet.provider, 'any')
   }, [wallet])
 
   const signer = useMemo(() => {
     // If the provider is not available or the chain is unsupported, we
     // shouldn't attempt to do anything
-    if (!signerProvider || chainUnsupported) return undefined
+    if (!signerProvider || chainUnsupported) {
+      return undefined
+    }
+
     return signerProvider.getSigner()
   }, [chainUnsupported, signerProvider])
 

src/hooks/Wallet/useWallet.ts

@@ -1,11 +1,12 @@
 import {
   useChain,
+  useChainUnsupported,
   useChangeNetworks,
   useDisconnect,
   useIsConnected,
   useSigner,
   useUserAddress,
-  useWalletBalance
+  useWalletBalance,
 } from './hooks'
 
 import { useConnectWallet } from '@web3-onboard/react'
@@ -15,7 +16,7 @@ export function useWallet() {
   const userAddress = useUserAddress()
   const isConnected = useIsConnected()
   const chain = useChain()
-  const chainUnsupported = false //useChainUnsupported()
+  const chainUnsupported = useChainUnsupported()
   const balance = useWalletBalance()
 
   const [, connect] = useConnectWallet()

src/hooks/useTransactor.ts

@@ -1,13 +1,17 @@
 import { t } from '@lingui/macro'
 import { FEATURE_FLAGS } from 'constants/featureFlags'
+import { readNetwork } from 'constants/networks'
 import { TxHistoryContext } from 'contexts/Transaction/TxHistoryContext'
 import { Contract, providers } from 'ethers'
 import { simulateTransaction } from 'lib/tenderly'
 import { TransactionOptions } from 'models/transaction'
 import { CV2V3 } from 'packages/v2v3/models/cv'
 import { useCallback, useContext } from 'react'
 import { featureFlagEnabled } from 'utils/featureFlags'
-import { emitErrorNotification } from 'utils/notifications'
+import {
+  emitErrorNotification,
+  emitInfoNotification,
+} from 'utils/notifications'
 import { useWallet } from './Wallet'
 
 type TxOpts = Omit<TransactionOptions, 'value'>
@@ -91,6 +95,9 @@ export function useTransactor(): Transactor | undefined {
     ) => {
       if (chainUnsupported) {
         await changeNetworks()
+        emitInfoNotification(
+          t`Your wallet has been changed to ${readNetwork.name}. Try transaction again.`,
+        )
         options?.onDone?.()
         return false
       }

src/locales/messages.pot

@@ -2228,6 +2228,9 @@ msgstr ""
 msgid "Redeem your {tokensLabel} to reclaim a portion of the ETH not needed for payouts. Any {tokensLabel} you redeem will be burned."
 msgstr ""
 
+msgid "Your wallet has been changed to {0}. Try transaction again."
+msgstr ""
+
 msgid "<0>{tokenSymbol} ERC-20 address:</0> <1/>"
 msgstr ""
 

src/packages/v2v3/components/V2V3Project/ProjectDashboard/components/PayRedeemCard/PayProjectModal/hooks/usePayProjectModal/usePayProjectTx.ts

@@ -137,7 +137,10 @@ export const usePayProjectTx = ({
         )
         if (!success) {
           onTransactionErrorCallback(
-            onError ?? new Error('Transaction failed'),
+            onError ??
+              new Error(
+                'Payment failed. Make sure your wallet has funds, is set to the correct chain (e.g. mainnet) and try again. If problems persist, click "Reset Website".',
+              ),
             formikHelpers,
           )
         }

src/packages/v2v3/hooks/contractReader/useProjectControllerAddress.ts

@@ -1,16 +1,13 @@
-import { ContractConfig } from 'hooks/ContractReader/types'
 import { V2V3ContractName } from 'packages/v2v3/models/contracts'
 import useV2ContractReader from './useV2ContractReader'
 
 export default function useProjectControllerAddress({
   projectId,
-  contract,
 }: {
-  projectId?: number
-  contract?: ContractConfig<V2V3ContractName> | undefined
+  projectId: number | undefined
 }) {
   return useV2ContractReader<string>({
-    contract: contract ?? V2V3ContractName.JBDirectory,
+    contract: V2V3ContractName.JBDirectory,
     functionName: 'controllerOf',
     args: projectId ? [projectId] : null,
   })

src/packages/v4/views/V4ProjectDashboard/V4ProjectHeader.tsx

@@ -74,7 +74,7 @@ export const V4ProjectHeader = ({ className }: { className?: string }) => {
                   ))}
               </div>
               <ProjectHeaderPopupMenu projectId={projectId} />
-              {canQueueRuleSets && (
+              {canQueueRuleSets && chainId && (
                 <Link
                   href={settingsPagePath({ projectId, chainId }, undefined)}
                   legacyBehavior
@@ -127,7 +127,7 @@ export const V4ProjectHeader = ({ className }: { className?: string }) => {
                 <Trans>
                   Owned by: <EthereumAddress address={owner} />
                 </Trans>
-                {gnosisSafe && projectId && (
+                {gnosisSafe && projectId && chainId && (
                   <GnosisSafeBadge
                     safe={gnosisSafe}
                     href={`${v4ProjectRoute({ projectId, chainId })}/safe`}

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

@@ -1,21 +1,21 @@
-import { Button, Layout } from 'antd'
 import { Trans, t } from '@lingui/macro'
+import { Button, Layout } from 'antd'
 
-import { ArchiveProjectSettingsPage } from './ArchiveProjectSettingsPage'
-import { ArrowLeftIcon } from '@heroicons/react/24/outline'
 import { ChevronRightIcon } from '@heroicons/react/20/solid'
+import { ArrowLeftIcon } from '@heroicons/react/24/outline'
+import { useJBRulesetContext } from 'juice-sdk-react'
+import Link from 'next/link'
+import { useMemo } from 'react'
+import { twJoin } from 'tailwind-merge'
+import { isZeroAddress } from 'utils/address'
+import { ArchiveProjectSettingsPage } from './ArchiveProjectSettingsPage'
 import { CreateErc20TokenSettingsPage } from './CreateErc20TokenSettingsPage'
 import { EditCyclePage } from './EditCyclePage/EditCyclePage'
 import { EditNftsPage } from './EditNftsPage/EditNftsPage'
-import Link from 'next/link'
+import { useSettingsPagePath } from './hooks/useSettingsPagePath'
 import { ProjectDetailsSettingsPage } from './ProjectDetailsSettingsPage/ProjectDetailsSettingsPage'
-import { ProjectSettingsLayout } from './ProjectSettingsLayout'
 import { SettingsPageKey } from './ProjectSettingsDashboard'
-import { isZeroAddress } from 'utils/address'
-import { twJoin } from 'tailwind-merge'
-import { useJBRulesetContext } from 'juice-sdk-react'
-import { useMemo } from 'react'
-import { useSettingsPagePath } from './hooks/useSettingsPagePath'
+import { ProjectSettingsLayout } from './ProjectSettingsLayout'
 
 const SettingsPageComponents: {
   [k in SettingsPageKey]: () => JSX.Element | null
@@ -62,7 +62,7 @@ function Breadcrumbs({
     <ul className={twJoin('flex items-center gap-2 text-sm', className)}>
       <li>
         <Link
-          href={useSettingsPagePath()}
+          href={useSettingsPagePath() ?? ''}
           className="text-secondary flex items-center gap-2 font-medium"
         >
           <Trans>Manage</Trans>
@@ -73,7 +73,7 @@ function Breadcrumbs({
 
       <li>
         <Link
-          href={useSettingsPagePath(settingsPageKey)}
+          href={useSettingsPagePath(settingsPageKey) ?? ''}
           className="font-medium"
         >
           <Trans>{pageTitle}</Trans>
@@ -105,7 +105,7 @@ export function ProjectSettingsContent({
         className="mb-7"
         settingsPageKey={settingsPageKey}
       />
-      <Link href={useSettingsPagePath()}>
+      <Link href={useSettingsPagePath() ?? ''}>
         <Button type="default" className="mb-7 px-3" size="small">
           <ArrowLeftIcon className="h-4 w-4" />
         </Button>

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

@@ -4,19 +4,19 @@ import {
   useJBProjectMetadataContext,
 } from 'juice-sdk-react'
 
+import { Trans } from '@lingui/macro'
 import { Button } from 'antd'
 import EthereumAddress from 'components/EthereumAddress'
-import Link from 'next/link'
 import Loading from 'components/Loading'
-import { ProjectSettingsLayout } from './ProjectSettingsLayout'
-import { Trans } from '@lingui/macro'
-import { V4OperatorPermission } from 'packages/v4/models/v4Permissions'
+import Link from 'next/link'
 import { useProjectHasErc20Token } from 'packages/v4/hooks/useProjectHasErc20Token'
-import useProjectOwnerOf from 'packages/v4/hooks/useV4ProjectOwnerOf'
-import { useSettingsPagePath } from './hooks/useSettingsPagePath'
 import { useV4BalanceOfNativeTerminal } from 'packages/v4/hooks/useV4BalanceOfNativeTerminal'
-import { useV4DistributableAmount } from '../V4ProjectDashboard/V4ProjectTabs/V4CyclesPayoutsPanel/hooks/useV4DistributableAmount'
+import useProjectOwnerOf from 'packages/v4/hooks/useV4ProjectOwnerOf'
 import { useV4WalletHasPermission } from 'packages/v4/hooks/useV4WalletHasPermission'
+import { V4OperatorPermission } from 'packages/v4/models/v4Permissions'
+import { useV4DistributableAmount } from '../V4ProjectDashboard/V4ProjectTabs/V4CyclesPayoutsPanel/hooks/useV4DistributableAmount'
+import { useSettingsPagePath } from './hooks/useSettingsPagePath'
+import { ProjectSettingsLayout } from './ProjectSettingsLayout'
 
 export type SettingsPageKey =
   | 'general'
@@ -146,12 +146,12 @@ export function ProjectSettingsDashboard() {
           >
             <ul>
               <li>
-                <Link href={useSettingsPagePath('general')}>
+                <Link href={useSettingsPagePath('general') ?? ''}>
                   <Trans>Basic details</Trans>
                 </Link>
               </li>
               <li>
-                <Link href={useSettingsPagePath('archiveproject')}>
+                <Link href={useSettingsPagePath('archiveproject') ?? ''}>
                   <Trans>Archive</Trans>
                 </Link>
               </li>
@@ -169,7 +169,7 @@ export function ProjectSettingsDashboard() {
               <Trans>Make changes to your ruleset settings and rules</Trans>
             }
           >
-            <Link href={useSettingsPagePath('cycle')}>
+            <Link href={useSettingsPagePath('cycle') ?? ''}>
               <Trans>Edit next ruleset</Trans>
             </Link>
           </SettingsGroupCard>
@@ -179,7 +179,7 @@ export function ProjectSettingsDashboard() {
           >
             <ul>
               <li>
-                <Link href={useSettingsPagePath('nfts')}>
+                <Link href={useSettingsPagePath('nfts') ?? ''}>
                   <Trans>NFTs</Trans>
                 </Link>
               </li>
@@ -192,7 +192,7 @@ export function ProjectSettingsDashboard() {
             <ul>
               {canCreateErc20Token && (
                 <li>
-                  <Link href={erc20Path}>
+                  <Link href={erc20Path ?? ''}>
                     <Trans>Create ERC-20 Token</Trans>
                   </Link>
                 </li>

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

@@ -18,13 +18,14 @@ export const ProjectSettingsLayout: React.FC<React.PropsWithChildren> = ({
             <Cog6ToothIcon className="h-6 w-6" />
             <Trans>Manage project</Trans>
           </h1>
-
-          <Link
-            href={v4ProjectRoute({ projectId: Number(projectId), chainId })}
-            className="text-secondary"
-          >
-            <XMarkIcon className="h-6 w-6" />
-          </Link>
+          {chainId ? (
+            <Link
+              href={v4ProjectRoute({ projectId: Number(projectId), chainId })}
+              className="text-secondary"
+            >
+              <XMarkIcon className="h-6 w-6" />
+            </Link>
+          ) : null}
         </div>
       </header>
 

src/packages/v4/views/V4ProjectSettings/hooks/useSettingsPagePath.ts

@@ -5,6 +5,9 @@ import { SettingsPageKey } from '../ProjectSettingsDashboard'
 export function useSettingsPagePath(key?: SettingsPageKey) {
   const { projectId } = useJBContractContext()
   const chainId = useJBChainId()
+  if (!chainId || !projectId) {
+    return undefined
+  }
 
   return settingsPagePath({ projectId: Number(projectId), chainId }, key)
 }

yarn.lock

@@ -12186,10 +12186,10 @@ juice-sdk-core@^12.2.4-alpha:
     bs58 "^5.0.0"
     fpnum "^1.0.0"
 
-juice-sdk-react@^12.2.4-alpha:
-  version "12.2.4-alpha"
-  resolved "https://registry.yarnpkg.com/juice-sdk-react/-/juice-sdk-react-12.2.4-alpha.tgz#2d53d1296d7d0817c3a7dda75b99570df12661f2"
-  integrity sha512-SX/WvlCANpgS568Ohdf7q+yC2jLY4vTUUGjgmZD2XUgCZTbfPorgUbZ4pxWwWgtfxydq6vyoPHcUUjWItMEPWw==
+juice-sdk-react@^12.2.5-alpha:
+  version "12.2.5-alpha"
+  resolved "https://registry.yarnpkg.com/juice-sdk-react/-/juice-sdk-react-12.2.5-alpha.tgz#399a1a2d9a8c7142739bf5578dd2cf9d1b4b75b5"
+  integrity sha512-lZnWIBVvo8xwwCQwyhkmvETxIOFP1vwrmekUihwZaPsbzyvrWekvPk7YkgfEWk2W4wClt13g2i9so24vYz2DEQ==
 
 juice@^10.0.0:
   version "10.0.0"