@lifi/widget 2.0.0-beta.2 → 2.0.0-beta.3

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.
@@ -2,8 +2,11 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.InsuranceCard = void 0;
4
4
  const jsx_runtime_1 = require("react/jsx-runtime");
5
+ const ExpandLess_1 = require("@mui/icons-material/ExpandLess");
6
+ const ExpandMore_1 = require("@mui/icons-material/ExpandMore");
5
7
  const VerifiedUser_1 = require("@mui/icons-material/VerifiedUser");
6
8
  const material_1 = require("@mui/material");
9
+ const react_1 = require("react");
7
10
  const react_i18next_1 = require("react-i18next");
8
11
  const icons_1 = require("../../icons");
9
12
  const stores_1 = require("../../stores");
@@ -11,16 +14,24 @@ const Card_1 = require("../Card");
11
14
  const Switch_1 = require("../Switch");
12
15
  const InsuranceCard = ({ status, feeAmountUsd, insuranceCoverageId, onChange, ...props }) => {
13
16
  const { t } = (0, react_i18next_1.useTranslation)();
14
- return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { selectionColor: "secondary", indented: true, ...props, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [(0, jsx_runtime_1.jsxs)(Card_1.CardLabel, { type: 'insurance', children: [(0, jsx_runtime_1.jsx)(VerifiedUser_1.default, { fontSize: "inherit" }), (0, jsx_runtime_1.jsx)(Card_1.CardLabelTypography, { type: "icon", children: status === stores_1.RouteExecutionStatus.Idle
15
- ? t(`swap.tags.insurance`)
16
- : t(`swap.tags.insured`) })] }), (0, jsx_runtime_1.jsx)(icons_1.InsuraceLogo, {})] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 24, fontWeight: 700, lineHeight: 1, children: t('format.currency', {
17
- value: feeAmountUsd,
18
- }) }), status === stores_1.RouteExecutionStatus.Idle ? ((0, jsx_runtime_1.jsx)(Switch_1.Switch, { onChange: onChange })) : null] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 12, children: status === stores_1.RouteExecutionStatus.Idle
19
- ? 'Get 100% coverage for lost tokens.'
20
- : '100% coverage for lost tokens.' }), (0, jsx_runtime_1.jsx)(material_1.Link, { href: status === stores_1.RouteExecutionStatus.Idle
21
- ? 'https://docs.insurace.io/landing-page/documentation/cover-products/bridge-cover/li.fi'
22
- : `https://app.insurace.io/bridge-cover?search=${insuranceCoverageId}`, target: "_blank", underline: "none", color: "text.primary", children: (0, jsx_runtime_1.jsx)(material_1.Typography, { px: 0.5, color: "primary", fontSize: 12, fontWeight: 600, children: status === stores_1.RouteExecutionStatus.Idle
23
- ? 'Learn more'
24
- : 'View coverage' }) })] })] }));
17
+ const [cardExpanded, setCardExpanded] = (0, react_1.useState)(status === stores_1.RouteExecutionStatus.Idle);
18
+ const handleExpand = (e) => {
19
+ e.stopPropagation();
20
+ setCardExpanded((expanded) => !expanded);
21
+ };
22
+ return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { selectionColor: "secondary", indented: true, ...props, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsxs)(Card_1.CardLabel, { type: 'insurance', children: [(0, jsx_runtime_1.jsx)(VerifiedUser_1.default, { fontSize: "inherit" }), (0, jsx_runtime_1.jsx)(Card_1.CardLabelTypography, { type: "icon", children: status === stores_1.RouteExecutionStatus.Idle
23
+ ? t('swap.tags.insurance')
24
+ : t('swap.tags.insured') })] }), status === stores_1.RouteExecutionStatus.Idle ? ((0, jsx_runtime_1.jsx)(Switch_1.Switch, { onChange: onChange })) : ((0, jsx_runtime_1.jsx)(material_1.Box, { my: -0.5, children: (0, jsx_runtime_1.jsx)(Card_1.CardIconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? (0, jsx_runtime_1.jsx)(ExpandLess_1.default, {}) : (0, jsx_runtime_1.jsx)(ExpandMore_1.default, {}) }) }))] }), (0, jsx_runtime_1.jsx)(material_1.Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: (0, jsx_runtime_1.jsxs)(material_1.Box, { mt: 2, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 24, fontWeight: 700, lineHeight: 1, children: t('format.currency', {
25
+ value: feeAmountUsd,
26
+ }) }), (0, jsx_runtime_1.jsx)(icons_1.InsuraceLogo, {})] }), (0, jsx_runtime_1.jsxs)(material_1.Box, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, children: status === stores_1.RouteExecutionStatus.Idle
27
+ ? t('swap.insurance.insure')
28
+ : t('swap.insurance.insured') }), status !== stores_1.RouteExecutionStatus.Idle ? ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
29
+ listStyleType: 'disc',
30
+ pl: 2,
31
+ }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, display: "list-item", children: t('swap.insurance.bridgeExploits') }), (0, jsx_runtime_1.jsx)(material_1.Typography, { fontSize: 14, display: "list-item", children: t('swap.insurance.slippageError') })] })) : null, (0, jsx_runtime_1.jsx)(material_1.Link, { href: status === stores_1.RouteExecutionStatus.Idle
32
+ ? 'https://docs.insurace.io/landing-page/documentation/cover-products/bridge-cover/li.fi'
33
+ : `https://app.insurace.io/bridge-cover?search=${insuranceCoverageId}`, target: "_blank", underline: "none", color: "text.primary", children: (0, jsx_runtime_1.jsx)(material_1.Typography, { pt: 0.5, color: "primary", fontSize: 14, fontWeight: 600, children: status === stores_1.RouteExecutionStatus.Idle
34
+ ? t('button.learnMore')
35
+ : t('button.viewCoverage') }) })] })] }) })] }));
25
36
  };
