feat: style updates and missing field

src/components/StyledComponents.ts

@@ -40,10 +40,16 @@ export const AccordionIconButton = styled(IconButton)(({ theme }) => ({
 }));
 
 export const StyledAccordion = styled(Accordion)(({ theme }) => ({
-  backgroundColor: theme.palette.background.default,
+  backgroundColor: theme.palette.background.paper,
+  boxShadow: '1px 5px 28px rgba(35, 11, 73, 0.05)',
+  borderRadius: theme.shape.borderRadius,
+  marginBottom: theme.spacing(1),
   '&:hover': {
     backgroundColor: '#fafafc',
   },
+  '&:before': {
+    display: 'none',
+  },
 }));
 
 export const TypographyData = styled(Typography)(({ theme }) => ({

src/routes/Blocks/BlockParts.tsx

@@ -119,7 +119,6 @@ function Inputs({
         adjustedIndex={adjustedIndex}
         expanded={expanded}
         handleChange={handleChange}
-        theme={theme}
         expandedPanel={expandedPanel}
         tabName={title}
         key={adjustedIndex}

src/routes/Blocks/Data/Outputs.ts

@@ -43,6 +43,11 @@ export const outputItems = (content: any) => {
           value: content.features.maturity,
           copy: false,
         },
+        {
+          label: 'Coinbase Extra Data',
+          value: toHexString(content.features.coinbase_extra.data),
+          copy: true,
+        },
       ],
     },
     {

src/routes/Blocks/GenerateAccordion.tsx

@@ -26,15 +26,13 @@ import AccordionDetails from '@mui/material/AccordionDetails';
 import AccordionSummary from '@mui/material/AccordionSummary';
 import Typography from '@mui/material/Typography';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import Grid from '@mui/material/Grid';
 import GridItem from './GridItem';
 
 function GenerateAccordion({
   items,
   adjustedIndex,
   expanded,
   handleChange,
-  theme,
   expandedPanel,
   tabName,
 }: {
@@ -44,7 +42,6 @@ function GenerateAccordion({
   handleChange: (
     panel: string
   ) => (_: React.SyntheticEvent, isExpanded: boolean) => void;
-  theme: any;
   expandedPanel: string;
   tabName: string;
 }) {
@@ -64,49 +61,48 @@ function GenerateAccordion({
           {tabName} {adjustedIndex}
         </Typography>
       </AccordionSummary>
-      <AccordionDetails>
-        <Grid container spacing={2}>
-          {items.map((item: any, subIndex: number) => (
-            <Fragment key={subIndex}>
-              {item.children ? (
-                <Fragment>
-                  {GridItem(
-                    theme,
-                    item.label,
-                    item.value,
-                    item.copy,
-                    adjustedIndex,
-                    subIndex,
-                    true
-                  )}
-                  {item.children.map((child: any, innerIndex: number) => (
-                    <Fragment key={innerIndex}>
-                      {GridItem(
-                        theme,
-                        child.label,
-                        child.value,
-                        child.copy,
-                        adjustedIndex,
-                        subIndex,
-                        false
-                      )}
-                    </Fragment>
-                  ))}
-                </Fragment>
-              ) : (
-                GridItem(
-                  theme,
+      <AccordionDetails
+        style={{
+          padding: 0,
+        }}
+      >
+        {items.map((item: any, subIndex: number) => (
+          <Fragment key={subIndex}>
+            {item.children ? (
+              <Fragment>
+                {GridItem(
                   item.label,
                   item.value,
                   item.copy,
                   adjustedIndex,
                   subIndex,
                   true
-                )
-              )}
-            </Fragment>
-          ))}
-        </Grid>
+                )}
+                {item.children.map((child: any, innerIndex: number) => (
+                  <Fragment key={innerIndex}>
+                    {GridItem(
+                      child.label,
+                      child.value,
+                      child.copy,
+                      adjustedIndex,
+                      subIndex,
+                      false
+                    )}
+                  </Fragment>
+                ))}
+              </Fragment>
+            ) : (
+              GridItem(
+                item.label,
+                item.value,
+                item.copy,
+                adjustedIndex,
+                subIndex,
+                true
+              )
+            )}
+          </Fragment>
+        ))}
       </AccordionDetails>
     </StyledAccordion>
   );

src/routes/Blocks/GridItem.tsx

@@ -24,34 +24,48 @@ import { Fragment } from 'react';
 import { TypographyData } from '../../components/StyledComponents';
 import Typography from '@mui/material/Typography';
 import Grid from '@mui/material/Grid';
-import Divider from '@mui/material/Divider';
 import { shortenString } from '../../utils/helpers';
 import CopyToClipboard from '../../components/CopyToClipboard';
+import { useTheme } from '@mui/material/styles';
 
 function GridItem(
-  theme: any,
   label: string,
   value: any,
   copy: boolean,
   index: number,
   subIndex: number,
   showDivider: boolean
 ) {
+  const theme = useTheme();
   return (
-    <Fragment>
-      <Grid item xs={12}>
-        {showDivider && (
-          <Divider
-            style={{
-              backgroundColor: theme.palette.background.paper,
-            }}
-          />
-        )}
-      </Grid>
-      <Grid item xs={12} md={4} lg={4}>
+    <Grid
+      container
+      xs={12}
+      style={{
+        backgroundColor: subIndex % 2 === 1 ? '' : 'rgba(0, 0, 0, 0.02)',
+        borderTop: showDivider ? `1px solid white` : 'none',
+      }}
+    >
+      <Grid
+        item
+        xs={12}
+        md={4}
+        lg={4}
+        style={{
+          padding: theme.spacing(2),
+        }}
+      >
         <Typography variant="body2">{label}</Typography>
       </Grid>
-      <Grid item xs={12} md={8} lg={8}>
+      <Grid
+        item
+        xs={12}
+        md={8}
+        lg={8}
+        style={{
+          padding: theme.spacing(2),
+        }}
+      >
         <TypographyData>
           {copy ? (
             <Fragment>
@@ -63,7 +77,7 @@ function GridItem(
           )}
         </TypographyData>
       </Grid>
-    </Fragment>
+    </Grid>
   );
 }
 

src/theme/tokens.ts

@@ -140,7 +140,7 @@ export const light: ThemeOptions = {
       dark: gothic[500],
       light: teal[400],
     },
-    divider: 'rgba(0,0,0,0.08)',
+    divider: 'rgba(0,0,0,0.04)',
     text: {
       primary: grey[950],
       secondary: grey[600],