feat: prevent pasting of Snap name during Snap removal (#23993)

## **Description**

The confirmation to remove a snap that has accounts present in the
keyring, requires that the user type the snap name to confirm removal.
However, the user can just copy and paste the name of the snap being
removed. This PR disables the ability to paste the name.

## **Related issues**

Fixes:
[21445](#21445)

## **Manual testing steps**

1. Create a new snap account
2. Go to settings and click on snap
3. Click on the snap and then remove snap
4. Click continue on the modal
5. Try to copy and paste the snap name in the input.
6. See that the input remains empty.

## **Screenshots/Recordings**

### **Before**


### **After**

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

---------

Co-authored-by: Daniel Rocha <[email protected]>

ui/components/app/snaps/keyring-snap-removal-warning/keyring-snap-removal-warning.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { waitFor, fireEvent } from '@testing-library/react';
 import configureMockStore from 'redux-mock-store';
 import { Snap } from '@metamask/snaps-utils';
+import userEvent from '@testing-library/user-event';
 import mockStore from '../../../../../test/data/mock-state.json';
 import { renderWithProvider } from '../../../../../test/jest';
 import { toChecksumHexAddress } from '../../../../../shared/modules/hexstring-utils';
@@ -103,6 +104,26 @@ describe('Keyring Snap Remove Warning', () => {
     });
   });
 
+  it('prevents pasting of the snap name to remove the snap', async () => {
+    const { getByText, getByTestId } = renderWithProvider(
+      <KeyringSnapRemovalWarning {...defaultArgs} />,
+      store,
+    );
+
+    const nextButton = getByText('Continue');
+
+    fireEvent.click(nextButton);
+    const confirmationInput = getByTestId('remove-snap-confirmation-input');
+
+    confirmationInput.focus();
+
+    await userEvent.paste(mockSnap.manifest?.proposedName);
+
+    await waitFor(() => {
+      expect(confirmationInput).toHaveValue('');
+    });
+  });
+
   it('opens block explorer for account', async () => {
     global.platform = { openTab: jest.fn(), closeCurrentWindow: jest.fn() };
     const { getByText, getAllByTestId } = renderWithProvider(

ui/components/app/snaps/keyring-snap-removal-warning/keyring-snap-removal-warning.tsx

@@ -152,6 +152,9 @@ export default function KeyringRemovalSnapWarning({
                       validateConfirmationInput(e.target.value),
                     );
                   }}
+                  onPaste={(e: React.ClipboardEvent<HTMLInputElement>) => {
+                    e.preventDefault();
+                  }}
                   error={error}
                   inputProps={{
                     'data-testid': 'remove-snap-confirmation-input',