From b3408b251c83e13b3ed7f4ead4c852c4a5aef1a7 Mon Sep 17 00:00:00 2001
From: bingyuyap <bingyu.yap.21@gmail.com>
Date: Sat, 31 Aug 2024 08:09:54 +0800
Subject: [PATCH] dashboard: add FT tab

Signed-off-by: bingyuyap <bingyu.yap.21@gmail.com>
---
 dashboard/src/components/FTMetrics.tsx | 28 ++++++++++++++++++++++++++
 dashboard/src/components/Main.tsx      | 25 +++++++++++++++++++++++
 2 files changed, 53 insertions(+)
 create mode 100644 dashboard/src/components/FTMetrics.tsx

diff --git a/dashboard/src/components/FTMetrics.tsx b/dashboard/src/components/FTMetrics.tsx
new file mode 100644
index 00000000..42f6b5fd
--- /dev/null
+++ b/dashboard/src/components/FTMetrics.tsx
@@ -0,0 +1,28 @@
+import { Box, Divider, Typography } from '@mui/material';
+import { useNetworkContext } from '../contexts/NetworkContext';
+import { LookerDashboard } from './LookerDashboard';
+
+function FTMetrics() {
+  const { currentNetwork } = useNetworkContext();
+  if (currentNetwork.name === 'Mainnet') {
+    return (
+      <>
+        <LookerDashboard
+          title="Mainnet FT Transfers Report"
+          src="https://lookerstudio.google.com/embed/reporting/6125e312-2e23-4385-8ba2-4c86f5f48e7f/page/p_fy15iz6kkd"
+          hasTabs
+        />
+        <Divider />
+      </>
+    );
+  }
+  // Unsupported because Swap Layer is not deployed on Testnet
+  return (
+    <>
+      <Box textAlign="center" my={8} mx={4}>
+        <Typography variant="h3">FT Metrics are currently only supported in Mainnet</Typography>
+      </Box>
+    </>
+  );
+}
+export default FTMetrics;
diff --git a/dashboard/src/components/Main.tsx b/dashboard/src/components/Main.tsx
index cec78d7f..5974a696 100644
--- a/dashboard/src/components/Main.tsx
+++ b/dashboard/src/components/Main.tsx
@@ -14,6 +14,7 @@ import Home from './Home';
 import NTTMetrics from './NTTMetrics';
 import NetworkSelector from './NetworkSelector';
 import Settings from './Settings';
+import FTMetrics from './FTMetrics';
 
 function NavButton(props: any) {
   // fix for Invalid value for prop `navigate` on <a> tag
@@ -84,6 +85,27 @@ function NavLinks() {
           <Typography variant="h6">NTT</Typography>
         </Hidden>
       </NavLink>
+      <NavLink
+        to={`/ft-metrics${search}`}
+        exact
+        component={NavButton}
+        color="inherit"
+        activeStyle={{ borderBottom: '2px solid', paddingBottom: 4 }}
+        style={{
+          paddingRight: 8,
+          marginLeft: 8,
+          textTransform: 'none',
+          borderRadius: 0,
+          minWidth: 0,
+        }}
+      >
+        <Hidden mdUp>
+          <SyncAltOutlined />
+        </Hidden>
+        <Hidden mdDown>
+          <Typography variant="h6">FT</Typography>
+        </Hidden>
+      </NavLink>
     </>
   );
 }
@@ -130,6 +152,9 @@ function Main() {
         <Route path="/contracts">
           <Contracts />
         </Route>
+        <Route path="/ft-metrics">
+          <FTMetrics />
+        </Route>
         <Route path="/">
           <Home
             heartbeats={heartbeats}