@hyperlane-xyz/widgets 1.0.0-beta1

package/dist/icons/Shield.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Shield.d.ts","sourceRoot":"","sources":["../../src/icons/Shield.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAIpC,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAGD,iBAAS,WAAW,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,KAAK,eAgB5D;AAED,eAAO,MAAM,UAAU,+CAAoB,CAAC"}

package/dist/icons/Shield.js

@@ -0,0 +1,35 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShieldIcon = void 0;
+const react_1 = __importStar(require("react"));
+const color_1 = require("../color");
+// Shield with checkmark
+function _ShieldIcon({ width, height, color, classes }) {
+    return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 16 16", width: width, height: height, className: classes },
+        react_1.default.createElement("path", { "fill-rule": "evenodd", d: "M8 0c-.69 0-1.843.265-2.928.56-1.11.3-2.229.655-2.887.87a1.54 1.54 0 0 0-1.044 1.262c-.596 4.477.787 7.795 2.465 9.99a11.777 11.777 0 0 0 2.517 2.453c.386.273.744.482 1.048.625.28.132.581.24.829.24s.548-.108.829-.24a7.159 7.159 0 0 0 1.048-.625 11.775 11.775 0 0 0 2.517-2.453c1.678-2.195 3.061-5.513 2.465-9.99a1.541 1.541 0 0 0-1.044-1.263 62.467 62.467 0 0 0-2.887-.87C9.843.266 8.69 0 8 0zm2.146 5.146a.5.5 0 0 1 .708.708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793l2.646-2.647z", fill: color || color_1.Color.Blue })));
+}
+exports.ShieldIcon = (0, react_1.memo)(_ShieldIcon);
+//# sourceMappingURL=Shield.js.map

package/dist/icons/Shield.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Shield.js","sourceRoot":"","sources":["../../src/icons/Shield.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAoC;AAEpC,oCAAiC;AASjC,wBAAwB;AACxB,SAAS,WAAW,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAS;IAC3D,OAAO,CACL,uCACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,OAAO;QAElB,qDACY,SAAS,EACnB,CAAC,EAAC,ufAAuf,EACzf,IAAI,EAAE,KAAK,IAAI,aAAK,CAAC,IAAI,GACzB,CACE,CACP,CAAC;AACJ,CAAC;AAEY,QAAA,UAAU,GAAG,IAAA,YAAI,EAAC,WAAW,CAAC,CAAC"}

package/dist/icons/WideChevron.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface WideChevronProps {
+    width?: string | number;
+    height?: string | number;
+    direction: 'n' | 'e' | 's' | 'w';
+    color?: string;
+    rounded?: boolean;
+    classes?: string;
+}
+declare function _WideChevron({ width, height, direction, color, rounded, classes }: WideChevronProps): JSX.Element;
+export declare const WideChevron: React.MemoExoticComponent<typeof _WideChevron>;
+export {};
+//# sourceMappingURL=WideChevron.d.ts.map

package/dist/icons/WideChevron.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WideChevron.d.ts","sourceRoot":"","sources":["../../src/icons/WideChevron.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAe,MAAM,OAAO,CAAC;AAIpC,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,SAAS,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,iBAAS,YAAY,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,gBAAgB,eA6C5F;AAED,eAAO,MAAM,WAAW,gDAAqB,CAAC"}

package/dist/icons/WideChevron.js

