@xylabs/sdk-react 2.9.16 → 2.9.21

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 (94) hide show
  1. package/dist/cjs5/components/InvertableThemeProvider/InvertableThemeProvider.stories.d.ts +2 -1
  2. package/dist/cjs5/components/InvertableThemeProvider/InvertableThemeProviderProps.d.ts +1 -0
  3. package/dist/cjs5/components/Pixel/PixelDebuggerProvider.d.ts +2 -0
  4. package/dist/cjs5/components/Pixel/index.d.ts +1 -0
  5. package/dist/cjs5/components/TokenAmount/TokenAmountProps.d.ts +1 -0
  6. package/dist/cjs5/contexts/UserEvents/Context.d.ts +6 -1
  7. package/dist/cjs5/contexts/UserEvents/index.d.ts +1 -2
  8. package/dist/cjs5/index.js +48 -27
  9. package/dist/cjs5/index.js.map +1 -1
  10. package/dist/components/InvertableThemeProvider/InvertableThemeProvider.js +6 -2
  11. package/dist/components/InvertableThemeProvider/InvertableThemeProvider.js.map +1 -1
  12. package/dist/components/InvertableThemeProvider/InvertableThemeProvider.stories.d.ts +2 -1
  13. package/dist/components/InvertableThemeProvider/InvertableThemeProvider.stories.js +33 -3
  14. package/dist/components/InvertableThemeProvider/InvertableThemeProvider.stories.js.map +1 -1
  15. package/dist/components/InvertableThemeProvider/InvertableThemeProviderProps.d.ts +1 -0
  16. package/dist/components/Pixel/PixelDebugger.js +13 -7
  17. package/dist/components/Pixel/PixelDebugger.js.map +1 -1
  18. package/dist/components/Pixel/PixelDebugger.stories.js +3 -2
  19. package/dist/components/Pixel/PixelDebugger.stories.js.map +1 -1
  20. package/dist/components/Pixel/PixelDebuggerProvider.d.ts +2 -0
  21. package/dist/components/Pixel/PixelDebuggerProvider.js +8 -0
  22. package/dist/components/Pixel/PixelDebuggerProvider.js.map +1 -0
  23. package/dist/components/Pixel/PixelDebuggerToggle.js +4 -5
  24. package/dist/components/Pixel/PixelDebuggerToggle.js.map +1 -1
  25. package/dist/components/Pixel/index.d.ts +1 -0
  26. package/dist/components/Pixel/index.js +1 -0
  27. package/dist/components/Pixel/index.js.map +1 -1
  28. package/dist/components/TokenAmount/TokenAmountProps.d.ts +1 -0
  29. package/dist/contexts/UserEvents/Context.d.ts +6 -1
  30. package/dist/contexts/UserEvents/Context.js +7 -1
  31. package/dist/contexts/UserEvents/Context.js.map +1 -1
  32. package/dist/contexts/UserEvents/index.d.ts +1 -2
  33. package/dist/contexts/UserEvents/index.js +1 -2
  34. package/dist/contexts/UserEvents/index.js.map +1 -1
  35. package/dist/esm2015/components/InvertableThemeProvider/InvertableThemeProvider.stories.d.ts +2 -1
  36. package/dist/esm2015/components/InvertableThemeProvider/InvertableThemeProviderProps.d.ts +1 -0
  37. package/dist/esm2015/components/Pixel/PixelDebuggerProvider.d.ts +2 -0
  38. package/dist/esm2015/components/Pixel/index.d.ts +1 -0
  39. package/dist/esm2015/components/TokenAmount/TokenAmountProps.d.ts +1 -0
  40. package/dist/esm2015/contexts/UserEvents/Context.d.ts +6 -1
  41. package/dist/esm2015/contexts/UserEvents/index.d.ts +1 -2
  42. package/dist/esm2015/index.js +47 -28
  43. package/dist/esm2015/index.js.map +1 -1
  44. package/dist/esm2017/components/InvertableThemeProvider/InvertableThemeProvider.stories.d.ts +2 -1
  45. package/dist/esm2017/components/InvertableThemeProvider/InvertableThemeProviderProps.d.ts +1 -0
  46. package/dist/esm2017/components/Pixel/PixelDebuggerProvider.d.ts +2 -0
  47. package/dist/esm2017/components/Pixel/index.d.ts +1 -0
  48. package/dist/esm2017/components/TokenAmount/TokenAmountProps.d.ts +1 -0
  49. package/dist/esm2017/contexts/UserEvents/Context.d.ts +6 -1
  50. package/dist/esm2017/contexts/UserEvents/index.d.ts +1 -2
  51. package/dist/esm2017/index.js +47 -28
  52. package/dist/esm2017/index.js.map +1 -1
  53. package/dist/esm5/components/InvertableThemeProvider/InvertableThemeProvider.stories.d.ts +2 -1
  54. package/dist/esm5/components/InvertableThemeProvider/InvertableThemeProviderProps.d.ts +1 -0
  55. package/dist/esm5/components/Pixel/PixelDebuggerProvider.d.ts +2 -0
  56. package/dist/esm5/components/Pixel/index.d.ts +1 -0
  57. package/dist/esm5/components/TokenAmount/TokenAmountProps.d.ts +1 -0
  58. package/dist/esm5/contexts/UserEvents/Context.d.ts +6 -1
  59. package/dist/esm5/contexts/UserEvents/index.d.ts +1 -2
  60. package/dist/esm5/index.js +47 -28
  61. package/dist/esm5/index.js.map +1 -1
  62. package/dist/hooks/useLocalStorage.js +1 -1
  63. package/dist/hooks/useLocalStorage.js.map +1 -1
  64. package/dist/node/components/InvertableThemeProvider/InvertableThemeProvider.stories.d.ts +2 -1
  65. package/dist/node/components/InvertableThemeProvider/InvertableThemeProviderProps.d.ts +1 -0
  66. package/dist/node/components/Pixel/PixelDebuggerProvider.d.ts +2 -0
  67. package/dist/node/components/Pixel/index.d.ts +1 -0
  68. package/dist/node/components/TokenAmount/TokenAmountProps.d.ts +1 -0
  69. package/dist/node/contexts/UserEvents/Context.d.ts +6 -1
  70. package/dist/node/contexts/UserEvents/index.d.ts +1 -2
  71. package/dist/node/index.js +48 -27
  72. package/dist/node/index.js.map +1 -1
  73. package/dist/node-esm/components/InvertableThemeProvider/InvertableThemeProvider.stories.d.ts +2 -1
  74. package/dist/node-esm/components/InvertableThemeProvider/InvertableThemeProviderProps.d.ts +1 -0
  75. package/dist/node-esm/components/Pixel/PixelDebuggerProvider.d.ts +2 -0
  76. package/dist/node-esm/components/Pixel/index.d.ts +1 -0
  77. package/dist/node-esm/components/TokenAmount/TokenAmountProps.d.ts +1 -0
  78. package/dist/node-esm/contexts/UserEvents/Context.d.ts +6 -1
  79. package/dist/node-esm/contexts/UserEvents/index.d.ts +1 -2
  80. package/dist/node-esm/index.js +47 -28
  81. package/dist/node-esm/index.js.map +1 -1
  82. package/package.json +1 -1
  83. package/src/components/InvertableThemeProvider/InvertableThemeProvider.stories.tsx +49 -2
  84. package/src/components/InvertableThemeProvider/InvertableThemeProvider.tsx +7 -1
  85. package/src/components/InvertableThemeProvider/InvertableThemeProviderProps.ts +1 -0
  86. package/src/components/Pixel/PixelDebugger.stories.tsx +5 -4
  87. package/src/components/Pixel/PixelDebugger.tsx +44 -35
  88. package/src/components/Pixel/PixelDebuggerProvider.tsx +11 -0
  89. package/src/components/Pixel/PixelDebuggerToggle.tsx +4 -10
  90. package/src/components/Pixel/index.ts +1 -0
  91. package/src/contexts/UserEvents/Context.ts +14 -2
  92. package/src/contexts/UserEvents/index.ts +1 -2
  93. package/src/hooks/useLocalStorage.ts +1 -1
  94. package/xylabs-sdk-react-v2.8.2.tgz +0 -0
