Merge branch 'development' of https://github.com/optimism-java/disput…

…e-explorer-frontend into development

src/components/Charts/ClaimChart/index.tsx

@@ -15,7 +15,7 @@ const yBase = 100;
 type Node = {
   name: string,
   claim: string,
-  position: number,
+  position: string,
   value: string,
   itemStyle: {
     color: string,
@@ -24,8 +24,8 @@ type Node = {
   y: number,
 }
 
-const isAttack = (cur: number, parent: number): boolean => {
-  if (parent * 2 === cur) {
+const isAttack = (cur: bigint, parent: bigint): boolean => {
+  if (parent * BigInt(2) === cur) {
     return true;
   }
   return false;
@@ -63,7 +63,7 @@ const genNodesAndLinks = (data: ClaimData[]): any => {
         continue;
       }
       queue.push(i);
-      const deep = depth(current.position);
+      const deep = depth(BigInt(current.position));
       if (deep > maxDepth) {
         maxDepth = deep;
       }
@@ -90,7 +90,7 @@ const genNodesAndLinks = (data: ClaimData[]): any => {
           formatter: "attack",
         },
       };
-      if (!isAttack(current.position, parent.position)) {
+      if (!isAttack(BigInt(current.position), BigInt(parent.position))) {
         node.itemStyle.color = "blue";
         link.lineStyle.color = "blue";
         link.label.formatter = "defend";
@@ -267,7 +267,7 @@ const genTreeData = (data: ClaimData[]): any => {
           },
           children: [],
         };
-        if (!isAttack(current.position, parent.position)) {
+        if (!isAttack(BigInt(current.position), BigInt(parent.position))) {
           node.itemStyle.color = "blue";
           node.lineStyle.color = "blue";
           node.value = `${current.position}🏁 ${shortenAddress(

src/pages/game/graphviz.tsx

@@ -136,7 +136,6 @@ const GameDetail = () => {
       }
     });
     const maxIndex = 2 ** (maxDepth + 1);
-    console.log(maxIndex);
     let nodes = "";
     let links = "";
     for (let i = 1; i <= maxIndex; i++) {

src/types/data.ts

@@ -23,7 +23,7 @@ export interface ClaimData {
   claimant: string;
   bond: number;
   claim: string;
-  position: number;
+  position: string;
   clock: number;
   output_block: number;
   event_id: number;
@@ -56,26 +56,26 @@ export interface Amountperday {
 }
 
 export interface BoundProgress {
-  amount: string,
-  date: string
+  amount: string;
+  date: string;
 }
 
 export interface LatestEvents {
-  block_hash: string
-  block_log_indexed: number
-  block_number: number
-  block_time: number
-  blockchain: string
-  contract_address: string
-  created_at: number
-  data: string
-  event_hash: string
-  event_name: string
-  id: number
-  retry_count: number
-  status: string
-  sync_block_id: number
-  tx_hash: string
-  tx_index: string
-  updated_at: number
-}
+  block_hash: string;
+  block_log_indexed: number;
+  block_number: number;
+  block_time: number;
+  blockchain: string;
+  contract_address: string;
+  created_at: number;
+  data: string;
+  event_hash: string;
+  event_name: string;
+  id: number;
+  retry_count: number;
+  status: string;
+  sync_block_id: number;
+  tx_hash: string;
+  tx_index: string;
+  updated_at: number;
+}

src/utils/tree.ts

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