From e272dc2a97b2f7a6e8cd1cd1c135629fc6432685 Mon Sep 17 00:00:00 2001 From: Dummy Tester 123 Date: Sun, 14 Feb 2021 19:16:22 -0600 Subject: [PATCH 1/2] Remove redundant files from lending now that they're in common --- packages/common/src/components/index.tsx | 2 + packages/common/src/index.tsx | 1 + packages/common/src/utils/ids.ts | 1 + .../components/ActionConfirmation/index.tsx | 32 -------------- .../components/ActionConfirmation/style.less | 5 --- .../lending/src/components/AppBar/index.tsx | 42 ------------------ .../src/components/BackButton/index.tsx | 13 ------ .../src/components/BorrowInput/index.tsx | 10 +++-- .../src/components/CollateralInput/index.tsx | 3 +- .../src/components/CurrentUserBadge/index.tsx | 34 --------------- .../src/components/DepositInput/index.tsx | 3 +- .../lending/src/components/Icons/info.tsx | 20 --------- .../src/components/Identicon/index.tsx | 36 ---------------- .../src/components/Identicon/style.less | 8 ---- .../lending/src/components/Input/numeric.tsx | 43 ------------------- .../lending/src/components/Layout/index.tsx | 3 +- .../src/components/LiquidateInput/index.tsx | 9 +++- .../src/components/RepayInput/index.tsx | 10 ++++- .../lending/src/components/Settings/index.tsx | 31 ------------- .../src/components/TokenIcon/index.tsx | 3 +- .../src/components/WithdrawInput/index.tsx | 3 +- .../margin/newPosition/NewPositionForm.tsx | 4 +- 22 files changed, 33 insertions(+), 283 deletions(-) delete mode 100644 packages/lending/src/components/ActionConfirmation/index.tsx delete mode 100644 packages/lending/src/components/ActionConfirmation/style.less delete mode 100644 packages/lending/src/components/AppBar/index.tsx delete mode 100644 packages/lending/src/components/BackButton/index.tsx delete mode 100644 packages/lending/src/components/CurrentUserBadge/index.tsx delete mode 100644 packages/lending/src/components/Icons/info.tsx delete mode 100644 packages/lending/src/components/Identicon/index.tsx delete mode 100644 packages/lending/src/components/Identicon/style.less delete mode 100644 packages/lending/src/components/Input/numeric.tsx delete mode 100644 packages/lending/src/components/Settings/index.tsx diff --git a/packages/common/src/components/index.tsx b/packages/common/src/components/index.tsx index 52c503f..b8ba2e4 100644 --- a/packages/common/src/components/index.tsx +++ b/packages/common/src/components/index.tsx @@ -6,3 +6,5 @@ export { Info } from './Icons/info'; export { NumericInput } from './Input/numeric'; export { AppBar } from './AppBar/index'; export { Settings } from './Settings/index'; +export { ActionConfirmation } from './ActionConfirmation/index'; +export { BackButton } from './BackButton/index'; diff --git a/packages/common/src/index.tsx b/packages/common/src/index.tsx index 4c23c1d..29b4c93 100644 --- a/packages/common/src/index.tsx +++ b/packages/common/src/index.tsx @@ -1,5 +1,6 @@ export * as actions from './actions'; export * as components from './components'; +export * from './components'; // Allow direct exports too export * as config from './config'; export * as constants from './constants'; export * as hooks from './hooks'; diff --git a/packages/common/src/utils/ids.ts b/packages/common/src/utils/ids.ts index 2d5b89e..001b388 100644 --- a/packages/common/src/utils/ids.ts +++ b/packages/common/src/utils/ids.ts @@ -153,6 +153,7 @@ export const programIds = () => { return { token: TOKEN_PROGRAM_ID, swap: SWAP_PROGRAM_ID, + swap_legacy: SWAP_PROGRAM_LEGACY_IDS, swapLayout: SWAP_PROGRAM_LAYOUT, lending: LENDING_PROGRAM_ID, wormhole: WORMHOLE_BRIDGE, diff --git a/packages/lending/src/components/ActionConfirmation/index.tsx b/packages/lending/src/components/ActionConfirmation/index.tsx deleted file mode 100644 index e0fd5cb..0000000 --- a/packages/lending/src/components/ActionConfirmation/index.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from "react"; -import { Button } from "antd"; -import "./style.less"; -import { LABELS } from "../../constants"; -import { Link } from "react-router-dom"; -import "./style.less"; - -export const ActionConfirmation = (props: { - className?: string; - onClose: () => void; -}) => { - return ( -
-

Congratulations!

