@xyo-network/xl1-react-client-sdk 1.28.5 → 1.28.6

package/dist/browser/index.mjs

@@ -9,10 +9,28 @@ 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 }) })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    Stack,
+    {
+      direction: "row",
+      spacing: 1,
+      sx: { alignItems: "center" },
+      children: [
+        /* @__PURE__ */ jsx(BlockiesAvatarAddress, { address, size: 21 }),
+        /* @__PURE__ */ jsx(Tooltip, { title: address, children: /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "caption",
+            sx: {
+              color: "text.secondary",
+              fontFamily: "monospace"
+            },
+            children: shortenedAddress
+          }
+        ) })
+      ]
+    }
+  );
 };
 
 // src/client/components/connected/ConnectAccountsStack.tsx
@@ -309,12 +327,115 @@ var ConnectAccountsStack = ({
       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" })
-  ] });
+  return /* @__PURE__ */ jsxs2(
+    Stack2,
+    {
+      direction: "row",
+      spacing: 2,
+      ...props,
+      sx: { alignItems: "start", ...props.sx },
+      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/components/connected/RequestPermissionsButton.tsx
+import {
+  Alert as Alert2,
+  Stack as Stack3,
+  Typography as Typography3
+} from "@mui/material";
+import { ButtonEx as ButtonEx2 } from "@xylabs/react-button";
+import { ErrorRender as ErrorRender2 } from "@xylabs/react-error";
+import { isDefined as isDefined4, isDefinedNotNull as isDefinedNotNull2 } from "@xylabs/sdk-js";
+import { useState as useState3 } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var RequestPermissionsButton = ({
+  permissions,
+  timeout,
+  ...props
+}) => {
+  const {
+    client,
+    error: clientError,
+    isLoading,
+    timedout
+  } = useClientFromWallet(timeout);
+  const [acks, setAcks] = useState3();
+  const [requestError, setRequestError] = useState3();
+  const [requesting, setRequesting] = useState3(false);
+  const handleClick = async () => {
+    if (!isDefinedNotNull2(client)) return;
+    setRequestError(void 0);
+    setAcks(void 0);
+    setRequesting(true);
+    try {
+      const result = await client.permissions.requestPermissions(permissions);
+      setAcks(result);
+    } catch (e) {
+      setRequestError(e);
+    } finally {
+      setRequesting(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs3(
+    Stack3,
+    {
+      ...props,
+      sx: {
+        gap: 2,
+        alignItems: "start",
+        ...props.sx
+      },
+      children: [
+        timedout ? /* @__PURE__ */ jsx3(Alert2, { severity: "warning", children: "Wallet not detected." }) : null,
+        /* @__PURE__ */ jsxs3(
+          ButtonEx2,
+          {
+            variant: "contained",
+            size: "small",
+            disabled: !isDefinedNotNull2(client) || requesting,
+            busy: isLoading || requesting,
+            onClick: () => void handleClick(),
+            children: [
+              "Request",
+              " ",
+              permissions.length,
+              " ",
+              "permission",
+              permissions.length === 1 ? "" : "s"
+            ]
+          }
+        ),
+        isDefined4(acks) ? /* @__PURE__ */ jsxs3(Stack3, { sx: { gap: 0.5 }, children: [
+          /* @__PURE__ */ jsx3(Typography3, { variant: "subtitle2", children: "Granted:" }),
+          acks.map((ack) => /* @__PURE__ */ jsx3(
+            Typography3,
+            {
+              variant: "body2",
+              sx: { fontFamily: "monospace" },
+              children: ack.parentCapability
+            },
+            `${ack.parentCapability}`
+          )),
+          acks.length === 0 ? /* @__PURE__ */ jsx3(
+            Typography3,
+            {
+              variant: "body2",
+              sx: { color: "text.secondary" },
+              children: "(empty \u2014 wallet returned no acks)"
+            }
+          ) : null
+        ] }) : null,
+        /* @__PURE__ */ jsx3(ErrorRender2, { error: clientError ?? requestError, scope: "RequestPermissionsButton" })
+      ]
+    }
+  );
 };
 
 // src/client/context/GatewayContext.ts
@@ -332,11 +453,11 @@ import {
   useCallback as useCallback2,
   useEffect as useEffect3,
   useMemo,
-  useState as useState3
+  useState as useState4
 } from "react";
 
 // src/client/context/in-page/lib/buildGateway.ts
-import { assertEx as assertEx2, isDefined as isDefined4 } from "@xylabs/sdk-js";
+import { assertEx as assertEx2, isDefined as isDefined5 } from "@xylabs/sdk-js";
 import {
   basicRemoteRunnerLocator,
   basicRemoteViewerLocator,
@@ -354,16 +475,16 @@ var buildGateway = async (gatewayName, signerTransport) => {
     }
   };
   const dataLakeEndpoint = NetworkDataLakeUrls[gatewayName];
-  const locator = isDefined4(signerTransport) ? await basicRemoteRunnerLocator(gatewayName, remoteConfig, signerTransport, dataLakeEndpoint) : await basicRemoteViewerLocator(gatewayName, remoteConfig, dataLakeEndpoint);
+  const locator = isDefined5(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";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var InPageGatewaysProvider = ({ signerTransport, children }) => {
-  const [gateways, setGateways] = useState3({});
-  const [errors, setErrors] = useState3({});
-  const [previousSignerTransport, setPreviousSignerTransport] = useState3(signerTransport);
+  const [gateways, setGateways] = useState4({});
+  const [errors, setErrors] = useState4({});
+  const [previousSignerTransport, setPreviousSignerTransport] = useState4(signerTransport);
   const clearAll = useCallback2(() => {
     setGateways({});
     setErrors({});
@@ -411,7 +532,7 @@ var InPageGatewaysProvider = ({ signerTransport, children }) => {
     };
     return value2;
   }, [clearAll, errors, gateways]);
-  return /* @__PURE__ */ jsx3(InPageGatewaysContext, { value, children });
+  return /* @__PURE__ */ jsx4(InPageGatewaysContext, { value, children });
 };
 
 // src/client/context/in-page/useProvidedInPageGateways.ts
@@ -419,10 +540,10 @@ 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 { ErrorRender as ErrorRender3 } from "@xylabs/react-error";
+import { isDefinedNotNull as isDefinedNotNull3, isNull as isNull2 } from "@xylabs/sdk-js";
 import { useMemo as useMemo2 } from "react";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var GatewayProvider = ({ gatewayName, children }) => {
   const {
     gateway: gatewayFromWallet,
@@ -444,7 +565,7 @@ var GatewayProvider = ({ gatewayName, children }) => {
           walletGateway: null
         }
       };
-    } else if (isDefinedNotNull2(gatewayFromWallet)) {
+    } else if (isDefinedNotNull3(gatewayFromWallet)) {
       return {
         defaultGateway: gatewayFromWallet,
         gateways: {
@@ -477,16 +598,16 @@ var GatewayProvider = ({ gatewayName, children }) => {
     gateways,
     clearAll
   ]);
-  return /* @__PURE__ */ jsxs3(GatewayContext, { value, children: [
-    /* @__PURE__ */ jsx4(ErrorRender2, { error: gatewayFromConfigError }),
+  return /* @__PURE__ */ jsxs4(GatewayContext, { value, children: [
+    /* @__PURE__ */ jsx5(ErrorRender3, { error: gatewayFromConfigError }),
     children
   ] });
 };
 
 // src/client/context/providers/WalletGatewayProvider.tsx
-import { ErrorRender as ErrorRender3 } from "@xylabs/react-error";
+import { ErrorRender as ErrorRender4 } from "@xylabs/react-error";
 import { useMemo as useMemo3 } from "react";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var WalletGatewayProvider = ({ gatewayName, children }) => {
   const {
     gateway: gatewayFromWallet,
@@ -514,8 +635,8 @@ var WalletGatewayProvider = ({ gatewayName, children }) => {
     gatewayFromWalletError,
     gateways
   ]);
-  return /* @__PURE__ */ jsxs4(GatewayContext, { value, children: [
-    /* @__PURE__ */ jsx5(ErrorRender3, { error: gatewayFromWalletError }),
+  return /* @__PURE__ */ jsxs5(GatewayContext, { value, children: [
+    /* @__PURE__ */ jsx6(ErrorRender4, { error: gatewayFromWalletError }),
     children
   ] });
 };
@@ -525,12 +646,12 @@ 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";
+import { isDefinedNotNull as isDefinedNotNull4, 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;
+  return isDefinedNotNull4(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;
+  return isDefinedNotNull4(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
@@ -539,7 +660,7 @@ import {
   styled,
   useTheme
 } from "@mui/material";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var ActiveMenuItem = ({
   active,
   children,
@@ -547,7 +668,7 @@ var ActiveMenuItem = ({
   ...props
 }) => {
   const theme = useTheme();
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     StyledMenuItem,
     {
       disableRipple: true,
@@ -581,15 +702,15 @@ var StyledMenuItem = styled(MenuItem, { name: "StyledMenuItem" })(({ theme }) =>
 
 // src/shared/components/stack/DetailsStack.tsx
 import {
-  Stack as Stack3,
+  Stack as Stack4,
   styled as styled2,
   Tooltip as Tooltip2,
-  Typography as Typography3,
+  Typography as Typography4,
   useTheme as useTheme2
 } from "@mui/material";
-import { isDefined as isDefined5 } from "@xylabs/sdk-js";
+import { isDefined as isDefined6 } from "@xylabs/sdk-js";
 import { useMemo as useMemo4 } from "react";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var isComponentType = (value) => typeof value === "function" || typeof value === "object" && value !== null && ("$$typeof" in value || "render" in value);
 var DetailsStack = ({
   IconComponent,
@@ -599,9 +720,9 @@ var DetailsStack = ({
   ...props
 }) => {
   const theme = useTheme2();
-  const hasTooltip = isDefined5(tooltipTitle);
+  const hasTooltip = isDefined6(tooltipTitle);
   const resolvedIconComponent = useMemo4(() => {
-    return isComponentType(IconComponent) ? /* @__PURE__ */ jsx7(
+    return isComponentType(IconComponent) ? /* @__PURE__ */ jsx8(
       IconComponent,
       {
         style: {
@@ -613,15 +734,28 @@ var DetailsStack = ({
       }
     ) : 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
-  ] });
+  return /* @__PURE__ */ jsxs6(
+    Stack4,
+    {
+      direction: "column",
+      ...props,
+      sx: {
+        flexGrow: 1,
+        flexWrap: "wrap",
+        minWidth: "1px",
+        ...props.sx
+      },
+      children: [
+        /* @__PURE__ */ jsxs6(SectionHeadingTypography, { children: [
+          heading,
+          hasTooltip ? /* @__PURE__ */ jsx8(Tooltip2, { title: tooltipTitle, children: /* @__PURE__ */ jsx8("span", { children: resolvedIconComponent }) }) : resolvedIconComponent
+        ] }),
+        children
+      ]
+    }
+  );
 };
-var SectionHeadingTypography = styled2(Typography3, { name: "SectionHeadingTypography" })(({ theme }) => ({
+var SectionHeadingTypography = styled2(Typography4, { name: "SectionHeadingTypography" })(({ theme }) => ({
   display: "flex",
   fontFamily: "monospace",
   lineHeight: 1,
@@ -630,12 +764,12 @@ var SectionHeadingTypography = styled2(Typography3, { name: "SectionHeadingTypog
 
 // src/shared/components/stack/LabelValueStack.tsx
 import {
-  Stack as Stack4,
-  Typography as Typography4,
+  Stack as Stack5,
+  Typography as Typography5,
   useTheme as useTheme3
 } from "@mui/material";
 import { ellipsize, isAddress } from "@xylabs/sdk-js";
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var LabelValueStack = ({
   labels,
   values,
@@ -648,49 +782,72 @@ var LabelValueStack = ({
     }
     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)
+  return /* @__PURE__ */ jsxs7(
+    Stack5,
+    {
+      ...props,
+      sx: {
+        flexDirection: "row",
+        flexGrow: 1,
+        ...props.sx
       },
-      labels[index]
-    )) })
-  ] });
+      children: [
+        /* @__PURE__ */ jsx9(Stack5, { children: labels.map((label) => /* @__PURE__ */ jsxs7(
+          Typography5,
+          {
+            variant: "body2",
+            sx: {
+              fontWeight: "300",
+              borderBottom: `1px solid ${theme.vars?.palette.divider}`,
+              opacity: 0.7
+            },
+            children: [
+              label,
+              ":"
+            ]
+          },
+          label
+        )) }),
+        /* @__PURE__ */ jsx9(
+          Stack5,
+          {
+            sx: {
+              alignItems: "end",
+              flexGrow: 1
+            },
+            children: values.map((value, index) => /* @__PURE__ */ jsx9(
+              Typography5,
+              {
+                title: value,
+                variant: "body2",
+                sx: {
+                  fontFamily: "monospace",
+                  width: "100%",
+                  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";
+import { Alert as Alert3, Stack as Stack6 } from "@mui/material";
+import { jsx as jsx10, jsxs as jsxs8 } 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 })
+  return /* @__PURE__ */ jsxs8(Stack6, { sx: { gap: 2 }, children: [
+    inIframe ? /* @__PURE__ */ jsx10(Alert3, { 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__ */ jsx10(Alert3, { severity: "warning", children: "No wallet extension found. Please install the Xyo Wallet Chrome Extension." }),
+    /* @__PURE__ */ jsx10(Story, { ...args })
   ] });
 };
 export {
@@ -704,6 +861,7 @@ export {
   InPageGatewaysContext,
   InPageGatewaysProvider,
   LabelValueStack,
+  RequestPermissionsButton,
   WalletGatewayProvider,
   findCaveat,
   getXyoClient,