fix: During the route change, close account-export modal with minor u…

…x/error handling
near · Mar 27, 2023 · d5be4db · d5be4db
1 parent 4e56a08
commit d5be4db
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 10 deletions.
diff --git a/packages/frontend/src/components/common/wallet_selector/WalletSelectorGetAWallet.js b/packages/frontend/src/components/common/wallet_selector/WalletSelectorGetAWallet.js
@@ -26,10 +26,10 @@ export function WalletSelectorGetAWallet({
     showModal,
     setShowModal
 }) {
-
-    const walletWrapperDiv = document.getElementById('near-wallet-selector-modal');
-    walletWrapperDiv?.classList.add('wallet-selector-get-a-wallet-modal');
-
+    if (showModal === 'more-near-wallets') {
+        const walletWrapperDiv = document.getElementById('near-wallet-selector-modal');
+        walletWrapperDiv?.classList.add('wallet-selector-get-a-wallet-modal');
+    }
     useEffect(() => {
 
         const initSelector = async () => {

diff --git a/...tend/src/components/wallet-migration/modals/WalletSelectorModal/WalletSelectorContent.jsx b/...tend/src/components/wallet-migration/modals/WalletSelectorModal/WalletSelectorContent.jsx
@@ -1,15 +1,23 @@
 import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
 
 import { useExportAccountSelector } from './WalletSelectorExportContext';
 
 export const WalletSelectorContent = () => {
     const { ExportModal } = useExportAccountSelector();
-
+    const location = useLocation();
     useEffect(() => {
-        //TODO: this is to mute css class injected from WalletSelectorGetAWallet component
-        const walletWrapperDiv = document.getElementById('near-wallet-selector-modal');
-        walletWrapperDiv?.classList.remove('wallet-selector-get-a-wallet-modal');
-        ExportModal?.show();
-    });
+        if (ExportModal) {
+            //TODO: this is to mute css class injected from WalletSelectorGetAWallet component
+            const walletWrapperDiv = document.getElementById('near-wallet-selector-modal');
+            walletWrapperDiv?.classList.remove('wallet-selector-get-a-wallet-modal');
+            ExportModal?.show();
+        }
+    }, [ExportModal]);
+
+    // On location change, close the modal
+    useEffect(() => {
+        ExportModal?.hide();
+    }, [location]);
     return null;
 };