@@ -0,0 +1,57 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WideChevron = void 0;
+const react_1 = __importStar(require("react"));
+const color_1 = require("../color");
+function _WideChevron({ width, height, direction, color, rounded, classes }) {
+    let directionClass;
+    switch (direction) {
+        case 'n':
+            directionClass = '-rotate-90';
+            break;
+        case 'e':
+            directionClass = '';
+            break;
+        case 's':
+            directionClass = 'rotate-90';
+            break;
+        case 'w':
+            directionClass = 'rotate-180';
+            break;
+        default:
+            throw new Error(`Invalid chevron direction ${direction}`);
+    }
+    if (rounded) {
+        return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 120.3 190", width: width, height: height, fill: color || color_1.Color.Blue, className: `${directionClass} ${classes}` },
+            react_1.default.createElement("path", { d: "M4.4 0h53c7.2 0 13.7 3 16.2 7.7l46.5 85.1a2 2 0 0 1 0 2l-.2.5-46.3 87c-2.5 4.6-9 7.7-16.3 7.7h-53c-3 0-5-2-4-4L48 92.9.4 4c-1-2 1-4 4-4Z" })));
+    }
+    else {
+        return (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 28 27", width: width, height: height, className: `${directionClass} ${classes}` },
+            react_1.default.createElement("path", { d: "M13.44 13.5 0 27h14.56L28 13.5 14.56 0H0l13.44 13.5Z", fill: color || color_1.Color.Blue })));
+    }
+}
+exports.WideChevron = (0, react_1.memo)(_WideChevron);
+//# sourceMappingURL=WideChevron.js.map

package/dist/icons/WideChevron.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WideChevron.js","sourceRoot":"","sources":["../../src/icons/WideChevron.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAoC;AAEpC,oCAAiC;AAWjC,SAAS,YAAY,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAoB;IAC3F,IAAI,cAAc,CAAC;IACnB,QAAQ,SAAS,EAAE;QACjB,KAAK,GAAG;YACN,cAAc,GAAG,YAAY,CAAC;YAC9B,MAAM;QACR,KAAK,GAAG;YACN,cAAc,GAAG,EAAE,CAAC;YACpB,MAAM;QACR,KAAK,GAAG;YACN,cAAc,GAAG,WAAW,CAAC;YAC7B,MAAM;QACR,KAAK,GAAG;YACN,cAAc,GAAG,YAAY,CAAC;YAC9B,MAAM;QACR;YACE,MAAM,IAAI,KAAK,CAAC,6BAA6B,SAAS,EAAE,CAAC,CAAC;KAC7D;IAED,IAAI,OAAO,EAAE;QACX,OAAO,CACL,uCACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,eAAe,EACvB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,KAAK,IAAI,aAAK,CAAC,IAAI,EACzB,SAAS,EAAE,GAAG,cAAc,IAAI,OAAO,EAAE;YAEzC,wCAAM,CAAC,EAAC,0IAA0I,GAAG,CACjJ,CACP,CAAC;KACH;SAAM;QACL,OAAO,CACL,uCACE,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,GAAG,cAAc,IAAI,OAAO,EAAE;YAEzC,wCAAM,CAAC,EAAC,sDAAsD,EAAC,IAAI,EAAE,KAAK,IAAI,aAAK,CAAC,IAAI,GAAI,CACxF,CACP,CAAC;KACH;AACH,CAAC;AAEY,QAAA,WAAW,GAAG,IAAA,YAAI,EAAC,YAAY,CAAC,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+export { Color } from './color';
+export * from './consts';
+export { ChainLogo } from './icons/ChainLogo';
+export { WideChevron } from './icons/WideChevron';
+export { MessageTimeline } from './messages/MessageTimeline';
+export { MessageStage, MessageStatus, type ApiMessage, type StageTimings } from './messages/types';
+export { useMessage } from './messages/useMessage';
+export { useMessageStage } from './messages/useMessageStage';
+export { useMessageTimeline } from './messages/useMessageTimeline';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,KAAK,UAAU,EAAE,KAAK,YAAY,EAAE,MAAM,kBAAkB,CAAC;AACnG,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/index.js

