Remove manual usages of Modal within createModal

skip-mev · Aug 21, 2024 · 9462843 · 9462843
1 parent 8fad0d9
commit 9462843
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 46 deletions.
diff --git a/packages/widget-v2/src/modals/ManualAddressModal/ManualAddressModal.tsx b/packages/widget-v2/src/modals/ManualAddressModal/ManualAddressModal.tsx
@@ -1,5 +1,5 @@
 import { useModal } from '@ebay/nice-modal-react';
-import { createModal, Modal, ModalProps } from '@/components/Modal';
+import { createModal, ModalProps } from '@/components/Modal';
 import { Column, Row } from '@/components/Layout';
 import { css, styled } from 'styled-components';
 import { useCallback, useMemo, useState } from 'react';
@@ -62,7 +62,7 @@ export const ManualAddressModal = createModal((modalProps: ModalProps) => {
   }, [manualWalletAddress]);
 
   return (
-    <Modal {...modalProps}>
+    <>
       {showManualAddressInput ? (
         <StyledContainer gap={15}>
           <RenderWalletListHeader
@@ -122,7 +122,7 @@ export const ManualAddressModal = createModal((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,5 @@
 import { useModal } from '@ebay/nice-modal-react';
-import { createModal, Modal, ModalProps } from '@/components/Modal';
+import { createModal, ModalProps } from '@/components/Modal';
 import { Column } from '@/components/Layout';
 import { styled } from 'styled-components';
 import { useAtom } from 'jotai';
@@ -78,34 +78,32 @@ export const TokenAndChainSelectorModal = createModal(
     );
 
     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/packages/widget-v2/src/modals/TransactionHistoryModal/TransactionHistoryModal.tsx b/packages/widget-v2/src/modals/TransactionHistoryModal/TransactionHistoryModal.tsx
@@ -1,4 +1,4 @@
-import { createModal, 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';
@@ -26,7 +26,7 @@ export const TransactionHistoryModal = createModal(
       number | undefined
     >();
     return (
-      <Modal {...modalProps}>
+      <>
         <SwapPageHeader
           leftButton={{
             label: 'Back',
@@ -74,7 +74,7 @@ export const TransactionHistoryModal = createModal(
           )}
         </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,5 @@
 import { useModal } from '@ebay/nice-modal-react';
-import { createModal, Modal, ModalProps } from '@/components/Modal';
+import { createModal, ModalProps } from '@/components/Modal';
 import { RenderWalletList, Wallet } from '@/components/RenderWalletList';
 
 export type WalletSelectorModalProps = ModalProps & {
@@ -32,14 +32,12 @@ export const WalletSelectorModal = createModal(
     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/SwapPage/SwapPageSettings.tsx b/packages/widget-v2/src/pages/SwapPage/SwapPageSettings.tsx
@@ -1,11 +1,9 @@
 import { css, styled } from 'styled-components';
-import { createModal, Modal, ModalProps } from '@/components/Modal';
+import { createModal, ModalProps } from '@/components/Modal';
 import { Column, Row } from '@/components/Layout';
-import NiceModal from '@ebay/nice-modal-react';
 import { SmallText } from '@/components/Typography';
 import { RouteArrow } from '@/icons/RouteArrow';
 import { SwapPageFooterItems } from './SwapPageFooter';
-import { useEffect } from 'react';
 
 const SLIPPAGE_OPTIONS = [
   {