feat: new widget checkout design

packages/widget/src/AppDefault.tsx

@@ -8,7 +8,7 @@ import {
 } from '@tanstack/react-router'
 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,23 +133,6 @@ const routesTransactionExecutionDetailsRoute = createRoute({
   component: TransactionDetailsPage,
 })
 
-const activeTransactionsLayoutRoute = createRoute({
-  getParentRoute: () => rootRoute,
-  path: navigationRoutes.activeTransactions,
-})
-
-const activeTransactionsIndexRoute = createRoute({
-  getParentRoute: () => activeTransactionsLayoutRoute,
-  path: '/',
-  component: ActiveTransactionsPage,
-})
-
-const activeTransactionExecutionRoute = createRoute({
-  getParentRoute: () => activeTransactionsLayoutRoute,
-  path: navigationRoutes.transactionExecution,
-  component: TransactionPage,
-})
-
 const sendToWalletLayoutRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: navigationRoutes.sendToWallet,
@@ -186,23 +168,29 @@ const configuredWalletsRoute = createRoute({
   component: SendToConfiguredWalletPage,
 })
 
-const transactionHistoryLayoutRoute = createRoute({
+const activitiesLayoutRoute = createRoute({
   getParentRoute: () => rootRoute,
-  path: navigationRoutes.transactionHistory,
+  path: navigationRoutes.activities,
 })
 
-const transactionHistoryIndexRoute = createRoute({
-  getParentRoute: () => transactionHistoryLayoutRoute,
+const activitiesIndexRoute = createRoute({
+  getParentRoute: () => activitiesLayoutRoute,
   path: '/',
-  component: TransactionHistoryPage,
+  component: ActivitiesPage,
 })
 
-const transactionHistoryDetailsRoute = createRoute({
-  getParentRoute: () => transactionHistoryLayoutRoute,
+const activitiesDetailsRoute = createRoute({
+  getParentRoute: () => activitiesLayoutRoute,
   path: navigationRoutes.transactionDetails,
   component: TransactionDetailsPage,
 })
 
+const activitiesExecutionRoute = createRoute({
+  getParentRoute: () => activitiesLayoutRoute,
+  path: navigationRoutes.transactionExecution,
+  component: TransactionPage,
+})
+
 const transactionExecutionLayoutRoute = createRoute({
   getParentRoute: () => rootRoute,
   path: navigationRoutes.transactionExecution,
@@ -245,20 +233,17 @@ const routeTree = rootRoute.addChildren([
     transactionExecutionIndexRoute,
     transactionExecutionDetailsRoute,
   ]),
-  activeTransactionsLayoutRoute.addChildren([
-    activeTransactionsIndexRoute,
-    activeTransactionExecutionRoute,
-  ]),
   sendToWalletLayoutRoute.addChildren([
     sendToWalletIndexRoute,
     sendToWalletBookmarksRoute,
     sendToWalletRecentWalletsRoute,
     sendToWalletConnectedWalletsRoute,
   ]),
   configuredWalletsRoute,
-  transactionHistoryLayoutRoute.addChildren([
-    transactionHistoryIndexRoute,
-    transactionHistoryDetailsRoute,
+  activitiesLayoutRoute.addChildren([
+    activitiesIndexRoute,
+    activitiesDetailsRoute,
+    activitiesExecutionRoute,
   ]),
 ])
 

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

@@ -0,0 +1,27 @@
+import { Box, styled, Typography } from '@mui/material'
+
+export const ActionRowContainer = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: theme.spacing(1),
+  padding: theme.spacing(1),
+  borderRadius: theme.vars.shape.borderRadiusTertiary,
+  backgroundColor: `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.04)`,
+}))
+
+export const ActionIconCircle = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: 24,
+  height: 24,
+  borderRadius: '50%',
+  backgroundColor: `color-mix(in srgb, rgb(${theme.vars.palette.success.mainChannel}) 12%, ${theme.vars.palette.background.paper})`,
+}))
+
+export const ActionRowLabel = styled(Typography)(({ theme }) => ({
+  flex: 1,
+  fontSize: 12,
+  fontWeight: 500,
+  color: theme.vars.palette.text.primary,
+}))

packages/widget/src/components/ActionRow/ActionRow.tsx

@@ -0,0 +1,22 @@
+import type { FC, ReactNode } from 'react'
+import { ActionRowContainer, ActionRowLabel } from './ActionRow.style.js'
+
+interface ActionRowProps {
+  message: string
+  startAdornment: ReactNode
+  endAdornment?: ReactNode
+}
+
+export const ActionRow: FC<ActionRowProps> = ({
+  message,
+  startAdornment,
+  endAdornment,
+}) => {
+  return (
+    <ActionRowContainer>
+      {startAdornment}
+      <ActionRowLabel>{message}</ActionRowLabel>
+      {endAdornment}
+    </ActionRowContainer>
+  )
+}

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

@@ -46,13 +46,13 @@ export const Input = styled(InputBase)(({ theme }) => ({
 }))
 
 export const AmountInputCardTitle = styled(CardTitle)(({ theme }) => ({
-  padding: theme.spacing(2, 0, 0, 0),
+  padding: theme.spacing(0),
 }))
 
 export const AmountInputCardHeader = styled(Box)(({ theme }) => ({
-  padding: theme.spacing(0, 2, 0, 2),
+  margin: theme.spacing(2, 2, 0, 2),
   display: 'flex',
   justifyContent: 'space-between',
-  alignItems: 'start',
-  height: 30,
+  alignItems: 'center',
+  height: 28,
 }))