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
|
||||
size="large"
|
||||
showSearch
|
||||
style={{ minWidth: 120 }}
|
||||
style={{ minWidth: 300 , margin: "5px 0px" }}
|
||||
placeholder="Collateral"
|
||||
value={props.mint}
|
||||
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;
|
||||
}
|
||||
|
||||
.liquidate--reserve-item {
|
||||
.liquidate-reserve-item {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
|
@ -14,7 +14,7 @@
|
|||
flex: 1;
|
||||
}
|
||||
|
||||
.liquidate--reserve-item-left {
|
||||
.liquidate-reserve-item-left {
|
||||
flex: 60%;
|
||||
}
|
||||
|
||||
|
@ -24,7 +24,7 @@
|
|||
|
||||
/* Responsive layout - makes a one column layout instead of a two-column layout */
|
||||
@media (max-width: 600px) {
|
||||
.liquidate--reserve-item-right, .liquidate-reserve-item-left {
|
||||
.liquidate-reserve-item-right, .liquidate-reserve-item-left {
|
||||
flex: 100%;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue