diff --git a/frontend/src/components/PaymentMethods/StringAsIcons.tsx b/frontend/src/components/PaymentMethods/StringAsIcons.tsx
index d343e7d2..8b6b871c 100644
--- a/frontend/src/components/PaymentMethods/StringAsIcons.tsx
+++ b/frontend/src/components/PaymentMethods/StringAsIcons.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import PaymentIcon from './Icons';
import { Tooltip } from '@mui/material';
@@ -7,15 +7,22 @@ import { fiatMethods, swapMethods } from './MethodList';
const ns = [{ name: 'not specified', icon: 'notspecified' }];
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 parseText = () => {
+ const parsedText = useMemo(() => {
const rows = [];
- let custom_methods = props.text;
+ let custom_methods = text;
// Adds icons for each PaymentMethod that matches
methods.forEach((method, i) => {
- if (props.text.includes(method.name)) {
+ if (text.includes(method.name)) {
custom_methods = custom_methods.replace(method.name, '');
rows.push(