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

chore: prettier

This commit is contained in:
Justin Starry 2020-11-27 10:49:14 +08:00
parent f8db6bfde0
commit cb7bbda611
12 changed files with 272 additions and 233 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/ActionConfirmation/index.tsx
View File

@ -1,9 +1,9 @@
import React, { } from "react";
import React from "react";
import { Button } from "antd";
import "./style.less";
import { LABELS } from "../../constants";
import { Link } from "react-router-dom";
import './style.less';
import "./style.less";
export const ActionConfirmation = (props: {
className?: string;
@ -22,11 +22,7 @@ export const ActionConfirmation = (props: {
<div>Your action has been successfully executed</div>
<div className="success-icon" />
<Link to="/dashboard">
<Button
type="primary"
>
{LABELS.DASHBOARD_ACTION}
</Button>
<Button type="primary">{LABELS.DASHBOARD_ACTION}</Button>
</Link>
<Button type="text" onClick={props.onClose}>
{LABELS.GO_BACK_ACTION}

2
src/components/BackButton/index.tsx
View File

@ -1,4 +1,4 @@
import React, { } from "react";
import React from "react";
import { Button } from "antd";
import { LABELS } from "../../constants";
import { useHistory } from "react-router-dom";

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

@ -20,7 +20,7 @@ import { CollateralSelector } from "./../CollateralSelector";
import "./style.less";
import { LABELS } from "../../constants";
import { LoadingOutlined } from "@ant-design/icons";
import { ActionConfirmation} from './../ActionConfirmation';
import { ActionConfirmation } from "./../ActionConfirmation";
import { BackButton } from "./../BackButton";
const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
@ -66,7 +66,6 @@ export const BorrowInput = (props: {
(async () => {
try {
await borrow(
connection,
wallet,
@ -90,8 +89,8 @@ export const BorrowInput = (props: {
setValue("");
setShowConfirmation(true);
} catch {
// TODO:
}finally {
// TODO:
} finally {
setPendingTx(false);
}
})();
@ -117,50 +116,55 @@ export const BorrowInput = (props: {
return (
<Card className={props.className} bodyStyle={bodyStyle}>
{showConfirmation ? <ActionConfirmation onClose={() => setShowConfirmation(false)} /> :
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "space-around",
}}
>
<div className="borrow-input-title">{LABELS.BORROW_QUESTION}</div>
<div className="token-input">
<TokenIcon mintAddress={borrowReserve?.info.liquidityMint} />
<NumericInput
value={value}
onChange={(val: any) => {
setValue(val);
}}
autoFocus={true}
style={{
fontSize: 20,
boxShadow: "none",
borderColor: "transparent",
outline: "transparent",
}}
placeholder="0.00"
/>
<div>{name}</div>
</div>
<div className="borrow-input-title">{LABELS.SELECT_COLLATERAL}</div>
<CollateralSelector
reserve={borrowReserve.info}
mint={collateralReserveMint}
onMintChange={setCollateralReserveMint}
/>
<Button
type="primary"
onClick={onBorrow}
disabled={fromAccounts.length === 0 || pendingTx}
{showConfirmation ? (
<ActionConfirmation onClose={() => setShowConfirmation(false)} />
) : (
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "space-around",
}}
>
{LABELS.BORROW_ACTION}
{pendingTx && <Spin indicator={antIcon} className="action-spinner" />}
</Button>
<BackButton />
</div>}
<div className="borrow-input-title">{LABELS.BORROW_QUESTION}</div>
<div className="token-input">
<TokenIcon mintAddress={borrowReserve?.info.liquidityMint} />
<NumericInput
value={value}
onChange={(val: any) => {
setValue(val);
}}
autoFocus={true}
style={{
fontSize: 20,
boxShadow: "none",
borderColor: "transparent",
outline: "transparent",
}}
placeholder="0.00"
/>
<div>{name}</div>
</div>
<div className="borrow-input-title">{LABELS.SELECT_COLLATERAL}</div>
<CollateralSelector
reserve={borrowReserve.info}
mint={collateralReserveMint}
onMintChange={setCollateralReserveMint}
/>
<Button
type="primary"
onClick={onBorrow}
disabled={fromAccounts.length === 0 || pendingTx}
>
{LABELS.BORROW_ACTION}
{pendingTx && (
<Spin indicator={antIcon} className="action-spinner" />
)}
</Button>
<BackButton />
</div>
)}
</Card>
);
};

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

@ -10,7 +10,7 @@ import { deposit } from "../../actions/deposit";
import { PublicKey } from "@solana/web3.js";
import "./style.less";
import { LoadingOutlined } from "@ant-design/icons";
import { ActionConfirmation} from './../ActionConfirmation';
import { ActionConfirmation } from "./../ActionConfirmation";
const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
@ -54,7 +54,6 @@ export const DepositInput = (props: {
setPendingTx(false);
}
})();
}, [connection, wallet, value, reserve, fromAccounts, address]);
const bodyStyle: React.CSSProperties = {
@ -67,45 +66,50 @@ export const DepositInput = (props: {
return (
<Card className={props.className} bodyStyle={bodyStyle}>
{showConfirmation ? <ActionConfirmation onClose={() => setShowConfirmation(false)} /> :
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "space-around",
}}
>
<div className="deposit-input-title">
How much would you like to deposit?
</div>
<div className="token-input">
<TokenIcon mintAddress={reserve?.liquidityMint} />
<NumericInput
value={value}
onChange={(val: any) => {
setValue(val);
}}
autoFocus={true}
style={{
fontSize: 20,
boxShadow: "none",
borderColor: "transparent",
outline: "transparent",
}}
placeholder="0.00"
/>
<div>{name}</div>
</div>
<Button
type="primary"
onClick={onDeposit}
disabled={fromAccounts.length === 0 || pendingTx}
{showConfirmation ? (
<ActionConfirmation onClose={() => setShowConfirmation(false)} />
) : (
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "space-around",
}}
>
Deposit
{pendingTx && <Spin indicator={antIcon} className="action-spinner" />}
</Button>
</div>}
<div className="deposit-input-title">
How much would you like to deposit?
</div>
<div className="token-input">
<TokenIcon mintAddress={reserve?.liquidityMint} />
<NumericInput
value={value}
onChange={(val: any) => {
setValue(val);
}}
autoFocus={true}
style={{
fontSize: 20,
boxShadow: "none",
borderColor: "transparent",
outline: "transparent",
}}
placeholder="0.00"
/>
<div>{name}</div>
</div>
<Button
type="primary"
onClick={onDeposit}
disabled={fromAccounts.length === 0 || pendingTx}
>
Deposit
{pendingTx && (
<Spin indicator={antIcon} className="action-spinner" />
)}
</Button>
</div>
)}
</Card>
);
};

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

@ -14,13 +14,10 @@ import { useWallet } from "../../contexts/wallet";
import { repay } from "../../actions";
import { CollateralSelector } from "./../CollateralSelector";
import "./style.less";
import {
formatNumber,
toLamports,
} from "../../utils/utils";
import { formatNumber, toLamports } from "../../utils/utils";
import { LABELS } from "../../constants";
import { LoadingOutlined } from "@ant-design/icons";
import { ActionConfirmation} from './../ActionConfirmation';
import { ActionConfirmation } from "./../ActionConfirmation";
const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
@ -64,7 +61,6 @@ export const RepayInput = (props: {
[value, repayLiquidityMint]
);
const onRepay = useCallback(() => {
if (
!collateralReserve ||
@ -79,26 +75,25 @@ export const RepayInput = (props: {
(async () => {
try {
await repay(
fromAccounts[0],
lamports,
obligation,
obligationAccount,
repayReserve,
collateralReserve,
connection,
wallet
);
fromAccounts[0],
lamports,
obligation,
obligationAccount,
repayReserve,
collateralReserve,
connection,
wallet
);
setValue("");
setShowConfirmation(true);
} catch {
// TODO:
}finally {
setPendingTx(false);
}
})();
setValue("");
setShowConfirmation(true);
} catch {
// TODO:
} finally {
setPendingTx(false);
}
})();
}, [
lamports,
connection,
@ -120,38 +115,40 @@ export const RepayInput = (props: {
return (
<Card className={props.className} bodyStyle={bodyStyle}>
{showConfirmation ? <ActionConfirmation onClose={() => setShowConfirmation(false)} /> :
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "space-around",
}}
>
<div className="repay-input-title">
{LABELS.REPAY_QUESTION} (Currently: ){formatNumber.format(balance)}{" "}
{name})
</div>
<div className="token-input">
<TokenIcon mintAddress={repayReserve?.info.liquidityMint} />
<NumericInput
value={value}
onChange={(val: any) => {
setValue(val);
}}
autoFocus={true}
style={{
fontSize: 20,
boxShadow: "none",
borderColor: "transparent",
outline: "transparent",
}}
placeholder="0.00"
/>
<div>{name}</div>
</div>
{/* TODO: finish slider implementation */}
{/* <Slider
{showConfirmation ? (
<ActionConfirmation onClose={() => setShowConfirmation(false)} />
) : (
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "space-around",
}}
>
<div className="repay-input-title">
{LABELS.REPAY_QUESTION} (Currently: ){formatNumber.format(balance)}{" "}
{name})
</div>
<div className="token-input">
<TokenIcon mintAddress={repayReserve?.info.liquidityMint} />
<NumericInput
value={value}
onChange={(val: any) => {
setValue(val);
}}
autoFocus={true}
style={{
fontSize: 20,
boxShadow: "none",
borderColor: "transparent",
outline: "transparent",
}}
placeholder="0.00"
/>
<div>{name}</div>
</div>
{/* TODO: finish slider implementation */}
{/* <Slider
marks={marks}
value={mark}
onChange={(val: number) =>
@ -167,24 +164,25 @@ export const RepayInput = (props: {
)
}
/> */}
<div className="repay-input-title">{LABELS.SELECT_COLLATERAL}</div>
<CollateralSelector
reserve={repayReserve.info}
mint={collateralReserveMint}
onMintChange={setCollateralReserveMint}
/>
<div className="repay-input-title">{LABELS.SELECT_COLLATERAL}</div>
<CollateralSelector
reserve={repayReserve.info}
mint={collateralReserveMint}
onMintChange={setCollateralReserveMint}
/>
<Button
type="primary"
onClick={onRepay}
disabled={fromAccounts.length === 0}
>
{LABELS.REPAY_ACTION}
{pendingTx && <Spin indicator={antIcon} className="action-spinner" />}
</Button>
</div>}
<Button
type="primary"
onClick={onRepay}
disabled={fromAccounts.length === 0}
>
{LABELS.REPAY_ACTION}
{pendingTx && (
<Spin indicator={antIcon} className="action-spinner" />
)}
</Button>
</div>
)}
</Card>
);
};

