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

Small book optimizations (#462)

Browse Source
This commit is contained in:
Reckless_Satoshi 2023-04-28 10:02:29 +00:00 committed by GitHub
parent fc4f3e1593
commit c813da1b2e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 191 additions and 187 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

374
frontend/src/components/BookTable/index.tsx
View File

@ -1,4 +1,4 @@
import React, { useContext, useEffect, useMemo, useState } from 'react'; import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { import {
Box, Box,
@ -42,6 +42,18 @@ const ClickThroughDataGrid = styled(DataGrid)({
}, },
}); });
const premiumColor = function (baseColor: string, accentColor: string, point: number) {
const baseRGB = hexToRgb(baseColor);
const accentRGB = hexToRgb(accentColor);
const redDiff = accentRGB[0] - baseRGB[0];
const red = baseRGB[0] + redDiff * point;
const greenDiff = accentRGB[1] - baseRGB[1];
const green = baseRGB[1] + greenDiff * point;
const blueDiff = accentRGB[2] - baseRGB[2];
const blue = baseRGB[2] + blueDiff * point;
return `rgb(${Math.round(red)}, ${Math.round(green)}, ${Math.round(blue)}, ${0.7 + point * 0.3})`;
};
interface BookTableProps { interface BookTableProps {
orderList?: PublicOrder[]; orderList?: PublicOrder[];
maxWidth: number; maxWidth: number;
@ -106,71 +118,59 @@ const BookTable = ({
}); });
}, [book.loading, orders, defaultPageSize]); }, [book.loading, orders, defaultPageSize]);
const premiumColor = function (baseColor: string, accentColor: string, point: number) { const localeText = useMemo(() => {
const baseRGB = hexToRgb(baseColor); return {
const accentRGB = hexToRgb(accentColor); MuiTablePagination: { labelRowsPerPage: t('Orders per page:') },
const redDiff = accentRGB[0] - baseRGB[0]; noResultsOverlayLabel: t('No results found.'),
const red = baseRGB[0] + redDiff * point; errorOverlayDefaultLabel: t('An error occurred.'),
const greenDiff = accentRGB[1] - baseRGB[1]; toolbarColumns: t('Columns'),
const green = baseRGB[1] + greenDiff * point; toolbarColumnsLabel: t('Select columns'),
const blueDiff = accentRGB[2] - baseRGB[2]; columnsPanelTextFieldLabel: t('Find column'),
const blue = baseRGB[2] + blueDiff * point; columnsPanelTextFieldPlaceholder: t('Column title'),
return `rgb(${Math.round(red)}, ${Math.round(green)}, ${Math.round(blue)}, ${ columnsPanelDragIconLabel: t('Reorder column'),
0.7 + point * 0.3 columnsPanelShowAllButton: t('Show all'),
})`; columnsPanelHideAllButton: t('Hide all'),
}; filterPanelAddFilter: t('Add filter'),
filterPanelDeleteIconLabel: t('Delete'),
filterPanelLinkOperator: t('Logic operator'),
filterPanelOperators: t('Operator'),
filterPanelOperatorAnd: t('And'),
filterPanelOperatorOr: t('Or'),
filterPanelColumns: t('Columns'),
filterPanelInputLabel: t('Value'),
filterPanelInputPlaceholder: t('Filter value'),
filterOperatorContains: t('contains'),
filterOperatorEquals: t('equals'),
filterOperatorStartsWith: t('starts with'),
filterOperatorEndsWith: t('ends with'),
filterOperatorIs: t('is'),
filterOperatorNot: t('is not'),
filterOperatorAfter: t('is after'),
filterOperatorOnOrAfter: t('is on or after'),
filterOperatorBefore: t('is before'),
filterOperatorOnOrBefore: t('is on or before'),
filterOperatorIsEmpty: t('is empty'),
filterOperatorIsNotEmpty: t('is not empty'),
filterOperatorIsAnyOf: t('is any of'),
filterValueAny: t('any'),
filterValueTrue: t('true'),
filterValueFalse: t('false'),
columnMenuLabel: t('Menu'),
columnMenuShowColumns: t('Show columns'),
columnMenuManageColumns: t('Manage columns'),
columnMenuFilter: t('Filter'),
columnMenuHideColumn: t('Hide'),
columnMenuUnsort: t('Unsort'),
columnMenuSortAsc: t('Sort by ASC'),
columnMenuSortDesc: t('Sort by DESC'),
columnHeaderFiltersLabel: t('Show filters'),
columnHeaderSortIconLabel: t('Sort'),
booleanCellTrueLabel: t('yes'),
booleanCellFalseLabel: t('no'),
};
}, []);
const localeText = { const robotObj = useCallback((width: number) => {
MuiTablePagination: { labelRowsPerPage: t('Orders per page:') },
noResultsOverlayLabel: t('No results found.'),
errorOverlayDefaultLabel: t('An error occurred.'),
toolbarColumns: t('Columns'),
toolbarColumnsLabel: t('Select columns'),
columnsPanelTextFieldLabel: t('Find column'),
columnsPanelTextFieldPlaceholder: t('Column title'),
columnsPanelDragIconLabel: t('Reorder column'),
columnsPanelShowAllButton: t('Show all'),
columnsPanelHideAllButton: t('Hide all'),
filterPanelAddFilter: t('Add filter'),
filterPanelDeleteIconLabel: t('Delete'),
filterPanelLinkOperator: t('Logic operator'),
filterPanelOperators: t('Operator'),
filterPanelOperatorAnd: t('And'),
filterPanelOperatorOr: t('Or'),
filterPanelColumns: t('Columns'),
filterPanelInputLabel: t('Value'),
filterPanelInputPlaceholder: t('Filter value'),
filterOperatorContains: t('contains'),
filterOperatorEquals: t('equals'),
filterOperatorStartsWith: t('starts with'),
filterOperatorEndsWith: t('ends with'),
filterOperatorIs: t('is'),
filterOperatorNot: t('is not'),
filterOperatorAfter: t('is after'),
filterOperatorOnOrAfter: t('is on or after'),
filterOperatorBefore: t('is before'),
filterOperatorOnOrBefore: t('is on or before'),
filterOperatorIsEmpty: t('is empty'),
filterOperatorIsNotEmpty: t('is not empty'),
filterOperatorIsAnyOf: t('is any of'),
filterValueAny: t('any'),
filterValueTrue: t('true'),
filterValueFalse: t('false'),
columnMenuLabel: t('Menu'),
columnMenuShowColumns: t('Show columns'),
columnMenuManageColumns: t('Manage columns'),
columnMenuFilter: t('Filter'),
columnMenuHideColumn: t('Hide'),
columnMenuUnsort: t('Unsort'),
columnMenuSortAsc: t('Sort by ASC'),
columnMenuSortDesc: t('Sort by DESC'),
columnHeaderFiltersLabel: t('Show filters'),
columnHeaderSortIconLabel: t('Sort'),
booleanCellTrueLabel: t('yes'),
booleanCellFalseLabel: t('no'),
};
const robotObj = function (width: number) {
return { return {
field: 'maker_nick', field: 'maker_nick',
headerName: t('Robot'), headerName: t('Robot'),
@ -196,9 +196,9 @@ const BookTable = ({
); );
}, },
}; };
}; }, []);
const robotSmallObj = function (width: number) { const robotSmallObj = useCallback((width: number) => {
return { return {
field: 'maker_nick', field: 'maker_nick',
headerName: t('Robot'), headerName: t('Robot'),
@ -223,9 +223,9 @@ const BookTable = ({
); );
}, },
}; };
}; }, []);
const typeObj = function (width: number) { const typeObj = useCallback((width: number) => {
return { return {
field: 'type', field: 'type',
headerName: t('Is'), headerName: t('Is'),
@ -235,9 +235,9 @@ const BookTable = ({
? t(fav.mode === 'fiat' ? 'Seller' : 'Swapping Out') ? t(fav.mode === 'fiat' ? 'Seller' : 'Swapping Out')
: t(fav.mode === 'fiat' ? 'Buyer' : 'Swapping In'), : t(fav.mode === 'fiat' ? 'Buyer' : 'Swapping In'),
}; };
}; }, []);
const amountObj = function (width: number) { const amountObj = useCallback((width: number) => {
return { return {
field: 'amount', field: 'amount',
headerName: t('Amount'), headerName: t('Amount'),
@ -257,9 +257,9 @@ const BookTable = ({
); );
}, },
}; };
}; }, []);
const currencyObj = function (width: number) { const currencyObj = useCallback((width: number) => {
return { return {
field: 'currency', field: 'currency',
headerName: t('Currency'), headerName: t('Currency'),
@ -282,9 +282,9 @@ const BookTable = ({
); );
}, },
}; };
}; }, []);
const paymentObj = function (width: number) { const paymentObj = useCallback((width: number) => {
return { return {
field: 'payment_method', field: 'payment_method',
headerName: fav.mode === 'fiat' ? t('Payment Method') : t('Destination'), headerName: fav.mode === 'fiat' ? t('Payment Method') : t('Destination'),
@ -302,9 +302,9 @@ const BookTable = ({
); );
}, },
}; };
}; }, []);
const paymentSmallObj = function (width: number) { const paymentSmallObj = useCallback((width: number) => {
return { return {
field: 'payment_method', field: 'payment_method',
headerName: t('Pay'), headerName: t('Pay'),
@ -327,9 +327,9 @@ const BookTable = ({
); );
}, },
}; };
}; }, []);
const priceObj = function (width: number) { const priceObj = useCallback((width: number) => {
return { return {
field: 'price', field: 'price',
headerName: t('Price'), headerName: t('Price'),
@ -342,9 +342,9 @@ const BookTable = ({
); );
}, },
}; };
}; }, []);
const premiumObj = function (width: number) { const premiumObj = useCallback((width: number) => {
// coloring premium texts based on 4 params: // coloring premium texts based on 4 params:
// Hardcoded: a sell order at 0% is an outstanding premium // Hardcoded: a sell order at 0% is an outstanding premium
// Hardcoded: a buy order at 10% is an outstanding premium // Hardcoded: a buy order at 10% is an outstanding premium
@ -391,9 +391,9 @@ const BookTable = ({
); );
}, },
}; };
}; }, []);
const timerObj = function (width: number) { const timerObj = useCallback((width: number) => {
return { return {
field: 'escrow_duration', field: 'escrow_duration',
headerName: t('Timer'), headerName: t('Timer'),
@ -405,9 +405,9 @@ const BookTable = ({
return <div style={{ cursor: 'pointer' }}>{hours > 0 ? `${hours}h` : `${minutes}m`}</div>; return <div style={{ cursor: 'pointer' }}>{hours > 0 ? `${hours}h` : `${minutes}m`}</div>;
}, },
}; };
}; }, []);
const expiryObj = function (width: number) { const expiryObj = useCallback((width: number) => {
return { return {
field: 'expires_at', field: 'expires_at',
headerName: t('Expiry'), headerName: t('Expiry'),
@ -448,9 +448,9 @@ const BookTable = ({
); );
}, },
}; };
}; }, []);
const satoshisObj = function (width: number) { const satoshisObj = useCallback((width: number) => {
return { return {
field: 'satoshis_now', field: 'satoshis_now',
headerName: t('Sats now'), headerName: t('Sats now'),
@ -466,9 +466,9 @@ const BookTable = ({
); );
}, },
}; };
}; }, []);
const idObj = function (width: number) { const idObj = useCallback((width: number) => {
return { return {
field: 'id', field: 'id',
headerName: 'Order ID', headerName: 'Order ID',
@ -483,9 +483,9 @@ const BookTable = ({
); );
}, },
}; };
}; }, []);
const bondObj = function (width: number) { const bondObj = useCallback((width: number) => {
return { return {
field: 'bond_size', field: 'bond_size',
headerName: t('Bond'), headerName: t('Bond'),
@ -495,114 +495,116 @@ const BookTable = ({
return <div style={{ cursor: 'pointer' }}>{`${Number(params.row.bond_size)}%`}</div>; return <div style={{ cursor: 'pointer' }}>{`${Number(params.row.bond_size)}%`}</div>;
}, },
}; };
}; }, []);
const columnSpecs = { const columnSpecs = useMemo(() => {
amount: { return {
priority: 1, amount: {
order: 4, priority: 1,
normal: { order: 4,
width: fav.mode === 'swap' ? 9.5 : 6.5, normal: {
object: amountObj, width: fav.mode === 'swap' ? 9.5 : 6.5,
object: amountObj,
},
}, },
}, currency: {
currency: { priority: 2,
priority: 2, order: 5,
order: 5, normal: {
normal: { width: fav.mode === 'swap' ? 0 : 5.9,
width: fav.mode === 'swap' ? 0 : 5.9, object: currencyObj,
object: currencyObj, },
}, },
}, premium: {
premium: { priority: 3,
priority: 3, order: 11,
order: 11, normal: {
normal: { width: 6,
width: 6, object: premiumObj,
object: premiumObj, },
}, },
}, payment_method: {
payment_method: { priority: 4,
priority: 4, order: 6,
order: 6, normal: {
normal: { width: 12.85,
width: 12.85, object: paymentObj,
object: paymentObj, },
small: {
width: 4.4,
object: paymentSmallObj,
},
}, },
small: { maker_nick: {
width: 4.4, priority: 5,
object: paymentSmallObj, order: 1,
normal: {
width: 17.14,
object: robotObj,
},
small: {
width: 4.1,
object: robotSmallObj,
},
}, },
}, price: {
maker_nick: { priority: 6,
priority: 5, order: 10,
order: 1, normal: {
normal: { width: 10,
width: 17.14, object: priceObj,
object: robotObj, },
}, },
small: { expires_at: {
width: 4.1, priority: 7,
object: robotSmallObj, order: 7,
normal: {
width: 5,
object: expiryObj,
},
}, },
}, escrow_duration: {
price: { priority: 8,
priority: 6, order: 8,
order: 10, normal: {
normal: { width: 4.8,
width: 10, object: timerObj,
object: priceObj, },
}, },
}, satoshis_now: {
expires_at: { priority: 9,
priority: 7, order: 9,
order: 7, normal: {
normal: { width: 6,
width: 5, object: satoshisObj,
object: expiryObj, },
}, },
}, type: {
escrow_duration: { priority: 10,
priority: 8, order: 2,
order: 8, normal: {
normal: { width: fav.mode === 'swap' ? 7 : 4.3,
width: 4.8, object: typeObj,
object: timerObj, },
}, },
}, bond_size: {
satoshis_now: { priority: 11,
priority: 9, order: 10,
order: 9, normal: {
normal: { width: 4.2,
width: 6, object: bondObj,
object: satoshisObj, },
}, },
}, id: {
type: { priority: 12,
priority: 10, order: 12,
order: 2, normal: {
normal: { width: 4.8,
width: fav.mode === 'swap' ? 7 : 4.3, object: idObj,
object: typeObj, },
}, },
}, };
bond_size: { }, []);
priority: 11,
order: 10,
normal: {
width: 4.2,
object: bondObj,
},
},
id: {
priority: 12,
order: 12,
normal: {
width: 4.8,
object: idObj,
},
},
};
const filteredColumns = function (maxWidth: number) { const filteredColumns = function (maxWidth: number) {
const useSmall = maxWidth < 70; const useSmall = maxWidth < 70;

4
frontend/src/contexts/AppContext.ts
View File

@ -212,7 +212,9 @@ export const useAppStore = () => {
}; };
const fetchBook = function () { const fetchBook = function () {
setBook({ ...book, loading: true }); setBook((book) => {
return { ...book, loading: true };
});
apiClient.get(baseUrl, '/api/book/').then((data: any) => apiClient.get(baseUrl, '/api/book/').then((data: any) =>
setBook({ setBook({
loading: false, loading: false,