@lifi/widget 2.2.8 → 2.3.0

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 (20) hide show
  1. package/cjs/components/ProgressToNextUpdate/ProgressToNextUpdate.js +0 -1
  2. package/cjs/components/SendToWallet/SendToWalletButton.js +3 -0
  3. package/cjs/components/Step/Step.js +2 -1
  4. package/cjs/components/TokenList/useTokenSelect.js +10 -1
  5. package/cjs/config/version.d.ts +1 -1
  6. package/cjs/config/version.js +1 -1
  7. package/cjs/fonts/inter.css +75 -58
  8. package/cjs/types/events.d.ts +3 -1
  9. package/cjs/types/events.js +1 -0
  10. package/components/ProgressToNextUpdate/ProgressToNextUpdate.js +1 -2
  11. package/components/SendToWallet/SendToWalletButton.js +4 -1
  12. package/components/Step/Step.js +2 -1
  13. package/components/TokenList/useTokenSelect.js +10 -1
  14. package/config/version.d.ts +1 -1
  15. package/config/version.js +1 -1
  16. package/fonts/inter.css +75 -58
  17. package/package.json +1 -1
  18. package/tsconfig.cjs.tsbuildinfo +1 -1
  19. package/types/events.d.ts +3 -1
  20. package/types/events.js +1 -0
package/cjs/components/ProgressToNextUpdate/ProgressToNextUpdate.js CHANGED
@@ -10,7 +10,6 @@ const getProgressValue = (updatedAt, timeToUpdate) => updatedAt
10
10
  : 0;
11
11
  const getSecondsToUpdate = (updatedAt, timeToUpdate) => Math.max(Math.round((timeToUpdate - (Date.now() - updatedAt)) / 1000), 0);
