Create alias for ethers6 to add backwards compatibility for ethers5. …

…Load imx contracts from NetworkContext

README.md

@@ -71,6 +71,16 @@ We use [pnpm](https://pnpm.io/) to manage dependencies.
 pnpm install
 ```
 
+### Add dependencies
+
+Please install dependencies only where they're used.
+
+To add a dependency to a specific app directory use `--filter`
+
+```
+pnpm add PACKAGE_NAME --filter=DIRECTORY_NAME
+```
+
 ### Build
 
 To build all apps and packages, run the following command:

apps/app/.env.example

@@ -1,6 +1,6 @@
 # ===========================|| WalletConnect ||========================== 
 
-NEXT_PUBLIC_NETWORK=mainnet # mainnet | sepolia | hardhat 
+NEXT_PUBLIC_NETWORK=mainnet # mainnet | sepolia | hardhat
 
 NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=xxxxx
 

apps/app/package.json

@@ -30,7 +30,8 @@
     "bnc-sdk": "^4.6.9",
     "date-fns": "^3.6.0",
     "eth-rpc-errors": "^4.0.3",
-    "ethers": "^6.13.2",
+    "ethers": "^5.7.2",
+    "ethers6": "npm:ethers@^6.13.2",
     "framer-motion": "^11.5.6",
     "graphql": "^16.9.0",
     "graphql-request": "^7.1.0",

apps/app/src/app/(private-routes)/dashboard/degens/_dialogs/RenameDegenDialogContent.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useCallback, useEffect, useState } from 'react';
-import { parseEther, type AddressLike } from 'ethers';
+import { parseEther, type AddressLike } from 'ethers6';
 import {
   DialogTitle,
   DialogContent,

apps/app/src/app/(private-routes)/dashboard/items/burner/page.tsx

@@ -4,7 +4,7 @@ import { useCallback, useContext, useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { Button } from '@mui/material';
 
-import { type AddressLike } from 'ethers';
+import { type AddressLike } from 'ethers6';
 import IMXContext from '@/contexts/IMXContext';
 import useNetworkContext from '@/hooks/useNetworkContext';
 import { COMICS_BURNER_CONTRACT, COMICS_CONTRACT } from '@/constants/contracts';

apps/app/src/app/(private-routes)/dashboard/overview/_MyNFTL/DepositForm.tsx

@@ -6,7 +6,7 @@ import { useTheme } from '@nl/theme';
 import { useEffect, useState, useContext } from 'react';
 import { Controller, SubmitHandler, useForm } from 'react-hook-form';
 import { NumericFormat } from 'react-number-format';
-import { type TransactionResponse, parseEther, formatEther, type AddressLike } from 'ethers';
+import { type TransactionResponse, parseEther, formatEther, type AddressLike } from 'ethers6';
 import useNetworkContext from '@/hooks/useNetworkContext';
 import { GAME_ACCOUNT_CONTRACT, NFTL_CONTRACT } from '@/constants/contracts';
 import { DialogContext } from '@/components/dialog';

apps/app/src/app/(private-routes)/dashboard/overview/_MyNFTL/RefreshBalanceForm.tsx

@@ -19,7 +19,7 @@ import LoadingButton from '@mui/lab/LoadingButton';
 import ReplayIcon from '@mui/icons-material/Replay';
 import { useContext, useEffect, useState } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
-import { parseEther } from 'ethers';
+import { parseEther } from 'ethers6';
 import { DialogContext } from '@/components/dialog';
 import useWithdrawalHistory from '@/hooks/useWithdrawalHistory';
 import useContractReader from '@/hooks/useContractReader';

apps/app/src/app/(private-routes)/dashboard/overview/_MyNFTL/WithdrawForm.tsx

@@ -17,7 +17,7 @@ import {
 } from '@mui/material';
 import { useTheme } from '@nl/theme';
 import LoadingButton from '@mui/lab/LoadingButton';
-import { type TransactionResponse } from 'ethers';
+import { type TransactionResponse } from 'ethers6';
 import { useState, useContext, useEffect } from 'react';
 import { Controller, SubmitHandler, useForm } from 'react-hook-form';
 import { NumericFormat } from 'react-number-format';

apps/app/src/app/(private-routes)/dashboard/overview/_MyNFTL/index.tsx

@@ -5,7 +5,7 @@ import { useRouter } from 'next/navigation';
 import { Grid2, Button, Stack, Skeleton, IconButton, Typography } from '@mui/material';
 import HistoryIcon from '@mui/icons-material/History';
 import { useTheme, sectionSpacing } from '@nl/theme';
-import { type TransactionResponse, parseEther } from 'ethers';
+import { type TransactionResponse, parseEther } from 'ethers6';
 
 import SectionTitle from '@/components/sections/SectionTitle';
 import HoverDataCard from '@/components/cards/HoverDataCard';

apps/app/src/app/(public-routes)/raffle/MyNFTL.tsx

@@ -4,7 +4,7 @@ import { useState, useCallback, useEffect } from 'react';
 import { Grid2, Button, Stack, IconButton } from '@mui/material';
 import HistoryIcon from '@mui/icons-material/History';
 import { useTheme, sectionSpacing } from '@nl/theme';
-import { type TransactionResponse, parseEther } from 'ethers';
+import { type TransactionResponse, parseEther } from 'ethers6';
 
 import SectionTitle from '@/components/sections/SectionTitle';
 import HoverDataCard from '@/components/cards/HoverDataCard';

apps/app/src/app/(public-routes)/raffle/Raffle.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useCallback, useEffect, useState } from 'react';
-import { formatEther } from 'ethers';
+import { formatEther } from 'ethers6';
 import { Grid2 } from '@mui/material';
 import { useTheme, sectionSpacing } from '@nl/theme';
 import HoverDataCard from '@/components/cards/HoverDataCard';

apps/app/src/app/(public-routes)/raffle/_TicketDialog/index.tsx

@@ -13,7 +13,7 @@ import {
   TextField,
   Typography,
 } from '@mui/material';
-import { type AddressLike, parseEther } from 'ethers';
+import { type AddressLike, parseEther } from 'ethers6';
 
 import useNetworkContext from '@/hooks/useNetworkContext';
 import { submitTxWithGasEstimate } from '@/utils/bnc-notify';

apps/app/src/components/dialog/DegenDialog/CowSwapWidget.tsx

@@ -2,7 +2,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import { styled } from '@nl/theme';
 import Image from 'next/image';
-import { formatEther, parseEther, type AddressLike } from 'ethers';
+import { formatEther, parseEther, type AddressLike } from 'ethers6';
 import { OrderKind } from '@cowprotocol/cow-sdk';
 import { createOrderSwapEtherToNFTL, getCowMarketPrice, getOrderDetail } from '@/utils/cowswap';
 

apps/app/src/components/dialog/DegenDialog/RentDegenContentDialog.tsx

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { styled, useTheme } from '@nl/theme';
 import { useRouter } from 'next/navigation';
 import { toast } from 'react-toastify';
-import { isAddress } from 'ethers';
+import { isAddress } from 'ethers6';
 
 import {
   Box,

apps/app/src/constants/contracts/deployments.ts

@@ -1,4 +1,4 @@
-import type { InterfaceAbi } from 'ethers';
+import type { InterfaceAbi } from 'ethers6';
 import { mainnet, sepolia, hardhat, immutableZkEvm, immutableZkEvmTestnet } from 'viem/chains';
 
 import MAINNET_DEPLOYMENTS from './deployments.mainnet';

apps/app/src/constants/contracts/externalContracts.ts

@@ -4,7 +4,7 @@ import COMICS_MERKLE_ABI from './abis/comics-merkle-distributor.json';
 import MERKLE_ABI from './abis/merkle-distributor.json';
 import { COMICS_MERKLE_DISTRIBUTOR_ADDRESS, MERKLE_DISTRIBUTOR_ADDRESS } from '@/constants/contracts';
 import { LOCAL_CHAIN_ID } from '@/constants/networks';
-import type { InterfaceAbi } from 'ethers';
+import type { InterfaceAbi } from 'ethers6';
 
 const EXTERNAL_CONTRACTS: {
   [chainId: number]: {

apps/app/src/constants/contracts/index.ts

@@ -1,4 +1,4 @@
-import type { InterfaceAbi } from 'ethers';
+import type { InterfaceAbi } from 'ethers6';
 import type { Network } from '@/types/web3';
 import { SEPOLIA_ID, MAINNET_ID } from '../networks';
 import DEPLOYMENTS from './deployments';

apps/app/src/contexts/NetworkContext.tsx

@@ -1,13 +1,16 @@
 'use client';
 
 import { type PropsWithChildren, createContext, useEffect } from 'react';
-import { useAccount } from 'wagmi';
+import type { BrowserProvider } from 'ethers6';
+import { mainnet, immutableZkEvm, immutableZkEvmTestnet } from 'viem/chains';
 import { useWeb3ModalState } from '@web3modal/wagmi/react';
+import { useAccount } from 'wagmi';
 import isEmpty from 'lodash/isEmpty';
 
 import useContractLoader from '@/hooks/useContractLoader';
 import useEthersProvider, { type Provider } from '@/hooks/useEthersProvider';
 import useEthersSigner, { type Signer } from '@/hooks/useEthersSigner';
+import useImxProvider from '@/hooks/useImxProvider';
 import useNotify from '@/hooks/useNotify';
 
 import type { Tx } from '@/types/notify';
@@ -17,7 +20,9 @@ import { TARGET_NETWORK } from '@/constants/networks';
 
 interface NetworkContext {
   address?: `0x${string}`;
+  imxContracts: Contracts;
   isConnected: boolean;
+  passportProvider?: BrowserProvider;
   publicProvider?: Provider;
   readContracts: Contracts;
   selectedNetworkId?: number;
@@ -28,7 +33,9 @@ interface NetworkContext {
 
 const CONTEXT_INITIAL_STATE: NetworkContext = {
   address: undefined,
+  imxContracts: {} as Contracts,
   isConnected: false,
+  passportProvider: undefined,
   publicProvider: undefined,
   readContracts: {} as Contracts,
   selectedNetworkId: undefined,
@@ -47,52 +54,75 @@ export const NetworkProvider = ({ children }: PropsWithChildren): JSX.Element =>
     selectedNetworkId?: number;
   };
 
+  const passportProvider = useImxProvider();
   const publicProvider = useEthersProvider({ chainId });
   const signer = useEthersSigner({ chainId });
 
   // The Notifier wraps transactions and provides notificiations
   const tx = useNotify(signer);
 
-  // Load in your local 📝 contract and read a value from it:
+  // Load Immutable zkEVM contracts
+  const imxChainId = chainId === mainnet.id ? immutableZkEvm.id : immutableZkEvmTestnet.id;
+  const imxContracts = useContractLoader(passportProvider, { chainId: imxChainId });
+
+  // Load in your local 📝 Ethereum contracts and read a value from it:
   const readContracts = useContractLoader(publicProvider, { chainId });
 
-  // If you want to make 🔐 write transactions to your contracts, use the signer:
+  // If you want to make 🔐 write transactions to your Ethereum contracts, use the signer:
   const writeContracts = useContractLoader(signer, { chainId });
 
   useEffect(() => {
     if (
       DEBUG &&
       isConnected &&
       address &&
+      passportProvider &&
       publicProvider &&
       selectedNetworkId &&
       signer &&
       signer.address === address &&
+      !isEmpty(imxContracts) &&
       !isEmpty(readContracts) &&
       !isEmpty(writeContracts)
     ) {
       console.group('_________________ ✅ Nifty League _________________');
+      console.log('🛫 passportProvider', passportProvider);
       console.log('🌐 publicProvider', publicProvider);
       console.log('📝 signer', signer);
       console.log('👤 address:', address);
       console.log('⛓️ selectedNetworkId:', selectedNetworkId);
       console.log('📍 targetNetwork:', TARGET_NETWORK);
+      console.log('✖️ imxContracts', imxContracts);
       console.log('🔓 readContracts', readContracts);
       console.log('🔏 writeContracts', writeContracts);
       console.groupEnd();
-    } else if (DEBUG && publicProvider && !isEmpty(readContracts)) {
+    } else if (DEBUG && passportProvider && publicProvider && !isEmpty(imxContracts) && !isEmpty(readContracts)) {
       console.group('_________________ 🚫 Offline User _________________');
+      console.log('🛫 passportProvider', passportProvider);
       console.log('🌐 publicProvider', publicProvider);
       console.log('⛓️ selectedNetworkId:', selectedNetworkId);
       console.log('📍 targetNetwork:', TARGET_NETWORK);
+      console.log('✖️ imxContracts', imxContracts);
       console.log('🔓 readContracts', readContracts);
       console.groupEnd();
     }
-  }, [address, isConnected, publicProvider, readContracts, selectedNetworkId, signer, writeContracts]);
+  }, [
+    address,
+    imxContracts,
+    isConnected,
+    passportProvider,
+    publicProvider,
+    readContracts,
+    selectedNetworkId,
+    signer,
+    writeContracts,
+  ]);
 
   const context = {
     address,
+    imxContracts,
     isConnected,
+    passportProvider,
     publicProvider,
     readContracts,
     selectedNetworkId,

apps/app/src/hooks/comics/useMerkleDistributorContract.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import type { Contract, InterfaceAbi } from 'ethers';
+import type { Contract, InterfaceAbi } from 'ethers6';
 import useNetworkContext from '@/hooks/useNetworkContext';
 import { getContract } from '@/utils/ethers';
 import { COMICS_MERKLE_DISTRIBUTOR_ADDRESS } from '@/constants/contracts';

apps/app/src/hooks/comics/useUserClaimData.ts

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import { mainnet, sepolia } from 'viem/chains';
-import { getAddress, isAddress } from 'ethers';
+import { getAddress, isAddress } from 'ethers6';
 import useNetworkContext from '@/hooks/useNetworkContext';
 import { COMICS_MERKLE_ROOT } from '@/constants/contracts';
 

apps/app/src/hooks/comics/useUserUnclaimedAmount.ts

@@ -1,4 +1,4 @@
-import type { Contract } from 'ethers';
+import type { Contract } from 'ethers6';
 import type { Contracts } from '@/types/web3';
 import { DEBUG } from '@/constants/index';
 import useSingleCallResult from '@/hooks/useSingleCallResult';

apps/app/src/hooks/useClaimableNFTL.ts

@@ -1,7 +1,7 @@
 'use client';
 
 import { useMemo } from 'react';
-import { formatEther } from 'ethers';
+import { formatEther } from 'ethers6';
 import { useReadContract } from 'wagmi';
 import type { Abi } from 'viem';
 import { TARGET_NETWORK } from '@/constants/networks';

apps/app/src/hooks/useComicsBalance.ts

@@ -5,7 +5,7 @@ import useNetworkContext from '@/hooks/useNetworkContext';
 import { COMICS_CONTRACT } from '@/constants/contracts';
 import { COMICS } from '@/constants/comics';
 import type { Comic } from '@/types/comic';
-import type { AddressLike } from 'ethers';
+import type { AddressLike } from 'ethers6';
 
 /*
   ~ What it does? ~

apps/app/src/hooks/useContractLoader.ts

@@ -1,7 +1,7 @@
 'use client';
 
 import { useMemo } from 'react';
-import { Contract, JsonRpcSigner, type InterfaceAbi } from 'ethers';
+import { Contract, JsonRpcSigner, type InterfaceAbi } from 'ethers6';
 import type { Contracts, Provider } from '@/types/web3';
 import CONTRACTS from '@/constants/contracts/deployments';
 import EXTERNAL_CONTRACTS from '@/constants/contracts/externalContracts';

apps/app/src/hooks/useContractReader.ts

@@ -4,7 +4,7 @@
 import { useCallback, useState, useMemo } from 'react';
 import isEqual from 'lodash/isEqual';
 import type { Contracts } from '@/types/web3';
-import type { BaseContract, Contract, ContractMethod } from 'ethers';
+import type { BaseContract, Contract, ContractMethod } from 'ethers6';
 import useAsyncInterval from './useAsyncInterval';
 
 /*

apps/app/src/hooks/useEthersProvider.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { FallbackProvider, JsonRpcProvider } from 'ethers';
+import { FallbackProvider, JsonRpcProvider } from 'ethers6';
 import type { Chain, Client, Transport } from 'viem';
 import { type Config, useClient } from 'wagmi';
 

apps/app/src/hooks/useEthersSigner.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { BrowserProvider, JsonRpcSigner } from 'ethers';
+import { BrowserProvider, JsonRpcSigner } from 'ethers6';
 import type { Account, Chain, Client, Transport } from 'viem';
 import { type Config, useConnectorClient } from 'wagmi';
 

apps/app/src/hooks/useImxProvider.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { BrowserProvider, JsonRpcSigner } from 'ethers';
+import { BrowserProvider, JsonRpcSigner } from 'ethers6';
 import passport from '@nl/imx-passport';
 
 export function clientToProvider(): BrowserProvider {

apps/app/src/hooks/useNFTLAllowance.ts

@@ -1,7 +1,7 @@
 'use client';
 
 import { useCallback, useState, useEffect } from 'react';
-import { formatEther } from 'ethers';
+import { formatEther } from 'ethers6';
 import { useReadContract } from 'wagmi';
 import { TARGET_NETWORK } from '@/constants/networks';
 import { getDeployedContract, NFTL_CONTRACT as NFTL_CONTRACT_NAME } from '@/constants/contracts';

apps/app/src/hooks/useNotify.ts

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import { useCallback } from 'react';
 import Notify, { API, InitOptions } from 'bnc-notify';
-import type { JsonRpcSigner } from 'ethers';
+import type { JsonRpcSigner } from 'ethers6';
 
 import { handleError, handleLocalNotify, sendTransaction } from '@/utils/bnc-notify';
 import type { NotifyCallback, NotifyError, Tx, TransactionEvent } from '@/types/notify';

apps/app/src/hooks/useSingleCallResult.ts

@@ -2,7 +2,7 @@
 
 /* eslint-disable no-console */
 import { useState, useEffect } from 'react';
-import type { BaseContract, Contract, ContractMethod } from 'ethers';
+import type { BaseContract, Contract, ContractMethod } from 'ethers6';
 import type { Contracts } from '@/types/web3';
 // import { DEBUG } from '@/constants/index';
 

apps/app/src/types/notify.ts

@@ -1,4 +1,4 @@
-import type { TransactionResponse, TransactionRequest, TransactionReceipt } from 'ethers';
+import type { TransactionResponse, TransactionRequest, TransactionReceipt } from 'ethers6';
 import type { EthereumTransactionLog, EthereumTransactionData, SDKError, NotificationObject } from 'bnc-sdk';
 import type { EthereumRpcError, EthereumProviderError } from 'eth-rpc-errors';
 

apps/app/src/types/overrides/window.d.ts

@@ -1,4 +1,4 @@
-import { BrowserProvider, Provider } from 'ethers';
+import { BrowserProvider, Provider } from 'ethers6';
 
 import { UnityContext } from 'react-unity-webgl';
 import type { Ethereumish } from '@/types/web3';

apps/app/src/types/typechain/@chainlink/contracts/src/v0.8/shared/access/ConfirmedOwner.ts

@@ -12,7 +12,7 @@ import type {
   ContractRunner,
   ContractMethod,
   Listener,
-} from 'ethers';
+} from 'ethers6';
 import type {
   TypedContractEvent,
   TypedDeferredTopicFilter,