@xyo-network/react-module 2.41.52 → 2.41.54

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/cjs/components/CardActions.js +11 -1
  2. package/dist/cjs/components/CardActions.js.map +1 -1
  3. package/dist/cjs/components/DetailsBox.js +18 -1
  4. package/dist/cjs/components/DetailsBox.js.map +1 -1
  5. package/dist/docs.json +10 -10
  6. package/dist/esm/components/CardActions.js +10 -1
  7. package/dist/esm/components/CardActions.js.map +1 -1
  8. package/dist/esm/components/DetailsBox.js +19 -3
  9. package/dist/esm/components/DetailsBox.js.map +1 -1
  10. package/dist/types/components/CardActions.d.ts.map +1 -1
  11. package/dist/types/components/DetailsBox.d.ts.map +1 -1
  12. package/package.json +7 -5
  13. package/src/components/CardActions.tsx +12 -1
  14. package/src/components/DetailsBox.stories.tsx +91 -0
  15. package/src/components/DetailsBox.tsx +28 -2
package/dist/cjs/components/CardActions.js CHANGED
@@ -6,10 +6,20 @@ const jsx_runtime_1 = require("react/jsx-runtime");
6
6
  const material_1 = require("@mui/material");
7
7
  const react_button_1 = require("@xylabs/react-button");
8
8
  const module_1 = require("@xyo-network/module");
9
+ const react_shared_1 = require("@xyo-network/react-shared");
10
+ const getModuleIcons = (moduleType, wrapper) => {
11
+ var _a;
12
+ return (wrapper === null || wrapper === void 0 ? void 0 : wrapper.queries().find((query) => query.startsWith(`network.xyo.query.${moduleType}`))) ? (_a = (0, react_shared_1.findNetworkComponent)(moduleType)) === null || _a === void 0 ? void 0 : _a.icon() : null;
13
+ };
9
14
  const ModuleCardActions = (_a) => {
10
15
  var { children, module } = _a, props = tslib_1.__rest(_a, ["children", "module"]);
11
16
  const wrapper = module ? new module_1.ModuleWrapper(module) : undefined;
12
- return ((0, jsx_runtime_1.jsxs)(material_1.CardActions, Object.assign({}, props, { children: [(0, jsx_runtime_1.jsx)(react_button_1.ButtonEx, Object.assign({ onClick: () => wrapper === null || wrapper === void 0 ? void 0 : wrapper.discover() }, { children: "Discover" })), children] })));
17
+ return ((0, jsx_runtime_1.jsxs)(material_1.CardActions, Object.assign({ style: { justifyContent: 'space-between' } }, props, { children: [wrapper
18
+ ? ['sentinel', 'bridge', 'archivist', 'diviner', 'node'].map((moduleType) => {
19
+ const icon = getModuleIcons(moduleType, wrapper);
20
+ return icon ? (0, jsx_runtime_1.jsx)(react_button_1.ButtonEx, { children: icon }, moduleType) : null;
21
+ })
22
+ : null, (0, jsx_runtime_1.jsx)(react_button_1.ButtonEx, Object.assign({ onClick: () => wrapper === null || wrapper === void 0 ? void 0 : wrapper.discover() }, { children: "Discover" })), children] })));
13
23
  };
14
24
  exports.ModuleCardActions = ModuleCardActions;
15
25
  //# sourceMappingURL=CardActions.js.map
