From fa3e60208f8f292256dd90813e7beff15db3057a Mon Sep 17 00:00:00 2001 From: Reckless_Satoshi Date: Tue, 18 Oct 2022 09:43:03 -0700 Subject: [PATCH] Add old UserGen and BottomBar to new main.tsx --- frontend/src/components/BottomBar.js | 236 +++++++----------- frontend/src/components/Dialogs/Community.tsx | 6 +- .../components/Dialogs/ExchangeSummary.tsx | 6 +- frontend/src/components/Dialogs/Profile.tsx | 12 +- frontend/src/components/Dialogs/Stats.tsx | 6 +- frontend/src/components/EncryptedChat.js | 2 +- frontend/src/components/Main.tsx | 107 ++++---- frontend/src/components/OrderPage.js | 5 +- frontend/src/components/UserGenPage.js | 154 ++++++------ frontend/src/models/Info.model.ts | 16 +- frontend/src/models/Robot.model.ts | 8 + frontend/src/utils/checkVer.ts | 4 +- frontend/static/css/index.css | 5 - 13 files changed, 263 insertions(+), 304 deletions(-) diff --git a/frontend/src/components/BottomBar.js b/frontend/src/components/BottomBar.js index 9e6a859e..23011215 100644 --- a/frontend/src/components/BottomBar.js +++ b/frontend/src/components/BottomBar.js @@ -4,7 +4,6 @@ import { Badge, Tooltip, ListItemAvatar, - Avatar, Paper, Grid, IconButton, @@ -42,99 +41,38 @@ import { UpdateClientDialog, } from './Dialogs'; -import checkVer from '../utils/checkVer'; - class BottomBar extends Component { constructor(props) { super(props); - this.state = { - openStatsForNerds: false, - openCommuniy: false, - openExchangeSummary: false, - openClaimRewards: false, - openUpdateClient: false, - num_public_buy_orders: 0, - num_public_sell_orders: 0, - book_liquidity: 0, - active_robots_today: 0, - maker_fee: 0, - taker_fee: 0, - last_day_nonkyc_btc_premium: 0, - last_day_volume: 0, - lifetime_volume: 0, - robosats_running_commit_hash: '000000000000000', - openProfile: false, - profileShown: false, - alternative_site: 'robosats...', - node_id: '00000000', - showRewards: false, - rewardInvoice: null, - badInvoice: false, - showRewardsSpinner: false, - withdrawn: false, - }; - } - - componentDidMount() { - this.getInfo(); - } - - getInfo() { - this.setState(null); - apiClient.get('/api/info/').then((data) => { - const versionInfo = checkVer(data.version.major, data.version.minor, data.version.patch); - this.setState({ - ...data, - openUpdateClient: versionInfo.updateAvailable, - coordinatorVersion: versionInfo.coordinatorVersion, - clientVersion: versionInfo.clientVersion, - }); - this.props.setAppState({ - nickname: data.nickname, - loading: false, - activeOrderId: data.active_order_id ? data.active_order_id : null, - lastOrderId: data.last_order_id ? data.last_order_id : null, - referralCode: data.referral_code, - tgEnabled: data.tg_enabled, - tgBotName: data.tg_bot_name, - tgToken: data.tg_token, - earnedRewards: data.earned_rewards, - lastDayPremium: data.last_day_nonkyc_btc_premium, - stealthInvoices: data.wants_stealth, - }); - }); } handleClickOpenStatsForNerds = () => { - this.setState({ openStatsForNerds: true }); + this.props.setInfo({ ...this.props.info, openStatsForNerds: true }); }; handleClickCloseStatsForNerds = () => { - this.setState({ openStatsForNerds: false }); + this.props.setInfo({ ...this.props.info, openStatsForNerds: false }); }; handleClickOpenCommunity = () => { - this.setState({ openCommuniy: true }); + this.props.setInfo({ ...this.props.info, openCommunity: true }); }; handleClickCloseCommunity = () => { - this.setState({ openCommuniy: false }); + this.props.setInfo({ ...this.props.info, openCommunity: false }); }; handleClickOpenProfile = () => { - this.getInfo(); - this.setState({ openProfile: true, profileShown: true }); + this.props.fetchInfo(); + this.props.setInfo({ ...this.props.info, openProfile: true, profileShown: true }); }; handleClickCloseProfile = () => { - this.setState({ openProfile: false }); + this.props.setInfo({ ...this.props.info, openProfile: false }); }; handleSubmitInvoiceClicked = (e, rewardInvoice) => { - this.setState({ - badInvoice: false, - showRewardsSpinner: true, - }); + this.props.setInfo({ ...this.props.info, badInvoice: false, showRewardsSpinner: true }); apiClient .post('/api/reward/', { @@ -142,14 +80,16 @@ class BottomBar extends Component { }) .then( (data) => - this.setState({ + this.props.setInfo({ + ...this.props.info, badInvoice: data.bad_invoice, openClaimRewards: !data.successful_withdrawal, withdrawn: !!data.successful_withdrawal, showRewardsSpinner: false, }) & - this.props.setAppState({ - earnedRewards: data.successful_withdrawal ? 0 : this.props.earnedRewards, + this.props.setRobot({ + ...this.props.robot, + earnedRewards: data.successful_withdrawal ? 0 : this.props.robot.earnedRewards, }), ); e.preventDefault(); @@ -158,7 +98,9 @@ class BottomBar extends Component { handleSetStealthInvoice = (wantsStealth) => { apiClient .put('/api/stealth/', { wantsStealth }) - .then((data) => this.props.setAppState({ stealthInvoices: data?.wantsStealth })); + .then((data) => + this.props.setRobot({ ...this.props.robot, stealthInvoices: data?.wantsStealth }), + ); }; getHost() { @@ -171,19 +113,21 @@ class BottomBar extends Component { showProfileButton = () => { return ( - this.props.avatarLoaded && - (this.props.token ? systemClient.getCookie('robot_token') === this.props.token : true) && + this.props.robot.avatarLoaded && + (this.props.robot.token + ? systemClient.getCookie('robot_token') === this.props.robot.token + : true) && systemClient.getCookie('sessionid') ); }; bottomBarDesktop = () => { const { t } = this.props; - const hasRewards = this.props.earnedRewards > 0; + const hasRewards = this.props.robot.earnedRewards > 0; const hasOrder = !!( - (this.props.activeOrderId > 0) & - !this.state.profileShown & - this.props.avatarLoaded + (this.props.robot.activeOrderId > 0) & + !this.props.infoprofileShown & + this.props.robot.avatarLoaded ); const fontSize = this.props.theme.typography.fontSize; const fontSizeFactor = fontSize / 14; // default fontSize is 14 @@ -208,16 +152,18 @@ class BottomBar extends Component { 0) & !this.props.profileShown + (this.props.robot.activeOrderId > 0) & !this.props.robot.profileShown ? 'primary' : undefined } - nickname={this.props.nickname} - onLoad={() => this.props.setAppState({ avatarLoaded: true })} + nickname={this.props.robot.nickname} + onLoad={() => + this.props.setRobot({ ...this.props.robot, avatarLoaded: true }) + } /> - + @@ -228,10 +174,6 @@ class BottomBar extends Component { - this.props.setAppState({ buyChecked: false, sellChecked: true, type: 0 }) & - this.getInfo() - } to={`/book/`} component={LinkRouter} > @@ -240,7 +182,7 @@ class BottomBar extends Component { @@ -252,10 +194,6 @@ class BottomBar extends Component { - this.props.setAppState({ buyChecked: true, sellChecked: false, type: 1 }) & - this.getInfo() - } to={`/book/`} component={LinkRouter} > @@ -264,7 +202,7 @@ class BottomBar extends Component { @@ -276,7 +214,6 @@ class BottomBar extends Component { this.getInfo()} to={`/`} component={LinkRouter} > @@ -285,7 +222,7 @@ class BottomBar extends Component { @@ -300,7 +237,7 @@ class BottomBar extends Component { @@ -315,7 +252,7 @@ class BottomBar extends Component { @@ -471,24 +408,20 @@ class BottomBar extends Component { }; handleClickOpenExchangeSummary = () => { - // avoid calling getInfo while sessionid not yet set. Temporary fix. - if (systemClient.getCookie('sessionid')) { - this.getInfo(); - } - this.setState({ openExchangeSummary: true }); + this.props.setInfo({ ...this.props.info, openExchangeSummary: true }); }; handleClickCloseExchangeSummary = () => { - this.setState({ openExchangeSummary: false }); + this.props.setInfo({ ...this.props.info, openExchangeSummary: false }); }; bottomBarPhone = () => { const { t } = this.props; - const hasRewards = this.props.earnedRewards > 0; + const hasRewards = this.props.robot.earnedRewards > 0; const hasOrder = !!( - (this.state.active_order_id > 0) & - !this.state.profileShown & - this.props.avatarLoaded + (this.props.info.active_order_id > 0) & + !this.props.info.profileShown & + this.props.robot.avatarLoaded ); return ( @@ -534,7 +467,7 @@ class BottomBar extends Component { to={`/book/`} component={LinkRouter} > - + @@ -553,7 +486,7 @@ class BottomBar extends Component { to={`/book/`} component={LinkRouter} > - + @@ -569,7 +502,7 @@ class BottomBar extends Component { to={`/`} component={LinkRouter} > - + @@ -579,7 +512,10 @@ class BottomBar extends Component { - + @@ -622,65 +558,65 @@ class BottomBar extends Component { return (
this.setState({ openUpdateClient: false })} /> this.props.setRobot({ ...robot, ...newParams })} stealthInvoices={this.props.stealthInvoices} handleSetStealthInvoice={this.handleSetStealthInvoice} /> {this.bottomBarDesktop()} diff --git a/frontend/src/components/Dialogs/Community.tsx b/frontend/src/components/Dialogs/Community.tsx index d93fd9b3..2289e7c4 100644 --- a/frontend/src/components/Dialogs/Community.tsx +++ b/frontend/src/components/Dialogs/Community.tsx @@ -20,11 +20,11 @@ import RedditIcon from '@mui/icons-material/Reddit'; import Flags from 'country-flag-icons/react/3x2'; interface Props { - isOpen: boolean; + open: boolean; handleClickCloseCommunity: () => void; } -const CommunityDialog = ({ isOpen, handleClickCloseCommunity }: Props): JSX.Element => { +const CommunityDialog = ({ open = false, handleClickCloseCommunity }: Props): JSX.Element => { const { t } = useTranslation(); const flagProps = { @@ -38,7 +38,7 @@ const CommunityDialog = ({ isOpen, handleClickCloseCommunity }: Props): JSX.Elem return ( void; numPublicBuyOrders: number; numPublicSellOrders: number; @@ -37,7 +37,7 @@ interface Props { } const ExchangeSummaryDialog = ({ - isOpen, + open = false, handleClickCloseExchangeSummary, numPublicBuyOrders, numPublicSellOrders, @@ -55,7 +55,7 @@ const ExchangeSummaryDialog = ({ return ( void; nickname: string; activeOrderId: string | number; @@ -58,11 +58,11 @@ interface Props { earnedRewards: number; stealthInvoices: boolean; handleSetStealthInvoice: (stealth: boolean) => void; - setAppState: (state: any) => void; // TODO: move to a ContextProvider + updateRobot: (state: any) => void; // TODO: move to a ContextProvider } const ProfileDialog = ({ - isOpen, + open = false, handleClickCloseProfile, nickname, activeOrderId, @@ -77,7 +77,7 @@ const ProfileDialog = ({ withdrawn, badInvoice, earnedRewards, - setAppState, + updateRobot, stealthInvoices, handleSetStealthInvoice, }: Props): JSX.Element => { @@ -101,7 +101,7 @@ const ProfileDialog = ({ if (robotToken) { systemClient.copyToClipboard(robotToken); - setAppState({ copiedToken: true }); + updateRobot({ copiedToken: true }); } }; @@ -128,7 +128,7 @@ const ProfileDialog = ({ return ( void; lndVersion: string; coordinatorVersion: string; @@ -42,7 +42,7 @@ interface Props { } const StatsDialog = ({ - isOpen, + open = false, handleClickCloseStatsForNerds, lndVersion, coordinatorVersion, @@ -60,7 +60,7 @@ const StatsDialog = ({ return ( { const theme = useTheme(); const history = useHistory(); - const Router = window.NativeRobosats ? HashRouter : BrowserRouter; - const basename = window.NativeRobosats ? window.location.pathname : ''; + const Router = window.NativeRobosats != null ? HashRouter : BrowserRouter; + const basename = window.NativeRobosats != null ? window.location.pathname : ''; // All app data structured const [book, setBook] = useState({ orders: [], loading: true }); @@ -42,13 +51,8 @@ const Main = (): JSX.Element => { const [fav, setFav] = useState({ type: null, currency: 0 }); const [settings, setSettings] = useState(defaultSettings); - console.log(info); - const initialWindowSize = { - width: window.innerWidth / theme.typography.fontSize, - height: window.innerHeight / theme.typography.fontSize, - }; // EM values const [windowSize, setWindowSize] = useState<{ width: number; height: number }>( - initialWindowSize, + getWindowSize(theme.typography.fontSize), ); useEffect(() => { @@ -57,6 +61,7 @@ const Main = (): JSX.Element => { } fetchBook(); fetchLimits(); + fetchInfo(); return () => { if (typeof window !== undefined) { window.removeEventListener('resize', onResize); @@ -65,15 +70,12 @@ const Main = (): JSX.Element => { }, []); const onResize = function () { - setWindowSize({ - width: window.innerWidth / theme.typography.fontSize, - height: window.innerHeight / theme.typography.fontSize, - }); + setWindowSize(getWindowSize(theme.typography.fontSize)); }; const fetchBook = function () { setBook({ ...book, loading: true }); - apiClient.get('/api/book/').then((data) => + apiClient.get('/api/book/').then((data: any) => setBook({ loading: false, orders: data.not_found ? [] : data, @@ -81,43 +83,57 @@ const Main = (): JSX.Element => { ); }; - const fetchLimits = () => { + const fetchLimits = async () => { setLimits({ ...limits, loading: true }); const data = apiClient.get('/api/limits/').then((data) => { setLimits({ list: data, loading: false }); return data; }); - return data; + return await data; + }; + + const fetchInfo = function () { + apiClient.get('/api/info/').then((data: any) => { + const versionInfo: any = checkVer(data.version.major, data.version.minor, data.version.patch); + setInfo({ + ...data, + openUpdateClient: versionInfo.updateAvailable, + coordinatorVersion: versionInfo.coordinatorVersion, + clientVersion: versionInfo.clientVersion, + }); + setRobot({ + ...robot, + nickname: data.nickname, + loading: false, + activeOrderId: data.active_order_id ? data.active_order_id : null, + lastOrderId: data.last_order_id ? data.last_order_id : null, + referralCode: data.referral_code, + tgEnabled: data.tg_enabled, + tgBotName: data.tg_bot_name, + tgToken: data.tg_token, + earnedRewards: data.earned_rewards, + stealthInvoices: data.wants_stealth, + }); + }); }; return (
- {/* ( - + render={(props: any) => ( + )} /> ( - + render={(props: any) => ( + )} - /> */} + /> ( @@ -150,29 +166,30 @@ const Main = (): JSX.Element => { /> )} /> - {/* ( - - )} + render={(props) => } /> - */}
- {/*
- history.push(location)} info={info} /> -
*/} + history.push(location)} + robot={robot} + setRobot={setRobot} + info={info} + setInfo={setInfo} + fetchInfo={fetchInfo} + /> +
); }; diff --git a/frontend/src/components/OrderPage.js b/frontend/src/components/OrderPage.js index 7b1eb407..837e4706 100644 --- a/frontend/src/components/OrderPage.js +++ b/frontend/src/components/OrderPage.js @@ -525,10 +525,7 @@ class OrderPage extends Component { this.setState({ openStoreToken: false })} - onClickCopy={() => - systemClient.copyToClipboard(systemClient.getCookie('robot_token')) & - this.props.setAppState({ copiedToken: true }) - } + onClickCopy={() => systemClient.copyToClipboard(systemClient.getCookie('robot_token'))} copyIconColor={this.props.copiedToken ? 'inherit' : 'primary'} onClickBack={() => this.setState({ openStoreToken: false })} onClickDone={() => diff --git a/frontend/src/components/UserGenPage.js b/frontend/src/components/UserGenPage.js index 5819f712..391c1c6d 100644 --- a/frontend/src/components/UserGenPage.js +++ b/frontend/src/components/UserGenPage.js @@ -11,7 +11,6 @@ import { IconButton, } from '@mui/material'; import { Link } from 'react-router-dom'; -import SmoothImage from 'react-smooth-image'; import { InfoDialog } from './Dialogs'; import SmartToyIcon from '@mui/icons-material/SmartToy'; @@ -44,19 +43,18 @@ class UserGenPage extends Component { componentDidMount() { // Checks in parent HomePage if there is already a nick and token // Displays the existing one - if (this.props.nickname != null) { + if (this.props.robot.nickname != null) { this.setState({ - token: this.props.token ? this.props.token : '', - loadingRobot: false, + inputToken: this.props.robot.token ? this.props.robot.token : '', }); } else if (window.NativeRobosats && systemClient.getCookie('robot_token')) { const token = systemClient.getCookie('robot_token'); - this.setState({ token }); + this.setState({ inputToken: token }); this.getGeneratedUser(token); } else { const newToken = genBase62Token(36); this.setState({ - token: newToken, + inputToken: newToken, }); this.getGeneratedUser(newToken); } @@ -65,6 +63,7 @@ class UserGenPage extends Component { getGeneratedUser = (token) => { const strength = tokenStrength(token); const refCode = this.refCode; + this.props.setRobot({ ...this.props.robot, loading: true }); const requestBody = genKey(token).then(function (key) { return { @@ -79,46 +78,48 @@ class UserGenPage extends Component { }); requestBody.then((body) => apiClient.post('/api/user/', body).then((data) => { - this.setState({ + this.props.setRobot({ bit_entropy: data.token_bits_entropy, shannon_entropy: data.token_shannon_entropy, bad_request: data.bad_request, found: data.found, - loadingRobot: false, + loading: false, stealthInvoices: data.wants_stealth, - }) & - // Add nick and token to App state (token only if not a bad request) - (data.bad_request - ? this.props.setAppState({ - nickname: data.nickname, - avatarLoaded: false, - activeOrderId: data.active_order_id ? data.active_order_id : null, - referralCode: data.referral_code, - earnedRewards: data.earned_rewards, - lastOrderId: data.last_order_id ? data.last_order_id : null, - stealthInvoices: data.wants_stealth, - }) - : this.props.setAppState({ - nickname: data.nickname, - token, - avatarLoaded: false, - activeOrderId: data.active_order_id ? data.active_order_id : null, - lastOrderId: data.last_order_id ? data.last_order_id : null, - referralCode: data.referral_code, - earnedRewards: data.earned_rewards, - stealthInvoices: data.wants_stealth, - tgEnabled: data.tg_enabled, - tgBotName: data.tg_bot_name, - tgToken: data.tg_token, - }) & - systemClient.setCookie('robot_token', token) & - systemClient.setCookie('pub_key', data.public_key.split('\n').join('\\')) & - systemClient.setCookie( - 'enc_priv_key', - data.encrypted_private_key.split('\n').join('\\'), - )) & - // If the robot has been found (recovered) we assume the token is backed up - (data.found ? this.props.setAppState({ copiedToken: true }) : null); + }); + // Add nick and token to App state (token only if not a bad request) + data.bad_request + ? this.props.setRobot({ + ...this.props.robot, + nickname: data.nickname, + avatarLoaded: false, + activeOrderId: data.active_order_id ? data.active_order_id : null, + referralCode: data.referral_code, + earnedRewards: data.earned_rewards, + lastOrderId: data.last_order_id ? data.last_order_id : null, + stealthInvoices: data.wants_stealth, + }) + : this.props.setRobot({ + ...this.props.robot, + nickname: data.nickname, + token, + avatarLoaded: false, + activeOrderId: data.active_order_id ? data.active_order_id : null, + lastOrderId: data.last_order_id ? data.last_order_id : null, + referralCode: data.referral_code, + earnedRewards: data.earned_rewards, + stealthInvoices: data.wants_stealth, + tgEnabled: data.tg_enabled, + tgBotName: data.tg_bot_name, + tgToken: data.tg_token, + }) & + systemClient.setCookie('robot_token', token) & + systemClient.setCookie('pub_key', data.public_key.split('\n').join('\\')) & + systemClient.setCookie( + 'enc_priv_key', + data.encrypted_private_key.split('\n').join('\\'), + ); + // If the robot has been found (recovered) we assume the token is backed up + data.found ? this.props.setRobot({ ...this.props.robot, copiedToken: true }) : null; }), ); }; @@ -133,26 +134,27 @@ class UserGenPage extends Component { } handleClickNewRandomToken = () => { - const token = genBase62Token(36); + const inputToken = genBase62Token(36); this.setState({ - token, + inputToken, tokenHasChanged: true, }); - this.props.setAppState({ copiedToken: true }); + this.props.setRobot({ ...this.props.robot, copiedToken: true }); }; handleChangeToken = (e) => { this.setState({ - token: e.target.value.split(' ').join(''), + inputToken: e.target.value.split(' ').join(''), tokenHasChanged: true, }); }; handleClickSubmitToken = () => { this.delGeneratedUser(); - this.getGeneratedUser(this.state.token); - this.setState({ loadingRobot: true, tokenHasChanged: false }); - this.props.setAppState({ + this.getGeneratedUser(this.state.inputToken); + this.setState({ tokenHasChanged: false }); + this.props.setRobot({ + ...this.props.robot, avatarLoaded: false, nickname: null, token: null, @@ -181,6 +183,10 @@ class UserGenPage extends Component { }; render() { + console.log(systemClient.getCookie('robot_token')); + console.log(this.props.robot.token); + console.log(systemClient.getCookie('robot_token') === this.props.robot.token); + const { t, i18n } = this.props; const fontSize = this.props.theme.typography.fontSize; const fontSizeFactor = fontSize / 14; // to scale sizes, default fontSize is 14 @@ -195,12 +201,12 @@ class UserGenPage extends Component { align='center' sx={{ width: 370 * fontSizeFactor, height: 260 * fontSizeFactor }} > - {this.props.avatarLoaded && this.props.nickname ? ( + {this.props.robot.avatarLoaded && this.props.robot.nickname ? (
- {this.props.nickname && systemClient.getCookie('sessionid') ? ( + {this.props.robot.nickname && systemClient.getCookie('sessionid') ? (
- {this.props.nickname} + {this.props.robot.nickname} - saveAsJson(this.props.nickname + '.json', this.createJsonFile()) + saveAsJson( + this.props.robot.nickname + '.json', + this.createJsonFile(), + ) } > systemClient.copyToClipboard(systemClient.getCookie('robot_token')) & - this.props.setAppState({ copiedToken: true }) + this.props.setRobot({ ...this.props.robot, copiedToken: true }) } > - {this.state.tokenHasChanged ? ( + {this.state.inputTokenHasChanged ? (