Merge pull request #81 from NiftyLeague/staging

Immutable zkEVM App Configs / Remove Old Contracts
NiftyLeague · Sep 25, 2024 · 34a2b29 · 34a2b29
2 parents 85f399c + 6af40bd
commit 34a2b29
Show file tree

Hide file tree

Showing 375 changed files with 4,768 additions and 1,643 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
@@ -14,8 +14,8 @@
   "dependencies": {
     "@cowprotocol/cow-sdk": "^5.4.1",
     "@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 +29,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/EnableDegenDialogContent.tsx b/apps/app/src/app/(private-routes)/dashboard/degens/_dialogs/EnableDegenDialogContent.tsx
@@ -63,7 +63,7 @@ const EnableDisableDegenDialogContent = ({ degen, isEnabled = false, onClose, on
               Owned by {degen?.owner}
             </Typography>
           </Stack>
-          <Stack direction="row" justifyContent="center" mb={1}>
+          <Stack direction="row" mb={1} sx={{ justifyContent: 'center' }}>
             {isEnabled ? (
               <Typography align="center">
                 Disabling your rental makes your rental queue private. Note that your queue will clear as existing

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,
@@ -127,7 +127,7 @@ const RenameDegenDialogContent = ({ degen, onSuccess }: Props): JSX.Element => {
             renameSuccess={renameSuccess}
             insufficientBalance={insufficientBalance}
           />
-          <Stack direction="row" justifyContent="space-between">
+          <Stack direction="row" sx={{ justifyContent: 'space-between' }}>
             <Typography variant="h4">Renaming Fee</Typography>
             <Typography>1,000 NFTL</Typography>
           </Stack>

diff --git a/apps/app/src/app/(private-routes)/dashboard/degens/page.tsx b/apps/app/src/app/(private-routes)/dashboard/degens/page.tsx
@@ -22,7 +22,7 @@ import {
 } from '@/components/extended/DegensFilter/utils';
 import RenameDegenDialogContent from '@/app/(private-routes)/dashboard/degens/_dialogs/RenameDegenDialogContent';
 import SectionTitle from '@/components/sections/SectionTitle';
-import { DEGEN_BASE_API_URL, DEGEN_OPENSEA_URL, PROFILE_FAV_DEGENS_API } from '@/constants/url';
+import { DEGEN_BASE_API_URL, DEGEN_COLLECTION_URL, PROFILE_FAV_DEGENS_API } from '@/constants/url';
 import { HYDRAS } from '@/constants/hydras';
 import { useProfileFavDegens } from '@/hooks/useGamerProfile';
 import useFetch from '@/hooks/useFetch';
@@ -307,7 +307,7 @@ const DashboardDegensPage = (): JSX.Element => {
       <Stack gap={1.5}>
         {/* Main Grid2 title */}
         <SectionTitle firstSection>
-          <Stack direction="row" alignItems="center" gap={1}>
+          <Stack direction="row" gap={1} sx={{ alignItems: 'center', mb: 2 }}>
             <IconButton onClick={() => setIsDrawerOpen(!isDrawerOpen)} size="small">
               {isDrawerOpen ? <ArrowBackIosNew /> : <ArrowForwardIos />}
             </IconButton>
@@ -321,7 +321,7 @@ const DashboardDegensPage = (): JSX.Element => {
           ) : dataForCurrentPage.length ? (
             dataForCurrentPage.map(renderDegen)
           ) : !characters?.length ? (
-            <Link href={DEGEN_OPENSEA_URL} target="_blank" rel="noreferrer">
+            <Link href={DEGEN_COLLECTION_URL} target="_blank" rel="noreferrer">
               <EmptyState
                 message="No DEGENs found. Please check your address or go purchase a degen if you have not done so already!"
                 buttonText="Buy a DEGEN"

diff --git a/...app/src/app/(private-routes)/dashboard/gamer-profile/_ImageProfile/ProfileImageDialog.tsx b/...app/src/app/(private-routes)/dashboard/gamer-profile/_ImageProfile/ProfileImageDialog.tsx
@@ -96,7 +96,7 @@ const ProfileImageContent = ({ onSearch, onChangeAvatar, degensInternal, avatarF
       ));
     }
     return (
-      <Stack justifyContent="center" alignItems="center">
+      <Stack sx={{ justifyContent: 'center', alignItems: 'center' }}>
         <EmptyState message="No DEGENs found." />
       </Stack>
     );

diff --git a/apps/app/src/app/(private-routes)/dashboard/gamer-profile/_Stats/BottomInfo.tsx b/apps/app/src/app/(private-routes)/dashboard/gamer-profile/_Stats/BottomInfo.tsx
@@ -25,7 +25,7 @@ const BottomInfo = ({ nifty_smashers, wen_game, crypto_winter }: BottomInfoProps
           contents={
             <Stack padding="16px" gap={2}>
               {nifty_smashers && <ProgressGamer size="sm" data={nifty_smashers} />}
-              <Stack direction="row" justifyContent="space-between" alignItems="center">
+              <Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
                 <Typography variant="h3" component="div">
                   Nifty Smashers
                 </Typography>
@@ -58,9 +58,9 @@ const BottomInfo = ({ nifty_smashers, wen_game, crypto_winter }: BottomInfoProps
         <GameCard
           image="/img/games/wen.gif"
           contents={
-            <Stack padding="16px" gap={2} flex={1} justifyContent="space-between">
+            <Stack padding="16px" gap={2} flex={1} sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
               {wen_game && <ProgressGamer size="sm" data={wen_game} />}
-              <Stack direction="row" justifyContent="space-between" alignItems="center">
+              <Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
                 <Typography variant="h3" component="div">
                   WEN?
                 </Typography>
@@ -94,9 +94,9 @@ const BottomInfo = ({ nifty_smashers, wen_game, crypto_winter }: BottomInfoProps
           <GameCard
             image="/img/games/crypto-winter.webp"
             contents={
-              <Stack padding="16px" gap={2} flex={1} justifyContent="space-between">
+              <Stack padding="16px" gap={2} flex={1} sx={{ justifyContent: 'space-between' }}>
                 <ProgressGamer size="sm" data={crypto_winter} />
-                <Stack direction="row" justifyContent="space-between" alignItems="center">
+                <Stack direction="row" sx={{ justifyContent: 'space-between', alignItems: 'center' }}>
                   <Typography variant="h3" component="div">
                     CRYPTO WINTER
                   </Typography>

diff --git a/apps/app/src/app/(private-routes)/dashboard/gamer-profile/_Stats/Item.tsx b/apps/app/src/app/(private-routes)/dashboard/gamer-profile/_Stats/Item.tsx
@@ -8,7 +8,7 @@ interface ItemProps {
 }
 
 const Item = ({ label, value, isDisable = false, isLoading = true }: ItemProps): JSX.Element => (
-  <Stack direction="row" justifyContent="space-between">
+  <Stack direction="row" sx={{ justifyContent: 'space-between' }}>
     <Typography sx={{ color: theme => (isDisable ? theme.palette.grey[400] : 'white') }}>{label}:</Typography>
     {isLoading ? (
       <Skeleton variant="rectangular" width="15%" height="18.67px" />

diff --git a/apps/app/src/app/(private-routes)/dashboard/gamer-profile/_Stats/TopInfo.tsx b/apps/app/src/app/(private-routes)/dashboard/gamer-profile/_Stats/TopInfo.tsx
@@ -36,15 +36,15 @@ const TopInfo = ({ profile, walletAddress }: TopInfoProps): JSX.Element => {
   const renderTopInfo = () => {
     return (
       <Stack>
-        <Stack direction="row" alignItems="center" spacing={5}>
+        <Stack direction="row" spacing={5} sx={{ alignItems: 'center' }}>
           <Box width="50%">
             <Typography variant="h2" component="div">
               {profileName} <ChangeProfileNameDialog handleUpdateNewName={handleUpdateNewName} />
             </Typography>
           </Box>
           <Box width="50%">{total && <ProgressGamer data={total} />}</Box>
         </Stack>
-        <Stack direction="row" alignItems="center" spacing={5}>
+        <Stack direction="row" spacing={5} sx={{ alignItems: 'center' }}>
           <Typography width="50%" variant="h4" component="div" sx={{ color: theme => theme.palette.grey[400] }}>
             {`${walletAddress.slice(0, 5)}...${walletAddress.slice(
               walletAddress.length - 5,

diff --git a/apps/app/src/app/(private-routes)/dashboard/gamer-profile/_Stats/TopInfoSkeleton.tsx b/apps/app/src/app/(private-routes)/dashboard/gamer-profile/_Stats/TopInfoSkeleton.tsx
@@ -3,7 +3,7 @@ import { Stack, Typography, Box, Skeleton } from '@mui/material';
 const TopInfoSkeleton = () => {
   return (
     <Stack>
-      <Stack direction="row" alignItems="center" spacing={5}>
+      <Stack direction="row" spacing={5} sx={{ alignItems: 'center' }}>
         <Box width="50%">
           <Skeleton
             sx={{
@@ -18,7 +18,7 @@ const TopInfoSkeleton = () => {
           <Skeleton variant="rectangular" width="100%" height="25px" />
         </Box>
       </Stack>
-      <Stack direction="row" alignItems="center" spacing={5}>
+      <Stack direction="row" spacing={5} sx={{ alignItems: 'center' }}>
         <Typography width="50%" variant="h4" component="div">
           <Skeleton
             sx={{

diff --git a/apps/app/src/app/(private-routes)/dashboard/gamer-profile/page.tsx b/apps/app/src/app/(private-routes)/dashboard/gamer-profile/page.tsx
@@ -7,7 +7,7 @@ import merge from 'lodash/merge';
 
 import { useGamerProfile, useProfileAvatarFee } from '@/hooks/useGamerProfile';
 import useFetch from '@/hooks/useFetch';
-import useComicsBalance from '@/hooks/useComicsBalance';
+import useIMXContext from '@/hooks/useIMXContext';
 
 import SectionSlider from '@/components/sections/SectionSlider';
 import ImageProfile from './_ImageProfile';
@@ -37,7 +37,7 @@ const GamerProfile = (): JSX.Element => {
   const { profile, error, loadingProfile } = useGamerProfile();
   const { address } = useAccount();
   const { avatarsAndFee } = useProfileAvatarFee();
-  const { comicsBalance, loading: loadingComics } = useComicsBalance();
+  const { comicsBalance, comicsLoading } = useIMXContext();
   const { data } = useFetch<Degen[]>(`${DEGEN_BASE_API_URL}/cache/rentals/rentables.json`);
 
   const { loadingDegens, characters, characterCount: degenCount } = useBalances();
@@ -57,15 +57,15 @@ const GamerProfile = (): JSX.Element => {
 
   const renderEmptyProfile = () => {
     return (
-      <Grid2 container justifyContent="center" alignItems="center" display="flex" height="100%">
+      <Grid2 container size={12} sx={{ justifyContent: 'center', alignItems: 'center' }} display="flex" height="100%">
         <EmptyState message="You don't own any Gamer Profile yet." />
       </Grid2>
     );
   };
 
   const renderTopProfile = () => {
     return (
-      <Grid2 container spacing={3}>
+      <Grid2 container size={12} spacing={3}>
         <Grid2 size={{ xs: 12, md: 3.5 }}>
           <ImageProfile
             avatar={profile?.avatar}
@@ -117,7 +117,7 @@ const GamerProfile = (): JSX.Element => {
     );
   };
   return (
-    <Grid2 container gap={sectionSpacing} mb="24px">
+    <Grid2 container gap={4} mb="24px">
       {error && !profile && !loadingProfile && renderEmptyProfile()}
       {(profile || loadingProfile) && renderGamerProfile()}
     </Grid2>

diff --git a/apps/app/src/app/(private-routes)/dashboard/items/burner/_components/comics-grid.tsx b/apps/app/src/app/(private-routes)/dashboard/items/burner/_components/comics-grid.tsx
@@ -6,8 +6,8 @@ import sum from 'lodash/sum';
 import { ImageList, ImageListItem, ImageListItemBar, Skeleton, TextField, InputAdornment } from '@mui/material';
 import BurnIcon from '@mui/icons-material/Whatshot';
 
-import useComicsBalance from '@/hooks/useComicsBalance';
-import type { Comic } from '@/types/comic';
+import useIMXContext from '@/hooks/useIMXContext';
+import type { Comic } from '@/types/marketplace';
 
 const PREFIX = 'comics-grid';
 
@@ -82,7 +82,7 @@ export default function ComicsGrid({
   setSelectedComics: React.Dispatch<React.SetStateAction<Comic[]>>;
   refreshKey: number;
 }) {
-  const { comicsBalance, loading: loadingComics } = useComicsBalance(refreshKey);
+  const { comicsBalance, comicsLoading } = useIMXContext();
   const keyCount = useMemo(() => (burnCount.some(v => v === 0) ? 0 : Math.min(...burnCount)), [burnCount]);
   const itemCount = useMemo(() => sum(burnCount) - keyCount * 6, [burnCount, keyCount]);
 
@@ -111,7 +111,7 @@ export default function ComicsGrid({
     handleUpdateBurnCount(comic, newSelectedComics);
   };
 
-  return loadingComics ? (
+  return comicsLoading ? (
     <Skeleton variant="rectangular" animation="wave" width={315} height={265} sx={{ ...gridStyles }} />
   ) : (
     <Root>

diff --git a/apps/app/src/app/(private-routes)/dashboard/items/burner/_components/items-grid.tsx b/apps/app/src/app/(private-routes)/dashboard/items/burner/_components/items-grid.tsx
@@ -1,9 +1,8 @@
-import { useContext } from 'react';
 import { styled } from '@nl/theme';
 import Image from 'next/image';
 import { ImageList, ImageListItem, ImageListItemBar, Skeleton } from '@mui/material';
 
-import IMXContext from '@/contexts/IMXContext';
+import useIMXContext from '@/hooks/useIMXContext';
 
 const PREFIX = 'items-grid';
 
@@ -50,9 +49,9 @@ const gridStyles = {
 };
 
 export default function ItemsGrid({ itemCounts }: { itemCounts: number[] }) {
-  const imx = useContext(IMXContext);
+  const { itemsLoading } = useIMXContext();
 
-  return imx.loading ? (
+  return itemsLoading ? (
     <Skeleton variant="rectangular" animation="wave" width={315} height={403} sx={{ ...containerStyles }} />
   ) : (
     <Root style={containerStyles}>

diff --git a/apps/app/src/app/(private-routes)/dashboard/items/burner/_components/machine.tsx b/apps/app/src/app/(private-routes)/dashboard/items/burner/_components/machine.tsx
@@ -1,20 +1,20 @@
 'use client';
 
-import { memo, useContext, useState } from 'react';
+import { memo, useState } from 'react';
 import useInterval from '@/hooks/useInterval';
-import IMXContext, { Context } from '@/contexts/IMXContext';
+import useIMXContext from '@/hooks/useIMXContext';
 import MachineFrame from './machine-frame';
-import type { Comic } from '@/types/comic';
+import type { Comic } from '@/types/marketplace';
 
 const ComicsBurnerMachine: React.FC<
   React.PropsWithChildren<
     React.PropsWithChildren<{
+      address?: `0x${string}`;
       burnDisabled: boolean;
-      imx: Context;
       selectedComics: Comic[];
     }>
   >
-> = memo(({ burnDisabled, imx, selectedComics }) => {
+> = memo(({ address, burnDisabled, selectedComics }) => {
   const [count, setCount] = useState<number>(0);
 
   useInterval(() => {
@@ -25,7 +25,7 @@ const ComicsBurnerMachine: React.FC<
     <>
       <MachineFrame frames={['/img/comics/burner/machine/machine_main_3.webp']} />
       <MachineFrame frames={['/img/comics/burner/machine/fx_combined_02.gif']} />
-      {!imx.registeredUser ? (
+      {!address ? (
         <MachineFrame
           frames={[
             '/img/comics/burner/machine/button_connectwallet_01.webp',
@@ -48,13 +48,11 @@ const ComicsBurnerMachine: React.FC<
         />
       ) : (
         <>
-          {!imx.registeredUser ? (
-            <MachineFrame frames={['/img/comics/burner/machine/connectwalletabove_button_01.webp']} />
-          ) : null}
+          {!address ? <MachineFrame frames={['/img/comics/burner/machine/connectwalletabove_button_01.webp']} /> : null}
           {selectedComics.length < 1 ? (
             <MachineFrame frames={['/img/comics/burner/machine/selectcomics_button_02.webp']} />
           ) : null}
-          {imx.registeredUser && selectedComics.length > 1 ? (
+          {address && selectedComics.length > 1 ? (
             <MachineFrame frames={['/img/comics/burner/machine/button_burn_gray_01.webp']} />
           ) : null}
         </>
@@ -74,8 +72,8 @@ const ComicsBurnerMachineWithContext = ({
   burnDisabled: boolean;
   selectedComics: Comic[];
 }) => {
-  const imx = useContext(IMXContext);
-  return <ComicsBurnerMachine imx={imx} burnDisabled={burnDisabled} selectedComics={selectedComics} />;
+  const { address } = useIMXContext();
+  return <ComicsBurnerMachine address={address} burnDisabled={burnDisabled} selectedComics={selectedComics} />;
 };
 
 export default ComicsBurnerMachineWithContext;
diff --git a/apps/app/src/app/(private-routes)/dashboard/items/burner/_components/satoshi-animations.tsx b/apps/app/src/app/(private-routes)/dashboard/items/burner/_components/satoshi-animations.tsx
@@ -1,17 +1,15 @@
-import { memo, useContext } from 'react';
-import IMXContext, { Context } from '@/contexts/IMXContext';
+import { memo } from 'react';
 import SatoshiFrame from './satoshi-frame';
 import SatoshiBurnAnim from './satoshi-burn-animations';
 
-const SatoshiAnimations: React.FC<
-  React.PropsWithChildren<React.PropsWithChildren<{ burning: boolean; imx: Context }>>
-> = memo(({ burning, imx }) => {
-  return <>{burning ? <SatoshiBurnAnim /> : <SatoshiFrame frames={['/img/comics/burner/idleanim.gif']} />}</>;
-});
+const SatoshiAnimations: React.FC<React.PropsWithChildren<React.PropsWithChildren<{ burning: boolean }>>> = memo(
+  ({ burning }) => {
+    return <>{burning ? <SatoshiBurnAnim /> : <SatoshiFrame frames={['/img/comics/burner/idleanim.gif']} />}</>;
+  },
+);
 
 const SatoshiAnimationsWithContext = ({ burning = false }) => {
-  const imx = useContext(IMXContext);
-  return <SatoshiAnimations burning={burning} imx={imx} />;
+  return <SatoshiAnimations burning={burning} />;
 };
 
 SatoshiAnimations.displayName = 'SatoshiAnimations';