Perform paraApi disconnect on provider (#7175)

* Perform paraApi disconnect on provider

* Adjust

packages/react-api/src/Api.tsx

@@ -207,18 +207,18 @@ function Api ({ apiUrl, children, isElectron, store }: Props): React.ReactElemen
 
   // initial initialization
   useEffect((): void => {
-    let provider;
-
-    if (apiUrl.startsWith('light://')) {
-      provider = new ScProvider(apiUrl.replace('light://substrate-connect/', '') as SupportedChains);
-    } else {
-      provider = new WsProvider(apiUrl);
-    }
-
-    const signer = new ApiSigner(registry, queuePayload, queueSetTxStatus);
     const types = getDevTypes();
 
-    api = new ApiPromise({ provider, registry, signer, types, typesBundle, typesChain });
+    api = new ApiPromise({
+      provider: apiUrl.startsWith('light://')
+        ? new ScProvider(apiUrl.replace('light://substrate-connect/', '') as SupportedChains)
+        : new WsProvider(apiUrl),
+      registry,
+      signer: new ApiSigner(registry, queuePayload, queueSetTxStatus),
+      types,
+      typesBundle,
+      typesChain
+    });
 
     api.on('connected', () => setIsApiConnected(true));
     api.on('disconnected', () => setIsApiConnected(false));

packages/react-hooks/src/useApiUrl.ts

@@ -1,7 +1,9 @@
 // Copyright 2017-2022 @polkadot/react-hooks authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { ProviderInterface } from '@polkadot/rpc-provider/types';
+
+import { useEffect, useMemo, useRef, useState } from 'react';
 
 import { ApiPromise, WsProvider } from '@polkadot/api';
 import { typesBundle, typesChain } from '@polkadot/apps-config';
@@ -10,12 +12,14 @@ import { arrayShuffle, isString } from '@polkadot/util';
 import { createNamedHook } from './createNamedHook';
 import { useIsMountedRef } from './useIsMountedRef';
 
-function disconnect (api: ApiPromise | null): void {
-  api && api.disconnect().catch(console.error);
+function disconnect (provider: ProviderInterface | null): null {
+  provider && provider.disconnect().catch(console.error);
+
+  return null;
 }
 
 function useApiUrlImpl (url?: null | string | string[]): ApiPromise | null {
-  const apiRef = useRef<ApiPromise | null>(null);
+  const providerRef = useRef<ProviderInterface | null>(null);
   const mountedRef = useIsMountedRef();
   const [state, setState] = useState<ApiPromise | null>(null);
   const urls = useMemo(
@@ -29,36 +33,24 @@ function useApiUrlImpl (url?: null | string | string[]): ApiPromise | null {
 
   useEffect((): () => void => {
     return (): void => {
-      disconnect(apiRef.current);
-      apiRef.current = null;
+      providerRef.current = disconnect(providerRef.current);
     };
   }, []);
 
-  const _setApi = useCallback(
-    (api: ApiPromise | null): void => {
-      disconnect(apiRef.current);
-
-      if (mountedRef.current) {
-        apiRef.current = api;
-        setState(api);
-      }
-    },
-    [mountedRef]
-  );
-
   useEffect((): void => {
-    _setApi(null);
+    setState(null);
+    providerRef.current = disconnect(providerRef.current);
 
     urls.length &&
       ApiPromise
         .create({
-          provider: new WsProvider(urls),
+          provider: (providerRef.current = new WsProvider(urls)),
           typesBundle,
           typesChain
         })
-        .then(_setApi)
+        .then((api) => mountedRef.current && setState(api))
         .catch(console.error);
-  }, [_setApi, urls]);
+  }, [mountedRef, providerRef, urls]);
 
   return state;
 }