mirror of https://github.com/certusone/oyster.git
feat: add liquidate input
This commit is contained in:
parent
c1ca4b26a5
commit
9eb6eac25d
|
@ -28,7 +28,7 @@ export const CollateralSelector = (props: {
|
||||||
<Select
|
<Select
|
||||||
size="large"
|
size="large"
|
||||||
showSearch
|
showSearch
|
||||||
style={{ minWidth: 120 }}
|
style={{ minWidth: 300 , margin: "5px 0px" }}
|
||||||
placeholder="Collateral"
|
placeholder="Collateral"
|
||||||
value={props.mint}
|
value={props.mint}
|
||||||
onChange={(item) => {
|
onChange={(item) => {
|
||||||
|
|
|
@ -0,0 +1,60 @@
|
||||||
|
import { Button } from "antd";
|
||||||
|
import Card from "antd/lib/card";
|
||||||
|
import React, { useCallback } from "react";
|
||||||
|
import { useState } from "react";
|
||||||
|
import { LABELS } from "../../constants";
|
||||||
|
import { ParsedAccount } from "../../contexts/accounts";
|
||||||
|
import { LendingObligation, LendingReserve } from "../../models";
|
||||||
|
import { BackButton } from "../BackButton";
|
||||||
|
import { CollateralSelector } from "../CollateralSelector";
|
||||||
|
import "./style.less";
|
||||||
|
|
||||||
|
export const LiquidateInput = (props: {
|
||||||
|
className?: string;
|
||||||
|
reserve: ParsedAccount<LendingReserve>;
|
||||||
|
obligation: ParsedAccount<LendingObligation>;
|
||||||
|
}) => {
|
||||||
|
|
||||||
|
const { reserve } = props;
|
||||||
|
|
||||||
|
const [collateralReserveMint, setCollateralReserveMint] = useState<string>();
|
||||||
|
const [pendingTx, setPendingTx] = useState(false);
|
||||||
|
|
||||||
|
const onLiquidate = useCallback(() => {
|
||||||
|
setPendingTx(true);
|
||||||
|
setPendingTx(false);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const bodyStyle: React.CSSProperties = {
|
||||||
|
display: "flex",
|
||||||
|
flex: 1,
|
||||||
|
justifyContent: "center",
|
||||||
|
alignItems: "center",
|
||||||
|
height: "100%",
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card className={props.className} bodyStyle={bodyStyle} >
|
||||||
|
<div style={{
|
||||||
|
display: "flex",
|
||||||
|
flexDirection: "column",
|
||||||
|
justifyContent: "space-around",
|
||||||
|
}}>
|
||||||
|
<div className="liquidate-input-title">{LABELS.SELECT_COLLATERAL}</div>
|
||||||
|
<CollateralSelector
|
||||||
|
reserve={reserve.info}
|
||||||
|
mint={collateralReserveMint}
|
||||||
|
onMintChange={setCollateralReserveMint}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
type="primary"
|
||||||
|
onClick={onLiquidate}
|
||||||
|
loading={pendingTx}
|
||||||
|
>
|
||||||
|
{LABELS.LIQUIDATE_ACTION}
|
||||||
|
</Button>
|
||||||
|
<BackButton />
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
|
@ -0,0 +1,3 @@
|
||||||
|
.liquidate-input-title {
|
||||||
|
font-size: 1.05rem;
|
||||||
|
}
|
|
@ -4,7 +4,7 @@
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.liquidate--reserve-item {
|
.liquidate-reserve-item {
|
||||||
margin: 4px;
|
margin: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -14,7 +14,7 @@
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.liquidate--reserve-item-left {
|
.liquidate-reserve-item-left {
|
||||||
flex: 60%;
|
flex: 60%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -24,7 +24,7 @@
|
||||||
|
|
||||||
/* Responsive layout - makes a one column layout instead of a two-column layout */
|
/* Responsive layout - makes a one column layout instead of a two-column layout */
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
.liquidate--reserve-item-right, .liquidate-reserve-item-left {
|
.liquidate-reserve-item-right, .liquidate-reserve-item-left {
|
||||||
flex: 100%;
|
flex: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
Reference in New Issue