mirror of https://github.com/certusone/oyster.git
added swap input style to withdraw
This commit is contained in:
parent
9b20d9013b
commit
eb2a24980d
|
@ -1,14 +1,7 @@
|
||||||
import React, { useCallback, useState } from "react";
|
import React, { useCallback, useState } from "react";
|
||||||
import {
|
import { InputType, useSliderInput, useUserBalance } from "../../hooks";
|
||||||
InputType,
|
|
||||||
useSliderInput,
|
|
||||||
useTokenName,
|
|
||||||
useUserBalance,
|
|
||||||
} from "../../hooks";
|
|
||||||
import { LendingReserve } from "../../models/lending";
|
import { LendingReserve } from "../../models/lending";
|
||||||
import { TokenIcon } from "../TokenIcon";
|
|
||||||
import { Card, Slider } from "antd";
|
import { Card, Slider } from "antd";
|
||||||
import { NumericInput } from "../Input/numeric";
|
|
||||||
import { useConnection } from "../../contexts/connection";
|
import { useConnection } from "../../contexts/connection";
|
||||||
import { useWallet } from "../../contexts/wallet";
|
import { useWallet } from "../../contexts/wallet";
|
||||||
import { deposit } from "../../actions/deposit";
|
import { deposit } from "../../actions/deposit";
|
||||||
|
@ -35,7 +28,7 @@ export const DepositInput = (props: {
|
||||||
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") {
|
||||||
|
|
|
@ -3,13 +3,10 @@ import {
|
||||||
InputType,
|
InputType,
|
||||||
useUserCollateralBalance,
|
useUserCollateralBalance,
|
||||||
useSliderInput,
|
useSliderInput,
|
||||||
useTokenName,
|
|
||||||
useUserBalance,
|
useUserBalance,
|
||||||
} from "../../hooks";
|
} from "../../hooks";
|
||||||
import { LendingReserve } from "../../models/lending";
|
import { LendingReserve } from "../../models/lending";
|
||||||
import { TokenIcon } from "../TokenIcon";
|
|
||||||
import { Card, Slider } from "antd";
|
import { Card, Slider } from "antd";
|
||||||
import { NumericInput } from "../Input/numeric";
|
|
||||||
import { useConnection } from "../../contexts/connection";
|
import { useConnection } from "../../contexts/connection";
|
||||||
import { useWallet } from "../../contexts/wallet";
|
import { useWallet } from "../../contexts/wallet";
|
||||||
import { withdraw } from "../../actions";
|
import { withdraw } from "../../actions";
|
||||||
|
@ -18,6 +15,7 @@ import "./style.less";
|
||||||
import { LABELS, marks } from "../../constants";
|
import { LABELS, marks } from "../../constants";
|
||||||
import { ActionConfirmation } from "./../ActionConfirmation";
|
import { ActionConfirmation } from "./../ActionConfirmation";
|
||||||
import { ConnectButton } from "../ConnectButton";
|
import { ConnectButton } from "../ConnectButton";
|
||||||
|
import CollateralInput from "../CollateralInput";
|
||||||
|
|
||||||
export const WithdrawInput = (props: {
|
export const WithdrawInput = (props: {
|
||||||
className?: string;
|
className?: string;
|
||||||
|
@ -32,7 +30,6 @@ export const WithdrawInput = (props: {
|
||||||
const reserve = props.reserve;
|
const reserve = props.reserve;
|
||||||
const address = props.address;
|
const address = props.address;
|
||||||
|
|
||||||
const name = useTokenName(reserve?.liquidityMint);
|
|
||||||
const {
|
const {
|
||||||
balanceLamports: collateralBalanceLamports,
|
balanceLamports: collateralBalanceLamports,
|
||||||
accounts: fromAccounts,
|
accounts: fromAccounts,
|
||||||
|
@ -46,7 +43,7 @@ export const WithdrawInput = (props: {
|
||||||
if (typeof val === "string") {
|
if (typeof val === "string") {
|
||||||
return (parseFloat(val) / collateralBalanceInLiquidity) * 100;
|
return (parseFloat(val) / collateralBalanceInLiquidity) * 100;
|
||||||
} else {
|
} else {
|
||||||
return ((val * collateralBalanceInLiquidity) / 100).toFixed(2);
|
return (val * collateralBalanceInLiquidity) / 100;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[collateralBalanceInLiquidity]
|
[collateralBalanceInLiquidity]
|
||||||
|
@ -120,21 +117,24 @@ export const WithdrawInput = (props: {
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className="withdraw-input-title">{LABELS.WITHDRAW_QUESTION}</div>
|
<div className="withdraw-input-title">{LABELS.WITHDRAW_QUESTION}</div>
|
||||||
<div className="token-input">
|
<div
|
||||||
<TokenIcon mintAddress={reserve?.liquidityMint} />
|
|
||||||
<NumericInput
|
|
||||||
value={value}
|
|
||||||
onChange={setValue}
|
|
||||||
autoFocus={true}
|
|
||||||
style={{
|
style={{
|
||||||
fontSize: 20,
|
display: "flex",
|
||||||
boxShadow: "none",
|
flexDirection: "row",
|
||||||
borderColor: "transparent",
|
justifyContent: "space-evenly",
|
||||||
outline: "transparent",
|
alignItems: "center",
|
||||||
}}
|
}}
|
||||||
placeholder="0.00"
|
>
|
||||||
|
<CollateralInput
|
||||||
|
title="Amount"
|
||||||
|
reserve={reserve}
|
||||||
|
amount={parseFloat(value) || 0}
|
||||||
|
onInputChange={(val: number | null) => {
|
||||||
|
setValue(val?.toString() || "");
|
||||||
|
}}
|
||||||
|
disabled={true}
|
||||||
|
hideBalance={true}
|
||||||
/>
|
/>
|
||||||
<div>{name}</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Slider marks={marks} value={pct} onChange={setPct} />
|
<Slider marks={marks} value={pct} onChange={setPct} />
|
||||||
|
|
Loading…
Reference in New Issue