diff --git a/src/components/LeaderboardTableRow.jsx b/src/components/LeaderboardTableRow.jsx index 9723a3d..6dd3817 100644 --- a/src/components/LeaderboardTableRow.jsx +++ b/src/components/LeaderboardTableRow.jsx @@ -1,3 +1,5 @@ +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"; @@ -5,7 +7,11 @@ 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, @@ -13,15 +19,21 @@ export default function LeaderboardTableRow({ 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 ( - + ); } @@ -29,12 +41,22 @@ export default function LeaderboardTableRow({ } } + const { isLoading: isLoadingTx } = useWaitForTransaction({ + hash: txHash, + onSuccess: () => { + refetch(); + }, + }); + return ( <> {isMatching && ( - + {ensName || addressSummary(address)} )} + + + ); } diff --git a/src/components/Liquidate.jsx b/src/components/Liquidate.jsx index 99fb134..685c06d 100644 --- a/src/components/Liquidate.jsx +++ b/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 ( -
-
ttt
-
+ { + onClose(); + write?.(); + }} + isDisabled={!write} + > +
+
+ { + setWETH(v); + }} + placeholder={0} + type="number" + /> +
+
+
+ +
+
ETH
+
+
+ Balance:{round2(balances.balanceOfEth)} +
+
+
+
+
); }