package/dist/cjs/components/CardActions.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CardActions.js","sourceRoot":"","sources":["../../../src/components/CardActions.tsx"],"names":[],"mappings":";;;;;AAAA,4CAA6D;AAC7D,uDAA+C;AAC/C,gDAAmD;AAI5C,MAAM,iBAAiB,GAAmD,CAAC,EAA8B,EAAE,EAAE;QAAlC,EAAE,QAAQ,EAAE,MAAM,OAAY,EAAP,KAAK,sBAA5B,sBAA8B,CAAF;IAC5G,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,sBAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAC9D,OAAO,CACL,wBAAC,sBAAW,oBAAK,KAAK,eACpB,uBAAC,uBAAQ,kBAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,EAAE,8BAAqB,EAChE,QAAQ,KACG,CACf,CAAA;AACH,CAAC,CAAA;AARY,QAAA,iBAAiB,qBAQ7B"}
1
+ {"version":3,"file":"CardActions.js","sourceRoot":"","sources":["../../../src/components/CardActions.tsx"],"names":[],"mappings":";;;;;AAAA,4CAA6D;AAC7D,uDAA+C;AAC/C,gDAAmD;AACnD,4DAAgE;AAIhE,MAAM,cAAc,GAAG,CAAC,UAAkB,EAAE,OAAsB,EAAE,EAAE;;IACpE,OAAO,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,GAAG,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,qBAAqB,UAAU,EAAE,CAAC,CAAC,EAAC,CAAC,CAAC,MAAA,IAAA,mCAAoB,EAAC,UAAU,CAAC,0CAAE,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;AAClJ,CAAC,CAAA;AAEM,MAAM,iBAAiB,GAAmD,CAAC,EAA8B,EAAE,EAAE;QAAlC,EAAE,QAAQ,EAAE,MAAM,OAAY,EAAP,KAAK,sBAA5B,sBAA8B,CAAF;IAC5G,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,sBAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAC9D,OAAO,CACL,wBAAC,sBAAW,kBAAC,KAAK,EAAE,EAAE,cAAc,EAAE,eAAe,EAAE,IAAM,KAAK,eAC/D,OAAO;gBACN,CAAC,CAAC,CAAC,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE;oBACxE,MAAM,IAAI,GAAG,cAAc,CAAC,UAAU,EAAE,OAAO,CAAC,CAAA;oBAChD,OAAO,IAAI,CAAC,CAAC,CAAC,uBAAC,uBAAQ,cAAmB,IAAI,IAAjB,UAAU,CAAmB,CAAC,CAAC,CAAC,IAAI,CAAA;gBACnE,CAAC,CAAC;gBACJ,CAAC,CAAC,IAAI,EACR,uBAAC,uBAAQ,kBAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,QAAQ,EAAE,8BAAqB,EAChE,QAAQ,KACG,CACf,CAAA;AACH,CAAC,CAAA;AAdY,QAAA,iBAAiB,qBAc7B"}
package/dist/cjs/components/DetailsBox.js CHANGED
@@ -4,13 +4,30 @@ exports.ModuleDetailsBox = void 0;
4
4
  const tslib_1 = require("tslib");
5
5
  const jsx_runtime_1 = require("react/jsx-runtime");
6
6
  const eth_address_1 = require("@xylabs/eth-address");
7
+ const react_button_1 = require("@xylabs/react-button");
7
8
  const react_crypto_1 = require("@xylabs/react-crypto");
8
9
  const react_flexbox_1 = require("@xylabs/react-flexbox");
9
10
  const module_1 = require("@xyo-network/module");
11
+ const react_shared_1 = require("@xyo-network/react-shared");
12
+ const react_1 = require("react");
13
+ const getModuleIcon = (moduleType, wrapper) => {
14
+ var _a;
15
+ return (wrapper === null || wrapper === void 0 ? void 0 : wrapper.queries().find((query) => query.startsWith(`network.xyo.query.${moduleType}`))) ? (_a = (0, react_shared_1.findNetworkComponent)(moduleType)) === null || _a === void 0 ? void 0 : _a.icon() : null;
16
+ };
10
17
  const ModuleDetailsBox = (_a) => {
11
18
  var { module } = _a, props = tslib_1.__rest(_a, ["module"]);
12
19
  const wrapper = module ? new module_1.ModuleWrapper(module) : undefined;
13
- return ((0, jsx_runtime_1.jsx)(react_flexbox_1.FlexCol, Object.assign({}, props, { children: (0, jsx_runtime_1.jsx)(react_crypto_1.EthAccountBox, { address: eth_address_1.EthAddress.fromString(wrapper === null || wrapper === void 0 ? void 0 : wrapper.address) }) })));
20
+ const [showQueries, setShowQueries] = (0, react_1.useState)(false);
21
+ return ((0, jsx_runtime_1.jsxs)(react_flexbox_1.FlexCol, Object.assign({}, props, { children: [(0, jsx_runtime_1.jsxs)(react_flexbox_1.FlexRow, { children: [wrapper
22
+ ? ['sentinel', 'bridge', 'archivist', 'diviner', 'node'].map((moduleType) => {
23
+ const icon = getModuleIcon(moduleType, wrapper);
24
+ return icon ? ((0, jsx_runtime_1.jsx)(react_button_1.ButtonEx, Object.assign({ onClick: () => setShowQueries(!showQueries) }, { children: icon }), moduleType)) : null;
25
+ })
26
+ : null, (0, jsx_runtime_1.jsx)(react_crypto_1.EthAccountBox, { address: eth_address_1.EthAddress.fromString(wrapper === null || wrapper === void 0 ? void 0 : wrapper.address) })] }), showQueries
27
+ ? wrapper === null || wrapper === void 0 ? void 0 : wrapper.queries().map((query) => {
28
+ return (0, jsx_runtime_1.jsx)(react_flexbox_1.FlexRow, { children: query }, query);
29
+ })
30
+ : null] })));
14
31
  };
