import React, { useEffect, useState } from "react"; import { Link } from 'react-router-dom'; import { Card, CardDeck, Image } from "react-bootstrap"; import aaveLogo from "../../assets/aave.png"; import mstableLogo from "../../assets/mstable.png"; import { marlin } from "../../utils/marlin"; import { time } from "../../utils/time"; export default function HomePage() { const [loanPools, setlLoanPools] = useState([]); const createSubArray = (pools) => { let chunks = []; while (pools.length > 4) { chunks.push(pools.splice(0, 4)); } if (pools.length > 0) { chunks.push(pools); } setlLoanPools(chunks); } const getPools = async () => { marlin.fetchLoanPools() .then((pools) => { createSubArray(pools); }) .catch((error) => { console.log(error); }); } useEffect(() => { if (loanPools.length === 0) { getPools();; } // eslint-disable-next-line react-hooks/exhaustive-deps }, []) function DisplayCard({ pool, count }) { return ( <Card key={count} className="display-pool-card" > <Link key={count} style={{ textDecoration: "none", color: "black" }} to={`/view/${pool.lendingPool}/${pool.loanPool}`} > <Card.Header style={{ marginBottom: "5px" }}> <Image src={ pool.lendingPool === "Aave" ? aaveLogo : mstableLogo } width="50px"></Image> <span> Loan Pool</span> </Card.Header> <Card.Body> <div style={{ marginBottom: "10px" }}> Collateral Amount: {pool.collateralAmount} <span> {pool.lendingPool === "Aave" ? "DAI" : "mUSD"} </span> </div> <div style={{ marginBottom: "10px" }}> Maximum Participants: {pool.maxParticipants} </div> <div style={{ marginBottom: "10px" }}> Minimum Bid Amount: {pool.minimumBidAmount} <span> {pool.lendingPool === "Aave" ? "DAI" : "mUSD"} </span> </div> <div style={{ marginBottom: "10px" }}> Auction Interval: Every {pool.auctionInterval} hours </div> <div style={{ marginBottom: "5px" }}> {time.currentUnixTime() < ( Number(pool.createdAt) + Number(pool.auctionInterval) * 3600 ) ? <span className="info-message"> {time.getTimeInString( Number(pool.createdAt) + Number(pool.auctionInterval) * 3600 )} </span> : <span className="warning-message"> Participation Already Over </span> } </div> </Card.Body> </Link> </Card> ); } return ( <div> {loanPools.map((element, key) => ( element.length === 4 ? <CardDeck key={key} style={{ margin: "2%" }}> {element.map((pool, k) => ( <DisplayCard key={k} pool={pool} count={k} /> ))} </CardDeck> : <CardDeck key={key} style={{ margin: "2%" }}> {element.map((pool, k) => ( <DisplayCard key={k} pool={pool} count={k} /> ))} {[...Array(4 - element.length)].map((x, i) => <Card key={element.length + i + 1} className="hidden-card" > </Card> )} </CardDeck> ))} </div > ); }