Mirror/robosats
1
0
Fork 0
mirror of https://github.com/RoboSats/robosats.git synced 2025-01-18 12:11:35 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix adjust swap button book visibility

Browse Source
This commit is contained in:
Reckless_Satoshi 2023-04-03 07:19:30 -07:00
parent d88b391d42
commit 9c5f4d4f46
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
1 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/src/components/BookTable/BookControl.tsx
View File

@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import React, { useEffect, useMemo, useState } from 'react';
import { useTranslation } from 'react-i18next';
import {
Typography,
@ -36,16 +36,18 @@ const BookControl = ({
paymentMethod,
setPaymentMethods,
}: BookControlProps): JSX.Element => {
const { t } = useTranslation();
const { t, i18n } = useTranslation();
const theme = useTheme();
const typeZeroText = fav.mode === 'fiat' ? 'Buy' : 'Swap In';
const typeOneText = fav.mode === 'fiat' ? 'Sell' : 'Swap Out';
const smallestToolbarWidth = (typeZeroText.length + typeOneText.length) * 0.7 + 12;
const mediumToolbarWidth = smallestToolbarWidth + 12;
const verboseToolbarWidth =
mediumToolbarWidth + (t('and use').length + t('pay with').length) * 0.6;
const [typeZeroText, typeOneText, small, medium, large] = useMemo(() => {
const typeZeroText = fav.mode === 'fiat' ? t('Buy') : t('Swap In');
const typeOneText = fav.mode === 'fiat' ? t('Sell') : t('Swap Out');
const small =
(typeZeroText.length + typeOneText.length) * 0.7 + (fav.mode == 'fiat' ? 16 : 7.5);
const medium = small + 13;
const large = medium + (t('and use').length + t('pay with').length) * 0.6 + 5;
return [typeZeroText, typeOneText, small, medium, large];
}, [i18n.language, fav.mode]);
const handleCurrencyChange = function (e) {
const currency = e.target.value;
@ -72,7 +74,7 @@ const BookControl = ({
spacing={0.5}
sx={{ height: '3.4em', padding: '0.2em' }}
>
{width > verboseToolbarWidth ? (
{width > large ? (
<Grid item sx={{ position: 'relative', top: '0.5em' }}>
<Typography variant='caption' color='text.secondary'>
{t('I want to')}
@ -80,7 +82,7 @@ const BookControl = ({
</Grid>
) : null}
{width > smallestToolbarWidth + 5 ? (
{width > small ? (
<Grid item>
<Tooltip
placement='bottom'
@ -139,7 +141,7 @@ const BookControl = ({
</ToggleButtonGroup>
</Grid>
{width > verboseToolbarWidth && fav.mode === 'fiat' ? (
{width > large && fav.mode === 'fiat' ? (
<Grid item sx={{ position: 'relative', top: '0.5em' }}>
<Typography variant='caption' color='text.secondary'>
{t('and use')}
@ -192,7 +194,7 @@ const BookControl = ({
</Grid>
) : null}
{width > verboseToolbarWidth ? (
{width > large ? (
<Grid item sx={{ position: 'relative', top: '0.5em' }}>
<Typography variant='caption' color='text.secondary'>
{fav.currency == 1000 ? t(fav.type === 0 ? 'to' : 'from') : t('pay with')}
@ -200,7 +202,7 @@ const BookControl = ({
</Grid>
) : null}
{width > mediumToolbarWidth ? (
{width > medium ? (
<Grid item>
<AutocompletePayments
sx={{
@ -228,7 +230,7 @@ const BookControl = ({
</Grid>
) : null}
{width > smallestToolbarWidth && width < mediumToolbarWidth ? (
{width > small && width <= medium ? (
<Grid item>
<Select
sx={{