@xyo-network/react-module 2.81.10 → 2.83.0

package/dist/browser/index.d.ts

@@ -1,4 +1,35 @@
-export * from './components/index.js';
-export * from './hooks/index.js';
-export * from './ModuleRenderProps.js';
-//# sourceMappingURL=index.d.ts.map
+import { CardProps, CardContentProps, CardHeaderProps, CardActionsProps, TableCellProps } from '@mui/material';
+import { DivinerInstance } from '@xyo-network/diviner-model';
+import React from 'react';
+import { ModuleInstance } from '@xyo-network/module-model';
+import { FlexBoxProps } from '@xylabs/react-flexbox';
+
+type ModuleRenderProps<T extends ModuleInstance = ModuleInstance> = {
+    address?: string;
+    mod?: T;
+    name?: string;
+};
+
+declare const DivinerCard: React.FC<CardProps & ModuleRenderProps<DivinerInstance>>;
+
+declare const DivinerCardContent: React.FC<ModuleRenderProps<DivinerInstance> & CardContentProps>;
+
+declare const DivinerCardHeader: React.FC<ModuleRenderProps<DivinerInstance> & CardHeaderProps>;
+
+declare const ModuleCard: React.FC<CardProps & ModuleRenderProps>;
+
+declare const ModuleCardActions: React.FC<CardActionsProps & ModuleRenderProps>;
+
+declare const ModuleCardContent: React.FC<ModuleRenderProps & CardContentProps>;
+
+declare const ModuleCardHeader: React.FC<ModuleRenderProps & CardHeaderProps>;
+
+declare const ModuleDetailsBox: React.FC<ModuleRenderProps & FlexBoxProps>;
+
+declare const ModuleTableCell: React.FC<ModuleRenderProps & TableCellProps>;
+
+type RefreshCallback = () => number;
+type DisableCallback = () => void;
+declare const useRefresh: () => [number, RefreshCallback, DisableCallback];
+
+export { type DisableCallback, DivinerCard, DivinerCardContent, DivinerCardHeader, ModuleCard, ModuleCardActions, ModuleCardContent, ModuleCardHeader, ModuleDetailsBox, type ModuleRenderProps, ModuleTableCell, type RefreshCallback, useRefresh };

package/dist/browser/index.mjs

