@xyo-network/xl1-react-client-sdk 2.0.12 → 2.0.14

package/dist/browser/index.mjs

@@ -1655,6 +1655,163 @@ var DataLakeOperationsPanel = ({ timeout, ...props }) => {
   );
 };
 
+// src/client/components/connected/SignTransactionButton.tsx
+import {
+  Alert as Alert11,
+  Chip as Chip3,
+  Divider as Divider4,
+  Stack as Stack15,
+  Typography as Typography13
+} from "@mui/material";
+import { ButtonEx as ButtonEx10 } from "@xylabs/react-button";
+import { PopoverErrorRender as PopoverErrorRender2 } from "@xylabs/react-error";
+import {
+  assertEx as assertEx2,
+  isDefined as isDefined12,
+  isDefinedNotNull as isDefinedNotNull9
+} from "@xylabs/sdk-js";
+import { PayloadBuilder as PayloadBuilder2 } from "@xyo-network/sdk-js";
+import {
+  asXL1BlockNumber,
+  buildUnsignedTransaction,
+  HashSchema as HashSchema2,
+  SequenceNetwork as SequenceNetwork2
+} from "@xyo-network/xl1-sdk";
+import { useCallback as useCallback4, useState as useState13 } from "react";
+import { jsx as jsx15, jsxs as jsxs15 } from "react/jsx-runtime";
+var EMPTY_PAYLOADS = [];
+var SIGNER_PERMISSIONS = [
+  { xyoWallet_getAccounts: { restrictReturnedAccounts: [] } },
+  { xyoSigner_address: {} }
+];
+var SignTransactionButton = ({
+  anchorOnChain = true,
+  gatewayName = SequenceNetwork2.id,
+  privateReferencedPayloads = EMPTY_PAYLOADS,
+  referencedPayloads = EMPTY_PAYLOADS,
+  timeout,
+  ...props
+}) => {
+  const {
+    gateway,
+    error: gatewayError,
+    timedout
+  } = useGatewayFromWallet(gatewayName, timeout);
+  const [signing, setSigning] = useState13(false);
+  const [signError, setSignError] = useState13();
+  const [signedHash, setSignedHash] = useState13();
+  const signer = gateway?.signer;
+  const viewer = gateway?.connection?.viewer;
+  const canSign = isDefinedNotNull9(signer) && isDefinedNotNull9(viewer) && !signing;
+  const handleSign = useCallback4(async () => {
+    if (!isDefinedNotNull9(gateway)) return;
+    const resolvedSigner = assertEx2(gateway.signer, () => "No signer available on gateway");
+    const resolvedViewer = assertEx2(gateway.connection?.viewer, () => "No viewer available on gateway connection");
+    setSignError(void 0);
+    setSignedHash(void 0);
+    setSigning(true);
+    try {
+      const chain = await resolvedViewer.chainId();
+      const nbf = asXL1BlockNumber(await resolvedViewer.currentBlockNumber(), true);
+      const exp = asXL1BlockNumber(nbf + 10, true);
+      const from = await resolvedSigner.address();
+      const referencedHashes = await PayloadBuilder2.hashes(referencedPayloads);
+      const onChainPayloads = anchorOnChain && isDefined12(referencedHashes[0]) ? [{ schema: HashSchema2, hash: referencedHashes[0] }] : [];
+      let tx = await buildUnsignedTransaction(
+        chain,
+        onChainPayloads,
+        referencedPayloads,
+        nbf,
+        exp,
+        from
+      );
+      if (privateReferencedPayloads.length > 0) {
+        const privateHashes = await PayloadBuilder2.hashes(privateReferencedPayloads);
+        const [bw, payloads] = tx;
+        tx = [
+          {
+            ...bw,
+            payload_hashes: [...bw.payload_hashes, ...privateHashes],
+            payload_schemas: [...bw.payload_schemas, ...privateReferencedPayloads.map((payload) => payload.schema)]
+          },
+          payloads
+        ];
+      }
+      const [signedBoundWitness] = await resolvedSigner.signTransaction(tx);
+      setSignedHash(await PayloadBuilder2.hash(signedBoundWitness));
+    } catch (e) {
+      setSignError(e);
+    } finally {
+      setSigning(false);
+    }
+  }, [anchorOnChain, gateway, privateReferencedPayloads, referencedPayloads]);
+  return /* @__PURE__ */ jsxs15(
+    Stack15,
+    {
+      ...props,
+      sx: {
+        gap: 3,
+        alignItems: "stretch",
+        ...props.sx
+      },
+      children: [
+        timedout ? /* @__PURE__ */ jsx15(Alert11, { severity: "warning", children: "Wallet not detected." }) : null,
+        /* @__PURE__ */ jsxs15(Stack15, { sx: { gap: 1 }, children: [
+          /* @__PURE__ */ jsx15(Typography13, { variant: "subtitle2", children: "1. Grant signer + account access" }),
+          /* @__PURE__ */ jsx15(RequestPermissionsButton, { permissions: SIGNER_PERMISSIONS, timeout })
+        ] }),
+        /* @__PURE__ */ jsx15(Divider4, {}),
+        /* @__PURE__ */ jsxs15(Stack15, { sx: { gap: 1, alignItems: "start" }, children: [
+          /* @__PURE__ */ jsx15(Typography13, { variant: "subtitle2", children: "2. Sign the transaction" }),
+          /* @__PURE__ */ jsxs15(Typography13, { variant: "caption", sx: { color: "text.secondary" }, children: [
+            "Opens the wallet's Sign page with",
+            " ",
+            anchorOnChain ? "1 on-chain anchor, " : "no on-chain payloads, ",
+            referencedPayloads.length,
+            " ",
+            "referenced, and",
+            " ",
+            privateReferencedPayloads.length,
+            " ",
+            "private referenced payload",
+            privateReferencedPayloads.length === 1 ? "" : "s",
+            ". The signed transaction is returned here and not broadcast."
+          ] }),
+          /* @__PURE__ */ jsxs15(Stack15, { direction: "row", sx: { gap: 1, alignItems: "center" }, children: [
+            /* @__PURE__ */ jsx15(
+              ButtonEx10,
+              {
+                variant: "contained",
+                size: "small",
+                disabled: !canSign,
+                busy: signing,
+                onClick: () => void handleSign(),
+                children: "Sign transaction"
+              }
+            ),
+            /* @__PURE__ */ jsx15(PopoverErrorRender2, { error: gatewayError ?? signError, scope: "SignTransactionButton" })
+          ] }),
+          isDefined12(signedHash) ? /* @__PURE__ */ jsxs15(
+            Stack15,
+            {
+              direction: "row",
+              sx: {
+                alignItems: "center",
+                flexWrap: "wrap",
+                gap: 1
+              },
+              children: [
+                /* @__PURE__ */ jsx15(Chip3, { label: "Signed", size: "small", color: "success" }),
+                /* @__PURE__ */ jsx15(Typography13, { variant: "body2", sx: { fontFamily: "monospace", wordBreak: "break-all" }, children: signedHash })
+              ]
+            }
+          ) : null
+        ] })
+      ]
+    }
+  );
+};
+
 // src/client/context/GatewayContext.ts
 import { createContextEx } from "@xylabs/react-shared";
 var GatewayContext = createContextEx();
