@hyperlane-xyz/widgets 1.0.0-beta1

package/dist/messages/useMessageStage.js

@@ -0,0 +1,149 @@
+"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.useMessageStage = void 0;
+const react_1 = require("react");
+const sdk_1 = require("@hyperlane-xyz/sdk");
+const explorers_1 = require("../utils/explorers");
+const timeout_1 = require("../utils/timeout");
+const useInterval_1 = require("../utils/useInterval");
+const types_1 = require("./types");
+const VALIDATION_TIME_EST = 5;
+function useMessageStage({ message, 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)(() => {
+        if (!message)
+            return;
+        setIsLoading(true);
+        fetchMessageState(message)
+            .then((result) => {
+            setData(result);
+            setError(null);
+        })
+            .catch((e) => setError(e.toString()))
+            .finally(() => setIsLoading(false));
+    }, [message]);
+    (0, useInterval_1.useInterval)(fetcher, retryInterval);
+    return {
+        stage: (data === null || data === void 0 ? void 0 : data.stage) || message ? types_1.MessageStage.Sent : types_1.MessageStage.Preparing,
+        timings: (data === null || data === void 0 ? void 0 : data.timings) || {},
+        isLoading,
+        error,
+    };
+}
+exports.useMessageStage = useMessageStage;
+function fetchMessageState(message) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const { status, nonce, originDomainId: originChainId, // TODO avoid assuming domain === chain
+        destinationDomainId: destChainId, originTransaction, destinationTransaction, } = message;
+        const { blockNumber: originBlockNumber, timestamp: originTimestamp } = originTransaction;
+        const destTimestamp = destinationTransaction === null || destinationTransaction === void 0 ? void 0 : destinationTransaction.timestamp;
+        const relayEstimate = Math.floor(getBlockTimeEst(destChainId) * 1.5);
+        const finalityBlocks = getFinalityBlocks(originChainId);
+        const finalityEstimate = finalityBlocks * getBlockTimeEst(originChainId);
+        if (status === types_1.MessageStatus.Delivered && destTimestamp) {
+            // For delivered messages, just to rough estimates for stages
+            // This saves us from making extra explorer calls. May want to revisit in future
+            const totalDuration = Math.round((destTimestamp - originTimestamp) / 1000);
+            const finalityDuration = Math.max(Math.min(finalityEstimate, totalDuration - VALIDATION_TIME_EST), 1);
+            const remaining = totalDuration - finalityDuration;
+            const validateDuration = Math.max(Math.min(Math.round(remaining * 0.25), VALIDATION_TIME_EST), 1);
+            const relayDuration = Math.max(remaining - validateDuration, 1);
+            return {
+                stage: types_1.MessageStage.Relayed,
+                timings: {
+                    [types_1.MessageStage.Finalized]: finalityDuration,
+                    [types_1.MessageStage.Validated]: validateDuration,
+                    [types_1.MessageStage.Relayed]: relayDuration,
+                },
+            };
+        }
+        const latestNonce = yield tryFetchLatestNonce(originChainId);
+        if (latestNonce && latestNonce >= nonce) {
+            return {
+                stage: types_1.MessageStage.Validated,
+                timings: {
+                    [types_1.MessageStage.Finalized]: finalityEstimate,
+                    [types_1.MessageStage.Validated]: VALIDATION_TIME_EST,
+                    [types_1.MessageStage.Relayed]: relayEstimate,
+                },
+            };
+        }
+        const latestBlock = yield tryFetchChainLatestBlock(originChainId);
+        const finalizedBlock = originBlockNumber + finalityBlocks;
+        if (latestBlock && parseInt(latestBlock.number.toString()) > finalizedBlock) {
+            return {
+                stage: types_1.MessageStage.Finalized,
+                timings: {
+                    [types_1.MessageStage.Finalized]: finalityEstimate,
+                    [types_1.MessageStage.Validated]: VALIDATION_TIME_EST,
+                    [types_1.MessageStage.Relayed]: relayEstimate,
+                },
+            };
+        }
+        return {
+            stage: types_1.MessageStage.Sent,
+            timings: {
+                [types_1.MessageStage.Finalized]: finalityEstimate,
+                [types_1.MessageStage.Validated]: VALIDATION_TIME_EST,
+                [types_1.MessageStage.Relayed]: relayEstimate,
+            },
+        };
+    });
+}
+function getFinalityBlocks(chainId) {
+    var _a;
+    const finalityBlocks = ((_a = sdk_1.chainIdToMetadata[chainId]) === null || _a === void 0 ? void 0 : _a.blocks.confirmations) || 0;
+    return Math.max(finalityBlocks, 1);
+}
+function getBlockTimeEst(chainId) {
+    var _a;
+    return ((_a = sdk_1.chainIdToMetadata[chainId]) === null || _a === void 0 ? void 0 : _a.blocks.estimateBlockTime) || 3;
+}
+function tryFetchChainLatestBlock(chainId) {
+    return __awaiter(this, void 0, void 0, function* () {
+        console.debug(`Attempting to fetch latest block for:`, chainId);
+        try {
+            const block = yield (0, explorers_1.queryExplorerForBlock)(chainId, 'latest');
+            return block;
+        }
+        catch (error) {
+            console.error('Error fetching latest block', error);
+            return null;
+        }
+    });
+}
+function tryFetchLatestNonce(chainId) {
+    return __awaiter(this, void 0, void 0, function* () {
+        console.debug(`Attempting to fetch nonce for:`, chainId);
+        try {
+            const response = yield (0, timeout_1.fetchWithTimeout)('/api/latest-nonce', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ chainId }),
+            }, 3000);
+            const result = yield response.json();
+            console.debug(`Found nonce:`, result.nonce);
+            return result.nonce;
+        }
+        catch (error) {
+            console.error('Error fetching nonce', error);
+            return null;
+        }
+    });
+}
+//# sourceMappingURL=useMessageStage.js.map

