@xyo-network/xl1-react-client-sdk 1.28.0

package/dist/browser/index.mjs

@@ -0,0 +1,722 @@
+// src/client/components/connected/account/Connected.tsx
+import {
+  Stack,
+  Tooltip,
+  Typography
+} from "@mui/material";
+import { EthAddressWrapper } from "@xylabs/sdk-js";
+import { BlockiesAvatarAddress } from "@xyo-network/xl1-blockies";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ConnectedAccount = ({ address }) => {
+  const shortenedAddress = `${EthAddressWrapper.fromString(address)?.toShortString(4)}`;
+  return /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [
+    /* @__PURE__ */ jsx(BlockiesAvatarAddress, { address, size: 21 }),
+    /* @__PURE__ */ jsx(Tooltip, { title: address, children: /* @__PURE__ */ jsx(Typography, { color: "textSecondary", variant: "caption", fontFamily: "monospace", children: shortenedAddress }) })
+  ] });
+};
+
+// src/client/components/connected/ConnectAccountsStack.tsx
+import {
+  Alert,
+  AlertTitle,
+  Button,
+  Stack as Stack2,
+  Typography as Typography2
+} from "@mui/material";
+import { ButtonEx } from "@xylabs/react-button";
+import { ErrorRender } from "@xylabs/react-error";
+import { isDefined as isDefined3, isUndefined as isUndefined3 } from "@xylabs/sdk-js";
+import { useEffect as useEffect2 } from "react";
+
+// src/client/components/connected/hooks/useConnectAccount.ts
+import { asAddress } from "@xylabs/sdk-js";
+import { assertEx } from "@xylabs/sdk-js";
+import { MainNetwork } from "@xyo-network/xl1-sdk";
+import { useCallback, useState as useState2 } from "react";
+
+// src/client/hooks/client/helpers/findCaveat.ts
+import { isDefined } from "@xylabs/sdk-js";
+var findCaveat = async (permissions, targetCapability, targetCaveatType) => {
+  const existingPermissions = await permissions.getPermissions();
+  if (isDefined(existingPermissions) && existingPermissions.length > 0) {
+    const foundPermissions = existingPermissions.find((p) => p.parentCapability === targetCapability);
+    if (isDefined(foundPermissions)) {
+      return foundPermissions.caveats?.find((caveat) => caveat.type === targetCaveatType)?.value ?? [];
+    }
+  }
+  return existingPermissions;
+};
+
+// src/client/hooks/client/useClientFromWallet.ts
+import { isUndefined as isUndefined2 } from "@xylabs/sdk-js";
+import { useEffect, useState } from "react";
+
+// src/client/hooks/helpers/getXyoClient.ts
+import { isUndefined } from "@xylabs/sdk-js";
+var CLIENT_LISTENER_TIMEOUT = 2e3;
+var hasXyoClient = () => {
+  return "client" in globalThis.xyo;
+};
+var listenForClientInjection = (onClientReady, timeout, onTimeout) => {
+  let resolved = false;
+  const listener = () => {
+    onClientReady();
+    resolved = true;
+  };
+  globalThis.addEventListener("xyo:plugin-ready", listener);
+  setTimeout(() => {
+    if (!resolved) {
+      globalThis.removeEventListener("xyo:plugin-ready", listener);
+      onTimeout();
+    }
+  }, timeout);
+};
+async function getXyoClient(timeout = CLIENT_LISTENER_TIMEOUT) {
+  if (isUndefined(globalThis.xyo)) {
+    return null;
+  }
+  return hasXyoClient() ? globalThis.xyo.client : await new Promise((resolve) => {
+    listenForClientInjection(
+      () => {
+        resolve(globalThis.xyo.client);
+      },
+      timeout,
+      () => {
+        resolve(null);
+      }
+    );
+  });
+}
+
+// src/client/hooks/client/useClientFromWallet.ts
+var initialState = {
+  client: void 0,
+  error: null,
+  isLoading: false,
+  timedout: false
+};
+var useClientFromWallet = (timeout) => {
+  const [state, setState] = useState(initialState);
+  useEffect(() => {
+    let cancelled = false;
+    const initialize = async () => {
+      setState((prev) => {
+        if (prev.isLoading) return prev;
+        return {
+          ...prev,
+          isLoading: true,
+          error: null
+        };
+      });
+      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
+          });
+        }
+      } catch (error) {
+        if (cancelled) return;
+        setState({
+          client: void 0,
+          isLoading: false,
+          error,
+          timedout: false
+        });
+      }
+    };
+    void initialize();
+    const onPluginReady = () => {
+      if (cancelled) return;
+      const client = isUndefined2(globalThis.xyo) ? null : globalThis.xyo?.client ?? null;
+      setState({
+        client,
+        isLoading: false,
+        timedout: false,
+        error: null
+      });
+    };
+    globalThis.addEventListener("xyo:plugin-ready", onPluginReady);
+    return () => {
+      cancelled = true;
+      globalThis.removeEventListener("xyo:plugin-ready", onPluginReady);
+    };
+  }, [timeout]);
+  return state;
+};
+var useClient = useClientFromWallet;
+
+// src/client/hooks/client/permissions/usePermissions.ts
+var usePermissions = () => {
+  const {
+    client,
+    isLoading,
+    error,
+    timedout
+  } = useClientFromWallet();
+  const permissions = client?.permissions;
+  return {
+    permissions,
+    isLoading,
+    error,
+    timedout
+  };
+};
+
+// src/client/hooks/client/permissions/usePermissionsAccounts.ts
+import { usePromise } from "@xylabs/react-promise";
+import {
+  isArray,
+  isDefined as isDefined2,
+  isDefinedNotNull,
+  isString
+} from "@xylabs/sdk-js";
+var validateRestrictedAccounts = (restrictedAccounts) => {
+  if (isDefined2(restrictedAccounts)) {
+    if (isArray(restrictedAccounts) && restrictedAccounts.every(isString)) {
+      return restrictedAccounts;
+    }
+    throw new Error(
+      `Unrecognized format for restrictReturnedAccounts caveat found on permissions.  
+
+      Should be an array of strings: ${JSON.stringify(restrictedAccounts)}`
+    );
+  }
+  return [];
+};
+var useAccountPermissions = () => {
+  const { permissions, error } = usePermissions();
+  return usePromise(async () => {
+    if (isDefinedNotNull(error)) throw error;
+    if (isDefined2(permissions)) {
+      const restrictedAccounts = await findCaveat(
+        permissions,
+        // TODO - extract to constant in protocol package
+        "xyoWallet_getAccounts",
+        "restrictReturnedAccounts"
+      );
+      return validateRestrictedAccounts(restrictedAccounts);
+    }
+  }, [permissions]);
+};
+
+// src/client/hooks/client/useGatewayFromWallet.ts
+import { isNull } from "@xylabs/sdk-js";
+var useGatewayFromWallet = (gatewayName, timeout) => {
+  const {
+    client,
+    isLoading,
+    error,
+    timedout
+  } = useClientFromWallet(timeout);
+  const resolveGateway = () => {
+    if (isNull(client)) return null;
+    return client?.gateways?.[gatewayName];
+  };
+  return {
+    // no gatewayName requested = undefined (opt-out, not "absent")
+    gateway: gatewayName ? resolveGateway() : void 0,
+    isLoading,
+    error,
+    timedout
+  };
+};
+var useGateway = useGatewayFromWallet;
+
+// src/client/components/connected/hooks/useConnectAccount.ts
+var useConnectAccount = (gatewayName = MainNetwork.id, timeout) => {
+  const [connectError, setConnectError] = useState2();
+  const {
+    gateway,
+    error,
+    timedout
+  } = useGatewayFromWallet(gatewayName, timeout);
+  const [accountPermissions, accountPermissionsError] = useAccountPermissions();
+  const [address, setAddress] = useState2();
+  const connectSigner = useCallback(async () => {
+    try {
+      setConnectError(void 0);
+      const assertedGateway = assertEx(gateway, () => `Gateway ${gatewayName} is not available`);
+      const signer = assertedGateway.signer;
+      const address2 = await signer.address();
+      setAddress(address2);
+      return address2;
+    } catch (e) {
+      setConnectError(e);
+    }
+  }, [gateway, gatewayName]);
+  return {
+    address: asAddress(accountPermissions?.[0] ?? address),
+    connectSigner,
+    error: error ?? accountPermissionsError ?? connectError,
+    gateway,
+    timedout
+  };
+};
+
+// src/client/components/connected/ConnectAccountsStack.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var DefaultConnectComponent = (props) => /* @__PURE__ */ jsx2(ButtonEx, { variant: "contained", size: "small", ...props });
+var DefaultNoWalletInstalledComponent = () => /* @__PURE__ */ jsxs2(Alert, { severity: "warning", children: [
+  /* @__PURE__ */ jsx2(AlertTitle, { children: "XL1 Wallet Not Found" }),
+  /* @__PURE__ */ jsx2(Typography2, { gutterBottom: true, children: "Please ensure that your XL1 Wallet is installed to connect your account." }),
+  /* @__PURE__ */ jsx2(
+    Button,
+    {
+      sx: { display: "flex", justifySelf: "end" },
+      size: "small",
+      variant: "outlined",
+      href: "https://chromewebstore.google.com/detail/xl1-wallet/fblbagcjeigmhakkfgjpdlcapcgmcfbm",
+      target: "_blank",
+      rel: "noopener",
+      children: "Get XL1 Wallet"
+    }
+  )
+] });
+var ConnectAccountsStack = ({
+  AccountComponent = ConnectedAccount,
+  ConnectComponent = DefaultConnectComponent,
+  NoWalletInstalledComponent = DefaultNoWalletInstalledComponent,
+  onAccountConnected,
+  onCancel,
+  timeout,
+  ...props
+}) => {
+  const {
+    address,
+    connectSigner,
+    error,
+    timedout
+  } = useConnectAccount(void 0, timeout);
+  useEffect2(() => {
+    if (isDefined3(error) && isDefined3(onCancel)) {
+      onCancel();
+    }
+  }, [error, onCancel]);
+  useEffect2(() => {
+    if (isDefined3(address) && isDefined3(onAccountConnected)) {
+      onAccountConnected(address);
+    }
+  }, [address, onAccountConnected]);
+  return /* @__PURE__ */ jsxs2(Stack2, { direction: "row", alignItems: "start", spacing: 2, ...props, children: [
+    isDefined3(address) ? /* @__PURE__ */ jsx2(AccountComponent, { address }) : null,
+    isUndefined3(address) && !timedout ? /* @__PURE__ */ jsx2(ConnectComponent, { onClick: () => void connectSigner(), children: "Connect" }) : null,
+    isUndefined3(address) && timedout ? /* @__PURE__ */ jsx2(NoWalletInstalledComponent, {}) : null,
+    /* @__PURE__ */ jsx2(ErrorRender, { error, scope: "ConnectSigner:error" })
+  ] });
+};
+
+// src/client/context/GatewayContext.ts
+import { createContextEx } from "@xylabs/react-shared";
+var GatewayContext = createContextEx();
+
+// src/client/context/in-page/InPageGatewaysContext.ts
+import { createContextEx as createContextEx2 } from "@xylabs/react-shared";
+var InPageGatewaysContext = createContextEx2();
+
+// src/client/context/in-page/Provider.tsx
+import { DefaultNetworks as DefaultNetworks2 } from "@xyo-network/xl1-sdk";
+import {
+  startTransition,
+  useCallback as useCallback2,
+  useEffect as useEffect3,
+  useMemo,
+  useState as useState3
+} from "react";
+
+// src/client/context/in-page/lib/buildGateway.ts
+import { assertEx as assertEx2, isDefined as isDefined4 } from "@xylabs/sdk-js";
+import {
+  basicRemoteRunnerLocator,
+  basicRemoteViewerLocator,
+  DefaultNetworks,
+  NetworkDataLakeUrls,
+  XyoGatewayMoniker
+} from "@xyo-network/xl1-sdk";
+var buildGateway = async (gatewayName, signerTransport) => {
+  const network = DefaultNetworks.find((network2) => network2.id === gatewayName);
+  const resolvedNetwork = assertEx2(network, () => `No network found for id ${gatewayName}`);
+  const remoteConfig = {
+    rpc: {
+      protocol: "http",
+      url: `${resolvedNetwork.url}/rpc`
+    }
+  };
+  const dataLakeEndpoint = NetworkDataLakeUrls[gatewayName];
+  const locator = isDefined4(signerTransport) ? await basicRemoteRunnerLocator(gatewayName, remoteConfig, signerTransport, dataLakeEndpoint) : await basicRemoteViewerLocator(gatewayName, remoteConfig, dataLakeEndpoint);
+  return await locator.getInstance(XyoGatewayMoniker);
+};
+
+// src/client/context/in-page/Provider.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var InPageGatewaysProvider = ({ signerTransport, children }) => {
+  const [gateways, setGateways] = useState3({});
+  const [errors, setErrors] = useState3({});
+  const [previousSignerTransport, setPreviousSignerTransport] = useState3(signerTransport);
+  const clearAll = useCallback2(() => {
+    setGateways({});
+    setErrors({});
+  }, []);
+  if (previousSignerTransport !== signerTransport) {
+    clearAll();
+    setPreviousSignerTransport(signerTransport);
+  }
+  useEffect3(() => {
+    let cancelled = false;
+    const buildAll = async () => {
+      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));
+        }
+      }
+      startTransition(() => {
+        setGateways(nextGateways);
+        setErrors(nextErrors);
+      });
+    };
+    void buildAll();
+    return () => {
+      cancelled = true;
+    };
+  }, [signerTransport]);
+  const value = useMemo(() => {
+    const value2 = {
+      clearAll,
+      errors,
+      gateways,
+      provided: true
+    };
+    return value2;
+  }, [clearAll, errors, gateways]);
+  return /* @__PURE__ */ jsx3(InPageGatewaysContext, { value, children });
+};
+
+// src/client/context/in-page/useProvidedInPageGateways.ts
+import { useContextEx } from "@xylabs/react-shared";
+var useProvidedInPageGateways = (required = true) => useContextEx(InPageGatewaysContext, "InPageGateways", required);
+
+// src/client/context/providers/GatewayProvider.tsx
+import { ErrorRender as ErrorRender2 } from "@xylabs/react-error";
+import { isDefinedNotNull as isDefinedNotNull2, isNull as isNull2 } from "@xylabs/sdk-js";
+import { useMemo as useMemo2 } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var GatewayProvider = ({ gatewayName, children }) => {
+  const {
+    gateway: gatewayFromWallet,
+    error: gatewayFromWalletError
+  } = useGatewayFromWallet(gatewayName);
+  const {
+    gateways: allGateways,
+    errors: allGatewayErrors,
+    clearAll
+  } = useProvidedInPageGateways(true);
+  const gatewayFromConfig = gatewayName ? allGateways[gatewayName] : void 0;
+  const gatewayFromConfigError = gatewayName ? allGatewayErrors[gatewayName] : void 0;
+  const { defaultGateway, gateways } = useMemo2(() => {
+    if (isNull2(gatewayFromWallet)) {
+      return {
+        defaultGateway: gatewayFromConfig,
+        gateways: {
+          inPageGateway: gatewayFromConfig,
+          walletGateway: null
+        }
+      };
+    } else if (isDefinedNotNull2(gatewayFromWallet)) {
+      return {
+        defaultGateway: gatewayFromWallet,
+        gateways: {
+          inPageGateway: gatewayFromConfig,
+          walletGateway: gatewayFromWallet
+        }
+      };
+    }
+    return {
+      defaultGateway: void 0,
+      gateways: {
+        inPageGateway: void 0,
+        walletGateway: void 0
+      }
+    };
+  }, [gatewayFromConfig, gatewayFromWallet]);
+  const value = useMemo2(() => {
+    const value2 = {
+      defaultGateway,
+      error: gatewayFromWalletError ?? gatewayFromConfigError,
+      gateways,
+      provided: true,
+      resetGatewaysFromConfig: clearAll
+    };
+    return value2;
+  }, [
+    defaultGateway,
+    gatewayFromWalletError,
+    gatewayFromConfigError,
+    gateways,
+    clearAll
+  ]);
+  return /* @__PURE__ */ jsxs3(GatewayContext, { value, children: [
+    /* @__PURE__ */ jsx4(ErrorRender2, { error: gatewayFromConfigError }),
+    children
+  ] });
+};
+
+// src/client/context/providers/WalletGatewayProvider.tsx
+import { ErrorRender as ErrorRender3 } from "@xylabs/react-error";
+import { useMemo as useMemo3 } from "react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var WalletGatewayProvider = ({ gatewayName, children }) => {
+  const {
+    gateway: gatewayFromWallet,
+    error: gatewayFromWalletError
+  } = useGatewayFromWallet(gatewayName);
+  const { defaultGateway, gateways } = useMemo3(() => {
+    return {
+      defaultGateway: gatewayFromWallet,
+      gateways: {
+        inPageGateway: null,
+        walletGateway: gatewayFromWallet
+      }
+    };
+  }, [gatewayFromWallet]);
+  const value = useMemo3(() => {
+    const value2 = {
+      defaultGateway,
+      error: gatewayFromWalletError,
+      gateways,
+      provided: true
+    };
+    return value2;
+  }, [
+    defaultGateway,
+    gatewayFromWalletError,
+    gateways
+  ]);
+  return /* @__PURE__ */ jsxs4(GatewayContext, { value, children: [
+    /* @__PURE__ */ jsx5(ErrorRender3, { error: gatewayFromWalletError }),
+    children
+  ] });
+};
+
+// src/client/context/useProvidedGateway.ts
+import { useContextEx as useContextEx2 } from "@xylabs/react-shared";
+var useProvidedGateway = (required = true) => useContextEx2(GatewayContext, "Gateway", required);
+
+// src/model/types/XyoGlobal.ts
+import { isDefinedNotNull as isDefinedNotNull3, isObject } from "@xylabs/sdk-js";
+var isXyoGlobal = (obj) => {
+  return isDefinedNotNull3(obj) && isObject(obj) && "client" in obj && "connections" in obj && "errors" in obj && "sessionId" in obj && "walletExtensionId" in obj;
+};
+var isUninitializedXyoGlobal = (obj) => {
+  return isDefinedNotNull3(obj) && isObject(obj) && "connections" in obj && "sessionId" in obj && "walletExtensionId" in obj && !("client" in obj) && "errors" in obj && Array.isArray(obj.errors) && obj.errors.length === 0;
+};
+
+// src/shared/components/menu-item/ActiveMenuItem.tsx
+import {
+  MenuItem,
+  styled,
+  useTheme
+} from "@mui/material";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var ActiveMenuItem = ({
+  active,
+  children,
+  sx,
+  ...props
+}) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx6(
+    StyledMenuItem,
+    {
+      disableRipple: true,
+      sx: {
+        // 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",
+        // force white text color for active state for improved readability with background color
+        "color": active ? "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"
+        },
+        ...sx
+      },
+      ...props,
+      children
+    }
+  );
+};
+var StyledMenuItem = styled(MenuItem, { name: "StyledMenuItem" })(({ theme }) => ({
+  display: "flex-inline",
+  flexDirection: "row",
+  gap: theme.spacing(1),
+  padding: 0,
+  paddingLeft: theme.spacing(1),
+  marginBottom: theme.spacing(1)
+}));
+
+// src/shared/components/stack/DetailsStack.tsx
+import {
+  Stack as Stack3,
+  styled as styled2,
+  Tooltip as Tooltip2,
+  Typography as Typography3,
+  useTheme as useTheme2
+} from "@mui/material";
+import { isDefined as isDefined5 } from "@xylabs/sdk-js";
+import { useMemo as useMemo4 } from "react";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var isComponentType = (value) => typeof value === "function" || typeof value === "object" && value !== null && ("$$typeof" in value || "render" in value);
+var DetailsStack = ({
+  IconComponent,
+  heading,
+  children,
+  tooltipTitle,
+  ...props
+}) => {
+  const theme = useTheme2();
+  const hasTooltip = isDefined5(tooltipTitle);
+  const resolvedIconComponent = useMemo4(() => {
+    return isComponentType(IconComponent) ? /* @__PURE__ */ jsx7(
+      IconComponent,
+      {
+        style: {
+          /** height and marginTop adjusted to account for font not filling container with line-height: 1 */
+          height: "0.85rem",
+          marginTop: 0.5,
+          marginLeft: theme.spacing(1)
+        }
+      }
+    ) : IconComponent ?? null;
+  }, [IconComponent, theme]);
+  return /* @__PURE__ */ jsxs5(Stack3, { direction: "column", flexGrow: 1, flexWrap: "wrap", minWidth: "1px", ...props, children: [
+    /* @__PURE__ */ jsxs5(SectionHeadingTypography, { children: [
+      heading,
+      hasTooltip ? /* @__PURE__ */ jsx7(Tooltip2, { title: tooltipTitle, children: /* @__PURE__ */ jsx7("span", { children: resolvedIconComponent }) }) : resolvedIconComponent
+    ] }),
+    children
+  ] });
+};
+var SectionHeadingTypography = styled2(Typography3, { name: "SectionHeadingTypography" })(({ theme }) => ({
+  display: "flex",
+  fontFamily: "monospace",
+  lineHeight: 1,
+  marginBottom: theme.spacing(1.5)
+}));
+
+// src/shared/components/stack/LabelValueStack.tsx
+import {
+  Stack as Stack4,
+  Typography as Typography4,
+  useTheme as useTheme3
+} from "@mui/material";
+import { ellipsize, isAddress } from "@xylabs/sdk-js";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+var LabelValueStack = ({
+  labels,
+  values,
+  ...props
+}) => {
+  const theme = useTheme3();
+  const formattedValue = (value) => {
+    if (isAddress(value)) {
+      return ellipsize(value, 8);
+    }
+    return value;
+  };
+  return /* @__PURE__ */ jsxs6(Stack4, { flexDirection: "row", flexGrow: 1, ...props, children: [
+    /* @__PURE__ */ jsx8(Stack4, { children: labels.map((label) => /* @__PURE__ */ jsxs6(
+      Typography4,
+      {
+        fontWeight: "300",
+        variant: "body2",
+        sx: { borderBottom: `1px solid ${theme.vars?.palette.divider}`, opacity: 0.7 },
+        children: [
+          label,
+          ":"
+        ]
+      },
+      label
+    )) }),
+    /* @__PURE__ */ jsx8(Stack4, { alignItems: "end", flexGrow: 1, children: values.map((value, index) => /* @__PURE__ */ jsx8(
+      Typography4,
+      {
+        title: value,
+        fontFamily: "monospace",
+        variant: "body2",
+        width: "100%",
+        sx: {
+          display: "flex",
+          justifyContent: "end",
+          borderBottom: `1px solid ${theme.vars?.palette.divider}`
+        },
+        children: formattedValue(value)
+      },
+      labels[index]
+    )) })
+  ] });
+};
+
+// src/shared/decorators/IframeWalletWarningDecorator.tsx
+import { Alert as Alert2, Stack as Stack5 } from "@mui/material";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var inIframe = globalThis.self !== window.top;
+var IframeWalletWarningDecorator = (Story, args) => {
+  const hasXyoGlobal = isXyoGlobal(globalThis.xyo);
+  return /* @__PURE__ */ jsxs7(Stack5, { gap: 2, children: [
+    inIframe ? /* @__PURE__ */ jsx9(Alert2, { severity: "warning", children: "This story is running in an iframe. Please run it in a standalone browser window to test the wallet extension." }) : null,
+    hasXyoGlobal ? null : /* @__PURE__ */ jsx9(Alert2, { severity: "warning", children: "No wallet extension found. Please install the Xyo Wallet Chrome Extension." }),
+    /* @__PURE__ */ jsx9(Story, { ...args })
+  ] });
+};
+export {
+  ActiveMenuItem,
+  ConnectAccountsStack,
+  ConnectedAccount,
+  DetailsStack,
+  GatewayContext,
+  GatewayProvider,
+  IframeWalletWarningDecorator,
+  InPageGatewaysContext,
+  InPageGatewaysProvider,
+  LabelValueStack,
+  WalletGatewayProvider,
+  findCaveat,
+  getXyoClient,
+  isUninitializedXyoGlobal,
+  isXyoGlobal,
+  listenForClientInjection,
+  useAccountPermissions,
+  useClient,
+  useClientFromWallet,
+  useGateway,
+  useGatewayFromWallet,
+  usePermissions,
+  useProvidedGateway,
+  useProvidedInPageGateways
+};
+//# sourceMappingURL=index.mjs.map