From 1c63b1bc3951376fec4451fb0f76830df6fc2a52 Mon Sep 17 00:00:00 2001 From: bartosz-lipinski <264380+bartosz-lipinski@users.noreply.github.com> Date: Thu, 19 Nov 2020 12:51:57 -0600 Subject: [PATCH] feat: style deposits --- package-lock.json | 177 ++++++++++++++++++- package.json | 1 + src/App.less | 44 +++++ src/components/DepositAdd/index.tsx | 92 ++++++++++ src/components/DepositAdd/style.less | 3 + src/components/DepositInfoLine/index.tsx | 38 ++++ src/components/DepositInfoLine/style.less | 10 ++ src/components/SideReserveOverview/index.tsx | 117 ++++++++++++ src/models/lending/market.ts | 2 +- src/models/lending/obligation.ts | 1 + src/models/lending/reserve.ts | 7 +- src/views/deposit/add/index.tsx | 88 +++------ src/views/deposit/add/style.less | 32 ++++ 13 files changed, 544 insertions(+), 68 deletions(-) create mode 100644 src/components/DepositAdd/index.tsx create mode 100644 src/components/DepositAdd/style.less create mode 100644 src/components/DepositInfoLine/index.tsx create mode 100644 src/components/DepositInfoLine/style.less create mode 100644 src/components/SideReserveOverview/index.tsx create mode 100644 src/models/lending/obligation.ts create mode 100644 src/views/deposit/add/style.less diff --git a/package-lock.json b/package-lock.json index e1d9ec8..87fced6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "token-swap-ui", + "name": "token-lending-ui", "version": "0.1.0", "lockfileVersion": 1, "requires": true, @@ -1392,6 +1392,108 @@ "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz", "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==" }, + "@formatjs/ecma402-abstract": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.4.0.tgz", + "integrity": "sha512-Mv027hcLFjE45K8UJ8PjRpdDGfR0aManEFj1KzoN8zXNveHGEygpZGfFf/FTTMl+QEVSrPAUlyxaCApvmv47AQ==", + "requires": { + "tslib": "^2.0.1" + }, + "dependencies": { + "tslib": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz", + "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==" + } + } + }, + "@formatjs/intl": { + "version": "1.4.6", + "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-1.4.6.tgz", + "integrity": "sha512-NpmOi3T0ADalssZK0JJkS8mfbaiCwbHdlzdsp33cDY6ZMLSkLASwMUirmmEV9Qdh1TEVOixz9bSdy03eo+k7XA==", + "requires": { + "@formatjs/ecma402-abstract": "1.4.0", + "@formatjs/intl-datetimeformat": "2.8.4", + "@formatjs/intl-displaynames": "3.4.6", + "@formatjs/intl-listformat": "4.3.6", + "@formatjs/intl-relativetimeformat": "7.3.6", + "fast-memoize": "^2.5.2", + "intl-messageformat": "9.3.18", + "intl-messageformat-parser": "6.0.16", + "tslib": "^2.0.1" + }, + "dependencies": { + "tslib": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz", + "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==" + } + } + }, + "@formatjs/intl-datetimeformat": { + "version": "2.8.4", + "resolved": "https://registry.npmjs.org/@formatjs/intl-datetimeformat/-/intl-datetimeformat-2.8.4.tgz", + "integrity": "sha512-aCD6VoUvdLiJrAfKfHojbzX/e5inqvO+N9rj9kdOzCMTEdDGJ+Jd9SmXPn2YKb1glp785mYxAPp5vxjgErjq/g==", + "requires": { + "@formatjs/ecma402-abstract": "1.4.0", + "tslib": "^2.0.1" + }, + "dependencies": { + "tslib": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz", + "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==" + } + } + }, + "@formatjs/intl-displaynames": { + "version": "3.4.6", + "resolved": "https://registry.npmjs.org/@formatjs/intl-displaynames/-/intl-displaynames-3.4.6.tgz", + "integrity": "sha512-XWVhTQjcyWweHm2Hi0n92hYILpktbnh8x5Sj5nSBIUNz4Os4uHDj2itJI3xCxl+aDNW8M7VRJ9m0OsnhI8qQrg==", + "requires": { + "@formatjs/ecma402-abstract": "1.4.0", + "tslib": "^2.0.1" + }, + "dependencies": { + "tslib": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz", + "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==" + } + } + }, + "@formatjs/intl-listformat": { + "version": "4.3.6", + "resolved": "https://registry.npmjs.org/@formatjs/intl-listformat/-/intl-listformat-4.3.6.tgz", + "integrity": "sha512-+ePU3/rmgUd8QHcf7EGJAIU12+Y6eMGaDhI3tPw3kKN/vByE9hJAyR8etXTk9fSIV6D7us2tEDM4h0wn8eenig==", + "requires": { + "@formatjs/ecma402-abstract": "1.4.0", + "tslib": "^2.0.1" + }, + "dependencies": { + "tslib": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz", + "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==" + } + } + }, + "@formatjs/intl-relativetimeformat": { + "version": "7.3.6", + "resolved": "https://registry.npmjs.org/@formatjs/intl-relativetimeformat/-/intl-relativetimeformat-7.3.6.tgz", + "integrity": "sha512-RtmdGG6Lwf99xlGjFiIk6pYe9LQJpTYa7VofV322Q3gmb3tAU6Pgyn7LML4xbG7Pd1F7JBmnVNVwFyofUfyJQA==", + "requires": { + "@formatjs/ecma402-abstract": "1.4.0", + "tslib": "^2.0.1" + }, + "dependencies": { + "tslib": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz", + "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==" + } + } + }, "@hapi/address": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz", @@ -2217,6 +2319,15 @@ "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.8.tgz", "integrity": "sha512-S78QIYirQcUoo6UJZx9CSP0O2ix9IaeAXwQi26Rhr/+mg7qqPy8TzaxHSUut7eGjL8WmLccT7/MXf304WjqHcA==" }, + "@types/hoist-non-react-statics": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz", + "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==", + "requires": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "@types/identicon.js": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/@types/identicon.js/-/identicon.js-2.3.0.tgz", @@ -6674,6 +6785,11 @@ "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz", "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=" }, + "fast-memoize": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/fast-memoize/-/fast-memoize-2.5.2.tgz", + "integrity": "sha512-Ue0LwpDYErFbmNnZSF0UH6eImUwDmogUO1jyE+JbN2gsQz/jICm1Ve7t9QT0rNSsfJt+Hs4/S3GnsDVjL4HVrw==" + }, "faye-websocket": { "version": "0.10.0", "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.10.0.tgz", @@ -7924,6 +8040,39 @@ } } }, + "intl-messageformat": { + "version": "9.3.18", + "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-9.3.18.tgz", + "integrity": "sha512-OKrLWppdxXtRdRCPjmRZ9Ru7UZkZJDlMl+1Vpb3sCLWK0mFpr129K+gIlIb5zrWoAH3NiYDzekBXPTRWCyHSIA==", + "requires": { + "fast-memoize": "^2.5.2", + "intl-messageformat-parser": "6.0.16", + "tslib": "^2.0.1" + }, + "dependencies": { + "tslib": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz", + "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==" + } + } + }, + "intl-messageformat-parser": { + "version": "6.0.16", + "resolved": "https://registry.npmjs.org/intl-messageformat-parser/-/intl-messageformat-parser-6.0.16.tgz", + "integrity": "sha512-Qy3Zz0vF4fhMVuW4BDqUr55LsOl9enM03wuwbP4Yg7v29rYNpf7Z76Whstu6uDLDJokrjbpgDvRcjSDTAhxKJw==", + "requires": { + "@formatjs/ecma402-abstract": "1.4.0", + "tslib": "^2.0.1" + }, + "dependencies": { + "tslib": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz", + "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==" + } + } + }, "invariant": { "version": "2.2.4", "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", @@ -12619,6 +12768,32 @@ "github-buttons": "^2.8.0" } }, + "react-intl": { + "version": "5.10.2", + "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-5.10.2.tgz", + "integrity": "sha512-g5sxQXdmXSBo8tqi1I2PBpsAG40dgmHnVGoLdBJPwPNHvJbzc08J1r2IOKomPqHMDDjD47Q/Z1Ls87spw/ES5w==", + "requires": { + "@formatjs/ecma402-abstract": "1.4.0", + "@formatjs/intl": "1.4.6", + "@formatjs/intl-displaynames": "3.4.6", + "@formatjs/intl-listformat": "4.3.6", + "@formatjs/intl-relativetimeformat": "7.3.6", + "@types/hoist-non-react-statics": "^3.3.1", + "fast-memoize": "^2.5.2", + "hoist-non-react-statics": "^3.3.2", + "intl-messageformat": "9.3.18", + "intl-messageformat-parser": "6.0.16", + "shallow-equal": "^1.2.1", + "tslib": "^2.0.1" + }, + "dependencies": { + "tslib": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz", + "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==" + } + } + }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index 95ac63d..35c4895 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "react": "^16.13.1", "react-dom": "^16.13.1", "react-github-btn": "^1.2.0", + "react-intl": "^5.10.2", "react-router-dom": "^5.2.0", "react-scripts": "3.4.3", "typescript": "^4.0.0" diff --git a/src/App.less b/src/App.less index 9f3941d..aa88bef 100644 --- a/src/App.less +++ b/src/App.less @@ -202,6 +202,50 @@ body { } } +.card-row { + box-sizing: border-box; + margin: 5px 0px; + min-width: 0px; + width: 100%; + display: flex; + flex-direction: row; + padding: 0px; + -webkit-box-align: center; + align-items: center; + -webkit-box-pack: justify; + justify-content: space-between; + + .card-cell { + display: flex; + flex-direction: column; + align-items: flex-end; + box-sizing: border-box; + text-align: left; + margin: 0px; + min-width: 0px; + font-size: 14px; + font-weight: 500; + } + + .left { + display: flex; + flex-direction: column; + align-items: flex-end; + } + + .small { + font-size: 11px; + } +} + +.token-input { + display: flex; + align-items: center; + border: 1px solid grey; + padding: 0px 10px; + margin: 5px 0px; +} + @media only screen and (max-width: 600px) { .exchange-card { width: 360px; diff --git a/src/components/DepositAdd/index.tsx b/src/components/DepositAdd/index.tsx new file mode 100644 index 0000000..282b45a --- /dev/null +++ b/src/components/DepositAdd/index.tsx @@ -0,0 +1,92 @@ +import React, { useCallback, useEffect, useMemo, useState } from "react"; +import { useLendingReserve, useTokenName, useUserAccounts, useUserBalance } from './../../hooks'; +import { LendingReserve, LendingReserveParser } from "../../models/lending"; +import { TokenIcon } from "../../components/TokenIcon"; +import { formatNumber } from "../../utils/utils"; +import { Button, Card } from "antd"; +import { useParams } from "react-router-dom"; +import { cache, useAccount } from "../../contexts/accounts"; +import { NumericInput } from "../../components/Input/numeric"; +import { useConnection } from "../../contexts/connection"; +import { useWallet } from "../../contexts/wallet"; +import { deposit } from './../../actions/deposit'; +import { PublicKey } from "@solana/web3.js"; +import './style.less'; + +export const DepositAdd = (props: { className?: string, reserve: LendingReserve, address: PublicKey }) => { + const connection = useConnection(); + const { wallet } = useWallet(); + const { id } = useParams<{ id: string }>(); + const [value, setValue] = useState(''); + + const reserve = props.reserve; + const address = props.address; + + const name = useTokenName(reserve?.liquidityMint); + const { balance: tokenBalance, accounts: fromAccounts } = useUserBalance(reserve?.liquidityMint); + // const collateralBalance = useUserBalance(reserve?.collateralMint); + + useEffect(() => { + (async () => { + console.log(`utlization: ${reserve.maxUtilizationRate}`) + console.log(`cumulativeBorrowRate: ${reserve.cumulativeBorrowRate.toString()}`) + console.log(`cumulativeBorrowRate: ${reserve.cumulativeBorrowRate.toString()}`) + console.log(`totalBorrows: ${reserve.totalBorrows.toString()}`) + console.log(`totalLiquidity: ${reserve.totalLiquidity.toString()}`) + console.log(`lendingMarket: ${reserve.lendingMarket.toBase58()}`); + + const lendingMarket = await cache.get(reserve.lendingMarket); + console.log(`lendingMarket quote: ${lendingMarket?.info.quoteMint.toBase58()}`); + + console.log(`liquiditySupply: ${reserve.liquiditySupply.toBase58()}`); + console.log(`liquidityMint: ${reserve.liquidityMint.toBase58()}`); + console.log(`collateralSupply: ${reserve.collateralSupply.toBase58()}`); + console.log(`collateralMint: ${reserve.collateralMint.toBase58()}`); + })(); + }, [reserve]) + + const onDeposit = useCallback(() => { + deposit( + fromAccounts[0], + parseFloat(value), + reserve, + address, + connection, + wallet); + }, [value, reserve, fromAccounts, address]); + + const bodyStyle: React.CSSProperties = { + display: 'flex', + justifyContent: 'center', + width: '100%', + height: '100%', + alignItems: 'center' + }; + + return + +
+
+ How much would you like to deposit? +
+
+ + { + setValue(val); + }} + style={{ + fontSize: 20, + boxShadow: "none", + borderColor: "transparent", + outline: "transpaernt", + }} + placeholder="0.00" + /> +
{name}
+
+ + +
+ ; +} \ No newline at end of file diff --git a/src/components/DepositAdd/style.less b/src/components/DepositAdd/style.less new file mode 100644 index 0000000..2d7bc95 --- /dev/null +++ b/src/components/DepositAdd/style.less @@ -0,0 +1,3 @@ +.deposit-add-title { + font-size: 1.05rem; +} \ No newline at end of file diff --git a/src/components/DepositInfoLine/index.tsx b/src/components/DepositInfoLine/index.tsx new file mode 100644 index 0000000..7befe0c --- /dev/null +++ b/src/components/DepositInfoLine/index.tsx @@ -0,0 +1,38 @@ +import React, { useCallback, useEffect, useMemo, useState } from "react"; +import { useLendingReserve, useTokenName, useUserAccounts, useUserBalance } from './../../hooks'; +import { LendingReserve, LendingReserveParser } from "../../models/lending"; +import { TokenIcon } from "../../components/TokenIcon"; +import { formatNumber } from "../../utils/utils"; +import { Button, Card } from "antd"; +import { useParams } from "react-router-dom"; +import { cache, useAccount } from "../../contexts/accounts"; +import { NumericInput } from "../../components/Input/numeric"; +import { useConnection } from "../../contexts/connection"; +import { useWallet } from "../../contexts/wallet"; +import { deposit } from './../../actions/deposit'; +import './style.less'; +import { PublicKey } from "@solana/web3.js"; + +export const DepositInfoLine = (props: { + className?: string, + reserve: LendingReserve, + address: PublicKey }) => { + const name = useTokenName(props.reserve.liquidityMint); + const { balance: tokenBalance } = useUserBalance(props.reserve.liquidityMint); + const { balance: collateralBalance } = useUserBalance(props.reserve.collateralMint); + + return +
+
Your balance in Oyster
+
{formatNumber.format(collateralBalance)} {name}
+
+
+
Your wallet balance
+
{formatNumber.format(tokenBalance)} {name}
+
+
+
Health factor
+
--
+
+ +} \ No newline at end of file diff --git a/src/components/DepositInfoLine/style.less b/src/components/DepositInfoLine/style.less new file mode 100644 index 0000000..6b60da8 --- /dev/null +++ b/src/components/DepositInfoLine/style.less @@ -0,0 +1,10 @@ +.deposit-info-line { + display: flex; + flex-direction: row; +} + +.deposit-info-line-item { + display: flex; + flex-direction: column; + justify-content: space-between; +} diff --git a/src/components/SideReserveOverview/index.tsx b/src/components/SideReserveOverview/index.tsx new file mode 100644 index 0000000..1056267 --- /dev/null +++ b/src/components/SideReserveOverview/index.tsx @@ -0,0 +1,117 @@ +import React, { useMemo } from "react"; +import { useLendingReserve, useTokenName, useUserAccounts, useUserBalance } from './../../hooks'; +import { LendingReserve, LendingReserveParser } from "../../models/lending"; +import { TokenIcon } from "../../components/TokenIcon"; +import { formatNumber, formatPct, fromLamports } from "../../utils/utils"; +import { Button, Card, Typography } from "antd"; +import { useParams } from "react-router-dom"; +import { useAccount, useMint } from "../../contexts/accounts"; +import { PublicKey } from "@solana/web3.js"; + +const { Text } = Typography; + +export enum SideReserveOverviewMode { + Deposit = 'deposit', + Borrow = 'borrow' +} + +export const SideReserveOverview = (props: { + className?: string; + reserve: LendingReserve, + address: PublicKey, + mode: SideReserveOverviewMode +}) => { + const reserve = props.reserve; + const mode = props.mode; + const name = useTokenName(reserve?.liquidityMint); + const liquidityMint = useMint(props.reserve.liquidityMint); + + const totalLiquidity = fromLamports(props.reserve.totalLiquidity.toNumber(), liquidityMint); + + // TODO: calculate + const utilizationRate = 0.5802; + const depositApy = 0.048; + const borrowApy = 0.048; + const maxLTV = 0.75; + const liquidiationThreshold = 0.8; + const liquidiationPenalty = 0.05; + + let extraInfo: JSX.Element | null = null; + if (mode === SideReserveOverviewMode.Deposit) { + + extraInfo = <> +
+ + Deposit APY: + +
+ {formatPct.format(depositApy)} +
+
+ +
+ + Maxiumum LTV: + +
+ {formatPct.format(maxLTV)} +
+
+ +
+ + Liquidation threashold: + +
+ {formatPct.format(liquidiationThreshold)} +
+
+ +
+ + Liquidation penalty: + +
+ {formatPct.format(liquidiationPenalty)} +
+
+ ; + } else if (mode === SideReserveOverviewMode.Borrow) { + extraInfo = <> +
+ + Borrow APY: + +
+ {formatPct.format(borrowApy)} +
+
+ ; + } + + return + {name} Reserve Overview + + }> +
+ + Utilization rate: + +
+ {formatPct.format(utilizationRate)} +
+
+ +
+ + Available liquidity: + +
+ {formatNumber.format(totalLiquidity)} {name} +
+
+ + {extraInfo} + ; +} \ No newline at end of file diff --git a/src/models/lending/market.ts b/src/models/lending/market.ts index 3bb10ca..2095fbd 100644 --- a/src/models/lending/market.ts +++ b/src/models/lending/market.ts @@ -38,4 +38,4 @@ export const LendingMarketParser = (pubKey: PublicKey, info: AccountInfo // TODO: -// create instructions for init, deposit and withdraw \ No newline at end of file +// create instructions for init \ No newline at end of file diff --git a/src/models/lending/obligation.ts b/src/models/lending/obligation.ts new file mode 100644 index 0000000..ad1d380 --- /dev/null +++ b/src/models/lending/obligation.ts @@ -0,0 +1 @@ +export const x = 1; diff --git a/src/models/lending/reserve.ts b/src/models/lending/reserve.ts index f1b77f9..2bf164b 100644 --- a/src/models/lending/reserve.ts +++ b/src/models/lending/reserve.ts @@ -24,8 +24,11 @@ export const LendingReserveLayout: typeof BufferLayout.Structure = BufferLayout. // TODO: replace u32 option with generic quivalent BufferLayout.u32('dexMarketOption'), Layout.publicKey("dexMarket"), + BufferLayout.u8("maxUtilizationRate"), + BufferLayout.u8("collateralFactor"), + Layout.uint128("cumulativeBorrowRate"), Layout.uint128("totalBorrows"), @@ -46,13 +49,13 @@ export interface LendingReserve { liquidityMint: PublicKey; collateralSupply: PublicKey; collateralMint: PublicKey; - // TODO: replace u32 option with generic quivalent + dexMarketOption: number; dexMarket: PublicKey; dexMarketPrice: BN; // what is precision on the price? maxUtilizationRate: number; - dexMarketPriceUpdatedSlot: BN; + // collateralFactor: number; cumulativeBorrowRate: BN; totalBorrows: BN; diff --git a/src/views/deposit/add/index.tsx b/src/views/deposit/add/index.tsx index ad7b1f0..f2a34e6 100644 --- a/src/views/deposit/add/index.tsx +++ b/src/views/deposit/add/index.tsx @@ -10,78 +10,38 @@ import { NumericInput } from "../../../components/Input/numeric"; import { useConnection } from "../../../contexts/connection"; import { useWallet } from "../../../contexts/wallet"; import { deposit } from './../../../actions/deposit'; +import './style.less'; + +import { DepositAdd } from './../../../components/DepositAdd'; +import { DepositInfoLine } from './../../../components/DepositInfoLine'; +import { SideReserveOverview, SideReserveOverviewMode } from './../../../components/SideReserveOverview'; export const DepositAddView = () => { const connection = useConnection(); const { wallet } = useWallet(); const { id } = useParams<{ id: string }>(); - const [value, setValue] = useState(''); const lendingReserve = useLendingReserve(id); const reserve = lendingReserve?.info; - const name = useTokenName(reserve?.liquidityMint); - const { balance: tokenBalance, accounts: fromAccounts } = useUserBalance(reserve?.liquidityMint); - // const collateralBalance = useUserBalance(reserve?.collateralMint); + if (!reserve || !lendingReserve) { + return null; + } - useEffect(() => { - (async () => { - const reserve = lendingReserve?.info; - if (!reserve) { - return; - } - - console.log(`utlization: ${reserve.maxUtilizationRate}`) - console.log(`cumulativeBorrowRate: ${reserve.cumulativeBorrowRate.toString()}`) - console.log(`cumulativeBorrowRate: ${reserve.cumulativeBorrowRate.toString()}`) - console.log(`totalBorrows: ${reserve.totalBorrows.toString()}`) - console.log(`totalLiquidity: ${reserve.totalLiquidity.toString()}`) - console.log(`lendingMarket: ${reserve.lendingMarket.toBase58()}`); - - const lendingMarket = await cache.get(reserve.lendingMarket); - console.log(`lendingMarket quote: ${lendingMarket?.info.quoteMint.toBase58()}`); - - console.log(`liquiditySupply: ${reserve.liquiditySupply.toBase58()}`); - console.log(`liquidityMint: ${reserve.liquidityMint.toBase58()}`); - console.log(`collateralSupply: ${reserve.collateralSupply.toBase58()}`); - console.log(`collateralMint: ${reserve.collateralMint.toBase58()}`); - })(); - }, [lendingReserve]) - - const onDeposit = useCallback(() => { - if (!lendingReserve || !reserve) { - return; - } - - deposit( - fromAccounts[0], - parseFloat(value), - reserve, - lendingReserve.pubkey, - connection, - wallet); - }, [value, reserve, fromAccounts, lendingReserve]); - - return - Deposit {name} - - )}> -
- - { - setValue(val); - }} - style={{ - fontSize: 20, - boxShadow: "none", - borderColor: "transparent", - outline: "transpaernt", - }} - placeholder="0.00" - /> - - + return
+ +
+ +
- ; +
; } \ No newline at end of file diff --git a/src/views/deposit/add/style.less b/src/views/deposit/add/style.less new file mode 100644 index 0000000..98ea34b --- /dev/null +++ b/src/views/deposit/add/style.less @@ -0,0 +1,32 @@ +.deposit-add { + display: flex; + flex-direction: column; + height: 100%; + width: 100%; +} + +.deposit-add-item { + margin: 4px; +} + +.deposit-add-container { + display: flex; + flex-wrap: wrap; + height: 100%; + width: 100%; +} + +.deposit-add-item-left { + flex: 60%; +} + +.deposit-add-item-right { + flex: 30%; +} + +/* Responsive layout - makes a one column layout instead of a two-column layout */ +@media (max-width: 600px) { + .deposit-add-item-right, .deposit-add-item-left { + flex: 100%; + } +} \ No newline at end of file