From cdf4069e82ca2b32b2c97651477abd0a7de1adbb Mon Sep 17 00:00:00 2001
From: Masood Abdolian <m.abdolian@gmail.com>
Date: Thu, 12 Dec 2024 15:11:34 +0330
Subject: [PATCH] feat: Improve the transaction dialog confirmation to enhance
 its responsiveness and user experience

---
 .changeset/rude-ads-check.md                  |   6 +
 .changeset/small-baboons-tap.md               |   5 +
 .../app/(bridge)/ConnectOrSubmitButton.tsx    | 153 +++++++++---------
 packages/ui-kit/src/components/common/App.tsx |  25 ++-
 .../src/components/common/EnhancedDialog.tsx  |  18 +++
 .../components/common/EnhancedDialogTitle.tsx |  14 +-
 .../ui-kit/src/components/common/Toolbar.tsx  |  10 ++
 .../ui-kit/src/components/common/index.ts     |   1 +
 8 files changed, 153 insertions(+), 79 deletions(-)
 create mode 100644 .changeset/rude-ads-check.md
 create mode 100644 .changeset/small-baboons-tap.md
 create mode 100644 packages/ui-kit/src/components/common/EnhancedDialog.tsx

diff --git a/.changeset/rude-ads-check.md b/.changeset/rude-ads-check.md
new file mode 100644
index 00000000..5302fe31
--- /dev/null
+++ b/.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
diff --git a/.changeset/small-baboons-tap.md b/.changeset/small-baboons-tap.md
new file mode 100644
index 00000000..6e5ea193
--- /dev/null
+++ b/.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
diff --git a/apps/rosen/app/(bridge)/ConnectOrSubmitButton.tsx b/apps/rosen/app/(bridge)/ConnectOrSubmitButton.tsx
index e10645c6..da932b3f 100644
--- a/apps/rosen/app/(bridge)/ConnectOrSubmitButton.tsx
+++ b/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>
     </>
   );
 };
diff --git a/packages/ui-kit/src/components/common/App.tsx b/packages/ui-kit/src/components/common/App.tsx
index f1f09f97..b9529dcf 100644
--- a/packages/ui-kit/src/components/common/App.tsx
+++ b/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 />
diff --git a/packages/ui-kit/src/components/common/EnhancedDialog.tsx b/packages/ui-kit/src/components/common/EnhancedDialog.tsx
new file mode 100644
index 00000000..31866e82
--- /dev/null
+++ b/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,
+      },
+    },
+  },
+}));
diff --git a/packages/ui-kit/src/components/common/EnhancedDialogTitle.tsx b/packages/ui-kit/src/components/common/EnhancedDialogTitle.tsx
index bfa02267..c35c403d 100644
--- a/packages/ui-kit/src/components/common/EnhancedDialogTitle.tsx
+++ b/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 />
diff --git a/packages/ui-kit/src/components/common/Toolbar.tsx b/packages/ui-kit/src/components/common/Toolbar.tsx
index bd2afcc9..e7d0049e 100644
--- a/packages/ui-kit/src/components/common/Toolbar.tsx
+++ b/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'}>
diff --git a/packages/ui-kit/src/components/common/index.ts b/packages/ui-kit/src/components/common/index.ts
index 9db3c086..b5e80934 100644
--- a/packages/ui-kit/src/components/common/index.ts
+++ b/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';