Fix conversion bug, improve UX, add readme logo

README.md

@@ -1,5 +1,7 @@
 # Monex
 
+![Monex Logo](./logo.png)
+
 A modern forex application that displays daily CNB (Czech National Bank) exchange rates, built with React, TypeScript and Vite.
 
 Deployed: https://monex-five.vercel.app/

e2e-playwright/tests/currency-converter.spec.ts

@@ -12,14 +12,14 @@ test.describe('Currency Converter', () => {
           currency: 'US Dollar',
           amount: 1,
           code: 'USD',
-          rate: 0.043,
+          rate: 20.727,
         },
         {
           country: 'European Union',
           currency: 'Euro',
           amount: 1,
           code: 'EUR',
-          rate: 0.039,
+          rate: 24.34,
         },
       ],
     };
@@ -51,16 +51,16 @@ test.describe('Currency Converter', () => {
 
     await expect(page.getByText('Conversion Result')).toBeVisible();
 
-    await expect(page.getByText('4.30 USD', { exact: true })).toBeVisible();
+    await expect(page.getByText('4.82 USD', { exact: true })).toBeVisible();
 
-    await expect(page.getByText('100.00 CZK = 4.30 USD')).toBeVisible();
+    await expect(page.getByText('100.00 CZK = 4.82 USD')).toBeVisible();
 
-    await expect(page.getByText('Rate: 1 CZK = 0.043 USD')).toBeVisible();
+    await expect(page.getByText('Rate: 1 USD = 20.7270 CZK')).toBeVisible();
 
     await amountInput.fill('250');
     await expect(amountInput).toHaveValue('250');
 
-    await expect(page.getByText('10.75 USD', { exact: true })).toBeVisible();
-    await expect(page.getByText('250.00 CZK = 10.75 USD')).toBeVisible();
+    await expect(page.getByText('12.06 USD', { exact: true })).toBeVisible();
+    await expect(page.getByText('250.00 CZK = 12.06 USD')).toBeVisible();
   });
 });

src/components/ConversionResult.tsx

@@ -61,7 +61,8 @@ export const ConversionResult: React.FC<ConversionResultProps> = ({
             {Number(userAmount).toFixed(2)} CZK = {convertedAmount}{' '}
             {selectedCurrency}
             <div>
-              Rate: {baseAmount} CZK = {exchangeRate} {selectedCurrency}
+              Rate: {baseAmount} {selectedCurrency} ={' '}
+              {exchangeRate ? exchangeRate.toFixed(4) : 'N/A'} CZK
             </div>
           </ResultDetails>
         </ResultSection>

src/components/CurrencyConverter.tsx

@@ -60,7 +60,7 @@ export const CurrencyConverter: React.FC<CurrencyConverterProps> = ({
       return null;
     }
 
-    const convertedAmount = ((numericAmount * rate) / amount).toFixed(2);
+    const convertedAmount = ((numericAmount / rate) * amount).toFixed(2);
 
     return {
       rate,

src/components/__tests__/CurrencyConverter.test.tsx

@@ -27,6 +27,13 @@ const mockRates: ForexRate[] = [
     code: 'GBP',
     rate: 29.496,
   },
+  {
+    country: 'Indonesia',
+    currency: 'rupiah',
+    amount: 1000,
+    code: 'IDR',
+    rate: 1.244,
+  },
 ];
 
 describe('CurrencyConverter', () => {
@@ -63,7 +70,7 @@ describe('CurrencyConverter', () => {
     await userEvent.click(usdButton);
 
     await waitFor(() => {
-      expect(screen.getByText('2326.50 USD')).toBeInTheDocument();
+      expect(screen.getByText('4.30 USD')).toBeInTheDocument();
     });
   });
 
@@ -77,7 +84,27 @@ describe('CurrencyConverter', () => {
     await userEvent.click(eurButton);
 
     await waitFor(() => {
-      expect(screen.getByText('8.58 EUR')).toBeInTheDocument();
+      expect(screen.getByText('0.01 EUR')).toBeInTheDocument();
+    });
+  });
+
+  it('converts CZK to Indonesian Rupiah (IDR) correctly', async () => {
+    render(<CurrencyConverter rates={mockRates} />);
+
+    const amountInput = screen.getByLabelText('Amount in CZK to convert');
+    const idrButton = screen.getByLabelText('Select rupiah (IDR)');
+
+    await userEvent.type(amountInput, '4000');
+    await userEvent.click(idrButton);
+
+    await waitFor(() => {
+      expect(screen.getByText('3215434.08 IDR')).toBeInTheDocument();
+      expect(
+        screen.getByText('4000.00 CZK = 3215434.08 IDR'),
+      ).toBeInTheDocument();
+      expect(
+        screen.getByText('Rate: 1000 IDR = 1.2440 CZK'),
+      ).toBeInTheDocument();
     });
   });
 });