From 7b03231f535ea0dd2185a4dc5dfe117104bc4450 Mon Sep 17 00:00:00 2001
From: infiniteMajor <maria.yablonskaya@altoros.com>
Date: Mon, 17 Jan 2022 06:06:24 +0300
Subject: [PATCH 01/15] notifications

---
 src/components/Notification.tsx              | 95 ++++++++++++++++++++
 src/components/orders/OrderDetails/index.tsx |  8 +-
 src/theme/styles/colours.ts                  |  2 +
 3 files changed, 101 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Notification.tsx

diff --git a/src/components/Notification.tsx b/src/components/Notification.tsx
new file mode 100644
index 000000000..675855c49
--- /dev/null
+++ b/src/components/Notification.tsx
@@ -0,0 +1,95 @@
+import React, { useState } from 'react'
+import styled from 'styled-components'
+import { transparentize } from 'polished'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faExclamation } from '@fortawesome/free-solid-svg-icons'
+
+interface NotificationProps {
+  type: string
+  message: string
+}
+
+export const NotificationWrap = styled.p<{ isActive?: boolean; type: string }>`
+  border-radius: 4px;
+  padding: 10px 15px;
+  background-color: ${({ theme }): string => transparentize(0.8, theme.red4)};
+  font-size: 12px;
+  display: ${({ isActive }): string => (isActive ? 'flex' : 'none')};
+  align-items: center;
+
+  button {
+    cursor: pointer;
+    border: 0;
+    background-color: transparent;
+    background-image: none;
+    padding: 0;
+    width: 40px;
+    min-height: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    position: relative;
+    &:before,
+    &:after {
+      content: '';
+      display: block;
+      width: 20px;
+      height: 2px;
+      background-color: ${({ theme }): string => theme.textPrimary1};
+      position: absolute;
+    }
+    &:after {
+      transform: rotate(-45deg);
+      left: 50%;
+    }
+    &:before {
+      left: 50%;
+      transform: rotate(45deg);
+    }
+  }
+
+  span {
+    flex-grow: 1;
+    margin: 0 20px;
+  }
+`
+
+const IconCircle = styled.p`
+  width: 20px;
+  height: 20px;
+  padding: 2px;
+  border: 2px solid ${({ theme }): string => theme.red4};
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  svg,
+  svg.svg-inline--fa {
+    color: ${({ theme }): string => theme.red4};
+    width: 10px;
+    height: 11px;
+  }
+`
+
+export const Notification: React.FC<NotificationProps> = ({ type, message }: NotificationProps) => {
+  const [isNoteActive, setIsNoteActive] = useState(true)
+
+  console.log('ok', isNoteActive)
+
+  const dismiss = (): void => {
+    console.log('ok', isNoteActive)
+    setIsNoteActive(false)
+    console.log('after', isNoteActive)
+  }
+
+  return (
+    <NotificationWrap type={type} isActive={isNoteActive}>
+      <IconCircle>
+        <FontAwesomeIcon icon={faExclamation} />
+      </IconCircle>
+      <span>{message}</span>
+      <button onClick={(): void => dismiss()} />
+    </NotificationWrap>
+  )
+}
diff --git a/src/components/orders/OrderDetails/index.tsx b/src/components/orders/OrderDetails/index.tsx
index 4ba6bc064..a7940eedb 100644
--- a/src/components/orders/OrderDetails/index.tsx
+++ b/src/components/orders/OrderDetails/index.tsx
@@ -9,6 +9,7 @@ import { Order, Trade } from 'api/operator'
 import { DetailsTable } from 'components/orders/DetailsTable'
 import { RowWithCopyButton } from 'components/common/RowWithCopyButton'
 import RedirectToSearch from 'components/RedirectToSearch'
+import { Notification } from 'components/Notification'
 
 const TitleUid = styled(RowWithCopyButton)`
   color: ${({ theme }): string => theme.grey};
@@ -58,14 +59,13 @@ export const OrderDetails: React.FC<Props> = (props) => {
         {order && 'Order details'}
         {order && <TitleUid textToCopy={order.uid} contentsToDisplay={order.shortId} />}
       </h1>
+      {Object.keys(errors).map((key) => (
+        <Notification key={key} type={'error'} message={errors[key]} />
+      ))}
       {/* TODO: add tabs (overview/fills) */}
       {order && areTokensLoaded && <DetailsTable order={{ ...order, txHash }} areTradesLoading={areTradesLoading} />}
       {/* TODO: add fills tab for partiallyFillable orders */}
       {!isOrderLoading && order && !areTokensLoaded && <p>Not able to load tokens</p>}
-      {/* TODO: do a better error display. Toast notification maybe? */}
-      {Object.keys(errors).map((key) => (
-        <p key={key}>{errors[key]}</p>
-      ))}
       {/* TODO: create common loading indicator */}
       {isLoadingForTheFirstTime && <FontAwesomeIcon icon={faSpinner} spin size="3x" />}
     </>
diff --git a/src/theme/styles/colours.ts b/src/theme/styles/colours.ts
index f69716dc2..1c19b1e34 100644
--- a/src/theme/styles/colours.ts
+++ b/src/theme/styles/colours.ts
@@ -34,6 +34,7 @@ export interface Colors {
   red1: Color
   red2: Color
   red3?: Color
+  red4: Color
   grey: Color
   greyShade: Color
   greyOpacity: Color
@@ -62,6 +63,7 @@ export const BASE_COLOURS = {
   red1: '#FF305B',
   red2: '#FF6871',
   red3: '#F82D3A',
+  red4: '#d83265',
   green1: '#00C46E',
   green2: '#09371d',
   green3: '#a9ffcd',

From 817424312881def4f8bdc6c6c5aea00e62367fa8 Mon Sep 17 00:00:00 2001
From: infiniteMajor <maria.yablonskaya@altoros.com>
Date: Mon, 17 Jan 2022 13:21:58 +0300
Subject: [PATCH 02/15] upds

---
 src/components/Notification.tsx | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/src/components/Notification.tsx b/src/components/Notification.tsx
index 675855c49..27b949582 100644
--- a/src/components/Notification.tsx
+++ b/src/components/Notification.tsx
@@ -75,21 +75,13 @@ const IconCircle = styled.p`
 export const Notification: React.FC<NotificationProps> = ({ type, message }: NotificationProps) => {
   const [isNoteActive, setIsNoteActive] = useState(true)
 
-  console.log('ok', isNoteActive)
-
-  const dismiss = (): void => {
-    console.log('ok', isNoteActive)
-    setIsNoteActive(false)
-    console.log('after', isNoteActive)
-  }
-
   return (
     <NotificationWrap type={type} isActive={isNoteActive}>
       <IconCircle>
         <FontAwesomeIcon icon={faExclamation} />
       </IconCircle>
       <span>{message}</span>
-      <button onClick={(): void => dismiss()} />
+      <button onClick={(): void => setIsNoteActive(false)} />
     </NotificationWrap>
   )
 }

From 8b3219658b79166aed808b7be1e955069353d7b9 Mon Sep 17 00:00:00 2001
From: infiniteMajor <maria.yablonskaya@altoros.com>
Date: Tue, 18 Jan 2022 00:50:41 +0300
Subject: [PATCH 03/15] upds

---
 src/apps/explorer/pages/UserDetails.tsx |  11 ++-
 src/components/Notification.tsx         | 102 ++++++++++++------------
 src/components/icons/index.tsx          |  25 ++++++
 3 files changed, 84 insertions(+), 54 deletions(-)
 create mode 100644 src/components/icons/index.tsx

diff --git a/src/apps/explorer/pages/UserDetails.tsx b/src/apps/explorer/pages/UserDetails.tsx
index 2ba86a055..fd0a0dc41 100644
--- a/src/apps/explorer/pages/UserDetails.tsx
+++ b/src/apps/explorer/pages/UserDetails.tsx
@@ -10,6 +10,7 @@ import { RowWithCopyButton } from 'components/common/RowWithCopyButton'
 import RedirectToSearch from 'components/RedirectToSearch'
 import { useResolveEns } from 'hooks/useResolveEns'
 import Spinner from 'components/common/Spinner'
