Merge branch 'main' into FRE-929

skip-mev · Aug 21, 2024 · f797ba2 · f797ba2
2 parents b1c2472 + b26ed5e
commit f797ba2
Show file tree

Hide file tree

Showing 12 changed files with 203 additions and 139 deletions.
diff --git a/packages/widget-v2/src/components/Modal.tsx b/packages/widget-v2/src/components/Modal.tsx
@@ -1,15 +1,21 @@
-import { css, styled } from 'styled-components';
+import { css, styled, useTheme } from 'styled-components';
 import * as Dialog from '@radix-ui/react-dialog';
 import { ShadowDomAndProviders } from '@/widget/ShadowDomAndProviders';
-import { useModal } from '@ebay/nice-modal-react';
-import { useEffect } from 'react';
+import NiceModal, { useModal as useNiceModal } from '@ebay/nice-modal-react';
+import { ComponentType, FC, useCallback, useEffect, useMemo } from 'react';
 import { PartialTheme } from '@/widget/theme';
 
+import { ErrorBoundary } from 'react-error-boundary';
+import { useAtom } from 'jotai';
+import { errorAtom } from '@/state/errorPage';
+import { numberOfModalsOpenAtom } from '@/state/modal';
+
 export type ModalProps = {
   children: React.ReactNode;
   drawer?: boolean;
   container?: HTMLElement;
   onOpenChange?: (open: boolean) => void;
+  stackedModal?: boolean;
   theme?: PartialTheme;
 };
 
