@xylabs/sdk-react 2.7.17 → 2.7.18

package/dist/hooks/index.d.ts

@@ -1,6 +1,7 @@
-import { useBreakpoint } from './useBreakpoint';
-import { useMediaQuery } from './useMediaQuery';
-import { useMounted } from './useMounted';
-import { useNavigateToEthAddress } from './useNavigateToEthAddress';
-import { useWindowSize } from './useWindowSize';
-export { useBreakpoint, useMediaQuery, useMounted, useNavigateToEthAddress, useWindowSize };
+export * from './useBreakpoint';
+export * from './useMediaQuery';
+export * from './useMounted';
+export * from './useNavigateToEthAddress';
+export * from './useSpacing';
+export * from './useWebP';
+export * from './useWindowSize';

package/dist/hooks/index.js

@@ -1,7 +1,8 @@
-import { useBreakpoint } from './useBreakpoint';
-import { useMediaQuery } from './useMediaQuery';
-import { useMounted } from './useMounted';
-import { useNavigateToEthAddress } from './useNavigateToEthAddress';
-import { useWindowSize } from './useWindowSize';
-export { useBreakpoint, useMediaQuery, useMounted, useNavigateToEthAddress, useWindowSize };
+export * from './useBreakpoint';
+export * from './useMediaQuery';
+export * from './useMounted';
+export * from './useNavigateToEthAddress';
+export * from './useSpacing';
+export * from './useWebP';
+export * from './useWindowSize';
 //# sourceMappingURL=index.js.map

package/dist/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAA;AACnE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,UAAU,EAAE,uBAAuB,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,2BAA2B,CAAA;AACzC,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,iBAAiB,CAAA"}

package/dist/hooks/useBreakpoint.d.ts

@@ -1,2 +1 @@
-declare const useBreakpoint: () => "xl" | "lg" | "md" | "sm" | "xs" | undefined;
-export { useBreakpoint };
+export declare const useBreakpoint: () => "xl" | "lg" | "md" | "sm" | "xs" | undefined;

package/dist/hooks/useBreakpoint.js

@@ -1,6 +1,6 @@
 import { useTheme } from '@mui/material';
 import { useMediaQuery } from './useMediaQuery';
