@xyo-network/react-chain-provider 1.6.0 → 1.6.2

package/dist/browser/index.mjs

@@ -65,25 +65,58 @@ var useAddressBalance = /* @__PURE__ */ __name((address, viewer, networkId, refr
 import { usePromise as usePromise2 } from "@xylabs/react-promise";
 
 // src/hooks/useViewer.ts
-import { useChainNetwork } from "@xyo-network/react-chain-network";
-import { AllRpcSchemas, HttpRpcTransport, JsonRpcXyoViewer } from "@xyo-network/xl1-rpc";
+import { isDefined as isDefined2, isUndefined as isUndefined3 } from "@xylabs/typeof";
+import { AllRpcSchemas, HttpRpcTransport, JsonRpcXyoViewer as JsonRpcXyoViewer2 } from "@xyo-network/xl1-rpc";
+import { useMemo as useMemo3 } from "react";
+
+// src/hooks/useHostViewer.ts
+import { isDefined, isTruthy, isUndefined as isUndefined2 } from "@xylabs/typeof";
+import { JsonRpcXyoViewer, PostMessageRpcTransport } from "@xyo-network/xl1-rpc";
 import { useMemo as useMemo2 } from "react";
-var useViewer = /* @__PURE__ */ __name((_provider) => {
-  const { activeNetwork } = useChainNetwork();
-  return useMemo2(() => {
-    if (!activeNetwork) {
-      return;
+var walletConnections = globalThis.xyo?.connections;
+var useHostViewerBase = /* @__PURE__ */ __name((networkId) => {
+  const networkConnection = useMemo2(() => {
+    if (isTruthy(networkId) && isDefined(walletConnections) && isDefined(walletConnections[networkId])) {
+      return networkId;
     }
-    const transport = new HttpRpcTransport(`${activeNetwork.url}/rpc`, AllRpcSchemas);
+  }, [
+    networkId
+  ]);
+  const rpcProvider = useMemo2(() => {
+    if (isUndefined2(networkConnection)) return;
+    const transport = new PostMessageRpcTransport(networkConnection);
     return new JsonRpcXyoViewer(transport);
   }, [
-    activeNetwork
+    networkConnection
   ]);
-}, "useViewer");
+  return rpcProvider;
+}, "useHostViewerBase");
+var useHostViewer = useHostViewerBase;
+
+// src/hooks/useViewer.ts
+var useViewerBase = /* @__PURE__ */ __name((id, url) => {
+  const hostViewer = useHostViewerBase(id);
+  const resolvedViewer = useMemo3(() => {
+    if (isUndefined3(url)) {
+      return;
+    }
+    if (isDefined2(hostViewer)) {
+      console.debug("Using host viewer:", hostViewer);
+      return hostViewer;
+    }
+    const transport = new HttpRpcTransport(`${url}/rpc`, AllRpcSchemas);
+    return new JsonRpcXyoViewer2(transport);
+  }, [
+    url,
+    hostViewer
+  ]);
+  return resolvedViewer;
+}, "useViewerBase");
+var useViewer = useViewerBase;
 
 // src/hooks/useCurrentBlock.ts
-var useCurrentBlock = /* @__PURE__ */ __name((refresh = 1) => {
-  const viewer = useViewer();
+var useCurrentBlockBase = /* @__PURE__ */ __name((refresh = 1, id, url) => {
+  const viewer = useViewerBase(id, url);
   return usePromise2(async () => {
     if (viewer && refresh > 0) {
       const block = await viewer.currentBlock();
@@ -93,53 +126,61 @@ var useCurrentBlock = /* @__PURE__ */ __name((refresh = 1) => {
     viewer,
     refresh
   ]);
-}, "useCurrentBlock");
+}, "useCurrentBlockBase");
+var useCurrentBlock = useCurrentBlockBase;
 
 // src/hooks/useNetwork.ts
-import { useChainNetwork as useChainNetwork2 } from "@xyo-network/react-chain-network";
+import { isUndefined as isUndefined4 } from "@xylabs/typeof";
 import { MemoryXyoNetwork } from "@xyo-network/xl1-rpc";
-import { useMemo as useMemo3 } from "react";
-var useNetwork = /* @__PURE__ */ __name(() => {
-  const { activeNetwork } = useChainNetwork2();
-  return useMemo3(() => {
-    if (!activeNetwork) return;
-    return new MemoryXyoNetwork(activeNetwork.id);
+import { useMemo as useMemo4 } from "react";
+var useNetworkBase = /* @__PURE__ */ __name((id) => {
+  const network = useMemo4(() => {
+    if (isUndefined4(id)) return;
+    return new MemoryXyoNetwork(id);
   }, [
-    activeNetwork
+    id
   ]);
-}, "useNetwork");
+  return network;
+}, "useNetworkBase");
+var useNetwork = useNetworkBase;
 
 // src/hooks/useRunner.ts
-import { useChainNetwork as useChainNetwork3 } from "@xyo-network/react-chain-network";
+import { isUndefined as isUndefined5 } from "@xylabs/typeof";
 import { AllRpcSchemas as AllRpcSchemas2, HttpRpcTransport as HttpRpcTransport2, JsonRpcXyoRunner } from "@xyo-network/xl1-rpc";
-import { useMemo as useMemo4 } from "react";
-var useRunner = /* @__PURE__ */ __name((_provider) => {
-  const { activeNetwork } = useChainNetwork3();
-  return useMemo4(() => {
-    if (!activeNetwork) {
+import { useMemo as useMemo5 } from "react";
+var useRunnerBase = /* @__PURE__ */ __name((url) => {
+  return useMemo5(() => {
+    if (isUndefined5(url)) {
       return;
     }
-    const transport = new HttpRpcTransport2(`${activeNetwork.url}/rpc`, AllRpcSchemas2);
+    const transport = new HttpRpcTransport2(`${url}/rpc`, AllRpcSchemas2);
     return new JsonRpcXyoRunner(transport);
   }, [
-    activeNetwork
+    url
   ]);
-}, "useRunner");
+}, "useRunnerBase");
+var useRunner = useRunnerBase;
 
 // src/hooks/useSigner.ts
 import { MemoryXyoSigner } from "@xyo-network/xl1-rpc";
-import { useMemo as useMemo5 } from "react";
+import { useMemo as useMemo6 } from "react";
 var useSigner = /* @__PURE__ */ __name((_provider, account) => {
-  return useMemo5(() => account ? new MemoryXyoSigner(account) : void 0, [
+  return useMemo6(() => account ? new MemoryXyoSigner(account) : void 0, [
     account
   ]);
 }, "useSigner");
 export {
   useAddressBalance,
   useCurrentBlock,
+  useCurrentBlockBase,
+  useHostViewer,
+  useHostViewerBase,
   useNetwork,
+  useNetworkBase,
   useRunner,
+  useRunnerBase,
   useSigner,
-  useViewer
+  useViewer,
+  useViewerBase
 };
 //# sourceMappingURL=index.mjs.map

package/dist/browser/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/hooks/useAddressBalance.ts","../../src/hooks/useCurrentBlock.ts","../../src/hooks/useViewer.ts","../../src/hooks/useNetwork.ts","../../src/hooks/useRunner.ts","../../src/hooks/useSigner.ts"],"sourcesContent":["import type { Address } from '@xylabs/hex'\nimport { usePromise } from '@xylabs/react-promise'\nimport { isUndefined, isUndefinedOrNull } from '@xylabs/typeof'\nimport { ShiftedBigInt } from '@xyo-network/chain-wrappers'\nimport type {\n  AttoXL1, NetworkId, XyoViewer,\n} from '@xyo-network/xl1-protocol'\nimport { useMemo, useState } from 'react'\n\nexport const useAddressBalance = (\n  // address to get balance for\n  address?: Address,\n  // viewer to use for fetching balance\n  viewer?: XyoViewer,\n  // network ID to trigger a balance refresh\n  networkId?: NetworkId,\n  // refresh balance trigger\n  refresh?: number,\n) => {\n  const [balancesResult, setBalancesResult] = useState<AttoXL1 | null>()\n  const [loading, setLoading] = useState(false)\n\n  const [, balancesError] = usePromise(async () => {\n    if (isUndefined(viewer) || isUndefined(address)) return\n    setLoading(true)\n    setBalancesResult(undefined)\n    const balance = await viewer.accountBalance(address)\n    setBalancesResult(balance as AttoXL1)\n    setLoading(false)\n  }, [address, viewer, networkId, refresh])\n\n  useMemo(() => {\n    if (balancesError) {\n      setLoading(false)\n    }\n  }, [balancesError])\n\n  const shiftedBigInt = useMemo(() => {\n    if (typeof balancesResult !== 'bigint') return\n    return new ShiftedBigInt(balancesResult, {\n      places: 18, maxDecimal: 18, maxCharacters: 9, minDecimals: 1, locale: navigator.language,\n    })\n  }, [balancesResult])\n\n  const balanceIntlFriendly = useMemo(() => {\n    return shiftedBigInt?.toFullString()\n  }, [shiftedBigInt])\n\n  const shortBalanceIntlFriendly = useMemo(() => {\n    return isUndefinedOrNull(balancesResult)\n      ? undefined\n      : (balancesResult < 1_000_000_000_000n && balancesResult > 0n) ? '<0.00001' : shiftedBigInt?.toShortString()\n  }, [shiftedBigInt])\n\n  return {\n    address,\n    balanceForAddress: balancesResult,\n    balanceIntlFriendly,\n    shortBalanceIntlFriendly,\n    error: balancesError,\n    loading,\n  }\n}\n","import { usePromise } from '@xylabs/react-promise'\n\nimport { useViewer } from './useViewer.ts'\n\nexport const useCurrentBlock = (refresh = 1) => {\n  const viewer = useViewer()\n  return usePromise(async () => {\n    if (viewer && refresh > 0) {\n      const block = await viewer.currentBlock()\n      return block\n    }\n  }, [viewer, refresh])\n}\n","import { useChainNetwork } from '@xyo-network/react-chain-network'\nimport type { XyoProvider } from '@xyo-network/xl1-protocol'\nimport {\n  AllRpcSchemas, HttpRpcTransport, JsonRpcXyoViewer,\n} from '@xyo-network/xl1-rpc'\nimport { useMemo } from 'react'\n\nexport const useViewer = (_provider?: XyoProvider) => {\n  const { activeNetwork } = useChainNetwork()\n\n  return useMemo(() => {\n    if (!activeNetwork) {\n      return\n    }\n    const transport = new HttpRpcTransport(`${activeNetwork.url}/rpc`, AllRpcSchemas)\n    return new JsonRpcXyoViewer(transport)\n  }, [activeNetwork])\n}\n","import { useChainNetwork } from '@xyo-network/react-chain-network'\nimport { MemoryXyoNetwork } from '@xyo-network/xl1-rpc'\nimport { useMemo } from 'react'\n\nexport const useNetwork = () => {\n  const { activeNetwork } = useChainNetwork()\n\n  return useMemo(() => {\n    if (!activeNetwork) return\n    return new MemoryXyoNetwork(activeNetwork.id)\n  }, [activeNetwork])\n}\n","import { useChainNetwork } from '@xyo-network/react-chain-network'\nimport type { XyoProvider } from '@xyo-network/xl1-protocol'\nimport {\n  AllRpcSchemas, HttpRpcTransport, JsonRpcXyoRunner,\n} from '@xyo-network/xl1-rpc'\nimport { useMemo } from 'react'\n\nexport const useRunner = (_provider?: XyoProvider) => {\n  const { activeNetwork } = useChainNetwork()\n\n  return useMemo(() => {\n    if (!activeNetwork) {\n      return\n    }\n    const transport = new HttpRpcTransport(`${activeNetwork.url}/rpc`, AllRpcSchemas)\n    return new JsonRpcXyoRunner(transport)\n  }, [activeNetwork])\n}\n","import type { AccountInstance } from '@xyo-network/account-model'\nimport type { XyoProvider, XyoSigner } from '@xyo-network/xl1-protocol'\nimport { MemoryXyoSigner } from '@xyo-network/xl1-rpc'\nimport { useMemo } from 'react'\n\nexport const useSigner = (_provider?: XyoProvider, account?: AccountInstance) => {\n  return useMemo<XyoSigner | undefined>(() => account ? new MemoryXyoSigner(account) : undefined, [account])\n}\n"],"mappings":"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","names":["usePromise","isUndefined","isUndefinedOrNull","ShiftedBigInt","useMemo","useState","useAddressBalance","address","viewer","networkId","refresh","balancesResult","setBalancesResult","useState","loading","setLoading","balancesError","usePromise","isUndefined","undefined","balance","accountBalance","useMemo","shiftedBigInt","ShiftedBigInt","places","maxDecimal","maxCharacters","minDecimals","locale","navigator","language","balanceIntlFriendly","toFullString","shortBalanceIntlFriendly","isUndefinedOrNull","toShortString","balanceForAddress","error","usePromise","useChainNetwork","AllRpcSchemas","HttpRpcTransport","JsonRpcXyoViewer","useMemo","useViewer","_provider","activeNetwork","useChainNetwork","useMemo","transport","HttpRpcTransport","url","AllRpcSchemas","JsonRpcXyoViewer","useCurrentBlock","refresh","viewer","useViewer","usePromise","block","currentBlock","useChainNetwork","MemoryXyoNetwork","useMemo","useNetwork","activeNetwork","useChainNetwork","useMemo","MemoryXyoNetwork","id","useChainNetwork","AllRpcSchemas","HttpRpcTransport","JsonRpcXyoRunner","useMemo","useRunner","_provider","activeNetwork","useChainNetwork","useMemo","transport","HttpRpcTransport","url","AllRpcSchemas","JsonRpcXyoRunner","MemoryXyoSigner","useMemo","useSigner","_provider","account","useMemo","MemoryXyoSigner","undefined"]}
+{"version":3,"sources":["../../src/hooks/useAddressBalance.ts","../../src/hooks/useCurrentBlock.ts","../../src/hooks/useViewer.ts","../../src/hooks/useHostViewer.ts","../../src/hooks/useNetwork.ts","../../src/hooks/useRunner.ts","../../src/hooks/useSigner.ts"],"sourcesContent":["import type { Address } from '@xylabs/hex'\nimport { usePromise } from '@xylabs/react-promise'\nimport { isUndefined, isUndefinedOrNull } from '@xylabs/typeof'\nimport { ShiftedBigInt } from '@xyo-network/chain-wrappers'\nimport type {\n  AttoXL1, NetworkId, XyoViewer,\n} from '@xyo-network/xl1-protocol'\nimport { useMemo, useState } from 'react'\n\nexport const useAddressBalance = (\n  // address to get balance for\n  address?: Address,\n  // viewer to use for fetching balance\n  viewer?: XyoViewer,\n  // network ID to trigger a balance refresh\n  networkId?: NetworkId,\n  // refresh balance trigger\n  refresh?: number,\n) => {\n  const [balancesResult, setBalancesResult] = useState<AttoXL1 | null>()\n  const [loading, setLoading] = useState(false)\n\n  const [, balancesError] = usePromise(async () => {\n    if (isUndefined(viewer) || isUndefined(address)) return\n    setLoading(true)\n    setBalancesResult(undefined)\n    const balance = await viewer.accountBalance(address)\n    setBalancesResult(balance as AttoXL1)\n    setLoading(false)\n  }, [address, viewer, networkId, refresh])\n\n  useMemo(() => {\n    if (balancesError) {\n      setLoading(false)\n    }\n  }, [balancesError])\n\n  const shiftedBigInt = useMemo(() => {\n    if (typeof balancesResult !== 'bigint') return\n    return new ShiftedBigInt(balancesResult, {\n      places: 18, maxDecimal: 18, maxCharacters: 9, minDecimals: 1, locale: navigator.language,\n    })\n  }, [balancesResult])\n\n  const balanceIntlFriendly = useMemo(() => {\n    return shiftedBigInt?.toFullString()\n  }, [shiftedBigInt])\n\n  const shortBalanceIntlFriendly = useMemo(() => {\n    return isUndefinedOrNull(balancesResult)\n      ? undefined\n      : (balancesResult < 1_000_000_000_000n && balancesResult > 0n) ? '<0.00001' : shiftedBigInt?.toShortString()\n  }, [shiftedBigInt])\n\n  return {\n    address,\n    balanceForAddress: balancesResult,\n    balanceIntlFriendly,\n    shortBalanceIntlFriendly,\n    error: balancesError,\n    loading,\n  }\n}\n","import { usePromise } from '@xylabs/react-promise'\n\nimport { useViewerBase } from './useViewer.ts'\n\nexport const useCurrentBlockBase = (refresh = 1, id?: string, url?: string) => {\n  const viewer = useViewerBase(id, url)\n  return usePromise(async () => {\n    if (viewer && refresh > 0) {\n      const block = await viewer.currentBlock()\n      return block\n    }\n  }, [viewer, refresh])\n}\n\n/** @deprecated - use useCurrentBlockBase instead but note this hook no longer relies on useChainNetwork */\nexport const useCurrentBlock = useCurrentBlockBase\n","import { isDefined, isUndefined } from '@xylabs/typeof'\nimport {\n  AllRpcSchemas, HttpRpcTransport, JsonRpcXyoViewer,\n} from '@xyo-network/xl1-rpc'\nimport { useMemo } from 'react'\n\nimport { useHostViewerBase } from './useHostViewer.ts'\n\nexport const useViewerBase = (id?: string, url?: string) => {\n  const hostViewer = useHostViewerBase(id)\n\n  const resolvedViewer = useMemo(() => {\n    if (isUndefined(url)) {\n      return\n    }\n    if (isDefined(hostViewer)) {\n      console.debug('Using host viewer:', hostViewer)\n      return hostViewer\n    }\n    const transport = new HttpRpcTransport(`${url}/rpc`, AllRpcSchemas)\n    return new JsonRpcXyoViewer(transport)\n  }, [url, hostViewer])\n\n  return resolvedViewer\n}\n\n/** @deprecated - use useViewerBase instead but note this hook no longer relies on useChainNetwork */\nexport const useViewer = useViewerBase\n","import {\n  isDefined, isTruthy, isUndefined,\n} from '@xylabs/typeof'\nimport {\n  JsonRpcXyoViewer,\n  PostMessageRpcTransport,\n} from '@xyo-network/xl1-rpc'\nimport { useMemo } from 'react'\n\n// Get known wallet connections from the global Xyo object\nconst walletConnections = globalThis.xyo?.connections\n\n/**\n * Creates a JsonRpcXyoViewer instance based on the provided networkId.\n * @param networkId - a network id like 'sequence', 'local', etc.\n * @returns An instance of JsonRpcXyoViewer if the networkId is found in walletConnections,\n * otherwise undefined.\n */\nexport const useHostViewerBase = (networkId?: string) => {\n  const networkConnection = useMemo(() => {\n    if (isTruthy(networkId) && isDefined(walletConnections) && isDefined(walletConnections[networkId])) {\n      return networkId\n    }\n  }, [networkId])\n\n  const rpcProvider = useMemo(() => {\n    if (isUndefined(networkConnection)) return\n    const transport = new PostMessageRpcTransport(networkConnection)\n    return new JsonRpcXyoViewer(transport)\n  }, [networkConnection])\n\n  return rpcProvider\n}\n\n/**\n * @deprecated - use useHostViewerBase instead but note this hook no longer relies on useChainNetwork\n */\nexport const useHostViewer = useHostViewerBase\n","import { isUndefined } from '@xylabs/typeof'\nimport type { DefaultNetworkIds } from '@xyo-network/xl1-protocol'\nimport { MemoryXyoNetwork } from '@xyo-network/xl1-rpc'\nimport { useMemo } from 'react'\n\nexport const useNetworkBase = (id?: DefaultNetworkIds) => {\n  const network = useMemo(() => {\n    if (isUndefined(id)) return\n    return new MemoryXyoNetwork(id)\n  }, [id])\n\n  return network\n}\n\n/**\n * @deprecated - use useNetworkBase instead but note this hook no longer relies on useChainNetwork\n */\nexport const useNetwork = useNetworkBase\n","import { isUndefined } from '@xylabs/typeof'\nimport {\n  AllRpcSchemas, HttpRpcTransport, JsonRpcXyoRunner,\n} from '@xyo-network/xl1-rpc'\nimport { useMemo } from 'react'\n\nexport const useRunnerBase = (url?: string) => {\n  return useMemo(() => {\n    if (isUndefined(url)) {\n      return\n    }\n    const transport = new HttpRpcTransport(`${url}/rpc`, AllRpcSchemas)\n    return new JsonRpcXyoRunner(transport)\n  }, [url])\n}\n\n/** @deprecated - use useRunnerBase instead but note this hook no longer relies on useChainNetwork */\nexport const useRunner = useRunnerBase\n","import type { AccountInstance } from '@xyo-network/account-model'\nimport type { XyoProvider, XyoSigner } from '@xyo-network/xl1-protocol'\nimport { MemoryXyoSigner } from '@xyo-network/xl1-rpc'\nimport { useMemo } from 'react'\n\nexport const useSigner = (_provider?: XyoProvider, account?: AccountInstance) => {\n  return useMemo<XyoSigner | undefined>(() => account ? new MemoryXyoSigner(account) : undefined, [account])\n}\n"],"mappings":";;;;AACA,SAASA,kBAAkB;AAC3B,SAASC,aAAaC,yBAAyB;AAC/C,SAASC,qBAAqB;AAI9B,SAASC,SAASC,gBAAgB;AAE3B,IAAMC,oBAAoB,wBAE/BC,SAEAC,QAEAC,WAEAC,YAAAA;AAEA,QAAM,CAACC,gBAAgBC,iBAAAA,IAAqBC,SAAAA;AAC5C,QAAM,CAACC,SAASC,UAAAA,IAAcF,SAAS,KAAA;AAEvC,QAAM,CAAA,EAAGG,aAAAA,IAAiBC,WAAW,YAAA;AACnC,QAAIC,YAAYV,MAAAA,KAAWU,YAAYX,OAAAA,EAAU;AACjDQ,eAAW,IAAA;AACXH,sBAAkBO,MAAAA;AAClB,UAAMC,UAAU,MAAMZ,OAAOa,eAAed,OAAAA;AAC5CK,sBAAkBQ,OAAAA;AAClBL,eAAW,KAAA;EACb,GAAG;IAACR;IAASC;IAAQC;IAAWC;GAAQ;AAExCY,UAAQ,MAAA;AACN,QAAIN,eAAe;AACjBD,iBAAW,KAAA;IACb;EACF,GAAG;IAACC;GAAc;AAElB,QAAMO,gBAAgBD,QAAQ,MAAA;AAC5B,QAAI,OAAOX,mBAAmB,SAAU;AACxC,WAAO,IAAIa,cAAcb,gBAAgB;MACvCc,QAAQ;MAAIC,YAAY;MAAIC,eAAe;MAAGC,aAAa;MAAGC,QAAQC,UAAUC;IAClF,CAAA;EACF,GAAG;IAACpB;GAAe;AAEnB,QAAMqB,sBAAsBV,QAAQ,MAAA;AAClC,WAAOC,eAAeU,aAAAA;EACxB,GAAG;IAACV;GAAc;AAElB,QAAMW,2BAA2BZ,QAAQ,MAAA;AACvC,WAAOa,kBAAkBxB,cAAAA,IACrBQ,SACCR,iBAAiB,kBAAsBA,iBAAiB,KAAM,aAAaY,eAAea,cAAAA;EACjG,GAAG;IAACb;GAAc;AAElB,SAAO;IACLhB;IACA8B,mBAAmB1B;IACnBqB;IACAE;IACAI,OAAOtB;IACPF;EACF;AACF,GArDiC;;;ACTjC,SAASyB,cAAAA,mBAAkB;;;ACA3B,SAASC,aAAAA,YAAWC,eAAAA,oBAAmB;AACvC,SACEC,eAAeC,kBAAkBC,oBAAAA,yBAC5B;AACP,SAASC,WAAAA,gBAAe;;;ACJxB,SACEC,WAAWC,UAAUC,eAAAA,oBAChB;AACP,SACEC,kBACAC,+BACK;AACP,SAASC,WAAAA,gBAAe;AAGxB,IAAMC,oBAAoBC,WAAWC,KAAKC;AAQnC,IAAMC,oBAAoB,wBAACC,cAAAA;AAChC,QAAMC,oBAAoBC,SAAQ,MAAA;AAChC,QAAIC,SAASH,SAAAA,KAAcI,UAAUT,iBAAAA,KAAsBS,UAAUT,kBAAkBK,SAAAA,CAAU,GAAG;AAClG,aAAOA;IACT;EACF,GAAG;IAACA;GAAU;AAEd,QAAMK,cAAcH,SAAQ,MAAA;AAC1B,QAAII,aAAYL,iBAAAA,EAAoB;AACpC,UAAMM,YAAY,IAAIC,wBAAwBP,iBAAAA;AAC9C,WAAO,IAAIQ,iBAAiBF,SAAAA;EAC9B,GAAG;IAACN;GAAkB;AAEtB,SAAOI;AACT,GAdiC;AAmB1B,IAAMK,gBAAgBX;;;AD7BtB,IAAMY,gBAAgB,wBAACC,IAAaC,QAAAA;AACzC,QAAMC,aAAaC,kBAAkBH,EAAAA;AAErC,QAAMI,iBAAiBC,SAAQ,MAAA;AAC7B,QAAIC,aAAYL,GAAAA,GAAM;AACpB;IACF;AACA,QAAIM,WAAUL,UAAAA,GAAa;AACzBM,cAAQC,MAAM,sBAAsBP,UAAAA;AACpC,aAAOA;IACT;AACA,UAAMQ,YAAY,IAAIC,iBAAiB,GAAGV,GAAAA,QAAWW,aAAAA;AACrD,WAAO,IAAIC,kBAAiBH,SAAAA;EAC9B,GAAG;IAACT;IAAKC;GAAW;AAEpB,SAAOE;AACT,GAhB6B;AAmBtB,IAAMU,YAAYf;;;ADvBlB,IAAMgB,sBAAsB,wBAACC,UAAU,GAAGC,IAAaC,QAAAA;AAC5D,QAAMC,SAASC,cAAcH,IAAIC,GAAAA;AACjC,SAAOG,YAAW,YAAA;AAChB,QAAIF,UAAUH,UAAU,GAAG;AACzB,YAAMM,QAAQ,MAAMH,OAAOI,aAAY;AACvC,aAAOD;IACT;EACF,GAAG;IAACH;IAAQH;GAAQ;AACtB,GARmC;AAW5B,IAAMQ,kBAAkBT;;;AGf/B,SAASU,eAAAA,oBAAmB;AAE5B,SAASC,wBAAwB;AACjC,SAASC,WAAAA,gBAAe;AAEjB,IAAMC,iBAAiB,wBAACC,OAAAA;AAC7B,QAAMC,UAAUC,SAAQ,MAAA;AACtB,QAAIC,aAAYH,EAAAA,EAAK;AACrB,WAAO,IAAII,iBAAiBJ,EAAAA;EAC9B,GAAG;IAACA;GAAG;AAEP,SAAOC;AACT,GAP8B;AAYvB,IAAMI,aAAaN;;;ACjB1B,SAASO,eAAAA,oBAAmB;AAC5B,SACEC,iBAAAA,gBAAeC,oBAAAA,mBAAkBC,wBAC5B;AACP,SAASC,WAAAA,gBAAe;AAEjB,IAAMC,gBAAgB,wBAACC,QAAAA;AAC5B,SAAOC,SAAQ,MAAA;AACb,QAAIC,aAAYF,GAAAA,GAAM;AACpB;IACF;AACA,UAAMG,YAAY,IAAIC,kBAAiB,GAAGJ,GAAAA,QAAWK,cAAAA;AACrD,WAAO,IAAIC,iBAAiBH,SAAAA;EAC9B,GAAG;IAACH;GAAI;AACV,GAR6B;AAWtB,IAAMO,YAAYR;;;ACfzB,SAASS,uBAAuB;AAChC,SAASC,WAAAA,gBAAe;AAEjB,IAAMC,YAAY,wBAACC,WAAyBC,YAAAA;AACjD,SAAOC,SAA+B,MAAMD,UAAU,IAAIE,gBAAgBF,OAAAA,IAAWG,QAAW;IAACH;GAAQ;AAC3G,GAFyB;","names":["usePromise","isUndefined","isUndefinedOrNull","ShiftedBigInt","useMemo","useState","useAddressBalance","address","viewer","networkId","refresh","balancesResult","setBalancesResult","useState","loading","setLoading","balancesError","usePromise","isUndefined","undefined","balance","accountBalance","useMemo","shiftedBigInt","ShiftedBigInt","places","maxDecimal","maxCharacters","minDecimals","locale","navigator","language","balanceIntlFriendly","toFullString","shortBalanceIntlFriendly","isUndefinedOrNull","toShortString","balanceForAddress","error","usePromise","isDefined","isUndefined","AllRpcSchemas","HttpRpcTransport","JsonRpcXyoViewer","useMemo","isDefined","isTruthy","isUndefined","JsonRpcXyoViewer","PostMessageRpcTransport","useMemo","walletConnections","globalThis","xyo","connections","useHostViewerBase","networkId","networkConnection","useMemo","isTruthy","isDefined","rpcProvider","isUndefined","transport","PostMessageRpcTransport","JsonRpcXyoViewer","useHostViewer","useViewerBase","id","url","hostViewer","useHostViewerBase","resolvedViewer","useMemo","isUndefined","isDefined","console","debug","transport","HttpRpcTransport","AllRpcSchemas","JsonRpcXyoViewer","useViewer","useCurrentBlockBase","refresh","id","url","viewer","useViewerBase","usePromise","block","currentBlock","useCurrentBlock","isUndefined","MemoryXyoNetwork","useMemo","useNetworkBase","id","network","useMemo","isUndefined","MemoryXyoNetwork","useNetwork","isUndefined","AllRpcSchemas","HttpRpcTransport","JsonRpcXyoRunner","useMemo","useRunnerBase","url","useMemo","isUndefined","transport","HttpRpcTransport","AllRpcSchemas","JsonRpcXyoRunner","useRunner","MemoryXyoSigner","useMemo","useSigner","_provider","account","useMemo","MemoryXyoSigner","undefined"]}

package/dist/types/hooks/index.d.ts

@@ -1,5 +1,6 @@
 export * from './useAddressBalance.ts';
 export * from './useCurrentBlock.ts';
+export * from './useHostViewer.ts';
 export * from './useNetwork.ts';
 export * from './useRunner.ts';
 export * from './useSigner.ts';

package/dist/types/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,gBAAgB,CAAA"}

package/dist/types/hooks/useCurrentBlock.d.ts

@@ -1,2 +1,4 @@
-export declare const useCurrentBlock: (refresh?: number) => [import("@xyo-network/xl1-protocol").HydratedBlock | undefined, Error | undefined, import("@xylabs/react-promise").UsePromiseState | undefined];
+export declare const useCurrentBlockBase: (refresh?: number, id?: string, url?: string) => [import("@xyo-network/xl1-protocol").HydratedBlock | undefined, Error | undefined, import("@xylabs/react-promise").UsePromiseState | undefined];
+/** @deprecated - use useCurrentBlockBase instead but note this hook no longer relies on useChainNetwork */
+export declare const useCurrentBlock: (refresh?: number, id?: string, url?: string) => [import("@xyo-network/xl1-protocol").HydratedBlock | undefined, Error | undefined, import("@xylabs/react-promise").UsePromiseState | undefined];
 //# sourceMappingURL=useCurrentBlock.d.ts.map

package/dist/types/hooks/useCurrentBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCurrentBlock.d.ts","sourceRoot":"","sources":["../../../src/hooks/useCurrentBlock.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,eAAe,GAAI,gBAAW,oJAQ1C,CAAA"}
+{"version":3,"file":"useCurrentBlock.d.ts","sourceRoot":"","sources":["../../../src/hooks/useCurrentBlock.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,mBAAmB,GAAI,gBAAW,EAAE,KAAK,MAAM,EAAE,MAAM,MAAM,oJAQzE,CAAA;AAED,2GAA2G;AAC3G,eAAO,MAAM,eAAe,0BAX0B,MAAM,QAAQ,MAAM,oJAWxB,CAAA"}

package/dist/types/hooks/useHostViewer.d.ts

@@ -0,0 +1,13 @@
+import { JsonRpcXyoViewer } from '@xyo-network/xl1-rpc';
+/**
+ * Creates a JsonRpcXyoViewer instance based on the provided networkId.
+ * @param networkId - a network id like 'sequence', 'local', etc.
+ * @returns An instance of JsonRpcXyoViewer if the networkId is found in walletConnections,
+ * otherwise undefined.
+ */
+export declare const useHostViewerBase: (networkId?: string) => JsonRpcXyoViewer | undefined;
+/**
+ * @deprecated - use useHostViewerBase instead but note this hook no longer relies on useChainNetwork
+ */
+export declare const useHostViewer: (networkId?: string) => JsonRpcXyoViewer | undefined;
+//# sourceMappingURL=useHostViewer.d.ts.map

package/dist/types/hooks/useHostViewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHostViewer.d.ts","sourceRoot":"","sources":["../../../src/hooks/useHostViewer.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,gBAAgB,EAEjB,MAAM,sBAAsB,CAAA;AAM7B;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,GAAI,YAAY,MAAM,iCAcnD,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,eAnBoB,MAAM,iCAmBN,CAAA"}

package/dist/types/hooks/useNetwork.d.ts

@@ -1,3 +1,8 @@
+import type { DefaultNetworkIds } from '@xyo-network/xl1-protocol';
 import { MemoryXyoNetwork } from '@xyo-network/xl1-rpc';
-export declare const useNetwork: () => MemoryXyoNetwork | undefined;
+export declare const useNetworkBase: (id?: DefaultNetworkIds) => MemoryXyoNetwork | undefined;
+/**
+ * @deprecated - use useNetworkBase instead but note this hook no longer relies on useChainNetwork
+ */
+export declare const useNetwork: (id?: DefaultNetworkIds) => MemoryXyoNetwork | undefined;
 //# sourceMappingURL=useNetwork.d.ts.map

package/dist/types/hooks/useNetwork.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useNetwork.d.ts","sourceRoot":"","sources":["../../../src/hooks/useNetwork.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAGvD,eAAO,MAAM,UAAU,oCAOtB,CAAA"}
+{"version":3,"file":"useNetwork.d.ts","sourceRoot":"","sources":["../../../src/hooks/useNetwork.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAA;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AAGvD,eAAO,MAAM,cAAc,GAAI,KAAK,iBAAiB,iCAOpD,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,QAZa,iBAAiB,iCAYb,CAAA"}

package/dist/types/hooks/useRunner.d.ts

@@ -1,4 +1,5 @@
-import type { XyoProvider } from '@xyo-network/xl1-protocol';
 import { JsonRpcXyoRunner } from '@xyo-network/xl1-rpc';
-export declare const useRunner: (_provider?: XyoProvider) => JsonRpcXyoRunner | undefined;
+export declare const useRunnerBase: (url?: string) => JsonRpcXyoRunner | undefined;
+/** @deprecated - use useRunnerBase instead but note this hook no longer relies on useChainNetwork */
+export declare const useRunner: (url?: string) => JsonRpcXyoRunner | undefined;
 //# sourceMappingURL=useRunner.d.ts.map

package/dist/types/hooks/useRunner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useRunner.d.ts","sourceRoot":"","sources":["../../../src/hooks/useRunner.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AAC5D,OAAO,EAC4B,gBAAgB,EAClD,MAAM,sBAAsB,CAAA;AAG7B,eAAO,MAAM,SAAS,GAAI,YAAY,WAAW,iCAUhD,CAAA"}
+{"version":3,"file":"useRunner.d.ts","sourceRoot":"","sources":["../../../src/hooks/useRunner.ts"],"names":[],"mappings":"AACA,OAAO,EAC4B,gBAAgB,EAClD,MAAM,sBAAsB,CAAA;AAG7B,eAAO,MAAM,aAAa,GAAI,MAAM,MAAM,iCAQzC,CAAA;AAED,qGAAqG;AACrG,eAAO,MAAM,SAAS,SAXc,MAAM,iCAWJ,CAAA"}

package/dist/types/hooks/useViewer.d.ts

@@ -1,4 +1,5 @@
-import type { XyoProvider } from '@xyo-network/xl1-protocol';
 import { JsonRpcXyoViewer } from '@xyo-network/xl1-rpc';
-export declare const useViewer: (_provider?: XyoProvider) => JsonRpcXyoViewer | undefined;
+export declare const useViewerBase: (id?: string, url?: string) => JsonRpcXyoViewer | undefined;
+/** @deprecated - use useViewerBase instead but note this hook no longer relies on useChainNetwork */
+export declare const useViewer: (id?: string, url?: string) => JsonRpcXyoViewer | undefined;
 //# sourceMappingURL=useViewer.d.ts.map

package/dist/types/hooks/useViewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useViewer.d.ts","sourceRoot":"","sources":["../../../src/hooks/useViewer.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AAC5D,OAAO,EAC4B,gBAAgB,EAClD,MAAM,sBAAsB,CAAA;AAG7B,eAAO,MAAM,SAAS,GAAI,YAAY,WAAW,iCAUhD,CAAA"}
+{"version":3,"file":"useViewer.d.ts","sourceRoot":"","sources":["../../../src/hooks/useViewer.ts"],"names":[],"mappings":"AACA,OAAO,EAC4B,gBAAgB,EAClD,MAAM,sBAAsB,CAAA;AAK7B,eAAO,MAAM,aAAa,GAAI,KAAK,MAAM,EAAE,MAAM,MAAM,iCAgBtD,CAAA;AAED,qGAAqG;AACrG,eAAO,MAAM,SAAS,QAnBa,MAAM,QAAQ,MAAM,iCAmBjB,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json.schemastore.org/package.json",
   "name": "@xyo-network/react-chain-provider",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "description": "XYO Layer One API",
   "homepage": "https://xylabs.com",
   "bugs": {
@@ -34,20 +34,25 @@
   "module": "dist/browser/index.mjs",
   "types": "dist/types/index.d.ts",
   "dependencies": {
-    "@xylabs/hex": "^4.12.31",
+    "@xylabs/hex": "^4.12.44",
     "@xylabs/react-promise": "^6.3.7",
-    "@xylabs/typeof": "^4.12.31",
-    "@xyo-network/account-model": "^4.0.1",
-    "@xyo-network/chain-wrappers": "^1.6.0",
-    "@xyo-network/react-chain-network": "^1.6.0",
-    "@xyo-network/xl1-protocol": "^1.6.0",
-    "@xyo-network/xl1-rpc": "^1.6.0",
+    "@xylabs/typeof": "^4.12.44",
+    "@xyo-network/account-model": "^4.0.2",
+    "@xyo-network/chain-wrappers": "^1.6.2",
+    "@xyo-network/xl1-protocol": "^1.6.1",
+    "@xyo-network/xl1-rpc": "^1.6.2",
     "react": "^19.1.0"
   },
   "devDependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/material": "^7.2.0",
+    "@storybook/react-vite": "^9.0.16",
     "@types/react": "^19.1.8",
-    "@xylabs/ts-scripts-yarn3": "^6.5.12",
-    "@xylabs/tsconfig-react": "^6.5.12",
+    "@xylabs/ts-scripts-yarn3": "^6.5.18",
+    "@xylabs/tsconfig-react": "^6.5.18",
+    "@xyo-network/chain-network-model": "^1.6.2",
+    "@xyo-network/react-chain-model": "^1.6.2",
     "knip": "^5.61.3",
     "typescript": "^5.8.3"
   },

package/src/global.d.ts

@@ -0,0 +1,10 @@
+import type { XyoGlobal } from '@xyo-network/react-chain-model'
+
+export declare global {
+  interface Window {
+    xyo: XyoGlobal
+  }
+
+  var xyo: XyoGlobal
+  var xyoWalletExtensionId: string
+}

package/src/hooks/index.ts

@@ -1,5 +1,6 @@
 export * from './useAddressBalance.ts'
 export * from './useCurrentBlock.ts'
+export * from './useHostViewer.ts'
 export * from './useNetwork.ts'
 export * from './useRunner.ts'
 export * from './useSigner.ts'

package/src/hooks/useCurrentBlock.ts

@@ -1,9 +1,9 @@
 import { usePromise } from '@xylabs/react-promise'
 
-import { useViewer } from './useViewer.ts'
+import { useViewerBase } from './useViewer.ts'
 
-export const useCurrentBlock = (refresh = 1) => {
-  const viewer = useViewer()
+export const useCurrentBlockBase = (refresh = 1, id?: string, url?: string) => {
+  const viewer = useViewerBase(id, url)
   return usePromise(async () => {
     if (viewer && refresh > 0) {
       const block = await viewer.currentBlock()
@@ -11,3 +11,6 @@ export const useCurrentBlock = (refresh = 1) => {
     }
   }, [viewer, refresh])
 }
+
+/** @deprecated - use useCurrentBlockBase instead but note this hook no longer relies on useChainNetwork */
+export const useCurrentBlock = useCurrentBlockBase

package/src/hooks/useHostViewer.stories.tsx

@@ -0,0 +1,67 @@
+import {
+  Alert, Button, Stack,
+} from '@mui/material'
+import type { StoryFn } from '@storybook/react-vite'
+import { isDefined, isUndefined } from '@xylabs/typeof'
+import { SequenceNetwork } from '@xyo-network/chain-network-model'
+import type { HydratedBlock } from '@xyo-network/xl1-protocol'
+import React, { useState } from 'react'
+
+import { useHostViewerBase } from './useHostViewer.ts'
+
+const wallet = globalThis.xyo?.walletExtensionId?.()
+const inIframe = globalThis.self !== window.top
+
+const UseHostViewerStoryTemplate: React.FC = () => {
+  const defaultDestination = SequenceNetwork.id
+  const viewer = useHostViewerBase(defaultDestination)
+  const [error, setError] = useState<Error | null>(null)
+  const [result, setResult] = useState<HydratedBlock | null | undefined>()
+
+  const handleClick = async () => {
+    if (isDefined(viewer)) {
+      try {
+        const block = await viewer.currentBlock()
+        setError(null)
+        setResult(block)
+      } catch (err) {
+        setError(err as Error)
+        setResult(undefined)
+      }
+    }
+  }
+
+  return (
+    <Stack gap={2} alignItems="center">
+      {inIframe && (
+        <Alert severity="warning">
+          This story is running in an iframe. Please run it in a standalone browser window to test the wallet extension.
+        </Alert>
+      )}
+      {isUndefined(wallet) && (
+        <Alert severity="warning">
+          No wallet extension found. Please install the Xyo Wallet Chrome Extension.
+        </Alert>
+      )}
+      <Button variant="contained" onClick={() => void handleClick()} disabled={!isDefined(viewer)}>
+        Get Current Block
+      </Button>
+      <pre>
+        {JSON.stringify(result, null, 2)}
+      </pre>
+      {error && <Alert severity="error">{error.message}</Alert>}
+    </Stack>
+  )
+}
+
+export default {
+  title: 'provider/useHostViewer',
+  component: UseHostViewerStoryTemplate,
+}
+
+export const Template: StoryFn<typeof UseHostViewerStoryTemplate> = args => <UseHostViewerStoryTemplate {...args} />
+
+const Default = Template.bind({})
+Default.args = {}
+
+export { Default }

package/src/hooks/useHostViewer.ts

@@ -0,0 +1,38 @@
+import {
+  isDefined, isTruthy, isUndefined,
+} from '@xylabs/typeof'
+import {
+  JsonRpcXyoViewer,
+  PostMessageRpcTransport,
+} from '@xyo-network/xl1-rpc'
+import { useMemo } from 'react'
+
+// Get known wallet connections from the global Xyo object
+const walletConnections = globalThis.xyo?.connections
+
+/**
+ * Creates a JsonRpcXyoViewer instance based on the provided networkId.
+ * @param networkId - a network id like 'sequence', 'local', etc.
+ * @returns An instance of JsonRpcXyoViewer if the networkId is found in walletConnections,
+ * otherwise undefined.
+ */
+export const useHostViewerBase = (networkId?: string) => {
+  const networkConnection = useMemo(() => {
+    if (isTruthy(networkId) && isDefined(walletConnections) && isDefined(walletConnections[networkId])) {
+      return networkId
+    }
+  }, [networkId])
+
+  const rpcProvider = useMemo(() => {
+    if (isUndefined(networkConnection)) return
+    const transport = new PostMessageRpcTransport(networkConnection)
+    return new JsonRpcXyoViewer(transport)
+  }, [networkConnection])
+
+  return rpcProvider
+}
+
+/**
+ * @deprecated - use useHostViewerBase instead but note this hook no longer relies on useChainNetwork
+ */
+export const useHostViewer = useHostViewerBase

package/src/hooks/useNetwork.ts

@@ -1,12 +1,18 @@
-import { useChainNetwork } from '@xyo-network/react-chain-network'
+import { isUndefined } from '@xylabs/typeof'
+import type { DefaultNetworkIds } from '@xyo-network/xl1-protocol'
 import { MemoryXyoNetwork } from '@xyo-network/xl1-rpc'
 import { useMemo } from 'react'
 
-export const useNetwork = () => {
-  const { activeNetwork } = useChainNetwork()
+export const useNetworkBase = (id?: DefaultNetworkIds) => {
+  const network = useMemo(() => {
+    if (isUndefined(id)) return
+    return new MemoryXyoNetwork(id)
+  }, [id])
 
-  return useMemo(() => {
-    if (!activeNetwork) return
-    return new MemoryXyoNetwork(activeNetwork.id)
-  }, [activeNetwork])
+  return network
 }
+
+/**
+ * @deprecated - use useNetworkBase instead but note this hook no longer relies on useChainNetwork
+ */
+export const useNetwork = useNetworkBase

package/src/hooks/useRunner.ts

@@ -1,18 +1,18 @@
-import { useChainNetwork } from '@xyo-network/react-chain-network'
-import type { XyoProvider } from '@xyo-network/xl1-protocol'
+import { isUndefined } from '@xylabs/typeof'
 import {
   AllRpcSchemas, HttpRpcTransport, JsonRpcXyoRunner,
 } from '@xyo-network/xl1-rpc'
 import { useMemo } from 'react'
 
-export const useRunner = (_provider?: XyoProvider) => {
-  const { activeNetwork } = useChainNetwork()
-
+export const useRunnerBase = (url?: string) => {
   return useMemo(() => {
-    if (!activeNetwork) {
+    if (isUndefined(url)) {
       return
     }
-    const transport = new HttpRpcTransport(`${activeNetwork.url}/rpc`, AllRpcSchemas)
+    const transport = new HttpRpcTransport(`${url}/rpc`, AllRpcSchemas)
     return new JsonRpcXyoRunner(transport)
-  }, [activeNetwork])
+  }, [url])
 }
+
+/** @deprecated - use useRunnerBase instead but note this hook no longer relies on useChainNetwork */
+export const useRunner = useRunnerBase

package/src/hooks/useViewer.stories.tsx

@@ -0,0 +1,64 @@
+import {
+  Alert, Button, Stack,
+} from '@mui/material'
+import type { Meta, StoryFn } from '@storybook/react-vite'
+import { isDefined, isUndefined } from '@xylabs/typeof'
+import { SequenceNetwork } from '@xyo-network/chain-network-model'
+import type { HydratedBlock } from '@xyo-network/xl1-protocol'
+import React, { useState } from 'react'
+
+import { useViewerBase } from './useViewer.ts'
+
+const wallet = globalThis.xyo?.walletExtensionId?.()
+const inIframe = globalThis.self !== window.top
+
+const UseViewerStoryTemplate: React.FC = () => {
+  const viewer = useViewerBase(SequenceNetwork.id, SequenceNetwork.url)
+  const [error, setError] = useState<Error | null>(null)
+  const [result, setResult] = useState<HydratedBlock | null | undefined>()
+
+  const handleClick = async () => {
+    if (isDefined(viewer)) {
+      try {
+        const block = await viewer.currentBlock()
+        setError(null)
+        setResult(block)
+      } catch (err) {
+        setError(err as Error)
+        setResult(undefined)
+      }
+    }
+  }
+
+  return (
+    <Stack gap={2} alignItems="center">
+      {inIframe && (
+        <Alert severity="warning">
+          This story is running in an iframe. Please run it in a standalone browser window to test the wallet extension.
+        </Alert>
+      )}
+      <Alert severity="info">
+        {isUndefined(wallet) ? 'No wallet extension found. Falling back to the default viewer.' : 'Wallet extension found. Using it for viewer.'}
+      </Alert>
+      <Button variant="contained" onClick={() => void handleClick()} disabled={!isDefined(viewer)}>
+        Get Current Block
+      </Button>
+      <pre>
+        {JSON.stringify(result, null, 2)}
+      </pre>
+      {error && <Alert severity="error">{error.message}</Alert>}
+    </Stack>
+  )
+}
+
+export default {
+  title: 'provider/useViewer',
+  component: UseViewerStoryTemplate,
+} as Meta
+
+export const Template: StoryFn<typeof UseViewerStoryTemplate> = args => <UseViewerStoryTemplate {...args} />
+
+const Default = Template.bind({})
+Default.args = {}
+
+export { Default }

package/src/hooks/useViewer.ts

@@ -1,18 +1,28 @@
-import { useChainNetwork } from '@xyo-network/react-chain-network'
-import type { XyoProvider } from '@xyo-network/xl1-protocol'
+import { isDefined, isUndefined } from '@xylabs/typeof'
 import {
   AllRpcSchemas, HttpRpcTransport, JsonRpcXyoViewer,
 } from '@xyo-network/xl1-rpc'
 import { useMemo } from 'react'
 
-export const useViewer = (_provider?: XyoProvider) => {
-  const { activeNetwork } = useChainNetwork()
+import { useHostViewerBase } from './useHostViewer.ts'
 
-  return useMemo(() => {
-    if (!activeNetwork) {
+export const useViewerBase = (id?: string, url?: string) => {
+  const hostViewer = useHostViewerBase(id)
+
+  const resolvedViewer = useMemo(() => {
+    if (isUndefined(url)) {
       return
     }
-    const transport = new HttpRpcTransport(`${activeNetwork.url}/rpc`, AllRpcSchemas)
+    if (isDefined(hostViewer)) {
+      console.debug('Using host viewer:', hostViewer)
+      return hostViewer
+    }
+    const transport = new HttpRpcTransport(`${url}/rpc`, AllRpcSchemas)
     return new JsonRpcXyoViewer(transport)
-  }, [activeNetwork])
+  }, [url, hostViewer])
+
+  return resolvedViewer
 }
+
+/** @deprecated - use useViewerBase instead but note this hook no longer relies on useChainNetwork */
+export const useViewer = useViewerBase