@@ -18,6 +24,7 @@ export const Modal = ({
   drawer,
   container,
   onOpenChange,
+  stackedModal,
   theme,
 }: ModalProps) => {
   const modal = useModal();
@@ -33,7 +40,7 @@ export const Modal = ({
     <Dialog.Root open={modal.visible} onOpenChange={() => modal.remove()}>
       <Dialog.Portal container={container}>
         <ShadowDomAndProviders theme={theme}>
-          <StyledOverlay drawer={drawer}>
+          <StyledOverlay drawer={drawer} invisible={stackedModal}>
             <StyledContent>{children}</StyledContent>
           </StyledOverlay>
         </ShadowDomAndProviders>
@@ -42,8 +49,71 @@ export const Modal = ({
   );
 };
 
-const StyledOverlay = styled(Dialog.Overlay)<{ drawer?: boolean }>`
-  background: rgba(0 0 0 / 0.5);
+export const createModal = <T extends ModalProps>(
+  component: ComponentType<T>
+) => {
+  const Component = component;
+
+  const WrappedComponent = (props: T) => {
+    const [, setError] = useAtom(errorAtom);
+
+    return (
+      <Modal {...props}>
+        <ErrorBoundary fallback={null} onError={(error) => setError(error)}>
+          <Component {...props} />
+        </ErrorBoundary>
+      </Modal>
+    );
+  };
+
+  return NiceModal.create(WrappedComponent);
+};
+
+export const useModal = <T extends ModalProps>(
+  modal?: FC<T>,
+  initialArgs?: Partial<T>
+) => {
+  const theme = useTheme();
+  const [numberOfModalsOpen, setNumberOfModalsOpen] = useAtom(
+    numberOfModalsOpenAtom
+  );
+
+  const modalInstance = modal
+    ? useNiceModal(modal, initialArgs)
+    : useNiceModal();
+
+  const show = useCallback(
+    (showArgs?: Partial<T & ModalProps>) => {
+      setNumberOfModalsOpen((prev) => prev + 1);
+      modalInstance.show({
+        theme,
+        stackedModal: numberOfModalsOpen > 0,
+        ...showArgs,
+      } as Partial<T>);
+    },
+    [modalInstance, setNumberOfModalsOpen, theme, numberOfModalsOpen]
+  );
+
+  const remove = useCallback(() => {
+    setNumberOfModalsOpen((prev) => Math.max(0, prev - 1));
+    modalInstance.remove();
+  }, [modalInstance, setNumberOfModalsOpen]);
+
+  return useMemo(
+    () => ({
+      ...modalInstance,
+      show,
+      remove,
+    }),
+    [modalInstance, show, remove]
+  );
+};
+
+const StyledOverlay = styled(Dialog.Overlay)<{
+  drawer?: boolean;
+  invisible?: boolean;
+}>`
+  ${({ invisible }) => (invisible ? '' : 'background: rgba(0 0 0 / 0.5);')}
   position: fixed;
   top: 0;
   left: 0;

diff --git a/packages/widget-v2/src/modals/ManualAddressModal/ManualAddressModal.tsx b/packages/widget-v2/src/modals/ManualAddressModal/ManualAddressModal.tsx
@@ -1,5 +1,4 @@
-import NiceModal, { useModal } from '@ebay/nice-modal-react';
-import { Modal, ModalProps } from '@/components/Modal';
+import { createModal, ModalProps, useModal } from '@/components/Modal';
 import { Column, Row } from '@/components/Layout';
 import { css, styled } from 'styled-components';
 import { useCallback, useMemo, useState } from 'react';
@@ -16,7 +15,7 @@ import { destinationAssetAtom, destinationWalletAtom } from '@/state/swapPage';
 import { useAtom } from 'jotai';
 import { getChain } from '@/state/skipClient';
 
-export const ManualAddressModal = NiceModal.create((modalProps: ModalProps) => {
+export const ManualAddressModal = createModal((modalProps: ModalProps) => {
   const { theme } = modalProps;
   const modal = useModal();
   const [destinationAsset] = useAtom(destinationAssetAtom);
@@ -60,7 +59,7 @@ export const ManualAddressModal = NiceModal.create((modalProps: ModalProps) => {
   }, [manualWalletAddress]);
 
   return (
-    <Modal {...modalProps}>
+    <>
       {showManualAddressInput ? (
         <StyledContainer gap={15}>
           <RenderWalletListHeader
@@ -120,7 +119,7 @@ export const ManualAddressModal = NiceModal.create((modalProps: ModalProps) => {
           onClickBackButton={() => modal.remove()}
         />
       )}
-    </Modal>
+    </>
   );
 });
 

diff --git a/packages/widget-v2/src/modals/TokenAndChainSelectorModal/TokenAndChainSelectorModal.tsx b/packages/widget-v2/src/modals/TokenAndChainSelectorModal/TokenAndChainSelectorModal.tsx
@@ -1,5 +1,4 @@
-import NiceModal, { useModal } from '@ebay/nice-modal-react';
-import { Modal, ModalProps } from '@/components/Modal';
+import { createModal, ModalProps, useModal } from '@/components/Modal';
 import { Column } from '@/components/Layout';
 import { styled } from 'styled-components';
 import { useAtom } from 'jotai';
@@ -19,7 +18,7 @@ export type TokenAndChainSelectorModalProps = ModalProps & {
   asset?: Partial<ClientAsset>;
 };
 
-export const TokenAndChainSelectorModal = NiceModal.create(
+export const TokenAndChainSelectorModal = createModal(
   (modalProps: TokenAndChainSelectorModalProps) => {
     const modal = useModal();
     const { onSelect, chainsContainingAsset, asset } = modalProps;
@@ -78,34 +77,32 @@ export const TokenAndChainSelectorModal = NiceModal.create(
     );
 
     return (
-      <Modal {...modalProps}>
-        <StyledContainer>
-          <TokenAndChainSelectorModalSearchInput
-            onSearch={handleSearch}
-            asset={asset}
+      <StyledContainer>
+        <TokenAndChainSelectorModalSearchInput
+          onSearch={handleSearch}
+          asset={asset}
+        />
+        {showSkeleton || (!filteredAssets && !filteredChains) ? (
+          <Column>
+            {Array.from({ length: 10 }, (_, index) => (
+              <Skeleton key={index} />
+            ))}
+          </Column>
+        ) : (
+          <VirtualList
+            listItems={filteredChains ?? filteredAssets ?? []}
+            height={530}
+            itemHeight={70}
+            renderItem={renderItem}
+            itemKey={(item) => {
+              if (isChainWithAsset(item)) {
+                return `${item.chain_id}${item.chain_name}`;
+              }
+              return `${item.chainID}${item.denom}`;
+            }}
           />
-          {showSkeleton || (!filteredAssets && !filteredChains) ? (
-            <Column>
-              {Array.from({ length: 10 }, (_, index) => (
-                <Skeleton key={index} />
-              ))}
-            </Column>
-          ) : (
-            <VirtualList
-              listItems={filteredChains ?? filteredAssets ?? []}
-              height={530}
-              itemHeight={70}
-              renderItem={renderItem}
-              itemKey={(item) => {
-                if (isChainWithAsset(item)) {
-                  return `${item.chain_id}${item.chain_name}`;
-                }
-                return `${item.chainID}${item.denom}`;
-              }}
-            />
-          )}
-        </StyledContainer>
-      </Modal>
+        )}
+      </StyledContainer>
     );
   }
 );

diff --git a/...widget-v2/src/modals/TokenAndChainSelectorModal/TokenAndChainSelectorModalSearchInput.tsx b/...widget-v2/src/modals/TokenAndChainSelectorModal/TokenAndChainSelectorModalSearchInput.tsx
@@ -7,9 +7,9 @@ import { SearchIcon } from '@/icons/SearchIcon';
 import { StyledAssetLabel } from '@/components/AssetChainInput';
 import { ClientAsset } from '@/state/skipClient';
 import { LeftArrowIcon } from '@/icons/ArrowIcon';
-import { useModal } from '@ebay/nice-modal-react';
 import { Button } from '@/components/Button';
 import { Text } from '@/components/Typography';
+import { useModal } from '@/components/Modal';
 
 type TokenAndChainSelectorModalSearchInputProps = {
   onSearch: (term: string) => void;

diff --git a/packages/widget-v2/src/modals/TransactionHistoryModal/TransactionHistoryModal.tsx b/packages/widget-v2/src/modals/TransactionHistoryModal/TransactionHistoryModal.tsx
@@ -1,5 +1,4 @@
-import NiceModal from '@ebay/nice-modal-react';
-import { Modal, ModalProps } from '@/components/Modal';
+import { createModal, ModalProps } from '@/components/Modal';
 import { Column } from '@/components/Layout';
 import { styled } from 'styled-components';
 import { SwapPageHeader } from '@/pages/SwapPage/SwapPageHeader';
@@ -21,13 +20,13 @@ export type TransactionHistoryModalProps = ModalProps & {
   txHistory: TxHistoryItem[];
 };
 
-export const TransactionHistoryModal = NiceModal.create(
+export const TransactionHistoryModal = createModal(
   ({ txHistory, ...modalProps }: TransactionHistoryModalProps) => {
     const [itemIndexToShowDetail, setItemIndexToShowDetail] = useState<
       number | undefined
     >();
     return (
-      <Modal {...modalProps}>
+      <>
         <SwapPageHeader
           leftButton={{
             label: 'Back',
@@ -74,7 +73,7 @@ export const TransactionHistoryModal = NiceModal.create(
           )}
         </StyledContainer>
         <SwapPageFooter />
-      </Modal>
+      </>
     );
   }
 );

diff --git a/packages/widget-v2/src/modals/WalletSelectorModal/WalletSelectorFlow.tsx b/packages/widget-v2/src/modals/WalletSelectorModal/WalletSelectorFlow.tsx
@@ -1,5 +1,4 @@
-import NiceModal, { useModal } from '@ebay/nice-modal-react';
-import { Modal, ModalProps } from '@/components/Modal';
+import { createModal, ModalProps, useModal } from '@/components/Modal';
 import { RenderWalletList, Wallet } from '@/components/RenderWalletList';
 
 export type WalletSelectorModalProps = ModalProps & {
@@ -26,20 +25,18 @@ export const WALLET_LIST: Wallet[] = [
   },
 ];
 
-export const WalletSelectorModal = NiceModal.create(
+export const WalletSelectorModal = createModal(
   (modalProps: WalletSelectorModalProps) => {
     const { onSelect } = modalProps;
     const modal = useModal();
 
     return (
-      <Modal {...modalProps}>
-        <RenderWalletList
-          title="Connect wallet"
-          walletList={WALLET_LIST}
-          onSelect={onSelect}
-          onClickBackButton={() => modal.remove()}
-        />
-      </Modal>
+      <RenderWalletList
+        title="Connect wallet"
+        walletList={WALLET_LIST}
+        onSelect={onSelect}
+        onClickBackButton={() => modal.remove()}
+      />
     );
   }
 );
diff --git a/packages/widget-v2/src/pages/ErrorPage/ErrorPage.tsx b/packages/widget-v2/src/pages/ErrorPage/ErrorPage.tsx
@@ -1,13 +1,26 @@
 import { errorAtom } from '@/state/errorPage';
 import { useResetAtom } from 'jotai/utils';
 
-export const ErrorPage = () => {
+export const ErrorPage = ({
+  error,
+  componentStack,
+  resetErrorBoundary,
+}: {
+  error?: Error;
+  componentStack?: string;
+  resetErrorBoundary?: () => void;
+}) => {
   const resetError = useResetAtom(errorAtom);
 
+  const handleReset = () => {
+    resetError();
+    resetErrorBoundary?.();
+  };
+
   return (
     <div>
       error page
-      <button onClick={() => resetError()}>reset</button>
+      <button onClick={handleReset}>reset</button>
     </div>
   );
 };
diff --git a/packages/widget-v2/src/pages/SwapExecutionPage/SwapExecutionPage.tsx b/packages/widget-v2/src/pages/SwapExecutionPage/SwapExecutionPage.tsx
@@ -4,7 +4,6 @@ import { SwapPageFooter } from '@/pages/SwapPage/SwapPageFooter';
 import { SwapPageHeader } from '@/pages/SwapPage/SwapPageHeader';
 import { useEffect, useMemo, useState } from 'react';
 import { ICONS } from '@/icons';
-import { useModal } from '@ebay/nice-modal-react';
 import { ManualAddressModal } from '@/modals/ManualAddressModal/ManualAddressModal';
 import styled, { useTheme } from 'styled-components';
 import { useAtom } from 'jotai';
@@ -18,6 +17,7 @@ import { SmallText } from '@/components/Typography';
 import { SignatureIcon } from '@/icons/SignatureIcon';
 import pluralize from 'pluralize';
 import operations from './operations.json';
+import { useModal } from '@/components/Modal';
 
 enum SwapExecutionState {
   destinationAddressUnset,
@@ -92,11 +92,7 @@ export const SwapExecutionPage = () => {
           <MainButton
             label="Set destination address"
             icon={ICONS.rightArrow}
-            onClick={() =>
-              modal.show({
-                theme,
-              })
-            }
+            onClick={() => modal.show()}
           />
         );
       case SwapExecutionState.unconfirmed:
@@ -133,9 +129,7 @@ export const SwapExecutionPage = () => {
   const SwapExecutionPageRoute = simpleRoute
     ? withBoundProps(SwapExecutionPageRouteSimple, {
         onClickEditDestinationWallet: () => {
-          modal.show({
-            theme,
-          });
+          modal.show();
         },
       })
     : SwapExecutionPageRouteDetailed;