Merge pull request #43 from NiftyLeague/features/FE-525_imx-passport

Config imx passport
NiftyLeague · Sep 24, 2024 · dc72bbf · dc72bbf
2 parents 85f399c + b21d7b0
commit dc72bbf
Show file tree

Hide file tree

Showing 314 changed files with 4,065 additions and 528 deletions.
diff --git a/README.md b/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:

diff --git a/apps/app/package.json b/apps/app/package.json
@@ -16,6 +16,7 @@
     "@hookform/resolvers": "^3.9.0",
     "@imtbl/imx-sdk": "~3.8.2",
     "@mui/x-data-grid": "^7.18.0",
+    "@nl/imx-passport": "workspace:^",
     "@nl/theme": "workspace:^",
     "@nl/ui": "workspace:^",
     "@openzeppelin/contracts": "^5.0.2",
@@ -29,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",

diff --git a/apps/app/src/app/(private-routes)/dashboard/degens/_dialogs/RenameDegenDialogContent.tsx b/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,

diff --git a/apps/app/src/app/(private-routes)/dashboard/items/burner/page.tsx b/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';

diff --git a/apps/app/src/app/(private-routes)/dashboard/overview/_MyNFTL/DepositForm.tsx b/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';

diff --git a/apps/app/src/app/(private-routes)/dashboard/overview/_MyNFTL/RefreshBalanceForm.tsx b/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';

diff --git a/apps/app/src/app/(private-routes)/dashboard/overview/_MyNFTL/WithdrawForm.tsx b/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';

diff --git a/apps/app/src/app/(private-routes)/dashboard/overview/_MyNFTL/index.tsx b/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';

diff --git a/apps/app/src/app/(public-routes)/raffle/MyNFTL.tsx b/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';

diff --git a/apps/app/src/app/(public-routes)/raffle/Raffle.tsx b/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';

diff --git a/apps/app/src/app/(public-routes)/raffle/_TicketDialog/index.tsx b/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';

diff --git a/apps/app/src/components/dialog/DegenDialog/CowSwapWidget.tsx b/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';
 

diff --git a/apps/app/src/components/dialog/DegenDialog/RentDegenContentDialog.tsx b/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,

diff --git a/apps/app/src/constants/contracts/deployments.ts b/apps/app/src/constants/contracts/deployments.ts
@@ -1,7 +1,6 @@
-import type { InterfaceAbi } from 'ethers';
-import { mainnet, sepolia } from 'viem/chains';
+import type { InterfaceAbi } from 'ethers6';
+import { mainnet, sepolia, hardhat, immutableZkEvm, immutableZkEvmTestnet } from 'viem/chains';
 
-import { LOCAL_CHAIN_ID } from '@/constants/networks';
 import MAINNET_DEPLOYMENTS from './deployments.mainnet';
 import TESTNET_DEPLOYMENTS from './deployments.sepolia';
 import IMX_TESTNET_DEPLOYMENTS from './deployments.imxTestnet';
