react-bootstrap#CardDeck JavaScript Examples
The following examples show how to use
react-bootstrap#CardDeck.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: FeatureSection.jsx From irisql with MIT License | 5 votes |
|
export default function FeatureSection() {
return (
<div id="features">
<div className="section-headings d-flex justify-content-center">
<hr />
<h2>Features</h2>
<hr />
</div>
<div className="d-flex justify-content-center">
<CardDeck>
<Card>
<div className="feature-icons d-flex justify-content-center">
<Icon.BoundingBoxCircles color="#29274c" size={50} />
</div>
<Card.Body>
<Card.Title>Build a Visualized Schema</Card.Title>
<Card.Text>
Prototype your GraphQL schema with an intuitive and interactive GUI.
Assemble your graph using object types as building blocks.
</Card.Text>
</Card.Body>
</Card>
<Card>
<div className="feature-icons d-flex justify-content-center">
<Icon.CodeSquare color="#29274c" size={50} />
</div>
<Card.Body>
<Card.Title>Auto Generated Code</Card.Title>
<Card.Text>
Generate GraphQL API with user-defined object types, relationships, and database.
</Card.Text>
</Card.Body>
</Card>
<Card>
<div className="feature-icons d-flex justify-content-center">
<Icon.LayersFill color="#29274c" size={50} />
</div>
<Card.Body>
<Card.Title>Connect To A DataBase</Card.Title>
<Card.Text>
In development. Choose either a relational (PostgreSQL) or non-relational (MongoDB)
database to query from.
</Card.Text>
</Card.Body>
</Card>
</CardDeck>
</div>
</div>
);
}
Example #2
| Source File: index.js From pooled-loan with MIT License | 5 votes |
|
export default function SwapTokens() {
const [showMetamaskError, setShowMetamaskError] =
useState(false);
useEffect(() => {
if (typeof window.ethereum === 'undefined' ||
!window.ethereum.selectedAddress
) {
setShowMetamaskError(true);
}
}, []);
return (
<div>
{showMetamaskError ?
<AlertModal
open={showMetamaskError}
toggle={() => {
setShowMetamaskError(false);
history.push('/');
}}
>
<div>
{typeof window.ethereum === 'undefined' ?
<div>
You can't use these features without Metamask.
<br />
Please install
<Image width="50px" src={metamask}></Image>
first !!
</div>
:
<div>
Please connect to
<Image width="50px" src={metamask}></Image>
to use this feature !!
</div>
}
</div>
</AlertModal>
:
<CardDeck style={{ marginTop: "12%" }}>
<Card className="hidden-card"></Card>
<SwapToken fixedBuyToken={false} buyToken="DAI" />
<Card className="hidden-card"></Card>
</CardDeck>
}
</div>
);
}
Example #3
| Source File: MainBody.js From Official-Website with MIT License | 4 votes |
|
function MainBody(props) {
return (
<div className={props.initialState ? 'mainBody active' : 'mainBody'}>
<Navbar />
<div className="body-content">
<p className="">Home</p>
<h3 className="">Dashboard</h3>
<CardDeck>
<Card>
<Card.Header>Form Statistics</Card.Header>
<Card.Body>
<Card.Title>Card title</Card.Title>
<Card.Text>
This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</Card.Text>
</Card.Body>
</Card>
<Card>
<Card.Header>Groups</Card.Header>
<Card.Body>
<Card.Title>Card title</Card.Title>
<Card.Text>
This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</Card.Text>
</Card.Body>
</Card>
<Card>
<Card.Header>Who's Online</Card.Header>
<Card.Body>
<Card.Title>Card title</Card.Title>
<Card.Text>
This card has supporting text below as a natural lead-in to additional
content.{' '}
</Card.Text>
</Card.Body>
</Card>
<Card>
<Card.Header>Recently Active Members</Card.Header>
<Card.Body>
<Card.Title>Card title</Card.Title>
<Card.Text>
This is a wider card with supporting text below as a natural lead-in to
additional content. This card has even longer content than the first to
show that equal height action.
</Card.Text>
</Card.Body>
</Card>
</CardDeck>
<br />
<CardDeck>
<Card>
<Card.Header>Form Statistics</Card.Header>
<Card.Body>
<Card.Title>Card title</Card.Title>
<Card.Text>
This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</Card.Text>
</Card.Body>
</Card>
<Card>
<Card.Header>Groups</Card.Header>
<Card.Body>
<Card.Title>Card title</Card.Title>
<Card.Text>
This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</Card.Text>
</Card.Body>
</Card>
<Card>
<Card.Header>Who's Online</Card.Header>
<Card.Body>
<Card.Title>Card title</Card.Title>
<Card.Text>
This card has supporting text below as a natural lead-in to additional
content.{' '}
</Card.Text>
</Card.Body>
</Card>
<Card>
<Card.Header>Recently Active Members</Card.Header>
<Card.Body>
<Card.Title>Card title</Card.Title>
<Card.Text>
This is a wider card with supporting text below as a natural lead-in to
additional content. This card has even longer content than the first to
show that equal height action.
</Card.Text>
</Card.Body>
</Card>
</CardDeck>
<br />
<CardDeck>
<Card>
<Card.Header>Form Statistics</Card.Header>
<Card.Body>
<Card.Title>Card title</Card.Title>
<Card.Text>
This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</Card.Text>
</Card.Body>
</Card>
<Card>
<Card.Header>Groups</Card.Header>
<Card.Body>
<Card.Title>Card title</Card.Title>
<Card.Text>
This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</Card.Text>
</Card.Body>
</Card>
<Card>
<Card.Header>Who's Online</Card.Header>
<Card.Body>
<Card.Title>Card title</Card.Title>
<Card.Text>
This card has supporting text below as a natural lead-in to additional
content.{' '}
</Card.Text>
</Card.Body>
</Card>
<Card>
<Card.Header>Recently Active Members</Card.Header>
<Card.Body>
<Card.Title>Card title</Card.Title>
<Card.Text>
This is a wider card with supporting text below as a natural lead-in to
additional content. This card has even longer content than the first to
show that equal height action.
</Card.Text>
</Card.Body>
</Card>
</CardDeck>
<br />
<CardDeck>
<Card>
<Card.Header>Form Statistics</Card.Header>
<Card.Body>
<Card.Title>Card title</Card.Title>
<Card.Text>
This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</Card.Text>
</Card.Body>
</Card>
<Card>
<Card.Header>Groups</Card.Header>
<Card.Body>
<Card.Title>Card title</Card.Title>
<Card.Text>
This is a wider card with supporting text below as a natural lead-in to
additional content. This content is a little bit longer.
</Card.Text>
</Card.Body>
</Card>
<Card>
<Card.Header>Who's Online</Card.Header>
<Card.Body>
<Card.Title>Card title</Card.Title>
<Card.Text>
This card has supporting text below as a natural lead-in to additional
content.{' '}
</Card.Text>
</Card.Body>
</Card>
<Card>
<Card.Header>Recently Active Members</Card.Header>
<Card.Body>
<Card.Title>Card title</Card.Title>
<Card.Text>
This is a wider card with supporting text below as a natural lead-in to
additional content. This card has even longer content than the first to
show that equal height action.
</Card.Text>
</Card.Body>
</Card>
</CardDeck>
<br />
</div>
{/* Additional Components */}
</div>
);
}
Example #4
| Source File: index.js From pooled-loan with MIT License | 4 votes |
|
export default function CreatePool() {
const [processing, setProcessing] = useState(false);
const [addPoolState, setAddPoolState] = useState({
maximumBidAmount: "",
minimumBidAmount: "",
auctionInterval: "",
auctionDuration: "",
maxParticipants: "",
token: "0xFf795577d9AC8bD7D90Ee22b6C1703490b6512FD",
});
const [showMetamaskError, setShowMetamaskError] = useState(
false
);
const [errorModal, setErrorModal] = useState({
msg: "",
open: false
});
const [successModal, setSuccessModal] = useState({
msg: "",
open: false
});
const [lendingPool] = useState([
{ pool: "Aave", token: "0xFf795577d9AC8bD7D90Ee22b6C1703490b6512FD" },
{ pool: "Mstable", token: "0x70605Bdd16e52c86FC7031446D995Cf5c7E1b0e7" }
]);
const handleCreatePool = () => {
window.loanPoolFactory.methods
.addLoanPool(
addPoolState.maximumBidAmount,
addPoolState.minimumBidAmount,
addPoolState.auctionInterval,
addPoolState.auctionDuration,
addPoolState.maxParticipants,
addPoolState.token,
)
.send()
.on('transactionHash', () => {
setProcessing(true);
})
.on('receipt', (_) => {
setProcessing(false);
setSuccessModal({
open: true,
msg: "Congratulations ? !! " +
"Pool successfully created !! " +
"Within 2 minutes you will be able to " +
"see created pool on the dashboard.",
});
})
.catch((error) => {
setProcessing(false);
setErrorModal({
open: true,
msg: error.message,
});
console.log(error.message)
});
};
useEffect(() => {
if (typeof window.ethereum === 'undefined' ||
!window.ethereum.selectedAddress
) {
setShowMetamaskError(true);
}
}, []);
return (
<div>
{showMetamaskError ?
<AlertModal
open={showMetamaskError}
toggle={() => {
setShowMetamaskError(false);
history.push('/');
}}
>
<div>
{typeof window.ethereum === 'undefined' ?
<div>
You can't use these features without Metamask.
<br />
Please install
<Image width="50px" src={metamask}></Image>
first !!
</div>
:
<div>
Please connect to
<Image width="50px" src={metamask}></Image>
to use this feature !!
</div>
}
</div>
</AlertModal>
:
<CardDeck>
<Card className="hidden-card"></Card>
<Card className="mx-auto form-card">
<Card.Header>
<u>Create Loan Pool</u>
</Card.Header>
<Card.Body>
<Row style={{ marginTop: "10px" }}>
<Col className="text-header">
Collateral Amount:
</Col>
<Col style={{ paddingLeft: "0px" }}>
<Form.Control
className="mb-4"
type="number"
placeholder="(Max Bid Amount * Max Participants)"
style={{ width: "80%" }}
value={
(addPoolState.maximumBidAmount *
(addPoolState.maxParticipants > 0 ?
addPoolState.maxParticipants : 1
) > 0 ?
addPoolState.maximumBidAmount *
(addPoolState.maxParticipants > 0 ?
addPoolState.maxParticipants : 1
)
: ""
)
}
disabled={true}
/>
</Col>
</Row>
<Row>
<Col className="text-header">
Maximum Bid Amount:
</Col>
<Col style={{ paddingLeft: "0px" }}>
<Form.Control
className="mb-4"
type="number"
step="0"
placeholder="No decimal places"
onChange={(e) => setAddPoolState({
...addPoolState,
maximumBidAmount: e.target.value
})}
style={{ width: "80%" }}
value={addPoolState.maximumBidAmount}
required
/>
</Col>
</Row>
<Row>
<Col className="text-header">
Maximum Participants:
</Col>
<Col style={{ paddingLeft: "0px" }}>
<Form.Control
className="mb-4"
type="number"
step="0"
placeholder="No decimal places"
onChange={(e) => setAddPoolState({
...addPoolState,
maxParticipants: e.target.value
})}
style={{ width: "80%" }}
value={addPoolState.maxParticipants}
required
/>
</Col>
</Row>
<Row>
<Col className="text-header">
Minimum Bid Amount:
</Col>
<Col style={{ paddingLeft: "0px" }}>
<Form.Control
className="mb-4"
type="number"
step="0"
placeholder="No decimal places"
onChange={(e) => setAddPoolState({
...addPoolState,
minimumBidAmount: e.target.value
})}
style={{ width: "80%" }}
value={addPoolState.minimumBidAmount}
required
/>
</Col>
</Row>
<Row>
<Col className="text-header">
Every Auction Interval:
</Col>
<Col style={{ paddingLeft: "0px" }}>
<Form.Control
className="mb-4"
type="number"
step="0"
placeholder="In hours (Eg. 1)"
onChange={(e) => setAddPoolState({
...addPoolState,
auctionInterval: e.target.value
})}
style={{ width: "80%" }}
value={addPoolState.auctionInterval}
required
/>
</Col>
</Row>
<Row>
<Col className="text-header">
Aution Duration:
</Col>
<Col style={{ paddingLeft: "0px" }}>
<Form.Control
className="mb-4"
type="number"
min="0"
max={addPoolState.auctionInterval - 1}
step="0"
placeholder="10 (For 10 hours)"
onChange={(e) => setAddPoolState({
...addPoolState,
auctionDuration: e.target.value
})}
style={{ width: "80%" }}
value={addPoolState.auctionDuration}
required
/>
</Col>
</Row>
<Row style={{ marginBottom: "20px" }}>
<Col className="text-header">
Lending Pool:
</Col>
<Col style={{ paddingLeft: "0px" }}>
<DropdownButton
style={{
position: "absolute",
}}
title={lendingPool.map((element) => (
addPoolState.token === element.token ?
element.pool
: null
))}
variant="outline-info"
onSelect={(e) => setAddPoolState({
...addPoolState,
token: e
})}
>
{lendingPool.map((element, key) => (
<Dropdown.Item
key={key}
eventKey={element.token}
>
{element.pool}
</Dropdown.Item>
))}
</DropdownButton>
</Col>
</Row>
</Card.Body>
<Card.Footer className="text-center">
<Button
onClick={handleCreatePool}
variant="success"
>
{processing ?
<div className="d-flex align-items-center">
Processing
<span className="loading ml-2"></span>
</div>
:
<div>Submit</div>
}
</Button>
</Card.Footer>
</Card>
<Card className="hidden-card"></Card>
</CardDeck>
}
<AlertModal
open={errorModal.open}
toggle={() => setErrorModal({
...errorModal, open: false
})}
>
{errorModal.msg}
</AlertModal>
<SuccessModal
open={successModal.open}
toggle={() => setSuccessModal({
...successModal, open: false
})}
onConfirm={() => history.push("/")}
>
{successModal.msg}
</SuccessModal>
</div>
);
}
Example #5
| Source File: index.js From pooled-loan with MIT License | 4 votes |
|
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 >
);
}
Example #6
| Source File: index.js From pooled-loan with MIT License | 4 votes |
|
export default function ViewPool() {
let routes;
const DAI = "0xFf795577d9AC8bD7D90Ee22b6C1703490b6512FD";
const mUSD = "0x70605Bdd16e52c86FC7031446D995Cf5c7E1b0e7";
const { lendingPool, loanPoolAddress } = useParams();
const [loading, setLoading] = useState(true);
let [erc20Instance, setErc20Instance] = useState();
let [contractInstance, setContractInstance] = useState();
const [state, setState] = useState({
maxBidAmount: 0,
minBidAmount: 0,
poolStartTimestamp: 0,
isParticipant: false,
alreadyTakenLoan: false,
loanAmount: 0,
collateralAmount: 0,
totalParticipants: 0,
auctionCount: 0,
autionStartTimestamp: 0,
autionCloseTimestamp: 0,
auctionInterval: 0,
poolCloseTimestamp: 0,
highestBidAmount: 0,
isLoanWinner: false,
winnerInAuction: 0,
userCurrentBid: 0,
claimedFinalYield: false,
erc20Balance: 0,
createdAt: 0,
});
const [successModal, setSuccessModal] = useState({
msg: "",
open: false
});
const [errorModal, setErrorModal] = useState({
msg: "",
open: false
});
const [claimingLoan, setClaimingLoan] = useState(false);
const [claimingYield, setClaimingYield] = useState(false);
const [showBid, setShowBid] = useState(false);
const [showParticipate, setShowParticipate] = useState(false);
const [showMetamaskError, setShowMetamaskError] = useState(false);
const handleClaimLoan = async () => {
contractInstance.methods.claimLoan()
.send()
.on('transactionHash', () => {
setClaimingLoan(true);
})
.on('receipt', () => {
setClaimingLoan(false);
fetchContractData();
setSuccessModal({
open: true,
msg: "Congratulations ? !! " +
"You received loan amount in your wallet !!",
});
})
.catch((error) => {
setClaimingLoan(false);
setErrorModal({
open: true,
// onConfirm={handleReload}
msg: error.message,
});
});
}
const handleClaimFinalYield = async () => {
contractInstance.methods.claimFinalYield()
.send()
.on('transactionHash', () => {
setClaimingYield(true);
})
.on('receipt', () => {
setClaimingYield(false);
fetchContractData();
setSuccessModal({
open: true,
msg: "Congratulations ? !! " +
"You received your final yield !!",
});
})
.catch((error) => {
setClaimingYield(false);
setErrorModal({
open: true,
msg: error.message,
});
});
}
const fetchContractData = async () => {
try {
let result;
if (!contractInstance) {
result = await createContractInstance();
}
contractInstance = contractInstance ? contractInstance : result.contract;
erc20Instance = erc20Instance ? erc20Instance : result.erc20;
if (contractInstance) {
const result = await marlin.fetchPoolInfo(
loanPoolAddress
);
const isParticipant = await contractInstance
.methods.isParticipant(window.userAddress).call();
const alreadyTakenLoan = await contractInstance
.methods.takenLoan(window.userAddress).call();
const totalParticipants = await contractInstance
.methods.totalParticipants().call();
const auctionCount = await contractInstance
.methods.getAuctionCount().call();
const userCurrentBid = await marlin.fetchUserBid(
loanPoolAddress, window.userAddress, auctionCount
);
const highestBidAmount = await contractInstance
.methods.highestBidAmount(auctionCount).call();
const poolCloseTimestamp = await contractInstance
.methods.poolCloseTimestamp().call();
let autionStartTimestamp, autionCloseTimestamp;
if (Number(totalParticipants) > 1) {
autionStartTimestamp = await contractInstance
.methods.nextAutionStartTimestamp().call();
autionCloseTimestamp = await contractInstance
.methods.nextAutionCloseTimestamp().call();
}
let isLoanWinner = false, winnerInAuction = 0;
if (Number(auctionCount) > 0) {
const loanStatus = await contractInstance
.methods.checkWinnerStatus(window.userAddress).call();
winnerInAuction = loanStatus[1];
if (winnerInAuction < auctionCount ||
(Number(auctionCount) === Number(totalParticipants) - 1 &&
time.currentUnixTime() > Number(autionCloseTimestamp))
) {
isLoanWinner = loanStatus[0];
}
}
let loanAmount;
if (isLoanWinner || alreadyTakenLoan) {
loanAmount = await contractInstance
.methods.loanAmount(window.userAddress).call();
}
let claimedFinalYield;
if (time.currentUnixTime() >= Number(poolCloseTimestamp)) {
claimedFinalYield = await contractInstance
.methods.claimedFinalYield(window.userAddress).call();
}
let erc20Balance = await precision.remove(await erc20Instance
.methods.balanceOf(window.userAddress).call(), 18);
const maxBidAmount = Number(result.collateralAmount) /
Number(result.maxParticipants);
setState({
isParticipant,
alreadyTakenLoan,
loanAmount,
totalParticipants,
auctionCount,
autionStartTimestamp,
autionCloseTimestamp,
highestBidAmount,
isLoanWinner,
winnerInAuction,
poolCloseTimestamp,
erc20Balance,
maxBidAmount,
userCurrentBid,
claimedFinalYield,
minBidAmount: Number(result.minimumBidAmount),
collateralAmount: Number(result.collateralAmount),
auctionInterval: Number(result.auctionInterval),
createdAt: Number(result.createdAt),
});
setShowParticipate(false);
setShowBid(false);
setLoading(false);
}
} catch (error) {
setErrorModal({
open: true,
msg: error.message,
});
}
};
const createContractInstance = () => {
return new Promise((resolve, reject) => {
try {
let contract;
if (lendingPool === "Aave") {
contract = new window.web3.eth.Contract(
loanPoolAaveAbi.default,
loanPoolAddress,
{ from: window.userAddress }
);
} else if (lendingPool === "Mstable") {
contract = new window.web3.eth.Contract(
loanPoolMstableAbi.default,
loanPoolAddress,
{ from: window.userAddress }
);
}
const erc20 = new window.web3.eth.Contract(
erc20Abi.default,
lendingPool === "Aave" ? DAI : mUSD,
{ from: window.userAddress }
);
setErc20Instance(erc20);
setContractInstance(contract);
resolve({ contract, erc20 });
} catch (error) {
reject(error);
}
});
};
const getTokenSymbol = () => {
return lendingPool === "Aave" ?
"DAI" :
"mUSD";
}
useEffect(() => {
if (typeof window.ethereum === 'undefined' ||
!window.ethereum.isConnected() ||
!window.ethereum.selectedAddress
) {
setLoading(false);
setShowMetamaskError(true);
}
if (typeof window.ethereum !== 'undefined' &&
window.ethereum.selectedAddress &&
window.ethereum.isConnected() &&
!state.isParticipant
) {
fetchContractData();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
if (loading) {
routes = <Loading />;
} else {
routes = (
<div>
{showMetamaskError ?
<AlertModal
open={showMetamaskError}
toggle={() => {
setShowMetamaskError(false);
history.push('/');
}}
>
<div>
{typeof window.ethereum === 'undefined' ?
<div>
You can't use these features without Metamask.
<br />
Please install
<Image width="50px" src={metamask}></Image>
first !!
</div>
:
<div>
Please connect to
<Image width="50px" src={metamask}></Image>
to use this feature !!
</div>
}
</div>
</AlertModal>
:
<CardDeck>
<Card className="hidden-card"></Card>
<Card className="mx-auto view-pool-card">
<Card.Body style={{ textAlign: "left", fontWeight: "bold" }}>
<p className="view-pool-header">
<u>Loan Pool</u>
</p>
<Row style={{ paddingBottom: "20px" }}>
<Col>
<u>Total Participants</u>
<span> :</span>
<span className="float-right">
{state.totalParticipants}
</span>
</Col>
<Col>
<u>Lending Pool</u>
<span> :</span>
<span className="float-right">
Aave
</span>
</Col>
</Row>
<Row style={{ paddingBottom: "20px" }}>
<Col>
<u>Auction Done</u>
<span> :</span>
<span className="float-right">
{state.totalParticipants > 1 ?
state.auctionCount
: 0
}
</span>
</Col>
<Col>
<u>Deposit Amount</u>
<span> :</span>
<span className="float-right">
<span>{state.collateralAmount} {getTokenSymbol()}</span>
</span>
</Col>
</Row>
<Row style={{ paddingBottom: "20px" }}>
<Col>
<u>Max Bid Amount</u>
<span> : </span>
<span className="float-right">
<span>{state.maxBidAmount} {getTokenSymbol()}</span>
</span>
</Col>
<Col>
<u>Min Bid Amount</u>
<span> : </span>
<span className="float-right">
<span>{state.minBidAmount} {getTokenSymbol()}</span>
</span>
</Col>
</Row>
{state.totalParticipants > 1 &&
Number(state.autionCloseTimestamp) > time.currentUnixTime() ?
<div>
{time.currentUnixTime() < state.autionStartTimestamp ?
<Row className="text-center" style={{ paddingBottom: "20px" }}>
<Col>
<u>Next Auction Start</u>
<span> : </span>
<span>
{time.getRemaingTime(state.autionStartTimestamp)}
</span>
</Col>
</Row>
:
<div style={{ marginTop: "10px" }}>
<div className="auction-message">
Auction Going On
</div>
<Row className="text-center" style={{ paddingBottom: "20px" }}>
<Col>
<u>Highest Bid Amount</u>
<span> : </span>
<span>
{state.highestBidAmount} {getTokenSymbol()}
</span>
</Col>
</Row>
</div>
}
<Row className="text-center">
<Col>
<u>Auction Close In</u>
<span> : </span>
<span>
{time.getRemaingTime(state.autionCloseTimestamp)}
</span>
</Col>
</Row>
</div>
: (state.totalParticipants > 1 ?
(
Number(state.poolCloseTimestamp) < time.currentUnixTime() ?
<div className="auction-alert-message">
Pool Already Closed
</div>
:
<Row className="text-center">
<Col>
<u>Pool Closing In</u>
<span> : </span>
<span>
{time.getRemaingTime(state.poolCloseTimestamp)}
</span>
</Col>
</Row>
)
: null
)
}
{showBid ?
<Bid
contractInstance={contractInstance}
totalAmount={state.collateralAmount}
token={getTokenSymbol()}
callback={fetchContractData}
/>
: null}
{showParticipate ?
(state.erc20Balance >= state.collateralAmount ?
<Participate
poolAddress={loanPoolAddress}
contractInstance={contractInstance}
erc20Instance={erc20Instance}
buyToken={lendingPool === "Aave" ? "DAI" : "mUSD"}
availableBalance={state.erc20Balance}
balanaceNeeded={state.collateralAmount}
callback={fetchContractData}
/>
:
<SwapToken
fixedBuyToken={true}
buyToken={lendingPool === "Aave" ? "DAI" : "mUSD"}
availableBalance={state.erc20Balance}
balanaceNeeded={state.collateralAmount}
/>
)
: null}
</Card.Body>
{state.isParticipant ?
(time.currentUnixTime() >= Number(state.poolCloseTimestamp) ?
(!state.claimedFinalYield ?
<Card.Footer className="view-pool-footer">
<Button
onClick={handleClaimFinalYield}
variant="success"
>
{claimingYield ?
<div className="d-flex align-items-center">
Processing
<span className="loading ml-2"></span>
</div>
:
<div>Claim Final Yield</div>
}
</Button>
</Card.Footer>
:
<div className="info-message">
Thank you for your participation in the pool.<br />
You have already claimed your Final yield. <br />
Hope to see you on other pools
<span role="img" aria-label="smile-emoji"> ?</span>
</div>
) : (state.alreadyTakenLoan ?
<div className="info-message">
Congratulations
<span role="img" aria-label="congratualation-emoji"> ?</span><br />
You have already won a Loan of amount {state.loanAmount} {getTokenSymbol()}<br />
Now, You can't take part in bidding process.
</div>
: (!state.isLoanWinner &&
time.currentUnixTime() > Number(state.autionStartTimestamp) &&
time.currentUnixTime() < Number(state.autionCloseTimestamp) ?
<div>
{state.userCurrentBid > 0 && !showBid ?
<div className="info-message">
You have successfully placed your bid
for this auction.<br />
<span>
Your bid is {state.userCurrentBid} {getTokenSymbol()}<br />
</span>
</div>
: null
}
<Card.Footer className="view-pool-footer">
<Button
onClick={() => setShowBid(true)}
variant="warning"
>
{state.userCurrentBid > 0 ?
<div>Want to Bid Higher ?</div>
:
<div>Want to Bid ?</div>
}
</Button>
</Card.Footer>
</div>
: (state.isLoanWinner ?
<div>
<div className="info-message">
You have successfully won the bid in auction {state.winnerInAuction}
<br />click below button to claim your loan of
<span> {state.loanAmount} {getTokenSymbol()}.</span>
</div>
<Card.Footer className="view-pool-footer">
<Button
onClick={handleClaimLoan}
variant="success"
>
{claimingLoan ?
<div className="d-flex align-items-center">
Processing
<span className="loading ml-2"></span>
</div>
:
<div>Claim Your Loan</div>
}
</Button>
</Card.Footer>
</div>
:
<div className="info-message">
Thank you for your participation in the pool.<br />
{state.totalParticipants <= 1 ?
<div>
The bid will start once at least
one more person join the pool.
</div>
:
<div>
Please wait till next auction.
</div>
}
</div>
)
)
)
) : (time.currentUnixTime() < (state.createdAt + state.auctionInterval * 3600) ?
<Card.Footer className="view-pool-footer">
<Button
onClick={() => setShowParticipate(true)}
variant="success"
>
Want to Participate ?
</Button>
</Card.Footer>
:
<div className="alert-message">
Participation time already over.<br />
Please check other Pools.
</div>
)
}
</Card>
<Card className="hidden-card"></Card>
</CardDeck>
}
<AlertModal
open={errorModal.open}
toggle={() => setErrorModal({
...errorModal, open: false
})}
>
{errorModal.msg}
</AlertModal>
<SuccessModal
open={successModal.open}
toggle={() => setSuccessModal({
...successModal, open: false
})}
>
{successModal.msg}
</SuccessModal>
</div >
);
}
return routes;
}
