feat: add view functions

src/App.tsx

@@ -1,3 +1,4 @@
+import { VaultTxModal } from "polkahub"
 import { Navigate, Route, Routes } from "react-router-dom"
 import { Accounts } from "./pages/Accounts/Accounts"
 import { Constants } from "./pages/Constants"
@@ -9,7 +10,7 @@ import { RpcCalls } from "./pages/RpcCalls"
 import { RuntimeCalls } from "./pages/RuntimeCalls"
 import { Storage } from "./pages/Storage"
 import { Transactions } from "./pages/Transactions"
-import { VaultTxModal } from "polkahub"
+import { ViewFns } from "./pages/ViewFns"
 
 export default function App() {
   return (
@@ -26,6 +27,7 @@ export default function App() {
             <Route path="rpcCalls/*" element={<RpcCalls />} />
             <Route path="metadata/*" element={<Metadata />} />
             <Route path="accounts/*" element={<Accounts />} />
+            <Route path="viewFns/*" element={<ViewFns />} />
             <Route path="*" element={<Navigate to="/explorer" replace />} />
           </Routes>
         </div>

src/pages/Header.tsx

@@ -82,6 +82,9 @@ export const Header = () => {
                   </NavLink>
                 ))}
             </nav>
+            <NavLink to="/viewFns" onClick={() => setIsOpen(false)}>
+              View Functions
+            </NavLink>
             <NavLink to="/metadata" onClick={() => setIsOpen(false)}>
               Metadata
             </NavLink>

src/pages/Metadata/Pallets.tsx

@@ -1,8 +1,8 @@
+import { CopyText } from "@/components/Copy"
 import { SearchableSelect } from "@/components/Select"
 import { UnifiedMetadata } from "@polkadot-api/substrate-bindings"
-import { FC, useEffect, useState } from "react"
+import { FC, Fragment, useState } from "react"
 import { LookupLink } from "./Lookup"
-import { CopyText } from "@/components/Copy"
 
 type Pallet = UnifiedMetadata["pallets"][number]
 export const Pallets: FC<{ pallets: Array<Pallet> }> = ({ pallets }) => {
@@ -22,7 +22,7 @@ export const Pallets: FC<{ pallets: Array<Pallet> }> = ({ pallets }) => {
         />
       </label>
       {pallet && (
-        <>
+        <Fragment key={pallet.name}>
           <p>Index: {pallet.index}</p>
           {pallet.storage && (
             <div>
@@ -36,6 +36,12 @@ export const Pallets: FC<{ pallets: Array<Pallet> }> = ({ pallets }) => {
               <PalletConstants pallet={pallet} />
             </div>
           )}
+          {pallet.viewFns.length > 0 && (
+            <div>
+              <h4>View Functions</h4>
+              <PalletViewFns pallet={pallet} />
+            </div>
+          )}
           {pallet.calls != null && (
             <div>
               <h4>Calls</h4>
@@ -54,7 +60,7 @@ export const Pallets: FC<{ pallets: Array<Pallet> }> = ({ pallets }) => {
               <LookupLink id={pallet.errors.type} />
             </div>
           )}
-        </>
+        </Fragment>
       )}
     </div>
   )
@@ -68,10 +74,6 @@ type StorageEntry = Pallet["storage"] extends
 const PalletStorage: FC<{ pallet: Pallet }> = ({ pallet }) => {
   const [entry, setEntry] = useState<StorageEntry | null>(null)
 
-  useEffect(() => {
-    setEntry(null)
-  }, [pallet])
-
   if (!pallet.storage) return null
 
   const value =
@@ -129,10 +131,6 @@ type ConstantEntry = Pallet["constants"] extends Array<infer R> ? R : never
 const PalletConstants: FC<{ pallet: Pallet }> = ({ pallet }) => {
   const [entry, setEntry] = useState<ConstantEntry | null>(null)
 
-  useEffect(() => {
-    setEntry(null)
-  }, [pallet])
-
   if (!pallet.constants.length) return null
 
   return (
@@ -166,3 +164,42 @@ const PalletConstants: FC<{ pallet: Pallet }> = ({ pallet }) => {
     </div>
   )
 }
+
+type ViewFnEntry = Pallet["viewFns"] extends Array<infer R> ? R : never
+const PalletViewFns: FC<{ pallet: Pallet }> = ({ pallet }) => {
+  const [entry, setEntry] = useState<ViewFnEntry | null>(null)
+
+  if (!pallet.viewFns.length) return null
+
+  return (
+    <div className="flex flex-col p-2 gap-2">
+      <SearchableSelect
+        value={entry}
+        setValue={setEntry}
+        options={pallet.viewFns.map((c) => ({
+          text: c.name,
+          value: c,
+        }))}
+      />
+      {entry && (
+        <>
+          <div>
+            <h4>Inputs</h4>
+            <ol>
+              {entry.inputs.map((input) => (
+                <li key={input.name}>
+                  <div>{input.name}</div>
+                  <LookupLink id={input.type} />
+                </li>
+              ))}
+            </ol>
+          </div>
+          <div>
+            <h4>Output</h4>
+            <LookupLink id={entry.output} />
+          </div>
+        </>
+      )}
+    </div>
+  )
+}

src/pages/ViewFns/ViewFnQuery.tsx

@@ -0,0 +1,182 @@
+import {
+  dynamicBuilder$,
+  lookup$,
+  unsafeApi$,
+} from "@/state/chains/chain.state"
+import {
+  InlineLookupTypeEdit,
+  LookupTypeEdit,
+} from "@/codec-components/LookupTypeEdit"
+import { ActionButton } from "@/components/ActionButton"
+import { ExpandBtn } from "@/components/Expand"
+import { getTypeComplexity } from "@/utils/shape"
+import { state, useStateObservable, withDefault } from "@react-rxjs/core"
+import { createSignal } from "@react-rxjs/utils"
+import { Circle, Dot } from "lucide-react"
+import { FC, useState } from "react"
+import {
+  combineLatest,
+  filter,
+  firstValueFrom,
+  map,
+  scan,
+  startWith,
+  switchMap,
+} from "rxjs"
+import { twMerge } from "tailwind-merge"
+import { addViewFnCall, selectedEntry$ } from "./viewFns.state"
+
+export const ViewFnQuery: FC = () => {
+  const selectedEntry = useStateObservable(selectedEntry$)
+  const isReady = useStateObservable(isReady$)
+
+  if (!selectedEntry) return null
+
+  const submit = async () => {
+    const [entry, unsafeApi, inputValues, builder] = await firstValueFrom(
+      combineLatest([
+        selectedEntry$,
+        unsafeApi$,
+        inputValues$,
+        dynamicBuilder$,
+      ]),
+    )
+    const decodedValues = inputValues.map((v, i) =>
+      builder
+        .buildDefinition(selectedEntry.inputs[i].type)
+        .dec(v as Uint8Array),
+    )
+    const promise = unsafeApi.view[entry!.pallet][entry!.name](...decodedValues)
+
+    addViewFnCall({
+      name: `${entry!.pallet}.${entry!.name}(…)`,
+      promise,
+      type: entry!.output,
+    })
+  }
+
+  return (
+    <div className="flex flex-col gap-4 items-start w-full">
+      <ViewFnInputValues />
+      <ActionButton disabled={!isReady} onClick={submit}>
+        Call
+      </ActionButton>
+    </div>
+  )
+}
+
+const [inputValueChange$, setInputValue] = createSignal<{
+  idx: number
+  value: Uint8Array | "partial" | null
+}>()
+const inputValues$ = selectedEntry$.pipeState(
+  filter((v) => !!v),
+  map((v) => v.inputs),
+  switchMap((inputs) => {
+    const values: Array<Uint8Array | "partial" | null> = inputs.map(() => null)
+    return inputValueChange$.pipe(
+      scan((acc, change) => {
+        const newValue = [...acc]
+        newValue[change.idx] = change.value
+        return newValue
+      }, values),
+      startWith(values),
+    )
+  }),
+  withDefault([] as Array<Uint8Array | "partial" | null>),
+)
+
+const isReady$ = inputValues$.pipeState(
+  map((inputValues) => inputValues.every((v) => v instanceof Uint8Array)),
+  withDefault(false),
+)
+
+const ViewFnInputValues: FC = () => {
+  const selectedEntry = useStateObservable(selectedEntry$)
+  if (!selectedEntry || !selectedEntry.inputs.length) return null
+
+  return (
+    <div className="w-full">
+      Inputs
+      <ol className="flex flex-col gap-2">
+        {selectedEntry.inputs.map((input, idx) => (
+          <RuntimeValueInput
+            key={idx}
+            idx={idx}
+            name={input.name}
+            type={input.type}
+          />
+        ))}
+      </ol>
+    </div>
+  )
+}
+
+const inputValue$ = state(
+  (idx: number) => inputValues$.pipe(map((v) => v[idx])),
+  null,
+)
+const lookupState$ = state(lookup$, null)
+const RuntimeValueInput: FC<{ idx: number; name: string; type: number }> = ({
+  idx,
+  type,
+  name,
+}) => {
+  const value = useStateObservable(inputValue$(idx))
+  const [expanded, setExpanded] = useState(false)
+  const lookup = useStateObservable(lookupState$)
+
+  if (!lookup) return null
+  const shape = lookup(type)
+  const complexity = getTypeComplexity(shape)
+
+  return (
+    <li key={idx} className="border rounded p-2 w-full">
+      <div
+        className={twMerge(
+          "flex items-center select-none",
+          complexity !== "inline" && "cursor-pointer",
+        )}
+        onClick={() => setExpanded((e) => !e)}
+      >
+        {complexity === "inline" ? (
+          <Dot size={16} />
+        ) : (
+          <ExpandBtn expanded={expanded} />
+        )}
+        <Circle
+          size={8}
+          strokeWidth={4}
+          className={twMerge(
+            "mr-1",
+            value === null
+              ? "text-red-600"
+              : value === "partial"
+                ? "text-orange-600"
+                : "text-green-600",
+          )}
+        />
+        <div className="text-foreground/80">{name}</div>
+        {complexity === "inline" ? (
+          <div className="px-2">
+            <InlineLookupTypeEdit
+              type={type}
+              value={value}
+              onValueChange={(value) => setInputValue({ idx, value })}
+            />
+          </div>
+        ) : null}
+      </div>
+      {expanded && complexity !== "inline" && (
+        <div className="py-2 max-h-[60svh] overflow-hidden flex flex-col justify-stretch">
+          <LookupTypeEdit
+            type={type}
+            value={value}
+            onValueChange={(value) => setInputValue({ idx, value })}
+            tree={complexity === "tree"}
+          />
+        </div>
+      )}
+    </li>
+  )
+}