+import { Notification } from 'components/Notification'
 
 const Wrapper = styled.div`
   padding: 1.6rem;
@@ -37,7 +38,12 @@ const TitleAddress = styled(RowWithCopyButton)`
   display: flex;
   align-items: center;
 `
-const UserDetails: React.FC = () => {
+
+export type Props = {
+  errors: Record<string, string>
+}
+
+const UserDetails: React.FC<Props> = ({ errors }) => {
   const { address } = useParams<{ address: string }>()
   const networkId = useNetworkId() || undefined
   const addressAccount = useResolveEns(address)
@@ -64,6 +70,9 @@ const UserDetails: React.FC = () => {
               }
             />
           </h1>
+          {Object.keys(errors).map((key) => (
+            <Notification key={key} type={'error'} message={errors[key]} />
+          ))}
           <OrdersTableWidget ownerAddress={addressAccount.address} networkId={networkId} />
         </>
       ) : (
diff --git a/src/components/Notification.tsx b/src/components/Notification.tsx
index 27b949582..a4c33c7ee 100644
--- a/src/components/Notification.tsx
+++ b/src/components/Notification.tsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import styled from 'styled-components'
 import { transparentize } from 'polished'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faExclamation } from '@fortawesome/free-solid-svg-icons'
+import { faExclamationEllipsis, faExclamationTriangle } from './icons'
 
 interface NotificationProps {
   type: string
@@ -10,78 +10,74 @@ interface NotificationProps {
 }
 
 export const NotificationWrap = styled.p<{ isActive?: boolean; type: string }>`
-  border-radius: 4px;
-  padding: 10px 15px;
-  background-color: ${({ theme }): string => transparentize(0.8, theme.red4)};
+  border-radius: 6px;
+  padding: 10px 16px;
+  background-color: ${({ theme, type }): string =>
+    type === 'error' ? transparentize(0.8, theme.red4) : transparentize(0.8, theme.orange)};
   font-size: 12px;
   display: ${({ isActive }): string => (isActive ? 'flex' : 'none')};
   align-items: center;
-
-  button {
-    cursor: pointer;
-    border: 0;
-    background-color: transparent;
-    background-image: none;
-    padding: 0;
-    width: 40px;
-    min-height: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    position: relative;
-    &:before,
-    &:after {
-      content: '';
-      display: block;
-      width: 20px;
-      height: 2px;
-      background-color: ${({ theme }): string => theme.textPrimary1};
-      position: absolute;
-    }
-    &:after {
-      transform: rotate(-45deg);
-      left: 50%;
-    }
-    &:before {
-      left: 50%;
-      transform: rotate(45deg);
-    }
-  }
+  margin: 0;
 
   span {
     flex-grow: 1;
-    margin: 0 20px;
+    margin: 0 16px;
+    line-height: 1.2;
+    max-width: calc(100% - 90px);
+  }
+
+  .svg-inline--fa {
+    color: ${({ theme, type }): string => (type === 'error' ? theme.red4 : theme.orange)};
+    width: 16px;
+    height: 16px;
+  }
+
+  &:not(:last-of-type) {
+    margin-bottom: 16px;
   }
 `
 
-const IconCircle = styled.p`
-  width: 20px;
-  height: 20px;
-  padding: 2px;
-  border: 2px solid ${({ theme }): string => theme.red4};
-  border-radius: 50%;
+const CloseButton = styled.button`
+  cursor: pointer;
+  border: 0;
+  background-color: transparent;
+  background-image: none;
+  padding: 0;
+  width: 40px;
+  min-height: 20px;
   display: flex;
   align-items: center;
-  justify-content: center;
-  margin: 0;
-  svg,
-  svg.svg-inline--fa {
-    color: ${({ theme }): string => theme.red4};
-    width: 10px;
-    height: 11px;
+  justify-content: flex-end;
+  position: relative;
+  &:before,
+  &:after {
+    content: '';
+    display: block;
+    width: 20px;
+    height: 2px;
+    background-color: ${({ theme }): string => theme.textPrimary1};
+    position: absolute;
+  }
+  &:after {
+    transform: rotate(-45deg);
+    left: 50%;
+  }
+  &:before {
+    left: 50%;
+    transform: rotate(45deg);
   }
 `
 
 export const Notification: React.FC<NotificationProps> = ({ type, message }: NotificationProps) => {
   const [isNoteActive, setIsNoteActive] = useState(true)
 
+  const icon = type === 'error' ? faExclamationEllipsis : faExclamationTriangle
+
   return (
     <NotificationWrap type={type} isActive={isNoteActive}>
-      <IconCircle>
-        <FontAwesomeIcon icon={faExclamation} />
-      </IconCircle>
+      <FontAwesomeIcon icon={icon} />
       <span>{message}</span>
-      <button onClick={(): void => setIsNoteActive(false)} />
+      <CloseButton onClick={(): void => setIsNoteActive(false)} />
     </NotificationWrap>
   )
 }
diff --git a/src/components/icons/index.tsx b/src/components/icons/index.tsx
new file mode 100644
index 000000000..24b494d00
--- /dev/null
+++ b/src/components/icons/index.tsx
@@ -0,0 +1,25 @@
+import { IconDefinition } from '@fortawesome/free-solid-svg-icons'
+
+export const faExclamationTriangle: IconDefinition = {
+  prefix: 'fas',
+  iconName: 'exclamation-triangle',
+  icon: [
+    512,
+    512,
+    [],
+    '',
+    'M248.747 204.705l6.588 112c.373 6.343 5.626 11.295 11.979 11.295h41.37a12 12 0 0 0 11.979-11.295l6.588-112c.405-6.893-5.075-12.705-11.979-12.705h-54.547c-6.903 0-12.383 5.812-11.978 12.705zM330 384c0 23.196-18.804 42-42 42s-42-18.804-42-42 18.804-42 42-42 42 18.804 42 42zm-.423-360.015c-18.433-31.951-64.687-32.009-83.154 0L6.477 440.013C-11.945 471.946 11.118 512 48.054 512H527.94c36.865 0 60.035-39.993 41.577-71.987L329.577 23.985zM53.191 455.002L282.803 57.008c2.309-4.002 8.085-4.002 10.394 0l229.612 397.993c2.308 4-.579 8.998-5.197 8.998H58.388c-4.617.001-7.504-4.997-5.197-8.997z',
+  ],
+}
+
+export const faExclamationEllipsis: IconDefinition = {
+  prefix: 'fas',
+  iconName: 'exclamation-circle',
+  icon: [
+    512,
+    512,
+    [],
+    '',
+    'M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm42-104c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42zm-81.37-211.401l6.8 136c.319 6.387 5.591 11.401 11.985 11.401h41.17c6.394 0 11.666-5.014 11.985-11.401l6.8-136c.343-6.854-5.122-12.599-11.985-12.599h-54.77c-6.863 0-12.328 5.745-11.985 12.599z',
+  ],
+}

From e324b8d937013510cc7b7d435193e4125ab0be8b Mon Sep 17 00:00:00 2001
From: infiniteMajor <maria.yablonskaya@altoros.com>
Date: Tue, 18 Jan 2022 02:58:37 +0300
Subject: [PATCH 04/15] message upds

---
 src/components/Notification.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/Notification.tsx b/src/components/Notification.tsx
index a4c33c7ee..02cd082f9 100644
--- a/src/components/Notification.tsx
+++ b/src/components/Notification.tsx
@@ -3,6 +3,7 @@ import styled from 'styled-components'
 import { transparentize } from 'polished'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faExclamationEllipsis, faExclamationTriangle } from './icons'
