├── .eslintrc.json
├── public
    ├── favicon.ico
    ├── regionx-logo.png
    ├── kusama-logo.svg
    └── polkadot-logo.svg
├── app
    ├── twitter-image.png
    ├── opengraph-image.png
    ├── page.tsx
    ├── history
    │   └── page.tsx
    ├── subscribe
    │   ├── post-tx.ts
    │   ├── subscribe-tx.ts
    │   └── page.tsx
    └── layout.tsx
├── postcss.config.js
├── types
    └── nav.ts
├── next.config.mjs
├── components
    ├── ui
    │   ├── skeleton.tsx
    │   ├── input.tsx
    │   ├── download-json.button.tsx
    │   ├── sonner.tsx
    │   ├── checkbox.tsx
    │   ├── tooltip.tsx
    │   ├── button.tsx
    │   ├── dialog.tsx
    │   ├── alert-dialog.tsx
    │   ├── select.tsx
    │   └── dropdown-menu.tsx
    ├── theme-provider.tsx
    ├── footer.tsx
    ├── tailwind-indicator.tsx
    ├── theme-toggle.tsx
    ├── tooltip-title.tsx
    ├── network-select.tsx
    ├── site-header.tsx
    ├── main-nav.tsx
    ├── providers.tsx
    ├── registered-chains.tsx
    ├── chain-select.tsx
    ├── Chart.tsx
    ├── connect-button.tsx
    ├── consumption-chart.tsx
    ├── consumption-grid.tsx
    ├── icons.tsx
    └── historic-consumption.tsx
├── components.json
├── lib
    ├── fonts.ts
    └── utils.ts
├── .gitignore
├── README.md
├── hooks
    ├── use-registered-chains.ts
    └── use-consumption.ts
├── tsconfig.json
├── common
    ├── types.ts
    └── chaindata.ts
├── prettier.config.js
├── config
    └── site.ts
├── providers
    └── chain-provider.tsx
├── package.json
├── styles
    └── globals.css
└── tailwind.config.js


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BoredApe8461/CorespaceWeigher-ui/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/app/twitter-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BoredApe8461/CorespaceWeigher-ui/HEAD/app/twitter-image.png


--------------------------------------------------------------------------------
/app/opengraph-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BoredApe8461/CorespaceWeigher-ui/HEAD/app/opengraph-image.png


--------------------------------------------------------------------------------
/public/regionx-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/BoredApe8461/CorespaceWeigher-ui/HEAD/public/regionx-logo.png


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/types/nav.ts:
--------------------------------------------------------------------------------
1 | export interface NavItem {
2 |   title: string
3 |   href?: string
4 |   disabled?: boolean
5 |   external?: boolean
6 | }
7 | 


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 |   reactStrictMode: true,
4 | }
5 | 
6 | export default nextConfig
7 | 


--------------------------------------------------------------------------------
/components/ui/skeleton.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from "@/lib/utils"
 2 | 
 3 | function Skeleton({
 4 |   className,
 5 |   ...props
 6 | }: React.HTMLAttributes<HTMLDivElement>) {
 7 |   return (
 8 |     <div
 9 |       className={cn("animate-pulse rounded-md bg-muted", className)}
10 |       {...props}
11 |     />
12 |   )
13 | }
14 | 
15 | export { Skeleton }
16 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "default",
 4 |   "tailwind": {
 5 |     "config": "tailwind.config.js",
 6 |     "css": "app/globals.css",
 7 |     "baseColor": "slate",
 8 |     "cssVariables": true
 9 |   },
10 |   "rsc": false,
11 |   "aliases": {
12 |     "utils": "@/lib/utils",
13 |     "components": "@/components"
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/components/theme-provider.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import { ThemeProvider as NextThemesProvider } from "next-themes"
 5 | import { type ThemeProviderProps } from "next-themes/dist/types"
 6 | 
 7 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
 8 |   return <NextThemesProvider {...props}>{children}</NextThemesProvider>
 9 | }
10 | 


--------------------------------------------------------------------------------
/lib/fonts.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   JetBrains_Mono as FontMono,
 3 |   Inter as FontSans,
 4 |   Inter,
 5 | } from "next/font/google"
 6 | 
 7 | export const fontSans = FontSans({
 8 |   subsets: ["latin"],
 9 |   variable: "--font-sans",
10 | })
11 | 
12 | export const fontMono = FontMono({
13 |   subsets: ["latin"],
14 |   variable: "--font-mono",
15 | })
16 | 
17 | export const inter = Inter({ subsets: ["latin"] })
18 | 


--------------------------------------------------------------------------------
/components/footer.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import Link from "next/link"
 3 | 
 4 | import Image from "next/image"
 5 | 
 6 | export function Footer() {
 7 |   return (
 8 |     <div className="flex justify-center my-6">
 9 |       <Link href="https://regionx.tech" className="flex items-center space-x-2">
10 |         <h3 className="inline-block font-bold text-xl">RegionX</h3>
11 |         <Image src="/regionx-logo.png" alt="RegionX" width="50" height="50" />
12 |       </Link>
13 |     </div>
14 |   )
15 | }
16 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env*.local
29 | 
30 | # vercel
31 | .vercel
32 | 
33 | # typescript
34 | *.tsbuildinfo
35 | next-env.d.ts
36 | 


--------------------------------------------------------------------------------
/lib/utils.ts:
--------------------------------------------------------------------------------
 1 | import { clsx, type ClassValue } from "clsx"
 2 | import { twMerge } from "tailwind-merge"
 3 | 
 4 | export function cn(...inputs: ClassValue[]) {
 5 |   return twMerge(clsx(inputs))
 6 | }
 7 | 
 8 | export function uppercaseFirstLetter(str: string) {
 9 |   return str.charAt(0).toUpperCase() + str.slice(1)
10 | }
11 | 
12 | export const truncateHash = (
13 |   hash: string | undefined,
14 |   paddingLength = 6
15 | ): string | undefined => {
16 |   if (!hash?.length) return undefined
17 |   if (hash.length <= paddingLength * 2 + 1) return hash
18 |   return hash.replace(
19 |     hash.substring(paddingLength, hash.length - paddingLength),
20 |     "…"
21 |   )
22 | }
23 | 


--------------------------------------------------------------------------------
/components/tailwind-indicator.tsx:
--------------------------------------------------------------------------------
 1 | export function TailwindIndicator() {
 2 |   if (process.env.NODE_ENV === "production") return null
 3 | 
 4 |   return (
 5 |     <div className="fixed bottom-1 left-1 z-50 flex h-6 w-6 items-center justify-center rounded-full bg-gray-800 p-3 font-mono text-xs text-white">
 6 |       <div className="block sm:hidden">xs</div>
 7 |       <div className="hidden sm:block md:hidden">sm</div>
 8 |       <div className="hidden md:block lg:hidden">md</div>
 9 |       <div className="hidden lg:block xl:hidden">lg</div>
10 |       <div className="hidden xl:block 2xl:hidden">xl</div>
11 |       <div className="hidden 2xl:block">2xl</div>
12 |     </div>
13 |   )
14 | }
15 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Polkadot utilization tracker
 2 | 
 3 | Keeps track of blockspace utilization of each Polkadot parachain.
 4 | 
 5 | ## Usage
 6 | 
 7 | ```bash
 8 | # Install dependencies
 9 | npm install
10 | 
11 | # Run dev server
12 | npm run dev
13 | 
14 | # Build for prod and export static website
15 | npm run build
16 | ```
17 | 
18 | ## Features
19 | 
20 | - useInkathon
21 | - Next.js 13 App Directory
22 | - Radix UI Primitives
23 | - Tailwind CSS
24 | - Icons from [Lucide](https://lucide.dev)
25 | - Dark mode with `next-themes`
26 | - Tailwind CSS class sorting, merging and linting.
27 | 
28 | ## License
29 | 
30 | Licensed under the [MIT license](https://github.com/shadcn/ui/blob/main/LICENSE.md).
31 | 


--------------------------------------------------------------------------------
/components/theme-toggle.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import { Moon, Sun } from "lucide-react"
 5 | import { useTheme } from "next-themes"
 6 | 
 7 | import { Button } from "@/components/ui/button"
 8 | 
 9 | export function ThemeToggle() {
10 |   const { setTheme, theme } = useTheme()
11 | 
12 |   return (
13 |     <Button
14 |       variant="ghost"
15 |       size="icon"
16 |       onClick={() => setTheme(theme === "light" ? "dark" : "light")}
17 |     >
18 |       <Sun className="h-[1.5rem] w-[1.3rem] dark:hidden" />
19 |       <Moon className="hidden h-5 w-5 dark:block" />
20 |       <span className="sr-only">Toggle theme</span>
21 |     </Button>
22 |   )
23 | }
24 | 


--------------------------------------------------------------------------------
/hooks/use-registered-chains.ts:
--------------------------------------------------------------------------------
 1 | import { Network } from "@/common/types"
 2 | import { useQuery } from "react-query"
 3 | 
 4 | import { siteConfig } from "@/config/site"
 5 | 
 6 | export type TypeRegisteredChainQuery = {
 7 |   name: string
 8 |   rpcs: string[]
 9 |   para_id: number
10 |   relay_chain: Network
11 |   expiry_timestamp: Date
12 | }[]
13 | 
14 | export function useRegisteredChains() {
15 |   const endpoint = `${siteConfig.backendUrl}/registry`
16 | 
17 |   return useQuery<TypeRegisteredChainQuery, Error>({
18 |     queryKey: "registeredChains",
19 |     queryFn: async () => {
20 |       const res = await fetch(endpoint)
21 |       if (!res.ok) {
22 |         throw new Error("Network response was not ok")
23 |       }
24 |       return res.json()
25 |     },
26 |     retry: 1,
27 |   })
28 | }
29 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "lib": ["dom", "dom.iterable", "esnext"],
 4 |     "allowJs": true,
 5 |     "skipLibCheck": true,
 6 |     "strict": true,
 7 |     "forceConsistentCasingInFileNames": true,
 8 |     "noEmit": true,
 9 |     "incremental": true,
10 |     "esModuleInterop": true,
11 |     "module": "esnext",
12 |     "moduleResolution": "node",
13 |     "resolveJsonModule": true,
14 |     "isolatedModules": true,
15 |     "jsx": "preserve",
16 |     "baseUrl": ".",
17 |     "paths": {
18 |       "@/*": ["./*"]
19 |     },
20 |     "plugins": [
21 |       {
22 |         "name": "next"
23 |       }
24 |     ],
25 |     "strictNullChecks": true
26 |   },
27 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
28 |   "exclude": ["node_modules"]
29 | }
30 | 


--------------------------------------------------------------------------------
/common/types.ts:
--------------------------------------------------------------------------------
 1 | export type ConsumptionDatum = {
 2 |   group: string
 3 |   ref_time: {
 4 |     normal: number
 5 |     operational: number
 6 |     mandatory: number
 7 |   }
 8 |   proof_size: {
 9 |     normal: number
10 |     operational: number
11 |     mandatory: number
12 |   }
13 |   count: number
14 | }
15 | 
16 | export type ConsumptionDataSeries = {
17 |   label: string
18 |   data: ConsumptionDatum[]
19 | }
20 | 
21 | export type Consumption = {
22 |   normal: number
23 |   operational: number
24 |   mandatory: number
25 |   total: number
26 | }
27 | 
28 | export type DataDisplay = "ref_time" | "proof_size" | "both"
29 | 
30 | export type Network = "polkadot" | "kusama"
31 | export type DateRange = "hour" | "day" | "week" | "month" | "year" | "all"
32 | export type Grouping = "day" | "minute" | "week" | "month" | "year"
33 | 


--------------------------------------------------------------------------------
/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | export interface InputProps
 6 |   extends React.InputHTMLAttributes<HTMLInputElement> {}
 7 | 
 8 | const Input = React.forwardRef<HTMLInputElement, InputProps>(
 9 |   ({ className, type, ...props }, ref) => {
10 |     return (
11 |       <input
12 |         type={type}
13 |         className={cn(
14 |           "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
15 |           className
16 |         )}
17 |         ref={ref}
18 |         {...props}
19 |       />
20 |     )
21 |   }
22 | )
23 | Input.displayName = "Input"
24 | 
25 | export { Input }
26 | 


--------------------------------------------------------------------------------
/components/ui/download-json.button.tsx:
--------------------------------------------------------------------------------
 1 | import { Button } from "./button"
 2 | 
 3 | const DownloadJSONButton = ({
 4 |   jsonData,
 5 |   fileName,
 6 |   children,
 7 |   className,
 8 |   ...props
 9 | }: {
10 |   jsonData: any
11 |   fileName: string
12 |   className: string
13 |   children: React.ReactNode
14 |   props?: any
15 | }) => {
16 |   const downloadJson = () => {
17 |     const jsonBlob = new Blob([JSON.stringify(jsonData)], {
18 |       type: "application/json",
19 |     })
20 |     const url = window.URL.createObjectURL(jsonBlob)
21 |     const link = document.createElement("a")
22 |     link.href = url
23 |     link.setAttribute("download", fileName)
24 |     document.body.appendChild(link)
25 |     link.click()
26 |     document.body.removeChild(link)
27 |   }
28 | 
29 |   return (
30 |     <Button onClick={downloadJson} className={className} {...props}>
31 |       {children}
32 |     </Button>
33 |   )
34 | }
35 | 
36 | export default DownloadJSONButton
37 | 


--------------------------------------------------------------------------------
/prettier.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('prettier').Config} */
 2 | module.exports = {
 3 |   endOfLine: "lf",
 4 |   semi: false,
 5 |   singleQuote: false,
 6 |   tabWidth: 2,
 7 |   trailingComma: "es5",
 8 |   importOrder: [
 9 |     "^(react/(.*)$)|^(react$)",
10 |     "^(next/(.*)$)|^(next$)",
11 |     "<THIRD_PARTY_MODULES>",
12 |     "",
13 |     "^types$",
14 |     "^@/types/(.*)$",
15 |     "^@/config/(.*)$",
16 |     "^@/lib/(.*)$",
17 |     "^@/hooks/(.*)$",
18 |     "^@/components/ui/(.*)$",
19 |     "^@/components/(.*)$",
20 |     "^@/styles/(.*)$",
21 |     "^@/app/(.*)$",
22 |     "",
23 |     "^[./]",
24 |   ],
25 |   importOrderSeparation: false,
26 |   importOrderSortSpecifiers: true,
27 |   importOrderBuiltinModulesToTop: true,
28 |   importOrderParserPlugins: ["typescript", "jsx", "decorators-legacy"],
29 |   importOrderMergeDuplicateImports: true,
30 |   importOrderCombineTypeAndValueImports: true,
31 |   plugins: ["@ianvs/prettier-plugin-sort-imports"],
32 | }
33 | 


--------------------------------------------------------------------------------
/components/ui/sonner.tsx:
--------------------------------------------------------------------------------
 1 | import { useTheme } from "next-themes"
 2 | import { Toaster as Sonner } from "sonner"
 3 | 
 4 | type ToasterProps = React.ComponentProps<typeof Sonner>
 5 | 
 6 | const Toaster = ({ ...props }: ToasterProps) => {
 7 |   const { theme = "system" } = useTheme()
 8 | 
 9 |   return (
10 |     <Sonner
11 |       theme={theme as ToasterProps["theme"]}
12 |       className="toaster group"
13 |       toastOptions={{
14 |         classNames: {
15 |           toast:
16 |             "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
17 |           description: "group-[.toast]:text-muted-foreground",
18 |           actionButton:
19 |             "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
20 |           cancelButton:
21 |             "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
22 |         },
23 |       }}
24 |       {...props}
25 |     />
26 |   )
27 | }
28 | 
29 | export { Toaster }
30 | 


--------------------------------------------------------------------------------
/components/tooltip-title.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import Link from "next/link"
 4 | 
 5 | import {
 6 |   Tooltip,
 7 |   TooltipContent,
 8 |   TooltipProvider,
 9 |   TooltipTrigger,
10 | } from "./ui/tooltip"
11 | 
12 | export function TooltipTitle() {
13 |   return (
14 |     <>
15 |       See all the historic consumption data for{" "}
16 |       <TooltipProvider>
17 |         <Tooltip>
18 |           <TooltipTrigger>
19 |             <span className="underline">registered</span>
20 |           </TooltipTrigger>
21 |           <TooltipContent>
22 |             <div className="flex flex-col max-w-xs">
23 |               Our service provides a way to see the historic consumption data
24 |               for all the registered chains.{" "}
25 |               <Link href="/subscribe" className="underline">
26 |                 ↪ Register a chain here.
27 |               </Link>
28 |             </div>
29 |           </TooltipContent>
30 |         </Tooltip>
31 |       </TooltipProvider>{" "}
32 |       parachains
33 |     </>
34 |   )
35 | }
36 | 


--------------------------------------------------------------------------------
/config/site.ts:
--------------------------------------------------------------------------------
 1 | import { DateRange } from "@/common/types"
 2 | 
 3 | export type SiteConfig = typeof siteConfig
 4 | 
 5 | export const siteConfig = {
 6 |   name: "Polkadot Weigher",
 7 |   description: "Displays utilization of Polkadot parachains.",
 8 |   backendUrl: "https://api.polkadot-weigher.com",
 9 |   blockExplorer: "https://polkadot.subscan.io//extrinsic/",
10 |   subscriptionCost: "100000000000", // cost to register a parachain
11 | 
12 |   mainNav: [
13 |     {
14 |       title: "Historic Consumption",
15 |       href: "/history",
16 |     },
17 |     {
18 |       title: "Parachain Registration",
19 |       href: "/subscribe",
20 |     },
21 |   ],
22 |   links: {
23 |     github: "https://github.com/RegionX-Labs/CorespaceWeigher-ui",
24 |   },
25 |   defaultDateRange: "week" as DateRange,
26 |   rangeGroupingMap: {
27 |     hour: "minute",
28 |     day: "hour",
29 |     week: "hour",
30 |     month: "day",
31 |     year: "month",
32 |     all: "month",
33 |   } as Record<DateRange, "block" | "minute" | "hour" | "day" | "month">,
34 | }
35 | 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
 1 | import ChainSelect from "@/components/chain-select"
 2 | import ConsumptionGrid from "@/components/consumption-grid"
 3 | import NetworkSelect from "@/components/network-select"
 4 | 
 5 | export default function IndexPage() {
 6 |   return (
 7 |     <section className="">
 8 |       <div className="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6">
 9 |         <div className="mx-auto max-w-screen-sm text-center">
10 |           <h2 className="mb-4 text-4xl tracking-tight font-extrabold leading-tight text-gray-900 dark:text-white">
11 |             Current Block Consumption
12 |           </h2>
13 |           <p className="mb-6 font-light text-gray-500 dark:text-gray-400 md:text-lg">
14 |             Monitor the real-time block space utilization of all Polkadot and Kusama parachains.
15 |           </p>
16 |         </div>
17 |         <div className="mb-4 flex gap-4 justify-center">
18 |           <NetworkSelect />
19 |           <ChainSelect />
20 |         </div>
21 |         <ConsumptionGrid />
22 |       </div>
23 |     </section>
24 |   )
25 | }
26 | 


