From b790895e276c81221ce51e543780498083f22f1a Mon Sep 17 00:00:00 2001
From: mvaivre <m.vaivre@gmail.com>
Date: Wed, 16 Oct 2024 17:54:31 +0200
Subject: [PATCH] Improve Transaction modal

---
 .../src/features/modals/BottomModal.tsx       |  2 +-
 .../features/modals/BottomModalFlashList.tsx  |  2 +-
 .../src/features/modals/BottomModalHeader.tsx |  6 ++++-
 .../transactionsDisplay/TransactionModal.tsx  | 26 +++++--------------
 4 files changed, 13 insertions(+), 23 deletions(-)

diff --git a/apps/mobile-wallet/src/features/modals/BottomModal.tsx b/apps/mobile-wallet/src/features/modals/BottomModal.tsx
index f55d43511..6477a1a65 100644
--- a/apps/mobile-wallet/src/features/modals/BottomModal.tsx
+++ b/apps/mobile-wallet/src/features/modals/BottomModal.tsx
@@ -52,7 +52,7 @@ const BottomModal = ({
   })
 
   return (
-    <BottomModalBase modalId={modalId} title={title} {...modalState}>
+    <BottomModalBase modalId={modalId} title={title} navHeight={navHeight} {...modalState}>
       <AnimatedScrollView
         onContentSizeChange={modalState.handleContentSizeChange}
         keyboardShouldPersistTaps="handled"
diff --git a/apps/mobile-wallet/src/features/modals/BottomModalFlashList.tsx b/apps/mobile-wallet/src/features/modals/BottomModalFlashList.tsx
index b2a1c6722..3e7e86949 100644
--- a/apps/mobile-wallet/src/features/modals/BottomModalFlashList.tsx
+++ b/apps/mobile-wallet/src/features/modals/BottomModalFlashList.tsx
@@ -51,7 +51,7 @@ const BottomModalFlashList = ({
   })
 
   return (
-    <BottomModalBase title={title} modalId={modalId} {...modalState}>
+    <BottomModalBase title={title} modalId={modalId} navHeight={navHeight} {...modalState}>
       {children({
         ...modalState.contentScrollHandlers,
         onContentSizeChange: modalState.handleContentSizeChange,
diff --git a/apps/mobile-wallet/src/features/modals/BottomModalHeader.tsx b/apps/mobile-wallet/src/features/modals/BottomModalHeader.tsx
index 8a119ce08..4c071ba10 100644
--- a/apps/mobile-wallet/src/features/modals/BottomModalHeader.tsx
+++ b/apps/mobile-wallet/src/features/modals/BottomModalHeader.tsx
@@ -32,7 +32,11 @@ interface BottomModalHeaderProps {
 const BottomModalHeader = ({ height, handleClose, title }: BottomModalHeaderProps) => (
   <HeaderContainer style={{ height }}>
     <HeaderSideContainer align="left" />
-    {title && <Title semiBold>{title}</Title>}
+    {title && (
+      <Title semiBold size={16}>
+        {title}
+      </Title>
+    )}
     <HeaderSideContainer align="right">
       <CloseButton onPress={handleClose} compact />
     </HeaderSideContainer>
diff --git a/apps/mobile-wallet/src/features/transactionsDisplay/TransactionModal.tsx b/apps/mobile-wallet/src/features/transactionsDisplay/TransactionModal.tsx
index 06389c55e..0cb670b67 100644
--- a/apps/mobile-wallet/src/features/transactionsDisplay/TransactionModal.tsx
+++ b/apps/mobile-wallet/src/features/transactionsDisplay/TransactionModal.tsx
@@ -29,7 +29,6 @@ import AppText from '~/components/AppText'
 import Button from '~/components/buttons/Button'
 import IOList from '~/components/IOList'
 import BoxSurface from '~/components/layout/BoxSurface'
-import { ModalScreenTitle, ScreenSection } from '~/components/layout/Screen'
 import NFTThumbnail from '~/components/NFTThumbnail'
 import Row from '~/components/Row'
 import BottomModal from '~/features/modals/BottomModal'
@@ -60,18 +59,7 @@ const TransactionModal = withModal<TransactionModalProps>(({ id, tx }) => {
   const openNftGridModal = () => dispatch(openModal({ name: 'NftGridModal', props: { nftsData } }))
 
   return (
-    <BottomModal modalId={id} contentVerticalGap>
-      <ScreenSectionStyled>
-        <ModalScreenTitle>{t('Transaction')}</ModalScreenTitle>
-        <Button
-          iconProps={{ name: 'arrow-up-right' }}
-          onPress={() => openBrowserAsync(explorerTxUrl)}
-          variant="accent"
-          compact
-          title={t('Explorer')}
-        />
-      </ScreenSectionStyled>
-
+    <BottomModal modalId={id} contentVerticalGap title={t('Transaction')}>
       <BoxSurface type="highlight">
         <Row title={t('Amount')} noMaxWidth transparent>
           {tokensWithSymbol.map(({ id, amount, decimals, symbol }) => (
@@ -149,6 +137,11 @@ const TransactionModal = withModal<TransactionModalProps>(({ id, tx }) => {
           </Row>
         )}
       </BoxSurface>
+      <Button
+        iconProps={{ name: 'arrow-up-right' }}
+        onPress={() => openBrowserAsync(explorerTxUrl)}
+        title={t('Explorer')}
+      />
     </BottomModal>
   )
 })
@@ -163,13 +156,6 @@ const AppTextStyled = styled(AppText)`
   text-align: right;
 `
 
-const ScreenSectionStyled = styled(ScreenSection)`
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-`
-
 const TokenId = styled.View`
   max-width: 60px;
 `