fix: change networks logic

Author: aeolianeth

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,
   })

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"