From e44b1b1094d17f3bc0f166d12f75bb891c18a05b Mon Sep 17 00:00:00 2001
From: Linkie Link <linkielink.dev@gmail.com>
Date: Tue, 14 Nov 2023 11:08:24 +0100
Subject: [PATCH] fix: refactored funding account modal

---
 src/components/Account/AccountSummary.tsx     |  7 +++-
 .../FundAndWithdrawModalContent.tsx           | 18 ++-------
 src/components/Modals/FundWithdraw/index.tsx  | 32 +++++++---------
 .../Modals/ModalContentWithSummary.tsx        | 37 +++++++++++++------
 4 files changed, 48 insertions(+), 46 deletions(-)

diff --git a/src/components/Account/AccountSummary.tsx b/src/components/Account/AccountSummary.tsx
index d824ec03..62c555d4 100644
--- a/src/components/Account/AccountSummary.tsx
+++ b/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
diff --git a/src/components/Modals/FundWithdraw/FundAndWithdrawModalContent.tsx b/src/components/Modals/FundWithdraw/FundAndWithdrawModalContent.tsx
index e9f48d3d..7cfba53d 100644
--- a/src/components/Modals/FundWithdraw/FundAndWithdrawModalContent.tsx
+++ b/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} />
 }
diff --git a/src/components/Modals/FundWithdraw/index.tsx b/src/components/Modals/FundWithdraw/index.tsx
index 9e9d21a2..619bbae3 100644
--- a/src/components/Modals/FundWithdraw/index.tsx
+++ b/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} />}
+    />
   )
 }
diff --git a/src/components/Modals/ModalContentWithSummary.tsx b/src/components/Modals/ModalContentWithSummary.tsx
index 39fc2ec4..b72a554e 100644
--- a/src/components/Modals/ModalContentWithSummary.tsx
+++ b/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>
   )
 }