refactor: separate routing

packages/extension-base/src/defaults.ts

@@ -16,6 +16,12 @@ const START_WITH_PATH = [
   '/derivefs/'
 ] as const;
 
+const ROOT_PATH = [
+  '/authorize',
+  '/signing',
+  '/metadata'
+] as const;
+
 const EXTENSION_PREFIX = 'POLKAGATE';
 
 const PORT_PREFIX = `${EXTENSION_PREFIX || 'unknown'}-${process.env['PORT_PREFIX'] || 'unknown'}`;
@@ -40,5 +46,6 @@ export {
   PHISHING_PAGE_REDIRECT,
   PORT_CONTENT,
   PORT_EXTENSION,
+  ROOT_PATH, // Added for PolkaGate
   START_WITH_PATH// Added for PolkaGate
 };

packages/extension-polkagate/src/components/index.ts

@@ -31,7 +31,7 @@ export * from './contexts';
 export { default as Convictions } from './Convictions';
 export { default as CopyAddressButton } from './CopyAddressButton';
 export { default as DisplayInfo } from './DisplayInfo';
-export { default as ErrorBoundary } from './ErrorBoundary';
+export { default as ErrorBoundary } from '../../../extension-ui/src/Popup/components/ErrorBoundary';
 export { default as FormatBalance } from './FormatBalance';
 export { default as FormatBalance2 } from './FormatBalance2';
 export { default as FormatPrice } from './FormatPrice';

packages/extension-polkagate/src/components/translate.ts

@@ -1,10 +1,11 @@
 // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
 // SPDX-License-Identifier: Apache-2.0
-// @ts-nocheck
 
-import { useTranslation as useTranslationBase, UseTranslationResponse, withTranslation } from 'react-i18next';
+import type { UseTranslationResponse } from 'react-i18next';
 
-export function useTranslation(): UseTranslationResponse<string, undefined> {
+import { useTranslation as useTranslationBase, withTranslation } from 'react-i18next';
+
+export function useTranslation (): UseTranslationResponse<string, undefined> {
   return useTranslationBase();
 }
 

packages/extension-polkagate/src/hooks/useFullscreen.ts

@@ -1,11 +1,10 @@
 // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
 // SPDX-License-Identifier: Apache-2.0
-// @ts-nocheck
 
-import { useEffect } from 'react';
+import { useLayoutEffect } from 'react';
 
-export default function useFullscreen(): void {
-  useEffect(() => {
+export default function useFullscreen (): void {
+  useLayoutEffect(() => {
     /** to change app width to full screen */
     const root = document.getElementById('root');
 

packages/extension-polkagate/src/components/ErrorBoundary.tsx → packages/extension-ui/src/Popup/components/ErrorBoundary.tsx

@@ -8,10 +8,11 @@ import type { WithTranslation } from 'react-i18next';
 import { Grid, Typography } from '@mui/material';
 import React from 'react';
 
-import HeaderBrand from '../partials/HeaderBrand';
-import { EXTENSION_NAME } from '../util/constants';
-import translate from './translate';
-import { PButton } from '.';
+import { PButton } from '@polkadot/extension-polkagate/src/components';
+import translate from '@polkadot/extension-polkagate/src/components/translate';
+import AlertBox from '@polkadot/extension-polkagate/src/partials/AlertBox';
+import HeaderBrand from '@polkadot/extension-polkagate/src/partials/HeaderBrand';
+import { EXTENSION_NAME } from '@polkadot/extension-polkagate/src/util/constants';
 
 interface Props extends WithTranslation {
   children: React.ReactNode;
@@ -26,6 +27,26 @@ interface State {
 
 // NOTE: This is the only way to do an error boundary, via extend
 class ErrorBoundary extends React.Component<Props> {
+  private isExtensionPopup: boolean;
+
+  constructor (props: Props) {
+    super(props);
+
+    // Initialize extension detection in constructor
+    this.isExtensionPopup = false;
+
+    if (chrome?.extension?.getViews) {
+      const extensionViews = chrome.extension.getViews({ type: 'popup' });
+      const isPopupOpenedByExtension = extensionViews.includes(window);
+
+      if (isPopupOpenedByExtension) {
+        this.isExtensionPopup = true;
+      }
+    } else {
+      this.isExtensionPopup = window.innerWidth <= 357 && window.innerHeight <= 621;
+    }
+  }
+
   public override state: State = { error: null };
 
   public static getDerivedStateFromError (error: Error): Partial<State> {
@@ -73,10 +94,12 @@ class ErrorBoundary extends React.Component<Props> {
             _onClick={this.#goHome}
             text={t<string>('Back to home')}
           />
-          {/* </ButtonArea> */}
         </>
       )
-      : children;
+      : <>
+        {children}
+        {!this.isExtensionPopup && <AlertBox />}
+      </>;
   }
 }
 

packages/extension-ui/src/Popup/components/RouteWrapper.tsx

@@ -0,0 +1,20 @@
+// Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+
+import ErrorBoundary from './ErrorBoundary';
+
+interface RouteWrapperProps {
+  component: React.ComponentType;
+  trigger?: string;
+  props?: Record<string, unknown>;
+}
+
+const RouteWrapper = ({ component: Component, props, trigger }: RouteWrapperProps) => (
+  <ErrorBoundary trigger={trigger}>
+    <Component {...props} />
+  </ErrorBoundary>
+);
+
+export default React.memo(RouteWrapper);