Merge pull request #1860 from oasisprotocol/mz/reloadExt

Allow to reload extension from within error modal

.changelog/1860.bugfix.md

@@ -0,0 +1 @@
+Allow to reload extension from within error modal

src/app/components/Button/index.tsx

@@ -0,0 +1,21 @@
+/*
+ * Used for time being until Wallet redesign is done
+ */
+import styled from 'styled-components'
+import { Button, ButtonExtendedProps } from 'grommet/es6/components/Button'
+
+const StyledButton = styled(Button)`
+  font-size: 14px;
+  border-radius: 8px;
+  border-width: 1px;
+  border-style: solid;
+`
+
+interface BrandButtonProps extends ButtonExtendedProps {
+  brandVariant?: 'brand-blue' | 'brand-gray-medium'
+}
+
+export function BrandButton(props: BrandButtonProps) {
+  const { brandVariant = 'brand-blue', size = 'large', ...rest } = props
+  return <StyledButton {...rest} primary color={brandVariant} size={size} />
+}

src/app/components/FatalErrorHandler/index.tsx

@@ -10,19 +10,21 @@ import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext'
 import { ThemeContext } from 'styled-components'
 import { Anchor } from 'grommet/es6/components/Anchor'
 import { Box } from 'grommet/es6/components/Box'
-import { Button } from 'grommet/es6/components/Button'
 import { Heading } from 'grommet/es6/components/Heading'
 import { TextArea } from 'grommet/es6/components/TextArea'
 import { Text } from 'grommet/es6/components/Text'
 import { Copy } from 'grommet-icons/es6/icons/Copy'
 import { Dashboard } from 'grommet-icons/es6/icons/Dashboard'
+import { Refresh } from 'grommet-icons/es6/icons/Refresh'
 import * as React from 'react'
 import { useContext, useState } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import { useSelector } from 'react-redux'
 import { normalizeColor } from 'grommet/es6/utils'
 import { ResponsiveLayer } from '../ResponsiveLayer'
 import logotype from '../../../../public/logo192.png'
+import { runtimeIs } from 'config'
+import { BrandButton } from '../Button'
 
 const StyledTextArea = styled(TextArea)`
   // Opacity is a workaround for browsers anti-aliasing issue triggered by border-radius.
@@ -33,14 +35,6 @@ const StyledTextArea = styled(TextArea)`
   font-size: 13px;
   color: ${({ theme }) => normalizeColor('text-custom', theme)};
 `
-
-const StyledButton = styled(Button)`
-  font-size: 14px;
-  border-radius: 8px;
-  border-width: 1px;
-  border-style: solid;
-`
-
 interface Props {
   children?: React.ReactNode
 }
@@ -51,6 +45,7 @@ export function FatalErrorHandler({ children }: Props) {
   const theme = useContext(ThemeContext)
   const fatalError = useSelector(selectFatalError)
   const [copied, setCopied] = useState(false)
+  const isExtension = runtimeIs === 'extension'
 
   if (!fatalError) {
     return <>{children}</>
@@ -82,40 +77,42 @@ export function FatalErrorHandler({ children }: Props) {
           />
         </Text>
         <Box direction={isMobile ? 'column' : 'row'} margin={{ bottom: isMobile ? 'xlarge' : 'large' }}>
-          <StyledButton
+          <BrandButton
+            brandVariant={isExtension ? 'brand-gray-medium' : undefined}
             href="https://status.oasisprotocol.org"
             target="_blank"
             rel="noopener noreferrer"
-            icon={<Dashboard size="22px" color={normalizeColor('brand-white', theme)} />}
+            icon={<Dashboard />}
             label={t('fatalError.checkStatus', 'Check network status')}
-            style={{
-              backgroundColor: normalizeColor('brand-blue', theme),
-              color: normalizeColor('brand-white', theme),
-              borderColor: normalizeColor('brand-blue', theme),
-            }}
-            size="large"
           />
         </Box>
         <Box direction="row" justify="end" margin={{ bottom: isMobile ? 'medium' : 'small' }}>
           <StyledTextArea data-testid="fatalerror-stacktrace" readOnly rows={6} value={combinedStacktrace} />
         </Box>
-        <Box align={isMobile ? 'stretch' : 'end'} margin={{ bottom: isMobile ? 'xlarge' : 'large' }}>
-          <StyledButton
+        <Box
+          align={isMobile ? 'stretch' : 'end'}
+          margin={{ bottom: isExtension ? 'small' : isMobile ? 'xlarge' : 'large' }}
+        >
+          <BrandButton
+            brandVariant="brand-gray-medium"
             onClick={() => copyError()}
-            icon={<Copy size="18px" color={normalizeColor('brand-gray-extra-dark', theme)} />}
+            icon={<Copy />}
             label={
               !copied
                 ? t('fatalError.copy', 'Copy error to clipboard')
                 : t('fatalError.copied', 'Error copied to clipboard')
             }
-            style={{
-              backgroundColor: normalizeColor('brand-gray-medium', theme),
-              color: normalizeColor('brand-gray-extra-dark', theme),
-              borderColor: normalizeColor('brand-gray-medium', theme),
-            }}
-            size="large"
           />
         </Box>
+        {isExtension && (
+          <Box align={isMobile ? 'stretch' : 'end'} margin={{ bottom: isMobile ? 'xlarge' : 'large' }}>
+            <BrandButton
+              onClick={() => (window as any).chrome?.runtime?.reload()}
+              icon={<Refresh />}
+              label={t('fatalError.reloadExtension', 'Reload extension')}
+            />
+          </Box>
+        )}
         <Text size="small">
           <Trans
             i18nKey="fatalError.instruction"

src/locales/en/translation.json

@@ -169,7 +169,8 @@
     "copy": "Copy error to clipboard",
     "description": "The error that has occurred triggers the wallet to stop. <strong>Your funds are safe.</strong><br/><br/>Please try refreshing the page and reopening your wallet to see if the issue persists. You can check the current status of the network below.",
     "heading": "An error occurred.",
-    "instruction": "If the issue is not resolved after refreshing, please email our support team at  <Email/> and attached the error report."
+    "instruction": "If the issue is not resolved after refreshing, please email our support team at  <Email/> and attached the error report.",
+    "reload": "Reload extension"
   },
   "fiatOnramp": {
     "astarFootnote": "It is hereby noted that AStar Technologies, a Cayman Islands exempted company is acting on behalf and for the purposes of Oasis, and is also the provider of the Oasis Wallet.",