@@ -1667,14 +1824,14 @@ var InPageGatewaysContext = createContextEx2();
 import { DefaultNetworks as DefaultNetworks2 } from "@xyo-network/xl1-sdk";
 import {
   startTransition,
-  useCallback as useCallback4,
+  useCallback as useCallback5,
   useEffect as useEffect5,
   useMemo as useMemo5,
-  useState as useState13
+  useState as useState14
 } from "react";
 
 // src/client/context/in-page/lib/buildGateway.ts
-import { assertEx as assertEx2, isDefined as isDefined12 } from "@xylabs/sdk-js";
+import { assertEx as assertEx3, isDefined as isDefined13 } from "@xylabs/sdk-js";
 import {
   basicRemoteRunnerLocator,
   basicRemoteViewerLocator,
@@ -1683,24 +1840,24 @@ import {
 } 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 resolvedNetwork = assertEx3(network, () => `No network found for id ${gatewayName}`);
   const remoteConfig = {
     rpc: {
       protocol: "http",
       url: `${resolvedNetwork.url}/rpc`
     }
   };
-  const locator = isDefined12(signerTransport) ? await basicRemoteRunnerLocator(gatewayName, remoteConfig, signerTransport) : await basicRemoteViewerLocator(gatewayName, remoteConfig);
+  const locator = isDefined13(signerTransport) ? await basicRemoteRunnerLocator(gatewayName, remoteConfig, signerTransport) : await basicRemoteViewerLocator(gatewayName, remoteConfig);
   return await locator.getInstance(XyoGatewayMoniker);
 };
 
 // src/client/context/in-page/Provider.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var InPageGatewaysProvider = ({ signerTransport, children }) => {
