From a9c5c20bc2967925b4265fa43114f950d3ce9ca5 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Fri, 29 Mar 2024 20:37:30 +0000
Subject: [PATCH] tweaks

---
 app/api/quote/route.ts                       | 14 +++++++++---
 app/layout.tsx                               |  4 ++--
 features/Prices/components/Prices.module.css | 13 +----------
 features/Prices/components/Result.module.css |  6 +++++
 features/Prices/components/Result.tsx        | 24 ++++++++++++++++----
 package-lock.json                            |  9 ++++++++
 package.json                                 |  1 +
 7 files changed, 49 insertions(+), 22 deletions(-)
 create mode 100644 features/Prices/components/Result.module.css

diff --git a/app/api/quote/route.ts b/app/api/quote/route.ts
index c8c37d7..373d5ce 100644
--- a/app/api/quote/route.ts
+++ b/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'
+    }
+  })
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index 2f3fc68..9a2b00f 100644
--- a/app/layout.tsx
+++ b/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({
diff --git a/features/Prices/components/Prices.module.css b/features/Prices/components/Prices.module.css
index f280466..399056e 100644
--- a/features/Prices/components/Prices.module.css
+++ b/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;
-}
diff --git a/features/Prices/components/Result.module.css b/features/Prices/components/Result.module.css
new file mode 100644
index 0000000..eb7bd41
--- /dev/null
+++ b/features/Prices/components/Result.module.css
@@ -0,0 +1,6 @@
+.result {
+  margin-bottom: 1rem;
+}
+
+.amount {
+}
diff --git a/features/Prices/components/Result.tsx b/features/Prices/components/Result.tsx
index 746c24e..0db1ed9 100644
--- a/features/Prices/components/Result.tsx
+++ b/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>
   )
 }
diff --git a/package-lock.json b/package-lock.json
index c10c526..464eb1e 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 6d376cd..40c16c7 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@coingecko/cryptoformat": "^0.8.1",
     "next": "14.1.4",
     "react": "^18",
     "react-dom": "^18",