feat: transaction representation refactor

input-output-hk · Mar 26, 2024 · 6139c0d · 6139c0d
1 parent d05f524
commit 6139c0d
Show file tree

Hide file tree

Showing 66 changed files with 1,682 additions and 806 deletions.
diff --git a/apps/browser-extension-wallet/src/components/Layout/MainLayout.module.scss b/apps/browser-extension-wallet/src/components/Layout/MainLayout.module.scss
@@ -21,6 +21,7 @@
       display: flex;
       min-height: 0;
       width: 100%;
+      flex-direction: column;
       > * {
         width: 100%;
       }

diff --git a/apps/browser-extension-wallet/src/features/dapp/components/Layout.tsx b/apps/browser-extension-wallet/src/features/dapp/components/Layout.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import styles from './Layout.module.scss';
 
 type layoutProps = {
-  title: string | React.ReactElement;
+  title?: string | React.ReactElement;
   children?: React.ReactElement | React.ReactNode;
   layoutClassname?: string;
   pageClassname?: string;

diff --git a/...on-wallet/src/features/dapp/components/confirm-transaction/ConfirmTransaction.module.scss b/...on-wallet/src/features/dapp/components/confirm-transaction/ConfirmTransaction.module.scss
@@ -3,23 +3,26 @@
 
 .spaceBetween {
   justify-content: space-between;
-  padding-top: size_unit(2);
+  padding-top: size_unit(0);
 }
 
-.layoutError {
-  padding: 0;
+.transactionContainer { 
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  justify-content: space-between;
 }
 
 .actions {
   @extend %flex-column;
-  background-color: var(--bg-color-body);
-  gap: size_unit(1);
+  height: size_unit(17.12);
+  justify-content: space-between;
   padding: size_unit(2) size_unit(3) size_unit(2) size_unit(3);
-  border-top: 2px solid var(--light-mode-light-grey-plus, var(--dark-mode-mid-grey));
-  margin: size_unit(4) size_unit(-3) size_unit(-2) size_unit(-3);
+  border-top: 1px solid var(--light-mode-light-grey-plus, var(--dark-mode-mid-grey));
   position: sticky;
   bottom: 0;
   z-index: 10;
+  background-color: var(--light-mode-body, var(--dark-mode-bg-black));
   .actionBtn {
     width: 100%;
   }

diff --git a/...-extension-wallet/src/features/dapp/components/confirm-transaction/ConfirmTransaction.tsx b/...-extension-wallet/src/features/dapp/components/confirm-transaction/ConfirmTransaction.tsx
@@ -88,11 +88,7 @@ export const ConfirmTransaction = (): React.ReactElement => {
   useOnBeforeUnload(disallowSignTx);
 
   return (
-    <Layout
-      layoutClassname={cn(confirmTransactionError && styles.layoutError)}
-      pageClassname={styles.spaceBetween}
-      title={!confirmTransactionError && txType && t(`core.${txType}.title`)}
-    >
+    <Layout layoutClassname={cn(confirmTransactionError && styles.layoutError)} pageClassname={styles.spaceBetween}>
       {req && txType ? (
         <ConfirmTransactionContent txType={txType} onError={() => setConfirmTransactionError(true)} />
       ) : (