15
32
  exports.ModuleDetailsBox = ModuleDetailsBox;
16
33
  //# sourceMappingURL=DetailsBox.js.map
package/dist/cjs/components/DetailsBox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DetailsBox.js","sourceRoot":"","sources":["../../../src/components/DetailsBox.tsx"],"names":[],"mappings":";;;;;AAAA,qDAAgD;AAChD,uDAAoD;AACpD,yDAA6D;AAC7D,gDAAmD;AAI5C,MAAM,gBAAgB,GAA+C,CAAC,EAAoB,EAAE,EAAE;QAAxB,EAAE,MAAM,OAAY,EAAP,KAAK,sBAAlB,UAAoB,CAAF;IAC7F,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,sBAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAC9D,OAAO,CACL,uBAAC,uBAAO,oBAAK,KAAK,cAChB,uBAAC,4BAAa,IAAC,OAAO,EAAE,wBAAU,CAAC,UAAU,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAC,GAAI,IAC3D,CACX,CAAA;AACH,CAAC,CAAA;AAPY,QAAA,gBAAgB,oBAO5B"}
1
+ {"version":3,"file":"DetailsBox.js","sourceRoot":"","sources":["../../../src/components/DetailsBox.tsx"],"names":[],"mappings":";;;;;AAAA,qDAAgD;AAChD,uDAA+C;AAC/C,uDAAoD;AACpD,yDAAsE;AACtE,gDAAmD;AACnD,4DAAgE;AAChE,iCAAgC;AAIhC,MAAM,aAAa,GAAG,CAAC,UAAkB,EAAE,OAAsB,EAAE,EAAE;;IACnE,OAAO,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,GAAG,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,qBAAqB,UAAU,EAAE,CAAC,CAAC,EAAC,CAAC,CAAC,MAAA,IAAA,mCAAoB,EAAC,UAAU,CAAC,0CAAE,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;AAClJ,CAAC,CAAA;AAEM,MAAM,gBAAgB,GAA+C,CAAC,EAAoB,EAAE,EAAE;QAAxB,EAAE,MAAM,OAAY,EAAP,KAAK,sBAAlB,UAAoB,CAAF;IAC7F,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,sBAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAC9D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAA;IACrD,OAAO,CACL,wBAAC,uBAAO,oBAAK,KAAK,eAChB,wBAAC,uBAAO,eACL,OAAO;wBACN,CAAC,CAAC,CAAC,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE;4BACxE,MAAM,IAAI,GAAG,aAAa,CAAC,UAAU,EAAE,OAAO,CAAC,CAAA;4BAC/C,OAAO,IAAI,CAAC,CAAC,CAAC,CACZ,uBAAC,uBAAQ,kBAAC,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,CAAC,WAAW,CAAC,gBAClD,IAAI,KADqD,UAAU,CAE3D,CACZ,CAAC,CAAC,CAAC,IAAI,CAAA;wBACV,CAAC,CAAC;wBACJ,CAAC,CAAC,IAAI,EACR,uBAAC,4BAAa,IAAC,OAAO,EAAE,wBAAU,CAAC,UAAU,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,CAAC,GAAI,IAC3D,EAET,WAAW;gBACV,CAAC,CAAC,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,OAAO,GAAG,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;oBAC/B,OAAO,uBAAC,uBAAO,cAAc,KAAK,IAAb,KAAK,CAAmB,CAAA;gBAC/C,CAAC,CAAC;gBACJ,CAAC,CAAC,IAAI,KACA,CACX,CAAA;AACH,CAAC,CAAA;AA1BY,QAAA,gBAAgB,oBA0B5B"}
package/dist/docs.json CHANGED
@@ -26,7 +26,7 @@
26
26
  "fileName": "packages/sdk/packages/module/src/ModuleRenderProps.tsx",
27
27
  "line": 4,
28
28
  "character": 2,
