frontend: fix broken balance tests (white spaces)

Author: thisconnect

frontends/web/src/components/balance/balance.test.tsx

@@ -102,8 +102,9 @@ describe('components/balance/balance', () => {
       }
     };
     const { getByTestId } = render(<Balance balance={MOCK_BALANCE} />);
-    expect(getByTestId('availableBalance').textContent).toBe('0.005BTC512USD');
-    expect(getByTestId('incomingBalance').textContent).toBe('+0.003 BTC / 512 USD');
+    expect(getByTestId('availableBalance').textContent).toBe('0.005 BTC 512 USD');
+    expect(getByTestId('incomingBalance').textContent).toContain('+0.003 BTC');
+    expect(getByTestId('incomingBalance').textContent).toContain('512 USD');
   });
 });
 
@@ -176,8 +177,9 @@ describe('components/balance/balance', () => {
       }
     };
     const { getByTestId } = render(<Balance balance={MOCK_BALANCE} />);
-    expect(getByTestId('availableBalance').textContent).toBe('0.005BTC512USD');
-    expect(getByTestId('incomingBalance').textContent).toBe('+0.003 BTC / 1,511.99 USD');
+    expect(getByTestId('availableBalance').textContent).toBe('0.005 BTC 512 USD');
+    expect(getByTestId('incomingBalance').textContent).toContain('+0.003 BTC');
+    expect(getByTestId('incomingBalance').textContent).toContain('1,511.99 USD');
   });
   afterEach(() => {
     vi.restoreAllMocks();

frontends/web/src/components/balance/balance.tsx

@@ -49,6 +49,7 @@ export const Balance = ({
           enableRotateUnit={!noRotateFiat}
           unitClassName={style.unit}
         />
+        {' '}
         <AmountWithUnit
           amount={balance.available}
           enableRotateUnit={!noRotateFiat}
@@ -64,6 +65,7 @@ export const Balance = ({
             className={style.incomingBalance}
             data-testid="incomingBalance">
             +<AmountWithUnit amount={balance.incoming} />
+            {' '}
             <span className={style.incomingConversion}>
               /&nbsp;
               <AmountWithUnit