@@ -0,0 +1,216 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/components/Card/Diviner/Card.tsx
+import { Card as Card2 } from "@mui/material";
+import React8 from "react";
+
+// src/components/Card/Module/Card.tsx
+import { Card } from "@mui/material";
+import React5 from "react";
+
+// src/components/Card/Module/CardActions.tsx
+import { CardActions, Chip } from "@mui/material";
+import { ButtonEx } from "@xylabs/react-button";
+import { FlexRow } from "@xylabs/react-flexbox";
+import React2, { useState } from "react";
+
+// src/components/Card/Module/components/DiscoverDialog.tsx
+import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Divider, Paper } from "@mui/material";
+import { usePromise } from "@xylabs/react-promise";
+import React from "react";
+var DiscoverDialog = /* @__PURE__ */ __name(({ mod, setOpen, ...props }) => {
+  const [discoverPayloads] = usePromise(async () => {
+    return await mod?.state();
+  }, [
+    mod
+  ]);
+  return /* @__PURE__ */ React.createElement(Dialog, props, /* @__PURE__ */ React.createElement(DialogTitle, null, "Supported Queries for", mod?.config.name || mod?.address), /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(DialogContent, null, /* @__PURE__ */ React.createElement(Paper, {
+    sx: {
+      p: 1
+    }
+  }, /* @__PURE__ */ React.createElement(DialogContentText, null, "All modules share a set of base queries along with ones specific to the module."), /* @__PURE__ */ React.createElement("pre", null, JSON.stringify(discoverPayloads, null, 2)))), /* @__PURE__ */ React.createElement(DialogActions, null, /* @__PURE__ */ React.createElement(Button, {
+    onClick: /* @__PURE__ */ __name(() => setOpen?.(false), "onClick"),
+    variant: "outlined"
+  }, "Close")));
+}, "DiscoverDialog");
+
+// src/components/Card/Module/CardActions.tsx
+var ModuleCardActions = /* @__PURE__ */ __name(({ children, mod, sx, ...props }) => {
+  const [discoverDialogOpen, setDiscoverDialogOpen] = useState(false);
+  const config = mod?.config;
+  return /* @__PURE__ */ React2.createElement(CardActions, {
+    sx: {
+      alignItems: "stretch",
+      flexDirection: "column",
+      ml: 1,
+      ...sx
+    },
+    ...props
+  }, /* @__PURE__ */ React2.createElement(FlexRow, {
+    justifyContent: "space-between",
+    gap: 1,
+    alignItems: "center"
+  }, mod ? /* @__PURE__ */ React2.createElement(Chip, {
+    label: config?.schema,
+    size: "small"
+  }) : null, children, /* @__PURE__ */ React2.createElement(ButtonEx, {
+    onClick: /* @__PURE__ */ __name(() => setDiscoverDialogOpen(true), "onClick"),
+    size: "small",
+    variant: "outlined"
+  }, "Discover")), /* @__PURE__ */ React2.createElement(DiscoverDialog, {
+    fullWidth: true,
+    maxWidth: "md",
+    mod,
+    open: discoverDialogOpen,
+    setOpen: setDiscoverDialogOpen
+  }));
+}, "ModuleCardActions");
+
+// src/components/Card/Module/CardContent.tsx
+import { CardContent } from "@mui/material";
+import React3 from "react";
+var ModuleCardContent = /* @__PURE__ */ __name(({ children, ...props }) => {
+  return /* @__PURE__ */ React3.createElement(CardContent, props, children);
+}, "ModuleCardContent");
+
+// src/components/Card/Module/CardHeader.tsx
+import { CardHeader } from "@mui/material";
+import { findNetworkComponent } from "@xyo-network/react-shared";
+import React4 from "react";
+var moduleTypes = [
+  "sentinel",
+  "bridge",
+  "archivist",
+  "diviner",
+  "node",
+  "witness"
+];
+var getModuleIcons = /* @__PURE__ */ __name((moduleType, mod) => {
+  return mod?.queries.find((query) => query.startsWith(`network.xyo.query.${moduleType}`)) ? findNetworkComponent(moduleType)?.icon : null;
+}, "getModuleIcons");
+var ModuleCardHeader = /* @__PURE__ */ __name(({ subheader, avatar, title, mod, ...props }) => {
+  return /* @__PURE__ */ React4.createElement(CardHeader, {
+    title: title ?? mod?.config.name ?? "Module",
+    subheader: subheader ?? mod?.address,
+    avatar: avatar ?? /* @__PURE__ */ React4.createElement(React4.Fragment, null, mod ? moduleTypes.map((moduleType) => {
+      const Icon = getModuleIcons(moduleType, mod);
+      return Icon ? /* @__PURE__ */ React4.createElement(Icon, {
+        key: moduleType,
+        fontSize: "large",
+        color: "primary"
+      }) : null;
+    }) : null),
+    ...props
+  });
+}, "ModuleCardHeader");
+
+// src/components/Card/Module/Card.tsx
+var ModuleCard = /* @__PURE__ */ __name(({ mod, ...props }) => {
+  return /* @__PURE__ */ React5.createElement(Card, props, /* @__PURE__ */ React5.createElement(ModuleCardHeader, {
+    mod
+  }), /* @__PURE__ */ React5.createElement(ModuleCardContent, {
+    mod
+  }), /* @__PURE__ */ React5.createElement(ModuleCardActions, {
+    mod
+  }));
+}, "ModuleCard");
+
+// src/components/Card/Diviner/CardContent.tsx
+import React6 from "react";
+var DivinerCardContent = /* @__PURE__ */ __name(({ children, ...props }) => {
+  return /* @__PURE__ */ React6.createElement(ModuleCardContent, props, children);
+}, "DivinerCardContent");
+
+// src/components/Card/Diviner/CardHeader.tsx
+import React7 from "react";
+var DivinerCardHeader = /* @__PURE__ */ __name(({ title, mod, ...props }) => {
+  return /* @__PURE__ */ React7.createElement(ModuleCardHeader, {
+    mod,
+    title: title ?? mod?.config.name ?? "Diviner",
+    ...props
+  });
+}, "DivinerCardHeader");
+
+// src/components/Card/Diviner/Card.tsx
+var DivinerCard = /* @__PURE__ */ __name(({ children, mod, ...props }) => {
+  return /* @__PURE__ */ React8.createElement(Card2, props, /* @__PURE__ */ React8.createElement(DivinerCardHeader, {
+    mod
+  }), /* @__PURE__ */ React8.createElement(DivinerCardContent, {
+    mod
+  }), children, /* @__PURE__ */ React8.createElement(ModuleCardActions, {
+    mod
+  }));
+}, "DivinerCard");
+
+// src/components/DetailsBox.tsx
+import { EthAddress } from "@xylabs/eth-address";
+import { ButtonEx as ButtonEx2 } from "@xylabs/react-button";
+import { EthAccountBox } from "@xylabs/react-crypto";
+import { FlexCol, FlexRow as FlexRow2 } from "@xylabs/react-flexbox";
+import { findNetworkComponent as findNetworkComponent2 } from "@xyo-network/react-shared";
+import React9, { useState as useState2 } from "react";
+var getModuleIcon = /* @__PURE__ */ __name((moduleType, mod) => {
+  return mod?.queries.find((query) => query.startsWith(`network.xyo.query.${moduleType}`)) ? findNetworkComponent2(moduleType)?.icon() : null;
+}, "getModuleIcon");
+var ModuleDetailsBox = /* @__PURE__ */ __name(({ children, mod, ...props }) => {
+  const [showQueries, setShowQueries] = useState2(false);
+  return /* @__PURE__ */ React9.createElement(FlexCol, props, /* @__PURE__ */ React9.createElement(FlexRow2, null, mod ? [
+    "sentinel",
+    "bridge",
+    "archivist",
+    "diviner",
+    "node"
+  ].map((moduleType) => {
+    const icon = getModuleIcon(moduleType, mod);
+    return icon ? /* @__PURE__ */ React9.createElement(ButtonEx2, {
+      onClick: /* @__PURE__ */ __name(() => setShowQueries(!showQueries), "onClick"),
+      key: moduleType
+    }, icon) : null;
+  }) : null, /* @__PURE__ */ React9.createElement(EthAccountBox, {
+    address: EthAddress.fromString(mod?.address)
+  })), showQueries ? mod?.queries.map((query) => {
+    return /* @__PURE__ */ React9.createElement(FlexRow2, {
+      key: query
+    }, query);
+  }) : null, children);
+}, "ModuleDetailsBox");
+
+// src/components/TableCell.tsx
+import { TableCell } from "@mui/material";
+import { EthAddress as EthAddress2 } from "@xylabs/eth-address";
+import { EthAccountBox as EthAccountBox2 } from "@xylabs/react-crypto";
+import React10 from "react";
+var ModuleTableCell = /* @__PURE__ */ __name(({ children, mod, ...props }) => {
+  return /* @__PURE__ */ React10.createElement(TableCell, props, /* @__PURE__ */ React10.createElement(EthAccountBox2, {
+    address: EthAddress2.fromString(mod?.address)
+  }), children);
+}, "ModuleTableCell");
+
+// src/hooks/useRefresh.tsx
+import { useState as useState3 } from "react";
+var useRefresh = /* @__PURE__ */ __name(() => {
+  const [count, setCount] = useState3(1);
+  return [
+    count,
+    () => {
+      const newCount = count + 1;
+      setCount(newCount);
+      return newCount;
+    },
+    () => setCount(0)
+  ];
+}, "useRefresh");
+export {
+  DivinerCard,
+  DivinerCardContent,
+  DivinerCardHeader,
+  ModuleCard,
+  ModuleCardActions,
+  ModuleCardContent,
+  ModuleCardHeader,
+  ModuleDetailsBox,
+  ModuleTableCell,
+  useRefresh
+};
+//# sourceMappingURL=index.mjs.map

