fix: refactored funding account modal

src/components/Account/AccountSummary.tsx

@@ -74,7 +74,12 @@ export default function AccountSummary(props: Props) {
 
   if (!props.account) return null
   return (
-    <div className='h-[546px] min-w-92.5 basis-92.5 max-w-screen overflow-y-scroll scrollbar-hide'>
+    <div
+      className={classNames(
+        'h-[546px] min-w-92.5 basis-92.5 max-w-screen overflow-y-scroll scrollbar-hide',
+        'w-[374px]',
+      )}
+    >
       <Card className='mb-4 h-min min-w-fit bg-white/10' contentClassName='flex'>
         <Item label='Net worth' classes='flex-1'>
           <DisplayCurrency

src/components/Modals/FundWithdraw/FundAndWithdrawModalContent.tsx

@@ -1,24 +1,14 @@
-import AccountSummary from 'components/Account/AccountSummary'
-import Card from 'components/Card'
 import FundAccount from 'components/Modals/FundWithdraw/FundAccount'
 import WithdrawFromAccount from 'components/Modals/FundWithdraw/WithdrawFromAccount'
 
 interface Props {
-  account: Account
+  account?: Account
   isFunding: boolean
 }
 
 export default function FundWithdrawModalContent(props: Props) {
   const { account, isFunding } = props
-  return (
-    <div className='flex items-start flex-1 gap-6 p-6'>
-      <Card
-        className='flex flex-1 p-4 bg-white/5'
-        contentClassName='gap-6 flex flex-col justify-between h-full min-h-[380px]'
-      >
-        {isFunding ? <FundAccount account={account} /> : <WithdrawFromAccount account={account} />}
-      </Card>
-      <AccountSummary account={account} />
-    </div>
-  )
+  if (!account) return null
+  if (isFunding) return <FundAccount account={account} />
+  return <WithdrawFromAccount account={account} />
 }

src/components/Modals/FundWithdraw/index.tsx

@@ -1,12 +1,13 @@
-import { CircularProgress } from 'components/CircularProgress'
-import Modal from 'components/Modal'
 import FundWithdrawModalContent from 'components/Modals/FundWithdraw/FundAndWithdrawModalContent'
+import ModalContentWithSummary from 'components/Modals/ModalContentWithSummary'
 import Text from 'components/Text'
-import useCurrentAccount from 'hooks/useCurrentAccount'
+import useAccount from 'hooks/useAccount'
+import useAccountId from 'hooks/useAccountId'
 import useStore from 'store'
 
 export default function FundAndWithdrawModal() {
-  const currentAccount = useCurrentAccount()
+  const accountId = useAccountId()
+  const { data: account } = useAccount(accountId ?? undefined)
   const modal = useStore<string | null>((s) => s.fundAndWithdrawModal)
   const isFunding = modal === 'fund'
 
@@ -16,27 +17,20 @@ export default function FundAndWithdrawModal() {
 
   if (!modal) return null
   return (
-    <Modal
-      onClose={onClose}
+    <ModalContentWithSummary
+      account={account}
+      isContentCard
       header={
         <span className='flex items-center gap-4 px-4'>
           <Text>
             {isFunding
-              ? `Fund Credit Account ${currentAccount?.id ?? '0'}`
-              : `Withdraw from Credit Account ${currentAccount?.id ?? '0'}`}
+              ? `Fund Credit Account ${accountId ?? ''}`
+              : `Withdraw from Credit Account ${accountId ?? ''}`}
           </Text>
         </span>
       }
-      headerClassName='gradient-header pl-2 pr-2.5 py-2.5 border-b-white/5 border-b'
-      contentClassName='flex flex-col min-h-[400px]'
-    >
-      {modal && currentAccount ? (
-        <FundWithdrawModalContent account={currentAccount} isFunding={isFunding} />
-      ) : (
-        <div className='flex items-center justify-center w-full h-[380px]'>
-          <CircularProgress />
-        </div>
-      )}
-    </Modal>
+      onClose={onClose}
+      content={<FundWithdrawModalContent account={account} isFunding={isFunding} />}
+    />
   )
 }

src/components/Modals/ModalContentWithSummary.tsx

@@ -3,14 +3,36 @@ import React from 'react'
 
 import AccountSummary from 'components/Account/AccountSummary'
 import Card from 'components/Card'
+import { CircularProgress } from 'components/CircularProgress'
 import Modal, { ModalProps } from 'components/Modal'
 import useStore from 'store'
 
 interface Props extends ModalProps {
-  account: Account
+  account?: Account
   isContentCard?: boolean
 }
 
+function modalContent(content: React.ReactNode, isContentCard?: boolean, account?: Account) {
+  if (!account)
+    return (
+      <div className='flex items-center justify-center w-full h-[380px]'>
+        <CircularProgress />
+      </div>
+    )
+
+  if (isContentCard)
+    return (
+      <Card
+        className={classNames('flex p-4 bg-white/5', 'lg:w-[448px]')}
+        contentClassName='gap-6 flex flex-col justify-between h-full min-h-[380px]'
+      >
+        {content}
+      </Card>
+    )
+
+  return content
+}
+
 export default function ModalContentWithSummary(props: Props) {
   const updatedAccount = useStore((s) => s.updatedAccount)
   return (
@@ -22,17 +44,8 @@ export default function ModalContentWithSummary(props: Props) {
       )}
       contentClassName={classNames('flex items-start flex-1 gap-6 p-6', props.contentClassName)}
     >
-      {props.isContentCard ? (
-        <Card
-          className='flex flex-1 p-4 bg-white/5'
-          contentClassName='gap-6 flex flex-col justify-between h-full min-h-[380px]'
-        >
-          {props.content}
-        </Card>
-      ) : (
-        props.content
-      )}
-      <AccountSummary account={updatedAccount || props.account} />
+      {modalContent(props.content, props.isContentCard, props.account)}
+      {props.account && <AccountSummary account={updatedAccount || props.account} />}
     </Modal>
   )
 }