chore: avoid importing all chopsticks in main chunk (#49)

src/chopsticks/chopsticks.ts

@@ -1,4 +1,4 @@
-import { Blockchain } from "@acala-network/chopsticks-core"
+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"

src/pages/Storage/StorageSet.tsx

@@ -4,7 +4,6 @@ import { Chopsticks } from "@/components/Icons"
 import { Button } from "@/components/ui/button"
 import { chainClient$, lookup$ } from "@/state/chains/chain.state"
 import { getTypeComplexity } from "@/utils"
-import { setStorage } from "@acala-network/chopsticks-core"
 import { toHex } from "@polkadot-api/utils"
 import { state, useStateObservable } from "@react-rxjs/core"
 import { createSignal } from "@react-rxjs/utils"
@@ -112,7 +111,9 @@ export const StorageSet: FC = () => {
                 )
                   return false
 
-                await setStorage(chopsticks, [
+                await (
+                  await import("@acala-network/chopsticks-core")
+                ).setStorage(chopsticks, [
                   [currentValue.encodedKey, toHex(currentValue.value)],
                 ])
                 await chopsticks.newBlock()

src/state/identity.state.ts

@@ -8,7 +8,6 @@ import { state } from "@react-rxjs/core"
 import { Binary, createClient, SS58String } from "polkadot-api"
 import { catchError, from, of, tap } from "rxjs"
 import { getProvider } from "./chains/chain.state"
-import { chainSpec } from "./chains/chainspecs/polkadot_people"
 
 export interface Identity {
   displayName: string
@@ -26,21 +25,24 @@ const cache = localStorageSubject<Record<string, Identity>>(
   {},
 )
 
-const client = createClient(
-  getProvider({
-    id: "polkadot_people",
-    type: "chainSpec",
-    value: {
-      chainSpec,
-      relayChain: "polkadot",
-    },
-  }),
+const apiProm = import("./chains/chainspecs/polkadot_people").then(
+  ({ chainSpec }) =>
+    createClient(
+      getProvider({
+        id: "polkadot_people",
+        type: "chainSpec",
+        value: {
+          chainSpec,
+          relayChain: "polkadot",
+        },
+      }),
+    ).getTypedApi(polkadot_people),
 )
-const typedApi = client.getTypedApi(polkadot_people)
 
 export const getAddressName = async (
   addr: string,
 ): Promise<Identity | null> => {
+  const typedApi = await apiProm
   let id = await typedApi.query.Identity.IdentityOf.getValue(addr)
 
   let subIdStr = ""