--------------------------------------------------------------------------------
/app/history/page.tsx:
--------------------------------------------------------------------------------
 1 | import ChainSelect from "@/components/chain-select"
 2 | import { HistoricConsumption } from "@/components/historic-consumption"
 3 | import NetworkSelect from "@/components/network-select"
 4 | import { TooltipTitle } from "@/components/tooltip-title"
 5 | 
 6 | export default async function HistoryPage() {
 7 |   return (
 8 |     <section className="">
 9 |       <div className="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6">
10 |         <div className="mx-auto max-w-screen-sm text-center">
11 |           <h2 className="mb-4 text-4xl tracking-tight font-extrabold leading-tight text-gray-900 dark:text-white">
12 |             Historic Consumption
13 |           </h2>
14 |           <p className="mb-6 font-light text-gray-500 dark:text-gray-400 md:text-lg">
15 |             <TooltipTitle />
16 |           </p>
17 |         </div>
18 |         <div className="mb-4 flex gap-4 justify-center">
19 |           <NetworkSelect />
20 |           <ChainSelect onlyRegistered={true} />
21 |         </div>
22 |         <HistoricConsumption />
23 |       </div>
24 |     </section>
25 |   )
26 | }
27 | 


--------------------------------------------------------------------------------
/public/kusama-logo.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <svg xmlns:xodm="http://www.corel.com/coreldraw/odm/2003" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 2500 2500" style="enable-background:new 0 0 2500 2500;" xml:space="preserve">
 3 | <style type="text/css">
 4 | 	.st0{fill-rule:evenodd;clip-rule:evenodd;}
 5 | 	.st1{fill:#FFFFFF;}
 6 | </style>
 7 | <g id="Layer_x0020_1">
 8 | 	<g id="_2234187675152">
 9 | 		<path class="st0" d="M1250,0c690,0,1250,560,1250,1250s-560,1250-1250,1250S0,1940,0,1250S560,0,1250,0z"></path>
10 | 		<path class="st1" d="M2008,784c-32-28-68-50-110-57c-53-7-107,28-142,53c-36,25-107,89-135,114s-100,39-217,110s-573,363-573,363    h117l-530,274h53l-75,57c43,11,85,4,125-18v18c0,0,630-249,751-185l-75,21c7,0,125,7,125,7c7,50,36,96,78,121c71,46,75,75,75,75    s-36,14-36,36c68-21,139-21,203,0c0,0-4-21-53-36c-50-21-93-53-125-100c-28-39-39-89-21-135s78-71,203-135c146-75,182-132,199-178    c18-46,53-132,68-174c14-39,39-71,71-100c39-21,82-39,121-53c7,4-71-61-96-78H2008z"></path>
11 | 	</g>
12 | </g>
13 | </svg>
14 | 


--------------------------------------------------------------------------------
/components/ui/checkbox.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 3 | import { Check } from "lucide-react"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const Checkbox = React.forwardRef<
 8 |   React.ElementRef<typeof CheckboxPrimitive.Root>,
 9 |   React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
10 | >(({ className, ...props }, ref) => (
11 |   <CheckboxPrimitive.Root
12 |     ref={ref}
13 |     className={cn(
14 |       "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
15 |       className
16 |     )}
17 |     {...props}
18 |   >
19 |     <CheckboxPrimitive.Indicator
20 |       className={cn("flex items-center justify-center text-current")}
21 |     >
22 |       <Check className="h-4 w-4" />
23 |     </CheckboxPrimitive.Indicator>
24 |   </CheckboxPrimitive.Root>
25 | ))
26 | Checkbox.displayName = CheckboxPrimitive.Root.displayName
27 | 
28 | export { Checkbox }
29 | 


--------------------------------------------------------------------------------
/components/network-select.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { Network } from "@/common/types"
 4 | import { useChain } from "@/providers/chain-provider"
 5 | 
 6 | import {
 7 |   Select,
 8 |   SelectContent,
 9 |   SelectItem,
10 |   SelectTrigger,
11 |   SelectValue,
12 | } from "@/components/ui/select"
13 | 
14 | import { Icons } from "./icons"
15 | 
16 | const NetworkSelect = () => {
17 |   const { network, setNetwork } = useChain()
18 | 
19 |   return (
20 |     <Select onValueChange={(val: Network) => setNetwork(val)} value={network}>
21 |       <SelectTrigger className="w-[180px]">
22 |         <SelectValue placeholder="Select Network" />
23 |       </SelectTrigger>
24 |       <SelectContent>
25 |         <SelectItem value="polkadot">
26 |           <Icons.polkadot
27 |             width={30}
28 |             height={30}
29 |             className="mr-2 inline-block"
30 |           />
31 |           <span>Polkadot</span>
32 |         </SelectItem>
33 |         <SelectItem value="kusama">
34 |           <Icons.kusama width={30} height={30} className="mr-2 inline-block" />
35 |           <span>Kusama</span>
36 |         </SelectItem>
37 |       </SelectContent>
38 |     </Select>
39 |   )
40 | }
41 | 
42 | export default NetworkSelect
43 | 


--------------------------------------------------------------------------------
/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const TooltipProvider = TooltipPrimitive.Provider
 7 | 
 8 | const Tooltip = TooltipPrimitive.Root
 9 | 
10 | const TooltipTrigger = TooltipPrimitive.Trigger
11 | 
12 | const TooltipContent = React.forwardRef<
13 |   React.ElementRef<typeof TooltipPrimitive.Content>,
14 |   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
15 | >(({ className, sideOffset = 4, ...props }, ref) => (
16 |   <TooltipPrimitive.Content
17 |     ref={ref}
18 |     sideOffset={sideOffset}
19 |     className={cn(
20 |       "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
21 |       className
22 |     )}
23 |     {...props}
24 |   />
25 | ))
26 | TooltipContent.displayName = TooltipPrimitive.Content.displayName
27 | 
28 | export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
29 | 


--------------------------------------------------------------------------------
/public/polkadot-logo.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <svg xmlns:xodm="http://www.corel.com/coreldraw/odm/2003" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 2500 2500" style="enable-background:new 0 0 2500 2500;" xml:space="preserve">
 3 | <style type="text/css">
 4 | 	.st0{fill:none;}
 5 | 	.st1{fill:#E6007A;}
 6 | </style>
 7 | <g id="Layer_x0020_1">
 8 | 	<g id="_2085151875344">
 9 | 		<rect y="0" class="st0" width="2500" height="2500"></rect>
10 | 		<g>
11 | 			<ellipse class="st1" cx="1250" cy="262.2" rx="450.8" ry="262.2"></ellipse>
12 | 			<ellipse class="st1" cx="1250" cy="2237.8" rx="450.8" ry="262.2"></ellipse>
13 | 			
14 | 				<ellipse transform="matrix(0.5 -0.866 0.866 0.5 -457.5668 719.7572)" class="st1" cx="394.6" cy="756.1" rx="450.8" ry="262.4"></ellipse>
15 | 			
16 | 				<ellipse transform="matrix(0.5 -0.866 0.866 0.5 -457.5751 2695.3049)" class="st1" cx="2105.4" cy="1743.9" rx="450.8" ry="262.2"></ellipse>
17 | 			
18 | 				<ellipse transform="matrix(0.866 -0.5 0.5 0.866 -819.0784 430.9572)" class="st1" cx="394.6" cy="1743.9" rx="262.4" ry="450.8"></ellipse>
19 | 			
20 | 				<ellipse transform="matrix(0.866 -0.5 0.5 0.866 -96.0081 1154.1161)" class="st1" cx="2105.6" cy="756.2" rx="262.2" ry="450.8"></ellipse>
21 | 		</g>
22 | 	</g>
23 | </g>
24 | </svg>
25 | 


--------------------------------------------------------------------------------
/components/site-header.tsx:
--------------------------------------------------------------------------------
 1 | import Link from "next/link"
 2 | 
 3 | import { siteConfig } from "@/config/site"
 4 | import { buttonVariants } from "@/components/ui/button"
 5 | import { Icons } from "@/components/icons"
 6 | import { MainNav } from "@/components/main-nav"
 7 | import { ThemeToggle } from "@/components/theme-toggle"
 8 | 
 9 | export function SiteHeader() {
10 |   return (
11 |     <header className="bg-background sticky top-0 z-40 w-full border-b">
12 |       <div className="container flex h-16 items-center space-x-4 sm:justify-between sm:space-x-0">
13 |         <MainNav items={siteConfig.mainNav} />
14 |         <div className="flex flex-1 items-center justify-end space-x-4">
15 |           <nav className="flex items-center space-x-1">
16 |             <Link
17 |               href={siteConfig.links.github}
18 |               target="_blank"
19 |               rel="noreferrer"
20 |             >
21 |               <div
22 |                 className={buttonVariants({
23 |                   size: "icon",
24 |                   variant: "ghost",
25 |                 })}
26 |               >
27 |                 <Icons.gitHub className="h-5 w-5" />
28 |                 <span className="sr-only">GitHub</span>
29 |               </div>
30 |             </Link>
31 |             <ThemeToggle />
32 |           </nav>
33 |         </div>
34 |       </div>
35 |     </header>
36 |   )
37 | }
38 | 


--------------------------------------------------------------------------------
/components/main-nav.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import Link from "next/link"
 3 | import { LucidePercent, LucideScale, LucideWheat } from "lucide-react"
 4 | 
 5 | import { NavItem } from "@/types/nav"
 6 | import { siteConfig } from "@/config/site"
 7 | import { cn } from "@/lib/utils"
 8 | import { Icons } from "@/components/icons"
 9 | 
10 | interface MainNavProps {
11 |   items?: NavItem[]
12 | }
13 | 
14 | export function MainNav({ items }: MainNavProps) {
15 |   return (
16 |     <div className="flex gap-6 md:gap-10">
17 |       <Link href="/" className="flex items-center space-x-2">
18 |         <LucideScale className="h-6 w-6" />
19 |         <span className="inline-block font-bold">{siteConfig.name}</span>
20 |       </Link>
21 |       {items?.length ? (
22 |         <nav className="flex gap-6">
23 |           {items?.map(
24 |             (item, index) =>
25 |               item.href && (
26 |                 <Link
27 |                   key={index}
28 |                   href={item.href}
29 |                   className={cn(
30 |                     "flex items-center text-sm font-medium text-muted-foreground",
31 |                     item.disabled && "cursor-not-allowed opacity-80"
32 |                   )}
33 |                 >
34 |                   {item.title}
35 |                 </Link>
36 |               )
37 |           )}
38 |         </nav>
39 |       ) : null}
40 |     </div>
41 |   )
42 | }
43 | 


--------------------------------------------------------------------------------
/components/providers.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { ChainProvider } from "@/providers/chain-provider"
 4 | import { TooltipProvider } from "@radix-ui/react-tooltip"
 5 | import {
 6 |   SubstrateChain,
 7 |   UseInkathonProvider,
 8 |   development,
 9 | } from "@scio-labs/use-inkathon";
10 | import { QueryClient, QueryClientProvider } from "react-query"
11 | 
12 | import { ThemeProvider } from "./theme-provider"
13 | 
14 | const polkadotRelay: SubstrateChain = {
15 |   network: "Polkadot",
16 |   name: "Polkadot Relay Chain",
17 |   rpcUrls: ["wss://rpc.polkadot.io"],
18 |   ss58Prefix: 0,
19 |   testnet: false,
20 | }
21 | 
22 | const rococoTestnet: SubstrateChain = {
23 |   network: "Rococo",
24 |   name: "Rococo Testnet",
25 |   rpcUrls: ["wss://rococo-rpc.polkadot.io"],
26 |   ss58Prefix: 42,
27 |   testnet: true,
28 | }
29 | 
30 | export function Providers({ children }: { children: React.ReactNode }) {
31 |   const queryClient = new QueryClient()
32 | 
33 |   return (
34 |     <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
35 |       <QueryClientProvider client={queryClient}>
36 |         <ChainProvider>
37 |           <UseInkathonProvider
38 |             appName="Polkadot Weigher"
39 |             defaultChain={polkadotRelay}
40 |             // connectOnInit={true}
41 |           >
42 |             <TooltipProvider>{children}</TooltipProvider>
43 |           </UseInkathonProvider>
44 |         </ChainProvider>
45 |       </QueryClientProvider>
46 |     </ThemeProvider>
47 |   )
48 | }
49 | 


--------------------------------------------------------------------------------
/common/chaindata.ts:
--------------------------------------------------------------------------------
 1 | import { gql, request } from "graphql-request"
 2 | 
 3 | const graphqlUrl = "https://squid.subsquid.io/chaindata/v/v4/graphql"
 4 | 
 5 | export type Chain = {
 6 |   id: string
 7 |   name: string
 8 |   paraId: number | null
 9 |   relay: {
10 |     id: string
11 |   } | null
12 |   rpcs: Array<{ url: string }>
13 |   logo: string
14 | }
15 | 
16 | const chainsQuery = gql`
17 |   query Chains($relayId: String!) {
18 |     chains(where: { relay: { id_eq: $relayId } }) {
19 |       id
20 |       name
21 |       paraId
22 |       relay {
23 |         id
24 |       }
25 |       rpcs {
26 |         url
27 |       }
28 |       logo
29 |     }
30 |   }
31 | `;
32 | 
33 | const chainQuery = gql`
34 |   query Chains($id: String!) {
35 |     chains(where: { id_eq:  $id }) {
36 |       id
37 |       name
38 |       rpcs {
39 |         url
40 |       }
41 |       logo
42 |     }
43 |   }
44 | `;
45 | 
46 | export const getChains = async (network: "polkadot" | "kusama"): Promise<Array<Chain>> => {
47 |   const response: any = await request(graphqlUrl, chainsQuery, {
48 |     relayId: network,
49 |   })
50 | 
51 |   const chains = response.chains
52 | 
53 |   let relayChain = ((await request(graphqlUrl, chainQuery, {id: network})) as any).chains[0];
54 |   // On the backend the relay chains are registered with paraId zero.
55 |   relayChain.paraId = 0;
56 |   relayChain.relay = { id: network };
57 |   chains.push(relayChain);
58 | 
59 |   chains.sort((a: Chain, b: Chain) => a.name.localeCompare(b.name))
60 | 
61 |   return chains
62 | }
63 | 


--------------------------------------------------------------------------------
/components/registered-chains.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | 
 5 | import Image from "next/image"
 6 | import { Chain, getChains } from "@/common/chaindata"
 7 | import { useRegisteredChains } from "@/hooks/use-registered-chains";
 8 | import { useEffect, useState } from "react";
 9 | 
10 | 
11 | export function RegisteredChains() {
12 |   const { data: registeredChains, isLoading, isError } = useRegisteredChains();
13 |   const [chains, setChains]: [Array<Chain>, any] = useState([]);
14 | 
15 |   useEffect(() => {
16 |     getRegisteredChains();
17 |   }, [registeredChains])
18 | 
19 |   const getRegisteredChains = async () => {
20 |     if(!registeredChains) return;
21 | 
22 |     // Fetch chains based on the current network
23 |     const polkadotChains = await getChains("polkadot");
24 |     const kusamaChains = await getChains("kusama");
25 | 
26 |     console.log(kusamaChains);
27 | 
28 |     let registered = polkadotChains.concat(kusamaChains).filter((chain) =>
29 |         registeredChains.some(
30 |           (regChain) =>
31 |             regChain.relay_chain.toLowerCase() ===
32 |               chain.relay?.id.toLowerCase() &&
33 |             regChain.para_id === chain.paraId
34 |         ));
35 |     
36 |     setChains(registered);
37 |   }
38 | 
39 |   return (
40 |     <div> 
41 |         <h3 className="text-xl text-center">Registered chains:</h3>
42 |         <div className="flex justify-center">
43 |             {chains.map((chain) => (
44 |                 <Image key={chain.id} className="m-6" src={chain.logo} alt={chain.name} width="50" height="50" />
45 |             ))}
46 |         </div>
47 |     </div>
48 |   )
49 | }
50 | 


--------------------------------------------------------------------------------
/app/subscribe/post-tx.ts:
--------------------------------------------------------------------------------
 1 | import { error } from "console"
 2 | 
 3 | import { siteConfig } from "@/config/site"
 4 | 
 5 | import { uppercaseFirstLetter } from "../../lib/utils"
 6 | 
 7 | export async function registerWithServer(
 8 |   paymentBlockNumber: number,
 9 |   paraId: number,
10 |   relayChain: string
11 | ) {
12 |   const postData = {
13 |     payment_block_number: paymentBlockNumber,
14 |     para: [uppercaseFirstLetter(relayChain), paraId],
15 |   }
16 | 
17 |   const endpoint = siteConfig.backendUrl + "/register_para"
18 | 
19 |   const response = await fetch(endpoint, {
20 |     method: "POST",
21 |     headers: {
22 |       "Content-Type": "application/json",
23 |     },
24 |     body: JSON.stringify(postData),
25 |   })
26 | 
27 |   const responseBody = await response.text()
28 | 
29 |   if (!response.ok) {
30 |     throw new Error(`Failed to register chain: ${responseBody}`)
31 |   }
32 | 
33 |   return responseBody
34 | }
35 | 
36 | export async function extendWithServer(
37 |   paymentBlockNumber: number,
38 |   paraId: number,
39 |   relayChain: string
40 | ) {
41 |   const postData = {
42 |     payment_block_number: paymentBlockNumber,
43 |     para: [uppercaseFirstLetter(relayChain), paraId],
44 |   }
45 | 
46 |   const endpoint = siteConfig.backendUrl + "/extend-subscription"
47 | 
48 |   const response = await fetch(endpoint, {
49 |     method: "POST",
50 |     headers: {
51 |       "Content-Type": "application/json",
52 |     },
53 |     body: JSON.stringify(postData),
54 |   })
55 | 
56 |   const responseBody = await response.text()
57 | 
58 |   if (!response.ok) {
59 |     throw new Error(`Failed to register chain: ${responseBody}`)
60 |   }
61 | 
62 |   return responseBody
63 | }
64 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import "@/styles/globals.css"
 2 | import { Metadata } from "next"
 3 | import { Toaster } from "sonner"
 4 | 
 5 | import { siteConfig } from "@/config/site"
 6 | import { fontSans, inter } from "@/lib/fonts"
 7 | import { cn } from "@/lib/utils"
 8 | import { Providers } from "@/components/providers"
 9 | import { SiteHeader } from "@/components/site-header"
10 | import { TailwindIndicator } from "@/components/tailwind-indicator"
11 | import { Footer } from "@/components/footer"
12 | import { RegisteredChains } from "@/components/registered-chains"
13 | 
14 | export const metadata: Metadata = {
15 |   title: {
16 |     default: siteConfig.name,
17 |     template: `%s - ${siteConfig.name}`,
18 |   },
19 |   description: siteConfig.description,
20 |   icons: {
21 |     icon: "/favicon.ico",
22 |     shortcut: "/regionx-logo.png",
23 |     apple: "/apple-touch-icon.png",
24 |   },
25 | }
26 | 
27 | interface RootLayoutProps {
28 |   children: React.ReactNode
29 | }
30 | 
31 | export default function RootLayout({ children }: RootLayoutProps) {
32 |   return (
33 |     <>
34 |       <html lang="en" suppressHydrationWarning>
35 |         <head />
36 |         <body
37 |           className={cn(
38 |             "min-h-screen bg-background font-sans antialiased",
39 |             inter.className
40 |           )}
41 |         >
42 |           <Providers>
43 |             <div className="relative flex min-h-screen flex-col">
44 |               <SiteHeader />
45 |               <div className="flex-1">{children}</div>
46 |               <Toaster richColors />
47 |             <RegisteredChains />
48 |             <Footer />
49 |             </div>
50 |             <TailwindIndicator />
51 |           </Providers>
52 |         </body>
53 |       </html>
54 |     </>
55 |   )
56 | }
57 | 


--------------------------------------------------------------------------------
/providers/chain-provider.tsx:
--------------------------------------------------------------------------------
 1 | import React, {
 2 |   Dispatch,
 3 |   ReactNode,
 4 |   createContext,
 5 |   useContext,
 6 |   useEffect,
 7 |   useState,
 8 | } from "react"
 9 | import { Chain } from "@/common/chaindata"
10 | import { Network } from "@/common/types"
11 | import { ApiPromise, WsProvider } from "@polkadot/api"
12 | 
13 | interface ChainContextType {
14 |   chain: Chain | undefined
15 |   setChain: (chain: Chain | undefined) => void
16 |   network: Network
17 |   setNetwork: (network: Network) => void
18 |   api: ApiPromise | undefined
19 |   isApiLoading?: boolean
20 | }
21 | 
22 | // Create a context with a default value
23 | const ChainContext = createContext<ChainContextType | undefined>(undefined)
24 | 
25 | interface ChainProviderProps {
26 |   children: ReactNode
27 | }
28 | 
29 | // Create a provider component
30 | export const ChainProvider: React.FC<ChainProviderProps> = ({
31 |   children,
32 | }: {
33 |   children: ReactNode
34 | }) => {
35 |   const [chain, setChain]: [Chain | undefined, Dispatch<Chain | undefined>] =
36 |     useState<Chain | undefined>()
37 |   const [network, setNetwork] = useState<Network>("polkadot")
38 |   const [api, setApi]: [
39 |     ApiPromise | undefined,
40 |     Dispatch<ApiPromise | undefined>
41 |   ] = useState<ApiPromise | undefined>()
42 |   const [isApiLoading, setIsApiLoading] = useState(true)
43 | 
44 |   useEffect(() => {
45 |     const initApi = async () => {
46 |       if (!chain) {
47 |         return
48 |       }
49 |       setIsApiLoading(true)
50 |       const wsProvider = new WsProvider(chain.rpcs[0].url)
51 |       const newApi = await ApiPromise.create({ provider: wsProvider })
52 |       setApi(newApi)
53 |       setIsApiLoading(false)
54 |     }
55 | 
56 |     initApi()
57 | 
58 |     return () => {
59 |       api?.disconnect()
60 |     }
61 |   }, [chain])
62 | 
63 |   return (
64 |     <ChainContext.Provider
65 |       value={{ chain, setChain, network, setNetwork, api, isApiLoading }}
66 |     >
67 |       {children}
68 |     </ChainContext.Provider>
69 |   )
70 | }
71 | 
72 | export const useChain = (): ChainContextType => {
73 |   const context = useContext(ChainContext)
74 |   if (!context) {
75 |     throw new Error("useChain must be used within a ChainProvider")
76 |   }
77 |   return context
78 | }
79 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "polkadot-weigher",
 3 |   "version": "1.0.0",
 4 |   "private": true,
 5 |   "author": {
 6 |     "name": "Niklas Plessing",
 7 |     "twitter": "@niftesty",
 8 |     "github": "niklasp"
 9 |   },
10 |   "scripts": {
11 |     "dev": "next dev",
12 |     "build": "next build",
13 |     "start": "next start",
14 |     "lint": "next lint",
15 |     "lint:fix": "next lint --fix",
16 |     "preview": "next build && next start",
17 |     "typecheck": "tsc --noEmit",
18 |     "format:write": "prettier --write \"**/*.{ts,tsx,mdx}\" --cache",
19 |     "format:check": "prettier --check \"**/*.{ts,tsx,mdx}\" --cache"
20 |   },
21 |   "dependencies": {
22 |     "@polkadot/api": "^10.11.2",
23 |     "@polkadot/types": "^10.11.2",
24 |     "@polkadot/util": "^12.6.2",
25 |     "@radix-ui/react-alert-dialog": "^1.0.5",
26 |     "@radix-ui/react-checkbox": "^1.0.4",
27 |     "@radix-ui/react-dialog": "^1.0.5",
28 |     "@radix-ui/react-dropdown-menu": "^2.0.6",
29 |     "@radix-ui/react-select": "^2.0.0",
30 |     "@radix-ui/react-slot": "^1.0.2",
31 |     "@radix-ui/react-tooltip": "^1.0.7",
32 |     "@scio-labs/use-inkathon": "^0.8.1",
33 |     "class-variance-authority": "^0.4.0",
34 |     "clsx": "^1.2.1",
35 |     "date-fns": "^3.3.1",
36 |     "graphql-request": "^6.1.0",
37 |     "lucide-react": "0.105.0-alpha.4",
38 |     "moment": "^2.30.1",
39 |     "next": "^14.1.0",
40 |     "next-themes": "^0.2.1",
41 |     "react": "^18.2.0",
42 |     "react-dom": "^18.2.0",
43 |     "react-query": "^3.39.3",
44 |     "recharts": "^2.11.0",
45 |     "sharp": "^0.33.2",
46 |     "sonner": "^1.4.0",
47 |     "tailwind-merge": "^1.13.2",
48 |     "tailwindcss-animate": "^1.0.6"
49 |   },
50 |   "devDependencies": {
51 |     "@ianvs/prettier-plugin-sort-imports": "^3.7.2",
52 |     "@types/node": "^17.0.45",
53 |     "@types/react": "^18.2.14",
54 |     "@types/react-dom": "^18.2.6",
55 |     "@typescript-eslint/parser": "^5.61.0",
56 |     "autoprefixer": "^10.4.14",
57 |     "eslint": "^8.44.0",
58 |     "eslint-config-next": "13.0.0",
59 |     "eslint-config-prettier": "^8.8.0",
60 |     "eslint-plugin-react": "^7.32.2",
61 |     "eslint-plugin-tailwindcss": "^3.13.0",
62 |     "postcss": "^8.4.24",
63 |     "prettier": "^2.8.8",
64 |     "tailwindcss": "^3.3.2",
65 |     "typescript": "^4.9.5"
66 |   }
67 | }
68 | 


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | @layer base {
 6 |   :root {
 7 |       --gradient: #134E5E;
 8 |       --background: 205 98.3% 98.44%;
 9 |       --foreground: 205 6.6000000000000005% 0.88%;
10 |   
11 |       --muted: 205 6.6000000000000005% 92.2%;
12 |       --muted-foreground: 205 3.3000000000000003% 42.2%;
13 |   
14 |       --popover: 205 37.199999999999996% 92.2%;
15 |       --popover-foreground: 205 6.6000000000000005% 1.1%;
16 |   
17 |       --card: 205 37.199999999999996% 92.2%;
18 |       --card-foreground: 205 6.6000000000000005% 1.1%;
19 |   
20 |       --border: 205 11.600000000000001% 89.88%;
21 |       --input: 205 11.600000000000001% 89.88%;
22 |   
23 |       --primary: 205 66% 22%;
24 |       --primary-foreground: 205 1.32% 92.2%;
25 |   
26 |       --secondary: 205 3.3000000000000003% 96.1%;
27 |       --secondary-foreground: 205 4.96% 12.2%;
28 |   
29 |       --accent: 205 3.3000000000000003% 96.1%;
30 |       --accent-foreground: 205 4.96% 12.2%;
31 |   
32 |       --destructive: 0 84.2% 60.2%;
33 |       --destructive-foreground: 0 0% 98%;
34 |   
35 |       --ring: 205 66% 22%;
36 |   
37 |       --radius: 0.5rem;
38 |   }
39 | 
40 |   .dark {
41 | 
42 |       --gradient: #4CB8C4;
43 |   
44 |       --background: 198 33.15% 4.24%;
45 |       --foreground: 198 5.1% 97.65%;
46 |   
47 |       --muted: 198 25.5% 15.9%;
48 |       --muted-foreground: 198 5.1% 55.3%;
49 |   
50 |       --popover: 198 54.8% 6.890000000000001%;
51 |       --popover-foreground: 198 5.1% 97.65%;
52 |   
53 |       --card: 198 54.8% 6.890000000000001%;
54 |       --card-foreground: 198 5.1% 97.65%;
55 |   
56 |       --border: 198 25.5% 15.9%;
57 |       --input: 198 25.5% 15.9%;
58 |   
59 |       --primary: 198 51% 53%;
60 |       --primary-foreground: 198 5.1% 5.300000000000001%;
61 |   
62 |       --secondary: 198 25.5% 15.9%;
63 |       --secondary-foreground: 198 5.1% 97.65%;
64 |   
65 |       --accent: 198 25.5% 15.9%;
66 |       --accent-foreground: 198 5.1% 97.65%;
67 |   
68 |       --destructive: 0 62.8% 30.6%;
69 |       --destructive-foreground: 198 5.1% 97.65%;
70 |   
71 |       --ring: 198 51% 53%;
72 | 
73 |   }
74 | }
75 | 
76 | @layer base {
77 |   * {
78 |     @apply border-border;
79 |   }
80 |   body {
81 |     @apply bg-background text-foreground;
82 |     font-feature-settings: "rlig" 1, "calt" 1;
83 |   }
84 | }
85 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const { fontFamily } = require("tailwindcss/defaultTheme")
 2 | 
 3 | /** @type {import('tailwindcss').Config} */
 4 | module.exports = {
 5 |   darkMode: ["class"],
 6 |   content: ["app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}"],
 7 |   theme: {
 8 |     container: {
 9 |       center: true,
10 |       padding: "2rem",
11 |       screens: {
12 |         "2xl": "1400px",
13 |       },
14 |     },
15 |     extend: {
16 |       colors: {
17 |         border: "hsl(var(--border))",
18 |         input: "hsl(var(--input))",
19 |         ring: "hsl(var(--ring))",
20 |         background: "hsl(var(--background))",
21 |         foreground: "hsl(var(--foreground))",
22 |         primary: {
23 |           DEFAULT: "hsl(var(--primary))",
24 |           foreground: "hsl(var(--primary-foreground))",
25 |         },
26 |         secondary: {
27 |           DEFAULT: "hsl(var(--secondary))",
28 |           foreground: "hsl(var(--secondary-foreground))",
29 |         },
30 |         destructive: {
31 |           DEFAULT: "hsl(var(--destructive))",
32 |           foreground: "hsl(var(--destructive-foreground))",
33 |         },
34 |         muted: {
35 |           DEFAULT: "hsl(var(--muted))",
36 |           foreground: "hsl(var(--muted-foreground))",
37 |         },
38 |         accent: {
39 |           DEFAULT: "hsl(var(--accent))",
40 |           foreground: "hsl(var(--accent-foreground))",
41 |         },
42 |         popover: {
43 |           DEFAULT: "hsl(var(--popover))",
44 |           foreground: "hsl(var(--popover-foreground))",
45 |         },
46 |         card: {
47 |           DEFAULT: "hsl(var(--card))",
48 |           foreground: "hsl(var(--card-foreground))",
49 |         },
50 |       },
51 |       borderRadius: {
52 |         lg: `var(--radius)`,
53 |         md: `calc(var(--radius) - 2px)`,
54 |         sm: "calc(var(--radius) - 4px)",
55 |       },
56 |       fontFamily: {
57 |         sans: ['Inter', 'sans-serif'],
58 |       },
59 |       keyframes: {
60 |         "accordion-down": {
61 |           from: { height: 0 },
62 |           to: { height: "var(--radix-accordion-content-height)" },
63 |         },
64 |         "accordion-up": {
65 |           from: { height: "var(--radix-accordion-content-height)" },
66 |           to: { height: 0 },
67 |         },
68 |       },
69 |       animation: {
70 |         "accordion-down": "accordion-down 0.2s ease-out",
71 |         "accordion-up": "accordion-up 0.2s ease-out",
72 |       },
73 |     },
74 |   },
75 |   plugins: [require("tailwindcss-animate")],
76 | }
77 | 


--------------------------------------------------------------------------------
/hooks/use-consumption.ts:
--------------------------------------------------------------------------------
 1 | import { ConsumptionDatum, DateRange } from "@/common/types"
 2 | import { useChain } from "@/providers/chain-provider"
 3 | import { useQuery } from "react-query"
 4 | 
 5 | import { siteConfig } from "@/config/site"
 6 | 
 7 | export const useConsumption = ({
 8 |   range,
 9 |   start,
10 |   end,
11 |   page,
12 |   pageSize,
13 |   grouping,
14 | }: {
15 |   range: DateRange
16 |   start?: Date
17 |   end?: Date
18 |   page?: number
19 |   pageSize?: number
20 |   grouping?: string //used instead of range when provided
21 | }) => {
22 |   const { chain, network, api } = useChain()
23 | 
24 |   // Convert Date objects to Unix timestamp strings
25 |   const startTimestamp = start?.getTime().toString()
26 |   const endTimestamp = end?.getTime().toString()
27 | 
28 |   const desiredGrouping = grouping
29 |     ? grouping
30 |     : siteConfig.rangeGroupingMap[range]
31 |   const chainId = chain?.paraId
32 | 
33 |   // Use URLSearchParams to construct query parameters with conditional values
34 |   const params = new URLSearchParams({
35 |     grouping: desiredGrouping,
36 |     ...(start !== undefined && { start: startTimestamp }),
37 |     ...(end !== undefined && { end: endTimestamp }),
38 |     ...(page !== undefined && { page: page.toString() }),
39 |     ...(pageSize !== undefined && { page_size: pageSize.toString() }),
40 |   })
41 | 
42 |   // Construct the endpoint URL with query parameters
43 |   const endpoint = `${
44 |     siteConfig.backendUrl
45 |   }/consumption/${network}/${chainId}?${params.toString()}`
46 | 
47 |   return useQuery<ConsumptionDatum[], Error>({
48 |     queryKey: [
49 |       "consumption",
50 |       network,
51 |       chainId,
52 |       range,
53 |       startTimestamp,
54 |       endTimestamp,
55 |       page,
56 |       pageSize,
57 |     ],
58 |     enabled: !!(chainId !== null) && !!network && !!api && !!range,
59 |     queryFn: async () => {
60 |       const res = await fetch(endpoint)
61 | 
62 |       if (!res.ok) {
63 |         // When not ok, throw an error to be caught by React Query error handling
64 |         throw new Error("Network response was not ok")
65 |       }
66 | 
67 |       const consumption = await res.json()
68 |       return consumption
69 |     },
70 |     retry: false,
71 |   })
72 | }
73 | 
74 | export const useEarliestConsumption = () => {
75 |   // make use of the useConsumption hook to get the earliest consumption
76 |   // for the current chain
77 |   return useConsumption({
78 |     range: "day",
79 |     pageSize: 1,
80 |     page: 0,
81 |     grouping: "minute",
82 |   })
83 | }
84 | 


--------------------------------------------------------------------------------
/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | import { Loader2 } from "lucide-react"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const buttonVariants = cva(
 9 |   "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
10 |   {
11 |     variants: {
12 |       variant: {
13 |         default: "bg-primary text-primary-foreground hover:bg-primary/90",
14 |         destructive:
15 |           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
16 |         outline:
17 |           "border border-input hover:bg-accent hover:text-accent-foreground",
18 |         secondary:
19 |           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
20 |         ghost: "hover:bg-accent hover:text-accent-foreground",
21 |         link: "underline-offset-4 hover:underline text-primary",
22 |       },
23 |       size: {
24 |         default: "h-10 py-2 px-4",
25 |         sm: "h-9 px-3 rounded-md",
26 |         lg: "h-16 px-8 rounded-md",
27 |         icon: "h-10 w-10",
28 |       },
29 |     },
30 |     defaultVariants: {
31 |       variant: "default",
32 |       size: "default",
33 |     },
34 |   }
35 | )
36 | 
37 | export interface ButtonProps
38 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
39 |     VariantProps<typeof buttonVariants> {
40 |   asChild?: boolean
41 |   isLoading?: boolean
42 | }
43 | 
44 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
45 |   (
46 |     {
47 |       className,
48 |       variant,
49 |       size,
50 |       isLoading,
51 |       asChild = false,
52 |       children,
53 |       ...props
54 |     },
55 |     ref
56 |   ) => {
57 |     const Comp = asChild ? Slot : "button"
58 | 
59 |     if (isLoading)
60 |       return (
61 |         <Comp
62 |           className={cn(
63 |             "relative",
64 |             buttonVariants({ variant, size, className })
65 |           )}
66 |           ref={ref}
67 |           {...props}
68 |         >
69 |           <Loader2 className={cn("h-4 w-4 animate-spin", className)} />
70 |           <span className="invisible">{children}</span>
71 |         </Comp>
72 |       )
73 | 
74 |     return (
75 |       <Comp
76 |         className={cn(buttonVariants({ variant, size, className }))}
77 |         ref={ref}
78 |         {...props}
79 |       >
80 |         {children}
81 |       </Comp>
82 |     )
83 |   }
84 | )
85 | Button.displayName = "Button"
86 | 
87 | export { Button, buttonVariants }
88 | 


