Merge pull request #82 from iotaledger/feat/update-milestone-routes

Feat: Update milestone routes

Author: brancoder

package.json

@@ -9,7 +9,7 @@
     },
     "license": "MIT",
     "dependencies": {
-        "@iota/iota.js": "^1.9.0-stardust.9",
+        "@iota/iota.js": "^1.9.0-stardust.11",
         "classnames": "^2.3.1",
         "humanize-duration": "^3.25.2",
         "moment": "^2.29.1",

src/app/components/tangle/MilestonePayload.tsx

@@ -52,10 +52,10 @@ class MilestonePayload extends Component<MilestonePayloadProps, MilestonePayload
                     )}
                 </div>
                 <div className="card--label">
-                    Last Milestone Id
+                    Previous Milestone Id
                 </div>
                 <div className="card--value">
-                    {this.props.payload.lastMilestoneId}
+                    {this.props.payload.previousMilestoneId}
                 </div>
                 {this.props.payload.parentMessageIds?.map((parent, idx) => (
                     <React.Fragment key={idx}>

src/app/routes/Explorer.tsx

@@ -64,7 +64,7 @@ class Peers extends AsyncComponent<RouteComponentProps, ExplorerState> {
 
                 this.setState({
                     milestones: nonNull
-                        .map(m => ({ index: m.index, messageId: m.messageID }))
+                        .map(m => ({ index: m.index, milestoneId: m.milestoneId }))
                         .sort((m1, m2) => m2.index - m1.index)
                         .slice(0, 10)
                 });
@@ -147,9 +147,9 @@ class Peers extends AsyncComponent<RouteComponentProps, ExplorerState> {
                             <div key={idx} className="milestones-panel--milestone">
                                 <div className="index">{ms.index}</div>
                                 <Link
-                                    to={`/explorer/message/${ms.messageId}`}
+                                    to={`/explorer/milestone/${ms.index}`}
                                 >
-                                    {ms.messageId}
+                                    {ms.milestoneId}
                                 </Link>
                             </div>
                         ))}

src/app/routes/ExplorerState.ts

@@ -18,7 +18,7 @@ export interface ExplorerState {
      * The milestones.
      */
     milestones: {
+        milestoneId: string;
         index: number;
-        messageId: string;
     }[];
 }

src/app/routes/Search.tsx

@@ -163,6 +163,7 @@ class Search extends AsyncComponent<RouteComponentProps<SearchRouteProps>, Searc
                             objParam = response.output.messageId;
                         } else if (response.milestone) {
                             objType = "milestone";
+                            objParam = response.milestone.index.toString();
                         }
                         if (objType) {
                             redirect = `/explorer/${objType}/${objParam}`;

src/app/routes/explorer/Milestone.tsx

@@ -1,3 +1,4 @@
+import { messageIdFromMilestonePayload } from "@iota/iota.js";
 import React, { ReactNode } from "react";
 import { Link, RouteComponentProps } from "react-router-dom";
 import { ReactComponent as ChevronLeftIcon } from "../../../assets/chevron-left.svg";
@@ -76,16 +77,16 @@ class Milestone extends AsyncComponent<RouteComponentProps<MilestoneRouteProps>,
                         <div className="card--value card--value__mono row">
                             <span className="margin-r-t">
                                 <Link
-                                    to={`/explorer/message/${this.state.milestone?.messageId}`}
+                                    to={`/explorer/message/${this.state.messageId}`}
                                     className="info-box--title linked"
                                 >
-                                    {this.state.milestone?.messageId}
+                                    {this.state.messageId}
                                 </Link>
 
                             </span>
                             <MessageButton
                                 onClick={() => ClipboardHelper.copy(
-                                    this.state.milestone?.messageId
+                                    this.state.messageId
                                 )}
                                 buttonType="copy"
                                 labelPosition="top"
@@ -141,6 +142,19 @@ class Milestone extends AsyncComponent<RouteComponentProps<MilestoneRouteProps>,
         const result = await this._tangleService.milestoneDetails(Number.parseInt(index, 10));
 
         if (result) {
+            try {
+                const tangleService = ServiceFactory.get<TangleService>("tangle");
+                const info = await tangleService.info();
+
+                this.setState({
+                    messageId: messageIdFromMilestonePayload(info.protocol.protocolVersion, result)
+                });
+            } catch (error) {
+                if (error instanceof Error) {
+                    console.log(error.message);
+                }
+            }
+
             this.setState({
                 milestone: result
             }, async () => this.checkForAdjacentMilestones());

src/app/routes/explorer/MilestoneState.ts

@@ -1,10 +1,15 @@
-import { IMilestoneResponse } from "@iota/iota.js";
+import { IMilestonePayload } from "@iota/iota.js";
 
 export interface MilestoneState {
     /**
      * Milestone.
      */
-    milestone?: IMilestoneResponse;
+    milestone?: IMilestonePayload;
+
+    /**
+     * The message id of the milestone.
+     */
+    messageId?: string;
 
     /**
      * The previous milestone is available.

src/models/tangle/ISearchResponse.ts

@@ -1,4 +1,4 @@
-import { IMessage, IMilestoneResponse, IOutputResponse } from "@iota/iota.js";
+import { IMilestonePayload, IMessage, IOutputResponse } from "@iota/iota.js";
 import { IAddressDetails } from "../IAddressDetails";
 
 export interface ISearchResponse {
@@ -35,5 +35,5 @@ export interface ISearchResponse {
     /**
      * Milestone if it was found.
      */
-    milestone?: IMilestoneResponse;
+    milestone?: IMilestonePayload;
 }

src/models/websocket/IConfirmedInfo.ts

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
 export interface IConfirmedInfo {
-    id: string;
+    ids: string[];
     excluded_ids?: string[];
 }

src/models/websocket/IMs.ts

@@ -1,5 +1,5 @@
 /* eslint-disable camelcase */
 export interface IMs {
-    messageID: string;
+    milestoneId: string;
     index: number;
 }