refactor: separate routing (#1673)

Author: AMIRKHANEF

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,6 @@ 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 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/popup/PhishingDetected.tsx

@@ -12,7 +12,7 @@ interface WebsiteState {
   website: string;
 }
 
-export default function PhishingDetected(): React.ReactElement {
+export default function PhishingDetected (): React.ReactElement {
   const { t } = useTranslation();
   const { website } = useParams<WebsiteState>();
   const decodedWebsite = decodeURIComponent(website);

packages/extension-polkagate/src/popup/authorize/AuthFullScreenMode.tsx

@@ -32,20 +32,19 @@ function AuthFullScreenMode ({ onNextAuth, onPreviousAuth, requestIndex, request
   const onAction = useContext(ActionContext);
   const { accounts } = useContext(AccountContext);
 
-  const url = requests[requestIndex].url;
-  const faviconUrl = useFavIcon(url);
+  const _url = requests[requestIndex]?.url;
+  const faviconUrl = useFavIcon(_url);
 
   const [selectedAccounts, setSelectedAccounts] = useState<string[]>([]);
   const [alreadySelectedAccounts, setAlreadySelectedAccounts] = useState<string[]>([]);
 
-
   const allAccounts = useMemo(() => accounts.map(({ address }) => address), [accounts]);
   const areAllCheck = useMemo(() => areArraysEqual([allAccounts, selectedAccounts]), [allAccounts, selectedAccounts]);
 
   useEffect(() => {
     getAuthList()
       .then(({ list: authList }) => {
-        const dappURL = extractBaseUrl(url);
+        const dappURL = extractBaseUrl(_url);
 
         const availableDapp = Object.values(authList).find(({ url }) => dappURL === extractBaseUrl(url));
 
@@ -57,11 +56,11 @@ function AuthFullScreenMode ({ onNextAuth, onPreviousAuth, requestIndex, request
         }
       })
       .catch(console.error);
-  }, [url]);
+  }, [_url]);
 
   const onApprove = useCallback((): void => {
     approveAuthRequest(selectedAccounts, requests[requestIndex].id)
-      .then(() => onAction())
+      .then(() => onAction('/'))
       .catch((error: Error) => console.error(error));
   }, [onAction, requestIndex, requests, selectedAccounts]);
 
@@ -71,7 +70,7 @@ function AuthFullScreenMode ({ onNextAuth, onPreviousAuth, requestIndex, request
     (alreadySelectedAccounts.length
       ? approveAuthRequest(alreadySelectedAccounts, id)
       : ignoreAuthRequest(id)
-    ).then(() => onAction())
+    ).then(() => onAction('/'))
       .catch((error: Error) => console.error(error));
   }, [alreadySelectedAccounts, onAction, requestIndex, requests]);
 
@@ -118,7 +117,7 @@ function AuthFullScreenMode ({ onNextAuth, onPreviousAuth, requestIndex, request
               variant='circular'
             />
             <span style={{ fontSize: '15px', fontWeight: 400, overflowWrap: 'anywhere' }}>
-              {extractBaseUrl(url)}
+              {extractBaseUrl(_url)}
             </span>
           </Grid>
           <Grid container item sx={{ marginBottom: '15px', marginTop: '10px' }}>

packages/extension-polkagate/src/popup/authorize/Request.tsx

@@ -53,7 +53,7 @@ export default function Request ({ authRequest, hasBanner }: Props): React.React
 
   const onApprove = useCallback((): void => {
     approveAuthRequest(selectedAccounts, authRequest.id)
-      .then(() => onAction())
+      .then(() => onAction('/'))
       .catch((error: Error) => console.error(error));
   }, [authRequest.id, onAction, selectedAccounts]);
 
@@ -63,7 +63,7 @@ export default function Request ({ authRequest, hasBanner }: Props): React.React
     (alreadySelectedAccounts.length
       ? approveAuthRequest(alreadySelectedAccounts, id)
       : ignoreAuthRequest(id)
-    ).then(() => onAction())
+    ).then(() => onAction('/'))
       .catch((error: Error) => console.error(error));
   }, [alreadySelectedAccounts, authRequest.id, onAction]);
 

packages/extension-polkagate/src/popup/metadata/Request.tsx

@@ -25,19 +25,19 @@ export default function Request ({ metaId, request, url }: Props): React.ReactEl
   const chain = useMetadata(request.genesisHash, true);
   const onAction = useContext(ActionContext);
 
-  const _onApprove = useCallback(
+  const onApprove = useCallback(
     (): void => {
       approveMetaRequest(metaId)
-        .then(() => onAction())
+        .then(() => onAction('/'))
         .catch(console.error);
     },
     [metaId, onAction]
   );
 
-  const _onReject = useCallback(
+  const onReject = useCallback(
     (): void => {
       rejectMetaRequest(metaId)
-        .then(() => onAction())
+        .then(() => onAction('/'))
         .catch(console.error);
     },
     [metaId, onAction]
@@ -111,8 +111,8 @@ export default function Request ({ metaId, request, url }: Props): React.ReactEl
         </Warning>
       </Grid>
       <TwoButtons
-        onPrimaryClick={_onApprove}
-        onSecondaryClick={_onReject}
+        onPrimaryClick={onApprove}
+        onSecondaryClick={onReject}
         primaryBtnText={t('Approve')}
         secondaryBtnText={t('Reject')}
         variant='text'

packages/extension-polkagate/src/popup/metadata/index.tsx

@@ -16,7 +16,7 @@ export default function Metadata (): React.ReactElement {
   const onReject = useCallback(
     (): void => {
       rejectMetaRequest(requests[0].id)
-        .then(() => onAction())
+        .then(() => onAction('/'))
         .catch(console.error);
     },
     [onAction, requests]
@@ -26,7 +26,7 @@ export default function Metadata (): React.ReactElement {
     <>
       <Header
         onClose={onReject}
-        text={t<string>('Metadata')}
+        text={t('Metadata')}
       />
       {requests[0]
         ? (

packages/extension-polkagate/src/popup/signing/Request/SignArea.tsx

@@ -59,7 +59,7 @@ export default function SignArea({ buttonText, error, isExternal, isFirst, isSig
       approveSignPassword(signId, savePass, password)
         .then((): void => {
           setIsBusy(false);
-          onAction();
+          onAction('/');
         })
         .catch((error: Error): void => {
           setIsBusy(false);

packages/extension-polkagate/src/popup/signing/Request/index.tsx

@@ -77,7 +77,7 @@ export default function Request ({ account: { accountIndex, addressOffset, isExt
   const _onSignature = useCallback(
     ({ signature }: { signature: HexString }): void => {
       approveSignSignature(signId, signature)
-        .then(() => onAction())
+        .then(() => onAction('/'))
         .catch((error: Error): void => {
           setError(error.message);
           console.error(error);
@@ -101,7 +101,7 @@ export default function Request ({ account: { accountIndex, addressOffset, isExt
     extrinsic.addSignature(_address, signature, _raw.toHex());
 
     approveSignSignature(signId, signature, extrinsic.toHex())
-      .then(() => onAction())
+      .then(() => onAction('/'))
       .catch((error: Error): void => {
         setError(error.message);
         console.error(error);

packages/extension-polkagate/src/popup/signing/index.tsx

@@ -55,7 +55,7 @@ export default function Signing (): React.ReactElement {
     }
 
     cancelSignRequest(request.id)
-      .then(() => onAction())
+      .then(() => onAction('/'))
       .catch((error: Error) => console.error(error));
   }, [onAction, request?.id]);
 

packages/extension-polkagate/src/components/ErrorBoundary.tsx renamed to 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>;
+}
+
+export default function RouteWrapper ({ component: Component, props, trigger }: RouteWrapperProps) {
+  return (
+    <ErrorBoundary trigger={trigger}>
+      <Component {...props} />
+    </ErrorBoundary>
+  );
+}