Merge pull request #399 from modularcloud/fredkiss3/fe-103-add-verifi…

…ed-checkmarks-on-dymension-homepage

Fredkiss3/fe 103 add verified checkmarks on dymension homepage

apps/web/ui/network-widgets/widgets/ibc-transfert-event-card.tsx

@@ -6,6 +6,7 @@ import {
   ChevronDoubleDown,
   Clock,
   CornerUpRight,
+  FancyCheck,
   LinkOut,
 } from "~/ui/icons";
 import { ClientTime } from "~/ui/client-time";
@@ -19,6 +20,7 @@ import { jsonFetch } from "~/lib/shared-utils";
 import * as HoverCard from "@radix-ui/react-hover-card";
 import { Tooltip } from "~/ui/tooltip";
 import { useNetworkStatus } from "~/ui/search/use-network-status";
+import { useSearchOptionsContext } from "~/ui/search-options-context";
 
 export type IBCTransferEventCardProps = {
   event: IBCTransferEvent;
@@ -102,6 +104,20 @@ export function IBCTransferEventCard({
   const targetChainHealthStatus =
     targetNetworkStatus?.[event.to.chainSlug]?.healthy ?? null;
 
+  const allNetworkChains = useSearchOptionsContext();
+
+  const values = allNetworkChains.flat();
+  const foundNetworks = values.filter(
+    (network) =>
+      network.slug === event.from.chainSlug ||
+      network.slug === event.to.chainSlug,
+  );
+
+  const fromChain = foundNetworks.find(
+    (net) => net.slug === event.from.chainSlug,
+  );
+  const toChain = foundNetworks.find((net) => net.slug === event.to.chainSlug);
+
   return (
     <Card className="p-0 grid w-full shadow-none">
       <div className="p-5 rounded-t-lg flex items-start justify-between">
@@ -260,6 +276,19 @@ export function IBCTransferEventCard({
                 {event.from.chainName}
               </p>
 
+              {fromChain?.verified && (
+                <span
+                  style={{
+                    "--color-primary": fromChain.brandColor,
+                  }}
+                >
+                  <FancyCheck
+                    className="text-primary h-5 w-5 flex-none"
+                    aria-hidden="true"
+                  />
+                </span>
+              )}
+
               <div
                 className={cn(
                   "opacity-100 relative flex items-center justify-center",
@@ -350,6 +379,19 @@ export function IBCTransferEventCard({
                 {event.to.chainName}
               </p>
 
+              {toChain?.verified && (
+                <span
+                  style={{
+                    "--color-primary": toChain.brandColor,
+                  }}
+                >
+                  <FancyCheck
+                    className="text-primary h-5 w-5 flex-none"
+                    aria-hidden="true"
+                  />
+                </span>
+              )}
+
               <div
                 className={cn(
                   "opacity-100 relative flex items-center justify-center",