View History

1"use client";
2 
3import {
4  Dialog,
5  DialogContent,
6  DialogHeader,
7  DialogTrigger,
8  DialogTitle,
9} from "@/registry/avail-widgets/ui/dialog";
10import { Clock, LoaderPinwheel, SquareArrowOutUpRight } from "lucide-react";
11import { TOKEN_METADATA } from "../common";
12import { type IntentRecord } from "@avail-project/nexus-core";
13import { cn } from "@/lib/utils";
14import { Badge } from "@/registry/avail-widgets/ui/badge";
15import { Button } from "@/registry/avail-widgets/ui/button";
16import { Card } from "@/registry/avail-widgets/ui/card";
17import { Separator } from "@/registry/avail-widgets/ui/separator";
18import useViewHistory from "./hooks/useViewHistory";
19import { useEffect, useState } from "react";
20 
21const TOKEN_ICON_FALLBACKS: Record<string, string> = {
22  USDM:
23    "https://raw.githubusercontent.com/availproject/nexus-assets/main/tokens/usdm/logo.png",
24};
25 
26function resolveTokenMetadata(symbol?: string) {
27  const normalized = symbol?.trim() ?? "";
28  if (!normalized) {
29    return { icon: "", name: "token" };
30  }
31 
32  const upper = normalized.toUpperCase();
33  const normalizedMetadata =
34    TOKEN_METADATA[normalized as keyof typeof TOKEN_METADATA];
35  const upperMetadata = TOKEN_METADATA[upper as keyof typeof TOKEN_METADATA];
36 
37  const icon =
38    normalizedMetadata?.logo ||
39    upperMetadata?.logo ||
40    TOKEN_ICON_FALLBACKS[normalized] ||
41    TOKEN_ICON_FALLBACKS[upper] ||
42    "";
43  const name = normalizedMetadata?.name || upperMetadata?.name || upper;
44 
45  return { icon, name };
46}
47 
48const SourceChains = ({ sources }: { sources: IntentRecord["sources"] }) => {
49  const sourceList = sources ?? [];
50  return (
51    <div className="flex items-center">
52      {sourceList.map((source, index) => (
53        <div
54          key={source?.chain?.id}
55          className={cn(
56            "rounded-full transition-transform hover:scale-110",
57            index > 0 && "-ml-2"
58          )}
59          style={{ zIndex: sourceList.length - index }}
60        >
61          <img
62            src={source?.chain?.logo}
63            alt={source?.chain?.name}
64            width={24}
65            height={24}
66            className="rounded-full"
67          />
68        </div>
69      ))}
70    </div>
71  );
72};
73 
74const StatusBadge = ({ status }: { status: string }) => {
75  const getVariant = (status: string) => {
76    if (status === "Fulfilled") {
77      return "default";
78    } else if (status === "Deposited") {
79      return "secondary";
80    } else if (status === "Refunded") {
81      return "outline";
82// … truncated