package/dist/browser/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/Card/Diviner/Card.tsx","../../src/components/Card/Module/Card.tsx","../../src/components/Card/Module/CardActions.tsx","../../src/components/Card/Module/components/DiscoverDialog.tsx","../../src/components/Card/Module/CardContent.tsx","../../src/components/Card/Module/CardHeader.tsx","../../src/components/Card/Diviner/CardContent.tsx","../../src/components/Card/Diviner/CardHeader.tsx","../../src/components/DetailsBox.tsx","../../src/components/TableCell.tsx","../../src/hooks/useRefresh.tsx"],"sourcesContent":["import { Card, CardProps } from '@mui/material'\nimport { DivinerInstance } from '@xyo-network/diviner-model'\nimport React from 'react'\n\nimport { ModuleRenderProps } from '../../../ModuleRenderProps.tsx'\nimport { ModuleCardActions } from '../Module/index.ts'\nimport { DivinerCardContent } from './CardContent.tsx'\nimport { DivinerCardHeader } from './CardHeader.tsx'\n\nexport const DivinerCard: React.FC<CardProps & ModuleRenderProps<DivinerInstance>> = ({ children, mod, ...props }) => {\n  return (\n    <Card {...props}>\n      <DivinerCardHeader mod={mod} />\n      <DivinerCardContent mod={mod} />\n      {children}\n      <ModuleCardActions mod={mod} />\n    </Card>\n  )\n}\n","import { Card, CardProps } from '@mui/material'\nimport React from 'react'\n\nimport { ModuleRenderProps } from '../../../ModuleRenderProps.tsx'\nimport { ModuleCardActions } from './CardActions.tsx'\nimport { ModuleCardContent } from './CardContent.tsx'\nimport { ModuleCardHeader } from './CardHeader.tsx'\n\nexport const ModuleCard: React.FC<CardProps & ModuleRenderProps> = ({ mod, ...props }) => {\n  return (\n    <Card {...props}>\n      <ModuleCardHeader mod={mod} />\n      <ModuleCardContent mod={mod} />\n      <ModuleCardActions mod={mod} />\n    </Card>\n  )\n}\n","import { CardActions, CardActionsProps, Chip } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { FlexRow } from '@xylabs/react-flexbox'\nimport React, { useState } from 'react'\n\nimport { ModuleRenderProps } from '../../../ModuleRenderProps.tsx'\nimport { DiscoverDialog } from './components/index.ts'\n\nexport const ModuleCardActions: React.FC<CardActionsProps & ModuleRenderProps> = ({ children, mod, sx, ...props }) => {\n  const [discoverDialogOpen, setDiscoverDialogOpen] = useState(false)\n\n  const config = mod?.config\n\n  return (\n    <CardActions sx={{ alignItems: 'stretch', flexDirection: 'column', ml: 1, ...sx }} {...props}>\n      <FlexRow justifyContent=\"space-between\" gap={1} alignItems=\"center\">\n        {mod\n          ? <Chip label={config?.schema} size=\"small\" />\n          : null}\n        {children}\n        <ButtonEx onClick={() => setDiscoverDialogOpen(true)} size=\"small\" variant=\"outlined\">\n          Discover\n        </ButtonEx>\n      </FlexRow>\n      <DiscoverDialog fullWidth maxWidth=\"md\" mod={mod} open={discoverDialogOpen} setOpen={setDiscoverDialogOpen} />\n    </CardActions>\n  )\n}\n","import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogProps, DialogTitle, Divider, Paper } from '@mui/material'\nimport { usePromise } from '@xylabs/react-promise'\nimport { ModuleInstance } from '@xyo-network/module-model'\nimport React, { Dispatch, SetStateAction } from 'react'\n\nexport interface DiscoverDialogProps extends DialogProps {\n  mod?: ModuleInstance\n  setOpen?: Dispatch<SetStateAction<boolean>>\n}\n\n// Add a dialogue title and quick tip to show description of discover query\n\nexport const DiscoverDialog: React.FC<DiscoverDialogProps> = ({ mod, setOpen, ...props }) => {\n  const [discoverPayloads] = usePromise(async () => {\n    return await mod?.state()\n  }, [mod])\n\n  return (\n    <Dialog {...props}>\n      <DialogTitle>\n        Supported Queries for\n        {mod?.config.name || mod?.address}\n      </DialogTitle>\n      <Divider />\n      <DialogContent>\n        <Paper sx={{ p: 1 }}>\n          <DialogContentText>All modules share a set of base queries along with ones specific to the module.</DialogContentText>\n          <pre>{JSON.stringify(discoverPayloads, null, 2)}</pre>\n        </Paper>\n      </DialogContent>\n      <DialogActions>\n        <Button onClick={() => setOpen?.(false)} variant=\"outlined\">\n          Close\n        </Button>\n      </DialogActions>\n    </Dialog>\n  )\n}\n","import { CardContent, CardContentProps } from '@mui/material'\nimport React from 'react'\n\nimport { ModuleRenderProps } from '../../../ModuleRenderProps.tsx'\n\nexport const ModuleCardContent: React.FC<ModuleRenderProps & CardContentProps> = ({ children, ...props }) => {\n  return <CardContent {...props}>{children}</CardContent>\n}\n","import { CardHeader, CardHeaderProps } from '@mui/material'\nimport { Module } from '@xyo-network/module-model'\nimport { findNetworkComponent } from '@xyo-network/react-shared'\nimport React from 'react'\n\nimport { ModuleRenderProps } from '../../../ModuleRenderProps.tsx'\n\nconst moduleTypes = ['sentinel', 'bridge', 'archivist', 'diviner', 'node', 'witness']\n\nconst getModuleIcons = (moduleType: string, mod: Module) => {\n  return mod?.queries.find(query => query.startsWith(`network.xyo.query.${moduleType}`)) ? findNetworkComponent(moduleType)?.icon : null\n}\n\nexport const ModuleCardHeader: React.FC<ModuleRenderProps & CardHeaderProps> = ({ subheader, avatar, title, mod, ...props }) => {\n  return (\n    <CardHeader\n      title={title ?? mod?.config.name ?? 'Module'}\n      subheader={subheader ?? mod?.address}\n      avatar={\n        avatar ?? (\n          <>\n            {mod\n              ? moduleTypes.map((moduleType) => {\n                const Icon = getModuleIcons(moduleType, mod)\n                return Icon ? <Icon key={moduleType} fontSize=\"large\" color=\"primary\" /> : null\n              })\n              : null}\n          </>\n        )\n      }\n      {...props}\n    />\n  )\n}\n","import { CardContentProps } from '@mui/material'\nimport { DivinerInstance } from '@xyo-network/diviner-model'\nimport React from 'react'\n\nimport { ModuleRenderProps } from '../../../ModuleRenderProps.tsx'\nimport { ModuleCardContent } from '../Module/index.ts'\n\nexport const DivinerCardContent: React.FC<ModuleRenderProps<DivinerInstance> & CardContentProps> = ({ children, ...props }) => {\n  return <ModuleCardContent {...props}>{children}</ModuleCardContent>\n}\n","import { CardHeaderProps } from '@mui/material'\nimport { DivinerInstance } from '@xyo-network/diviner-model'\nimport React from 'react'\n\nimport { ModuleRenderProps } from '../../../ModuleRenderProps.tsx'\nimport { ModuleCardHeader } from '../Module/index.ts'\n\nexport const DivinerCardHeader: React.FC<ModuleRenderProps<DivinerInstance> & CardHeaderProps> = ({ title, mod, ...props }) => {\n  return <ModuleCardHeader mod={mod} title={title ?? mod?.config.name ?? 'Diviner'} {...props} />\n}\n","import { EthAddress } from '@xylabs/eth-address'\nimport { ButtonEx } from '@xylabs/react-button'\nimport { EthAccountBox } from '@xylabs/react-crypto'\nimport { FlexBoxProps, FlexCol, FlexRow } from '@xylabs/react-flexbox'\nimport { Module } from '@xyo-network/module-model'\nimport { findNetworkComponent } from '@xyo-network/react-shared'\nimport React, { useState } from 'react'\n\nimport { ModuleRenderProps } from '../ModuleRenderProps.tsx'\n\nconst getModuleIcon = (moduleType: string, mod: Module) => {\n  return mod?.queries.find(query => query.startsWith(`network.xyo.query.${moduleType}`)) ? findNetworkComponent(moduleType)?.icon() : null\n}\n\nexport const ModuleDetailsBox: React.FC<ModuleRenderProps & FlexBoxProps> = ({ children, mod, ...props }) => {\n  const [showQueries, setShowQueries] = useState(false)\n  return (\n    <FlexCol {...props}>\n      <FlexRow>\n        {mod\n          ? ['sentinel', 'bridge', 'archivist', 'diviner', 'node'].map((moduleType) => {\n              const icon = getModuleIcon(moduleType, mod)\n              return icon\n                ? (\n                    <ButtonEx onClick={() => setShowQueries(!showQueries)} key={moduleType}>\n                      {icon}\n                    </ButtonEx>\n                  )\n                : null\n            })\n          : null}\n        <EthAccountBox address={EthAddress.fromString(mod?.address)} />\n      </FlexRow>\n\n      {showQueries\n        ? mod?.queries.map((query) => {\n          return <FlexRow key={query}>{query}</FlexRow>\n        })\n        : null}\n      {children}\n    </FlexCol>\n  )\n}\n","import { TableCell, TableCellProps } from '@mui/material'\nimport { EthAddress } from '@xylabs/eth-address'\nimport { EthAccountBox } from '@xylabs/react-crypto'\nimport React from 'react'\n\nimport { ModuleRenderProps } from '../ModuleRenderProps.tsx'\n\nexport const ModuleTableCell: React.FC<ModuleRenderProps & TableCellProps> = ({ children, mod, ...props }) => {\n  return (\n    <TableCell {...props}>\n      <EthAccountBox address={EthAddress.fromString(mod?.address)} />\n      {children}\n    </TableCell>\n  )\n}\n","import { useState } from 'react'\n\nexport type RefreshCallback = () => number\nexport type DisableCallback = () => void\n\nexport const useRefresh = (): [number, RefreshCallback, DisableCallback] => {\n  const [count, setCount] = useState(1)\n  return [\n    count,\n    () => {\n      const newCount = count + 1\n      setCount(newCount)\n      return newCount\n    },\n    () => setCount(0),\n  ]\n}\n"],"mappings":"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","names":["Card","React","Card","React","CardActions","Chip","ButtonEx","FlexRow","React","useState","Button","Dialog","DialogActions","DialogContent","DialogContentText","DialogTitle","Divider","Paper","usePromise","React","DiscoverDialog","mod","setOpen","props","discoverPayloads","usePromise","state","Dialog","DialogTitle","config","name","address","Divider","DialogContent","Paper","sx","p","DialogContentText","pre","JSON","stringify","DialogActions","Button","onClick","variant","ModuleCardActions","children","mod","sx","props","discoverDialogOpen","setDiscoverDialogOpen","useState","config","React","CardActions","alignItems","flexDirection","ml","FlexRow","justifyContent","gap","Chip","label","schema","size","ButtonEx","onClick","variant","DiscoverDialog","fullWidth","maxWidth","open","setOpen","CardContent","React","ModuleCardContent","children","props","React","CardContent","CardHeader","findNetworkComponent","React","moduleTypes","getModuleIcons","moduleType","mod","queries","find","query","startsWith","findNetworkComponent","icon","ModuleCardHeader","subheader","avatar","title","props","React","CardHeader","config","name","address","map","Icon","key","fontSize","color","ModuleCard","mod","props","React","Card","ModuleCardHeader","ModuleCardContent","ModuleCardActions","React","DivinerCardContent","children","props","React","ModuleCardContent","React","DivinerCardHeader","title","mod","props","React","ModuleCardHeader","config","name","DivinerCard","children","mod","props","React","Card","DivinerCardHeader","DivinerCardContent","ModuleCardActions","EthAddress","ButtonEx","EthAccountBox","FlexCol","FlexRow","findNetworkComponent","React","useState","getModuleIcon","moduleType","mod","queries","find","query","startsWith","findNetworkComponent","icon","ModuleDetailsBox","children","props","showQueries","setShowQueries","useState","React","FlexCol","FlexRow","map","ButtonEx","onClick","key","EthAccountBox","address","EthAddress","fromString","TableCell","EthAddress","EthAccountBox","React","ModuleTableCell","children","mod","props","React","TableCell","EthAccountBox","address","EthAddress","fromString","useState","useRefresh","count","setCount","useState","newCount"]}

