feat: add liquidate input

src/components/CollateralSelector/index.tsx

@@ -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) => {

src/components/LiquidateInput/index.tsx

@@ -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>
+  )
+}

src/components/LiquidateInput/style.less

@@ -0,0 +1,3 @@
+.liquidate-input-title {
+  font-size: 1.05rem;
+}

src/views/liquidateReserve/style.less

@@ -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%;
   }
 }