@bvvvp009/hyperstatus

Installation

npm install @bvvvp009/hyperstatus

Usage

Example 1: Normal Use

QueryGraphQL

import { queryGraphQL } from '@bvvvp009/hyperstatus';
const fetchMessages = async () => {
 const params = { search: '0x1234...' };
 const messages = await queryGraphQL(params);
 console.log(messages);
};
fetchMessages();

startPolling

import { startPolling } from '@bvvvp009/hyperstatus';
const pendingMessageIds = ['0x123...', '0x456...']; //tx hash from the 
const handleMessages = (messages) => {
 messages.forEach(message => {
 console.log(`Message ${message.id} status: ${message.status}`);
 });
};
// Start polling every 60 seconds
startPolling(pendingMessageIds, 60000, handleMessages);

Example 2: With React and React-Toastify

import React, { useState, useEffect } from 'react';
import { queryGraphQL, startPolling } from '@bvvvp009/hyperstatus';
import { toast, ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
function App() {
queryGraphQL({ search:'0xbf28e675bcc8fd109cb4162d1581c27d171bae36d762635a6e5dc8533b232d89' }).then(initialResults => {
// setresult(initialResults)
 // Start polling for pending messages
 console.log('initials results',initialResults)
 const pendingMessageIds = initialResults
 .filter(msg => msg.status === 'Pending' && !msg.isNonEVM)
 .map(msg => msg.id);
console.log("pending",pendingMessageIds)
 startPolling(pendingMessageIds,40000, (updatedMessages) => {
 console.log('Updated messages:', updatedMessages);
 // Handle updated messages (e.g., update UI, show notifications, etc.)
 const Msg = ({ closeToast, toastProps }) => (
 <div>
 <div>Message status {updatedMessages[0]?.status}</div>
 <div>From:{updatedMessages[0]?.from || 'Unknown Chain'}</div>
 <div>To:{updatedMessages[0]?.to || 'Unknown Chain'}</div>

 </div>
 );
 toast(<Msg/>,{toastId:updatedMessages[0]?.details?.msg_id})
 
 });
});
 return (
 <div>
 
 <ToastContainer limit={3}/>
 </div>
 );
}
export default App;

API