minor fixes

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

@@ -0,0 +1,52 @@
+import React, { useState, useEffect } from 'react';
+import logoRound from '../../assets/logos/logo-round.png';
+
+const RotatingLogo = () => {
+  const [showLogo, setShowLogo] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setShowLogo(true);
+    }, 1000); // 2 seconds timeout
+
+    return () => clearTimeout(timer); // Clear the timer if the component unmounts
+  }, []);
+
+  if (showLogo) {
+    return (
+      <>
+        <style>
+          {`
+            @keyframes rotate {
+              from { transform: rotate(0deg); }
+              to { transform: rotate(360deg); }
+            }
+            .rotating-logo {
+              animation: rotate 2s linear infinite;
+            }
+          `}
+        </style>
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: '100vh',
+            width: '100vw',
+          }}
+        >
+          <img
+            src={logoRound}
+            className="rotating-logo"
+            alt="Logo"
+            style={{ width: '7em' }}
+          />
+        </div>
+      </>
+    );
+  } else {
+    return null; // or some loading indicator, or whatever should be shown before the logo appears
+  }
+};
+
+export default RotatingLogo;

packages/testnet/frontend/src/panels/index.tsx

@@ -71,7 +71,12 @@ export const ResourcesSection = ({ planetId }: ResourcesSectionArgs) => {
   const celestiaAvailable = useGetCelestiaAvailable(planetId);
   const defencesCost = getBaseDefenceCost();
 
-  if (!compoundsLevels || !techLevels || !collectibleResource) {
+  if (
+    !compoundsLevels ||
+    !techLevels ||
+    !spendableResources ||
+    !collectibleResource
+  ) {
     // Centered CircularProgress
     return (
       <div
@@ -84,17 +89,27 @@ export const ResourcesSection = ({ planetId }: ResourcesSectionArgs) => {
       >
         <ResourcesTabs>
           <ResourcesTabList>
-            <CircularProgress />
+            <div
+              style={{
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                height: '100vh',
+                width: '100vh',
+              }}
+            >
+              <CircularProgress />
+            </div>
           </ResourcesTabList>
         </ResourcesTabs>
       </div>
     );
   }
 
   const totalResources: Resources = {
-    steel: spendableResources.steel + collectibleResource.steel,
-    quartz: spendableResources.quartz + collectibleResource.quartz,
-    tritium: spendableResources.tritium + collectibleResource.tritium,
+    steel: spendableResources.steel + (collectibleResource?.steel ?? 0),
+    quartz: spendableResources.quartz + (collectibleResource?.quartz ?? 0),
+    tritium: spendableResources.tritium + (collectibleResource?.tritium ?? 0),
   };
 
   return (

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

@@ -10,7 +10,7 @@ import { RowCentered } from '../components/ui/Row';
 import ConnectWalletButton from '../components/auth/ConnectWallet';
 import { GeneratePlanet } from '../components/buttons/GeneratePlanet';
 import { useGetPlanetPrice } from '../hooks/useGetPlanetPrice';
-// import WarningIcon from "@mui/icons-material/Warning";
+import RotatingLogo from '../components/ui/RotatingLogo';
 
 const MainWrapper = styled(ColumnCenter)`
   height: 100vh;
@@ -171,7 +171,7 @@ const GeneratePlanetView = ({ address }: PlanetViewProp) => {
   };
 
   if (price === undefined) {
-    return <CircularProgress />;
+    return <RotatingLogo />;
   }
 
   return (
@@ -196,7 +196,7 @@ const GeneratePlanetView = ({ address }: PlanetViewProp) => {
         {price !== undefined ? (
           (Number(price) / 10 ** 18).toFixed(6)
         ) : (
-          <CircularProgress size={24} />
+          <CircularProgress size={24} style={{ color: 'red' }} />
         )}{' '}
         ETH
       </PriceText>