feat: set storage of external chopsticks instances

src/chopsticks/chopsticks.ts

@@ -1,15 +1,10 @@
 import type { Blockchain } from "@acala-network/chopsticks-core"
 import { getSyncProvider } from "@polkadot-api/json-rpc-provider-proxy"
 import { blockHeader } from "@polkadot-api/substrate-bindings"
-import { state } from "@react-rxjs/core"
 import { JsonRpcProvider } from "polkadot-api/ws-provider/web"
-import { BehaviorSubject, map } from "rxjs"
+import { BehaviorSubject } from "rxjs"
 
 export const chopsticksInstance$ = new BehaviorSubject<Blockchain | null>(null)
-export const isChopsticks$ = state(
-  chopsticksInstance$.pipe(map((v) => !!v)),
-  false,
-)
 
 export const createChopsticksProvider = (endpoint: string) =>
   withChopsticksEnhancer(

src/pages/Storage/Storage.tsx

@@ -1,11 +1,10 @@
-import { isChopsticks$ } from "@/chopsticks/chopsticks"
 import { ButtonGroup } from "@/components/ButtonGroup"
 import { DocsRenderer } from "@/components/DocsRenderer"
 import { Chopsticks } from "@/components/Icons"
 import { LoadingMetadata } from "@/components/Loading"
 import { SearchableSelect } from "@/components/Select"
 import { withSubscribe } from "@/components/withSuspense"
-import { lookup$ } from "@/state/chains/chain.state"
+import { canSetStorage$, lookup$ } from "@/state/chains/chain.state"
 import { state, useStateObservable } from "@react-rxjs/core"
 import { FC, useState } from "react"
 import { map } from "rxjs"
@@ -87,7 +86,7 @@ export const Storage = withSubscribe(
 
 const StorageEntry: FC = () => {
   const selectedEntry = useStateObservable(selectedEntry$)
-  const canSetStorage = useStateObservable(isChopsticks$)
+  const canSetStorage = useStateObservable(canSetStorage$)
   const [mode, setMode] = useState<"query" | "decode" | "set">("query")
 
   if (!selectedEntry) return null

src/pages/Storage/StorageSet.tsx

@@ -1,12 +1,12 @@
-import { chopsticksInstance$ } from "@/chopsticks/chopsticks"
 import { LookupTypeEdit } from "@/codec-components/LookupTypeEdit"
 import { Chopsticks } from "@/components/Icons"
 import { Button } from "@/components/ui/button"
-import { chainClient$, lookup$ } from "@/state/chains/chain.state"
+import { chainClient$, client$, lookup$ } from "@/state/chains/chain.state"
 import { getTypeComplexity } from "@/utils"
 import { toHex } from "@polkadot-api/utils"
 import { state, useStateObservable } from "@react-rxjs/core"
 import { createSignal } from "@react-rxjs/utils"
+import { Binary } from "polkadot-api"
 import { FC, useState } from "react"
 import {
   combineLatest,
@@ -19,7 +19,6 @@ import {
 } from "rxjs"
 import { selectedEntry$ } from "./storage.state"
 import { encodedKey$, KeyDisplay, StorageKeysInput } from "./StorageQuery"
-import { Binary } from "polkadot-api"
 
 const [setValue$, setValue] = createSignal<Uint8Array | "partial" | null>()
 const currentValue$ = state(
@@ -103,20 +102,18 @@ export const StorageSet: FC = () => {
             onClick={async () => {
               setIsLoading(true)
               try {
-                const chopsticks = await firstValueFrom(chopsticksInstance$)
                 if (
-                  !chopsticks ||
                   !currentValue.encodedKey ||
                   !(currentValue.value instanceof Uint8Array)
                 )
                   return false
 
-                await (
-                  await import("@acala-network/chopsticks-core")
-                ).setStorage(chopsticks, [
-                  [currentValue.encodedKey, toHex(currentValue.value)],
+                const client = await firstValueFrom(client$)
+                await client._request("dev_setStorage", [
+                  [[currentValue.encodedKey, toHex(currentValue.value)]],
                 ])
-                await chopsticks.newBlock()
+
+                await client._request("dev_newBlock", [])
               } finally {
                 setIsLoading(false)
               }

src/state/chains/chain.state.ts

@@ -1,4 +1,8 @@
-import { get, update } from "idb-keyval"
+import {
+  chopsticksInstance$,
+  createChopsticksProvider,
+} from "@/chopsticks/chopsticks"
+import { getHashParams, setHashParams } from "@/hashParams"
 import { getDynamicBuilder, getLookupFn } from "@polkadot-api/metadata-builders"
 import { getObservableClient } from "@polkadot-api/observable-client"
 import {
@@ -7,10 +11,13 @@ import {
   unifyMetadata,
 } from "@polkadot-api/substrate-bindings"
 import { createClient as createSubstrateClient } from "@polkadot-api/substrate-client"
+import { getExtrinsicDecoder } from "@polkadot-api/tx-utils"
 import { fromHex, toHex } from "@polkadot-api/utils"
-import { sinkSuspense, state, SUSPENSE } from "@react-rxjs/core"
+import { liftSuspense, sinkSuspense, state, SUSPENSE } from "@react-rxjs/core"
 import { createSignal } from "@react-rxjs/utils"
+import { get, update } from "idb-keyval"
 import { createClient } from "polkadot-api"
+import { withLogsRecorder } from "polkadot-api/logs-provider"
 import {
   catchError,
   concat,
@@ -42,13 +49,6 @@ import {
   getWebsocketProvider,
   WebsocketSource,
 } from "./websocket"
-import { getHashParams, setHashParams } from "@/hashParams"
-import { withLogsRecorder } from "polkadot-api/logs-provider"
-import {
-  chopsticksInstance$,
-  createChopsticksProvider,
-} from "@/chopsticks/chopsticks"
-import { getExtrinsicDecoder } from "@polkadot-api/tx-utils"
 
 export type ChainSource = WebsocketSource | SmoldotSource
 
@@ -226,12 +226,24 @@ export const chainClient$ = state(
   ),
 )
 export const client$ = state(chainClient$.pipe(map(({ client }) => client)))
-
 export const canProduceBlocks$ = state(
   client$.pipe(
     switchMap((client) => client._request("rpc_methods", [])),
     map((response) => response.methods.includes("dev_newBlock")),
+    liftSuspense(),
     catchError(() => [false]),
+    sinkSuspense(),
+  ),
+  false,
+)
+
+export const canSetStorage$ = state(
+  client$.pipe(
+    switchMap((client) => client._request("rpc_methods", [])),
+    map((response) => response.methods.includes("dev_setStorage")),
+    liftSuspense(),
+    catchError(() => [false]),
+    sinkSuspense(),
   ),
   false,
 )