New Layout + Page structure (#47)

* Update navbar

* Add trade page w/ new layout

* Add recent swaps to explorer page

* Add swaps component

* Add PairSelector component

* Remove neon style from loader

* Fix depth chart

* Cleanup code

* Remove .vscode from git

* Add .vscode to gitignore

* Add redirect from / to /trade

.gitignore

@@ -17,6 +17,7 @@
 
 # misc
 .DS_Store
+.vscode
 
 # debug
 npm-debug.log*

package.json

@@ -28,6 +28,7 @@
     "@penumbra-zone/ui": "^9.0.0",
     "@penumbra-zone/wasm": "^26.2.0",
     "@radix-ui/react-icons": "^1.3.0",
+    "@styled-icons/octicons": "^10.47.0",
     "@vercel/analytics": "^1.3.1",
     "@vercel/speed-insights": "^1.0.12",
     "bech32": "^2.0.0",
@@ -48,6 +49,7 @@
     "react": "^18.3.1",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.3.1",
+    "react-outside-click-handler": "^1.3.0",
     "sharp": "^0.33.5",
     "webpack": "^5.94.0",
     "zod": "^3.23.8"
@@ -61,6 +63,7 @@
     "@types/pg": "^8.11.8",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
+    "@types/react-outside-click-handler": "^1.3.3",
     "babel-loader": "^9.1.3",
     "eslint": "8.57.0",
     "eslint-config-next": "14.2.3",

src/components/blockTimestamp.tsx

@@ -30,48 +30,18 @@ const BlockTimestampView: FC<BlockTimestampProps> = ({
   timestamp,
 }) => {
   return (
-    <>
-      <HStack>
-        <Text
-          fontSize="xs"
-          style={{
-            color: "var(--charcoal-tertiary-blended)",
-            fontSize: "small",
-            fontFamily: "monospace",
-          }}
-        >
-          Block{" "}
-        </Text>
-        <Text>
-          <a
-            href={`/block/${blockHeight}`}
-            target="_blank"
-            rel="noreferrer"
-            style={{
-              textDecoration: "underline",
-              color: "var(--charcoal-tertiary-blended)",
-              display: "flex",
-              fontSize: "small",
-              fontFamily: "monospace",
-            }}
-          >
-            {blockHeight}
-          </a>
-        </Text>
-      </HStack>
-      <Text
-        fontSize="xs"
-        style={{
-          color: "var(--charcoal-tertiary-blended)",
-          display: "flex",
-          fontSize: "small",
-          fontFamily: "monospace",
-        }}
-      >
-        {" "}
-        {formatTimestampOrDefault(timestamp)}
-      </Text>
-    </>
+    <Text
+      fontSize="xs"
+      style={{
+        color: "var(--light-grey)",
+        display: "flex",
+        fontSize: "small",
+        fontFamily: "monospace",
+      }}
+    >
+      {" "}
+      {formatTimestampOrDefault(timestamp)}
+    </Text>
   );
 };