From a10dee020e71954ccca345b1d95a6c5401c5a36b Mon Sep 17 00:00:00 2001
From: javiersuweijie <javier.su.weijie@gmail.com>
Date: Thu, 26 Oct 2023 17:05:32 +0800
Subject: [PATCH] chore: update pill endpoint with oracle server

---
 app/page.tsx        | 15 ++++++++++++---
 components/Pill.tsx | 10 ++++++----
 const/Variables.tsx | 18 +++++++++---------
 3 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 47de8cb..379336f 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -15,13 +15,14 @@ import { Suspense, useEffect, useState } from "react";
 
 export default function Home() {
   const [usdValues, setUsdValues] = useState<any>();
+  const [pillPrices, setPillPrices] = useState<any>(null);
   const [data, setData] = useState<Alliance[]>([]);
   const params = useSearchParams();
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     (async () => {
-      if (!usdValues) {
+      if (!usdValues || !pillPrices) {
         setLoading(true);
         const result = await fetch("https://price.api.tfm.com/tokens/?limit=1500");
         const json = await result.json();
@@ -29,6 +30,14 @@ export default function Home() {
           ...json,
           ...MOCK_PRICES,
         });
+
+        const priceResult = await fetch("https://pisco-price-server.terra.dev/latest");
+        const pillJson = await priceResult.json();
+        setPillPrices(Object.fromEntries(pillJson.prices.map((p:any) => {
+          return [p.denom, {
+            usd: p.price
+          }]
+        })))
         setLoading(false);
       }
 
@@ -72,8 +81,8 @@ export default function Home() {
         </h3>
       </div>
       <div className="flex flex-col pt-3 pb-3 mt-12 overflow-auto">
-        <LoadingComponent isLoading={loading} values={usdValues}>
-          <div className="flex gap-3">{usdValues && pills.map((pill) => <Pill key={pill.id} pill={pill} data={usdValues[pill.token]} />)}</div>
+        <LoadingComponent isLoading={loading} values={pillPrices}>
+          <div className="flex gap-3">{pillPrices && pills.map((pill) => <Pill key={pill.id} pill={pill} data={pillPrices[pill.token]} />)}</div>
         </LoadingComponent>
       </div>
       <div className="flex w-full flex-col lg:flex-row gap-3">
diff --git a/components/Pill.tsx b/components/Pill.tsx
index 7279e00..8ff3c35 100644
--- a/components/Pill.tsx
+++ b/components/Pill.tsx
@@ -17,9 +17,11 @@ export default function Pill({ pill, data }: { pill: Pill, data?: any }) {
           />
         </Tooltip>
       </div>
-      <div className="flex flex-col w-full">
-        <h2>${parseFloat(data?.usd ?? '0').toLocaleString('en-US')}</h2>
-        <h3 className={`${percentage < 0 ? 'text-red-400' : 'text-green-500'}`}>
+      <div className="flex items-center w-full">
+        <h2>${parseFloat(data?.usd ?? '0').toLocaleString('en-US', {
+          minimumFractionDigits: 4
+        })}</h2>
+        {/* <h3 className={`${percentage < 0 ? 'text-red-400' : 'text-green-500'}`}>
           {
             percentage < 0 ? (
               <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-7 h-7">
@@ -32,7 +34,7 @@ export default function Pill({ pill, data }: { pill: Pill, data?: any }) {
             )
           }
           {percentage.toLocaleString('en-US')}%
-        </h3>
+        </h3> */}
       </div>
     </div>
   );
diff --git a/const/Variables.tsx b/const/Variables.tsx
index 7bb2128..616e767 100644
--- a/const/Variables.tsx
+++ b/const/Variables.tsx
@@ -7,25 +7,25 @@ export const pills: Pill[] = [
     id: 4,
     name: "Luna",
     symbol: "https://raw.githubusercontent.com/terra-money/station-assets/main/img/coins/Luna.svg",
-    token: "uluna",
-  },
-  {
-    id: 1,
-    name: "Kuji",
-    symbol: "https://raw.githubusercontent.com/terra-money/station-assets/main/img/coins/Kuji.svg",
-    token: "ibc/BB6BCDB515050BAE97516111873CCD7BCF1FD0CCB723CC12F3C4F704D6C646CE",
+    token: "LUNA",
   },
+  // {
+  //   id: 1,
+  //   name: "Kuji",
+  //   symbol: "https://raw.githubusercontent.com/terra-money/station-assets/main/img/coins/Kuji.svg",
+  //   token: "ibc/BB6BCDB515050BAE97516111873CCD7BCF1FD0CCB723CC12F3C4F704D6C646CE",
+  // },
   {
     id: 2,
     name: "Carbon",
     symbol: "https://raw.githubusercontent.com/terra-money/station-assets/main/img/coins/Carbon.svg",
-    token: "ibc/8FEFAE6AECF6E2A255585617F781F35A8D5709A545A804482A261C0C9548A9D3",
+    token: "SWTH",
   },
   {
     id: 3,
     name: "Whale",
     symbol: "https://raw.githubusercontent.com/terra-money/station-assets/main/img/coins/Whale.svg",
-    token: "ibc/EDD6F0D66BCD49C1084FB2C35353B4ACD7B9191117CE63671B61320548F7C89D",
+    token: "WHALE",
   },
 ];