feat: add more props to wallet connected event

lifinance · Sep 25, 2024 · f195165 · f195165
1 parent 38a7a7d
commit f195165
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 25 deletions.
diff --git a/packages/wallet-management/src/components/EVMListItemButton.tsx b/packages/wallet-management/src/components/EVMListItemButton.tsx
@@ -29,6 +29,12 @@ export const EVMListItemButton = ({
   const config = useConfig();
   const { setLastConnectedAccount } = useLastConnectedAccount();
 
+  const connectorName =
+    (connector as CreateConnectorFnExtended).displayName || connector.name;
+  const connectorDisplayName: string = ecosystemSelection
+    ? 'Ethereum'
+    : connectorName;
+
   const handleEVMConnect = async () => {
     try {
       const identityCheckPassed = await isWalletInstalledAsync(
@@ -49,17 +55,15 @@ export const EVMListItemButton = ({
         address: data.accounts[0],
         chainId: data.chainId,
         chainType: ChainType.EVM,
+        connectorId: connector.id,
+        connectorName: connectorName,
       });
       onConnected?.();
     } catch (error) {
       onError?.(error);
     }
   };
 
-  const connectorName: string = ecosystemSelection
-    ? 'Ethereum'
-    : (connector as CreateConnectorFnExtended).displayName || connector.name;
-
   return (
     <ListItemButton key={connector.id} onClick={handleEVMConnect}>
       <ListItemAvatar>
@@ -69,12 +73,12 @@ export const EVMListItemButton = ({
               ? 'https://raw.githubusercontent.com/lifinance/types/main/src/assets/icons/chains/ethereum.svg'
               : getConnectorIcon(connector as Connector)
           }
-          alt={connectorName}
+          alt={connectorDisplayName}
         >
-          {connectorName?.[0]}
+          {connectorDisplayName?.[0]}
         </Avatar>
       </ListItemAvatar>
-      <ListItemText primary={connectorName} />
+      <ListItemText primary={connectorDisplayName} />
     </ListItemButton>
   );
 };
diff --git a/packages/wallet-management/src/components/SVMListItemButton.tsx b/packages/wallet-management/src/components/SVMListItemButton.tsx
@@ -24,6 +24,11 @@ export const SVMListItemButton = ({
   const { select, disconnect, connected } = useWallet();
   const { setLastConnectedAccount } = useLastConnectedAccount();
 
+  const connectorName = walletAdapter.name;
+  const connectorDisplayName: string = ecosystemSelection
+    ? 'Solana'
+    : walletAdapter.name;
+
   const connect = async () => {
     try {
       onConnecting?.();
@@ -39,6 +44,8 @@ export const SVMListItemButton = ({
           address: publicKey?.toString(),
           chainId: ChainId.SOL,
           chainType: ChainType.SVM,
+          connectorId: connectorName,
+          connectorName: connectorName,
         });
       });
       onConnected?.();
@@ -47,25 +54,21 @@ export const SVMListItemButton = ({
     }
   };
 
-  const connectorName: string = ecosystemSelection
-    ? 'Solana'
-    : walletAdapter.name;
-
   return (
-    <ListItemButton key={connectorName} onClick={connect}>
+    <ListItemButton key={connectorDisplayName} onClick={connect}>
       <ListItemAvatar>
         <Avatar
           src={
             ecosystemSelection
               ? 'https://raw.githubusercontent.com/lifinance/types/main/src/assets/icons/chains/solana.svg'
               : walletAdapter.icon
           }
-          alt={connectorName}
+          alt={connectorDisplayName}
         >
-          {connectorName[0]}
+          {connectorDisplayName[0]}
         </Avatar>
       </ListItemAvatar>
-      <ListItemText primary={connectorName} />
+      <ListItemText primary={connectorDisplayName} />
     </ListItemButton>
   );
 };
diff --git a/packages/wallet-management/src/components/UTXOListItemButton.tsx b/packages/wallet-management/src/components/UTXOListItemButton.tsx
@@ -29,6 +29,12 @@ export const UTXOListItemButton = ({
   const config = useConfig();
   const { setLastConnectedAccount } = useLastConnectedAccount();
 
+  const connectorName =
+    (connector as CreateConnectorFnExtended).displayName || connector.name;
+  const connectorDisplayName: string = ecosystemSelection
+    ? 'Bitcoin'
+    : connectorName;
+
   const handleUTXOConnect = async () => {
     try {
       const identityCheckPassed = await isWalletInstalledAsync(
@@ -49,17 +55,15 @@ export const UTXOListItemButton = ({
         address: data.accounts[0],
         chainId: data.chainId,
         chainType: ChainType.UTXO,
+        connectorId: connector.id,
+        connectorName: connectorName,
       });
       onConnected?.();
     } catch (error) {
       onError?.(error);
     }
   };
 
-  const connectorName: string = ecosystemSelection
-    ? 'Bitcoin'
-    : (connector as CreateConnectorFnExtended).displayName || connector.name;
-
   return (
     <ListItemButton key={connector.id} onClick={handleUTXOConnect}>
       <ListItemAvatar>
@@ -69,12 +73,12 @@ export const UTXOListItemButton = ({
               ? 'https://raw.githubusercontent.com/lifinance/types/main/src/assets/icons/chains/bitcoin.svg'
               : getConnectorIcon(connector as Connector)
           }
-          alt={connectorName}
+          alt={connectorDisplayName}
         >
-          {connectorName?.[0]}
+          {connectorDisplayName?.[0]}
         </Avatar>
       </ListItemAvatar>
-      <ListItemText primary={connectorName} />
+      <ListItemText primary={connectorDisplayName} />
     </ListItemButton>
   );
 };
diff --git a/packages/wallet-management/src/types/events.ts b/packages/wallet-management/src/types/events.ts
@@ -9,7 +9,9 @@ export type WalletManagementEvents = {
 };
 
 export interface WalletConnected {
-  address?: string;
-  chainId?: number;
-  chainType?: ChainType;
+  address: string;
+  chainId: number;
+  chainType: ChainType;
+  connectorId: string;
+  connectorName: string;
 }