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

lint

This commit is contained in:
juan 2021-01-24 15:21:29 -05:00
parent 1b14c2641b
commit c295b8e4bf
2 changed files with 111 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/components/BorrowInput/index.tsx
View File

@ -1,8 +1,5 @@
import React, {useCallback, useEffect, useMemo, useState} from "react"; import React, { useCallback, useEffect, useMemo, useState } from "react";
import { import { useUserBalance, useUserObligationByReserve } from "../../hooks";
useUserBalance,
useUserObligationByReserve,
} from "../../hooks";
import { import {
BorrowAmountType, BorrowAmountType,
LendingReserve, LendingReserve,
@ -19,8 +16,8 @@ import { ActionConfirmation } from "./../ActionConfirmation";
import { BackButton } from "./../BackButton"; import { BackButton } from "./../BackButton";
import { ConnectButton } from "../ConnectButton"; import { ConnectButton } from "../ConnectButton";
import CollateralInput from "../CollateralInput"; import CollateralInput from "../CollateralInput";
import {ArrowDownOutlined} from "@ant-design/icons"; import { ArrowDownOutlined } from "@ant-design/icons";
import {useMidPriceInUSD} from "../../contexts/market"; import { useMidPriceInUSD } from "../../contexts/market";
export const BorrowInput = (props: { export const BorrowInput = (props: {
className?: string; className?: string;
@ -47,8 +44,12 @@ export const BorrowInput = (props: {
return cache.get(id) as ParsedAccount<LendingReserve>; return cache.get(id) as ParsedAccount<LendingReserve>;
}, [collateralReserveKey]); }, [collateralReserveKey]);
const borrowPrice = useMidPriceInUSD(borrowReserve.info.liquidityMint.toBase58()).price; const borrowPrice = useMidPriceInUSD(
const collateralPrice = useMidPriceInUSD(collateralReserve?.info.liquidityMint.toBase58())?.price; borrowReserve.info.liquidityMint.toBase58()
).price;
const collateralPrice = useMidPriceInUSD(
collateralReserve?.info.liquidityMint.toBase58()
)?.price;
useEffect(() => { useEffect(() => {
if (collateralReserve && lastTyped === "collateral") { if (collateralReserve && lastTyped === "collateral") {
@ -58,12 +59,19 @@ export const BorrowInput = (props: {
const nCollateralValue = parseFloat(collateralValue); const nCollateralValue = parseFloat(collateralValue);
const borrowInUSD = nCollateralValue * collateralPrice * ltv; const borrowInUSD = nCollateralValue * collateralPrice * ltv;
const borrowAmount = borrowInUSD / borrowPrice; const borrowAmount = borrowInUSD / borrowPrice;
setValue(borrowAmount.toString()) setValue(borrowAmount.toString());
} else { } else {
setValue("") setValue("");
} }
} }
}, [lastTyped, collateralReserve, collateralPrice, borrowPrice, borrowReserve, collateralValue]) }, [
lastTyped,
collateralReserve,
collateralPrice,
borrowPrice,
borrowReserve,
collateralValue,
]);
useEffect(() => { useEffect(() => {
if (collateralReserve && lastTyped === "borrow") { if (collateralReserve && lastTyped === "borrow") {
@ -72,13 +80,20 @@ export const BorrowInput = (props: {
if (value) { if (value) {
const nValue = parseFloat(value); const nValue = parseFloat(value);
const borrowInUSD = nValue * borrowPrice; const borrowInUSD = nValue * borrowPrice;
const collateralAmount = (borrowInUSD / ltv) / collateralPrice const collateralAmount = borrowInUSD / ltv / collateralPrice;
setCollateralValue(collateralAmount.toString()) setCollateralValue(collateralAmount.toString());
} else { } else {
setCollateralValue("") setCollateralValue("");
} }
} }
}, [lastTyped, collateralReserve, collateralPrice, borrowPrice, borrowReserve, value]) }, [
lastTyped,
collateralReserve,
collateralPrice,
borrowPrice,
borrowReserve,
value,
]);
const { accounts: fromAccounts } = useUserBalance( const { accounts: fromAccounts } = useUserBalance(
collateralReserve?.info.collateralMint collateralReserve?.info.collateralMint
@ -160,14 +175,21 @@ export const BorrowInput = (props: {
justifyContent: "space-around", justifyContent: "space-around",
}} }}
> >
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center' }}> <div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-evenly",
alignItems: "center",
}}
>
<CollateralInput <CollateralInput
title='Collateral (estimated)' title="Collateral (estimated)"
reserve={borrowReserve.info} reserve={borrowReserve.info}
amount={parseFloat(collateralValue) || 0} amount={parseFloat(collateralValue) || 0}
onInputChange={(val: number | null) => { onInputChange={(val: number | null) => {
setCollateralValue(val?.toString() || "") setCollateralValue(val?.toString() || "");
setLastTyped("collateral") setLastTyped("collateral");
}} }}
onCollateralReserve={(key) => { onCollateralReserve={(key) => {
setCollateralReserveKey(key); setCollateralReserveKey(key);
@ -175,21 +197,28 @@ export const BorrowInput = (props: {
/> />
</div> </div>
<ArrowDownOutlined /> <ArrowDownOutlined />
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center' }}> <div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-evenly",
alignItems: "center",
}}
>
<CollateralInput <CollateralInput
title='Borrow Amount' title="Borrow Amount"
reserve={borrowReserve.info} reserve={borrowReserve.info}
amount={parseFloat(value) || 0} amount={parseFloat(value) || 0}
onInputChange={(val: number | null) => { onInputChange={(val: number | null) => {
setValue(val?.toString() || "") setValue(val?.toString() || "");
setLastTyped("borrow") setLastTyped("borrow");
}} }}
disabled={true} disabled={true}
hideBalance={true} hideBalance={true}
/> />
</div> </div>
<ConnectButton <ConnectButton
size='large' size="large"
type="primary" type="primary"
onClick={onBorrow} onClick={onBorrow}
loading={pendingTx} loading={pendingTx}

83
src/components/RepayInput/index.tsx
View File

@ -1,4 +1,4 @@
import React, {useCallback, useEffect, useState} from "react"; import React, { useCallback, useEffect, useState } from "react";
import { import {
EnrichedLendingObligation, EnrichedLendingObligation,
InputType, InputType,
@ -19,7 +19,7 @@ import { fromLamports, wadToLamports } from "../../utils/utils";
import { notify } from "../../utils/notifications"; import { notify } from "../../utils/notifications";
import { ConnectButton } from "../ConnectButton"; import { ConnectButton } from "../ConnectButton";
import CollateralInput from "../CollateralInput"; import CollateralInput from "../CollateralInput";
import {useMidPriceInUSD} from "../../contexts/market"; import { useMidPriceInUSD } from "../../contexts/market";
export const RepayInput = (props: { export const RepayInput = (props: {
className?: string; className?: string;
@ -53,11 +53,11 @@ export const RepayInput = (props: {
const convert = useCallback( const convert = useCallback(
(val: string | number) => { (val: string | number) => {
setLastTyped("repay") setLastTyped("repay");
if (typeof val === "string") { if (typeof val === "string") {
return (parseFloat(val) / borrowAmount) * 100; return (parseFloat(val) / borrowAmount) * 100;
} else { } else {
return ((val * borrowAmount) / 100); return (val * borrowAmount) / 100;
} }
}, },
[borrowAmount] [borrowAmount]
@ -97,7 +97,7 @@ export const RepayInput = (props: {
); );
setValue(""); setValue("");
setCollateralValue("") setCollateralValue("");
setShowConfirmation(true); setShowConfirmation(true);
} catch (error) { } catch (error) {
notify({ notify({
@ -125,35 +125,52 @@ export const RepayInput = (props: {
setValue, setValue,
]); ]);
const collateralPrice = useMidPriceInUSD(collateralReserve?.info.liquidityMint.toBase58())?.price; const collateralPrice = useMidPriceInUSD(
collateralReserve?.info.liquidityMint.toBase58()
)?.price;
useEffect(() => { useEffect(() => {
if (collateralReserve && lastTyped === "repay") { if (collateralReserve && lastTyped === "repay") {
const collateralInQuote = obligation.info.collateralInQuote; const collateralInQuote = obligation.info.collateralInQuote;
const collateral = collateralInQuote * collateralPrice const collateral = collateralInQuote * collateralPrice;
if (value) { if (value) {
const borrowRatio = (parseFloat(value) / borrowAmount) * 100 const borrowRatio = (parseFloat(value) / borrowAmount) * 100;
const collateralAmount = (borrowRatio * collateral) / 100 const collateralAmount = (borrowRatio * collateral) / 100;
setCollateralValue(collateralAmount.toString()) setCollateralValue(collateralAmount.toString());
} else { } else {
setCollateralValue("") setCollateralValue("");
} }
} }
}, [lastTyped, collateralReserve, obligation.info.collateralInQuote, collateralPrice, borrowAmount, value]) }, [
lastTyped,
collateralReserve,
obligation.info.collateralInQuote,
collateralPrice,
borrowAmount,
value,
]);
useEffect(() => { useEffect(() => {
if (collateralReserve && lastTyped === "collateral") { if (collateralReserve && lastTyped === "collateral") {
const collateralInQuote = obligation.info.collateralInQuote; const collateralInQuote = obligation.info.collateralInQuote;
const collateral = collateralInQuote * collateralPrice const collateral = collateralInQuote * collateralPrice;
if (collateralValue) { if (collateralValue) {
const collateralRatio = (parseFloat(collateralValue) / collateral) * 100 const collateralRatio =
const borrowValue = (collateralRatio * borrowAmount) / 100 (parseFloat(collateralValue) / collateral) * 100;
setValue(borrowValue.toString()) const borrowValue = (collateralRatio * borrowAmount) / 100;
setValue(borrowValue.toString());
} else { } else {
setValue("") setValue("");
} }
} }
}, [lastTyped, collateralReserve, obligation.info.collateralInQuote, collateralPrice, borrowAmount, collateralValue]) }, [
lastTyped,
collateralReserve,
obligation.info.collateralInQuote,
collateralPrice,
borrowAmount,
collateralValue,
]);
const bodyStyle: React.CSSProperties = { const bodyStyle: React.CSSProperties = {
display: "flex", display: "flex",
@ -175,28 +192,42 @@ export const RepayInput = (props: {
justifyContent: "space-around", justifyContent: "space-around",
}} }}
> >
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center' }}> <div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-evenly",
alignItems: "center",
}}
>
<CollateralInput <CollateralInput
title='Repay Amount' title="Repay Amount"
reserve={repayReserve.info} reserve={repayReserve.info}
amount={parseFloat(value) || 0} amount={parseFloat(value) || 0}
onInputChange={(val: number | null) => { onInputChange={(val: number | null) => {
setValue(val?.toString() || "") setValue(val?.toString() || "");
setLastTyped("repay") setLastTyped("repay");
}} }}
disabled={true} disabled={true}
hideBalance={true} hideBalance={true}
/> />
</div> </div>
<Slider marks={marks} value={pct} onChange={setPct} /> <Slider marks={marks} value={pct} onChange={setPct} />
<div style={{ display: 'flex', flexDirection: 'row', justifyContent: 'space-evenly', alignItems: 'center' }}> <div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-evenly",
alignItems: "center",
}}
>
<CollateralInput <CollateralInput
title='Collateral Amount (estimated)' title="Collateral Amount (estimated)"
reserve={collateralReserve?.info} reserve={collateralReserve?.info}
amount={parseFloat(collateralValue) || 0} amount={parseFloat(collateralValue) || 0}
onInputChange={(val: number | null) => { onInputChange={(val: number | null) => {
setCollateralValue(val?.toString() || "") setCollateralValue(val?.toString() || "");
setLastTyped("collateral") setLastTyped("collateral");
}} }}
disabled={true} disabled={true}
hideBalance={true} hideBalance={true}