@@ -0,0 +1,36 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMessageTimeline = exports.useMessageStage = exports.useMessage = exports.MessageStatus = exports.MessageStage = exports.MessageTimeline = exports.WideChevron = exports.ChainLogo = exports.Color = void 0;
+var color_1 = require("./color");
+Object.defineProperty(exports, "Color", { enumerable: true, get: function () { return color_1.Color; } });
+__exportStar(require("./consts"), exports);
+var ChainLogo_1 = require("./icons/ChainLogo");
+Object.defineProperty(exports, "ChainLogo", { enumerable: true, get: function () { return ChainLogo_1.ChainLogo; } });
+var WideChevron_1 = require("./icons/WideChevron");
+Object.defineProperty(exports, "WideChevron", { enumerable: true, get: function () { return WideChevron_1.WideChevron; } });
+var MessageTimeline_1 = require("./messages/MessageTimeline");
+Object.defineProperty(exports, "MessageTimeline", { enumerable: true, get: function () { return MessageTimeline_1.MessageTimeline; } });
+var types_1 = require("./messages/types");
+Object.defineProperty(exports, "MessageStage", { enumerable: true, get: function () { return types_1.MessageStage; } });
+Object.defineProperty(exports, "MessageStatus", { enumerable: true, get: function () { return types_1.MessageStatus; } });
+var useMessage_1 = require("./messages/useMessage");
+Object.defineProperty(exports, "useMessage", { enumerable: true, get: function () { return useMessage_1.useMessage; } });
+var useMessageStage_1 = require("./messages/useMessageStage");
+Object.defineProperty(exports, "useMessageStage", { enumerable: true, get: function () { return useMessageStage_1.useMessageStage; } });
+var useMessageTimeline_1 = require("./messages/useMessageTimeline");
+Object.defineProperty(exports, "useMessageTimeline", { enumerable: true, get: function () { return useMessageTimeline_1.useMessageTimeline; } });
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,iCAAgC;AAAvB,8FAAA,KAAK,OAAA;AACd,2CAAyB;AACzB,+CAA8C;AAArC,sGAAA,SAAS,OAAA;AAClB,mDAAkD;AAAzC,0GAAA,WAAW,OAAA;AACpB,8DAA6D;AAApD,kHAAA,eAAe,OAAA;AACxB,0CAAmG;AAA1F,qGAAA,YAAY,OAAA;AAAE,sGAAA,aAAa,OAAA;AACpC,oDAAmD;AAA1C,wGAAA,UAAU,OAAA;AACnB,8DAA6D;AAApD,kHAAA,eAAe,OAAA;AACxB,oEAAmE;AAA1D,wHAAA,kBAAkB,OAAA"}

package/dist/messages/MessageTimeline.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { MessageStatus, MessageStage as Stage, StageTimings } from './types';
+interface Props {
+    status: MessageStatus;
+    stage: Stage;
+    timings: StageTimings;
+    timestampSent?: number;
+}
+export declare function MessageTimeline({ status, stage: _stage, timings, timestampSent }: Props): JSX.Element;
+export {};
+//# sourceMappingURL=MessageTimeline.d.ts.map

package/dist/messages/MessageTimeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageTimeline.d.ts","sourceRoot":"","sources":["../../src/messages/MessageTimeline.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,aAAa,EAAE,YAAY,IAAI,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE7E,UAAU,KAAK;IACb,MAAM,EAAE,aAAa,CAAC;IACtB,KAAK,EAAE,KAAK,CAAC;IACb,OAAO,EAAE,YAAY,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,eAAe,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,aAAa,EAAE,EAAE,KAAK,eAwHvF"}

package/dist/messages/MessageTimeline.js

