Merge remote-tracking branch 'origin/koni/dev/issue-1067-lw' into upg…

…rade-ui
Koniverse · Mar 20, 2023 · cb2a4ee · cb2a4ee
2 parents 0fb8b29 + ac37c75
commit cb2a4ee
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 15 deletions.
diff --git a/packages/extension-koni-ui/src/Popup/ErrorFallback.tsx b/packages/extension-koni-ui/src/Popup/ErrorFallback.tsx
@@ -0,0 +1,112 @@
+// Copyright 2019-2022 @polkadot/extension-koni-ui authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { PageWrapper } from '@subwallet/extension-koni-ui/components';
+import useTranslation from '@subwallet/extension-koni-ui/hooks/common/useTranslation';
+import useDefaultNavigate from '@subwallet/extension-koni-ui/hooks/router/useDefaultNavigate';
+import { Theme, ThemeProps } from '@subwallet/extension-koni-ui/types';
+import { Button, Icon, PageIcon } from '@subwallet/react-ui';
+import CN from 'classnames';
+import { House, Robot } from 'phosphor-react';
+import React from 'react';
+import { useRouteError } from 'react-router-dom';
+import styled, { useTheme } from 'styled-components';
+
+type Props = ThemeProps;
+
+function Component ({ className = '' }: Props) {
+  const error = useRouteError();
+  const { t } = useTranslation();
+  const { token } = useTheme() as Theme;
+  const goHome = useDefaultNavigate().goHome;
+
+  console.error(error);
+
+  return (
+    <PageWrapper className={CN('main-page-container', className)}>
+      <div className={'__body-area'}>
+        <PageIcon
+          color={token.colorError}
+          iconProps={{
+            phosphorIcon: Robot
+          }}
+        />
+        <div className={'__title'}>{t('Opps! An Error Occurred')}</div>
+        <div className={'__content'}>
+          <span>{t('Sorry, something went wrong.')}</span>
+          <br />
+          <span>{t('Please try again later.')}</span>
+        </div>
+      </div>
+
+      <div className={'__footer-area'}>
+        <Button
+          block={true}
+          icon={(
+            <Icon
+              className={'icon-submit'}
+              phosphorIcon={House}
+              weight='fill'
+            />
+          )}
+          onClick={goHome}
+        >
+          {t('Back to home')}
+        </Button>
+      </div>
+    </PageWrapper>
+  );
+}
+
+const ErrorFallback = styled(Component)<Props>(({ theme: { extendToken, token } }: Props) => {
+  return ({
+    backgroundColor: token.colorBgDefault,
+    paddingLeft: token.padding,
+    paddingRight: token.padding,
+    display: 'flex',
+    flexDirection: 'column',
+    position: 'relative',
+
+    '&:before': {
+      content: '""',
+      backgroundImage: extendToken.tokensScreenDangerBackgroundColor,
+      height: 180,
+      position: 'absolute',
+      display: 'block',
+      top: 0,
+      left: 0,
+      right: 0
+    },
+
+    '.__body-area': {
+      flex: 1,
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      textAlign: 'center',
+      paddingTop: 128
+    },
+
+    '.__title': {
+      color: token.colorError,
+      fontSize: token.fontSizeHeading4,
+      lineHeight: token.lineHeightHeading4,
+      fontWeight: token.headingFontWeight,
+      marginTop: token.marginXL,
+      marginBottom: token.margin
+    },
+
+    '.__content': {
+      color: token.colorTextLight3,
+      fontSize: token.fontSizeLG,
+      lineHeight: token.lineHeightLG
+    },
+
+    '.__footer-area': {
+      paddingTop: token.padding,
+      paddingBottom: token.paddingXL
+    }
+  });
+});
+
+export default ErrorFallback;
diff --git a/packages/extension-koni-ui/src/Popup/router.tsx b/packages/extension-koni-ui/src/Popup/router.tsx
@@ -6,7 +6,7 @@ import { PageWrapper } from '@subwallet/extension-koni-ui/components';
 import { Root } from '@subwallet/extension-koni-ui/Popup/Root';
 import { i18nPromise } from '@subwallet/extension-koni-ui/util/i18n';
 import React, { ComponentType, ReactNode } from 'react';
-import { createHashRouter, Outlet, useLocation, useRouteError } from 'react-router-dom';
+import { createHashRouter, Outlet, useLocation } from 'react-router-dom';
 
 export class LazyLoader {
   public loader;
@@ -86,19 +86,7 @@ const Unstake = new LazyLoader(() => import('@subwallet/extension-koni-ui/Popup/
 const CancelUnstake = new LazyLoader(() => import('@subwallet/extension-koni-ui/Popup/Transaction/CancelUnstake'));
 const ClaimReward = new LazyLoader(() => import('@subwallet/extension-koni-ui/Popup/Transaction/ClaimReward'));
 const Withdraw = new LazyLoader(() => import('@subwallet/extension-koni-ui/Popup/Transaction/Withdraw'));
-
-const ErrorFallback = () => {
-  const error = useRouteError();
-
-  console.error(error);
-
-  return (
-    <div>
-      <h1>An Error Occurred</h1>
-      <p>Sorry, something went wrong. Please try again later.</p>
-    </div>
-  );
-};
+const ErrorFallback = new LazyLoader(() => import('@subwallet/extension-koni-ui/Popup/ErrorFallback'));
 
 // A Placeholder page
 export function Example () {
@@ -115,7 +103,7 @@ export const router = createHashRouter([
     path: '/',
     loader: () => i18nPromise,
     element: <Root />,
-    errorElement: <ErrorFallback />,
+    errorElement: <ErrorFallback.element />,
     children: [
       Welcome.generateRouterObject('/welcome'),
       BuyTokens.generateRouterObject('/buy-tokens'),