@@ -12,7 +11,7 @@ const CONTRACTS: {
     [contractName: string]: { address: `0x${string}`; abi: InterfaceAbi };
   };
 } = {
-  [LOCAL_CHAIN_ID]: {
+  [hardhat.id]: {
     AllowedColorsStorage: {
       address: '0x4cf79525c3447AA62B2dafFA876878BEA02e85EA',
       abi: TESTNET_DEPLOYMENTS.contracts.AllowedColorsStorage.abi,
@@ -122,6 +121,34 @@ const CONTRACTS: {
       abi: MAINNET_DEPLOYMENTS.contracts.NiftyLaunchComics.abi,
     },
   },
+  [immutableZkEvmTestnet.id]: {
+    // ComicsBurner: {
+    //   address: IMX_TESTNET_DEPLOYMENTS.contracts.ComicsBurner.address,
+    //   abi: IMX_TESTNET_DEPLOYMENTS.contracts.ComicsBurner.abi,
+    // },
+    NFTLToken: {
+      address: IMX_TESTNET_DEPLOYMENTS.contracts.NFTL.address,
+      abi: IMX_TESTNET_DEPLOYMENTS.contracts.NFTL.abi,
+    },
+    NiftyMarketplace: {
+      address: IMX_TESTNET_DEPLOYMENTS.contracts.NiftyMarketplace.address,
+      abi: IMX_TESTNET_DEPLOYMENTS.contracts.NiftyMarketplace.abi,
+    },
+  },
+  [immutableZkEvm.id]: {
+    // ComicsBurner: {
+    //   address: IMX_MAINNET_DEPLOYMENTS.contracts.ComicsBurner.address,
+    //   abi: IMX_MAINNET_DEPLOYMENTS.contracts.ComicsBurner.abi,
+    // },
+    NFTLToken: {
+      address: IMX_MAINNET_DEPLOYMENTS.contracts.NFTL.address,
+      abi: IMX_MAINNET_DEPLOYMENTS.contracts.NFTL.abi,
+    },
+    NiftyMarketplace: {
+      address: IMX_MAINNET_DEPLOYMENTS.contracts.NiftyMarketplace.address,
+      abi: IMX_MAINNET_DEPLOYMENTS.contracts.NiftyMarketplace.abi,
+    },
+  },
 };
 
 export default CONTRACTS;
diff --git a/apps/app/src/constants/contracts/externalContracts.ts b/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]: {

diff --git a/apps/app/src/constants/contracts/index.ts b/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';

diff --git a/apps/app/src/constants/networks.ts b/apps/app/src/constants/networks.ts
@@ -1,4 +1,4 @@
-import { mainnet, sepolia, hardhat } from 'viem/chains';
+import { mainnet, sepolia, hardhat, immutableZkEvm, immutableZkEvmTestnet } from 'viem/chains';
 import type { Network, NetworkName } from '@/types/web3';
 
 export const NetworkContextName = 'NETWORK';
@@ -7,32 +7,43 @@ export const MAINNET_ID = mainnet.id;
 export const SEPOLIA_ID = sepolia.id;
 export const LOCAL_CHAIN_ID = hardhat.id;
 
+export const IMX_ID = immutableZkEvm.id;
+export const IMX_TESTNET_ID = immutableZkEvmTestnet.id;
+
 export const NETWORK_ICON = {
   [MAINNET_ID]: '/img/logos/networks/mainnet-network.webp',
   [SEPOLIA_ID]: '/img/logos/networks/sepolia-network.webp',
   [LOCAL_CHAIN_ID]: '/img/logos/networks/sepolia-network.webp',
+  [IMX_ID]: '/img/logos/networks/imx_zkEVM.webp',
+  [IMX_TESTNET_ID]: '/img/logos/networks/imx_zkEVM.webp',
 };
 
 export const NETWORK_LABEL = {
   [MAINNET_ID]: mainnet.name,
   [SEPOLIA_ID]: sepolia.name,
   [LOCAL_CHAIN_ID]: hardhat.name,
+  [IMX_ID]: immutableZkEvm.name,
+  [IMX_TESTNET_ID]: immutableZkEvmTestnet.name,
 };
 
 // needs to match hardhat settings otherwise use rpcUrl for our publicProvider initialization
 export const NETWORK_NAME: { [chainId: number]: NetworkName } = {
   [MAINNET_ID]: 'mainnet',
   [SEPOLIA_ID]: 'sepolia',
   [LOCAL_CHAIN_ID]: 'hardhat',
+  [IMX_ID]: 'imtbl-zkevm-mainnet',
+  [IMX_TESTNET_ID]: 'imtbl-zkevm-testnet',
 };
 
 export const RPC = {
   [MAINNET_ID]: `https://mainnet.infura.io/v3/${process.env.NEXT_PUBLIC_INFURA_PROJECT_ID as string}`,
   [SEPOLIA_ID]: `https://sepolia.infura.io/v3/${process.env.NEXT_PUBLIC_INFURA_PROJECT_ID as string}`,
   [LOCAL_CHAIN_ID]: hardhat.rpcUrls.default.http[0],
+  [IMX_ID]: immutableZkEvm.rpcUrls.default.http[0],
+  [IMX_TESTNET_ID]: immutableZkEvmTestnet.rpcUrls.default.http[0],
 };
 
-export const NETWORKS: { [network: string]: Network } = {
+export const NETWORKS: Record<NetworkName, Network> = {
   mainnet: {
     blockExplorer: mainnet.blockExplorers.default.url,
     chainId: MAINNET_ID,
@@ -47,12 +58,26 @@ export const NETWORKS: { [network: string]: Network } = {
     name: NETWORK_NAME[SEPOLIA_ID],
     rpcUrl: RPC[SEPOLIA_ID],
   },
-  localhost: {
+  hardhat: {
     blockExplorer: '',
     chainId: LOCAL_CHAIN_ID,
     label: NETWORK_LABEL[LOCAL_CHAIN_ID],
     rpcUrl: RPC[LOCAL_CHAIN_ID],
   },
+  'imtbl-zkevm-mainnet': {
+    blockExplorer: immutableZkEvm.blockExplorers.default.url,
+    chainId: IMX_ID,
+    label: NETWORK_LABEL[IMX_ID],
+    name: NETWORK_NAME[IMX_ID],
+    rpcUrl: RPC[IMX_ID],
+  },
+  'imtbl-zkevm-testnet': {
+    blockExplorer: immutableZkEvmTestnet.blockExplorers.default.url,
+    chainId: IMX_TESTNET_ID,
+    label: NETWORK_LABEL[IMX_TESTNET_ID],
+    name: NETWORK_NAME[IMX_TESTNET_ID],
+    rpcUrl: RPC[IMX_TESTNET_ID],
+  },
 };
 
 export const NETWORK = (chainId: number): Network =>
@@ -65,8 +90,6 @@ export const NETWORK = (chainId: number): Network =>
 
 export const TARGET_NETWORK: Network = NETWORKS[process.env.NEXT_PUBLIC_NETWORK as NetworkName] as Network;
 
-export const SUPPORTED_CHAIN_IDS: number[] = [LOCAL_CHAIN_ID, MAINNET_ID, SEPOLIA_ID];
-
-export const VALID_ETHERS_NETWORKS: number[] = [MAINNET_ID, SEPOLIA_ID];
+export const SUPPORTED_CHAIN_IDS: number[] = [MAINNET_ID, SEPOLIA_ID, LOCAL_CHAIN_ID, IMX_ID, IMX_TESTNET_ID];
 
 export const VALID_NOTIFY_NETWORKS: number[] = [MAINNET_ID, SEPOLIA_ID];