From e5153b2730bb322e85a277f70c24bf81db37c9bb Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sun, 31 Mar 2024 04:32:11 +0100
Subject: [PATCH] add isValidating behavior

---
 .../CalculationBaseOutput/CalculationBase.tsx |  2 +-
 components/FormAmount/FormAmount.tsx          |  2 +-
 components/FormAmount/Inputs/InputToken.tsx   |  2 +-
 components/FormAmount/types.ts                |  2 +-
 components/ResultRow/ResultRow.module.css     | 16 +++++++++++
 components/ResultRow/ResultRow.tsx            | 16 ++++++++---
 components/Strategies/Buy.tsx                 |  5 +++-
 components/Strategies/Swap.tsx                | 27 ++++++++++++-------
 components/Strategies/styles.module.css       | 15 ++---------
 hooks/use-prices.tsx                          | 15 ++++++-----
 10 files changed, 66 insertions(+), 36 deletions(-)

diff --git a/components/CalculationBaseOutput/CalculationBase.tsx b/components/CalculationBaseOutput/CalculationBase.tsx
index 0e84a47..a781188 100644
--- a/components/CalculationBaseOutput/CalculationBase.tsx
+++ b/components/CalculationBaseOutput/CalculationBase.tsx
@@ -5,7 +5,7 @@ import styles from './CalculationBase.module.css'
 import { usePrices } from '@/hooks'
 
 export function CalculationBase() {
-  const prices = usePrices()
+  const { prices } = usePrices()
 
   return (
     <ul className={styles.calculationBase}>
diff --git a/components/FormAmount/FormAmount.tsx b/components/FormAmount/FormAmount.tsx
index 17cc4a6..587769b 100644
--- a/components/FormAmount/FormAmount.tsx
+++ b/components/FormAmount/FormAmount.tsx
@@ -13,7 +13,7 @@ export function FormAmount({
 }: {
   amount: number
   setAmount: Dispatch<SetStateAction<number>>
-  token: Token
+  token: Token | string
   setToken?: Dispatch<SetStateAction<Token>>
   isFiat?: boolean
 }) {
diff --git a/components/FormAmount/Inputs/InputToken.tsx b/components/FormAmount/Inputs/InputToken.tsx
index 146e80c..ac110ee 100644
--- a/components/FormAmount/Inputs/InputToken.tsx
+++ b/components/FormAmount/Inputs/InputToken.tsx
@@ -8,7 +8,7 @@ export function InputToken({
   setToken,
   isFiat
 }: {
-  token: Token
+  token: Token | string
   isFiat?: boolean
   setToken?: Dispatch<SetStateAction<Token>>
 }) {
diff --git a/components/FormAmount/types.ts b/components/FormAmount/types.ts
index e7d0690..5cb3977 100644
--- a/components/FormAmount/types.ts
+++ b/components/FormAmount/types.ts
@@ -1 +1 @@
-export type Token = 'ocean' | 'fet' | 'agix' | 'usd' | undefined
+export type Token = 'ocean' | 'fet' | 'agix' | undefined
diff --git a/components/ResultRow/ResultRow.module.css b/components/ResultRow/ResultRow.module.css
index a0807c3..9745b45 100644
--- a/components/ResultRow/ResultRow.module.css
+++ b/components/ResultRow/ResultRow.module.css
@@ -56,3 +56,19 @@
     filter: grayscale(1);
   }
 }
+
+.isValidating {
+  animation: flicker 2s infinite ease-out forwards;
+}
+
+@keyframes flicker {
+  0% {
+    opacity: 0.25;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.25;
+  }
+}
diff --git a/components/ResultRow/ResultRow.tsx b/components/ResultRow/ResultRow.tsx
index 6de30ee..59897f0 100644
--- a/components/ResultRow/ResultRow.tsx
+++ b/components/ResultRow/ResultRow.tsx
@@ -10,6 +10,7 @@ type Props = {
   amountAsi: number
   amountFiat: number
   amountOriginalFiat?: number
+  isValidating: boolean
 }
 
 export function Result({
@@ -18,11 +19,16 @@ export function Result({
   amount,
   amountAsi,
   amountFiat,
-  amountOriginalFiat
+  amountOriginalFiat,
+  isValidating
 }: Props) {
   return (
     <div className={styles.result}>
-      <div className={styles.resultLine}>
+      <div
+        className={`${styles.resultLine} ${
+          isValidating ? styles.isValidating : ''
+        }`}
+      >
         <span className={styles.logo} data-symbol={tokenSymbol}>
           <Image
             src={`https://tokens.1inch.io/${tokenAddress}.png`}
@@ -40,7 +46,11 @@ export function Result({
           </span>
         ) : null}
       </div>
-      <div className={styles.resultLine}>
+      <div
+        className={`${styles.resultLine} ${
+          isValidating ? styles.isValidating : ''
+        }`}
+      >
         <ArrowRightIcon className={styles.iconArrow} />
         <strong title={`${amountAsi}`}>
           {formatNumber(amountAsi || 0, 'ASI')}
diff --git a/components/Strategies/Buy.tsx b/components/Strategies/Buy.tsx
index 0386953..29f5534 100644
--- a/components/Strategies/Buy.tsx
+++ b/components/Strategies/Buy.tsx
@@ -9,7 +9,7 @@ import { usePrices } from '@/hooks'
 import { FormAmount } from '@/components/FormAmount'
 
 export function Buy() {
-  const prices = usePrices()
+  const { prices, isValidating } = usePrices()
   const [amount, setAmount] = useState(100)
   const [debouncedAmount] = useDebounce(amount, 500)
 
@@ -32,6 +32,7 @@ export function Buy() {
             ? (debouncedAmount / prices.ocean) * ratioOceanToAsi * prices.asi
             : 0
         }
+        isValidating={isValidating}
       />
       <Result
         tokenSymbol="AGIX"
@@ -45,6 +46,7 @@ export function Buy() {
             ? (debouncedAmount / prices.agix) * ratioAgixToAsi * prices.asi
             : 0
         }
+        isValidating={isValidating}
       />
       <Result
         tokenSymbol="FET"
@@ -58,6 +60,7 @@ export function Buy() {
             ? (debouncedAmount / prices.fet) * ratioFetToAsi * prices.asi
             : 0
         }
+        isValidating={isValidating}
       />
     </div>
   )
diff --git a/components/Strategies/Swap.tsx b/components/Strategies/Swap.tsx
index 49a4cd9..88b2fc5 100644
--- a/components/Strategies/Swap.tsx
+++ b/components/Strategies/Swap.tsx
@@ -16,20 +16,22 @@ import { usePrices } from '@/hooks'
 import { FormAmount, type Token } from '@/components/FormAmount'
 
 export function Swap() {
-  const prices = usePrices()
+  const { prices, isValidating: isValidatingPrices } = usePrices()
   const [amount, setAmount] = useState(100)
   const [debouncedAmount] = useDebounce(amount, 500)
   const [token, setToken] = useState<Token>('ocean')
 
-  const { data: dataSwapOceanToAgix } = useSWR(
-    `/api/quote/?tokenIn=${tokens[0]}&tokenOut=${tokens[2]}&amountIn=${debouncedAmount}`,
-    fetcher
-  )
+  const { data: dataSwapOceanToAgix, isValidating: isValidatingOceanToAgix } =
+    useSWR(
+      `/api/quote/?tokenIn=${tokens[0]}&tokenOut=${tokens[2]}&amountIn=${debouncedAmount}`,
+      fetcher
+    )
 
-  const { data: dataSwapOceanToFet } = useSWR(
-    `/api/quote/?tokenIn=${tokens[0]}&tokenOut=${tokens[1]}&amountIn=${debouncedAmount}`,
-    fetcher
-  )
+  const { data: dataSwapOceanToFet, isValidating: isValidatingOceanToFet } =
+    useSWR(
+      `/api/quote/?tokenIn=${tokens[0]}&tokenOut=${tokens[1]}&amountIn=${debouncedAmount}`,
+      fetcher
+    )
 
   return (
     <div className={stylesShared.results}>
@@ -51,6 +53,11 @@ export function Swap() {
         amountAsi={debouncedAmount * ratioOceanToAsi}
         amountFiat={debouncedAmount * ratioOceanToAsi * prices.asi}
         amountOriginalFiat={token ? debouncedAmount * prices[token] : undefined}
+        isValidating={
+          isValidatingOceanToAgix ||
+          isValidatingOceanToFet ||
+          isValidatingPrices
+        }
       />
 
       <Result
@@ -74,6 +81,7 @@ export function Swap() {
           (dataSwapOceanToAgix?.amountOut /
             Number(`1e${dataSwapOceanToAgix?.decimals}`) || 0) * prices.agix
         }
+        isValidating={isValidatingOceanToAgix || isValidatingPrices}
       />
 
       <Result
@@ -95,6 +103,7 @@ export function Swap() {
           (dataSwapOceanToFet?.amountOut /
             Number(`1e${dataSwapOceanToFet?.decimals}`) || 0) * prices.asi
         }
+        isValidating={isValidatingOceanToFet || isValidatingPrices}
       />
     </div>
   )
diff --git a/components/Strategies/styles.module.css b/components/Strategies/styles.module.css
index 52f936b..a79bd4d 100644
--- a/components/Strategies/styles.module.css
+++ b/components/Strategies/styles.module.css
@@ -1,23 +1,12 @@
 .results {
   border: 1px solid rgba(var(--foreground-rgb), 0.2);
   border-radius: var(--border-radius);
-  padding: 1.25rem 1.5rem;
+  padding: 1.5rem 2rem;
 }
 
-/* .results form {
-  border-color: transparent;
-}
-
-.results input {
-  background: none;
-}
-
-.results:hover form {
-  border-color: rgba(var(--foreground-rgb), 0.2);
-} */
-
 .title {
   margin-bottom: 1.5rem;
   font-size: 1.2rem;
   color: rgb(var(--foreground-rgb-highlight));
+  min-height: 58px;
 }
diff --git a/hooks/use-prices.tsx b/hooks/use-prices.tsx
index 0ab4dcf..6ec0c0c 100644
--- a/hooks/use-prices.tsx
+++ b/hooks/use-prices.tsx
@@ -4,16 +4,19 @@ import { tokens } from '@/constants'
 import { fetcher } from '@/utils'
 import useSWR from 'swr'
 
-export function usePrices(): { [key: string]: number } {
-  const { data: dataPrices } = useSWR(
+export function usePrices(): {
+  prices: { ocean: number; fet: number; agix: number; asi: number }
+  isValidating: boolean
+} {
+  const { data, isValidating } = useSWR(
     `/api/prices/?tokens=${tokens.toString()}`,
     fetcher
   )
 
-  const ocean = dataPrices?.[tokens[0]]?.usd || 0
-  const fet = dataPrices?.[tokens[1]]?.usd || 0
-  const agix = dataPrices?.[tokens[2]]?.usd || 0
+  const ocean = data?.[tokens[0]]?.usd || 0
+  const fet = data?.[tokens[1]]?.usd || 0
+  const agix = data?.[tokens[2]]?.usd || 0
   const asi = fet
 
-  return { ocean, fet, agix, asi }
+  return { prices: { ocean, fet, agix, asi }, isValidating }
 }