Loading for wallet connecting

components/WalletModal/ConnectorsList.tsx

@@ -1,7 +1,7 @@
-import { FC } from 'react'
+import { FC, useState } from 'react'
 import { QRCodeSVG } from 'qrcode.react';
 import { resolveWalletConnectorIcon } from '../../lib/wallets/utils/resolveWalletIcon';
-import { Loader } from 'lucide-react';
+import { LoaderCircle, Loader, RotateCw } from 'lucide-react';
 import { Wallet } from '../../Models/WalletProvider';
 import { ModalWalletProvider } from '.';
 
@@ -34,21 +34,27 @@ const ConnectorsList: FC<WalletsListProps> = ({ modalWalletProvider, onFinish, s
 
 
 const ConnectList: FC<WalletsListProps> = ({ modalWalletProvider: provider, onFinish, setSelectedProvider, selectedProvider }) => {
+    const [connectionError, setConnectionError] = useState(false);
+    const [currentConnector, setCurrentConnector] = useState<any>(null);
 
     const connect = async (connector: any) => {
         try {
-            setSelectedProvider({ ...provider, connector: { name: connector.name } })
+            setConnectionError(false);
+            setCurrentConnector(connector);
+            setSelectedProvider({ ...provider, connector: { name: connector.name } });
 
-            const result = provider?.connectConnector && await provider.connectConnector({ connector })
+            const result = provider?.connectConnector && await provider.connectConnector({ connector });
 
-            setSelectedProvider(undefined)
-            onFinish(result)
+            setSelectedProvider(undefined);
+            onFinish(result);
         } catch (e) {
-            console.log(e)
-            setSelectedProvider({ ...provider, connector: undefined })
-            onFinish(undefined)
+            setConnectionError(true);
+            setSelectedProvider({ ...provider, connector: undefined });
         }
-    }
+    };
+
+    const selectedWallet = currentConnector || provider?.availableWalletsForConnect?.find((wallet) => wallet.name === selectedProvider?.connector?.name);
+    const ProviderIcon = resolveWalletConnectorIcon({ connector: selectedProvider?.id, iconUrl: selectedWallet?.icon });
 
     if (selectedProvider?.connector?.qr) return <div className="flex flex-col justify-start space-y-2">
         <div className='w-full flex justify-center pt-2'>
@@ -76,13 +82,33 @@ const ConnectList: FC<WalletsListProps> = ({ modalWalletProvider: provider, onFi
 
     return (
         <div className="flex flex-col gap-1 w-full overflow-y-auto styled-scroll">
-            {
+            {(selectedWallet || connectionError) ? (
+                <div className="w-full flex items-center justify-center p-6">
+                    <div className="flex flex-col gap-3 items-center font-semibold">
+                        {selectedWallet && (
+                            <>
+                                <ProviderIcon className="w-9 h-9 p-0.5 rounded-md bg-secondary-800" />
+                                <p className='text-xs'>Opening {selectedWallet?.name}...</p>
+                                <span className="text-base font-medium py-1">Confirm connection in the extension</span>
+                                <LoaderCircle className='h-4 w-4 animate-spin' />
+                            </>
+                        )}
+                        <button
+                            type="button"
+                            className="flex gap-1.5 items-center justify-between bg-[rgba(228,37,117,0.12)] text-[#e42575] px-4 py-2 border-none rounded-lg cursor-pointer text-sm font-medium leading-4 transition-transform duration-125 ease-in-out hover:scale-105"
+                            onClick={() => connect(currentConnector)}
+                        >
+                            <RotateCw className='h-4 w-4' />
+                            <span>Reconnect</span>
+                        </button>
+                    </div>
+                </div>
+            ) : (
                 provider?.availableWalletsForConnect?.sort((a, b) => (a.type === 'injected' ? 0 : a.order || 100) - (b.type === 'injected' ? 0 : b.order || 100))?.map((connector, index) => {
-                    const connectorName = connector?.name
-                    const connectorId = connector?.id
+                    const connectorName = connector?.name;
+                    const connectorId = connector?.id;
 
-                    const Icon = resolveWalletConnectorIcon({ connector: connectorId, iconUrl: connector.icon })
-                    const isLoading = provider.connector?.name === connectorName
+                    const Icon = resolveWalletConnectorIcon({ connector: connectorId, iconUrl: connector.icon });
 
                     return (
                         <div key={index}>
@@ -94,24 +120,19 @@ const ConnectList: FC<WalletsListProps> = ({ modalWalletProvider: provider, onFi
                             >
                                 <div className="flex gap-3 items-center font-semibold">
                                     <Icon className="w-9 h-9 p-0.5 rounded-md bg-secondary-800" />
-                                    <div className='flex flex-col items-start'>
+                                    <div className="flex flex-col items-start">
                                         <p>{connectorName}</p>
                                         {
                                             connector.type === 'injected' &&
-                                            <p className='text-xs text-secondary-text font-medium'>Installed</p>
+                                            <p className="text-xs text-secondary-text font-medium">Installed</p>
                                         }
                                     </div>
                                 </div>
-                                <div className='inline-flex items-center gap-2'>
-                                    {
-                                        isLoading &&
-                                        <Loader className='h-4 w-4 animate-spin' />
-                                    }
-                                </div>
                             </button>
                         </div>
-                    )
+                    );
                 })
+            )
             }
         </div>
     )

components/WalletProviders/Wagmi.tsx

@@ -5,15 +5,15 @@ import { NetworkType } from "../../Models/Network";
 import resolveChain from "../../lib/resolveChain";
 import React from "react";
 import NetworkSettings from "../../lib/NetworkSettings";
-import { WagmiProvider, injected } from 'wagmi'
+import { WagmiProvider } from 'wagmi'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { createConfig } from 'wagmi';
 import { Chain, http } from 'viem';
 import { WalletModalProvider } from '../WalletModal';
 import { argent } from '../../lib/wallets/connectors/argent';
 import { rainbow } from '../../lib/wallets/connectors/rainbow';
 import { coinbaseWallet, metaMask, walletConnect } from 'wagmi/connectors'
-import { hasInjectedProvider, explicitInjectedproviderDetected } from '../../lib/wallets/connectors/getInjectedConnector';
+import { hasInjectedProvider } from '../../lib/wallets/connectors/getInjectedConnector';
 import { bitget } from '../../lib/wallets/connectors/bitget';
 import { isMobile } from '../../lib/isMobile';
 import FuelProviderWrapper from "./FuelProvider";
@@ -61,6 +61,7 @@ function WagmiComponent({ children }: Props) {
         chains: settingsChains as [Chain, ...Chain[]],
         transports: transports,
     });
+
     return (
         <WagmiProvider config={config} >
             <QueryClientProvider client={queryClient}>

lib/wallets/evm/useEVM.ts

@@ -140,7 +140,7 @@ export default function useEVM({ network }: Props): WalletProvider {
 
         } catch (e) {
             //TODO: handle error like in transfer
-            toast.error('Error connecting wallet')
+            //toast.error('Error connecting wallet')
             throw new Error(e)
         }
     }

lib/wallets/fuel/useFuel.ts

@@ -90,6 +90,7 @@ export default function useFuel(): WalletProvider {
         }
         catch (e) {
             console.log(e)
+            throw new Error(e)
         }
     }
 

lib/wallets/imtblX/useImtblX.ts

@@ -57,6 +57,7 @@ export default function useImtblX(): WalletProvider {
         }
         catch (e) {
             console.log(e)
+            throw new Error(e)
         }
     }
 

lib/wallets/solana/useSolana.tsx

@@ -63,6 +63,7 @@ export default function useSolana({ network }: { network: Network | undefined })
         }
         catch (e) {
             console.log(e)
+            throw new Error(e)
         }
     }
 

lib/wallets/starknet/useStarknet.ts

@@ -115,7 +115,8 @@ export default function useStarknet(): WalletProvider {
 
         catch (e) {
             console.log(e)
-            toast.error(e.message, { id: 'connect-wallet', duration: 30000 })
+            if(e.message !== 'User rejected request')  toast.error(e.message, { id: 'connect-wallet', duration: 30000 })
+            throw new Error(e)
         }
     }