wallet withdrawl modal fixed format

src/features/wallet/components/balance.tsx

@@ -86,6 +86,7 @@ const Amount = ({ amount, onMintClick }: AmountProps) => {
           theme='secondary'
           text={intl.formatMessage(messages.withdraw)}
           onClick={handleWithdrawClick}
+          className='withdraw-button'
         />
         <Button
           icon={libraryPlusIcon}

src/features/wallet/components/withdraw-modal.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
+import ReactDOM from 'react-dom';
 import { FormattedMessage } from 'react-intl';
 
 import Modal from 'soapbox/components/ui/modal.tsx';
@@ -9,18 +10,40 @@ interface IWithdrawModal {
 }
 
 const WithdrawModal: React.FC<IWithdrawModal> = ({ onClose }) => {
-  return (
+  const modalWrapperRef = useRef<HTMLDivElement>(null);
-    <Modal
+
-      title={<FormattedMessage id='withdraw_modal.title' defaultMessage='Feature Coming Soon!' />}
+  useEffect(() => {
-      onClose={onClose}
+    // Get the button that triggered the modal
-    >
+    const buttonRef = document.querySelector('.withdraw-button') as HTMLElement;
-      <Text>
+
-        <FormattedMessage
+    if (buttonRef && modalWrapperRef.current) {
-          id='withdraw_modal.message'
+      // Calculate the position of the button
-          defaultMessage="The withdraw feature is not yet available, but it's coming soon! Stay tuned."
+      const buttonRect = buttonRef.getBoundingClientRect();
-        />
+
-      </Text>
+      // Position the modal relative to the button
-    </Modal>
+      modalWrapperRef.current.style.position = 'absolute';
+      modalWrapperRef.current.style.top = `${buttonRect.bottom + window.scrollY}px`;
+      modalWrapperRef.current.style.left = `${buttonRect.left + window.scrollX}px`;
+      modalWrapperRef.current.style.zIndex = '9999';
+    }
+  }, []);
+
+  // Render the modal as a portal
+  return ReactDOM.createPortal(
+    <div ref={modalWrapperRef}>
+      <Modal
+        title={<FormattedMessage id='withdraw_modal.title' defaultMessage='Feature Coming Soon!' />}
+        onClose={onClose}
+      >
+        <Text>
+          <FormattedMessage
+            id='withdraw_modal.message'
+            defaultMessage="The withdraw feature is not yet available, but it's coming soon! Stay tuned."
+          />
+        </Text>
+      </Modal>
+    </div>,
+    document.body, // Render the modal at the root of the document
   );
 };
 

src/locales/en.json

@@ -1755,6 +1755,8 @@
   "wallet.transactions.no_transactions": "You don't have transactions yet.",
   "wallet.transactions.show_more": "Show More",
   "who_to_follow.title": "People To Follow",
+  "withdraw_modal.message": "The withdraw feature is not yet available, but it's coming soon! Stay tuned.",
+  "withdraw_modal.title": "Feature Coming Soon!",
   "zap.button.text.rounded": "Zap {amount}K sats",
   "zap.finish": "Finish",
   "zap.next": "Next",