@@ -1,10 +1,13 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { Badge, Card, Divider, Typography, useTheme } from '@mui/material';
3
- import { useState } from 'react';
3
+ import { useContext, useState } from 'react';
4
+ import { DebugUserEventsContext } from '../../contexts';
4
5
  import { ButtonEx } from '../ButtonEx';
5
6
  import { FlexCol } from '../FlexBox';
7
+ import { Portal } from '../Portal';
6
8
  import { usePixelAltSendHandler } from './hooks';
7
9
  export const PixelDebugger = () => {
10
+ const { isDebugging } = useContext(DebugUserEventsContext);
8
11
  //TODO - when adding in the location hook to detect location change, was dropping the setEvents in usePixelAltSendHand
9
12
  const theme = useTheme();
10
13
  const [displayEvents, setDisplayEvents] = useState(false);
@@ -12,12 +15,15 @@ export const PixelDebugger = () => {
12
15
  usePixelAltSendHandler((event, fields) => {
13
16
  setEvents((events) => [{ event, fields }, ...events]);
14
17
  });
15
- return (_jsx("div", Object.assign({ style: { bottom: 0, left: 0, position: 'fixed', width: 350 } }, { children: _jsx(Badge, Object.assign({ badgeContent: events.length, color: "primary", sx: { width: '100%' } }, { children: _jsx(Card, Object.assign({ variant: "outlined", sx: {
16
- backdropFilter: 'blur(16px) saturate(180%)',
17
- backgroundColor: 'rgba(18, 18, 18, .70)',
18
- overflowY: 'auto',
19
- width: '100%',
20
- }, color: theme.palette.primary.main }, { children: _jsxs(FlexCol, Object.assign({ alignItems: "stretch", sx: { flexFlow: 'column', maxHeight: 400 } }, { children: [_jsx(FlexCol, Object.assign({ alignItems: "stretch", sx: { flex: '0 1 auto' } }, { children: _jsx(ButtonEx, Object.assign({ variant: "text", onClick: () => setDisplayEvents(!displayEvents) }, { children: "XY Pixel Debugger" }), void 0) }), void 0), displayEvents && !!events.length && (_jsx(FlexCol, Object.assign({ alignItems: "stretch", alignContent: "start", padding: 2, sx: { cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none' } }, { children: events.map((e, index) => (_jsx(PixelEventDetails, Object.assign({ events: events, index: index }, e), `${e.event}-${index}`))) }), void 0)), displayEvents && !events.length && _jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: "No Events" }), void 0)] }), void 0) }), void 0) }), void 0) }), void 0));
18
+ if (!isDebugging) {
19
+ return null;
20
+ }
21
+ return (_jsx(Portal, { children: _jsx("div", Object.assign({ style: { bottom: 0, left: 0, position: 'fixed', width: 350 } }, { children: _jsx(Badge, Object.assign({ badgeContent: events.length, color: "primary", sx: { width: '100%' } }, { children: _jsx(Card, Object.assign({ variant: "outlined", sx: {
22
+ backdropFilter: 'blur(16px) saturate(180%)',
23
+ backgroundColor: 'rgba(18, 18, 18, .70)',
24
+ overflowY: 'auto',
25
+ width: '100%',
26
+ }, color: theme.palette.primary.main }, { children: _jsxs(FlexCol, Object.assign({ alignItems: "stretch", sx: { flexFlow: 'column', maxHeight: 400 } }, { children: [_jsx(FlexCol, Object.assign({ alignItems: "stretch", sx: { flex: '0 1 auto' } }, { children: _jsx(ButtonEx, Object.assign({ variant: "text", onClick: () => setDisplayEvents(!displayEvents) }, { children: "XY Pixel Debugger" }), void 0) }), void 0), displayEvents && !!events.length && (_jsx(FlexCol, Object.assign({ alignItems: "stretch", alignContent: "start", padding: 2, sx: { cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none' } }, { children: events.map((e, index) => (_jsx(PixelEventDetails, Object.assign({ events: events, index: index }, e), `${e.event}-${index}`))) }), void 0)), displayEvents && !events.length && _jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: "No Events" }), void 0)] }), void 0) }), void 0) }), void 0) }), void 0) }, void 0));
21
27
  };
22
28
  const PixelEventDetails = ({ event, fields, index, events, }) => {
23
29
  const [isOpen, setIsOpen] = useState(false);
@@ -1 +1 @@
1
- {"version":3,"file":"PixelDebugger.js","sourceRoot":"","sources":["../../../src/components/Pixel/PixelDebugger.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"PixelDebugger.js","sourceRoot":"","sources":["../../../src/components/Pixel/PixelDebugger.tsx"],"names":[],"mappings":"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"}
@@ -1,7 +1,8 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { PixelApi, XyPixel } from '@xylabs/pixel';
3
3
  import { useEffect } from 'react';
4
- import { PixelDebuggerToggle } from './index';
4
+ import { PixelDebugger, PixelDebuggerToggle } from './index';
5
+ import { PixelDebuggerProvider } from './PixelDebuggerProvider';
5
6
  const StorybookEntry = {
6
7
  argTypes: {},
7
8
  component: PixelDebuggerToggle,
@@ -17,7 +18,7 @@ const Template = (args) => {
17
18
  XyPixel.selectApi(new PixelApi('local'));
18
19
  XyPixel.init('storybookPixel');
19
20
  }, []);
20
- return (_jsxs("div", { children: [_jsx(PixelDebuggerToggle, Object.assign({}, args), void 0), _jsx("div", { id: "pixelPortal" }, void 0)] }, void 0));
21
+ return (_jsxs(PixelDebuggerProvider, { children: [_jsx(PixelDebuggerToggle, Object.assign({}, args), void 0), _jsx(PixelDebugger, {}, void 0)] }, void 0));
21
22
  };
22
23
  const Default = Template.bind({});
23
24
  Default.args = {};
@@ -1 +1 @@
1
- {"version":3,"file":"PixelDebugger.stories.js","sourceRoot":"","sources":["../../../src/components/Pixel/PixelDebugger.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAE7C,MAAM,cAAc,GAAG;IACrB,QAAQ,EAAE,EAAE;IACZ,SAAS,EAAE,mBAAmB;IAC9B,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,IAAI,EAAE,IAAI;SACX;KACF;IACD,KAAK,EAAE,gCAAgC;CACK,CAAA;AAE9C,MAAM,QAAQ,GAA+C,CAAC,IAAI,EAAE,EAAE;IACpE,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,SAAS,CAAC,IAAI,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAA;QACxC,OAAO,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;IAChC,CAAC,EAAE,EAAE,CAAC,CAAA;IACN,OAAO,CACL,0BACE,KAAC,mBAAmB,oBAAK,IAAI,UAAI,EACjC,cAAK,EAAE,EAAC,aAAa,WAAG,YACpB,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACjC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAA;AAEjB,OAAO,EAAE,OAAO,EAAE,CAAA;AAElB,oDAAoD;AACpD,eAAe,cAAc,CAAA"}
1
+ {"version":3,"file":"PixelDebugger.stories.js","sourceRoot":"","sources":["../../../src/components/Pixel/PixelDebugger.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAA;AAC5D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAA;AAE/D,MAAM,cAAc,GAAG;IACrB,QAAQ,EAAE,EAAE;IACZ,SAAS,EAAE,mBAAmB;IAC9B,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,IAAI,EAAE,IAAI;SACX;KACF;IACD,KAAK,EAAE,gCAAgC;CACK,CAAA;AAE9C,MAAM,QAAQ,GAA+C,CAAC,IAAI,EAAE,EAAE;IACpE,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,CAAC,SAAS,CAAC,IAAI,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAA;QACxC,OAAO,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAA;IAChC,CAAC,EAAE,EAAE,CAAC,CAAA;IACN,OAAO,CACL,MAAC,qBAAqB,eACpB,KAAC,mBAAmB,oBAAK,IAAI,UAAI,EACjC,KAAC,aAAa,aAAG,YACK,CACzB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACjC,OAAO,CAAC,IAAI,GAAG,EAAE,CAAA;AAEjB,OAAO,EAAE,OAAO,EAAE,CAAA;AAElB,oDAAoD;AACpD,eAAe,cAAc,CAAA"}
@@ -0,0 +1,2 @@
1
+ /// <reference types="react" />
2
+ export declare const PixelDebuggerProvider: React.FC;
@@ -0,0 +1,8 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { DebugUserEventsContext } from '../../contexts';
3
+ import { useLocalStorage } from '../../hooks';
4
+ export const PixelDebuggerProvider = ({ children }) => {
5
+ const [isDebugging, setIsDebugging] = useLocalStorage('isDebuggingPixel', false);
6
+ return (_jsx(DebugUserEventsContext.Provider, Object.assign({ value: { isDebugging, setIsDebugging } }, { children: children }), void 0));
7
+ };
8
+ //# sourceMappingURL=PixelDebuggerProvider.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"PixelDebuggerProvider.js","sourceRoot":"","sources":["../../../src/components/Pixel/PixelDebuggerProvider.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAA;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAE7C,MAAM,CAAC,MAAM,qBAAqB,GAAa,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC9D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,eAAe,CAAU,kBAAkB,EAAE,KAAK,CAAC,CAAA;IACzF,OAAO,CACL,KAAC,sBAAsB,CAAC,QAAQ,kBAAC,KAAK,EAAE,EAAE,WAAW,EAAE,cAAc,EAAE,gBACpE,QAAQ,YACuB,CACnC,CAAA;AACH,CAAC,CAAA"}
@@ -1,13 +1,12 @@
1
1
  import { __rest } from "tslib";
2
2
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import { FormControl, FormLabel, Switch } from '@mui/material';
4
- import { useLocalStorage } from '../../hooks';
4
+ import { useContext } from 'react';
5
+ import { DebugUserEventsContext } from '../../contexts';
5
6
  import { FlexRow } from '../FlexBox';
6
- import { Portal } from '../Portal';
7
- import { PixelDebugger } from './PixelDebugger';
8
7
  export const PixelDebuggerToggle = (_a) => {
9
8
  var props = __rest(_a, []);
10
- const [showDebugger, setDebugger] = useLocalStorage('isDebuggingPixel', false);
11
- return (_jsxs(FlexRow, Object.assign({}, props, { children: [_jsxs(FormControl, { children: [_jsx(FormLabel, { children: "Enable Debugger" }, void 0), _jsx(Switch, { checked: showDebugger, onClick: () => setDebugger(!showDebugger) }, void 0)] }, void 0), showDebugger && (_jsx(Portal, Object.assign({ target: "#pixelPortal" }, { children: _jsx(PixelDebugger, {}, void 0) }), void 0))] }), void 0));
9
+ const { setIsDebugging, isDebugging } = useContext(DebugUserEventsContext);
10
+ return (_jsx(FlexRow, Object.assign({}, props, { children: _jsxs(FormControl, { children: [_jsx(FormLabel, { children: "Enable Debugger" }, void 0), _jsx(Switch, { checked: isDebugging, onClick: () => setIsDebugging(!isDebugging) }, void 0)] }, void 0) }), void 0));
12
11
  };
13
12
  //# sourceMappingURL=PixelDebuggerToggle.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"PixelDebuggerToggle.js","sourceRoot":"","sources":["../../../src/components/Pixel/PixelDebuggerToggle.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAE9D,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAC7C,OAAO,EAAgB,OAAO,EAAE,MAAM,YAAY,CAAA;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,MAAM,CAAC,MAAM,mBAAmB,GAA2B,CAAC,EAAY,EAAE,EAAE;QAAX,KAAK,cAAV,EAAY,CAAF;IACpE,MAAM,CAAC,YAAY,EAAE,WAAW,CAAC,GAAG,eAAe,CAAU,kBAAkB,EAAE,KAAK,CAAC,CAAA;IAEvF,OAAO,CACL,MAAC,OAAO,oBAAK,KAAK,eAChB,MAAC,WAAW,eACV,KAAC,SAAS,0CAA4B,EACtC,KAAC,MAAM,IAAC,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,WAAW,CAAC,CAAC,YAAY,CAAC,WAAI,YAChE,EACb,YAAY,IAAI,CACf,KAAC,MAAM,kBAAC,MAAM,EAAC,cAAc,gBAC3B,KAAC,aAAa,aAAG,YACV,CACV,aACO,CACX,CAAA;AACH,CAAC,CAAA"}
1
+ {"version":3,"file":"PixelDebuggerToggle.js","sourceRoot":"","sources":["../../../src/components/Pixel/PixelDebuggerToggle.tsx"],"names":[],"mappings":";;AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAElC,OAAO,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAA;AACvD,OAAO,EAAgB,OAAO,EAAE,MAAM,YAAY,CAAA;AAElD,MAAM,CAAC,MAAM,mBAAmB,GAA2B,CAAC,EAAY,EAAE,EAAE;QAAX,KAAK,cAAV,EAAY,CAAF;IACpE,MAAM,EAAE,cAAc,EAAE,WAAW,EAAE,GAAG,UAAU,CAAC,sBAAsB,CAAC,CAAA;IAE1E,OAAO,CACL,KAAC,OAAO,oBAAK,KAAK,cAChB,MAAC,WAAW,eACV,KAAC,SAAS,0CAA4B,EACtC,KAAC,MAAM,IAAC,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,CAAC,WAAW,CAAC,WAAI,YACjE,YACN,CACX,CAAA;AACH,CAAC,CAAA"}
@@ -1,2 +1,3 @@
1
1
  export * from './PixelDebugger';
2
+ export * from './PixelDebuggerProvider';
2
3
  export * from './PixelDebuggerToggle';
@@ -1,3 +1,4 @@
1
1
  export * from './PixelDebugger';
2
+ export * from './PixelDebuggerProvider';
2
3
  export * from './PixelDebuggerToggle';
3
4
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Pixel/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,uBAAuB,CAAA"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Pixel/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,yBAAyB,CAAA;AACvC,cAAc,uBAAuB,CAAA"}
@@ -1,3 +1,4 @@
1
+ /// <reference types="bn.js" />
1
2
  import { BigNumber } from '@xylabs/sdk-js';
2
3
  import { MouseEventHandler } from 'react';
3
4
  import { ButtonExProps } from '../ButtonEx';
@@ -4,4 +4,9 @@ interface Props {
4
4
  userEvents?: UserEventHandler<unknown>;
5
5
  }
6
6
  declare const UserEventsContext: import("react").Context<Props>;
7
- export { UserEventsContext };
7
+ interface DebuggingProps {
8
+ isDebugging: boolean;
9
+ setIsDebugging: (value: boolean) => void;
10
+ }
11
+ declare const DebugUserEventsContext: import("react").Context<DebuggingProps>;
12
+ export { DebugUserEventsContext, UserEventsContext };
@@ -1,4 +1,10 @@
1
1
  import { createContext } from 'react';
2
2
  const UserEventsContext = createContext({});
3
- export { UserEventsContext };
3
+ const DebugUserEventsContext = createContext({
4
+ isDebugging: false,
5
+ setIsDebugging: (value) => {
6
+ console.warn('set is debugging is not set', value);
7
+ },
8
+ });
9
+ export { DebugUserEventsContext, UserEventsContext };
4
10
  //# sourceMappingURL=Context.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Context.js","sourceRoot":"","sources":["../../../src/contexts/UserEvents/Context.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAMrC,MAAM,iBAAiB,GAAG,aAAa,CAAQ,EAAE,CAAC,CAAA;AAClD,OAAO,EAAE,iBAAiB,EAAE,CAAA"}
1
+ {"version":3,"file":"Context.js","sourceRoot":"","sources":["../../../src/contexts/UserEvents/Context.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAKrC,MAAM,iBAAiB,GAAG,aAAa,CAAQ,EAAE,CAAC,CAAA;AAOlD,MAAM,sBAAsB,GAAG,aAAa,CAAiB;IAC3D,WAAW,EAAE,KAAK;IAClB,cAAc,EAAE,CAAC,KAAK,EAAE,EAAE;QACxB,OAAO,CAAC,IAAI,CAAC,6BAA6B,EAAE,KAAK,CAAC,CAAA;IACpD,CAAC;CACF,CAAC,CAAA;AAEF,OAAO,EAAE,sBAAsB,EAAE,iBAAiB,EAAE,CAAA"}
@@ -1,3 +1,2 @@
1
- import { UserEventsContext } from './Context';
1
+ export * from './Context';
2
2
  export * from './Loader';
3
- export { UserEventsContext };
@@ -1,4 +1,3 @@
1
- import { UserEventsContext } from './Context';
1
+ export * from './Context';
2
2
  export * from './Loader';
3
- export { UserEventsContext };
4
3
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/contexts/UserEvents/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAA;AAC7C,cAAc,UAAU,CAAA;AACxB,OAAO,EAAE,iBAAiB,EAAE,CAAA"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/contexts/UserEvents/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA"}
@@ -2,5 +2,6 @@
2
2
  import { ComponentMeta, ComponentStory } from '@storybook/react';
3
3
  declare const StorybookEntry: ComponentMeta<import("react").FC<import("./InvertableThemeProviderProps").InvertableThemeProviderProps>>;
4
4
  declare const Default: ComponentStory<import("react").FC<import("./InvertableThemeProviderProps").InvertableThemeProviderProps>>;
5
- export { Default };
5
+ declare const DarkThemeEnabled: ComponentStory<import("react").FC<import("./InvertableThemeProviderProps").InvertableThemeProviderProps>>;
6
+ export { DarkThemeEnabled, Default };
6
7
  export default StorybookEntry;
@@ -5,5 +5,6 @@ interface InvertableThemeProviderProps {
5
5
  invert?: boolean;
6
6
  noResponsiveFonts?: boolean;
7
7
  options?: ThemeOptions;
8
+ darkTheme?: ThemeOptions;
8
9
  }
9
10
  export type { InvertableThemeProviderProps };
@@ -0,0 +1,2 @@
1
+ /// <reference types="react" />
2
+ export declare const PixelDebuggerProvider: React.FC;
@@ -1,2 +1,3 @@
1
1
  export * from './PixelDebugger';
2
+ export * from './PixelDebuggerProvider';
2
3
  export * from './PixelDebuggerToggle';
@@ -1,3 +1,4 @@
1
+ /// <reference types="bn.js" />
1
2
  import { BigNumber } from '@xylabs/sdk-js';
2
3
  import { MouseEventHandler } from 'react';
3
4
  import { ButtonExProps } from '../ButtonEx';
@@ -4,4 +4,9 @@ interface Props {
4
4
  userEvents?: UserEventHandler<unknown>;
5
5
  }
6
6
  declare const UserEventsContext: import("react").Context<Props>;
7
- export { UserEventsContext };
7
+ interface DebuggingProps {
8
+ isDebugging: boolean;
9
+ setIsDebugging: (value: boolean) => void;
10
+ }
11
+ declare const DebugUserEventsContext: import("react").Context<DebuggingProps>;
12
+ export { DebugUserEventsContext, UserEventsContext };
@@ -1,3 +1,2 @@
1
- import { UserEventsContext } from './Context';
1
+ export * from './Context';
2
2
  export * from './Loader';
3
- export { UserEventsContext };
@@ -1527,6 +1527,12 @@ const NetworkSettingsLoader = (props) => {
1527
1527
  };
1528
1528
 
1529
1529
  const UserEventsContext = createContext({});
1530
+ const DebugUserEventsContext = createContext({
1531
+ isDebugging: false,
1532
+ setIsDebugging: (value) => {
1533
+ console.warn('set is debugging is not set', value);
1534
+ },
1535
+ });
1530
1536
 
1531
1537
  const UserEventsLoader = ({ userEvents, children }) => {
1532
1538
  return jsx(UserEventsContext.Provider, Object.assign({ value: { userEvents } }, { children: children }), void 0);
@@ -1653,8 +1659,9 @@ const InvertableThemeContext = createContext({
1653
1659
  options: {},
1654
1660
  });
1655
1661
 
1656
- const InvertableThemeProvider = ({ options, children, dark, scoped = false, invert = false, noResponsiveFonts, }) => {
1662
+ const InvertableThemeProvider = ({ options, children, dark, scoped = false, invert = false, noResponsiveFonts, darkTheme, }) => {
1657
1663
  var _a, _b;
1664
+ let internalDarkTheme = {};
1658
1665
  const contextInvertableTheme = useContext(InvertableThemeContext);
1659
1666
  const clonedOptions = clone((_a = options !== null && options !== void 0 ? options : contextInvertableTheme.options) !== null && _a !== void 0 ? _a : {});
1660
1667
  clonedOptions.palette = (_b = clonedOptions.palette) !== null && _b !== void 0 ? _b : {};
@@ -1664,7 +1671,10 @@ const InvertableThemeProvider = ({ options, children, dark, scoped = false, inve
1664
1671
  if (dark !== undefined) {
1665
1672
  clonedOptions.palette.mode = dark ? 'dark' : 'light';
1666
1673
  }
1667
- let theme = createTheme(clonedOptions);
1674
+ if (clonedOptions.palette.mode === 'dark' && (darkTheme === null || darkTheme === void 0 ? void 0 : darkTheme.palette)) {
1675
+ internalDarkTheme = darkTheme;
1676
+ }
1677
+ let theme = createTheme(clonedOptions, internalDarkTheme);
1668
1678
  if (!noResponsiveFonts) {
1669
1679
  theme = responsiveFontSizes(theme);
1670
1680
  }
@@ -1768,7 +1778,7 @@ const useLocalStorage = (key, defaultValue) => {
1768
1778
  const [storedValue, setStoredValue] = useState(() => {
1769
1779
  try {
1770
1780
  const item = getLocalStorageObject(key);
1771
- return item || defaultValue;
1781
+ return Object.keys(item).length ? item : defaultValue;
1772
1782
  }
1773
1783
  catch (ex) {
1774
1784
  //Error is already logged
@@ -2036,6 +2046,24 @@ const NumberStatus = (_a) => {
2036
2046
  return (jsx(ButtonEx, Object.assign({ size: size, padding: 0, style: Object.assign({ borderRadius: rounded ? theme.shape.borderRadius : 0, overflow: rounded ? 'hidden' : undefined }, style) }, props, { children: jsxs(FlexCol, Object.assign({ alignItems: "stretch", height: sizePixels, width: autoWidth ? '100%' : sizePixels, busy: value === undefined && !error }, { children: [jsx(FlexGrowRow, Object.assign({ bgcolor: bgColorTop, color: theme.palette.getContrastText(bgColorTop), fontSize: calcFontSize, fontFamily: "Source Code Pro,monospace", alignItems: "center", height: sizePixels * 0.75 }, { children: numeral(value).format(format) }), void 0), jsx(FlexGrowRow, Object.assign({ bgcolor: bgColorBottom, borderTop: "1px", color: theme.palette.getContrastText(bgColorBottom), fontSize: sizePixels * 0.12, fontFamily: theme.typography.fontFamily, height: sizePixels * 0.25 }, { children: title }), void 0)] }), void 0) }), void 0));
2037
2047
  };
2038
2048
 
2049
+ const Portal = ({ children, className, el = 'div', target = 'body' }) => {
2050
+ const [container] = useState(document.createElement(el));
2051
+ if (className) {
2052
+ container.classList.add(className);
2053
+ }
2054
+ useEffect(() => {
2055
+ const targetElement = document.querySelector(target);
2056
+ if (!targetElement) {
2057
+ console.warn(`Unable to find target element: ${target}`);
2058
+ }
2059
+ targetElement === null || targetElement === void 0 ? void 0 : targetElement.appendChild(container);
2060
+ return () => {
2061
+ targetElement === null || targetElement === void 0 ? void 0 : targetElement.removeChild(container);
2062
+ };
2063
+ }, [container, target]);
2064
+ return createPortal(children, container);
2065
+ };
2066
+
2039
2067
  const usePixelAltSendHandler = (altHandler) => {
2040
2068
  const [pixelSend, setPixelSend] = useState();
2041
2069
  useEffect(() => {
@@ -2059,6 +2087,7 @@ const usePixelAltSendHandler = (altHandler) => {
2059
2087
  };
2060
2088
 
2061
2089
  const PixelDebugger = () => {
2090
+ const { isDebugging } = useContext(DebugUserEventsContext);
2062
2091
  //TODO - when adding in the location hook to detect location change, was dropping the setEvents in usePixelAltSendHand
2063
2092
  const theme = useTheme();
2064
2093
  const [displayEvents, setDisplayEvents] = useState(false);
@@ -2066,40 +2095,30 @@ const PixelDebugger = () => {
2066
2095
  usePixelAltSendHandler((event, fields) => {
2067
2096
  setEvents((events) => [{ event, fields }, ...events]);
2068
2097
  });
2069
- return (jsx("div", Object.assign({ style: { bottom: 0, left: 0, position: 'fixed', width: 350 } }, { children: jsx(Badge, Object.assign({ badgeContent: events.length, color: "primary", sx: { width: '100%' } }, { children: jsx(Card, Object.assign({ variant: "outlined", sx: {
2070
- backdropFilter: 'blur(16px) saturate(180%)',
2071
- backgroundColor: 'rgba(18, 18, 18, .70)',
2072
- overflowY: 'auto',
2073
- width: '100%',
2074
- }, color: theme.palette.primary.main }, { children: jsxs(FlexCol, Object.assign({ alignItems: "stretch", sx: { flexFlow: 'column', maxHeight: 400 } }, { children: [jsx(FlexCol, Object.assign({ alignItems: "stretch", sx: { flex: '0 1 auto' } }, { children: jsx(ButtonEx, Object.assign({ variant: "text", onClick: () => setDisplayEvents(!displayEvents) }, { children: "XY Pixel Debugger" }), void 0) }), void 0), displayEvents && !!events.length && (jsx(FlexCol, Object.assign({ alignItems: "stretch", alignContent: "start", padding: 2, sx: { cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none' } }, { children: events.map((e, index) => (jsx(PixelEventDetails, Object.assign({ events: events, index: index }, e), `${e.event}-${index}`))) }), void 0)), displayEvents && !events.length && jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: "No Events" }), void 0)] }), void 0) }), void 0) }), void 0) }), void 0));
2098
+ if (!isDebugging) {
2099
+ return null;
2100
+ }
2101
+ return (jsx(Portal, { children: jsx("div", Object.assign({ style: { bottom: 0, left: 0, position: 'fixed', width: 350 } }, { children: jsx(Badge, Object.assign({ badgeContent: events.length, color: "primary", sx: { width: '100%' } }, { children: jsx(Card, Object.assign({ variant: "outlined", sx: {
2102
+ backdropFilter: 'blur(16px) saturate(180%)',
2103
+ backgroundColor: 'rgba(18, 18, 18, .70)',
2104
+ overflowY: 'auto',
2105
+ width: '100%',
2106
+ }, color: theme.palette.primary.main }, { children: jsxs(FlexCol, Object.assign({ alignItems: "stretch", sx: { flexFlow: 'column', maxHeight: 400 } }, { children: [jsx(FlexCol, Object.assign({ alignItems: "stretch", sx: { flex: '0 1 auto' } }, { children: jsx(ButtonEx, Object.assign({ variant: "text", onClick: () => setDisplayEvents(!displayEvents) }, { children: "XY Pixel Debugger" }), void 0) }), void 0), displayEvents && !!events.length && (jsx(FlexCol, Object.assign({ alignItems: "stretch", alignContent: "start", padding: 2, sx: { cursor: 'pointer', flex: '1 1 auto', overflowY: 'auto', userSelect: 'none' } }, { children: events.map((e, index) => (jsx(PixelEventDetails, Object.assign({ events: events, index: index }, e), `${e.event}-${index}`))) }), void 0)), displayEvents && !events.length && jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: "No Events" }), void 0)] }), void 0) }), void 0) }), void 0) }), void 0) }, void 0));
2075
2107
  };
2076
2108
  const PixelEventDetails = ({ event, fields, index, events, }) => {
2077
2109
  const [isOpen, setIsOpen] = useState(false);
2078
2110
  return (jsxs(FlexCol, Object.assign({ alignItems: "stretch", marginBottom: 0.5, onClick: () => setIsOpen(!isOpen) }, { children: [jsx(Typography, Object.assign({ variant: "subtitle2" }, { children: event }), void 0), isOpen && (jsx(Typography, Object.assign({ marginBottom: 0.5, variant: "caption" }, { children: JSON.stringify(fields, null, 2) }), void 0)), events[index + 1] && jsx(Divider, {}, void 0)] }), void 0));
2079
2111
  };
2080
2112
 
2081
- const Portal = ({ children, className, el = 'div', target = 'body' }) => {
2082
- const [container] = useState(document.createElement(el));
2083
- if (className) {
2084
- container.classList.add(className);
2085
- }
2086
- useEffect(() => {
2087
- const targetElement = document.querySelector(target);
2088
- if (!targetElement) {
2089
- console.warn(`Unable to find target element: ${target}`);
2090
- }
2091
- targetElement === null || targetElement === void 0 ? void 0 : targetElement.appendChild(container);
2092
- return () => {
2093
- targetElement === null || targetElement === void 0 ? void 0 : targetElement.removeChild(container);
2094
- };
2095
- }, [container, target]);
2096
- return createPortal(children, container);
2113
+ const PixelDebuggerProvider = ({ children }) => {
2114
+ const [isDebugging, setIsDebugging] = useLocalStorage('isDebuggingPixel', false);
2115
+ return (jsx(DebugUserEventsContext.Provider, Object.assign({ value: { isDebugging, setIsDebugging } }, { children: children }), void 0));
2097
2116
  };
2098
2117
 
2099
2118
  const PixelDebuggerToggle = (_a) => {
2100
2119
  var props = __rest(_a, []);
2101
- const [showDebugger, setDebugger] = useLocalStorage('isDebuggingPixel', false);
2102
- return (jsxs(FlexRow, Object.assign({}, props, { children: [jsxs(FormControl, { children: [jsx(FormLabel, { children: "Enable Debugger" }, void 0), jsx(Switch, { checked: showDebugger, onClick: () => setDebugger(!showDebugger) }, void 0)] }, void 0), showDebugger && (jsx(Portal, Object.assign({ target: "#pixelPortal" }, { children: jsx(PixelDebugger, {}, void 0) }), void 0))] }), void 0));
2120
+ const { setIsDebugging, isDebugging } = useContext(DebugUserEventsContext);
2121
+ return (jsx(FlexRow, Object.assign({}, props, { children: jsxs(FormControl, { children: [jsx(FormLabel, { children: "Enable Debugger" }, void 0), jsx(Switch, { checked: isDebugging, onClick: () => setIsDebugging(!isDebugging) }, void 0)] }, void 0) }), void 0));
2103
2122
  };
2104
2123
 
2105
2124
  const QuickTipButton = (_a) => {
@@ -2177,5 +2196,5 @@ const TokenAmount = (_a) => {
2177
2196
  return (jsx(ButtonEx, Object.assign({ style: Object.assign({ backgroundColor: statusColor }, style), variant: "outlined", onClick: onButtonClick }, props, { children: jsxs(FlexRow, Object.assign({ justifyContent: "space-between", width: "100%", busy: amount === undefined, busySize: 16 }, { children: [jsxs(FlexRow, { children: [logo ? jsx("img", { src: img, height: 24 }, void 0) : null, label ? (jsx(Typography, Object.assign({ marginRight: 1, marginLeft: logo ? 1 : 0, noWrap: true, fontFamily: textFontFamily, variant: "caption" }, { children: label }), void 0)) : null] }, void 0), jsx(Typography, Object.assign({ color: textColor, noWrap: true, fontFamily: textFontFamily, variant: "body1", style: { textTransform: 'none' } }, { children: amountString }), void 0)] }), void 0) }), void 0));
2178
2197
  };
2179
2198
 
2180
- export { ActionStatusType, AppBarEx, Background, BasePage, BreadcrumbsEx, BusyBox, ButtonEx, ContactPointOption, CookieConsent, CookieConsentBody, CookieConsentContext, CookieConsentLoader, CoverProgress, DripCustomEvent, DripStandardEvents, ErrorDialog, EthAccount, EthersContext, EthersLoader, Experiment, Experiments, ExperimentsDebugger, FacebookCustomEvent, FacebookStandardEvents, Fbq, FlexCol, FlexGrowCol, FlexGrowRow, FlexRow, GoogleBaseEvent, GoogleCustomEvent, GoogleStandardEvents, GoogleUserEventHandler, Gtag, Gtm, HoverScale, Identicon, InvertableThemeProvider, ItemAvailability, LinkToEx, MapCategoryType, MessageDialog, NetworkSettingsContext, NetworkSettingsLoader, NumberStatus, PixelDebugger, PixelDebuggerToggle, Portal, QuickTipButton, Rdt, RedditCustomEvent, RedditStandardEvents, RedirectWithQuery, Referrer, RichResult, ScrollToTop, ScrollToTopButton, SnapTr, SnapchatStandardEvents, TiktokCustomEvent, TiktokStandardEvents, TokenAmount, Ttq, UserEventsContext, UserEventsLoader, XyBaseEvent, XyCustomEvent, XyUserEventHandler, XyoUserEventHandler, enableProfileLogging, getApiStage, getLocalStorageObject, getSessionStorageObject, isLocalhost, profileBlock, profileResults, setLocalStorageObject, setSessionStorageObject, useAsyncEffect, useBreakpoint, useCookieConsent, useLocalStorage, useMounted, useNavigateToEthAddress, useSpacing, useUserEvents, useWebP, useWindowSize };
2199
+ export { ActionStatusType, AppBarEx, Background, BasePage, BreadcrumbsEx, BusyBox, ButtonEx, ContactPointOption, CookieConsent, CookieConsentBody, CookieConsentContext, CookieConsentLoader, CoverProgress, DebugUserEventsContext, DripCustomEvent, DripStandardEvents, ErrorDialog, EthAccount, EthersContext, EthersLoader, Experiment, Experiments, ExperimentsDebugger, FacebookCustomEvent, FacebookStandardEvents, Fbq, FlexCol, FlexGrowCol, FlexGrowRow, FlexRow, GoogleBaseEvent, GoogleCustomEvent, GoogleStandardEvents, GoogleUserEventHandler, Gtag, Gtm, HoverScale, Identicon, InvertableThemeProvider, ItemAvailability, LinkToEx, MapCategoryType, MessageDialog, NetworkSettingsContext, NetworkSettingsLoader, NumberStatus, PixelDebugger, PixelDebuggerProvider, PixelDebuggerToggle, Portal, QuickTipButton, Rdt, RedditCustomEvent, RedditStandardEvents, RedirectWithQuery, Referrer, RichResult, ScrollToTop, ScrollToTopButton, SnapTr, SnapchatStandardEvents, TiktokCustomEvent, TiktokStandardEvents, TokenAmount, Ttq, UserEventsContext, UserEventsLoader, XyBaseEvent, XyCustomEvent, XyUserEventHandler, XyoUserEventHandler, enableProfileLogging, getApiStage, getLocalStorageObject, getSessionStorageObject, isLocalhost, profileBlock, profileResults, setLocalStorageObject, setSessionStorageObject, useAsyncEffect, useBreakpoint, useCookieConsent, useLocalStorage, useMounted, useNavigateToEthAddress, useSpacing, useUserEvents, useWebP, useWindowSize };
2181
2200
  //# sourceMappingURL=index.js.map