--------------------------------------------------------------------------------
/components/chain-select.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import { useEffect, useState } from "react"
 4 | import Image from "next/image"
 5 | import { Chain, getChains } from "@/common/chaindata"
 6 | import { useChain } from "@/providers/chain-provider"
 7 | 
 8 | import { useRegisteredChains } from "@/hooks/use-registered-chains"
 9 | import {
10 |   Select,
11 |   SelectContent,
12 |   SelectItem,
13 |   SelectTrigger,
14 |   SelectValue,
15 | } from "@/components/ui/select"
16 | 
17 | const ChainSelect = ({
18 |   onlyRegistered = false,
19 | }: {
20 |   onlyRegistered?: boolean
21 | }) => {
22 |   const { chain, setChain, network } = useChain();
23 |   const { data: registeredChains, isLoading, isError } = useRegisteredChains();
24 | 
25 |   const [chains, setChains]: [Array<Chain>, any] = useState([]);
26 |   const [chainId, setChainId] = useState<number | undefined>(
27 |     chain?.paraId ?? undefined
28 |   );
29 | 
30 |   useEffect(() => {
31 |     // Fetch chains based on the current network
32 |     getChains(network).then((allChains) => {
33 |       let filteredChains = allChains;
34 | 
35 |       // If onlyRegistered is true, further filter the chains to include only those that are registered
36 |       if (onlyRegistered && registeredChains) {
37 |         // filter chains to only include those that are registered on the current network i.e. relay and paraid are in the registeredChains array
38 |         filteredChains = allChains.filter((chain) =>
39 |           registeredChains.some(
40 |             (regChain) =>
41 |               regChain.relay_chain.toLowerCase() ===
42 |                 chain.relay?.id.toLowerCase() &&
43 |               regChain.para_id === chain.paraId
44 |           )
45 |         )
46 |       }
47 | 
48 |       setChains(filteredChains)
49 |     })
50 |   }, [network, registeredChains, onlyRegistered])
51 | 
52 |   return (
53 |     <>
54 |       <Select
55 |         value={chainId !== undefined ? chainId.toString() : undefined}
56 |         onValueChange={(val) => {
57 |           setChainId(Number(val))
58 |           setChain(chains.find((c) => c.paraId === Number(val)))
59 |         }}
60 |       >
61 |         <SelectTrigger className="h-14 w-[180px] text-left">
62 |           <SelectValue placeholder="Select Chain" />
63 |         </SelectTrigger>
64 |         <SelectContent className="items-start !text-left">
65 |           {chains.map((chain: Chain, index) => (
66 |             <SelectItem
67 |               value={chain.paraId !== null ? chain.paraId.toString() : ""}
68 |               key={chain.paraId}
69 |               className="gap-2 text-left"
70 |             >
71 |               <Image
72 |                 src={chain.logo}
73 |                 alt="logo"
74 |                 width={32}
75 |                 height={32}
76 |                 className="mr-2 inline-block"
77 |               />
78 |               <span>{chain.name}</span>
79 |             </SelectItem>
80 |           ))}
81 |         </SelectContent>
82 |       </Select>
83 |     </>
84 |   )
85 | }
86 | 
87 | export default ChainSelect
88 | 


