tweaks

app/api/quote/route.ts

@@ -7,7 +7,6 @@ const apiUrl = 'https://api.1inch.dev/swap/v6.0/1/quote'
 const config: RequestInit = {
   headers: {
     Authorization: `Bearer ${process.env.ONEINCH_API_KEY}`,
-    accept: 'application/json',
     'content-type': 'application/json'
   },
   method: 'GET',
@@ -24,18 +23,27 @@ export async function GET(request: NextRequest) {
     return Response.json(null, { status: 400 })
   }
 
-  let data
   const url = `${apiUrl}/?src=${src}&dst=${dst}&amount=${amount}&includeTokensInfo=true&includeProtocols=true`
+  let data
+  let status
 
   try {
     const res = await fetch(url, config)
     const json = await res.json()
 
     data = json
+    status = res.status
   } catch (error: unknown) {
     console.error((error as Error).message)
     data = null
+    status = 500
   }
 
-  return Response.json(data)
+  return new Response(JSON.stringify(data), {
+    status,
+    headers: {
+      'Content-Type': 'application/json',
+      'Cache-Control': 'public, s-maxage=10'
+    }
+  })
 }

app/layout.tsx

@@ -5,8 +5,8 @@ import './globals.css'
 const firaCode = Fira_Code({ subsets: ['latin'] })
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app'
+  title: 'OCEAN + AGIX + FET = ASI',
+  description: 'Calculate how much ASI you get for your OCEAN, AGIX, or FET'
 }
 
 export default function RootLayout({

features/Prices/components/Prices.module.css

@@ -2,17 +2,6 @@
   margin-top: 2rem;
 }
 
-.results h3,
-.results p {
+.results h3 {
   margin-bottom: 1rem;
 }
-
-.results p {
-  padding-left: 100px;
-}
-
-.results p span {
-  margin-left: -100px;
-  min-width: 90px;
-  display: inline-block;
-}

features/Prices/components/Result.module.css

@@ -0,0 +1,6 @@
+.result {
+  margin-bottom: 1rem;
+}
+
+.amount {
+}

features/Prices/components/Result.tsx

@@ -1,3 +1,6 @@
+import { formatCurrency } from '@coingecko/cryptoformat'
+import styles from './Result.module.css'
+
 type Props = {
   symbol: string
   amount: number
@@ -5,12 +8,23 @@ type Props = {
   amountFiat: number
 }
 
+function formatPrice(price: number, currency: string) {
+  return formatCurrency(price, currency, 'en', false, {
+    decimalPlaces: 3,
+    significantFigures: 5
+  })
+}
+
 export function Result({ symbol, amount, amountAsi, amountFiat }: Props) {
   return (
-    <p>
-      <span>{symbol}</span> {amount} {symbol}, convertible to{' '}
-      <strong>{amountAsi} ASI</strong> currently worth{' '}
-      <strong>${amountFiat.toFixed(2)}</strong>.
-    </p>
+    <div className={styles.result}>
+      <p>
+        {formatPrice(amount, symbol)} →{' '}
+        <strong title={`${amountAsi}`}>{formatPrice(amountAsi, 'ASI')}</strong>
+      </p>
+      <p>
+        = <strong>{formatPrice(amountFiat, 'USD')}</strong>
+      </p>
+    </div>
   )
 }

package-lock.json

@@ -8,6 +8,7 @@
       "name": "ocean-fetch-price-difference",
       "version": "0.1.0",
       "dependencies": {
+        "@coingecko/cryptoformat": "^0.8.1",
         "next": "14.1.4",
         "react": "^18",
         "react-dom": "^18",
@@ -43,6 +44,14 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@coingecko/cryptoformat": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@coingecko/cryptoformat/-/cryptoformat-0.8.1.tgz",
+      "integrity": "sha512-pBxGpae1HIX0is1jFNB9U5RYv2OfRTKu6bcKM9BlhlfR/5TMK1m569Narra8pqlopg3MTHJ9B71zGqUbv56row==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@coingecko/cryptoformat": "^0.8.1",
     "next": "14.1.4",
     "react": "^18",
     "react-dom": "^18",