Mirror/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2024-12-14 03:16:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add functional homepage (#289)

Browse Source 
* App as functional component

* Add Main component WIP

* Add Maker and Book page to new main.tsx

* Add old UserGen and BottomBar to new main.tsx

* Small fixes

* Try out to revert depth chart

* Small fixes (more)
This commit is contained in:
Reckless_Satoshi 2022-10-20 17:24:53 +00:00 committed by GitHub
parent 130bd2222b
commit 04126ae0bd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
30 changed files with 858 additions and 860 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/package-lock.json generated
View File

@ -3235,11 +3235,11 @@
}
},
"node_modules/@mui/utils": {
"version": "5.10.3",
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.10.3.tgz",
"integrity": "sha512-4jXMDPfx6bpMVuheLaOpKTjpzw39ogAZLeaLj5+RJec3E37/hAZMYjURfblLfTWMMoGoqkY03mNsZaEwNobBow==",
"version": "5.10.9",
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.10.9.tgz",
"integrity": "sha512-2tdHWrq3+WCy+G6TIIaFx3cg7PorXZ71P375ExuX61od1NOAJP1mK90VxQ8N4aqnj2vmO3AQDkV4oV2Ktvt4bA==",
"dependencies": {
"@babel/runtime": "^7.18.9",
"@babel/runtime": "^7.19.0",
"@types/prop-types": "^15.7.5",
"@types/react-is": "^16.7.1 || ^17.0.0",
"prop-types": "^15.8.1",
@ -17137,11 +17137,11 @@
"requires": {}
},
"@mui/utils": {
"version": "5.10.3",
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.10.3.tgz",
"integrity": "sha512-4jXMDPfx6bpMVuheLaOpKTjpzw39ogAZLeaLj5+RJec3E37/hAZMYjURfblLfTWMMoGoqkY03mNsZaEwNobBow==",
"version": "5.10.9",
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.10.9.tgz",
"integrity": "sha512-2tdHWrq3+WCy+G6TIIaFx3cg7PorXZ71P375ExuX61od1NOAJP1mK90VxQ8N4aqnj2vmO3AQDkV4oV2Ktvt4bA==",
"requires": {
"@babel/runtime": "^7.18.9",
"@babel/runtime": "^7.19.0",
"@types/prop-types": "^15.7.5",
"@types/react-is": "^16.7.1 || ^17.0.0",
"prop-types": "^15.8.1",

137
frontend/src/components/App.js
View File

@ -1,137 +0,0 @@
import React, { Component, Suspense } from 'react';
import ReactDOM from 'react-dom/client';
import HomePage from './HomePage';
import { CssBaseline, IconButton } from '@mui/material';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import UnsafeAlert from './UnsafeAlert';
import { LearnDialog } from './Dialogs';
import TorConnection from './TorConnection';
import { I18nextProvider } from 'react-i18next';
import i18n from '../i18n/Web';
// Icons
import DarkModeIcon from '@mui/icons-material/DarkMode';
import LightModeIcon from '@mui/icons-material/LightMode';
import SchoolIcon from '@mui/icons-material/School';
import { systemClient } from '../services/System';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
expandedSettings: false,
openLearn: false,
theme: createTheme({
palette: {
mode:
window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark'
: 'light',
background: {
default:
window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
? '#070707'
: '#fff',
},
},
}),
};
}
handleThemeChange = () => {
if (this.state.theme.palette.mode === 'light') {
this.setState(({ theme }) => ({
theme: createTheme({
typography: {
fontSize: theme.typography.fontSize,
},
palette: {
mode: 'dark',
background: {
default: '#070707',
},
},
}),
}));
}
if (this.state.theme.palette.mode === 'dark') {
this.setState(({ theme }) => ({
theme: createTheme({
typography: {
fontSize: theme.typography.fontSize,
},
palette: {
mode: 'light',
background: {
default: '#fff',
},
},
}),
}));
}
};
onSettingsClick = () => {
this.setState({
expandedSettings: !this.state.expandedSettings,
});
};
onZoomClick = (direction) => {
let zoomChange;
direction === 'out' ? (zoomChange = -1) : (zoomChange = 1);
this.setState(({ theme }) => ({
theme: {
...theme,
typography: {
fontSize: this.state.theme.typography.fontSize + zoomChange,
},
},
}));
};
render() {
return (
<Suspense fallback='loading language'>
<I18nextProvider i18n={i18n}>
<ThemeProvider theme={this.state.theme}>
<CssBaseline />
<LearnDialog
open={this.state.openLearn}
onClose={() => this.setState({ openLearn: false })}
/>
<TorConnection />
<IconButton
color='inherit'
sx={{ position: 'fixed', right: '34px', color: 'text.secondary' }}
onClick={() => this.setState({ openLearn: true })}
>
<SchoolIcon />
</IconButton>
<IconButton
color='inherit'
sx={{ position: 'fixed', right: '0px', color: 'text.secondary' }}
onClick={() => this.handleThemeChange()}
>
{this.state.theme.palette.mode === 'dark' ? <LightModeIcon /> : <DarkModeIcon />}
</IconButton>
<UnsafeAlert className='unsafeAlert' />
<HomePage {...this.state} />
</ThemeProvider>
</I18nextProvider>
</Suspense>
);
}
}
const loadApp = () => {
if (systemClient.loading) {
setTimeout(loadApp, 200);
} else {
const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(<App />);
}
};
loadApp();

102
frontend/src/components/App.tsx Normal file
View File

@ -0,0 +1,102 @@
import React, { Suspense, useState } from 'react';
import ReactDOM from 'react-dom/client';
import Main from './Main';
import { CssBaseline, IconButton } from '@mui/material';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import UnsafeAlert from './UnsafeAlert';
import { LearnDialog } from './Dialogs';
import TorConnection from './TorConnection';
import { I18nextProvider } from 'react-i18next';
import i18n from '../i18n/Web';
// Icons
import DarkModeIcon from '@mui/icons-material/DarkMode';
import LightModeIcon from '@mui/icons-material/LightMode';
import SchoolIcon from '@mui/icons-material/School';
import { systemClient } from '../services/System';
const defaultTheme = createTheme({
palette: {
mode:
window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark'
: 'light',
background: {
default:
window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
? '#070707'
: '#fff',
},
},
});
const App = (): JSX.Element => {
const [openLearn, setOpenLearn] = useState<boolean>(false);
const [theme, setTheme] = useState(defaultTheme);
const handleModeChange = function () {
if (theme.palette.mode === 'light') {
setTheme(
createTheme({
palette: {
mode: 'dark',
background: {
default: '#070707',
},
},
}),
);
} else if (theme.palette.mode === 'dark') {
setTheme(
createTheme({
palette: {
mode: 'light',
background: {
default: '#fff',
},
},
}),
);
}
};
return (
<Suspense fallback='loading language'>
<I18nextProvider i18n={i18n}>
<ThemeProvider theme={theme}>
<CssBaseline />
<LearnDialog open={openLearn} onClose={() => setOpenLearn(false)} />
<TorConnection />
<IconButton
color='inherit'
sx={{ position: 'fixed', right: '34px', color: 'text.secondary' }}
onClick={() => setOpenLearn(true)}
>
<SchoolIcon />
</IconButton>
<IconButton
color='inherit'
sx={{ position: 'fixed', right: '0px', color: 'text.secondary' }}
onClick={() => handleModeChange()}
>
{theme.palette.mode === 'dark' ? <LightModeIcon /> : <DarkModeIcon />}
</IconButton>
<UnsafeAlert className='unsafeAlert' />
<Main />
</ThemeProvider>
</I18nextProvider>
</Suspense>
);
};
const loadApp = () => {
if (systemClient.loading) {
setTimeout(loadApp, 200);
} else {
const root = ReactDOM.createRoot(document.getElementById('app') ?? new HTMLElement());
root.render(<App />);
}
};
loadApp();

124
frontend/src/components/BookPage/BookPage.tsx
View File

