@lifi/widget 1.29.4 → 1.29.5

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 (14) hide show
  1. package/cjs/components/Card/Card.js +10 -5
  2. package/cjs/components/TokenAvatar/TokenAvatar.js +1 -1
  3. package/cjs/components/TokenAvatar/TokenAvatar.style.d.ts +1 -1
  4. package/cjs/components/TokenAvatar/TokenAvatar.style.js +5 -5
  5. package/cjs/config/version.d.ts +1 -1
  6. package/cjs/config/version.js +1 -1
  7. package/components/Card/Card.js +10 -5
  8. package/components/TokenAvatar/TokenAvatar.js +2 -2
  9. package/components/TokenAvatar/TokenAvatar.style.d.ts +1 -1
  10. package/components/TokenAvatar/TokenAvatar.style.js +4 -4
  11. package/config/version.d.ts +1 -1
  12. package/config/version.js +1 -1
  13. package/package.json +5 -5
  14. package/tsconfig.cjs.tsbuildinfo +1 -1
package/cjs/components/Card/Card.js CHANGED
@@ -2,6 +2,7 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.Card = void 0;
4
4
  const material_1 = require("@mui/material");
5
+ const Badge_1 = require("@mui/material/Badge");
5
6
  const styles_1 = require("@mui/material/styles");
6
7
  const getBackgroundColor = (theme, variant, selectionColor) => variant === 'selected'
7
8
  ? selectionColor === 'primary'
@@ -20,6 +21,11 @@ exports.Card = (0, styles_1.styled)(material_1.Box, {
20
21
  ].includes(prop),
21
22
  })(({ theme, variant, selectionColor = 'primary', dense, indented, pointerEvents, onClick, }) => {
22
23
  const backgroundColor = getBackgroundColor(theme, variant, selectionColor);
24
+ const backgroundHoverColor = onClick
25
+ ? theme.palette.mode === 'light'
26
+ ? (0, styles_1.darken)(backgroundColor, 0.02)
27
+ : (0, styles_1.lighten)(backgroundColor, 0.02)
28
+ : backgroundColor;
23
29
  return {
24
30
  backgroundColor,
25
31
  border: `1px solid`,
@@ -39,11 +45,10 @@ exports.Card = (0, styles_1.styled)(material_1.Box, {
39
45
  boxSizing: 'border-box',
40
46
  '&:hover': {
41
47
  cursor: onClick ? 'pointer' : 'default',
42
- backgroundColor: onClick
43
- ? theme.palette.mode === 'light'
44
- ? (0, styles_1.darken)(backgroundColor, 0.02)
45
- : (0, styles_1.lighten)(backgroundColor, 0.02)
46
- : backgroundColor,
48
+ backgroundColor: backgroundHoverColor,
49
+ },
50
+ [`&:hover .${Badge_1.badgeClasses.badge} > div`]: {
51
+ borderColor: backgroundHoverColor,
47
52
  },
48
53
  transition: theme.transitions.create(['background-color'], {
49
54
  duration: theme.transitions.duration.enteringScreen,
package/cjs/components/TokenAvatar/TokenAvatar.js CHANGED
@@ -25,6 +25,6 @@ const TokenAvatar = ({ token, chain, isLoading, sx }) => {
25
25
  };
26
26
  exports.TokenAvatar = TokenAvatar;
27
27
  const TokenAvatarDefault = ({ sx }) => {
28
- return ((0, jsx_runtime_1.jsx)(material_1.Badge, Object.assign({ overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: (0, jsx_runtime_1.jsx)(TokenAvatar_style_1.AvatarDefault, { width: 16, height: 16 }), sx: sx }, { children: (0, jsx_runtime_1.jsx)(TokenAvatar_style_1.AvatarDefaultContainer, { children: (0, jsx_runtime_1.jsx)(TokenAvatar_style_1.AvatarDefault, { width: 28, height: 28 }) }) })));
28
+ return ((0, jsx_runtime_1.jsx)(material_1.Badge, Object.assign({ overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: (0, jsx_runtime_1.jsx)(TokenAvatar_style_1.AvatarDefaultBadge, { width: 16, height: 16 }), sx: sx }, { children: (0, jsx_runtime_1.jsx)(TokenAvatar_style_1.AvatarDefault, { width: 32, height: 32 }) })));
29
29
  };
30
30
  exports.TokenAvatarDefault = TokenAvatarDefault;
package/cjs/components/TokenAvatar/TokenAvatar.style.d.ts CHANGED
@@ -8,7 +8,7 @@ export declare const AvatarDefault: import("@emotion/styled").StyledComponent<im
8
8
  } & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
9
9
  ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
10
10
  }, "children" | "sx" | "ref" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
11
- export declare const AvatarDefaultContainer: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
11
+ export declare const AvatarDefaultBadge: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
12
12
  children?: import("react").ReactNode;
13
13
  component?: import("react").ElementType<any> | undefined;
14
14
  ref?: import("react").Ref<unknown> | undefined;
package/cjs/components/TokenAvatar/TokenAvatar.style.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.AvatarDefaultContainer = exports.AvatarDefault = exports.TokenAvatarGroup = void 0;
3
+ exports.AvatarDefaultBadge = exports.AvatarDefault = exports.TokenAvatarGroup = void 0;
4
4
  const material_1 = require("@mui/material");
5
5
  const Avatar_1 = require("@mui/material/Avatar");
6
6
  const Badge_1 = require("@mui/material/Badge");
@@ -18,12 +18,12 @@ exports.AvatarDefault = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
18
18
  background: theme.palette.mode === 'light'
19
19
  ? theme.palette.grey[300]
20
20
  : theme.palette.grey[800],
21
- border: `2px solid ${theme.palette.background.paper}`,
22
21
  borderRadius: '50%',
23
22
  }));
24
- exports.AvatarDefaultContainer = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
25
- border: `2px solid ${theme.palette.mode === 'light'
23
+ exports.AvatarDefaultBadge = (0, styles_1.styled)(material_1.Box)(({ theme }) => ({
24
+ background: theme.palette.mode === 'light'
26
25
  ? theme.palette.grey[300]
27
- : theme.palette.grey[800]}`,
26
+ : theme.palette.grey[800],
27
+ border: `2px solid ${theme.palette.background.paper}`,
28
28
  borderRadius: '50%',
29
29
  }));