-var useBreakpoint = function () {
+export var useBreakpoint = function () {
     var theme = useTheme();
     var xs = useMediaQuery(theme.breakpoints.only('xs'));
     var sm = useMediaQuery(theme.breakpoints.only('sm'));
@@ -23,5 +23,4 @@ var useBreakpoint = function () {
         return 'xl';
     }
 };
-export { useBreakpoint };
 //# sourceMappingURL=useBreakpoint.js.map

package/dist/hooks/useBreakpoint.js.map

@@ -1 +1 @@
-{"version":3,"file":"useBreakpoint.js","sourceRoot":"","sources":["../../src/hooks/useBreakpoint.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAExC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,IAAM,aAAa,GAAG;IACpB,IAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,IAAM,EAAE,GAAG,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACtD,IAAM,EAAE,GAAG,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACtD,IAAM,EAAE,GAAG,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACtD,IAAM,EAAE,GAAG,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACtD,IAAM,EAAE,GAAG,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAEtD,IAAI,EAAE,EAAE;QACN,OAAO,IAAI,CAAA;KACZ;SAAM,IAAI,EAAE,EAAE;QACb,OAAO,IAAI,CAAA;KACZ;SAAM,IAAI,EAAE,EAAE;QACb,OAAO,IAAI,CAAA;KACZ;SAAM,IAAI,EAAE,EAAE;QACb,OAAO,IAAI,CAAA;KACZ;SAAM,IAAI,EAAE,EAAE;QACb,OAAO,IAAI,CAAA;KACZ;AACH,CAAC,CAAA;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"useBreakpoint.js","sourceRoot":"","sources":["../../src/hooks/useBreakpoint.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAExC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAE/C,MAAM,CAAC,IAAM,aAAa,GAAG;IAC3B,IAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,IAAM,EAAE,GAAG,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACtD,IAAM,EAAE,GAAG,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACtD,IAAM,EAAE,GAAG,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACtD,IAAM,EAAE,GAAG,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACtD,IAAM,EAAE,GAAG,aAAa,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAEtD,IAAI,EAAE,EAAE;QACN,OAAO,IAAI,CAAA;KACZ;SAAM,IAAI,EAAE,EAAE;QACb,OAAO,IAAI,CAAA;KACZ;SAAM,IAAI,EAAE,EAAE;QACb,OAAO,IAAI,CAAA;KACZ;SAAM,IAAI,EAAE,EAAE;QACb,OAAO,IAAI,CAAA;KACZ;SAAM,IAAI,EAAE,EAAE;QACb,OAAO,IAAI,CAAA;KACZ;AACH,CAAC,CAAA"}

package/dist/hooks/useMounted.d.ts

@@ -1,2 +1 @@
-declare const useMounted: () => () => boolean;
-export { useMounted };
+export declare const useMounted: () => () => boolean;

package/dist/hooks/useMounted.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-var useMounted = function () {
+export var useMounted = function () {
     var _a = useState(true), mounted = _a[0], setMounted = _a[1];
     useEffect(function () {
         setMounted(true);
@@ -12,5 +12,4 @@ var useMounted = function () {
         return mounted;
     };
 };
-export { useMounted };
 //# sourceMappingURL=useMounted.js.map

package/dist/hooks/useMounted.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMounted.js","sourceRoot":"","sources":["../../src/hooks/useMounted.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE3C,IAAM,UAAU,GAAG;IACX,IAAA,KAAwB,QAAQ,CAAC,IAAI,CAAC,EAArC,OAAO,QAAA,EAAE,UAAU,QAAkB,CAAA;IAC5C,SAAS,CAAC;QACR,UAAU,CAAC,IAAI,CAAC,CAAA;QAChB,OAAO;YACL,uDAAuD;YACvD,UAAU,CAAC,KAAK,CAAC,CAAA;QACnB,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IACN,OAAO;QACL,OAAO,OAAO,CAAA;IAChB,CAAC,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}
+{"version":3,"file":"useMounted.js","sourceRoot":"","sources":["../../src/hooks/useMounted.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE3C,MAAM,CAAC,IAAM,UAAU,GAAG;IAClB,IAAA,KAAwB,QAAQ,CAAC,IAAI,CAAC,EAArC,OAAO,QAAA,EAAE,UAAU,QAAkB,CAAA;IAC5C,SAAS,CAAC;QACR,UAAU,CAAC,IAAI,CAAC,CAAA;QAChB,OAAO;YACL,uDAAuD;YACvD,UAAU,CAAC,KAAK,CAAC,CAAA;QACnB,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC,CAAA;IACN,OAAO;QACL,OAAO,OAAO,CAAA;IAChB,CAAC,CAAA;AACH,CAAC,CAAA"}

package/dist/hooks/useNavigateToEthAddress.d.ts

@@ -1,6 +1,5 @@
 import { EthAddress } from '@xylabs/sdk-js';
 import { NavigateOptions, To } from 'react-router-dom';
-declare const useNavigateToEthAddress: () => {
+export declare const useNavigateToEthAddress: () => {
     navigateToEthAddress: (address: EthAddress, event: React.MouseEvent, page?: string | undefined, to?: To | undefined, toOptions?: NavigateOptions | undefined, toEtherScan?: boolean | undefined) => void;
 };
-export { useNavigateToEthAddress };

package/dist/hooks/useNavigateToEthAddress.js

@@ -1,5 +1,5 @@
 import { useNavigate } from 'react-router-dom';
-var useNavigateToEthAddress = function () {
+export var useNavigateToEthAddress = function () {
     var navigate = useNavigate();
     var navigateToEthAddress = function (address, event, page, to, toOptions, toEtherScan) {
         var _a;
@@ -19,5 +19,4 @@ var useNavigateToEthAddress = function () {
     };
     return { navigateToEthAddress: navigateToEthAddress };
 };
-export { useNavigateToEthAddress };
 //# sourceMappingURL=useNavigateToEthAddress.js.map

package/dist/hooks/useNavigateToEthAddress.js.map

@@ -1 +1 @@
-{"version":3,"file":"useNavigateToEthAddress.js","sourceRoot":"","sources":["../../src/hooks/useNavigateToEthAddress.ts"],"names":[],"mappings":"AACA,OAAO,EAAuB,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAEnE,IAAM,uBAAuB,GAAG;IAC9B,IAAM,QAAQ,GAAG,WAAW,EAAE,CAAA;IAC9B,IAAM,oBAAoB,GAAG,UAC3B,OAAmB,EACnB,KAAuB,EACvB,IAAa,EACb,EAAO,EACP,SAA2B,EAC3B,WAAqB;;QAErB,IAAM,eAAe,GAAG,WAAW,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAA;QACrD,IAAI,eAAe,EAAE;YACnB,MAAM,CAAC,IAAI,CAAC,uCAAgC,OAAO,CAAC,QAAQ,EAAE,CAAE,EAAE,QAAQ,CAAC,CAAA;SAC5E;aAAM;YACL,IAAM,IAAI,GAAG,MAAA,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,QAAQ,EAAE,mCAAI,WAAI,IAAI,cAAI,OAAO,CAAC,QAAQ,EAAE,CAAE,CAAA;YAC/D,IAAI,KAAK,CAAC,OAAO,IAAI,WAAW,EAAE;gBAChC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAA;aAC5B;iBAAM;gBACL,QAAQ,CAAC,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,IAAI,EAAE,SAAS,CAAC,CAAA;aAChC;SACF;IACH,CAAC,CAAA;IACD,OAAO,EAAE,oBAAoB,sBAAA,EAAE,CAAA;AACjC,CAAC,CAAA;AAED,OAAO,EAAE,uBAAuB,EAAE,CAAA"}
+{"version":3,"file":"useNavigateToEthAddress.js","sourceRoot":"","sources":["../../src/hooks/useNavigateToEthAddress.ts"],"names":[],"mappings":"AACA,OAAO,EAAuB,WAAW,EAAE,MAAM,kBAAkB,CAAA;AAEnE,MAAM,CAAC,IAAM,uBAAuB,GAAG;IACrC,IAAM,QAAQ,GAAG,WAAW,EAAE,CAAA;IAC9B,IAAM,oBAAoB,GAAG,UAC3B,OAAmB,EACnB,KAAuB,EACvB,IAAa,EACb,EAAO,EACP,SAA2B,EAC3B,WAAqB;;QAErB,IAAM,eAAe,GAAG,WAAW,IAAI,CAAC,CAAC,EAAE,IAAI,CAAC,IAAI,CAAC,CAAA;QACrD,IAAI,eAAe,EAAE;YACnB,MAAM,CAAC,IAAI,CAAC,uCAAgC,OAAO,CAAC,QAAQ,EAAE,CAAE,EAAE,QAAQ,CAAC,CAAA;SAC5E;aAAM;YACL,IAAM,IAAI,GAAG,MAAA,EAAE,aAAF,EAAE,uBAAF,EAAE,CAAE,QAAQ,EAAE,mCAAI,WAAI,IAAI,cAAI,OAAO,CAAC,QAAQ,EAAE,CAAE,CAAA;YAC/D,IAAI,KAAK,CAAC,OAAO,IAAI,WAAW,EAAE;gBAChC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAA;aAC5B;iBAAM;gBACL,QAAQ,CAAC,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,IAAI,EAAE,SAAS,CAAC,CAAA;aAChC;SACF;IACH,CAAC,CAAA;IACD,OAAO,EAAE,oBAAoB,sBAAA,EAAE,CAAA;AACjC,CAAC,CAAA"}

package/dist/hooks/useSpacing.d.ts

@@ -0,0 +1 @@
+export declare const useSpacing: (value: string | number) => string;

package/dist/hooks/useSpacing.js

@@ -0,0 +1,6 @@
+import { useTheme } from '@mui/material';
+export var useSpacing = function (value) {
+    var theme = useTheme();
+    return theme.spacing(typeof value === 'string' ? parseInt(value) : value);
+};
+//# sourceMappingURL=useSpacing.js.map

package/dist/hooks/useSpacing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSpacing.js","sourceRoot":"","sources":["../../src/hooks/useSpacing.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAExC,MAAM,CAAC,IAAM,UAAU,GAAG,UAAC,KAAsB;IAC/C,IAAM,KAAK,GAAG,QAAQ,EAAE,CAAA;IACxB,OAAO,KAAK,CAAC,OAAO,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAA;AAC3E,CAAC,CAAA"}

package/dist/hooks/useWebP.d.ts

@@ -0,0 +1 @@
+export declare const useWebP: (webp: string, alt: string) => string | undefined;

package/dist/hooks/useWebP.js

@@ -0,0 +1,38 @@
+import { __awaiter, __generator } from "tslib";
+import { useState } from 'react';
+import { useAsyncEffect } from '../lib';
+var supportsWebP = undefined;
+export var useWebP = function (webp, alt) {
+    var _a = useState(supportsWebP === true ? webp : supportsWebP === false ? alt : undefined), img = _a[0], setImg = _a[1];
+    useAsyncEffect(function (mounted) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!(supportsWebP === undefined)) return [3 /*break*/, 2];
+                    return [4 /*yield*/, getSupportsWebP()];
+                case 1:
+                    supportsWebP = _a.sent();
+                    if (mounted()) {
+                        setImg(supportsWebP ? webp : alt);
+                    }
+                    _a.label = 2;
+                case 2: return [2 /*return*/];
+            }
+        });
+    }); }, [supportsWebP]);
+    return img;
+};
+var getSupportsWebP = function () { return __awaiter(void 0, void 0, void 0, function () {
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0: return [4 /*yield*/, new Promise(function (resolve) {
+                    var image = new Image();
+                    image.onerror = function () { return resolve(false); };
+                    image.onload = function () { return resolve(image.width === 1); };
+                    image.src = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA=';
+                }).catch(function () { return false; })];
+            case 1: return [2 /*return*/, _a.sent()];
+        }
+    });
+}); };
+//# sourceMappingURL=useWebP.js.map

