lazy import for modals

packages/testnet/frontend/src/api/fetchPlanetsData.ts

@@ -11,7 +11,6 @@ interface ApiPlanetData {
 
 const fetchPlanetsData = async (): Promise<PlanetDetails[]> => {
   const nodeEnv = import.meta.env.MODE;
-  console.log(nodeEnv);
   const apiUrl =
     nodeEnv === "production"
       ? "https://www.api.testnet.no-game.xyz/universe"

packages/testnet/frontend/src/components/boxes/CompoundsBox.tsx

@@ -1,11 +1,11 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, lazy } from "react";
 import styled from "styled-components";
 import { Input } from "@mui/joy";
 import Tooltip from "@mui/material/Tooltip";
 import useUpgrade from "../../hooks/writeHooks/useUpgrade";
 import { numberWithCommas } from "../../shared/utils";
 import { ButtonUpgrade } from "../ui/Button";
-import DescriptionModal from "../modals/Description";
+const DescriptionModal = lazy(() => import("../modals/Description"));
 import * as Styled from "../../shared/styled/Box";
 import { Resources } from "../../shared/types";
 import {

packages/testnet/frontend/src/components/boxes/DefencesBox.tsx

@@ -1,8 +1,8 @@
-import React, { useMemo, useState } from "react";
+import React, { useMemo, useState, lazy } from "react";
 import Tooltip from "@mui/material/Tooltip";
 import styled from "styled-components";
 import { Input } from "@mui/joy";
-import DescriptionModal from "../modals/Description";
+const DescriptionModal = lazy(() => import("../modals/Description"));
 import { ButtonBuild } from "../ui/Button";
 import useBuild from "../../hooks/writeHooks/useBuild";
 import { numberWithCommas } from "../../shared/utils";

packages/testnet/frontend/src/components/boxes/DockyardBox.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode, lazy } from "react";
 import styled from "styled-components";
 import Tooltip from "@mui/material/Tooltip";
 import * as Styled from "../../shared/styled/Box";
@@ -7,7 +7,7 @@ import { numberWithCommas } from "../../shared/utils";
 import { useMemo, useState } from "react";
 import useBuild from "../../hooks/writeHooks/useBuild";
 import { Input } from "@mui/joy";
-import DescriptionModal from "../modals/Description";
+const DescriptionModal = lazy(() => import("../modals/Description"));
 import { Resources } from "../../shared/types";
 
 const InfoContainer = styled(Styled.InfoContainer)({

packages/testnet/frontend/src/components/boxes/ResearchBox.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, lazy } from "react";
 import styled from "styled-components";
 import Tooltip from "@mui/material/Tooltip";
 import { Input } from "@mui/joy";
@@ -7,7 +7,7 @@ import { ButtonUpgrade } from "../ui/Button";
 import { numberWithCommas } from "../../shared/utils";
 import { ReactNode, useMemo } from "react";
 import useUpgrade from "../../hooks/writeHooks/useUpgrade";
-import DescriptionModal from "../modals/Description";
+const DescriptionModal = lazy(() => import("../modals/Description"));
 import { TechLevels } from "../../shared/types";
 import { Resources } from "../../shared/types";
 import { getCumulativeTechCost } from "../../shared/utils/Formulas";

packages/testnet/frontend/src/components/boxes/UniverseViewBox.tsx

@@ -1,9 +1,8 @@
+import { useMemo, lazy } from "react";
 import styled from "styled-components";
 import * as Styled from "../../shared/styled/Box";
 import { CircularProgress } from "@mui/material";
-import { ButtonAttackPlanet } from "../buttons/ButtonAttackPlanet";
 import { DefenceLevels, Resources, ShipsLevels } from "../../shared/types";
-import PlanetModal from "../modals/PlanetOverview";
 import {
   convertPositionToNumbers,
   convertTechLevelsToNumbers,
@@ -12,7 +11,8 @@ import {
 import { DebrisFieldView } from "../ui/DebrisFieldView";
 import { useTechsLevels } from "../../hooks/LevelsHooks";
 import { usePlanetPosition } from "../../hooks/usePlanetPosition";
-import { useMemo } from "react";
+const ButtonAttackPlanet = lazy(() => import("../buttons/ButtonAttackPlanet"));
+const PlanetModal = lazy(() => import("../modals/PlanetOverview"));
 
 const InfoContainer = styled(Styled.InfoContainer)({
   width: "45%",

packages/testnet/frontend/src/components/buttons/ButtonAttackPlanet.tsx

@@ -391,3 +391,5 @@ export function ButtonAttackPlanet({
     </div>
   );
 }
+
+export default ButtonAttackPlanet;

packages/testnet/frontend/src/components/buttons/ButtonCollectDebris.tsx

@@ -239,7 +239,8 @@ export function ButtonCollectDebris({
                   scraper (
                   <span
                     style={{
-                      color: totalShips > ownFleet.scraper ? "#AB3836" : "#F8F8FF",
+                      color:
+                        totalShips > ownFleet.scraper ? "#AB3836" : "#F8F8FF",
                     }}
                   >
                     {String(availableScrapers)}
@@ -318,3 +319,5 @@ export function ButtonCollectDebris({
     </Modal>
   );
 }
+
+export default ButtonCollectDebris;

packages/testnet/frontend/src/components/buttons/CollectResources.tsx

@@ -1,7 +1,7 @@
-import { useState } from "react";
+import { useState, lazy } from "react";
 import { Box } from "@mui/material";
 import { styled } from "@mui/system";
-import { TransactionStatus } from "../ui/TransactionStatus";
+const TransactionStatus = lazy(() => import("../ui/TransactionStatus"));
 import { GAMEADDRESS } from "../../constants/addresses";
 import game from "../../constants/nogame.json";
 import { useContractWrite } from "@starknet-react/core";
@@ -22,12 +22,10 @@ export function UseCollectResources() {
     abi: game.abi,
     address: GAMEADDRESS,
   });
-  const { writeAsync, data} = useContractWrite({
+  const { writeAsync, data } = useContractWrite({
     calls: [contract?.populateTransaction["collect_resources"]!()],
   });
 
-
-
   const handleOnClick = () => {
     writeAsync();
     setIsClicked(true);
@@ -46,7 +44,10 @@ export function UseCollectResources() {
         </StyledButton>
       </StyledBox>
       {isClicked ? (
-        <TransactionStatus name="Collect Resources" tx={data?.transaction_hash} />
+        <TransactionStatus
+          name="Collect Resources"
+          tx={data?.transaction_hash}
+        />
       ) : (
         <></>
       )}

packages/testnet/frontend/src/components/buttons/GeneratePlanet.tsx

@@ -1,7 +1,7 @@
-// import { useCallback } from "react";
+// import { lazy } from "react";
 import { Box, Button } from "@mui/material";
 import CircularProgress from "@mui/material/CircularProgress";
-// import { TransactionStatus } from "../ui/TransactionStatus";
+// const TransactionStatus = lazy(() => import("../ui/TransactionStatus"));
 import { useContractWrite } from "@starknet-react/core";
 import { GAMEADDRESS, ETH_ADDRESS } from "../../constants/addresses";
 import game from "../../constants/nogame.json";

packages/testnet/frontend/src/components/leaderboards/LeaderBoardTech.tsx

@@ -23,7 +23,7 @@ type RowProps = {
 const Row = styled.tr<RowProps>`
   background-color: ${(props) =>
     props.isHighlighted ? "#32414B" : "transparent"};
-  color: #23CE6B;
+  color: #23ce6b;
 `;
 
 const Data = styled.td`

packages/testnet/frontend/src/components/ui/Button.tsx

@@ -1,7 +1,7 @@
-import { useState } from "react";
+import { useState, lazy } from "react";
 import { StyledButton } from "../../shared/styled/Button";
-import { TransactionStatus } from "./TransactionStatus";
-// import { InvokeFunctionResponse } from "starknet";
+const TransactionStatus = lazy(() => import("./TransactionStatus"));
+
 interface Props {
   name: string;
   callback?: () => void;

packages/testnet/frontend/src/components/ui/DebrisFieldView.tsx

@@ -1,16 +1,18 @@
+import React, { lazy } from "react";
 import { Tooltip, Box, IconButton, Modal } from "@mui/material";
 import DebrisIcon from "../../assets/uiIcons/debris.svg";
 import { useGetDebrisField } from "../../hooks/useGetDebrisField";
 import CircularProgress from "@mui/material/CircularProgress";
-import { ButtonCollectDebris } from "../buttons/ButtonCollectDebris";
 import {
   DebrisField,
   ShipsLevels,
   TechLevels,
   Position,
 } from "../../shared/types";
-import React from "react";
 import { numberWithCommas } from "../../shared/utils";
+const ButtonCollectDebris = lazy(
+  () => import("../buttons/ButtonCollectDebris")
+);
 
 interface Props {
   planetId?: number;

packages/testnet/frontend/src/components/ui/FleetMovements.tsx

@@ -326,3 +326,5 @@ export const FleetMovements = ({ planetId }: Props) => {
     </div>
   );
 };
+
+export default FleetMovements;

packages/testnet/frontend/src/components/ui/Header.tsx

@@ -1,14 +1,15 @@
-import React from "react";
+import React, { lazy, Suspense } from "react";
 import AppBar from "@mui/material/AppBar";
 import Toolbar from "@mui/material/Toolbar";
 import { HeaderButton } from "../../shared/styled/Button";
 import { styled } from "@mui/material/styles";
-import { FleetMovements } from "./FleetMovements";
+const FleetMovements = lazy(() => import("./FleetMovements"));
 import { Link } from "react-router-dom";
 import LogoutIcon from "@mui/icons-material/Logout";
 import { useAccount, useDisconnect } from "@starknet-react/core";
 import IconButton from "@mui/material/IconButton";
 import WalletHeader from "./WalletHeader";
+import { CircularProgress } from "@mui/material";
 
 const HeaderWrapper = styled(AppBar)({
   backgroundColor: "#1a2025", // Dark background for space theme
@@ -61,7 +62,9 @@ const Header = ({ planetId }: Props) => {
             DashBoard
           </Link>
         </HeaderButton>
-        <FleetMovements planetId={planetId ? planetId : 0} />
+        <Suspense fallback={<CircularProgress />}>
+          <FleetMovements planetId={planetId ? planetId : 0} />
+        </Suspense>
         <HeaderButton variant="text">
           <Link
             to="/battlereports"

packages/testnet/frontend/src/components/ui/TransactionStatus.tsx

@@ -24,14 +24,11 @@ export function TransactionStatus({ name, tx }: Props) {
     if (data && "finality_status" in data) {
       // Now TypeScript knows 'finality_status' is a valid property
       if (data.finality_status === "ACCEPTED_ON_L2") {
-        console.log(data.finality_status);
         setTransactionSuccess(true);
       }
     }
   }, [data]);
 
-  console.log(data);
-
   const handleModalClose = () => {
     setShowModal(false);
   };
@@ -103,3 +100,5 @@ export function TransactionStatus({ name, tx }: Props) {
     </>
   );
 }
+
+export default TransactionStatus;

packages/testnet/frontend/src/views/LoginOrGenerate.tsx

@@ -1,12 +1,14 @@
 import styled from "styled-components";
-import { FC } from "react";
+import { FC, lazy } from "react";
 import { CircularProgress } from "@mui/material";
 import LogoutIcon from "@mui/icons-material/Logout";
 import { useDisconnect } from "@starknet-react/core";
 import NoGameLogo from "../assets/logos/NoGameLogo.webp";
 import { ColumnCenter } from "../shared/styled/Column";
 import { RowCentered } from "../components/ui/Row";
-import ConnectWalletButton from "../components/auth/ConnectWallet";
+const ConnectWalletButton = lazy(
+  () => import("../components/auth/ConnectWallet")
+);
 import { GeneratePlanet } from "../components/buttons/GeneratePlanet";
 import { useGetPlanetPrice } from "../hooks/useGetPlanetPrice";
 import WarningIcon from "@mui/icons-material/Warning";