29
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/0caba57c845/packages/sdk/packages/module/src/ModuleRenderProps.tsx#L4"
29
+ "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/36fa9b623/packages/sdk/packages/module/src/ModuleRenderProps.tsx#L4"
30
30
  }
31
31
  ],
32
32
  "type": {
@@ -49,7 +49,7 @@
49
49
  "fileName": "packages/sdk/packages/module/src/ModuleRenderProps.tsx",
50
50
  "line": 3,
51
51
  "character": 17,
52
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/0caba57c845/packages/sdk/packages/module/src/ModuleRenderProps.tsx#L3"
52
+ "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/36fa9b623/packages/sdk/packages/module/src/ModuleRenderProps.tsx#L3"
53
53
  }
54
54
  ],
55
55
  "typeParameters": [
@@ -83,9 +83,9 @@
83
83
  "sources": [
84
84
  {
85
85
  "fileName": "packages/sdk/packages/module/src/components/CardActions.tsx",
86
- "line": 7,
86
+ "line": 12,
87
87
  "character": 13,
88
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/0caba57c845/packages/sdk/packages/module/src/components/CardActions.tsx#L7"
88
+ "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/36fa9b623/packages/sdk/packages/module/src/components/CardActions.tsx#L12"
89
89
  }
90
90
  ],
91
91
  "signatures": [
@@ -233,7 +233,7 @@
233
233
  "fileName": "packages/sdk/packages/module/src/components/CardContent.tsx",
234
234
  "line": 10,
235
235
  "character": 13,
236
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/0caba57c845/packages/sdk/packages/module/src/components/CardContent.tsx#L10"
236
+ "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/36fa9b623/packages/sdk/packages/module/src/components/CardContent.tsx#L10"
237
237
  }
238
238
  ],
239
239
  "signatures": [
@@ -514,7 +514,7 @@
514
514
  "fileName": "packages/sdk/packages/module/src/components/CardHeader.tsx",
515
515
  "line": 7,
516
516
  "character": 13,
517
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/0caba57c845/packages/sdk/packages/module/src/components/CardHeader.tsx#L7"
517
+ "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/36fa9b623/packages/sdk/packages/module/src/components/CardHeader.tsx#L7"
518
518
  }
519
519
  ],
520
520
  "signatures": [
@@ -817,9 +817,9 @@
817
817
  "sources": [
818
818
  {
819
819
  "fileName": "packages/sdk/packages/module/src/components/DetailsBox.tsx",
820
- "line": 8,
820
+ "line": 15,
821
821
  "character": 13,
822
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/0caba57c845/packages/sdk/packages/module/src/components/DetailsBox.tsx#L8"
822
+ "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/36fa9b623/packages/sdk/packages/module/src/components/DetailsBox.tsx#L15"
823
823
  }
824
824
  ],
825
825
  "signatures": [
@@ -967,7 +967,7 @@
967
967
  "fileName": "packages/sdk/packages/module/src/components/TableCell.tsx",
968
968
  "line": 8,
969
969
  "character": 13,
970
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/0caba57c845/packages/sdk/packages/module/src/components/TableCell.tsx#L8"
970
+ "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/36fa9b623/packages/sdk/packages/module/src/components/TableCell.tsx#L8"
971
971
  }
972
972
  ],
973
973
  "signatures": [
@@ -1128,7 +1128,7 @@
1128
1128
  "fileName": "packages/sdk/packages/module/src/index.ts",
1129
1129
  "line": 1,
1130
1130
  "character": 0,
1131
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/0caba57c845/packages/sdk/packages/module/src/index.ts#L1"
1131
+ "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/36fa9b623/packages/sdk/packages/module/src/index.ts#L1"
1132
1132
  }
1133
1133
  ]
1134
1134
  }
package/dist/esm/components/CardActions.js CHANGED
@@ -2,8 +2,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { CardActions } from '@mui/material';
3
3
  import { ButtonEx } from '@xylabs/react-button';
4
4
  import { ModuleWrapper } from '@xyo-network/module';