package/dist/messages/useMessageStage.js.map

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

package/dist/messages/useMessageTimeline.d.ts

@@ -0,0 +1,15 @@
+interface Params {
+    messageId?: string;
+    originTxHash?: string;
+    explorerApiUrl?: string;
+    retryInterval?: number;
+}
+export declare function useMessageTimeline(params: Params): {
+    message: import("./types").ApiMessage | null;
+    stage: import("./types").MessageStage;
+    timings: {};
+    error: string | null;
+    isLoading: boolean;
+};
+export {};
+//# sourceMappingURL=useMessageTimeline.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMessageTimeline.d.ts","sourceRoot":"","sources":["../../src/messages/useMessageTimeline.ts"],"names":[],"mappings":"AAGA,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;AAED,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,MAAM;;;;;;EAehD"}

package/dist/messages/useMessageTimeline.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMessageTimeline = void 0;
+const useMessage_1 = require("./useMessage");
+const useMessageStage_1 = require("./useMessageStage");
+function useMessageTimeline(params) {
+    const { data: message, error: msgError, isLoading: isMsgLoading } = (0, useMessage_1.useMessage)(params);
+    const { stage, timings, error: stageError, isLoading: isStageLoading, } = (0, useMessageStage_1.useMessageStage)({ message, retryInterval: params.retryInterval });
+    return {
+        message,
+        stage,
+        timings,
+        error: msgError || stageError,
+        isLoading: isMsgLoading || isStageLoading,
+    };
+}
+exports.useMessageTimeline = useMessageTimeline;
+//# sourceMappingURL=useMessageTimeline.js.map

package/dist/messages/useMessageTimeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMessageTimeline.js","sourceRoot":"","sources":["../../src/messages/useMessageTimeline.ts"],"names":[],"mappings":";;;AAAA,6CAA0C;AAC1C,uDAAoD;AASpD,SAAgB,kBAAkB,CAAC,MAAc;IAC/C,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,IAAA,uBAAU,EAAC,MAAM,CAAC,CAAC;IACvF,MAAM,EACJ,KAAK,EACL,OAAO,EACP,KAAK,EAAE,UAAU,EACjB,SAAS,EAAE,cAAc,GAC1B,GAAG,IAAA,iCAAe,EAAC,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,CAAC,aAAa,EAAE,CAAC,CAAC;IACtE,OAAO;QACL,OAAO;QACP,KAAK;QACL,OAAO;QACP,KAAK,EAAE,QAAQ,IAAI,UAAU;QAC7B,SAAS,EAAE,YAAY,IAAI,cAAc;KAC1C,CAAC;AACJ,CAAC;AAfD,gDAeC"}

package/dist/styles.css