26
37
  exports.InsuranceCard = InsuranceCard;
@@ -1,2 +1,2 @@
1
1
  export declare const name = "@lifi/widget";
2
- export declare const version = "2.0.0-beta.2";
2
+ export declare const version = "2.0.0-beta.3";
@@ -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.0.0-beta.2';
5
+ exports.version = '2.0.0-beta.3';
package/cjs/i18n/en.json CHANGED
@@ -12,6 +12,7 @@
12
12
  "done": "Done",
13
13
  "getGas": "Get gas",
14
14
  "hide": "Hide",
15
+ "learnMore": "Learn more",
15
16
  "lifiSwap": "LI.FI Swap",
16
17
  "light": "Light",
17
18
  "max": "max",
@@ -29,6 +30,7 @@
29
30
  "startSwap": "Start swap",
30
31
  "swap": "Swap",
31
32
  "tryAgain": "Try again",
33
+ "viewCoverage": "View coverage",
32
34
  "viewOnExplorer": "View on explorer"
33
35
  },
34
36
  "format": {
@@ -104,6 +106,12 @@
104
106
  "gasFeeEstimated": "estimated gas fee",
105
107
  "gasFeePaid": "gas fee paid",
106
108
  "inProgress": "in progress",
109
+ "insurance": {
110
+ "bridgeExploits": "Bridge malfunctions, hacks or exploits",
111
+ "insure": "Insure 100% of tokens in transit.",
112
+ "insured": "You've insured 100% of tokens in transit:",
113
+ "slippageError": "Error in slippage for tokens received"
114
+ },
107
115
  "info": {
108
116
  "message": {
109
117
  "autoRefuel": "You're low on {{chainName}} gas. By continuing, you'll get enough gas to complete the swap.",
@@ -1,22 +1,33 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import ExpandLessIcon from '@mui/icons-material/ExpandLess';
3
+ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
2
4
  import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
3
- import { Box, Link, Typography } from '@mui/material';
5
+ import { Box, Collapse, Link, Typography } from '@mui/material';
6
+ import { useState } from 'react';
4
7
  import { useTranslation } from 'react-i18next';
5
8
  import { InsuraceLogo } from '../../icons';
6
9
  import { RouteExecutionStatus } from '../../stores';
7
- import { Card, CardLabel, CardLabelTypography } from '../Card';
10
+ import { Card, CardIconButton, CardLabel, CardLabelTypography } from '../Card';
8
11
  import { Switch } from '../Switch';
9
12
  export const InsuranceCard = ({ status, feeAmountUsd, insuranceCoverageId, onChange, ...props }) => {
10
13
  const { t } = useTranslation();
11
- return (_jsxs(Card, { selectionColor: "secondary", indented: true, ...props, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [_jsxs(CardLabel, { type: 'insurance', children: [_jsx(VerifiedUserIcon, { fontSize: "inherit" }), _jsx(CardLabelTypography, { type: "icon", children: status === RouteExecutionStatus.Idle
12
- ? t(`swap.tags.insurance`)
13
- : t(`swap.tags.insured`) })] }), _jsx(InsuraceLogo, {})] }), _jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [_jsx(Typography, { fontSize: 24, fontWeight: 700, lineHeight: 1, children: t('format.currency', {
14
- value: feeAmountUsd,
15
- }) }), status === RouteExecutionStatus.Idle ? (_jsx(Switch, { onChange: onChange })) : null] }), _jsxs(Box, { display: "flex", alignItems: "center", children: [_jsx(Typography, { fontSize: 12, children: status === RouteExecutionStatus.Idle
16
- ? 'Get 100% coverage for lost tokens.'
17
- : '100% coverage for lost tokens.' }), _jsx(Link, { href: status === RouteExecutionStatus.Idle
18
- ? 'https://docs.insurace.io/landing-page/documentation/cover-products/bridge-cover/li.fi'
19
- : `https://app.insurace.io/bridge-cover?search=${insuranceCoverageId}`, target: "_blank", underline: "none", color: "text.primary", children: _jsx(Typography, { px: 0.5, color: "primary", fontSize: 12, fontWeight: 600, children: status === RouteExecutionStatus.Idle
20
- ? 'Learn more'
21
- : 'View coverage' }) })] })] }));
14
+ const [cardExpanded, setCardExpanded] = useState(status === RouteExecutionStatus.Idle);
15
+ const handleExpand = (e) => {
16
+ e.stopPropagation();
17
+ setCardExpanded((expanded) => !expanded);
18
+ };
19
+ return (_jsxs(Card, { selectionColor: "secondary", indented: true, ...props, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", children: [_jsxs(CardLabel, { type: 'insurance', children: [_jsx(VerifiedUserIcon, { fontSize: "inherit" }), _jsx(CardLabelTypography, { type: "icon", children: status === RouteExecutionStatus.Idle
20
+ ? t('swap.tags.insurance')
21
+ : t('swap.tags.insured') })] }), status === RouteExecutionStatus.Idle ? (_jsx(Switch, { onChange: onChange })) : (_jsx(Box, { my: -0.5, children: _jsx(CardIconButton, { onClick: handleExpand, size: "small", children: cardExpanded ? _jsx(ExpandLessIcon, {}) : _jsx(ExpandMoreIcon, {}) }) }))] }), _jsx(Collapse, { timeout: 225, in: cardExpanded, mountOnEnter: true, unmountOnExit: true, children: _jsxs(Box, { mt: 2, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [_jsx(Typography, { fontSize: 24, fontWeight: 700, lineHeight: 1, children: t('format.currency', {
22
+ value: feeAmountUsd,
23
+ }) }), _jsx(InsuraceLogo, {})] }), _jsxs(Box, { children: [_jsx(Typography, { fontSize: 14, children: status === RouteExecutionStatus.Idle
24
+ ? t('swap.insurance.insure')
25
+ : t('swap.insurance.insured') }), status !== RouteExecutionStatus.Idle ? (_jsxs(Box, { sx: {
26
+ listStyleType: 'disc',
27
+ pl: 2,
28
+ }, children: [_jsx(Typography, { fontSize: 14, display: "list-item", children: t('swap.insurance.bridgeExploits') }), _jsx(Typography, { fontSize: 14, display: "list-item", children: t('swap.insurance.slippageError') })] })) : null, _jsx(Link, { href: status === RouteExecutionStatus.Idle
29
+ ? 'https://docs.insurace.io/landing-page/documentation/cover-products/bridge-cover/li.fi'
30
+ : `https://app.insurace.io/bridge-cover?search=${insuranceCoverageId}`, target: "_blank", underline: "none", color: "text.primary", children: _jsx(Typography, { pt: 0.5, color: "primary", fontSize: 14, fontWeight: 600, children: status === RouteExecutionStatus.Idle
31
+ ? t('button.learnMore')
32
+ : t('button.viewCoverage') }) })] })] }) })] }));
22
33
  };
