@xyo-network/xl1-react-client-sdk 2.2.0 → 2.2.1

package/dist/browser/index.mjs

@@ -8,7 +8,7 @@ import { EthAddressWrapper } from "@xylabs/eth-address";
 import { BlockiesAvatarAddress } from "@xyo-network/xl1-blockies";
 import { jsx, jsxs } from "react/jsx-runtime";
 var ConnectedAccount = ({ address }) => {
-  const shortenedAddress = `${EthAddressWrapper.fromString(address)?.toShortString(4)}`;
+  const shortenedAddress = EthAddressWrapper.fromString(address)?.toShortString(4) ?? "";
   return /* @__PURE__ */ jsxs(
     Stack,
     {
@@ -81,12 +81,13 @@ var listenForClientInjection = (onClientReady, timeout, onTimeout) => {
     onClientReady();
     resolved = true;
   };
-  globalThis.addEventListener("xyo:plugin-ready", listener);
+  addEventListener("xyo:plugin-ready", listener);
   setTimeout(() => {
-    if (!resolved) {
-      globalThis.removeEventListener("xyo:plugin-ready", listener);
-      onTimeout();
+    if (resolved) {
+      return;
     }
+    removeEventListener("xyo:plugin-ready", listener);
+    onTimeout();
   }, timeout);
 };
 async function getXyoClient(timeout = CLIENT_LISTENER_TIMEOUT) {
@@ -127,22 +128,24 @@ var useClientFromWallet = (timeout) => {
         };
       });
       try {
-        const client = await getXyoClient(timeout);
         if (cancelled) return;
-        if (client === null) {
-          setState({
-            client: null,
-            timedout: true,
-            isLoading: false,
-            error: null
-          });
-        } else {
-          setState({
-            client,
-            isLoading: false,
-            error: null,
-            timedout: false
-          });
+        const client = await getXyoClient(timeout);
+        if (!cancelled) {
+          if (client === null) {
+            setState({
+              client: null,
+              timedout: true,
+              isLoading: false,
+              error: null
+            });
+          } else {
+            setState({
+              client,
+              isLoading: false,
+              error: null,
+              timedout: false
+            });
+          }
         }
       } catch (error) {
         if (cancelled) return;
@@ -165,10 +168,11 @@ var useClientFromWallet = (timeout) => {
         error: null
       });
     };
-    globalThis.addEventListener("xyo:plugin-ready", onPluginReady);
+    const controller = new AbortController();
+    addEventListener("xyo:plugin-ready", onPluginReady, { signal: controller.signal });
     return () => {
       cancelled = true;
-      globalThis.removeEventListener("xyo:plugin-ready", onPluginReady);
+      controller.abort();
     };
   }, [timeout]);
   return state;