@@ -0,0 +1,111 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessageTimeline = void 0;
+const react_1 = __importDefault(require("react"));
+const color_1 = require("../color");
+const Airplane_1 = require("../icons/Airplane");
+const Envelope_1 = require("../icons/Envelope");
+const Lock_1 = require("../icons/Lock");
+const Shield_1 = require("../icons/Shield");
+const WideChevron_1 = require("../icons/WideChevron");
+const types_1 = require("./types");
+function MessageTimeline({ status, stage: _stage, timings, timestampSent }) {
+    // Ignore stage value if status shows as delivered
+    const stage = status === types_1.MessageStatus.Delivered ? types_1.MessageStage.Relayed : _stage;
+    const timeSent = timestampSent ? new Date(timestampSent) : null;
+    const timeSentStr = timeSent
+        ? `${timeSent.toLocaleDateString()} ${timeSent.toLocaleTimeString()}`
+        : null;
+    return (react_1.default.createElement("div", { className: "sm:px-2 pt-14 pb-1 flex" },
+        react_1.default.createElement("div", { className: "flex-1 flex flex-col items-center" },
+            react_1.default.createElement("div", { className: `w-full h-6 flex items-center justify-center bg-blue-500 rounded-l relative ${getStageClass(types_1.MessageStage.Sent, stage, status)}` },
+                react_1.default.createElement("div", { className: "w-3 h-3 rounded-full bg-white" }),
+                react_1.default.createElement("div", { className: "absolute -top-12 flex flex-col items-center" },
+                    react_1.default.createElement(StageIcon, { Icon: Airplane_1.AirplaneIcon }),
+                    react_1.default.createElement("div", { className: "w-0.5 h-4 bg-blue-500" })),
+                react_1.default.createElement("div", { className: "absolute -right-3 top-0 h-6" },
+                    react_1.default.createElement(WideChevron_1.WideChevron, { direction: "e", height: "100%", width: "auto" }))),
+            react_1.default.createElement("h4", { className: "mt-2.5 text-gray-700 text-sm sm:text-base" }, getStageHeader(types_1.MessageStage.Sent, stage, timings, status)),
+            react_1.default.createElement("p", { className: "mt-1 sm:px-4 text-xs text-gray-500 text-center" }, timeSentStr
+                ? `Origin transaction sent at ${timeSentStr}`
+                : 'Waiting for origin transaction')),
+        react_1.default.createElement("div", { className: "flex-0 w-2 sm:w-5" }),
+        react_1.default.createElement("div", { className: "flex-1 flex flex-col items-center" },
+            react_1.default.createElement("div", { className: `w-full h-6 flex items-center justify-center bg-blue-500 relative ${getStageClass(types_1.MessageStage.Finalized, stage, status)}` },
+                react_1.default.createElement("div", { className: "w-3 h-3 rounded-full bg-white" }),
+                react_1.default.createElement("div", { className: "absolute -top-12 flex flex-col items-center" },
+                    react_1.default.createElement(StageIcon, { Icon: Lock_1.LockIcon, size: 14 }),
+                    react_1.default.createElement("div", { className: "w-0.5 h-4 bg-blue-500" })),
+                react_1.default.createElement("div", { className: "absolute -left-3 top-0 h-6" },
+                    react_1.default.createElement(WideChevron_1.WideChevron, { direction: "e", height: "100%", width: "auto", color: "#ffffff" })),
+                react_1.default.createElement("div", { className: "absolute -right-3 top-0 h-6" },
+                    react_1.default.createElement(WideChevron_1.WideChevron, { direction: "e", height: "100%", width: "auto" }))),
+            react_1.default.createElement("h4", { className: "mt-2.5 text-gray-700 text-sm sm:text-base" }, getStageHeader(types_1.MessageStage.Finalized, stage, timings, status)),
+            react_1.default.createElement("p", { className: "mt-1 sm:px-4 text-xs text-gray-500 text-center" }, "Origin transaction has sufficient confirmations")),
+        react_1.default.createElement("div", { className: "flex-0 w-2 sm:w-5" }),
+        react_1.default.createElement("div", { className: "flex-1 flex flex-col items-center" },
+            react_1.default.createElement("div", { className: `w-full h-6 flex items-center justify-center bg-blue-500 relative ${getStageClass(types_1.MessageStage.Validated, stage, status)}` },
+                react_1.default.createElement("div", { className: "w-3 h-3 rounded-full bg-white" }),
+                react_1.default.createElement("div", { className: "absolute -top-12 flex flex-col items-center" },
+                    react_1.default.createElement(StageIcon, { Icon: Shield_1.ShieldIcon }),
+                    react_1.default.createElement("div", { className: "w-0.5 h-4 bg-blue-500" })),
+                react_1.default.createElement("div", { className: "absolute -left-3 top-0 h-6" },
+                    react_1.default.createElement(WideChevron_1.WideChevron, { direction: "e", height: "100%", width: "auto", color: "#ffffff" })),
+                react_1.default.createElement("div", { className: "absolute -right-3 top-0 h-6" },
+                    react_1.default.createElement(WideChevron_1.WideChevron, { direction: "e", height: "100%", width: "auto" }))),
+            react_1.default.createElement("h4", { className: "mt-2.5 text-gray-700 text-sm sm:text-base" }, getStageHeader(types_1.MessageStage.Validated, stage, timings, status)),
+            react_1.default.createElement("p", { className: "mt-1 sm:px-4 text-xs text-gray-500 text-center" }, "Validators have signed the message bundle")),
+        react_1.default.createElement("div", { className: "flex-0 w-2 sm:w-5" }),
+        react_1.default.createElement("div", { className: "flex-1 flex flex-col items-center" },
+            react_1.default.createElement("div", { className: `w-full h-6 flex items-center justify-center bg-blue-500 rounded-r relative ${getStageClass(types_1.MessageStage.Relayed, stage, status)}` },
+                react_1.default.createElement("div", { className: "w-3 h-3 rounded-full bg-white" }),
+                react_1.default.createElement("div", { className: "absolute -top-12 flex flex-col items-center" },
+                    react_1.default.createElement(StageIcon, { Icon: Envelope_1.EnvelopeIcon }),
+                    react_1.default.createElement("div", { className: "w-0.5 h-4 bg-blue-500" })),
+                react_1.default.createElement("div", { className: "absolute -left-3 top-0 h-6" },
+                    react_1.default.createElement(WideChevron_1.WideChevron, { direction: "e", height: "100%", width: "auto", color: "#ffffff" }))),
+            react_1.default.createElement("h4", { className: "mt-2.5 text-gray-700 text-sm sm:text-base" }, getStageHeader(types_1.MessageStage.Relayed, stage, timings, status)),
+            react_1.default.createElement("p", { className: "mt-1 sm:px-4 text-xs text-gray-500 text-center" }, "Destination transaction has been confirmed"))));
+}
+exports.MessageTimeline = MessageTimeline;
+function StageIcon({ Icon, size }) {
+    return (react_1.default.createElement("div", { className: "h-9 w-9 flex items-center justify-center rounded-full bg-blue-500" },
+        react_1.default.createElement(Icon, { width: size !== null && size !== void 0 ? size : 14, height: size !== null && size !== void 0 ? size : 14, alt: "", color: color_1.Color.White })));
+}
+function getStageHeader(targetStage, currentStage, timings, status) {
+    let label = '';
+    if (targetStage === types_1.MessageStage.Finalized) {
+        label = currentStage >= targetStage ? 'Finalized' : 'Finalizing';
+    }
+    else if (targetStage === types_1.MessageStage.Validated) {
+        label = currentStage >= targetStage ? 'Validated' : 'Validating';
+    }
+    else if (targetStage === types_1.MessageStage.Relayed) {
+        label = currentStage >= targetStage ? 'Relayed' : 'Relaying';
+    }
+    else if (targetStage === types_1.MessageStage.Sent) {
+        label = currentStage >= targetStage ? 'Sent' : 'Sending';
+    }
+    const timing = timings[targetStage];
+    if (status === types_1.MessageStatus.Failing) {
+        if (targetStage === currentStage + 1)
+            return `${label}: failed`;
+        if (targetStage > currentStage + 1)
+            return label;
+    }
+    if (timing)
+        return `${label}: ${timing} sec`;
+    else
+        return label;
+}
+function getStageClass(targetStage, currentStage, messageStatus) {
+    if (currentStage >= targetStage)
+        return '';
+    if (currentStage === targetStage - 1 && messageStatus !== types_1.MessageStatus.Failing)
+        return 'animate-pulse-slow';
+    return 'opacity-50';
+}
+//# sourceMappingURL=MessageTimeline.js.map

