SQL Logs #207
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| import React, { type ComponentPropsWithoutRef } from "react"; | ||
| import { cn } from "@/lib/utils"; | ||
|
|
||
| export function Card({ | ||
| children, | ||
| className, | ||
| ...rest | ||
| }: ComponentPropsWithoutRef<"div">) { | ||
| return ( | ||
| <div className="flex flex-col gap-4 rounded-sm border border-gray-200 p-4"> | ||
| {children} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export function CardTitle({ | ||
| children, | ||
| className, | ||
| ...rest | ||
| }: ComponentPropsWithoutRef<"div">) { | ||
| return ( | ||
| <div | ||
| className={cn("text-xs uppercase text-muted-foreground", className)} | ||
| {...rest} | ||
| > | ||
| {children} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export function CardContent({ | ||
| children, | ||
| className, | ||
| ...rest | ||
| }: ComponentPropsWithoutRef<"div">) { | ||
| return ( | ||
| <div className="flex flex-col gap-2" {...rest}> | ||
| {children} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export function CardMainContent({ | ||
| children, | ||
| className, | ||
| ...rest | ||
| }: ComponentPropsWithoutRef<"div">) { | ||
| return ( | ||
| <div | ||
| className={cn("self-center text-3xl font-medium", className)} | ||
| {...rest} | ||
| > | ||
| {children} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export function CardSubContent({ | ||
| children, | ||
| className, | ||
| ...rest | ||
| }: ComponentPropsWithoutRef<"div">) { | ||
| return ( | ||
| <div | ||
| className={cn("self-center text-sm text-muted-foreground", className)} | ||
| {...rest} | ||
| > | ||
| {children} | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| "use client"; | ||
|
|
||
| import { ExternalLink } from "lucide-react"; | ||
| import { Button } from "@/components/ui/button"; | ||
|
|
||
| export default function ExplorerButton({ | ||
| explorerName, | ||
| txnUrl, | ||
| }: { | ||
| explorerName: string; | ||
| txnUrl: string; | ||
| }) { | ||
| return ( | ||
| <Button | ||
| variant="ghost" | ||
| size="default" | ||
| className="ml-auto gap-x-1" | ||
| onClick={() => window.open(txnUrl)} | ||
| > | ||
| <ExternalLink className="shrink-0" /> | ||
| View on {explorerName} | ||
| </Button> | ||
| ); | ||
| } |
|
There was a problem hiding this comment. This is the react server component page that renders to view a single transaction. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,157 @@ | ||
| import TimeAgo from "javascript-time-ago"; | ||
| import { AlertCircle } from "lucide-react"; | ||
| import { notFound } from "next/navigation"; | ||
| import Link from "next/link"; | ||
| import { | ||
| Card, | ||
| CardContent, | ||
| CardMainContent, | ||
| CardSubContent, | ||
| CardTitle, | ||
| } from "./_components/card"; | ||
| import ExplorerButton from "./_components/explorer-button"; | ||
| import AddressDisplay from "@/components/address-display"; | ||
| import { chainsMap } from "@/lib/chains-map"; | ||
| import { cn } from "@/lib/utils"; | ||
| import { getSqlLog } from "@/lib/validator-queries"; | ||
| import { blockExplorers } from "@/lib/block-explorers"; | ||
| import { | ||
| Tooltip, | ||
| TooltipContent, | ||
| TooltipProvider, | ||
| TooltipTrigger, | ||
| } from "@/components/ui/tooltip"; | ||
|
|
||
| const timeAgo = new TimeAgo("en-US"); | ||
|
|
||
| export default async function TxnPage({ | ||
| params, | ||
| }: { | ||
| params: { chainId: string; txnHash: string }; | ||
| }) { | ||
| const chainNumber = parseInt(params.chainId, 10); | ||
| const log = await getSqlLog(chainNumber, params.txnHash); | ||
|
|
||
| const chain = chainsMap.get(chainNumber); | ||
|
|
||
| if (!chain) { | ||
| notFound(); | ||
| } | ||
|
|
||
| const explorer = blockExplorers.get(chainNumber); | ||
|
|
||
| return ( | ||
| <div className="container flex flex-col gap-10 pt-10"> | ||
| <div className="flex items-center gap-2"> | ||
| {log.error && ( | ||
| <TooltipProvider> | ||
| <Tooltip> | ||
| <TooltipTrigger asChild> | ||
| <AlertCircle /> | ||
| </TooltipTrigger> | ||
| <TooltipContent>Txn Status: Error</TooltipContent> | ||
| </Tooltip> | ||
| </TooltipProvider> | ||
| )} | ||
| <AddressDisplay | ||
| address={log.txHash} | ||
| name="txn hash" | ||
| numCharacters={8} | ||
| copy | ||
| className={cn("text-3xl font-bold", log.error && "text-red-500")} | ||
| /> | ||
| {explorer && ( | ||
| <ExplorerButton | ||
| explorerName={explorer.explorer} | ||
| txnUrl={explorer.txUrl(params.txnHash)} | ||
| /> | ||
| )} | ||
| </div> | ||
| <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3"> | ||
| <Card> | ||
| <CardTitle>Sent by</CardTitle> | ||
| <CardContent> | ||
| <CardMainContent> | ||
| <AddressDisplay | ||
| address={log.caller} | ||
| copy | ||
| className="self-center text-3xl font-medium text-black" | ||
| /> | ||
| </CardMainContent> | ||
| </CardContent> | ||
| </Card> | ||
| <Card> | ||
| <CardTitle>Timestamp</CardTitle> | ||
| <CardContent> | ||
| <CardMainContent> | ||
| {timeAgo.format(log.timestamp * 1000)} | ||
| </CardMainContent> | ||
| <CardSubContent> | ||
| {new Date(log.timestamp * 1000).toLocaleString()} | ||
| </CardSubContent> | ||
| </CardContent> | ||
| </Card> | ||
| <Card> | ||
| <CardTitle>Status</CardTitle> | ||
| <CardContent> | ||
| <CardMainContent>{log.error ? "Error" : "Success"}</CardMainContent> | ||
| </CardContent> | ||
| </Card> | ||
| <Card> | ||
| <CardTitle>Chain ID</CardTitle> | ||
| <CardContent> | ||
| <CardMainContent>{chainNumber}</CardMainContent> | ||
| <CardSubContent>{chain.name}</CardSubContent> | ||
| </CardContent> | ||
| </Card> | ||
| <Card> | ||
| <CardTitle>Block Number</CardTitle> | ||
| <CardContent> | ||
| <CardMainContent>{log.blockNumber}</CardMainContent> | ||
| {explorer && ( | ||
| <CardSubContent> | ||
| <Link href={explorer.blockUrl(log.blockNumber)}> | ||
| View on {explorer.explorer} | ||
| </Link> | ||
| </CardSubContent> | ||
| )} | ||
| </CardContent> | ||
| </Card> | ||
| <Card> | ||
| <CardTitle>Event Index</CardTitle> | ||
| <CardContent> | ||
| <CardMainContent>{log.eventIndex}</CardMainContent> | ||
| </CardContent> | ||
| </Card> | ||
| <Card> | ||
| <CardTitle>Event Type</CardTitle> | ||
| <CardContent> | ||
| <CardMainContent> | ||
| {log.eventType === "ContractCreateTable" | ||
| ? "Create Table" | ||
| : "Run SQL"} | ||
| </CardMainContent> | ||
| </CardContent> | ||
| </Card> | ||
| </div> | ||
| <div> | ||
| <label className="text-sm uppercase text-muted-foreground"> | ||
| Statement: | ||
| </label> | ||
| <pre className="whitespace-break-spaces rounded-sm border border-gray-300 bg-gray-100 p-4"> | ||
| {log.statement} | ||
| </pre> | ||
| </div> | ||
| {log.error && ( | ||
| <div> | ||
| <label className="text-sm uppercase text-muted-foreground"> | ||
| Error: | ||
| </label> | ||
| <pre className="whitespace-break-spaces rounded-sm border border-gray-300 bg-gray-100 p-4"> | ||
| {log.error} | ||
| </pre> | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Experimenting with my own
Cardcomponent on the txn page just to have more control over how it looks. Still don't love using cards like this everywhere, but it's just a go-to for the time being.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You, @dtbuchholz, and I all independently opened PRs to fix/change the ShadCN Card. Maybe we combine them into a single component and start using that everywhere on the site?