Merge pull request XinFinOrg#7 from AllTrends/feature/pairHeader

Feature/pair header

.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+pnpm-lock.yaml
 
 # testing
 /coverage

src/components/PairHeader.tsx

@@ -1,14 +1,34 @@
 import React, { useState } from "react";
-import type Pair from "~/interfaces/Pair";
+import type { Pair } from "~/types";
 
 
 interface PairHeaderProps {
-    pair:Pair
+    pair: Pair
 }
 
 const PairHeader = (props:PairHeaderProps) => {
     const [showPairs, setShowPairs] = useState(false);
 
+    function getPrice(numerator: string, denominator: string) {
+        console.log(`Get price for ${numerator}Perp/${denominator} pair.`)
+        return 1000;
+    }
+
+    function getChange(numerator: string, denominator: string) {
+        console.log(`Get 24h Change for ${numerator}Perp/${denominator} pair.`)
+        return "+5%";
+    }
+
+    function getHigh(numerator: string, denominator: string) {
+        console.log(`Get 24h High for ${numerator}Perp/${denominator} pair.`)
+        return 1200;
+    }
+
+    function getLow(numerator: string, denominator: string) {
+        console.log(`Get 24h Low for ${numerator}Perp/${denominator} pair.`)
+        return 800;
+    }
+
     function togglePairs() {
         setShowPairs(prevShowPairs => !prevShowPairs);
         console.log(showPairs);
@@ -19,7 +39,7 @@ const PairHeader = (props:PairHeaderProps) => {
             <div className="static">
                 <button className="font-bold shadow hover:shadow-xl static flex"
                         onClick={togglePairs}>
-                    <div className="h-full text-xl">{props.pair.name}</div> 
+                    <div className="h-full text-xl">{props.pair.numerator}Perp/{props.pair.denominator} pair</div> 
                     <div className="h-full align-bottom mt-2 mb-0 pl-3">&#65088;</div>
                 </button>
 
@@ -29,15 +49,19 @@ const PairHeader = (props:PairHeaderProps) => {
             </div>
             <div>
                 Price
+                {getPrice(props.pair.numerator, props.pair.denominator)}
             </div>
             <div>
                 24h Change
+                {getChange(props.pair.numerator, props.pair.denominator)}
             </div>
             <div>
                 24h High
+                {getHigh(props.pair.numerator, props.pair.denominator)}
             </div>
             <div>
                 24h Low
+                {getLow(props.pair.numerator, props.pair.denominator)}
             </div>
         </div>
     );

src/pages/index.tsx

@@ -1,22 +1,16 @@
 import PairHeader from "~/components/PairHeader";
-import type Pair from "~/interfaces/Pair";
 
 
 export default function Home() {
   // const hello = api.post.hello.useQuery({ text: "from tRPC" });
-  const pair: Pair = {
-    name: "XDCPerp/USDC",
-    price: 0,
-    change: 0,
-    high: 0,
-    low: 0
-  };
 
   return (
     <main className="container mx-auto mb-8 mt-4 grid w-full grow grid-cols-4 gap-4">
       <div className="col-span-3 flex flex-col items-start justify-start gap-3 ">
         {/* table with bid and asks here */}
-        <div className="min-h-[10vh] w-full rounded-md p-8 ring ring-white"></div>
+        <div className="min-h-[10vh] w-full rounded-md p-8 ring ring-white">
+          <PairHeader pair={defaultPair}/>
+        </div>
         <div className="min-h-[45vh] w-full rounded-md p-8 ring ring-white">
           The chart goes here
         </div>
@@ -66,6 +60,7 @@ import { Input } from "~/components/ui/input";
 import { Button } from "~/components/ui/button";
 import History from "~/components/History";
 import useHistoryStore from "~/stores/history";
+import { defaultPair } from "~/utils/constants";
 
 const Buy = () => {
   const increase = useHistoryStore((state) => state.addOneItem);

src/types/index.ts

@@ -1,4 +1,5 @@
 export interface Pair {
   numerator: string;
   denominator: string;
-}
+};
+