--------------------------------------------------------------------------------
/components/Chart.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from "react";
  2 | import { AxisOptions, Chart } from "react-charts";
  3 | import axios from "axios";
  4 | 
  5 | type Consumption = {
  6 |   blockNumber: number;
  7 |   consumed: number;
  8 | };
  9 | 
 10 | function ReftimeChart({
 11 |   normal,
 12 |   mandatory,
 13 |   operational,
 14 |   total
 15 | }: {
 16 |   normal: Consumption[];
 17 |   operational: Consumption[];
 18 |   mandatory: Consumption[];
 19 |   total: Consumption[];
 20 | }) {
 21 |   const data = React.useMemo(
 22 |     () => [
 23 |       {
 24 |         label: "Total consumption",
 25 |         data: total,
 26 |       },
 27 |       {
 28 |         label: "Normal consumption",
 29 |         data: normal,
 30 |       },
 31 |       {
 32 |         label: "Operational consumption",
 33 |         data: operational,
 34 |       },
 35 |       {
 36 |         label: "Mandatory consumption",
 37 |         data: mandatory,
 38 |       },
 39 |     ],
 40 |     [],
 41 |   );
 42 | 
 43 |   const primaryAxis = React.useMemo(
 44 |     (): AxisOptions<Consumption> => ({
 45 |       getValue: (d) => d.blockNumber,
 46 |       position: "bottom",
 47 |     }),
 48 |     [],
 49 |   );
 50 | 
 51 |   const secondaryAxes = React.useMemo(
 52 |     (): AxisOptions<Consumption>[] => [
 53 |       {
 54 |         getValue: (d) => d.consumed,
 55 |         stacked: false,
 56 |       },
 57 |     ],
 58 |     [],
 59 |   );
 60 | 
 61 |   const seriesColors = ['#4FD0BC', '#A4D04F', '#7B4FD0', "#d04f64"];
 62 | 
 63 |   return (
 64 |     <div style={{ width: "800px", height: "300px" }}>
 65 |       <Chart
 66 |         options={{
 67 |           getSeriesStyle: (series) => {
 68 |             return {
 69 |               color: seriesColors[series.index],
 70 |               strokeWidth: 4,
 71 |             }
 72 |           },
 73 |           data: data,
 74 |           primaryAxis,
 75 |           secondaryAxes,
 76 |         }}
 77 |       />
 78 |     </div>
 79 |   );
 80 | }
 81 | 
 82 | const DataProvider = () => {
 83 |   const [normalConsumption, setNormalConsumption]: [Consumption[], any] =
 84 |     useState([]);
 85 |   const [operationalConsumption, setOperationalConsumption]: [
 86 |     Consumption[],
 87 |     any,
 88 |   ] = useState([]);
 89 |   const [mandatoryConsumption, setMandatoryConsumption]: [Consumption[], any] =
 90 |     useState([]);
 91 |   const [totalConsumption, setTotalConsumption]: [Consumption[], any] =
 92 |     useState([]);
 93 | 
 94 |   useEffect(() => {
 95 |     fetchData();
 96 |   }, []);
 97 | 
 98 |   const fetchData = async () => {
 99 |     const result: any[] = (
100 |       await axios.get("http://localhost:8000/consumption/polkadot/2004")
101 |     ).data;
102 | 
103 |     const normal = result.map((record) => {
104 |       return {
105 |         blockNumber: record.block_number,
106 |         consumed: record.normal * 100,
107 |       };
108 |     });
109 |     const operational = result.map((record) => {
110 |       return {
111 |         blockNumber: record.block_number,
112 |         consumed: record.operational * 100,
113 |       };
114 |     });
115 |     const mandatory = result.map((record) => {
116 |       return {
117 |         blockNumber: record.block_number,
118 |         consumed: record.mandatory * 100,
119 |       };
120 |     });
121 |     const total = result.map((record) => {
122 |       return {
123 |         blockNumber: record.block_number,
124 |         consumed: (record.normal + record.operational + record.mandatory)  * 100,
125 |       };
126 |     });
127 | 
128 |     setNormalConsumption(normal);
129 |     setOperationalConsumption(operational);
130 |     setMandatoryConsumption(mandatory);
131 |     setTotalConsumption(total);
132 |   };
133 | 
134 |   return (
135 |     <>
136 |       {normalConsumption.length > 0 && (
137 |         <ReftimeChart
138 |           normal={normalConsumption}
139 |           mandatory={mandatoryConsumption}
140 |           operational={operationalConsumption}
141 |           total={totalConsumption}
142 |         />
143 |       )}
144 |     </>
145 |   );
146 | };
147 | 
148 | export default DataProvider;
149 | 


--------------------------------------------------------------------------------
/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as DialogPrimitive from "@radix-ui/react-dialog"
  3 | import { X } from "lucide-react"
  4 | 
  5 | import { cn } from "@/lib/utils"
  6 | 
  7 | const Dialog = DialogPrimitive.Root
  8 | 
  9 | const DialogTrigger = DialogPrimitive.Trigger
 10 | 
 11 | const DialogPortal = DialogPrimitive.Portal
 12 | 
 13 | const DialogClose = DialogPrimitive.Close
 14 | 
 15 | const DialogOverlay = React.forwardRef<
 16 |   React.ElementRef<typeof DialogPrimitive.Overlay>,
 17 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 18 | >(({ className, ...props }, ref) => (
 19 |   <DialogPrimitive.Overlay
 20 |     ref={ref}
 21 |     className={cn(
 22 |       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 23 |       className
 24 |     )}
 25 |     {...props}
 26 |   />
 27 | ))
 28 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 29 | 
 30 | const DialogContent = React.forwardRef<
 31 |   React.ElementRef<typeof DialogPrimitive.Content>,
 32 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 33 | >(({ className, children, ...props }, ref) => (
 34 |   <DialogPortal>
 35 |     <DialogOverlay />
 36 |     <DialogPrimitive.Content
 37 |       ref={ref}
 38 |       className={cn(
 39 |         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
 40 |         className
 41 |       )}
 42 |       {...props}
 43 |     >
 44 |       {children}
 45 |       <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
 46 |         <X className="h-4 w-4" />
 47 |         <span className="sr-only">Close</span>
 48 |       </DialogPrimitive.Close>
 49 |     </DialogPrimitive.Content>
 50 |   </DialogPortal>
 51 | ))
 52 | DialogContent.displayName = DialogPrimitive.Content.displayName
 53 | 
 54 | const DialogHeader = ({
 55 |   className,
 56 |   ...props
 57 | }: React.HTMLAttributes<HTMLDivElement>) => (
 58 |   <div
 59 |     className={cn(
 60 |       "flex flex-col space-y-1.5 text-center sm:text-left",
 61 |       className
 62 |     )}
 63 |     {...props}
 64 |   />
 65 | )
 66 | DialogHeader.displayName = "DialogHeader"
 67 | 
 68 | const DialogFooter = ({
 69 |   className,
 70 |   ...props
 71 | }: React.HTMLAttributes<HTMLDivElement>) => (
 72 |   <div
 73 |     className={cn(
 74 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 75 |       className
 76 |     )}
 77 |     {...props}
 78 |   />
 79 | )
 80 | DialogFooter.displayName = "DialogFooter"
 81 | 
 82 | const DialogTitle = React.forwardRef<
 83 |   React.ElementRef<typeof DialogPrimitive.Title>,
 84 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 85 | >(({ className, ...props }, ref) => (
 86 |   <DialogPrimitive.Title
 87 |     ref={ref}
 88 |     className={cn(
 89 |       "text-lg font-semibold leading-none tracking-tight",
 90 |       className
 91 |     )}
 92 |     {...props}
 93 |   />
 94 | ))
 95 | DialogTitle.displayName = DialogPrimitive.Title.displayName
 96 | 
 97 | const DialogDescription = React.forwardRef<
 98 |   React.ElementRef<typeof DialogPrimitive.Description>,
 99 |   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
100 | >(({ className, ...props }, ref) => (
101 |   <DialogPrimitive.Description
102 |     ref={ref}
103 |     className={cn("text-sm text-muted-foreground", className)}
104 |     {...props}
105 |   />
106 | ))
107 | DialogDescription.displayName = DialogPrimitive.Description.displayName
108 | 
109 | export {
110 |   Dialog,
111 |   DialogPortal,
112 |   DialogOverlay,
113 |   DialogClose,
114 |   DialogTrigger,
115 |   DialogContent,
116 |   DialogHeader,
117 |   DialogFooter,
118 |   DialogTitle,
119 |   DialogDescription,
120 | }
121 | 


--------------------------------------------------------------------------------
/app/subscribe/subscribe-tx.ts:
--------------------------------------------------------------------------------
  1 | import { Chain } from "@/common/chaindata"
  2 | import { Network } from "@/common/types"
  3 | import { ApiPromise } from "@polkadot/api"
  4 | import { SubmittableExtrinsicFunction } from "@polkadot/api/types"
  5 | import { AccountId } from "@polkadot/types/interfaces"
  6 | import {
  7 |   AnyTuple,
  8 |   Callback,
  9 |   IKeyringPair,
 10 |   ISubmittableResult,
 11 | } from "@polkadot/types/types"
 12 | import { BN, bnToBn } from "@polkadot/util"
 13 | import {
 14 |   TransferBalanceResult,
 15 |   checkIfBalanceSufficient,
 16 |   getExtrinsicErrorMessage,
 17 | } from "@scio-labs/use-inkathon"
 18 | import { toast } from "sonner"
 19 | 
 20 | import { siteConfig } from "@/config/site"
 21 | import { uppercaseFirstLetter } from "@/lib/utils"
 22 | 
 23 | export type SubmitSubscriptionResult = TransferBalanceResult & {
 24 |   toastId?: string | number
 25 |   chain?: Chain
 26 |   network?: Network
 27 | }
 28 | 
 29 | /**
 30 |  * Transfers a given amount of tokens from one account to another.
 31 |  */
 32 | export const subscribeTx = async (
 33 |   api: ApiPromise,
 34 |   fromAccount: IKeyringPair | string,
 35 |   network: Network,
 36 |   chainDecimals: number,
 37 |   chain: Chain,
 38 |   allowDeath?: boolean,
 39 |   statusCb?: Callback<ISubmittableResult>
 40 | ): Promise<SubmitSubscriptionResult> => {
 41 |   const amount: bigint | BN | string | number = siteConfig.subscriptionCost
 42 | 
 43 |   const hasSufficientBalance = await checkIfBalanceSufficient(
 44 |     api,
 45 |     fromAccount,
 46 |     amount
 47 |   )
 48 | 
 49 |   if (!hasSufficientBalance) {
 50 |     return Promise.reject({
 51 |       errorMessage: "TokenBelowMinimum",
 52 |     } satisfies SubmitSubscriptionResult)
 53 |   }
 54 | 
 55 |   const toAddress =
 56 |     "1C8BPSDDuaK2Rk8LgjFKpm9BsuFva7EfJWZ6s8XGg7FVwPn"
 57 | 
 58 |   const toastId = toast.loading(
 59 |     `Awaiting signature for subscribing to ${
 60 |       chain.name
 61 |     } on ${uppercaseFirstLetter(network)}...`
 62 |   )
 63 | 
 64 |   return new Promise(async (resolve, reject) => {
 65 |     try {
 66 |       const remarkFn = api.tx.system.remark(
 67 |         `regionx-weigher::${uppercaseFirstLetter(network)}:${chain.paraId}`
 68 |       )
 69 | 
 70 |       const transferFn = (api.tx.balances[
 71 |         allowDeath ? "transferAllowDeath" : "transferKeepAlive"
 72 |       ] || api.tx.balances["transfer"]) as SubmittableExtrinsicFunction<
 73 |         "promise",
 74 |         AnyTuple
 75 |       >
 76 | 
 77 |       const batchAll = api.tx.utility.batchAll([
 78 |         transferFn(toAddress, bnToBn(amount)),
 79 |         remarkFn,
 80 |       ])
 81 | 
 82 |       const unsub = await batchAll.signAndSend(
 83 |         fromAccount,
 84 |         async (result: ISubmittableResult) => {
 85 |           statusCb?.(result)
 86 |           const { status, dispatchError, events = [], txHash } = result
 87 | 
 88 |           if (status.isReady) {
 89 |             toast.loading(`Sending transaction`, {
 90 |               id: toastId,
 91 |             })
 92 |             console.log(`Sending transaction with hash ${txHash}`)
 93 |           } else if (status.isInBlock) {
 94 |             toast.loading(`Transaction in block. Waiting for finalization...`, {
 95 |               id: toastId,
 96 |             })
 97 |             console.log(`Transaction in block with hash ${txHash}`)
 98 |           } else if (status.isFinalized) {
 99 |             console.log(`Transaction included at blockHash ${txHash}`)
100 | 
101 |             if (dispatchError) {
102 |               console.error("Error while transferring balance:", dispatchError)
103 |               if (dispatchError.isModule) {
104 |                 // for module errors, we have the section indexed, lookup
105 |                 const decoded = api?.registry.findMetaError(
106 |                   dispatchError.asModule
107 |                 )
108 |                 const { docs, name, section } = decoded || {}
109 | 
110 |                 console.error(
111 |                   `Error while transferring balance: ${docs?.join(" ")}`
112 |                 )
113 |                 reject(docs?.join(" "))
114 |               } else {
115 |                 // Other, CannotLookup, BadOrigin, no extra info
116 |                 console.error(
117 |                   "Error while transferring balance:",
118 |                   dispatchError
119 |                 )
120 |                 reject({ status: "error", message: dispatchError.toString() })
121 |               }
122 |             }
123 | 
124 |             resolve({ result, toastId, chain, network })
125 | 
126 |             unsub?.()
127 |           }
128 |         }
129 |       )
130 |     } catch (e: any) {
131 |       console.error("Error while transferring balance:", e)
132 |       reject({
133 |         errorMessage: getExtrinsicErrorMessage(e),
134 |         errorEvent: e,
135 |       } satisfies TransferBalanceResult)
136 |     }
137 |   })
138 | }
139 | 


