feat: Add clear functionality to SRP import error banner

Author: PatrykLucka

ui/components/multichain/multi-srp/import-srp/import-srp.test.tsx

@@ -153,6 +153,41 @@ describe('ImportSRP', () => {
     expect(mockClearClipboard).toHaveBeenCalled();
   });
 
+  it('clears the SRP input fields and error message when Clear button is clicked', async () => {
+    const onActionComplete = jest.fn();
+    const render = renderWithProvider(
+      <ImportSrp onActionComplete={onActionComplete} />,
+      store,
+    );
+    const { getByText, queryByTestId, getByTestId } = render;
+
+    // Input an invalid SRP to trigger error
+    const invalidSRP = VALID_SECRET_RECOVERY_PHRASE.replace('input', 'inptu');
+    pasteSrpIntoFirstInput(render, invalidSRP);
+
+    // Verify error message is shown
+    const bannerAlert = await waitFor(() => getByTestId('bannerAlert'));
+    expect(bannerAlert).toBeInTheDocument();
+
+    // Click Clear button
+    const clearButton = getByText('Clear');
+    fireEvent.click(clearButton);
+
+    // Verify error message is cleared
+    expect(queryByTestId('bannerAlert')).not.toBeInTheDocument();
+
+    // Verify all input fields are cleared
+    for (let i = 0; i < 12; i++) {
+      const input = getByTestId(`import-srp__srp-word-${i}`).querySelector(
+        'input',
+      );
+      expect(input).toHaveValue('');
+    }
+
+    // Verify Import wallet button is disabled
+    expect(getByText('Import wallet')).not.toBeEnabled();
+  });
+
   it('logs an error and not call onActionComplete on import failure', async () => {
     (actions.importMnemonicToVault as jest.Mock).mockImplementation(() =>
       jest.fn().mockRejectedValue(new Error('error')),

ui/components/multichain/multi-srp/import-srp/import-srp.tsx

@@ -265,6 +265,12 @@ export const ImportSrp = ({
         <BannerAlert
           severity={BannerAlertSeverity.Danger}
           description={srpError}
+          actionButtonLabel={'Clear'}
+          actionButtonOnClick={() => {
+            onSrpChange(Array(defaultNumberOfWords).fill(''));
+            setSrpError('');
+          }}
+          data-testid="bannerAlert"
         />
       ) : null}