feat: add repay, withdraw confirmation

src/components/BorrowInput/index.tsx

@@ -87,6 +87,7 @@ export const BorrowInput = (props: {
             : undefined
         );
 
+        setValue("");
         setShowConfirmation(true);
       } catch {
         // TODO: 

src/components/DepositInput/index.tsx

@@ -46,6 +46,7 @@ export const DepositInput = (props: {
           wallet
         );
 
+        setValue("");
         setShowConfirmation(true);
       } catch {
         // TODO:

src/components/RepayInput/index.tsx

@@ -6,7 +6,7 @@ import {
   LendingReserveParser,
 } from "../../models";
 import { TokenIcon } from "../TokenIcon";
-import { Button, Card, Slider } from "antd";
+import { Button, Card, Slider, Spin } from "antd";
 import { cache, ParsedAccount, useMint } from "../../contexts/accounts";
 import { NumericInput } from "../Input/numeric";
 import { useConnection } from "../../contexts/connection";
@@ -21,6 +21,11 @@ import {
   toLamports,
 } from "../../utils/utils";
 import { LABELS } from "../../constants";
+import { LoadingOutlined } from "@ant-design/icons";
+import { ActionConfirmation} from './../ActionConfirmation';
+import { BackButton } from "./../BackButton";
+
+const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
 
 export const RepayInput = (props: {
   className?: string;
@@ -30,6 +35,8 @@ export const RepayInput = (props: {
   const connection = useConnection();
   const { wallet } = useWallet();
   const [value, setValue] = useState("");
+  const [pendingTx, setPendingTx] = useState(false);
+  const [showConfirmation, setShowConfirmation] = useState(false);
 
   const repayReserve = props.reserve;
   const obligation = props.obligation;
@@ -74,7 +81,12 @@ export const RepayInput = (props: {
       return;
     }
 
-    repay(
+    setPendingTx(true);
+
+    (async () => {
+      try {
+
+        await repay(
       fromAccounts[0],
       lamports,
       obligation,
@@ -84,6 +96,15 @@ export const RepayInput = (props: {
       connection,
       wallet
     );
+
+    setValue("");
+    setShowConfirmation(true);
+  } catch {
+    // TODO: 
+  }finally {
+    setPendingTx(false);
+  }
+})();
   }, [
     lamports,
     connection,
@@ -105,6 +126,7 @@ export const RepayInput = (props: {
 
   return (
     <Card className={props.className} bodyStyle={bodyStyle}>
+      {showConfirmation ? <ActionConfirmation onClose={() => setShowConfirmation(false)} /> :  
       <div
         style={{
           display: "flex",
@@ -134,7 +156,8 @@ export const RepayInput = (props: {
           />
           <div>{name}</div>
         </div>
-        <Slider
+        {/* TODO: finish slider implementation */}
+        {/* <Slider
           marks={marks}
           value={mark}
           onChange={(val: number) =>
@@ -149,7 +172,7 @@ export const RepayInput = (props: {
               ).toFixed(2)
             )
           }
-        />
+        /> */}
         <div className="repay-input-title">{LABELS.SELECT_COLLATERAL}</div>
         <CollateralSelector
           reserve={repayReserve.info}
@@ -163,8 +186,9 @@ export const RepayInput = (props: {
           disabled={fromAccounts.length === 0}
         >
           {LABELS.REPAY_ACTION}
+          {pendingTx && <Spin indicator={antIcon} className="action-spinner" />}
         </Button>
-      </div>
+      </div>}
     </Card>
   );
 };

src/components/WithdrawInput/index.tsx

@@ -6,7 +6,7 @@ import {
 } from "../../hooks";
 import { LendingReserve } from "../../models/lending";
 import { TokenIcon } from "../TokenIcon";
-import { Button, Card } from "antd";
+import { Button, Card, Spin } from "antd";
 import { NumericInput } from "../Input/numeric";
 import { useConnection } from "../../contexts/connection";
 import { useWallet } from "../../contexts/wallet";
@@ -14,6 +14,10 @@ import { withdraw } from "../../actions";
 import { PublicKey } from "@solana/web3.js";
 import "./style.less";
 import { LABELS } from "../../constants";
+import { LoadingOutlined } from "@ant-design/icons";
+import { ActionConfirmation} from './../ActionConfirmation';
+
+const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
 
 export const WithdrawInput = (props: {
   className?: string;
@@ -23,6 +27,8 @@ export const WithdrawInput = (props: {
   const connection = useConnection();
   const { wallet } = useWallet();
   const [value, setValue] = useState("");
+  const [pendingTx, setPendingTx] = useState(false);
+  const [showConfirmation, setShowConfirmation] = useState(false);
 
   const reserve = props.reserve;
   const address = props.address;
@@ -37,7 +43,11 @@ export const WithdrawInput = (props: {
   );
 
   const onWithdraw = useCallback(() => {
-    withdraw(
+    setPendingTx(true);
+
+    (async () => {
+      try {
+        await withdraw(
           fromAccounts[0],
           Math.ceil(
             collateralBalanceLamports *
@@ -48,6 +58,15 @@ export const WithdrawInput = (props: {
           connection,
           wallet
         );
+
+        setValue("");
+        setShowConfirmation(true);
+      } catch {
+        // TODO:
+      } finally {
+        setPendingTx(false);
+      }
+    })();
   }, [
     connection,
     wallet,
@@ -69,6 +88,7 @@ export const WithdrawInput = (props: {
 
   return (
     <Card className={props.className} bodyStyle={bodyStyle}>
+      {showConfirmation ? <ActionConfirmation onClose={() => setShowConfirmation(false)} /> : 
       <div
         style={{
           display: "flex",
@@ -99,11 +119,12 @@ export const WithdrawInput = (props: {
         <Button
           type="primary"
           onClick={onWithdraw}
-          disabled={fromAccounts.length === 0}
+          disabled={fromAccounts.length === 0 || pendingTx}
         >
           {LABELS.WITHDRAW_ACTION}
+          {pendingTx && <Spin indicator={antIcon} className="action-spinner" />}
         </Button>
-      </div>
+      </div>}
     </Card>
   );
 };