@xyo-network/xl1-react-client-sdk 1.30.0 → 1.30.2

package/dist/browser/client/index.mjs

@@ -33,24 +33,24 @@ var ConnectedAccount = ({ address }) => {
   );
 };
 
-// src/client/components/connected/ConnectAccountsStack.tsx
+// src/client/components/connected/ApprovedLakeSelector.tsx
 import {
   Alert,
-  AlertTitle,
-  Button,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
   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";
+import { isDefined as isDefined3, isDefinedNotNull as isDefinedNotNull2 } from "@xylabs/sdk-js";
+import {
+  useCallback,
+  useEffect as useEffect2,
+  useState as useState2
+} from "react";
 
 // src/client/hooks/client/helpers/findCaveat.ts
 import { isDefined } from "@xylabs/sdk-js";
@@ -252,17 +252,130 @@ var useGatewayFromWallet = (gatewayName, timeout) => {
 };
 var useGateway = useGatewayFromWallet;
 
+// src/client/components/connected/ApprovedLakeSelector.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ApprovedLakeSelector = ({
+  selectedId,
+  onChange,
+  capability,
+  timeout,
+  label = "Approved data lake"
+}) => {
+  const {
+    client,
+    error: clientError,
+    isLoading,
+    timedout
+  } = useClientFromWallet(timeout);
+  const [lakes, setLakes] = useState2();
+  const [fetchError, setFetchError] = useState2();
+  const [refreshing, setRefreshing] = useState2(false);
+  const dataLakes = client?.dataLakes;
+  const supported = isDefinedNotNull2(dataLakes);
+  const refresh = useCallback(async () => {
+    if (!isDefinedNotNull2(dataLakes)) return;
+    setFetchError(void 0);
+    setRefreshing(true);
+    try {
+      const result = await dataLakes.list();
+      setLakes(result);
+    } catch (e) {
+      setFetchError(e);
+    } finally {
+      setRefreshing(false);
+    }
+  }, [dataLakes]);
+  useEffect2(() => {
+    if (supported && lakes === void 0 && !refreshing) {
+      void refresh();
+    }
+  }, [supported, lakes, refreshing, refresh]);
+  const filtered = (lakes ?? []).filter((lake) => lake.capabilities.includes(capability));
+  return /* @__PURE__ */ jsxs2(Stack2, { sx: { gap: 1, width: "100%" }, children: [
+    timedout ? /* @__PURE__ */ jsx2(Alert, { severity: "warning", children: "Wallet not detected." }) : null,
+    isDefinedNotNull2(client) && !supported ? /* @__PURE__ */ jsx2(Alert, { severity: "warning", children: "This wallet does not expose `xyo.client.dataLakes`." }) : null,
+    isDefined3(lakes) && filtered.length === 0 ? /* @__PURE__ */ jsxs2(Alert, { severity: "info", children: [
+      "No approved lakes with",
+      " ",
+      /* @__PURE__ */ jsx2("strong", { children: capability }),
+      " ",
+      "access. Run RequestAccess first."
+    ] }) : null,
+    /* @__PURE__ */ jsxs2(FormControl, { size: "small", fullWidth: true, disabled: !supported || filtered.length === 0, children: [
+      /* @__PURE__ */ jsx2(InputLabel, { children: label }),
+      /* @__PURE__ */ jsx2(
+        Select,
+        {
+          value: selectedId,
+          label,
+          onChange: (event) => onChange(event.target.value),
+          children: filtered.map((lake) => /* @__PURE__ */ jsx2(MenuItem, { value: lake.id, children: /* @__PURE__ */ jsxs2(Stack2, { sx: { gap: 0.25, py: 0.5 }, children: [
+            /* @__PURE__ */ jsx2(Typography2, { variant: "body2", sx: { fontFamily: "monospace", wordBreak: "break-all" }, children: lake.id }),
+            /* @__PURE__ */ jsx2(Typography2, { variant: "caption", sx: { color: "text.secondary" }, children: lake.capabilities.join(" + ") })
+          ] }) }, lake.id))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs2(Stack2, { direction: "row", sx: { gap: 1 }, children: [
+      /* @__PURE__ */ jsx2(
+        ButtonEx,
+        {
+          variant: "outlined",
+          size: "small",
+          disabled: !supported || refreshing,
+          busy: isLoading || refreshing,
+          onClick: () => void refresh(),
+          children: "Refresh"
+        }
+      ),
+      isDefined3(lakes) ? /* @__PURE__ */ jsxs2(Typography2, { variant: "caption", sx: { color: "text.secondary", alignSelf: "center" }, children: [
+        lakes.length,
+        " ",
+        "approved",
+        " ",
+        "\xB7",
+        " ",
+        filtered.length,
+        " ",
+        "with",
+        " ",
+        capability,
+        " ",
+        "access"
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsx2(ErrorRender, { error: clientError ?? fetchError, scope: "ApprovedLakeSelector" })
+  ] });
+};
+
+// src/client/components/connected/ConnectAccountsStack.tsx
+import {
+  Alert as Alert2,
+  AlertTitle,
+  Button,
+  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, isUndefined as isUndefined3 } from "@xylabs/sdk-js";
+import { useEffect as useEffect3 } 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 as useCallback2, useState as useState3 } from "react";
 var useConnectAccount = (gatewayName = MainNetwork.id, timeout) => {
-  const [connectError, setConnectError] = useState2();
+  const [connectError, setConnectError] = useState3();
   const {
     gateway,
     error,
     timedout
   } = useGatewayFromWallet(gatewayName, timeout);
   const [accountPermissions, accountPermissionsError] = useAccountPermissions();
-  const [address, setAddress] = useState2();
-  const connectSigner = useCallback(async () => {
+  const [address, setAddress] = useState3();
+  const connectSigner = useCallback2(async () => {
     try {
       setConnectError(void 0);
       const assertedGateway = assertEx(gateway, () => `Gateway ${gatewayName} is not available`);
@@ -284,12 +397,12 @@ var useConnectAccount = (gatewayName = MainNetwork.id, timeout) => {
 };
 
 // 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(
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var DefaultConnectComponent = (props) => /* @__PURE__ */ jsx3(ButtonEx2, { variant: "contained", size: "small", ...props });
+var DefaultNoWalletInstalledComponent = () => /* @__PURE__ */ jsxs3(Alert2, { severity: "warning", children: [
+  /* @__PURE__ */ jsx3(AlertTitle, { children: "XL1 Wallet Not Found" }),
+  /* @__PURE__ */ jsx3(Typography3, { gutterBottom: true, children: "Please ensure that your XL1 Wallet is installed to connect your account." }),
+  /* @__PURE__ */ jsx3(
     Button,
     {
       sx: { display: "flex", justifySelf: "end" },
@@ -317,28 +430,560 @@ var ConnectAccountsStack = ({
     error,
     timedout
   } = useConnectAccount(void 0, timeout);
-  useEffect2(() => {
-    if (isDefined3(error) && isDefined3(onCancel)) {
+  useEffect3(() => {
+    if (isDefined4(error) && isDefined4(onCancel)) {
       onCancel();
     }
   }, [error, onCancel]);
-  useEffect2(() => {
-    if (isDefined3(address) && isDefined3(onAccountConnected)) {
+  useEffect3(() => {
+    if (isDefined4(address) && isDefined4(onAccountConnected)) {
       onAccountConnected(address);
     }
   }, [address, onAccountConnected]);
-  return /* @__PURE__ */ jsxs2(
-    Stack2,
+  return /* @__PURE__ */ jsxs3(
+    Stack3,
     {
       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" })
+        isDefined4(address) ? /* @__PURE__ */ jsx3(AccountComponent, { address }) : null,
+        isUndefined3(address) && !timedout ? /* @__PURE__ */ jsx3(ConnectComponent, { onClick: () => void connectSigner(), children: "Connect" }) : null,
+        isUndefined3(address) && timedout ? /* @__PURE__ */ jsx3(NoWalletInstalledComponent, {}) : null,
+        /* @__PURE__ */ jsx3(ErrorRender2, { error, scope: "ConnectSigner:error" })
+      ]
+    }
+  );
+};
+
+// src/client/components/connected/DataLakeGetButton.tsx
+import {
+  Alert as Alert3,
+  Stack as Stack4,
+  Typography as Typography4
+} from "@mui/material";
+import { ButtonEx as ButtonEx3 } from "@xylabs/react-button";
+import { ErrorRender as ErrorRender3 } from "@xylabs/react-error";
+import { isDefined as isDefined5, isDefinedNotNull as isDefinedNotNull3 } from "@xylabs/sdk-js";
+import { useState as useState4 } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var DataLakeGetButton = ({
+  id,
+  hashes,
+  timeout,
+  ...props
+}) => {
+  const {
+    client,
+    error: clientError,
+    isLoading,
+    timedout
+  } = useClientFromWallet(timeout);
+  const [result, setResult] = useState4();
+  const [requestError, setRequestError] = useState4();
+  const [requesting, setRequesting] = useState4(false);
+  const dataLakes = client?.dataLakes;
+  const supported = isDefinedNotNull3(dataLakes);
+  const argsReady = id.length > 0 && hashes.length > 0;
+  const handleClick = async () => {
+    if (!isDefinedNotNull3(dataLakes)) return;
+    setRequestError(void 0);
+    setResult(void 0);
+    setRequesting(true);
+    try {
+      const payloads = await dataLakes.get(id, hashes);
+      setResult(payloads);
+    } catch (e) {
+      setRequestError(e);
+    } finally {
+      setRequesting(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs4(
+    Stack4,
+    {
+      ...props,
+      sx: {
+        gap: 2,
+        alignItems: "start",
+        ...props.sx
+      },
+      children: [
+        timedout ? /* @__PURE__ */ jsx4(Alert3, { severity: "warning", children: "Wallet not detected." }) : null,
+        isDefinedNotNull3(client) && !supported ? /* @__PURE__ */ jsx4(Alert3, { severity: "warning", children: "This wallet does not expose `xyo.client.dataLakes`." }) : null,
+        /* @__PURE__ */ jsxs4(
+          ButtonEx3,
+          {
+            variant: "contained",
+            size: "small",
+            disabled: !supported || !argsReady || requesting,
+            busy: isLoading || requesting,
+            onClick: () => void handleClick(),
+            children: [
+              "Get",
+              " ",
+              hashes.length,
+              " ",
+              "hash",
+              hashes.length === 1 ? "" : "es"
+            ]
+          }
+        ),
+        argsReady ? null : /* @__PURE__ */ jsx4(Typography4, { variant: "caption", sx: { color: "text.secondary" }, children: "Provide a per-origin `id` and at least one hash to enable the button." }),
+        isDefined5(result) ? /* @__PURE__ */ jsxs4(Stack4, { sx: { gap: 0.5 }, children: [
+          /* @__PURE__ */ jsx4(Typography4, { variant: "subtitle2", children: result.length === 0 ? "No payloads returned" : `Payloads (${result.length})` }),
+          /* @__PURE__ */ jsx4(
+            Typography4,
+            {
+              component: "pre",
+              variant: "body2",
+              sx: {
+                fontFamily: "monospace",
+                whiteSpace: "pre-wrap",
+                wordBreak: "break-all"
+              },
+              children: JSON.stringify(result, null, 2)
+            }
+          )
+        ] }) : null,
+        /* @__PURE__ */ jsx4(ErrorRender3, { error: clientError ?? requestError, scope: "DataLakeGetButton" })
+      ]
+    }
+  );
+};
+
+// src/client/components/connected/DataLakeGetPanel.tsx
+import {
+  Stack as Stack5,
+  TextField,
+  Typography as Typography5
+} from "@mui/material";
+import { useMemo, useState as useState5 } from "react";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var DataLakeGetPanel = ({ timeout, ...props }) => {
+  const [selectedId, setSelectedId] = useState5("");
+  const [hashesText, setHashesText] = useState5("");
+  const hashes = useMemo(() => {
+    return hashesText.split("\n").map((line) => line.trim()).filter((line) => line.length > 0);
+  }, [hashesText]);
+  return /* @__PURE__ */ jsxs5(
+    Stack5,
+    {
+      ...props,
+      sx: {
+        gap: 2,
+        alignItems: "stretch",
+        ...props.sx
+      },
+      children: [
+        /* @__PURE__ */ jsx5(
+          ApprovedLakeSelector,
+          {
+            capability: "viewer",
+            selectedId,
+            onChange: setSelectedId,
+            timeout
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          TextField,
+          {
+            label: "Hashes (one per line)",
+            value: hashesText,
+            onChange: (e) => setHashesText(e.target.value),
+            multiline: true,
+            minRows: 3,
+            maxRows: 10,
+            size: "small",
+            slotProps: { input: { sx: { fontFamily: "monospace", fontSize: 12 } } }
+          }
+        ),
+        /* @__PURE__ */ jsx5(Typography5, { variant: "caption", sx: { color: "text.secondary" }, children: hashes.length === 0 ? "No hashes parsed." : `${hashes.length} hash${hashes.length === 1 ? "" : "es"} ready.` }),
+        /* @__PURE__ */ jsx5(DataLakeGetButton, { id: selectedId, hashes, timeout })
+      ]
+    }
+  );
+};
+
+// src/client/components/connected/DataLakeInsertButton.tsx
+import {
+  Alert as Alert4,
+  Stack as Stack6,
+  Typography as Typography6
+} from "@mui/material";
+import { ButtonEx as ButtonEx4 } from "@xylabs/react-button";
+import { ErrorRender as ErrorRender4 } from "@xylabs/react-error";
+import { isDefined as isDefined6, isDefinedNotNull as isDefinedNotNull4 } from "@xylabs/sdk-js";
+import { useState as useState6 } from "react";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var DataLakeInsertButton = ({
+  id,
+  payloads,
+  timeout,
+  ...props
+}) => {
+  const {
+    client,
+    error: clientError,
+    isLoading,
+    timedout
+  } = useClientFromWallet(timeout);
+  const [result, setResult] = useState6();
+  const [requestError, setRequestError] = useState6();
+  const [requesting, setRequesting] = useState6(false);
+  const dataLakes = client?.dataLakes;
+  const supported = isDefinedNotNull4(dataLakes);
+  const argsReady = id.length > 0 && payloads.length > 0;
+  const handleClick = async () => {
+    if (!isDefinedNotNull4(dataLakes)) return;
+    setRequestError(void 0);
+    setResult(void 0);
+    setRequesting(true);
+    try {
+      const acks = await dataLakes.insert(id, payloads);
+      setResult(acks);
+    } catch (e) {
+      setRequestError(e);
+    } finally {
+      setRequesting(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs6(
+    Stack6,
+    {
+      ...props,
+      sx: {
+        gap: 2,
+        alignItems: "start",
+        ...props.sx
+      },
+      children: [
+        timedout ? /* @__PURE__ */ jsx6(Alert4, { severity: "warning", children: "Wallet not detected." }) : null,
+        isDefinedNotNull4(client) && !supported ? /* @__PURE__ */ jsx6(Alert4, { severity: "warning", children: "This wallet does not expose `xyo.client.dataLakes`." }) : null,
+        /* @__PURE__ */ jsxs6(
+          ButtonEx4,
+          {
+            variant: "contained",
+            size: "small",
+            disabled: !supported || !argsReady || requesting,
+            busy: isLoading || requesting,
+            onClick: () => void handleClick(),
+            children: [
+              "Insert",
+              " ",
+              payloads.length,
+              " ",
+              "payload",
+              payloads.length === 1 ? "" : "s"
+            ]
+          }
+        ),
+        argsReady ? null : /* @__PURE__ */ jsx6(Typography6, { variant: "caption", sx: { color: "text.secondary" }, children: "Provide a per-origin `id` and at least one payload to enable the button." }),
+        isDefined6(result) ? /* @__PURE__ */ jsxs6(Stack6, { sx: { gap: 0.5 }, children: [
+          /* @__PURE__ */ jsx6(Typography6, { variant: "subtitle2", children: result.length === 0 ? "No payloads written (wallet filtered all)" : `Inserted (${result.length})` }),
+          /* @__PURE__ */ jsx6(
+            Typography6,
+            {
+              component: "pre",
+              variant: "body2",
+              sx: {
+                fontFamily: "monospace",
+                whiteSpace: "pre-wrap",
+                wordBreak: "break-all"
+              },
+              children: JSON.stringify(result, null, 2)
+            }
+          )
+        ] }) : null,
+        /* @__PURE__ */ jsx6(ErrorRender4, { error: clientError ?? requestError, scope: "DataLakeInsertButton" })
+      ]
+    }
+  );
+};
+
+// src/client/components/connected/DataLakeInsertPanel.tsx
+import {
+  Alert as Alert5,
+  Stack as Stack7,
+  TextField as TextField2,
+  Typography as Typography7
+} from "@mui/material";
+import { useMemo as useMemo2, useState as useState7 } from "react";
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+function buildDefaultPayload() {
+  return JSON.stringify(
+    {
+      schema: "network.xyo.observation.v2",
+      value: 1,
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    },
+    null,
+    2
+  );
+}
+function parsePayload(raw) {
+  const trimmed = raw.trim();
+  if (trimmed.length === 0) return { ok: false, error: "Payload is empty." };
+  try {
+    const parsed = JSON.parse(trimmed);
+    if (Array.isArray(parsed)) return { ok: true, payloads: parsed };
+    if (parsed !== null && typeof parsed === "object") return { ok: true, payloads: [parsed] };
+    return { ok: false, error: "Payload must be a JSON object or array of objects." };
+  } catch (e) {
+    return { ok: false, error: `Invalid JSON: ${e.message}` };
+  }
+}
+var DataLakeInsertPanel = ({ timeout, ...props }) => {
+  const [selectedId, setSelectedId] = useState7("");
+  const [payloadText, setPayloadText] = useState7(buildDefaultPayload);
+  const parse = useMemo2(() => parsePayload(payloadText), [payloadText]);
+  return /* @__PURE__ */ jsxs7(
+    Stack7,
+    {
+      ...props,
+      sx: {
+        gap: 2,
+        alignItems: "stretch",
+        ...props.sx
+      },
+      children: [
+        /* @__PURE__ */ jsx7(
+          ApprovedLakeSelector,
+          {
+            capability: "runner",
+            selectedId,
+            onChange: setSelectedId,
+            timeout
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          TextField2,
+          {
+            label: "Payload (JSON object or array)",
+            value: payloadText,
+            onChange: (e) => setPayloadText(e.target.value),
+            multiline: true,
+            minRows: 6,
+            maxRows: 16,
+            size: "small",
+            slotProps: { input: { sx: { fontFamily: "monospace", fontSize: 12 } } }
+          }
+        ),
+        parse.ok ? /* @__PURE__ */ jsxs7(Typography7, { variant: "caption", sx: { color: "text.secondary" }, children: [
+          parse.payloads.length,
+          " ",
+          "payload",
+          parse.payloads.length === 1 ? "" : "s",
+          " ",
+          "parsed."
+        ] }) : /* @__PURE__ */ jsx7(Alert5, { severity: "error", variant: "outlined", children: /* @__PURE__ */ jsx7(Typography7, { variant: "body2", children: parse.error }) }),
+        /* @__PURE__ */ jsx7(
+          DataLakeInsertButton,
+          {
+            id: selectedId,
+            payloads: parse.ok ? parse.payloads : [],
+            timeout
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/client/components/connected/DataLakeListButton.tsx
+import {
+  Alert as Alert6,
+  Stack as Stack8,
+  Typography as Typography8
+} from "@mui/material";
+import { ButtonEx as ButtonEx5 } from "@xylabs/react-button";
+import { ErrorRender as ErrorRender5 } from "@xylabs/react-error";
+import { isDefined as isDefined7, isDefinedNotNull as isDefinedNotNull5 } from "@xylabs/sdk-js";
+import { useState as useState8 } from "react";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+var DataLakeListButton = ({ timeout, ...props }) => {
+  const {
+    client,
+    error: clientError,
+    isLoading,
+    timedout
+  } = useClientFromWallet(timeout);
+  const [lakes, setLakes] = useState8();
+  const [requestError, setRequestError] = useState8();
+  const [requesting, setRequesting] = useState8(false);
+  const dataLakes = client?.dataLakes;
+  const supported = isDefinedNotNull5(dataLakes);
+  const handleClick = async () => {
+    if (!isDefinedNotNull5(dataLakes)) return;
+    setRequestError(void 0);
+    setLakes(void 0);
+    setRequesting(true);
+    try {
+      const result = await dataLakes.list();
+      setLakes(result);
+    } catch (e) {
+      setRequestError(e);
+    } finally {
+      setRequesting(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs8(
+    Stack8,
+    {
+      ...props,
+      sx: {
+        gap: 2,
+        alignItems: "start",
+        ...props.sx
+      },
+      children: [
+        timedout ? /* @__PURE__ */ jsx8(Alert6, { severity: "warning", children: "Wallet not detected." }) : null,
+        isDefinedNotNull5(client) && !supported ? /* @__PURE__ */ jsx8(Alert6, { severity: "warning", children: "This wallet does not expose `xyo.client.dataLakes`." }) : null,
+        /* @__PURE__ */ jsx8(
+          ButtonEx5,
+          {
+            variant: "contained",
+            size: "small",
+            disabled: !supported || requesting,
+            busy: isLoading || requesting,
+            onClick: () => void handleClick(),
+            children: "List approved data lakes"
+          }
+        ),
+        isDefined7(lakes) ? /* @__PURE__ */ jsxs8(Stack8, { sx: { gap: 0.5 }, children: [
+          /* @__PURE__ */ jsx8(Typography8, { variant: "subtitle2", children: lakes.length === 0 ? "No approved lakes" : `Approved lakes (${lakes.length})` }),
+          /* @__PURE__ */ jsx8(
+            Typography8,
+            {
+              component: "pre",
+              variant: "body2",
+              sx: {
+                fontFamily: "monospace",
+                whiteSpace: "pre-wrap",
+                wordBreak: "break-all"
+              },
+              children: JSON.stringify(lakes, null, 2)
+            }
+          )
+        ] }) : null,
+        /* @__PURE__ */ jsx8(ErrorRender5, { error: clientError ?? requestError, scope: "DataLakeListButton" })
+      ]
+    }
+  );
+};
+
+// src/client/components/connected/DataLakeOperationsPanel.tsx
+import {
+  Divider,
+  Stack as Stack9,
+  Typography as Typography9
+} from "@mui/material";
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+var DataLakeOperationsPanel = ({ timeout, ...props }) => {
+  return /* @__PURE__ */ jsxs9(
+    Stack9,
+    {
+      ...props,
+      sx: {
+        gap: 3,
+        alignItems: "stretch",
+        ...props.sx
+      },
+      children: [
+        /* @__PURE__ */ jsxs9(Stack9, { sx: { gap: 1 }, children: [
+          /* @__PURE__ */ jsx9(Typography9, { variant: "subtitle2", children: "List approved lakes" }),
+          /* @__PURE__ */ jsx9(DataLakeListButton, { timeout })
+        ] }),
+        /* @__PURE__ */ jsx9(Divider, {}),
+        /* @__PURE__ */ jsxs9(Stack9, { sx: { gap: 1 }, children: [
+          /* @__PURE__ */ jsx9(Typography9, { variant: "subtitle2", children: "Insert payloads" }),
+          /* @__PURE__ */ jsx9(DataLakeInsertPanel, { timeout })
+        ] }),
+        /* @__PURE__ */ jsx9(Divider, {}),
+        /* @__PURE__ */ jsxs9(Stack9, { sx: { gap: 1 }, children: [
+          /* @__PURE__ */ jsx9(Typography9, { variant: "subtitle2", children: "Get payloads by hash" }),
+          /* @__PURE__ */ jsx9(DataLakeGetPanel, { timeout })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/client/components/connected/DataLakeRequestAccessButton.tsx
+import {
+  Alert as Alert7,
+  Stack as Stack10,
+  Typography as Typography10
+} from "@mui/material";
+import { ButtonEx as ButtonEx6 } from "@xylabs/react-button";
+import { ErrorRender as ErrorRender6 } from "@xylabs/react-error";
+import { isDefined as isDefined8, isDefinedNotNull as isDefinedNotNull6 } from "@xylabs/sdk-js";
+import { useState as useState9 } from "react";
+import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+var DataLakeRequestAccessButton = ({
+  options,
+  timeout,
+  ...props
+}) => {
+  const {
+    client,
+    error: clientError,
+    isLoading,
+    timedout
+  } = useClientFromWallet(timeout);
+  const [granted, setGranted] = useState9();
+  const [requestError, setRequestError] = useState9();
+  const [requesting, setRequesting] = useState9(false);
+  const dataLakes = client?.dataLakes;
+  const supported = isDefinedNotNull6(dataLakes);
+  const handleClick = async () => {
+    if (!isDefinedNotNull6(dataLakes)) return;
+    setRequestError(void 0);
+    setGranted(void 0);
+    setRequesting(true);
+    try {
+      const result = await dataLakes.requestAccess(options);
+      setGranted(result);
+    } catch (e) {
+      setRequestError(e);
+    } finally {
+      setRequesting(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs10(
+    Stack10,
+    {
+      ...props,
+      sx: {
+        gap: 2,
+        alignItems: "start",
+        ...props.sx
+      },
+      children: [
+        timedout ? /* @__PURE__ */ jsx10(Alert7, { severity: "warning", children: "Wallet not detected." }) : null,
+        isDefinedNotNull6(client) && !supported ? /* @__PURE__ */ jsx10(Alert7, { severity: "warning", children: "This wallet does not expose `xyo.client.dataLakes`." }) : null,
+        /* @__PURE__ */ jsx10(
+          ButtonEx6,
+          {
+            variant: "contained",
+            size: "small",
+            disabled: !supported || requesting,
+            busy: isLoading || requesting,
+            onClick: () => void handleClick(),
+            children: "Request data lake access"
+          }
+        ),
+        isDefined8(granted) ? /* @__PURE__ */ jsxs10(Stack10, { sx: { gap: 0.5 }, children: [
+          /* @__PURE__ */ jsx10(Typography10, { variant: "subtitle2", children: "Granted:" }),
+          /* @__PURE__ */ jsxs10(Typography10, { variant: "body2", sx: { fontFamily: "monospace", wordBreak: "break-all" }, children: [
+            "id:",
+            " ",
+            granted.id
+          ] }),
+          /* @__PURE__ */ jsx10(Typography10, { variant: "body2", sx: { color: "text.secondary" }, children: "If you picked multiple lakes, call `list()` to enumerate all granted ids." })
+        ] }) : null,
+        /* @__PURE__ */ jsx10(ErrorRender6, { error: clientError ?? requestError, scope: "DataLakeRequestAccessButton" })
       ]
     }
   );
@@ -346,15 +991,15 @@ var ConnectAccountsStack = ({
 
 // src/client/components/connected/RequestPermissionsButton.tsx
 import {
-  Alert as Alert2,
-  Stack as Stack3,
-  Typography as Typography3
+  Alert as Alert8,
+  Stack as Stack11,
+  Typography as Typography11
 } 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";
+import { ButtonEx as ButtonEx7 } from "@xylabs/react-button";
+import { ErrorRender as ErrorRender7 } from "@xylabs/react-error";
+import { isDefined as isDefined9, isDefinedNotNull as isDefinedNotNull7 } from "@xylabs/sdk-js";
+import { useState as useState10 } from "react";
+import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
 var RequestPermissionsButton = ({
   permissions,
   timeout,
@@ -366,11 +1011,11 @@ var RequestPermissionsButton = ({
     isLoading,
     timedout
   } = useClientFromWallet(timeout);
-  const [acks, setAcks] = useState3();
-  const [requestError, setRequestError] = useState3();
-  const [requesting, setRequesting] = useState3(false);
+  const [acks, setAcks] = useState10();
+  const [requestError, setRequestError] = useState10();
+  const [requesting, setRequesting] = useState10(false);
   const handleClick = async () => {
-    if (!isDefinedNotNull2(client)) return;
+    if (!isDefinedNotNull7(client)) return;
     setRequestError(void 0);
     setAcks(void 0);
     setRequesting(true);
@@ -383,8 +1028,8 @@ var RequestPermissionsButton = ({
       setRequesting(false);
     }
   };
-  return /* @__PURE__ */ jsxs3(
-    Stack3,
+  return /* @__PURE__ */ jsxs11(
+    Stack11,
     {
       ...props,
       sx: {
@@ -393,13 +1038,13 @@ var RequestPermissionsButton = ({
         ...props.sx
       },
       children: [
-        timedout ? /* @__PURE__ */ jsx3(Alert2, { severity: "warning", children: "Wallet not detected." }) : null,
-        /* @__PURE__ */ jsxs3(
-          ButtonEx2,
+        timedout ? /* @__PURE__ */ jsx11(Alert8, { severity: "warning", children: "Wallet not detected." }) : null,
+        /* @__PURE__ */ jsxs11(
+          ButtonEx7,
           {
             variant: "contained",
             size: "small",
-            disabled: !isDefinedNotNull2(client) || requesting,
+            disabled: !isDefinedNotNull7(client) || requesting,
             busy: isLoading || requesting,
             onClick: () => void handleClick(),
             children: [
@@ -412,10 +1057,10 @@ var RequestPermissionsButton = ({
             ]
           }
         ),
-        isDefined4(acks) ? /* @__PURE__ */ jsxs3(Stack3, { sx: { gap: 0.5 }, children: [
-          /* @__PURE__ */ jsx3(Typography3, { variant: "subtitle2", children: "Granted:" }),
-          acks.map((ack) => /* @__PURE__ */ jsx3(
-            Typography3,
+        isDefined9(acks) ? /* @__PURE__ */ jsxs11(Stack11, { sx: { gap: 0.5 }, children: [
+          /* @__PURE__ */ jsx11(Typography11, { variant: "subtitle2", children: "Granted:" }),
+          acks.map((ack) => /* @__PURE__ */ jsx11(
+            Typography11,
             {
               variant: "body2",
               sx: { fontFamily: "monospace" },
@@ -423,8 +1068,8 @@ var RequestPermissionsButton = ({
             },
             `${ack.parentCapability}`
           )),
-          acks.length === 0 ? /* @__PURE__ */ jsx3(
-            Typography3,
+          acks.length === 0 ? /* @__PURE__ */ jsx11(
+            Typography11,
             {
               variant: "body2",
               sx: { color: "text.secondary" },
@@ -432,7 +1077,7 @@ var RequestPermissionsButton = ({
             }
           ) : null
         ] }) : null,
-        /* @__PURE__ */ jsx3(ErrorRender2, { error: clientError ?? requestError, scope: "RequestPermissionsButton" })
+        /* @__PURE__ */ jsx11(ErrorRender7, { error: clientError ?? requestError, scope: "RequestPermissionsButton" })
       ]
     }
   );
@@ -450,19 +1095,18 @@ var InPageGatewaysContext = createContextEx2();
 import { DefaultNetworks as DefaultNetworks2 } from "@xyo-network/xl1-sdk";
 import {
   startTransition,
-  useCallback as useCallback2,
-  useEffect as useEffect3,
-  useMemo,
-  useState as useState4
+  useCallback as useCallback3,
+  useEffect as useEffect4,
+  useMemo as useMemo3,
+  useState as useState11
 } from "react";
 
 // src/client/context/in-page/lib/buildGateway.ts
-import { assertEx as assertEx2, isDefined as isDefined5 } from "@xylabs/sdk-js";
+import { assertEx as assertEx2, isDefined as isDefined10 } from "@xylabs/sdk-js";
 import {
   basicRemoteRunnerLocator,
   basicRemoteViewerLocator,
   DefaultNetworks,
-  NetworkDataLakeUrls,
   XyoGatewayMoniker
 } from "@xyo-network/xl1-sdk";
 var buildGateway = async (gatewayName, signerTransport) => {
@@ -474,18 +1118,17 @@ var buildGateway = async (gatewayName, signerTransport) => {
       url: `${resolvedNetwork.url}/rpc`
     }
   };
-  const dataLakeEndpoint = NetworkDataLakeUrls[gatewayName];
-  const locator = isDefined5(signerTransport) ? await basicRemoteRunnerLocator(gatewayName, remoteConfig, signerTransport, dataLakeEndpoint) : await basicRemoteViewerLocator(gatewayName, remoteConfig, dataLakeEndpoint);
+  const locator = isDefined10(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 jsx4 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var InPageGatewaysProvider = ({ signerTransport, children }) => {
-  const [gateways, setGateways] = useState4({});
-  const [errors, setErrors] = useState4({});
-  const [previousSignerTransport, setPreviousSignerTransport] = useState4(signerTransport);
-  const clearAll = useCallback2(() => {
+  const [gateways, setGateways] = useState11({});
+  const [errors, setErrors] = useState11({});
+  const [previousSignerTransport, setPreviousSignerTransport] = useState11(signerTransport);
+  const clearAll = useCallback3(() => {
     setGateways({});
     setErrors({});
   }, []);
@@ -493,7 +1136,7 @@ var InPageGatewaysProvider = ({ signerTransport, children }) => {
     clearAll();
     setPreviousSignerTransport(signerTransport);
   }
-  useEffect3(() => {
+  useEffect4(() => {
     let cancelled = false;
     const buildAll = async () => {
       const results = await Promise.allSettled(
@@ -523,7 +1166,7 @@ var InPageGatewaysProvider = ({ signerTransport, children }) => {
       cancelled = true;
     };
   }, [signerTransport]);
-  const value = useMemo(() => {
+  const value = useMemo3(() => {
     const value2 = {
       clearAll,
       errors,
@@ -532,7 +1175,7 @@ var InPageGatewaysProvider = ({ signerTransport, children }) => {
     };
     return value2;
   }, [clearAll, errors, gateways]);
-  return /* @__PURE__ */ jsx4(InPageGatewaysContext, { value, children });
+  return /* @__PURE__ */ jsx12(InPageGatewaysContext, { value, children });
 };
 
 // src/client/context/in-page/useProvidedInPageGateways.ts
@@ -540,10 +1183,10 @@ import { useContextEx } from "@xylabs/react-shared";
 var useProvidedInPageGateways = (required = true) => useContextEx(InPageGatewaysContext, "InPageGateways", required);
 
 // src/client/context/providers/GatewayProvider.tsx
-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 jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { ErrorRender as ErrorRender8 } from "@xylabs/react-error";
+import { isDefinedNotNull as isDefinedNotNull8, isNull as isNull2 } from "@xylabs/sdk-js";
+import { useMemo as useMemo4 } from "react";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 var GatewayProvider = ({ gatewayName, children }) => {
   const {
     gateway: gatewayFromWallet,
@@ -556,7 +1199,7 @@ var GatewayProvider = ({ gatewayName, children }) => {
   } = useProvidedInPageGateways(true);
   const gatewayFromConfig = gatewayName ? allGateways[gatewayName] : void 0;
   const gatewayFromConfigError = gatewayName ? allGatewayErrors[gatewayName] : void 0;
-  const { defaultGateway, gateways } = useMemo2(() => {
+  const { defaultGateway, gateways } = useMemo4(() => {
     if (isNull2(gatewayFromWallet)) {
       return {
         defaultGateway: gatewayFromConfig,
@@ -565,7 +1208,7 @@ var GatewayProvider = ({ gatewayName, children }) => {
           walletGateway: null
         }
       };
-    } else if (isDefinedNotNull3(gatewayFromWallet)) {
+    } else if (isDefinedNotNull8(gatewayFromWallet)) {
       return {
         defaultGateway: gatewayFromWallet,
         gateways: {
@@ -582,7 +1225,7 @@ var GatewayProvider = ({ gatewayName, children }) => {
       }
     };
   }, [gatewayFromConfig, gatewayFromWallet]);
-  const value = useMemo2(() => {
+  const value = useMemo4(() => {
     const value2 = {
       defaultGateway,
       error: gatewayFromWalletError ?? gatewayFromConfigError,
@@ -598,22 +1241,22 @@ var GatewayProvider = ({ gatewayName, children }) => {
     gateways,
     clearAll
   ]);
-  return /* @__PURE__ */ jsxs4(GatewayContext, { value, children: [
-    /* @__PURE__ */ jsx5(ErrorRender3, { error: gatewayFromConfigError }),
+  return /* @__PURE__ */ jsxs12(GatewayContext, { value, children: [
+    /* @__PURE__ */ jsx13(ErrorRender8, { error: gatewayFromConfigError }),
     children
   ] });
 };
 
 // src/client/context/providers/WalletGatewayProvider.tsx
-import { ErrorRender as ErrorRender4 } from "@xylabs/react-error";
-import { useMemo as useMemo3 } from "react";
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+import { ErrorRender as ErrorRender9 } from "@xylabs/react-error";
+import { useMemo as useMemo5 } from "react";
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 var WalletGatewayProvider = ({ gatewayName, children }) => {
   const {
     gateway: gatewayFromWallet,
     error: gatewayFromWalletError
   } = useGatewayFromWallet(gatewayName);
-  const { defaultGateway, gateways } = useMemo3(() => {
+  const { defaultGateway, gateways } = useMemo5(() => {
     return {
       defaultGateway: gatewayFromWallet,
       gateways: {
@@ -622,7 +1265,7 @@ var WalletGatewayProvider = ({ gatewayName, children }) => {
       }
     };
   }, [gatewayFromWallet]);
-  const value = useMemo3(() => {
+  const value = useMemo5(() => {
     const value2 = {
       defaultGateway,
       error: gatewayFromWalletError,
@@ -635,8 +1278,8 @@ var WalletGatewayProvider = ({ gatewayName, children }) => {
     gatewayFromWalletError,
     gateways
   ]);
-  return /* @__PURE__ */ jsxs5(GatewayContext, { value, children: [
-    /* @__PURE__ */ jsx6(ErrorRender4, { error: gatewayFromWalletError }),
+  return /* @__PURE__ */ jsxs13(GatewayContext, { value, children: [
+    /* @__PURE__ */ jsx14(ErrorRender9, { error: gatewayFromWalletError }),
     children
   ] });
 };
@@ -645,8 +1288,16 @@ var WalletGatewayProvider = ({ gatewayName, children }) => {
 import { useContextEx as useContextEx2 } from "@xylabs/react-shared";
 var useProvidedGateway = (required = true) => useContextEx2(GatewayContext, "Gateway", required);
 export {
+  ApprovedLakeSelector,
   ConnectAccountsStack,
   ConnectedAccount,
+  DataLakeGetButton,
+  DataLakeGetPanel,
+  DataLakeInsertButton,
+  DataLakeInsertPanel,
+  DataLakeListButton,
+  DataLakeOperationsPanel,
+  DataLakeRequestAccessButton,
   GatewayContext,
   GatewayProvider,
   InPageGatewaysContext,
@@ -665,4 +1316,4 @@ export {
   useProvidedGateway,
   useProvidedInPageGateways
 };
-//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map