From d1138ee086d0f49d72e7d5f43178bf95c3579d50 Mon Sep 17 00:00:00 2001 From: Zakir Hussain <44015638+ZaHuPro@users.noreply.github.com> Date: Wed, 16 Dec 2020 03:51:45 +0530 Subject: [PATCH] Stake banner (#4515) * Add stake banner * Link open in new window * prettier * Coins Icon changes * Prettier * BG fix * lock-ups condition update --- infra/token-transfer-client/.env.development | 1 + infra/token-transfer-client/config/env.js | 4 +- infra/token-transfer-client/package.json | 5 +- .../src/assets/coin-waves-circle.svg | 19 + .../src/assets/coin-waves-rectangle.svg | 19 + .../src/assets/coins-icon.svg | 52 + .../src/assets/ogn-coin.svg | 18 + .../src/assets/ousd-coin.svg | 39 + .../src/components/BalanceCard.js | 25 +- .../src/components/BonusCard.js | 1 - .../src/components/CoinsIcon.js | 15 + .../src/components/StakeBanner.js | 37 + .../src/components/StakeModal.js | 56 + .../src/components/pages/Dashboard.js | 53 +- .../src/components/pages/Lockup.js | 10 +- .../src/constants/index.js | 2 +- infra/token-transfer-client/src/css/app.scss | 154 ++ infra/token-transfer-client/webpack.config.js | 1 + yarn.lock | 1634 +++-------------- 19 files changed, 651 insertions(+), 1494 deletions(-) create mode 100644 infra/token-transfer-client/src/assets/coin-waves-circle.svg create mode 100644 infra/token-transfer-client/src/assets/coin-waves-rectangle.svg create mode 100644 infra/token-transfer-client/src/assets/coins-icon.svg create mode 100644 infra/token-transfer-client/src/assets/ogn-coin.svg create mode 100644 infra/token-transfer-client/src/assets/ousd-coin.svg create mode 100644 infra/token-transfer-client/src/components/CoinsIcon.js create mode 100644 infra/token-transfer-client/src/components/StakeBanner.js create mode 100644 infra/token-transfer-client/src/components/StakeModal.js diff --git a/infra/token-transfer-client/.env.development b/infra/token-transfer-client/.env.development index 0e6b100313e3..c631e3f79444 100644 --- a/infra/token-transfer-client/.env.development +++ b/infra/token-transfer-client/.env.development @@ -1,2 +1,3 @@ UNLOCK_DATE=2019-01-01 API_URL=http://localhost:5000 +STAKE_URL=https://ousd.com/stake diff --git a/infra/token-transfer-client/config/env.js b/infra/token-transfer-client/config/env.js index 2310c3bd4853..dc6badb49dac 100644 --- a/infra/token-transfer-client/config/env.js +++ b/infra/token-transfer-client/config/env.js @@ -86,7 +86,9 @@ function getClientEnvironment(publicUrl) { 'NODE_ENV', 'OTC_REQUEST_ENABLED', 'INVESTOR_UNLOCK_DATE', - 'TEAM_UNLOCK_DATE' + 'TEAM_UNLOCK_DATE', + 'STAKE_URL', + 'API_URL' ] if (whitelist.includes(key)) { env[key] = JSON.stringify(raw[key]) diff --git a/infra/token-transfer-client/package.json b/infra/token-transfer-client/package.json index d97b5c4d3514..75907127ceff 100644 --- a/infra/token-transfer-client/package.json +++ b/infra/token-transfer-client/package.json @@ -26,7 +26,6 @@ "case-sensitive-paths-webpack-plugin": "2.3.0", "chart.js": "2.9.3", "clean-webpack-plugin": "^3.0.0", - "css-loader": "3.4.2", "dotenv": "8.2.0", "dotenv-expand": "5.1.0", "eslint": "6.8.0", @@ -44,7 +43,7 @@ "lodash.get": "4.4.2", "mini-css-extract-plugin": "0.9.0", "moment": "2.24.0", - "node-sass": "^4.13.1", + "node-sass": "^5.0.0", "numeral": "2.0.6", "optimize-css-assets-webpack-plugin": "5.0.3", "prettier": "1.19.1", @@ -62,7 +61,7 @@ "redux-thunk": "2.3.0", "resolve": "1.15.1", "resolve-url-loader": "^3.1.1", - "sass-loader": "8.0.2", + "sass-loader": "^10.1.0", "style-loader": "1.1.3", "superagent": "5.2.2", "swiper": "5.3.6", diff --git a/infra/token-transfer-client/src/assets/coin-waves-circle.svg b/infra/token-transfer-client/src/assets/coin-waves-circle.svg new file mode 100644 index 000000000000..9e7f4645fb1c --- /dev/null +++ b/infra/token-transfer-client/src/assets/coin-waves-circle.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/infra/token-transfer-client/src/assets/coin-waves-rectangle.svg b/infra/token-transfer-client/src/assets/coin-waves-rectangle.svg new file mode 100644 index 000000000000..795d0025a7a2 --- /dev/null +++ b/infra/token-transfer-client/src/assets/coin-waves-rectangle.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/infra/token-transfer-client/src/assets/coins-icon.svg b/infra/token-transfer-client/src/assets/coins-icon.svg new file mode 100644 index 000000000000..46823e223800 --- /dev/null +++ b/infra/token-transfer-client/src/assets/coins-icon.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/infra/token-transfer-client/src/assets/ogn-coin.svg b/infra/token-transfer-client/src/assets/ogn-coin.svg new file mode 100644 index 000000000000..5b7e9dd217dd --- /dev/null +++ b/infra/token-transfer-client/src/assets/ogn-coin.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + diff --git a/infra/token-transfer-client/src/assets/ousd-coin.svg b/infra/token-transfer-client/src/assets/ousd-coin.svg new file mode 100644 index 000000000000..d89af384dc77 --- /dev/null +++ b/infra/token-transfer-client/src/assets/ousd-coin.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/infra/token-transfer-client/src/components/BalanceCard.js b/infra/token-transfer-client/src/components/BalanceCard.js index f96dd3acca5f..d4c781894b25 100644 --- a/infra/token-transfer-client/src/components/BalanceCard.js +++ b/infra/token-transfer-client/src/components/BalanceCard.js @@ -7,13 +7,11 @@ import moment from 'moment' import { DataContext } from '@/providers/data' import BorderedCard from '@/components/BorderedCard' import DropdownDotsToggle from '@/components/DropdownDotsToggle' -import LockupDescModal from '@/components/modal/LockupDescModal' const BalanceCard = ({ onDisplayBonusModal, onDisplayWithdrawModal }) => { const data = useContext(DataContext) const [redirectTo, setRedirectTo] = useState(false) - const [displayLockupDescModal, setDisplayLockupDescModal] = useState(false) const doughnutData = () => { return { @@ -69,15 +67,6 @@ const BalanceCard = ({ onDisplayBonusModal, onDisplayWithdrawModal }) => { return ( <> - {displayLockupDescModal && ( - setDisplayLockupDescModal(false)} - onEarnBonusClick={() => { - setDisplayLockupDescModal(false) - onDisplayBonusModal() - }} - /> - )}
@@ -150,19 +139,7 @@ const BalanceCard = ({ onDisplayBonusModal, onDisplayWithdrawModal }) => {
-
- Locked Bonus Tokens{' '} - { - event.preventDefault() - setDisplayLockupDescModal(true) - }} - className="ml-md-2" - > - What is this? - -
+
Locked Bonus Tokens
{ return ( -
HOT

Bonus Tokens

diff --git a/infra/token-transfer-client/src/components/CoinsIcon.js b/infra/token-transfer-client/src/components/CoinsIcon.js new file mode 100644 index 000000000000..012dbdd7e252 --- /dev/null +++ b/infra/token-transfer-client/src/components/CoinsIcon.js @@ -0,0 +1,15 @@ +import React from 'react' + +import OGNCoin from '@/assets/ogn-coin.svg' +import OUSDCoin from '@/assets/ousd-coin.svg' + +const CoinsIcon = () => { + return ( +
+ + +
+ ) +} + +export default CoinsIcon diff --git a/infra/token-transfer-client/src/components/StakeBanner.js b/infra/token-transfer-client/src/components/StakeBanner.js new file mode 100644 index 000000000000..59e247c6d08a --- /dev/null +++ b/infra/token-transfer-client/src/components/StakeBanner.js @@ -0,0 +1,37 @@ +import React from 'react' +import BorderedCard from '@/components/BorderedCard' +import CoinsIcon from '@/components/CoinsIcon' + +const STAKE_URL = process.env.STAKE_URL || 'https://ousd.com/stake' + +const StakeBanner = ({ fullWidth }) => { + return ( + <> + + {fullWidth && } +
+

Stake OGN on OUSD.com

+

+ As part of the Origin Dollar governance project, OGN staking has + moved to OUSD.com +

+
+ + Earn OGN + + + + ) +} + +export default StakeBanner diff --git a/infra/token-transfer-client/src/components/StakeModal.js b/infra/token-transfer-client/src/components/StakeModal.js new file mode 100644 index 000000000000..37e4599062d7 --- /dev/null +++ b/infra/token-transfer-client/src/components/StakeModal.js @@ -0,0 +1,56 @@ +import React from 'react' + +import { DataContext } from '@/providers/data' +import Modal from '@/components/Modal' + +const STAKE_URL = process.env.STAKE_URL || 'https://ousd.com/stake' + +class StakeModal extends React.Component { + static contextType = DataContext + + constructor(props, context) { + super(props) + } + + handleModalClose = () => { + if (this.props.onModalClose) { + this.props.onModalClose() + } + } + + render() { + return ( + +
+
+

Staking OGN has moved

+

+ As part of the Origin Dollar governance project, OGN staking has + moved to OUSD.com +

+
+
+ +
+
+ + ) + } +} + +export default StakeModal diff --git a/infra/token-transfer-client/src/components/pages/Dashboard.js b/infra/token-transfer-client/src/components/pages/Dashboard.js index 9225864cd7f7..6898cafda5e3 100644 --- a/infra/token-transfer-client/src/components/pages/Dashboard.js +++ b/infra/token-transfer-client/src/components/pages/Dashboard.js @@ -10,34 +10,28 @@ import VestingCard from '@/components/VestingCard' import GrantDetailCard from '@/components/GrantDetailCard' import WithdrawalSummaryCard from '@/components/WithdrawalSummaryCard' import BonusCard from '@/components/BonusCard' -import BonusModal from '@/components/BonusModal' -import BonusCta from '@/components/BonusCta' +import StakeModal from '@/components/StakeModal' import WithdrawModal from '@/components/WithdrawModal' import OtcRequestModal from '@/components/OtcRequestModal' +import StakeBanner from '@/components/StakeBanner' const Dashboard = props => { const data = useContext(DataContext) - const [displayBonusModal, setDisplayBonusModal] = useState(false) + const [displayStakeModal, setDisplayStakeModal] = useState(false) const [displayWithdrawModal, setDisplayWithdrawModal] = useState(false) const [displayOtcRequestModal, setDisplayOtcRequestModal] = useState(false) const isEmployee = !!get(props.user, 'employee') const nextVest = getNextVest(data.grants, props.user) const hasLockups = data.lockups.length > 0 - const displayLockupCta = - nextVest && data.config.earlyLockupsEnabled && !data.config.isLocked + const displayLockupCta = nextVest && !data.config.isLocked const displayFullWidthLockupCta = displayLockupCta && hasLockups - const isEarlyLockup = displayBonusModal === 'early' const renderModals = () => ( <> - {displayBonusModal && ( - setDisplayBonusModal(false)} - /> + {displayStakeModal && ( + setDisplayStakeModal(false)} /> )} {displayWithdrawModal && ( { nextVest={nextVest} onCreateLockup={() => { setDisplayWithdrawModal(false) - setDisplayBonusModal('early') + setDisplayStakeModal(true) }} onModalClose={() => setDisplayWithdrawModal(false)} /> @@ -65,46 +59,23 @@ const Dashboard = props => { return ( <> {renderModals()} - - {displayFullWidthLockupCta && ( -
-
- setDisplayBonusModal('early')} - /> -
-
- )} + {displayFullWidthLockupCta && }
setDisplayBonusModal(true)} + onDisplayBonusModal={() => setDisplayStakeModal(true)} onDisplayWithdrawModal={() => setDisplayWithdrawModal(true)} />
+ {displayLockupCta && !displayFullWidthLockupCta && (
- setDisplayBonusModal('early')} - /> +
)} {hasLockups && (
- setDisplayBonusModal(true)} /> + setDisplayStakeModal(true)} />
)}
diff --git a/infra/token-transfer-client/src/components/pages/Lockup.js b/infra/token-transfer-client/src/components/pages/Lockup.js index aa3047499eaa..f60e5962aa70 100644 --- a/infra/token-transfer-client/src/components/pages/Lockup.js +++ b/infra/token-transfer-client/src/components/pages/Lockup.js @@ -4,13 +4,13 @@ import moment from 'moment' import BigNumber from 'bignumber.js' import { DataContext } from '@/providers/data' -import BonusModal from '@/components/BonusModal' +import StakeModal from '@/components/StakeModal' import LockupGraph from '@/components/LockupGraph' const Lockup = () => { const data = useContext(DataContext) - const [displayBonusModal, setDisplayBonusModal] = useState(false) + const [displayStakeModal, setDisplayStakeModal] = useState(false) const renderLockups = lockups => { const now = moment.utc() @@ -108,8 +108,8 @@ const Lockup = () => { return ( <> - {displayBonusModal && ( - setDisplayBonusModal(false)} /> + {displayStakeModal && ( + setDisplayStakeModal(false)} /> )}
@@ -135,7 +135,7 @@ const Lockup = () => {