feat: allow removal of down to 2 tokens

Author: infiniteflower

app/components/UI/Bridge/Views/BatchSellReview/BatchSellReview.test.tsx

@@ -9,7 +9,7 @@ import Routes from '../../../../../constants/navigation/Routes';
 
 const mockNavigate = jest.fn();
 const mockDispatch = jest.fn();
-const mockSelectedTokens: BridgeToken[] = [
+const defaultSelectedTokens: BridgeToken[] = [
   {
     address: '0x1111111111111111111111111111111111111111',
     chainId: '0x1' as Hex,
@@ -25,6 +25,13 @@ const mockSelectedTokens: BridgeToken[] = [
     balance: '154.297',
   },
 ];
+const thirdSelectedToken: BridgeToken = {
+  address: '0x3333333333333333333333333333333333333333',
+  chainId: '0x1' as Hex,
+  decimals: 18,
+  symbol: 'LINK',
+  balance: '42.123',
+};
 const usdcToken: BridgeToken = {
   address: '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
   chainId: '0x1' as Hex,
@@ -39,6 +46,7 @@ const musdToken: BridgeToken = {
   symbol: 'MUSD',
   image: 'musd-image-url',
 };
+let mockSelectedTokens: BridgeToken[] = defaultSelectedTokens;
 let mockSelectedDestinationToken: BridgeToken | undefined = usdcToken;
 let mockDestinationTokens: BridgeToken[] = [usdcToken];
 let mockBatchSellSlippages: Partial<Record<CaipAssetType, string | undefined>> =
@@ -61,6 +69,10 @@ jest.mock('../../../../../core/redux/slices/bridge', () => ({
     type: 'bridge/setBatchSellDestToken',
     payload: token,
   })),
+  setBatchSellSourceTokens: jest.fn((tokens: BridgeToken[]) => ({
+    type: 'bridge/setBatchSellSourceTokens',
+    payload: tokens,
+  })),
   setBatchSellTokenSlippages: jest.fn(
     (slippage: Partial<Record<CaipAssetType, string | undefined>>) => ({
       type: 'bridge/setBatchSellTokenSlippages',
@@ -80,11 +92,15 @@ jest.mock('./BatchSellReviewTokenRow', () => {
 
   return {
     BatchSellReviewTokenRow: ({
+      isRemoveTokenDisabled,
+      onRemovePress,
       onSlippagePress,
       percent,
       token,
       tokenKey,
     }: {
+      isRemoveTokenDisabled?: boolean;
+      onRemovePress: (token: BridgeToken) => void;
       onSlippagePress: (token: BridgeToken) => void;
       percent: number;
       token: BridgeToken;
@@ -99,13 +115,22 @@ jest.mock('./BatchSellReviewTokenRow', () => {
           onPress: () => onSlippagePress(token),
           testID: `batch-sell-review-customize-button-${tokenKey}`,
         }),
+        ReactActual.createElement(Pressable, {
+          accessibilityState: { disabled: Boolean(isRemoveTokenDisabled) },
+          disabled: isRemoveTokenDisabled,
+          onPress: isRemoveTokenDisabled
+            ? undefined
+            : () => onRemovePress(token),
+          testID: `batch-sell-review-remove-button-${tokenKey}`,
+        }),
       ),
   };
 });
 
 describe('BatchSellReview', () => {
   beforeEach(() => {
     jest.clearAllMocks();
+    mockSelectedTokens = defaultSelectedTokens;
     mockSelectedDestinationToken = usdcToken;
     mockDestinationTokens = [usdcToken];
     mockBatchSellSlippages = {};
@@ -208,4 +233,37 @@ describe('BatchSellReview', () => {
       payload: usdcToken,
     });
   });
+
+  it('removes a token when more than two source tokens are selected', () => {
+    mockSelectedTokens = [...defaultSelectedTokens, thirdSelectedToken];
+    const { getByTestId } = render(<BatchSellReview />);
+
+    mockDispatch.mockClear();
+    fireEvent.press(
+      getByTestId(
+        `${BatchSellReviewSelectorsIDs.REMOVE_BUTTON}-0x1:0x2222222222222222222222222222222222222222`,
+      ),
+    );
+
+    expect(mockDispatch).toHaveBeenCalledWith({
+      type: 'bridge/setBatchSellSourceTokens',
+      payload: [defaultSelectedTokens[0], thirdSelectedToken],
+    });
+  });
+
+  it('disables token removal when two source tokens are selected', () => {
+    const { getByTestId } = render(<BatchSellReview />);
+    const removeButton = getByTestId(
+      `${BatchSellReviewSelectorsIDs.REMOVE_BUTTON}-0x1:0x2222222222222222222222222222222222222222`,
+    );
+
+    mockDispatch.mockClear();
+    fireEvent.press(removeButton);
+
+    expect(removeButton.props.accessibilityState.disabled).toBe(true);
+    expect(mockDispatch).not.toHaveBeenCalledWith({
+      type: 'bridge/setBatchSellSourceTokens',
+      payload: expect.any(Array),
+    });
+  });
 });

app/components/UI/Bridge/Views/BatchSellReview/BatchSellReview.tsx

@@ -34,6 +34,7 @@ import {
   selectBatchSellDestStablecoins,
   selectBatchSellSourceTokens,
   setBatchSellDestToken,
+  setBatchSellSourceTokens,
   setBatchSellTokenSlippages,
 } from '../../../../../core/redux/slices/bridge';
 import { RootState } from '../../../../../reducers';
@@ -101,6 +102,7 @@ export function BatchSellReview() {
   );
   const selectedDestinationToken = useSelector(selectBatchSellDestToken);
   const batchSellSlippages = useSelector(selectBatchSellSlippages);
+  const isRemoveTokenDisabled = selectedTokens.length <= 2;
   const [percentsByTokenKey, setPercentsByTokenKey] = useState<
     Record<string, number>
   >({});
@@ -182,6 +184,20 @@ export function BatchSellReview() {
     [navigation, selectedDestinationToken?.chainId],
   );
 
+  const handleRemoveToken = useCallback(
+    (tokenToRemove: BridgeToken) => {
+      if (isRemoveTokenDisabled) return;
+
+      const tokenKeyToRemove = getTokenKey(tokenToRemove);
+      const remainingTokens = selectedTokens.filter(
+        (token) => getTokenKey(token) !== tokenKeyToRemove,
+      );
+
+      dispatch(setBatchSellSourceTokens(remainingTokens));
+    },
+    [dispatch, isRemoveTokenDisabled, selectedTokens],
+  );
+
   return (
     <SafeAreaView
       style={tw.style('flex-1 bg-default')}
@@ -274,6 +290,8 @@ export function BatchSellReview() {
                 percent={percentsByTokenKey[tokenKey] ?? DEFAULT_PERCENT}
                 onPercentChange={handlePercentChange}
                 onSlippagePress={handleSlippagePress}
+                onRemovePress={handleRemoveToken}
+                isRemoveTokenDisabled={isRemoveTokenDisabled}
               />
             );
           })}

app/components/UI/Bridge/Views/BatchSellReview/BatchSellReviewTokenRow.test.tsx

@@ -40,16 +40,24 @@ jest.mock('@metamask/design-system-react-native', () => {
     BoxFlexDirection: { Row: 'row' },
     ButtonIcon: ({
       accessibilityLabel,
+      isDisabled,
       onPress,
       testID,
     }: {
       accessibilityLabel?: string;
+      isDisabled?: boolean;
       onPress?: () => void;
       testID?: string;
     }) =>
       ReactActual.createElement(
         RNPressable,
-        { accessibilityLabel, onPress, testID },
+        {
+          accessibilityLabel,
+          accessibilityState: { disabled: Boolean(isDisabled) },
+          disabled: isDisabled,
+          onPress: isDisabled ? undefined : onPress,
+          testID,
+        },
         null,
       ),
     ButtonIconSize: { Md: 'md' },
@@ -186,4 +194,25 @@ describe('BatchSellReviewTokenRow', () => {
     expect(mockOnSlippagePress).toHaveBeenCalledWith(mockToken);
     expect(mockOnRemovePress).toHaveBeenCalledWith(mockToken);
   });
+
+  it('disables remove presses', () => {
+    const { getByTestId } = render(
+      <BatchSellReviewTokenRow
+        token={mockToken}
+        tokenKey={mockTokenKey}
+        percent={100}
+        onPercentChange={mockOnPercentChange}
+        onRemovePress={mockOnRemovePress}
+        isRemoveTokenDisabled
+      />,
+    );
+    const removeButton = getByTestId(
+      `${BatchSellReviewSelectorsIDs.REMOVE_BUTTON}-${mockTokenKey}`,
+    );
+
+    fireEvent.press(removeButton);
+
+    expect(removeButton.props.accessibilityState.disabled).toBe(true);
+    expect(mockOnRemovePress).not.toHaveBeenCalled();
+  });
 });

app/components/UI/Bridge/Views/BatchSellReview/BatchSellReviewTokenRow.tsx

@@ -30,6 +30,7 @@ interface BatchSellReviewTokenRowProps {
   onPercentChange: (tokenKey: string, percent: number) => void;
   onSlippagePress?: (token: BridgeToken) => void;
   onRemovePress?: (token: BridgeToken) => void;
+  isRemoveTokenDisabled?: boolean;
 }
 
 function getTokenBalanceText(token: BridgeToken, percent: number) {
@@ -47,6 +48,7 @@ export function BatchSellReviewTokenRow({
   onPercentChange,
   onSlippagePress,
   onRemovePress,
+  isRemoveTokenDisabled = false,
 }: BatchSellReviewTokenRowProps) {
   const tw = useTailwind();
   const balanceText = useMemo(
@@ -61,6 +63,12 @@ export function BatchSellReviewTokenRow({
     [onPercentChange, tokenKey],
   );
 
+  const handleRemovePress = useCallback(() => {
+    if (isRemoveTokenDisabled) return;
+
+    onRemovePress?.(token);
+  }, [isRemoveTokenDisabled, onRemovePress, token]);
+
   return (
     <Box
       testID={`${BatchSellReviewSelectorsIDs.TOKEN_ROW}-${tokenKey}`}
@@ -114,7 +122,8 @@ export function BatchSellReviewTokenRow({
             accessibilityLabel={strings('bridge.batch_sell_remove_token', {
               tokenSymbol: token.symbol,
             })}
-            onPress={() => onRemovePress?.(token)}
+            isDisabled={isRemoveTokenDisabled}
+            onPress={handleRemovePress}
             testID={`${BatchSellReviewSelectorsIDs.REMOVE_BUTTON}-${tokenKey}`}
           />
         </Box>