From a9ee907ba1293cade2e91310b4880eb592592d69 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sat, 30 Mar 2024 17:22:30 +0000
Subject: [PATCH] interactive buy scenario

---
 app/page.module.css              |  2 +-
 components/FormAmount.module.css | 20 +++++++++++++++++---
 components/Prices.module.css     |  1 +
 components/Prices.tsx            | 32 ++++++++++++++++++++------------
 4 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/app/page.module.css b/app/page.module.css
index cf71c71..89583bd 100644
--- a/app/page.module.css
+++ b/app/page.module.css
@@ -14,7 +14,7 @@
 }
 
 .description {
-  font-size: clamp(1.1rem, 10vw, 1.75rem);
+  font-size: clamp(1.1rem, 10vw, 1.5rem);
 }
 
 .footer {
diff --git a/components/FormAmount.module.css b/components/FormAmount.module.css
index 9cccca7..fa13074 100644
--- a/components/FormAmount.module.css
+++ b/components/FormAmount.module.css
@@ -8,16 +8,30 @@
   padding-left: 0.2rem;
   padding-right: 0.2rem;
   text-align: center;
-  background-color: rgba(var(--foreground-rgb), 0.15);
+  background-color: rgba(var(--background-end-rgb), 0.4);
   border-radius: var(--border-radius);
 }
 
 .input:hover {
-  background-color: rgba(var(--foreground-rgb), 0.2);
+  background-color: rgba(var(--background-end-rgb), 0.5);
 }
 
 .input:focus-within {
   outline: none;
-  background-color: rgba(var(--foreground-rgb), 0.3);
+  background-color: rgba(var(--background-end-rgb), 0.9);
   color: rgb(var(--foreground-rgb-highlight));
 }
+
+@media (prefers-color-scheme: dark) {
+  .input {
+    background-color: rgba(var(--foreground-rgb), 0.15);
+  }
+
+  .input:hover {
+    background-color: rgba(var(--foreground-rgb), 0.2);
+  }
+
+  .input:focus-within {
+    background-color: rgba(var(--foreground-rgb), 0.3);
+  }
+}
diff --git a/components/Prices.module.css b/components/Prices.module.css
index 3248a75..1b69f7c 100644
--- a/components/Prices.module.css
+++ b/components/Prices.module.css
@@ -15,4 +15,5 @@
 .results h3 {
   margin-bottom: 1.5rem;
   font-size: 1.1rem;
+  min-height: 52px;
 }
diff --git a/components/Prices.tsx b/components/Prices.tsx
index f6a70fe..07d7100 100644
--- a/components/Prices.tsx
+++ b/components/Prices.tsx
@@ -8,7 +8,6 @@ import {
   tokens,
   ratioOceanToAsi,
   ratioAgixToAsi,
-  exampleBuyInUsd,
   ratioFetToAsi
 } from '@/constants'
 import { useState } from 'react'
@@ -19,6 +18,8 @@ import { Content } from '@/components/Content'
 export function Prices() {
   const [amountSwap, setAmountSwap] = useState(100)
   const [debouncedAmountSwap] = useDebounce(amountSwap, 500)
+  const [amountBuy, setAmountBuy] = useState(100)
+  const [debouncedAmountBuy] = useDebounce(amountBuy, 500)
 
   const { data: dataPrices } = useSWR(
     `/api/prices/?tokens=${tokens.toString()}`,
@@ -47,7 +48,8 @@ export function Prices() {
           <h3>
             Swapping{' '}
             <FormAmount amount={amountSwap} setAmount={setAmountSwap} /> OCEAN (
-            {formatNumber(debouncedAmountSwap * priceOcean, 'USD')}) gets you:
+            {formatNumber(debouncedAmountSwap * priceOcean, 'USD')}) right now
+            gets you:
           </h3>
 
           <Result
@@ -98,43 +100,49 @@ export function Prices() {
         </div>
 
         <div className={styles.results}>
-          <h3>Buying with ${exampleBuyInUsd} right now gets you:</h3>
+          <h3>
+            Buying with $
+            <FormAmount amount={amountBuy} setAmount={setAmountBuy} /> right now
+            gets you:
+          </h3>
           <Result
             tokenSymbol="OCEAN"
             tokenAddress="0x967da4048cd07ab37855c090aaf366e4ce1b9f48"
-            amount={priceOcean ? exampleBuyInUsd / priceOcean : 0}
+            amount={priceOcean ? debouncedAmountBuy / priceOcean : 0}
             amountAsi={
-              priceOcean ? (exampleBuyInUsd / priceOcean) * ratioOceanToAsi : 0
+              priceOcean
+                ? (debouncedAmountBuy / priceOcean) * ratioOceanToAsi
+                : 0
             }
             amountFiat={
               priceOcean
-                ? (exampleBuyInUsd / priceOcean) * ratioOceanToAsi * priceAsi
+                ? (debouncedAmountBuy / priceOcean) * ratioOceanToAsi * priceAsi
                 : 0
             }
           />
           <Result
             tokenSymbol="AGIX"
             tokenAddress="0x5b7533812759b45c2b44c19e320ba2cd2681b542"
-            amount={priceAgix ? exampleBuyInUsd / priceAgix : 0}
+            amount={priceAgix ? debouncedAmountBuy / priceAgix : 0}
             amountAsi={
-              priceAgix ? (exampleBuyInUsd / priceAgix) * ratioAgixToAsi : 0
+              priceAgix ? (debouncedAmountBuy / priceAgix) * ratioAgixToAsi : 0
             }
             amountFiat={
               priceAgix
-                ? (exampleBuyInUsd / priceAgix) * ratioAgixToAsi * priceAsi
+                ? (debouncedAmountBuy / priceAgix) * ratioAgixToAsi * priceAsi
                 : 0
             }
           />
           <Result
             tokenSymbol="FET"
             tokenAddress="0xaea46a60368a7bd060eec7df8cba43b7ef41ad85"
-            amount={priceFet ? exampleBuyInUsd / priceFet : 0}
+            amount={priceFet ? debouncedAmountBuy / priceFet : 0}
             amountAsi={
-              priceFet ? (exampleBuyInUsd / priceFet) * ratioFetToAsi : 0
+              priceFet ? (debouncedAmountBuy / priceFet) * ratioFetToAsi : 0
             }
             amountFiat={
               priceFet
-                ? (exampleBuyInUsd / priceFet) * ratioFetToAsi * priceAsi
+                ? (debouncedAmountBuy / priceFet) * ratioFetToAsi * priceAsi
                 : 0
             }
           />