fix: Fee-offsetting diff should not be visible when disabled

Signed-off-by: Emre Bogazliyanlioglu <emre@wormholelabs.xyz>

src/views/v3/Bridge/AssetPicker/FeeOffset.test.tsx

@@ -8,6 +8,7 @@ import { amount as sdkAmount } from '@wormhole-foundation/sdk';
 
 import FeeOffset from './FeeOffset';
 import { dark } from 'theme';
+import config from 'config';
 
 const theme = createTheme({
   palette: dark as any,
@@ -26,6 +27,17 @@ vi.mock('hooks/useGetTokens', () => ({
   })),
 }));
 
+// Mock the config module
+vi.mock('config', () => ({
+  default: {
+    ui: {
+      experimental: {
+        feeOffsetting: true,
+      },
+    },
+  },
+}));
+
 const mockToken = {
   key: 'USDC',
   symbol: 'USDC',
@@ -109,4 +121,78 @@ describe('FeeOffset', () => {
     const infoIcon = screen.getByTestId('InfoOutlineIcon');
     expect(infoIcon).toBeInTheDocument();
   });
+
+  it('does not render when feeOffsetting is disabled in config', async () => {
+    const { calculateFeeOffset } = vi.mocked(await import('utils/fees'));
+    const { useGetTokens } = vi.mocked(await import('hooks/useGetTokens'));
+
+    const mockedConfig = vi.mocked(config);
+    mockedConfig.ui.experimental!.feeOffsetting = false;
+
+    const feeOffset = sdkAmount.fromBaseUnits(1000n, 6);
+    calculateFeeOffset.mockReturnValue(feeOffset);
+    useGetTokens.mockReturnValue({
+      sourceToken: mockToken,
+      destToken: undefined,
+    } as any);
+
+    const store = createMockStore(
+      sdkAmount.fromBaseUnits(100000n, 6),
+      'TestRoute',
+    );
+
+    render(<FeeOffset />, {
+      wrapper: AppWrapper(store),
+    });
+
+    expect(screen.queryByText(/\+.*USDC/)).not.toBeInTheDocument();
+
+    // Reset config for other tests
+    mockedConfig.ui.experimental!.feeOffsetting = true;
+  });
+
+  it('does not render when feeOffsetAmount is undefined', async () => {
+    const { calculateFeeOffset } = vi.mocked(await import('utils/fees'));
+    const { useGetTokens } = vi.mocked(await import('hooks/useGetTokens'));
+
+    calculateFeeOffset.mockReturnValue(undefined);
+    useGetTokens.mockReturnValue({
+      sourceToken: mockToken,
+      destToken: undefined,
+    } as any);
+
+    const store = createMockStore(
+      sdkAmount.fromBaseUnits(100000n, 6),
+      'TestRoute',
+    );
+
+    render(<FeeOffset />, {
+      wrapper: AppWrapper(store),
+    });
+
+    expect(screen.queryByText(/\+.*USDC/)).not.toBeInTheDocument();
+  });
+
+  it('does not render when feeOffsetAmount is zero', async () => {
+    const { calculateFeeOffset } = vi.mocked(await import('utils/fees'));
+    const { useGetTokens } = vi.mocked(await import('hooks/useGetTokens'));
+
+    const feeOffset = sdkAmount.fromBaseUnits(0n, 6); // Zero amount
+    calculateFeeOffset.mockReturnValue(feeOffset);
+    useGetTokens.mockReturnValue({
+      sourceToken: mockToken,
+      destToken: undefined,
+    } as any);
+
+    const store = createMockStore(
+      sdkAmount.fromBaseUnits(100000n, 6),
+      'TestRoute',
+    );
+
+    render(<FeeOffset />, {
+      wrapper: AppWrapper(store),
+    });
+
+    expect(screen.queryByText(/\+.*USDC/)).not.toBeInTheDocument();
+  });
 });

src/views/v3/Bridge/AssetPicker/FeeOffset.tsx

@@ -4,6 +4,7 @@ import { Box, Tooltip, Typography, useTheme } from '@mui/material';
 import InfoOutlineIcon from '@mui/icons-material/InfoOutline';
 import { amount as sdkAmount } from '@wormhole-foundation/sdk';
 
+import config from 'config';
 import type { RootState } from 'store';
 import { calculateFeeOffset } from 'utils/fees';
 import { useGetTokens } from 'hooks/useGetTokens';
@@ -28,7 +29,11 @@ function FeeOffset() {
   );
 
   const feeDisplay = useMemo(() => {
-    if (!feeOffsetAmount || sdkAmount.units(feeOffsetAmount) === 0n) {
+    if (
+      !config.ui?.experimental?.feeOffsetting ||
+      !feeOffsetAmount ||
+      sdkAmount.units(feeOffsetAmount) === 0n
+    ) {
       return null;
     }