fix: mf-4967 snackbar style for multiple lines (#10444)

DimensionDev · Aug 18, 2023 · 6398db4 · 6398db4
1 parent c394df6
commit 6398db4
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 13 deletions.
diff --git a/packages/mask/src/extension/popups/pages/Wallet/components/ActivityList/index.tsx b/packages/mask/src/extension/popups/pages/Wallet/components/ActivityList/index.tsx
@@ -55,7 +55,7 @@ export const ActivityList = memo<ActivityListProps>(function ActivityList() {
         [navigate],
     )
 
-    if (isLoading && !localeTxes.length && !transactions.length)
+    if (!isLoading && !localeTxes.length && !transactions.length)
         return <EmptyStatus height="100%">{t('no_data')}</EmptyStatus>
 
     return (

diff --git a/packages/shared/src/UI/modals/TransactionSnackbar/TransactionSnackbar.tsx b/packages/shared/src/UI/modals/TransactionSnackbar/TransactionSnackbar.tsx
@@ -160,6 +160,7 @@ export function TransactionSnackbar<T extends NetworkPluginID>({ pluginID }: Tra
     }, [progress])
 
     useAsync(async () => {
+        if (!errorInfo) return
         const transaction = errorInfo?.request?.params?.[0] as Web3Helper.Definition[T]['Transaction'] | undefined
         const computed = transaction ? await TransactionFormatter?.formatTransaction?.(chainId, transaction) : undefined
         const title = computed?.snackbar?.failedTitle ?? computed?.title

diff --git a/packages/theme/src/Components/Snackbar/PopupSnackbar.tsx b/packages/theme/src/Components/Snackbar/PopupSnackbar.tsx
@@ -24,7 +24,8 @@ const useStyles = makeStyles()((theme) => ({
     },
     content: {
         width: '100vw',
-        padding: '8px 0',
+        padding: '8px',
+        boxSizing: 'border-box',
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
@@ -34,6 +35,10 @@ const useStyles = makeStyles()((theme) => ({
         lineHeight: '18px',
         padding: '0 8px',
     },
+    message: {
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+    },
     success: {
         background: alpha(theme.palette.maskColor.success, 0.5),
         color: theme.palette.maskColor.white,
@@ -82,18 +87,20 @@ export interface PopupSnackbarContentProps {
     variant?: VariantType
 }
 
-export const PopupSnackbarContent = forwardRef<HTMLDivElement, PopupSnackbarContentProps>((props, ref) => {
-    const { classes, cx } = useStyles()
+export const PopupSnackbarContent = forwardRef<HTMLDivElement, PopupSnackbarContentProps>(
+    ({ id, title, message, variant }, ref) => {
+        const { classes, cx } = useStyles()
 
-    return (
-        <SnackbarContent key={props.id} className={cx(classes.content, classes[props.variant!])} ref={ref}>
-            <Typography className={classes.title} component="div">
-                {props.title}
-            </Typography>
-            {props.message}
-        </SnackbarContent>
-    )
-})
+        return (
+            <SnackbarContent key={id} className={cx(classes.content, classes[variant!])} ref={ref}>
+                <Typography className={classes.title} component="div">
+                    {title}
+                </Typography>
+                {typeof message === 'string' ? <Typography className={classes.message}>{message}</Typography> : message}
+            </SnackbarContent>
+        )
+    },
+)
 
 export function usePopupCustomSnackbar() {
     const { enqueueSnackbar, closeSnackbar } = useSnackbar()