package/dist/hooks/useWebP.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWebP.js","sourceRoot":"","sources":["../../src/hooks/useWebP.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEhC,OAAO,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAA;AAEvC,IAAI,YAAY,GAAwB,SAAS,CAAA;AAEjD,MAAM,CAAC,IAAM,OAAO,GAAG,UAAC,IAAY,EAAE,GAAW;IACzC,IAAA,KAAgB,QAAQ,CAC5B,YAAY,KAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,KAAK,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CACxE,EAFM,GAAG,QAAA,EAAE,MAAM,QAEjB,CAAA;IACD,cAAc,CACZ,UAAO,OAAO;;;;yBACR,CAAA,YAAY,KAAK,SAAS,CAAA,EAA1B,wBAA0B;oBACb,qBAAM,eAAe,EAAE,EAAA;;oBAAtC,YAAY,GAAG,SAAuB,CAAA;oBACtC,IAAI,OAAO,EAAE,EAAE;wBACb,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAA;qBAClC;;;;;SAEJ,EACD,CAAC,YAAY,CAAC,CACf,CAAA;IACD,OAAO,GAAG,CAAA;AACZ,CAAC,CAAA;AAED,IAAM,eAAe,GAAG;;;oBACf,qBAAM,IAAI,OAAO,CAAU,UAAC,OAAO;oBACxC,IAAM,KAAK,GAAG,IAAI,KAAK,EAAE,CAAA;oBACzB,KAAK,CAAC,OAAO,GAAG,cAAM,OAAA,OAAO,CAAC,KAAK,CAAC,EAAd,CAAc,CAAA;oBACpC,KAAK,CAAC,MAAM,GAAG,cAAM,OAAA,OAAO,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC,CAAC,EAA1B,CAA0B,CAAA;oBAC/C,KAAK,CAAC,GAAG,GAAG,qFAAqF,CAAA;gBACnG,CAAC,CAAC,CAAC,KAAK,CAAC,cAAM,OAAA,KAAK,EAAL,CAAK,CAAC,EAAA;oBALrB,sBAAO,SAKc,EAAA;;;KACtB,CAAA"}