-
Your action has been successfully executed
-
- - - - -
- ); -}; diff --git a/packages/lending/src/components/ActionConfirmation/style.less b/packages/lending/src/components/ActionConfirmation/style.less deleted file mode 100644 index beeab4d..0000000 --- a/packages/lending/src/components/ActionConfirmation/style.less +++ /dev/null @@ -1,5 +0,0 @@ -.success-icon { - background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjNzBjMDQxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iTGF5ZXIgMSIgdmlld0JveD0iMCAwIDY0IDY0IiB4PSIwcHgiIHk9IjBweCI+PHRpdGxlPmJ1c2luZXNzIGZpbmFuY2UgdXAgcmlzZSBhcnJvdyBkZW1hbmQ8L3RpdGxlPjxwYXRoIGQ9Ik01LDE0YTEsMSwwLDEsMC0xLTFINEExLDEsMCwwLDAsNSwxNFoiPjwvcGF0aD48cGF0aCBkPSJNNyw1Mkg1NWExLDEsMCwwLDAsMC0ySDUwVjI3YTEsMSwwLDAsMC0yLDBWNTBINDRWMzRhMSwxLDAsMCwwLTIsMFY1MEgzOFYzOWExLDEsMCwwLDAtMiwwVjUwSDMyVjQzYTEsMSwwLDAsMC0yLDB2N0gyNlY0NmExLDEsMCwwLDAtMiwwdjRIMjBWNDdhMSwxLDAsMCwwLTIsMHYzSDE0VjQ4YTEsMSwwLDAsMC0yLDB2Mkg3YTEsMSwwLDAsMS0xLTFWMTdhMSwxLDAsMCwwLTIsMFY0OUEzLDMsMCwwLDAsNyw1MloiPjwvcGF0aD48cGF0aCBkPSJNNTksNTBhMSwxLDAsMCwwLTEsMWgwYTEsMSwwLDEsMCwxLTFaIj48L3BhdGg+PHBhdGggZD0iTTExLDQ0aC4wN2E0OS4wNyw0OS4wNywwLDAsMCwyNS41Mi05LjE5QTQ4LjkxLDQ4LjkxLDAsMCwwLDQ5LjcsMjAuNTlMNTIuMzgsMjIsNTIsMTRsLTYuNzEsNC4zMSwyLjYzLDEuMzZBNDYuODEsNDYuODEsMCwwLDEsMzUuNDEsMzMuMTksNDYuOTQsNDYuOTQsMCwwLDEsMTAuOTMsNDIsMSwxLDAsMCwwLDExLDQ0WiI+PC9wYXRoPjwvc3ZnPg=="); - width: 280px; - height: 280px; -} \ No newline at end of file diff --git a/packages/lending/src/components/AppBar/index.tsx b/packages/lending/src/components/AppBar/index.tsx deleted file mode 100644 index 1132459..0000000 --- a/packages/lending/src/components/AppBar/index.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React from 'react'; -import { Button, Popover } from 'antd'; -import { contexts, ConnectButton } from '@oyster/common'; -import { CurrentUserBadge } from '../CurrentUserBadge'; -import { SettingOutlined } from '@ant-design/icons'; -import { Settings } from '../Settings'; -import { LABELS } from '../../constants'; -const { useWallet } = contexts.Wallet; - -export const AppBar = (props: { left?: JSX.Element; right?: JSX.Element }) => { - const { connected, wallet } = useWallet(); - - const TopBar = ( -
- {connected ? ( - - ) : ( - - )} - } - trigger="click" - > -
- ); - - return TopBar; -}; diff --git a/packages/lending/src/components/BackButton/index.tsx b/packages/lending/src/components/BackButton/index.tsx deleted file mode 100644 index e072a44..0000000 --- a/packages/lending/src/components/BackButton/index.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from "react"; -import { Button } from "antd"; -import { LABELS } from "../../constants"; -import { useHistory } from "react-router-dom"; - -export const BackButton = () => { - const history = useHistory(); - return ( - - ); -}; diff --git a/packages/lending/src/components/BorrowInput/index.tsx b/packages/lending/src/components/BorrowInput/index.tsx index 6e4b59a..c120283 100644 --- a/packages/lending/src/components/BorrowInput/index.tsx +++ b/packages/lending/src/components/BorrowInput/index.tsx @@ -11,13 +11,17 @@ import { LendingReserveParser, } from '../../models'; import { Card } from 'antd'; -import { contexts, ParsedAccount, ConnectButton } from '@oyster/common'; +import { + contexts, + ParsedAccount, + ConnectButton, + BackButton, + ActionConfirmation, +} from '@oyster/common'; import { borrow } from '../../actions'; import './style.less'; import { LABELS } from '../../constants'; -import { ActionConfirmation } from './../ActionConfirmation'; -import { BackButton } from './../BackButton'; import CollateralInput from '../CollateralInput'; import { useMidPriceInUSD } from '../../contexts/market'; import { RiskSlider } from '../RiskSlider'; diff --git a/packages/lending/src/components/CollateralInput/index.tsx b/packages/lending/src/components/CollateralInput/index.tsx index 8d7cea3..378fc73 100644 --- a/packages/lending/src/components/CollateralInput/index.tsx +++ b/packages/lending/src/components/CollateralInput/index.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import { contexts, utils, ParsedAccount } from '@oyster/common'; +import { contexts, utils, ParsedAccount, NumericInput } from '@oyster/common'; import { useLendingReserves, useUserBalance, @@ -12,7 +12,6 @@ import { } from '../../models'; import { Card, Select } from 'antd'; import { TokenIcon } from '../TokenIcon'; -import { NumericInput } from '../Input/numeric'; import './style.less'; import { TokenDisplay } from '../TokenDisplay'; const { getTokenName } = utils; diff --git a/packages/lending/src/components/CurrentUserBadge/index.tsx b/packages/lending/src/components/CurrentUserBadge/index.tsx deleted file mode 100644 index de2b569..0000000 --- a/packages/lending/src/components/CurrentUserBadge/index.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React from 'react'; -import { contexts, utils } from '@oyster/common'; - -import { Identicon } from '../Identicon'; -import { LAMPORTS_PER_SOL } from '@solana/web3.js'; -const { useWallet } = contexts.Wallet; -const { useNativeAccount } = contexts.Accounts; -const { formatNumber, shortenAddress } = utils; - -export const CurrentUserBadge = (props: {}) => { - const { wallet } = useWallet(); - const { account } = useNativeAccount(); - - if (!wallet || !wallet.publicKey) { - return null; - } - - // should use SOL ◎ ? - - return ( -
- - {formatNumber.format((account?.lamports || 0) / LAMPORTS_PER_SOL)} SOL - -
- {shortenAddress(`${wallet.publicKey}`)} - -
-
- ); -}; diff --git a/packages/lending/src/components/DepositInput/index.tsx b/packages/lending/src/components/DepositInput/index.tsx index 941906d..e4c5b19 100644 --- a/packages/lending/src/components/DepositInput/index.tsx +++ b/packages/lending/src/components/DepositInput/index.tsx @@ -5,10 +5,9 @@ import { Card, Slider } from 'antd'; import { deposit } from '../../actions/deposit'; import { PublicKey } from '@solana/web3.js'; import './style.less'; -import { ActionConfirmation } from './../ActionConfirmation'; import { LABELS, marks } from '../../constants'; import CollateralInput from '../CollateralInput'; -import { contexts, ConnectButton } from '@oyster/common'; +import { contexts, ConnectButton, ActionConfirmation } from '@oyster/common'; const { useWallet } = contexts.Wallet; const { useConnection } = contexts.Connection; diff --git a/packages/lending/src/components/Icons/info.tsx b/packages/lending/src/components/Icons/info.tsx deleted file mode 100644 index 4bb0e3a..0000000 --- a/packages/lending/src/components/Icons/info.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { Button, Popover } from "antd"; -import React from "react"; - -import { InfoCircleOutlined } from "@ant-design/icons"; - -export const Info = (props: { - text: React.ReactElement; - style?: React.CSSProperties; -}) => { - return ( - {props.text}
} - > - - - ); -}; diff --git a/packages/lending/src/components/Identicon/index.tsx b/packages/lending/src/components/Identicon/index.tsx deleted file mode 100644 index 39a9a2f..0000000 --- a/packages/lending/src/components/Identicon/index.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import React, { useEffect, useRef } from "react"; - -import Jazzicon from "jazzicon"; -import bs58 from "bs58"; -import "./style.less"; -import { PublicKey } from "@solana/web3.js"; - -export const Identicon = (props: { - address?: string | PublicKey; - style?: React.CSSProperties; - className?: string; -}) => { - const { style, className } = props; - const address = - typeof props.address === "string" - ? props.address - : props.address?.toBase58(); - const ref = useRef(); - - useEffect(() => { - if (address && ref.current) { - ref.current.innerHTML = ""; - ref.current.className = className || ""; - ref.current.appendChild( - Jazzicon( - style?.width || 16, - parseInt(bs58.decode(address).toString("hex").slice(5, 15), 16) - ) - ); - } - }, [address, style, className]); - - return ( -
- ); -}; diff --git a/packages/lending/src/components/Identicon/style.less b/packages/lending/src/components/Identicon/style.less deleted file mode 100644 index 4b04246..0000000 --- a/packages/lending/src/components/Identicon/style.less +++ /dev/null @@ -1,8 +0,0 @@ -.identicon-wrapper { - display: flex; - height: 1rem; - width: 1rem; - border-radius: 1.125rem; - margin: 0.2rem 0.2rem 0.2rem 0.1rem; - /* background-color: ${({ theme }) => theme.bg4}; */ -} diff --git a/packages/lending/src/components/Input/numeric.tsx b/packages/lending/src/components/Input/numeric.tsx deleted file mode 100644 index c307e3e..0000000 --- a/packages/lending/src/components/Input/numeric.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import React from "react"; -import { Input } from "antd"; - -export class NumericInput extends React.Component { - onChange = (e: any) => { - const { value } = e.target; - const reg = /^-?\d*(\.\d*)?$/; - if (reg.test(value) || value === "" || value === "-") { - this.props.onChange(value); - } - }; - - // '.' at the end or only '-' in the input box. - onBlur = () => { - const { value, onBlur, onChange } = this.props; - let valueTemp = value; - if (value === undefined || value === null) return; - if ( - value.charAt && - (value.charAt(value.length - 1) === "." || value === "-") - ) { - valueTemp = value.slice(0, -1); - } - if (value.startsWith && (value.startsWith(".") || value.startsWith("-."))) { - valueTemp = valueTemp.replace(".", "0."); - } - if (valueTemp.replace) onChange?.(valueTemp.replace(/0*(\d+)/, "$1")); - if (onBlur) { - onBlur(); - } - }; - - render() { - return ( - - ); - } -} diff --git a/packages/lending/src/components/Layout/index.tsx b/packages/lending/src/components/Layout/index.tsx index df1c64a..1157d0f 100644 --- a/packages/lending/src/components/Layout/index.tsx +++ b/packages/lending/src/components/Layout/index.tsx @@ -14,12 +14,11 @@ import { } from '@ant-design/icons'; import BasicLayout from '@ant-design/pro-layout'; -import { AppBar } from './../AppBar'; import { Link, useLocation } from 'react-router-dom'; import { LABELS } from '../../constants'; import config from './../../../package.json'; -import { contexts } from '@oyster/common'; +import { contexts, AppBar } from '@oyster/common'; const { useConnectionConfig } = contexts.Connection; diff --git a/packages/lending/src/components/LiquidateInput/index.tsx b/packages/lending/src/components/LiquidateInput/index.tsx index 9c50263..646fda5 100644 --- a/packages/lending/src/components/LiquidateInput/index.tsx +++ b/packages/lending/src/components/LiquidateInput/index.tsx @@ -3,7 +3,13 @@ import Card from 'antd/lib/card'; import React, { useCallback, useEffect } from 'react'; import { useState } from 'react'; import { LABELS, marks } from '../../constants'; -import { ParsedAccount, contexts, utils, ConnectButton } from '@oyster/common'; +import { + ParsedAccount, + contexts, + utils, + ConnectButton, + ActionConfirmation, +} from '@oyster/common'; import { EnrichedLendingObligation, InputType, @@ -11,7 +17,6 @@ import { useUserBalance, } from '../../hooks'; import { LendingReserve } from '../../models'; -import { ActionConfirmation } from '../ActionConfirmation'; import { liquidate } from '../../actions'; import './style.less'; import CollateralInput from '../CollateralInput'; diff --git a/packages/lending/src/components/RepayInput/index.tsx b/packages/lending/src/components/RepayInput/index.tsx index 4345c9f..c0a86eb 100644 --- a/packages/lending/src/components/RepayInput/index.tsx +++ b/packages/lending/src/components/RepayInput/index.tsx @@ -7,11 +7,17 @@ import { } from '../../hooks'; import { LendingReserve } from '../../models'; import { Card, Slider } from 'antd'; -import { ParsedAccount, contexts, utils, hooks, ConnectButton } from '@oyster/common'; +import { + ParsedAccount, + contexts, + utils, + hooks, + ConnectButton, + ActionConfirmation, +} from '@oyster/common'; import { repay } from '../../actions'; import './style.less'; import { LABELS, marks } from '../../constants'; -import { ActionConfirmation } from './../ActionConfirmation'; import CollateralInput from '../CollateralInput'; import { useMidPriceInUSD } from '../../contexts/market'; diff --git a/packages/lending/src/components/Settings/index.tsx b/packages/lending/src/components/Settings/index.tsx deleted file mode 100644 index 2d32c3c..0000000 --- a/packages/lending/src/components/Settings/index.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; -import { Button, Select } from 'antd'; -import { contexts } from '@oyster/common'; - -const { useWallet, WALLET_PROVIDERS } = contexts.Wallet; -const { ENDPOINTS, useConnectionConfig } = contexts.Connection; - -export const Settings = () => { - const { connected, disconnect } = useWallet(); - const { endpoint, setEndpoint } = useConnectionConfig(); - - return ( - <> -
- Network:{" "} - - {connected && } -
- - ); -}; diff --git a/packages/lending/src/components/TokenIcon/index.tsx b/packages/lending/src/components/TokenIcon/index.tsx index b2736d0..ad87afd 100644 --- a/packages/lending/src/components/TokenIcon/index.tsx +++ b/packages/lending/src/components/TokenIcon/index.tsx @@ -1,6 +1,5 @@ -import { Identicon } from '../Identicon'; import React from 'react'; -import { utils, contexts } from '@oyster/common'; +import { utils, contexts, Identicon } from '@oyster/common'; import { PublicKey } from '@solana/web3.js'; const { getTokenIcon } = utils; const { useConnectionConfig } = contexts.Connection; diff --git a/packages/lending/src/components/WithdrawInput/index.tsx b/packages/lending/src/components/WithdrawInput/index.tsx index 4d1e8e7..29f6bb2 100644 --- a/packages/lending/src/components/WithdrawInput/index.tsx +++ b/packages/lending/src/components/WithdrawInput/index.tsx @@ -11,9 +11,8 @@ import { withdraw } from '../../actions'; import { PublicKey } from '@solana/web3.js'; import './style.less'; import { LABELS, marks } from '../../constants'; -import { ActionConfirmation } from './../ActionConfirmation'; import CollateralInput from '../CollateralInput'; -import { contexts, ConnectButton } from '@oyster/common'; +import { contexts, ConnectButton, ActionConfirmation } from '@oyster/common'; const { useConnection } = contexts.Connection; const { useWallet } = contexts.Wallet; diff --git a/packages/lending/src/views/margin/newPosition/NewPositionForm.tsx b/packages/lending/src/views/margin/newPosition/NewPositionForm.tsx index 5d10003..0af1532 100644 --- a/packages/lending/src/views/margin/newPosition/NewPositionForm.tsx +++ b/packages/lending/src/views/margin/newPosition/NewPositionForm.tsx @@ -1,8 +1,7 @@ import { Button, Card } from 'antd'; import React, { useState } from 'react'; -import { ActionConfirmation } from '../../../components/ActionConfirmation'; import { LABELS } from '../../../constants'; -import { contexts, ParsedAccount } from '@oyster/common'; +import { contexts, ParsedAccount, components } from '@oyster/common'; import { LendingReserve, LendingReserveParser, @@ -14,6 +13,7 @@ import { usePoolAndTradeInfoFrom } from './utils'; import { UserDeposit } from '../../../hooks'; import { ArrowDownOutlined } from '@ant-design/icons'; +const { ActionConfirmation } = components; const { cache } = contexts.Accounts; const { useWallet } = contexts.Wallet; From 1ae7c796322c41ce30618b4ac65c623dabb0476c Mon Sep 17 00:00:00 2001 From: Dummy Tester 123 Date: Sun, 14 Feb 2021 20:27:25 -0600 Subject: [PATCH 2/2] Add some notes on debugging css issues --- README.md | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index b9029c3..514eedb 100644 --- a/README.md +++ b/README.md @@ -1,19 +1,30 @@ ## Setup - Be sure to be running Node v12.16.2 and npm version 6.14.4. - `npm run bootstrap` Then run: `npm start lending` - You may have to rebuild your package more than one time to secure a running environment. +## Known Issues + +### Can't find CSS files in common + +Common currently uses a less library to compile down less files into css in both the src directory for the TS server +in vscode to pick up and in the dist folder for importers like lending and proposal projects to pick up. If you do not see these files appear when running the `npm start lending` or other commands, and you see missing CSS errors, +you likely did not install the packages for common correctly. Try running: + +`lerna exec npm install --scope @oyster/common` to specifically install packages for common. + +Then, test that css transpiling is working: + +`lerna exec npm watch-css-src --scope @oyster/common` and verify css files appear next to their less counterparts in src. + ## ⚠️ Warning Any content produced by Solana, or developer resources that Solana provides, are for educational and inspiration purposes only. Solana does not encourage, induce or sanction the deployment of any such applications in violation of applicable laws or regulations.