package/package.json

@@ -10,24 +10,24 @@
     "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/issues"
   },
   "dependencies": {
-    "@xylabs/eth-address": "^3.6.4",
-    "@xylabs/react-button": "^3.4.1",
-    "@xylabs/react-crypto": "^3.4.1",
-    "@xylabs/react-flexbox": "^3.4.1",
-    "@xylabs/react-promise": "^3.4.1",
-    "@xyo-network/diviner-model": "^2.110.9",
-    "@xyo-network/module-model": "^2.110.9",
-    "@xyo-network/react-shared": "^2.81.10"
+    "@xylabs/eth-address": "^3.6.12",
+    "@xylabs/react-button": "^3.4.2",
+    "@xylabs/react-crypto": "^3.4.2",
+    "@xylabs/react-flexbox": "^3.4.2",
+    "@xylabs/react-promise": "^3.4.2",
+    "@xyo-network/diviner-model": "^2.111.3",
+    "@xyo-network/module-model": "^2.111.3",
+    "@xyo-network/react-shared": "^2.83.0"
   },
   "devDependencies": {
-    "@storybook/react": "^7.6.20",
-    "@xylabs/react-async-effect": "^3.4.1",
-    "@xylabs/ts-scripts-yarn3": "^3.12.4",
-    "@xylabs/tsconfig-react": "^3.12.4",
-    "@xyo-network/archivist": "^2.110.9",
-    "@xyo-network/crypto-asset-plugin": "^2.99.4",
-    "@xyo-network/diviner-address-history": "^2.110.9",
-    "@xyo-network/node-memory": "^2.110.9",
+    "@storybook/react": "^8.2.7",
+    "@xylabs/react-async-effect": "^3.4.2",
+    "@xylabs/ts-scripts-yarn3": "^4.0.0-rc.7",
+    "@xylabs/tsconfig-react": "^4.0.0-rc.7",
+    "@xyo-network/archivist": "^2.111.3",
+    "@xyo-network/crypto-asset-plugin": "^2.99.6",
+    "@xyo-network/diviner-address-history": "^2.111.3",
+    "@xyo-network/node-memory": "^2.111.3",
     "typescript": "^5.5.4"
   },
   "peerDependencies": {
@@ -41,32 +41,16 @@
   "docs": "dist/docs.json",
   "exports": {
     ".": {
-      "node": {
-        "import": {
-          "types": "./dist/node/index.d.mts",
-          "default": "./dist/node/index.js"
-        },
-        "require": {
-          "types": "./dist/node/index.d.cts",
-          "default": "./dist/node/index.cjs"
-        }
+      "import": {
+        "types": "./dist/browser/index.d.ts",
+        "default": "./dist/browser/index.mjs"
       },
-      "browser": {
-        "import": {
-          "types": "./dist/browser/index.d.mts",
-          "default": "./dist/browser/index.js"
-        },
-        "require": {
-          "types": "./dist/browser/index.d.cts",
-          "default": "./dist/browser/index.cjs"
-        }
-      },
-      "default": "./dist/browser/index.js"
+      "types": "./dist/browser/index.d.ts",
+      "default": "./dist/browser/index.mjs"
     },
     "./package.json": "./package.json"
   },
-  "main": "dist/browser/index.cjs",
-  "module": "dist/browser/index.js",
+  "module": "dist/browser/index.mjs",
   "homepage": "https://xyo.network",
   "keywords": [
     "xyo",
@@ -88,6 +72,6 @@
   },
   "sideEffects": false,
   "types": "dist/browser/index.d.ts",
-  "version": "2.81.10",
+  "version": "2.83.0",
   "type": "module"
 }

package/src/components/Card/Diviner/Card.stories.tsx

@@ -2,9 +2,9 @@ import { Meta, StoryFn } from '@storybook/react'
 import { useAsyncEffect } from '@xylabs/react-async-effect'
 import { AddressHistoryDiviner, AddressHistoryDivinerConfigSchema } from '@xyo-network/diviner-address-history'
 import { DivinerInstance } from '@xyo-network/diviner-model'
-import { useState } from 'react'
+import React, { useState } from 'react'
 
-import { DivinerCard } from './Card.js'
+import { DivinerCard } from './Card.tsx'
 
 const StorybookEntry = {
   title: 'modules/diviner/DivinerCard',
@@ -14,7 +14,7 @@ const Template: StoryFn<typeof DivinerCard> = () => {
   const [mod, setModule] = useState<DivinerInstance>()
 
   useAsyncEffect(
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+
     async (mounted) => {
       if (!mod) {
         const newModule = (await AddressHistoryDiviner.create({
@@ -39,5 +39,4 @@ const SingleModule = Template.bind({})
 
 export { SingleModule }
 
-// eslint-disable-next-line import/no-default-export
 export default StorybookEntry

package/src/components/Card/Diviner/Card.tsx

@@ -1,10 +1,11 @@
 import { Card, CardProps } from '@mui/material'
 import { DivinerInstance } from '@xyo-network/diviner-model'
+import React from 'react'
 
-import { ModuleRenderProps } from '../../../ModuleRenderProps.js'
-import { ModuleCardActions } from '../Module/index.js'
-import { DivinerCardContent } from './CardContent.js'
-import { DivinerCardHeader } from './CardHeader.js'
+import { ModuleRenderProps } from '../../../ModuleRenderProps.tsx'
+import { ModuleCardActions } from '../Module/index.ts'
+import { DivinerCardContent } from './CardContent.tsx'
+import { DivinerCardHeader } from './CardHeader.tsx'
 
 export const DivinerCard: React.FC<CardProps & ModuleRenderProps<DivinerInstance>> = ({ children, mod, ...props }) => {
   return (

package/src/components/Card/Diviner/CardActions.tsx

@@ -1,8 +1,9 @@
 import { CardActionsProps } from '@mui/material'
 import { DivinerInstance } from '@xyo-network/diviner-model'
+import React from 'react'
 
-import { ModuleRenderProps } from '../../../ModuleRenderProps.js'
-import { ModuleCardActions } from '../Module/index.js'
+import { ModuleRenderProps } from '../../../ModuleRenderProps.tsx'
+import { ModuleCardActions } from '../Module/index.ts'
 
 export const DivinerCardActions: React.FC<ModuleRenderProps<DivinerInstance> & CardActionsProps> = (props) => {
   return <ModuleCardActions {...props} />

package/src/components/Card/Diviner/CardContent.tsx

@@ -1,8 +1,9 @@
 import { CardContentProps } from '@mui/material'
 import { DivinerInstance } from '@xyo-network/diviner-model'
+import React from 'react'
 
-import { ModuleRenderProps } from '../../../ModuleRenderProps.js'
-import { ModuleCardContent } from '../Module/index.js'
+import { ModuleRenderProps } from '../../../ModuleRenderProps.tsx'
+import { ModuleCardContent } from '../Module/index.ts'
 
 export const DivinerCardContent: React.FC<ModuleRenderProps<DivinerInstance> & CardContentProps> = ({ children, ...props }) => {
   return <ModuleCardContent {...props}>{children}</ModuleCardContent>

package/src/components/Card/Diviner/CardHeader.tsx

@@ -1,8 +1,9 @@
 import { CardHeaderProps } from '@mui/material'
 import { DivinerInstance } from '@xyo-network/diviner-model'
+import React from 'react'
 
-import { ModuleRenderProps } from '../../../ModuleRenderProps.js'
-import { ModuleCardHeader } from '../Module/index.js'
+import { ModuleRenderProps } from '../../../ModuleRenderProps.tsx'
+import { ModuleCardHeader } from '../Module/index.ts'
 
 export const DivinerCardHeader: React.FC<ModuleRenderProps<DivinerInstance> & CardHeaderProps> = ({ title, mod, ...props }) => {
   return <ModuleCardHeader mod={mod} title={title ?? mod?.config.name ?? 'Diviner'} {...props} />

package/src/components/Card/Diviner/index.ts

@@ -1,3 +1,3 @@
-export * from './Card.js'
-export * from './CardContent.js'
-export * from './CardHeader.js'
+export * from './Card.tsx'
+export * from './CardContent.tsx'
+export * from './CardHeader.tsx'

package/src/components/Card/Module/Card.stories.tsx

@@ -1,9 +1,9 @@
 import { Meta, StoryFn } from '@storybook/react'
 import { useAsyncEffect } from '@xylabs/react-async-effect'
 import { ArchivistInstance, MemoryArchivist } from '@xyo-network/archivist'
-import { useState } from 'react'
+import React, { useState } from 'react'
 
-import { ModuleCard } from './Card.js'
+import { ModuleCard } from './Card.tsx'
 
 const StorybookEntry = {
   argTypes: {
@@ -25,7 +25,7 @@ const Template: StoryFn<typeof ModuleCard> = () => {
   const [mod, setModule] = useState<ArchivistInstance>()
 
   useAsyncEffect(
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+
     async (mounted) => {
       if (!mod) {
         const newModule = await MemoryArchivist.create()
@@ -44,5 +44,4 @@ const SingleModule = Template.bind({})
 
 export { SingleModule }
 
-// eslint-disable-next-line import/no-default-export
 export default StorybookEntry

package/src/components/Card/Module/Card.tsx

@@ -1,9 +1,10 @@
 import { Card, CardProps } from '@mui/material'
+import React from 'react'
 
-import { ModuleRenderProps } from '../../../ModuleRenderProps.js'
-import { ModuleCardActions } from './CardActions.js'
-import { ModuleCardContent } from './CardContent.js'
-import { ModuleCardHeader } from './CardHeader.js'
+import { ModuleRenderProps } from '../../../ModuleRenderProps.tsx'
+import { ModuleCardActions } from './CardActions.tsx'
+import { ModuleCardContent } from './CardContent.tsx'
+import { ModuleCardHeader } from './CardHeader.tsx'
 
 export const ModuleCard: React.FC<CardProps & ModuleRenderProps> = ({ mod, ...props }) => {
   return (

package/src/components/Card/Module/CardActions.tsx

@@ -1,10 +1,10 @@
 import { CardActions, CardActionsProps, Chip } from '@mui/material'
 import { ButtonEx } from '@xylabs/react-button'
 import { FlexRow } from '@xylabs/react-flexbox'
-import { useState } from 'react'
+import React, { useState } from 'react'
 
-import { ModuleRenderProps } from '../../../ModuleRenderProps.js'
-import { DiscoverDialog } from './components/index.js'
+import { ModuleRenderProps } from '../../../ModuleRenderProps.tsx'
+import { DiscoverDialog } from './components/index.ts'
 
 export const ModuleCardActions: React.FC<CardActionsProps & ModuleRenderProps> = ({ children, mod, sx, ...props }) => {
   const [discoverDialogOpen, setDiscoverDialogOpen] = useState(false)
@@ -14,15 +14,15 @@ export const ModuleCardActions: React.FC<CardActionsProps & ModuleRenderProps> =
   return (
     <CardActions sx={{ alignItems: 'stretch', flexDirection: 'column', ml: 1, ...sx }} {...props}>
       <FlexRow justifyContent="space-between" gap={1} alignItems="center">
-        {mod ?
-          <Chip label={config?.schema} size={'small'} />
-        : null}
+        {mod
+          ? <Chip label={config?.schema} size="small" />
+          : null}
         {children}
-        <ButtonEx onClick={() => setDiscoverDialogOpen(true)} size={'small'} variant={'outlined'}>
+        <ButtonEx onClick={() => setDiscoverDialogOpen(true)} size="small" variant="outlined">
           Discover
         </ButtonEx>
       </FlexRow>
-      <DiscoverDialog fullWidth maxWidth={'md'} mod={mod} open={discoverDialogOpen} setOpen={setDiscoverDialogOpen} />
+      <DiscoverDialog fullWidth maxWidth="md" mod={mod} open={discoverDialogOpen} setOpen={setDiscoverDialogOpen} />
     </CardActions>
   )
 }

package/src/components/Card/Module/CardContent.tsx

@@ -1,6 +1,7 @@
 import { CardContent, CardContentProps } from '@mui/material'
+import React from 'react'
 
-import { ModuleRenderProps } from '../../../ModuleRenderProps.js'
+import { ModuleRenderProps } from '../../../ModuleRenderProps.tsx'
 
 export const ModuleCardContent: React.FC<ModuleRenderProps & CardContentProps> = ({ children, ...props }) => {
   return <CardContent {...props}>{children}</CardContent>

package/src/components/Card/Module/CardHeader.tsx

@@ -1,13 +1,14 @@
 import { CardHeader, CardHeaderProps } from '@mui/material'
 import { Module } from '@xyo-network/module-model'
 import { findNetworkComponent } from '@xyo-network/react-shared'
+import React from 'react'
 
-import { ModuleRenderProps } from '../../../ModuleRenderProps.js'
+import { ModuleRenderProps } from '../../../ModuleRenderProps.tsx'
 
 const moduleTypes = ['sentinel', 'bridge', 'archivist', 'diviner', 'node', 'witness']
 
 const getModuleIcons = (moduleType: string, mod: Module) => {
-  return mod?.queries.find((query) => query.startsWith(`network.xyo.query.${moduleType}`)) ? findNetworkComponent(moduleType)?.icon : null
+  return mod?.queries.find(query => query.startsWith(`network.xyo.query.${moduleType}`)) ? findNetworkComponent(moduleType)?.icon : null
 }
 
 export const ModuleCardHeader: React.FC<ModuleRenderProps & CardHeaderProps> = ({ subheader, avatar, title, mod, ...props }) => {
@@ -18,12 +19,12 @@ export const ModuleCardHeader: React.FC<ModuleRenderProps & CardHeaderProps> = (
       avatar={
         avatar ?? (
           <>
-            {mod ?
-              moduleTypes.map((moduleType) => {
+            {mod
+              ? moduleTypes.map((moduleType) => {
                 const Icon = getModuleIcons(moduleType, mod)
-                return Icon ? <Icon key={moduleType} fontSize={'large'} color="primary" /> : null
+                return Icon ? <Icon key={moduleType} fontSize="large" color="primary" /> : null
               })
-            : null}
+              : null}
           </>
         )
       }

package/src/components/Card/Module/components/DiscoverDialog.tsx

@@ -1,7 +1,7 @@
 import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogProps, DialogTitle, Divider, Paper } from '@mui/material'
 import { usePromise } from '@xylabs/react-promise'
 import { ModuleInstance } from '@xyo-network/module-model'
-import { Dispatch, SetStateAction } from 'react'
+import React, { Dispatch, SetStateAction } from 'react'
 
 export interface DiscoverDialogProps extends DialogProps {
   mod?: ModuleInstance
@@ -17,7 +17,10 @@ export const DiscoverDialog: React.FC<DiscoverDialogProps> = ({ mod, setOpen, ..
 
   return (
     <Dialog {...props}>
-      <DialogTitle>Supported Queries for {mod?.config.name || mod?.address}</DialogTitle>
+      <DialogTitle>
+        Supported Queries for
+        {mod?.config.name || mod?.address}
+      </DialogTitle>
       <Divider />
       <DialogContent>
         <Paper sx={{ p: 1 }}>
@@ -26,7 +29,7 @@ export const DiscoverDialog: React.FC<DiscoverDialogProps> = ({ mod, setOpen, ..
         </Paper>
       </DialogContent>
       <DialogActions>
-        <Button onClick={() => setOpen?.(false)} variant={'outlined'}>
+        <Button onClick={() => setOpen?.(false)} variant="outlined">
           Close
         </Button>
       </DialogActions>

package/src/components/Card/Module/components/index.ts

@@ -1 +1 @@
-export * from './DiscoverDialog.js'
+export * from './DiscoverDialog.tsx'