@@ -0,0 +1 @@
+/*! tailwindcss v3.2.4 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Helvetica,Arial,sans-serif;font-feature-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#025aa180;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.absolute{position:absolute}.relative{position:relative}.-top-12{top:-3rem}.-right-3{right:-.75rem}.top-0{top:0}.-left-3{left:-.75rem}.mt-2\.5{margin-top:.625rem}.mt-2{margin-top:.5rem}.mt-1{margin-top:.25rem}.block{display:block}.\!block{display:block!important}.flex{display:flex}.h-6{height:1.5rem}.h-3{height:.75rem}.h-4{height:1rem}.h-9{height:2.25rem}.w-full{width:100%}.w-3{width:.75rem}.w-0\.5{width:.125rem}.w-0{width:0}.w-2{width:.5rem}.w-9{width:2.25rem}.flex-1{flex:1 1 0%}.-rotate-90{--tw-rotate:-90deg}.-rotate-90,.rotate-90{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-90{--tw-rotate:90deg}.rotate-180{--tw-rotate:180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes pulse{50%{opacity:.5}}.animate-pulse-slow{animation:pulse infinite; 3s cubic-bezier(.4,0,.6,1)}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-full{border-radius:9999px}.rounded{border-radius:.3rem}.rounded-l{border-top-left-radius:.3rem;border-bottom-left-radius:.3rem}.rounded-r{border-top-right-radius:.3rem;border-bottom-right-radius:.3rem}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity))}.bg-blue-500{--tw-bg-opacity:1;background-color:rgb(2 90 161/var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.pt-14{padding-top:3.5rem}.pb-1{padding-bottom:.25rem}.text-center{text-align:center}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity))}.opacity-50{opacity:.5}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}@media (min-width:640px){.sm\:w-5{width:1.25rem}.sm\:px-2{padding-left:.5rem;padding-right:.5rem}.sm\:px-4{padding-left:1rem;padding-right:1rem}.sm\:text-base{font-size:1rem;line-height:1.5rem}}

package/dist/utils/explorers.d.ts

@@ -0,0 +1,19 @@
+export interface ExplorerQueryResponse<R> {
+    status: string;
+    message: string;
+    result: R;
+}
+export declare function getExplorerUrl(chainId: number): string | null;
+export declare function getExplorerApiUrl(chainId: number): string | null;
+export declare function getTxExplorerUrl(chainId: number, hash?: string): string | null;
+export declare function queryExplorer<P>(chainId: number, path: string, apiKey?: string, timeout?: number): Promise<NonNullable<P>>;
+export declare function executeExplorerQuery<P>(url: string, timeout?: number): Promise<NonNullable<P>>;
+interface PartialBlock {
+    hash: string;
+    number: number;
+    timestamp: number;
+    nonce: string;
+}
+export declare function queryExplorerForBlock(chainId: number, blockNumber?: number | string): Promise<PartialBlock>;
+export {};
+//# sourceMappingURL=explorers.d.ts.map

package/dist/utils/explorers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"explorers.d.ts","sourceRoot":"","sources":["../../src/utils/explorers.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACtC,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,CAAC,CAAC;CACX;AAED,wBAAgB,cAAc,CAAC,OAAO,EAAE,MAAM,iBAI7C;AAED,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,MAAM,iBAIhD;AAED,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,iBAI9D;AAED,wBAAsB,aAAa,CAAC,CAAC,EACnC,OAAO,EAAE,MAAM,EACf,IAAI,EAAE,MAAM,EACZ,MAAM,CAAC,EAAE,MAAM,EACf,OAAO,CAAC,EAAE,MAAM,2BAcjB;AAED,wBAAsB,oBAAoB,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,2BAa1E;AAED,UAAU,YAAY;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAsB,qBAAqB,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,yBAWzF"}

package/dist/utils/explorers.js

@@ -0,0 +1,81 @@
+"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.queryExplorerForBlock = exports.executeExplorerQuery = exports.queryExplorer = exports.getTxExplorerUrl = exports.getExplorerApiUrl = exports.getExplorerUrl = void 0;
+const sdk_1 = require("@hyperlane-xyz/sdk");
+const timeout_1 = require("./timeout");
+function getExplorerUrl(chainId) {
+    var _a;
+    const chain = sdk_1.chainIdToMetadata[chainId];
+    if (!((_a = chain === null || chain === void 0 ? void 0 : chain.blockExplorers) === null || _a === void 0 ? void 0 : _a.length))
+        return null;
+    return chain.blockExplorers[0].url;
+}
+exports.getExplorerUrl = getExplorerUrl;
+function getExplorerApiUrl(chainId) {
+    var _a;
+    const chain = sdk_1.chainIdToMetadata[chainId];
+    if (!((_a = chain === null || chain === void 0 ? void 0 : chain.blockExplorers) === null || _a === void 0 ? void 0 : _a.length))
+        return null;
+    return chain.blockExplorers[0].apiUrl || chain.blockExplorers[0].url;
+}
+exports.getExplorerApiUrl = getExplorerApiUrl;
+function getTxExplorerUrl(chainId, hash) {
+    const baseUrl = getExplorerUrl(chainId);
+    if (!hash || !baseUrl)
+        return null;
+    return `${baseUrl}/tx/${hash}`;
+}
+exports.getTxExplorerUrl = getTxExplorerUrl;
+function queryExplorer(chainId, path, apiKey, timeout) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const baseUrl = getExplorerApiUrl(chainId);
+        if (!baseUrl)
+            throw new Error(`No URL found for explorer for chain ${chainId}`);
+        let url = `${baseUrl}/${path}`;
+        console.debug('Querying explorer url:', url);
+        if (apiKey) {
+            url += `&apikey=${apiKey}`;
+        }
+        const result = yield executeExplorerQuery(url, timeout);
+        return result;
+    });
+}
+exports.queryExplorer = queryExplorer;
+function executeExplorerQuery(url, timeout) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const response = yield (0, timeout_1.fetchWithTimeout)(url, undefined, timeout);
+        if (!response.ok) {
+            throw new Error(`Fetch response not okay: ${response.status}`);
+        }
+        const json = (yield response.json());
+        if (!json.result) {
+            const responseText = yield response.text();
+            throw new Error(`Invalid result format: ${responseText}`);
+        }
+        return json.result;
+    });
+}
+exports.executeExplorerQuery = executeExplorerQuery;
+function queryExplorerForBlock(chainId, blockNumber) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const path = `api?module=proxy&action=eth_getBlockByNumber&tag=${blockNumber || 'latest'}&boolean=false`;
+        const block = yield queryExplorer(chainId, path);
+        if (!block || parseInt(block.number.toString()) < 0) {
+            const msg = 'Invalid block result';
+            console.error(msg, JSON.stringify(block), path);
+            throw new Error(msg);
+        }
+        return block;
+    });
+}
+exports.queryExplorerForBlock = queryExplorerForBlock;
+//# sourceMappingURL=explorers.js.map

package/dist/utils/explorers.js.map

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

package/dist/utils/timeout.d.ts

@@ -0,0 +1,2 @@
+export declare function fetchWithTimeout(resource: RequestInfo, options?: RequestInit, timeout?: number): Promise<Response>;
+//# sourceMappingURL=timeout.d.ts.map

package/dist/utils/timeout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeout.d.ts","sourceRoot":"","sources":["../../src/utils/timeout.ts"],"names":[],"mappings":"AAAA,wBAAsB,gBAAgB,CACpC,QAAQ,EAAE,WAAW,EACrB,OAAO,CAAC,EAAE,WAAW,EACrB,OAAO,SAAQ,qBAUhB"}

package/dist/utils/timeout.js

@@ -0,0 +1,23 @@
+"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.fetchWithTimeout = void 0;
+function fetchWithTimeout(resource, options, timeout = 10000) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const controller = new AbortController();
+        const id = setTimeout(() => controller.abort(), timeout);
+        const response = yield fetch(resource, Object.assign(Object.assign({}, options), { signal: controller.signal }));
+        clearTimeout(id);
+        return response;
+    });
+}
+exports.fetchWithTimeout = fetchWithTimeout;
+//# sourceMappingURL=timeout.js.map

package/dist/utils/timeout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeout.js","sourceRoot":"","sources":["../../src/utils/timeout.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,SAAsB,gBAAgB,CACpC,QAAqB,EACrB,OAAqB,EACrB,OAAO,GAAG,KAAK;;QAEf,MAAM,UAAU,GAAG,IAAI,eAAe,EAAE,CAAC;QACzC,MAAM,EAAE,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,EAAE,EAAE,OAAO,CAAC,CAAC;QACzD,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,kCAChC,OAAO,KACV,MAAM,EAAE,UAAU,CAAC,MAAM,IACzB,CAAC;QACH,YAAY,CAAC,EAAE,CAAC,CAAC;QACjB,OAAO,QAAQ,CAAC;IAClB,CAAC;CAAA;AAbD,4CAaC"}

package/dist/utils/useInterval.d.ts

@@ -0,0 +1,2 @@
+export declare function useInterval(callback: () => void, delay: number | null): void;
+//# sourceMappingURL=useInterval.d.ts.map

package/dist/utils/useInterval.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInterval.d.ts","sourceRoot":"","sources":["../../src/utils/useInterval.ts"],"names":[],"mappings":"AAMA,wBAAgB,WAAW,CAAC,QAAQ,EAAE,MAAM,IAAI,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,QAoBrE"}

package/dist/utils/useInterval.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInterval = void 0;
+const react_1 = require("react");
+const react_2 = require("react");
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? react_2.useLayoutEffect : react_1.useEffect;
+// https://usehooks-typescript.com/react-hook/use-interval
+function useInterval(callback, delay) {
+    const savedCallback = (0, react_1.useRef)(callback);
+    // Remember the latest callback if it changes.
+    useIsomorphicLayoutEffect(() => {
+        savedCallback.current = callback;
+    }, [callback]);
+    // Set up the interval.
+    (0, react_1.useEffect)(() => {
+        // Don't schedule if no delay is specified.
+        // Note: 0 is a valid value for delay.
+        if (!delay && delay !== 0) {
+            return;
+        }
+        const id = setInterval(() => savedCallback.current(), delay);
+        return () => clearInterval(id);
+    }, [delay]);
+}
+exports.useInterval = useInterval;
+//# sourceMappingURL=useInterval.js.map

package/dist/utils/useInterval.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInterval.js","sourceRoot":"","sources":["../../src/utils/useInterval.ts"],"names":[],"mappings":";;;AAAA,iCAA0C;AAC1C,iCAAwC;AAExC,MAAM,yBAAyB,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,uBAAe,CAAC,CAAC,CAAC,iBAAS,CAAC;AAE9F,0DAA0D;AAC1D,SAAgB,WAAW,CAAC,QAAoB,EAAE,KAAoB;IACpE,MAAM,aAAa,GAAG,IAAA,cAAM,EAAC,QAAQ,CAAC,CAAC;IAEvC,8CAA8C;IAC9C,yBAAyB,CAAC,GAAG,EAAE;QAC7B,aAAa,CAAC,OAAO,GAAG,QAAQ,CAAC;IACnC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,uBAAuB;IACvB,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,2CAA2C;QAC3C,sCAAsC;QACtC,IAAI,CAAC,KAAK,IAAI,KAAK,KAAK,CAAC,EAAE;YACzB,OAAO;SACR;QAED,MAAM,EAAE,GAAG,WAAW,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,OAAO,EAAE,EAAE,KAAK,CAAC,CAAC;QAE7D,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;IACjC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;AACd,CAAC;AApBD,kCAoBC"}

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@hyperlane-xyz/widgets",
+  "description": "Common react components for Hyperlane projects",
+  "version": "1.0.0-beta1",
+  "peerDependencies": {
+    "@hyperlane-xyz/sdk": "1.0.0",
+    "react": "^18",
+    "react-dom": "^18"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.12",
+    "@hyperlane-xyz/sdk": "1.0.0",
+    "@mdx-js/react": "^1.6.22",
+    "@storybook/addon-actions": "^6.5.15",
+    "@storybook/addon-docs": "^6.5.15",
+    "@storybook/addon-essentials": "^6.5.15",
+    "@storybook/addon-interactions": "^6.5.15",
+    "@storybook/addon-links": "^6.5.15",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/builder-webpack4": "^6.5.15",
+    "@storybook/manager-webpack4": "^6.5.15",
+    "@storybook/react": "^6.5.15",
+    "@storybook/testing-library": "^0.0.13",
+    "@trivago/prettier-plugin-sort-imports": "^3.2.0",
+    "@types/node": "^18.11.18",
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
+    "@typescript-eslint/eslint-plugin": "^5.27.0",
+    "@typescript-eslint/parser": "^5.27.0",
+    "babel-loader": "^8.3.0",
+    "eslint": "^8.16.0",
+    "eslint-config-prettier": "^8.5.0",
+    "postcss": "^8.4.21",
+    "prettier": "^2.4.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwindcss": "^3.2.4",
+    "ts-node": "^10.8.0",
+    "typescript": "^4.7.2"
+  },
+  "files": [
+    "/dist"
+  ],
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "homepage": "https://www.hyperlane.xyz",
+  "keywords": [
+    "Hyperlane",
+    "Widgets",
+    "React",
+    "Components",
+    "Typescript"
+  ],
+  "license": "Apache-2.0",
+  "packageManager": "yarn@3.2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/hyperlane-xyz/hyperlane-widgets"
+  },
+  "scripts": {
+    "build": "yarn build:ts && yarn build:css",
+    "build:ts": "tsc",
+    "build:css": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --minify",
+    "clean": "rm -rf dist cache",
+    "lint": "eslint . --ext .ts",
+    "prettier": "prettier --write ./src",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
+  }
+}