- {body}
-
+ >
+ ) : (
+
+
+ {status === MessageStatus.Failing
+ ? 'Destination chain transaction currently failing'
+ : 'Destination chain transaction still in progress'}
+
-
- >
+ )}
+
);
}
-function StatusHeader({
- text,
- fetching,
- children,
-}: PropsWithChildren<{ text: string; fetching: boolean }>) {
+interface DetailsCardProps {
+ originChainId: number;
+ destinationChainId: number;
+ sender: string;
+ recipient: string;
+ body: string;
+ shouldBlur: boolean;
+}
+
+function DetailsCard({
+ originChainId,
+ destinationChainId,
+ sender,
+ recipient,
+ body,
+ shouldBlur,
+}: DetailsCardProps) {
return (
-
-
{text}
- {fetching || !children ? (
-
-
-
-
+
+
+
+
- ) : (
- children
- )}
-
+
+
+ Message Details
+
+
+
+
+
+
+
+
+
+ {body}
+
+
+
+
);
}
diff --git a/src/utils/chains.ts b/src/utils/chains.ts
index ccf4450..2f77262 100644
--- a/src/utils/chains.ts
+++ b/src/utils/chains.ts
@@ -1,5 +1,6 @@
import { allChains } from '../consts/networksConfig';
-export function getChainName(chainId: number) {
+export function getChainName(chainId?: number) {
+ if (!chainId) return 'unknown';
return allChains.find((c) => c.id === chainId)?.name || 'unknown';
}
diff --git a/src/utils/time.ts b/src/utils/time.ts
index 7791efd..224e2ec 100644
--- a/src/utils/time.ts
+++ b/src/utils/time.ts
@@ -26,3 +26,8 @@ export function getHumanReadableTimeString(timestamp: number) {
const date = new Date(timestamp);
return date.toLocaleDateString();
}
+
+export function getDateTimeString(timestamp: number) {
+ const date = new Date(timestamp);
+ return `${date.toLocaleTimeString()} ${date.toLocaleDateString()}`;
+}