Merge pull request #37 from DyadStablecoin/useLastEthPrice

Use last eth price
DyadStablecoin · Dec 14, 2022 · 487a787 · 487a787 · vercel · Dec 14, 2022
2 parents 43a5de3 + 79eea2e
commit 487a787
Show file tree

Hide file tree

Showing 7 changed files with 102 additions and 37 deletions.
diff --git a/src/components/NFT.jsx b/src/components/NFT.jsx
@@ -96,12 +96,7 @@ export default function NFT({ index, xps, xpsAverage }) {
               />
             </Popup>
             <Popup isOpen={isOpenSync} onClose={onCloseSync}>
-              <Sync
-                tokenId={tokenId}
-                onClose={onCloseSync}
-                setTxHash={setTxHash}
-                nft={nft}
-              />
+              <Sync onClose={onCloseSync} setTxHash={setTxHash} nft={nft} />
             </Popup>
           </>
         )}

diff --git a/src/components/Sync.jsx b/src/components/Sync.jsx
@@ -3,11 +3,12 @@ import { useContractWrite, usePrepareContractWrite } from "wagmi";
 import { CONTRACT_POOL } from "../consts/contract";
 import PopupContent from "./PopupContent";
 import useGasCost from "../hooks/useGasCost";
-import { SwapRightOutlined } from "@ant-design/icons";
 import useNftSyncSimulation from "../hooks/useNftSyncSimulation";
 import { DOCS_URL } from "../consts/consts";
+import SyncLastEthPrice from "./SyncLastEthPrice";
+import SyncXp from "./SyncXp";
 
