feat: add liquidation view
This commit is contained in:
parent
db67a387d6
commit
d299a35d87
|
@ -19,6 +19,7 @@ import {
|
||||||
ReserveView,
|
ReserveView,
|
||||||
WithdrawView,
|
WithdrawView,
|
||||||
LiquidateView,
|
LiquidateView,
|
||||||
|
LiquidateReserveView
|
||||||
} from "./views";
|
} from "./views";
|
||||||
|
|
||||||
export function Routes() {
|
export function Routes() {
|
||||||
|
@ -67,6 +68,10 @@ export function Routes() {
|
||||||
path="/liquidate"
|
path="/liquidate"
|
||||||
children={<LiquidateView />}
|
children={<LiquidateView />}
|
||||||
/>
|
/>
|
||||||
|
<Route
|
||||||
|
path="/liquidate/:id"
|
||||||
|
children={<LiquidateReserveView />}
|
||||||
|
/>
|
||||||
<Route exact path="/faucet" children={<FaucetView />} />
|
<Route exact path="/faucet" children={<FaucetView />} />
|
||||||
</Switch>
|
</Switch>
|
||||||
</AppLayout>
|
</AppLayout>
|
||||||
|
|
|
@ -9,3 +9,4 @@ export { WithdrawView } from "./withdraw";
|
||||||
export { FaucetView } from "./faucet";
|
export { FaucetView } from "./faucet";
|
||||||
export { RepayReserveView } from "./repayReserve";
|
export { RepayReserveView } from "./repayReserve";
|
||||||
export { LiquidateView } from "./liquidate";
|
export { LiquidateView } from "./liquidate";
|
||||||
|
export { LiquidateReserveView } from "./liquidateReserve";
|
||||||
|
|
|
@ -34,7 +34,7 @@ export const LiquidateItem = (props: {
|
||||||
]);
|
]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Link to={`/liquidate/${borrowReserve.pubkey.toBase58()}`}>
|
<Link to={`/liquidate/${obligation.pubkey.toBase58()}`}>
|
||||||
<Card>
|
<Card>
|
||||||
<div className="liquidate-item">
|
<div className="liquidate-item">
|
||||||
<span style={{ display: "flex" }}>
|
<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