Merge branch '466-improve-the-transaction-dialog-confirmation-to-enha…

…nce-its-responsiveness-and-user-experience' into 'dev'

Resolve "Improve the transaction dialog confirmation to enhance its responsiveness and user experience"

Closes #466

See merge request ergo/rosen-bridge/ui!389

.changeset/rude-ads-check.md

@@ -0,0 +1,6 @@
+---
+'@rosen-bridge/ui-kit': minor
+---
+
+- Revise the default layout to incorporate toolbar buttons into the sidebar for mobile devices
+- Create an improved dialogue that aligns with our Figma design and ensures responsiveness

.changeset/small-baboons-tap.md

@@ -0,0 +1,5 @@
+---
+'@rosen-bridge/rosen-app': minor
+---
+
+Improve the transaction dialog confirmation to enhance its responsiveness and user experience

apps/rosen/app/(bridge)/ConnectOrSubmitButton.tsx

@@ -5,9 +5,10 @@ import {
   Amount,
   Box,
   Card,
-  Dialog,
   DialogActions,
+  DialogContent,
   Divider,
+  EnhancedDialog,
   EnhancedDialogTitle,
   Grid,
   LoadingButton,
@@ -121,87 +122,93 @@ export const ConnectOrSubmitButton = ({
       >
         {!selectedWallet ? 'CONNECT WALLET' : 'SUBMIT'}
       </LoadingButton>
-      <Dialog open={open} maxWidth="tablet" onClose={() => setOpen(false)}>
+      <EnhancedDialog
+        open={open}
+        maxWidth="tablet"
+        scroll="paper"
+        onClose={() => setOpen(false)}
+      >
         <EnhancedDialogTitle
           icon={<CommentAltExclamation />}
           onClose={() => setOpen(false)}
         >
           Confirm Transaction
         </EnhancedDialogTitle>
-        <Card
-          sx={{
-            backgroundColor: (theme) =>
-              theme.palette.mode === 'light'
-                ? theme.palette.primary.light
-                : theme.palette.primary.dark,
-            px: 2,
-            py: 3,
-            mx: 3,
-          }}
-        >
-          <Grid container justifyContent="center">
-            <Amount
-              value={amountValue || 0}
-              size="large"
-              unit={tokenInfo?.tokenName}
-            />
-          </Grid>
-          <Box
+        <DialogContent sx={{ py: 0 }}>
+          <Card
             sx={{
-              display: 'grid',
-              gridTemplateColumns: 'auto auto auto',
-              justifyContent: 'center',
-              columnGap: 2,
-              rowGap: 0.5,
-              my: 3,
+              backgroundColor: (theme) =>
+                theme.palette.mode === 'light'
+                  ? theme.palette.primary.light
+                  : theme.palette.primary.dark,
+              px: 2,
+              py: 3,
             }}
           >
-            <Grid container alignItems="center" gap={1}>
-              {SourceLogo && (
-                <SvgIcon>
-                  <SourceLogo />
-                </SvgIcon>
-              )}
-              <Typography color="text.primary">{source?.label}</Typography>
-            </Grid>
-            <SvgIcon>
-              <ArrowRight />
-            </SvgIcon>
-            <Grid container alignItems="center" gap={1}>
-              {TargetLogo && (
-                <SvgIcon>
-                  <TargetLogo />
-                </SvgIcon>
-              )}
-              <Typography color="text.primary">{target?.label}</Typography>
+            <Grid container justifyContent="center">
+              <Amount
+                value={amountValue || 0}
+                size="large"
+                unit={tokenInfo?.tokenName}
+              />
             </Grid>
-          </Box>
-          <Divider sx={{ my: 2 }} />
-          <Amount
-            title="Transaction Fee"
-            value={networkFeeRaw}
-            unit={tokenInfo?.tokenName}
-          />
-          <Box sx={{ my: 2 }} />
-          <Amount
-            title="Bridge Fee"
-            value={bridgeFeeRaw}
-            unit={tokenInfo?.tokenName}
-          />
-          <Box sx={{ my: 2 }} />
-          <Amount
-            title="Received amount"
-            value={receivingAmountRaw}
-            unit={targetTokenInfo?.name}
-          />
-          <Divider sx={{ my: 2 }} />
-          <Typography variant="body2" color="text.secondary">
-            Destination address
-          </Typography>
-          <Typography sx={{ wordBreak: 'break-all' }}>
-            {walletAddressValue}
-          </Typography>
-        </Card>
+            <Box
+              sx={{
+                display: 'grid',
+                gridTemplateColumns: 'auto auto auto',
+                justifyContent: 'center',
+                columnGap: 2,
+                rowGap: 0.5,
+                my: 3,
+              }}
+            >
+              <Grid container alignItems="center" gap={1}>
+                {SourceLogo && (
+                  <SvgIcon>
+                    <SourceLogo />
+                  </SvgIcon>
+                )}
+                <Typography color="text.primary">{source?.label}</Typography>
+              </Grid>
+              <SvgIcon>
+                <ArrowRight />
+              </SvgIcon>
+              <Grid container alignItems="center" gap={1}>
+                {TargetLogo && (
+                  <SvgIcon>
+                    <TargetLogo />
+                  </SvgIcon>
+                )}
+                <Typography color="text.primary">{target?.label}</Typography>
+              </Grid>
+            </Box>
+            <Divider sx={{ my: 2 }} />
+            <Amount
+              title="Transaction Fee"
+              value={networkFeeRaw}
+              unit={tokenInfo?.tokenName}
+            />
+            <Box sx={{ my: 2 }} />
+            <Amount
+              title="Bridge Fee"
+              value={bridgeFeeRaw}
+              unit={tokenInfo?.tokenName}
+            />
+            <Box sx={{ my: 2 }} />
+            <Amount
+              title="Received amount"
+              value={receivingAmountRaw}
+              unit={targetTokenInfo?.name}
+            />
+            <Divider sx={{ my: 2 }} />
+            <Typography variant="body2" color="text.secondary">
+              Destination address
+            </Typography>
+            <Typography sx={{ wordBreak: 'break-all' }}>
+              {walletAddressValue}
+            </Typography>
+          </Card>
+        </DialogContent>
         <DialogActions>
           <LoadingButton
             color="secondary"
@@ -222,7 +229,7 @@ export const ConnectOrSubmitButton = ({
             Confirm
           </LoadingButton>
         </DialogActions>
-      </Dialog>
+      </EnhancedDialog>
     </>
   );
 };

packages/ui-kit/src/components/common/App.tsx

@@ -1,9 +1,10 @@
 import { ReactNode } from 'react';
 
 import { SnackbarProvider } from '../../contexts';
+import { useMediaQuery } from '../../hooks';
 import { ThemeProvider, ThemeProviderProps } from '../../Providers';
 import { styled } from '../../styling';
-import { CssBaseline } from '../base';
+import { Box, CssBaseline } from '../base';
 import { AppSnackbar } from './AppSnackbar';
 
 const Root = styled('div', {
@@ -49,15 +50,33 @@ interface AppProps {
 }
 
 export const App = ({ children, sideBar, theme, toolbar }: AppProps) => {
+  const isMobile = useMediaQuery(
+    ('light' in theme ? theme.light : theme).breakpoints.down('tablet'),
+  );
   return (
     <ThemeProvider theme={theme}>
       <>
         <CssBaseline />
         <SnackbarProvider>
           <Root>
-            {sideBar}
+            {isMobile ? (
+              <Box
+                display="flex"
+                alignItems="center"
+                justifyContent="space-between"
+              >
+                {sideBar}
+                {toolbar}
+              </Box>
+            ) : (
+              sideBar
+            )}
             <Main>
-              <div style={{ position: 'relative', zIndex: '1' }}>{toolbar}</div>
+              {!isMobile && (
+                <div style={{ position: 'relative', zIndex: '1' }}>
+                  {toolbar}
+                </div>
+              )}
               {children}
             </Main>
             <AppSnackbar />

packages/ui-kit/src/components/common/EnhancedDialog.tsx

@@ -0,0 +1,18 @@
+import { styled } from '../../styling';
+import { Dialog } from '../base';
+
+/**
+ * renders an enhanced version of material ui Dialog
+ */
+export const EnhancedDialog = styled(Dialog)(({ theme }) => ({
+  [theme.breakpoints.down('tablet')]: {
+    '& > .MuiDialog-container': {
+      'alignItems': 'end',
+      '& > .MuiPaper-root': {
+        margin: 0,
+        borderBottomRightRadius: 0,
+        borderBottomLeftRadius: 0,
+      },
+    },
+  },
+}));

packages/ui-kit/src/components/common/EnhancedDialogTitle.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { styled } from '@mui/material';
 import { Times } from '@rosen-bridge/icons';
 
+import { useIsMobile } from '../../hooks';
 import { DialogTitle, DialogTitleProps, IconButton, SvgIcon } from '../base';
 
 const IconContainer = styled('div')(({ theme }) => ({
@@ -25,15 +26,22 @@ export const EnhancedDialogTitle = ({
   onClose,
   ...props
 }: EnhancedDialogTitleProps) => {
+  const isMobile = useIsMobile();
   return (
-    <DialogTitle {...props} display="flex" alignItems="center" gap={2}>
-      {icon && (
+    <DialogTitle
+      {...props}
+      display="flex"
+      alignItems="center"
+      flexDirection={isMobile ? 'column' : 'row'}
+      gap={2}
+    >
+      {!isMobile && icon && (
         <IconContainer>
           <SvgIcon sx={{ height: 20, width: 20 }}>{icon}</SvgIcon>
         </IconContainer>
       )}
       <span style={{ flexGrow: 1 }}>{props.children}</span>
-      {onClose && (
+      {!isMobile && onClose && (
         <IconButton onClick={onClose}>
           <SvgIcon>
             <Times />

packages/ui-kit/src/components/common/Toolbar.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { useIsMobile } from '../../hooks';
 import { isLegacyTheme, useTheme } from '../../hooks/useTheme';
 import { styled } from '../../styling';
 import { Typography, Stack, Grid } from '../base';
@@ -40,6 +41,15 @@ export const Toolbar: React.FC<ToolbarProps> = (props) => {
   const theme = useTheme();
   const textAlign = isCentered ? 'center' : 'inherit';
 
+  const isMobile = useIsMobile();
+
+  if (isMobile)
+    return (
+      <div className="toolbar">
+        <Stack direction="row">{toolbarActions}</Stack>
+      </div>
+    );
+
   return (
     <Header>
       <Grid container alignItems={isLegacyTheme(theme) ? 'stretch' : 'center'}>

packages/ui-kit/src/components/common/index.ts

@@ -4,6 +4,7 @@ export * from './ApiKeyModal';
 export * from './App';
 export * from './AppBar';
 export * from './AppLogo';
+export * from './EnhancedDialog';
 export * from './EnhancedDialogTitle';
 export * from './EnhancedTable';
 export * from './EnhancedTableCell';