Mirror/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2025-02-07 13:59:06 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add Maker and Book page to new main.tsx

Browse Source
This commit is contained in:
Reckless_Satoshi 2022-10-18 04:01:53 -07:00
parent 037d46ceef
commit 1e257d1924
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
12 changed files with 296 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

@ -18,7 +18,7 @@ import {
} from '@mui/material'; } from '@mui/material';
import { DataGrid, GridPagination } from '@mui/x-data-grid'; import { DataGrid, GridPagination } from '@mui/x-data-grid';
import currencyDict from '../../../static/assets/currencies.json'; import currencyDict from '../../../static/assets/currencies.json';
import { Book, Order } from '../../models'; import { Book, Favorites } from '../../models';
import filterOrders from '../../utils/filterOrders'; import filterOrders from '../../utils/filterOrders';
import BookControl from './BookControl'; import BookControl from './BookControl';
@ -35,8 +35,7 @@ import { Fullscreen, FullscreenExit, Refresh } from '@mui/icons-material';
interface Props { interface Props {
clickRefresh?: () => void; clickRefresh?: () => void;
book: Book; book: Book;
type: number; fav?: Favorites;
currency: number;
maxWidth: number; maxWidth: number;
maxHeight: number; maxHeight: number;
fullWidth?: number; fullWidth?: number;
@ -44,16 +43,15 @@ interface Props {
defaultFullscreen: boolean; defaultFullscreen: boolean;
showControls?: boolean; showControls?: boolean;
showFooter?: boolean; showFooter?: boolean;
onCurrencyChange?: () => void; onCurrencyChange?: (e: any) => void;
onTypeChange?: () => void; onTypeChange?: (mouseEvent: any, val: number) => void;
noResultsOverlay?: JSX.Element; noResultsOverlay?: () => JSX.Element;
} }
const BookTable = ({ const BookTable = ({
clickRefresh, clickRefresh,
book, book,
type, fav,
currency,
maxWidth, maxWidth,
maxHeight, maxHeight,
fullWidth, fullWidth,
@ -662,8 +660,8 @@ const BookTable = ({
return ( return (
<BookControl <BookControl
width={width} width={width}
type={type} type={fav.type}
currency={currency} currency={fav.currency}
onCurrencyChange={onCurrencyChange} onCurrencyChange={onCurrencyChange}
onTypeChange={onTypeChange} onTypeChange={onTypeChange}
paymentMethod={paymentMethods} paymentMethod={paymentMethods}
@ -699,7 +697,7 @@ const BookTable = ({
showControls showControls
? filterOrders({ ? filterOrders({
orders: book.orders, orders: book.orders,
baseFilter: { currency, type }, baseFilter: fav,
paymentMethods, paymentMethods,
}) })
: book.orders : book.orders
@ -728,7 +726,7 @@ const BookTable = ({
showControls showControls
? filterOrders({ ? filterOrders({
orders: book.orders, orders: book.orders,
baseFilter: { currency, type }, baseFilter: fav,
paymentMethods, paymentMethods,
}) })
: book.orders : book.orders

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

@ -28,15 +28,13 @@ import currencyDict from '../../../../static/assets/currencies.json';
import PaymentText from '../../PaymentText'; import PaymentText from '../../PaymentText';
import getNivoScheme from '../NivoScheme'; import getNivoScheme from '../NivoScheme';
import median from '../../../utils/match'; import median from '../../../utils/match';
import { apiClient } from '../../../services/api/index';
import statusBadgeColor from '../../../utils/statusBadgeColor'; import statusBadgeColor from '../../../utils/statusBadgeColor';
interface DepthChartProps { interface DepthChartProps {
orders: Order[]; orders: Order[];
lastDayPremium: number | undefined; lastDayPremium: number | undefined;
currency: number; currency: number;
setAppState: (state: object) => void; limitList: LimitList;
limits: LimitList;
maxWidth: number; maxWidth: number;
maxHeight: number; maxHeight: number;
} }
@ -45,8 +43,7 @@ const DepthChart: React.FC<DepthChartProps> = ({
orders, orders,
lastDayPremium, lastDayPremium,
currency, currency,
setAppState, limitList,
limits,
maxWidth, maxWidth,
maxHeight, maxHeight,
}) => { }) => {
@ -58,37 +55,25 @@ const DepthChart: React.FC<DepthChartProps> = ({
const [rangeSteps, setRangeSteps] = useState<number>(8); const [rangeSteps, setRangeSteps] = useState<number>(8);
const [xRange, setXRange] = useState<number>(8); const [xRange, setXRange] = useState<number>(8);
const [xType, setXType] = useState<string>('premium'); const [xType, setXType] = useState<string>('premium');
const [currencyCode, setCurrencyCode] = useState<number>(1);
const [center, setCenter] = useState<number>(); const [center, setCenter] = useState<number>();
const height = maxHeight < 20 ? 20 : maxHeight; const height = maxHeight < 20 ? 20 : maxHeight;
const width = maxWidth < 20 ? 20 : maxWidth > 72.8 ? 72.8 : maxWidth; const width = maxWidth < 20 ? 20 : maxWidth > 72.8 ? 72.8 : maxWidth;
useEffect(() => { useEffect(() => {
if (Object.keys(limits).length === 0) { if (Object.keys(limitList).length > 0) {
apiClient.get('/api/limits/').then((data) => {
setAppState({ limits: data });
});
}
}, []);
useEffect(() => {
setCurrencyCode(currency === 0 ? 1 : currency);
}, [currency]);
useEffect(() => {
if (Object.keys(limits).length > 0) {
const enriched = orders.map((order) => { const enriched = orders.map((order) => {
// We need to transform all currencies to the same base (ex. USD), we don't have the exchange rate // We need to transform all currencies to the same base (ex. USD), we don't have the exchange rate
// for EUR -> USD, but we know the rate of both to BTC, so we get advantage of it and apply a // for EUR -> USD, but we know the rate of both to BTC, so we get advantage of it and apply a
// simple rule of three // simple rule of three
order.base_amount = order.base_amount =
(order.price * limits[currencyCode].price) / limits[order.currency].price; (order.price * limitList[currency === 0 ? 1 : currency].price) /
limitList[order.currency].price;
return order; return order;
}); });
setEnrichedOrders(enriched); setEnrichedOrders(enriched);
} }
}, [limits, orders, currencyCode]); }, [limitList, orders, currency]);
useEffect(() => { useEffect(() => {
if (enrichedOrders.length > 0) { if (enrichedOrders.length > 0) {
@ -113,7 +98,7 @@ const DepthChart: React.FC<DepthChartProps> = ({
setXRange(8); setXRange(8);
setRangeSteps(0.5); setRangeSteps(0.5);
} }
}, [enrichedOrders, xType, lastDayPremium, currencyCode]); }, [enrichedOrders, xType, lastDayPremium, currency]);
const generateSeries: () => void = () => { const generateSeries: () => void = () => {
const sortedOrders: Order[] = const sortedOrders: Order[] =
@ -338,7 +323,7 @@ const DepthChart: React.FC<DepthChartProps> = ({
<Grid item> <Grid item>
<Box justifyContent='center'> <Box justifyContent='center'>
{xType === 'base_amount' {xType === 'base_amount'
? `${center} ${currencyDict[currencyCode]}` ? `${center} ${currencyDict[currency === 0 ? 1 : currency]}`
: `${center}%`} : `${center}%`}
</Box> </Box>
</Grid> </Grid>

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

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

102
frontend/src/components/Main.tsx
View File

@ -10,41 +10,49 @@ import BottomBar from './BottomBar';
import { apiClient } from '../services/api'; import { apiClient } from '../services/api';
import { Book, LimitList } from '../models'; import {
Book,
interface Limits { LimitList,
list: LimitList; Maker,
loading: boolean; Robot,
} Info,
Settings,
Favorites,
defaultMaker,
defaultRobot,
defaultInfo,
defaultSettings,
} from '../models';
const Main = (): JSX.Element => { const Main = (): JSX.Element => {
const theme = useTheme(); const theme = useTheme();
const history = useHistory(); const history = useHistory();
const Router = window.NativeRobosats ? HashRouter : BrowserRouter; const Router = window.NativeRobosats ? HashRouter : BrowserRouter;
const basename = window.NativeRobosats ? window.location.pathname : ''; const basename = window.NativeRobosats ? window.location.pathname : '';
const [windowSize, setWindowSize] = useState<number[]>(); // EM values
// All app data structured // All app data structured
const [book, setBook] = useState<Book>({ orders: [], loading: true }); const [book, setBook] = useState<Book>({ orders: [], loading: true });
const [limits, setLimits] = useState<Limits>({ list: [], loading: true }); const [limits, setLimits] = useState<{ list: LimitList; loading: boolean }>({
const [robot, setRobot] = useState(); list: [],
const [maker, setMaker] = useState(); loading: true,
const [info, setInfo] = useState(); });
const [favorites, setFavorites] = useState(); const [robot, setRobot] = useState<Robot>(defaultRobot);
const [settings, setSettings] = useState(); 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);
// constructor(props) { console.log(info);
// super(props); const initialWindowSize = {
// this.state = { width: window.innerWidth / theme.typography.fontSize,
// type: null, height: window.innerHeight / theme.typography.fontSize,
// currency: 0, }; // EM values
// lastDayPremium: 0, const [windowSize, setWindowSize] = useState<{ width: number; height: number }>(
// }; initialWindowSize,
// } );
useEffect(() => { useEffect(() => {
if (typeof window !== undefined) { if (typeof window !== undefined) {
onResize();
window.addEventListener('resize', onResize); window.addEventListener('resize', onResize);
} }
fetchBook(); fetchBook();
@ -57,10 +65,10 @@ const Main = (): JSX.Element => {
}, []); }, []);
const onResize = function () { const onResize = function () {
setWindowSize([ setWindowSize({
window.innerWidth / theme.typography.fontSize, width: window.innerWidth / theme.typography.fontSize,
window.innerHeight / theme.typography.fontSize, height: window.innerHeight / theme.typography.fontSize,
]); });
}; };
const fetchBook = function () { const fetchBook = function () {
@ -76,7 +84,7 @@ const Main = (): JSX.Element => {
const fetchLimits = () => { const fetchLimits = () => {
setLimits({ ...limits, loading: true }); setLimits({ ...limits, loading: true });
const data = apiClient.get('/api/limits/').then((data) => { const data = apiClient.get('/api/limits/').then((data) => {
setLimits({ limits: data, loading: false }); setLimits({ list: data, loading: false });
return data; return data;
}); });
return data; return data;
@ -86,6 +94,7 @@ const Main = (): JSX.Element => {
<Router basename={basename}> <Router basename={basename}>
<div className='appCenter'> <div className='appCenter'>
<Switch> <Switch>
{/*
<Route <Route
exact exact
path='/' path='/'
@ -108,33 +117,40 @@ const Main = (): JSX.Element => {
setAppState={this.setAppState} setAppState={this.setAppState}
/> />
)} )}
/> /> */}
<Route <Route
path='/make' path='/make'
render={() => ( render={() => (
<MakerPage <MakerPage
orders={book.orders} orders={book.orders}
limits={limits}
fetchLimits={fetchLimits} fetchLimits={fetchLimits}
maker={maker} maker={maker}
setMaker={setMaker} setMaker={setMaker}
fav={fav}
setFav={setFav}
windowSize={windowSize}
/> />
)} )}
/> />
<Route <Route
path='/book' path='/book'
render={(props) => ( render={() => (
<BookPage <BookPage
{...props}
{...this.state}
{...this.props}
book={book} book={book}
fetchBook={this.fetchBook} fetchBook={fetchBook}
fetchLimits={this.fetchLimits} limits={limits}
setAppState={this.setAppState} fetchLimits={fetchLimits}
fav={fav}
setFav={setFav}
maker={maker}
setMaker={setMaker}
lastDayPremium={info.last_day_nonkyc_btc_premium}
windowSize={windowSize}
/> />
)} )}
/> />
<Route {/* <Route
path='/order/:orderId' path='/order/:orderId'
render={(props) => ( render={(props) => (
<OrderPage <OrderPage
@ -145,22 +161,18 @@ const Main = (): JSX.Element => {
/> />
)} )}
/> />
*/}
</Switch> </Switch>
</div> </div>
<div {/* <div
className='bottomBar' className='bottomBar'
style={{ style={{
height: '2.857em', height: '2.857em',
width: `${(windowSize[0] / 16) * 14}em`, width: `${(windowSize.width / 16) * 14}em`,
}} }}
> >
<BottomBar <BottomBar redirectTo={(location) => history.push(location)} info={info} />
redirectTo={(location) => history.push(location)} </div> */}
{...this.state}
{...this.props}
setAppState={this.setAppState}
/>
</div>
</Router> </Router>
); );
}; };

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

@ -24,7 +24,7 @@ import {
IconButton, IconButton,
} from '@mui/material'; } 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 { LocalizationProvider, TimePicker } from '@mui/x-date-pickers';
import DateFnsUtils from '@date-io/date-fns'; import DateFnsUtils from '@date-io/date-fns';
@ -44,12 +44,11 @@ import { LoadingButton } from '@mui/lab';
interface MakerFormProps { interface MakerFormProps {
limits: { list: LimitList; loading: boolean }; limits: { list: LimitList; loading: boolean };
fetchLimits: () => LimitList; fetchLimits: () => void;
pricingMethods: boolean; pricingMethods: boolean;
maker: Maker; maker: Maker;
type: number; fav: Favorites;
currency: number; setFav: (state: Favorites) => void;
setAppState: (state: object) => void;
setMaker: (state: Maker) => void; setMaker: (state: Maker) => void;
disableRequest?: boolean; disableRequest?: boolean;
collapseAll?: boolean; collapseAll?: boolean;
@ -62,9 +61,8 @@ const MakerForm = ({
limits, limits,
fetchLimits, fetchLimits,
pricingMethods, pricingMethods,
currency, fav,
type, setFav,
setAppState,
maker, maker,
setMaker, setMaker,
disableRequest = false, disableRequest = false,
@ -91,26 +89,26 @@ const MakerForm = ({
const amountSafeThresholds = [1.03, 0.98]; const amountSafeThresholds = [1.03, 0.98];
useEffect(() => { useEffect(() => {
setCurrencyCode(currencyDict[currency == 0 ? 1 : currency]); setCurrencyCode(currencyDict[fav.currency == 0 ? 1 : fav.currency]);
if (Object.keys(limits.list).length === 0) { if (Object.keys(limits.list).length === 0) {
fetchLimits().then((data) => { fetchLimits().then((data) => {
updateAmountLimits(data, currency, maker.premium); updateAmountLimits(data, fav.currency, maker.premium);
updateCurrentPrice(data, currency, maker.premium); updateCurrentPrice(data, fav.currency, maker.premium);
updateSatoshisLimits(data); updateSatoshisLimits(data);
}); });
} else { } else {
updateAmountLimits(limits.list, currency, maker.premium); updateAmountLimits(limits.list, fav.currency, maker.premium);
updateCurrentPrice(limits.list, currency, maker.premium); updateCurrentPrice(limits.list, fav.currency, maker.premium);
updateSatoshisLimits(limits.list); updateSatoshisLimits(limits.list);
fetchLimits(); fetchLimits();
} }
}, []); }, []);
const updateAmountLimits = function (limits: LimitList, currency: number, premium: number) { const updateAmountLimits = function (limitList: LimitList, currency: number, premium: number) {
const index = currency === 0 ? 1 : currency; const index = currency == 0 ? 1 : currency;
let minAmountLimit: number = limits[index].min_amount * (1 + premium / 100); let minAmountLimit: number = limitList[index].min_amount * (1 + premium / 100);
let maxAmountLimit: number = limits[index].max_amount * (1 + premium / 100); let maxAmountLimit: number = limitList[index].max_amount * (1 + premium / 100);
// apply thresholds to ensure good request // apply thresholds to ensure good request
minAmountLimit = minAmountLimit * amountSafeThresholds[0]; minAmountLimit = minAmountLimit * amountSafeThresholds[0];
@ -118,19 +116,19 @@ const MakerForm = ({
setAmountLimits([minAmountLimit, maxAmountLimit]); setAmountLimits([minAmountLimit, maxAmountLimit]);
}; };
const updateSatoshisLimits = function (limits: LimitList) { const updateSatoshisLimits = function (limitList: LimitList) {
const minAmount: number = limits[1000].min_amount * 100000000; const minAmount: number = limitList[1000].min_amount * 100000000;
const maxAmount: number = limits[1000].max_amount * 100000000; const maxAmount: number = limitList[1000].max_amount * 100000000;
setSatoshisLimits([minAmount, maxAmount]); setSatoshisLimits([minAmount, maxAmount]);
}; };
const updateCurrentPrice = function (limits: LimitList, currency: number, premium: number) { const updateCurrentPrice = function (limitsList: LimitList, currency: number, premium: number) {
const index = currency === 0 ? 1 : currency; const index = currency == 0 ? 1 : currency;
let price = '...'; let price = '...';
if (maker.isExplicit && maker.amount > 0 && maker.satoshis > 0) { if (maker.isExplicit && maker.amount > 0 && maker.satoshis > 0) {
price = maker.amount / (maker.satoshis / 100000000); price = maker.amount / (maker.satoshis / 100000000);
} else if (!maker.is_explicit) { } else if (!maker.is_explicit) {
price = limits.list[index].price * (1 + premium / 100); price = limitsList[index].price * (1 + premium / 100);
} }
setCurrentPrice(parseFloat(Number(price).toPrecision(5))); setCurrentPrice(parseFloat(Number(price).toPrecision(5)));
}; };
@ -138,9 +136,9 @@ const MakerForm = ({
const handleCurrencyChange = function (newCurrency: number) { const handleCurrencyChange = function (newCurrency: number) {
const currencyCode: string = currencyDict[newCurrency]; const currencyCode: string = currencyDict[newCurrency];
setCurrencyCode(currencyCode); setCurrencyCode(currencyCode);
setAppState({ setFav({
...fav,
currency: newCurrency, currency: newCurrency,
bookCurrencyCode: currencyCode,
}); });
updateAmountLimits(limits.list, newCurrency, maker.premium); updateAmountLimits(limits.list, newCurrency, maker.premium);
updateCurrentPrice(limits.list, newCurrency, maker.premium); updateCurrentPrice(limits.list, newCurrency, maker.premium);
@ -195,8 +193,8 @@ const MakerForm = ({
badPremiumText = t('Must be more than {{min}}%', { min }); badPremiumText = t('Must be more than {{min}}%', { min });
premium = -99.99; premium = -99.99;
} }
updateCurrentPrice(limits.list, currency, premium); updateCurrentPrice(limits.list, fav.currency, premium);
updateAmountLimits(limits.list, currency, premium); updateAmountLimits(limits.list, fav.currency, premium);
setMaker({ setMaker({
...maker, ...maker,
premium, premium,
@ -244,8 +242,8 @@ const MakerForm = ({
if (!disableRequest) { if (!disableRequest) {
setSubmittingRequest(true); setSubmittingRequest(true);
const body = { const body = {
type: type == 0 ? 1 : 0, type: fav.type == 0 ? 1 : 0,
currency: currency == 0 ? 1 : currency, currency: fav.currency == 0 ? 1 : fav.currency,
amount: advancedOptions ? null : maker.amount, amount: advancedOptions ? null : maker.amount,
has_range: advancedOptions, has_range: advancedOptions,
min_amount: advancedOptions ? maker.minAmount : null, min_amount: advancedOptions ? maker.minAmount : null,
@ -325,7 +323,7 @@ const MakerForm = ({
}; };
const resetRange = function () { const resetRange = function () {
const index = currency === 0 ? 1 : currency; const index = fav.currency === 0 ? 1 : fav.currency;
const minAmount = maker.amount const minAmount = maker.amount
? parseFloat((maker.amount / 2).toPrecision(2)) ? parseFloat((maker.amount / 2).toPrecision(2))
: parseFloat(Number(limits.list[index].max_amount * 0.25).toPrecision(2)); : parseFloat(Number(limits.list[index].max_amount * 0.25).toPrecision(2));
@ -376,11 +374,11 @@ const MakerForm = ({
const disableSubmit = function () { const disableSubmit = function () {
return ( return (
type == null || fav.type == null ||
(maker.amount != '' && (maker.amount != '' &&
!advancedOptions && !advancedOptions &&
(maker.amount < amountLimits[0] || maker.amount > amountLimits[1])) || (maker.amount < amountLimits[0] || maker.amount > amountLimits[1])) ||
(maker.amount == null && (!advancedOptions || loadingLimits)) || (maker.amount == null && (!advancedOptions || limits.loading)) ||
(advancedOptions && (minAmountError() || maxAmountError())) || (advancedOptions && (minAmountError() || maxAmountError())) ||
(maker.amount <= 0 && !advancedOptions) || (maker.amount <= 0 && !advancedOptions) ||
(maker.isExplicit && (maker.badSatoshisText != '' || maker.satoshis == '')) || (maker.isExplicit && (maker.badSatoshisText != '' || maker.satoshis == '')) ||
@ -389,7 +387,7 @@ const MakerForm = ({
}; };
const clearMaker = function () { const clearMaker = function () {
setAppState({ type: null }); setFav({ ...fav, type: null });
setMaker(defaultMaker); setMaker(defaultMaker);
}; };
@ -401,7 +399,11 @@ const MakerForm = ({
align='center' align='center'
color={disableSubmit() ? 'text.secondary' : 'text.primary'} color={disableSubmit() ? 'text.secondary' : 'text.primary'}
> >
{type == null ? t('Order for ') : type == 1 ? t('Buy order for ') : t('Sell order for ')} {fav.type == null
? t('Order for ')
: fav.type == 1
? t('Buy order for ')
: t('Sell order for ')}
{advancedOptions && maker.minAmount != '' {advancedOptions && maker.minAmount != ''
? pn(maker.minAmount) + '-' + pn(maker.maxAmount) ? pn(maker.minAmount) + '-' + pn(maker.maxAmount)
: pn(maker.amount)} : pn(maker.amount)}
@ -434,12 +436,12 @@ const MakerForm = ({
return ( return (
<Box> <Box>
<ConfirmationDialogs /> <ConfirmationDialogs />
<Collapse in={limits.loading}> <Collapse in={limits.list.length == 0}>
<div style={{ display: limits.loading ? '' : 'none' }}> <div style={{ display: limits.list.length == 0 ? '' : 'none' }}>
<LinearProgress /> <LinearProgress />
</div> </div>
</Collapse> </Collapse>
<Collapse in={!(limits.loading || collapseAll)}> <Collapse in={!(limits.list.length == 0 || collapseAll)}>
<Grid container justifyContent='space-between' spacing={0} sx={{ maxHeight: '1em' }}> <Grid container justifyContent='space-between' spacing={0} sx={{ maxHeight: '1em' }}>
<Grid item> <Grid item>
<IconButton <IconButton
@ -475,7 +477,7 @@ const MakerForm = ({
> >
<Switch <Switch
size='small' size='small'
disabled={limits.loading} disabled={limits.list.length == 0}
checked={advancedOptions} checked={advancedOptions}
onChange={handleClickAdvanced} onChange={handleClickAdvanced}
/> />
@ -499,14 +501,15 @@ const MakerForm = ({
size={advancedOptions ? 'small' : 'large'} size={advancedOptions ? 'small' : 'large'}
variant='contained' variant='contained'
onClick={() => onClick={() =>
setAppState({ setFav({
...fav,
type: 1, type: 1,
}) })
} }
disableElevation={type == 1} disableElevation={fav.type == 1}
sx={{ sx={{
backgroundColor: type == 1 ? 'primary.main' : 'background.paper', backgroundColor: fav.type == 1 ? 'primary.main' : 'background.paper',
color: type == 1 ? 'background.paper' : 'text.secondary', color: fav.type == 1 ? 'background.paper' : 'text.secondary',
':hover': { ':hover': {
color: 'background.paper', color: 'background.paper',
}, },
@ -518,15 +521,16 @@ const MakerForm = ({
size={advancedOptions ? 'small' : 'large'} size={advancedOptions ? 'small' : 'large'}
variant='contained' variant='contained'
onClick={() => onClick={() =>
setAppState({ setFav({
...fav,
type: 0, type: 0,
}) })
} }
disableElevation={type == 0} disableElevation={fav.type == 0}
color='secondary' color='secondary'
sx={{ sx={{
backgroundColor: type == 0 ? 'secondary.main' : 'background.paper', backgroundColor: fav.type == 0 ? 'secondary.main' : 'background.paper',
color: type == 0 ? 'background.secondary' : 'text.secondary', color: fav.type == 0 ? 'background.secondary' : 'text.secondary',
':hover': { ':hover': {
color: 'background.paper', color: 'background.paper',
}, },
@ -544,7 +548,7 @@ const MakerForm = ({
<AmountRange <AmountRange
minAmount={maker.minAmount} minAmount={maker.minAmount}
handleRangeAmountChange={handleRangeAmountChange} handleRangeAmountChange={handleRangeAmountChange}
currency={currency} currency={fav.currency}
currencyCode={currencyCode} currencyCode={currencyCode}
handleCurrencyChange={handleCurrencyChange} handleCurrencyChange={handleCurrencyChange}
amountLimits={amountLimits} amountLimits={amountLimits}
@ -610,7 +614,7 @@ const MakerForm = ({
inputProps={{ inputProps={{
style: { textAlign: 'center' }, style: { textAlign: 'center' },
}} }}
value={currency == 0 ? 1 : currency} value={fav.currency == 0 ? 1 : fav.currency}
onChange={(e) => handleCurrencyChange(e.target.value)} onChange={(e) => handleCurrencyChange(e.target.value)}
> >
{Object.entries(currencyDict).map(([key, value]) => ( {Object.entries(currencyDict).map(([key, value]) => (
@ -632,10 +636,10 @@ const MakerForm = ({
<AutocompletePayments <AutocompletePayments
onAutocompleteChange={handlePaymentMethodChange} onAutocompleteChange={handlePaymentMethodChange}
// listBoxProps={{ sx: { width: '15.3em', maxHeight: '20em' } }} // listBoxProps={{ sx: { width: '15.3em', maxHeight: '20em' } }}
optionsType={currency == 1000 ? 'swap' : 'fiat'} optionsType={fav.currency == 1000 ? 'swap' : 'fiat'}
error={maker.badPaymentMethod} error={maker.badPaymentMethod}
helperText={maker.badPaymentMethod ? t('Must be shorter than 65 characters') : ''} 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( tooltipTitle={t(
'Enter your preferred fiat payment methods. Fast methods are highly recommended.', 'Enter your preferred fiat payment methods. Fast methods are highly recommended.',
)} )}
@ -941,7 +945,7 @@ const MakerForm = ({
</Typography> </Typography>
</Grid> </Grid>
<Collapse in={!limits.loading}> <Collapse in={!(limits.list.length == 0)}>
<Tooltip <Tooltip
placement='top' placement='top'
enterTouchDelay={0} enterTouchDelay={0}

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

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

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;

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

@ -0,0 +1,75 @@
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;
// Other keys that do not belong here. TODO on NavBar PR.
coordinatorVersion: string;
clientVersion: string;
profileShown: boolean;
openStatsForNerds: boolean;
openCommuniy: boolean;
openExchangeSummary: boolean;
openClaimRewards: boolean;
openUpdateClient: boolean;
openProfile: boolean;
showRewards: boolean;
rewardInvoice: string | null;
badInvoice: boolean;
showRewardsSpinner: boolean;
withdrawn: 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,
// Other keys that do not belong here. TODO on NavBar PR.
coordinatorVersion: 'v?.?.?',
clientVersion: 'v?.?.?',
profileShown: false,
openStatsForNerds: false,
openCommuniy: false,
openExchangeSummary: false,
openClaimRewards: false,
openUpdateClient: false,
openProfile: false,
showRewards: false,
rewardInvoice: null,
badInvoice: false,
showRewardsSpinner: false,
withdrawn: false,
};
export default Info;

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;

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

@ -1,8 +1,14 @@
export type { LimitList } from './Limit.model'; export type { LimitList } from './Limit.model';
export type { Limit } from './Limit.model'; export type { Limit } from './Limit.model';
export type { Maker } from './Maker.model'; export type { Maker } from './Maker.model';
export { defaultMaker } from './Maker.model'; export type { Order } from './Book.model';
export type { Order } from './Order.model'; export type { Book } from './Book.model';
export type { Book } from './Order.model';
export type { Robot } from './Robot.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 { defaultRobot } from './Robot.model'; export { defaultRobot } from './Robot.model';
export { defaultSettings } from './Settings.model';
export { defaultInfo } from './Info.model';

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

@ -1,9 +1,4 @@
import Order from '../models/Order.model'; import { Order, Favorites } from '../models';
interface BaseFilter {
currency: number;
type: number | null;
}
interface AmountFilter { interface AmountFilter {
amount: string; amount: string;
@ -14,7 +9,7 @@ interface AmountFilter {
interface FilterOrders { interface FilterOrders {
orders: Order[]; orders: Order[];
baseFilter: BaseFilter; baseFilter: Favorites;
amountFilter?: AmountFilter | null; amountFilter?: AmountFilter | null;
paymentMethods?: string[]; paymentMethods?: string[];
} }