--------------------------------------------------------------------------------
/components/ui/alert-dialog.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
  3 | 
  4 | import { cn } from "@/lib/utils"
  5 | import { buttonVariants } from "@/components/ui/button"
  6 | 
  7 | const AlertDialog = AlertDialogPrimitive.Root
  8 | 
  9 | const AlertDialogTrigger = AlertDialogPrimitive.Trigger
 10 | 
 11 | const AlertDialogPortal = AlertDialogPrimitive.Portal
 12 | 
 13 | const AlertDialogOverlay = React.forwardRef<
 14 |   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
 15 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
 16 | >(({ className, ...props }, ref) => (
 17 |   <AlertDialogPrimitive.Overlay
 18 |     className={cn(
 19 |       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 20 |       className
 21 |     )}
 22 |     {...props}
 23 |     ref={ref}
 24 |   />
 25 | ))
 26 | AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
 27 | 
 28 | const AlertDialogContent = React.forwardRef<
 29 |   React.ElementRef<typeof AlertDialogPrimitive.Content>,
 30 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
 31 | >(({ className, ...props }, ref) => (
 32 |   <AlertDialogPortal>
 33 |     <AlertDialogOverlay />
 34 |     <AlertDialogPrimitive.Content
 35 |       ref={ref}
 36 |       className={cn(
 37 |         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
 38 |         className
 39 |       )}
 40 |       {...props}
 41 |     />
 42 |   </AlertDialogPortal>
 43 | ))
 44 | AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
 45 | 
 46 | const AlertDialogHeader = ({
 47 |   className,
 48 |   ...props
 49 | }: React.HTMLAttributes<HTMLDivElement>) => (
 50 |   <div
 51 |     className={cn(
 52 |       "flex flex-col space-y-2 text-center sm:text-left",
 53 |       className
 54 |     )}
 55 |     {...props}
 56 |   />
 57 | )
 58 | AlertDialogHeader.displayName = "AlertDialogHeader"
 59 | 
 60 | const AlertDialogFooter = ({
 61 |   className,
 62 |   ...props
 63 | }: React.HTMLAttributes<HTMLDivElement>) => (
 64 |   <div
 65 |     className={cn(
 66 |       "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
 67 |       className
 68 |     )}
 69 |     {...props}
 70 |   />
 71 | )
 72 | AlertDialogFooter.displayName = "AlertDialogFooter"
 73 | 
 74 | const AlertDialogTitle = React.forwardRef<
 75 |   React.ElementRef<typeof AlertDialogPrimitive.Title>,
 76 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
 77 | >(({ className, ...props }, ref) => (
 78 |   <AlertDialogPrimitive.Title
 79 |     ref={ref}
 80 |     className={cn("text-lg font-semibold", className)}
 81 |     {...props}
 82 |   />
 83 | ))
 84 | AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
 85 | 
 86 | const AlertDialogDescription = React.forwardRef<
 87 |   React.ElementRef<typeof AlertDialogPrimitive.Description>,
 88 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
 89 | >(({ className, ...props }, ref) => (
 90 |   <AlertDialogPrimitive.Description
 91 |     ref={ref}
 92 |     className={cn("text-sm text-muted-foreground", className)}
 93 |     {...props}
 94 |   />
 95 | ))
 96 | AlertDialogDescription.displayName =
 97 |   AlertDialogPrimitive.Description.displayName
 98 | 
 99 | const AlertDialogAction = React.forwardRef<
100 |   React.ElementRef<typeof AlertDialogPrimitive.Action>,
101 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
102 | >(({ className, ...props }, ref) => (
103 |   <AlertDialogPrimitive.Action
104 |     ref={ref}
105 |     className={cn(buttonVariants(), className)}
106 |     {...props}
107 |   />
108 | ))
109 | AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
110 | 
111 | const AlertDialogCancel = React.forwardRef<
112 |   React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
113 |   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
114 | >(({ className, ...props }, ref) => (
115 |   <AlertDialogPrimitive.Cancel
116 |     ref={ref}
117 |     className={cn(
118 |       buttonVariants({ variant: "outline" }),
119 |       "mt-2 sm:mt-0",
120 |       className
121 |     )}
122 |     {...props}
123 |   />
124 | ))
125 | AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
126 | 
127 | export {
128 |   AlertDialog,
129 |   AlertDialogPortal,
130 |   AlertDialogOverlay,
131 |   AlertDialogTrigger,
132 |   AlertDialogContent,
133 |   AlertDialogHeader,
134 |   AlertDialogFooter,
135 |   AlertDialogTitle,
136 |   AlertDialogDescription,
137 |   AlertDialogAction,
138 |   AlertDialogCancel,
139 | }
140 | 


--------------------------------------------------------------------------------
/components/ui/select.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as SelectPrimitive from "@radix-ui/react-select"
  3 | import { Check, ChevronDown, ChevronUp } from "lucide-react"
  4 | 
  5 | import { cn } from "@/lib/utils"
  6 | 
  7 | const Select = SelectPrimitive.Root
  8 | 
  9 | const SelectGroup = SelectPrimitive.Group
 10 | 
 11 | const SelectValue = SelectPrimitive.Value
 12 | 
 13 | const SelectTrigger = React.forwardRef<
 14 |   React.ElementRef<typeof SelectPrimitive.Trigger>,
 15 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
 16 | >(({ className, children, ...props }, ref) => (
 17 |   <SelectPrimitive.Trigger
 18 |     ref={ref}
 19 |     className={cn(
 20 |       "flex h-14 w-full items-center justify-between rounded-sm border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
 21 |       className
 22 |     )}
 23 |     {...props}
 24 |   >
 25 |     {children}
 26 |     <SelectPrimitive.Icon asChild>
 27 |       <ChevronDown className="h-4 w-4 opacity-50" />
 28 |     </SelectPrimitive.Icon>
 29 |   </SelectPrimitive.Trigger>
 30 | ))
 31 | SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
 32 | 
 33 | const SelectScrollUpButton = React.forwardRef<
 34 |   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
 35 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
 36 | >(({ className, ...props }, ref) => (
 37 |   <SelectPrimitive.ScrollUpButton
 38 |     ref={ref}
 39 |     className={cn(
 40 |       "flex cursor-default items-center justify-center py-1",
 41 |       className
 42 |     )}
 43 |     {...props}
 44 |   >
 45 |     <ChevronUp className="h-4 w-4" />
 46 |   </SelectPrimitive.ScrollUpButton>
 47 | ))
 48 | SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
 49 | 
 50 | const SelectScrollDownButton = React.forwardRef<
 51 |   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
 52 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
 53 | >(({ className, ...props }, ref) => (
 54 |   <SelectPrimitive.ScrollDownButton
 55 |     ref={ref}
 56 |     className={cn(
 57 |       "flex cursor-default items-center justify-center py-1",
 58 |       className
 59 |     )}
 60 |     {...props}
 61 |   >
 62 |     <ChevronDown className="h-4 w-4" />
 63 |   </SelectPrimitive.ScrollDownButton>
 64 | ))
 65 | SelectScrollDownButton.displayName =
 66 |   SelectPrimitive.ScrollDownButton.displayName
 67 | 
 68 | const SelectContent = React.forwardRef<
 69 |   React.ElementRef<typeof SelectPrimitive.Content>,
 70 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
 71 | >(({ className, children, position = "popper", ...props }, ref) => (
 72 |   <SelectPrimitive.Portal>
 73 |     <SelectPrimitive.Content
 74 |       ref={ref}
 75 |       className={cn(
 76 |         "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-sm border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 77 |         position === "popper" &&
 78 |           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
 79 |         className
 80 |       )}
 81 |       position={position}
 82 |       {...props}
 83 |     >
 84 |       <SelectScrollUpButton />
 85 |       <SelectPrimitive.Viewport
 86 |         className={cn(
 87 |           "p-1",
 88 |           position === "popper" &&
 89 |             "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
 90 |         )}
 91 |       >
 92 |         {children}
 93 |       </SelectPrimitive.Viewport>
 94 |       <SelectScrollDownButton />
 95 |     </SelectPrimitive.Content>
 96 |   </SelectPrimitive.Portal>
 97 | ))
 98 | SelectContent.displayName = SelectPrimitive.Content.displayName
 99 | 
100 | const SelectLabel = React.forwardRef<
101 |   React.ElementRef<typeof SelectPrimitive.Label>,
102 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
103 | >(({ className, ...props }, ref) => (
104 |   <SelectPrimitive.Label
105 |     ref={ref}
106 |     className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
107 |     {...props}
108 |   />
109 | ))
110 | SelectLabel.displayName = SelectPrimitive.Label.displayName
111 | 
112 | const SelectItem = React.forwardRef<
113 |   React.ElementRef<typeof SelectPrimitive.Item>,
114 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
115 | >(({ className, children, ...props }, ref) => (
116 |   <SelectPrimitive.Item
117 |     ref={ref}
118 |     className={cn(
119 |       "relative flex w-full cursor-default select-none items-center gap-2 px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
120 |       className
121 |     )}
122 |     {...props}
123 |   >
124 |     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
125 |   </SelectPrimitive.Item>
126 | ))
127 | SelectItem.displayName = SelectPrimitive.Item.displayName
128 | 
129 | const SelectSeparator = React.forwardRef<
130 |   React.ElementRef<typeof SelectPrimitive.Separator>,
131 |   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
132 | >(({ className, ...props }, ref) => (
133 |   <SelectPrimitive.Separator
134 |     ref={ref}
135 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
136 |     {...props}
137 |   />
138 | ))
139 | SelectSeparator.displayName = SelectPrimitive.Separator.displayName
140 | 
141 | export {
142 |   Select,
143 |   SelectGroup,
144 |   SelectValue,
145 |   SelectTrigger,
146 |   SelectContent,
147 |   SelectLabel,
148 |   SelectItem,
149 |   SelectSeparator,
150 |   SelectScrollUpButton,
151 |   SelectScrollDownButton,
152 | }
153 | 


--------------------------------------------------------------------------------
/components/connect-button.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import { FC, useState } from "react"
  4 | import Image from "next/image"
  5 | import Link from "next/link"
  6 | import { InjectedAccount } from "@polkadot/extension-inject/types"
  7 | import { encodeAddress } from "@polkadot/util-crypto"
  8 | import {
  9 |   SubstrateWalletPlatform,
 10 |   allSubstrateWallets,
 11 |   isWalletInstalled,
 12 |   useInkathon,
 13 | } from "@scio-labs/use-inkathon"
 14 | import { ArrowUpRight, CheckCircle, ChevronDown } from "lucide-react"
 15 | 
 16 | import { truncateHash } from "@/lib/utils"
 17 | import { Button } from "@/components/ui/button"
 18 | import {
 19 |   DropdownMenu,
 20 |   DropdownMenuContent,
 21 |   DropdownMenuItem,
 22 |   DropdownMenuSeparator,
 23 |   DropdownMenuTrigger,
 24 | } from "@/components/ui/dropdown-menu"
 25 | 
 26 | export interface ConnectButtonProps {
 27 |   size?: "default" | "sm" | "lg" | "icon" | null | undefined
 28 | }
 29 | 
 30 | export const ConnectButton: FC<ConnectButtonProps> = ({ size }) => {
 31 |   const {
 32 |     activeChain,
 33 |     connect,
 34 |     disconnect,
 35 |     isConnecting,
 36 |     activeAccount,
 37 |     accounts,
 38 |     setActiveAccount,
 39 |   } = useInkathon()
 40 | 
 41 |   // Sort installed wallets first
 42 |   const [browserWallets] = useState([
 43 |     ...allSubstrateWallets.filter(
 44 |       (w) =>
 45 |         w.platforms.includes(SubstrateWalletPlatform.Browser) &&
 46 |         isWalletInstalled(w)
 47 |     ),
 48 |     ...allSubstrateWallets.filter(
 49 |       (w) =>
 50 |         w.platforms.includes(SubstrateWalletPlatform.Browser) &&
 51 |         !isWalletInstalled(w)
 52 |     ),
 53 |   ])
 54 | 
 55 |   // Connect Button
 56 |   if (!activeAccount)
 57 |     return (
 58 |       <DropdownMenu>
 59 |         <DropdownMenuTrigger asChild>
 60 |           <Button
 61 |             className=""
 62 |             isLoading={isConnecting}
 63 |             disabled={isConnecting}
 64 |             translate="no"
 65 |             size={size}
 66 |           >
 67 |             Connect Wallet
 68 |             <ChevronDown size={16} />
 69 |           </Button>
 70 |         </DropdownMenuTrigger>
 71 |         <DropdownMenuContent className="min-w-[14rem]">
 72 |           {!activeAccount &&
 73 |             browserWallets.map((w) =>
 74 |               isWalletInstalled(w) ? (
 75 |                 <DropdownMenuItem
 76 |                   key={w.id}
 77 |                   className="cursor-pointer"
 78 |                   onClick={() => {
 79 |                     connect?.(undefined, w)
 80 |                   }}
 81 |                 >
 82 |                   {w.name}
 83 |                 </DropdownMenuItem>
 84 |               ) : (
 85 |                 <DropdownMenuItem key={w.id} className="opacity-50">
 86 |                   <Link href={w.urls.website}>
 87 |                     <div className="align-center flex justify-start gap-2">
 88 |                       <p>{w.name}</p>
 89 |                       <ArrowUpRight />
 90 |                     </div>
 91 |                     <p>Not installed</p>
 92 |                   </Link>
 93 |                 </DropdownMenuItem>
 94 |               )
 95 |             )}
 96 |         </DropdownMenuContent>
 97 |       </DropdownMenu>
 98 |     )
 99 | 
100 |   // Account Menu & Disconnect Button
101 |   return (
102 |     <div className="flex select-none flex-wrap items-stretch justify-center gap-4">
103 |       <DropdownMenu>
104 |         <DropdownMenuTrigger asChild className="">
105 |           <Button className="" translate="no" size={size}>
106 |             <div className="flex items-center justify-between gap-2">
107 |               <div className="flex flex-col items-center justify-center">
108 |                 <AccountName account={activeAccount} />
109 |                 <span className="text-xs font-normal">
110 |                   {truncateHash(
111 |                     encodeAddress(
112 |                       activeAccount.address,
113 |                       activeChain?.ss58Prefix || 42
114 |                     ),
115 |                     8
116 |                   )}
117 |                 </span>
118 |               </div>
119 |               <ChevronDown size={16} />
120 |             </div>
121 |           </Button>
122 |         </DropdownMenuTrigger>
123 |         <DropdownMenuContent
124 |           align="end"
125 |           className="no-scrollbar max-h-[40vh] min-w-[14rem] overflow-scroll rounded-2xl"
126 |         >
127 |           {/* Available Accounts/Wallets */}
128 |           <DropdownMenuSeparator />
129 |           {(accounts || []).map((acc) => {
130 |             if(acc.type == "ethereum") return;
131 |             const encodedAddress = encodeAddress(
132 |               acc.address,
133 |               activeChain?.ss58Prefix || 42
134 |             )
135 |             const truncatedEncodedAddress = truncateHash(encodedAddress, 10)
136 | 
137 |             return (
138 |               <DropdownMenuItem
139 |                 key={encodedAddress}
140 |                 disabled={acc.address === activeAccount?.address}
141 |                 className={
142 |                   acc.address !== activeAccount?.address ? "cursor-pointer" : ""
143 |                 }
144 |                 onClick={() => {
145 |                   setActiveAccount?.(acc)
146 |                 }}
147 |               >
148 |                 <div className="flex w-full items-center justify-between">
149 |                   <div>
150 |                     <AccountName account={acc} />
151 |                     <p className="text-xs">{truncatedEncodedAddress}</p>
152 |                   </div>
153 |                   {acc.address === activeAccount?.address && (
154 |                     <CheckCircle size={16} />
155 |                   )}
156 |                 </div>
157 |               </DropdownMenuItem>
158 |             )
159 |           })}
160 | 
161 |           {/* Disconnect Button */}
162 |           <DropdownMenuSeparator />
163 |           <DropdownMenuItem
164 |             className="cursor-pointer"
165 |             onClick={() => disconnect?.()}
166 |           >
167 |             <div className="flex gap-2">Disconnect</div>
168 |           </DropdownMenuItem>
169 |         </DropdownMenuContent>
170 |       </DropdownMenu>
171 |     </div>
172 |   )
173 | }
174 | 
175 | export interface AccountNameProps {
176 |   account: InjectedAccount
177 | }
178 | 
179 | export const AccountName: FC<AccountNameProps> = ({ account, ...rest }) => {
180 |   return <div>{account.name}</div>
181 | }
182 | 


