perf: dont rerender all modals when opening/closing one (#4971)

src/App.tsx

@@ -19,9 +19,7 @@ export const App = () => {
   const translate = useTranslate()
   const showWelcomeModal = useSelector(selectShowWelcomeModal)
   const showConsentBanner = useSelector(selectShowConsentBanner)
-  const {
-    nativeOnboard: { isOpen: isNativeOnboardOpen, open: openNativeOnboard },
-  } = useModal()
+  const { isOpen: isNativeOnboardOpen, open: openNativeOnboard } = useModal('nativeOnboard')
 
   useEffect(() => {
     if (shouldUpdate && !toast.isActive(updateId)) {

src/components/AssetHeader/AssetActions.tsx

@@ -31,7 +31,9 @@ export const AssetActions: React.FC<AssetActionProps> = ({ assetId, accountId, c
 
   const [isValidChainId, setIsValidChainId] = useState(true)
   const chainAdapterManager = getChainAdapterManager()
-  const { send, receive, fiatRamps } = useModal()
+  const send = useModal('send')
+  const receive = useModal('receive')
+  const fiatRamps = useModal('fiatRamps')
   const translate = useTranslate()
   const {
     state: { isConnected },

src/components/Layout/Header/GlobalSearch/GlobalSearchButton.tsx

@@ -76,7 +76,7 @@ export const GlobalSeachButton = () => {
   const resultsCount = flatResults.length
   const isMac = /Mac/.test(navigator.userAgent)
 
-  const { send } = useModal()
+  const send = useModal('send')
   useEffect(() => {
     if (!searchQuery) setActiveIndex(0)
   }, [searchQuery])

src/components/Layout/Header/NavBar/KeepKey/KeepKeyMenu.tsx

@@ -36,7 +36,7 @@ export const KeepKeyMenu = () => {
     setDeviceState,
     state: { isConnected, walletInfo },
   } = useWallet()
-  const { keepKeyWipe } = useModal()
+  const keepKeyWipe = useModal('keepKeyWipe')
 
   // Reset ephemeral device state properties when opening the KeepKey menu
   useEffect(() => {

src/components/Layout/Header/NavBar/KeepKey/Modals/Wipe.tsx

@@ -23,9 +23,7 @@ export const WipeModal = () => {
   const { keepKeyWallet } = useKeepKey()
   const { disconnect } = useWallet()
   const translate = useTranslate()
-  const {
-    keepKeyWipe: { close, isOpen },
-  } = useModal()
+  const { close, isOpen } = useModal('keepKeyWipe')
   const {
     state: {
       deviceState: { awaitingDeviceInteraction },

src/components/Layout/Header/NavBar/Native/BackupPassphraseModal/BackupPassphraseInfo.tsx

@@ -39,11 +39,9 @@ export const BackupPassphraseInfo: React.FC<LocationState> = props => {
     revealedOnce.current = true
     setRevealed(!revealed)
   }
-  const {
-    backupNativePassphrase: {
-      props: { preventClose },
-    },
-  } = useModal()
+  const { props: backupNativePassphraseProps } = useModal('backupNativePassphrase')
+  const preventClose = backupNativePassphraseProps?.preventClose
+
   const alertColor = useColorModeValue('blue.500', 'blue.200')
 
   useUnmountEffect(() => {

src/components/Layout/Header/NavBar/Native/BackupPassphraseModal/BackupPassphraseModal.tsx

@@ -8,13 +8,12 @@ import { BackupPassphraseRouter } from './BackupPassphraseRouter'
 
 export const entries = Object.values(BackupPassphraseRoutes)
 
-type BackupPassphraseModalProps = {
+export type BackupPassphraseModalProps = {
   preventClose?: boolean
 }
 
 export const BackupPassphraseModal: React.FC<BackupPassphraseModalProps> = ({ preventClose }) => {
-  const { backupNativePassphrase } = useModal()
-  const { close, isOpen } = backupNativePassphrase
+  const { close, isOpen } = useModal('backupNativePassphrase')
 
   return (
     <Modal

src/components/Layout/Header/NavBar/Native/BackupPassphraseModal/BackupPassphrasePassword.tsx

@@ -37,11 +37,9 @@ export const BackupPassphrasePassword: React.FC<LocationState> = props => {
   const history = useHistory()
   const { state } = useWallet()
   const { walletInfo } = state
-  const {
-    backupNativePassphrase: {
-      props: { preventClose },
-    },
-  } = useModal()
+
+  const { props: backupNativePassphraseProps } = useModal('backupNativePassphrase')
+  const preventClose = backupNativePassphraseProps?.preventClose
 
   const [showPw, setShowPw] = useState<boolean>(false)
 

src/components/Layout/Header/NavBar/Native/BackupPassphraseModal/BackupPassphraseTest.tsx

@@ -51,11 +51,8 @@ export const BackupPassphraseTest: React.FC<LocationState> = props => {
   const [revoker] = useState(new (Revocable(class {}))())
   const [, setError] = useState<string | null>(null)
   const [hasAlreadySaved, setHasAlreadySaved] = useState(false)
-  const {
-    backupNativePassphrase: {
-      props: { preventClose },
-    },
-  } = useModal()
+  const { props: backupNativePassphraseProps } = useModal('backupNativePassphrase')
+  const preventClose = backupNativePassphraseProps?.preventClose
   const shuffledNumbers = useMemo(() => slice(shuffle(range(12)), 0, TEST_COUNT_REQUIRED), [])
 
   const shuffleMnemonic = useCallback(() => {

src/components/Layout/Header/NavBar/Native/NativeMenu.tsx

@@ -4,7 +4,7 @@ import { Text } from 'components/Text'
 import { useModal } from 'hooks/useModal/useModal'
 
 export const NativeMenu = () => {
-  const { backupNativePassphrase } = useModal()
+  const backupNativePassphrase = useModal('backupNativePassphrase')
 
   return (
     <>

src/components/Layout/Header/SideNavContent.tsx

@@ -21,7 +21,8 @@ type HeaderContentProps = {
 export const SideNavContent = ({ isCompact, onClose }: HeaderContentProps) => {
   const translate = useTranslate()
   const [isLargerThanMd] = useMediaQuery(`(min-width: ${breakpoints['md']})`, { ssr: false })
-  const { settings, feedbackSupport } = useModal()
+  const settings = useModal('settings')
+  const feedbackSupport = useModal('feedbackSupport')
   const isWalletConnectToDappsV1Enabled = useFeatureFlag('WalletConnectToDapps')
   const isWalletConnectToDappsV2Enabled = useFeatureFlag('WalletConnectToDappsV2')
   const isWalletConnectToDappsEnabled =

src/components/Modals/AssetSearch/AssetSearchModal.tsx

@@ -17,23 +17,28 @@ import { useWindowSize } from 'hooks/useWindowSize/useWindowSize'
 import type { Asset } from 'lib/asset-service'
 import { breakpoints } from 'theme/theme'
 
-interface AssetSearchModalProps extends AssetSearchProps {
-  onClick: Required<AssetSearchProps>['onClick']
+export type AssetSearchModalProps = AssetSearchProps & {
   title?: string
+  onClick: Required<AssetSearchProps>['onClick']
+}
+
+type AssetSearchModalBaseProps = AssetSearchModalProps & {
+  isOpen: boolean
+  close: () => void
 }
 
-export const AssetSearchModal: FC<AssetSearchModalProps> = ({
+export const AssetSearchModalBase: FC<AssetSearchModalBaseProps> = ({
   onClick,
+  close,
+  isOpen,
   assets,
   disableUnsupported,
   title = 'common.selectAsset',
 }) => {
   const translate = useTranslate()
   const [isLargerThanMd] = useMediaQuery(`(min-width: ${breakpoints['md']})`, { ssr: false })
   const { height: windowHeight } = useWindowSize()
-  const {
-    assetSearch: { close, isOpen },
-  } = useModal()
+
   const handleClick = useCallback(
     (asset: Asset) => {
       onClick(asset)
@@ -62,3 +67,20 @@ export const AssetSearchModal: FC<AssetSearchModalProps> = ({
     </Modal>
   )
 }
+
+// multiple instances to prevent rerenders opening the modal in different parts of the app
+
+export const AssetSearchModal: FC<AssetSearchModalProps> = props => {
+  const assetSearch = useModal('assetSearch')
+  return <AssetSearchModalBase {...props} {...assetSearch} />
+}
+
+export const SellAssetSearchModal: FC<AssetSearchModalProps> = props => {
+  const sellAssetSearch = useModal('sellAssetSearch')
+  return <AssetSearchModalBase {...props} {...sellAssetSearch} />
+}
+
+export const BuyAssetSearchModal: FC<AssetSearchModalProps> = props => {
+  const buyAssetSearch = useModal('buyAssetSearch')
+  return <AssetSearchModalBase {...props} {...buyAssetSearch} />
+}

src/components/Modals/FeedbackSupport/FeedbackSupport.tsx

@@ -17,8 +17,7 @@ import { useFeatureFlag } from 'hooks/useFeatureFlag/useFeatureFlag'
 import { useModal } from 'hooks/useModal/useModal'
 
 export const FeedbackAndSupport = () => {
-  const { feedbackSupport } = useModal()
-  const { close, isOpen } = feedbackSupport
+  const { close, isOpen } = useModal('feedbackSupport')
   const translate = useTranslate()
   const isChatwootEnabled = useFeatureFlag('Chatwoot')
 

src/components/Modals/FiatRamps/FiatRampsModal.tsx

@@ -6,7 +6,7 @@ import { breakpoints } from 'theme/theme'
 
 import type { FiatRampAction } from './FiatRampsCommon'
 
-type FiatRampsModalProps = {
+export type FiatRampsModalProps = {
   assetId: AssetId
   accountId?: AccountId
   fiatRampAction: FiatRampAction
@@ -17,8 +17,7 @@ export const FiatRampsModal: React.FC<FiatRampsModalProps> = ({
   assetId,
   accountId,
 }) => {
-  const { fiatRamps } = useModal()
-  const { close, isOpen } = fiatRamps
+  const { close, isOpen } = useModal('fiatRamps')
   const [isLargerThanMd] = useMediaQuery(`(min-width: ${breakpoints['md']})`, { ssr: false })
 
   return (

src/components/Modals/FiatRamps/views/FiatForm.tsx

@@ -44,7 +44,7 @@ export const FiatForm: React.FC<FiatFormProps> = ({
   } = useWallet()
 
   const { data: ramps } = useGetFiatRampsQuery()
-  const { assetSearch } = useModal()
+  const assetSearch = useModal('assetSearch')
 
   const buyAssets: Asset[] = useMemo(() => {
     const buyAssetIdsSet = new Set(ramps?.buyAssetIds ?? [])

src/components/Modals/FiatRamps/views/Overview.tsx

@@ -76,7 +76,7 @@ export const Overview: React.FC<OverviewProps> = ({
   const [fiatRampAction, setFiatRampAction] = useState<FiatRampAction>(defaultAction)
   const selectedCurrency = useAppSelector(selectSelectedCurrency)
   const [fiatCurrency, setFiatCurrency] = useState<CommonFiatCurrencies>(selectedCurrency)
-  const { popup } = useModal()
+  const popup = useModal('popup')
   const selectedLocale = useAppSelector(selectSelectedLocale)
   const { colorMode } = useColorMode()
   const translate = useTranslate()

src/components/Modals/MobileWelcome/MobileWelcomeModal.tsx

@@ -7,8 +7,7 @@ import { ImportSuccess } from './views/ImportSuccess'
 import { Notice } from './views/Notice'
 
 export const MobileWelcomeModal = () => {
-  const { mobileWelcomeModal } = useModal()
-  const { close: handleClose, isOpen } = mobileWelcomeModal
+  const { close: handleClose, isOpen } = useModal('mobileWelcomeModal')
 
   return (
     <Modal

src/components/Modals/MobileWelcome/views/Notice.tsx

@@ -12,10 +12,9 @@ import { store } from 'state/store'
 export const Notice = () => {
   const translate = useTranslate()
   const iconColor = useColorModeValue('gray.200', 'gray.700')
-  const {
-    mobileWelcomeModal: { close: handleClose },
-    backupNativePassphrase: { open },
-  } = useModal()
+
+  const { close: handleClose } = useModal('mobileWelcomeModal')
+  const { open } = useModal('backupNativePassphrase')
 
   const handleRecoveryClick = useCallback(() => {
     handleClose()

src/components/Modals/NativeOnboarding/NativeOnboarding.tsx

@@ -20,9 +20,8 @@ import { OnboardPager } from './components/OnboardPager'
 import { OnboardingRoutes } from './config'
 
 export const NativeOnboarding = () => {
-  const { nativeOnboard } = useModal()
+  const { isOpen, close: closeModal } = useModal('nativeOnboard')
   const translate = useTranslate()
-  const { isOpen, close: closeModal } = nativeOnboard
   const renderRoutes = useMemo(() => {
     return OnboardingRoutes.map(route => (
       <Route key={route.path} path={route.path} component={route.component} />

src/components/Modals/NativeOnboarding/components/EasyToUse.tsx

@@ -14,8 +14,7 @@ import EasyToUseIcon from '../easy-to-use.svg'
 const NativeFeatureList = ['trackBalance', 'sendReceive', 'buyCrypto', 'tradeAssets', 'earnYield']
 
 export const EasyToUse = () => {
-  const { nativeOnboard } = useModal()
-  const { close: closeModal } = nativeOnboard
+  const { close: closeModal } = useModal('nativeOnboard')
   const translate = useTranslate()
   const { history } = useBrowserRouter()
   const translateKey = (key: string) => `walletProvider.shapeShift.onboarding.easyToUse.${key}`

src/components/Modals/Nfts/NftModal.tsx

@@ -69,7 +69,7 @@ export type NftModalProps = {
 
 export const NftModal: React.FC<NftModalProps> = ({ nftAssetId }) => {
   const dispatch = useAppDispatch()
-  const { nft: nftModal } = useModal()
+  const nftModal = useModal('nft')
   const nftItem = useAppSelector(state => selectNftById(state, nftAssetId))
 
   // This should never happen but it may

src/components/Modals/PopupWindowModal.tsx

@@ -25,7 +25,7 @@ function popupCenterWindow(url: string, windowName: string, w: number, h: number
   )
 }
 
-type PopupWindowModalProps = {
+export type PopupWindowModalProps = {
   url: string
   title: string
   width?: number
@@ -38,7 +38,7 @@ export const PopupWindowModal: React.FC<PopupWindowModalProps> = ({
   width = 482,
   height = 660,
 }) => {
-  const { popup } = useModal()
+  const popup = useModal('popup')
   const translate = useTranslate()
   const { close: onClose, isOpen } = popup
   const [popupWindow, setPopupWindow] = useState<Window | null | void>(null)

src/components/Modals/QrCode/Form.tsx

@@ -37,10 +37,7 @@ export const Form: React.FC<QrCodeFormProps> = ({ accountId }) => {
   const selectedCurrency = useAppSelector(selectSelectedCurrency)
 
   const [addressError, setAddressError] = useState<string | null>(null)
-
-  const {
-    qrCode: { isOpen, close: handleClose },
-  } = useModal()
+  const { isOpen, close: handleClose } = useModal('qrCode')
   const [walletConnectDappUrl, setWalletConnectDappUrl] = useState('')
 
   const methods = useForm<SendInput>({

src/components/Modals/QrCode/QrCode.tsx

@@ -9,15 +9,14 @@ import { Form } from './Form'
 
 export const entries = Object.values(SendRoutes)
 
-type QrCodeModalProps = {
+export type QrCodeModalProps = {
   assetId?: AssetId
   accountId?: AccountId
 }
 
 export const QrCodeModal = ({ assetId, accountId }: QrCodeModalProps) => {
   const initialRef = useRef<HTMLInputElement>(null)
-  const { qrCode } = useModal()
-  const { close, isOpen } = qrCode
+  const { close, isOpen } = useModal('qrCode')
 
   return (
     <Modal isOpen={isOpen} onClose={close} isCentered initialFocusRef={initialRef}>

src/components/Modals/Receive/Receive.tsx

@@ -9,14 +9,13 @@ import { ReceiveRouter } from './ReceiveRouter'
 
 export const entries = [ReceiveRoutes.Info, ReceiveRoutes.Select]
 
-type ReceivePropsType = {
+export type ReceivePropsType = {
   asset?: Asset
   accountId?: AccountId
 }
 
 const Receive = ({ asset, accountId }: ReceivePropsType) => {
-  const { receive } = useModal()
-  const { close, isOpen } = receive
+  const { close, isOpen } = useModal('receive')
 
   return (
     <Modal isOpen={isOpen} onClose={close} isCentered>

src/components/Modals/Send/Send.tsx

@@ -9,16 +9,15 @@ import { SendRoutes } from './SendCommon'
 
 export const entries = Object.values(SendRoutes)
 
-type SendModalProps = {
+export type SendModalProps = {
   assetId?: AssetId
   accountId?: AccountId
   input?: string
 }
 
 export const SendModal = ({ assetId, accountId, input }: SendModalProps) => {
   const initialRef = useRef<HTMLInputElement>(null)
-  const { send } = useModal()
-  const { close, isOpen } = send
+  const { close, isOpen } = useModal('send')
 
   return (
     <Modal isOpen={isOpen} onClose={close} isCentered initialFocusRef={initialRef}>