feat: add repay, withdraw confirmation
This commit is contained in:
parent
f5637f85a1
commit
1dc3274a0a
|
@ -87,6 +87,7 @@ export const BorrowInput = (props: {
|
|||
: undefined
|
||||
);
|
||||
|
||||
setValue("");
|
||||
setShowConfirmation(true);
|
||||
} catch {
|
||||
// TODO:
|
||||
|
|
|
@ -46,6 +46,7 @@ export const DepositInput = (props: {
|
|||
wallet
|
||||
);
|
||||
|
||||
setValue("");
|
||||
setShowConfirmation(true);
|
||||
} catch {
|
||||
// TODO:
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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,17 +43,30 @@ export const WithdrawInput = (props: {
|
|||
);
|
||||
|
||||
const onWithdraw = useCallback(() => {
|
||||
withdraw(
|
||||
fromAccounts[0],
|
||||
Math.ceil(
|
||||
collateralBalanceLamports *
|
||||
(parseFloat(value) / collateralBalanceInLiquidity)
|
||||
),
|
||||
reserve,
|
||||
address,
|
||||
connection,
|
||||
wallet
|
||||
);
|
||||
setPendingTx(true);
|
||||
|
||||
(async () => {
|
||||
try {
|
||||
await withdraw(
|
||||
fromAccounts[0],
|
||||
Math.ceil(
|
||||
collateralBalanceLamports *
|
||||
(parseFloat(value) / collateralBalanceInLiquidity)
|
||||
),
|
||||
reserve,
|
||||
address,
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue