From 1aa4ee1afc79d65f30e35ce6164f9cab960b9f37 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sun, 31 Mar 2024 04:03:37 +0100
Subject: [PATCH] better fiat representation

---
 app/globals.css                               |  2 +-
 .../CalculationBase.module.css                |  2 +-
 components/ResultRow/ResultRow.module.css     | 20 ++++++++++---
 components/ResultRow/ResultRow.tsx            | 29 +++++++++++++------
 components/Strategies/Swap.tsx                | 14 +++++++--
 components/Strategies/styles.module.css       |  3 +-
 6 files changed, 50 insertions(+), 20 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 25bdf84..be0f3fc 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,5 +1,5 @@
 :root {
-  --max-width: 42rem;
+  --max-width: 40rem;
   --border-radius: 0.3rem;
 
   --foreground-rgb: 20, 20, 20;
diff --git a/components/CalculationBaseOutput/CalculationBase.module.css b/components/CalculationBaseOutput/CalculationBase.module.css
index 0021ebe..6e571ca 100644
--- a/components/CalculationBaseOutput/CalculationBase.module.css
+++ b/components/CalculationBaseOutput/CalculationBase.module.css
@@ -1,6 +1,6 @@
 .calculationBase {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(235px, 1fr));
   justify-content: center;
   border-top: 1px solid rgba(var(--foreground-rgb), 0.2);
   border-left: 1px solid rgba(var(--foreground-rgb), 0.2);
diff --git a/components/ResultRow/ResultRow.module.css b/components/ResultRow/ResultRow.module.css
index 15e9acc..a0807c3 100644
--- a/components/ResultRow/ResultRow.module.css
+++ b/components/ResultRow/ResultRow.module.css
@@ -6,13 +6,25 @@
   margin-bottom: 0;
 }
 
-.conversion {
-  padding-left: calc(24px + 0.5rem);
+.resultLine {
+  display: inline-grid;
+  grid-template-columns: 24px 1fr 2fr;
+  gap: 0.5rem;
+  align-items: center;
+  width: 100%;
+  margin-bottom: 0.25rem;
+}
+
+.fiat {
+  color: rgba(var(--foreground-rgb), 0.6);
+}
+
+.iconArrow {
+  margin-left: 0.25rem;
 }
 
 .logo {
-  margin-right: 0.5rem;
-  margin-top: -0.2rem;
+  margin-top: -0.15rem;
   vertical-align: middle;
   display: inline-flex;
   align-items: center;
diff --git a/components/ResultRow/ResultRow.tsx b/components/ResultRow/ResultRow.tsx
index 47ae222..6de30ee 100644
--- a/components/ResultRow/ResultRow.tsx
+++ b/components/ResultRow/ResultRow.tsx
@@ -1,5 +1,6 @@
 import styles from './ResultRow.module.css'
 import { formatNumber } from '@/utils'
+import { ArrowRightIcon } from '@radix-ui/react-icons'
 import Image from 'next/image'
 
 type Props = {
@@ -8,6 +9,7 @@ type Props = {
   amount: number
   amountAsi: number
   amountFiat: number
+  amountOriginalFiat?: number
 }
 
 export function Result({
@@ -15,11 +17,12 @@ export function Result({
   tokenAddress,
   amount,
   amountAsi,
-  amountFiat
+  amountFiat,
+  amountOriginalFiat
 }: Props) {
   return (
     <div className={styles.result}>
-      <p>
+      <div className={styles.resultLine}>
         <span className={styles.logo} data-symbol={tokenSymbol}>
           <Image
             src={`https://tokens.1inch.io/${tokenAddress}.png`}
@@ -29,15 +32,23 @@ export function Result({
           />
         </span>
 
-        {formatNumber(amount || 0, tokenSymbol)}
-      </p>
-      <p className={styles.conversion}>
-        →{' '}
+        <span>{formatNumber(amount || 0, tokenSymbol)}</span>
+
+        {amountOriginalFiat ? (
+          <span className={styles.fiat}>
+            {formatNumber(amountOriginalFiat || 0, 'USD')}
+          </span>
+        ) : null}
+      </div>
+      <div className={styles.resultLine}>
+        <ArrowRightIcon className={styles.iconArrow} />
         <strong title={`${amountAsi}`}>
           {formatNumber(amountAsi || 0, 'ASI')}
-        </strong>{' '}
-        = <strong>{formatNumber(amountFiat || 0, 'USD')}</strong>
-      </p>
+        </strong>
+        <strong className={styles.fiat}>
+          {formatNumber(amountFiat || 0, 'USD')}
+        </strong>
+      </div>
     </div>
   )
 }
diff --git a/components/Strategies/Swap.tsx b/components/Strategies/Swap.tsx
index b41eec8..49a4cd9 100644
--- a/components/Strategies/Swap.tsx
+++ b/components/Strategies/Swap.tsx
@@ -6,7 +6,7 @@ import {
   ratioFetToAsi,
   tokens
 } from '@/constants'
-import { fetcher, formatNumber } from '@/utils'
+import { fetcher } from '@/utils'
 import { Result } from '@/components/ResultRow'
 import stylesShared from './styles.module.css'
 import { useState } from 'react'
@@ -41,8 +41,7 @@ export function Swap() {
           setAmount={setAmount}
           // setToken={setToken}
         />{' '}
-        ({formatNumber(amount * prices[token || 'ocean'], 'USD')}) right now
-        gets you:
+        right now gets you:
       </h3>
 
       <Result
@@ -51,6 +50,7 @@ export function Swap() {
         amount={debouncedAmount}
         amountAsi={debouncedAmount * ratioOceanToAsi}
         amountFiat={debouncedAmount * ratioOceanToAsi * prices.asi}
+        amountOriginalFiat={token ? debouncedAmount * prices[token] : undefined}
       />
 
       <Result
@@ -70,6 +70,10 @@ export function Swap() {
           ratioAgixToAsi *
           prices.asi
         }
+        amountOriginalFiat={
+          (dataSwapOceanToAgix?.amountOut /
+            Number(`1e${dataSwapOceanToAgix?.decimals}`) || 0) * prices.agix
+        }
       />
 
       <Result
@@ -87,6 +91,10 @@ export function Swap() {
           (dataSwapOceanToFet?.amountOut /
             Number(`1e${dataSwapOceanToFet?.decimals}`) || 0) * prices.asi
         }
+        amountOriginalFiat={
+          (dataSwapOceanToFet?.amountOut /
+            Number(`1e${dataSwapOceanToFet?.decimals}`) || 0) * prices.asi
+        }
       />
     </div>
   )
diff --git a/components/Strategies/styles.module.css b/components/Strategies/styles.module.css
index 9bd491a..52f936b 100644
--- a/components/Strategies/styles.module.css
+++ b/components/Strategies/styles.module.css
@@ -18,7 +18,6 @@
 
 .title {
   margin-bottom: 1.5rem;
-  font-size: 1.1rem;
-  min-height: 52px;
+  font-size: 1.2rem;
   color: rgb(var(--foreground-rgb-highlight));
 }