reorg

app/page.module.css

@@ -14,12 +14,13 @@
 }
 
 .description {
-  margin-bottom: 2rem;
   font-size: clamp(1.1rem, 10vw, 1.75rem);
 }
 
 .footer {
-  margin-top: 2rem;
   flex-shrink: 0;
   font-size: 0.8rem;
+  width: 100%;
+  max-width: calc(var(--max-width) * 1.5);
+  margin: 3rem auto 0 auto;
 }

app/page.tsx

@@ -5,12 +5,16 @@ import { metadata } from './layout'
 export default function Home() {
   return (
     <>
-      <main className={styles.main}>
+      <header>
         <h1 className={styles.title}>{`${metadata.title}`}</h1>
         <p className={styles.description}>{`${metadata.description}`}</p>
+      </header>
+      <main className={styles.main}>
         <Prices />
       </main>
-      <footer className={styles.footer}>Send ❤️ to krema.eth</footer>
+      <footer className={styles.footer}>
+        Send ❤️ & meme coins to krema.eth
+      </footer>
     </>
   )
 }

components/Prices.module.css

@@ -13,6 +13,6 @@
 }
 
 .results h3 {
-  margin-bottom: 1rem;
+  margin-bottom: 1.5rem;
   font-size: 1.1rem;
 }

components/Prices.tsx

@@ -48,35 +48,6 @@ export function Prices() {
   return (
     <>
       <div className={styles.grid}>
-        <div className={styles.results}>
-          <h3>Buying with ${exampleBuyInUsd} right now gets you:</h3>
-          <Result
-            tokenSymbol="OCEAN"
-            tokenAddress="0x967da4048cd07ab37855c090aaf366e4ce1b9f48"
-            amount={exampleBuyInUsd / priceOcean}
-            amountAsi={(exampleBuyInUsd / priceOcean) * ratioOceanToAsi}
-            amountFiat={
-              (exampleBuyInUsd / priceOcean) * ratioOceanToAsi * priceAsi
-            }
-          />
-          <Result
-            tokenSymbol="AGIX"
-            tokenAddress="0x5b7533812759b45c2b44c19e320ba2cd2681b542"
-            amount={exampleBuyInUsd / priceAgix}
-            amountAsi={(exampleBuyInUsd / priceAgix) * ratioAgixToAsi}
-            amountFiat={
-              (exampleBuyInUsd / priceAgix) * ratioAgixToAsi * priceAsi
-            }
-          />
-          <Result
-            tokenSymbol="FET"
-            tokenAddress="0xaea46a60368a7bd060eec7df8cba43b7ef41ad85"
-            amount={exampleBuyInUsd / priceFet}
-            amountAsi={(exampleBuyInUsd / priceFet) * ratioFetToAsi}
-            amountFiat={(exampleBuyInUsd / priceFet) * ratioFetToAsi * priceAsi}
-          />
-        </div>
-
         <div className={styles.results}>
           <h3>
             Swapping{' '}
@@ -131,6 +102,49 @@ export function Prices() {
             }
           />
         </div>
+
+        <div className={styles.results}>
+          <h3>Buying with ${exampleBuyInUsd} right now gets you:</h3>
+          <Result
+            tokenSymbol="OCEAN"
+            tokenAddress="0x967da4048cd07ab37855c090aaf366e4ce1b9f48"
+            amount={priceOcean ? exampleBuyInUsd / priceOcean : 0}
+            amountAsi={
+              priceOcean ? (exampleBuyInUsd / priceOcean) * ratioOceanToAsi : 0
+            }
+            amountFiat={
+              priceOcean
+                ? (exampleBuyInUsd / priceOcean) * ratioOceanToAsi * priceAsi
+                : 0
+            }
+          />
+          <Result
+            tokenSymbol="AGIX"
+            tokenAddress="0x5b7533812759b45c2b44c19e320ba2cd2681b542"
+            amount={priceAgix ? exampleBuyInUsd / priceAgix : 0}
+            amountAsi={
+              priceAgix ? (exampleBuyInUsd / priceAgix) * ratioAgixToAsi : 0
+            }
+            amountFiat={
+              priceAgix
+                ? (exampleBuyInUsd / priceAgix) * ratioAgixToAsi * priceAsi
+                : 0
+            }
+          />
+          <Result
+            tokenSymbol="FET"
+            tokenAddress="0xaea46a60368a7bd060eec7df8cba43b7ef41ad85"
+            amount={priceFet ? exampleBuyInUsd / priceFet : 0}
+            amountAsi={
+              priceFet ? (exampleBuyInUsd / priceFet) * ratioFetToAsi : 0
+            }
+            amountFiat={
+              priceFet
+                ? (exampleBuyInUsd / priceFet) * ratioFetToAsi * priceAsi
+                : 0
+            }
+          />
+        </div>
       </div>
       <Content prices={{ ocean: priceOcean, agix: priceAgix, asi: priceAsi }} />
     </>

components/Result.tsx

@@ -29,12 +29,14 @@ export function Result({
           />
         </span>
 
-        {formatNumber(amount, tokenSymbol)}
+        {formatNumber(amount || 0, tokenSymbol)}
       </p>
       <p className={styles.conversion}>
         →{' '}
-        <strong title={`${amountAsi}`}>{formatNumber(amountAsi, 'ASI')}</strong>{' '}
+        <strong title={`${amountAsi}`}>
-        = <strong>{formatNumber(amountFiat, 'USD')}</strong>
+          {formatNumber(amountAsi || 0, 'ASI')}
+        </strong>{' '}
+        = <strong>{formatNumber(amountFiat || 0, 'USD')}</strong>
       </p>
     </div>
   )