mirror of https://github.com/certusone/oyster.git
chore: prettier
This commit is contained in:
parent
f8db6bfde0
commit
cb7bbda611
|
@ -1,9 +1,9 @@
|
||||||
import React, { } from "react";
|
import React from "react";
|
||||||
import { Button } from "antd";
|
import { Button } from "antd";
|
||||||
import "./style.less";
|
import "./style.less";
|
||||||
import { LABELS } from "../../constants";
|
import { LABELS } from "../../constants";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
import './style.less';
|
import "./style.less";
|
||||||
|
|
||||||
export const ActionConfirmation = (props: {
|
export const ActionConfirmation = (props: {
|
||||||
className?: string;
|
className?: string;
|
||||||
|
@ -22,11 +22,7 @@ export const ActionConfirmation = (props: {
|
||||||
<div>Your action has been successfully executed</div>
|
<div>Your action has been successfully executed</div>
|
||||||
<div className="success-icon" />
|
<div className="success-icon" />
|
||||||
<Link to="/dashboard">
|
<Link to="/dashboard">
|
||||||
<Button
|
<Button type="primary">{LABELS.DASHBOARD_ACTION}</Button>
|
||||||
type="primary"
|
|
||||||
>
|
|
||||||
{LABELS.DASHBOARD_ACTION}
|
|
||||||
</Button>
|
|
||||||
</Link>
|
</Link>
|
||||||
<Button type="text" onClick={props.onClose}>
|
<Button type="text" onClick={props.onClose}>
|
||||||
{LABELS.GO_BACK_ACTION}
|
{LABELS.GO_BACK_ACTION}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { } from "react";
|
import React from "react";
|
||||||
import { Button } from "antd";
|
import { Button } from "antd";
|
||||||
import { LABELS } from "../../constants";
|
import { LABELS } from "../../constants";
|
||||||
import { useHistory } from "react-router-dom";
|
import { useHistory } from "react-router-dom";
|
||||||
|
|
|
@ -20,7 +20,7 @@ import { CollateralSelector } from "./../CollateralSelector";
|
||||||
import "./style.less";
|
import "./style.less";
|
||||||
import { LABELS } from "../../constants";
|
import { LABELS } from "../../constants";
|
||||||
import { LoadingOutlined } from "@ant-design/icons";
|
import { LoadingOutlined } from "@ant-design/icons";
|
||||||
import { ActionConfirmation} from './../ActionConfirmation';
|
import { ActionConfirmation } from "./../ActionConfirmation";
|
||||||
import { BackButton } from "./../BackButton";
|
import { BackButton } from "./../BackButton";
|
||||||
|
|
||||||
const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
|
const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
|
||||||
|
@ -66,7 +66,6 @@ export const BorrowInput = (props: {
|
||||||
|
|
||||||
(async () => {
|
(async () => {
|
||||||
try {
|
try {
|
||||||
|
|
||||||
await borrow(
|
await borrow(
|
||||||
connection,
|
connection,
|
||||||
wallet,
|
wallet,
|
||||||
|
@ -91,7 +90,7 @@ export const BorrowInput = (props: {
|
||||||
setShowConfirmation(true);
|
setShowConfirmation(true);
|
||||||
} catch {
|
} catch {
|
||||||
// TODO:
|
// TODO:
|
||||||
}finally {
|
} finally {
|
||||||
setPendingTx(false);
|
setPendingTx(false);
|
||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
|
@ -117,7 +116,9 @@ export const BorrowInput = (props: {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className={props.className} bodyStyle={bodyStyle}>
|
<Card className={props.className} bodyStyle={bodyStyle}>
|
||||||
{showConfirmation ? <ActionConfirmation onClose={() => setShowConfirmation(false)} /> :
|
{showConfirmation ? (
|
||||||
|
<ActionConfirmation onClose={() => setShowConfirmation(false)} />
|
||||||
|
) : (
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
|
@ -157,10 +158,13 @@ export const BorrowInput = (props: {
|
||||||
disabled={fromAccounts.length === 0 || pendingTx}
|
disabled={fromAccounts.length === 0 || pendingTx}
|
||||||
>
|
>
|
||||||
{LABELS.BORROW_ACTION}
|
{LABELS.BORROW_ACTION}
|
||||||
{pendingTx && <Spin indicator={antIcon} className="action-spinner" />}
|
{pendingTx && (
|
||||||
|
<Spin indicator={antIcon} className="action-spinner" />
|
||||||
|
)}
|
||||||
</Button>
|
</Button>
|
||||||
<BackButton />
|
<BackButton />
|
||||||
</div>}
|
</div>
|
||||||
|
)}
|
||||||
</Card>
|
</Card>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -10,7 +10,7 @@ import { deposit } from "../../actions/deposit";
|
||||||
import { PublicKey } from "@solana/web3.js";
|
import { PublicKey } from "@solana/web3.js";
|
||||||
import "./style.less";
|
import "./style.less";
|
||||||
import { LoadingOutlined } from "@ant-design/icons";
|
import { LoadingOutlined } from "@ant-design/icons";
|
||||||
import { ActionConfirmation} from './../ActionConfirmation';
|
import { ActionConfirmation } from "./../ActionConfirmation";
|
||||||
|
|
||||||
const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
|
const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
|
||||||
|
|
||||||
|
@ -54,7 +54,6 @@ export const DepositInput = (props: {
|
||||||
setPendingTx(false);
|
setPendingTx(false);
|
||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
|
|
||||||
}, [connection, wallet, value, reserve, fromAccounts, address]);
|
}, [connection, wallet, value, reserve, fromAccounts, address]);
|
||||||
|
|
||||||
const bodyStyle: React.CSSProperties = {
|
const bodyStyle: React.CSSProperties = {
|
||||||
|
@ -67,7 +66,9 @@ export const DepositInput = (props: {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className={props.className} bodyStyle={bodyStyle}>
|
<Card className={props.className} bodyStyle={bodyStyle}>
|
||||||
{showConfirmation ? <ActionConfirmation onClose={() => setShowConfirmation(false)} /> :
|
{showConfirmation ? (
|
||||||
|
<ActionConfirmation onClose={() => setShowConfirmation(false)} />
|
||||||
|
) : (
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
|
@ -103,9 +104,12 @@ export const DepositInput = (props: {
|
||||||
disabled={fromAccounts.length === 0 || pendingTx}
|
disabled={fromAccounts.length === 0 || pendingTx}
|
||||||
>
|
>
|
||||||
Deposit
|
Deposit
|
||||||
{pendingTx && <Spin indicator={antIcon} className="action-spinner" />}
|
{pendingTx && (
|
||||||
|
<Spin indicator={antIcon} className="action-spinner" />
|
||||||
|
)}
|
||||||
</Button>
|
</Button>
|
||||||
</div>}
|
</div>
|
||||||
|
)}
|
||||||
</Card>
|
</Card>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -14,13 +14,10 @@ import { useWallet } from "../../contexts/wallet";
|
||||||
import { repay } from "../../actions";
|
import { repay } from "../../actions";
|
||||||
import { CollateralSelector } from "./../CollateralSelector";
|
import { CollateralSelector } from "./../CollateralSelector";
|
||||||
import "./style.less";
|
import "./style.less";
|
||||||
import {
|
import { formatNumber, toLamports } from "../../utils/utils";
|
||||||
formatNumber,
|
|
||||||
toLamports,
|
|
||||||
} from "../../utils/utils";
|
|
||||||
import { LABELS } from "../../constants";
|
import { LABELS } from "../../constants";
|
||||||
import { LoadingOutlined } from "@ant-design/icons";
|
import { LoadingOutlined } from "@ant-design/icons";
|
||||||
import { ActionConfirmation} from './../ActionConfirmation';
|
import { ActionConfirmation } from "./../ActionConfirmation";
|
||||||
|
|
||||||
const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
|
const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
|
||||||
|
|
||||||
|
@ -64,7 +61,6 @@ export const RepayInput = (props: {
|
||||||
[value, repayLiquidityMint]
|
[value, repayLiquidityMint]
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
||||||
const onRepay = useCallback(() => {
|
const onRepay = useCallback(() => {
|
||||||
if (
|
if (
|
||||||
!collateralReserve ||
|
!collateralReserve ||
|
||||||
|
@ -79,7 +75,6 @@ export const RepayInput = (props: {
|
||||||
|
|
||||||
(async () => {
|
(async () => {
|
||||||
try {
|
try {
|
||||||
|
|
||||||
await repay(
|
await repay(
|
||||||
fromAccounts[0],
|
fromAccounts[0],
|
||||||
lamports,
|
lamports,
|
||||||
|
@ -95,10 +90,10 @@ export const RepayInput = (props: {
|
||||||
setShowConfirmation(true);
|
setShowConfirmation(true);
|
||||||
} catch {
|
} catch {
|
||||||
// TODO:
|
// TODO:
|
||||||
}finally {
|
} finally {
|
||||||
setPendingTx(false);
|
setPendingTx(false);
|
||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
}, [
|
}, [
|
||||||
lamports,
|
lamports,
|
||||||
connection,
|
connection,
|
||||||
|
@ -120,7 +115,9 @@ export const RepayInput = (props: {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className={props.className} bodyStyle={bodyStyle}>
|
<Card className={props.className} bodyStyle={bodyStyle}>
|
||||||
{showConfirmation ? <ActionConfirmation onClose={() => setShowConfirmation(false)} /> :
|
{showConfirmation ? (
|
||||||
|
<ActionConfirmation onClose={() => setShowConfirmation(false)} />
|
||||||
|
) : (
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
|
@ -180,11 +177,12 @@ export const RepayInput = (props: {
|
||||||
disabled={fromAccounts.length === 0}
|
disabled={fromAccounts.length === 0}
|
||||||
>
|
>
|
||||||
{LABELS.REPAY_ACTION}
|
{LABELS.REPAY_ACTION}
|
||||||
{pendingTx && <Spin indicator={antIcon} className="action-spinner" />}
|
{pendingTx && (
|
||||||
|
<Spin indicator={antIcon} className="action-spinner" />
|
||||||
|
)}
|
||||||
</Button>
|
</Button>
|
||||||
</div>}
|
</div>
|
||||||
|
)}
|
||||||
</Card>
|
</Card>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,11 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { useTokenName } from "./../../hooks";
|
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 { TokenIcon } from "../../components/TokenIcon";
|
||||||
import { formatNumber, formatPct, fromLamports } from "../../utils/utils";
|
import { formatNumber, formatPct, fromLamports } from "../../utils/utils";
|
||||||
import { Card, Typography } from "antd";
|
import { Card, Typography } from "antd";
|
||||||
|
|
|
@ -15,7 +15,7 @@ import { PublicKey } from "@solana/web3.js";
|
||||||
import "./style.less";
|
import "./style.less";
|
||||||
import { LABELS } from "../../constants";
|
import { LABELS } from "../../constants";
|
||||||
import { LoadingOutlined } from "@ant-design/icons";
|
import { LoadingOutlined } from "@ant-design/icons";
|
||||||
import { ActionConfirmation} from './../ActionConfirmation';
|
import { ActionConfirmation } from "./../ActionConfirmation";
|
||||||
|
|
||||||
const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
|
const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
|
||||||
|
|
||||||
|
@ -88,7 +88,9 @@ export const WithdrawInput = (props: {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className={props.className} bodyStyle={bodyStyle}>
|
<Card className={props.className} bodyStyle={bodyStyle}>
|
||||||
{showConfirmation ? <ActionConfirmation onClose={() => setShowConfirmation(false)} /> :
|
{showConfirmation ? (
|
||||||
|
<ActionConfirmation onClose={() => setShowConfirmation(false)} />
|
||||||
|
) : (
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
|
@ -122,9 +124,12 @@ export const WithdrawInput = (props: {
|
||||||
disabled={fromAccounts.length === 0 || pendingTx}
|
disabled={fromAccounts.length === 0 || pendingTx}
|
||||||
>
|
>
|
||||||
{LABELS.WITHDRAW_ACTION}
|
{LABELS.WITHDRAW_ACTION}
|
||||||
{pendingTx && <Spin indicator={antIcon} className="action-spinner" />}
|
{pendingTx && (
|
||||||
|
<Spin indicator={antIcon} className="action-spinner" />
|
||||||
|
)}
|
||||||
</Button>
|
</Button>
|
||||||
</div>}
|
</div>
|
||||||
|
)}
|
||||||
</Card>
|
</Card>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -13,11 +13,11 @@ export let LENDING_PROGRAM_ID = new PublicKey(
|
||||||
|
|
||||||
export const setProgramIds = (envName: string) => {
|
export const setProgramIds = (envName: string) => {
|
||||||
// Add dynamic program ids
|
// Add dynamic program ids
|
||||||
if(envName === 'mainnet-beta') {
|
if (envName === "mainnet-beta") {
|
||||||
LENDING_PROGRAM_ID = new PublicKey('2KfJP7pZ6QSpXa26RmsN6kKVQteDEdQmizLSvuyryeiW');
|
LENDING_PROGRAM_ID = new PublicKey(
|
||||||
|
"2KfJP7pZ6QSpXa26RmsN6kKVQteDEdQmizLSvuyryeiW"
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export const programIds = () => {
|
export const programIds = () => {
|
||||||
|
|
|
@ -7,8 +7,10 @@ export const LABELS = {
|
||||||
REPAY_QUESTION: "How much would you like to repay?",
|
REPAY_QUESTION: "How much would you like to repay?",
|
||||||
REPAY_ACTION: "Repay",
|
REPAY_ACTION: "Repay",
|
||||||
RESERVE_STATUS_TITLE: "Reserve Status & Configuration",
|
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.",
|
AUDIT_WARNING:
|
||||||
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.",
|
"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_HOME: "Home",
|
||||||
MENU_DASHBOARD: "Dashboard",
|
MENU_DASHBOARD: "Dashboard",
|
||||||
MENU_DEPOSIT: "Deposit",
|
MENU_DEPOSIT: "Deposit",
|
||||||
|
|
|
@ -167,6 +167,11 @@ export const initReserveInstruction = (
|
||||||
};
|
};
|
||||||
|
|
||||||
export const calculateUtilizationRatio = (reserve: LendingReserve) => {
|
export const calculateUtilizationRatio = (reserve: LendingReserve) => {
|
||||||
let borrowedLiquidity = wadToLamports(reserve.borrowedLiquidityWad).toNumber();
|
let borrowedLiquidity = wadToLamports(
|
||||||
return borrowedLiquidity / (reserve.availableLiquidity.toNumber() + borrowedLiquidity);
|
reserve.borrowedLiquidityWad
|
||||||
}
|
).toNumber();
|
||||||
|
return (
|
||||||
|
borrowedLiquidity /
|
||||||
|
(reserve.availableLiquidity.toNumber() + borrowedLiquidity)
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
|
@ -13,9 +13,18 @@ export const DashboardView = () => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="dashboard-container">
|
<div className="dashboard-container">
|
||||||
{!connected && <div className="dashboard-info">Connect to a wallet to view your deposits/loans.</div>}
|
{!connected && (
|
||||||
{connected && userDeposits.length === 0 &&userObligations.length === 0 && <div className="dashboard-info">No loans or deposits.</div>}
|
<div className="dashboard-info">
|
||||||
{userDeposits.length > 0 && (<div className="dashboard-left">
|
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>
|
<span>{LABELS.DASHBOARD_TITLE_DEPOSITS}</span>
|
||||||
<div className="dashboard-item dashboard-header">
|
<div className="dashboard-item dashboard-header">
|
||||||
<div>{LABELS.TABLE_TITLE_ASSET}</div>
|
<div>{LABELS.TABLE_TITLE_ASSET}</div>
|
||||||
|
@ -26,8 +35,10 @@ export const DashboardView = () => {
|
||||||
{userDeposits.map((deposit) => (
|
{userDeposits.map((deposit) => (
|
||||||
<DepositItem reserve={deposit.reserve} account={deposit.account} />
|
<DepositItem reserve={deposit.reserve} account={deposit.account} />
|
||||||
))}
|
))}
|
||||||
</div>)}
|
</div>
|
||||||
{userObligations.length > 0 && (<div className="dashboard-right">
|
)}
|
||||||
|
{userObligations.length > 0 && (
|
||||||
|
<div className="dashboard-right">
|
||||||
<span>{LABELS.DASHBOARD_TITLE_LOANS}</span>
|
<span>{LABELS.DASHBOARD_TITLE_LOANS}</span>
|
||||||
<div className="dashboard-item dashboard-header">
|
<div className="dashboard-item dashboard-header">
|
||||||
<div>{LABELS.TABLE_TITLE_ASSET}</div>
|
<div>{LABELS.TABLE_TITLE_ASSET}</div>
|
||||||
|
|
|
@ -1,8 +1,17 @@
|
||||||
import React, { useMemo } from "react";
|
import React, { useMemo } from "react";
|
||||||
import { useTokenName } from "../../hooks";
|
import { useTokenName } from "../../hooks";
|
||||||
import { calculateBorrowAPY, LendingObligation, LendingReserve } from "../../models/lending";
|
import {
|
||||||
|
calculateBorrowAPY,
|
||||||
|
LendingObligation,
|
||||||
|
LendingReserve,
|
||||||
|
} from "../../models/lending";
|
||||||
import { TokenIcon } from "../../components/TokenIcon";
|
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 { Button, Card } from "antd";
|
||||||
import { Link } from "react-router-dom";
|
import { Link } from "react-router-dom";
|
||||||
import { cache, ParsedAccount, useMint } from "../../contexts/accounts";
|
import { cache, ParsedAccount, useMint } from "../../contexts/accounts";
|
||||||
|
|
Loading…
Reference in New Issue