@xyo-network/xl1-react-client-sdk 2.0.13 → 2.1.0

package/dist/browser/client/components/connected/SignTransactionButton.d.ts

@@ -0,0 +1,56 @@
+import type { StackProps } from '@mui/material';
+import type { Payload } from '@xyo-network/sdk-js';
+import type { GatewayName } from '@xyo-network/xl1-sdk';
+import React from 'react';
+export interface SignTransactionButtonProps extends StackProps {
+    /**
+     * When true (default), elevate a single `network.xyo.hash` payload on-chain
+     * that anchors the first referenced payload by hash. This populates the
+     * wallet's "On-Chain Payloads" section with a realistic anchor while the
+     * referenced content itself stays off-chain. When false, no payloads are
+     * elevated and the "On-Chain Payloads" section renders empty.
+     */
+    anchorOnChain?: boolean;
+    /** Gateway/network to build the transaction against. Defaults to `SequenceNetwork.id`. */
+    gatewayName?: GatewayName;
+    /**
+     * Payloads referenced by hash but NOT included with the transaction — only
+     * their hash + schema reach the wallet. Exercises the wallet's existing
+     * "Private Referenced Payloads" (hash + schema only) section. Defaults to none.
+     */
+    privateReferencedPayloads?: Payload[];
+    /**
+     * Payloads passed in full via the RPC request that are referenced (in the
+     * bound witness `payload_hashes`) but NOT elevated on-chain. Exercises the
+     * wallet's "Referenced Payloads" section — the full contents are shown
+     * because they ride along with the transaction even though they won't be
+     * stored on-chain. Defaults to none.
+     */
+    referencedPayloads?: Payload[];
+    /** Wallet-detection timeout, forwarded to the wallet hooks. */
+    timeout?: number;
+}
+/**
+ * Manual Storybook harness that drives the live XL1 Wallet's transaction-signing
+ * popup with caller-supplied payloads. It assembles an
+ * {@link UnsignedHydratedTransaction} from three independently-stubbed payload
+ * groups and calls `signer.signTransaction(tx)`, which opens the wallet's Sign
+ * page so its payload sections can be visually verified:
+ *
+ *  - **On-Chain Payloads** — `anchorOnChain` elevates a `network.xyo.hash`
+ *    payload that anchors `referencedPayloads[0]`.
+ *  - **Referenced Payloads** — `referencedPayloads` ride along in the
+ *    transaction's payload array (so the wallet has their full contents) but are
+ *    not marked elevated, so they won't be stored on-chain.
+ *  - **Private Referenced Payloads** — `privateReferencedPayloads` are appended
+ *    to the bound witness's `payload_hashes` / `payload_schemas` only; their
+ *    contents are withheld, so the wallet can show no more than hash + schema.
+ *
+ * Chain id, `nbf`, and `exp` are resolved from the gateway's viewer and `from`
+ * from the wallet signer, so the transaction is well-formed for the active
+ * account. The transaction is only signed, never broadcast — clicking Sign in
+ * the wallet returns the signed transaction here and renders its bound-witness
+ * hash; nothing is sent to the network.
+ */
+export declare const SignTransactionButton: React.FC<SignTransactionButtonProps>;
+//# sourceMappingURL=SignTransactionButton.d.ts.map

package/dist/browser/client/components/connected/SignTransactionButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignTransactionButton.d.ts","sourceRoot":"","sources":["../../../../../src/client/components/connected/SignTransactionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAS/C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAA;AAElD,OAAO,KAAK,EACV,WAAW,EACZ,MAAM,sBAAsB,CAAA;AAI7B,OAAO,KAAgC,MAAM,OAAO,CAAA;AAoBpD,MAAM,WAAW,0BAA2B,SAAQ,UAAU;IAC5D;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,0FAA0F;IAC1F,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB;;;;OAIG;IACH,yBAAyB,CAAC,EAAE,OAAO,EAAE,CAAA;IACrC;;;;;;OAMG;IACH,kBAAkB,CAAC,EAAE,OAAO,EAAE,CAAA;IAC9B,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CA4ItE,CAAA"}

package/dist/browser/client/components/connected/index.d.ts

@@ -13,4 +13,5 @@ export * from './DataLakeRequestAccessPanel.tsx';
 export * from './hooks/index.ts';
 export * from './PermissionsReviewDialog.tsx';
 export * from './RequestPermissionsButton.tsx';
+export * from './SignTransactionButton.tsx';
 //# sourceMappingURL=index.d.ts.map

package/dist/browser/client/components/connected/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/client/components/connected/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,2BAA2B,CAAA;AACzC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,mCAAmC,CAAA;AACjD,cAAc,kCAAkC,CAAA;AAChD,cAAc,kBAAkB,CAAA;AAChC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,gCAAgC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/client/components/connected/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA;AAClC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,4BAA4B,CAAA;AAC1C,cAAc,+BAA+B,CAAA;AAC7C,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,2BAA2B,CAAA;AACzC,cAAc,0BAA0B,CAAA;AACxC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,mCAAmC,CAAA;AACjD,cAAc,kCAAkC,CAAA;AAChD,cAAc,kBAAkB,CAAA;AAChC,cAAc,+BAA+B,CAAA;AAC7C,cAAc,gCAAgC,CAAA;AAC9C,cAAc,6BAA6B,CAAA"}

package/dist/browser/client/index.mjs

@@ -4,7 +4,7 @@ import {
   Tooltip,
   Typography
 } from "@mui/material";
-import { EthAddressWrapper } from "@xylabs/sdk-js";
+import { EthAddressWrapper } from "@xylabs/eth-address";
 import { BlockiesAvatarAddress } from "@xyo-network/xl1-blockies";
 import { jsx, jsxs } from "react/jsx-runtime";
 var ConnectedAccount = ({ address }) => {
@@ -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
   ] });
 };
@@ -1878,6 +2035,7 @@ export {
   InPageGatewaysProvider,
   PermissionsReviewDialog,
   RequestPermissionsButton,
+  SignTransactionButton,
   WalletGatewayProvider,
   findCaveat,
   getXyoClient,