feat: add whale alliance hub

terra-money · Feb 1, 2024 · d8d2772 · d8d2772
1 parent 6e8a924
commit d8d2772
Show file tree

Hide file tree

Showing 25 changed files with 2,835 additions and 534 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -2,21 +2,20 @@
 
 import CSSLoader from "@/components/CSSLoader";
 import Card from "@/components/Card";
-import Graph from "@/components/Graph";
 import LoadingComponent from "@/components/LoadingComponent";
 import Pill from "@/components/Pill";
 import Table from "@/components/Table";
-import { MOCK_PRICES, defaultChain, pills, supportedChains } from "@/const/Variables";
-import { QueryForAlliances } from "@/lib/AllianceQuery";
-import { Alliance, AllianceResponse } from "@/types/ResponseTypes";
+import { defaultChain, pills, supportedChains } from "@/const/Variables";
+import { QueryAlliances } from "@/lib/AllianceQuery";
+import { AllianceAsset } from "@terra-money/feather.js/dist/client/lcd/api/AllianceAPI";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 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 [data, setData] = useState<AllianceAsset[] | undefined>(undefined);
   const params = useSearchParams();
   const [loading, setLoading] = useState(true);
 
@@ -28,12 +27,11 @@ export default function Home() {
         const json = await result.json();
         setUsdValues({
           ...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) => {
+        setPillPrices(Object.fromEntries(pillJson.prices.map((p: any) => {
           return [p.denom, {
             usd: p.price
           }]
@@ -42,16 +40,10 @@ export default function Home() {
       }
 
       const chain = supportedChains[params.get("selected") ?? defaultChain];
-      let response = [];
 
-      try {
-        const resp = await QueryForAlliances(chain);
-        response = [...resp.alliances];
-      } catch {
-        response = [...[]];
-      }
-
-      setData(response);
+      const res = await QueryAlliances(chain).catch(() => []);
+      console.log("res",res)
+      setData(res);
     })();
   }, [params]);
 

diff --git a/components/Card.tsx b/components/Card.tsx
@@ -13,7 +13,7 @@ export default function Card({
       <div className="flex justify-between mb-6 pr-4 pl-4">
         <h1 className="text-3xl font-medium">{name}</h1>
       </div>
-      <div className={'pr-4 pl-4 pb-3 pt-3 max-h-80 overflow-auto'}>
+      <div className={'pr-4 pl-4 pb-3 pt-3 overflow-auto'}>
         {children}
       </div>
     </div>

diff --git a/components/Dropdown.tsx b/components/Dropdown.tsx
@@ -30,9 +30,7 @@ export default function Dropdown() {
         <div className={styles.selected}>
           <img src={selected.icon} alt={"selected"} width={30} height={30} />
           <span>{selected.name}</span>
-          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="w-6 h-6">
-            <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
-          </svg>
+          <img src="/images/arrow-down.svg" alt="arrow" width={24} height={24} />
         </div>
       )}
       <div id={"dropdown"} className={`${show ? "" : styles.reversed} hidden`}>
@@ -43,7 +41,7 @@ export default function Dropdown() {
               className="flex gap-3 p-3 items-center"
               onClick={() => {
                 setSelected(supportedChains[chain]);
-                router.push(`?selected=${supportedChains[chain].name.toLocaleLowerCase()}`);
+                router.push(`?selected=${supportedChains[chain].id.toLocaleLowerCase()}`);
               }}
             >
               <img src={supportedChains[chain].icon} alt={chain} width={30} height={30} />

diff --git a/components/Graph.tsx b/components/Graph.tsx
diff --git a/components/Pill.tsx b/components/Pill.tsx
@@ -2,8 +2,6 @@ import { Pill } from '@/types/ResponseTypes';
 import { Tooltip } from '@nextui-org/react';
 
 export default function Pill({ pill, data }: { pill: Pill, data?: any }) {
-  const percentage = parseFloat(data?.change24h ?? '0');
-
   return (
     <div className="flex custom_card gap-3">
       <div className='flex items-center'>
@@ -21,20 +19,6 @@ export default function Pill({ pill, data }: { pill: Pill, data?: any }) {
         <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">
-                <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 6L9 12.75l4.286-4.286a11.948 11.948 0 014.306 6.43l.776 2.898m0 0l3.182-5.511m-3.182 5.51l-5.511-3.181" />
-              </svg>
-            ) : (
-              <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">
-                <path strokeLinecap="round" strokeLinejoin="round" d="M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941" />
-              </svg>
-            )
-          }
-          {percentage.toLocaleString('en-US')}%
-        </h3> */}
       </div>
     </div>
   );