package/dist/messages/MessageTimeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MessageTimeline.js","sourceRoot":"","sources":["../../src/messages/MessageTimeline.tsx"],"names":[],"mappings":"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"}

package/dist/messages/types.d.ts

@@ -0,0 +1,58 @@
+export declare enum MessageStatus {
+    Pending = "pending",
+    Delivered = "delivered",
+    Failing = "failing"
+}
+export interface PartialTransactionReceipt {
+    from: Address;
+    transactionHash: string;
+    blockNumber: number;
+    gasUsed: number;
+    timestamp: number;
+}
+export interface Message {
+    id: string;
+    msgId: string;
+    status: MessageStatus;
+    sender: Address;
+    recipient: Address;
+    originDomainId: number;
+    destinationDomainId: number;
+    originChainId: number;
+    destinationChainId: number;
+    originTimestamp: number;
+    destinationTimestamp?: number;
+    nonce: number;
+    body: string;
+    decodedBody?: string;
+    originTransaction: PartialTransactionReceipt;
+    destinationTransaction?: PartialTransactionReceipt;
+}
+export type ApiMessage = Omit<Message, 'msgId' | 'originChainId' | 'destinationChainId' | 'originTimestamp' | 'destinationTimestamp' | 'decodedBody'>;
+export interface PartialMessage {
+    status: MessageStatus;
+    nonce: number;
+    originDomainId: number;
+    destinationDomainId: number;
+    originTransaction: {
+        blockNumber: number;
+        timestamp: number;
+    };
+    destinationTransaction?: {
+        blockNumber: number;
+        timestamp: number;
+    };
+}
+export declare enum MessageStage {
+    Preparing = 0,
+    Sent = 1,
+    Finalized = 2,
+    Validated = 3,
+    Relayed = 4
+}
+export type StageTimings = {
+    [MessageStage.Finalized]: number;
+    [MessageStage.Validated]: number;
+    [MessageStage.Relayed]: number;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/messages/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/messages/types.ts"],"names":[],"mappings":"AAEA,oBAAY,aAAa;IACvB,OAAO,YAAY;IACnB,SAAS,cAAc;IACvB,OAAO,YAAY;CACpB;AAED,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,OAAO,CAAC;IACd,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,aAAa,CAAC;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,OAAO,CAAC;IACnB,cAAc,EAAE,MAAM,CAAC;IACvB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,aAAa,EAAE,MAAM,CAAC;IACtB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB,EAAE,yBAAyB,CAAC;IAC7C,sBAAsB,CAAC,EAAE,yBAAyB,CAAC;CACpD;AAED,MAAM,MAAM,UAAU,GAAG,IAAI,CAC3B,OAAO,EACL,OAAO,GACP,eAAe,GACf,oBAAoB,GACpB,iBAAiB,GACjB,sBAAsB,GACtB,aAAa,CAChB,CAAC;AAEF,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,aAAa,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,EAAE,MAAM,CAAC;IACvB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,iBAAiB,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9D,sBAAsB,CAAC,EAAE;QAAE,WAAW,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAA;KAAE,CAAC;CACrE;AAED,oBAAY,YAAY;IACtB,SAAS,IAAI;IACb,IAAI,IAAI;IACR,SAAS,IAAI;IACb,SAAS,IAAI;IACb,OAAO,IAAI;CACZ;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IACjC,CAAC,YAAY,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IACjC,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;CAChC,CAAC"}

package/dist/messages/types.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MessageStage = exports.MessageStatus = void 0;
+// TODO DE-DUPE WITH EXPLORER
+// Copied from explorer src/types.ts
+var MessageStatus;
+(function (MessageStatus) {
+    MessageStatus["Pending"] = "pending";
+    MessageStatus["Delivered"] = "delivered";
+    MessageStatus["Failing"] = "failing";
+})(MessageStatus = exports.MessageStatus || (exports.MessageStatus = {}));
+var MessageStage;
+(function (MessageStage) {
+    MessageStage[MessageStage["Preparing"] = 0] = "Preparing";
+    MessageStage[MessageStage["Sent"] = 1] = "Sent";
+    MessageStage[MessageStage["Finalized"] = 2] = "Finalized";
+    MessageStage[MessageStage["Validated"] = 3] = "Validated";
+    MessageStage[MessageStage["Relayed"] = 4] = "Relayed";
+})(MessageStage = exports.MessageStage || (exports.MessageStage = {}));
+//# sourceMappingURL=types.js.map

package/dist/messages/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/messages/types.ts"],"names":[],"mappings":";;;AAAA,6BAA6B;AAC7B,oCAAoC;AACpC,IAAY,aAIX;AAJD,WAAY,aAAa;IACvB,oCAAmB,CAAA;IACnB,wCAAuB,CAAA;IACvB,oCAAmB,CAAA;AACrB,CAAC,EAJW,aAAa,GAAb,qBAAa,KAAb,qBAAa,QAIxB;AAgDD,IAAY,YAMX;AAND,WAAY,YAAY;IACtB,yDAAa,CAAA;IACb,+CAAQ,CAAA;IACR,yDAAa,CAAA;IACb,yDAAa,CAAA;IACb,qDAAW,CAAA;AACb,CAAC,EANW,YAAY,GAAZ,oBAAY,KAAZ,oBAAY,QAMvB"}

package/dist/messages/useMessage.d.ts

@@ -0,0 +1,14 @@
+import { ApiMessage } from './types';
+interface Params {
+    messageId?: string;
+    originTxHash?: string;
+    explorerApiUrl?: string;
+    retryInterval?: number;
+}
+export declare function useMessage({ messageId, originTxHash, explorerApiUrl, retryInterval, }: Params): {
+    data: ApiMessage | null;
+    isLoading: boolean;
+    error: string | null;
+};
+export {};
+//# sourceMappingURL=useMessage.d.ts.map

package/dist/messages/useMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMessage.d.ts","sourceRoot":"","sources":["../../src/messages/useMessage.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,UAAU,EAAiB,MAAM,SAAS,CAAC;AAEpD,UAAU,MAAM;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAID,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,YAAY,EACZ,cAAuC,EACvC,aAAoB,GACrB,EAAE,MAAM;;;;EA6BR"}

package/dist/messages/useMessage.js

@@ -0,0 +1,73 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMessage = void 0;
+const react_1 = require("react");
+const consts_1 = require("../consts");
+const explorers_1 = require("../utils/explorers");
+const useInterval_1 = require("../utils/useInterval");
+const types_1 = require("./types");
+// Queries Explorer API to get data for message
+// Requires either messageId or originTxHash
+function useMessage({ messageId, originTxHash, explorerApiUrl = consts_1.HYPERLANE_EXPLORER_URL, retryInterval = 2000, }) {
+    // Tempting to use react-query here as we did in Explorer but
+    // avoiding for now to keep dependencies for this lib minimal
+    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [data, setData] = (0, react_1.useState)(null);
+    const fetcher = (0, react_1.useCallback)(() => {
+        // Skip if message is already fetched and delivered
+        if ((data === null || data === void 0 ? void 0 : data.status) === types_1.MessageStatus.Delivered)
+            return;
+        setIsLoading(true);
+        fetchMessage(explorerApiUrl, messageId, originTxHash)
+            .then((result) => {
+            setData(result);
+            setError(null);
+        })
+            .catch((e) => setError(e.toString()))
+            .finally(() => setIsLoading(false));
+    }, [messageId, originTxHash, data]);
+    (0, useInterval_1.useInterval)(fetcher, retryInterval);
+    return {
+        data,
+        isLoading,
+        error,
+    };
+}
+exports.useMessage = useMessage;
+function fetchMessage(explorerApiUrl, messageId, originTxHash) {
+    return __awaiter(this, void 0, void 0, function* () {
+        if (!explorerApiUrl)
+            throw new Error('Explorer API URL required');
+        if (!messageId && !originTxHash)
+            throw new Error('Either messageId or originTxHash required');
+        let url = `${explorerApiUrl}?module=message&action=get-messages`;
+        if (messageId)
+            url += `&id=${messageId}`;
+        else if (originTxHash)
+            url += `&origin-tx-hash=${originTxHash}`;
+        const result = yield (0, explorers_1.executeExplorerQuery)(url, 5000);
+        if (result.length > 1) {
+            console.warn('More than one message received, should not occur');
+            return result[0];
+        }
+        else if (result.length === 1) {
+            console.debug('Message data found, id:', result[0].id);
+            return result[0];
+        }
+        else {
+            console.debug('Message data not found');
+            return null;
+        }
+    });
+}
+//# sourceMappingURL=useMessage.js.map

package/dist/messages/useMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMessage.js","sourceRoot":"","sources":["../../src/messages/useMessage.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,iCAA8C;AAE9C,sCAAmD;AACnD,kDAA0D;AAC1D,sDAAmD;AAEnD,mCAAoD;AASpD,+CAA+C;AAC/C,4CAA4C;AAC5C,SAAgB,UAAU,CAAC,EACzB,SAAS,EACT,YAAY,EACZ,cAAc,GAAG,+BAAsB,EACvC,aAAa,GAAG,IAAI,GACb;IACP,6DAA6D;IAC7D,6DAA6D;IAE7D,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAC,IAAI,CAAC,CAAC;IACjD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAgB,IAAI,CAAC,CAAC;IACxD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAoB,IAAI,CAAC,CAAC;IAE1D,MAAM,OAAO,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAC/B,mDAAmD;QACnD,IAAI,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,MAAK,qBAAa,CAAC,SAAS;YAAE,OAAO;QAErD,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,YAAY,CAAC,cAAc,EAAE,SAAS,EAAE,YAAY,CAAC;aAClD,IAAI,CAAC,CAAC,MAAM,EAAE,EAAE;YACf,OAAO,CAAC,MAAM,CAAC,CAAC;YAChB,QAAQ,CAAC,IAAI,CAAC,CAAC;QACjB,CAAC,CAAC;aACD,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;aACpC,OAAO,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC;IACxC,CAAC,EAAE,CAAC,SAAS,EAAE,YAAY,EAAE,IAAI,CAAC,CAAC,CAAC;IAEpC,IAAA,yBAAW,EAAC,OAAO,EAAE,aAAa,CAAC,CAAC;IAEpC,OAAO;QACL,IAAI;QACJ,SAAS;QACT,KAAK;KACN,CAAC;AACJ,CAAC;AAlCD,gCAkCC;AAED,SAAe,YAAY,CACzB,cAAsB,EACtB,SAAkB,EAClB,YAAqB;;QAErB,IAAI,CAAC,cAAc;YAAE,MAAM,IAAI,KAAK,CAAC,2BAA2B,CAAC,CAAC;QAClE,IAAI,CAAC,SAAS,IAAI,CAAC,YAAY;YAAE,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;QAE9F,IAAI,GAAG,GAAG,GAAG,cAAc,qCAAqC,CAAC;QACjE,IAAI,SAAS;YAAE,GAAG,IAAI,OAAO,SAAS,EAAE,CAAC;aACpC,IAAI,YAAY;YAAE,GAAG,IAAI,mBAAmB,YAAY,EAAE,CAAC;QAChE,MAAM,MAAM,GAAG,MAAM,IAAA,gCAAoB,EAAe,GAAG,EAAE,IAAI,CAAC,CAAC;QAEnE,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,EAAE;YACrB,OAAO,CAAC,IAAI,CAAC,kDAAkD,CAAC,CAAC;YACjE,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC;SAClB;aAAM,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC,EAAE;YAC9B,OAAO,CAAC,KAAK,CAAC,yBAAyB,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;YACvD,OAAO,MAAM,CAAC,CAAC,CAAC,CAAC;SAClB;aAAM;YACL,OAAO,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC;YACxC,OAAO,IAAI,CAAC;SACb;IACH,CAAC;CAAA"}

package/dist/messages/useMessageStage.d.ts

@@ -0,0 +1,13 @@
+import { PartialMessage, MessageStage as Stage } from './types';
+interface Params {
+    message: PartialMessage | null | undefined;
+    retryInterval?: number;
+}
+export declare function useMessageStage({ message, retryInterval }: Params): {
+    stage: Stage;
+    timings: {};
+    isLoading: boolean;
+    error: string | null;
+};
+export {};
+//# sourceMappingURL=useMessageStage.d.ts.map

package/dist/messages/useMessageStage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMessageStage.d.ts","sourceRoot":"","sources":["../../src/messages/useMessageStage.ts"],"names":[],"mappings":"AAQA,OAAO,EAAiB,cAAc,EAAE,YAAY,IAAI,KAAK,EAAgB,MAAM,SAAS,CAAC;AAI7F,UAAU,MAAM;IACd,OAAO,EAAE,cAAc,GAAG,IAAI,GAAG,SAAS,CAAC;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,wBAAgB,eAAe,CAAC,EAAE,OAAO,EAAE,aAAoB,EAAE,EAAE,MAAM;;;;;EA4BxE"}