5
+ import { findNetworkComponent } from '@xyo-network/react-shared';
6
+ const getModuleIcons = (moduleType, wrapper) => {
7
+ return wrapper?.queries().find((query) => query.startsWith(`network.xyo.query.${moduleType}`)) ? findNetworkComponent(moduleType)?.icon() : null;
8
+ };
5
9
  export const ModuleCardActions = ({ children, module, ...props }) => {
6
10
  const wrapper = module ? new ModuleWrapper(module) : undefined;
7
- return (_jsxs(CardActions, { ...props, children: [_jsx(ButtonEx, { onClick: () => wrapper?.discover(), children: "Discover" }), children] }));
11
+ return (_jsxs(CardActions, { style: { justifyContent: 'space-between' }, ...props, children: [wrapper
12
+ ? ['sentinel', 'bridge', 'archivist', 'diviner', 'node'].map((moduleType) => {
13
+ const icon = getModuleIcons(moduleType, wrapper);
14
+ return icon ? _jsx(ButtonEx, { children: icon }, moduleType) : null;
15
+ })
16
+ : null, _jsx(ButtonEx, { onClick: () => wrapper?.discover(), children: "Discover" }), children] }));
8
17
  };
9
18
  //# sourceMappingURL=CardActions.js.map
package/dist/esm/components/CardActions.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CardActions.js","sourceRoot":"","sources":["../../../src/components/CardActions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAoB,MAAM,eAAe,CAAA;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAInD,MAAM,CAAC,MAAM,iBAAiB,GAAmD,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAClH,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAC9D,OAAO,CACL,MAAC,WAAW,OAAK,KAAK,aACpB,KAAC,QAAQ,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,yBAAqB,EAChE,QAAQ,IACG,CACf,CAAA;AACH,CAAC,CAAA"}
1
+ {"version":3,"file":"CardActions.js","sourceRoot":"","sources":["../../../src/components/CardActions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAoB,MAAM,eAAe,CAAA;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAA;AAIhE,MAAM,cAAc,GAAG,CAAC,UAAkB,EAAE,OAAsB,EAAE,EAAE;IACpE,OAAO,OAAO,EAAE,OAAO,EAAE,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,qBAAqB,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,oBAAoB,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;AAClJ,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAmD,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IAClH,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAC9D,OAAO,CACL,MAAC,WAAW,IAAC,KAAK,EAAE,EAAE,cAAc,EAAE,eAAe,EAAE,KAAM,KAAK,aAC/D,OAAO;gBACN,CAAC,CAAC,CAAC,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE;oBACxE,MAAM,IAAI,GAAG,cAAc,CAAC,UAAU,EAAE,OAAO,CAAC,CAAA;oBAChD,OAAO,IAAI,CAAC,CAAC,CAAC,KAAC,QAAQ,cAAmB,IAAI,IAAjB,UAAU,CAAmB,CAAC,CAAC,CAAC,IAAI,CAAA;gBACnE,CAAC,CAAC;gBACJ,CAAC,CAAC,IAAI,EACR,KAAC,QAAQ,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,yBAAqB,EAChE,QAAQ,IACG,CACf,CAAA;AACH,CAAC,CAAA"}
package/dist/esm/components/DetailsBox.js CHANGED
@@ -1,10 +1,26 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { EthAddress } from '@xylabs/eth-address';
3
+ import { ButtonEx } from '@xylabs/react-button';
3
4
  import { EthAccountBox } from '@xylabs/react-crypto';
4
- import { FlexCol } from '@xylabs/react-flexbox';
5
+ import { FlexCol, FlexRow } from '@xylabs/react-flexbox';
5
6
  import { ModuleWrapper } from '@xyo-network/module';
7
+ import { findNetworkComponent } from '@xyo-network/react-shared';
8
+ import { useState } from 'react';
9
+ const getModuleIcon = (moduleType, wrapper) => {
10
+ return wrapper?.queries().find((query) => query.startsWith(`network.xyo.query.${moduleType}`)) ? findNetworkComponent(moduleType)?.icon() : null;
11
+ };
6
12
  export const ModuleDetailsBox = ({ module, ...props }) => {
7
13
  const wrapper = module ? new ModuleWrapper(module) : undefined;
8
- return (_jsx(FlexCol, { ...props, children: _jsx(EthAccountBox, { address: EthAddress.fromString(wrapper?.address) }) }));
14
+ const [showQueries, setShowQueries] = useState(false);
15
+ return (_jsxs(FlexCol, { ...props, children: [_jsxs(FlexRow, { children: [wrapper
16
+ ? ['sentinel', 'bridge', 'archivist', 'diviner', 'node'].map((moduleType) => {
17
+ const icon = getModuleIcon(moduleType, wrapper);
18
+ return icon ? (_jsx(ButtonEx, { onClick: () => setShowQueries(!showQueries), children: icon }, moduleType)) : null;
19
+ })
20
+ : null, _jsx(EthAccountBox, { address: EthAddress.fromString(wrapper?.address) })] }), showQueries
21
+ ? wrapper?.queries().map((query) => {
22
+ return _jsx(FlexRow, { children: query }, query);
23
+ })
24
+ : null] }));
9
25
  };
10
26
  //# sourceMappingURL=DetailsBox.js.map
package/dist/esm/components/DetailsBox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DetailsBox.js","sourceRoot":"","sources":["../../../src/components/DetailsBox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACpD,OAAO,EAAgB,OAAO,EAAE,MAAM,uBAAuB,CAAA;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAInD,MAAM,CAAC,MAAM,gBAAgB,GAA+C,CAAC,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACnG,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAC9D,OAAO,CACL,KAAC,OAAO,OAAK,KAAK,YAChB,KAAC,aAAa,IAAC,OAAO,EAAE,UAAU,CAAC,UAAU,CAAC,OAAO,EAAE,OAAO,CAAC,GAAI,GAC3D,CACX,CAAA;AACH,CAAC,CAAA"}
1
+ {"version":3,"file":"DetailsBox.js","sourceRoot":"","sources":["../../../src/components/DetailsBox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACpD,OAAO,EAAgB,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAA;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAA;AAChE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAIhC,MAAM,aAAa,GAAG,CAAC,UAAkB,EAAE,OAAsB,EAAE,EAAE;IACnE,OAAO,OAAO,EAAE,OAAO,EAAE,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,qBAAqB,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,oBAAoB,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAA;AAClJ,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAA+C,CAAC,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACnG,MAAM,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAC9D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACrD,OAAO,CACL,MAAC,OAAO,OAAK,KAAK,aAChB,MAAC,OAAO,eACL,OAAO;wBACN,CAAC,CAAC,CAAC,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE;4BACxE,MAAM,IAAI,GAAG,aAAa,CAAC,UAAU,EAAE,OAAO,CAAC,CAAA;4BAC/C,OAAO,IAAI,CAAC,CAAC,CAAC,CACZ,KAAC,QAAQ,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,CAAC,WAAW,CAAC,YAClD,IAAI,IADqD,UAAU,CAE3D,CACZ,CAAC,CAAC,CAAC,IAAI,CAAA;wBACV,CAAC,CAAC;wBACJ,CAAC,CAAC,IAAI,EACR,KAAC,aAAa,IAAC,OAAO,EAAE,UAAU,CAAC,UAAU,CAAC,OAAO,EAAE,OAAO,CAAC,GAAI,IAC3D,EAET,WAAW;gBACV,CAAC,CAAC,OAAO,EAAE,OAAO,EAAE,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;oBAC/B,OAAO,KAAC,OAAO,cAAc,KAAK,IAAb,KAAK,CAAmB,CAAA;gBAC/C,CAAC,CAAC;gBACJ,CAAC,CAAC,IAAI,IACA,CACX,CAAA;AACH,CAAC,CAAA"}
package/dist/types/components/CardActions.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CardActions.d.ts","sourceRoot":"","sources":["../../../src/components/CardActions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAI7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAExD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,GAAG,iBAAiB,CAQ5E,CAAA"}
1
+ {"version":3,"file":"CardActions.d.ts","sourceRoot":"","sources":["../../../src/components/CardActions.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAK7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAMxD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,GAAG,iBAAiB,CAc5E,CAAA"}
package/dist/types/components/DetailsBox.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"DetailsBox.d.ts","sourceRoot":"","sources":["../../../src/components/DetailsBox.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,YAAY,EAAW,MAAM,uBAAuB,CAAA;AAG7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAExD,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,GAAG,YAAY,CAOvE,CAAA"}
1
+ {"version":3,"file":"DetailsBox.d.ts","sourceRoot":"","sources":["../../../src/components/DetailsBox.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,YAAY,EAAoB,MAAM,uBAAuB,CAAA;AAKtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAA;AAMxD,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,GAAG,YAAY,CA0BvE,CAAA"}
package/package.json CHANGED
@@ -16,13 +16,15 @@
16
16
  "@xylabs/react-flexbox": "^2.16.8",
17
17
  "@xylabs/react-identicon": "^2.16.8",
18
18
  "@xylabs/react-shared": "^2.16.8",
19
- "@xyo-network/archivist": "^2.43.36",
20
- "@xyo-network/module": "^2.43.36"
19
+ "@xyo-network/module": "^2.43.36",
20
+ "@xyo-network/react-shared": "^2.41.54"
21
21
  },
22
22
  "devDependencies": {
23
23
  "@storybook/react": "^6.5.16",
24
- "@xylabs/ts-scripts-yarn3": "^2.14.13",
25
- "@xylabs/tsconfig-react": "^2.14.13",
24
+ "@xylabs/ts-scripts-yarn3": "^2.14.14",
25
+ "@xylabs/tsconfig-react": "^2.14.14",
26
+ "@xyo-network/archivist": "^2.43.36",
27
+ "@xyo-network/crypto-asset-plugin": "^2.43.36",
26
28
  "require-from-string": "^2.0.2",
27
29
  "typescript": "^4.9.5"
28
30
  },
@@ -77,5 +79,5 @@
77
79
  },
78
80
  "sideEffects": false,
79
81
  "types": "dist/types/index.d.ts",
80
- "version": "2.41.52"
82
+ "version": "2.41.54"
81
83
  }
package/src/components/CardActions.tsx CHANGED
@@ -1,13 +1,24 @@
1
1
  import { CardActions, CardActionsProps } from '@mui/material'
2
2
  import { ButtonEx } from '@xylabs/react-button'
3
3
  import { ModuleWrapper } from '@xyo-network/module'
4
+ import { findNetworkComponent } from '@xyo-network/react-shared'
4
5
 
5
6
  import { ModuleRenderProps } from '../ModuleRenderProps'
6
7
 
8
+ const getModuleIcons = (moduleType: string, wrapper: ModuleWrapper) => {
9
+ return wrapper?.queries().find((query) => query.startsWith(`network.xyo.query.${moduleType}`)) ? findNetworkComponent(moduleType)?.icon() : null
10
+ }
11
+
7
12
  export const ModuleCardActions: React.FC<CardActionsProps & ModuleRenderProps> = ({ children, module, ...props }) => {
8
13
  const wrapper = module ? new ModuleWrapper(module) : undefined
9
14
  return (
10
- <CardActions {...props}>
15
+ <CardActions style={{ justifyContent: 'space-between' }} {...props}>
16
+ {wrapper
17
+ ? ['sentinel', 'bridge', 'archivist', 'diviner', 'node'].map((moduleType) => {
18
+ const icon = getModuleIcons(moduleType, wrapper)
19
+ return icon ? <ButtonEx key={moduleType}>{icon}</ButtonEx> : null
20
+ })
21
+ : null}
11
22
  <ButtonEx onClick={() => wrapper?.discover()}>Discover</ButtonEx>
12
23
  {children}
13
24
  </CardActions>
package/src/components/DetailsBox.stories.tsx ADDED
@@ -0,0 +1,91 @@
1
+ import { ComponentMeta, ComponentStory } from '@storybook/react'
2
+ import { FlexCol } from '@xylabs/react-flexbox'
3
+ import { useAsyncEffect } from '@xylabs/react-shared'
4
+ import { MemoryArchivist } from '@xyo-network/archivist'
5
+ import { XyoCryptoMarketAssetDiviner } from '@xyo-network/crypto-asset-plugin'
6
+ import { MemoryNode } from '@xyo-network/node'
7
+ import { useState } from 'react'
8
+
9
+ import { ModuleDetailsBox } from './DetailsBox'
10
+
11
+ const StorybookEntry = {
12
+ argTypes: {},
13
+ component: ModuleDetailsBox,
14
+ parameters: {
15
+ docs: {
16
+ page: null,
17
+ },
18
+ },
19
+ title: 'module/DetailsBox',
20
+ } as ComponentMeta<typeof ModuleDetailsBox>
21
+
22
+ const NodeTemplate: ComponentStory<typeof ModuleDetailsBox> = (args) => {
23
+ const [node, setNode] = useState<MemoryNode>()
24
+ useAsyncEffect(
25
+ // eslint-disable-next-line react-hooks/exhaustive-deps
26
+ async (mounted) => {
27
+ const node = await MemoryNode.create()
28
+ if (mounted()) {
29
+ setNode(node)
30
+ }
31
+ },
32
+ [],
33
+ )
34
+ return (
35
+ <FlexCol minHeight="80vh" alignItems="stretch">
36
+ <ModuleDetailsBox module={node} {...args} />
37
+ </FlexCol>
38
+ )
39
+ }
40
+
41
+ const NodeDetails = NodeTemplate.bind({})
42
+ NodeDetails.args = {}
43
+
44
+ const ArchivistTemplate: ComponentStory<typeof ModuleDetailsBox> = (args) => {
45
+ const [archivist, setArchivist] = useState<MemoryArchivist>()
46
+ useAsyncEffect(
47
+ // eslint-disable-next-line react-hooks/exhaustive-deps
48
+ async (mounted) => {
49
+ const archivist = await MemoryArchivist.create()
50
+ if (mounted()) {
51
+ setArchivist(archivist)
52
+ }
53
+ },
54
+ [],
55
+ )
56
+ return (
57
+ <FlexCol minHeight="80vh" alignItems="stretch">
58
+ <ModuleDetailsBox module={archivist} {...args} />
59
+ </FlexCol>
60
+ )
61
+ }
62
+
63
+ const ArchivistDetails = ArchivistTemplate.bind({})
64
+ ArchivistDetails.args = {}
65
+
66
+ const DivinerTemplate: ComponentStory<typeof ModuleDetailsBox> = (args) => {
67
+ const [diviner, setDiviner] = useState<XyoCryptoMarketAssetDiviner>()
68
+ useAsyncEffect(
69
+ // eslint-disable-next-line react-hooks/exhaustive-deps
70
+ async (mounted) => {
71
+ const diviner = await XyoCryptoMarketAssetDiviner.create()
72
+ if (mounted()) {
73
+ setDiviner(diviner)
74
+ }
75
+ },
76
+ [],
77
+ )
78
+ return (
79
+ <FlexCol minHeight="80vh" alignItems="stretch">
80
+ <ModuleDetailsBox module={diviner} {...args} />
81
+ </FlexCol>
82
+ )
83
+ }
84
+
85
+ const DivinerDetails = DivinerTemplate.bind({})
86
+ DivinerDetails.args = {}
87
+
88
+ export { ArchivistDetails, DivinerDetails, NodeDetails }
89
+
90
+ // eslint-disable-next-line import/no-default-export
91
+ export default StorybookEntry
package/src/components/DetailsBox.tsx CHANGED
@@ -1,15 +1,41 @@
1
1
  import { EthAddress } from '@xylabs/eth-address'
2
+ import { ButtonEx } from '@xylabs/react-button'
2
3
  import { EthAccountBox } from '@xylabs/react-crypto'
3
- import { FlexBoxProps, FlexCol } from '@xylabs/react-flexbox'
4
+ import { FlexBoxProps, FlexCol, FlexRow } from '@xylabs/react-flexbox'
4
5
  import { ModuleWrapper } from '@xyo-network/module'
6
+ import { findNetworkComponent } from '@xyo-network/react-shared'
7
+ import { useState } from 'react'
5
8
 
6
9
  import { ModuleRenderProps } from '../ModuleRenderProps'
7
10
 
11
+ const getModuleIcon = (moduleType: string, wrapper: ModuleWrapper) => {
12
+ return wrapper?.queries().find((query) => query.startsWith(`network.xyo.query.${moduleType}`)) ? findNetworkComponent(moduleType)?.icon() : null
13
+ }
14
+
8
15
  export const ModuleDetailsBox: React.FC<ModuleRenderProps & FlexBoxProps> = ({ module, ...props }) => {
9
16
  const wrapper = module ? new ModuleWrapper(module) : undefined
17
+ const [showQueries, setShowQueries] = useState(false)
10
18
  return (
11
19
  <FlexCol {...props}>
12
- <EthAccountBox address={EthAddress.fromString(wrapper?.address)} />
20
+ <FlexRow>
21
+ {wrapper
22
+ ? ['sentinel', 'bridge', 'archivist', 'diviner', 'node'].map((moduleType) => {
23
+ const icon = getModuleIcon(moduleType, wrapper)
24
+ return icon ? (
25
+ <ButtonEx onClick={() => setShowQueries(!showQueries)} key={moduleType}>
26
+ {icon}
27
+ </ButtonEx>
28
+ ) : null
29
+ })
30
+ : null}
31
+ <EthAccountBox address={EthAddress.fromString(wrapper?.address)} />
32
+ </FlexRow>
33
+
34
+ {showQueries
35
+ ? wrapper?.queries().map((query) => {
36
+ return <FlexRow key={query}>{query}</FlexRow>
37
+ })
38
+ : null}
13
39
  </FlexCol>
14
40
  )
15
41
  }