12
12
  const ProgressToNextUpdate = ({ updatedAt, timeToUpdate, isLoading, onClick, ...other }) => {
13
- const { t } = (0, react_i18next_1.useTranslation)();
14
13
  const [value, setValue] = (0, react_1.useState)(() => getProgressValue(updatedAt, timeToUpdate));
15
14
  (0, react_1.useEffect)(() => {
16
15
  setValue(getProgressValue(updatedAt, timeToUpdate));
package/cjs/components/SendToWallet/SendToWalletButton.js CHANGED
@@ -6,12 +6,14 @@ const Wallet_1 = require("@mui/icons-material/Wallet");
6
6
  const material_1 = require("@mui/material");
7
7
  const react_hook_form_1 = require("react-hook-form");
8
8
  const react_i18next_1 = require("react-i18next");
9
+ const hooks_1 = require("../../hooks");
9
10
  const providers_1 = require("../../providers");
10
11
  const stores_1 = require("../../stores");
11
12
  const types_1 = require("../../types");
12
13
  const SendToWalletButton = () => {
13
14
  const { t } = (0, react_i18next_1.useTranslation)();
14
15
  const { setValue } = (0, react_hook_form_1.useFormContext)();
16
+ const emitter = (0, hooks_1.useWidgetEvents)();
15
17
  const { account } = (0, providers_1.useWallet)();
16
18
  const { disabledUI, hiddenUI, requiredUI } = (0, providers_1.useWidgetConfig)();
17
19
  const { showSendToWallet, toggleSendToWallet } = (0, stores_1.useSendToWalletStore)();
@@ -27,6 +29,7 @@ const SendToWalletButton = () => {
27
29
  setValue(providers_1.FormKey.ToAddress, '', { shouldTouch: true });
28
30
  }
29
31
  toggleSendToWallet();
32
+ emitter.emit(types_1.WidgetEvent.SendToWalletToggled, stores_1.useSendToWalletStore.getState().showSendToWallet);
30
33
  };
31
34
  return ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { title: t('main.sendToWallet'), placement: "bottom-end", enterDelay: 400, arrow: true, children: (0, jsx_runtime_1.jsx)(material_1.Button, { variant: showSendToWallet ? 'contained' : 'text', onClick: handleClick, sx: {
32
35
  minWidth: 48,
package/cjs/components/Step/Step.js CHANGED
@@ -45,7 +45,8 @@ const Step = ({ step, fromToken, toToken, toAddress }) => {
45
45
  };
46
46
  const formattedToAddress = (0, utils_1.shortenAddress)(toAddress);
47
47
  const toAddressLink = toAddress
48
- ? `${getChainById(step.action.toChainId)?.metamask.blockExplorerUrls[0]}address/${toAddress}`
48
+ ? `${getChainById(step.action.toChainId)?.metamask
49
+ .blockExplorerUrls[0]}address/${toAddress}`
49
50
  : undefined;
50
51
  return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { variant: stepHasError ? 'error' : 'default', children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
51
52
  display: 'flex',
package/cjs/components/TokenList/useTokenSelect.js CHANGED
@@ -42,6 +42,15 @@ const useTokenSelect = (formType, onClick) => {
42
42
  tokenAddress,
43
43
  });
44
44
  onClick?.();
45
- }, [formType, getValues, onBlur, onChange, onClick, setValue, subvariant]);
45
+ }, [
46
+ emitter,
47
+ formType,
48
+ getValues,
49
+ onBlur,
50
+ onChange,
51
+ onClick,
52
+ setValue,
53
+ subvariant,
54
+ ]);
46
55
  };
47
56
  exports.useTokenSelect = useTokenSelect;
package/cjs/config/version.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  export declare const name = "@lifi/widget";
2
- export declare const version = "2.2.8";
2
+ export declare const version = "2.3.0";
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 = '2.2.8';
5
+ exports.version = '2.3.0';
package/cjs/fonts/inter.css CHANGED
@@ -1,154 +1,172 @@
1
1
  @font-face {
2
2
  font-family: 'Inter';
3
- font-style: normal;
3
+ font-style: normal;
4
4
  font-weight: 100;
5
5
  font-display: swap;
6
- src: url("Inter-Thin.woff2?v=3.19") format("woff2"),
7
- url("Inter-Thin.woff?v=3.19") format("woff");
6
+ src:
7
+ url('Inter-Thin.woff2?v=3.19') format('woff2'),
8
+ url('Inter-Thin.woff?v=3.19') format('woff');
8
9
  }
9
10
  @font-face {
10
11
  font-family: 'Inter';
11
- font-style: italic;
12
+ font-style: italic;
12
13
  font-weight: 100;
13
14
  font-display: swap;
14
- src: url("Inter-ThinItalic.woff2?v=3.19") format("woff2"),
15
- url("Inter-ThinItalic.woff?v=3.19") format("woff");
15
+ src:
16
+ url('Inter-ThinItalic.woff2?v=3.19') format('woff2'),
17
+ url('Inter-ThinItalic.woff?v=3.19') format('woff');
16
18
  }
17
19
 
18
20
  @font-face {
19
21
  font-family: 'Inter';
20
- font-style: normal;
22
+ font-style: normal;
21
23
  font-weight: 200;
22
24
  font-display: swap;
23
- src: url("Inter-ExtraLight.woff2?v=3.19") format("woff2"),
24
- url("Inter-ExtraLight.woff?v=3.19") format("woff");
25
+ src:
26
+ url('Inter-ExtraLight.woff2?v=3.19') format('woff2'),
27
+ url('Inter-ExtraLight.woff?v=3.19') format('woff');
25
28
  }
26
29
  @font-face {
27
30
  font-family: 'Inter';
28
- font-style: italic;
31
+ font-style: italic;
29
32
  font-weight: 200;
30
33
  font-display: swap;
31
- src: url("Inter-ExtraLightItalic.woff2?v=3.19") format("woff2"),
32
- url("Inter-ExtraLightItalic.woff?v=3.19") format("woff");
34
+ src:
35
+ url('Inter-ExtraLightItalic.woff2?v=3.19') format('woff2'),
36
+ url('Inter-ExtraLightItalic.woff?v=3.19') format('woff');
33
37
  }
34
38
 
35
39
  @font-face {
36
40
  font-family: 'Inter';
37
- font-style: normal;
41
+ font-style: normal;
38
42
  font-weight: 300;
39
43
  font-display: swap;
40
- src: url("Inter-Light.woff2?v=3.19") format("woff2"),
41
- url("Inter-Light.woff?v=3.19") format("woff");
44
+ src:
45
+ url('Inter-Light.woff2?v=3.19') format('woff2'),
46
+ url('Inter-Light.woff?v=3.19') format('woff');
42
47
  }
43
48
  @font-face {
44
49
  font-family: 'Inter';
45
- font-style: italic;
50
+ font-style: italic;
46
51
  font-weight: 300;
47
52
  font-display: swap;
48
- src: url("Inter-LightItalic.woff2?v=3.19") format("woff2"),
49
- url("Inter-LightItalic.woff?v=3.19") format("woff");
53
+ src:
54
+ url('Inter-LightItalic.woff2?v=3.19') format('woff2'),
55
+ url('Inter-LightItalic.woff?v=3.19') format('woff');
50
56
  }
51
57
 
52
58
  @font-face {
53
59
  font-family: 'Inter';
54
- font-style: normal;
60
+ font-style: normal;
55
61
  font-weight: 400;
56
62
  font-display: swap;
57
- src: url("Inter-Regular.woff2?v=3.19") format("woff2"),
58
- url("Inter-Regular.woff?v=3.19") format("woff");
63
+ src:
64
+ url('Inter-Regular.woff2?v=3.19') format('woff2'),
65
+ url('Inter-Regular.woff?v=3.19') format('woff');
59
66
  }
60
67
  @font-face {
61
68
  font-family: 'Inter';
62
- font-style: italic;
69
+ font-style: italic;
63
70
  font-weight: 400;
64
71
  font-display: swap;
65
- src: url("Inter-Italic.woff2?v=3.19") format("woff2"),
66
- url("Inter-Italic.woff?v=3.19") format("woff");
72
+ src:
73
+ url('Inter-Italic.woff2?v=3.19') format('woff2'),
74
+ url('Inter-Italic.woff?v=3.19') format('woff');
67
75
  }
68
76
 
69
77
  @font-face {
70
78
  font-family: 'Inter';
71
- font-style: normal;
79
+ font-style: normal;
72
80
  font-weight: 500;
73
81
  font-display: swap;
74
- src: url("Inter-Medium.woff2?v=3.19") format("woff2"),
75
- url("Inter-Medium.woff?v=3.19") format("woff");
82
+ src:
83
+ url('Inter-Medium.woff2?v=3.19') format('woff2'),
84
+ url('Inter-Medium.woff?v=3.19') format('woff');
76
85
  }
77
86
  @font-face {
78
87
  font-family: 'Inter';
79
- font-style: italic;
88
+ font-style: italic;
80
89
  font-weight: 500;
81
90
  font-display: swap;
82
- src: url("Inter-MediumItalic.woff2?v=3.19") format("woff2"),
83
- url("Inter-MediumItalic.woff?v=3.19") format("woff");
91
+ src:
92
+ url('Inter-MediumItalic.woff2?v=3.19') format('woff2'),
93
+ url('Inter-MediumItalic.woff?v=3.19') format('woff');
84
94
  }
85
95
 
86
96
  @font-face {
87
97
  font-family: 'Inter';
88
- font-style: normal;
98
+ font-style: normal;
89
99
  font-weight: 600;
90
100
  font-display: swap;
91
- src: url("Inter-SemiBold.woff2?v=3.19") format("woff2"),
92
- url("Inter-SemiBold.woff?v=3.19") format("woff");
101
+ src:
102
+ url('Inter-SemiBold.woff2?v=3.19') format('woff2'),
103
+ url('Inter-SemiBold.woff?v=3.19') format('woff');
93
104
  }
94
105
  @font-face {
95
106
  font-family: 'Inter';
96
- font-style: italic;
107
+ font-style: italic;
97
108
  font-weight: 600;
98
109
  font-display: swap;
99
- src: url("Inter-SemiBoldItalic.woff2?v=3.19") format("woff2"),
100
- url("Inter-SemiBoldItalic.woff?v=3.19") format("woff");
110
+ src:
111
+ url('Inter-SemiBoldItalic.woff2?v=3.19') format('woff2'),
112
+ url('Inter-SemiBoldItalic.woff?v=3.19') format('woff');
101
113
  }
102
114
 
103
115
  @font-face {
104
116
  font-family: 'Inter';
105
- font-style: normal;
117
+ font-style: normal;
106
118
  font-weight: 700;
107
119
  font-display: swap;
108
- src: url("Inter-Bold.woff2?v=3.19") format("woff2"),
109
- url("Inter-Bold.woff?v=3.19") format("woff");
120
+ src:
121
+ url('Inter-Bold.woff2?v=3.19') format('woff2'),
122
+ url('Inter-Bold.woff?v=3.19') format('woff');
110
123
  }
111
124
  @font-face {
112
125
  font-family: 'Inter';
113
- font-style: italic;
126
+ font-style: italic;
114
127
  font-weight: 700;
115
128
  font-display: swap;
116
- src: url("Inter-BoldItalic.woff2?v=3.19") format("woff2"),
117
- url("Inter-BoldItalic.woff?v=3.19") format("woff");
129
+ src:
130
+ url('Inter-BoldItalic.woff2?v=3.19') format('woff2'),
131
+ url('Inter-BoldItalic.woff?v=3.19') format('woff');
118
132
  }
119
133
 
120
134
  @font-face {
121
135
  font-family: 'Inter';
122
- font-style: normal;
136
+ font-style: normal;
123
137
  font-weight: 800;
124
138
  font-display: swap;
125
- src: url("Inter-ExtraBold.woff2?v=3.19") format("woff2"),
126
- url("Inter-ExtraBold.woff?v=3.19") format("woff");
139
+ src:
140
+ url('Inter-ExtraBold.woff2?v=3.19') format('woff2'),
141
+ url('Inter-ExtraBold.woff?v=3.19') format('woff');
127
142
  }
128
143
  @font-face {
129
144
  font-family: 'Inter';
130
- font-style: italic;
145
+ font-style: italic;
131
146
  font-weight: 800;
132
147
  font-display: swap;
133
- src: url("Inter-ExtraBoldItalic.woff2?v=3.19") format("woff2"),
134
- url("Inter-ExtraBoldItalic.woff?v=3.19") format("woff");
148
+ src:
149
+ url('Inter-ExtraBoldItalic.woff2?v=3.19') format('woff2'),
150
+ url('Inter-ExtraBoldItalic.woff?v=3.19') format('woff');
135
151
  }
136
152
 
137
153
  @font-face {
138
154
  font-family: 'Inter';
139
- font-style: normal;
155
+ font-style: normal;
140
156
  font-weight: 900;
141
157
  font-display: swap;
142
- src: url("Inter-Black.woff2?v=3.19") format("woff2"),
143
- url("Inter-Black.woff?v=3.19") format("woff");
158
+ src:
159
+ url('Inter-Black.woff2?v=3.19') format('woff2'),
160
+ url('Inter-Black.woff?v=3.19') format('woff');
144
161
  }
145
162
  @font-face {
146
163
  font-family: 'Inter';
147
- font-style: italic;
164
+ font-style: italic;
148
165
  font-weight: 900;
149
166
  font-display: swap;
150
- src: url("Inter-BlackItalic.woff2?v=3.19") format("woff2"),
151
- url("Inter-BlackItalic.woff?v=3.19") format("woff");
167
+ src:
168
+ url('Inter-BlackItalic.woff2?v=3.19') format('woff2'),
169
+ url('Inter-BlackItalic.woff?v=3.19') format('woff');
152
170
  }
153
171
 
154
172
  /* -------------------------------------------------------
@@ -166,7 +184,7 @@ Usage:
166
184
  font-display: swap;
167
185
  font-style: normal;
168
186
  font-named-instance: 'Regular';
169
- src: url("Inter-roman.var.woff2?v=3.19") format("woff2");
187
+ src: url('Inter-roman.var.woff2?v=3.19') format('woff2');
170
188
  }
171
189
  @font-face {
172
190
  font-family: 'Inter var';
@@ -174,10 +192,9 @@ Usage:
174
192
  font-display: swap;
175
193
  font-style: italic;
176
194
  font-named-instance: 'Italic';
177
- src: url("Inter-italic.var.woff2?v=3.19") format("woff2");
195
+ src: url('Inter-italic.var.woff2?v=3.19') format('woff2');
178
196
  }
179
197
 
180
-
181
198
  /* --------------------------------------------------------------------------
182
199
  [EXPERIMENTAL] Multi-axis, single variable font.
183
200
 
@@ -196,5 +213,5 @@ explicitly, e.g.
196
213
  font-weight: 100 900;
197
214
  font-display: swap;
198
215
  font-style: oblique 0deg 10deg;
199
- src: url("Inter.var.woff2?v=3.19") format("woff2");
216
+ src: url('Inter.var.woff2?v=3.19') format('woff2');
200
217
  }
package/cjs/types/events.d.ts CHANGED
@@ -7,7 +7,8 @@ export declare enum WidgetEvent {
7
7
  RouteHighValueLoss = "routeHighValueLoss",
8
8
  RouteContactSupport = "routeContactSupport",
9
9
  SourceChainTokenSelected = "sourceChainTokenSelected",
10
- DestinationChainTokenSelected = "destinationChainTokenSelected"
10
+ DestinationChainTokenSelected = "destinationChainTokenSelected",
11
+ SendToWalletToggled = "sendToWalletToggled"
11
12
  }
12
13
  export type WidgetEvents = {
13
14
  routeExecutionStarted: Route;
@@ -18,6 +19,7 @@ export type WidgetEvents = {
18
19
  routeContactSupport: RouteContactSupport;
19
20
  sourceChainTokenSelected: ChainTokenSelected;
20
21
  destinationChainTokenSelected: ChainTokenSelected;
22
+ sendToWalletToggled: boolean;
21
23
  };
22
24
  export interface RouteContactSupport {
23
25
  supportId?: string;
package/cjs/types/events.js CHANGED
@@ -11,4 +11,5 @@ var WidgetEvent;
11
11
  WidgetEvent["RouteContactSupport"] = "routeContactSupport";
12
12
  WidgetEvent["SourceChainTokenSelected"] = "sourceChainTokenSelected";
13
13
  WidgetEvent["DestinationChainTokenSelected"] = "destinationChainTokenSelected";
14
+ WidgetEvent["SendToWalletToggled"] = "sendToWalletToggled";
14
15
  })(WidgetEvent || (exports.WidgetEvent = WidgetEvent = {}));
package/components/ProgressToNextUpdate/ProgressToNextUpdate.js CHANGED
@@ -1,13 +1,12 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { Box, CircularProgress, IconButton, Tooltip } from '@mui/material';
3
3
  import { useEffect, useState } from 'react';
4
- import { Trans, useTranslation } from 'react-i18next';
4
+ import { Trans } from 'react-i18next';
5
5
  const getProgressValue = (updatedAt, timeToUpdate) => updatedAt
6
6
  ? Math.min(100, ((Date.now() - updatedAt) / timeToUpdate) * 100)
7
7
  : 0;
8
8
  const getSecondsToUpdate = (updatedAt, timeToUpdate) => Math.max(Math.round((timeToUpdate - (Date.now() - updatedAt)) / 1000), 0);
9
9
  export const ProgressToNextUpdate = ({ updatedAt, timeToUpdate, isLoading, onClick, ...other }) => {
10
- const { t } = useTranslation();
11
10
  const [value, setValue] = useState(() => getProgressValue(updatedAt, timeToUpdate));
12
11
  useEffect(() => {
13
12
  setValue(getProgressValue(updatedAt, timeToUpdate));
package/components/SendToWallet/SendToWalletButton.js CHANGED
@@ -3,12 +3,14 @@ import WalletIcon from '@mui/icons-material/Wallet';
3
3
  import { Button, Tooltip } from '@mui/material';
4
4
  import { useFormContext } from 'react-hook-form';
5
5
  import { useTranslation } from 'react-i18next';
6
+ import { useWidgetEvents } from '../../hooks';
6
7
  import { FormKey, useWallet, useWidgetConfig } from '../../providers';
7
8
  import { useSendToWalletStore, useSettings } from '../../stores';
8
- import { DisabledUI, HiddenUI, RequiredUI } from '../../types';
9
+ import { DisabledUI, HiddenUI, RequiredUI, WidgetEvent } from '../../types';
9
10
  export const SendToWalletButton = () => {
10
11
  const { t } = useTranslation();
11
12
  const { setValue } = useFormContext();
13
+ const emitter = useWidgetEvents();
12
14
  const { account } = useWallet();
13
15
  const { disabledUI, hiddenUI, requiredUI } = useWidgetConfig();
14
16
  const { showSendToWallet, toggleSendToWallet } = useSendToWalletStore();
@@ -24,6 +26,7 @@ export const SendToWalletButton = () => {
24
26
  setValue(FormKey.ToAddress, '', { shouldTouch: true });
25
27
  }
26
28
  toggleSendToWallet();
29
+ emitter.emit(WidgetEvent.SendToWalletToggled, useSendToWalletStore.getState().showSendToWallet);
27
30
  };
28
31
  return (_jsx(Tooltip, { title: t('main.sendToWallet'), placement: "bottom-end", enterDelay: 400, arrow: true, children: _jsx(Button, { variant: showSendToWallet ? 'contained' : 'text', onClick: handleClick, sx: {
29
32
  minWidth: 48,
package/components/Step/Step.js CHANGED
@@ -42,7 +42,8 @@ export const Step = ({ step, fromToken, toToken, toAddress }) => {
42
42
  };
43
43
  const formattedToAddress = shortenAddress(toAddress);
44
44
  const toAddressLink = toAddress
45
- ? `${getChainById(step.action.toChainId)?.metamask.blockExplorerUrls[0]}address/${toAddress}`
45
+ ? `${getChainById(step.action.toChainId)?.metamask
46
+ .blockExplorerUrls[0]}address/${toAddress}`
46
47
  : undefined;
47
48
  return (_jsxs(Card, { variant: stepHasError ? 'error' : 'default', children: [_jsxs(Box, { sx: {
48
49
  display: 'flex',
package/components/TokenList/useTokenSelect.js CHANGED
@@ -39,5 +39,14 @@ export const useTokenSelect = (formType, onClick) => {
39
39
  tokenAddress,
40
40
  });
41
41
  onClick?.();
42
- }, [formType, getValues, onBlur, onChange, onClick, setValue, subvariant]);
42
+ }, [
43
+ emitter,
44
+ formType,
45
+ getValues,
46
+ onBlur,
47
+ onChange,
48
+ onClick,
49
+ setValue,
50
+ subvariant,
51
+ ]);
43
52
  };
package/config/version.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  export declare const name = "@lifi/widget";
2
- export declare const version = "2.2.8";
2
+ export declare const version = "2.3.0";
package/config/version.js CHANGED
@@ -1,2 +1,2 @@
1
1
  export const name = '@lifi/widget';
2
- export const version = '2.2.8';
2
+ export const version = '2.3.0';