--------------------------------------------------------------------------------
/components/consumption-chart.tsx:
--------------------------------------------------------------------------------
  1 | import React, { useMemo } from "react"
  2 | import { useTheme } from "next-themes"
  3 | import {
  4 |   CartesianGrid,
  5 |   Legend,
  6 |   Line,
  7 |   LineChart,
  8 |   ResponsiveContainer,
  9 |   Tooltip,
 10 |   XAxis,
 11 |   YAxis,
 12 | } from "recharts"
 13 | 
 14 | import { ConsumptionDatum } from "../common/types"
 15 | 
 16 | export type RawData = {
 17 |   ref_time: {
 18 |     normal: number
 19 |     operational: number
 20 |     mandatory: number
 21 |   }
 22 |   proof_size: {
 23 |     normal: number
 24 |     operational: number
 25 |     mandatory: number
 26 |   }
 27 |   count: number
 28 | }
 29 | 
 30 | type Props = {
 31 |   data: ConsumptionDatum[] // The updated prop type to match the new data structure.
 32 |   grouping: string
 33 |   refTimeDisplayed: boolean
 34 |   proofSizeDisplayed: boolean
 35 | }
 36 | 
 37 | type ChartDatum = {
 38 |   date: string // Used for labeling the x-axis.
 39 |   avgRefTimeNormal: number
 40 |   avgRefTimeOperational: number
 41 |   avgRefTimeMandatory: number
 42 |   avgRefTimeTotal: number
 43 |   avgProofSizeNormal: number
 44 |   avgProofSizeOperational: number
 45 |   avgProofSizeMandatory: number
 46 |   avgProofSizeTotal: number
 47 | }
 48 | 
 49 | const colors = {
 50 |   ref_time: {
 51 |     normal: "#D32F2F", // Red 700
 52 |     operational: "#1976D2", // Blue 700
 53 |     mandatory: "#388E3C", // Green 700
 54 |     total: "#FBC02D", // Yellow 700
 55 |   },
 56 |   proof_size: {
 57 |     normal: "#7B1FA2", // Purple 700
 58 |     operational: "#F57C00", // Orange 700
 59 |     mandatory: "#C2185B", // Pink 700
 60 |     total: "#00796B", // Teal 700
 61 |   },
 62 | }
 63 | 
 64 | const ConsumptionChart: React.FC<Props> = ({
 65 |   data,
 66 |   refTimeDisplayed,
 67 |   proofSizeDisplayed,
 68 | }) => {
 69 |   const { theme } = useTheme()
 70 | 
 71 |   const formatData = (data: ConsumptionDatum[]): ChartDatum[] => {
 72 |     return data.map((datum: ConsumptionDatum) => ({
 73 |       date: datum.group,
 74 |       avgRefTimeNormal: datum.ref_time.normal / datum.count,
 75 |       avgRefTimeOperational: datum.ref_time.operational / datum.count,
 76 |       avgRefTimeMandatory: datum.ref_time.mandatory / datum.count,
 77 |       avgRefTimeTotal:
 78 |         (datum.ref_time.normal +
 79 |           datum.ref_time.operational +
 80 |           datum.ref_time.mandatory) /
 81 |         datum.count,
 82 |       avgProofSizeNormal: datum.proof_size.normal / datum.count,
 83 |       avgProofSizeOperational: datum.proof_size.operational / datum.count,
 84 |       avgProofSizeMandatory: datum.proof_size.mandatory / datum.count,
 85 |       avgProofSizeTotal:
 86 |         (datum.proof_size.normal +
 87 |           datum.proof_size.operational +
 88 |           datum.proof_size.mandatory) /
 89 |         datum.count,
 90 |     }))
 91 |   }
 92 | 
 93 |   const formattedData = useMemo(() => formatData(data), [data])
 94 | 
 95 |   const formatYAxisTick = (value: any) => `${(value * 100).toFixed(2)}%`
 96 |   const formatTooltip = (value: any, name: any) => {
 97 |     return `${(value * 100).toFixed(2)}%`
 98 |   }
 99 | 
100 |   return (
101 |     <div className="w-full rounded-lg bg-white p-4 shadow-md dark:bg-gray-900 dark:text-white ">
102 |       <ResponsiveContainer width="100%" height={500}>
103 |         <LineChart
104 |           data={formattedData}
105 |           margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
106 |         >
107 |           <CartesianGrid strokeDasharray="3 3" />
108 |           <XAxis dataKey="date" />
109 |           <YAxis tickFormatter={formatYAxisTick} />
110 |           <Tooltip
111 |             formatter={formatTooltip}
112 |             wrapperClassName="rounded-md text-black dark:text-white !bg-background p-2 shadow-md dark:shadow-lg"
113 |             labelClassName="mb-2 p-0"
114 |             itemStyle={{ padding: "0" }}
115 |           />
116 |           <Legend />
117 |           {refTimeDisplayed && (
118 |             <>
119 |               <Line
120 |                 type="monotone"
121 |                 dataKey="avgRefTimeNormal"
122 |                 stroke={colors.ref_time.normal}
123 |                 name="Ref Time Normal"
124 |                 activeDot={{ r: 6 }}
125 |               />
126 |               <Line
127 |                 type="monotone"
128 |                 dataKey="avgRefTimeOperational"
129 |                 stroke={colors.ref_time.operational}
130 |                 name="Ref Time Operational"
131 |                 activeDot={{ r: 6 }}
132 |               />
133 |               <Line
134 |                 type="monotone"
135 |                 dataKey="avgRefTimeMandatory"
136 |                 stroke={colors.ref_time.mandatory}
137 |                 name="Ref Time Mandatory"
138 |                 activeDot={{ r: 6 }}
139 |               />
140 |               <Line
141 |                 type="monotone"
142 |                 dataKey="avgRefTimeTotal"
143 |                 stroke={colors.ref_time.total}
144 |                 name="Ref Time Total"
145 |                 activeDot={{ r: 6 }}
146 |               />
147 |             </>
148 |           )}
149 |           {proofSizeDisplayed && (
150 |             <>
151 |               <Line
152 |                 type="monotone"
153 |                 dataKey="avgProofSizeNormal"
154 |                 stroke={colors.proof_size.normal}
155 |                 name="Proof Size Normal"
156 |                 strokeDasharray="8 2"
157 |                 activeDot={{ r: 6 }}
158 |               />
159 |               <Line
160 |                 type="monotone"
161 |                 dataKey="avgProofSizeOperational"
162 |                 stroke={colors.proof_size.operational}
163 |                 name="Proof Size Operational"
164 |                 strokeDasharray="8 2"
165 |                 activeDot={{ r: 6 }}
166 |               />
167 |               <Line
168 |                 type="monotone"
169 |                 dataKey="avgProofSizeMandatory"
170 |                 stroke={colors.proof_size.mandatory}
171 |                 name="Proof Size Mandatory"
172 |                 strokeDasharray="8 2"
173 |                 activeDot={{ r: 6 }}
174 |               />
175 |               <Line
176 |                 type="monotone"
177 |                 dataKey="avgProofSizeTotal"
178 |                 stroke={colors.proof_size.total}
179 |                 name="Proof Size Total"
180 |                 strokeDasharray="8 2"
181 |                 activeDot={{ r: 6 }}
182 |               />
183 |             </>
184 |           )}
185 |         </LineChart>
186 |       </ResponsiveContainer>
187 |       {/* <pre>{JSON.stringify(data, null, 2)}</pre> */}
188 |     </div>
189 |   )
190 | }
191 | 
192 | export default ConsumptionChart
193 | 


--------------------------------------------------------------------------------
/components/consumption-grid.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import { Dispatch, useEffect, useState } from "react"
  4 | import Image from "next/image"
  5 | import { Chain } from "@/common/chaindata"
  6 | import { Consumption } from "@/common/types"
  7 | import { useChain } from "@/providers/chain-provider"
  8 | import { ApiPromise } from "@polkadot/api"
  9 | 
 10 | import { Icons } from "./icons"
 11 | 
 12 | const ConsumptionGrid = () => {
 13 |   const { chain, api } = useChain()
 14 | 
 15 |   const [consumption, setConsumption]: [Consumption, Dispatch<Consumption>] =
 16 |     useState({ normal: 0, operational: 0, mandatory: 0, total: 0 })
 17 |   const [loading, setLoading] = useState(true)
 18 |   const [blockNumber, setBlockNumber] = useState("")
 19 | 
 20 |   useEffect(() => {
 21 |     if (!api) {
 22 |       return
 23 |     }
 24 | 
 25 |     const interval = setInterval(() => {
 26 |       getConsumption(api)
 27 |     }, 2000)
 28 | 
 29 |     return () => clearInterval(interval)
 30 |   }, [api])
 31 | 
 32 |   useEffect(() => {
 33 |     setLoading(true)
 34 |   }, [chain])
 35 | 
 36 |   const getConsumption = async (api: any) => {
 37 |     if (!chain) {
 38 |       return
 39 |     }
 40 | 
 41 |     const weightLimit: any = api.consts.system.blockWeights.toJSON()
 42 | 
 43 |     const blockConsumption: any = (
 44 |       await api.query.system.blockWeight()
 45 |     ).toJSON()
 46 |     const blockNumber: any = (await api.query.system.number()).toHuman()
 47 | 
 48 |     const totalConsumption = getTotalConsumption(blockConsumption)
 49 |     const maxBlockRefTime = weightLimit.maxBlock.refTime
 50 |       ? weightLimit.maxBlock.refTime
 51 |       : weightLimit.maxBlock
 52 | 
 53 |     const normal =
 54 |       blockConsumption.normal.refTime !== undefined
 55 |         ? blockConsumption.normal.refTime
 56 |         : blockConsumption.normal
 57 |     const operational =
 58 |       blockConsumption.operational.refTime !== undefined
 59 |         ? blockConsumption.operational.refTime
 60 |         : blockConsumption.operational
 61 |     const mandatory =
 62 |       blockConsumption.mandatory.refTime !== undefined
 63 |         ? blockConsumption.mandatory.refTime
 64 |         : blockConsumption.mandatory
 65 | 
 66 |     let updatedConsumption: Consumption = {
 67 |       total:
 68 |         Number(
 69 |           parseFloat(
 70 |             (totalConsumption / maxBlockRefTime).toString()
 71 |           ).toPrecision(3)
 72 |         ) * 100,
 73 |       normal:
 74 |         Number(
 75 |           parseFloat((normal / maxBlockRefTime).toString()).toPrecision(3)
 76 |         ) * 100,
 77 |       operational:
 78 |         Number(
 79 |           parseFloat((operational / maxBlockRefTime).toString()).toPrecision(3)
 80 |         ) * 100,
 81 |       mandatory:
 82 |         Number(
 83 |           parseFloat((mandatory / maxBlockRefTime).toString()).toPrecision(3)
 84 |         ) * 100,
 85 |     }
 86 |     setLoading(false)
 87 |     setConsumption(updatedConsumption)
 88 |     setBlockNumber(blockNumber)
 89 |   }
 90 | 
 91 |   const getTotalConsumption = (blockConsumption: any) => {
 92 |     if (blockConsumption.mandatory.refTime) {
 93 |       return (
 94 |         blockConsumption.mandatory.refTime +
 95 |         blockConsumption.normal.refTime +
 96 |         blockConsumption.operational.refTime
 97 |       )
 98 |     } else {
 99 |       return (
100 |         blockConsumption.mandatory +
101 |         blockConsumption.normal +
102 |         blockConsumption.operational
103 |       )
104 |     }
105 |   }
106 | 
107 |   const getDispatchClassConsumption = (dispatchClass: string): number => {
108 |     // @ts-ignore
109 |     return consumption[dispatchClass.toLowerCase()].toString().substring(0, 4)
110 |   }
111 | 
112 |   const data = [
113 |     {
114 |       title: "Normal",
115 |       content: `Dispatches in this class represent normal user-triggered transactions. These types of dispatches only consume a portion of a block's total weight limit. Normal dispatches are sent to the transaction pool.`,
116 |     },
117 |     {
118 |       title: "Operational",
119 |       content: `Unlike normal dispatches, which represent usage of network capabilities, operational dispatches are those that provide network capabilities. Operational dispatches can consume the entire weight limit of a block.`,
120 |     },
121 |     {
122 |       title: "Mandatory",
123 |       content: `The mandatory dispatches are included in a block even if they cause the block to surpass its weight limit. This dispatch class is intended to represent functions that are part of the block validation process. `,
124 |     },
125 |   ]
126 | 
127 |   if (!chain) {
128 |     return (
129 |       <section className="">
130 |         <div className="mx-auto max-w-screen-xl">
131 |           <div className="mb-4 flex flex-col items-center text-sm text-gray-500 ">
132 |             Select a chain to view block consumption
133 |           </div>
134 |         </div>
135 |       </section>
136 |     )
137 |   }
138 | 
139 |   return (
140 |     <>
141 |       <section className="">
142 |         <div className="mx-auto max-w-screen-xl">
143 |           <div className=" mb-4 flex flex-col items-center rounded-lg border border-gray-200 bg-white p-6 shadow-md transition-shadow hover:shadow-lg dark:border-gray-700 dark:bg-gray-800">
144 |             <div className="flex items-center h-14">
145 |               {chain && (
146 |                 <Image
147 |                   className="m-2"
148 |                   src={chain?.logo}
149 |                   alt=""
150 |                   width="52"
151 |                   height="52"
152 |                 />
153 |               )}
154 |               {chain?.name}
155 |             </div>
156 |             Total weight consumed at block #{blockNumber}
157 |             {loading ? (
158 |               <Icons.loading className="mt-2 h-12" />
159 |             ) : (
160 |               <h1 className="mt-2 h-12 text-3xl font-bold">
161 |                 {consumption.total.toString().substring(0, 4)}%
162 |               </h1>
163 |             )}
164 |           </div>
165 |           <div className="grid gap-4 lg:grid-cols-3">
166 |             {data.map((card, index) => (
167 |               <div
168 |                 key={index}
169 |                 className="flex flex-col rounded-lg border border-gray-200 bg-white p-6 shadow-md transition-shadow hover:shadow-lg dark:border-gray-700 dark:bg-gray-800"
170 |               >
171 |                 <div className="mb-5 flex items-center justify-between text-gray-500"></div>
172 |                 <h2 className="mb-2 text-gray-900 dark:text-white">
173 |                   {card.title}
174 |                 </h2>
175 |                 <p className="flex-1 mb-5 text-sm font-light text-gray-500 dark:text-gray-400">
176 |                   {card.content}
177 |                 </p>
178 |                 {loading ? (
179 |                   <Icons.loading className="" />
180 |                 ) : (
181 |                   <p className="font-bold">
182 |                     {getDispatchClassConsumption(card.title)}%
183 |                   </p>
184 |                 )}
185 |               </div>
186 |             ))}
187 |           </div>
188 |         </div>
189 |       </section>
190 |     </>
191 |   )
192 | }
193 | 
194 | export default ConsumptionGrid
195 | 


--------------------------------------------------------------------------------
/components/icons.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   LucideProps,
  3 |   Moon,
  4 |   SunMedium,
  5 |   Twitter,
  6 |   type Icon as LucideIcon,
  7 | } from "lucide-react"
  8 | 
  9 | import { cn } from "@/lib/utils"
 10 | 
 11 | export type Icon = LucideIcon
 12 | 
 13 | export const Icons = {
 14 |   sun: SunMedium,
 15 |   moon: Moon,
 16 |   twitter: Twitter,
 17 |   logo: (props: LucideProps) => (
 18 |     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
 19 |       <path
 20 |         fill="currentColor"
 21 |         d="M11.572 0c-.176 0-.31.001-.358.007a19.76 19.76 0 0 1-.364.033C7.443.346 4.25 2.185 2.228 5.012a11.875 11.875 0 0 0-2.119 5.243c-.096.659-.108.854-.108 1.747s.012 1.089.108 1.748c.652 4.506 3.86 8.292 8.209 9.695.779.25 1.6.422 2.534.525.363.04 1.935.04 2.299 0 1.611-.178 2.977-.577 4.323-1.264.207-.106.247-.134.219-.158-.02-.013-.9-1.193-1.955-2.62l-1.919-2.592-2.404-3.558a338.739 338.739 0 0 0-2.422-3.556c-.009-.002-.018 1.579-.023 3.51-.007 3.38-.01 3.515-.052 3.595a.426.426 0 0 1-.206.214c-.075.037-.14.044-.495.044H7.81l-.108-.068a.438.438 0 0 1-.157-.171l-.05-.106.006-4.703.007-4.705.072-.092a.645.645 0 0 1 .174-.143c.096-.047.134-.051.54-.051.478 0 .558.018.682.154.035.038 1.337 1.999 2.895 4.361a10760.433 10760.433 0 0 0 4.735 7.17l1.9 2.879.096-.063a12.317 12.317 0 0 0 2.466-2.163 11.944 11.944 0 0 0 2.824-6.134c.096-.66.108-.854.108-1.748 0-.893-.012-1.088-.108-1.747-.652-4.506-3.859-8.292-8.208-9.695a12.597 12.597 0 0 0-2.499-.523A33.119 33.119 0 0 0 11.573 0zm4.069 7.217c.347 0 .408.005.486.047a.473.473 0 0 1 .237.277c.018.06.023 1.365.018 4.304l-.006 4.218-.744-1.14-.746-1.14v-3.066c0-1.982.01-3.097.023-3.15a.478.478 0 0 1 .233-.296c.096-.05.13-.054.5-.054z"
 22 |       />
 23 |     </svg>
 24 |   ),
 25 |   gitHub: (props: LucideProps) => (
 26 |     <svg viewBox="0 0 438.549 438.549" {...props}>
 27 |       <path
 28 |         fill="currentColor"
 29 |         d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
 30 |       ></path>
 31 |     </svg>
 32 |   ),
 33 |   polkadot: (props: LucideProps) => (
 34 |     <svg
 35 |       xmlns="http://www.w3.org/2000/svg"
 36 |       version="1.1"
 37 |       id="Layer_1"
 38 |       x="0px"
 39 |       y="0px"
 40 |       viewBox="0 0 2500 2500"
 41 |       xmlSpace="preserve"
 42 |       {...props}
 43 |       // style={{ enableBackground: "new 0 0 2500 2500" }}
 44 |     >
 45 |       <g id="Layer_x0020_1">
 46 |         <g id="_2085151875344">
 47 |           <rect y="0" fill="none" width="2500" height="2500"></rect>
 48 |           <g>
 49 |             <ellipse
 50 |               fill="#e6007a"
 51 |               cx="1250"
 52 |               cy="262.2"
 53 |               rx="450.8"
 54 |               ry="262.2"
 55 |             ></ellipse>
 56 |             <ellipse
 57 |               fill="#e6007a"
 58 |               cx="1250"
 59 |               cy="2237.8"
 60 |               rx="450.8"
 61 |               ry="262.2"
 62 |             ></ellipse>
 63 | 
 64 |             <ellipse
 65 |               transform="matrix(0.5 -0.866 0.866 0.5 -457.5668 719.7572)"
 66 |               fill="#e6007a"
 67 |               cx="394.6"
 68 |               cy="756.1"
 69 |               rx="450.8"
 70 |               ry="262.4"
 71 |             ></ellipse>
 72 | 
 73 |             <ellipse
 74 |               transform="matrix(0.5 -0.866 0.866 0.5 -457.5751 2695.3049)"
 75 |               fill="#e6007a"
 76 |               cx="2105.4"
 77 |               cy="1743.9"
 78 |               rx="450.8"
 79 |               ry="262.2"
 80 |             ></ellipse>
 81 | 
 82 |             <ellipse
 83 |               transform="matrix(0.866 -0.5 0.5 0.866 -819.0784 430.9572)"
 84 |               fill="#e6007a"
 85 |               cx="394.6"
 86 |               cy="1743.9"
 87 |               rx="262.4"
 88 |               ry="450.8"
 89 |             ></ellipse>
 90 | 
 91 |             <ellipse
 92 |               transform="matrix(0.866 -0.5 0.5 0.866 -96.0081 1154.1161)"
 93 |               fill="#e6007a"
 94 |               cx="2105.6"
 95 |               cy="756.2"
 96 |               rx="262.2"
 97 |               ry="450.8"
 98 |             ></ellipse>
 99 |           </g>
100 |         </g>
101 |       </g>
102 |     </svg>
103 |   ),
104 |   kusama: (props: LucideProps) => (
105 |     <svg
106 |       xmlns="http://www.w3.org/2000/svg"
107 |       version="1.1"
108 |       id="Layer_1"
109 |       x="0px"
110 |       y="0px"
111 |       viewBox="0 0 2500 2500"
112 |       xmlSpace="preserve"
113 |       {...props}
114 |     >
115 |       <g id="Layer_x0020_1">
116 |         <g id="_2234187675152">
117 |           <path
118 |             fillRule="evenodd"
119 |             clipRule="evenodd"
120 |             d="M1250,0c690,0,1250,560,1250,1250s-560,1250-1250,1250S0,1940,0,1250S560,0,1250,0z"
121 |           ></path>
122 |           <path
123 |             fill="#fff"
124 |             d="M2008,784c-32-28-68-50-110-57c-53-7-107,28-142,53c-36,25-107,89-135,114s-100,39-217,110s-573,363-573,363    h117l-530,274h53l-75,57c43,11,85,4,125-18v18c0,0,630-249,751-185l-75,21c7,0,125,7,125,7c7,50,36,96,78,121c71,46,75,75,75,75    s-36,14-36,36c68-21,139-21,203,0c0,0-4-21-53-36c-50-21-93-53-125-100c-28-39-39-89-21-135s78-71,203-135c146-75,182-132,199-178    c18-46,53-132,68-174c14-39,39-71,71-100c39-21,82-39,121-53c7,4-71-61-96-78H2008z"
125 |           ></path>
126 |         </g>
127 |       </g>
128 |     </svg>
129 |   ),
130 |   loading: ({ className }: { className: string }) => (
131 |     <svg
132 |       xmlns="http://www.w3.org/2000/svg"
133 |       width="24"
134 |       height="24"
135 |       viewBox="0 0 24 24"
136 |       fill="none"
137 |       stroke="currentColor"
138 |       strokeWidth="2"
139 |       strokeLinecap="round"
140 |       strokeLinejoin="round"
141 |       className={cn("animate-spin", className)}
142 |     >
143 |       <path d="M21 12a9 9 0 1 1-6.219-8.56" />
144 |     </svg>
145 |   ),
146 | }
147 | 


