more content

app/globals.css

@@ -41,6 +41,7 @@ body {
     rgb(var(--background-start-rgb));
   line-height: 1.5;
   min-height: 100vh;
+  height: 100%;
   display: flex;
   flex-direction: column;
   padding: 2rem;

components/Content/Content.module.css

@@ -24,9 +24,11 @@
 
 .calculationBase {
   border: 1px solid rgba(var(--foreground-rgb), 0.2);
+  border-bottom: none;
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   border-radius: var(--border-radius);
+  margin-top: 2rem;
 }
 
 .calculationBase li {
@@ -35,10 +37,6 @@
   font-size: 0.8rem;
 }
 
-.calculationBase li:first-child {
+.calculationBase li:nth-child(odd) {
   border-right: 1px solid rgba(var(--foreground-rgb), 0.2);
 }
-
-.calculationBase li:last-child {
-  border-bottom: none;
-}

components/Content/Content.tsx

@@ -11,13 +11,17 @@ export function Content({ prices }: Props) {
   return (
     <div className={styles.content}>
       <p>
-        Calculations are based on the{' '}
+        The displayed values should be seen as estimates. Except for the{' '}
         <a href="https://blog.oceanprotocol.com/ocean-protocol-is-joining-the-superintelligence-alliance-767c82693f24#3c8e">
           fixed ASI exchange rate
         </a>
-        , the fluctuating fiat values fetched from <a href="">Coingecko</a>, and
-        token swap quotes from <a href="https://uniswap.org">Uniswap</a> v3
-        routes.
+        , the fiat values fetched from <a href="">Coingecko</a> and the token
+        swap quotes from <a href="https://uniswap.org">Uniswap</a> v3 routes are
+        constantly changing.
+      </p>
+      <p>
+        There is no guarantee they reflect the value of your investment once the
+        actual ASI swap mechanism is released. Use at your own risk.
       </p>
 
       <ul className={styles.calculationBase}>
@@ -34,6 +38,10 @@ export function Content({ prices }: Props) {
         <li>
           1 Fet = {ratioFetToAsi} ASI
           <span className={styles.label}>fixed</span>
+          <br />= ${prices.fet}
+        </li>
+        <li>
+          1 ASI
           <br />= ${prices.asi}
         </li>
       </ul>

components/Prices.tsx

@@ -148,7 +148,14 @@ export function Prices() {
           />
         </div>
       </div>
-      <Content prices={{ ocean: priceOcean, agix: priceAgix, asi: priceAsi }} />
+      <Content
+        prices={{
+          ocean: priceOcean,
+          agix: priceAgix,
+          asi: priceAsi,
+          fet: priceFet
+        }}
+      />
     </>
   )
 }