ui: add footnote about germinating deposits

BeanstalkFarms · Apr 17, 2024 · ad95910 · ad95910
1 parent a6e44d1
commit ad95910
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 10 deletions.
diff --git a/projects/ui/src/components/Common/TableCard.tsx b/projects/ui/src/components/Common/TableCard.tsx
@@ -44,6 +44,7 @@ export type TableCardProps = {
   /** disable border */
   maxRows?: number;
   hideFooter?: true | undefined;
+  footNote?: string | undefined;
 };
 
 interface GridRowParams<R extends GridRowModel = GridRowModel> {
@@ -85,6 +86,7 @@ const TableCard: FC<TableCardProps> = ({
   tableCss,
   maxRows = 5,
   hideFooter = false,
+  footNote,
 }) => {
   const tableHeight = useMemo(() => {
     if (!rows || rows.length === 0) return '250px';
@@ -179,6 +181,18 @@ const TableCard: FC<TableCardProps> = ({
           getRowClassName={customRowStyler}
         />
       </Box>
+      {footNote && (
+        <Box
+          sx={{
+            pt: 0.5,
+            px: 2,
+            pb: 1,
+            color: 'text.tertiary',
+          }}
+        >
+          *{footNote}
+        </Box>
+      )}
     </Card>
   );
 };

diff --git a/projects/ui/src/components/Silo/Actions/Deposits.tsx b/projects/ui/src/components/Silo/Actions/Deposits.tsx
@@ -51,6 +51,8 @@ const Deposits: FC<
     [siloBalance?.deposited.crates, deltaStem, decimalShift]
   );
 
+  const hasGerminating = !!rows.find((r) => r.isGerminating);
+
   const columns = useMemo(
     () =>
       [
@@ -185,16 +187,23 @@ const Deposits: FC<
   const state = !account ? 'disconnected' : 'ready';
 
   return (
-    <TableCard
-      title={`${token.name} Deposits`}
-      rows={rows}
-      columns={columns}
-      amount={amount}
-      value={getUSD(token, amount || ZERO_BN)}
-      state={state}
-      token={token}
-      {...props}
-    />
+    <>
+      <TableCard
+        title={`${token.name} Deposits`}
+        rows={rows}
+        columns={columns}
+        amount={amount}
+        value={getUSD(token, amount || ZERO_BN)}
+        state={state}
+        token={token}
+        footNote={
+          hasGerminating
+            ? 'Green rows represent germinating deposits'
+            : undefined
+        }
+        {...props}
+      />
+    </>
   );
 };