feat: add activities page

packages/widget/src/AppDefault.tsx

@@ -8,7 +8,7 @@ import {
 import type { JSX } from 'react'
 import { AppLayout } from './AppLayout.js'
 import { NotFound } from './components/NotFound.js'
-import { ActiveTransactionsPage } from './pages/ActiveTransactionsPage/ActiveTransactionsPage.js'
+import { ActivitiesPage } from './pages/ActivitiesPage/ActivitiesPage.js'
 import { LanguagesPage } from './pages/LanguagesPage.js'
 import { MainPage } from './pages/MainPage/MainPage.js'
 import { RoutesPage } from './pages/RoutesPage/RoutesPage.js'
@@ -22,7 +22,6 @@ import { SendToConfiguredWalletPage } from './pages/SendToWallet/SendToConfigure
 import { SendToWalletPage } from './pages/SendToWallet/SendToWalletPage.js'
 import { SettingsPage } from './pages/SettingsPage/SettingsPage.js'
 import { TransactionDetailsPage } from './pages/TransactionDetailsPage/TransactionDetailsPage.js'
-import { TransactionHistoryPage } from './pages/TransactionHistoryPage/TransactionHistoryPage.js'
 import { TransactionPage } from './pages/TransactionPage/TransactionPage.js'
 import { navigationRoutes } from './utils/navigationRoutes.js'
 
@@ -134,19 +133,25 @@ const routesTransactionExecutionDetailsRoute = createRoute({
   component: TransactionDetailsPage,
 })
 
-const activeTransactionsLayoutRoute = createRoute({
+const activitiesLayoutRoute = createRoute({
   getParentRoute: () => rootRoute,
-  path: navigationRoutes.activeTransactions,
+  path: navigationRoutes.activities,
 })
 
-const activeTransactionsIndexRoute = createRoute({
-  getParentRoute: () => activeTransactionsLayoutRoute,
+const activitiesIndexRoute = createRoute({
+  getParentRoute: () => activitiesLayoutRoute,
   path: '/',
-  component: ActiveTransactionsPage,
+  component: ActivitiesPage,
 })
 
-const activeTransactionExecutionRoute = createRoute({
-  getParentRoute: () => activeTransactionsLayoutRoute,
+const activitiesDetailsRoute = createRoute({
+  getParentRoute: () => activitiesLayoutRoute,
+  path: navigationRoutes.transactionDetails,
+  component: TransactionDetailsPage,
+})
+
+const activitiesTransactionExecutionRoute = createRoute({
+  getParentRoute: () => activitiesLayoutRoute,
   path: navigationRoutes.transactionExecution,
   component: TransactionPage,
 })
@@ -186,23 +191,6 @@ const configuredWalletsRoute = createRoute({
   component: SendToConfiguredWalletPage,
 })
 
-const transactionHistoryLayoutRoute = createRoute({
-  getParentRoute: () => rootRoute,
-  path: navigationRoutes.transactionHistory,
-})
-
-const transactionHistoryIndexRoute = createRoute({
-  getParentRoute: () => transactionHistoryLayoutRoute,
-  path: '/',
-  component: TransactionHistoryPage,
-})
-
-const transactionHistoryDetailsRoute = createRoute({
-  getParentRoute: () => transactionHistoryLayoutRoute,
-  path: navigationRoutes.transactionDetails,
-  component: TransactionDetailsPage,
-})
-
 const transactionExecutionLayoutRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: navigationRoutes.transactionExecution,
@@ -245,9 +233,10 @@ const routeTree = rootRoute.addChildren([
     transactionExecutionIndexRoute,
     transactionExecutionDetailsRoute,
   ]),
-  activeTransactionsLayoutRoute.addChildren([
-    activeTransactionsIndexRoute,
-    activeTransactionExecutionRoute,
+  activitiesLayoutRoute.addChildren([
+    activitiesIndexRoute,
+    activitiesDetailsRoute,
+    activitiesTransactionExecutionRoute,
   ]),
   sendToWalletLayoutRoute.addChildren([
     sendToWalletIndexRoute,
@@ -256,10 +245,6 @@ const routeTree = rootRoute.addChildren([
     sendToWalletConnectedWalletsRoute,
   ]),
   configuredWalletsRoute,
-  transactionHistoryLayoutRoute.addChildren([
-    transactionHistoryIndexRoute,
-    transactionHistoryDetailsRoute,
-  ]),
 ])
 
 const history = createMemoryHistory({

packages/widget/src/components/BottomSheet/BottomSheet.tsx

@@ -9,7 +9,7 @@ import {
   useState,
 } from 'react'
 import { useGetScrollableContainer } from '../../hooks/useScrollableContainer.js'
-import { modalProps, slotProps } from '../Dialog.js'
+import { modalProps, slotProps } from '../Dialog/Dialog.js'
 import type { BottomSheetBase, BottomSheetProps } from './types.js'
 
 export const BottomSheet: ForwardRefExoticComponent<

packages/widget/src/components/ContextMenu.style.tsx

@@ -0,0 +1,13 @@
+import { IconButton, styled } from '@mui/material'
+import type React from 'react'
+
+export const ContextMenuButton: React.FC<
+  React.ComponentProps<typeof IconButton>
+> = styled(IconButton)(({ theme }) => ({
+  position: 'absolute',
+  top: theme.spacing(1.75),
+  right: theme.spacing(2),
+  '&:hover': {
+    backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+  },
+}))

packages/widget/src/components/ContextMenu.tsx

@@ -0,0 +1,75 @@
+import MoreVertIcon from '@mui/icons-material/MoreVert'
+import type { SxProps, Theme } from '@mui/material'
+import { MenuItem } from '@mui/material'
+import { type JSX, useId, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { ContextMenuButton } from './ContextMenu.style.js'
+import { Menu } from './Menu.js'
+
+export interface ContextMenuItemConfig {
+  icon: React.ReactNode
+  label: string
+  onClick: () => void
+}
+
+interface ContextMenuProps {
+  items: ContextMenuItemConfig[]
+  disabled?: boolean
+  buttonSx?: SxProps<Theme>
+}
+
+export const ContextMenu = ({
+  items,
+  disabled,
+  buttonSx,
+}: ContextMenuProps): JSX.Element => {
+  const { t } = useTranslation()
+  const menuId = useId()
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
+  const open = Boolean(anchorEl)
+
+  const handleOpen = (e: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(e.currentTarget)
+  }
+
+  const closeMenu = () => {
+    setAnchorEl(null)
+  }
+
+  const handleItemClick = (onClick: () => void) => () => {
+    onClick()
+    closeMenu()
+  }
+
+  return (
+    <>
+      <ContextMenuButton
+        aria-label={t('button.options')}
+        aria-controls={open ? menuId : undefined}
+        aria-haspopup="true"
+        aria-expanded={open ? 'true' : undefined}
+        onClick={handleOpen}
+        sx={{ opacity: disabled ? 0.5 : 1, ...buttonSx }}
+        disableRipple
+      >
+        <MoreVertIcon fontSize="small" />
+      </ContextMenuButton>
+      <Menu
+        id={menuId}
+        elevation={0}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+        anchorEl={anchorEl}
+        open={open}
+        onClose={closeMenu}
+      >
+        {items.map((item) => (
+          <MenuItem key={item.label} onClick={handleItemClick(item.onClick)}>
+            {item.icon}
+            {item.label}
+          </MenuItem>
+        ))}
+      </Menu>
+    </>
+  )
+}