7
src/components/SideReserveOverview/index.tsx
View File

@ -1,6 +1,11 @@
import React from "react";
import { useTokenName } from "./../../hooks";
import { calculateBorrowAPY, calculateDepositAPY, calculateUtilizationRatio, LendingReserve } from "../../models/lending";
import {
calculateBorrowAPY,
calculateDepositAPY,
calculateUtilizationRatio,
LendingReserve,
} from "../../models/lending";
import { TokenIcon } from "../../components/TokenIcon";
import { formatNumber, formatPct, fromLamports } from "../../utils/utils";
import { Card, Typography } from "antd";

81
src/components/WithdrawInput/index.tsx
View File

@ -15,7 +15,7 @@ import { PublicKey } from "@solana/web3.js";
import "./style.less";
import { LABELS } from "../../constants";
import { LoadingOutlined } from "@ant-design/icons";
import { ActionConfirmation} from './../ActionConfirmation';
import { ActionConfirmation } from "./../ActionConfirmation";
const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
@ -51,7 +51,7 @@ export const WithdrawInput = (props: {
fromAccounts[0],
Math.ceil(
collateralBalanceLamports *
(parseFloat(value) / collateralBalanceInLiquidity)
(parseFloat(value) / collateralBalanceInLiquidity)
),
reserve,
address,
@ -88,43 +88,48 @@ export const WithdrawInput = (props: {
return (
<Card className={props.className} bodyStyle={bodyStyle}>
{showConfirmation ? <ActionConfirmation onClose={() => setShowConfirmation(false)} /> :
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "space-around",
}}
>
<div className="withdraw-input-title">{LABELS.WITHDRAW_QUESTION}</div>
<div className="token-input">
<TokenIcon mintAddress={reserve?.liquidityMint} />
<NumericInput
value={value}
onChange={(val: any) => {
setValue(val);
}}
autoFocus={true}
style={{
fontSize: 20,
boxShadow: "none",
borderColor: "transparent",
outline: "transparent",
}}
placeholder="0.00"
/>
<div>{name}</div>
</div>
<Button
type="primary"
onClick={onWithdraw}
disabled={fromAccounts.length === 0 || pendingTx}
{showConfirmation ? (
<ActionConfirmation onClose={() => setShowConfirmation(false)} />
) : (
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "space-around",
}}
>
{LABELS.WITHDRAW_ACTION}
{pendingTx && <Spin indicator={antIcon} className="action-spinner" />}
</Button>
</div>}
<div className="withdraw-input-title">{LABELS.WITHDRAW_QUESTION}</div>
<div className="token-input">
<TokenIcon mintAddress={reserve?.liquidityMint} />
<NumericInput
value={value}
onChange={(val: any) => {
setValue(val);
}}
autoFocus={true}
style={{
fontSize: 20,
boxShadow: "none",
borderColor: "transparent",
outline: "transparent",
}}
placeholder="0.00"
/>
<div>{name}</div>
</div>
<Button
type="primary"
onClick={onWithdraw}
disabled={fromAccounts.length === 0 || pendingTx}
>
{LABELS.WITHDRAW_ACTION}
{pendingTx && (
<Spin indicator={antIcon} className="action-spinner" />
)}
</Button>
</div>
)}
</Card>
);
};

