41 | {value === NOTIN ? null :
60 | )
61 | }
62 |
--------------------------------------------------------------------------------
/src/codec-components/EditCodec/CSequence.tsx:
--------------------------------------------------------------------------------
1 | import { EditSequence, NOTIN } from "@polkadot-api/react-builder"
2 | import { CirclePlus } from "lucide-react"
3 | import { twMerge as clsx } from "tailwind-merge"
4 | import { ListItem } from "../common/ListItem"
5 | import { useSubtreeFocus } from "../common/SubtreeFocus"
6 |
7 | export const CSequence: EditSequence = ({
8 | innerComponents,
9 | value,
10 | onValueChanged,
11 | path,
12 | }) => {
13 | const focus = useSubtreeFocus()
14 | const sub = focus.getNextPath(path)
15 | if (sub) {
16 | return innerComponents[Number(sub)]
17 | }
18 |
19 | const addItem = () => {
20 | const curr = value !== NOTIN ? value.slice() : []
21 |
22 | curr.push(NOTIN)
23 | onValueChanged([...curr])
24 | }
25 |
26 | const removeItem = (idx: number) => {
27 | const curr = value !== NOTIN ? value.slice() : []
28 | curr.splice(idx, 1)
29 | onValueChanged([...curr])
30 | }
31 |
32 | return (
33 |
43 | {
45 | if (selected && options.includes(selected)) {
46 | const value = isEnumVoid(shape, selected) ? null : NOTIN
47 | onValueChanged({ type: selected, value })
48 | }
49 | }}
50 | value={value === NOTIN ? "" : value.type}
51 | options={options.map((option) => ({
52 | text: option + getOptionType(option),
53 | value: option,
54 | }))}
55 | />
56 | {!isComplexShape && inner}
57 |
58 | {isComplexShape && {inner}
}
59 |
34 |
58 | )
59 | }
60 |
--------------------------------------------------------------------------------
/src/codec-components/EditCodec/CStr.tsx:
--------------------------------------------------------------------------------
1 | import { withDefault } from "@/utils/default"
2 | import { EditStr } from "@polkadot-api/react-builder"
3 |
4 | // TODO
5 | export const CStr: EditStr = ({ value, onValueChanged }) => {
6 | return (
7 | -
35 | {innerComponents.map((item, idx) => (
36 |
8 | {
12 | onValueChanged(evt.target.value)
13 | }}
14 | />
15 |
16 | )
17 | }
18 |
--------------------------------------------------------------------------------
/src/codec-components/EditCodec/CStruct.tsx:
--------------------------------------------------------------------------------
1 | import { ExpandBtn } from "@/components/Expand"
2 | import { getFinalType } from "@/utils/shape"
3 | import { EditStruct } from "@polkadot-api/react-builder"
4 | import { useStateObservable } from "@react-rxjs/core"
5 | import React, { useContext } from "react"
6 | import { twMerge as clsx, twMerge } from "tailwind-merge"
7 | import { Marker } from "../common/Markers"
8 | import { useSubtreeFocus } from "../common/SubtreeFocus"
9 | import {
10 | isActive$,
11 | isCollapsed$,
12 | PathsRoot,
13 | setHovered,
14 | toggleCollapsed,
15 | } from "../common/paths.state"
16 |
17 | const StructItem: React.FC<{
18 | name: string
19 | children: React.ReactNode
20 | path: string[]
21 | type?: string
22 | }> = ({ name, children, path, type }) => {
23 | const pathsRootId = useContext(PathsRoot)
24 | const pathStr = path.join(".")
25 | const isActive = useStateObservable(isActive$(pathStr))
26 | const isExpanded = !useStateObservable(isCollapsed$(pathStr))
27 |
28 | return (
29 |
48 | ({type})
49 |
50 | )}
51 |
52 |
58 | {children}
59 |
60 |
74 |
87 | )
88 | }
89 |
--------------------------------------------------------------------------------
/src/codec-components/EditCodec/CTuple.tsx:
--------------------------------------------------------------------------------
1 | import { useSubtreeFocus } from "../common/SubtreeFocus"
2 | import { EditTuple } from "@polkadot-api/react-builder"
3 |
4 | export const CTuple: EditTuple = ({ innerComponents, path }) => {
5 | const focus = useSubtreeFocus()
6 | const sub = focus.getNextPath(path)
7 | if (sub) {
8 | return innerComponents[Number(sub)]
9 | }
10 |
11 | return (
12 | <>
13 | Tuple
14 | -
75 | {Object.entries(innerComponents).map(([name, jsx]) => (
76 |
-
15 | {innerComponents.map((jsx, idx) => (
16 |
- {jsx} 17 | ))} 18 |
32 |
41 | {label}
42 |
43 |
57 | )
58 | }
59 |
60 | export const CStruct: EditStruct = ({
61 | innerComponents,
62 | shape,
63 | path,
64 | type,
65 | encodedValue,
66 | onValueChanged,
67 | decode,
68 | }) => {
69 | const focus = useSubtreeFocus()
70 | useReportBinaryStatus(type, encodedValue, onValueChanged, decode)
71 |
72 | const sub = focus.getNextPath(path)
73 | if (sub) {
74 | const field = Object.entries(innerComponents).find(([key]) => key === sub)
75 | return field?.[1]
76 | }
77 |
78 | return (
79 |
49 |
53 | {children}
54 |
55 |
56 |
80 | {Object.entries(innerComponents).map(([key, jsx]) => {
81 | const innerShape = shape.value[key]
82 | const isComplexShape = isComplex(innerShape.type)
83 | const innerPath = [...path, key]
84 |
85 | return (
86 | focus.setFocus(innerPath)
92 | : undefined
93 | }
94 | onNavigate={() => scrollToMarker(innerPath)}
95 | path={innerPath.join(".")}
96 | icon={
97 | isComplexShape
98 | ? TypeIcons.object
99 | : TypeIcons[lookupToType[innerShape.type]]
100 | }
101 | >
102 | {jsx}
103 |
104 | )
105 | })}
106 |
107 | )
108 | }
109 |
--------------------------------------------------------------------------------
/src/codec-components/EditCodec/Tree/components.ts:
--------------------------------------------------------------------------------
1 | export * from "./CEnum"
2 | export * from "./CStruct"
3 | export * from "./codec-components"
4 | export * from "./ListComponents"
5 |
--------------------------------------------------------------------------------
/src/codec-components/EditCodec/Tree/index.ts:
--------------------------------------------------------------------------------
1 | import { getCodecComponent } from "@polkadot-api/react-builder"
2 |
3 | import * as treeComponents from "./components"
4 |
5 | export const TreeCodec = getCodecComponent(treeComponents)
6 |
--------------------------------------------------------------------------------
/src/codec-components/EditCodec/components.ts:
--------------------------------------------------------------------------------
1 | export * from "./CAccountId"
2 | export * from "./CEnum"
3 | export * from "./EditNumber"
4 | export * from "./CBytes"
5 | export * from "./CStruct"
6 | export * from "./CSequence"
7 | export * from "./CTuple"
8 | export * from "./CStr"
9 | export * from "./codec-components"
10 | export * from "./CEthAccount"
11 |
--------------------------------------------------------------------------------
/src/codec-components/EditCodec/index.tsx:
--------------------------------------------------------------------------------
1 | import { getCodecComponent } from "@polkadot-api/react-builder"
2 | import * as editComponents from "./components"
3 |
4 | export const EditCodec = getCodecComponent(editComponents)
5 |
--------------------------------------------------------------------------------
/src/codec-components/LookupTypeEdit/BinaryDisplay.tsx:
--------------------------------------------------------------------------------
1 | import { BinaryViewCodec } from "@/codec-components/BinaryViewCodec"
2 | import { BinaryEditButton } from "@/components/BinaryEditButton"
3 | import { CopyText } from "@/components/Copy"
4 | import { ExpandBtn } from "@/components/Expand"
5 | import { CodecComponentType, NOTIN } from "@polkadot-api/react-builder"
6 | import { Binary, HexString } from "@polkadot-api/substrate-bindings"
7 | import { toHex } from "@polkadot-api/utils"
8 | import { ComponentProps, FC, useState } from "react"
9 | import { twMerge } from "tailwind-merge"
10 | import { EditCodec } from "../EditCodec"
11 | import "./binaryDisplay.css"
12 |
13 | export const BinaryDisplay: FC<
14 | ComponentProps
40 |
90 | )
91 | }
92 |
--------------------------------------------------------------------------------
/src/codec-components/LookupTypeEdit/binaryDisplay.css:
--------------------------------------------------------------------------------
1 | .binary-display-codec span {
2 | transition: 0.2s margin;
3 | }
4 |
--------------------------------------------------------------------------------
/src/codec-components/LookupTypeEdit/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./FocusPath"
2 | export * from "./LookupTypeEdit"
3 | export * from "./BinaryDisplay"
4 |
--------------------------------------------------------------------------------
/src/codec-components/ViewCodec/CAccountId.tsx:
--------------------------------------------------------------------------------
1 | import { AccountIdDisplay } from "@/components/AccountIdDisplay"
2 | import { ViewAccountId } from "@polkadot-api/react-builder"
3 | import { useReportBinary } from "./CopyBinary"
4 |
5 | export const CAccountId: ViewAccountId = ({ value, encodedValue }) => {
6 | useReportBinary(encodedValue)
7 |
8 | return
41 |
89 |
49 | {isEmpty ? (
50 |
65 |
51 | Start by filling out the value, or enter a binary using the edit
52 | binary button at the end of this line.
53 |
54 | ) : (
55 | <>
56 | 0x
57 |
66 | setWrap((v) => !v)}
74 | />
75 | {
78 | const encoded = codec.enc(decoded)
79 | onUpdate?.({ empty: false, decoded, encoded })
80 | return true
81 | }}
82 | decode={codec.dec}
83 | iconProps={{
84 | size: 24,
85 | }}
86 | />
87 |
88 |
15 | {format.type === "text" ? (
16 |
23 | ) : null}
24 | {forceBinary ? value.asHex() : format.value}
25 |
26 | )
27 | }
28 |
--------------------------------------------------------------------------------
/src/codec-components/ViewCodec/CEnum.tsx:
--------------------------------------------------------------------------------
1 | import { ViewEnum } from "@polkadot-api/react-builder"
2 | import { useStateObservable } from "@react-rxjs/core"
3 | import { useContext, useState } from "react"
4 | import { Portal } from "react-portal"
5 | import { twMerge } from "tailwind-merge"
6 | import { Marker } from "../common/Markers"
7 | import { isActive$, PathsRoot, setHovered } from "../common/paths.state"
8 | import { useSubtreeFocus } from "../common/SubtreeFocus"
9 | import { useAppendTitle } from "../EditCodec/Tree/CEnum"
10 | import { CopyBinary, useReportBinary } from "./CopyBinary"
11 | import { ChildProvider, TitleContext } from "./TitleContext"
12 |
13 | export const CEnum: ViewEnum = ({ value, inner, path, encodedValue }) => {
14 | const focus = useSubtreeFocus()
15 | const titleContainer = useContext(TitleContext)
16 | const titleElement = useAppendTitle(titleContainer, "")
17 | const [newElement, setNewElement] = useState setHovered(pathId, { id: pathStr, hover: true })}
42 | onMouseLeave={() => setHovered(pathId, { id: pathStr, hover: false })}
43 | >
44 |
55 | )
56 | }
57 |
--------------------------------------------------------------------------------
/src/codec-components/ViewCodec/CopyBinary.tsx:
--------------------------------------------------------------------------------
1 | import { CopyText } from "@/components/Copy"
2 | import { Binary } from "polkadot-api"
3 | import {
4 | createContext,
5 | FC,
6 | PropsWithChildren,
7 | useContext,
8 | useEffect,
9 | useState,
10 | } from "react"
11 | import { noop } from "rxjs"
12 | import { twMerge } from "tailwind-merge"
13 |
14 | const CopyBinaryContext = createContext<{
15 | value: Uint8Array | null
16 | setValue: (value: Uint8Array) => void
17 | }>({
18 | value: null,
19 | setValue: noop,
20 | })
21 |
22 | export const CopyBinaryProvider: FC
46 |
51 |
47 | {value.type}
48 |
49 | {isActive &&
52 | {inner}
53 |
54 | -
61 | {innerComponents.length ? (
62 | innerComponents.map((jsx, idx) => (
63 |
{value ? "Yes" : "No"}
14 | }
15 |
16 | export const CVoid: ViewVoid = () => null
17 |
18 | export const CEthAccount: ViewEthAccount = ({ value }) => {value}
19 |
20 | export const COption: ViewOption = ({ value, inner }) => {
21 | const selected = value !== undefined
22 | return (
23 |
24 | {selected ? inner : None}
25 |
26 | )
27 | }
28 |
29 | export const CResult: ViewResult = ({ value, inner }) => {
30 | return (
31 |
32 |
35 | )
36 | }
37 |
38 | export const CStr: ViewStr = ({ value }) => {value.success ? "OK" : "KO"}
33 | {inner}
34 | {value}
39 | export const CNumber: ViewNumber = ({ value }) => {value}
40 | export const CBigNumber: ViewBigNumber = ({ value }) => (
41 | {String(value)}
42 | )
43 |
--------------------------------------------------------------------------------
/src/codec-components/ViewCodec/components.ts:
--------------------------------------------------------------------------------
1 | export * from "./CAccountId"
2 | export * from "./CEnum"
3 | export * from "./CBytes"
4 | export * from "./CStruct"
5 | export * from "./ListComponents"
6 | export * from "./codec-components"
7 |
--------------------------------------------------------------------------------
/src/codec-components/ViewCodec/index.tsx:
--------------------------------------------------------------------------------
1 | import { getCodecComponent } from "@polkadot-api/react-builder"
2 | import * as viewComponents from "./components"
3 |
4 | export const ViewCodec = getCodecComponent(viewComponents)
5 |
--------------------------------------------------------------------------------
/src/codec-components/ViewCodec/utils.ts:
--------------------------------------------------------------------------------
1 | import { getEnumInnerVar, isComplex } from "@/utils/shape"
2 | import { Var } from "@polkadot-api/metadata-builders"
3 |
4 | export const isComplexNested = (field: Var, value: any): boolean => {
5 | if (!isComplex(field.type)) return false
6 |
7 | if (field.type === "enum")
8 | return isComplexNested(getEnumInnerVar(field, value.type), value.value)
9 |
10 | if (field.type === "option")
11 | return value == null ? false : isComplexNested(field.value, value)
12 |
13 | if (field.type === "sequence" && value.length === 0) {
14 | return false
15 | }
16 |
17 | return true
18 | }
19 |
--------------------------------------------------------------------------------
/src/codec-components/common/ListItem.tsx:
--------------------------------------------------------------------------------
1 | import { ExpandBtn } from "@/components/Expand"
2 | import { useStateObservable } from "@react-rxjs/core"
3 | import { Dot, Trash2 } from "lucide-react"
4 | import { ReactNode, useContext } from "react"
5 | import { twMerge as clsx, twMerge } from "tailwind-merge"
6 | import { Marker } from "./Markers"
7 | import {
8 | isActive$,
9 | isCollapsed$,
10 | PathsRoot,
11 | setHovered,
12 | toggleCollapsed,
13 | } from "./paths.state"
14 |
15 | export const ListItem: React.FC<{
16 | idx: number
17 | children: React.ReactNode
18 | path: string[]
19 | onDelete?: () => void
20 | actions?: ReactNode
21 | inline?: boolean
22 | }> = ({ idx, onDelete, children, path, actions, inline }) => {
23 | const pathsRootId = useContext(PathsRoot)
24 | const pathStr = path.join(".")
25 | const isActive = useStateObservable(isActive$(pathStr))
26 | const isCollapsed = useStateObservable(isCollapsed$(pathStr))
27 |
28 | const title = inline ? (
29 |
30 |
46 | ) : (
47 | {children}
36 | {onDelete ? (
37 |
43 | ) : null}
44 | {actions}
45 |
48 |
66 | )
67 |
68 | return (
69 |
84 | {children}
85 |
86 | )}
87 |
21 |
43 | )
44 | }
45 |
--------------------------------------------------------------------------------
/src/components/ActionButton.tsx:
--------------------------------------------------------------------------------
1 | import { ButtonHTMLAttributes, forwardRef } from "react"
2 | import { twMerge } from "tailwind-merge"
3 |
4 | export const ActionButton = forwardRef<
5 | HTMLButtonElement,
6 | ButtonHTMLAttributes
27 | {name && (
28 |
29 | {name}
30 | {isVerified(identity) && (
31 |
42 |
70 |
74 | setOpen(true)}
79 | placeholder={placeholder}
80 | className="border-none focus:ring-0"
81 | />
82 |
83 | {open && (
84 |
92 |
93 | )
94 | }
95 |
--------------------------------------------------------------------------------
/src/components/Copy.tsx:
--------------------------------------------------------------------------------
1 | import { CheckCircle, Copy } from "lucide-react"
2 | import { useEffect, useState } from "react"
3 | import { twMerge } from "tailwind-merge"
4 | import { CopyBinaryIcon } from "./Icons"
5 |
6 | export const CopyText: React.FC<{
7 | text: string
8 | disabled?: boolean
9 | className?: string
10 | binary?: boolean
11 | }> = ({ text, className, binary = false, disabled = false }) => {
12 | const [copied, setCopied] = useState(false)
13 | const copy = async (evt: React.MouseEvent) => {
14 | if (disabled) return
15 | evt.stopPropagation()
16 |
17 | await navigator.clipboard.writeText(text)
18 | setCopied(true)
19 | }
20 | useEffect(() => {
21 | if (copied) {
22 | setTimeout(() => setCopied(false), 1000)
23 | }
24 | }, [copied])
25 |
26 | return (
27 |
41 | )
42 | }
43 |
--------------------------------------------------------------------------------
/src/components/DocsRenderer.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from "react"
2 | import { twMerge } from "tailwind-merge"
3 |
4 | export const DocsRenderer: FC<{ docs: string[]; className?: string }> = ({
5 | docs,
6 | className,
7 | }) => {
8 | if (!docs.length) return null
9 | if (docs.length === 1) {
10 | return (
11 |
88 | {children}
89 |
90 | )}
91 |
12 |
14 | )
15 | }
16 |
17 | const normalizedDocs =
18 | docs.length > 1 ? ["/*", ...docs.map((v) => ` *${v}`), " */"] : docs
19 | return (
20 | {docs[0]}
13 | 1 && "text-xs font-mono whitespace-pre",
24 | className,
25 | )}
26 | >
27 | {normalizedDocs.map((d, i) => (
28 |
31 | )
32 | }
33 |
--------------------------------------------------------------------------------
/src/components/EthAccountDisplay.tsx:
--------------------------------------------------------------------------------
1 | import { accountDetail$ } from "@/state/extension-accounts.state"
2 | import { useStateObservable } from "@react-rxjs/core"
3 | import { HexString } from "polkadot-api"
4 | import { FC } from "react"
5 | import { twMerge } from "tailwind-merge"
6 | import { EthIdenticon } from "./EthIdenticon"
7 |
8 | export const EthAccountDisplay: FC<{
9 | value: HexString
10 | className?: string
11 | }> = ({ value, className }) => {
12 | const { name } = useStateObservable(accountDetail$(value)) ?? {}
13 | return (
14 | {d}
29 | ))} 30 |
15 |
23 | )
24 | }
25 |
--------------------------------------------------------------------------------
/src/components/EthIdenticon.tsx:
--------------------------------------------------------------------------------
1 | import { HexString } from "polkadot-api"
2 | import { FC } from "react"
3 | import { blo } from "blo"
4 |
5 | export const EthIdenticon: FC<{ address: HexString; size?: number }> = ({
6 | address,
7 | size,
8 | }) => {
9 | return
17 | {name && {name}}
18 |
19 | {value}
20 |
21 |
22 |
19 | {children}
20 |
21 | )
22 | }
23 |
24 | export const LoadingMetadata: FC = () => (
25 |
27 | {children(
28 | onChange(evt.target.value)}
38 | onFocus={() => blur(false)}
39 | onBlur={() => blur(true)}
40 | />,
41 | )}
42 | {(hasBlurred || error) &&
43 | (typeof (error || softError) === "string" ? (
44 | {error || softError}
45 | ) : typeof warn === "string" ? (
46 | {warn}
47 | ) : null)}
48 |
49 | )
50 | }
51 |
--------------------------------------------------------------------------------
/src/components/Toggle.tsx:
--------------------------------------------------------------------------------
1 | import * as Toggle from "@radix-ui/react-toggle"
2 |
3 | const SliderToggle: React.FC<{
4 | isToggled: boolean
5 | toggle: () => void
6 | id?: string
7 | }> = ({ isToggled, toggle, id }) => {
8 | return (
9 | {children}
51 |
17 | {children}
18 |
19 | )
20 |
21 | export const TabsTrigger: React.FC
36 | {children}
37 |
38 | )
39 |
--------------------------------------------------------------------------------
/src/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 |
3 | import { cn } from "@/lib/utils"
4 |
5 | function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
6 | return (
7 |
15 | )
16 | }
17 |
18 | export { Textarea }
19 |
--------------------------------------------------------------------------------
/src/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
16 |
19 | )
20 | }
21 |
--------------------------------------------------------------------------------
/src/pages/Explorer/Detail/BlockEvents.tsx:
--------------------------------------------------------------------------------
1 | import { FC, useState } from "react"
2 | import { BlockInfo } from "../block.state"
3 | import { groupBy } from "@/lib/groupBy"
4 | import { EventDisplay } from "./Extrinsic"
5 | import { SystemEvent } from "@polkadot-api/observable-client"
6 | import { ExpandBtn } from "@/components/Expand"
7 |
8 | export const BlockEvents: FC<{
9 | block: BlockInfo
10 | highlightedEvent: SystemEvent | null
11 | }> = ({ block, highlightedEvent }) => {
12 | const groups = groupBy(block.events ?? [], (v) => v.phase.type)
13 |
14 | return (
15 |
16 |
34 | )
35 | }
36 |
37 | const EventGroup: FC<{
38 | title: string
39 | group: SystemEvent[] | undefined
40 | highlightedEvent: SystemEvent | null
41 | defaultExpanded?: boolean
42 | }> = ({ title, group, highlightedEvent, defaultExpanded }) => {
43 | const [expanded, setExpanded] = useState(defaultExpanded ?? !group?.length)
44 |
45 | return (
46 |
47 |
73 | )
74 | }
75 |
--------------------------------------------------------------------------------
/src/pages/Explorer/Detail/BlockState.tsx:
--------------------------------------------------------------------------------
1 | import { ComponentType, FC } from "react"
2 | import { BlockState } from "../block.state"
3 | import {
4 | CircleAlert,
5 | CircleCheck,
6 | CircleX,
7 | Clock,
8 | LucideProps,
9 | } from "lucide-react"
10 | import { twMerge } from "tailwind-merge"
11 |
12 | const statusIcon: Record
48 |
55 |
56 | {expanded ? (
57 | group?.length ? (
58 | -
59 | {group.map((evt, index) => (
60 |
No Events
70 | )
71 | ) : null}
72 |
11 |
34 | )
35 | }
36 |
--------------------------------------------------------------------------------
/src/pages/Explorer/Explorer.tsx:
--------------------------------------------------------------------------------
1 | import { LoadingBlocks } from "@/components/Loading"
2 | import { withSubscribe } from "@/components/withSuspense"
3 | import { Route, Routes } from "react-router-dom"
4 | import { BlockTable } from "./BlockTable"
5 | import { BlockDetail } from "./Detail"
6 | import { Events } from "./Events"
7 | import { Summary } from "./Summary"
8 |
9 | export const Explorer = withSubscribe(
10 | () => (
11 |
12 |
27 | 13 | Event{" "} 14 | 18 | {eventKey(event)} 19 | 20 |
21 |
22 | Status:
23 |
28 | Block: {event.hash.slice(0, 18)}…
29 |
{`${event.event.type}.${event.event.value.type}`}
32 |
19 |
22 |
23 | }
24 | />
25 | {children}
6 | ) 7 | 8 | export const Table: FC
38 | {children}
39 |
40 | )
41 | }
42 |
--------------------------------------------------------------------------------
/src/pages/Explorer/blockTime.state.ts:
--------------------------------------------------------------------------------
1 | import { chainClient$, runtimeCtx$ } from "@/state/chains/chain.state"
2 | import { groupBy } from "@/lib/groupBy"
3 | import { state } from "@react-rxjs/core"
4 | import { map, of, switchMap, withLatestFrom } from "rxjs"
5 |
6 | const fromConstants$ = runtimeCtx$.pipe(
7 | map(({ dynamicBuilder, lookup }) => {
8 | const palletsByName = groupBy(lookup.metadata.pallets, (p) => p.name)
9 | const getConstant = (pallet: string, constant: string) =>
10 | palletsByName[pallet]?.[0]?.constants.find((ct) => ct.name === constant)
11 | const ct =
12 | getConstant("Babe", "ExpectedBlockTime") ??
13 | getConstant("Aura", "SlotDuration")
14 | if (!ct) return null
15 | try {
16 | const res = dynamicBuilder.buildDefinition(ct.type).dec(ct.value)
17 | return Number(res)
18 | } catch (_) {
19 | return null
20 | }
21 | }),
22 | )
23 | const fromCall$ = runtimeCtx$.pipe(
24 | withLatestFrom(chainClient$),
25 | switchMap(([{ lookup }, { client }]) => {
26 | const getFromApi = (apiName: string, apiMethod: string) => {
27 | const hasApi =
28 | "apis" in lookup.metadata &&
29 | lookup.metadata.apis
30 | .find((api) => api.name === apiName)
31 | ?.methods.find((method) => method.name === apiMethod)
32 |
33 | return hasApi ? client.getUnsafeApi().apis[apiName][apiMethod]() : null
34 | }
35 |
36 | return (
37 | getFromApi("AuraApi", "slot_duration")?.then((r) => Number(r)) ??
38 | getFromApi("BabeApi", "configuration")?.then((r) =>
39 | Number(r.slot_duration),
40 | ) ??
41 | of(null)
42 | )
43 | }),
44 | )
45 |
46 | export const targetBlockTime$ = state(
47 | fromConstants$.pipe(switchMap((v) => (v ? of(v) : fromCall$))),
48 | )
49 |
--------------------------------------------------------------------------------
/src/pages/Explorer/index.ts:
--------------------------------------------------------------------------------
1 | import { blocksByHeight$ } from "./block.state"
2 |
3 | export * from "./Explorer"
4 | export const explorer$ = blocksByHeight$
5 |
--------------------------------------------------------------------------------
/src/pages/Extrinsics/EditMode.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | Marker,
3 | MarkersContextProvider,
4 | VisibleWindow,
5 | } from "@/codec-components/common/Markers"
6 | import { synchronizeScroll } from "@/codec-components/common/scroll"
7 | import { SubtreeFocus } from "@/codec-components/common/SubtreeFocus"
8 | import { EditCodec } from "@/codec-components/EditCodec"
9 | import { TreeCodec } from "@/codec-components/EditCodec/Tree/index"
10 | import { FocusPath } from "@/codec-components/LookupTypeEdit"
11 | import {
12 | CodecComponentUpdate,
13 | CodecComponentValue,
14 | } from "@polkadot-api/react-builder"
15 | import { UnifiedMetadata } from "@polkadot-api/substrate-bindings"
16 | import { useEffect, useRef, useState } from "react"
17 |
18 | export const EditMode: React.FC<{
19 | codecType: number
20 | metadata: UnifiedMetadata
21 | value: CodecComponentValue
22 | onUpdate: (value: CodecComponentUpdate) => void
23 | }> = (props) => {
24 | const { metadata, codecType, value } = props
25 | const treeRef = useRef
37 |
46 |
47 |
72 |
73 |
74 | )
75 | }
76 |
--------------------------------------------------------------------------------
/src/pages/Extrinsics/JsonMode.tsx:
--------------------------------------------------------------------------------
1 | import { JsonDisplay } from "@/components/JsonDisplay"
2 | import { FC, useMemo } from "react"
3 |
4 | export const JsonMode: FC<{
5 | decode: (value: Uint8Array) => unknown
6 | value: Uint8Array | null
7 | }> = ({ decode, value }) => {
8 | const src = useMemo(() => (value ? decode(value) : null), [value, decode])
9 |
10 | return (
11 |
51 |
71 |
55 |
64 |
56 | {!value.value ? (
57 |
63 | (Empty)
58 | ) : (
59 |
65 |
70 |
66 |
69 |
12 |
14 | )
15 | }
16 |
--------------------------------------------------------------------------------
/src/pages/Extrinsics/SubmitTx/ExtensionProvider.tsx:
--------------------------------------------------------------------------------
1 | import { Spinner, WalletConnect } from "@/components/Icons"
2 | import { Label } from "@/components/ui/label"
3 | import { TabsList, TabsTrigger } from "@/components/ui/tabs"
4 | import {
5 | availableExtensions$,
6 | onToggleExtension,
7 | selectedExtensions$,
8 | } from "@/state/extension-accounts.state"
9 | import {
10 | toggleWalletConnect,
11 | walletConnectStatus$,
12 | } from "@/state/walletconnect.state"
13 | import { useStateObservable } from "@react-rxjs/core"
14 |
15 | export const ExtensionProvider: React.FC = () => {
16 | const availableExtensions = useStateObservable(availableExtensions$)
17 | const selectedExtensions = useStateObservable(selectedExtensions$)
18 | const walletConnectStatus = useStateObservable(walletConnectStatus$)
19 |
20 | return (
21 | <>
22 |
23 |
80 |
83 |
84 | )
85 | }
86 |
--------------------------------------------------------------------------------
/src/pages/Extrinsics/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./Extrinsics"
2 |
--------------------------------------------------------------------------------
/src/pages/Extrinsics/jsonView.css:
--------------------------------------------------------------------------------
1 | .json-view .json-view--copy {
2 | opacity: 0.4;
3 | }
4 | .json-view .json-view--copy:hover {
5 | opacity: 1;
6 | }
7 | .json-view .jv-button {
8 | padding: 0 0.3rem;
9 | }
10 |
--------------------------------------------------------------------------------
/src/pages/Metadata/Editor.tsx:
--------------------------------------------------------------------------------
1 | import { lookup$ } from "@/state/chains/chain.state"
2 | import { LookupTypeEdit } from "@/codec-components/LookupTypeEdit"
3 | import { getTypeComplexity } from "@/utils/shape"
4 | import { state, useStateObservable } from "@react-rxjs/core"
5 | import { FC, useState } from "react"
6 |
7 | const lookupState$ = state(lookup$, null)
8 | export const Editor: FC<{ id: number }> = ({ id }) => {
9 | const lookup = useStateObservable(lookupState$)
10 | const [value, setValue] = useState
12 |
45 | )
46 | }
47 |
48 | type SignedExtension =
49 | ExtrinsicDescriptor["signedExtensions"] extends Array13 | Version{extrinsic.version.length > 1 ? "s" : ""}:{" "} 14 | {extrinsic.version.join(", ")} 15 |
16 | {"type" in extrinsic && ( 17 |
18 |
21 | )}
22 | {"call" in extrinsic && (
23 | Type
19 |
24 |
27 | )}
28 | {"signature" in extrinsic && (
29 | Call
25 |
30 |
33 | )}
34 | {"address" in extrinsic && (
35 | Signature
31 |
36 |
39 | )}
40 | Address
37 |
41 |
44 | Signed Extensions
42 |
57 |
68 | {entry && (
69 | <>
70 |
81 | )
82 | }
83 |
--------------------------------------------------------------------------------
/src/pages/Metadata/RuntimeApis.tsx:
--------------------------------------------------------------------------------
1 | import { SearchableSelect } from "@/components/Select"
2 | import { V14, V15 } from "@polkadot-api/substrate-bindings"
3 | import { FC, useEffect, useState } from "react"
4 | import { LookupLink } from "./Lookup"
5 | import { DocsRenderer } from "@/components/DocsRenderer"
6 |
7 | type Api = (V14 | V15)["apis"][number]
8 | type Method = Api["methods"] extends Array
71 |
74 | Type
72 |
75 |
78 |
79 | )}
80 | Additional Signed
76 |
19 |
30 | {api && (
31 |
42 | )}
43 | {method && (
44 | <>
45 |
66 | )
67 | }
68 |
--------------------------------------------------------------------------------
/src/pages/Metadata/V15Fields.tsx:
--------------------------------------------------------------------------------
1 | import { CopyText } from "@/components/Copy"
2 | import { UnifiedMetadata } from "@polkadot-api/substrate-bindings"
3 | import { FC } from "react"
4 | import { LookupLink } from "./Lookup"
5 |
6 | export const OuterEnums: FC<{
7 | outerEnums: UnifiedMetadata<15 | 16>["outerEnums"]
8 | }> = ({ outerEnums }) => (
9 |
48 |
58 | )}
59 | Inputs
49 |-
50 | {method.inputs.map(({ name, type }) => (
51 |
-
52 |
{name}
53 |54 |
55 | ))}
56 |
60 |
63 |
64 | )}
65 | Output
61 |
10 |
23 | )
24 |
25 | export const Custom: FC<{ custom: UnifiedMetadata<15 | 16>["custom"] }> = ({
26 | custom,
27 | }) => (
28 |
11 |
14 | Call
12 |
15 |
18 | Event
16 |
19 |
22 | Error
20 |
29 | {Object.entries(
30 | custom.map(([key, { type, value }]) => (
31 |
42 | )
43 |
--------------------------------------------------------------------------------
/src/pages/Metadata/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./Metadata"
2 |
--------------------------------------------------------------------------------
/src/pages/Network/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./Network"
2 |
--------------------------------------------------------------------------------
/src/pages/RpcCalls/RpcCallResults.tsx:
--------------------------------------------------------------------------------
1 | import { PathsRoot } from "@/codec-components/common/paths.state"
2 | import { JsonDisplay } from "@/components/JsonDisplay"
3 | import { useStateObservable } from "@react-rxjs/core"
4 | import { Trash2 } from "lucide-react"
5 | import { FC } from "react"
6 | import {
7 | removeRpcCallResult,
8 | RpcCallResult,
9 | rpcCallResult$,
10 | rpcCallResultKeys$,
11 | } from "./rpcCalls.state"
12 |
13 | export const RpcCallResults: FC = () => {
14 | const keys = useStateObservable(rpcCallResultKeys$)
15 |
16 | if (!keys.length) return null
17 |
18 | return (
19 |
32 |
39 | )),
40 | )}
41 | {key}
33 |
35 |
38 |
20 |
27 | )
28 | }
29 |
30 | const RpcCallResultBox: FC<{ subscription: string }> = ({ subscription }) => {
31 | const rpcCallResult = useStateObservable(rpcCallResult$(subscription))
32 | if (!rpcCallResult) return null
33 |
34 | return (
35 | Results
21 |-
22 | {keys.map((key) => (
23 |
37 |
49 | 38 | {rpcCallResult.method}({rpcCallResult.payload}) 39 |
40 |
41 |
47 |
48 |
62 |
65 | )
66 | }
67 |
68 | if (!("result" in rpcCallResult)) {
69 | return The call crashed
63 | Message: {rpcCallResult.error.message ?? "N/A"}
64 | Loading…
70 | }
71 |
72 | return (
73 |
74 |
76 | )
77 | }
78 |
--------------------------------------------------------------------------------
/src/pages/RpcCalls/RpcCalls.tsx:
--------------------------------------------------------------------------------
1 | import { ActionButton } from "@/components/ActionButton"
2 | import { LoadingMetadata } from "@/components/Loading"
3 | import { SearchableSelect } from "@/components/Select"
4 | import { Textarea } from "@/components/ui/textarea"
5 | import { withSubscribe } from "@/components/withSuspense"
6 | import { chainClient$ } from "@/state/chains/chain.state"
7 | import { state, useStateObservable } from "@react-rxjs/core"
8 | import { useState } from "react"
9 | import { firstValueFrom, map, switchMap } from "rxjs"
10 | import { RpcCallResults } from "./RpcCallResults"
11 | import { addRpcCallQuery } from "./rpcCalls.state"
12 |
13 | const chainRpcMethods$ = state(
14 | chainClient$.pipe(
15 | switchMap((chain) =>
16 | chain.client._request<{ methods: string[] }>("rpc_methods", []),
17 | ),
18 | map((r) => r.methods),
19 | ),
20 | )
21 |
22 | export const RpcCalls = withSubscribe(
23 | () => {
24 | const methods = useStateObservable(chainRpcMethods$)
25 | const [method, setMethod] = useState
43 |
57 |