From db9919379a8a98d1f7ba33272b09765bcc5eb749 Mon Sep 17 00:00:00 2001
From: Diogo Soares <32431609+DiogoSoaress@users.noreply.github.com>
Date: Tue, 29 Oct 2024 10:55:14 +0100
Subject: [PATCH] feat: gradient stats

---
 .../Wallet/GradientNumbers/index.tsx          | 28 ++++++++++++++++++
 .../Wallet/GradientNumbers/styles.module.css  | 29 +++++++++++++++++++
 src/content/wallet.json                       | 27 +++++++++++++++++
 3 files changed, 84 insertions(+)
 create mode 100644 src/components/Wallet/GradientNumbers/index.tsx
 create mode 100644 src/components/Wallet/GradientNumbers/styles.module.css

diff --git a/src/components/Wallet/GradientNumbers/index.tsx b/src/components/Wallet/GradientNumbers/index.tsx
new file mode 100644
index 000000000..9d4bcc250
--- /dev/null
+++ b/src/components/Wallet/GradientNumbers/index.tsx
@@ -0,0 +1,28 @@
+import { Container, Grid, Typography } from '@mui/material'
+import { type ReactElement } from 'react'
+import type { BaseBlock } from '@/components/Home/types'
+import layoutCss from '@/components/common/styles.module.css'
+import css from './styles.module.css'
+
+const Stats = ({ title, items }: BaseBlock): ReactElement => (
+  <Container className={layoutCss.containerShort}>
+    <Typography variant="h2" mb={3} textAlign="center">
+      {title}
+    </Typography>
+
+    <Grid container spacing={{ xs: '30px', xl: '50px' }} justifyContent="space-between">
+      {items?.map((item, index) => (
+        <Grid item xs={12} md={4} key={index}>
+          <a href={item.link?.href} target="_blank" rel="noreferrer" className={css.metric}>
+            {/* TODO: Fetch these values from a Dune query */}
+            <p className={css.value}>{item.title}</p>
+
+            <Typography variant="caption">{item.text}</Typography>
+          </a>
+        </Grid>
+      ))}
+    </Grid>
+  </Container>
+)
+
+export default Stats
diff --git a/src/components/Wallet/GradientNumbers/styles.module.css b/src/components/Wallet/GradientNumbers/styles.module.css
new file mode 100644
index 000000000..693a029b3
--- /dev/null
+++ b/src/components/Wallet/GradientNumbers/styles.module.css
@@ -0,0 +1,29 @@
+.metric {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.metric span {
+  transition: color var(--transition-duration) ease;
+}
+
+.metric:hover span {
+  color: var(--mui-palette-primary-main);
+}
+
+.value {
+  margin: 0;
+  font-size: 64px;
+  line-height: 64px;
+  background: linear-gradient(270deg, rgba(18, 255, 128, 1) 0%, rgba(95, 221, 255, 1) 100%);
+  background-clip: text;
+  color: transparent;
+}
+
+@media (min-width: 600px) {
+  .value {
+    font-size: 80px;
+    line-height: 100px;
+  }
+}
diff --git a/src/content/wallet.json b/src/content/wallet.json
index 45d69b823..905b22b72 100644
--- a/src/content/wallet.json
+++ b/src/content/wallet.json
@@ -78,6 +78,33 @@
     ],
     "component": "common/TitleSlidingIcons"
   },
+  {
+    "title": "<i>Safe</i> accounts",
+    "items": [
+      {
+        "title": "4M+",
+        "text": "Gas saved in batch transactions",
+        "link": {
+          "href": "https://dune.com/queries/2093960/3449499"
+        }
+      },
+      {
+        "title": "$120B+",
+        "text": "Total value locked (TVL)",
+        "link": {
+          "href": ""
+        }
+      },
+      {
+        "title": "1.5M+",
+        "text": "Monthly active users (MAU)",
+        "link": {
+          "href": "https://dune.com/queries/2459401/4044167"
+        }
+      }
+    ],
+    "component": "Wallet/GradientNumbers"
+  },
   {
     "title": "Introducing<br>Native Swaps",
     "caption": "New feature",