feat: useConnectWithLoading

packages/connect-wallet-modal/src/connectButtons/ConnectBinance.tsx

@@ -1,10 +1,10 @@
 import React, { FC, useCallback } from 'react';
-import { useConnect } from 'wagmi';
 import { useDisconnect, useReefKnotContext } from '@reef-knot/core-react';
 import { ConnectButton } from '../components/ConnectButton';
 import { ConnectInjectedProps } from './types';
 import { isMobileOrTablet } from '@reef-knot/wallets-helpers';
 import { openWindow } from '../helpers/index';
+import { useConnectWithLoading } from '../hooks/useConnectWithLoading';
 
 export const ConnectBinance: FC<ConnectInjectedProps> = (
   props: ConnectInjectedProps,
@@ -27,8 +27,8 @@ export const ConnectBinance: FC<ConnectInjectedProps> = (
   const metricsOnConnect = metrics?.events?.connect?.handlers[walletId];
   const metricsOnClick = metrics?.events?.click?.handlers[walletId];
 
-  const { loadingWalletId, setLoadingWalletId } = useReefKnotContext();
-  const { connectAsync } = useConnect();
+  const { loadingWalletId } = useReefKnotContext();
+  const { connectWithLoading } = useConnectWithLoading();
   const { disconnect } = useDisconnect();
 
   const handleConnect = useCallback(async () => {
@@ -39,29 +39,18 @@ export const ConnectBinance: FC<ConnectInjectedProps> = (
     if (isMobileOrTablet && deeplink && !detector?.()) {
       openWindow(deeplink);
     } else {
-      setLoadingWalletId(walletId);
-      await connectAsync(
-        { connector },
-        {
-          onSettled: () => {
-            setLoadingWalletId(null);
-          },
-          onSuccess: () => {
-            onConnect?.();
-            metricsOnConnect?.();
-          },
-        },
-      );
+      await connectWithLoading(walletId, { connector });
+      onConnect?.();
+      metricsOnConnect?.();
     }
   }, [
     onBeforeConnect,
     metricsOnClick,
     disconnect,
     deeplink,
     detector,
-    setLoadingWalletId,
+    connectWithLoading,
     walletId,
-    connectAsync,
     connector,
     onConnect,
     metricsOnConnect,

packages/connect-wallet-modal/src/connectButtons/ConnectWC.tsx

@@ -6,6 +6,7 @@ import { getWalletConnectUri } from '@reef-knot/wallets-helpers';
 import { ConnectButton } from '../components/ConnectButton';
 import { openWindow } from '../helpers';
 import { ConnectWCProps } from './types';
+import { useConnectWithLoading } from '../hooks/useConnectWithLoading';
 
 let redirectionWindow: Window | null = null;
 
@@ -40,8 +41,9 @@ export const ConnectWC: FC<ConnectWCProps> = (props: ConnectWCProps) => {
   const metricsOnClick = metrics?.events?.click?.handlers[walletId];
 
   const config = useConfig();
-  const { loadingWalletId, setLoadingWalletId } = useReefKnotContext();
+  const { loadingWalletId } = useReefKnotContext();
   const { connectAsync } = useConnect();
+  const { connectWithLoading } = useConnectWithLoading();
   const { disconnect } = useDisconnect();
 
   // WCURI – WalletConnect Pairing URI: https://docs.walletconnect.com/2.0/specs/clients/core/pairing/pairing-uri
@@ -98,16 +100,8 @@ export const ConnectWC: FC<ConnectWCProps> = (props: ConnectWCProps) => {
         redirectionWindow?.close();
       }
     } else {
-      setLoadingWalletId(walletId);
-      await connectAsync(
-        { connector },
-        {
-          onSettled: () => {
-            setLoadingWalletId(null);
-          },
-          onSuccess,
-        },
-      );
+      await connectWithLoading(walletId, { connector });
+      onSuccess();
     }
   }, [
     deeplink,
@@ -122,8 +116,9 @@ export const ConnectWC: FC<ConnectWCProps> = (props: ConnectWCProps) => {
     connectAsync,
     WCURICloseRedirectionWindow,
     config.chains,
+    connectWithLoading,
+    walletId,
     connector,
-    setLoadingWalletId,
   ]);
 
   return (

packages/connect-wallet-modal/src/hooks/useConnectWithLoading.ts

@@ -0,0 +1,25 @@
+import { useConnect } from 'wagmi';
+import { useReefKnotContext } from '@reef-knot/core-react';
+
+type UseConnectParams = Parameters<typeof useConnect>[0];
+
+export function useConnectWithLoading(params?: UseConnectParams) {
+  const { setLoadingWalletId } = useReefKnotContext();
+
+  const { connectAsync } = useConnect(params);
+
+  const connectWithLoading = async (
+    walletId: string,
+    connectAsyncVariables: Parameters<typeof connectAsync>[0],
+    connectAsyncOptions?: Parameters<typeof connectAsync>[1],
+  ) => {
+    try {
+      setLoadingWalletId(walletId);
+      await connectAsync(connectAsyncVariables, connectAsyncOptions);
+    } finally {
+      setLoadingWalletId(null);
+    }
+  };
+
+  return { connectWithLoading };
+}