Merge pull request #36 from DyadStablecoin/feature/liquidate

Feature/liquidate

src/components/LeaderboardTableRow.jsx

@@ -1,40 +1,62 @@
+import { useDisclosure } from "@chakra-ui/react";
+import { useWaitForTransaction } from "wagmi";
 import { dNFT_PRICE, RANDOM_IMAGES } from "../consts/consts";
 import useFilterAddress from "../hooks/useFilterAddress";
 import useIdToOwner from "../hooks/useIdToOwner";
 import { addressSummary } from "../utils/address";
 import { formatUSD, round } from "../utils/currency";
 import { depositRatio } from "../utils/stats";
 import Button from "./Button";
+import Liquidate from "./Liquidate";
 import LoadingInplace from "./LoadingInplace";
+import Popup from "./Popup";
+import { useState } from "react";
+import useNft from "../hooks/useNft";
 
 export default function LeaderboardTableRow({
   isOneLiquidatable,
   nft,
   rank,
   filter,
 }) {
+  const [txHash, setTxHash] = useState();
+
   const { owner: address } = useIdToOwner(nft.id);
   const { ensName, isMatching, isLoading } = useFilterAddress(address, filter);
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const { refetch, isLoading: isLoadingNft } = useNft(nft.id);
 
   function renderLiquidateBtn() {
     if (isOneLiquidatable) {
       if (nft.deposit < 0) {
         return (
           <td className="w-[4rem]">
-            <Button style="w-[6rem]">Liquidate</Button>
+            <Button onClick={onOpen} style="w-[6rem]">
+              Liquidate
+            </Button>
           </td>
         );
       }
       return <td></td>;
     }
   }
 
+  const { isLoading: isLoadingTx } = useWaitForTransaction({
+    hash: txHash,
+    onSuccess: () => {
+      refetch();
+    },
+  });
+
   return (
     <>
       {isMatching && (
         <tr className="leaderboard-row" style={{ border: "1px solid #3A403C" }}>
           <td>
-            <LoadingInplace isLoading={isLoading} style="w-[40px]" />
+            <LoadingInplace
+              isLoading={isLoadingTx || isLoading || isLoadingNft}
+              style="w-[40px]"
+            />
             <img
               className="w-10 h-10"
               src={RANDOM_IMAGES[rank % RANDOM_IMAGES.length]}
@@ -57,6 +79,9 @@ export default function LeaderboardTableRow({
           <td>{ensName || addressSummary(address)}</td>
         </tr>
       )}
+      <Popup isOpen={isOpen} onClose={onClose}>
+        <Liquidate tokenId={nft.id} onClose={onClose} setTxHash={setTxHash} />
+      </Popup>
     </>
   );
 }

src/components/Liquidate.jsx

@@ -1,7 +1,74 @@
-export default function Sync({}) {
+import { useAccount, useContractWrite, usePrepareContractWrite } from "wagmi";
+import { CONTRACT_dNFT } from "../consts/contract";
+import { round2 } from "../utils/currency";
+import PoolABI from "../abi/Pool.json";
+import { useState } from "react";
+import TextInput from "./TextInput";
+import { parseEther } from "../utils/currency";
+import { useBalances } from "../hooks/useBalances";
+import PopupContent from "./PopupContent";
+import useEthPrice from "../hooks/useEthPrice";
+
+export default function Liquidate({ tokenId, onClose, setTxHash }) {
+  const { balances } = useBalances([]);
+  const [wETH, setWETH] = useState("");
+  const { address } = useAccount();
+
+  const { config } = usePrepareContractWrite({
+    addressOrName: CONTRACT_dNFT,
+    contractInterface: PoolABI["abi"],
+    functionName: "claim",
+    args: [tokenId, address],
+    overrides: {
+      value: parseEther(wETH),
+    },
+  });
+
+  const { write } = useContractWrite({
+    ...config,
+    onSuccess: (data) => {
+      onClose();
+      setTxHash(data?.hash);
+    },
+  });
+
   return (
-    <div>
-      <div>ttt</div>
-    </div>
+    <PopupContent
+      title="Claim dNFT"
+      btnText="CLAIM"
+      onClick={() => {
+        onClose();
+        write?.();
+      }}
+      isDisabled={!write}
+    >
+      <div className="flex flex-col gap-2 items-center">
+        <div className="flex gap-4 justify-between items-between w-full">
+          <TextInput
+            value={wETH}
+            onChange={(v) => {
+              setWETH(v);
+            }}
+            placeholder={0}
+            type="number"
+          />
+          <div className="items-end flex flex-col">
+            <div className="flex items-center justify-center gap-1">
+              <div>
+                <img
+                  className="w-4"
+                  src="https://icons.iconarchive.com/icons/cjdowner/cryptocurrency-flat/1024/Ethereum-ETH-icon.png"
+                  alt=""
+                />
+              </div>
+              <div>ETH</div>
+            </div>
+            <div className="text-[#737E76]">
+              Balance:{round2(balances.balanceOfEth)}
+            </div>
+          </div>
+        </div>
+      </div>
+    </PopupContent>
   );
 }