mirror of https://github.com/certusone/oyster.git
feat: add liquidation view
This commit is contained in:
parent
db67a387d6
commit
d299a35d87
|
@ -19,6 +19,7 @@ import {
|
|||
ReserveView,
|
||||
WithdrawView,
|
||||
LiquidateView,
|
||||
LiquidateReserveView
|
||||
} from "./views";
|
||||
|
||||
export function Routes() {
|
||||
|
@ -67,6 +68,10 @@ export function Routes() {
|
|||
path="/liquidate"
|
||||
children={<LiquidateView />}
|
||||
/>
|
||||
<Route
|
||||
path="/liquidate/:id"
|
||||
children={<LiquidateReserveView />}
|
||||
/>
|
||||
<Route exact path="/faucet" children={<FaucetView />} />
|
||||
</Switch>
|
||||
</AppLayout>
|
||||
|
|
|
@ -9,3 +9,4 @@ export { WithdrawView } from "./withdraw";
|
|||
export { FaucetView } from "./faucet";
|
||||
export { RepayReserveView } from "./repayReserve";
|
||||
export { LiquidateView } from "./liquidate";
|
||||
export { LiquidateReserveView } from "./liquidateReserve";
|
||||
|
|
|
@ -34,7 +34,7 @@ export const LiquidateItem = (props: {
|
|||
]);
|
||||
|
||||
return (
|
||||
<Link to={`/liquidate/${borrowReserve.pubkey.toBase58()}`}>
|
||||
<Link to={`/liquidate/${obligation.pubkey.toBase58()}`}>
|
||||
<Card>
|
||||
<div className="liquidate-item">
|
||||
<span style={{ display: "flex" }}>
|
||||
|
|
|
@ -0,0 +1,36 @@
|
|||
import React from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { useLendingObligation, useLendingReserve } from "../../hooks";
|
||||
import {
|
||||
SideReserveOverview,
|
||||
SideReserveOverviewMode,
|
||||
} from "../../components/SideReserveOverview";
|
||||
import "./style.less";
|
||||
|
||||
export const LiquidateReserveView = () => {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
|
||||
const obligation = useLendingObligation(id);
|
||||
const reserve = useLendingReserve(obligation?.info.borrowReserve);
|
||||
|
||||
if (!obligation || !reserve) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="liquidate-reserve">
|
||||
<div className="liquidate-reserve-container">
|
||||
<div
|
||||
className="liquidate-reserve-item liquidate-reserve-item-left"
|
||||
|
||||
/>
|
||||
<SideReserveOverview
|
||||
className="liquidate-reserve-item liquidate-reserve-item-right"
|
||||
reserve={reserve}
|
||||
mode={SideReserveOverviewMode.Deposit}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
}
|
|
@ -0,0 +1,30 @@
|
|||
.liquidate-reserve {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.liquidate--reserve-item {
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.liquidate-reserve-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.liquidate--reserve-item-left {
|
||||
flex: 60%;
|
||||
}
|
||||
|
||||
.liquidate-reserve-item-right {
|
||||
flex: 30%;
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
flex: 100%;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue