certusone
/
oyster
mirror of https://github.com/certusone/oyster.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

added swap input style to deposit

This commit is contained in:
juan 2021-01-24 15:34:29 -05:00
parent c295b8e4bf
commit 9b20d9013b
1 changed files with 20 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/DepositInput/index.tsx
View File

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