+import { Link } from 'react-router-dom'
 
 interface NotificationProps {
   type: string
@@ -76,7 +77,12 @@ export const Notification: React.FC<NotificationProps> = ({ type, message }: Not
   return (
     <NotificationWrap type={type} isActive={isNoteActive}>
       <FontAwesomeIcon icon={icon} />
-      <span>{message}</span>
+      <span>
+        {message}{' '}
+        {type === 'error'
+          ? 'Please' + <Link to="/">try again</Link> + 'later.'
+          : 'Please try ' + <Link to="/">refresh</Link> + 'to see new stuff.'}
+      </span>
       <CloseButton onClick={(): void => setIsNoteActive(false)} />
     </NotificationWrap>
   )

From 0fcf6999561d099bd892281a59fc561064120483 Mon Sep 17 00:00:00 2001
From: infiniteMajor <maria.yablonskaya@altoros.com>
Date: Tue, 18 Jan 2022 16:01:40 +0300
Subject: [PATCH 05/15] add warn and online check to separate errors

---
 src/apps/explorer/pages/UserDetails.tsx      | 9 +++++----
 src/components/Notification.tsx              | 7 ++-----
 src/components/orders/OrderDetails/index.tsx | 4 ++--
 3 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/apps/explorer/pages/UserDetails.tsx b/src/apps/explorer/pages/UserDetails.tsx
index fd0a0dc41..61e221dda 100644
--- a/src/apps/explorer/pages/UserDetails.tsx
+++ b/src/apps/explorer/pages/UserDetails.tsx
@@ -40,7 +40,7 @@ const TitleAddress = styled(RowWithCopyButton)`
 `
 
 export type Props = {
-  errors: Record<string, string>
+  errors?: any
 }
 
 const UserDetails: React.FC<Props> = ({ errors }) => {
@@ -70,9 +70,10 @@ const UserDetails: React.FC<Props> = ({ errors }) => {
               }
             />
           </h1>
-          {Object.keys(errors).map((key) => (
-            <Notification key={key} type={'error'} message={errors[key]} />
-          ))}
+          {errors &&
+            Object.keys(errors).map((key) => (
+              <Notification key={key} type={navigator.onLine ? 'warn' : 'error'} message={errors[key]} />
+            ))}
           <OrdersTableWidget ownerAddress={addressAccount.address} networkId={networkId} />
         </>
       ) : (
diff --git a/src/components/Notification.tsx b/src/components/Notification.tsx
index 02cd082f9..8be6b0eee 100644
--- a/src/components/Notification.tsx
+++ b/src/components/Notification.tsx
@@ -73,15 +73,12 @@ export const Notification: React.FC<NotificationProps> = ({ type, message }: Not
   const [isNoteActive, setIsNoteActive] = useState(true)
 
   const icon = type === 'error' ? faExclamationEllipsis : faExclamationTriangle
-
   return (
     <NotificationWrap type={type} isActive={isNoteActive}>
       <FontAwesomeIcon icon={icon} />
       <span>
-        {message}{' '}
-        {type === 'error'
-          ? 'Please' + <Link to="/">try again</Link> + 'later.'
-          : 'Please try ' + <Link to="/">refresh</Link> + 'to see new stuff.'}
+        {message}. Please&nbsp;<Link to="/">{type === 'error' ? 'try again' : 'refresh'}</Link>
+        {type === 'error' ? 'later.' : 'to see new stuff.'}
       </span>
       <CloseButton onClick={(): void => setIsNoteActive(false)} />
     </NotificationWrap>
diff --git a/src/components/orders/OrderDetails/index.tsx b/src/components/orders/OrderDetails/index.tsx
index a7940eedb..b2d963164 100644
--- a/src/components/orders/OrderDetails/index.tsx
+++ b/src/components/orders/OrderDetails/index.tsx
@@ -25,7 +25,7 @@ export type Props = {
   trades: Trade[]
   isOrderLoading: boolean
   areTradesLoading: boolean
-  errors: Record<string, string>
+  errors: any
 }
 
 export const OrderDetails: React.FC<Props> = (props) => {
@@ -60,7 +60,7 @@ export const OrderDetails: React.FC<Props> = (props) => {
         {order && <TitleUid textToCopy={order.uid} contentsToDisplay={order.shortId} />}
       </h1>
       {Object.keys(errors).map((key) => (
-        <Notification key={key} type={'error'} message={errors[key]} />
+        <Notification key={key} type={navigator.onLine ? 'warn' : 'error'} message={errors[key]} />
       ))}
       {/* TODO: add tabs (overview/fills) */}
       {order && areTokensLoaded && <DetailsTable order={{ ...order, txHash }} areTradesLoading={areTradesLoading} />}

From 82a765bb2ed7a831198054fd236870e5a22d03f6 Mon Sep 17 00:00:00 2001
From: infiniteMajor <maria.yablonskaya@altoros.com>
Date: Tue, 18 Jan 2022 16:23:02 +0300
Subject: [PATCH 06/15] page reload

---
 src/components/Notification.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/Notification.tsx b/src/components/Notification.tsx
index 8be6b0eee..6d5656e92 100644
--- a/src/components/Notification.tsx
+++ b/src/components/Notification.tsx
@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { transparentize } from 'polished'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faExclamationEllipsis, faExclamationTriangle } from './icons'
-import { Link } from 'react-router-dom'
+import { BASE_COLOURS } from 'theme'
 
 interface NotificationProps {
   type: string
@@ -25,6 +25,9 @@ export const NotificationWrap = styled.p<{ isActive?: boolean; type: string }>`
     margin: 0 16px;
     line-height: 1.2;
     max-width: calc(100% - 90px);
+    a {
+      color: ${BASE_COLOURS.orange1};
+    }
   }
 
   .svg-inline--fa {
@@ -77,7 +80,8 @@ export const Notification: React.FC<NotificationProps> = ({ type, message }: Not
     <NotificationWrap type={type} isActive={isNoteActive}>
       <FontAwesomeIcon icon={icon} />
       <span>
-        {message}. Please&nbsp;<Link to="/">{type === 'error' ? 'try again' : 'refresh'}</Link>
+        {message}. Please&nbsp;
+        <a onClick={(): void => window.location.reload()}>{type === 'error' ? 'try again ' : 'refresh '}</a>
         {type === 'error' ? 'later.' : 'to see new stuff.'}
       </span>
       <CloseButton onClick={(): void => setIsNoteActive(false)} />

From 89211776c6a9652b49621d6b978315acdcd2be4f Mon Sep 17 00:00:00 2001
From: infiniteMajor <maria.yablonskaya@altoros.com>
Date: Mon, 31 Jan 2022 06:58:21 +0300
Subject: [PATCH 07/15] err type added in progress

---
 src/components/Notification.tsx              | 12 ++++++------
 src/components/orders/OrderDetails/index.tsx |  2 ++
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/Notification.tsx b/src/components/Notification.tsx
index 6d5656e92..a84d24d0e 100644
--- a/src/components/Notification.tsx
+++ b/src/components/Notification.tsx
@@ -5,8 +5,8 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faExclamationEllipsis, faExclamationTriangle } from './icons'
 import { BASE_COLOURS } from 'theme'
 
-interface NotificationProps {
-  type: string
+export interface NotificationProps {
+  type: 'warn' | 'error'
   message: string
 }
 
@@ -74,15 +74,15 @@ const CloseButton = styled.button`
 
 export const Notification: React.FC<NotificationProps> = ({ type, message }: NotificationProps) => {
   const [isNoteActive, setIsNoteActive] = useState(true)
-
-  const icon = type === 'error' ? faExclamationEllipsis : faExclamationTriangle
+  const isError = type === 'error'
+  const icon = isError ? faExclamationEllipsis : faExclamationTriangle
   return (
     <NotificationWrap type={type} isActive={isNoteActive}>
       <FontAwesomeIcon icon={icon} />
       <span>
         {message}. Please&nbsp;
-        <a onClick={(): void => window.location.reload()}>{type === 'error' ? 'try again ' : 'refresh '}</a>
-        {type === 'error' ? 'later.' : 'to see new stuff.'}
+        <a onClick={(): void => window.location.reload()}>{isError ? 'try again ' : 'refresh '}</a>
+        {isError ? 'later.' : 'to get the latest.'}
       </span>
       <CloseButton onClick={(): void => setIsNoteActive(false)} />
     </NotificationWrap>
diff --git a/src/components/orders/OrderDetails/index.tsx b/src/components/orders/OrderDetails/index.tsx
index b2d963164..3cac808a9 100644
--- a/src/components/orders/OrderDetails/index.tsx
+++ b/src/components/orders/OrderDetails/index.tsx
@@ -19,6 +19,8 @@ const TitleUid = styled(RowWithCopyButton)`
   display: flex;
   align-items: center;
 `
+//TODO: use the type
+// type Errors = Record<string, NotificationProps>
 
 export type Props = {
   order: Order | null

From 5f6cf3ab54b363b9f4641db07a3eea3cb63beb53 Mon Sep 17 00:00:00 2001
From: Ramiro Vazquez <ramirovazquez@gmail.com>
Date: Tue, 15 Mar 2022 10:48:33 -0300
Subject: [PATCH 08/15] refactor errors to use the UiError type

---
 src/components/orders/OrderDetails/index.tsx |  5 +++--
 src/hooks/useErc20.ts                        | 20 ++++++++++----------
 src/hooks/useOperatorOrder.ts                | 12 ++++++------
 src/hooks/useOperatorTrades.ts               | 16 ++++++++--------
 src/types/index.ts                           |  7 +++++++
 5 files changed, 34 insertions(+), 26 deletions(-)

diff --git a/src/components/orders/OrderDetails/index.tsx b/src/components/orders/OrderDetails/index.tsx
index 3cac808a9..cbecaeeeb 100644
--- a/src/components/orders/OrderDetails/index.tsx
+++ b/src/components/orders/OrderDetails/index.tsx
@@ -10,6 +10,7 @@ import { DetailsTable } from 'components/orders/DetailsTable'
 import { RowWithCopyButton } from 'components/common/RowWithCopyButton'
 import RedirectToSearch from 'components/RedirectToSearch'
 import { Notification } from 'components/Notification'
+import { Errors } from 'types'
 
 const TitleUid = styled(RowWithCopyButton)`
   color: ${({ theme }): string => theme.grey};
@@ -27,7 +28,7 @@ export type Props = {
   trades: Trade[]
   isOrderLoading: boolean
   areTradesLoading: boolean
-  errors: any
+  errors: Errors
 }
 
 export const OrderDetails: React.FC<Props> = (props) => {
@@ -62,7 +63,7 @@ export const OrderDetails: React.FC<Props> = (props) => {
         {order && <TitleUid textToCopy={order.uid} contentsToDisplay={order.shortId} />}
       </h1>
       {Object.keys(errors).map((key) => (
-        <Notification key={key} type={navigator.onLine ? 'warn' : 'error'} message={errors[key]} />
+        <Notification key={key} type={errors[key].type} message={errors[key].message} />
       ))}
       {/* TODO: add tabs (overview/fills) */}
       {order && areTokensLoaded && <DetailsTable order={{ ...order, txHash }} areTradesLoading={areTradesLoading} />}
diff --git a/src/hooks/useErc20.ts b/src/hooks/useErc20.ts
index 00cfd3300..7ebe458fa 100644
--- a/src/hooks/useErc20.ts
+++ b/src/hooks/useErc20.ts
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 import { TokenErc20 } from '@gnosis.pm/dex-js'
 
-import { Network } from 'types'
+import { Errors, Network, UiError } from 'types'
 
 import {
   useErc20 as useErc20State,
@@ -21,7 +21,7 @@ import { isNativeToken, retry } from 'utils'
 async function _fetchErc20FromNetwork(params: {
   address: string
   networkId: number
-  setError: (error: string) => void
+  setError: (error: UiError) => void
 }): Promise<SingleErc20State> {
   const { address, networkId, setError } = params
 
@@ -38,7 +38,7 @@ async function _fetchErc20FromNetwork(params: {
   } catch (e) {
     const msg = `Failed to fetch erc20 details for ${address} on network ${networkId}`
     console.error(msg, e)
-    setError(msg)
+    setError({ message: msg, type: 'error' })
     // When failed, return null for given token
     return null
   }
@@ -46,7 +46,7 @@ async function _fetchErc20FromNetwork(params: {
 
 type UseErc20Params = { address?: string; networkId?: Network }
 
-type Return<E, V> = { isLoading: boolean; error: E; value: V }
+type Return<E, V> = { isLoading: boolean; error?: E; value: V }
 
 /**
  * Fetches single erc20 token details for given network and address
@@ -58,11 +58,11 @@ type Return<E, V> = { isLoading: boolean; error: E; value: V }
  * Returns `isLoading` to indicate whether fetching the value
  * Returns `error` with the error message, if any.
  */
-export function useErc20(params: UseErc20Params): Return<string, SingleErc20State> {
+export function useErc20(params: UseErc20Params): Return<UiError, SingleErc20State> {
   const { address, networkId } = params
 
   const [isLoading, setIsLoading] = useState(false)
-  const [error, setError] = useState('')
+  const [error, setError] = useState<UiError>()
 
   const erc20 = useErc20State({ networkId, address })
   const saveErc20s = useSaveErc20s(networkId)
@@ -73,7 +73,7 @@ export function useErc20(params: UseErc20Params): Return<string, SingleErc20Stat
     }
 
     setIsLoading(true)
-    setError('')
+    setError(undefined)
 
     const fetched = await _fetchErc20FromNetwork({ address, networkId, setError })
     if (fetched) {
@@ -108,11 +108,11 @@ export type UseMultipleErc20Params = { addresses: string[]; networkId?: Network
  */
 export function useMultipleErc20(
   params: UseMultipleErc20Params,
-): Return<Record<string, string>, Record<string, SingleErc20State>> {
+): Return<Record<string, UiError>, Record<string, SingleErc20State>> {
   const { addresses, networkId } = params
 
   const [isLoading, setIsLoading] = useState(false)
-  const [errors, setErrors] = useState<Record<string, string>>({})
+  const [errors, setErrors] = useState<Errors>({})
 
   const erc20s = useMultipleErc20sState({ networkId, addresses })
   const saveErc20s = useSaveErc20s(networkId)
@@ -136,7 +136,7 @@ export function useMultipleErc20(
       _fetchErc20FromNetwork({
         address,
         networkId,
-        setError: (msg) => setErrors((curr) => ({ ...curr, [address]: msg })),
+        setError: (error) => setErrors((curr) => ({ ...curr, [address]: error })),
       }),
     )
 
diff --git a/src/hooks/useOperatorOrder.ts b/src/hooks/useOperatorOrder.ts
index 6c74286e0..cfbd2bde6 100644
--- a/src/hooks/useOperatorOrder.ts
+++ b/src/hooks/useOperatorOrder.ts
@@ -7,7 +7,7 @@ import { transformOrder } from 'utils'
 import { useNetworkId } from 'state/network'
 
 import { useMultipleErc20 } from './useErc20'
-import { Network } from 'types'
+import { Errors, Network, UiError } from 'types'
 import {
   GetOrderApi,
   GetOrderResult,
@@ -17,7 +17,7 @@ import {
 
 type UseOrderResult = {
   order: Order | null
-  error?: string
+  error?: UiError
   isLoading: boolean
   errorOrderPresentInNetworkId: Network | null
   forceUpdate?: () => void
@@ -35,7 +35,7 @@ function _getOrder(networkId: Network, orderId: string): Promise<GetOrderResult<
 
 export function useOrderByNetwork(orderId: string, networkId: Network | null, updateInterval = 0): UseOrderResult {
   const [isLoading, setIsLoading] = useState(false)
-  const [error, setError] = useState('')
+  const [error, setError] = useState<UiError>()
   const [order, setOrder] = useState<Order | null>(null)
   const [errorOrderPresentInNetworkId, setErrorOrderPresentInNetworkId] = useState<Network | null>(null)
   // Hack to force component to update itself on demand
@@ -47,7 +47,7 @@ export function useOrderByNetwork(orderId: string, networkId: Network | null, up
       if (!networkId) return
 
       setIsLoading(true)
-      setError('')
+      setError(undefined)
 
       try {
         const { order: rawOrder, errorOrderPresentInNetworkId: errorOrderPresentInNetworkIdRaw } = await _getOrder(
@@ -64,7 +64,7 @@ export function useOrderByNetwork(orderId: string, networkId: Network | null, up
       } catch (e) {
         const msg = `Failed to fetch order: ${orderId}`
         console.error(msg, e.message)
-        setError(msg)
+        setError({ message: msg, type: 'error' })
       } finally {
         setIsLoading(false)
       }
@@ -100,7 +100,7 @@ export function useOrder(orderId: string, updateInterval?: number): UseOrderResu
 type UseOrderAndErc20sResult = {
   order: Order | null
   isLoading: boolean
-  errors: Record<string, string>
+  errors: Errors
   errorOrderPresentInNetworkId: Network | null
 }
 
diff --git a/src/hooks/useOperatorTrades.ts b/src/hooks/useOperatorTrades.ts
index af7541fd0..b959b1903 100644
--- a/src/hooks/useOperatorTrades.ts
+++ b/src/hooks/useOperatorTrades.ts
@@ -1,7 +1,7 @@
 import { getTrades, Order, Trade } from 'api/operator'
 import { useCallback, useEffect, useState } from 'react'
 import { useNetworkId } from 'state/network'
-import { Network } from 'types'
+import { Network, UiError } from 'types'
 import { transformTrade } from 'utils'
 
 type Params = {
@@ -11,7 +11,7 @@ type Params = {
 
 type Result = {
   trades: Trade[]
-  error: string
+  error?: UiError
   isLoading: boolean
 }
 
@@ -23,7 +23,7 @@ export function useTrades(params: Params): Result {
   const { owner, orderId } = params
 
   const [isLoading, setIsLoading] = useState(false)
-  const [error, setError] = useState('')
+  const [error, setError] = useState<UiError>()
   const [trades, setTrades] = useState<Trade[]>([])
 
   // Here we assume that we are already in the right network
@@ -32,7 +32,7 @@ export function useTrades(params: Params): Result {
 
   const fetchTrades = useCallback(async (networkId: Network, owner?: string, orderId?: string): Promise<void> => {
     setIsLoading(true)
-    setError('')
+    setError(undefined)
 
     try {
       const trades = await getTrades({ networkId, owner, orderId })
@@ -42,7 +42,7 @@ export function useTrades(params: Params): Result {
     } catch (e) {
       const msg = `Failed to fetch trades`
       console.error(msg, e)
-      setError(msg)
+      setError({ message: msg, type: 'error' })
     } finally {
       setIsLoading(false)
     }
@@ -64,7 +64,7 @@ export function useTrades(params: Params): Result {
  */
 export function useOrderTrades(order: Order | null): Result {
   const [isLoading, setIsLoading] = useState(false)
-  const [error, setError] = useState('')
+  const [error, setError] = useState<UiError>()
   const [trades, setTrades] = useState<Trade[]>([])
 
   // Here we assume that we are already in the right network
@@ -73,7 +73,7 @@ export function useOrderTrades(order: Order | null): Result {
 
   const fetchTrades = useCallback(async (networkId: Network, order: Order): Promise<void> => {
     setIsLoading(true)
-    setError('')
+    setError(undefined)
 
     const { uid: orderId, buyToken, sellToken } = order
 
@@ -84,7 +84,7 @@ export function useOrderTrades(order: Order | null): Result {
     } catch (e) {
       const msg = `Failed to fetch trades`
       console.error(msg, e)
-      setError(msg)
+      setError({ message: msg, type: 'error' })
     } finally {
       setIsLoading(false)
     }
diff --git a/src/types/index.ts b/src/types/index.ts
index d91f38fb7..3b5f5a842 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -67,3 +67,10 @@ export enum AnalyticsDimension {
   NETWORK,
   BROWSER_TYPE,
 }
+
+export type UiError = {
+  message: string
+  type: 'warn' | 'error'
+}
+
+export type Errors = Record<string, UiError>

From 442eef3aea07cfd2c0b9402cfc836fc4e71e5961 Mon Sep 17 00:00:00 2001
From: Ramiro Vazquez <ramirovazquez@gmail.com>
Date: Wed, 16 Mar 2022 17:09:12 -0300
Subject: [PATCH 09/15] add ConnectionStatus component

---
 .../context/OrdersTableContext.tsx            |  4 ++--
 .../components/OrdersTableWidget/index.tsx    |  6 ++++-
 .../common/ExplorerTabs/ExplorerTab.tsx       |  2 +-
 src/apps/explorer/pages/UserDetails.tsx       | 11 +++++++++-
 src/components/ConnectionStatus.tsx           | 22 +++++++++++++++++++
 src/components/Notification.tsx               | 18 +++++++++++----
 src/components/common/Tabs/Tabs.tsx           |  1 +
 src/components/orders/OrderDetails/index.tsx  |  2 ++
 src/hooks/useGetOrders.tsx                    | 16 +++++++-------
 src/hooks/useOperatorOrder.ts                 |  8 +++----
 10 files changed, 69 insertions(+), 21 deletions(-)
 create mode 100644 src/components/ConnectionStatus.tsx

diff --git a/src/apps/explorer/components/OrdersTableWidget/context/OrdersTableContext.tsx b/src/apps/explorer/components/OrdersTableWidget/context/OrdersTableContext.tsx
index e6cac7a57..985010280 100644
--- a/src/apps/explorer/components/OrdersTableWidget/context/OrdersTableContext.tsx
+++ b/src/apps/explorer/components/OrdersTableWidget/context/OrdersTableContext.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 
 import { Order } from 'api/operator'
-import { Network } from 'types'
+import { Network, UiError } from 'types'
 import { TableState, TableStateSetters } from 'apps/explorer/components/OrdersTableWidget/useTable'
 
 export type BlockchainNetwork = Network | undefined
@@ -9,7 +9,7 @@ export type BlockchainNetwork = Network | undefined
 type CommonState = {
   addressAccountParams: { networkId: BlockchainNetwork; ownerAddress: string }
   orders: Order[] | undefined
-  error: string
+  error?: UiError
   isOrdersLoading: boolean
   tableState: TableState
 } & TableStateSetters
diff --git a/src/apps/explorer/components/OrdersTableWidget/index.tsx b/src/apps/explorer/components/OrdersTableWidget/index.tsx
index bdbe8d41e..ec09b6078 100644
--- a/src/apps/explorer/components/OrdersTableWidget/index.tsx
+++ b/src/apps/explorer/components/OrdersTableWidget/index.tsx
@@ -14,6 +14,10 @@ const StyledTabLoader = styled.span`
   padding-left: 4px;
 `
 
+const StyledExplorerTabs = styled(ExplorerTabs)`
+  margin: 1.6rem auto 0;
+`
+
 const tabItems = (isLoadingOrders: boolean): TabItemInterface[] => {
   return [
     {
@@ -75,7 +79,7 @@ const OrdersTableWidget: React.FC<Props> = ({ ownerAddress, networkId }) => {
         handlePreviousPage,
       }}
     >
-      <ExplorerTabs tabItems={tabItems(isOrdersLoading)} extra={ExtraComponentNode} />
+      <StyledExplorerTabs tabItems={tabItems(isOrdersLoading)} extra={ExtraComponentNode} />
     </OrdersTableContext.Provider>
   )
 }
diff --git a/src/apps/explorer/components/common/ExplorerTabs/ExplorerTab.tsx b/src/apps/explorer/components/common/ExplorerTabs/ExplorerTab.tsx
index 01d5bcbfe..0f69b26c3 100644
--- a/src/apps/explorer/components/common/ExplorerTabs/ExplorerTab.tsx
+++ b/src/apps/explorer/components/common/ExplorerTabs/ExplorerTab.tsx
@@ -65,7 +65,7 @@ type ExplorerTabsProps = Omit<TabsProps, 'tabTheme'>
 
 const ExplorerTabs: React.FC<ExplorerTabsProps> = (props) => {
   return (
-    <StyledTabs>
+    <StyledTabs className={props.className}>
       <Tabs tabTheme={tabCustomThemeConfig} {...props} />
     </StyledTabs>
   )
diff --git a/src/apps/explorer/pages/UserDetails.tsx b/src/apps/explorer/pages/UserDetails.tsx
index bafccefcd..8eea9239f 100644
--- a/src/apps/explorer/pages/UserDetails.tsx
+++ b/src/apps/explorer/pages/UserDetails.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { useParams } from 'react-router'
+import styled from 'styled-components'
 
 import OrdersTableWidget from '../components/OrdersTableWidget'
 import { useNetworkId } from 'state/network'
@@ -7,7 +8,14 @@ import { BlockExplorerLink } from 'components/common/BlockExplorerLink'
 import RedirectToSearch from 'components/RedirectToSearch'
 import { useResolveEns } from 'hooks/useResolveEns'
 import Spinner from 'components/common/Spinner'
-import { TitleAddress, Wrapper } from 'apps/explorer/pages/styled'
+import { TitleAddress, Wrapper as WrapperMod } from 'apps/explorer/pages/styled'
+import { ConnectionStatus } from 'components/ConnectionStatus'
+
+const Wrapper = styled(WrapperMod)`
+  > h1 {
+    padding: 2.4rem 0 0.75rem;
+  }
+`
 
 const UserDetails: React.FC = () => {
   const { address } = useParams<{ address: string }>()
@@ -37,6 +45,7 @@ const UserDetails: React.FC = () => {
               }
             />
           </h1>
+          <ConnectionStatus />
           <OrdersTableWidget ownerAddress={addressAccount.address} networkId={networkId} />
         </>
       ) : (
diff --git a/src/components/ConnectionStatus.tsx b/src/components/ConnectionStatus.tsx
new file mode 100644
index 000000000..f48513274
--- /dev/null
+++ b/src/components/ConnectionStatus.tsx
@@ -0,0 +1,22 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import { Notification } from './Notification'
+
+export const ConnectionStatus: React.FC = () => {
+  const [online, setOnline] = useState(true)
+
+  const handleConnectionChange = useCallback((e: Event) => {
+    setOnline(e.type === 'online')
+  }, [])
+
+  useEffect(() => {
+    window.addEventListener('online', handleConnectionChange)
+    window.addEventListener('offline', handleConnectionChange)
+
+    return (): void => {
+      window.removeEventListener('online', handleConnectionChange)
+      window.removeEventListener('offline', handleConnectionChange)
+    }
+  }, [handleConnectionChange])
+
+  return online ? null : <Notification type="warn" message="Your internet connection is down" appendMessage={false} />
+}
diff --git a/src/components/Notification.tsx b/src/components/Notification.tsx
index a84d24d0e..f32c50cea 100644
--- a/src/components/Notification.tsx
+++ b/src/components/Notification.tsx
@@ -8,6 +8,7 @@ import { BASE_COLOURS } from 'theme'
 export interface NotificationProps {
   type: 'warn' | 'error'
   message: string
+  appendMessage?: boolean
 }
 
 export const NotificationWrap = styled.p<{ isActive?: boolean; type: string }>`
@@ -72,7 +73,11 @@ const CloseButton = styled.button`
   }
 `
 
-export const Notification: React.FC<NotificationProps> = ({ type, message }: NotificationProps) => {
+export const Notification: React.FC<NotificationProps> = ({
+  type,
+  message,
+  appendMessage = true,
+}: NotificationProps) => {
   const [isNoteActive, setIsNoteActive] = useState(true)
   const isError = type === 'error'
   const icon = isError ? faExclamationEllipsis : faExclamationTriangle
@@ -80,9 +85,14 @@ export const Notification: React.FC<NotificationProps> = ({ type, message }: Not
     <NotificationWrap type={type} isActive={isNoteActive}>
       <FontAwesomeIcon icon={icon} />
       <span>
-        {message}. Please&nbsp;
-        <a onClick={(): void => window.location.reload()}>{isError ? 'try again ' : 'refresh '}</a>
-        {isError ? 'later.' : 'to get the latest.'}
+        {message}
+        {appendMessage && (
+          <>
+            . Please&nbsp;
+            <a onClick={(): void => window.location.reload()}>{isError ? 'try again ' : 'refresh '}</a>
+            {isError ? 'later.' : 'to get the latest.'}
+          </>
+        )}
       </span>
       <CloseButton onClick={(): void => setIsNoteActive(false)} />
     </NotificationWrap>
diff --git a/src/components/common/Tabs/Tabs.tsx b/src/components/common/Tabs/Tabs.tsx
index bcc12192f..4f37785fd 100644
--- a/src/components/common/Tabs/Tabs.tsx
+++ b/src/components/common/Tabs/Tabs.tsx
@@ -33,6 +33,7 @@ export interface TabTheme {
   readonly indicatorTabSize: IndicatorTabSize
 }
 export interface Props {
+  readonly className?: string
   readonly tabItems: TabItemInterface[]
   readonly tabTheme: TabTheme
   readonly defaultTab?: TabId
diff --git a/src/components/orders/OrderDetails/index.tsx b/src/components/orders/OrderDetails/index.tsx
index cbecaeeeb..47b88866d 100644
--- a/src/components/orders/OrderDetails/index.tsx
+++ b/src/components/orders/OrderDetails/index.tsx
@@ -11,6 +11,7 @@ import { RowWithCopyButton } from 'components/common/RowWithCopyButton'
 import RedirectToSearch from 'components/RedirectToSearch'
 import { Notification } from 'components/Notification'
 import { Errors } from 'types'
+import { ConnectionStatus } from 'components/ConnectionStatus'
 
 const TitleUid = styled(RowWithCopyButton)`
   color: ${({ theme }): string => theme.grey};
@@ -62,6 +63,7 @@ export const OrderDetails: React.FC<Props> = (props) => {
         {order && 'Order details'}
         {order && <TitleUid textToCopy={order.uid} contentsToDisplay={order.shortId} />}
       </h1>
+      <ConnectionStatus />
       {Object.keys(errors).map((key) => (
         <Notification key={key} type={errors[key].type} message={errors[key].message} />
       ))}
diff --git a/src/hooks/useGetOrders.tsx b/src/hooks/useGetOrders.tsx
index b3e5a3444..10f44a728 100644
--- a/src/hooks/useGetOrders.tsx
+++ b/src/hooks/useGetOrders.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback } from 'react'
 
-import { Network } from 'types'
+import { Network, UiError } from 'types'
 import { useMultipleErc20 } from 'hooks/useErc20'
 import { updateWeb3Provider } from 'api/web3'
 import { web3 } from 'apps/explorer/api'
@@ -42,7 +42,7 @@ function filterDuplicateErc20Addresses(ordersFetched: RawOrder[]): string[] {
 
 type Result = {
   orders: Order[] | undefined
-  error: string
+  error?: UiError
   isLoading: boolean
 }
 
@@ -106,14 +106,14 @@ function useOrdersWithTokenInfo(networkId: Network | undefined): UseOrdersWithTo
 export function useGetTxOrders(txHash: string): GetTxOrdersResult {
   const networkId = useNetworkId() || undefined
   const [isLoading, setIsLoading] = useState(false)
-  const [error, setError] = useState('')
+  const [error, setError] = useState<UiError>()
   const { orders, areErc20Loading, setOrders, setMountNewOrders, setErc20Addresses } = useOrdersWithTokenInfo(networkId)
   const [errorTxPresentInNetworkId, setErrorTxPresentInNetworkId] = useState<Network | null>(null)
 
   const fetchOrders = useCallback(
     async (network: Network, _txHash: string): Promise<void> => {
       setIsLoading(true)
-      setError('')
+      setError(undefined)
 
       try {
         const { order: _orders, errorOrderPresentInNetworkId: errorTxPresentInNetworkIdRaw } =
@@ -133,7 +133,7 @@ export function useGetTxOrders(txHash: string): GetTxOrdersResult {
       } catch (e) {
         const msg = `Failed to fetch tx orders`
         console.error(msg, e)
-        setError(msg)
+        setError({ message: msg, type: 'error' })
       } finally {
         setIsLoading(false)
       }
@@ -193,14 +193,14 @@ export function useGetAccountOrders(
 ): GetAccountOrdersResult {
   const networkId = useNetworkId() || undefined
   const [isLoading, setIsLoading] = useState(false)
-  const [error, setError] = useState('')
+  const [error, setError] = useState<UiError>()
   const { orders, setOrders, setMountNewOrders, setErc20Addresses } = useOrdersWithTokenInfo(networkId)
   const [isThereNext, setIsThereNext] = useState(false)
 
   const fetchOrders = useCallback(
     async (network: Network, owner: string): Promise<void> => {
       setIsLoading(true)
-      setError('')
+      setError(undefined)
       const limitPlusOne = limit + 1
 
       try {
@@ -217,7 +217,7 @@ export function useGetAccountOrders(
       } catch (e) {
         const msg = `Failed to fetch orders`
         console.error(msg, e)
-        setError(msg)
+        setError({ message: msg, type: 'error' })
       } finally {
         setIsLoading(false)
       }
diff --git a/src/hooks/useOperatorOrder.ts b/src/hooks/useOperatorOrder.ts
index cfbd2bde6..39f865bf9 100644
--- a/src/hooks/useOperatorOrder.ts
+++ b/src/hooks/useOperatorOrder.ts
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from 'react'
 
 import { Order, getOrder, GetOrderParams } from 'api/operator'
 
-import { transformOrder } from 'utils'
+import { getShortOrderId, transformOrder } from 'utils'
 
 import { useNetworkId } from 'state/network'
 
@@ -62,9 +62,9 @@ export function useOrderByNetwork(orderId: string, networkId: Network | null, up
           setErrorOrderPresentInNetworkId(errorOrderPresentInNetworkIdRaw)
         }
       } catch (e) {
-        const msg = `Failed to fetch order: ${orderId}`
-        console.error(msg, e.message)
-        setError({ message: msg, type: 'error' })
+        const msg = `Failed to fetch order`
+        console.error(`${msg}: ${orderId}`, e.message)
+        setError({ message: `${msg}: ${getShortOrderId(orderId)}`, type: 'error' })
       } finally {
         setIsLoading(false)
       }

From f52348916024af4b096627f5aded1c5392848b73 Mon Sep 17 00:00:00 2001
From: Ramiro Vazquez <ramirovazquez@gmail.com>
Date: Wed, 16 Mar 2022 17:18:32 -0300
Subject: [PATCH 10/15] add notifications to user details

---
 src/apps/explorer/components/OrdersTableWidget/index.tsx  | 4 ++++
 .../context/TransactionsTableContext.tsx                  | 4 ++--
 src/apps/explorer/pages/UserDetails.tsx                   | 2 --
 .../orders/OrderDetails/OrderDetails.stories.tsx          | 8 +++++++-
 4 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/apps/explorer/components/OrdersTableWidget/index.tsx b/src/apps/explorer/components/OrdersTableWidget/index.tsx
index ec09b6078..caa9ee20d 100644
--- a/src/apps/explorer/components/OrdersTableWidget/index.tsx
+++ b/src/apps/explorer/components/OrdersTableWidget/index.tsx
@@ -9,6 +9,8 @@ import { OrdersTableContext, BlockchainNetwork } from './context/OrdersTableCont
 import PaginationOrdersTable from './PaginationOrdersTable'
 import { useGetAccountOrders } from 'hooks/useGetOrders'
 import Spinner from 'components/common/Spinner'
+import { ConnectionStatus } from 'components/ConnectionStatus'
+import { Notification } from 'components/Notification'
 
 const StyledTabLoader = styled.span`
   padding-left: 4px;
@@ -79,6 +81,8 @@ const OrdersTableWidget: React.FC<Props> = ({ ownerAddress, networkId }) => {
         handlePreviousPage,
       }}
     >
+      <ConnectionStatus />
+      {error && <Notification type={error.type} message={error.message} />}
       <StyledExplorerTabs tabItems={tabItems(isOrdersLoading)} extra={ExtraComponentNode} />
     </OrdersTableContext.Provider>
   )
diff --git a/src/apps/explorer/components/TransactionsTableWidget/context/TransactionsTableContext.tsx b/src/apps/explorer/components/TransactionsTableWidget/context/TransactionsTableContext.tsx
index c45d8fe60..e89ecccbf 100644
--- a/src/apps/explorer/components/TransactionsTableWidget/context/TransactionsTableContext.tsx
+++ b/src/apps/explorer/components/TransactionsTableWidget/context/TransactionsTableContext.tsx
@@ -1,13 +1,13 @@
 import React from 'react'
 
-import { Network } from 'types'
+import { Network, UiError } from 'types'
 import { Order } from 'api/operator'
 
 export type BlockchainNetwork = Network | undefined
 
 type CommonState = {
   txHashParams: { networkId: BlockchainNetwork; txHash: string }
-  error: string
+  error?: UiError
   orders: Order[] | undefined
   isTxLoading: boolean
 }
diff --git a/src/apps/explorer/pages/UserDetails.tsx b/src/apps/explorer/pages/UserDetails.tsx
index 8eea9239f..71066ee8a 100644
--- a/src/apps/explorer/pages/UserDetails.tsx
+++ b/src/apps/explorer/pages/UserDetails.tsx
@@ -9,7 +9,6 @@ import RedirectToSearch from 'components/RedirectToSearch'
 import { useResolveEns } from 'hooks/useResolveEns'
 import Spinner from 'components/common/Spinner'
 import { TitleAddress, Wrapper as WrapperMod } from 'apps/explorer/pages/styled'
-import { ConnectionStatus } from 'components/ConnectionStatus'
 
 const Wrapper = styled(WrapperMod)`
   > h1 {
@@ -45,7 +44,6 @@ const UserDetails: React.FC = () => {
               }
             />
           </h1>
-          <ConnectionStatus />
           <OrdersTableWidget ownerAddress={addressAccount.address} networkId={networkId} />
         </>
       ) : (
diff --git a/src/components/orders/OrderDetails/OrderDetails.stories.tsx b/src/components/orders/OrderDetails/OrderDetails.stories.tsx
index 4af3d5d52..b8b07ddcd 100644
--- a/src/components/orders/OrderDetails/OrderDetails.stories.tsx
+++ b/src/components/orders/OrderDetails/OrderDetails.stories.tsx
@@ -35,4 +35,10 @@ export const TokensNotLoaded = Template.bind({})
 TokensNotLoaded.args = { ...defaultProps, order: { ...RICH_ORDER, buyToken: undefined } }
 
 export const WithErrors = Template.bind({})
-WithErrors.args = { ...defaultProps, errors: { error1: 'Failed something something', error2: 'Something else failed' } }
+WithErrors.args = {
+  ...defaultProps,
+  errors: {
+    error1: { message: 'Failed something something', type: 'error' },
+    error2: { message: 'Something else failed', type: 'error' },
+  },
+}

From b1cf955230da9931915873612428bc52730c85e4 Mon Sep 17 00:00:00 2001
From: Ramiro Vazquez <ramirovazquez@gmail.com>
Date: Mon, 21 Mar 2022 16:49:06 -0300
Subject: [PATCH 11/15] reset error when request succeeds

---
 src/hooks/useErc20.ts          | 2 +-
 src/hooks/useGetOrders.tsx     | 4 ++--
 src/hooks/useOperatorOrder.ts  | 2 +-
 src/hooks/useOperatorTrades.ts | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/hooks/useErc20.ts b/src/hooks/useErc20.ts
index 7ebe458fa..59387bdad 100644
--- a/src/hooks/useErc20.ts
+++ b/src/hooks/useErc20.ts
@@ -73,13 +73,13 @@ export function useErc20(params: UseErc20Params): Return<UiError, SingleErc20Sta
     }
 
     setIsLoading(true)
-    setError(undefined)
 
     const fetched = await _fetchErc20FromNetwork({ address, networkId, setError })
     if (fetched) {
       saveErc20s([fetched])
     }
 
+    setError(undefined)
     setIsLoading(false)
   }, [address, networkId, saveErc20s])
 
diff --git a/src/hooks/useGetOrders.tsx b/src/hooks/useGetOrders.tsx
index 10f44a728..20d2cbbbd 100644
--- a/src/hooks/useGetOrders.tsx
+++ b/src/hooks/useGetOrders.tsx
@@ -113,7 +113,6 @@ export function useGetTxOrders(txHash: string): GetTxOrdersResult {
   const fetchOrders = useCallback(
     async (network: Network, _txHash: string): Promise<void> => {
       setIsLoading(true)
-      setError(undefined)
 
       try {
         const { order: _orders, errorOrderPresentInNetworkId: errorTxPresentInNetworkIdRaw } =
@@ -125,6 +124,7 @@ export function useGetTxOrders(txHash: string): GetTxOrdersResult {
 
         setOrders(ordersFetched.map((order) => transformOrder(order)))
         setMountNewOrders(true)
+        setError(undefined)
 
         if (errorTxPresentInNetworkIdRaw) {
           console.log({ _orders, errorTxPresentInNetworkIdRaw })
@@ -200,7 +200,6 @@ export function useGetAccountOrders(
   const fetchOrders = useCallback(
     async (network: Network, owner: string): Promise<void> => {
       setIsLoading(true)
-      setError(undefined)
       const limitPlusOne = limit + 1
 
       try {
@@ -214,6 +213,7 @@ export function useGetAccountOrders(
 
         setOrders(ordersFetched.map((order) => transformOrder(order)))
         setMountNewOrders(true)
+        setError(undefined)
       } catch (e) {
         const msg = `Failed to fetch orders`
         console.error(msg, e)
diff --git a/src/hooks/useOperatorOrder.ts b/src/hooks/useOperatorOrder.ts
index 39f865bf9..34f1fff1b 100644
--- a/src/hooks/useOperatorOrder.ts
+++ b/src/hooks/useOperatorOrder.ts
@@ -47,7 +47,6 @@ export function useOrderByNetwork(orderId: string, networkId: Network | null, up
       if (!networkId) return
 
       setIsLoading(true)
-      setError(undefined)
 
       try {
         const { order: rawOrder, errorOrderPresentInNetworkId: errorOrderPresentInNetworkIdRaw } = await _getOrder(
@@ -61,6 +60,7 @@ export function useOrderByNetwork(orderId: string, networkId: Network | null, up
         if (errorOrderPresentInNetworkIdRaw) {
           setErrorOrderPresentInNetworkId(errorOrderPresentInNetworkIdRaw)
         }
+        setError(undefined)
       } catch (e) {
         const msg = `Failed to fetch order`
         console.error(`${msg}: ${orderId}`, e.message)
diff --git a/src/hooks/useOperatorTrades.ts b/src/hooks/useOperatorTrades.ts
index b959b1903..7f02c9353 100644
--- a/src/hooks/useOperatorTrades.ts
+++ b/src/hooks/useOperatorTrades.ts
@@ -32,13 +32,13 @@ export function useTrades(params: Params): Result {
 
   const fetchTrades = useCallback(async (networkId: Network, owner?: string, orderId?: string): Promise<void> => {
     setIsLoading(true)
-    setError(undefined)
 
     try {
       const trades = await getTrades({ networkId, owner, orderId })
 
       // TODO: fetch buy/sellToken objects
       setTrades(trades.map((trade) => transformTrade(trade)))
+      setError(undefined)
     } catch (e) {
       const msg = `Failed to fetch trades`
       console.error(msg, e)
@@ -73,7 +73,6 @@ export function useOrderTrades(order: Order | null): Result {
 
   const fetchTrades = useCallback(async (networkId: Network, order: Order): Promise<void> => {
     setIsLoading(true)
-    setError(undefined)
 
     const { uid: orderId, buyToken, sellToken } = order
 
@@ -81,6 +80,7 @@ export function useOrderTrades(order: Order | null): Result {
       const trades = await getTrades({ networkId, orderId })
 
       setTrades(trades.map((trade) => ({ ...transformTrade(trade), buyToken, sellToken })))
+      setError(undefined)
     } catch (e) {
       const msg = `Failed to fetch trades`
       console.error(msg, e)

From 77448bcad19655d194091b4bddad9d86422d179c Mon Sep 17 00:00:00 2001
From: Ramiro Vazquez <ramirovazquez@gmail.com>
Date: Mon, 21 Mar 2022 17:05:51 -0300
Subject: [PATCH 12/15] add notification component to transaction details

---
 .../explorer/components/TransactionsTableWidget/index.tsx     | 4 ++++
 src/components/ConnectionStatus.tsx                           | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/apps/explorer/components/TransactionsTableWidget/index.tsx b/src/apps/explorer/components/TransactionsTableWidget/index.tsx
index 69ff7a160..0e789d379 100644
--- a/src/apps/explorer/components/TransactionsTableWidget/index.tsx
+++ b/src/apps/explorer/components/TransactionsTableWidget/index.tsx
@@ -13,6 +13,8 @@ import ExplorerTabs from '../common/ExplorerTabs/ExplorerTab'
 import styled from 'styled-components'
 import { TitleAddress } from 'apps/explorer/pages/styled'
 import { BlockExplorerLink } from 'components/common/BlockExplorerLink'
+import { ConnectionStatus } from 'components/ConnectionStatus'
+import { Notification } from 'components/Notification'
 
 interface Props {
   txHash: string
@@ -78,6 +80,8 @@ export const TransactionsTableWidget: React.FC<Props> = ({ txHash }) => {
           contentsToDisplay={<BlockExplorerLink type="tx" networkId={networkId} identifier={txHash} showLogo />}
         />
       </h1>
+      <ConnectionStatus />
+      {error && <Notification type={error.type} message={error.message} />}
       <TransactionsTableContext.Provider
         value={{
           orders,
diff --git a/src/components/ConnectionStatus.tsx b/src/components/ConnectionStatus.tsx
index f48513274..77993eeb2 100644
--- a/src/components/ConnectionStatus.tsx
+++ b/src/components/ConnectionStatus.tsx
@@ -18,5 +18,5 @@ export const ConnectionStatus: React.FC = () => {
     }
   }, [handleConnectionChange])
 
-  return online ? null : <Notification type="warn" message="Your internet connection is down" appendMessage={false} />
+  return online ? null : <Notification type="warn" message="Your internet connection is down." appendMessage={false} />
 }

From a79ca4738e645e5f7d5ef9a9cd58ea6124509ccd Mon Sep 17 00:00:00 2001
From: Ramiro Vazquez <ramirovazquez@gmail.com>
Date: Tue, 22 Mar 2022 09:03:57 -0300
Subject: [PATCH 13/15] update connectivity message

---
 src/components/ConnectionStatus.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/ConnectionStatus.tsx b/src/components/ConnectionStatus.tsx
index 77993eeb2..07c8943a8 100644
--- a/src/components/ConnectionStatus.tsx
+++ b/src/components/ConnectionStatus.tsx
@@ -18,5 +18,7 @@ export const ConnectionStatus: React.FC = () => {
     }
   }, [handleConnectionChange])
 
-  return online ? null : <Notification type="warn" message="Your internet connection is down." appendMessage={false} />
+  return online ? null : (
+    <Notification type="warn" message="You may have lost your network connection." appendMessage={false} />
+  )
 }

From 9b583df9c49f24095f8dab7fe0e2b06e31f77159 Mon Sep 17 00:00:00 2001
From: Ramiro Vazquez <ramirovazquez@gmail.com>
Date: Tue, 22 Mar 2022 09:04:54 -0300
Subject: [PATCH 14/15] remove comments

---
 src/components/orders/OrderDetails/index.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/orders/OrderDetails/index.tsx b/src/components/orders/OrderDetails/index.tsx
index 47b88866d..9b325c9a2 100644
--- a/src/components/orders/OrderDetails/index.tsx
+++ b/src/components/orders/OrderDetails/index.tsx
@@ -21,8 +21,6 @@ const TitleUid = styled(RowWithCopyButton)`
   display: flex;
   align-items: center;
 `
-//TODO: use the type
-// type Errors = Record<string, NotificationProps>
 
 export type Props = {
   order: Order | null

From ff8fed671bf16c904883dbb5c555ca047541659b Mon Sep 17 00:00:00 2001
From: Ramiro Vazquez <ramirovazquez@gmail.com>
Date: Tue, 22 Mar 2022 09:25:04 -0300
Subject: [PATCH 15/15] prevent redirection in WithErrors story

---
 src/components/orders/OrderDetails/OrderDetails.stories.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/orders/OrderDetails/OrderDetails.stories.tsx b/src/components/orders/OrderDetails/OrderDetails.stories.tsx
index b8b07ddcd..13980cdc5 100644
--- a/src/components/orders/OrderDetails/OrderDetails.stories.tsx
+++ b/src/components/orders/OrderDetails/OrderDetails.stories.tsx
@@ -37,6 +37,7 @@ TokensNotLoaded.args = { ...defaultProps, order: { ...RICH_ORDER, buyToken: unde
 export const WithErrors = Template.bind({})
 WithErrors.args = {
   ...defaultProps,
+  isOrderLoading: true,
   errors: {
     error1: { message: 'Failed something something', type: 'error' },
     error2: { message: 'Something else failed', type: 'error' },