From c2dbee965c73fbe72a98f70d214c112400e5fb3b Mon Sep 17 00:00:00 2001 From: Jennifer Echenim Date: Thu, 7 Dec 2023 02:45:31 +0400 Subject: [PATCH 01/14] update `Tenscan` metadata --- .github/workflows/manual-deploy-obscuro-scan-3.yml | 8 ++++---- tools/obscuroscan_v3/frontend/src/lib/constants.ts | 1 + tools/obscuroscan_v3/frontend/src/lib/siteMetadata.ts | 6 +++--- 3 files changed, 8 insertions(+), 7 deletions(-) diff --git a/.github/workflows/manual-deploy-obscuro-scan-3.yml b/.github/workflows/manual-deploy-obscuro-scan-3.yml index 46bc9d8855..6f60712ace 100644 --- a/.github/workflows/manual-deploy-obscuro-scan-3.yml +++ b/.github/workflows/manual-deploy-obscuro-scan-3.yml @@ -1,8 +1,8 @@ -# Deploys Ten Scan on Azure for Testnet -# Builds the Ten Scan image, pushes the image to dockerhub and starts the Ten Scan on Azure +# Deploys Tenscan on Azure for Testnet +# Builds the Tenscan image, pushes the image to dockerhub and starts the Tenscan on Azure -name: "[M] Deploy Ten Scan 3 Testnet" -run-name: "[M] Deploy Ten Scan Testnet ( ${{ github.event.inputs.testnet_type }} )" +name: "[M] Deploy Tenscan 3 Testnet" +run-name: "[M] Deploy Tenscan Testnet ( ${{ github.event.inputs.testnet_type }} )" on: workflow_dispatch: inputs: diff --git a/tools/obscuroscan_v3/frontend/src/lib/constants.ts b/tools/obscuroscan_v3/frontend/src/lib/constants.ts index b19c6d955d..4e019f319d 100644 --- a/tools/obscuroscan_v3/frontend/src/lib/constants.ts +++ b/tools/obscuroscan_v3/frontend/src/lib/constants.ts @@ -2,6 +2,7 @@ export const socialLinks = { github: "https://github.com/ten-protocol", discord: "https://discord.gg/2JQ2Z3r", twitter: "https://twitter.com/tenprotocol", + twitterHandle: "@tenprotocol", }; export const pollingInterval = 5000; diff --git a/tools/obscuroscan_v3/frontend/src/lib/siteMetadata.ts b/tools/obscuroscan_v3/frontend/src/lib/siteMetadata.ts index 764fb271c4..f6c47dae6a 100644 --- a/tools/obscuroscan_v3/frontend/src/lib/siteMetadata.ts +++ b/tools/obscuroscan_v3/frontend/src/lib/siteMetadata.ts @@ -1,16 +1,16 @@ import { socialLinks } from "./constants"; export const siteMetadata = { - companyName: "Ten Scan", + companyName: "Tenscan", metaTitle: "Ten, a decentralized Layer 2 Rollup protocol designed to hyper-scale and encrypt the Ethereum blockchain.", description: - "Ten, a decentralized Ethereum Layer 2 Rollup protocol designed to hyper-scale, encrypt and prevent negative MEV on the Ethereum blockchain using Secure Enclaves and ZKPs.", + "Tenscan allows you to explore and search activities taking place on the Ten Layer 2 blockchain", siteUrl: "https://obscu.ro", siteLogo: ``, siteLogoSquare: ``, email: "team@obscu.ro", twitter: socialLinks.twitter, - twitterHandle: "@obscuronet", + twitterHandle: socialLinks.twitterHandle, github: socialLinks.github, }; From cec4281464076a18897bc7f88ee6392d03ce375f Mon Sep 17 00:00:00 2001 From: Jennifer Echenim Date: Thu, 7 Dec 2023 03:49:45 +0400 Subject: [PATCH 02/14] change hex values to base 10 --- .../frontend/src/components/main-nav.tsx | 4 +- .../components/modules/batches/columns.tsx | 62 ++++--------------- .../src/components/modules/blocks/columns.tsx | 28 +-------- .../modules/transactions/columns.tsx | 22 ------- 4 files changed, 17 insertions(+), 99 deletions(-) diff --git a/tools/obscuroscan_v3/frontend/src/components/main-nav.tsx b/tools/obscuroscan_v3/frontend/src/components/main-nav.tsx index eb116fde7b..1e422c897c 100644 --- a/tools/obscuroscan_v3/frontend/src/components/main-nav.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/main-nav.tsx @@ -59,7 +59,7 @@ const NavItem = ({ navLink }: { navLink: NavLink }) => { {navLink.label} @@ -70,7 +70,7 @@ const NavItem = ({ navLink }: { navLink: NavLink }) => { href={navLink.href || ""} key={navLink.label} className={cn( - "text-sm font-medium text-muted-foreground transition-colors hover:text-primary", + "text-sm font-medium text-muted-foreground transition-colors hover:text-primary w-full", { "text-primary": router.pathname === navLink.href, } diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/batches/columns.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/batches/columns.tsx index 9935eb1142..8c903d1d42 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/batches/columns.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/batches/columns.tsx @@ -1,9 +1,8 @@ "use client"; import { ColumnDef } from "@tanstack/react-table"; -import { Checkbox } from "@/src/components/ui/checkbox"; -import { labels, statuses } from "./constants"; +import { statuses } from "./constants"; import { DataTableColumnHeader } from "../common/data-table/data-table-column-header"; import TruncatedAddress from "../common/truncated-address"; import { formatTimeAgo } from "@/src/lib/utils"; @@ -12,27 +11,6 @@ import { EyeOpenIcon } from "@radix-ui/react-icons"; import Link from "next/link"; export const columns: ColumnDef[] = [ - { - id: "select", - header: ({ table }) => ( - table.toggleAllPageRowsSelected(!!value)} - aria-label="Select all" - className="translate-y-[2px]" - /> - ), - cell: ({ row }) => ( - row.toggleSelected(!!value)} - aria-label="Select row" - className="translate-y-[2px]" - /> - ), - enableSorting: false, - enableHiding: false, - }, { accessorKey: "number", header: ({ column }) => ( @@ -42,7 +20,7 @@ export const columns: ColumnDef[] = [ return (
- {row.getValue("number")} + {Number(row.getValue("number"))}
); @@ -58,7 +36,7 @@ export const columns: ColumnDef[] = [ cell: ({ row }) => { return (
- + {row.getValue("timestamp") ? formatTimeAgo(row.getValue("timestamp")) : "N/A"} @@ -77,8 +55,8 @@ export const columns: ColumnDef[] = [ cell: ({ row }) => { return (
- - {row.getValue("gasUsed")} + + {Number(row.getValue("gasUsed"))}
); @@ -94,8 +72,8 @@ export const columns: ColumnDef[] = [ cell: ({ row }) => { return (
- - {row.getValue("gasLimit")} + + {Number(row.getValue("gasLimit"))}
); @@ -137,31 +115,15 @@ export const columns: ColumnDef[] = [ enableHiding: false, }, { - accessorKey: "difficulty", + accessorKey: "miner", header: ({ column }) => ( - + ), cell: ({ row }) => { - const finality = statuses.find( - (finality) => finality.value === row.getValue("difficulty") - ); - - if (!finality) { - return null; - } - - return ( -
- {finality.icon && ( - - )} - {finality.label || "N/A"} -
- ); - }, - filterFn: (row, id, value) => { - return value.includes(row.getValue(id)); + return ; }, + enableSorting: false, + enableHiding: false, }, { id: "actions", diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/blocks/columns.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/blocks/columns.tsx index 88cf5c286a..8b2ac8abcd 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/blocks/columns.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/blocks/columns.tsx @@ -1,7 +1,6 @@ "use client"; import { ColumnDef } from "@tanstack/react-table"; -import { Checkbox } from "@/src/components/ui/checkbox"; import { labels, statuses } from "./constants"; import { DataTableColumnHeader } from "../common/data-table/data-table-column-header"; @@ -11,27 +10,6 @@ import TruncatedAddress from "../common/truncated-address"; import { formatTimeAgo } from "@/src/lib/utils"; export const columns: ColumnDef[] = [ - { - id: "select", - header: ({ table }) => ( - table.toggleAllPageRowsSelected(!!value)} - aria-label="Select all" - className="translate-y-[2px]" - /> - ), - cell: ({ row }) => ( - row.toggleSelected(!!value)} - aria-label="Select row" - className="translate-y-[2px]" - /> - ), - enableSorting: false, - enableHiding: false, - }, { accessorKey: "number", header: ({ column }) => ( @@ -59,7 +37,7 @@ export const columns: ColumnDef[] = [ const blockHeader = row.original.blockHeader as BlockHeader; return (
- + {blockHeader?.timestamp ? formatTimeAgo(blockHeader?.timestamp) : "N/A"} @@ -79,7 +57,7 @@ export const columns: ColumnDef[] = [ const blockHeader = row.original.blockHeader as BlockHeader; return (
- + {+blockHeader?.gasUsed}
@@ -97,7 +75,7 @@ export const columns: ColumnDef[] = [ const blockHeader = row.original.blockHeader as BlockHeader; return (
- + {+blockHeader?.gasLimit}
diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/transactions/columns.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/transactions/columns.tsx index 1b2274129b..6eaa2c14dd 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/transactions/columns.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/transactions/columns.tsx @@ -1,7 +1,6 @@ "use client"; import { ColumnDef } from "@tanstack/react-table"; -import { Checkbox } from "@/src/components/ui/checkbox"; import { Badge } from "@/src/components/ui/badge"; import { labels, statuses } from "./constants"; @@ -11,27 +10,6 @@ import { Transaction } from "@/src/types/interfaces/TransactionInterfaces"; import TruncatedAddress from "../common/truncated-address"; export const columns: ColumnDef[] = [ - { - id: "select", - header: ({ table }) => ( - table.toggleAllPageRowsSelected(!!value)} - aria-label="Select all" - className="translate-y-[2px]" - /> - ), - cell: ({ row }) => ( - row.toggleSelected(!!value)} - aria-label="Select row" - className="translate-y-[2px]" - /> - ), - enableSorting: false, - enableHiding: false, - }, { accessorKey: "BatchHeight", header: ({ column }) => ( From f9e2c906d00cfcfada03b3b4f798fbfc4108c60f Mon Sep 17 00:00:00 2001 From: Jennifer Echenim Date: Thu, 7 Dec 2023 04:02:27 +0400 Subject: [PATCH 03/14] update toast methods --- tools/obscuroscan_v3/frontend/pages/_app.tsx | 13 +-- .../frontend/pages/docs/[id].tsx | 9 +-- .../components/providers/wallet-provider.tsx | 17 ++-- .../frontend/src/components/ui/toast.tsx | 80 ++++++++++--------- .../frontend/src/components/ui/use-toast.ts | 9 ++- .../frontend/src/hooks/useCopy.ts | 11 ++- .../src/services/useTransactionsService.ts | 8 +- .../frontend/src/types/interfaces/index.ts | 8 ++ 8 files changed, 88 insertions(+), 67 deletions(-) diff --git a/tools/obscuroscan_v3/frontend/pages/_app.tsx b/tools/obscuroscan_v3/frontend/pages/_app.tsx index a345b336ae..5fc5c60688 100644 --- a/tools/obscuroscan_v3/frontend/pages/_app.tsx +++ b/tools/obscuroscan_v3/frontend/pages/_app.tsx @@ -9,30 +9,25 @@ import { import "@/styles/globals.css"; import type { AppProps } from "next/app"; import { Toaster } from "@/src/components/ui/toaster"; -import { useToast } from "@/src/components/ui/use-toast"; import { WalletConnectionProvider } from "@/src/components/providers/wallet-provider"; import { NetworkStatus } from "@/src/components/modules/common/network-status"; import HeadSeo from "@/src/components/head-seo"; import { siteMetadata } from "@/src/lib/siteMetadata"; import Script from "next/script"; import { GOOGLE_ANALYTICS_ID } from "@/src/lib/constants"; +import { showToast } from "@/src/components/ui/use-toast"; +import { ToastType } from "@/src/types/interfaces"; export default function App({ Component, pageProps }: AppProps) { - const { toast } = useToast(); - const mutationCache = new MutationCache({ onSuccess: (mutation: any) => { if (mutation?.message) { - toast({ - description: mutation?.message, - }); + showToast(ToastType.SUCCESS, mutation?.message); } }, onError: (error: any, mutation: any) => { if (error?.response?.data?.message) { - toast({ - description: mutation?.message, - }); + showToast(ToastType.DESTRUCTIVE, mutation?.message); } }, }); diff --git a/tools/obscuroscan_v3/frontend/pages/docs/[id].tsx b/tools/obscuroscan_v3/frontend/pages/docs/[id].tsx index 022609528d..3400f95f5b 100644 --- a/tools/obscuroscan_v3/frontend/pages/docs/[id].tsx +++ b/tools/obscuroscan_v3/frontend/pages/docs/[id].tsx @@ -1,10 +1,11 @@ import Layout from "@/src/components/layouts/default-layout"; import Spinner from "@/src/components/ui/spinner"; -import { useToast } from "@/src/components/ui/use-toast"; import { siteMetadata } from "@/src/lib/siteMetadata"; import { useRouter } from "next/router"; import React from "react"; import Custom404Error from "../404"; +import { showToast } from "@/src/components/ui/use-toast"; +import { ToastType } from "@/src/types/interfaces"; type Document = { title: string; @@ -16,7 +17,6 @@ type Document = { }; const Document = () => { - const { toast } = useToast(); const { query } = useRouter(); const { id } = query; @@ -45,10 +45,7 @@ const Document = () => { }; setDocument(processedData); } catch (error) { - toast({ - variant: "destructive", - description: "Error fetching document", - }); + showToast(ToastType.DESTRUCTIVE, "Error fetching document"); } finally { setLoading(false); } diff --git a/tools/obscuroscan_v3/frontend/src/components/providers/wallet-provider.tsx b/tools/obscuroscan_v3/frontend/src/components/providers/wallet-provider.tsx index fb9e73531a..f7772769b9 100644 --- a/tools/obscuroscan_v3/frontend/src/components/providers/wallet-provider.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/providers/wallet-provider.tsx @@ -4,7 +4,8 @@ import { WalletConnectionContextType, WalletConnectionProviderProps, } from "@/src/types/interfaces/WalletInterfaces"; -import { useToast } from "../ui/use-toast"; +import { showToast } from "../ui/use-toast"; +import { ToastType } from "@/src/types/interfaces"; const WalletConnectionContext = createContext(null); @@ -22,8 +23,6 @@ export const useWalletConnection = (): WalletConnectionContextType => { export const WalletConnectionProvider = ({ children, }: WalletConnectionProviderProps) => { - const { toast } = useToast(); - const [walletConnected, setWalletConnected] = useState(false); const [walletAddress, setWalletAddress] = useState(null); const [provider, setProvider] = @@ -43,10 +42,16 @@ export const WalletConnectionProvider = ({ setWalletAddress(address); setWalletConnected(true); } catch (error: any) { - toast({ description: "Error connecting to wallet:" + error.message }); + showToast( + ToastType.DESTRUCTIVE, + "Error connecting to wallet:" + error.message + ); } } else { - toast({ description: "No ethereum object found." }); + showToast( + ToastType.DESTRUCTIVE, + "No ethereum object found. Please install MetaMask!" + ); } }; @@ -63,7 +68,7 @@ export const WalletConnectionProvider = ({ const ethereum = (window as any).ethereum; const handleAccountsChanged = (accounts: string[]) => { if (accounts.length === 0) { - toast({ description: "Please connect to MetaMask." }); + showToast(ToastType.DESTRUCTIVE, "Please connect to MetaMask."); } else if (accounts[0] !== walletAddress) { setWalletAddress(accounts[0]); } diff --git a/tools/obscuroscan_v3/frontend/src/components/ui/toast.tsx b/tools/obscuroscan_v3/frontend/src/components/ui/toast.tsx index 310e41b5a7..939d32b2cd 100644 --- a/tools/obscuroscan_v3/frontend/src/components/ui/toast.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/ui/toast.tsx @@ -1,11 +1,11 @@ -import * as React from 'react' -import * as ToastPrimitives from '@radix-ui/react-toast' -import { cva, type VariantProps } from 'class-variance-authority' -import { X } from 'lucide-react' +import * as React from "react"; +import * as ToastPrimitives from "@radix-ui/react-toast"; +import { cva, type VariantProps } from "class-variance-authority"; +import { X } from "lucide-react"; -import { cn } from '@/src/lib/utils' +import { cn } from "@/src/lib/utils"; -const ToastProvider = ToastPrimitives.Provider +const ToastProvider = ToastPrimitives.Provider; const ToastViewport = React.forwardRef< React.ElementRef, @@ -14,33 +14,37 @@ const ToastViewport = React.forwardRef< -)) -ToastViewport.displayName = ToastPrimitives.Viewport.displayName +)); +ToastViewport.displayName = ToastPrimitives.Viewport.displayName; const toastVariants = cva( - 'group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full', + "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full", { variants: { variant: { - default: 'border bg-background text-foreground', + default: "border bg-background text-foreground", + info: "border-info bg-info text-info-foreground", + success: "border-success bg-success text-success-foreground", + warning: "border-warning bg-warning text-foreground", destructive: - 'destructive group border-destructive bg-destructive text-destructive-foreground' - } + "destructive group border-destructive bg-destructive text-destructive-foreground", + }, }, defaultVariants: { - variant: 'default' - } + variant: "default", + }, } -) +); const Toast = React.forwardRef< React.ElementRef, - React.ComponentPropsWithoutRef & VariantProps + React.ComponentPropsWithoutRef & + VariantProps >(({ className, variant, ...props }, ref) => { return ( - ) -}) -Toast.displayName = ToastPrimitives.Root.displayName + ); +}); +Toast.displayName = ToastPrimitives.Root.displayName; const ToastAction = React.forwardRef< React.ElementRef, @@ -59,13 +63,13 @@ const ToastAction = React.forwardRef< -)) -ToastAction.displayName = ToastPrimitives.Action.displayName +)); +ToastAction.displayName = ToastPrimitives.Action.displayName; const ToastClose = React.forwardRef< React.ElementRef, @@ -74,7 +78,7 @@ const ToastClose = React.forwardRef< -)) -ToastClose.displayName = ToastPrimitives.Close.displayName +)); +ToastClose.displayName = ToastPrimitives.Close.displayName; const ToastTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( - -)) -ToastTitle.displayName = ToastPrimitives.Title.displayName + +)); +ToastTitle.displayName = ToastPrimitives.Title.displayName; const ToastDescription = React.forwardRef< React.ElementRef, @@ -99,15 +107,15 @@ const ToastDescription = React.forwardRef< >(({ className, ...props }, ref) => ( -)) -ToastDescription.displayName = ToastPrimitives.Description.displayName +)); +ToastDescription.displayName = ToastPrimitives.Description.displayName; -type ToastProps = React.ComponentPropsWithoutRef +type ToastProps = React.ComponentPropsWithoutRef; -type ToastActionElement = React.ReactElement +type ToastActionElement = React.ReactElement; export { type ToastProps, @@ -118,5 +126,5 @@ export { ToastTitle, ToastDescription, ToastClose, - ToastAction -} + ToastAction, +}; diff --git a/tools/obscuroscan_v3/frontend/src/components/ui/use-toast.ts b/tools/obscuroscan_v3/frontend/src/components/ui/use-toast.ts index 64c5440f45..63d55fec10 100644 --- a/tools/obscuroscan_v3/frontend/src/components/ui/use-toast.ts +++ b/tools/obscuroscan_v3/frontend/src/components/ui/use-toast.ts @@ -186,4 +186,11 @@ function useToast() { }; } -export { useToast, toast }; +const showToast = (variant: ToastProps["variant"], description: string) => { + toast({ + variant, + description, + }); +}; + +export { useToast, toast, showToast }; diff --git a/tools/obscuroscan_v3/frontend/src/hooks/useCopy.ts b/tools/obscuroscan_v3/frontend/src/hooks/useCopy.ts index 30dbdd1ebf..07edcce173 100644 --- a/tools/obscuroscan_v3/frontend/src/hooks/useCopy.ts +++ b/tools/obscuroscan_v3/frontend/src/hooks/useCopy.ts @@ -1,19 +1,22 @@ -import { useToast } from "@/src/components/ui/use-toast"; import React from "react"; +import { showToast } from "../components/ui/use-toast"; +import { ToastType } from "../types/interfaces"; export const useCopy = () => { - const { toast } = useToast(); const [copied, setCopied] = React.useState(false); const copyToClipboard = (text: string, name?: string) => { copyText(text) .catch(() => fallbackCopyTextToClipboard(text)) .then(() => { - toast({ description: `${name ? name : ""} Copied!` }); + showToast(ToastType.SUCCESS, `${name ? name : "Copied!"}`); setCopied(true); }) .catch(() => { - toast({ description: `Couldn't copy ${name ? name : "Text"}!!!` }); + showToast( + ToastType.DESTRUCTIVE, + `Couldn't copy ${name ? name : "Text"}!!!` + ); }) .finally(() => { setTimeout(() => setCopied(false), 1000); diff --git a/tools/obscuroscan_v3/frontend/src/services/useTransactionsService.ts b/tools/obscuroscan_v3/frontend/src/services/useTransactionsService.ts index 9a2208ba8e..8ef43ec5d3 100644 --- a/tools/obscuroscan_v3/frontend/src/services/useTransactionsService.ts +++ b/tools/obscuroscan_v3/frontend/src/services/useTransactionsService.ts @@ -8,12 +8,12 @@ import { useQuery } from "@tanstack/react-query"; import { useEffect, useState } from "react"; import { pollingInterval, pricePollingInterval } from "../lib/constants"; import { PersonalTransactionsResponse } from "../types/interfaces/TransactionInterfaces"; -import { useToast } from "@/src/components/ui/use-toast"; import { useRouter } from "next/router"; +import { showToast } from "../components/ui/use-toast"; +import { ToastType } from "../types/interfaces"; export const useTransactionsService = () => { const { query } = useRouter(); - const { toast } = useToast(); const { walletAddress, provider } = useWalletConnection(); const [personalTxnsLoading, setPersonalTxnsLoading] = useState(false); @@ -70,9 +70,7 @@ export const useTransactionsService = () => { setPersonalTxns(personalTxData); } } catch (error) { - toast({ - description: "Error fetching personal transactions", - }); + showToast(ToastType.DESTRUCTIVE, "Error fetching personal transactions"); } finally { setPersonalTxnsLoading(false); } diff --git a/tools/obscuroscan_v3/frontend/src/types/interfaces/index.ts b/tools/obscuroscan_v3/frontend/src/types/interfaces/index.ts index 6ffaec20a8..5f626114df 100644 --- a/tools/obscuroscan_v3/frontend/src/types/interfaces/index.ts +++ b/tools/obscuroscan_v3/frontend/src/types/interfaces/index.ts @@ -70,3 +70,11 @@ export type NavLink = { isExternal?: boolean; subNavLinks?: NavLink[]; }; + +export enum ToastType { + INFO = "info", + SUCCESS = "success", + WARNING = "warning", + DESTRUCTIVE = "destructive", + DEFAULT = "default", +} From 839b6a6757b9462ee1ea5137f7735a20a38f577e Mon Sep 17 00:00:00 2001 From: Jennifer Echenim Date: Thu, 7 Dec 2023 05:32:56 +0400 Subject: [PATCH 04/14] update table methods/data --- .../frontend/pages/blocks/index.tsx | 1 + .../src/components/modules/blocks/columns.tsx | 30 ++++------------ .../components/modules/blocks/constants.tsx | 16 --------- .../data-table/data-table-row-actions.tsx | 35 +++++++++++-------- .../modules/common/data-table/data-table.tsx | 4 +-- .../frontend/src/lib/constants.ts | 18 ++++++++++ .../src/services/useBatchesService.ts | 7 ++-- .../frontend/src/services/useBlocksService.ts | 7 ++-- .../src/services/useTransactionsService.ts | 14 ++++---- 9 files changed, 58 insertions(+), 74 deletions(-) diff --git a/tools/obscuroscan_v3/frontend/pages/blocks/index.tsx b/tools/obscuroscan_v3/frontend/pages/blocks/index.tsx index 4570a4f32f..8e3af812c0 100644 --- a/tools/obscuroscan_v3/frontend/pages/blocks/index.tsx +++ b/tools/obscuroscan_v3/frontend/pages/blocks/index.tsx @@ -19,6 +19,7 @@ export default function Blocks() { React.useEffect(() => { setNoPolling(true); + return () => setNoPolling(false); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/blocks/columns.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/blocks/columns.tsx index 8b2ac8abcd..19645490a4 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/blocks/columns.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/blocks/columns.tsx @@ -2,7 +2,6 @@ import { ColumnDef } from "@tanstack/react-table"; -import { labels, statuses } from "./constants"; import { DataTableColumnHeader } from "../common/data-table/data-table-column-header"; import { DataTableRowActions } from "../common/data-table/data-table-row-actions"; import { Block, BlockHeader } from "@/src/types/interfaces/BlockInterfaces"; @@ -120,34 +119,19 @@ export const columns: ColumnDef[] = [ enableHiding: false, }, { - accessorKey: "Finality", + accessorKey: "miner", header: ({ column }) => ( - + ), cell: ({ row }) => { - const finality = statuses.find( - (finality) => finality.value === row.getValue("Finality") - ); - - if (!finality) { - return null; - } - - return ( -
- {finality.icon && ( - - )} - {finality.label} -
- ); - }, - filterFn: (row, id, value) => { - return value.includes(row.getValue(id)); + const blockHeader = row.original.blockHeader as BlockHeader; + return ; }, + enableSorting: false, + enableHiding: false, }, { id: "actions", - cell: ({ row }) => , + cell: ({ row }) => , }, ]; diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/blocks/constants.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/blocks/constants.tsx index 395dc4771b..eca2d7c2b5 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/blocks/constants.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/blocks/constants.tsx @@ -2,24 +2,8 @@ import { ArrowDownIcon, ArrowRightIcon, ArrowUpIcon, - CheckCircledIcon, } from "@radix-ui/react-icons"; -export const labels = [ - { - value: "Final", - label: "Final", - }, -]; - -export const statuses = [ - { - value: "Final", - label: "Final", - icon: CheckCircledIcon, - }, -]; - export const priorities = [ { label: "Low", diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/common/data-table/data-table-row-actions.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/common/data-table/data-table-row-actions.tsx index 74d159b81f..0f8c652451 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/common/data-table/data-table-row-actions.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/common/data-table/data-table-row-actions.tsx @@ -18,7 +18,7 @@ import { interface DataTableRowActionsProps { row: Row; - labels: { label: string; value: string }[]; + labels: { label: string; value: string }[] | null; } export function DataTableRowActions({ @@ -38,20 +38,25 @@ export function DataTableRowActions({ View - - {labels && ( - - Labels - - - {labels?.map((label) => ( - - {label.label} - - ))} - - - + {labels === null ? null : ( + <> + + + Labels + + + {labels?.map((label) => ( + + {label.label} + + ))} + + + + )} diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/common/data-table/data-table.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/common/data-table/data-table.tsx index ad76fc92bb..41df748cfe 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/common/data-table/data-table.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/common/data-table/data-table.tsx @@ -87,13 +87,13 @@ export function DataTable({ }); const { query, push, pathname } = useRouter(); + const { pageIndex, pageSize } = table.getState().pagination; React.useEffect(() => { - const { pageIndex, pageSize } = table.getState().pagination; const params = { ...query, page: pageIndex + 1, size: pageSize }; push({ pathname, query: params }); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [table.getState().pagination]); + }, [pageIndex, pageSize]); return (
diff --git a/tools/obscuroscan_v3/frontend/src/lib/constants.ts b/tools/obscuroscan_v3/frontend/src/lib/constants.ts index 4e019f319d..c91b161a27 100644 --- a/tools/obscuroscan_v3/frontend/src/lib/constants.ts +++ b/tools/obscuroscan_v3/frontend/src/lib/constants.ts @@ -9,6 +9,24 @@ export const pollingInterval = 5000; export const maxRetries = 3; export const pricePollingInterval = 60 * 1000; +export const getOptions = (query: { + page?: string | string[]; + size?: string | string[]; +}) => { + const options = { + offset: Number.isNaN(parseInt(query.page as string, 10)) + ? 1 + : parseInt(query.page as string, 10), + size: Number.isNaN(parseInt(query.size as string, 10)) + ? 10 + : parseInt(query.size as string, 10), + // sort: query.sort ? (query.sort as string) : "blockNumber", + // order: query.order ? (query.order as string) : "desc", + // filter: query.filter ? (query.filter as string) : "", + }; + return options; +}; + export const version = process.env.NEXT_PUBLIC_FE_VERSION; export const apiHost = process.env.NEXT_PUBLIC_API_HOST; diff --git a/tools/obscuroscan_v3/frontend/src/services/useBatchesService.ts b/tools/obscuroscan_v3/frontend/src/services/useBatchesService.ts index 49679c861b..06ebc2982a 100644 --- a/tools/obscuroscan_v3/frontend/src/services/useBatchesService.ts +++ b/tools/obscuroscan_v3/frontend/src/services/useBatchesService.ts @@ -1,6 +1,6 @@ import { fetchBatches, fetchLatestBatch } from "@/api/batches"; import { useQuery } from "@tanstack/react-query"; -import { pollingInterval } from "../lib/constants"; +import { getOptions, pollingInterval } from "../lib/constants"; import { useState } from "react"; import { useRouter } from "next/router"; @@ -9,10 +9,7 @@ export const useBatchesService = () => { const [noPolling, setNoPolling] = useState(false); - const options = { - offset: query.page ? parseInt(query.page as string) : 1, - size: query.size ? parseInt(query.size as string) : 10, - }; + const options = getOptions(query); const { data: batches, diff --git a/tools/obscuroscan_v3/frontend/src/services/useBlocksService.ts b/tools/obscuroscan_v3/frontend/src/services/useBlocksService.ts index b849715f67..1af7f9458d 100644 --- a/tools/obscuroscan_v3/frontend/src/services/useBlocksService.ts +++ b/tools/obscuroscan_v3/frontend/src/services/useBlocksService.ts @@ -1,6 +1,6 @@ import { fetchBlocks } from "@/api/blocks"; import { useQuery } from "@tanstack/react-query"; -import { pollingInterval } from "../lib/constants"; +import { getOptions, pollingInterval } from "../lib/constants"; import { useRouter } from "next/router"; import { useState } from "react"; @@ -9,10 +9,7 @@ export const useBlocksService = () => { const [noPolling, setNoPolling] = useState(false); - const options = { - offset: query.page ? parseInt(query.page as string) : 1, - size: query.size ? parseInt(query.size as string) : 10, - }; + const options = getOptions(query); const { data: blocks, diff --git a/tools/obscuroscan_v3/frontend/src/services/useTransactionsService.ts b/tools/obscuroscan_v3/frontend/src/services/useTransactionsService.ts index 8ef43ec5d3..86f6600396 100644 --- a/tools/obscuroscan_v3/frontend/src/services/useTransactionsService.ts +++ b/tools/obscuroscan_v3/frontend/src/services/useTransactionsService.ts @@ -6,7 +6,11 @@ import { import { useWalletConnection } from "@/src/components/providers/wallet-provider"; import { useQuery } from "@tanstack/react-query"; import { useEffect, useState } from "react"; -import { pollingInterval, pricePollingInterval } from "../lib/constants"; +import { + getOptions, + pollingInterval, + pricePollingInterval, +} from "../lib/constants"; import { PersonalTransactionsResponse } from "../types/interfaces/TransactionInterfaces"; import { useRouter } from "next/router"; import { showToast } from "../components/ui/use-toast"; @@ -27,13 +31,7 @@ export const useTransactionsService = () => { const [noPolling, setNoPolling] = useState(false); - const options = { - offset: query.page ? parseInt(query.page as string) : 1, - size: query.size ? parseInt(query.size as string) : 10, - // sort: query.sort ? (query.sort as string) : "blockNumber", - // order: query.order ? (query.order as string) : "desc", - // filter: query.filter ? (query.filter as string) : "", - }; + const options = getOptions(query); const { data: transactions, From 7ea139c5dcc538b71b2ead48b4e03cdb2c6f80e7 Mon Sep 17 00:00:00 2001 From: Jennifer Echenim Date: Thu, 7 Dec 2023 17:27:09 +0400 Subject: [PATCH 05/14] data table updates --- .../frontend/pages/personal/index.tsx | 2 +- .../components/modules/batches/columns.tsx | 3 +- .../src/components/modules/blocks/columns.tsx | 46 ++++++++++++------- .../modules/common/data-table/data-table.tsx | 2 +- .../modules/dashboard/recent-batches.tsx | 7 ++- .../modules/dashboard/recent-blocks.tsx | 2 +- .../components/modules/personal/columns.tsx | 22 --------- .../src/components/modules/personal/data.tsx | 8 ---- .../src/components/modules/personal/index.tsx | 25 ++++++---- .../modules/transactions/columns.tsx | 10 ++-- .../src/components/ui/external-link.tsx | 25 ++++++++++ .../frontend/src/routes/index.ts | 8 ++++ .../src/services/useTransactionsService.ts | 9 +++- .../types/interfaces/TransactionInterfaces.ts | 2 +- 14 files changed, 97 insertions(+), 74 deletions(-) create mode 100644 tools/obscuroscan_v3/frontend/src/components/ui/external-link.tsx diff --git a/tools/obscuroscan_v3/frontend/pages/personal/index.tsx b/tools/obscuroscan_v3/frontend/pages/personal/index.tsx index 7c99c906f0..c0bed616bb 100644 --- a/tools/obscuroscan_v3/frontend/pages/personal/index.tsx +++ b/tools/obscuroscan_v3/frontend/pages/personal/index.tsx @@ -5,7 +5,7 @@ import PersonalTransactions from "@/src/components/modules/personal"; export const metadata: Metadata = { title: "Personal Transactions", - description: "ObscuroScan Personal Transactions", + description: "Tenscan Personal Transactions", }; export default function PersonalPage() { diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/batches/columns.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/batches/columns.tsx index 8c903d1d42..76ea0eafa7 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/batches/columns.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/batches/columns.tsx @@ -2,7 +2,6 @@ import { ColumnDef } from "@tanstack/react-table"; -import { statuses } from "./constants"; import { DataTableColumnHeader } from "../common/data-table/data-table-column-header"; import TruncatedAddress from "../common/truncated-address"; import { formatTimeAgo } from "@/src/lib/utils"; @@ -19,7 +18,7 @@ export const columns: ColumnDef[] = [ cell: ({ row }) => { return (
- + {Number(row.getValue("number"))}
diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/blocks/columns.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/blocks/columns.tsx index 19645490a4..195093b418 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/blocks/columns.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/blocks/columns.tsx @@ -7,6 +7,10 @@ import { DataTableRowActions } from "../common/data-table/data-table-row-actions import { Block, BlockHeader } from "@/src/types/interfaces/BlockInterfaces"; import TruncatedAddress from "../common/truncated-address"; import { formatTimeAgo } from "@/src/lib/utils"; +import { Badge } from "../../ui/badge"; +import ExternalLink from "../../ui/external-link"; +import { pathToUrl } from "@/src/routes/router"; +import { externalLinks } from "@/src/routes"; export const columns: ColumnDef[] = [ { @@ -18,9 +22,7 @@ export const columns: ColumnDef[] = [ const blockHeader = row.original.blockHeader as BlockHeader; return (
- - {+blockHeader?.number} - + {+blockHeader?.number}
); }, @@ -47,17 +49,33 @@ export const columns: ColumnDef[] = [ enableSorting: false, enableHiding: false, }, + + { + accessorKey: "rollupHash", + header: ({ column }) => ( + + ), + cell: ({ row }) => { + return +row.original.rollupHash === 0 ? ( + No rollup + ) : ( + + ); + }, + enableSorting: false, + enableHiding: false, + }, { accessorKey: "blockHeader.gasUsed", header: ({ column }) => ( - + ), cell: ({ row }) => { const blockHeader = row.original.blockHeader as BlockHeader; return (
- {+blockHeader?.gasUsed} + {+blockHeader?.gasUsed}
); @@ -90,7 +108,11 @@ export const columns: ColumnDef[] = [ ), cell: ({ row }) => { const blockHeader = row.original.blockHeader as BlockHeader; - return ; + return ( + + + + ); }, enableSorting: false, enableHiding: false, @@ -107,17 +129,7 @@ export const columns: ColumnDef[] = [ enableSorting: false, enableHiding: false, }, - { - accessorKey: "rollupHash", - header: ({ column }) => ( - - ), - cell: ({ row }) => { - return ; - }, - enableSorting: false, - enableHiding: false, - }, + { accessorKey: "miner", header: ({ column }) => ( diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/common/data-table/data-table.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/common/data-table/data-table.tsx index 41df748cfe..477ebbd53e 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/common/data-table/data-table.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/common/data-table/data-table.tsx @@ -119,7 +119,7 @@ export function DataTable({ ))} - {table?.getRowModel()?.rows?.length || data ? ( + {table?.getRowModel()?.rows?.length && data ? ( table.getRowModel().rows.map((row) => ( BN
-

#{batch?.number}

+

+ #{+batch?.number} +

{formatTimeAgo(batch?.timestamp)}

diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/dashboard/recent-blocks.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/dashboard/recent-blocks.tsx index f869bc720f..ef30f44956 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/dashboard/recent-blocks.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/dashboard/recent-blocks.tsx @@ -13,7 +13,7 @@ export function RecentBlocks({ blocks }: { blocks: any }) {

- #{block?.blockHeader?.number} + #{+block?.blockHeader?.number}

{formatTimeAgo(block?.blockHeader?.timestamp)} diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/personal/columns.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/personal/columns.tsx index 0044e6eb24..1c5901dc26 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/personal/columns.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/personal/columns.tsx @@ -1,7 +1,6 @@ "use client"; import { ColumnDef } from "@tanstack/react-table"; -import { Checkbox } from "@/src/components/ui/checkbox"; import { Badge, badgeVariants } from "@/src/components/ui/badge"; import { statuses } from "./data"; @@ -11,27 +10,6 @@ import { PersonalTransactions } from "@/src/types/interfaces/TransactionInterfac import TruncatedAddress from "../common/truncated-address"; export const columns: ColumnDef[] = [ - { - id: "select", - header: ({ table }) => ( - table.toggleAllPageRowsSelected(!!value)} - aria-label="Select all" - className="translate-y-[2px]" - /> - ), - cell: ({ row }) => ( - row.toggleSelected(!!value)} - aria-label="Select row" - className="translate-y-[2px]" - /> - ), - enableSorting: false, - enableHiding: false, - }, { accessorKey: "blockNumber", header: ({ column }) => ( diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/personal/data.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/personal/data.tsx index 869920edb1..acc229ef02 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/personal/data.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/personal/data.tsx @@ -14,11 +14,3 @@ export const statuses = [ variant: "destructive", }, ]; - -export const toolbar = [ - { - column: "status", - title: "Status", - options: statuses, - }, -]; diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/personal/index.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/personal/index.tsx index 103dfcbe88..473b0334b4 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/personal/index.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/personal/index.tsx @@ -2,11 +2,21 @@ import React from "react"; import { columns } from "@/src/components/modules/personal/columns"; import { DataTable } from "@/src/components/modules/common/data-table/data-table"; import { useTransactionsService } from "@/src/services/useTransactionsService"; -import { toolbar } from "./data"; import { Skeleton } from "@/src/components/ui/skeleton"; export default function PersonalTransactions() { - const { personalTxns, personalTxnsLoading } = useTransactionsService(); + const { personalTxns, setNoPolling, personalTxnsLoading } = + useTransactionsService(); + const { Receipts, Total } = personalTxns || { + Receipts: [], + Total: 0, + }; + + React.useEffect(() => { + setNoPolling(true); + return () => setNoPolling(false); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); return ( <> @@ -16,19 +26,14 @@ export default function PersonalTransactions() { Personal Transactions

- A table of personal transactions. + {Total} personal transaction(s).

{personalTxnsLoading ? ( - ) : personalTxns?.Results ? ( - + ) : Receipts ? ( + ) : (

No transactions found.

)} diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/transactions/columns.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/transactions/columns.tsx index 6eaa2c14dd..a5bb525445 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/transactions/columns.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/transactions/columns.tsx @@ -18,7 +18,7 @@ export const columns: ColumnDef[] = [ cell: ({ row }) => { return (
- + {row.getValue("BatchHeight")}
@@ -66,8 +66,8 @@ export const columns: ColumnDef[] = [ return value.includes(row.getValue(id)); }, }, - { - id: "actions", - cell: ({ row }) => , - }, + // { + // id: "actions", + // cell: ({ row }) => , + // }, ]; diff --git a/tools/obscuroscan_v3/frontend/src/components/ui/external-link.tsx b/tools/obscuroscan_v3/frontend/src/components/ui/external-link.tsx new file mode 100644 index 0000000000..184e31ad5c --- /dev/null +++ b/tools/obscuroscan_v3/frontend/src/components/ui/external-link.tsx @@ -0,0 +1,25 @@ +import { ExternalLinkIcon } from "@radix-ui/react-icons"; +import React from "react"; + +const ExternalLink = ({ + href, + children, + className, +}: { + href: string; + children: React.ReactNode; + className?: string; +}) => { + return ( + + {children} + + ); +}; + +export default ExternalLink; diff --git a/tools/obscuroscan_v3/frontend/src/routes/index.ts b/tools/obscuroscan_v3/frontend/src/routes/index.ts index 591c1ce19d..4c15b9ef09 100644 --- a/tools/obscuroscan_v3/frontend/src/routes/index.ts +++ b/tools/obscuroscan_v3/frontend/src/routes/index.ts @@ -25,6 +25,10 @@ export const apiRoutes = { decryptEncryptedRollup: "/actions/decryptTxBlob/", }; +export const ethMethods = { + getStorageAt: "eth_getStorageAt", +}; + export const NavLinks: NavLink[] = [ { href: "/", @@ -78,3 +82,7 @@ export const NavLinks: NavLink[] = [ ], }, ]; + +export const externalLinks = { + etherscanBlock: "https://etherscan.io/block/:hash", +}; diff --git a/tools/obscuroscan_v3/frontend/src/services/useTransactionsService.ts b/tools/obscuroscan_v3/frontend/src/services/useTransactionsService.ts index 86f6600396..66e98062cf 100644 --- a/tools/obscuroscan_v3/frontend/src/services/useTransactionsService.ts +++ b/tools/obscuroscan_v3/frontend/src/services/useTransactionsService.ts @@ -15,6 +15,7 @@ import { PersonalTransactionsResponse } from "../types/interfaces/TransactionInt import { useRouter } from "next/router"; import { showToast } from "../components/ui/use-toast"; import { ToastType } from "../types/interfaces"; +import { ethMethods } from "../routes"; export const useTransactionsService = () => { const { query } = useRouter(); @@ -47,7 +48,7 @@ export const useTransactionsService = () => { useQuery({ queryKey: ["transactionCount"], queryFn: () => fetchTransactionCount(), - refetchInterval: pollingInterval, + refetchInterval: noPolling ? false : pollingInterval, }); const personalTransactions = async (payload?: { @@ -60,11 +61,15 @@ export const useTransactionsService = () => { address: walletAddress, ...payload, }; - const personalTxData = await provider.send("eth_getStorageAt", [ + const personalTxData = await provider.send(ethMethods.getStorageAt, [ "listPersonalTransactions", requestPayload, null, ]); + console.log( + "🚀 ~ file: useTransactionsService.ts:68 ~ useTransactionsService ~ personalTxData:", + personalTxData + ); setPersonalTxns(personalTxData); } } catch (error) { diff --git a/tools/obscuroscan_v3/frontend/src/types/interfaces/TransactionInterfaces.ts b/tools/obscuroscan_v3/frontend/src/types/interfaces/TransactionInterfaces.ts index eacedb1055..cfa92bcb84 100644 --- a/tools/obscuroscan_v3/frontend/src/types/interfaces/TransactionInterfaces.ts +++ b/tools/obscuroscan_v3/frontend/src/types/interfaces/TransactionInterfaces.ts @@ -22,7 +22,7 @@ export type TransactionResponse = { }; export type PersonalTransactionsResponse = { - Results: PersonalTransactions[]; + Receipts: PersonalTransactions[]; Total: number; }; From 497ca2908c3bcc39e326a32c7fabe0d3dc376bba Mon Sep 17 00:00:00 2001 From: Jennifer Echenim Date: Thu, 7 Dec 2023 17:27:46 +0400 Subject: [PATCH 06/14] remove logs --- .../frontend/src/services/useTransactionsService.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/tools/obscuroscan_v3/frontend/src/services/useTransactionsService.ts b/tools/obscuroscan_v3/frontend/src/services/useTransactionsService.ts index 66e98062cf..85dbf52bd9 100644 --- a/tools/obscuroscan_v3/frontend/src/services/useTransactionsService.ts +++ b/tools/obscuroscan_v3/frontend/src/services/useTransactionsService.ts @@ -66,10 +66,6 @@ export const useTransactionsService = () => { requestPayload, null, ]); - console.log( - "🚀 ~ file: useTransactionsService.ts:68 ~ useTransactionsService ~ personalTxData:", - personalTxData - ); setPersonalTxns(personalTxData); } } catch (error) { From b51b89d0c0cf6822dcd58a2ac130d6db8e355f6b Mon Sep 17 00:00:00 2001 From: Jennifer Echenim Date: Fri, 8 Dec 2023 17:31:02 +0400 Subject: [PATCH 07/14] -update public and private txns - add a `connect wallet` screen for personal txns --- .../frontend/pages/personal/index.tsx | 15 +++- .../src/components/modules/blocks/columns.tsx | 4 +- .../components/modules/common/empty-state.tsx | 32 +++++++++ .../components/modules/personal/columns.tsx | 68 +++++++++++++------ .../src/components/modules/personal/data.tsx | 27 +++++++- .../modules/transactions/columns.tsx | 3 +- .../src/components/ui/external-link.tsx | 2 +- .../frontend/src/routes/index.ts | 2 +- .../src/services/useTransactionsService.ts | 10 +-- .../types/interfaces/TransactionInterfaces.ts | 12 +++- 10 files changed, 141 insertions(+), 34 deletions(-) create mode 100644 tools/obscuroscan_v3/frontend/src/components/modules/common/empty-state.tsx diff --git a/tools/obscuroscan_v3/frontend/pages/personal/index.tsx b/tools/obscuroscan_v3/frontend/pages/personal/index.tsx index c0bed616bb..ba87befdfd 100644 --- a/tools/obscuroscan_v3/frontend/pages/personal/index.tsx +++ b/tools/obscuroscan_v3/frontend/pages/personal/index.tsx @@ -2,6 +2,9 @@ import React from "react"; import Layout from "@/src/components/layouts/default-layout"; import { Metadata } from "next"; import PersonalTransactions from "@/src/components/modules/personal"; +import { useWalletConnection } from "@/src/components/providers/wallet-provider"; +import ConnectWalletButton from "@/src/components/modules/common/connect-wallet"; +import EmptyState from "@/src/components/modules/common/empty-state"; export const metadata: Metadata = { title: "Personal Transactions", @@ -9,9 +12,19 @@ export const metadata: Metadata = { }; export default function PersonalPage() { + const { walletConnected } = useWalletConnection(); + return ( - + {walletConnected ? ( + + ) : ( + } + /> + )} ); } diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/blocks/columns.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/blocks/columns.tsx index 195093b418..9a13b87361 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/blocks/columns.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/blocks/columns.tsx @@ -109,7 +109,9 @@ export const columns: ColumnDef[] = [ cell: ({ row }) => { const blockHeader = row.original.blockHeader as BlockHeader; return ( - + ); diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/common/empty-state.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/common/empty-state.tsx new file mode 100644 index 0000000000..395376f86c --- /dev/null +++ b/tools/obscuroscan_v3/frontend/src/components/modules/common/empty-state.tsx @@ -0,0 +1,32 @@ +import React from "react"; + +const EmptyState = ({ + title, + description, + icon, + action, +}: { + title?: string; + description?: string; + icon?: React.ReactNode; + action?: React.ReactNode; +}) => { + return ( +
+
+ {icon &&
{icon}
} + {title && ( +

+ {title} +

+ )} + {description && ( +

{description}

+ )} + {action &&
{action}
} +
+
+ ); +}; + +export default EmptyState; diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/personal/columns.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/personal/columns.tsx index 1c5901dc26..466fbe8d59 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/personal/columns.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/personal/columns.tsx @@ -3,23 +3,24 @@ import { ColumnDef } from "@tanstack/react-table"; import { Badge, badgeVariants } from "@/src/components/ui/badge"; -import { statuses } from "./data"; +import { statuses, types } from "./data"; import { DataTableColumnHeader } from "../common/data-table/data-table-column-header"; -import { DataTableRowActions } from "../common/data-table/data-table-row-actions"; import { PersonalTransactions } from "@/src/types/interfaces/TransactionInterfaces"; import TruncatedAddress from "../common/truncated-address"; +import Link from "next/link"; +import { EyeOpenIcon } from "@radix-ui/react-icons"; export const columns: ColumnDef[] = [ { accessorKey: "blockNumber", header: ({ column }) => ( - + ), cell: ({ row }) => { return (
- - {row.getValue("blockNumber")} + + {Number(row.getValue("blockNumber"))}
); @@ -27,7 +28,17 @@ export const columns: ColumnDef[] = [ enableSorting: false, enableHiding: false, }, - + { + accessorKey: "blockHash", + header: ({ column }) => ( + + ), + cell: ({ row }) => { + return ; + }, + enableSorting: false, + enableHiding: false, + }, { accessorKey: "transactionHash", header: ({ column }) => ( @@ -47,8 +58,8 @@ export const columns: ColumnDef[] = [ cell: ({ row }) => { return (
- - {row.getValue("gasUsed")} + + {Number(row.getValue("gasUsed"))}
); @@ -57,21 +68,30 @@ export const columns: ColumnDef[] = [ enableHiding: false, }, { - accessorKey: "blockHash", + accessorKey: "type", header: ({ column }) => ( - + ), cell: ({ row }) => { + const type = types.find((type) => { + return type.value === row.getValue("type"); + }); + + if (!type) { + return null; + } + return ( -
- - {row.getValue("blockHash")} - +
+ + {type.label} +
); }, - enableSorting: false, - enableHiding: false, + filterFn: (row, id, value) => { + return value.includes(row.getValue(id)); + }, }, { accessorKey: "status", @@ -80,7 +100,7 @@ export const columns: ColumnDef[] = [ ), cell: ({ row }) => { const status = statuses.find( - (status) => status.value === row.getValue("Status") + (status) => status.value === row.getValue("status") ); if (!status) { @@ -102,8 +122,14 @@ export const columns: ColumnDef[] = [ return value.includes(row.getValue(id)); }, }, - { - id: "actions", - cell: ({ row }) => , - }, + // { + // id: "actions", + // cell: ({ row }) => { + // return ( + // + // + // + // ); + // }, + // }, ]; diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/personal/data.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/personal/data.tsx index acc229ef02..a1797c82a9 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/personal/data.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/personal/data.tsx @@ -2,15 +2,38 @@ import { CheckIcon, Cross2Icon } from "@radix-ui/react-icons"; export const statuses = [ { - value: "Success", + value: "0x1", label: "Success", icon: CheckIcon, variant: "success", }, { - value: "Failure", + value: "0x0", label: "Failure", icon: Cross2Icon, variant: "destructive", }, ]; + +export const types = [ + { + value: "0x0", + label: "Legacy", + variant: "primary", + }, + { + value: "0x1", + label: "Access List", + variant: "secondary", + }, + { + value: "0x2", + label: "Dynamic Fee", + variant: "outline", + }, + { + value: "0x3", + label: "Blob", + variant: "outline", + }, +]; diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/transactions/columns.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/transactions/columns.tsx index a5bb525445..334b2c8b3e 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/transactions/columns.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/transactions/columns.tsx @@ -3,9 +3,8 @@ import { ColumnDef } from "@tanstack/react-table"; import { Badge } from "@/src/components/ui/badge"; -import { labels, statuses } from "./constants"; +import { statuses } from "./constants"; import { DataTableColumnHeader } from "../common/data-table/data-table-column-header"; -import { DataTableRowActions } from "../common/data-table/data-table-row-actions"; import { Transaction } from "@/src/types/interfaces/TransactionInterfaces"; import TruncatedAddress from "../common/truncated-address"; diff --git a/tools/obscuroscan_v3/frontend/src/components/ui/external-link.tsx b/tools/obscuroscan_v3/frontend/src/components/ui/external-link.tsx index 184e31ad5c..13366137ea 100644 --- a/tools/obscuroscan_v3/frontend/src/components/ui/external-link.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/ui/external-link.tsx @@ -15,7 +15,7 @@ const ExternalLink = ({ href={href} target="_blank" rel="noopener noreferrer" - className={`hover:underline ${className}`} + className={`flex items-center hover:underline ${className}`} > {children} diff --git a/tools/obscuroscan_v3/frontend/src/routes/index.ts b/tools/obscuroscan_v3/frontend/src/routes/index.ts index 4c15b9ef09..d325a62e6d 100644 --- a/tools/obscuroscan_v3/frontend/src/routes/index.ts +++ b/tools/obscuroscan_v3/frontend/src/routes/index.ts @@ -84,5 +84,5 @@ export const NavLinks: NavLink[] = [ ]; export const externalLinks = { - etherscanBlock: "https://etherscan.io/block/:hash", + etherscanBlock: "https://etherscan.io/block/", }; diff --git a/tools/obscuroscan_v3/frontend/src/services/useTransactionsService.ts b/tools/obscuroscan_v3/frontend/src/services/useTransactionsService.ts index 85dbf52bd9..0bb34f482f 100644 --- a/tools/obscuroscan_v3/frontend/src/services/useTransactionsService.ts +++ b/tools/obscuroscan_v3/frontend/src/services/useTransactionsService.ts @@ -51,15 +51,15 @@ export const useTransactionsService = () => { refetchInterval: noPolling ? false : pollingInterval, }); - const personalTransactions = async (payload?: { - pagination: { offset: number; size: number }; - }) => { + const personalTransactions = async () => { try { setPersonalTxnsLoading(true); if (provider) { const requestPayload = { address: walletAddress, - ...payload, + pagination: { + ...options, + }, }; const personalTxData = await provider.send(ethMethods.getStorageAt, [ "listPersonalTransactions", @@ -70,6 +70,8 @@ export const useTransactionsService = () => { } } catch (error) { showToast(ToastType.DESTRUCTIVE, "Error fetching personal transactions"); + console.error("Error fetching personal transactions:", error); + throw error; } finally { setPersonalTxnsLoading(false); } diff --git a/tools/obscuroscan_v3/frontend/src/types/interfaces/TransactionInterfaces.ts b/tools/obscuroscan_v3/frontend/src/types/interfaces/TransactionInterfaces.ts index cfa92bcb84..8f3eca5ad9 100644 --- a/tools/obscuroscan_v3/frontend/src/types/interfaces/TransactionInterfaces.ts +++ b/tools/obscuroscan_v3/frontend/src/types/interfaces/TransactionInterfaces.ts @@ -26,11 +26,21 @@ export type PersonalTransactionsResponse = { Total: number; }; +export type TransactionType = 0x0 | 0x1 | 0x2 | 0x3; + export type PersonalTransactions = { id: number; blockNumber: string; transactionHash: string; - status: "Success" | "Failed"; + status: string; gasUsed: string; blockHash: string; + contractAddress: string; + cumulativeGasUsed: string; + effectiveGasPrice: string; + logs: any[]; + logsBloom: string; + root: string; + transactionIndex: string; + type: TransactionType; }; From 27baea84b55de6b997b80010db3132e5eb175423 Mon Sep 17 00:00:00 2001 From: Jennifer Echenim Date: Fri, 8 Dec 2023 17:45:55 +0400 Subject: [PATCH 08/14] view single block on etherscan --- .../src/components/modules/blocks/columns.tsx | 22 ++++++++++--------- .../frontend/src/routes/index.ts | 3 ++- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/blocks/columns.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/blocks/columns.tsx index 9a13b87361..30677c3931 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/blocks/columns.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/blocks/columns.tsx @@ -3,14 +3,13 @@ import { ColumnDef } from "@tanstack/react-table"; import { DataTableColumnHeader } from "../common/data-table/data-table-column-header"; -import { DataTableRowActions } from "../common/data-table/data-table-row-actions"; import { Block, BlockHeader } from "@/src/types/interfaces/BlockInterfaces"; import TruncatedAddress from "../common/truncated-address"; import { formatTimeAgo } from "@/src/lib/utils"; import { Badge } from "../../ui/badge"; import ExternalLink from "../../ui/external-link"; -import { pathToUrl } from "@/src/routes/router"; import { externalLinks } from "@/src/routes"; +import { EyeOpenIcon } from "@radix-ui/react-icons"; export const columns: ColumnDef[] = [ { @@ -108,13 +107,7 @@ export const columns: ColumnDef[] = [ ), cell: ({ row }) => { const blockHeader = row.original.blockHeader as BlockHeader; - return ( - - - - ); + return ; }, enableSorting: false, enableHiding: false, @@ -146,6 +139,15 @@ export const columns: ColumnDef[] = [ }, { id: "actions", - cell: ({ row }) => , + cell: ({ row }) => { + const blockHeader = row.original.blockHeader as BlockHeader; + return ( + + + + ); + }, }, ]; diff --git a/tools/obscuroscan_v3/frontend/src/routes/index.ts b/tools/obscuroscan_v3/frontend/src/routes/index.ts index d325a62e6d..ebd6e29ecd 100644 --- a/tools/obscuroscan_v3/frontend/src/routes/index.ts +++ b/tools/obscuroscan_v3/frontend/src/routes/index.ts @@ -84,5 +84,6 @@ export const NavLinks: NavLink[] = [ ]; export const externalLinks = { - etherscanBlock: "https://etherscan.io/block/", + // Dev and UAT environments don't have etherscan, hence, we're hardcoding this to just Sepolia + etherscanBlock: "https://sepolia.etherscan.io/block/", }; From 98bf41326898045adb483c7098531c83bc55a3ea Mon Sep 17 00:00:00 2001 From: Jennifer Echenim Date: Fri, 8 Dec 2023 19:44:45 +0400 Subject: [PATCH 09/14] fix undefined error --- .../src/components/modules/common/network-status.tsx | 9 ++++----- .../frontend/src/components/modules/dashboard/index.tsx | 2 +- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/common/network-status.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/common/network-status.tsx index 9fa5815233..0a00448dad 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/common/network-status.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/common/network-status.tsx @@ -8,7 +8,9 @@ const MessageContent = ( ); export const NetworkStatus = ({ message = MessageContent }) => { - const [isOnline, setIsOnline] = React.useState(true); + const [isOnline, setIsOnline] = React.useState( + navigator ? navigator.onLine : true + ); React.useEffect(() => { const setOnlineStatus = () => { @@ -30,10 +32,7 @@ export const NetworkStatus = ({ message = MessageContent }) => { isOnline ? "translate-x-full" : "translate-x-0" }`} > -
setIsOnline(true)} - > +
{message}
diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/dashboard/index.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/dashboard/index.tsx index a9faeac6b5..ed13bd8c5f 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/dashboard/index.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/dashboard/index.tsx @@ -39,7 +39,7 @@ export default function Dashboard() { const DASHBOARD_DATA = [ { title: "Ether Price", - value: `$${price?.ethereum?.usd}` || "N/A", + value: price?.ethereum?.usd || "N/A", // TODO: add change // change: "+20.1%", icon: RocketIcon, From 56c87a940bb2b29f6895b15f079e33b858de9c88 Mon Sep 17 00:00:00 2001 From: Jennifer Echenim Date: Mon, 11 Dec 2023 13:22:18 +0400 Subject: [PATCH 10/14] - update hex conversion - update pagination calculation --- tools/obscuroscan_v3/frontend/pages/_app.tsx | 2 +- .../frontend/src/components/modules/blocks/columns.tsx | 10 ++++++---- .../modules/common/data-table/data-table.tsx | 2 +- .../src/components/modules/transactions/columns.tsx | 4 ---- tools/obscuroscan_v3/frontend/src/hooks/useCopy.ts | 9 +++++---- tools/obscuroscan_v3/frontend/src/lib/constants.ts | 2 ++ .../frontend/src/services/useTransactionsService.ts | 2 +- 7 files changed, 16 insertions(+), 15 deletions(-) diff --git a/tools/obscuroscan_v3/frontend/pages/_app.tsx b/tools/obscuroscan_v3/frontend/pages/_app.tsx index 5fc5c60688..287ecf806d 100644 --- a/tools/obscuroscan_v3/frontend/pages/_app.tsx +++ b/tools/obscuroscan_v3/frontend/pages/_app.tsx @@ -27,7 +27,7 @@ export default function App({ Component, pageProps }: AppProps) { }, onError: (error: any, mutation: any) => { if (error?.response?.data?.message) { - showToast(ToastType.DESTRUCTIVE, mutation?.message); + showToast(ToastType.DESTRUCTIVE, error?.response?.data?.message); } }, }); diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/blocks/columns.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/blocks/columns.tsx index 30677c3931..edf1db25db 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/blocks/columns.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/blocks/columns.tsx @@ -21,7 +21,9 @@ export const columns: ColumnDef[] = [ const blockHeader = row.original.blockHeader as BlockHeader; return (
- {+blockHeader?.number} + + {Number(blockHeader?.number)} +
); }, @@ -55,7 +57,7 @@ export const columns: ColumnDef[] = [ ), cell: ({ row }) => { - return +row.original.rollupHash === 0 ? ( + return Number(row.original.rollupHash) === 0 ? ( No rollup ) : ( @@ -74,7 +76,7 @@ export const columns: ColumnDef[] = [ return (
- {+blockHeader?.gasUsed} + {Number(blockHeader?.gasUsed)}
); @@ -92,7 +94,7 @@ export const columns: ColumnDef[] = [ return (
- {+blockHeader?.gasLimit} + {Number(blockHeader?.gasLimit)}
); diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/common/data-table/data-table.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/common/data-table/data-table.tsx index 477ebbd53e..fd40684ced 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/common/data-table/data-table.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/common/data-table/data-table.tsx @@ -90,7 +90,7 @@ export function DataTable({ const { pageIndex, pageSize } = table.getState().pagination; React.useEffect(() => { - const params = { ...query, page: pageIndex + 1, size: pageSize }; + const params = { ...query, page: pageIndex, size: pageSize }; push({ pathname, query: params }); // eslint-disable-next-line react-hooks/exhaustive-deps }, [pageIndex, pageSize]); diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/transactions/columns.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/transactions/columns.tsx index 334b2c8b3e..e27cb0d590 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/transactions/columns.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/transactions/columns.tsx @@ -65,8 +65,4 @@ export const columns: ColumnDef[] = [ return value.includes(row.getValue(id)); }, }, - // { - // id: "actions", - // cell: ({ row }) => , - // }, ]; diff --git a/tools/obscuroscan_v3/frontend/src/hooks/useCopy.ts b/tools/obscuroscan_v3/frontend/src/hooks/useCopy.ts index 07edcce173..3b71924ba5 100644 --- a/tools/obscuroscan_v3/frontend/src/hooks/useCopy.ts +++ b/tools/obscuroscan_v3/frontend/src/hooks/useCopy.ts @@ -1,12 +1,12 @@ import React from "react"; import { showToast } from "../components/ui/use-toast"; import { ToastType } from "../types/interfaces"; +import { RESET_COPIED_TIMEOUT } from "../lib/constants"; export const useCopy = () => { const [copied, setCopied] = React.useState(false); - - const copyToClipboard = (text: string, name?: string) => { - copyText(text) + const copyToClipboard = (text: string, name?: string): Promise => { + return copyText(text) .catch(() => fallbackCopyTextToClipboard(text)) .then(() => { showToast(ToastType.SUCCESS, `${name ? name : "Copied!"}`); @@ -20,6 +20,7 @@ export const useCopy = () => { }) .finally(() => { setTimeout(() => setCopied(false), 1000); + setTimeout(() => setCopied(false), RESET_COPIED_TIMEOUT); }); }; @@ -48,7 +49,7 @@ const fallbackCopyTextToClipboard = (text: string) => { textArea.select(); try { - document.execCommand("copy"); + navigator.clipboard.writeText(text).then(res, rej); } catch (err) { rej(err); } diff --git a/tools/obscuroscan_v3/frontend/src/lib/constants.ts b/tools/obscuroscan_v3/frontend/src/lib/constants.ts index c91b161a27..3ea82d1c79 100644 --- a/tools/obscuroscan_v3/frontend/src/lib/constants.ts +++ b/tools/obscuroscan_v3/frontend/src/lib/constants.ts @@ -9,6 +9,8 @@ export const pollingInterval = 5000; export const maxRetries = 3; export const pricePollingInterval = 60 * 1000; +export const RESET_COPIED_TIMEOUT = 2000; + export const getOptions = (query: { page?: string | string[]; size?: string | string[]; diff --git a/tools/obscuroscan_v3/frontend/src/services/useTransactionsService.ts b/tools/obscuroscan_v3/frontend/src/services/useTransactionsService.ts index 0bb34f482f..0eb5ac01aa 100644 --- a/tools/obscuroscan_v3/frontend/src/services/useTransactionsService.ts +++ b/tools/obscuroscan_v3/frontend/src/services/useTransactionsService.ts @@ -69,8 +69,8 @@ export const useTransactionsService = () => { setPersonalTxns(personalTxData); } } catch (error) { - showToast(ToastType.DESTRUCTIVE, "Error fetching personal transactions"); console.error("Error fetching personal transactions:", error); + showToast(ToastType.DESTRUCTIVE, "Error fetching personal transactions"); throw error; } finally { setPersonalTxnsLoading(false); From 7a6ff3afc853c91c3b72b2a59df5bcc7000bf144 Mon Sep 17 00:00:00 2001 From: Jennifer Echenim Date: Mon, 11 Dec 2023 13:57:53 +0400 Subject: [PATCH 11/14] fix: pagination offset --- .../modules/common/data-table/data-table.tsx | 2 +- .../src/components/modules/common/network-status.tsx | 10 +++++----- tools/obscuroscan_v3/frontend/src/lib/constants.ts | 9 ++++++--- 3 files changed, 12 insertions(+), 9 deletions(-) diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/common/data-table/data-table.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/common/data-table/data-table.tsx index fd40684ced..477ebbd53e 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/common/data-table/data-table.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/common/data-table/data-table.tsx @@ -90,7 +90,7 @@ export function DataTable({ const { pageIndex, pageSize } = table.getState().pagination; React.useEffect(() => { - const params = { ...query, page: pageIndex, size: pageSize }; + const params = { ...query, page: pageIndex + 1, size: pageSize }; push({ pathname, query: params }); // eslint-disable-next-line react-hooks/exhaustive-deps }, [pageIndex, pageSize]); diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/common/network-status.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/common/network-status.tsx index 0a00448dad..6f9be08af4 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/common/network-status.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/common/network-status.tsx @@ -1,3 +1,4 @@ +import { cn } from "@/src/lib/utils"; import React from "react"; const MessageContent = ( @@ -8,9 +9,7 @@ const MessageContent = ( ); export const NetworkStatus = ({ message = MessageContent }) => { - const [isOnline, setIsOnline] = React.useState( - navigator ? navigator.onLine : true - ); + const [isOnline, setIsOnline] = React.useState(true); React.useEffect(() => { const setOnlineStatus = () => { @@ -28,9 +27,10 @@ export const NetworkStatus = ({ message = MessageContent }) => { return (
{message} diff --git a/tools/obscuroscan_v3/frontend/src/lib/constants.ts b/tools/obscuroscan_v3/frontend/src/lib/constants.ts index 3ea82d1c79..c4047556f2 100644 --- a/tools/obscuroscan_v3/frontend/src/lib/constants.ts +++ b/tools/obscuroscan_v3/frontend/src/lib/constants.ts @@ -15,10 +15,13 @@ export const getOptions = (query: { page?: string | string[]; size?: string | string[]; }) => { + const offset = + query.page && query.size + ? (parseInt(query.page as string, 10) - 1) * + parseInt(query.size as string, 10) + : 0; const options = { - offset: Number.isNaN(parseInt(query.page as string, 10)) - ? 1 - : parseInt(query.page as string, 10), + offset: Number.isNaN(offset) ? 0 : offset, size: Number.isNaN(parseInt(query.size as string, 10)) ? 10 : parseInt(query.size as string, 10), From e9c5f7d33a27d849b72215427f9fb5fc4d309d0e Mon Sep 17 00:00:00 2001 From: Jennifer Echenim Date: Mon, 11 Dec 2023 14:08:11 +0400 Subject: [PATCH 12/14] fix: personal transactions --- .../src/components/modules/common/connect-wallet.tsx | 9 +++++++-- .../src/components/modules/common/truncated-address.tsx | 4 +++- .../frontend/src/services/useTransactionsService.ts | 1 + 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/common/connect-wallet.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/common/connect-wallet.tsx index 4d5d1fb258..76bd57f435 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/common/connect-wallet.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/common/connect-wallet.tsx @@ -2,8 +2,9 @@ import { useWalletConnection } from "@/src/components/providers/wallet-provider" import { Button } from "@/src/components/ui/button"; import { Link2Icon, LinkBreak2Icon } from "@radix-ui/react-icons"; import React from "react"; +import TruncatedAddress from "./truncated-address"; const ConnectWalletButton = () => { - const { walletConnected, connectWallet, disconnectWallet } = + const { walletConnected, walletAddress, connectWallet, disconnectWallet } = useWalletConnection(); return ( @@ -15,7 +16,11 @@ const ConnectWalletButton = () => { {walletConnected ? ( <> - Disconnect + {walletAddress ? ( + + ) : ( + "Wallet" + )} ) : ( <> diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/common/truncated-address.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/common/truncated-address.tsx index 5e0199c865..5652e14941 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/common/truncated-address.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/common/truncated-address.tsx @@ -13,10 +13,12 @@ const TruncatedAddress = ({ address, prefixLength, suffixLength, + showCopy, }: { address: string; prefixLength?: number; suffixLength?: number; + showCopy?: boolean; }) => { const truncatedAddress = `${address?.substring( 0, @@ -35,7 +37,7 @@ const TruncatedAddress = ({ - + {showCopy && }
) : (
N/A
diff --git a/tools/obscuroscan_v3/frontend/src/services/useTransactionsService.ts b/tools/obscuroscan_v3/frontend/src/services/useTransactionsService.ts index 0eb5ac01aa..f51f7d7f79 100644 --- a/tools/obscuroscan_v3/frontend/src/services/useTransactionsService.ts +++ b/tools/obscuroscan_v3/frontend/src/services/useTransactionsService.ts @@ -70,6 +70,7 @@ export const useTransactionsService = () => { } } catch (error) { console.error("Error fetching personal transactions:", error); + setPersonalTxns(undefined); showToast(ToastType.DESTRUCTIVE, "Error fetching personal transactions"); throw error; } finally { From 31922244b48a20d77fb9ab2570632fc439da45ba Mon Sep 17 00:00:00 2001 From: Jennifer Echenim Date: Mon, 11 Dec 2023 14:10:47 +0400 Subject: [PATCH 13/14] fix: copy fallback func --- tools/obscuroscan_v3/frontend/src/hooks/useCopy.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/tools/obscuroscan_v3/frontend/src/hooks/useCopy.ts b/tools/obscuroscan_v3/frontend/src/hooks/useCopy.ts index 3b71924ba5..d64850b444 100644 --- a/tools/obscuroscan_v3/frontend/src/hooks/useCopy.ts +++ b/tools/obscuroscan_v3/frontend/src/hooks/useCopy.ts @@ -19,7 +19,6 @@ export const useCopy = () => { ); }) .finally(() => { - setTimeout(() => setCopied(false), 1000); setTimeout(() => setCopied(false), RESET_COPIED_TIMEOUT); }); }; @@ -49,7 +48,7 @@ const fallbackCopyTextToClipboard = (text: string) => { textArea.select(); try { - navigator.clipboard.writeText(text).then(res, rej); + document.execCommand("copy"); } catch (err) { rej(err); } From 4949f0db8af09a8db20a34318260bbbd60982b73 Mon Sep 17 00:00:00 2001 From: Jennifer Echenim Date: Mon, 11 Dec 2023 14:52:32 +0400 Subject: [PATCH 14/14] update single batch component --- .../frontend/pages/batches/[hash].tsx | 4 ++-- .../modules/batches/batch-details.tsx | 18 ++++++++++++------ .../modules/common/connect-wallet.tsx | 2 +- .../modules/common/truncated-address.tsx | 2 +- 4 files changed, 16 insertions(+), 10 deletions(-) diff --git a/tools/obscuroscan_v3/frontend/pages/batches/[hash].tsx b/tools/obscuroscan_v3/frontend/pages/batches/[hash].tsx index 1e8d2e29a8..964444aa77 100644 --- a/tools/obscuroscan_v3/frontend/pages/batches/[hash].tsx +++ b/tools/obscuroscan_v3/frontend/pages/batches/[hash].tsx @@ -30,9 +30,9 @@ export default function Batch() { ) : batchDetails ? ( - Batch #{batchDetails?.Header?.number} + Batch #{Number(batchDetails?.Header?.number)} - Overview of the batch #{batchDetails?.Header?.number} + Overview of the batch #{Number(batchDetails?.Header?.number)} diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/batches/batch-details.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/batches/batch-details.tsx index a5f2903353..c6c2edf8d5 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/batches/batch-details.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/batches/batch-details.tsx @@ -15,7 +15,7 @@ export function BatchDetailsComponent({ + + - - @@ -95,7 +101,7 @@ export function BatchDetailsComponent({ diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/common/connect-wallet.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/common/connect-wallet.tsx index 76bd57f435..ce29123e27 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/common/connect-wallet.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/common/connect-wallet.tsx @@ -17,7 +17,7 @@ const ConnectWalletButton = () => { <> {walletAddress ? ( - + ) : ( "Wallet" )} diff --git a/tools/obscuroscan_v3/frontend/src/components/modules/common/truncated-address.tsx b/tools/obscuroscan_v3/frontend/src/components/modules/common/truncated-address.tsx index 5652e14941..a72a0f1392 100644 --- a/tools/obscuroscan_v3/frontend/src/components/modules/common/truncated-address.tsx +++ b/tools/obscuroscan_v3/frontend/src/components/modules/common/truncated-address.tsx @@ -13,7 +13,7 @@ const TruncatedAddress = ({ address, prefixLength, suffixLength, - showCopy, + showCopy = true, }: { address: string; prefixLength?: number;