--------------------------------------------------------------------------------
/components/ui/dropdown-menu.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
  3 | import { Check, ChevronRight, Circle } from "lucide-react"
  4 | 
  5 | import { cn } from "@/lib/utils"
  6 | 
  7 | const DropdownMenu = DropdownMenuPrimitive.Root
  8 | 
  9 | const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
 10 | 
 11 | const DropdownMenuGroup = DropdownMenuPrimitive.Group
 12 | 
 13 | const DropdownMenuPortal = DropdownMenuPrimitive.Portal
 14 | 
 15 | const DropdownMenuSub = DropdownMenuPrimitive.Sub
 16 | 
 17 | const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
 18 | 
 19 | const DropdownMenuSubTrigger = React.forwardRef<
 20 |   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
 21 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
 22 |     inset?: boolean
 23 |   }
 24 | >(({ className, inset, children, ...props }, ref) => (
 25 |   <DropdownMenuPrimitive.SubTrigger
 26 |     ref={ref}
 27 |     className={cn(
 28 |       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
 29 |       inset && "pl-8",
 30 |       className
 31 |     )}
 32 |     {...props}
 33 |   >
 34 |     {children}
 35 |     <ChevronRight className="ml-auto h-4 w-4" />
 36 |   </DropdownMenuPrimitive.SubTrigger>
 37 | ))
 38 | DropdownMenuSubTrigger.displayName =
 39 |   DropdownMenuPrimitive.SubTrigger.displayName
 40 | 
 41 | const DropdownMenuSubContent = React.forwardRef<
 42 |   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
 43 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
 44 | >(({ className, ...props }, ref) => (
 45 |   <DropdownMenuPrimitive.SubContent
 46 |     ref={ref}
 47 |     className={cn(
 48 |       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 49 |       className
 50 |     )}
 51 |     {...props}
 52 |   />
 53 | ))
 54 | DropdownMenuSubContent.displayName =
 55 |   DropdownMenuPrimitive.SubContent.displayName
 56 | 
 57 | const DropdownMenuContent = React.forwardRef<
 58 |   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
 59 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
 60 | >(({ className, sideOffset = 4, ...props }, ref) => (
 61 |   <DropdownMenuPrimitive.Portal>
 62 |     <DropdownMenuPrimitive.Content
 63 |       ref={ref}
 64 |       sideOffset={sideOffset}
 65 |       className={cn(
 66 |         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 67 |         className
 68 |       )}
 69 |       {...props}
 70 |     />
 71 |   </DropdownMenuPrimitive.Portal>
 72 | ))
 73 | DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
 74 | 
 75 | const DropdownMenuItem = React.forwardRef<
 76 |   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
 77 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
 78 |     inset?: boolean
 79 |   }
 80 | >(({ className, inset, ...props }, ref) => (
 81 |   <DropdownMenuPrimitive.Item
 82 |     ref={ref}
 83 |     className={cn(
 84 |       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 85 |       inset && "pl-8",
 86 |       className
 87 |     )}
 88 |     {...props}
 89 |   />
 90 | ))
 91 | DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
 92 | 
 93 | const DropdownMenuCheckboxItem = React.forwardRef<
 94 |   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
 95 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
 96 | >(({ className, children, checked, ...props }, ref) => (
 97 |   <DropdownMenuPrimitive.CheckboxItem
 98 |     ref={ref}
 99 |     className={cn(
100 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
101 |       className
102 |     )}
103 |     checked={checked}
104 |     {...props}
105 |   >
106 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
107 |       <DropdownMenuPrimitive.ItemIndicator>
108 |         <Check className="h-4 w-4" />
109 |       </DropdownMenuPrimitive.ItemIndicator>
110 |     </span>
111 |     {children}
112 |   </DropdownMenuPrimitive.CheckboxItem>
113 | ))
114 | DropdownMenuCheckboxItem.displayName =
115 |   DropdownMenuPrimitive.CheckboxItem.displayName
116 | 
117 | const DropdownMenuRadioItem = React.forwardRef<
118 |   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
119 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
120 | >(({ className, children, ...props }, ref) => (
121 |   <DropdownMenuPrimitive.RadioItem
122 |     ref={ref}
123 |     className={cn(
124 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
125 |       className
126 |     )}
127 |     {...props}
128 |   >
129 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
130 |       <DropdownMenuPrimitive.ItemIndicator>
131 |         <Circle className="h-2 w-2 fill-current" />
132 |       </DropdownMenuPrimitive.ItemIndicator>
133 |     </span>
134 |     {children}
135 |   </DropdownMenuPrimitive.RadioItem>
136 | ))
137 | DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
138 | 
139 | const DropdownMenuLabel = React.forwardRef<
140 |   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
141 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
142 |     inset?: boolean
143 |   }
144 | >(({ className, inset, ...props }, ref) => (
145 |   <DropdownMenuPrimitive.Label
146 |     ref={ref}
147 |     className={cn(
148 |       "px-2 py-1.5 text-sm font-semibold",
149 |       inset && "pl-8",
150 |       className
151 |     )}
152 |     {...props}
153 |   />
154 | ))
155 | DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
156 | 
157 | const DropdownMenuSeparator = React.forwardRef<
158 |   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
159 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
160 | >(({ className, ...props }, ref) => (
161 |   <DropdownMenuPrimitive.Separator
162 |     ref={ref}
163 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
164 |     {...props}
165 |   />
166 | ))
167 | DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
168 | 
169 | const DropdownMenuShortcut = ({
170 |   className,
171 |   ...props
172 | }: React.HTMLAttributes<HTMLSpanElement>) => {
173 |   return (
174 |     <span
175 |       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
176 |       {...props}
177 |     />
178 |   )
179 | }
180 | DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
181 | 
182 | export {
183 |   DropdownMenu,
184 |   DropdownMenuTrigger,
185 |   DropdownMenuContent,
186 |   DropdownMenuItem,
187 |   DropdownMenuCheckboxItem,
188 |   DropdownMenuRadioItem,
189 |   DropdownMenuLabel,
190 |   DropdownMenuSeparator,
191 |   DropdownMenuShortcut,
192 |   DropdownMenuGroup,
193 |   DropdownMenuPortal,
194 |   DropdownMenuSub,
195 |   DropdownMenuSubContent,
196 |   DropdownMenuSubTrigger,
197 |   DropdownMenuRadioGroup,
198 | }
199 | 


--------------------------------------------------------------------------------
/components/historic-consumption.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import { useEffect, useState } from "react"
  4 | import Link from "next/link"
  5 | import { DataDisplay, DateRange } from "@/common/types"
  6 | import { useChain } from "@/providers/chain-provider"
  7 | import {
  8 |   addDays,
  9 |   addHours,
 10 |   addMonths,
 11 |   addWeeks,
 12 |   endOfDay,
 13 |   endOfHour,
 14 |   endOfMonth,
 15 |   endOfWeek,
 16 |   format,
 17 |   isBefore,
 18 |   startOfDay,
 19 |   startOfHour,
 20 |   startOfMonth,
 21 |   startOfWeek,
 22 |   subDays,
 23 |   subHours,
 24 |   subMonths,
 25 |   subWeeks,
 26 |   subYears,
 27 | } from "date-fns"
 28 | import {
 29 |   CalendarIcon,
 30 |   ChevronLeftIcon,
 31 |   ChevronRightIcon,
 32 | } from "lucide-react"
 33 | 
 34 | import { useConsumption, useEarliestConsumption } from "@/hooks/use-consumption"
 35 | 
 36 | import ConsumptionChart from "./consumption-chart"
 37 | import { Button } from "./ui/button"
 38 | import { Checkbox } from "./ui/checkbox"
 39 | import DownloadJSONButton from "./ui/download-json.button"
 40 | import {
 41 |   Select,
 42 |   SelectContent,
 43 |   SelectItem,
 44 |   SelectTrigger,
 45 |   SelectValue,
 46 | } from "./ui/select"
 47 | import { Skeleton } from "./ui/skeleton"
 48 | 
 49 | const dateRangeOptions: DateRange[] = ["hour", "day", "week", "month", "year", "all"]
 50 | 
 51 | export function HistoricConsumption() {
 52 |   const [range, setRange] = useState<DateRange>("hour")
 53 |   const [currentRangeStart, setCurrentRangeStart] = useState(() =>
 54 |     startOfHour(new Date())
 55 |   )
 56 |   const [currentRangeEnd, setCurrentRangeEnd] = useState(() =>
 57 |     endOfHour(new Date())
 58 |   )
 59 | 
 60 |   const [dataDisplay, setDataDisplay] = useState<DataDisplay>("ref_time")
 61 | 
 62 |   const [refTimeDisplayed, setRefTimeDisplayed] = useState(true)
 63 |   const [proofSizeDisplayed, setProofSizeDisplayed] = useState(false)
 64 | 
 65 |   const { chain } = useChain()
 66 |   const {
 67 |     data: historicConsumption,
 68 |     isLoading,
 69 |     isError,
 70 |     error,
 71 |     isFetching,
 72 |   } = useConsumption({ range, start: currentRangeStart, end: currentRangeEnd })
 73 | 
 74 |   const { data: earliestDataEntry } = useEarliestConsumption();
 75 |   const earliestDataDate = earliestDataEntry?.[0].group
 76 |     ? new Date(earliestDataEntry[0].group)
 77 |     : new Date("2020-01-01");
 78 | 
 79 |   const latestDataDate = new Date(); // Example latest data date, assuming it's today for simplicity
 80 | 
 81 |   const today = new Date();
 82 |   const endOfToday = endOfHour(today);
 83 | 
 84 |   //Determine if the "previous" or "next" buttons should be disabled
 85 |   const disablePrevious = isBefore(
 86 |     currentRangeStart,
 87 |     earliestDataDate
 88 |   )
 89 |   const disableNext = !isBefore(currentRangeEnd, endOfToday)
 90 | 
 91 |   const formatDateRangeDisplay = (range: DateRange, start: Date, end: Date) => {
 92 |     switch (range) {
 93 |       case "hour":
 94 |         return format(start, "MMM dd, yyyy hh:mm") // Single day
 95 |       case "day":
 96 |         return format(start, "MMM dd, yyyy") // Single day
 97 |       case "week":
 98 |         return `${format(start, "MMM dd")} - ${format(end, "MMM dd, yyyy")}` // Week range within the same year
 99 |       case "month":
100 |         return format(start, "MMMM yyyy") // Full month
101 |       case "year":
102 |         return format(start, "yyyy") // Full year
103 |       case "all":
104 |         return "All time" // All data available
105 |       default:
106 |         return "" // Fallback for unexpected range values
107 |     }
108 |   }
109 | 
110 |   const displayedDateRange = formatDateRangeDisplay(
111 |     range,
112 |     currentRangeStart,
113 |     currentRangeEnd
114 |   );
115 | 
116 |   // Handlers for changing the week/month
117 |   const goToPrevious = () => {
118 |     if (range === "hour") {
119 |       setCurrentRangeStart((prev) => subHours(prev, 1))
120 |       setCurrentRangeEnd((prev) => subHours(prev, 1))
121 |     }else if (range === "day") {
122 |       setCurrentRangeStart((prev) => subDays(prev, 1))
123 |       setCurrentRangeEnd((prev) => subDays(prev, 1))
124 |     } else if (range === "week") {
125 |       setCurrentRangeStart((prev) => subWeeks(prev, 1))
126 |       setCurrentRangeEnd((prev) => subWeeks(prev, 1))
127 |     } else if (range === "month") {
128 |       setCurrentRangeStart((prev) => subMonths(prev, 1))
129 |       setCurrentRangeEnd((prev) => subMonths(prev, 1))
130 |     } else if (range === "year") {
131 |       setCurrentRangeStart((prev) => subYears(prev, 12))
132 |       setCurrentRangeEnd((prev) => subYears(prev, 12))
133 |     } else if (range === "all") {
134 |       setCurrentRangeStart(earliestDataDate)
135 |       setCurrentRangeEnd(latestDataDate)
136 |     }
137 |   }
138 | 
139 |   const goToNext = () => {
140 |     if (range === "hour") {
141 |       setCurrentRangeStart((prev) => addHours(prev, 1))
142 |       setCurrentRangeEnd((prev) => addHours(prev, 1))
143 |     }else if (range === "day") {
144 |       setCurrentRangeStart((prev) => addDays(prev, 1))
145 |       setCurrentRangeEnd((prev) => addDays(prev, 1))
146 |     } else if (range === "week") {
147 |       setCurrentRangeStart((prev) => addWeeks(prev, 1))
148 |       setCurrentRangeEnd((prev) => addWeeks(prev, 1))
149 |     } else if (range === "month") {
150 |       setCurrentRangeStart((prev) => addMonths(prev, 1))
151 |       setCurrentRangeEnd((prev) => addMonths(prev, 1))
152 |     } else if (range === "year") {
153 |       setCurrentRangeStart((prev) => addMonths(prev, 12))
154 |       setCurrentRangeEnd((prev) => addMonths(prev, 12))
155 |     } else if (range === "all") {
156 |       setCurrentRangeStart(earliestDataDate)
157 |       setCurrentRangeEnd(latestDataDate)
158 |     }
159 |   }
160 | 
161 |   // Effect to adjust range when `range` state changes
162 |   useEffect(() => {
163 |     if (range === "hour") {
164 |       setCurrentRangeStart(startOfHour(new Date()))
165 |       setCurrentRangeEnd(endOfHour(new Date()))
166 |     } else if (range === "day") {
167 |       setCurrentRangeStart(startOfDay(new Date()))
168 |       setCurrentRangeEnd(endOfDay(new Date()))
169 |     } else if (range === "week") {
170 |       setCurrentRangeStart(startOfWeek(new Date(), { weekStartsOn: 1 }))
171 |       setCurrentRangeEnd(endOfWeek(new Date(), { weekStartsOn: 1 }))
172 |     } else if (range === "month") {
173 |       setCurrentRangeStart(startOfMonth(new Date()))
174 |       setCurrentRangeEnd(endOfMonth(new Date()))
175 |     }
176 |   }, [range])
177 | 
178 |   if (!chain) {
179 |     return (
180 |       <section className="">
181 |         <div className="mx-auto max-w-screen-xl">
182 |           <div className="mb-4 flex flex-col items-center text-sm text-gray-500 ">
183 |             Select a chain to view historic consumption charts
184 |           </div>
185 |         </div>
186 |       </section>
187 |     )
188 |   }
189 | 
190 |   if (isError) {
191 |     return (
192 |       <section className="">
193 |         <div className="mx-auto max-w-screen-xl">
194 |           <div className="mb-4 flex flex-col items-center text-sm text-gray-500 ">
195 |             Error fetching historic consumption data. It seems the selected
196 |             chain is not registered yet or there is no data yet.
197 |             <Link href="/subscribe">
198 |               <Button className="mt-4">Register Chain</Button>
199 |             </Link>
200 |           </div>
201 |         </div>
202 |       </section>
203 |     )
204 |   }
205 | 
206 |   return (
207 |     <div className="history w-full">
208 |       <div className="controls flex flex-row justify-between items-end">
209 |         <div className="flex flex-col">
210 |           <div className="mb-2 text-start">
211 |             <span>Viewing data for: </span>
212 |             <strong>{displayedDateRange}</strong>
213 |           </div>
214 |           <div className="flex items-center">
215 |             <Button
216 |               onClick={goToPrevious}
217 |               variant="default"
218 |               className="mr-1"
219 |               disabled={disablePrevious}
220 |             >
221 |               {" "}
222 |               <ChevronLeftIcon />
223 |               Previous {range}
224 |             </Button>
225 |             <Select
226 |               onValueChange={(val: DateRange) => setRange(val)}
227 |               value={range}
228 |             >
229 |               <SelectTrigger className="w-[180px] h-10">
230 |                 <CalendarIcon />
231 |                 <SelectValue placeholder="Select Range" />
232 |               </SelectTrigger>
233 |               <SelectContent>
234 |                 {dateRangeOptions.map((range) => (
235 |                   <SelectItem value={range} key={range}>
236 |                     {range}
237 |                   </SelectItem>
238 |                 ))}
239 |               </SelectContent>
240 |             </Select>
241 | 
242 |             <Button
243 |               onClick={goToNext}
244 |               variant="default"
245 |               disabled={disableNext}
246 |               className="ml-1"
247 |             >
248 |               Next {range} <ChevronRightIcon />
249 |             </Button>
250 |           </div>
251 |         </div>
252 |         <div>
253 |           <div className="export flex flex-col items-start justify-start gap-2">
254 |             <div className="flex items-end">
255 |               <DownloadJSONButton
256 |                 className="rounded-md"
257 |                 jsonData={historicConsumption || []}
258 |                 fileName={`historic-consumption-${chain.name}-${displayedDateRange}.json`}
259 |               >
260 |                 Export JSON
261 |               </DownloadJSONButton>
262 |             </div>
263 |           </div>
264 |         </div>
265 |       </div>
266 |       <div className="data-selection flex flex-col my-2 items-center">
267 |         <div className="flex flex-row gap-4">
268 |           <div className="flex items-center space-x-2">
269 |             <Checkbox
270 |               id="refTime"
271 |               checked={refTimeDisplayed}
272 |               onCheckedChange={() => setRefTimeDisplayed(!refTimeDisplayed)}
273 |             />
274 |             <label
275 |               htmlFor="terms"
276 |               className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
277 |             >
278 |               Ref Time
279 |             </label>
280 |           </div>
281 |           <div className="flex items-center space-x-2">
282 |             <Checkbox
283 |               id="refTime"
284 |               checked={proofSizeDisplayed}
285 |               onCheckedChange={() => setProofSizeDisplayed(!proofSizeDisplayed)}
286 |             />
287 |             <label
288 |               htmlFor="terms"
289 |               className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
290 |             >
291 |               Proof Size
292 |             </label>
293 |           </div>
294 |         </div>
295 |       </div>
296 |       <div>
297 |         {error || isError ? (
298 |           "error"
299 |         ) : isLoading || !historicConsumption ? (
300 |           <Skeleton className="h-[500px] w-full rounded-sm flex justify-center items-center">
301 |             Loading Chart
302 |           </Skeleton>
303 |         ) : (
304 |           <ConsumptionChart
305 |             data={historicConsumption}
306 |             grouping={range}
307 |             refTimeDisplayed={refTimeDisplayed}
308 |             proofSizeDisplayed={proofSizeDisplayed}
309 |           />
310 |         )}
311 |       </div>
312 |     </div>
313 |   )
314 | }
315 | 


