validating style

app/layout.tsx

@@ -1,13 +1,6 @@
 import type { Metadata } from 'next'
-import {
-  Fira_Code,
-  Space_Grotesk,
-  Jost,
-  Fira_Sans,
-  Inter,
-  Hanken_Grotesk
-} from 'next/font/google'
-import './globals.css'
+import { Hanken_Grotesk } from 'next/font/google'
+import '@/styles/globals.css'
 
 const hankenGrotesk = Hanken_Grotesk({
   subsets: ['latin'],

components/CalculationBaseOutput/CalculationBase.module.css

@@ -16,13 +16,7 @@
   font-size: 0.9rem;
 }
 
-.label {
-  font-size: 0.65rem;
-  color: rgba(var(--foreground-rgb), 0.6);
-  border: 1px solid rgba(var(--foreground-rgb), 0.2);
-  border-radius: var(--border-radius);
-  padding: 0.1rem 0.3rem;
-  margin-left: 0.2rem;
-  margin-right: 0.2rem;
-  vertical-align: middle;
+.calculationBase p {
+  display: flex;
+  align-items: center;
 }

components/CalculationBaseOutput/CalculationBase.tsx

@@ -3,30 +3,37 @@
 import { ratioOceanToAsi, ratioAgixToAsi, ratioFetToAsi } from '@/constants'
 import styles from './CalculationBase.module.css'
 import { usePrices } from '@/hooks'
+import { Label } from '../Label'
 
 export function CalculationBase() {
-  const { prices } = usePrices()
+  const { prices, isValidating } = usePrices()
 
   return (
     <ul className={styles.calculationBase}>
       <li>
-        1 ASI
-        <br />= ${prices.asi}
+        <p>1 ASI</p>
+        <p className={isValidating ? 'isValidating' : ''}>= ${prices.asi}</p>
       </li>
       <li>
-        1 Fet = {ratioFetToAsi} ASI
-        <span className={styles.label}>fixed</span>
-        <br />= ${prices.fet}
+        <p>
+          1 Fet = {ratioFetToAsi} ASI
+          <Label>fixed</Label>
+        </p>
+        <p className={isValidating ? 'isValidating' : ''}>= ${prices.fet}</p>
       </li>
       <li>
-        1 OCEAN = {ratioOceanToAsi} ASI
-        <span className={styles.label}>fixed</span>
-        <br />= ${prices.ocean}
+        <p>
+          1 OCEAN = {ratioOceanToAsi} ASI
+          <Label>fixed</Label>
+        </p>
+        <p className={isValidating ? 'isValidating' : ''}>= ${prices.ocean}</p>
       </li>
       <li>
-        1 AGIX = {ratioAgixToAsi} ASI
-        <span className={styles.label}>fixed</span>
-        <br />= ${prices.agix}
+        <p>
+          1 AGIX = {ratioAgixToAsi} ASI
+          <Label>fixed</Label>
+        </p>
+        <p className={isValidating ? 'isValidating' : ''}>= ${prices.agix}</p>
       </li>
     </ul>
   )

components/Label/Label.module.css

@@ -0,0 +1,8 @@
+.label {
+  font-size: 0.65rem;
+  color: rgba(var(--foreground-rgb), 0.6);
+  border: 1px solid rgba(var(--foreground-rgb), 0.15);
+  border-radius: var(--border-radius);
+  padding: 0.05rem 0.3rem;
+  margin: 0 0.2rem;
+}

components/Label/Label.tsx

@@ -0,0 +1,5 @@
+import styles from './Label.module.css'
+
+export function Label({ children }: { children: React.ReactNode }) {
+  return <span className={styles.label}>{children}</span>
+}

components/Label/index.tsx

@@ -0,0 +1 @@
+export * from './Label'

components/ResultRow/ResultRow.module.css

@@ -15,11 +15,6 @@
   gap: 0.5rem;
   align-items: center;
   width: 100%;
-  margin-bottom: 0.25rem;
-}
-
-.resultLine:last-child {
-  margin-bottom: 0;
 }
 
 .fiat {
@@ -63,19 +58,3 @@
     filter: grayscale(1);
   }
 }
-
-.isValidating {
-  animation: flicker 2s infinite ease-out forwards;
-}
-
-@keyframes flicker {
-  0% {
-    opacity: 0.25;
-  }
-  50% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0.25;
-  }
-}

components/ResultRow/ResultRow.tsx

