feat: adding logic for connect wallet and create note account when us…

…er click on the Account tab

apps/bridge-dapp/src/hooks/useSidebarProps.ts

@@ -1,8 +1,12 @@
 import { useWebContext } from '@webb-tools/api-provider-environment';
 import BillFillIcon from '@webb-tools/icons/BillFillIcon';
+import { useNoteAccount } from '@webb-tools/react-hooks/useNoteAccount';
 import type { SideBarItemProps } from '@webb-tools/webb-ui-components/components/SideBar/types';
+import type { EventFor } from '@webb-tools/webb-ui-components/types';
 import { useLocation } from 'react-router';
 import sidebar from '../constants/sidebar';
+import useChainsFromRoute from './useChainsFromRoute';
+import { useConnectWallet } from './useConnectWallet';
 
 const accountItemCfg = {
   name: 'Account',
@@ -17,15 +21,32 @@ const accountItemCfg = {
  * **Must be used inside the `WebbProvider` component**.
  */
 function useSidebarProps() {
-  const { noteManager } = useWebContext();
   const { pathname } = useLocation();
+  const { srcTypedChainId } = useChainsFromRoute();
+
+  const { activeWallet, noteManager } = useWebContext();
+  const { hasNoteAccount, setOpenNoteAccountModal } = useNoteAccount();
+  const { toggleModal } = useConnectWallet();
+
+  const handleClick = (event: EventFor<'a', 'onClick'>) => {
+    event.preventDefault();
+
+    if (typeof srcTypedChainId !== 'number') {
+      return;
+    }
+
+    if (!activeWallet) {
+      return toggleModal(true, srcTypedChainId);
+    }
+
+    if (!hasNoteAccount) {
+      setOpenNoteAccountModal(true);
+    }
+  };
 
   const accountItem = {
     ...accountItemCfg,
-    info: noteManager?.getKeypair()
-      ? undefined
-      : 'Connect your wallet and create a note account to access this feature.',
-    isDisabled: !noteManager?.getKeypair(),
+    onClick: noteManager && activeWallet ? undefined : handleClick,
   } satisfies SideBarItemProps;
 
   sidebar.items = [

libs/webb-ui-components/src/components/SideBar/Item.tsx

@@ -24,6 +24,7 @@ const SideBarItem: FC<SideBarItemProps & SideBarExtraItemProps> = ({
   setIsActive,
   isDisabled,
   pathnameOrHash,
+  onClick,
   info,
 }) => {
   const [isMounted, setIsMounted] = useState(false);
@@ -75,6 +76,7 @@ const SideBarItem: FC<SideBarItemProps & SideBarExtraItemProps> = ({
     isNext,
     isDisabled,
     hasSubItem: subItems.length > 0,
+    onClick,
   });
 
   if (!isMounted) return null;

libs/webb-ui-components/src/components/SideBar/SubItem.tsx

@@ -1,12 +1,13 @@
 import { ExternalLinkLine } from '@webb-tools/icons';
+import cx from 'classnames';
 import React, { useMemo } from 'react';
-import isSideBarItemActive from '../../utils/isSideBarItemActive';
+import type { EventFor } from '../../types';
 import { Typography } from '../../typography/Typography';
+import isSideBarItemActive from '../../utils/isSideBarItemActive';
 import { Link } from '../Link';
-import cx from 'classnames';
+import WithInfo from './WithInfo';
 import { SideBarExtraSubItemProps, SideBarSubItemProps } from './types';
 import useLinkProps from './useLinkProps';
-import WithInfo from './WithInfo';
 
 export const SubItem: React.FC<
   SideBarSubItemProps & SideBarExtraSubItemProps
@@ -20,11 +21,13 @@ export const SubItem: React.FC<
   setItemIsActive,
   setSubItemIsActive,
   info,
+  onClick,
   pathnameOrHash,
 }) => {
   const linkProps = useLinkProps({ href, isInternal, isNext, isDisabled });
 
-  const setIsActive = () => {
+  const setIsActive = (event: EventFor<'a', 'onClick'>) => {
+    onClick?.(event);
     if (setItemIsActive && setSubItemIsActive && isInternal) {
       setItemIsActive();
       setSubItemIsActive();

libs/webb-ui-components/src/components/SideBar/types.ts

@@ -1,6 +1,7 @@
 import type { IconBase } from '@webb-tools/icons/types';
 import type { LogoProps } from '../Logo/types';
 import type { DialogContentProps } from '@radix-ui/react-dialog';
+import { MouseEventHandler } from 'react';
 
 export type SideBarFooterType = {
   name: string;
@@ -55,6 +56,9 @@ export type SideBarItemProps = {
   /** The extra info tooltip for the item */
   info?: string | React.ReactElement;
 
+  /** The callback function when the item is clicked */
+  onClick?: MouseEventHandler<HTMLAnchorElement>;
+
   pathnameOrHash?: string;
 
   /** The item sub items */
@@ -81,6 +85,9 @@ export type SideBarSubItemProps = {
   /** The extra info tooltip for the item */
   info?: string | React.ReactElement;
 
+  /** The callback function when the item is clicked */
+  onClick?: MouseEventHandler<HTMLAnchorElement>;
+
   pathnameOrHash?: string;
 };
 

libs/webb-ui-components/src/components/SideBar/useLinkProps.ts

@@ -7,11 +7,14 @@ import type { SideBarExtraItemProps, SideBarItemProps } from './types';
 type Props = SideBarItemProps & SideBarExtraItemProps;
 
 function useLinkProps(
-  args: Pick<Props, 'isInternal' | 'href' | 'isNext' | 'isDisabled'> & {
+  args: Pick<
+    Props,
+    'isInternal' | 'href' | 'isNext' | 'isDisabled' | 'onClick'
+  > & {
     hasSubItem?: boolean;
   }
 ) {
-  const { isInternal, isNext, href, isDisabled, hasSubItem } = args;
+  const { isInternal, isNext, href, isDisabled, hasSubItem, onClick } = args;
 
   return useMemo(() => {
     if (isDisabled || hasSubItem) {
@@ -22,25 +25,28 @@ function useLinkProps(
       return {
         href,
         target: '_blank',
+        onClick,
       } as const satisfies PropsOf<'a'>;
     }
 
     if (isInternal && isNext) {
       return {
         href,
         isInternal,
+        onClick,
       } as const satisfies PropsOf<typeof NextLink> & { isInternal: true };
     }
 
     if (isInternal && !isNext) {
       return {
         to: href,
         isInternal,
+        onClick,
       } as const satisfies PropsOf<typeof ReactLink> & { isInternal: true };
     }
 
     return {};
-  }, [hasSubItem, href, isDisabled, isInternal, isNext]);
+  }, [hasSubItem, href, isDisabled, isInternal, isNext, onClick]);
 }
 
 export default useLinkProps;

libs/webb-ui-components/src/types/index.ts

@@ -179,3 +179,24 @@ export type ArrayElement<ArrayType extends readonly unknown[]> =
 
 export type NonNullableArrayItem<T extends Array<NullableUnknownType>> =
   NonNullable<ArrayElement<T>>;
+
+type GetEventHandlers<T extends keyof JSX.IntrinsicElements> = Extract<
+  keyof JSX.IntrinsicElements[T],
+  `on${string}`
+>;
+
+/**
+ * Provides the event type for a given element and handler.
+ *
+ * @example
+ *
+ * type MyEvent = EventFor<"input", "onChange">;
+ */
+export type EventFor<
+  TElement extends keyof JSX.IntrinsicElements,
+  THandler extends GetEventHandlers<TElement>
+> = JSX.IntrinsicElements[TElement][THandler] extends
+  | ((e: infer TEvent) => any)
+  | undefined
+  ? TEvent
+  : never;