Merge pull request #7 from optimism-java/ga

add GA

src/components/Charts/ClaimChart/index.tsx

@@ -3,7 +3,12 @@ import { ClaimData } from "@/types";
 import { depth, shortenAddress } from "@/utils";
 import { EChartOption } from "echarts";
 import React, { FC, useState } from "react";
-import { Dialog, DialogBackdrop, DialogPanel, DialogTitle } from '@headlessui/react'
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogPanel,
+  DialogTitle,
+} from "@headlessui/react";
 import { ConnectButton } from "@rainbow-me/rainbowkit";
 import { Button } from "@/components/Button";
 import { Input } from "@/components/Input";
@@ -13,16 +18,16 @@ const yGap = 100;
 const yBase = 100;
 
 type Node = {
-  name: string,
-  claim: string,
-  position: string,
-  value: string,
+  name: string;
+  claim: string;
+  position: string;
+  value: string;
   itemStyle: {
-    color: string,
-  },
-  x: number,
-  y: number,
-}
+    color: string;
+  };
+  x: number;
+  y: number;
+};
 
 const isAttack = (cur: bigint, parent: bigint): boolean => {
   if (parent * BigInt(2) === cur) {
@@ -100,6 +105,7 @@ const genNodesAndLinks = (data: ClaimData[]): any => {
       levelMap.set(deep, deepCount + 1);
     }
   }
+  console.log(maxDepth);
   return {
     nodes,
     links,
@@ -112,7 +118,7 @@ const ClaimChart: FC<{ claimData: ClaimData[] }> = ({ claimData }) => {
   const options: EChartOption<EChartOption.SeriesGraph> = {
     tooltip: {
       trigger: "item",
-      triggerOn: 'click',
+      triggerOn: "click",
       formatter: (params: any) => {
         // if (params.dataType === "node") {
         //   return `${params.data.claim}`;
@@ -148,7 +154,7 @@ const ClaimChart: FC<{ claimData: ClaimData[] }> = ({ claimData }) => {
         label: {
           show: true,
           formatter: (params: any) => {
-            return params.data.value
+            return params.data.value;
           },
         },
         edgeSymbol: ["circle", "arrow"],
@@ -160,17 +166,22 @@ const ClaimChart: FC<{ claimData: ClaimData[] }> = ({ claimData }) => {
       },
     ],
   };
-  const [showModal, setShowModal] = useState(false)
-  const [modalData, setModalData] = useState<Node>()
-  const [val, setVal] = useState('')
+  const [showModal, setShowModal] = useState(false);
+  const [modalData, setModalData] = useState<Node>();
+  const [val, setVal] = useState("");
   const handleClick = (e: any) => {
-    setShowModal(true)
-    setModalData(e.data)
-    console.log(e.data, 'e')
-  }
+    setShowModal(true);
+    setModalData(e.data);
+    console.log(e.data, "e");
+  };
   return (
     <>
-      <Dialog open={showModal} as="div" className="relative z-10 focus:outline-none" onClose={() => setShowModal(false)}>
+      <Dialog
+        open={showModal}
+        as="div"
+        className="relative z-10 focus:outline-none"
+        onClose={() => setShowModal(false)}
+      >
         <DialogBackdrop
           transition
           className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in"
@@ -186,50 +197,56 @@ const ClaimChart: FC<{ claimData: ClaimData[] }> = ({ claimData }) => {
               </DialogTitle>
               <p className="mt-4 text-sm/6 text-white/50">
                 <div>
-                  <div className="text-sm font-semibold text-contentSecondary-light dark:text-warmGray-300 mb-1">Claim</div>
-                  <div className="text-sm text-contentSecondary-light dark:text-warmGray-300 mb-2 break-all">{modalData?.claim}</div>
+                  <div className="text-sm font-semibold text-contentSecondary-light dark:text-warmGray-300 mb-1">
+                    Claim
+                  </div>
+                  <div className="text-sm text-contentSecondary-light dark:text-warmGray-300 mb-2 break-all">
+                    {modalData?.claim}
+                  </div>
                 </div>
                 <div>
-                  <div className="text-sm font-semibold text-contentSecondary-light dark:text-warmGray-300 mb-1">challenge claim</div>
+                  <div className="text-sm font-semibold text-contentSecondary-light dark:text-warmGray-300 mb-1">
+                    challenge claim
+                  </div>
                   <Input
                     type="text"
                     name="search"
                     id="search"
                     value={val}
                     onChange={(e) => setVal(e.target.value)}
                     className={"rounded-none rounded-l-md"}
-                    placeholder={'challenge string'}
+                    placeholder={"challenge string"}
                   />
                 </div>
               </p>
               <div className="mt-4 flex justify-end gap-4">
                 <Button
-                  label='defend'
+                  label="defend"
                   variant="outline"
                   onClick={() => setShowModal(false)}
-                >
-                </Button> <Button
-                  label='attack'
+                ></Button>{" "}
+                <Button
+                  label="attack"
                   variant="outline"
                   onClick={() => setShowModal(false)}
-                >
-                </Button>
+                ></Button>
               </div>
             </DialogPanel>
           </div>
         </div>
       </Dialog>
       <ChartCard
-        title={<div className="flex items-center gap-10">
-          <div>Fault Dispute Game Graph</div>
-          <ConnectButton showBalance={false} />
-        </div>}
+        title={
+          <div className="flex items-center gap-10">
+            <div>Fault Dispute Game Graph</div>
+            <ConnectButton showBalance={false} />
+          </div>
+        }
         handleClick={handleClick}
         options={options}
         depth={maxDepth}
       />
     </>
-
   );
 };
 

src/pages/_app.tsx

@@ -24,10 +24,7 @@ const App = ({ Component, pageProps }: NextAppProps) => {
     >
       <Head>
         <title>Super Proof</title>
-        <meta
-          name="description"
-          content="Super proof"
-        />
+        <meta name="description" content="Super proof" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <AppLayout>

src/pages/_document.tsx

@@ -1,11 +1,21 @@
 import NextDocument, { Head, Html, Main, NextScript } from "next/document";
+import Script from "next/script";
 
 export default class Document extends NextDocument {
   render() {
     return (
       <Html lang="en" className="dark h-full">
         <Head>
           <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+          <Script strategy="lazyOnload">
+            {`<!-- Google Tag Manager -->
+(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+})(window,document,'script','dataLayer','GTM-WQPWX345');
+<!-- End Google Tag Manager -->`}
+          </Script>
         </Head>
         <body
           className={`
@@ -16,6 +26,15 @@ export default class Document extends NextDocument {
         dark:text-content-dark
         `}
         >
+          <noscript>
+            <iframe
+              src="https://www.googletagmanager.com/ns.html?id=GTM-WQPWX345"
+              height="0"
+              width="0"
+              className=""
+              // style="display:none;visibility:hidden"
+            ></iframe>
+          </noscript>
           <Main />
           <NextScript />
         </body>

src/utils/tree.ts

@@ -1,4 +1,4 @@
 export const depth = (position: bigint): number => {
   const bitLength = position.toString(2).length; // 将 position 转为二进制字符串并获取其长度
-  return 31 - (bitLength - 1);
+  return bitLength - 1;
 };