fix using links components from different router systems

packages/apps/dev-wallet/src/App/Layout/Layout.tsx

@@ -1,7 +1,7 @@
 import {
+  MonoKey,
   MonoLightMode,
   MonoWifiTethering,
-  MonoWindow,
   MonoWorkspaces,
 } from '@kadena/kode-icons/system';
 
@@ -15,15 +15,14 @@ import {
   useSideBar,
 } from '@kadena/kode-ui/patterns';
 import { FC, useEffect } from 'react';
-import { Outlet, useLocation, useNavigate } from 'react-router-dom';
+import { Link, Outlet, useLocation } from 'react-router-dom';
 import { BetaHeader } from './../BetaHeader';
 import { SideBar } from './SideBar';
 
 export const Layout: FC = () => {
   const { theme, setTheme } = useTheme();
   const { breadCrumbs, setBreadCrumbs, setAppContext } = useSideBar();
   const location = useLocation();
-  const navigate = useNavigate();
 
   useEffect(() => {
     if (
@@ -48,21 +47,22 @@ export const Layout: FC = () => {
         footer={
           <SideBarFooter>
             <SideBarFooterItem
-              visual={<MonoWindow />}
-              label=""
-              onPress={() => {}}
-            />
-            <SideBarFooterItem
+              href="/"
+              component={Link}
               visual={<MonoWifiTethering />}
               label="Profile"
-              onPress={() => {
-                navigate('/profile');
-              }}
             />
+
+            <SideBarFooterItem
+              href="/key-management/keys"
+              component={Link}
+              visual={<MonoKey />}
+              label="Keys"
+            />
+
             <SideBarFooterItem
               visual={<MonoWorkspaces />}
               label="Select network"
-              onPress={() => {}}
             >
               <NetworkSelector variant="transparent" showLabel={false} />
             </SideBarFooterItem>

packages/apps/dev-wallet/src/App/Layout/SideBar.tsx

@@ -28,7 +28,7 @@ import {
   useSideBar,
 } from '@kadena/kode-ui/patterns';
 import { FC } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 
 export const SideBar: FC = () => {
   const { theme, setTheme } = useTheme();
@@ -47,11 +47,7 @@ export const SideBar: FC = () => {
   return (
     <SideBarUI
       appContext={
-        <SideBarItem
-          visual={<MonoNetworkCheck />}
-          label="Select network"
-          onPress={() => {}}
-        >
+        <SideBarItem visual={<MonoNetworkCheck />} label="Select network">
           <NetworkSelector
             showLabel={isExpanded}
             variant="outlined"
@@ -64,59 +60,61 @@ export const SideBar: FC = () => {
           <SideBarItem
             visual={<MonoDataThresholding />}
             label="Dashboard"
-            onPress={() => navigate('/')}
+            component={Link}
+            href="/"
           />
 
           <SideBarTree visual={<MonoWallet />} label="My Wallets">
             <SideBarTreeItem
               label="Keys"
-              onPress={() => navigate('/key-management/keys')}
+              component={Link}
+              href="/key-management/keys"
             />
           </SideBarTree>
           <SideBarTree visual={<MonoTableRows />} label="Transactions">
             <SideBarTreeItem
               label="History"
-              onPress={() => navigate('/transactions')}
+              component={Link}
+              href="/transactions"
             />
           </SideBarTree>
           <SideBarTree visual={<MonoDashboardCustomize />} label="Utilities">
             <SideBarTreeItem
               label="Sig Builder"
-              onPress={() => navigate('/sig-builder')}
+              component={Link}
+              href="/sig-builder"
             />
             <SideBarTreeItem
               label="Dev Console"
-              onPress={() => navigate('/terminal')}
+              component={Link}
+              href="/terminal"
             />
             <SideBarTreeItem
               label="Backup"
-              onPress={() => navigate('/backup-recovery-phrase/write-down')}
+              component={Link}
+              href="/backup-recovery-phrase/write-down"
             />
           </SideBarTree>
 
           <SideBarItem
             visual={<MonoSwapHoriz />}
             label="Transfer"
-            onPress={() => {
-              navigate('/transfer');
-            }}
+            component={Link}
+            href="/transfer"
           />
 
           <SideBarItem
             visual={<MonoContacts />}
             label="Contacts"
-            onPress={() => navigate('/contacts')}
+            component={Link}
+            href="/contacts"
           />
         </>
       }
       context={
         <>
           <SideBarItemsInline>
-            <SideBarItem
-              visual={<MonoContacts />}
-              label="Profile"
-              onPress={() => {}}
-            >
+            <SideBarItem visual={<MonoContacts />} label="Profile">
               <ContextMenu
                 trigger={
                   <Button

packages/libs/kode-ui/src/components/Link/Link.tsx

@@ -2,7 +2,7 @@ import { mergeProps, useObjectRef } from '@react-aria/utils';
 import type { RecipeVariants } from '@vanilla-extract/recipes';
 import classNames from 'classnames';
 import type { ForwardedRef, ReactElement } from 'react';
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import type { AriaButtonProps, AriaFocusRingProps } from 'react-aria';
 import { useFocusRing, useHover, useLink } from 'react-aria';
 import {
@@ -22,7 +22,10 @@ type Variants = NonNullable<RecipeVariants<typeof button>>;
 
 export type ILinkProps = Omit<AriaFocusRingProps, 'isTextInput'> &
   Variants &
-  Pick<AriaButtonProps<'button'>, 'aria-label' | 'href' | 'type' | 'target'> & {
+  Pick<
+    AriaButtonProps<'button'>,
+    'aria-label' | 'href' | 'type' | 'target' | 'onPress'
+  > & {
     className?: string;
     isLoading?: boolean;
     isDisabled?: boolean;
@@ -32,6 +35,7 @@ export type ILinkProps = Omit<AriaFocusRingProps, 'isTextInput'> &
     children?: string | number | ReactElement;
     startVisual?: ReactElement;
     endVisual?: ReactElement;
+    component?: any;
   };
 
 /**
@@ -49,6 +53,15 @@ export type ILinkProps = Omit<AriaFocusRingProps, 'isTextInput'> &
  * @param title - title to be shown as HTML tooltip
  */
 
+const Anchor = forwardRef<HTMLAnchorElement, ILinkProps>(
+  ({ children, ...props }, ref) => (
+    <a {...props} ref={ref}>
+      {children}
+    </a>
+  ),
+);
+Anchor.displayName = 'Anchor';
+
 const Link = forwardRef(
   (
     {
@@ -59,6 +72,7 @@ const Link = forwardRef(
       loadingLabel = 'Loading',
       variant = 'transparent',
       className,
+      component,
       ...props
     }: ILinkProps,
     forwardedRef: ForwardedRef<HTMLAnchorElement>,
@@ -71,6 +85,10 @@ const Link = forwardRef(
     const { focusProps, isFocused, isFocusVisible } = useFocusRing(props);
     const { isLoading, isDisabled, style, title } = props;
 
+    const LinkWrapper = useMemo(() => {
+      return component ?? Anchor;
+    }, [component]);
+
     const iconOnly = Boolean(
       // check if children is a ReactElement
       (typeof children !== 'string' && typeof children !== 'number') ||
@@ -86,7 +104,8 @@ const Link = forwardRef(
     } loading`.trim();
 
     return (
-      <a
+      <LinkWrapper
+        to={props.href}
         {...mergeProps(linkProps, hoverProps, focusProps)}
         className={classNames(
           button({
@@ -150,7 +169,7 @@ const Link = forwardRef(
             </span>
           )}
         </>
-      </a>
+      </LinkWrapper>
     );
   },
 );

packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import type { FC, PropsWithChildren } from 'react';
 import React, { useEffect } from 'react';
 
 import {
@@ -49,6 +50,13 @@ const meta: Meta<ISideBarProps> = {
 
 type IStory = StoryObj<ISideBarProps>;
 
+const LinkComponent: FC<PropsWithChildren<{ to: string }>> = ({
+  children,
+  ...props
+}) => {
+  return <a {...props}>{children}</a>;
+};
+
 const InnerLayout = () => {
   const { setAppContext, isExpanded } = useSideBar();
 
@@ -86,7 +94,7 @@ const InnerLayout = () => {
             <SideBarItem
               visual={<MonoWifiTethering />}
               label="Mainnet"
-              onPress={() => {}}
+              href="javascript:void()"
             />
           }
           navigation={
@@ -139,7 +147,8 @@ const InnerLayout = () => {
         <SideBarFooter>
           <SideBarFooterItem
             visual={<MonoWindow />}
-            onPress={() => {}}
+            component={LinkComponent}
+            href="https://kadena.io"
             label="option 1"
           />
           <SideBarFooterItem

packages/libs/kode-ui/src/patterns/SideBarLayout/components/SideBarFooterItem.tsx

@@ -1,13 +1,15 @@
 import type { FC, PropsWithChildren } from 'react';
 import React from 'react';
 import type { PressEvent } from './../../../components';
-import { Button } from './../../../components';
+import { Button, Link } from './../../../components';
 
 export interface ISideBarFooterItemProps extends PropsWithChildren {
   visual: React.ReactElement;
   label: string;
-  onPress: (e: PressEvent) => void;
+  onPress?: (e: PressEvent) => void;
   isAppContext?: boolean;
+  href?: string;
+  component?: any;
 }
 
 export const SideBarFooterItem: FC<ISideBarFooterItemProps> = ({
@@ -16,11 +18,22 @@ export const SideBarFooterItem: FC<ISideBarFooterItemProps> = ({
   isAppContext = false,
   label,
   onPress,
+  href,
+  component,
 }) => {
   if (children) return children;
+
+  const handlePress = (e: PressEvent) => {
+    if (onPress) onPress(e);
+  };
+
+  const Component = href ? Link : Button;
+
   return (
-    <Button
-      onPress={onPress}
+    <Component
+      component={component}
+      href={href}
+      onPress={handlePress}
       aria-label={label}
       startVisual={visual}
       variant={isAppContext ? 'primary' : 'transparent'}