fix: ui (#907)

Description
---
Fix the ui. With the renaming (shard, substates, etc.) the UI stopped
working.

Motivation and Context
---

How Has This Been Tested?
---
Run dan-testing and open VN ui.

What process can a PR reviewer use to test or verify this change?
---
Same as above.


Breaking Changes
---

- [x] None
- [ ] Requires data directory to be deleted
- [ ] Other - Please specify

applications/tari_validator_node_web_ui/src/routes/Committees/Committees.tsx

@@ -66,9 +66,9 @@ function Committees({ committees, peerId }: { committees: CommitteeShardInfo[] |
           <TableBody>
             {committees.map((committee) => (
               <Committee
-                key={committee.bucket}
-                begin={committee.shard_range.start}
-                end={committee.shard_range.end}
+                key={committee.shard}
+                begin={committee.substate_address_range.start}
+                end={committee.substate_address_range.end}
                 members={committee.validators}
                 peerId={peerId}
               />

applications/tari_validator_node_web_ui/src/routes/Committees/CommitteesPieChart.tsx

@@ -31,17 +31,23 @@ const MyChartComponent = ({ chartData }: MyChartComponentProps) => {
 
   useEffect(() => {
     const mappedTitles = chartData.committees.map((shardInfo) => {
-      return `${shardInfo.shard_range.start.slice(0, 6)}... - ${shardInfo.shard_range.end.slice(0, 6)}...`;
+      return `${shardInfo.substate_address_range.start.slice(0, 6)}... - ${shardInfo.substate_address_range.end.slice(
+        0,
+        6,
+      )}...`;
     });
     setTitles(mappedTitles);
 
     const mappedContent = chartData.committees.reverse().map((shardInfo) => {
       const data: any = {
         value: shardInfo.validators.length,
-        name: `${shardInfo.shard_range.start.slice(0, 6)}... - ${shardInfo.shard_range.end.slice(0, 6)}...`,
+        name: `${shardInfo.substate_address_range.start.slice(0, 6)}... - ${shardInfo.substate_address_range.end.slice(
+          0,
+          6,
+        )}...`,
         committee: shardInfo.validators,
-        link: `/committees/${shardInfo.shard_range.start},${shardInfo.shard_range.end}`,
-        range: `${shardInfo.shard_range.start}<br />${shardInfo.shard_range.end}`,
+        link: `/committees/${shardInfo.substate_address_range.start},${shardInfo.substate_address_range.end}`,
+        range: `${shardInfo.substate_address_range.start}<br />${shardInfo.substate_address_range.end}`,
       };
       return data;
     });

applications/tari_validator_node_web_ui/src/routes/Committees/CommitteesRadial.tsx

@@ -56,8 +56,8 @@ export default function CommitteesRadial({ committees }: { committees: GetNetwor
     };
 
     dataset.forEach((data: CommitteeShardInfo) => {
-      const start = fromHexString(data.shard_range.start)[0];
-      const end = fromHexString(data.shard_range.end)[0];
+      const start = fromHexString(data.substate_address_range.start)[0];
+      const end = fromHexString(data.substate_address_range.end)[0];
 
       switch (true) {
         case start === end:
@@ -86,7 +86,7 @@ export default function CommitteesRadial({ committees }: { committees: GetNetwor
       }
     });
     setChartData(info);
-    const newTitles = dataset.map((info) => `Committee ${info.bucket}`);
+    const newTitles = dataset.map((info) => `Committee ${info.shard}`);
     setTitles(newTitles);
   }, [committees]);
 
@@ -95,7 +95,7 @@ export default function CommitteesRadial({ committees }: { committees: GetNetwor
     const data = committees.committees[dataIndex];
     const {
       validators,
-      shard_range: { start, end },
+      substate_address_range: { start, end },
     } = data;
 
     const memberList = validators

applications/tari_validator_node_web_ui/src/routes/Committees/CommitteesWaterfall.tsx

@@ -23,7 +23,7 @@
 import { useState, useEffect } from "react";
 import { fromHexString } from "../VN/Components/helpers";
 import EChartsReact from "echarts-for-react";
-import { ICommittees, ICommitteeChart, ICommitteeMap } from "../../utils/interfaces";
+import { ICommitteeChart } from "../../utils/interfaces";
 import "../../theme/echarts.css";
 import { CommitteeShardInfo } from "../../utils/interfaces";
 
@@ -56,8 +56,8 @@ export default function CommitteesWaterfall({ committees }: { committees: Commit
     };
 
     committees.forEach((data) => {
-      const firstValue = fromHexString(data.shard_range.start)[0];
-      const secondValue = fromHexString(data.shard_range.end)[0];
+      const firstValue = fromHexString(data.substate_address_range.start)[0];
+      const secondValue = fromHexString(data.substate_address_range.end)[0];
       switch (true) {
         case firstValue === secondValue:
           info.activeleft.push(0);
@@ -86,15 +86,15 @@ export default function CommitteesWaterfall({ committees }: { committees: Commit
     });
     setChartData(info);
     setDivHeight(committees.length * 50);
-    const newTitles = committees.map((data) => `Committee ${data.bucket}`);
+    const newTitles = committees.map((data) => `Committee ${data.shard}`);
     setTitles(newTitles);
   }, [committees]);
 
   function tooltipFormatter(params: any) {
     const dataIndex = params[0].dataIndex;
     const data = committees[dataIndex];
-    const begin = fromHexString(data.shard_range.start)[0];
-    const end = fromHexString(data.shard_range.end)[0];
+    const begin = fromHexString(data.substate_address_range.start)[0];
+    const end = fromHexString(data.substate_address_range.end)[0];
 
     const memberList = data.validators
       .map((member) => `<li>${member.address}</li>`)

applications/tari_validator_node_web_ui/src/utils/interfaces.tsx

@@ -72,8 +72,8 @@ interface GetNetworkCommitteesResponse {
 }
 
 interface CommitteeShardInfo {
-  bucket: number;
-  shard_range: {
+  shard: number;
+  substate_address_range: {
     end: string;
     start: string;
   };