-export default function Sync({ onClose, setTxHash, tokenId, nft }) {
+export default function Sync({ onClose, setTxHash, nft }) {
   const { config } = usePrepareContractWrite({
     addressOrName: CONTRACT_POOL,
     contractInterface: PoolABI["abi"],
@@ -23,7 +24,7 @@ export default function Sync({ onClose, setTxHash, tokenId, nft }) {
   });
 
   const { gasCost } = useGasCost(config);
-  const { nftAfterSimulation, isLoading } = useNftSyncSimulation(tokenId);
+  const { isLoading } = useNftSyncSimulation(nft.id);
 
   return (
     <PopupContent
@@ -38,33 +39,15 @@ export default function Sync({ onClose, setTxHash, tokenId, nft }) {
       infoOnClick={() => window.open(DOCS_URL + "/pool#sync")}
     >
       <div className="flex flex-col gap-4">
-        {nftAfterSimulation && (
-          <>
-            <div className="flex justify-between">
-              <div className="text-sm">Before</div>
-              <div className="text-sm">After</div>
-            </div>
-            <div className="flex justify-between items-center">
-              <div>
-                <div className="text-[#737E76]">XP</div>
-                <div>{nft.xp}</div>
-              </div>
-              <div>
-                <SwapRightOutlined />
-              </div>
-              <div className="flex gap-6 items-center justify-center">
-                {parseInt(nftAfterSimulation[2]._hex)}
-                <div className="flex gap-1 items-center">
-                  <div className="text-sm text-green-300">+</div>
-                  <div className="text-sm">
-                    {parseInt(nftAfterSimulation[2]._hex) - nft.xp}
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="bg-[#3A403C] h-[1px] w-full"></div>
-          </>
-        )}
+        <>
+          <div className="flex justify-between">
+            <div className="text-sm">Before</div>
+            <div className="text-sm">After</div>
+          </div>
+          <SyncLastEthPrice />
+          <SyncXp nft={nft} />
+          <div className="bg-[#3A403C] h-[1px] w-full"></div>
+        </>
         <div>+ help sync ALL DYAD NFT's for all players!</div>
         <div className="bg-[#3A403C] h-[1px] w-full"></div>
         <div className="flex justify-between">

diff --git a/src/components/SyncLastEthPrice.jsx b/src/components/SyncLastEthPrice.jsx
@@ -0,0 +1,36 @@
+import { SwapRightOutlined } from "@ant-design/icons";
+import useEthPrice from "../hooks/useEthPrice";
+import useLastEthPrice from "../hooks/useLastEthPrice";
+import { round } from "../utils/currency";
+
+export default function SyncLastEthPrice() {
+  const { ethPrice } = useEthPrice();
+  const { lastEthPrice } = useLastEthPrice();
+
+  return (
+    <div className="flex justify-between items-center">
+      <div>
+        <div className="text-[#737E76]">Price</div>
+        <div>{lastEthPrice}</div>
+      </div>
+      <div>
+        <SwapRightOutlined />
+      </div>
+      <div className="flex gap-6 items-center justify-center">
+        {ethPrice}
+        <div className="flex gap-1 items-center">
+          <div className="text-sm ">
+            {lastEthPrice - ethPrice < 0 ? (
+              <span className="text-green-300">+</span>
+            ) : (
+              <span className="text-red-300">-</span>
+            )}
+          </div>
+          <div className="text-sm">
+            {Math.abs(round(lastEthPrice - ethPrice, 2))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/SyncXp.jsx b/src/components/SyncXp.jsx
@@ -0,0 +1,31 @@
+import { SwapRightOutlined } from "@ant-design/icons";
+import useNftSyncSimulation from "../hooks/useNftSyncSimulation";
+
+export default function SyncXp({ nft }) {
+  const { nftAfterSimulation } = useNftSyncSimulation(nft.id);
+
+  return (
+    <>
+      {nftAfterSimulation && (
+        <div className="flex justify-between items-center">
+          <div>
+            <div className="text-[#737E76]">XP</div>
+            <div>{nft.xp}</div>
+          </div>
+          <div>
+            <SwapRightOutlined />
+          </div>
+          <div className="flex gap-6 items-center justify-between">
+            {parseInt(nftAfterSimulation[2]._hex)}
+            <div className="flex gap-1 items-center">
+              <div className="text-sm text-green-300">+</div>
+              <div className="text-sm">
+                {parseInt(nftAfterSimulation[2]._hex) - nft.xp}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/src/hooks/useEthPrice.js b/src/hooks/useEthPrice.js
@@ -9,7 +9,6 @@ export default function useEthPrice() {
         "https://min-api.cryptocompare.com/data/price?fsym=ETH&tsyms=BTC,USD,EUR"
       );
       const data = await res.json();
-      console.log("data", data);
       setEthPrice(data.USD);
     }
 

diff --git a/src/hooks/useLastEthPrice.js b/src/hooks/useLastEthPrice.js
@@ -0,0 +1,19 @@
+import { useState } from "react";
+import { useContractRead } from "wagmi";
+import { CONTRACT_POOL } from "../consts/contract";
+import poolABI from "../abi/Pool.json";
+
+export default function useLastEthPrice() {
+  const [lastEthPrice, setLastEthPrice] = useState(0);
+
+  const { refetch } = useContractRead({
+    addressOrName: CONTRACT_POOL,
+    contractInterface: poolABI["abi"],
+    functionName: "lastEthPrice",
+    onSuccess: (data) => {
+      setLastEthPrice(parseInt(data._hex) / 10 ** 8);
+    },
+  });
+
+  return { refetch, lastEthPrice };
+}
diff --git a/src/hooks/useNft.js b/src/hooks/useNft.js
@@ -8,6 +8,7 @@ export default function useNft(id) {
     withdrawn: 0,
     deposit: 0,
     xp: 0,
+    id: id,
   });
 
   const { refetch, isLoading, isFetching } = useContractRead({
@@ -20,6 +21,7 @@ export default function useNft(id) {
         withdrawn: parseInt(data[0]._hex),
         deposit: parseInt(data[1]._hex),
         xp: parseInt(data[2]._hex),
+        id: id,
       });
     },
   });