@@ -24,11 +24,7 @@ export function Result({
 }: Props) {
   return (
     <div className={styles.result}>
-      <div
-        className={`${styles.resultLine} ${
-          isValidating ? styles.isValidating : ''
-        }`}
-      >
+      <div className={styles.resultLine}>
         <span className={styles.logo} data-symbol={tokenSymbol}>
           <Image
             src={`https://tokens.1inch.io/${tokenAddress}.png`}
@@ -38,7 +34,9 @@ export function Result({
           />
         </span>
 
-        <span>{formatNumber(amount || 0, tokenSymbol)}</span>
+        <span className={isValidating ? 'isValidating' : ''}>
+          {formatNumber(amount || 0, tokenSymbol)}
+        </span>
 
         {amountOriginalFiat ? (
           <span className={styles.fiat}>
@@ -46,16 +44,17 @@ export function Result({
           </span>
         ) : null}
       </div>
-      <div
-        className={`${styles.resultLine} ${
-          isValidating ? styles.isValidating : ''
-        }`}
-      >
+      <div className={styles.resultLine}>
         <ArrowRightIcon className={styles.iconArrow} />
-        <strong title={`${amountAsi}`}>
+        <strong
+          title={`${amountAsi}`}
+          className={isValidating ? 'isValidating' : ''}
+        >
           {formatNumber(amountAsi || 0, 'ASI')}
         </strong>
-        <strong className={styles.fiat}>
+        <strong
+          className={`${styles.fiat} ${isValidating ? 'isValidating' : ''}`}
+        >
           {formatNumber(amountFiat || 0, 'USD')}
         </strong>
       </div>

components/Strategies/Buy.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { ratioOceanToAsi, ratioAgixToAsi, ratioFetToAsi } from '@/constants'
-import { Result } from '../ResultRow'
+import { Result } from '@/components/ResultRow'
 import { useState } from 'react'
 import { useDebounce } from 'use-debounce'
 import stylesShared from './styles.module.css'
@@ -9,7 +9,7 @@ import { usePrices } from '@/hooks'
 import { FormAmount } from '@/components/FormAmount'
 
 export function Buy() {
-  const { prices, isValidating } = usePrices()
+  const { prices, isValidating, isLoading } = usePrices()
   const [amount, setAmount] = useState(100)
   const [debouncedAmount] = useDebounce(amount, 500)
 

components/Strategies/Swap.tsx

@@ -36,7 +36,7 @@ export function Swap() {
   return (
     <div className={stylesShared.results}>
       <h3 className={stylesShared.title}>
-        Swapping{' '}
+        Holding or swapping{' '}
         <FormAmount
           amount={amount}
           token={token}

hooks/use-prices.tsx

@@ -7,8 +7,9 @@ import useSWR from 'swr'
 export function usePrices(): {
   prices: { ocean: number; fet: number; agix: number; asi: number }
   isValidating: boolean
+  isLoading: boolean
 } {
-  const { data, isValidating } = useSWR(
+  const { data, isValidating, isLoading } = useSWR(
     `/api/prices/?tokens=${tokens.toString()}`,
     fetcher
   )
@@ -18,5 +19,5 @@ export function usePrices(): {
   const agix = data?.[tokens[2]]?.usd || 0
   const asi = fet
 
-  return { prices: { ocean, fet, agix, asi }, isValidating }
+  return { prices: { ocean, fet, agix, asi }, isValidating, isLoading }
 }

styles/_animations.css

@@ -0,0 +1,15 @@
+.isValidating {
+  animation: flicker 2s infinite ease-out;
+}
+
+@keyframes flicker {
+  0% {
+    opacity: 0.1;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.1;
+  }
+}

styles/_variables.css

@@ -26,44 +26,3 @@
     );
   }
 }
-
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-html,
-body {
-  max-width: 100vw;
-  overflow-x: hidden;
-  font-family: var(--font-hanken-grotesk);
-  text-rendering: optimizeLegibility;
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: var(--background-gradient) rgb(var(--background-rgb));
-  line-height: 1.5;
-  min-height: 100vh;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  padding: 2rem;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-ul {
-  list-style: none;
-  padding: 0;
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-}

styles/globals.css

@@ -0,0 +1,44 @@
+@import './_variables.css';
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+  font-family: var(--font-hanken-grotesk);
+  text-rendering: optimizeLegibility;
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: var(--background-gradient) rgb(var(--background-rgb));
+  line-height: 1.5;
+  min-height: 100vh;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding: 2rem;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+}
+
+@import './_animations.css';