chore: add dev time stamp component

src/App.tsx

@@ -11,6 +11,7 @@ import W3iContext from '@/contexts/W3iContext/context'
 import { useMobileResponsiveGrid } from '@/utils/hooks'
 
 import './App.scss'
+import DevTimeStamp from './components/dev/DevTimeStamp'
 
 const App = () => {
   const { uiEnabled } = useContext(W3iContext)
@@ -20,6 +21,7 @@ const App = () => {
 
   return (
     <AuthProtectedPage>
+      <DevTimeStamp />
       <LazyMotion features={domAnimation}>
         <m.div ref={ref} data-path={location.pathname} className="App">
           <Fragment>

src/components/dev/DevTimeStamp/DevTimeStamp.scss

@@ -0,0 +1,9 @@
+.DevTimeStamp {
+  color: var(--fg-color-1);
+  background: var(--bg-color-2);
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 0.25em;
+  z-index: 999;
+}

src/components/dev/DevTimeStamp/index.tsx

@@ -0,0 +1,30 @@
+import { useContext, useEffect, useState } from 'react';
+import './DevTimeStamp.scss'
+import SettingsContext from '@/contexts/SettingsContext/context';
+
+const DevTimeStamp = () => {
+  const [timestamp, setTimestamp] = useState(Date.now())
+  const {isDevModeEnabled} = useContext(SettingsContext)
+
+  useEffect(() => {
+    if(isDevModeEnabled) {
+     const intervalId = setInterval(() => {
+      setTimestamp(Date.now())
+     }, 1)
+
+     return () => clearInterval(intervalId)
+    }
+  }, [setTimestamp, isDevModeEnabled])
+
+  if (!isDevModeEnabled) {
+    return null;
+  }
+
+  return (
+    <div className="DevTimeStamp">
+      <p>{timestamp}</p>
+    </div>
+  )
+}
+
+export default DevTimeStamp;