package/cjs/config/version.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  export declare const name = "@lifi/widget";
2
- export declare const version = "1.29.4";
2
+ export declare const version = "1.29.5";
package/cjs/config/version.js CHANGED
@@ -2,4 +2,4 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.version = exports.name = void 0;
4
4
  exports.name = '@lifi/widget';
5
- exports.version = '1.29.4';
5
+ exports.version = '1.29.5';
package/components/Card/Card.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { Box } from '@mui/material';
2
+ import { badgeClasses } from '@mui/material/Badge';
2
3
  import { alpha, darken, lighten, styled } from '@mui/material/styles';
3
4
  const getBackgroundColor = (theme, variant, selectionColor) => variant === 'selected'
4
5
  ? selectionColor === 'primary'
@@ -17,6 +18,11 @@ export const Card = styled(Box, {
17
18
  ].includes(prop),
18
19
  })(({ theme, variant, selectionColor = 'primary', dense, indented, pointerEvents, onClick, }) => {
19
20
  const backgroundColor = getBackgroundColor(theme, variant, selectionColor);
21
+ const backgroundHoverColor = onClick
22
+ ? theme.palette.mode === 'light'
23
+ ? darken(backgroundColor, 0.02)
24
+ : lighten(backgroundColor, 0.02)
25
+ : backgroundColor;
20
26
  return {
21
27
  backgroundColor,
22
28
  border: `1px solid`,
@@ -36,11 +42,10 @@ export const Card = styled(Box, {
36
42
  boxSizing: 'border-box',
37
43
  '&:hover': {
38
44
  cursor: onClick ? 'pointer' : 'default',
39
- backgroundColor: onClick
40
- ? theme.palette.mode === 'light'
41
- ? darken(backgroundColor, 0.02)
42
- : lighten(backgroundColor, 0.02)
43
- : backgroundColor,
45
+ backgroundColor: backgroundHoverColor,
46
+ },
47
+ [`&:hover .${badgeClasses.badge} > div`]: {
48
+ borderColor: backgroundHoverColor,
44
49
  },
45
50
  transition: theme.transitions.create(['background-color'], {
46
51
  duration: theme.transitions.duration.enteringScreen,
package/components/TokenAvatar/TokenAvatar.js CHANGED
@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { Avatar, Badge, Skeleton } from '@mui/material';
3
3
  import { useChain, useToken } from '../../hooks';
4
4
  import { SmallAvatar, SmallAvatarSkeleton } from '../SmallAvatar';
5
- import { AvatarDefault, AvatarDefaultContainer } from './TokenAvatar.style';
5
+ import { AvatarDefault, AvatarDefaultBadge } from './TokenAvatar.style';
6
6
  export const TokenAvatarFallback = ({ token, isLoading, sx }) => {
7
7
  const { chain } = useChain(token === null || token === void 0 ? void 0 : token.chainId);
8
8
  const { token: chainToken, isLoading: isLoadingToken } = useToken(token === null || token === void 0 ? void 0 : token.chainId, token === null || token === void 0 ? void 0 : token.address);
@@ -19,5 +19,5 @@ export const TokenAvatar = ({ token, chain, isLoading, sx }) => {
19
19
  return (_jsx(TokenAvatarBase, { token: token, chain: chain, isLoading: isLoading, sx: sx }));
20
20
  };
21
21
  export const TokenAvatarDefault = ({ sx }) => {
22
- return (_jsx(Badge, Object.assign({ overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: _jsx(AvatarDefault, { width: 16, height: 16 }), sx: sx }, { children: _jsx(AvatarDefaultContainer, { children: _jsx(AvatarDefault, { width: 28, height: 28 }) }) })));
22
+ return (_jsx(Badge, Object.assign({ overlap: "circular", anchorOrigin: { vertical: 'bottom', horizontal: 'right' }, badgeContent: _jsx(AvatarDefaultBadge, { width: 16, height: 16 }), sx: sx }, { children: _jsx(AvatarDefault, { width: 32, height: 32 }) })));
23
23
  };
package/components/TokenAvatar/TokenAvatar.style.d.ts CHANGED
@@ -8,7 +8,7 @@ export declare const AvatarDefault: import("@emotion/styled").StyledComponent<im
8
8
  } & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
9
9
  ref?: import("react").RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
10
10
  }, "children" | "sx" | "ref" | ("p" | "color" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
11
- export declare const AvatarDefaultContainer: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
11
+ export declare const AvatarDefaultBadge: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
12
12
  children?: import("react").ReactNode;
13
13
  component?: import("react").ElementType<any> | undefined;
14
14
  ref?: import("react").Ref<unknown> | undefined;
package/components/TokenAvatar/TokenAvatar.style.js CHANGED
@@ -15,12 +15,12 @@ export const AvatarDefault = styled(Box)(({ theme }) => ({
15
15
  background: theme.palette.mode === 'light'
16
16
  ? theme.palette.grey[300]
17
17
  : theme.palette.grey[800],
18
- border: `2px solid ${theme.palette.background.paper}`,
19
18
  borderRadius: '50%',
20
19
  }));
21
- export const AvatarDefaultContainer = styled(Box)(({ theme }) => ({
22
- border: `2px solid ${theme.palette.mode === 'light'
20
+ export const AvatarDefaultBadge = styled(Box)(({ theme }) => ({
21
+ background: theme.palette.mode === 'light'
23
22
  ? theme.palette.grey[300]
24
- : theme.palette.grey[800]}`,
23
+ : theme.palette.grey[800],
24
+ border: `2px solid ${theme.palette.background.paper}`,
25
25
  borderRadius: '50%',
26
26
  }));
package/config/version.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  export declare const name = "@lifi/widget";
2
- export declare const version = "1.29.4";
2
+ export declare const version = "1.29.5";
package/config/version.js CHANGED
@@ -1,2 +1,2 @@
1
1
  export const name = '@lifi/widget';
2
- export const version = '1.29.4';
2
+ export const version = '1.29.5';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lifi/widget",
3
- "version": "1.29.4",
3
+ "version": "1.29.5",
4
4
  "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
5
5
  "main": "./cjs/index.js",
6
6
  "module": "./index.js",
@@ -48,10 +48,10 @@
48
48
  "@mui/icons-material": "^5.11.0",
49
49
  "@mui/lab": "^5.0.0-alpha.117",
50
50
  "@mui/material": "^5.11.6",
51
- "@sentry/integrations": "^7.32.1",
52
- "@sentry/react": "^7.32.1",
53
- "@sentry/tracing": "^7.32.1",
54
- "@tanstack/react-query": "^4.22.4",
51
+ "@sentry/integrations": "^7.33.0",
52
+ "@sentry/react": "^7.33.0",
53
+ "@sentry/tracing": "^7.33.0",
54
+ "@tanstack/react-query": "^4.23.0",
55
55
  "@tanstack/react-virtual": "^3.0.0-beta.39",
56
56
  "big.js": "^6.2.1",
57
57
  "i18next": "^22.4.9",