[END 3565] fix: catch and display failed to broadcast error (#751)

* fix: update stx speed up error messages * fix: error toast styling and shorten the speed up stx failure message
secretkeylabs · Jan 12, 2024 · cd7c798 · cd7c798
1 parent 8f0e3ac
commit cd7c798
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 6 deletions.
diff --git a/src/app/App.tsx b/src/app/App.tsx
@@ -1,5 +1,5 @@
 import LoadingScreen from '@components/loadingScreen';
-import { CheckCircle } from '@phosphor-icons/react';
+import { CheckCircle, XCircle } from '@phosphor-icons/react';
 import rootStore from '@stores/index';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
@@ -11,13 +11,20 @@ import { Toaster } from 'react-hot-toast';
 import { Provider } from 'react-redux';
 import { RouterProvider } from 'react-router-dom';
 import { PersistGate } from 'redux-persist/integration/react';
-import { ThemeProvider } from 'styled-components';
+import styled, { ThemeProvider } from 'styled-components';
 import '../locales';
 import Theme from '../theme';
 import GlobalStyle from '../theme/global';
 import SessionGuard from './components/guards/session';
 import router from './routes';
 
+// needed to keep the svg icon scale for toasts over multiple lines
+const StyledIcon = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
 function App(): JSX.Element {
   useEffect(() => {
     if (!MIX_PANEL_TOKEN) {
@@ -46,16 +53,33 @@ function App(): JSX.Element {
                   containerStyle={{ bottom: 80 }}
                   toastOptions={{
                     success: {
-                      icon: <CheckCircle size={20} weight="bold" />,
+                      icon: (
+                        <StyledIcon>
+                          <CheckCircle size={20} weight="bold" />
+                        </StyledIcon>
+                      ),
                       style: {
                         ...Theme.typography.body_medium_m,
                         backgroundColor: Theme.colors.success_medium,
                         borderRadius: Theme.radius(2),
-                        padding: Theme.spacing(4),
-                        paddingLeft: Theme.spacing(6),
+                        padding: Theme.space.s,
                         color: Theme.colors.elevation0,
                       },
                     },
+                    error: {
+                      icon: (
+                        <StyledIcon>
+                          <XCircle size={20} weight="bold" />
+                        </StyledIcon>
+                      ),
+                      style: {
+                        ...Theme.typography.body_medium_m,
+                        backgroundColor: Theme.colors.danger_dark,
+                        borderRadius: Theme.radius(2),
+                        padding: Theme.space.s,
+                        color: Theme.colors.white_0,
+                      },
+                    },
                   }}
                 />
               </ThemeProvider>

diff --git a/src/app/screens/speedUpTransaction/index.tsx b/src/app/screens/speedUpTransaction/index.tsx
@@ -185,10 +185,11 @@ function SpeedUpTransactionScreen() {
         return;
       }
 
-      toast.error('This transaction has already been confirmed in a microblock.');
+      toast.error('This transaction has already been confirmed in a block.');
       return;
     } catch (err: any) {
       console.error(err);
+      toast.error('Failed to broadcast transaction.');
     } finally {
       setIsBroadcasting(false);
     }