added swap input style to deposit
This commit is contained in:
parent
c295b8e4bf
commit
9b20d9013b
|
@ -17,6 +17,7 @@ import "./style.less";
|
||||||
import { ActionConfirmation } from "./../ActionConfirmation";
|
import { ActionConfirmation } from "./../ActionConfirmation";
|
||||||
import { LABELS, marks } from "../../constants";
|
import { LABELS, marks } from "../../constants";
|
||||||
import { ConnectButton } from "../ConnectButton";
|
import { ConnectButton } from "../ConnectButton";
|
||||||
|
import CollateralInput from "../CollateralInput";
|
||||||
|
|
||||||
export const DepositInput = (props: {
|
export const DepositInput = (props: {
|
||||||
className?: string;
|
className?: string;
|
||||||
|
@ -31,17 +32,16 @@ export const DepositInput = (props: {
|
||||||
const reserve = props.reserve;
|
const reserve = props.reserve;
|
||||||
const address = props.address;
|
const address = props.address;
|
||||||
|
|
||||||
const name = useTokenName(reserve?.liquidityMint);
|
|
||||||
const { accounts: fromAccounts, balance, balanceLamports } = useUserBalance(
|
const { accounts: fromAccounts, balance, balanceLamports } = useUserBalance(
|
||||||
reserve?.liquidityMint
|
reserve?.liquidityMint
|
||||||
);
|
);
|
||||||
|
console.log(balance)
|
||||||
const convert = useCallback(
|
const convert = useCallback(
|
||||||
(val: string | number) => {
|
(val: string | number) => {
|
||||||
if (typeof val === "string") {
|
if (typeof val === "string") {
|
||||||
return (parseFloat(val) / balance) * 100;
|
return (parseFloat(val) / balance) * 100;
|
||||||
} else {
|
} else {
|
||||||
return ((val * balance) / 100).toFixed(2);
|
return (val * balance) / 100;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[balance]
|
[balance]
|
||||||
|
@ -108,26 +108,30 @@ export const DepositInput = (props: {
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className="deposit-input-title">{LABELS.DEPOSIT_QUESTION}</div>
|
<div className="deposit-input-title">{LABELS.DEPOSIT_QUESTION}</div>
|
||||||
<div className="token-input">
|
<div
|
||||||
<TokenIcon mintAddress={reserve?.liquidityMint} />
|
style={{
|
||||||
<NumericInput
|
display: "flex",
|
||||||
value={value}
|
flexDirection: "row",
|
||||||
onChange={setValue}
|
justifyContent: "space-evenly",
|
||||||
autoFocus={true}
|
alignItems: "center",
|
||||||
style={{
|
}}
|
||||||
fontSize: 20,
|
>
|
||||||
boxShadow: "none",
|
<CollateralInput
|
||||||
borderColor: "transparent",
|
title="Amount"
|
||||||
outline: "transparent",
|
reserve={reserve}
|
||||||
|
amount={parseFloat(value) || 0}
|
||||||
|
onInputChange={(val: number | null) => {
|
||||||
|
setValue(val?.toString() || "");
|
||||||
}}
|
}}
|
||||||
placeholder="0.00"
|
disabled={true}
|
||||||
|
hideBalance={true}
|
||||||
/>
|
/>
|
||||||
<div>{name}</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Slider marks={marks} value={pct} onChange={setPct} />
|
<Slider marks={marks} value={pct} onChange={setPct} />
|
||||||
|
|
||||||
<ConnectButton
|
<ConnectButton
|
||||||
|
size="large"
|
||||||
type="primary"
|
type="primary"
|
||||||
onClick={onDeposit}
|
onClick={onDeposit}
|
||||||
loading={pendingTx}
|
loading={pendingTx}
|
||||||
|
|
Loading…
Reference in New Issue