dashboard: add FT tab

Signed-off-by: bingyuyap <bingyu.yap.21@gmail.com>

Author: bingyuyap

dashboard/src/components/FTMetrics.tsx

@@ -0,0 +1,29 @@
+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;

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,8 +85,29 @@ 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>
     </>
-  );
+  )
 }
 
 function Main() {
@@ -130,6 +152,9 @@ function Main() {
         <Route path="/contracts">
           <Contracts />
         </Route>
+        <Route path="/ft-metrics">
+          <FTMetrics />
+        </Route>
         <Route path="/">
           <Home
             heartbeats={heartbeats}