feat: added price and stats

Author: zlace0x

package.json

@@ -10,6 +10,7 @@
     "react-dom": "^17.0.2",
     "react-scripts": "^4.0.3",
     "recharts": "^2.1.9",
+    "typescript": "^4.6.4",
     "web-vitals": "^1.1.2",
     "websocket": "^1.0.34"
   },

src/App.js

@@ -3,31 +3,50 @@ import { useEffect, useState } from "react";
 import { useLCDClient } from "@terra-money/wallet-provider";
 import React from "react";
 import { BarChart, Bar, Cell, YAxis, ReferenceLine, LabelList } from "recharts";
+import { computeSwap, coinAfterSpread } from "./lib/market";
+import { Coin } from "@terra-money/terra.js";
 
 const colors = ["#0088FE", "#FFBB28"];
+const ust_swap_size = 10000;
 
 function App() {
   const [data, setData] = useState([]);
+
+  const [swapRate, setSwapRate] = useState([]);
+  const [basePool, setBasePool] = useState([]);
   const [scale, setScale] = useState([49000000, 51000000]);
   const lcd = useLCDClient();
 
   useEffect(() => {
     const fetchPools = async () => {
       const delta = await lcd.market.poolDelta();
-      const { base_pool } = await lcd.market.parameters();
+      const luna_rates = await lcd.oracle.exchangeRates();
+      const { base_pool, min_stability_spread } = await lcd.market.parameters();
       const microTerraSide = base_pool.plus(delta);
-      const micraLunaSide = base_pool.pow(2).div(microTerraSide);
-      
-      const terraSide = microTerraSide.times(0.000001).toNumber()
-      const lunaSide = micraLunaSide.times(0.000001).toNumber()
+      const microLunaSide = base_pool.pow(2).div(microTerraSide);
+
+      const terraSide = microTerraSide.times(0.000001).toNumber();
+      const lunaSide = microLunaSide.times(0.000001).toNumber();
+
+      setBasePool(base_pool);
+      const ustSwapRate = computeSwap(
+        new Coin("uusd", ust_swap_size * 1e6),
+        "uluna",
+        luna_rates,
+        base_pool,
+        min_stability_spread,
+        delta
+      );
+
+      setSwapRate(ustSwapRate);
 
       setData([
         {
-          name: "Stablecoins",
+          name: "Stablecoins (in sdr)",
           amt: terraSide,
         },
         {
-          name: "LUNA",
+          name: "LUNA (in sdr)",
           amt: lunaSide,
         },
       ]);
@@ -46,20 +65,30 @@ function App() {
     };
   }, [lcd.market]);
 
+  if (!swapRate) {
+    return "Loading...";
+  }
+
+  const beforeSpreadFee = swapRate[0]?.amount.div(1e6);
+  const afterSpreadFee = coinAfterSpread(swapRate[0], swapRate[1])?.amount.div(
+    1e6
+  );
   return (
     <div className="App">
       <center>
         <h1>Terra Virtual Liquidity Pools</h1>
         <BarChart width={800} height={400} data={data}>
           <Bar isAnimationActive={false} label={false} dataKey="amt">
-            {data.map((entry, index) => <Cell key={`cell-${index}`} fill={colors[index % 20]} />)}
+            {data.map((entry, index) => (
+              <Cell key={`cell-${index}`} fill={colors[index % 20]} />
+            ))}
             <LabelList dataKey="name" position="top" />
-            {/* <LabelList dataKey="amt" position="inside" fill="#000000" /> */}
+            <LabelList dataKey="amt" position="inside" fill="#000000" />
           </Bar>
           <ReferenceLine
             isFront={false}
             label={{ position: "top", value: "BasePool" }}
-            y={50000000}
+            y={basePool.toNumber()}
             stroke="#000"
           />
           <YAxis
@@ -71,8 +100,17 @@ function App() {
             domain={scale}
           />
         </BarChart>
+
+        <div>
+          Oracle Rate: {ust_swap_size} ust = {beforeSpreadFee.toFixed(2)} luna
+          (${(ust_swap_size / beforeSpreadFee).toFixed(4)} per luna)
+        </div>
+        <div>
+          With {swapRate[1]?.times(100).toFixed(2)} % spread fee:{" "}
+          {ust_swap_size} ust = {afterSpreadFee.toFixed(2)} luna ($
+          {(ust_swap_size / afterSpreadFee).toFixed(4)} per luna)
+        </div>
       </center>
-      <a style={{ position: 'fixed', right: 0, top: 0}} href="https://github.com/octalmage/terra-pools"><img loading="lazy" width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_darkblue_121621.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1" /></a>
     </div>
   );
 }