Adds TransactionFees modal to confirm safe app tx modal (#1789)

src/routes/safe/components/Apps/components/ConfirmTransactionModal.tsx

@@ -25,6 +25,8 @@ import GasEstimationInfo from './GasEstimationInfo'
 import { getNetworkInfo } from 'src/config'
 import { TransactionParams } from './AppFrame'
 import { EstimationStatus, useEstimateTransactionGas } from 'src/logic/hooks/useEstimateTransactionGas'
+import Row from 'src/components/layout/Row'
+import { TransactionFees } from 'src/components/TransactionsFees'
 
 const isTxValid = (t: Transaction): boolean => {
   if (!['string', 'number'].includes(typeof t.value)) {
@@ -67,6 +69,10 @@ const StyledTextBox = styled(TextBox)`
   max-width: 444px;
 `
 
+const Container = styled.div`
+  max-width: 480px;
+`
+
 type OwnProps = {
   isOpen: boolean
   app: SafeApp
@@ -96,7 +102,14 @@ export const ConfirmTransactionModal = ({
 }: OwnProps): React.ReactElement | null => {
   const [estimatedSafeTxGas, setEstimatedSafeTxGas] = useState(0)
 
-  const { gasEstimation, txEstimationExecutionStatus } = useEstimateTransactionGas({
+  const {
+    gasEstimation,
+    isOffChainSignature,
+    isCreation,
+    isExecution,
+    gasCostFormatted,
+    txEstimationExecutionStatus,
+  } = useEstimateTransactionGas({
     txData: encodeMultiSendCall(txs),
     txRecipient: MULTI_SEND_ADDRESS,
     operation: DELEGATE_CALL,
@@ -159,7 +172,7 @@ export const ConfirmTransactionModal = ({
       </Text>
     </>
   ) : (
-    <>
+    <Container>
       <AddressInfo ethBalance={ethBalance} safeAddress={safeAddress} safeName={safeName} />
       <DividerLine withArrow />
       {txs.map((tx, index) => (
@@ -195,7 +208,16 @@ export const ConfirmTransactionModal = ({
           />
         </div>
       )}
-    </>
+      <Row>
+        <TransactionFees
+          gasCostFormatted={gasCostFormatted}
+          isExecution={isExecution}
+          isCreation={isCreation}
+          isOffChainSignature={isOffChainSignature}
+          txEstimationExecutionStatus={txEstimationExecutionStatus}
+        />
+      </Row>
+    </Container>
   )
 
   return (