add WalletConnect and error handling

src/components/AccountCard/SimpleAccountCard/index.tsx

@@ -9,6 +9,7 @@ interface AccountProps {
 
 export const SimpleAccountCard = ({ account }: AccountProps) => {
   const { setWalletAccount } = useGlobalState();
+
   return (
     <li className="w-full">
       <button

src/components/Wallet/modals/ConnectModal/ConnectModalDialog.tsx

@@ -18,7 +18,7 @@ export const ConnectModalDialog = ({ visible, onClose }: ConnectModalDialogProps
       <Collapse defaultChecked icon="arrow" open name="wallets">
         <Collapse.Title>Select Wallet</Collapse.Title>
         <Collapse.Content>
-          <ConnectModalWalletsList items={wallets} onClick={(wallet) => selectWallet(wallet)} />
+          <ConnectModalWalletsList wallets={wallets} onClick={(wallet) => selectWallet(wallet)} onClose={onClose} />
           <p className="mt-3.5 text-center text-xs">
             Want to know more?
             <a href="#" className="ml-1 text-primary hover:underline">

src/components/Wallet/modals/ConnectModal/ConnectModalList/ConnectModalWalletsList/index.tsx

@@ -1,27 +1,31 @@
 import { Wallet } from '@talismn/connect-wallets';
 import { ConnectModalListWalletsItem } from './ConnectModalWalletsListItem';
+import WalletConnect from '../../../../wallets/WalletConnect';
 
 interface ConnectWalletListProps {
-  items?: Wallet[];
+  wallets?: Wallet[];
   onClick: (wallet: Wallet) => void;
+  onClose: () => void;
   makeInstallable?: boolean;
 }
 
-export function ConnectModalWalletsList({ items, onClick, makeInstallable }: ConnectWalletListProps) {
-  if (!items) {
-    return null;
+export function ConnectModalWalletsList({ wallets, onClick, makeInstallable, onClose }: ConnectWalletListProps) {
+  if (!wallets?.length) {
+    return <p>No wallet installed</p>;
   }
 
   return (
     <section className="grid grid-cols-2 gap-4">
-      {items.map((wallet: Wallet) => (
+      {wallets.map((wallet: Wallet) => (
         <ConnectModalListWalletsItem
           key={wallet.extensionName}
           wallet={wallet}
           onClick={onClick}
           makeInstallable={makeInstallable}
         />
       ))}
+
+      <WalletConnect onClick={onClose} />
     </section>
   );
 }

src/components/Wallet/wallets/NovaWallet/index.tsx

@@ -2,7 +2,7 @@ import { web3Accounts, web3Enable, web3FromAddress } from '@polkadot/extension-d
 import { WalletAccount } from '@talismn/connect-wallets';
 import { useCallback, useEffect, useState } from 'preact/compat';
 import { Modal } from 'react-daisyui';
-import logo from '../../../assets/nova-wallet.png';
+import logo from '../../../../assets/nova-wallet.png';
 import { GlobalState } from '../../../../GlobalStateProvider';
 import { PublicKey } from '../../../PublicKey';
 
@@ -86,7 +86,7 @@ const NovaWallet = ({ setWalletAccount }: NovaWalletProps) => {
           {accounts.map((a, i) => (
             <button
               key={i}
-              className={`flex items-center gap-4 p-4 rounded-xl text-left w-full bg-[var(--modal-control-background)] hover:bg-[var(--modal-active-background)]`}
+              className={`flex w-full items-center gap-4 rounded-xl bg-[var(--modal-control-background)] p-4 text-left hover:bg-[var(--modal-active-background)]`}
               onClick={() => setSelectedAccount(a)}
             >
               <img src={logo} width="32" height="32" alt="Nova Wallet" />
@@ -101,7 +101,7 @@ const NovaWallet = ({ setWalletAccount }: NovaWalletProps) => {
         </div>
       </Modal>
       <button
-        className={`flex items-center gap-4 p-4 rounded-xl text-left w-full bg-[var(--modal-control-background)] hover:bg-[var(--modal-active-background)]`}
+        className={`flex w-full items-center gap-4 rounded-xl bg-[var(--modal-control-background)] p-4 text-left hover:bg-[var(--modal-active-background)]`}
         onClick={onClick}
       >
         <img src={logo} width="32" height="32" alt="Nova Wallet" />

src/components/Wallet/wallets/WalletConnect/index.tsx

@@ -2,14 +2,19 @@ import { WalletConnectModal } from '@walletconnect/modal';
 import UniversalProvider from '@walletconnect/universal-provider';
 import { SessionTypes } from '@walletconnect/types';
 import { useCallback, useEffect, useState } from 'preact/compat';
-import logo from '../../../assets/wallet-connect.svg';
+import logo from '../../../../assets/wallet-connect.svg';
 import { config } from '../../../../config';
 import { chainIds, walletConnectConfig } from '../../../../config/walletConnect';
 import { useGlobalState } from '../../../../GlobalStateProvider';
 import { walletConnectService } from '../../../../services/walletConnect';
 import { ToastMessage, showToast } from '../../../../shared/showToast';
+import { Button } from 'react-daisyui';
 
-const WalletConnect = () => {
+interface WalletConnectProps {
+  onClick: () => void;
+}
+
+const WalletConnect = ({ onClick }: WalletConnectProps) => {
   const [loading, setLoading] = useState(false);
   const [provider, setProvider] = useState<Promise<UniversalProvider> | undefined>();
   const [modal, setModal] = useState<WalletConnectModal | undefined>();
@@ -58,14 +63,13 @@ const WalletConnect = () => {
     setLoading(true);
     try {
       await handleConnect();
-
-      //@eslint-disable-next-line no-explicit-any
-    } catch (error: any) {
-      showToast(ToastMessage.ERROR, error);
+    } catch (error: unknown) {
+      showToast(ToastMessage.ERROR, error as string);
     } finally {
       setLoading(false);
+      onClick();
     }
-  }, [handleConnect]);
+  }, [handleConnect, onClick]);
 
   useEffect(() => {
     if (provider) return;
@@ -78,16 +82,10 @@ const WalletConnect = () => {
   }, [provider]);
 
   return (
-    <div className="-mt-8">
-      <button
-        className={`flex items-center gap-4 p-4 rounded-xl text-left w-full bg-[var(--modal-control-background)] hover:bg-[var(--modal-active-background)]`}
-        onClick={walletConnectClick}
-        disabled={loading}
-      >
-        <img src={logo} width="32" height="32" alt="Wallet Connect" />
-        {loading ? 'Loading...' : 'Wallet connect'}
-      </button>
-    </div>
+    <Button className="flex outline-primary" onClick={walletConnectClick} disabled={loading}>
+      <img src={logo} alt="WalletConnect connect button" width={32} height={32} />
+      <p className="ml-2">{loading ? 'Loading...' : 'Wallet connect'}</p>
+    </Button>
   );
 };
 export default WalletConnect;

src/hooks/useConnectWallet/index.tsx

@@ -7,7 +7,6 @@ import { ToastMessage, showToast } from '../../shared/showToast';
 export const useConnectWallet = () => {
   const [wallets, setWallets] = useState<Wallet[]>();
   const [selectedWallet, setSelectedWallet] = useState<Wallet | undefined>();
-
   const { dAppName } = useGlobalState();
 
   useEffect(() => {

src/services/walletConnect/index.ts

@@ -1,7 +1,7 @@
 import { Signer } from '@polkadot/types/types';
 import { WalletAccount } from '@talismn/connect-wallets';
 import type { SessionTypes } from '@walletconnect/types/dist/types/sign-client/session';
-import UniversalProvider, { UniversalProviderOpts } from '@walletconnect/universal-provider';
+import UniversalProvider from '@walletconnect/universal-provider';
 import logo from '../../assets/wallet-connect.svg';
 import { config } from '../../config';
 
@@ -14,7 +14,13 @@ export const walletConnectService = {
       (await UniversalProvider.init({
         projectId: config.walletConnect.projectId,
         relayUrl: config.walletConnect.url,
-      } as UniversalProviderOpts));
+        metadata: {
+          name: 'Pendulum Chain Portal',
+          description: 'Pendulum Chain Portal',
+          url: 'https://portal.pendulumchain.org/',
+          icons: ['https://walletconnect.com/walletconnect-logo.png'],
+        },
+      }));
     return this.provider;
   },
   init: async function init(session: SessionTypes.Struct, chainId: string): Promise<WalletAccount> {