8
src/constants/ids.tsx
View File

@ -13,11 +13,11 @@ export let LENDING_PROGRAM_ID = new PublicKey(
export const setProgramIds = (envName: string) => {
// Add dynamic program ids
if(envName === 'mainnet-beta') {
LENDING_PROGRAM_ID = new PublicKey('2KfJP7pZ6QSpXa26RmsN6kKVQteDEdQmizLSvuyryeiW');
if (envName === "mainnet-beta") {
LENDING_PROGRAM_ID = new PublicKey(
"2KfJP7pZ6QSpXa26RmsN6kKVQteDEdQmizLSvuyryeiW"
);
}
};
export const programIds = () => {

6
src/constants/labels.ts
View File

@ -7,8 +7,10 @@ export const LABELS = {
REPAY_QUESTION: "How much would you like to repay?",
REPAY_ACTION: "Repay",
RESERVE_STATUS_TITLE: "Reserve Status & Configuration",
AUDIT_WARNING: "Oyster is an unaudited software project used for internal purposes at the Solana Foundation. This app is not for public use.",
FOOTER: "This page was produced by the Solana Foundation (\"SF\") for internal educational and inspiration purposes only. SF does not encourage, induce or sanction the deployment, integration or use of Oyster or any similar application (including its code) in violation of applicable laws or regulations and hereby prohibits any such deployment, integration or use. Anyone using this code or a derivation thereof must comply with applicable laws and regulations when releasing related software.",
AUDIT_WARNING:
"Oyster is an unaudited software project used for internal purposes at the Solana Foundation. This app is not for public use.",
FOOTER:
'This page was produced by the Solana Foundation ("SF") for internal educational and inspiration purposes only. SF does not encourage, induce or sanction the deployment, integration or use of Oyster or any similar application (including its code) in violation of applicable laws or regulations and hereby prohibits any such deployment, integration or use. Anyone using this code or a derivation thereof must comply with applicable laws and regulations when releasing related software.',
MENU_HOME: "Home",
MENU_DASHBOARD: "Dashboard",
MENU_DEPOSIT: "Deposit",

11
src/models/lending/reserve.ts
View File

@ -167,6 +167,11 @@ export const initReserveInstruction = (
};
export const calculateUtilizationRatio = (reserve: LendingReserve) => {
let borrowedLiquidity = wadToLamports(reserve.borrowedLiquidityWad).toNumber();
return borrowedLiquidity / (reserve.availableLiquidity.toNumber() + borrowedLiquidity);
}
let borrowedLiquidity = wadToLamports(
reserve.borrowedLiquidityWad
).toNumber();
return (
borrowedLiquidity /
(reserve.availableLiquidity.toNumber() + borrowedLiquidity)
);
};

41
src/views/dashboard/index.tsx
View File

@ -13,33 +13,44 @@ export const DashboardView = () => {
return (
<div className="dashboard-container">
{!connected && <div className="dashboard-info">Connect to a wallet to view your deposits/loans.</div>}
{connected && userDeposits.length === 0 &&userObligations.length === 0 && <div className="dashboard-info">No loans or deposits.</div>}
{userDeposits.length > 0 && (<div className="dashboard-left">
<span>{LABELS.DASHBOARD_TITLE_DEPOSITS}</span>
{!connected && (
<div className="dashboard-info">
Connect to a wallet to view your deposits/loans.
</div>
)}
{connected &&
userDeposits.length === 0 &&
userObligations.length === 0 && (
<div className="dashboard-info">No loans or deposits.</div>
)}
{userDeposits.length > 0 && (
<div className="dashboard-left">
<span>{LABELS.DASHBOARD_TITLE_DEPOSITS}</span>
<div className="dashboard-item dashboard-header">
<div>{LABELS.TABLE_TITLE_ASSET}</div>
<div>{LABELS.TABLE_TITLE_DEPOSIT_BALANCE}</div>
<div>{LABELS.TABLE_TITLE_APY}</div>
<div>{LABELS.TABLE_TITLE_ACTION}</div>
</div>
{userDeposits.map((deposit) => (
<DepositItem reserve={deposit.reserve} account={deposit.account} />
))}
</div>)}
{userObligations.length > 0 && (<div className="dashboard-right">
<span>{LABELS.DASHBOARD_TITLE_LOANS}</span>
{userDeposits.map((deposit) => (
<DepositItem reserve={deposit.reserve} account={deposit.account} />
))}
</div>
)}
{userObligations.length > 0 && (
<div className="dashboard-right">
<span>{LABELS.DASHBOARD_TITLE_LOANS}</span>
<div className="dashboard-item dashboard-header">
<div>{LABELS.TABLE_TITLE_ASSET}</div>
<div>{LABELS.TABLE_TITLE_LOAN_BALANCE}</div>
<div>{LABELS.TABLE_TITLE_APY}</div>
<div>{LABELS.TABLE_TITLE_ACTION}</div>
</div>
{userObligations.map((item) => {
return <ObligationItem obligation={item.obligation} />;
})}
</div>
)}
{userObligations.map((item) => {
return <ObligationItem obligation={item.obligation} />;
})}
</div>
)}
</div>
);
};

13
src/views/dashboard/obligationItem.tsx
View File

@ -1,8 +1,17 @@
import React, { useMemo } from "react";
import { useTokenName } from "../../hooks";
import { calculateBorrowAPY, LendingObligation, LendingReserve } from "../../models/lending";
import {
calculateBorrowAPY,
LendingObligation,
LendingReserve,
} from "../../models/lending";
import { TokenIcon } from "../../components/TokenIcon";
import { wadToLamports, formatNumber, fromLamports, formatPct } from "../../utils/utils";
import {
wadToLamports,
formatNumber,
fromLamports,
formatPct,
} from "../../utils/utils";
import { Button, Card } from "antd";
import { Link } from "react-router-dom";
import { cache, ParsedAccount, useMint } from "../../contexts/accounts";