-  const [gateways, setGateways] = useState13({});
-  const [errors, setErrors] = useState13({});
-  const [previousSignerTransport, setPreviousSignerTransport] = useState13(signerTransport);
-  const clearAll = useCallback4(() => {
+  const [gateways, setGateways] = useState14({});
+  const [errors, setErrors] = useState14({});
+  const [previousSignerTransport, setPreviousSignerTransport] = useState14(signerTransport);
+  const clearAll = useCallback5(() => {
     setGateways({});
     setErrors({});
   }, []);
@@ -1747,7 +1904,7 @@ var InPageGatewaysProvider = ({ signerTransport, children }) => {
     };
     return value2;
   }, [clearAll, errors, gateways]);
-  return /* @__PURE__ */ jsx15(InPageGatewaysContext, { value, children });
+  return /* @__PURE__ */ jsx16(InPageGatewaysContext, { value, children });
 };
 
 // src/client/context/in-page/useProvidedInPageGateways.ts
@@ -1756,9 +1913,9 @@ var useProvidedInPageGateways = (required = true) => useContextEx(InPageGateways
 
 // src/client/context/providers/GatewayProvider.tsx
 import { ErrorRender as ErrorRender9 } from "@xylabs/react-error";
-import { isDefinedNotNull as isDefinedNotNull9, isNull as isNull2 } from "@xylabs/sdk-js";
+import { isDefinedNotNull as isDefinedNotNull10, isNull as isNull2 } from "@xylabs/sdk-js";
 import { useMemo as useMemo6 } from "react";
-import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
 var GatewayProvider = ({ gatewayName, children }) => {
   const {
     gateway: gatewayFromWallet,
@@ -1780,7 +1937,7 @@ var GatewayProvider = ({ gatewayName, children }) => {
           walletGateway: null
         }
       };
-    } else if (isDefinedNotNull9(gatewayFromWallet)) {
+    } else if (isDefinedNotNull10(gatewayFromWallet)) {
       return {
         defaultGateway: gatewayFromWallet,
         gateways: {
@@ -1813,8 +1970,8 @@ var GatewayProvider = ({ gatewayName, children }) => {
     gateways,
     clearAll
   ]);
-  return /* @__PURE__ */ jsxs15(GatewayContext, { value, children: [
-    /* @__PURE__ */ jsx16(ErrorRender9, { error: gatewayFromConfigError }),
+  return /* @__PURE__ */ jsxs16(GatewayContext, { value, children: [
+    /* @__PURE__ */ jsx17(ErrorRender9, { error: gatewayFromConfigError }),
     children
   ] });
 };
@@ -1822,7 +1979,7 @@ var GatewayProvider = ({ gatewayName, children }) => {
 // src/client/context/providers/WalletGatewayProvider.tsx
 import { ErrorRender as ErrorRender10 } from "@xylabs/react-error";
 import { useMemo as useMemo7 } from "react";
-import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs17 } from "react/jsx-runtime";
 var WalletGatewayProvider = ({ gatewayName, children }) => {
   const {
     gateway: gatewayFromWallet,
@@ -1850,8 +2007,8 @@ var WalletGatewayProvider = ({ gatewayName, children }) => {
     gatewayFromWalletError,
     gateways
   ]);
-  return /* @__PURE__ */ jsxs16(GatewayContext, { value, children: [
-    /* @__PURE__ */ jsx17(ErrorRender10, { error: gatewayFromWalletError }),
+  return /* @__PURE__ */ jsxs17(GatewayContext, { value, children: [
+    /* @__PURE__ */ jsx18(ErrorRender10, { error: gatewayFromWalletError }),
     children
   ] });
 };
@@ -1861,17 +2018,17 @@ import { useContextEx as useContextEx2 } from "@xylabs/react-shared";
 var useProvidedGateway = (required = true) => useContextEx2(GatewayContext, "Gateway", required);
 
 // src/model/types/XyoGlobal.ts
-import { isDefinedNotNull as isDefinedNotNull10, isObject } from "@xylabs/sdk-js";
+import { isDefinedNotNull as isDefinedNotNull11, isObject } from "@xylabs/sdk-js";
 var isXyoGlobal = (obj) => {
-  return isDefinedNotNull10(obj) && isObject(obj) && "client" in obj && "connections" in obj && "errors" in obj && "sessionId" in obj && "walletExtensionId" in obj;
+  return isDefinedNotNull11(obj) && isObject(obj) && "client" in obj && "connections" in obj && "errors" in obj && "sessionId" in obj && "walletExtensionId" in obj;
 };
 var isUninitializedXyoGlobal = (obj) => {
-  return isDefinedNotNull10(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 isDefinedNotNull11(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 as MenuItem3, useTheme } from "@mui/material";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var ActiveMenuItem = ({
   active,
   children,
@@ -1879,7 +2036,7 @@ var ActiveMenuItem = ({
   ...props
 }) => {
   const theme = useTheme();
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     MenuItem3,
     {
       disableRipple: true,
@@ -1911,14 +2068,14 @@ var ActiveMenuItem = ({
 
 // src/shared/components/stack/DetailsStack.tsx
 import {
-  Stack as Stack15,
+  Stack as Stack16,
   Tooltip as Tooltip2,
-  Typography as Typography13,
+  Typography as Typography14,
   useTheme as useTheme2
 } from "@mui/material";
-import { isDefined as isDefined13 } from "@xylabs/sdk-js";
+import { isDefined as isDefined14 } from "@xylabs/sdk-js";
 import { useMemo as useMemo8 } from "react";
-import { jsx as jsx19, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
 var isComponentType = (value) => typeof value === "function" || typeof value === "object" && value !== null && ("$$typeof" in value || "render" in value);
 var DetailsStack = ({
   IconComponent,
@@ -1928,9 +2085,9 @@ var DetailsStack = ({
   ...props
 }) => {
   const theme = useTheme2();
-  const hasTooltip = isDefined13(tooltipTitle);
+  const hasTooltip = isDefined14(tooltipTitle);
   const resolvedIconComponent = useMemo8(() => {
-    return isComponentType(IconComponent) ? /* @__PURE__ */ jsx19(
+    return isComponentType(IconComponent) ? /* @__PURE__ */ jsx20(
       IconComponent,
       {
         style: {
@@ -1942,8 +2099,8 @@ var DetailsStack = ({
       }
     ) : IconComponent ?? null;
   }, [IconComponent, theme]);
-  return /* @__PURE__ */ jsxs17(
-    Stack15,
+  return /* @__PURE__ */ jsxs18(
+    Stack16,
     {
       direction: "column",
       ...props,
@@ -1954,8 +2111,8 @@ var DetailsStack = ({
         ...props.sx
       },
       children: [
-        /* @__PURE__ */ jsxs17(
-          Typography13,
+        /* @__PURE__ */ jsxs18(
+          Typography14,
           {
             sx: {
               display: "flex",
@@ -1965,7 +2122,7 @@ var DetailsStack = ({
             },
             children: [
               heading,
-              hasTooltip ? /* @__PURE__ */ jsx19(Tooltip2, { title: tooltipTitle, children: /* @__PURE__ */ jsx19("span", { children: resolvedIconComponent }) }) : resolvedIconComponent
+              hasTooltip ? /* @__PURE__ */ jsx20(Tooltip2, { title: tooltipTitle, children: /* @__PURE__ */ jsx20("span", { children: resolvedIconComponent }) }) : resolvedIconComponent
             ]
           }
         ),
@@ -1977,13 +2134,13 @@ var DetailsStack = ({
 
 // src/shared/components/stack/LabelValueStack.tsx
 import {
-  Stack as Stack16,
-  Typography as Typography14,
+  Stack as Stack17,
+  Typography as Typography15,
   useTheme as useTheme3
 } from "@mui/material";
 import { ellipsize } from "@xylabs/sdk-js";
 import { isXyoAddress } from "@xyo-network/address";
-import { jsx as jsx20, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
 var LabelValueStack = ({
   labels,
   values,
@@ -1996,8 +2153,8 @@ var LabelValueStack = ({
     }
     return value;
   };
-  return /* @__PURE__ */ jsxs18(
-    Stack16,
+  return /* @__PURE__ */ jsxs19(
+    Stack17,
     {
       ...props,
       sx: {
@@ -2006,8 +2163,8 @@ var LabelValueStack = ({
         ...props.sx
       },
       children: [
-        /* @__PURE__ */ jsx20(Stack16, { children: labels.map((label) => /* @__PURE__ */ jsxs18(
-          Typography14,
+        /* @__PURE__ */ jsx21(Stack17, { children: labels.map((label) => /* @__PURE__ */ jsxs19(
+          Typography15,
           {
             variant: "body2",
             sx: {
@@ -2022,15 +2179,15 @@ var LabelValueStack = ({
           },
           label
         )) }),
-        /* @__PURE__ */ jsx20(
-          Stack16,
+        /* @__PURE__ */ jsx21(
+          Stack17,
           {
             sx: {
               alignItems: "end",
               flexGrow: 1
             },
-            children: values.map((value, index) => /* @__PURE__ */ jsx20(
-              Typography14,
+            children: values.map((value, index) => /* @__PURE__ */ jsx21(
+              Typography15,
               {
                 title: value,
                 variant: "body2",
@@ -2053,15 +2210,15 @@ var LabelValueStack = ({
 };
 
 // src/shared/decorators/IframeWalletWarningDecorator.tsx
-import { Alert as Alert11, Stack as Stack17 } from "@mui/material";
-import { jsx as jsx21, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Alert as Alert12, Stack as Stack18 } from "@mui/material";
+import { jsx as jsx22, jsxs as jsxs20 } from "react/jsx-runtime";
 var inIframe = globalThis.self !== window.top;
 var IframeWalletWarningDecorator = (Story, args) => {
   const hasXyoGlobal = isXyoGlobal(globalThis.xyo);
-  return /* @__PURE__ */ jsxs19(Stack17, { sx: { gap: 2 }, children: [
-    inIframe ? /* @__PURE__ */ jsx21(Alert11, { 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__ */ jsx21(Alert11, { severity: "warning", children: "No wallet extension found. Please install the Xyo Wallet Chrome Extension." }),
-    /* @__PURE__ */ jsx21(Story, { ...args })
+  return /* @__PURE__ */ jsxs20(Stack18, { sx: { gap: 2 }, children: [
+    inIframe ? /* @__PURE__ */ jsx22(Alert12, { 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__ */ jsx22(Alert12, { severity: "warning", children: "No wallet extension found. Please install the Xyo Wallet Chrome Extension." }),
+    /* @__PURE__ */ jsx22(Story, { ...args })
   ] });
 };
 export {
@@ -2087,6 +2244,7 @@ export {
   LabelValueStack,
   PermissionsReviewDialog,
   RequestPermissionsButton,
+  SignTransactionButton,
   WalletGatewayProvider,
   findCaveat,
   getXyoClient,