@@ -1,2 +1,2 @@
1
1
  export declare const name = "@lifi/widget";
2
- export declare const version = "2.0.0-beta.2";
2
+ export declare const version = "2.0.0-beta.3";
package/config/version.js CHANGED
@@ -1,2 +1,2 @@
1
1
  export const name = '@lifi/widget';
2
- export const version = '2.0.0-beta.2';
2
+ export const version = '2.0.0-beta.3';
package/i18n/en.json CHANGED
@@ -12,6 +12,7 @@
12
12
  "done": "Done",
13
13
  "getGas": "Get gas",
14
14
  "hide": "Hide",
15
+ "learnMore": "Learn more",
15
16
  "lifiSwap": "LI.FI Swap",
16
17
  "light": "Light",
17
18
  "max": "max",
@@ -29,6 +30,7 @@
29
30
  "startSwap": "Start swap",
30
31
  "swap": "Swap",
31
32
  "tryAgain": "Try again",
33
+ "viewCoverage": "View coverage",
32
34
  "viewOnExplorer": "View on explorer"
33
35
  },
34
36
  "format": {
@@ -104,6 +106,12 @@
104
106
  "gasFeeEstimated": "estimated gas fee",
105
107
  "gasFeePaid": "gas fee paid",
106
108
  "inProgress": "in progress",
109
+ "insurance": {
110
+ "bridgeExploits": "Bridge malfunctions, hacks or exploits",
111
+ "insure": "Insure 100% of tokens in transit.",
112
+ "insured": "You've insured 100% of tokens in transit:",
113
+ "slippageError": "Error in slippage for tokens received"
114
+ },
107
115
  "info": {
108
116
  "message": {
109
117
  "autoRefuel": "You're low on {{chainName}} gas. By continuing, you'll get enough gas to complete the swap.",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lifi/widget",
3
- "version": "2.0.0-beta.2",
3
+ "version": "2.0.0-beta.3",
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",
@@ -44,7 +44,7 @@
44
44
  "@ethersproject/experimental": "^5.7.0",
45
45
  "@ethersproject/providers": "^5.7.2",
46
46
  "@lifi/sdk": "^2.0.0-beta.8",
47
- "@lifi/wallet-management": "^2.0.0-beta.1",
47
+ "@lifi/wallet-management": "^2.0.0-beta.2",
48
48
  "@mui/icons-material": "^5.11.16",
49
49
  "@mui/lab": "^5.0.0-alpha.127",
50
50
  "@mui/material": "^5.12.1",