--------------------------------------------------------------------------------
/app/subscribe/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import { useEffect, useState } from "react"
  4 | import Image from "next/image"
  5 | import { useChain } from "@/providers/chain-provider"
  6 | import { bnToBn } from "@polkadot/util"
  7 | import { formatBalance, useBalance, useInkathon } from "@scio-labs/use-inkathon"
  8 | import { toast } from "sonner"
  9 | 
 10 | import { siteConfig } from "@/config/site"
 11 | import { uppercaseFirstLetter } from "@/lib/utils"
 12 | import { useRegisteredChains } from "@/hooks/use-registered-chains"
 13 | import {
 14 |   AlertDialog,
 15 |   AlertDialogAction,
 16 |   AlertDialogCancel,
 17 |   AlertDialogContent,
 18 |   AlertDialogFooter,
 19 |   AlertDialogHeader,
 20 |   AlertDialogTitle,
 21 |   AlertDialogTrigger,
 22 | } from "@/components/ui/alert-dialog"
 23 | import { Button } from "@/components/ui/button"
 24 | import ChainSelect from "@/components/chain-select"
 25 | import { ConnectButton } from "@/components/connect-button"
 26 | import NetworkSelect from "@/components/network-select"
 27 | 
 28 | import { extendWithServer, registerWithServer } from "./post-tx"
 29 | import { subscribeTx } from "./subscribe-tx"
 30 | 
 31 | type ChainStatus = {
 32 |   registered: boolean
 33 |   expiryInDays?: number | undefined
 34 | }
 35 | 
 36 | enum Operation {
 37 |   Register,
 38 |   Extend
 39 | };
 40 | 
 41 | export default function SubscribePage() {
 42 |   const { activeAccount, api, isConnected } = useInkathon()
 43 |   const { tokenDecimals, freeBalance } = useBalance(
 44 |     activeAccount?.address,
 45 |     true
 46 |   )
 47 | 
 48 |   const { chain: selectedChain, network: selectedNetwork } = useChain()
 49 |   const { data: registeredChains, isLoading, isError } = useRegisteredChains()
 50 | 
 51 |   const [chainStatus, setChainStatus] = useState<ChainStatus>({
 52 |     registered: false,
 53 |     expiryInDays: undefined,
 54 |   })
 55 | 
 56 |   function getTimeLeft(expiryTimestamp: string): number | undefined {
 57 |     const expiry = new Date(parseInt(expiryTimestamp) * 1000) // Convert Unix timestamp to milliseconds
 58 |     const now = new Date()
 59 |     const diffInMilliseconds = expiry.getTime() - now.getTime()
 60 | 
 61 |     if (diffInMilliseconds <= 0) {
 62 |       return -1
 63 |     }
 64 | 
 65 |     const diffInSeconds = Math.floor(diffInMilliseconds / 1000)
 66 |     const diffInMinutes = Math.floor(diffInSeconds / 60)
 67 |     const diffInHours = Math.floor(diffInMinutes / 60)
 68 |     const diffInDays = Math.floor(diffInHours / 24)
 69 | 
 70 |     let timeLeftString = ""
 71 | 
 72 |     if (diffInDays > 0) {
 73 |       timeLeftString += `${diffInDays} day${diffInDays > 1 ? "s" : ""} `
 74 |     }
 75 | 
 76 |     return diffInDays
 77 |   }
 78 | 
 79 |   useEffect(() => {
 80 |     const registeredChain = registeredChains?.find(
 81 |       (chain) =>
 82 |         chain.relay_chain.toLowerCase() ===
 83 |           selectedChain?.relay?.id.toLowerCase() &&
 84 |         chain.para_id === selectedChain?.paraId
 85 |     )
 86 | 
 87 |     const chainStatus: ChainStatus = {
 88 |       registered: !!registeredChain,
 89 |       expiryInDays: registeredChain?.expiry_timestamp
 90 |         ? getTimeLeft(registeredChain.expiry_timestamp.toString())
 91 |         : undefined,
 92 |     }
 93 | 
 94 |     setChainStatus(chainStatus)
 95 |   }, [selectedChain, registeredChains])
 96 | 
 97 |   async function handleSubscribe(op: Operation) {
 98 |     if (!api || !activeAccount || !selectedNetwork || 
 99 |       selectedChain?.paraId == null || selectedChain?.paraId == undefined) {
100 |       return
101 |     }
102 | 
103 |     const { result, toastId, chain, network } = await subscribeTx(
104 |       api,
105 |       activeAccount.address,
106 |       selectedNetwork,
107 |       tokenDecimals,
108 |       selectedChain
109 |     )
110 | 
111 |     //@ts-ignore
112 |     const blockNumber = result?.blockNumber.toString()
113 | 
114 |     if (!blockNumber) {
115 |       console.error("error getting the block number")
116 |       return
117 |     }
118 | 
119 |     try {
120 |       if(op == Operation.Extend) {
121 |         const _ = await extendWithServer(
122 |           parseInt(blockNumber),
123 |           selectedChain.paraId,
124 |           selectedNetwork
125 |         );
126 |       }else if(op == Operation.Register) {
127 |         const _ = await registerWithServer(
128 |           parseInt(blockNumber),
129 |           selectedChain.paraId,
130 |           selectedNetwork
131 |         );
132 |       }
133 |     } catch (e) {
134 |       //@ts-ignore
135 |       toast.error(e.message, { id: toastId })
136 |       return
137 |     }
138 | 
139 |     toast.success(
140 |       `Subscription of ${chain?.name} on ${uppercaseFirstLetter(
141 |         network || ""
142 |       )} successful!`,
143 |       {
144 |         id: toastId,
145 |         duration: 5000,
146 |         action: {
147 |           label: "↗ Subscan",
148 |           onClick: () =>
149 |             window.open(
150 |               `${siteConfig.blockExplorer}${result?.txHash}`,
151 |               "_blank"
152 |             ),
153 |         },
154 |       }
155 |     )
156 |   }
157 | 
158 |   const isAccountBalanceInsufficient = freeBalance?.lt(
159 |     bnToBn(siteConfig.subscriptionCost)
160 |   )
161 | 
162 |   return (
163 |     <section className="">
164 |       <div className="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6">
165 |         <div className="mx-auto max-w-screen-sm text-center">
166 |           <h2 className="mb-4 text-4xl tracking-tight font-extrabold leading-tight text-gray-900 dark:text-white">
167 |             Register a Parachain
168 |           </h2>
169 |           <p className="mb-6 font-light text-gray-500 dark:text-gray-400 md:text-lg">
170 |             Register your chain to start tracking its consumption. This will
171 |             allow you to see the consumption of your chain on the historic
172 |             consumption page.
173 |           </p>
174 |         </div>
175 | 
176 |         <div className="mb-4 flex gap-4 justify-center">
177 |           <NetworkSelect />
178 |           <ChainSelect />
179 |         </div>
180 | 
181 |         {selectedChain && (
182 |           <div className="registry-info text-center">
183 |             {chainStatus && chainStatus.registered ? (
184 |               <div>
185 |                 <h2>
186 |                   {selectedChain.name} is already registered and will expire in:{" "}
187 |                   <b>{chainStatus.expiryInDays}</b> days
188 |                 </h2>
189 |                 {chainStatus.expiryInDays && chainStatus.expiryInDays < 30 && (
190 |                   <div className="flex flex-row gap-2 mt-4 items-center justify-center">
191 |                     <ConnectButton size="lg" />
192 |                     <AlertDialog>
193 |                       <AlertDialogTrigger disabled={!isConnected}>
194 |                         <Button
195 |                           size="lg"
196 |                           className=""
197 |                           disabled={!isConnected}
198 |                         >
199 |                           Extend {" "}
200 |                           <Image
201 |                             src={selectedChain.logo}
202 |                             alt="logo"
203 |                             width={32}
204 |                             height={32}
205 |                             className="mx-2 inline-block"
206 |                           />
207 |                           <span className="mr-1">{selectedChain.name}</span>
208 |                           subscription for 10 DOT
209 |                         </Button>
210 |                       </AlertDialogTrigger>
211 |                       <AlertDialogContent>
212 |                         <AlertDialogHeader>
213 |                           <AlertDialogTitle>
214 |                             {selectedChain.name} Subscription
215 |                           </AlertDialogTitle>
216 |                         </AlertDialogHeader>
217 |                         <div>
218 |                           <p>
219 |                             Extending {selectedChain.name} subscription
220 |                             PolkadotWeigher will allow you to track its
221 |                             consumption for the upcoming period of 90 days.
222 |                           </p>
223 |                           <p className="mt-4">
224 |                             The subscription renewal costs <b>10 DOT</b> and will expire
225 |                             in 90days.
226 |                           </p>
227 |                         </div>
228 |                         <AlertDialogFooter>
229 |                           <AlertDialogCancel>Cancel</AlertDialogCancel>
230 |                           <AlertDialogAction
231 |                             className="flex-1"
232 |                             onClick={() => handleSubscribe(Operation.Extend)}
233 |                             disabled={isAccountBalanceInsufficient}
234 |                           >
235 |                             Renew
236 |                           </AlertDialogAction>
237 |                         </AlertDialogFooter>
238 |                         {isAccountBalanceInsufficient && (
239 |                           <div className="text-orange-500 text-xs text-right">
240 |                             ⚠️ Your account balance is too low to subscribe
241 |                           </div>
242 |                         )}
243 |                       </AlertDialogContent>
244 |                     </AlertDialog>
245 |                   </div>
246 |                 )}
247 |               </div>
248 |             ) : (
249 |               <section className="bg-blue-100 dark:bg-gray-900 mt-8 rounded-sm">
250 |                 <div className="py-8 px-4 mx-auto sm:py-16 lg:px-6">
251 |                   <div className="mx-auto flex items-center flex-col">
252 |                     <h2 className="mb-4 text-2xl tracking-tight font-extrabold leading-tight text-gray-900 dark:text-white">
253 |                       {selectedChain.name} is not registered yet. Registering a chain will allow:
254 |                     </h2>
255 |                     <div className="grid grid-cols-3 gap-6 my-12">
256 |                       <Fetaure 
257 |                         title="Computational Consumption Tracking" 
258 |                         content="Gain precise insights into the computational demands of processing and validating blocks within your network."
259 |                       />
260 |                       <Fetaure 
261 |                         title="Detailed Proof Size Analysis" 
262 |                         content="Analyze the size of validation proofs to of blocks within your network."
263 |                       />
264 |                       <Fetaure 
265 |                         title="Identification of Peak Consumption Periods" 
266 |                         content="Discover exact moments when your network experiences maximum load."
267 |                       />
268 |                       <Fetaure 
269 |                         title="Insights into Usage Patterns" 
270 |                         content="Uncover patterns of high and low network activity over time."
271 |                       />
272 |                       <Fetaure 
273 |                         title="Data Categorization" 
274 |                         content="Categorization of data for over all dispatch classes."
275 |                       />
276 |                       <Fetaure 
277 |                         title="Historical Consumption Data Visualization" 
278 |                         content="Access comprehensive visualizations of historical network consumption on a dedicated page."
279 |                       />
280 |                     </div>
281 |                     <div className="flex flex-row mt-8 gap-2">
282 |                       <ConnectButton size="lg" />
283 |                       <AlertDialog>
284 |                         <AlertDialogTrigger disabled={!isConnected}>
285 |                           <Button
286 |                             size="lg"
287 |                             className=""
288 |                             disabled={!isConnected}
289 |                           >
290 |                             Register{" "}
291 |                             <Image
292 |                               src={selectedChain.logo}
293 |                               alt="logo"
294 |                               width={32}
295 |                               height={32}
296 |                               className="mx-2 inline-block"
297 |                             />
298 |                             <span className="mr-1">{selectedChain.name}</span>
299 |                             for 10 DOT now!
300 |                           </Button>
301 |                         </AlertDialogTrigger>
302 |                         <AlertDialogContent>
303 |                           <AlertDialogHeader>
304 |                             <AlertDialogTitle>
305 |                               {selectedChain.name} Subscription
306 |                             </AlertDialogTitle>
307 |                           </AlertDialogHeader>
308 |                           <div>
309 |                             <p>
310 |                               Registering {selectedChain.name} on
311 |                               PolkadotWeigher will allow you to track its
312 |                               consumption for the upcoming period of 90 days.
313 |                             </p>
314 |                             <p className="mt-4">
315 |                               The subscription costs <b>10 DOT</b> and will expire
316 |                               in 90days.
317 |                             </p>
318 |                           </div>
319 |                           <AlertDialogFooter>
320 |                             <AlertDialogCancel>Cancel</AlertDialogCancel>
321 |                             <AlertDialogAction
322 |                               className="flex-1"
323 |                               onClick={() => handleSubscribe(Operation.Register)}
324 |                               disabled={isAccountBalanceInsufficient}
325 |                             >
326 |                               Register
327 |                             </AlertDialogAction>
328 |                           </AlertDialogFooter>
329 |                           {isAccountBalanceInsufficient && (
330 |                             <div className="text-orange-500 text-xs text-right">
331 |                               ⚠️ Your account balance is too low to register
332 |                             </div>
333 |                           )}
334 |                         </AlertDialogContent>
335 |                       </AlertDialog>
336 |                     </div>
337 |                   </div>
338 |                 </div>
339 |               </section>
340 |             )}
341 |             <ReportIssue />
342 |           </div>
343 |         )}
344 |       </div>
345 |     </section>
346 |   )
347 | }
348 | 
349 | interface FeatureProps {
350 |   title: string,
351 |   content: string,
352 | }
353 | 
354 | const Fetaure = ({title, content}: FeatureProps) => {
355 |   return (
356 |     <div className="border-dashed border-2 border-sky-500 p-2 hover:border-solid rounded">
357 |       <h3 className="text-xl m-2 font-normal">{title}</h3>
358 |       <p className="m-2 font-light">
359 |         {content}
360 |       </p>
361 |     </div>
362 |   )
363 | }
364 | 
365 | const ReportIssue = () => {
366 |   return (
367 |     <div id="alert-additional-content-5" className="mt-6 p-4 border border-gray-300 rounded-lg bg-gray-50 dark:border-gray-600 dark:bg-gray-800" role="alert">
368 |       <div className="flex items-center">
369 |         <svg className="flex-shrink-0 w-4 h-4 me-2 dark:text-gray-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
370 |           <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
371 |         </svg>
372 |         <span className="sr-only">Info</span>
373 |         <h3 className="text-lg font-medium text-gray-800 dark:text-gray-300">Help</h3>
374 |       </div>
375 |       <div className="mt-2 mb-4 text-sm text-gray-800 dark:text-gray-300 text-left">
376 |         Need help? Having issues registering a parachain? Reach out to 
377 |         <a href="mailto:support@regionx.tech" className="text-blue-500 hover:text-blue-700"> support@regionx.tech </a>
378 |          to get help and get the issue resolved.
379 |       </div>
380 |   </div>
381 |   )
382 | }
383 | 


--------------------------------------------------------------------------------