[Tenscan] address and tx placeholder page for MetaMask redirect link (#…

…1705)

* feat: address placeholder page

* add home url

* Update image source and alt text in `EmptyState`
component

* add tx details page

* update tenscan link

tools/obscuroscan_v3/frontend/pages/address/[address].tsx

@@ -0,0 +1,23 @@
+import Layout from "@/src/components/layouts/default-layout";
+import EmptyState from "@/src/components/modules/common/empty-state";
+import { Button } from "@/src/components/ui/button";
+import { useRouter } from "next/router";
+import React from "react";
+
+const AddressDetails = () => {
+  const { push } = useRouter();
+
+  return (
+    <Layout>
+      <EmptyState
+        title="Address Details"
+        description="Coming soon..."
+        imageSrc="/assets/images/clock.png"
+        imageAlt="Clock"
+        action={<Button onClick={() => push("/")}>Go Home</Button>}
+      />
+    </Layout>
+  );
+};
+
+export default AddressDetails;

tools/obscuroscan_v3/frontend/pages/tx/[hash].tsx

@@ -0,0 +1,23 @@
+import Layout from "@/src/components/layouts/default-layout";
+import EmptyState from "@/src/components/modules/common/empty-state";
+import { Button } from "@/src/components/ui/button";
+import { useRouter } from "next/router";
+import React from "react";
+
+const TransactionDetails = () => {
+  const { push } = useRouter();
+
+  return (
+    <Layout>
+      <EmptyState
+        title="Transaction Details"
+        description="Coming soon..."
+        imageSrc="/assets/images/clock.png"
+        imageAlt="Clock"
+        action={<Button onClick={() => push("/")}>Go Home</Button>}
+      />
+    </Layout>
+  );
+};
+
+export default TransactionDetails;

tools/obscuroscan_v3/frontend/src/components/layouts/footer.tsx

@@ -1,35 +1,43 @@
-import { socialLinks, version } from "@/src/lib/constants";
+import Link from "next/link";
+import { socialLinks, version } from "../../lib/constants";
 import {
   GitHubLogoIcon,
   TwitterLogoIcon,
   DiscordLogoIcon,
 } from "@radix-ui/react-icons";
-import Link from "next/link";
 
 export default function Footer() {
   return (
-    <div className="border-t px-2">
-      <div className="flex h-16 items-center px-4">
-        <div className="flex-1 flex items-center space-x-4">
+    <div className="border-t p-2">
+      <div className="flex h-16 items-center justify-between px-4 flex-wrap">
+        <div className="flex items-center space-x-4 pr-2">
           <a
             href={socialLinks.github}
+            aria-label="GitHub"
             className="text-muted-foreground hover:text-primary transition-colors"
           >
             <GitHubLogoIcon />
           </a>
           <a
             href={socialLinks.twitter}
+            aria-label="Twitter"
             className="text-muted-foreground hover:text-primary transition-colors"
           >
             <TwitterLogoIcon />
           </a>
           <a
             href={socialLinks.discord}
+            aria-label="Discord"
             className="text-muted-foreground hover:text-primary transition-colors"
           >
             <DiscordLogoIcon />
           </a>
         </div>
+        <div className="flex items-center justify-center space-x-4 pr-2">
+          <h3 className="text-xs text-muted-foreground">
+            Version: {version || "Unknown"}
+          </h3>
+        </div>
         <div className="flex items-center space-x-4">
           <Link
             href="/docs/privacy"
@@ -43,9 +51,6 @@ export default function Footer() {
           >
             Terms
           </Link>
-          <div className="text-sm font-medium text-muted-foreground">
-            Version: {version}
-          </div>
         </div>
       </div>
     </div>

tools/obscuroscan_v3/frontend/src/components/modules/common/empty-state.tsx

@@ -4,17 +4,28 @@ const EmptyState = ({
   title,
   description,
   icon,
+  imageSrc,
+  imageAlt,
   action,
 }: {
   title?: string;
   description?: string;
   icon?: React.ReactNode;
+  imageSrc?: string;
+  imageAlt?: string;
   action?: React.ReactNode;
 }) => {
   return (
     <div className="flex flex-col items-center justify-center h-full">
       <div className="flex flex-col items-center justify-center space-y-4">
         {icon && <div className="w-24 h-24">{icon}</div>}
+        {imageSrc && (
+          <img
+            src={imageSrc}
+            alt={imageAlt || "Empty state"}
+            className="w-24 h-24 rounded-full"
+          />
+        )}
         {title && (
           <h3 className="text-2xl font-semibold leading-none tracking-tight">
             {title}

tools/walletextension/frontend/src/lib/constants.ts

@@ -1,6 +1,7 @@
-export const tenGatewayAddress = process.env.NEXT_PUBLIC_API_GATEWAY_URL || "http://127.0.0.1:3000";
+export const tenGatewayAddress =
+  process.env.NEXT_PUBLIC_API_GATEWAY_URL || "http://127.0.0.1:3000";
 
-export const tenscanLink = "https://testnet.tenscan.com";
+export const tenscanLink = "https://testnet.tenscan.io";
 
 export const socialLinks = {
   github: "https://github.com/ten-protocol",