feat: reconcile matching transactions

packages/webapp/src/components/Aside/Aside.module.scss

@@ -21,4 +21,5 @@
   flex-direction: column;
   flex: 1 1 auto;
   background-color: #fff;
+  overflow-y: auto;
 }

packages/webapp/src/components/Aside/Aside.tsx

@@ -1,13 +1,16 @@
 import { Button, Classes } from '@blueprintjs/core';
-import { Box, Group } from '../Layout';
+import clsx from 'classnames';
+import { Box, BoxProps, Group } from '../Layout';
 import { Icon } from '../Icon';
 import styles from './Aside.module.scss';
 
-interface AsideProps {
+interface AsideProps extends BoxProps {
   title?: string;
   onClose?: () => void;
   children?: React.ReactNode;
   hideCloseButton?: boolean;
+  classNames?: Record<string, string>;
+  className?: string;
 }
 
 export function Aside({
@@ -15,13 +18,15 @@ export function Aside({
   onClose,
   children,
   hideCloseButton,
+  classNames,
+  className
 }: AsideProps) {
   const handleClose = () => {
     onClose && onClose();
   };
   return (
-    <Box className={styles.root}>
-      <Group position="apart" className={styles.title}>
+    <Box className={clsx(styles.root, className, classNames?.root)}>
+      <Group position="apart" className={clsx(styles.title, classNames?.title)}>
         {title}
 
         {hideCloseButton !== true && (
@@ -34,7 +39,23 @@ export function Aside({
           />
         )}
       </Group>
-      <Box className={styles.content}>{children}</Box>
+
+      {children}
     </Box>
   );
-}
+}
+
+interface AsideContentProps extends BoxProps {}
+
+function AsideContent({ ...props }: AsideContentProps) {
+  return <Box {...props} className={clsx(styles.content, props?.className)} />;
+}
+
+interface AsideFooterProps extends BoxProps {}
+
+function AsideFooter({ ...props }: AsideFooterProps) {
+  return <Box {...props} />;
+}
+
+Aside.Body = AsideContent;
+Aside.Footer = AsideFooter;

packages/webapp/src/components/ContentTabs/ContentTabs.tsx

@@ -19,6 +19,12 @@ const ContentTabItemRoot = styled.button<ContentTabItemRootProps>`
   text-align: left;
   cursor: pointer;
 
+  ${(props) =>
+    props.small &&
+    `
+    padding: 8px 10px;
+    `}
+
   ${(props) =>
     props.active &&
     `
@@ -55,6 +61,8 @@ interface ContentTabsItemProps {
   title?: React.ReactNode;
   description?: React.ReactNode;
   active?: boolean;
+  className?: string;
+  small?: booean;
 }
 
 const ContentTabsItem = ({
@@ -62,11 +70,18 @@ const ContentTabsItem = ({
   description,
   active,
   onClick,
+  small,
+  className,
 }: ContentTabsItemProps) => {
   return (
-    <ContentTabItemRoot active={active} onClick={onClick}>
+    <ContentTabItemRoot
+      active={active}
+      onClick={onClick}
+      className={className}
+      small={small}
+    >
       <ContentTabTitle>{title}</ContentTabTitle>
-      <ContentTabDesc>{description}</ContentTabDesc>
+      {description && <ContentTabDesc>{description}</ContentTabDesc>}
     </ContentTabItemRoot>
   );
 };
@@ -77,6 +92,7 @@ interface ContentTabsProps {
   onChange?: (value: string) => void;
   children?: React.ReactNode;
   className?: string;
+  small?: boolean;
 }
 
 export function ContentTabs({
@@ -85,6 +101,7 @@ export function ContentTabs({
   onChange,
   children,
   className,
+  small,
 }: ContentTabsProps) {
   const [localValue, handleItemChange] = useUncontrolled<string>({
     initialValue,
@@ -102,6 +119,7 @@ export function ContentTabs({
           {...tab.props}
           active={localValue === tab.props.id}
           onClick={() => handleItemChange(tab.props?.id)}
+          small={small}
         />
       ))}
     </ContentTabsRoot>