From 8aa80a50a9869f681728f3b18663d62aa478d5f3 Mon Sep 17 00:00:00 2001
From: Matt Anderson <matta9001@gmail.com>
Date: Sun, 27 Jul 2025 20:27:50 -0500
Subject: [PATCH] fix wallet operation modal displayed under other other
 elements

---
 .../components/TopUpBalanceModal/TopUpBalanceModal.tsx      | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/relay-dashboard/Balance/components/TopUpBalanceModal/TopUpBalanceModal.tsx b/src/components/relay-dashboard/Balance/components/TopUpBalanceModal/TopUpBalanceModal.tsx
index ce679c5e..73e61617 100644
--- a/src/components/relay-dashboard/Balance/components/TopUpBalanceModal/TopUpBalanceModal.tsx
+++ b/src/components/relay-dashboard/Balance/components/TopUpBalanceModal/TopUpBalanceModal.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
 import { BaseModal } from '@app/components/common/BaseModal/BaseModal';
 import { TopUpDataProps } from '../../interfaces/interfaces';
 import { BaseSpin } from '@app/components/common/BaseSpin/BaseSpin';
@@ -62,7 +63,7 @@ export const TopUpBalanceModal: React.FC<TopUpBalanceModalProps> = ({
     }
   }, [isOpen, handleLogout]);
 
-  return (
+  return ReactDOM.createPortal(
     <BaseModal centered={true} width={500} open={isOpen} onCancel={onOpenChange} footer={null} destroyOnClose>
       <BaseSpin spinning={isLoading}>
         {error ? (
@@ -73,6 +74,7 @@ export const TopUpBalanceModal: React.FC<TopUpBalanceModalProps> = ({
           <AddressList addresses={addresses} />
         )}
       </BaseSpin>
-    </BaseModal>
+    </BaseModal>,
+    document.body
   );
 };