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

Improve payment method strings to icons performance

Browse Source
This commit is contained in:
Reckless_Satoshi 2023-04-09 12:44:02 -07:00
parent e783dea305
commit 719c41705d
No known key found for this signature in database
GPG Key ID: 9C4585B561315571
2 changed files with 24 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/src/components/PaymentMethods/StringAsIcons.tsx
View File

@ -1,4 +1,4 @@
import React from 'react'; import React, { useMemo } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import PaymentIcon from './Icons'; import PaymentIcon from './Icons';
import { Tooltip } from '@mui/material'; import { Tooltip } from '@mui/material';
@ -7,15 +7,22 @@ import { fiatMethods, swapMethods } from './MethodList';
const ns = [{ name: 'not specified', icon: 'notspecified' }]; const ns = [{ name: 'not specified', icon: 'notspecified' }];
const methods = ns.concat(swapMethods).concat(fiatMethods); const methods = ns.concat(swapMethods).concat(fiatMethods);
const StringAsIcons: React.FC = (props) => { interface Props {
othersText: string;
verbose: boolean;
size: number;
text: string;
}
const StringAsIcons: React.FC = ({ othersText, verbose, size, text }: Props) => {
const { t } = useTranslation(); const { t } = useTranslation();
const parseText = () => { const parsedText = useMemo(() => {
const rows = []; const rows = [];
let custom_methods = props.text; let custom_methods = text;
// Adds icons for each PaymentMethod that matches // Adds icons for each PaymentMethod that matches
methods.forEach((method, i) => { methods.forEach((method, i) => {
if (props.text.includes(method.name)) { if (text.includes(method.name)) {
custom_methods = custom_methods.replace(method.name, ''); custom_methods = custom_methods.replace(method.name, '');
rows.push( rows.push(
<Tooltip <Tooltip
@ -27,11 +34,11 @@ const StringAsIcons: React.FC = (props) => {
<div <div
style={{ style={{
display: 'inline-block', display: 'inline-block',
width: props.size + 2, width: size + 2,
height: props.size, height: size,
}} }}
> >
<PaymentIcon width={props.size} height={props.size} icon={method.icon} /> <PaymentIcon width={size} height={size} icon={method.icon} />
</div> </div>
</Tooltip>, </Tooltip>,
); );
@ -52,24 +59,24 @@ const StringAsIcons: React.FC = (props) => {
key={'pushed'} key={'pushed'}
placement='top' placement='top'
enterTouchDelay={0} enterTouchDelay={0}
title={props.verbose ? props.othersText : props.othersText + ': ' + custom_methods} title={verbose ? othersText : othersText + ': ' + custom_methods}
> >
<div <div
style={{ style={{
position: 'relative', position: 'relative',
display: 'inline-block', display: 'inline-block',
width: props.size + 2, width: size + 2,
maxHeight: props.size, maxHeight: size,
top: '-1px', top: '-1px',
}} }}
> >
<PaymentIcon width={props.size * 1.1} height={props.size * 1.1} icon={'custom'} /> <PaymentIcon width={size * 1.1} height={size * 1.1} icon={'custom'} />
</div> </div>
</Tooltip>, </Tooltip>,
); );
} }
if (props.verbose) { if (verbose) {
return ( return (
<> <>
{rows}{' '} {rows}{' '}
@ -82,10 +89,10 @@ const StringAsIcons: React.FC = (props) => {
} else { } else {
return rows; return rows;
} }
}; }, []);
return ( return (
<div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>{parseText()}</div> <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}>{parsedText}</div>
); );
}; };

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

@ -335,11 +335,9 @@ export const AppContextProvider = ({
useEffect(() => { useEffect(() => {
if (open.stats || open.coordinator || info.coordinatorVersion == 'v?.?.?') { if (open.stats || open.coordinator || info.coordinatorVersion == 'v?.?.?') {
if (window.NativeRobosats === undefined) {
fetchInfo(); fetchInfo();
} }
} }, [open.stats, open.coordinator, open.exchange]);
}, [open.stats, open.coordinator]);
useEffect(() => { useEffect(() => {
// Sets Setting network from coordinator API param if accessing via web // Sets Setting network from coordinator API param if accessing via web