|
|
@ -20,6 +20,7 @@ import { useInterval } from '../../utils/timeout'; |
|
|
|
import { PLACEHOLDER_MESSAGES } from './placeholderMessages'; |
|
|
|
import { PLACEHOLDER_MESSAGES } from './placeholderMessages'; |
|
|
|
import { parseMessageQueryResult } from './query'; |
|
|
|
import { parseMessageQueryResult } from './query'; |
|
|
|
import { MessagesQueryResult } from './types'; |
|
|
|
import { MessagesQueryResult } from './types'; |
|
|
|
|
|
|
|
import { getTxExplorerLink } from './utils'; |
|
|
|
|
|
|
|
|
|
|
|
const AUTO_REFRESH_DELAY = 10000; |
|
|
|
const AUTO_REFRESH_DELAY = 10000; |
|
|
|
|
|
|
|
|
|
|
@ -44,6 +45,14 @@ export function MessageDetails({ messageId }: { messageId: string }) { |
|
|
|
originTransaction, |
|
|
|
originTransaction, |
|
|
|
destinationTransaction, |
|
|
|
destinationTransaction, |
|
|
|
} = message; |
|
|
|
} = message; |
|
|
|
|
|
|
|
const originTxExplorerLink = getTxExplorerLink( |
|
|
|
|
|
|
|
originChainId, |
|
|
|
|
|
|
|
originTransaction?.transactionHash, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
const destinationTxExplorerLink = getTxExplorerLink( |
|
|
|
|
|
|
|
destinationChainId, |
|
|
|
|
|
|
|
destinationTransaction?.transactionHash, |
|
|
|
|
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
const { bannerClassName, setBannerClassName } = useBackgroundBanner(); |
|
|
|
const { bannerClassName, setBannerClassName } = useBackgroundBanner(); |
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
@ -141,14 +150,16 @@ export function MessageDetails({ messageId }: { messageId: string }) { |
|
|
|
displayWidth="w-44 sm:w-56" |
|
|
|
displayWidth="w-44 sm:w-56" |
|
|
|
blurValue={shouldBlur} |
|
|
|
blurValue={shouldBlur} |
|
|
|
/> |
|
|
|
/> |
|
|
|
|
|
|
|
{originTxExplorerLink && ( |
|
|
|
<a |
|
|
|
<a |
|
|
|
className="block text-sm text-gray-500 pl-px underline" |
|
|
|
className="block text-sm text-gray-500 pl-px underline" |
|
|
|
href="TODO" |
|
|
|
href={originTxExplorerLink} |
|
|
|
target="_blank" |
|
|
|
target="_blank" |
|
|
|
rel="noopener noreferrer" |
|
|
|
rel="noopener noreferrer" |
|
|
|
> |
|
|
|
> |
|
|
|
View in block explorer |
|
|
|
View in block explorer |
|
|
|
</a> |
|
|
|
</a> |
|
|
|
|
|
|
|
)} |
|
|
|
</Card> |
|
|
|
</Card> |
|
|
|
<Card classes="flex-1 min-w-fit space-y-4"> |
|
|
|
<Card classes="flex-1 min-w-fit space-y-4"> |
|
|
|
<div className="flex items-center justify-between"> |
|
|
|
<div className="flex items-center justify-between"> |
|
|
@ -191,14 +202,16 @@ export function MessageDetails({ messageId }: { messageId: string }) { |
|
|
|
displayWidth="w-44 sm:w-56" |
|
|
|
displayWidth="w-44 sm:w-56" |
|
|
|
blurValue={shouldBlur} |
|
|
|
blurValue={shouldBlur} |
|
|
|
/> |
|
|
|
/> |
|
|
|
|
|
|
|
{destinationTxExplorerLink && ( |
|
|
|
<a |
|
|
|
<a |
|
|
|
className="block text-sm text-gray-500 pl-px underline" |
|
|
|
className="block text-sm text-gray-500 pl-px underline" |
|
|
|
href="TODO" |
|
|
|
href={destinationTxExplorerLink} |
|
|
|
target="_blank" |
|
|
|
target="_blank" |
|
|
|
rel="noopener noreferrer" |
|
|
|
rel="noopener noreferrer" |
|
|
|
> |
|
|
|
> |
|
|
|
View in block explorer |
|
|
|
View in block explorer |
|
|
|
</a> |
|
|
|
</a> |
|
|
|
|
|
|
|
)} |
|
|
|
</> |
|
|
|
</> |
|
|
|
) : ( |
|
|
|
) : ( |
|
|
|
<div className="flex flex-col items-center py-6"> |
|
|
|
<div className="flex flex-col items-center py-6"> |
|
|
|