package/dist/hooks/useWindowSize.d.ts

@@ -2,5 +2,5 @@ interface Size {
     height: number | undefined;
     width: number | undefined;
 }
-declare function useWindowSize(): Size;
-export { useWindowSize };
+export declare function useWindowSize(): Size;
+export {};

package/dist/hooks/useWindowSize.js

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-function useWindowSize() {
+export function useWindowSize() {
     var _a = useState({
         height: undefined,
         width: undefined,
@@ -17,5 +17,4 @@ function useWindowSize() {
     }, []);
     return windowSize;
 }
-export { useWindowSize };
 //# sourceMappingURL=useWindowSize.js.map

package/dist/hooks/useWindowSize.js.map

@@ -1 +1 @@
-{"version":3,"file":"useWindowSize.js","sourceRoot":"","sources":["../../src/hooks/useWindowSize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAO3C,SAAS,aAAa;IACd,IAAA,KAA8B,QAAQ,CAAO;QACjD,MAAM,EAAE,SAAS;QACjB,KAAK,EAAE,SAAS;KACjB,CAAC,EAHK,UAAU,QAAA,EAAE,aAAa,QAG9B,CAAA;IACF,SAAS,CAAC;QACR,SAAS,YAAY;YACnB,aAAa,CAAC;gBACZ,MAAM,EAAE,MAAM,CAAC,WAAW;gBAC1B,KAAK,EAAE,MAAM,CAAC,UAAU;aACzB,CAAC,CAAA;QACJ,CAAC;QACD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAA;QAC/C,YAAY,EAAE,CAAA;QAEd,OAAO,cAAM,OAAA,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,EAAlD,CAAkD,CAAA;IACjE,CAAC,EAAE,EAAE,CAAC,CAAA;IACN,OAAO,UAAU,CAAA;AACnB,CAAC;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"useWindowSize.js","sourceRoot":"","sources":["../../src/hooks/useWindowSize.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAO3C,MAAM,UAAU,aAAa;IACrB,IAAA,KAA8B,QAAQ,CAAO;QACjD,MAAM,EAAE,SAAS;QACjB,KAAK,EAAE,SAAS;KACjB,CAAC,EAHK,UAAU,QAAA,EAAE,aAAa,QAG9B,CAAA;IACF,SAAS,CAAC;QACR,SAAS,YAAY;YACnB,aAAa,CAAC;gBACZ,MAAM,EAAE,MAAM,CAAC,WAAW;gBAC1B,KAAK,EAAE,MAAM,CAAC,UAAU;aACzB,CAAC,CAAA;QACJ,CAAC;QACD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAA;QAC/C,YAAY,EAAE,CAAA;QAEd,OAAO,cAAM,OAAA,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC,EAAlD,CAAkD,CAAA;IACjE,CAAC,EAAE,EAAE,CAAC,CAAA;IACN,OAAO,UAAU,CAAA;AACnB,CAAC"}

package/package.json

@@ -25,8 +25,8 @@
     "@emotion/styled": "^11.6.0",
     "@ethersproject/abstract-signer": "^5.5.0",
     "@ethersproject/providers": "^5.5.1",
-    "@mui/icons-material": "^5.2.4",
-    "@mui/material": "^5.2.4",
+    "@mui/icons-material": "^5.2.5",
+    "@mui/material": "^5.2.5",
     "@mui/styles": "^5.2.3",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-replace": "^3.0.0",
@@ -41,10 +41,10 @@
     "@types/bn.js": "^5.1.0",
     "@types/lodash": "^4.14.178",
     "@types/md5": "^2.3.1",
-    "@types/node": "^17.0.0",
+    "@types/node": "^17.0.4",
     "@types/react": "^17",
     "@xylabs/eslint-config-react": "^2",
-    "@xylabs/pixel": "^1.1.6",
+    "@xylabs/pixel": "^1.2.5",
     "@xylabs/sdk-js": "^2.3.19",
     "@xylabs/ts-scripts": "^1.0.24",
     "babel-loader": "^8.2.3",
@@ -52,14 +52,14 @@
     "copyfiles": "^2.4.1",
     "eslint": "^8",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.27.1",
+    "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
     "prettier": "^2.5.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6",
     "rollbar": "^2",
-    "rollup": "^2.61.0",
+    "rollup": "^2.61.1",
     "rollup-plugin-typescript2": "^0.31.1",
     "ts-node": "^10.4.0",
     "typescript": "^4.5.4",
@@ -124,5 +124,5 @@
   "sideEffects": false,
   "type": "module",
   "types": "dist/index.d.ts",
-  "version": "2.7.17"
+  "version": "2.7.18"
 }

package/src/hooks/index.ts

@@ -1,7 +1,7 @@
-import { useBreakpoint } from './useBreakpoint'
-import { useMediaQuery } from './useMediaQuery'
-import { useMounted } from './useMounted'
-import { useNavigateToEthAddress } from './useNavigateToEthAddress'
-import { useWindowSize } from './useWindowSize'
-
-export { useBreakpoint, useMediaQuery, useMounted, useNavigateToEthAddress, useWindowSize }
+export * from './useBreakpoint'
+export * from './useMediaQuery'
+export * from './useMounted'
+export * from './useNavigateToEthAddress'
+export * from './useSpacing'
+export * from './useWebP'
+export * from './useWindowSize'

package/src/hooks/useBreakpoint.ts

@@ -2,7 +2,7 @@ import { useTheme } from '@mui/material'
 
 import { useMediaQuery } from './useMediaQuery'
 
-const useBreakpoint = () => {
+export const useBreakpoint = () => {
   const theme = useTheme()
   const xs = useMediaQuery(theme.breakpoints.only('xs'))
   const sm = useMediaQuery(theme.breakpoints.only('sm'))
@@ -22,5 +22,3 @@ const useBreakpoint = () => {
     return 'xl'
   }
 }
-
-export { useBreakpoint }

package/src/hooks/useMounted.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 
-const useMounted = () => {
+export const useMounted = () => {
   const [mounted, setMounted] = useState(true)
   useEffect(() => {
     setMounted(true)
@@ -13,5 +13,3 @@ const useMounted = () => {
     return mounted
   }
 }
-
-export { useMounted }

package/src/hooks/useNavigateToEthAddress.ts

@@ -1,7 +1,7 @@
 import { EthAddress } from '@xylabs/sdk-js'
 import { NavigateOptions, To, useNavigate } from 'react-router-dom'
 
-const useNavigateToEthAddress = () => {
+export const useNavigateToEthAddress = () => {
   const navigate = useNavigate()
   const navigateToEthAddress = (
     address: EthAddress,
@@ -25,5 +25,3 @@ const useNavigateToEthAddress = () => {
   }
   return { navigateToEthAddress }
 }
-
-export { useNavigateToEthAddress }

package/src/hooks/useSpacing.tsx

@@ -0,0 +1,6 @@
+import { useTheme } from '@mui/material'
+
+export const useSpacing = (value: string | number) => {
+  const theme = useTheme()
+  return theme.spacing(typeof value === 'string' ? parseInt(value) : value)
+}

package/src/hooks/useWebP.tsx

@@ -0,0 +1,32 @@
+import { useState } from 'react'
+
+import { useAsyncEffect } from '../lib'
+
+let supportsWebP: boolean | undefined = undefined
+
+export const useWebP = (webp: string, alt: string) => {
+  const [img, setImg] = useState<string | undefined>(
+    supportsWebP === true ? webp : supportsWebP === false ? alt : undefined
+  )
+  useAsyncEffect(
+    async (mounted) => {
+      if (supportsWebP === undefined) {
+        supportsWebP = await getSupportsWebP()
+        if (mounted()) {
+          setImg(supportsWebP ? webp : alt)
+        }
+      }
+    },
+    [supportsWebP]
+  )
+  return img
+}
+
+const getSupportsWebP = async () => {
+  return await new Promise<boolean>((resolve) => {
+    const image = new Image()
+    image.onerror = () => resolve(false)
+    image.onload = () => resolve(image.width === 1)
+    image.src = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA='
+  }).catch(() => false)
+}

package/src/hooks/useWindowSize.ts

@@ -5,7 +5,7 @@ interface Size {
   width: number | undefined
 }
 
-function useWindowSize(): Size {
+export function useWindowSize(): Size {
   const [windowSize, setWindowSize] = useState<Size>({
     height: undefined,
     width: undefined,
@@ -24,5 +24,3 @@ function useWindowSize(): Size {
   }, [])
   return windowSize
 }
-
-export { useWindowSize }