@ -5,7 +5,7 @@ import { useHistory } from 'react-router-dom';
import currencyDict from '../../../static/assets/currencies.json';
import DepthChart from '../Charts/DepthChart';
import { Order, LimitList, Maker } from '../../models';
import { Book, Favorites, LimitList, Maker } from '../../models';
// Icons
import { BarChart, FormatListBulleted } from '@mui/icons-material';
@ -13,43 +13,37 @@ import BookTable from './BookTable';
import { MakerForm } from '../MakerPage';
interface BookPageProps {
bookLoading?: boolean;
bookRefreshing?: boolean;
loadingLimits: boolean;
lastDayPremium: number;
orders: Order[];
limits: LimitList;
book: Book;
limits: { list: LimitList; loading: boolean };
fetchLimits: () => void;
type: number;
currency: number;
windowWidth: number;
windowHeight: number;
fetchBook: (loading: boolean, refreshing: boolean) => void;
setAppState: (state: object) => void;
fav: Favorites;
setFav: (state: Favorites) => void;
fetchBook: () => void;
windowSize: { width: number; height: number };
lastDayPremium: number;
maker: Maker;
setMaker: (state: Maker) => void;
}
const BookPage = ({
bookLoading = false,
bookRefreshing = false,
lastDayPremium = 0,
loadingLimits,
orders = [],
limits,
fetchLimits,
type,
currency,
windowWidth,
windowHeight,
setAppState,
book = { orders: [], loading: true },
fetchBook,
fetchLimits,
fav,
setFav,
maker,
setMaker,
windowSize,
}: BookPageProps): JSX.Element => {
const { t } = useTranslation();
const history = useHistory();
const [view, setView] = useState<'list' | 'depth'>('list');
const [openMaker, setOpenMaker] = useState<boolean>(false);
const doubleView = windowWidth > 115;
const width = windowWidth * 0.9;
const doubleView = windowSize.width > 115;
const width = windowSize.width * 0.9;
const maxBookTableWidth = 85;
const chartWidthEm = width - maxBookTableWidth;
@ -72,10 +66,8 @@ const BookPage = ({
badSatoshisText: '',
};
const [maker, setMaker] = useState<Maker>(defaultMaker);
useEffect(() => {
if (orders.length < 1) {
if (book.orders.length < 1) {
fetchBook(true, false);
} else {
fetchBook(false, true);
@ -84,11 +76,11 @@ const BookPage = ({
const handleCurrencyChange = function (e) {
const currency = e.target.value;
setAppState({ currency });
setFav({ ...fav, currency });
};
const handleTypeChange = function (mouseEvent, val) {
setAppState({ type: val });
setFav({ ...fav, type: val });
};
const NoOrdersFound = function () {
@ -102,12 +94,14 @@ const BookPage = ({
>
<Grid item>
<Typography align='center' component='h5' variant='h5'>
{type == 0
{fav.type == 0
? t('No orders found to sell BTC for {{currencyCode}}', {
currencyCode: currency == 0 ? t('ANY') : currencyDict[currency.toString()],
currencyCode:
fav.currency == 0 ? t('ANY') : currencyDict[fav.currency.toString()],
})
: t('No orders found to buy BTC for {{currencyCode}}', {
currencyCode: currency == 0 ? t('ANY') : currencyDict[currency.toString()],
currencyCode:
fav.currency == 0 ? t('ANY') : currencyDict[fav.currency.toString()],
})}
</Typography>
</Grid>
@ -159,14 +153,11 @@ const BookPage = ({
<MakerForm
limits={limits}
fetchLimits={fetchLimits}
loadingLimits={loadingLimits}
pricingMethods={false}
setAppState={setAppState}
maker={maker}
defaultMaker={defaultMaker}
setMaker={setMaker}
type={type}
currency={currency}
fav={fav}
setFav={setFav}
/>
</Box>
</Dialog>
@ -180,20 +171,17 @@ const BookPage = ({
justifyContent='center'
spacing={1}
direction='row'
style={{ width: `${windowWidth}em` }}
style={{ width: `${windowSize.width}em` }}
>
<Grid item>
<BookTable
loading={bookLoading}
refreshing={bookRefreshing}
clickRefresh={() => fetchBook(false, true)}
orders={orders}
type={type}
currency={currency}
clickRefresh={() => fetchBook()}
book={book}
fav={fav}
maxWidth={maxBookTableWidth} // EM units
maxHeight={windowHeight * 0.825 - 5} // EM units
fullWidth={windowWidth} // EM units
fullHeight={windowHeight} // EM units
maxHeight={windowSize.height * 0.825 - 5} // EM units
fullWidth={windowSize.width} // EM units
fullHeight={windowSize.height} // EM units
defaultFullscreen={false}
onCurrencyChange={handleCurrencyChange}
onTypeChange={handleTypeChange}
@ -202,41 +190,33 @@ const BookPage = ({
</Grid>
<Grid item>
<DepthChart
orders={orders}
orders={book.orders}
lastDayPremium={lastDayPremium}
currency={currency}
compact={true}
setAppState={setAppState}
limits={limits}
currency={fav.currency}
limits={limits.list}
maxWidth={chartWidthEm} // EM units
maxHeight={windowHeight * 0.825 - 5} // EM units
maxHeight={windowSize.height * 0.825 - 5} // EM units
/>
</Grid>
</Grid>
) : view === 'depth' ? (
<DepthChart
bookLoading={bookLoading}
orders={orders}
orders={book.orders}
lastDayPremium={lastDayPremium}
currency={currency}
compact={true}
setAppState={setAppState}
limits={limits}
maxWidth={windowWidth * 0.8} // EM units
maxHeight={windowHeight * 0.825 - 5} // EM units
currency={fav.currency}
limits={limits.list}
maxWidth={windowSize.width * 0.8} // EM units
maxHeight={windowSize.height * 0.825 - 5} // EM units
/>
) : (
<BookTable
loading={bookLoading}
refreshing={bookRefreshing}
clickRefresh={() => fetchBook(false, true)}
orders={orders}
type={type}
currency={currency}
maxWidth={windowWidth * 0.97} // EM units
maxHeight={windowHeight * 0.825 - 5} // EM units
fullWidth={windowWidth} // EM units
fullHeight={windowHeight} // EM units
book={book}
clickRefresh={() => fetchBook()}
fav={fav}
maxWidth={windowSize.width * 0.97} // EM units
maxHeight={windowSize.height * 0.825 - 5} // EM units
fullWidth={windowSize.width} // EM units
fullHeight={windowSize.height} // EM units
defaultFullscreen={false}
onCurrencyChange={handleCurrencyChange}
onTypeChange={handleTypeChange}

56
frontend/src/components/BookPage/BookTable.tsx
View File

@ -18,7 +18,7 @@ import {
} from '@mui/material';
import { DataGrid, GridPagination } from '@mui/x-data-grid';
import currencyDict from '../../../static/assets/currencies.json';
import { Order } from '../../models';
import { Book, Favorites } from '../../models';
import filterOrders from '../../utils/filterOrders';
import BookControl from './BookControl';
@ -30,15 +30,12 @@ import hexToRgb from '../../utils/hexToRgb';
import statusBadgeColor from '../../utils/statusBadgeColor';
// Icons
import { Fullscreen, FullscreenExit, Refresh, WidthFull } from '@mui/icons-material';
import { Fullscreen, FullscreenExit, Refresh } from '@mui/icons-material';
interface Props {
loading?: boolean;
refreshing?: boolean;
clickRefresh?: () => void;
orders: Order[];
type: number;
currency: number;
book: Book;
fav?: Favorites;
maxWidth: number;
maxHeight: number;
fullWidth?: number;
@ -46,18 +43,15 @@ interface Props {
defaultFullscreen: boolean;
showControls?: boolean;
showFooter?: boolean;
onCurrencyChange?: () => void;
onTypeChange?: () => void;
noResultsOverlay?: JSX.Element;
onCurrencyChange?: (e: any) => void;
onTypeChange?: (mouseEvent: any, val: number) => void;
noResultsOverlay?: () => JSX.Element;
}
const BookTable = ({
loading = false,
refreshing = false,
clickRefresh,
orders,
type,
currency,
book,
fav,
maxWidth,
maxHeight,
fullWidth,
@ -666,8 +660,8 @@ const BookTable = ({
return (
<BookControl
width={width}
type={type}
currency={currency}
type={fav.type}
currency={fav.currency}
onCurrencyChange={onCurrencyChange}
onTypeChange={onTypeChange}
paymentMethod={paymentMethods}
@ -702,17 +696,17 @@ const BookTable = ({
rows={
showControls
? filterOrders({
orders,
baseFilter: { currency, type },
orders: book.orders,
baseFilter: fav,
paymentMethods,
})
: orders
: book.orders
}
loading={loading || refreshing}
loading={book.loading}
columns={columns}
hideFooter={!showFooter}
components={gridComponents()}
pageSize={loading ? 0 : pageSize}
pageSize={book.loading && book.orders.length == 0 ? 0 : pageSize}
rowsPerPageOptions={width < 22 ? [] : [0, pageSize, defaultPageSize * 2, 50, 100]}
onPageSizeChange={(newPageSize) => {
setPageSize(newPageSize);
@ -728,16 +722,20 @@ const BookTable = ({
<Paper style={{ width: '100%', height: '100%', overflow: 'auto' }}>
<DataGrid
localeText={localeText}
rows={orders.filter(
(order) =>
(order.type == type || type == null) &&
(order.currency == currency || currency == 0),
)}
loading={loading || refreshing}
rows={
showControls
? filterOrders({
orders: book.orders,
baseFilter: fav,
paymentMethods,
})
: book.orders
}
loading={book.loading}
columns={columns}
hideFooter={!showFooter}
components={gridComponents()}
pageSize={loading ? 0 : pageSize}
pageSize={book.loading && book.orders.length == 0 ? 0 : pageSize}
rowsPerPageOptions={[0, pageSize, defaultPageSize * 2, 50, 100]}
onPageSizeChange={(newPageSize) => {
setPageSize(newPageSize);

272
frontend/src/components/BottomBar.js
View File

@ -4,7 +4,6 @@ import {
Badge,
Tooltip,
ListItemAvatar,
Avatar,
Paper,
Grid,
IconButton,
@ -42,31 +41,16 @@ import {
UpdateClientDialog,
} from './Dialogs';
import checkVer from '../utils/checkVer';
class BottomBar extends Component {
constructor(props) {
super(props);
this.state = {
profileShown: false,
openStatsForNerds: false,
openCommuniy: false,
openCommunity: 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,
@ -75,36 +59,6 @@ class BottomBar extends Component {
};
}
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 });
};
@ -114,15 +68,14 @@ class BottomBar extends Component {
};
handleClickOpenCommunity = () => {
this.setState({ openCommuniy: true });
this.setState({ openCommunity: true });
};
handleClickCloseCommunity = () => {
this.setState({ openCommuniy: false });
this.setState({ openCommunity: false });
};
handleClickOpenProfile = () => {
this.getInfo();
this.setState({ openProfile: true, profileShown: true });
};
@ -130,35 +83,44 @@ class BottomBar extends Component {
this.setState({ openProfile: false });
};
handleClickOpenExchangeSummary = () => {
this.setState({ openExchangeSummary: true });
};
handleClickCloseExchangeSummary = () => {
this.setState({ openExchangeSummary: false });
};
handleSubmitInvoiceClicked = (e, rewardInvoice) => {
this.setState({
badInvoice: false,
showRewardsSpinner: true,
});
this.setState({ badInvoice: false, showRewardsSpinner: true });
apiClient
.post('/api/reward/', {
invoice: rewardInvoice,
})
.then(
(data) =>
this.setState({
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,
}),
);
.then((data) => {
this.setState({ badInvoice: data.bad_invoice, showRewardsSpinner: false });
this.props.setInfo({
...this.props.info,
badInvoice: data.bad_invoice,
openClaimRewards: !data.successful_withdrawal,
withdrawn: !!data.successful_withdrawal,
showRewardsSpinner: false,
});
this.props.setRobot({
...this.props.robot,
earnedRewards: data.successful_withdrawal ? 0 : this.props.robot.earnedRewards,
});
});
e.preventDefault();
};
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 +133,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.props.robot.activeOrderId > 0) &
!this.state.profileShown &
this.props.avatarLoaded
this.props.robot.avatarLoaded
);
const fontSize = this.props.theme.typography.fontSize;
const fontSizeFactor = fontSize / 14; // default fontSize is 14
@ -192,7 +156,10 @@ class BottomBar extends Component {
secondaryTypographyProps: { fontSize: (fontSize * 12) / 14 },
};
return (
<Paper elevation={6} style={{ height: '2.85em', width: '100%' }}>
<Paper
elevation={6}
style={{ height: '2.5em', width: `${(this.props.windowSize.width / 16) * 14}em` }}
>
<Grid container>
<Grid item xs={1.9}>
<div style={{ display: this.showProfileButton() ? '' : 'none' }}>
@ -208,16 +175,18 @@ class BottomBar extends Component {
<RobotAvatar
style={{ marginTop: -13 }}
statusColor={
(this.props.activeOrderId > 0) & !this.props.profileShown
(this.props.robot.activeOrderId > 0) & !this.state.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 })
}
/>
</ListItemAvatar>
</Tooltip>
<ListItemText primary={this.props.nickname} />
<ListItemText primary={this.props.robot.nickname} />
</ListItemButton>
</div>
</Grid>
@ -228,10 +197,6 @@ class BottomBar extends Component {
<IconButton
disabled={!this.showProfileButton()}
color='primary'
onClick={() =>
this.props.setAppState({ buyChecked: false, sellChecked: true, type: 0 }) &
this.getInfo()
}
to={`/book/`}
component={LinkRouter}
>
@ -240,7 +205,7 @@ class BottomBar extends Component {
</ListItemIcon>
<ListItemText
{...typographyProps}
primary={this.state.num_public_buy_orders}
primary={this.props.info.num_public_buy_orders}
secondary={t('Public Buy Orders')}
/>
</ListItem>
@ -252,10 +217,6 @@ class BottomBar extends Component {
<IconButton
disabled={!this.showProfileButton()}
color='primary'
onClick={() =>
this.props.setAppState({ buyChecked: true, sellChecked: false, type: 1 }) &
this.getInfo()
}
to={`/book/`}
component={LinkRouter}
>
@ -264,7 +225,7 @@ class BottomBar extends Component {
</ListItemIcon>
<ListItemText
{...typographyProps}
primary={this.state.num_public_sell_orders}
primary={this.props.info.num_public_sell_orders}
secondary={t('Public Sell Orders')}
/>
</ListItem>
@ -276,7 +237,6 @@ class BottomBar extends Component {
<IconButton
disabled={!this.showProfileButton()}
color='primary'
onClick={() => this.getInfo()}
to={`/`}
component={LinkRouter}
>
@ -285,7 +245,7 @@ class BottomBar extends Component {
</ListItemIcon>
<ListItemText
{...typographyProps}
primary={this.state.active_robots_today}
primary={this.props.info.active_robots_today}
secondary={t('Today Active Robots')}
/>
</ListItem>
@ -300,7 +260,7 @@ class BottomBar extends Component {
</ListItemIcon>
<ListItemText
{...typographyProps}
primary={this.state.last_day_nonkyc_btc_premium + '%'}
primary={this.props.info.last_day_nonkyc_btc_premium + '%'}
secondary={t('24h Avg Premium')}
/>
</ListItem>
@ -315,7 +275,7 @@ class BottomBar extends Component {
</ListItemIcon>
<ListItemText
{...typographyProps}
primary={(this.state.maker_fee + this.state.taker_fee) * 100}
primary={(this.props.info.maker_fee + this.props.info.taker_fee) * 100}
secondary={t('Trade Fee')}
/>
</ListItem>
@ -470,28 +430,19 @@ 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 });
};
handleClickCloseExchangeSummary = () => {
this.setState({ 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.props.info.active_order_id > 0) &
!this.state.profileShown &
this.props.avatarLoaded
this.props.robot.avatarLoaded
);
return (
<Paper elevation={6} style={{ height: '2.85em', width: '100%' }}>
<Paper
elevation={6}
style={{ height: '2.85em', width: `${(this.props.windowSize.width / 16) * 14}em` }}
>
<Grid container>
<Grid item xs={1.6}>
<div style={{ display: this.showProfileButton() ? '' : 'none' }}>
@ -510,12 +461,12 @@ class BottomBar extends Component {
style={{ width: 55, height: 55 }}
avatarClass='phoneFlippedSmallAvatar'
statusColor={
(this.props.activeOrderId > 0) & !this.props.profileShown
(this.props.activeOrderId > 0) & !this.state.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 })}
/>
</IconButton>
</Tooltip>
@ -527,14 +478,10 @@ class BottomBar extends Component {
<IconButton
disabled={!this.showProfileButton()}
color='primary'
onClick={() =>
this.props.setAppState({ buyChecked: false, sellChecked: true, type: 0 }) &
this.getInfo()
}
to={`/book/`}
component={LinkRouter}
>
<Badge badgeContent={this.state.num_public_buy_orders} color='action'>
<Badge badgeContent={this.props.info.num_public_buy_orders} color='action'>
<InventoryIcon />
</Badge>
</IconButton>
@ -546,14 +493,10 @@ class BottomBar extends Component {
<IconButton
disabled={!this.showProfileButton()}
color='primary'
onClick={() =>
this.props.setAppState({ buyChecked: true, sellChecked: false, type: 1 }) &
this.getInfo()
}
to={`/book/`}
component={LinkRouter}
>
<Badge badgeContent={this.state.num_public_sell_orders} color='action'>
<Badge badgeContent={this.props.info.num_public_sell_orders} color='action'>
<SellIcon />
</Badge>
</IconButton>
@ -565,11 +508,11 @@ class BottomBar extends Component {
<IconButton
disabled={!this.showProfileButton()}
color='primary'
onClick={() => this.getInfo()}
onClick={() => this.props.fetchInfo()}
to={`/`}
component={LinkRouter}
>
<Badge badgeContent={this.state.active_robots_today} color='action'>
<Badge badgeContent={this.props.info.active_robots_today} color='action'>
<SmartToyIcon />
</Badge>
</IconButton>
@ -579,7 +522,10 @@ class BottomBar extends Component {
<Grid item xs={1.8} align='center'>
<Tooltip enterTouchDelay={300} title={t('24h non-KYC bitcoin premium')}>
<IconButton color='primary' onClick={this.handleClickOpenExchangeSummary}>
<Badge badgeContent={this.state.last_day_nonkyc_btc_premium + '%'} color='action'>
<Badge
badgeContent={this.props.info.last_day_nonkyc_btc_premium + '%'}
color='action'
>
<PriceChangeIcon />
</Badge>
</IconButton>
@ -622,65 +568,67 @@ class BottomBar extends Component {
return (
<div>
<CommunityDialog
isOpen={this.state.openCommuniy}
open={this.state.openCommunity}
handleClickCloseCommunity={this.handleClickCloseCommunity}
/>
<UpdateClientDialog
open={this.state.openUpdateClient}
coordinatorVersion={this.state.coordinatorVersion}
clientVersion={this.state.clientVersion}
handleClickClose={() => this.setState({ openUpdateClient: false })}
coordinatorVersion={this.props.info.coordinatorVersion}
clientVersion={this.props.info.clientVersion}
handleClickClose={() =>
this.props.setInfo({ ...this.props.info, openUpdateClient: false })
}
/>
<ExchangeSummaryDialog
isOpen={this.state.openExchangeSummary}
open={this.state.openExchangeSummary}
handleClickCloseExchangeSummary={this.handleClickCloseExchangeSummary}
numPublicBuyOrders={this.state.num_public_buy_orders}
numPublicSellOrders={this.state.num_public_sell_orders}
bookLiquidity={this.state.book_liquidity}
activeRobotsToday={this.state.active_robots_today}
lastDayNonkycBtcPremium={this.state.last_day_nonkyc_btc_premium}
makerFee={this.state.maker_fee}
takerFee={this.state.taker_fee}
swapFeeRate={this.state.current_swap_fee_rate}
numPublicBuyOrders={this.props.info.num_public_buy_orders}
numPublicSellOrders={this.props.info.num_public_sell_orders}
bookLiquidity={this.props.info.book_liquidity}
activeRobotsToday={this.props.info.active_robots_today}
lastDayNonkycBtcPremium={this.props.info.last_day_nonkyc_btc_premium}
makerFee={this.props.info.maker_fee}
takerFee={this.props.info.taker_fee}
swapFeeRate={this.props.info.current_swap_fee_rate}
/>
<ProfileDialog
isOpen={this.state.openProfile}
open={this.state.openProfile}
handleClickCloseProfile={this.handleClickCloseProfile}
nickname={this.props.nickname}
activeOrderId={this.props.activeOrderId}
lastOrderId={this.props.lastOrderId}
referralCode={this.props.referralCode}
tgEnabled={this.props.tgEnabled}
tgBotName={this.props.tgBotName}
tgToken={this.props.tgToken}
nickname={this.props.robot.nickname}
activeOrderId={this.props.robot.activeOrderId}
lastOrderId={this.props.robotlastOrderId}
referralCode={this.props.robot.referralCode}
tgEnabled={this.props.robot.tgEnabled}
tgBotName={this.props.robot.tgBotName}
tgToken={this.props.robot.tgToken}
handleSubmitInvoiceClicked={this.handleSubmitInvoiceClicked}
host={this.getHost()}
showRewardsSpinner={this.state.showRewardsSpinner}
withdrawn={this.state.withdrawn}
badInvoice={this.state.badInvoice}
earnedRewards={this.props.earnedRewards}
setAppState={this.props.setAppState}
stealthInvoices={this.props.stealthInvoices}
withdrawn={this.props.info.withdrawn}
badInvoice={this.props.info.badInvoice}
earnedRewards={this.props.robot.earnedRewards}
updateRobot={(newParam) => this.props.setRobot({ ...robot, ...newParam })}
stealthInvoices={this.props.robot.stealthInvoices}
handleSetStealthInvoice={this.handleSetStealthInvoice}
/>
<StatsDialog
isOpen={this.state.openStatsForNerds}
open={this.state.openStatsForNerds}
handleClickCloseStatsForNerds={this.handleClickCloseStatsForNerds}
coordinatorVersion={this.state.coordinatorVersion}
clientVersion={this.state.clientVersion}
lndVersion={this.state.lnd_version}
network={this.state.network}
nodeAlias={this.state.node_alias}
nodeId={this.state.node_id}
alternativeName={this.state.alternative_name}
alternativeSite={this.state.alternative_site}
commitHash={this.state.robosats_running_commit_hash}
lastDayVolume={this.state.last_day_volume}
lifetimeVolume={this.state.lifetime_volume}
coordinatorVersion={this.props.info.coordinatorVersion}
clientVersion={this.props.info.clientVersion}
lndVersion={this.props.info.lnd_version}
network={this.props.info.network}
nodeAlias={this.props.info.node_alias}
nodeId={this.props.info.node_id}
alternativeName={this.props.info.alternative_name}
alternativeSite={this.props.info.alternative_site}
commitHash={this.props.info.robosats_running_commit_hash}
lastDayVolume={this.props.info.last_day_volume}
lifetimeVolume={this.props.info.lifetime_volume}
/>
<MediaQuery minWidth={1200}>{this.bottomBarDesktop()}</MediaQuery>

11
frontend/src/components/Charts/DepthChart/index.tsx
View File

@ -28,14 +28,12 @@ import currencyDict from '../../../../static/assets/currencies.json';
import PaymentText from '../../PaymentText';
import getNivoScheme from '../NivoScheme';
import median from '../../../utils/match';
import { apiClient } from '../../../services/api/index';
import statusBadgeColor from '../../../utils/statusBadgeColor';
interface DepthChartProps {
orders: Order[];
lastDayPremium: number | undefined;
currency: number;
setAppState: (state: object) => void;
limits: LimitList;
maxWidth: number;
maxHeight: number;
@ -45,7 +43,6 @@ const DepthChart: React.FC<DepthChartProps> = ({
orders,
lastDayPremium,
currency,
setAppState,
limits,
maxWidth,
maxHeight,
@ -64,14 +61,6 @@ const DepthChart: React.FC<DepthChartProps> = ({
const height = maxHeight < 20 ? 20 : maxHeight;
const width = maxWidth < 20 ? 20 : maxWidth > 72.8 ? 72.8 : maxWidth;
useEffect(() => {
if (Object.keys(limits).length === 0) {
apiClient.get('/api/limits/').then((data) => {
setAppState({ limits: data });
});
}
}, []);
useEffect(() => {
setCurrencyCode(currency === 0 ? 1 : currency);
}, [currency]);

8
frontend/src/components/Charts/NivoScheme/index.ts
View File

@ -12,13 +12,13 @@ export const getNivoScheme: (theme: MuiTheme) => NivoTheme = (theme) => {
axis: {
ticks: {
line: {
strokeWidth: '1',
strokeWidth: 1,
stroke: 'rgb(0, 0, 0)',
},
},
domain: {
line: {
strokeWidth: '1',
strokeWidth: 1,
stroke: 'rgb(0, 0, 0)',
},
},
@ -36,13 +36,13 @@ export const getNivoScheme: (theme: MuiTheme) => NivoTheme = (theme) => {
fill: 'rgb(255, 255, 255)',
},
line: {
strokeWidth: '1',
strokeWidth: 1,
stroke: 'rgb(255, 255, 255)',
},
},
domain: {
line: {
strokeWidth: '1',
strokeWidth: 1,
stroke: 'rgb(255, 255, 255)',
},
},

6
frontend/src/components/Dialogs/Community.tsx
View File

@ -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 (
<Dialog
open={isOpen}
open={open}
onClose={handleClickCloseCommunity}
aria-labelledby='community-dialog-title'
aria-describedby='community-description'

6
frontend/src/components/Dialogs/ExchangeSummary.tsx
View File

@ -24,7 +24,7 @@ import LinkIcon from '@mui/icons-material/Link';
import { pn } from '../../utils/prettyNumbers';
interface Props {
isOpen: boolean;
open: boolean;
handleClickCloseExchangeSummary: () => 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 (
<Dialog
open={isOpen}
open={open}
onClose={handleClickCloseExchangeSummary}
aria-labelledby='exchange-summary-title'
aria-describedby='exchange-summary-description'

14
frontend/src/components/Dialogs/Profile.tsx
View File

@ -41,7 +41,7 @@ import { getWebln } from '../../utils/webln';
import RobotAvatar from '../Robots/RobotAvatar';
interface Props {
isOpen: boolean;
open: boolean;
handleClickCloseProfile: () => void;
nickname: string;
activeOrderId: string | number;
@ -57,12 +57,12 @@ interface Props {
badInvoice: boolean | string;
earnedRewards: number;
stealthInvoices: boolean;
handleSetStealthInvoice: (stealth: boolean) => void;
setAppState: (state: any) => void; // TODO: move to a ContextProvider
handleSetStealthInvoice: (wantsStealth: boolean) => void;
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 (
<Dialog
open={isOpen}
open={open}
onClose={handleClickCloseProfile}
aria-labelledby='profile-title'
aria-describedby='profile-description'

6
frontend/src/components/Dialogs/Stats.tsx
View File

@ -26,7 +26,7 @@ import { AmbossIcon, BitcoinSignIcon, RoboSatsNoTextIcon } from '../Icons';
import { pn } from '../../utils/prettyNumbers';
interface Props {
isOpen: boolean;
open: boolean;
handleClickCloseStatsForNerds: () => 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 (
<Dialog
open={isOpen}
open={open}
onClose={handleClickCloseStatsForNerds}
aria-labelledby='stats-for-nerds-dialog-title'
aria-describedby='stats-for-nerds-description'

2
frontend/src/components/Dialogs/UpdateClient.tsx
View File

@ -27,7 +27,7 @@ interface Props {
}
const UpdateClientDialog = ({
open,
open = false,
clientVersion,
coordinatorVersion,
handleClickClose,

2
frontend/src/components/EncryptedChat.js
View File

@ -75,7 +75,7 @@ class Chat extends Component {
this.setState({ connected: false });
});
this.setState({ connected: true, connection: connection });
this.setState({ connected: true, connection });
});
}

187
frontend/src/components/HomePage.js
View File

@ -1,187 +0,0 @@
import React, { Component } from 'react';
import { HashRouter, BrowserRouter, Switch, Route } from 'react-router-dom';
import UserGenPage from './UserGenPage';
import MakerPage from './MakerPage';
import BookPage from './BookPage';
import OrderPage from './OrderPage';
import BottomBar from './BottomBar';
import { apiClient } from '../services/api';
export default class HomePage extends Component {
constructor(props) {
super(props);
this.state = {
nickname: null,
token: null,
copiedToken: false,
avatarLoaded: false,
buyChecked: false,
sellChecked: false,
type: null,
currency: 0,
bookCurrencyCode: 'ANY',
orders: new Array(),
bookLoading: true,
bookRefreshing: false,
activeOrderId: null,
lastOrderId: null,
earnedRewards: 0,
referralCode: '',
lastDayPremium: 0,
limits: {},
loadingLimits: true,
maker: {},
};
}
componentDidMount = () => {
if (typeof window !== undefined) {
this.setState({
windowWidth: window.innerWidth / this.props.theme.typography.fontSize,
windowHeight: window.innerHeight / this.props.theme.typography.fontSize,
});
window.addEventListener('resize', this.onResize);
}
this.fetchBook(true, false);
this.fetchLimits(true);
};
componentWillUnmount = () => {
if (typeof window !== undefined) {
window.removeEventListener('resize', this.onResize);
}
};
onResize = () => {
this.setState({
windowWidth: window.innerWidth / this.props.theme.typography.fontSize,
windowHeight: window.innerHeight / this.props.theme.typography.fontSize,
});
};
setAppState = (newState) => {
this.setState(newState);
};
redirectTo(location) {
this.props.history.push(location);
}
getBasename() {
if (window.NativeRobosats) {
// Only for Android
return window.location.pathname;
}
return '';
}
fetchBook = (loading, refreshing) => {
this.setState({ bookLoading: loading, bookRefreshing: refreshing });
apiClient.get('/api/book/').then((data) =>
this.setState({
bookLoading: false,
bookRefreshing: false,
orders: data.not_found ? [] : data,
}),
);
};
fetchLimits = (loading) => {
this.setState({ loadingLimits: loading });
const limits = apiClient.get('/api/limits/').then((data) => {
this.setState({ limits: data, loadingLimits: false });
return data;
});
return limits;
};
render() {
const fontSize = this.props.theme.typography.fontSize;
const fontSizeFactor = fontSize / 14; // default fontSize is 14
const Router = window.NativeRobosats ? HashRouter : BrowserRouter;
return (
<Router basename={this.getBasename()}>
<div className='appCenter'>
<Switch>
<Route
exact
path='/'
render={(props) => (
<UserGenPage
{...props}
{...this.state}
{...this.props}
setAppState={this.setAppState}
/>
)}
/>
<Route
path='/ref/:refCode'
render={(props) => (
<UserGenPage
{...props}
{...this.state}
{...this.props}
setAppState={this.setAppState}
/>
)}
/>
<Route
path='/make'
render={(props) => (
<MakerPage
{...props}
{...this.state}
{...this.props}
fetchLimits={this.fetchLimits}
setAppState={this.setAppState}
/>
)}
/>
<Route
path='/book'
render={(props) => (
<BookPage
{...props}
{...this.state}
{...this.props}
fetchBook={this.fetchBook}
fetchLimits={this.fetchLimits}
setAppState={this.setAppState}
/>
)}
/>
<Route
path='/order/:orderId'
render={(props) => (
<OrderPage
{...props}
{...this.state}
{...this.props}
setAppState={this.setAppState}
/>
)}
/>
</Switch>
</div>
<div
className='bottomBar'
style={{
height: `${40 * fontSizeFactor}px`,
width: `${(this.state.windowWidth / 16) * 14}em`,
}}
>
<BottomBar
redirectTo={this.redirectTo}
{...this.state}
{...this.props}
setAppState={this.setAppState}
/>
</div>
</Router>
);
}
}

198
frontend/src/components/Main.tsx Normal file
View File

@ -0,0 +1,198 @@
import React, { useEffect, useState } from 'react';
import { HashRouter, BrowserRouter, Switch, Route, useHistory } from 'react-router-dom';
import { useTheme } from '@mui/material';
import UserGenPage from './UserGenPage';
import MakerPage from './MakerPage';
import BookPage from './BookPage';
import OrderPage from './OrderPage';
import BottomBar from './BottomBar';
import { apiClient } from '../services/api';
import checkVer from '../utils/checkVer';
import {
Book,
LimitList,
Maker,
Robot,
Info,
Settings,
Favorites,
defaultMaker,
defaultRobot,
defaultInfo,
defaultSettings,
} from '../models';
const getWindowSize = function (fontSize: number) {
// returns window size in EM units
return {
width: window.innerWidth / fontSize,
height: window.innerHeight / fontSize,
};
};
const Main = (): JSX.Element => {
const theme = useTheme();
const history = useHistory();
const Router = window.NativeRobosats != null ? HashRouter : BrowserRouter;
const basename = window.NativeRobosats != null ? window.location.pathname : '';
// All app data structured
const [book, setBook] = useState<Book>({ orders: [], loading: true });
const [limits, setLimits] = useState<{ list: LimitList; loading: boolean }>({
list: [],
loading: true,
});
const [robot, setRobot] = useState<Robot>(defaultRobot);
const [maker, setMaker] = useState<Maker>(defaultMaker);
const [info, setInfo] = useState<Info>(defaultInfo);
const [fav, setFav] = useState<Favorites>({ type: null, currency: 0 });
const [settings, setSettings] = useState<Settings>(defaultSettings);
const [windowSize, setWindowSize] = useState<{ width: number; height: number }>(
getWindowSize(theme.typography.fontSize),
);
useEffect(() => {
if (typeof window !== undefined) {
window.addEventListener('resize', onResize);
}
fetchBook();
fetchLimits();
fetchInfo();
return () => {
if (typeof window !== undefined) {
window.removeEventListener('resize', onResize);
}
};
}, []);
const onResize = function () {
setWindowSize(getWindowSize(theme.typography.fontSize));
};
const fetchBook = function () {
setBook({ ...book, loading: true });
apiClient.get('/api/book/').then((data: any) =>
setBook({
loading: false,
orders: data.not_found ? [] : data,
}),
);
};
const fetchLimits = async () => {
setLimits({ ...limits, loading: true });
const data = apiClient.get('/api/limits/').then((data) => {
setLimits({ list: data ?? [], loading: false });
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 ?? null,
lastOrderId: 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 ?? 0,
stealthInvoices: data.wants_stealth,
});
});
};
console.log(robot);
return (
<Router basename={basename}>
<div className='appCenter'>
<Switch>
<Route
exact
path='/'
render={(props: any) => (
<UserGenPage match={props.match} theme={theme} robot={robot} setRobot={setRobot} />
)}
/>
<Route
path='/ref/:refCode'
render={(props: any) => (
<UserGenPage match={props.match} theme={theme} robot={robot} setRobot={setRobot} />
)}
/>
<Route
path='/make'
render={() => (
<MakerPage
orders={book.orders}
limits={limits}
fetchLimits={fetchLimits}
maker={maker}
setMaker={setMaker}
fav={fav}
setFav={setFav}
windowSize={windowSize}
/>
)}
/>
<Route
path='/book'
render={() => (
<BookPage
book={book}
fetchBook={fetchBook}
limits={limits}
fetchLimits={fetchLimits}
fav={fav}
setFav={setFav}
maker={maker}
setMaker={setMaker}
lastDayPremium={info.last_day_nonkyc_btc_premium}
windowSize={windowSize}
/>
)}
/>
<Route
path='/order/:orderId'
render={(props: any) => <OrderPage theme={theme} history={history} {...props} />}
/>
</Switch>
</div>
<div
style={{
height: '2.5em',
position: 'fixed',
bottom: 0,
}}
>
<BottomBar
theme={theme}
windowSize={windowSize}
redirectTo={(location: string) => history.push(location)}
robot={robot}
setRobot={setRobot}
info={info}
setInfo={setInfo}
fetchInfo={fetchInfo}
/>
</div>
</Router>
);
};
export default Main;

184
frontend/src/components/MakerPage/MakerForm.tsx
View File

@ -24,7 +24,7 @@ import {
IconButton,
} from '@mui/material';
import { LimitList, Maker, defaultMaker } from '../../models';
import { LimitList, Maker, Favorites, defaultMaker } from '../../models';
import { LocalizationProvider, TimePicker } from '@mui/x-date-pickers';
import DateFnsUtils from '@date-io/date-fns';
@ -43,14 +43,12 @@ import { SelfImprovement, Lock, HourglassTop, DeleteSweep, Edit } from '@mui/ico
import { LoadingButton } from '@mui/lab';
interface MakerFormProps {
limits: LimitList;
fetchLimits: (loading) => void;
loadingLimits: boolean;
limits: { list: LimitList; loading: boolean };
fetchLimits: () => void;
pricingMethods: boolean;
maker: Maker;
type: number;
currency: number;
setAppState: (state: object) => void;
fav: Favorites;
setFav: (state: Favorites) => void;
setMaker: (state: Maker) => void;
disableRequest?: boolean;
collapseAll?: boolean;
@ -62,11 +60,9 @@ interface MakerFormProps {
const MakerForm = ({
limits,
fetchLimits,
loadingLimits,
pricingMethods,
currency,
type,
setAppState,
fav,
setFav,
maker,
setMaker,
disableRequest = false,
@ -79,7 +75,6 @@ const MakerForm = ({
const theme = useTheme();
const history = useHistory();
const [badRequest, setBadRequest] = useState<string | null>(null);
const [advancedOptions, setAdvancedOptions] = useState<boolean>(false);
const [amountLimits, setAmountLimits] = useState<number[]>([1, 1000]);
const [satoshisLimits, setSatoshisLimits] = useState<number[]>([20000, 4000000]);
const [currentPrice, setCurrentPrice] = useState<number | string>('...');
@ -93,27 +88,26 @@ const MakerForm = ({
const amountSafeThresholds = [1.03, 0.98];
useEffect(() => {
setCurrencyCode(currencyDict[currency == 0 ? 1 : currency]);
if (Object.keys(limits).length === 0) {
setAppState({ loadingLimits: true });
fetchLimits(true).then((data) => {
updateAmountLimits(data, currency, maker.premium);
updateCurrentPrice(data, currency, maker.premium);
setCurrencyCode(currencyDict[fav.currency == 0 ? 1 : fav.currency]);
if (Object.keys(limits.list).length === 0) {
fetchLimits().then((data) => {
updateAmountLimits(data, fav.currency, maker.premium);
updateCurrentPrice(data, fav.currency, maker.premium);
updateSatoshisLimits(data);
});
} else {
updateAmountLimits(limits, currency, maker.premium);
updateCurrentPrice(limits, currency, maker.premium);
updateSatoshisLimits(limits);
updateAmountLimits(limits.list, fav.currency, maker.premium);
updateCurrentPrice(limits.list, fav.currency, maker.premium);
updateSatoshisLimits(limits.list);
fetchLimits(false);
fetchLimits();
}
}, []);
const updateAmountLimits = function (limits: LimitList, currency: number, premium: number) {
const index = currency === 0 ? 1 : currency;
let minAmountLimit: number = limits[index].min_amount * (1 + premium / 100);
let maxAmountLimit: number = limits[index].max_amount * (1 + premium / 100);
const updateAmountLimits = function (limitList: LimitList, currency: number, premium: number) {
const index = currency == 0 ? 1 : currency;
let minAmountLimit: number = limitList[index].min_amount * (1 + premium / 100);
let maxAmountLimit: number = limitList[index].max_amount * (1 + premium / 100);
// apply thresholds to ensure good request
minAmountLimit = minAmountLimit * amountSafeThresholds[0];
@ -121,19 +115,19 @@ const MakerForm = ({
setAmountLimits([minAmountLimit, maxAmountLimit]);
};
const updateSatoshisLimits = function (limits: LimitList) {
const minAmount: number = limits[1000].min_amount * 100000000;
const maxAmount: number = limits[1000].max_amount * 100000000;
const updateSatoshisLimits = function (limitList: LimitList) {
const minAmount: number = limitList[1000].min_amount * 100000000;
const maxAmount: number = limitList[1000].max_amount * 100000000;
setSatoshisLimits([minAmount, maxAmount]);
};
const updateCurrentPrice = function (limits: LimitList, currency: number, premium: number) {
const index = currency === 0 ? 1 : currency;
const updateCurrentPrice = function (limitsList: LimitList, currency: number, premium: number) {
const index = currency == 0 ? 1 : currency;
let price = '...';
if (maker.is_explicit && maker.amount > 0 && maker.satoshis > 0) {
if (maker.isExplicit && maker.amount > 0 && maker.satoshis > 0) {
price = maker.amount / (maker.satoshis / 100000000);
} else if (!maker.is_explicit) {
price = limits[index].price * (1 + premium / 100);
price = limitsList[index].price * (1 + premium / 100);
}
setCurrentPrice(parseFloat(Number(price).toPrecision(5)));
};
@ -141,17 +135,17 @@ const MakerForm = ({
const handleCurrencyChange = function (newCurrency: number) {
const currencyCode: string = currencyDict[newCurrency];
setCurrencyCode(currencyCode);
setAppState({
setFav({
...fav,
currency: newCurrency,
bookCurrencyCode: currencyCode,
});
updateAmountLimits(limits, newCurrency, maker.premium);
updateCurrentPrice(limits, newCurrency, maker.premium);
if (advancedOptions) {
updateAmountLimits(limits.list, newCurrency, maker.premium);
updateCurrentPrice(limits.list, newCurrency, maker.premium);
if (maker.advancedOptions) {
setMaker({
...maker,
minAmount: parseFloat(Number(limits[newCurrency].max_amount * 0.25).toPrecision(2)),
maxAmount: parseFloat(Number(limits[newCurrency].max_amount * 0.75).toPrecision(2)),
minAmount: parseFloat(Number(limits.list[newCurrency].max_amount * 0.25).toPrecision(2)),
maxAmount: parseFloat(Number(limits.list[newCurrency].max_amount * 0.75).toPrecision(2)),
});
}
};
@ -198,8 +192,8 @@ const MakerForm = ({
badPremiumText = t('Must be more than {{min}}%', { min });
premium = -99.99;
}
updateCurrentPrice(limits, currency, premium);
updateAmountLimits(limits, currency, premium);
updateCurrentPrice(limits.list, fav.currency, premium);
updateAmountLimits(limits.list, fav.currency, premium);
setMaker({
...maker,
premium,
@ -235,7 +229,7 @@ const MakerForm = ({
};
const handleClickExplicit = function () {
if (!advancedOptions) {
if (!maker.advancedOptions) {
setMaker({
...maker,
isExplicit: true,
@ -247,12 +241,12 @@ const MakerForm = ({
if (!disableRequest) {
setSubmittingRequest(true);
const body = {
type: type == 0 ? 1 : 0,
currency: currency == 0 ? 1 : currency,
amount: advancedOptions ? null : maker.amount,
has_range: advancedOptions,
min_amount: advancedOptions ? maker.minAmount : null,
max_amount: advancedOptions ? maker.maxAmount : null,
type: fav.type == 0 ? 1 : 0,
currency: fav.currency == 0 ? 1 : fav.currency,
amount: maker.advancedOptions ? null : maker.amount,
has_range: maker.advancedOptions,
min_amount: maker.advancedOptions ? maker.minAmount : null,
max_amount: maker.advancedOptions ? maker.maxAmount : null,
payment_method:
maker.paymentMethodsText === '' ? 'not specified' : maker.paymentMethodsText,
is_explicit: maker.isExplicit,
@ -300,13 +294,12 @@ const MakerForm = ({
};
const handleClickAdvanced = function () {
if (advancedOptions) {
if (maker.advancedOptions) {
handleClickRelative();
setMaker({ ...maker, advancedOptions: false });
} else {
resetRange();
resetRange(true);
}
setAdvancedOptions(!advancedOptions);
};
const minAmountError = function () {
@ -327,17 +320,18 @@ const MakerForm = ({
);
};
const resetRange = function () {
const index = currency === 0 ? 1 : currency;
const resetRange = function (advancedOptions: boolean) {
const index = fav.currency === 0 ? 1 : fav.currency;
const minAmount = maker.amount
? parseFloat((maker.amount / 2).toPrecision(2))
: parseFloat(Number(limits[index].max_amount * 0.25).toPrecision(2));
: parseFloat(Number(limits.list[index].max_amount * 0.25).toPrecision(2));
const maxAmount = maker.amount
? parseFloat(maker.amount)
: parseFloat(Number(limits[index].max_amount * 0.75).toPrecision(2));
: parseFloat(Number(limits.list[index].max_amount * 0.75).toPrecision(2));
setMaker({
...maker,
advancedOptions,
minAmount,
maxAmount,
});
@ -379,20 +373,20 @@ const MakerForm = ({
const disableSubmit = function () {
return (
type == null ||
fav.type == null ||
(maker.amount != '' &&
!advancedOptions &&
!maker.advancedOptions &&
(maker.amount < amountLimits[0] || maker.amount > amountLimits[1])) ||
(maker.amount == null && (!advancedOptions || loadingLimits)) ||
(advancedOptions && (minAmountError() || maxAmountError())) ||
(maker.amount <= 0 && !advancedOptions) ||
(maker.amount == null && (!maker.advancedOptions || limits.loading)) ||
(maker.advancedOptions && (minAmountError() || maxAmountError())) ||
(maker.amount <= 0 && !maker.advancedOptions) ||
(maker.isExplicit && (maker.badSatoshisText != '' || maker.satoshis == '')) ||
(!maker.isExplicit && maker.badPremiumText != '')
);
};
const clearMaker = function () {
setAppState({ type: null });
setFav({ ...fav, type: null });
setMaker(defaultMaker);
};
@ -404,8 +398,12 @@ const MakerForm = ({
align='center'
color={disableSubmit() ? 'text.secondary' : 'text.primary'}
>
{type == null ? t('Order for ') : type == 1 ? t('Buy order for ') : t('Sell order for ')}
{advancedOptions && maker.minAmount != ''
{fav.type == null
? t('Order for ')
: fav.type == 1
? t('Buy order for ')
: t('Sell order for ')}
{maker.advancedOptions && maker.minAmount != ''
? pn(maker.minAmount) + '-' + pn(maker.maxAmount)
: pn(maker.amount)}
{' ' + currencyCode}
@ -437,12 +435,12 @@ const MakerForm = ({
return (
<Box>
<ConfirmationDialogs />
<Collapse in={loadingLimits}>
<div style={{ display: loadingLimits ? '' : 'none' }}>
<Collapse in={limits.list.length == 0}>
<div style={{ display: limits.list.length == 0 ? '' : 'none' }}>
<LinearProgress />
</div>
</Collapse>
<Collapse in={!(loadingLimits || collapseAll)}>
<Collapse in={!(limits.list.length == 0 || collapseAll)}>
<Grid container justifyContent='space-between' spacing={0} sx={{ maxHeight: '1em' }}>
<Grid item>
<IconButton
@ -478,8 +476,8 @@ const MakerForm = ({
>
<Switch
size='small'
disabled={loadingLimits}
checked={advancedOptions}
disabled={limits.list.length == 0}
checked={maker.advancedOptions}
onChange={handleClickAdvanced}
/>
<SelfImprovement sx={{ color: 'text.secondary' }} />
@ -499,17 +497,18 @@ const MakerForm = ({
<div style={{ textAlign: 'center' }}>
<ButtonGroup>
<Button
size={advancedOptions ? 'small' : 'large'}
size={maker.advancedOptions ? 'small' : 'large'}
variant='contained'
onClick={() =>
setAppState({
setFav({
...fav,
type: 1,
})
}
disableElevation={type == 1}
disableElevation={fav.type == 1}
sx={{
backgroundColor: type == 1 ? 'primary.main' : 'background.paper',
color: type == 1 ? 'background.paper' : 'text.secondary',
backgroundColor: fav.type == 1 ? 'primary.main' : 'background.paper',
color: fav.type == 1 ? 'background.paper' : 'text.secondary',
':hover': {
color: 'background.paper',
},
@ -518,18 +517,19 @@ const MakerForm = ({
{t('Buy')}
</Button>
<Button
size={advancedOptions ? 'small' : 'large'}
size={maker.advancedOptions ? 'small' : 'large'}
variant='contained'
onClick={() =>
setAppState({
setFav({
...fav,
type: 0,
})
}
disableElevation={type == 0}
disableElevation={fav.type == 0}
color='secondary'
sx={{
backgroundColor: type == 0 ? 'secondary.main' : 'background.paper',
color: type == 0 ? 'background.secondary' : 'text.secondary',
backgroundColor: fav.type == 0 ? 'secondary.main' : 'background.paper',
color: fav.type == 0 ? 'background.secondary' : 'text.secondary',
':hover': {
color: 'background.paper',
},
@ -543,11 +543,11 @@ const MakerForm = ({
</Grid>
<Grid item>
<Collapse in={advancedOptions}>
<Collapse in={maker.advancedOptions}>
<AmountRange
minAmount={maker.minAmount}
handleRangeAmountChange={handleRangeAmountChange}
currency={currency}
currency={fav.currency}
currencyCode={currencyCode}
handleCurrencyChange={handleCurrencyChange}
amountLimits={amountLimits}
@ -558,7 +558,7 @@ const MakerForm = ({
handleMaxAmountChange={handleMaxAmountChange}
/>
</Collapse>
<Collapse in={!advancedOptions}>
<Collapse in={!maker.advancedOptions}>
<Grid item>
<Grid container alignItems='stretch' style={{ display: 'flex' }}>
<Grid item xs={6}>
@ -571,8 +571,8 @@ const MakerForm = ({
>
<TextField
fullWidth
disabled={advancedOptions}
variant={advancedOptions ? 'filled' : 'outlined'}
disabled={maker.advancedOptions}
variant={maker.advancedOptions ? 'filled' : 'outlined'}
error={
maker.amount != '' &&
(maker.amount < amountLimits[0] || maker.amount > amountLimits[1])
@ -613,7 +613,7 @@ const MakerForm = ({
inputProps={{
style: { textAlign: 'center' },
}}
value={currency == 0 ? 1 : currency}
value={fav.currency == 0 ? 1 : fav.currency}
onChange={(e) => handleCurrencyChange(e.target.value)}
>
{Object.entries(currencyDict).map(([key, value]) => (
@ -635,10 +635,10 @@ const MakerForm = ({
<AutocompletePayments
onAutocompleteChange={handlePaymentMethodChange}
// listBoxProps={{ sx: { width: '15.3em', maxHeight: '20em' } }}
optionsType={currency == 1000 ? 'swap' : 'fiat'}
optionsType={fav.currency == 1000 ? 'swap' : 'fiat'}
error={maker.badPaymentMethod}
helperText={maker.badPaymentMethod ? t('Must be shorter than 65 characters') : ''}
label={currency == 1000 ? t('Swap Destination(s)') : t('Fiat Payment Method(s)')}
label={fav.currency == 1000 ? t('Swap Destination(s)') : t('Fiat Payment Method(s)')}
tooltipTitle={t(
'Enter your preferred fiat payment methods. Fast methods are highly recommended.',
)}
@ -649,7 +649,7 @@ const MakerForm = ({
/>
</Grid>
{!advancedOptions && pricingMethods ? (
{!maker.advancedOptions && pricingMethods ? (
<Grid item xs={12}>
<Box
sx={{
@ -691,7 +691,7 @@ const MakerForm = ({
title={t('Set a fix amount of satoshis')}
>
<FormControlLabel
disabled={advancedOptions}
disabled={maker.advancedOptions}
value='explicit'
control={<Radio color='secondary' />}
label={t('Exact')}
@ -748,7 +748,7 @@ const MakerForm = ({
</div>
</Grid>
<Grid item>
<Collapse in={advancedOptions}>
<Collapse in={maker.advancedOptions}>
<Grid container spacing={1}>
<Grid item xs={12}>
<LocalizationProvider dateAdapter={DateFnsUtils}>
@ -944,7 +944,7 @@ const MakerForm = ({
</Typography>
</Grid>
<Collapse in={!loadingLimits}>
<Collapse in={!(limits.list.length == 0)}>
<Tooltip
placement='top'
enterTouchDelay={0}

46
frontend/src/components/MakerPage/MakerPage.tsx
View File

@ -2,7 +2,7 @@ import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Button, Grid, Paper, Collapse, Typography } from '@mui/material';
import { LimitList, Maker, Order, defaultMaker } from '../../models';
import { LimitList, Maker, Order, Favorites, defaultMaker } from '../../models';
import MakerForm from './MakerForm';
import BookTable from '../BookPage/BookTable';
@ -10,38 +10,35 @@ import { useHistory } from 'react-router-dom';
import filterOrders from '../../utils/filterOrders';
interface MakerPageProps {
limits: LimitList;
limits: { list: LimitList; loading: boolean };
fetchLimits: () => void;
orders: Order[];
loadingLimits: boolean;
type: number;
windowHeight: number;
windowWidth: number;
currency: number;
setAppState: (state: object) => void;
fav: Favorites;
maker: Maker;
setFav: (state: Favorites) => void;
setMaker: (state: Maker) => void;
windowSize: { width: number; height: number };
}
const MakerPage = ({
limits,
fetchLimits,
orders,
loadingLimits,
currency,
type,
setAppState,
windowHeight,
windowWidth,
fav,
maker,
setFav,
setMaker,
windowSize,
}: MakerPageProps): JSX.Element => {
const { t } = useTranslation();
const history = useHistory();
const [maker, setMaker] = useState<Maker>(defaultMaker);
const maxHeight = windowHeight ? windowHeight * 0.85 - 7 : 1000;
const maxHeight = windowSize.height * 0.85 - 7;
const [showMatches, setShowMatches] = useState<boolean>(false);
const matches = filterOrders({
orders,
baseFilter: { currency: currency == 0 ? 1 : currency, type },
baseFilter: { currency: fav.currency === 0 ? 1 : fav.currency, type: fav.type },
paymentMethods: maker.paymentMethods,
amountFilter: {
amount: maker.amount,
@ -61,10 +58,11 @@ const MakerPage = ({
</Grid>
<Grid item>
<BookTable
orders={matches.slice(0, matches.length > 4 ? 4 : matches.length)}
type={type}
currency={currency}
maxWidth={Math.min(windowWidth, 60)} // EM units
book={{
orders: matches.slice(0, matches.length > 4 ? 4 : matches.length),
loading: false,
}}
maxWidth={Math.min(windowSize.width, 60)} // EM units
maxHeight={Math.min(matches.length * 3.25 + 3.575, 16.575)} // EM units
defaultFullscreen={false}
showControls={false}
@ -82,13 +80,11 @@ const MakerPage = ({
<MakerForm
limits={limits}
fetchLimits={fetchLimits}
loadingLimits={loadingLimits}
pricingMethods={false}
setAppState={setAppState}
fav={fav}
setFav={setFav}
maker={maker}
setMaker={setMaker}
type={type}
currency={currency}
disableRequest={matches.length > 0 && !showMatches}
collapseAll={showMatches}
onSubmit={() => setShowMatches(matches.length > 0)}

5
frontend/src/components/OrderPage.js
View File

@ -525,10 +525,7 @@ class OrderPage extends Component {
<StoreTokenDialog
open={this.state.openStoreToken}
onClose={() => 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={() =>

168
frontend/src/components/UserGenPage.js
View File

@ -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';
@ -35,7 +34,7 @@ class UserGenPage extends Component {
this.state = {
openInfo: false,
tokenHasChanged: false,
token: '',
inputToken: '',
};
this.refCode = this.props.match.params.refCode;
@ -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,44 @@ class UserGenPage extends Component {
});
requestBody.then((body) =>
apiClient.post('/api/user/', body).then((data) => {
this.setState({
bit_entropy: data.token_bits_entropy,
shannon_entropy: data.token_shannon_entropy,
bad_request: data.bad_request,
found: data.found,
loadingRobot: 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 ?? 0,
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 ?? 0,
stealthInvoices: data.wants_stealth,
tgEnabled: data.tg_enabled,
tgBotName: data.tg_bot_name,
tgToken: data.tg_token,
bitsEntropy: data.token_bits_entropy,
shannonEntropy: data.token_shannon_entropy,
pub_key: data.public_key,
enc_priv_key: data.encrypted_private_key,
}) &
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 +130,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,
@ -172,11 +170,11 @@ class UserGenPage extends Component {
createJsonFile = () => {
return {
token: systemClient.getCookie('robot_token'),
token_shannon_entropy: this.state.shannon_entropy,
token_bit_entropy: this.state.bit_entropy,
public_key: systemClient.getCookie('pub_key').split('\\').join('\n'),
encrypted_private_key: systemClient.getCookie('enc_priv_key').split('\\').join('\n'),
token: this.props.robot.token,
token_shannon_entropy: this.props.robot.shannonEntropy,
token_bit_entropy: this.props.robot.bitsEntropy,
public_key: this.props.robot.pub_key,
encrypted_private_key: this.props.robot.enc_priv_key,
};
};
@ -195,12 +193,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 ? (
<div>
<Grid item xs={12} align='center'>
<Typography component='h5' variant='h5'>
<b>
{this.props.nickname && systemClient.getCookie('sessionid') ? (
{this.props.robot.nickname && systemClient.getCookie('sessionid') ? (
<div
style={{
display: 'flex',
@ -217,7 +215,7 @@ class UserGenPage extends Component {
width: 33 * fontSizeFactor,
}}
/>
<a>{this.props.nickname}</a>
<a>{this.props.robot.nickname}</a>
<BoltIcon
sx={{
color: '#fcba03',
@ -234,7 +232,7 @@ class UserGenPage extends Component {
</Grid>
<Grid item xs={12} align='center'>
<RobotAvatar
nickname={this.props.nickname}
nickname={this.props.robot.nickname}
smooth={true}
style={{ maxWidth: 203 * fontSizeFactor, maxHeight: 203 * fontSizeFactor }}
imageStyle={{
@ -245,7 +243,7 @@ class UserGenPage extends Component {
width: `${201 * fontSizeFactor}px`,
}}
tooltip={t('This is your trading avatar')}
tooltipPosition='up'
tooltipPosition='top'
/>
<br />
</Grid>
@ -271,7 +269,7 @@ class UserGenPage extends Component {
error={!!this.state.bad_request}
label={t('Store your token safely')}
required={true}
value={this.state.token}
value={this.state.inputToken}
variant='standard'
helperText={this.state.bad_request}
size='small'
@ -301,11 +299,14 @@ class UserGenPage extends Component {
<IconButton
color='primary'
disabled={
!this.props.avatarLoaded ||
!(systemClient.getCookie('robot_token') === this.state.token)
!this.props.robot.avatarLoaded ||
!(systemClient.getCookie('robot_token') === this.state.inputToken)
}
onClick={() =>
saveAsJson(this.props.nickname + '.json', this.createJsonFile())
saveAsJson(
this.props.robot.nickname + '.json',
this.createJsonFile(),
)
}
>
<DownloadIcon
@ -318,14 +319,14 @@ class UserGenPage extends Component {
<Grid item xs={6}>
<Tooltip disableHoverListener enterTouchDelay={0} title={t('Copied!')}>
<IconButton
color={this.props.copiedToken ? 'inherit' : 'primary'}
color={this.props.robot.copiedToken ? 'inherit' : 'primary'}
disabled={
!this.props.avatarLoaded ||
!(systemClient.getCookie('robot_token') === this.state.token)
!this.props.robot.avatarLoaded ||
!(systemClient.getCookie('robot_token') === this.state.inputToken)
}
onClick={() =>
systemClient.copyToClipboard(systemClient.getCookie('robot_token')) &
this.props.setAppState({ copiedToken: true })
this.props.setRobot({ ...this.props.robot, copiedToken: true })
}
>
<ContentCopy
@ -376,9 +377,9 @@ class UserGenPage extends Component {
<ButtonGroup variant='contained' aria-label='outlined primary button group'>
<Button
disabled={
this.state.loadingRobot !== false ||
!(this.props.token
? systemClient.getCookie('robot_token') === this.props.token
this.props.robot.loading ||
!(this.props.robot.token
? systemClient.getCookie('robot_token') === this.props.robot.token
: true)
}
color='primary'
@ -397,9 +398,9 @@ class UserGenPage extends Component {
/>
<Button
disabled={
this.state.loadingRobot !== false ||
!(this.props.token
? systemClient.getCookie('robot_token') === this.props.token
this.props.robot.loading ||
!(this.props.robot.token
? systemClient.getCookie('robot_token') === this.props.robot.token
: true)
}
color='secondary'
@ -411,11 +412,11 @@ class UserGenPage extends Component {
</ButtonGroup>
</Grid>
<Grid item xs={12} align='center' sx={{ width: 370 * fontSizeFactor }}>
<Grid item xs={12} align='center' sx={{ width: '26.43em' }}>
<Grid item>
<div style={{ height: 30 * fontSizeFactor }} />
<div style={{ height: '2.143em' }} />
</Grid>
<div style={{ width: 370 * fontSizeFactor, left: 30 * fontSizeFactor }}>
<div style={{ width: '26.43em', left: '2.143em' }}>
<Grid container align='center'>
<Grid item xs={0.8} />
<Grid item xs={7.5} align='right'>
@ -424,10 +425,7 @@ class UserGenPage extends Component {
</Typography>
</Grid>
<Grid item xs={2.5} align='left'>
<RoboSatsNoTextIcon
color='primary'
sx={{ height: 72 * fontSizeFactor, width: 72 * fontSizeFactor }}
/>
<RoboSatsNoTextIcon color='primary' sx={{ height: '3.143em', width: '3.143em' }} />
</Grid>
</Grid>
</div>

5
frontend/src/models/Order.model.ts → frontend/src/models/Book.model.ts
View File

@ -23,4 +23,9 @@ export interface Order {
maker_status: 'Active' | 'Seen recently' | 'Inactive';
}
export interface Book {
orders: Order[];
loading: boolean;
}
export default Order;

6
frontend/src/models/Favorites.model.ts Normal file
View File

@ -0,0 +1,6 @@
export interface Favorites {
type: number | null;
currency: number;
}
export default Favorites;

49
frontend/src/models/Info.model.ts Normal file
View File

@ -0,0 +1,49 @@
export interface Info {
num_public_buy_orders: number;
num_public_sell_orders: number;
book_liquidity: number;
active_robots_today: number;
last_day_nonkyc_btc_premium: number;
last_day_volume: number;
lifetime_volume: number;
lnd_version: string;
robosats_running_commit_hash: string;
alternative_site: string;
alternative_name: string;
node_alias: string;
node_id: string;
version: { major: number | null; minor: number | null; patch: number | null };
maker_fee: number;
taker_fee: number;
bond_size: number;
current_swap_fee_rate: number;
coordinatorVersion: string;
clientVersion: string;
openUpdateClient: boolean;
}
export const defaultInfo: Info = {
num_public_buy_orders: 0,
num_public_sell_orders: 0,
book_liquidity: 0,
active_robots_today: 0,
last_day_nonkyc_btc_premium: 0,
last_day_volume: 0,
lifetime_volume: 0,
lnd_version: 'v0.0.0-beta',
robosats_running_commit_hash: '000000000000000',
alternative_site: 'RoboSats6tkf3eva7x2voqso3a5wcorsnw34jveyxfqi2fu7oyheasid.onion',
alternative_name: 'RoboSats Mainnet',
node_alias: '🤖RoboSats⚡(RoboDevs)',
node_id: '033b58d7681fe5dd2fb21fd741996cda5449616f77317dd1156b80128d6a71b807',
version: { major: null, minor: null, patch: null },
maker_fee: 0,
taker_fee: 0,
bond_size: 0,
current_swap_fee_rate: 0,
coordinatorVersion: 'v?.?.?',
clientVersion: 'v?.?.?',
openUpdateClient: false,
};
export default Info;

2
frontend/src/models/Maker.model.ts
View File

@ -1,4 +1,5 @@
export interface Maker {
advancedOptions: boolean;
isExplicit: boolean;
amount: string;
paymentMethods: string[];
@ -18,6 +19,7 @@ export interface Maker {
}
export const defaultMaker: Maker = {
advancedOptions: false,
isExplicit: false,
amount: '',
paymentMethods: [],

49
frontend/src/models/Robot.model.ts Normal file
View File

@ -0,0 +1,49 @@
import { systemClient } from '../services/System';
export interface Robot {
nickname: string | null;
token: string | null;
pub_key: string | null;
enc_priv_key: string | null;
bitsEntropy: number | null;
shannonEntropy: number | null;
stealthInvoices: boolean;
activeOrderId: number | null;
lastOrderId: number | null;
earnedRewards: number;
referralCode: string;
tgEnabled: boolean;
tgBotName: string;
tgToken: string;
loading: boolean;
avatarLoaded: boolean;
copiedToken: boolean;
}
export const defaultRobot: Robot = {
nickname: null,
token: systemClient.getCookie('robot_token') ?? null,
pub_key:
systemClient.getCookie('pub_key') === undefined
? null
: systemClient.getCookie('pub_key').split('\\').join('\n'),
enc_priv_key:
systemClient.getCookie('enc_priv_key') === undefined
? null
: systemClient.getCookie('enc_priv_key').split('\\').join('\n'),
bitsEntropy: null,
shannonEntropy: null,
stealthInvoices: true,
activeOrderId: null,
lastOrderId: null,
earnedRewards: 0,
referralCode: '',
tgEnabled: false,
tgBotName: 'unknown',
tgToken: 'unknown',
loading: true,
avatarLoaded: false,
copiedToken: false,
};
export default Robot;

5
frontend/src/models/Settings.model.ts Normal file
View File

@ -0,0 +1,5 @@
export interface Settings {}
export const defaultSettings: Settings = {};
export default Settings;

11
frontend/src/models/index.ts
View File

@ -1,5 +1,14 @@
export type { LimitList } from './Limit.model';
export type { Limit } from './Limit.model';
export type { Maker } from './Maker.model';
export type { Order } from './Book.model';
export type { Book } from './Book.model';
export type { Robot } from './Robot.model';
export type { Info } from './Info.model';
export type { Settings } from './Settings.model';
export type { Favorites } from './Favorites.model';
export { defaultMaker } from './Maker.model';
export type { Order } from './Order.model';
export { defaultRobot } from './Robot.model';
export { defaultSettings } from './Settings.model';
export { defaultInfo } from './Info.model';

4
frontend/src/utils/checkVer.ts
View File

@ -11,8 +11,8 @@ export const checkVer: (
return { updateAvailable: null };
}
const semver = packageJson.version.split('.');
const updateAvailable = major > Number(semver[0]) || minor > Number(semver[1]);
const patchAvailable = !updateAvailable && patch > Number(semver[2]);
const updateAvailable: boolean = major > Number(semver[0]) || minor > Number(semver[1]);
const patchAvailable: boolean = !updateAvailable && patch > Number(semver[2]);
return {
updateAvailable,

32
frontend/src/utils/filterOrders.ts
View File

@ -1,9 +1,4 @@
import Order from '../models/Order.model';
interface BaseFilter {
currency: number;
type: number | null;
}
import { Order, Favorites } from '../models';
interface AmountFilter {
amount: string;
@ -14,12 +9,12 @@ interface AmountFilter {
interface FilterOrders {
orders: Order[];
baseFilter: BaseFilter;
baseFilter: Favorites;
amountFilter?: AmountFilter | null;
paymentMethods?: string[];
}
const filterByPayment = function (order: Order, paymentMethods: string[]) {
const filterByPayment = function (order: Order, paymentMethods: any[]) {
if (paymentMethods.length === 0) {
return true;
} else {
@ -32,17 +27,19 @@ const filterByPayment = function (order: Order, paymentMethods: string[]) {
};
const filterByAmount = function (order: Order, filter: AmountFilter) {
const filterMaxAmount = filter.amount != '' ? filter.amount : filter.maxAmount;
const filterMinAmount = filter.amount != '' ? filter.amount : filter.minAmount;
const orderMinAmount =
order.amount === '' || order.amount === null ? order.min_amount : order.amount;
const orderMaxAmount =
order.amount === '' || order.amount === null ? order.max_amount : order.amount;
const filterMaxAmount =
Number(filter.amount != '' ? filter.amount : filter.maxAmount) * (1 + filter.threshold);
const filterMinAmount =
Number(filter.amount != '' ? filter.amount : filter.minAmount) * (1 - filter.threshold);
return (
orderMaxAmount < filterMaxAmount * (1 + filter.threshold) &&
orderMinAmount > filterMinAmount * (1 - filter.threshold)
const orderMinAmount = Number(
order.amount === '' || order.amount === null ? order.min_amount : order.amount,
);
const orderMaxAmount = Number(
order.amount === '' || order.amount === null ? order.max_amount : order.amount,
);
return Math.max(filterMinAmount, orderMinAmount) <= Math.min(filterMaxAmount, orderMaxAmount);
};
const filterOrders = function ({
@ -60,7 +57,6 @@ const filterOrders = function ({
return typeChecks && currencyChecks && paymentMethodChecks && amountChecks;
});
return filteredOrders;
};

5
frontend/static/css/index.css
View File

@ -79,11 +79,6 @@ input[type='number'] {
-moz-appearance: textfield;
}
.bottomBar {
position: fixed;
bottom: 0;
}
.amboss {
fill: url(#SVGID_1_);
}