reset state on wallet address change

src/background/services/background.ts

@@ -194,7 +194,7 @@ export class Background {
 
             case 'CONNECT_WALLET':
               await this.openPaymentsService.connectWallet(message.payload);
-              if (message.payload.recurring) {
+              if (message.payload?.recurring) {
                 this.scheduleResetOutOfFundsState();
               }
               return success(undefined);

src/background/services/openPayments.ts

@@ -335,12 +335,13 @@ export class OpenPaymentsService {
     });
   }
 
-  async connectWallet({
-    walletAddressUrl,
-    amount,
-    recurring,
-    skipAutoKeyShare,
-  }: ConnectWalletPayload) {
+  async connectWallet(params: ConnectWalletPayload | null) {
+    if (!params) {
+      this.setConnectState(null);
+      return;
+    }
+    const { walletAddressUrl, amount, recurring, skipAutoKeyShare } = params;
+
     const walletAddress = await getWalletInformation(walletAddressUrl);
     const exchangeRates = await getExchangeRates();
 

src/popup/components/ConnectWalletForm.tsx

@@ -37,6 +37,7 @@ interface ConnectWalletFormProps {
   saveValue?: (key: keyof Inputs, val: Inputs[typeof key]) => void;
   getWalletInfo: (walletAddressUrl: string) => Promise<WalletAddress>;
   connectWallet: (data: ConnectWalletPayload) => Promise<Response>;
+  clearConnectState: () => Promise<unknown>;
   onConnect?: () => void;
 }
 
@@ -46,6 +47,7 @@ export const ConnectWalletForm = ({
   state,
   getWalletInfo,
   connectWallet,
+  clearConnectState,
   saveValue = () => {},
   onConnect = () => {},
 }: ConnectWalletFormProps) => {
@@ -64,6 +66,12 @@ export const ConnectWalletForm = ({
     isAutoKeyAddFailed(state),
   );
 
+  const resetState = React.useCallback(async () => {
+    await clearConnectState();
+    setErrors((_) => ({ ..._, keyPair: '', connect: '' }));
+    setAutoKeyShareFailed(false);
+  }, [clearConnectState]);
+
   const [walletAddressInfo, setWalletAddressInfo] =
     React.useState<WalletAddress | null>(null);
 
@@ -268,6 +276,7 @@ export const ConnectWalletForm = ({
             }
           }
           const ok = await handleWalletAddressUrlChange(value, input);
+          resetState();
           if (ok) document.getElementById('connectAmount')?.focus();
         }}
         onBlur={async (ev) => {
@@ -278,6 +287,7 @@ export const ConnectWalletForm = ({
             }
           }
           await handleWalletAddressUrlChange(value, ev.currentTarget);
+          resetState();
         }}
       />
 

src/popup/pages/Settings.tsx

@@ -34,6 +34,7 @@ export const Component = () => {
           // But we reload it, as it's open all-time when running E2E tests
           window.location.reload();
         }}
+        clearConnectState={() => message.send('CONNECT_WALLET', null)}
       />
     );
   }

src/shared/messages.ts

@@ -115,7 +115,7 @@ export type PopupToBackgroundMessage = {
     output: PopupState;
   };
   CONNECT_WALLET: {
-    input: ConnectWalletPayload;
+    input: null | ConnectWalletPayload;
     output: void;
   };
   RECONNECT_WALLET: {