From 0426fe5c6ee272ea23b6e0bb157079827763d823 Mon Sep 17 00:00:00 2001 From: MananTank Date: Tue, 29 Jul 2025 17:36:26 +0000 Subject: [PATCH] Dashboard: Migrate contract/events from chakra to tailwind (#7742) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ## PR-Codex overview This PR refactors the `EventsFeed` component in `events-feed.tsx`, updating its structure and styling while changing the imported UI components to a custom design system. It enhances the user interface and maintains the same functionality. ### Detailed summary - Replaced Chakra UI components with custom components from the UI library. - Modified the `EventsFeed` component to use `function` syntax instead of `React.FC`. - Updated the layout from `Flex` and `SimpleGrid` to `div` with Tailwind CSS classes. - Changed event selection handling to use `Select` from the custom library. - Refined the `EventsFeedItem` component structure and styling. - Updated the way transaction data is displayed with `CopyTextButton`. - Adjusted the accordion implementation to use custom `Accordion` components. - Removed unused imports and props for cleaner code. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` --- .../[contractAddress]/events/events-feed.tsx | 507 +++++++----------- 1 file changed, 204 insertions(+), 303 deletions(-) diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/events/events-feed.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/events/events-feed.tsx index 769f5b355fe..ddae285b7be 100644 --- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/events/events-feed.tsx +++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/events/events-feed.tsx @@ -1,58 +1,47 @@ "use client"; -import { - Accordion, - AccordionButton, - AccordionItem, - AccordionPanel, - Box, - ButtonGroup, - Divider, - Flex, - FormControl, - LightMode, - List, - Select, - SimpleGrid, - Spinner, - Switch, - Tooltip, -} from "@chakra-ui/react"; -import { Button } from "chakra/button"; -import { Card } from "chakra/card"; -import { FormLabel } from "chakra/form"; -import { Heading } from "chakra/heading"; -import { Text } from "chakra/text"; -import { ChevronDownIcon, CircleHelpIcon, CopyIcon } from "lucide-react"; import { useSearchParams } from "next/navigation"; import { Fragment, useId, useMemo, useState } from "react"; -import { toast } from "sonner"; import type { ThirdwebContract } from "thirdweb"; import { stringify } from "thirdweb/utils"; +import { + Accordion, + AccordionContent, + AccordionItem, + AccordionTrigger, +} from "@/components/ui/accordion"; +import { Badge } from "@/components/ui/badge"; +import { Button } from "@/components/ui/button"; +import { CopyTextButton } from "@/components/ui/CopyTextButton"; import { CodeClient } from "@/components/ui/code/code.client"; +import { Label } from "@/components/ui/label"; +import { ScrollShadow } from "@/components/ui/ScrollShadow/ScrollShadow"; +import { Spinner } from "@/components/ui/Spinner/Spinner"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import { Switch } from "@/components/ui/switch"; import { useChainSlug } from "@/hooks/chains/chainSlug"; import { type InternalTransaction, useActivity } from "@/hooks/useActivity"; -import { useClipboard } from "@/hooks/useClipboard"; -import { useDashboardRouter } from "@/lib/DashboardRouter"; import type { ProjectMeta } from "../../../../../team/[team_slug]/[project_slug]/contract/[chainIdOrSlug]/[contractAddress]/types"; -import { buildContractPagePath } from "../_utils/contract-page-path"; -interface EventsFeedProps { - contract: ThirdwebContract; - projectMeta: ProjectMeta | undefined; -} - -export const EventsFeed: React.FC = ({ +export function EventsFeed({ contract, projectMeta, -}) => { +}: { + contract: ThirdwebContract; + projectMeta: ProjectMeta | undefined; +}) { const [autoUpdate, setAutoUpdate] = useState(true); const allEvents = useActivity(contract, autoUpdate); const searchParams = useSearchParams(); const event = searchParams?.get("event"); const [selectedEvent, setSelectedEvent] = useState(event || "all"); const chainSlug = useChainSlug(contract.chain.id); - const router = useDashboardRouter(); const eventTypes = useMemo( () => @@ -79,319 +68,231 @@ export const EventsFeed: React.FC = ({ const autoUpdateId = useId(); return ( - - - - +
+
+
+

Latest Transactions - +

- -
- - - Auto-Update - - - setAutoUpdate((val) => !val)} - /> - -
- - - - - Transaction Hash - - - Events - - - Block Number - - +
+ + setAutoUpdate((val) => !val)} + /> +
+
- - {filteredEvents.length === 0 && ( -
- - {autoUpdate && } - - {autoUpdate ? "listening for events" : "no events to show"} - - -
- )} - - {filteredEvents?.slice(0, 10).map((e) => ( - - ))} - - - - + {/* table */} + +
+ {/* table title */} +
+

Transaction Hash

+

Events

+

Block Number

+
+ + {/* table body */} +
+ {filteredEvents.length === 0 && ( +
+
+ {autoUpdate && } + + {autoUpdate ? "listening for events" : "no events to show"} + +
+
+ )} + + + {filteredEvents?.slice(0, 10).map((e) => ( + + ))} + +
+
+ +
); -}; +} -interface EventsFeedItemProps { +function EventsFeedItem({ + transaction, + setSelectedEvent, +}: { transaction: InternalTransaction; setSelectedEvent: React.Dispatch>; contractAddress: string; chainSlug: string | number; projectMeta: ProjectMeta | undefined; -} - -const EventsFeedItem: React.FC = ({ - transaction, - setSelectedEvent, - contractAddress, - chainSlug, - projectMeta, -}) => { - const { onCopy } = useClipboard(transaction.transactionHash); - const router = useDashboardRouter(); - +}) { return ( - - - -
- - - Copy transaction hash to clipboard - - - } - p={0} - > - - - - {transaction.transactionHash.slice(0, 32)}... - -
- - - + +
+ {/* col 1 */} +
+ +
- + {/* col 2 */} +
{transaction.events.slice(0, 2).map((e, idx) => ( ))} + {transaction.events.length > 2 && ( - )} - - - -
- - {transaction.blockNumber} - -
- -
-
- - - - - -
- - Transaction Data - - - +
- + +
+
+ - + +
+ + } + /> - - Event Data - +
- + + } + /> - {transaction.events.map((event, idx, arr) => ( - - - - {event.eventName} - - - - - +
- {arr.length - 1 === idx ? null : } - - ))} -
- - + {transaction.events.map((event, idx, arr) => ( + +
+
+ + {event.eventName} + +
+
+ +
+
+ + {arr.length - 1 === idx ? null : ( +
+ )} + + ))} +
+ ); -}; - -interface TransactionDataProps { - name: string; - value: bigint | string; - description: string; } -const TransactionData: React.FC = ({ +function TransactionData({ name, value, - description, -}) => { +}: { + name: string; + value: React.ReactNode; +}) { return ( - <> - -
- - {description} - - } - p={0} - > -
- -
- - - {name} -
+
+
+ {name} +
- {value.toString()} - - - + {value} +
); -}; +}