[Feat] Implement components to manage chainId and contract address fr…

…om URL parameters

src/app/(root)/g/interaction-client.tsx

@@ -0,0 +1,35 @@
+"use client";
+import { useEffect, useState } from 'react';
+import Interaction from "@/components/interaction";
+import { useRouter } from "next/navigation";
+
+export default function InteractionClient({
+    initialChainId,
+    initialAddress,
+}: {
+    initialChainId: string;
+    initialAddress: string;
+}) {
+    const [chainId, setChainId] = useState<string>(initialChainId);
+    const [deploymentAddress, setDeploymentAddress] = useState<string>(initialAddress);
+    const router = useRouter();
+
+    useEffect(() => {
+        const urlParams = new URLSearchParams(window.location.search);
+        const chainIdParam = urlParams.get("chainId");
+        const contractAddressParam = urlParams.get("contractAddress");
+
+        if (chainIdParam && contractAddressParam) {
+            setChainId(chainIdParam);
+            setDeploymentAddress(contractAddressParam);
+        } else {
+            router.push("/404");
+        }
+    }, [router]);
+
+    return (
+        <div className="w-full h-full">
+            <Interaction chainId={chainId} deploymentAddress={deploymentAddress} />
+        </div>
+    );
+}

src/app/(root)/g/page.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import InteractionClient from "./interaction-client";
+import { notFound } from "next/navigation";
+
+export default function InteractionsPage() {
+  const router = useRouter();
+  const [chainId, setChainId] = useState<string | null>(null);
+  const [contractAddress, setContractAddress] = useState<string | null>(null);
+
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const chainIdParam = urlParams.get("chainId");
+    const contractAddressParam = urlParams.get("contractAddress");
+
+    if (chainIdParam && contractAddressParam) {
+      setChainId(chainIdParam);
+      setContractAddress(contractAddressParam);
+    } else {
+      notFound();
+    }
+  }, [router]);
+
+  if (!chainId || !contractAddress) {
+    return <div>Loading...</div>;
+  }
+
+  return <InteractionClient initialChainId={chainId} initialAddress={contractAddress} />;
+}

src/components/interaction.tsx

@@ -54,6 +54,7 @@ export default function Interaction({
 
   return (
     <>
+    {chainId}, {deploymentAddress}
       <div className="flex flex-col items-center space-y-8">
         {/* Operation Buttons */}
         <div className="flex space-x-4 mt-10">