@@ -466,6 +470,11 @@ var renderCaveatValue = (caveat) => {
 };
 var renderPermission = (permission) => {
   const caveats = permission.caveats ?? [];
+  let grantedAt;
+  if (isDefined4(permission.date)) {
+    const grantedDate = new Date(permission.date);
+    grantedAt = grantedDate.toLocaleString();
+  }
   return /* @__PURE__ */ jsxs3(Stack3, { sx: { gap: 1 }, children: [
     /* @__PURE__ */ jsxs3(
       Stack3,
@@ -478,11 +487,11 @@ var renderPermission = (permission) => {
         },
         children: [
           /* @__PURE__ */ jsx3(Typography3, { variant: "subtitle2", sx: { fontFamily: "monospace" }, children: permission.parentCapability }),
-          isDefined4(permission.date) ? /* @__PURE__ */ jsxs3(Typography3, { variant: "caption", sx: { color: "text.secondary" }, children: [
+          grantedAt == null ? null : /* @__PURE__ */ jsxs3(Typography3, { variant: "caption", sx: { color: "text.secondary" }, children: [
             "granted",
             " ",
-            new Date(permission.date).toLocaleString()
-          ] }) : null
+            grantedAt
+          ] })
         ]
       }
     ),
@@ -754,7 +763,8 @@ async function runBurst(gateway, offChainSchema, burstSize, onProgress) {
   const collected = [];
   for (let index = 0; index < burstSize; index++) {
     try {
-      const content = new PayloadBuilder({ schema }).fields({ move: index, ts: Date.now() }).build();
+      const builder = new PayloadBuilder({ schema });
+      const content = builder.fields({ move: index, ts: Date.now() }).build();
       const [txHash] = await gateway.addPayloadsToChain([], [content]);
       collected.push({ index, txHash });
     } catch (e) {
@@ -1068,8 +1078,9 @@ var PANEL_PERMISSIONS = [
   { [DataLakesInsertMethod]: { dataLakeAccess: {} } }
 ];
 async function buildDefaultPayload(schema) {
-  const builder = new PayloadBuilder2({ schema }).fields({ value: 1 });
-  const payload = builder.build();
+  const builder = new PayloadBuilder2({ schema });
+  const configured = builder.fields({ value: 1 });
+  const payload = configured.build();
   return JSON.stringify(payload, null, 2);
 }
 function parsePayload(raw) {
@@ -1261,7 +1272,8 @@ var DataLakeAddToChainPanel = ({
   const canAddToChain = isDefined8(storedHash) && isDefined8(storedPayload) && isDefinedNotNull5(gateway) && !addingToChain;
   const explorerTxUrl = useMemo2(() => {
     if (!isDefined8(txHash)) return;
-    return new ExplorerLinks2(explorerUrl, gatewayName).transaction(txHash);
+    const links = new ExplorerLinks2(explorerUrl, gatewayName);
+    return links.transaction(txHash);
   }, [txHash, explorerUrl, gatewayName]);
   const handleInsert = async () => {
     if (!canInsert || !parse.ok || !isDefinedNotNull5(dataLakes)) return;
@@ -1611,11 +1623,12 @@ import {
 import { useMemo as useMemo4, useState as useState10 } from "react";
 import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
 function buildDefaultPayload2() {
+  const now = /* @__PURE__ */ new Date();
   return JSON.stringify(
     {
       schema: "network.xyo.observation.v2",
       value: 1,
-      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+      timestamp: now.toISOString()
     },
     null,
     2
@@ -2183,27 +2196,29 @@ var InPageGatewaysProvider = ({ signerTransport, children }) => {
   useEffect5(() => {
     let cancelled = false;
     const buildAll = async () => {
+      if (cancelled) return;
       const results = await Promise.allSettled(
         DefaultNetworks2.map(async (network) => {
           const gateway = await buildGateway(network.id, signerTransport);
           return { id: network.id, gateway };
         })
       );
-      if (cancelled) return;
-      const nextGateways = {};
-      const nextErrors = {};
-      for (const [index, result] of results.entries()) {
-        const networkId = DefaultNetworks2[index].id;
-        if (result.status === "fulfilled") {
-          nextGateways[networkId] = result.value.gateway;
-        } else {
-          nextErrors[networkId] = result.reason instanceof Error ? result.reason : new Error(String(result.reason));
+      if (!cancelled) {
+        const nextGateways = {};
+        const nextErrors = {};
+        for (const [index, result] of results.entries()) {
+          const networkId = DefaultNetworks2[index].id;
+          if (result.status === "fulfilled") {
+            nextGateways[networkId] = result.value.gateway;
+          } else {
+            nextErrors[networkId] = result.reason instanceof Error ? result.reason : new Error(String(result.reason));
+          }
         }
+        startTransition(() => {
+          setGateways(nextGateways);
+          setErrors(nextErrors);
+        });
       }
-      startTransition(() => {
-        setGateways(nextGateways);
-        setErrors(nextErrors);
-      });
     };
     void buildAll();
     return () => {
@@ -2252,7 +2267,8 @@ var GatewayProvider = ({ gatewayName, children }) => {
           walletGateway: null
         }
       };
-    } else if (isDefinedNotNull11(gatewayFromWallet)) {
+    }
+    if (isDefinedNotNull11(gatewayFromWallet)) {
       return {
         defaultGateway: gatewayFromWallet,
         gateways: {
@@ -2363,15 +2379,15 @@ var ActiveMenuItem = ({
         "paddingLeft": 1,
         "marginBottom": 1,
         // left border color and background color for active state
-        "borderLeft": `5px solid ${active ? theme.vars.palette.secondary.light : "transparent"}`,
-        "backgroundColor": active ? theme.vars.palette.secondary.dark : "transparent",
+        "borderLeft": `5px solid ${active === true ? theme.vars.palette.secondary.light : "transparent"}`,
+        "backgroundColor": active === true ? theme.vars.palette.secondary.dark : "transparent",
         // force white text color for active state for improved readability with background color
-        "color": active ? "white" : "unset",
+        "color": active === true ? "white" : "unset",
         "&:hover": {
           // overriding default hover color and backgroundColor since active state conflicts visually with
           // default styles of MenuItem hover
-          ...active ? { backgroundColor: theme.vars.palette.secondary.dark } : {},
-          color: active ? "white" : "unset"
+          ...active === true && { backgroundColor: theme.vars.palette.secondary.dark },
+          color: active === true ? "white" : "unset"
         },
         ...sx
       },
@@ -2526,9 +2542,12 @@ var LabelValueStack = ({
 
 // src/shared/decorators/IframeWalletWarningDecorator.tsx
 import { Alert as Alert13, Stack as Stack19 } from "@mui/material";
-import { isDefined as isDefined16 } from "@xylabs/sdk-js";
 import { jsx as jsx23, jsxs as jsxs21 } from "react/jsx-runtime";
-var inIframe = isDefined16(globalThis.self) && isDefined16(globalThis.top) && globalThis.self !== globalThis.top;
+function isInIframe() {
+  const frameWindow = globalThis;
+  return frameWindow.top != null && frameWindow.self !== frameWindow.top;
+}
+var inIframe = isInIframe();
 var IframeWalletWarningDecorator = (Story, args) => {
   const hasXyoGlobal = isXyoGlobal(globalThis.xyo);
   return /* @__PURE__ */ jsxs21(Stack19, { sx: { gap: 2 }, children: [