@lifi/widget 4.0.0-beta.11 → 4.0.0-beta.13
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.
- package/dist/esm/components/Header/ActivitiesButton.js +1 -0
- package/dist/esm/components/Header/ActivitiesButton.js.map +1 -1
- package/dist/esm/components/RouteCard/RouteTokens.js +1 -2
- package/dist/esm/components/RouteCard/RouteTokens.js.map +1 -1
- package/dist/esm/components/SelectTokenButton/SelectTokenButton.style.js +8 -31
- package/dist/esm/components/SelectTokenButton/SelectTokenButton.style.js.map +1 -1
- package/dist/esm/config/version.d.ts +1 -1
- package/dist/esm/config/version.js +1 -1
- package/dist/esm/config/version.js.map +1 -1
- package/dist/esm/stores/form/useFormRef.js +8 -0
- package/dist/esm/stores/form/useFormRef.js.map +1 -1
- package/dist/esm/stores/routes/createRouteExecutionStore.js +2 -1
- package/dist/esm/stores/routes/createRouteExecutionStore.js.map +1 -1
- package/dist/esm/stores/routes/utils.js +1 -1
- package/dist/esm/stores/routes/utils.js.map +1 -1
- package/dist/esm/utils/getActionMessage.js +1 -1
- package/dist/esm/utils/getActionMessage.js.map +1 -1
- package/package.json +3 -3
- package/src/components/Header/ActivitiesButton.tsx +1 -0
- package/src/components/RouteCard/RouteTokens.tsx +1 -2
- package/src/components/SelectTokenButton/SelectTokenButton.style.tsx +35 -69
- package/src/config/version.ts +1 -1
- package/src/stores/form/useFormRef.ts +20 -1
- package/src/stores/routes/createRouteExecutionStore.ts +4 -1
- package/src/stores/routes/utils.ts +1 -1
- package/src/utils/getActionMessage.ts +1 -1
|
@@ -19,6 +19,7 @@ const ActivitiesButton = () => {
|
|
|
19
19
|
active: indicator.active || indicator.failed,
|
|
20
20
|
size: "medium",
|
|
21
21
|
onClick: () => navigate({ to: navigationRoutes.activities }),
|
|
22
|
+
disableRipple: true,
|
|
22
23
|
children: /* @__PURE__ */ jsx(ErrorBadge, {
|
|
23
24
|
invisible: !indicator.failed,
|
|
24
25
|
badgeContent: /* @__PURE__ */ jsx(ErrorRounded, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActivitiesButton.js","names":["HistoryIcon"],"sources":["../../../../src/components/Header/ActivitiesButton.tsx"],"sourcesContent":["import ErrorRounded from '@mui/icons-material/ErrorRounded'\nimport HistoryIcon from '@mui/icons-material/History'\nimport { Tooltip } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useRouteExecutionIndicator } from '../../stores/routes/useRouteExecutionIndicator.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { CircularProgressPending } from '../Step/CircularProgress.style.js'\nimport {\n ActivitiesIconButton,\n ErrorBadge,\n IconContainer,\n ProgressTrack,\n} from './ActivitiesButton.style.js'\n\nexport const ActivitiesButton = (): JSX.Element => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n const indicator = useRouteExecutionIndicator()\n\n return (\n <Tooltip title={t('header.activities')}>\n <ActivitiesIconButton\n active={indicator.active || indicator.failed}\n size=\"medium\"\n onClick={() => navigate({ to: navigationRoutes.activities })}\n >\n <ErrorBadge\n invisible={!indicator.failed}\n badgeContent={\n <ErrorRounded color=\"error\" sx={{ width: 20, height: 20 }} />\n }\n overlap=\"circular\"\n anchorOrigin={{ vertical: 'top', horizontal: 'right' }}\n >\n <IconContainer>\n {(indicator.active || indicator.failed) && (\n <ProgressTrack\n variant=\"determinate\"\n value={100}\n size={40}\n thickness={3}\n />\n )}\n {indicator.active && (\n <CircularProgressPending\n size={40}\n sx={{ position: 'absolute', top: -8, left: -8 }}\n />\n )}\n <HistoryIcon />\n </IconContainer>\n </ErrorBadge>\n </ActivitiesIconButton>\n </Tooltip>\n )\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAa,yBAAsC;CACjD,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,WAAW,aAAa;CAC9B,MAAM,YAAY,4BAA4B;AAE9C,QACE,oBAAC,SAAD;EAAS,OAAO,EAAE,oBAAoB;YACpC,oBAAC,sBAAD;GACE,QAAQ,UAAU,UAAU,UAAU;GACtC,MAAK;GACL,eAAe,SAAS,EAAE,IAAI,iBAAiB,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"ActivitiesButton.js","names":["HistoryIcon"],"sources":["../../../../src/components/Header/ActivitiesButton.tsx"],"sourcesContent":["import ErrorRounded from '@mui/icons-material/ErrorRounded'\nimport HistoryIcon from '@mui/icons-material/History'\nimport { Tooltip } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useRouteExecutionIndicator } from '../../stores/routes/useRouteExecutionIndicator.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { CircularProgressPending } from '../Step/CircularProgress.style.js'\nimport {\n ActivitiesIconButton,\n ErrorBadge,\n IconContainer,\n ProgressTrack,\n} from './ActivitiesButton.style.js'\n\nexport const ActivitiesButton = (): JSX.Element => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n const indicator = useRouteExecutionIndicator()\n\n return (\n <Tooltip title={t('header.activities')}>\n <ActivitiesIconButton\n active={indicator.active || indicator.failed}\n size=\"medium\"\n onClick={() => navigate({ to: navigationRoutes.activities })}\n disableRipple\n >\n <ErrorBadge\n invisible={!indicator.failed}\n badgeContent={\n <ErrorRounded color=\"error\" sx={{ width: 20, height: 20 }} />\n }\n overlap=\"circular\"\n anchorOrigin={{ vertical: 'top', horizontal: 'right' }}\n >\n <IconContainer>\n {(indicator.active || indicator.failed) && (\n <ProgressTrack\n variant=\"determinate\"\n value={100}\n size={40}\n thickness={3}\n />\n )}\n {indicator.active && (\n <CircularProgressPending\n size={40}\n sx={{ position: 'absolute', top: -8, left: -8 }}\n />\n )}\n <HistoryIcon />\n </IconContainer>\n </ErrorBadge>\n </ActivitiesIconButton>\n </Tooltip>\n )\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAa,yBAAsC;CACjD,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,WAAW,aAAa;CAC9B,MAAM,YAAY,4BAA4B;AAE9C,QACE,oBAAC,SAAD;EAAS,OAAO,EAAE,oBAAoB;YACpC,oBAAC,sBAAD;GACE,QAAQ,UAAU,UAAU,UAAU;GACtC,MAAK;GACL,eAAe,SAAS,EAAE,IAAI,iBAAiB,YAAY,CAAC;GAC5D,eAAA;aAEA,oBAAC,YAAD;IACE,WAAW,CAAC,UAAU;IACtB,cACE,oBAAC,cAAD;KAAc,OAAM;KAAQ,IAAI;MAAE,OAAO;MAAI,QAAQ;MAAI;KAAI,CAAA;IAE/D,SAAQ;IACR,cAAc;KAAE,UAAU;KAAO,YAAY;KAAS;cAEtD,qBAAC,eAAD,EAAA,UAAA;MACI,UAAU,UAAU,UAAU,WAC9B,oBAAC,eAAD;MACE,SAAQ;MACR,OAAO;MACP,MAAM;MACN,WAAW;MACX,CAAA;KAEH,UAAU,UACT,oBAAC,yBAAD;MACE,MAAM;MACN,IAAI;OAAE,UAAU;OAAY,KAAK;OAAI,MAAM;OAAI;MAC/C,CAAA;KAEJ,oBAACA,SAAD,EAAe,CAAA;KACD,EAAA,CAAA;IACL,CAAA;GACQ,CAAA;EACf,CAAA"}
|
|
@@ -6,7 +6,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
6
6
|
import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
|
|
7
7
|
//#region src/components/RouteCard/RouteTokens.tsx
|
|
8
8
|
const RouteTokens = ({ route, showEssentials }) => {
|
|
9
|
-
const { subvariant
|
|
9
|
+
const { subvariant } = useWidgetConfig();
|
|
10
10
|
const fromToken = {
|
|
11
11
|
...route.steps[0].action.fromToken,
|
|
12
12
|
amount: BigInt(route.steps[0].action.fromAmount)
|
|
@@ -38,7 +38,6 @@ const RouteTokens = ({ route, showEssentials }) => {
|
|
|
38
38
|
route,
|
|
39
39
|
token: toToken,
|
|
40
40
|
impactToken: fromToken,
|
|
41
|
-
defaultExpanded: defaultUI?.transactionDetailsExpanded,
|
|
42
41
|
showEssentials
|
|
43
42
|
}) : null
|
|
44
43
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RouteTokens.js","names":[],"sources":["../../../../src/components/RouteCard/RouteTokens.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'\nimport { Box } from '@mui/material'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { Token } from '../Token/Token.js'\nimport { RouteToken } from './RouteToken.js'\n\nexport const RouteTokens: React.FC<{\n route: RouteExtended\n showEssentials?: boolean\n}> = ({ route, showEssentials }) => {\n const { subvariant
|
|
1
|
+
{"version":3,"file":"RouteTokens.js","names":[],"sources":["../../../../src/components/RouteCard/RouteTokens.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'\nimport { Box } from '@mui/material'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { Token } from '../Token/Token.js'\nimport { RouteToken } from './RouteToken.js'\n\nexport const RouteTokens: React.FC<{\n route: RouteExtended\n showEssentials?: boolean\n}> = ({ route, showEssentials }) => {\n const { subvariant } = useWidgetConfig()\n\n const fromToken = {\n ...route.steps[0].action.fromToken,\n amount: BigInt(route.steps[0].action.fromAmount),\n }\n\n const lastStepIndex = route.steps.length - 1\n const toToken = {\n ...(route.steps[lastStepIndex].execution?.toToken ??\n route.steps[lastStepIndex].action.toToken),\n amount: route.steps[lastStepIndex].execution?.toAmount\n ? BigInt(route.steps[lastStepIndex].execution.toAmount)\n : subvariant === 'custom'\n ? BigInt(route.toAmount)\n : BigInt(route.steps[lastStepIndex].estimate.toAmount),\n }\n\n return (\n <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1.5 }}>\n {fromToken ? <Token token={fromToken} /> : null}\n <Box\n sx={{\n width: 40,\n height: 20,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n }}\n >\n <ArrowDownwardIcon sx={{ fontSize: 16 }} />\n </Box>\n {toToken ? (\n <RouteToken\n route={route}\n token={toToken}\n impactToken={fromToken}\n showEssentials={showEssentials}\n />\n ) : null}\n </Box>\n )\n}\n"],"mappings":";;;;;;;AAOA,MAAa,eAGP,EAAE,OAAO,qBAAqB;CAClC,MAAM,EAAE,eAAe,iBAAiB;CAExC,MAAM,YAAY;EAChB,GAAG,MAAM,MAAM,GAAG,OAAO;EACzB,QAAQ,OAAO,MAAM,MAAM,GAAG,OAAO,WAAW;EACjD;CAED,MAAM,gBAAgB,MAAM,MAAM,SAAS;CAC3C,MAAM,UAAU;EACd,GAAI,MAAM,MAAM,eAAe,WAAW,WACxC,MAAM,MAAM,eAAe,OAAO;EACpC,QAAQ,MAAM,MAAM,eAAe,WAAW,WAC1C,OAAO,MAAM,MAAM,eAAe,UAAU,SAAS,GACrD,eAAe,WACb,OAAO,MAAM,SAAS,GACtB,OAAO,MAAM,MAAM,eAAe,SAAS,SAAS;EAC3D;AAED,QACE,qBAAC,KAAD;EAAK,IAAI;GAAE,SAAS;GAAQ,eAAe;GAAU,KAAK;GAAK;YAA/D;GACG,YAAY,oBAAC,OAAD,EAAO,OAAO,WAAa,CAAA,GAAG;GAC3C,oBAAC,KAAD;IACE,IAAI;KACF,OAAO;KACP,QAAQ;KACR,SAAS;KACT,YAAY;KACZ,gBAAgB;KACjB;cAED,oBAAC,mBAAD,EAAmB,IAAI,EAAE,UAAU,IAAI,EAAI,CAAA;IACvC,CAAA;GACL,UACC,oBAAC,YAAD;IACS;IACP,OAAO;IACP,aAAa;IACG;IAChB,CAAA,GACA;GACA"}
|
|
@@ -2,29 +2,23 @@ import { Card as Card$1 } from "../Card/Card.js";
|
|
|
2
2
|
import { CardHeader as CardHeader$1 } from "../Card/CardHeader.js";
|
|
3
3
|
import { CardContent, cardHeaderClasses, styled } from "@mui/material";
|
|
4
4
|
//#region src/components/SelectTokenButton/SelectTokenButton.style.tsx
|
|
5
|
-
const SelectTokenCardHeader = styled(CardHeader$1, { shouldForwardProp: (prop) => !["selected"
|
|
5
|
+
const SelectTokenCardHeader = styled(CardHeader$1, { shouldForwardProp: (prop) => !["selected"].includes(prop) })(({ theme }) => ({
|
|
6
6
|
padding: theme.spacing(2),
|
|
7
7
|
[`.${cardHeaderClasses.title}`]: {
|
|
8
8
|
color: theme.vars.palette.text.secondary,
|
|
9
9
|
textOverflow: "ellipsis",
|
|
10
10
|
whiteSpace: "nowrap",
|
|
11
11
|
overflow: "hidden",
|
|
12
|
-
width:
|
|
13
|
-
fontSize:
|
|
12
|
+
width: 96,
|
|
13
|
+
fontSize: 18,
|
|
14
14
|
fontWeight: 500,
|
|
15
|
-
[theme.breakpoints.down(theme.breakpoints.values.
|
|
16
|
-
[theme.breakpoints.down(theme.breakpoints.values.xs)]: {
|
|
17
|
-
width: 180,
|
|
18
|
-
fontSize: 16
|
|
19
|
-
}
|
|
15
|
+
[theme.breakpoints.down(theme.breakpoints.values.xs)]: { fontSize: 16 }
|
|
20
16
|
},
|
|
21
17
|
[`.${cardHeaderClasses.subheader}`]: {
|
|
22
18
|
textOverflow: "ellipsis",
|
|
23
19
|
whiteSpace: "nowrap",
|
|
24
20
|
overflow: "hidden",
|
|
25
|
-
width:
|
|
26
|
-
[theme.breakpoints.down(theme.breakpoints.values.sm)]: { width: 224 },
|
|
27
|
-
[theme.breakpoints.down(theme.breakpoints.values.xs)]: { width: 180 }
|
|
21
|
+
width: 96
|
|
28
22
|
},
|
|
29
23
|
variants: [{
|
|
30
24
|
props: ({ selected }) => selected,
|
|
@@ -32,18 +26,6 @@ const SelectTokenCardHeader = styled(CardHeader$1, { shouldForwardProp: (prop) =
|
|
|
32
26
|
color: theme.vars.palette.text.primary,
|
|
33
27
|
fontWeight: 600
|
|
34
28
|
} }
|
|
35
|
-
}, {
|
|
36
|
-
props: ({ compact }) => compact,
|
|
37
|
-
style: {
|
|
38
|
-
[`.${cardHeaderClasses.title}`]: {
|
|
39
|
-
width: 96,
|
|
40
|
-
[theme.breakpoints.down(theme.breakpoints.values.sm)]: { width: 96 }
|
|
41
|
-
},
|
|
42
|
-
[`.${cardHeaderClasses.subheader}`]: {
|
|
43
|
-
width: 96,
|
|
44
|
-
[theme.breakpoints.down(theme.breakpoints.values.sm)]: { width: 96 }
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
29
|
}]
|
|
48
30
|
}));
|
|
49
31
|
const SelectTokenCard = styled(Card$1)(({ theme }) => {
|
|
@@ -58,15 +40,10 @@ const SelectTokenCard = styled(Card$1)(({ theme }) => {
|
|
|
58
40
|
}
|
|
59
41
|
};
|
|
60
42
|
});
|
|
61
|
-
const CardContent$1 = styled(CardContent, { shouldForwardProp: (prop) => ![
|
|
62
|
-
"formType",
|
|
63
|
-
"compact",
|
|
64
|
-
"mask"
|
|
65
|
-
].includes(prop) })(({ theme, formType, compact, mask = true }) => {
|
|
43
|
+
const CardContent$1 = styled(CardContent, { shouldForwardProp: (prop) => !["formType", "mask"].includes(prop) })(({ theme, formType, mask = true }) => {
|
|
66
44
|
const cardVariant = theme.components?.MuiCard?.defaultProps?.variant;
|
|
67
|
-
const
|
|
68
|
-
const
|
|
69
|
-
const vertical = compact ? "50%" : direction;
|
|
45
|
+
const horizontal = formType === "to" ? "-8px" : "calc(100% + 8px)";
|
|
46
|
+
const vertical = "50%";
|
|
70
47
|
return {
|
|
71
48
|
padding: 0,
|
|
72
49
|
transition: theme.transitions.create(["background-color"], {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectTokenButton.style.js","names":["CardHeader","Card","CardContent","MuiCardContent"],"sources":["../../../../src/components/SelectTokenButton/SelectTokenButton.style.tsx"],"sourcesContent":["import {\n cardHeaderClasses,\n CardContent as MuiCardContent,\n styled,\n} from '@mui/material'\nimport type React from 'react'\nimport type { FormType } from '../../stores/form/types.js'\nimport { Card } from '../Card/Card.js'\nimport { CardHeader } from '../Card/CardHeader.js'\n\nexport const SelectTokenCardHeader: React.FC<\n React.ComponentProps<typeof CardHeader> & {\n selected?: boolean\n
|
|
1
|
+
{"version":3,"file":"SelectTokenButton.style.js","names":["CardHeader","Card","CardContent","MuiCardContent"],"sources":["../../../../src/components/SelectTokenButton/SelectTokenButton.style.tsx"],"sourcesContent":["import {\n cardHeaderClasses,\n CardContent as MuiCardContent,\n styled,\n} from '@mui/material'\nimport type React from 'react'\nimport type { FormType } from '../../stores/form/types.js'\nimport { Card } from '../Card/Card.js'\nimport { CardHeader } from '../Card/CardHeader.js'\n\nexport const SelectTokenCardHeader: React.FC<\n React.ComponentProps<typeof CardHeader> & {\n selected?: boolean\n }\n> = styled(CardHeader, {\n shouldForwardProp: (prop) => !['selected'].includes(prop as string),\n})<{ selected?: boolean }>(({ theme }) => ({\n padding: theme.spacing(2),\n [`.${cardHeaderClasses.title}`]: {\n color: theme.vars.palette.text.secondary,\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n width: 96,\n fontSize: 18,\n fontWeight: 500,\n [theme.breakpoints.down(theme.breakpoints.values.xs)]: {\n fontSize: 16,\n },\n },\n [`.${cardHeaderClasses.subheader}`]: {\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n width: 96,\n },\n variants: [\n {\n props: ({ selected }) => selected,\n style: {\n [`.${cardHeaderClasses.title}`]: {\n color: theme.vars.palette.text.primary,\n fontWeight: 600,\n },\n },\n },\n ],\n}))\n\nexport const SelectTokenCard: React.FC<\n React.ComponentProps<typeof Card> & {\n formType?: FormType\n mask?: boolean\n }\n> = styled(Card)(({ theme }) => {\n const cardVariant = theme.components?.MuiCard?.defaultProps?.variant\n return {\n flex: 1,\n ...(cardVariant !== 'outlined' && {\n background: 'none',\n '&:hover': {\n cursor: 'pointer',\n background: 'none',\n },\n }),\n }\n})\n\nexport const CardContent: React.FC<\n React.ComponentProps<typeof MuiCardContent> & {\n formType?: FormType\n mask?: boolean\n }\n> = styled(MuiCardContent, {\n shouldForwardProp: (prop) => !['formType', 'mask'].includes(prop as string),\n})<{ formType?: FormType; mask?: boolean }>(\n ({ theme, formType, mask = true }) => {\n const cardVariant = theme.components?.MuiCard?.defaultProps?.variant\n const direction = formType === 'to' ? '-8px' : 'calc(100% + 8px)'\n const horizontal = direction\n const vertical = '50%'\n return {\n padding: 0,\n transition: theme.transitions.create(['background-color'], {\n duration: theme.transitions.duration.enteringScreen,\n easing: theme.transitions.easing.easeOut,\n }),\n '&:last-child': {\n paddingBottom: 0,\n },\n ...(cardVariant !== 'outlined' && {\n backgroundColor: theme.vars.palette.background.paper,\n mask: mask\n ? `radial-gradient(circle 20px at ${horizontal} ${vertical}, #fff0 96%, #fff) 100% 100% / 100% 100% no-repeat`\n : 'none',\n }),\n ...(cardVariant === 'filled' && {\n '&:hover': {\n cursor: 'pointer',\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, black)`,\n ...theme.applyStyles('dark', {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper} 98%, white)`,\n }),\n },\n }),\n }\n }\n)\n"],"mappings":";;;;AAUA,MAAa,wBAIT,OAAOA,cAAY,EACrB,oBAAoB,SAAS,CAAC,CAAC,WAAW,CAAC,SAAS,KAAe,EACpE,CAAC,EAA0B,EAAE,aAAa;CACzC,SAAS,MAAM,QAAQ,EAAE;EACxB,IAAI,kBAAkB,UAAU;EAC/B,OAAO,MAAM,KAAK,QAAQ,KAAK;EAC/B,cAAc;EACd,YAAY;EACZ,UAAU;EACV,OAAO;EACP,UAAU;EACV,YAAY;GACX,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,GAAG,GAAG,EACrD,UAAU,IACX;EACF;EACA,IAAI,kBAAkB,cAAc;EACnC,cAAc;EACd,YAAY;EACZ,UAAU;EACV,OAAO;EACR;CACD,UAAU,CACR;EACE,QAAQ,EAAE,eAAe;EACzB,OAAO,GACJ,IAAI,kBAAkB,UAAU;GAC/B,OAAO,MAAM,KAAK,QAAQ,KAAK;GAC/B,YAAY;GACb,EACF;EACF,CACF;CACF,EAAE;AAEH,MAAa,kBAKT,OAAOC,OAAK,EAAE,EAAE,YAAY;AAE9B,QAAO;EACL,MAAM;EACN,GAHkB,MAAM,YAAY,SAAS,cAAc,YAGvC,cAAc;GAChC,YAAY;GACZ,WAAW;IACT,QAAQ;IACR,YAAY;IACb;GACF;EACF;EACD;AAEF,MAAaC,gBAKT,OAAOC,aAAgB,EACzB,oBAAoB,SAAS,CAAC,CAAC,YAAY,OAAO,CAAC,SAAS,KAAe,EAC5E,CAAC,EACC,EAAE,OAAO,UAAU,OAAO,WAAW;CACpC,MAAM,cAAc,MAAM,YAAY,SAAS,cAAc;CAE7D,MAAM,aADY,aAAa,OAAO,SAAS;CAE/C,MAAM,WAAW;AACjB,QAAO;EACL,SAAS;EACT,YAAY,MAAM,YAAY,OAAO,CAAC,mBAAmB,EAAE;GACzD,UAAU,MAAM,YAAY,SAAS;GACrC,QAAQ,MAAM,YAAY,OAAO;GAClC,CAAC;EACF,gBAAgB,EACd,eAAe,GAChB;EACD,GAAI,gBAAgB,cAAc;GAChC,iBAAiB,MAAM,KAAK,QAAQ,WAAW;GAC/C,MAAM,OACF,kCAAkC,WAAW,GAAG,SAAS,sDACzD;GACL;EACD,GAAI,gBAAgB,YAAY,EAC9B,WAAW;GACT,QAAQ;GACR,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM;GAC3E,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,WAAW,MAAM,eAC5E,CAAC;GACH,EACF;EACF;EAEJ"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"version.js","names":[],"sources":["../../../src/config/version.ts"],"sourcesContent":["export const name = '@lifi/widget'\nexport const version = '4.0.0-beta.
|
|
1
|
+
{"version":3,"file":"version.js","names":[],"sources":["../../../src/config/version.ts"],"sourcesContent":["export const name = '@lifi/widget'\nexport const version = '4.0.0-beta.13'\n"],"mappings":";AAAA,MAAa,OAAO;AACpB,MAAa,UAAU"}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { widgetEvents } from "../../hooks/useWidgetEvents.js";
|
|
2
|
+
import { WidgetEvent } from "../../types/events.js";
|
|
1
3
|
import { useBookmarkActions } from "../bookmarks/useBookmarkActions.js";
|
|
2
4
|
import { formDefaultValues } from "./createFormStore.js";
|
|
3
5
|
import { useImperativeHandle } from "react";
|
|
@@ -18,7 +20,13 @@ const useFormRef = (formStore, formRef) => {
|
|
|
18
20
|
return { setFieldValue: (fieldName, value, options) => {
|
|
19
21
|
const sanitizedValue = sanitizeValue[fieldName] ? sanitizeValue[fieldName](value) : value;
|
|
20
22
|
const fieldValueOptions = options?.setUrlSearchParam ? { isTouched: options?.setUrlSearchParam } : void 0;
|
|
23
|
+
const oldValue = formStore.getState().getFieldValues(fieldName)[0];
|
|
21
24
|
formStore.getState().setFieldValue(fieldName, sanitizedValue, fieldValueOptions);
|
|
25
|
+
if (sanitizedValue !== oldValue) widgetEvents.emit(WidgetEvent.FormFieldChanged, {
|
|
26
|
+
fieldName,
|
|
27
|
+
newValue: sanitizedValue,
|
|
28
|
+
oldValue
|
|
29
|
+
});
|
|
22
30
|
} };
|
|
23
31
|
}, [formStore, setSelectedBookmark]);
|
|
24
32
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFormRef.js","names":[],"sources":["../../../../src/stores/form/useFormRef.ts"],"sourcesContent":["import { useImperativeHandle } from 'react'\nimport { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'\nimport { formDefaultValues } from '../../stores/form/createFormStore.js'\nimport type { FormRef } from '../../types/widget.js'\nimport type {
|
|
1
|
+
{"version":3,"file":"useFormRef.js","names":[],"sources":["../../../../src/stores/form/useFormRef.ts"],"sourcesContent":["import { useImperativeHandle } from 'react'\nimport { widgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'\nimport { formDefaultValues } from '../../stores/form/createFormStore.js'\nimport type { FormFieldChanged } from '../../types/events.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport type { FormRef } from '../../types/widget.js'\nimport type {\n FormFieldNames,\n FormStoreStore,\n GenericFormValue,\n} from './types.js'\n\nexport const useFormRef = (\n formStore: FormStoreStore,\n formRef?: FormRef\n): void => {\n const { setSelectedBookmark } = useBookmarkActions()\n\n useImperativeHandle(formRef, () => {\n const sanitizeValue: {\n [key: string]: (value: any) => GenericFormValue\n } = {\n fromAmount: (value) =>\n (typeof value === 'number' ? value?.toPrecision() : value) ||\n formDefaultValues.fromAmount,\n toAmount: (value) =>\n (typeof value === 'number' ? value?.toPrecision() : value) ||\n formDefaultValues.toAmount,\n toAddress: (value) => {\n const isToAddressObj = typeof value !== 'string'\n\n const address =\n (isToAddressObj ? value?.address : value) ||\n formDefaultValues.toAddress\n\n // we can assume that the toAddress has been passed as ToAddress object\n // and display it accordingly - this ensures that if a name is included\n // that it is displayed in the Send To Wallet form field correctly\n if (isToAddressObj) {\n setSelectedBookmark(value)\n }\n\n return address\n },\n }\n\n return {\n setFieldValue: (fieldName, value, options) => {\n const sanitizedValue = (\n sanitizeValue[fieldName] ? sanitizeValue[fieldName](value) : value\n ) as GenericFormValue\n\n const fieldValueOptions = options?.setUrlSearchParam\n ? { isTouched: options?.setUrlSearchParam }\n : undefined\n\n const oldValue = formStore\n .getState()\n .getFieldValues(fieldName as FormFieldNames)[0]\n\n formStore\n .getState()\n .setFieldValue(fieldName, sanitizedValue, fieldValueOptions)\n\n if (sanitizedValue !== oldValue) {\n widgetEvents.emit(WidgetEvent.FormFieldChanged, {\n fieldName,\n newValue: sanitizedValue,\n oldValue,\n } as FormFieldChanged)\n }\n },\n }\n }, [formStore, setSelectedBookmark])\n}\n"],"mappings":";;;;;;AAaA,MAAa,cACX,WACA,YACS;CACT,MAAM,EAAE,wBAAwB,oBAAoB;AAEpD,qBAAoB,eAAe;EACjC,MAAM,gBAEF;GACF,aAAa,WACV,OAAO,UAAU,WAAW,OAAO,aAAa,GAAG,UACpD,kBAAkB;GACpB,WAAW,WACR,OAAO,UAAU,WAAW,OAAO,aAAa,GAAG,UACpD,kBAAkB;GACpB,YAAY,UAAU;IACpB,MAAM,iBAAiB,OAAO,UAAU;IAExC,MAAM,WACH,iBAAiB,OAAO,UAAU,UACnC,kBAAkB;AAKpB,QAAI,eACF,qBAAoB,MAAM;AAG5B,WAAO;;GAEV;AAED,SAAO,EACL,gBAAgB,WAAW,OAAO,YAAY;GAC5C,MAAM,iBACJ,cAAc,aAAa,cAAc,WAAW,MAAM,GAAG;GAG/D,MAAM,oBAAoB,SAAS,oBAC/B,EAAE,WAAW,SAAS,mBAAmB,GACzC,KAAA;GAEJ,MAAM,WAAW,UACd,UAAU,CACV,eAAe,UAA4B,CAAC;AAE/C,aACG,UAAU,CACV,cAAc,WAAW,gBAAgB,kBAAkB;AAE9D,OAAI,mBAAmB,SACrB,cAAa,KAAK,YAAY,kBAAkB;IAC9C;IACA,UAAU;IACV;IACD,CAAqB;KAG3B;IACA,CAAC,WAAW,oBAAoB,CAAC"}
|
|
@@ -62,7 +62,8 @@ const createRouteExecutionStore = ({ namePrefix }) => create()(persist((set, get
|
|
|
62
62
|
}
|
|
63
63
|
}), {
|
|
64
64
|
name: `${namePrefix || "li.fi"}-widget-routes`,
|
|
65
|
-
version:
|
|
65
|
+
version: 4,
|
|
66
|
+
migrate: () => ({ routes: {} }),
|
|
66
67
|
partialize: (state) => ({ routes: state.routes }),
|
|
67
68
|
merge: (persistedState, currentState) => {
|
|
68
69
|
const state = {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createRouteExecutionStore.js","names":[],"sources":["../../../../src/stores/routes/createRouteExecutionStore.ts"],"sourcesContent":["import type { Route, RouteExtended } from '@lifi/sdk'\nimport type { StoreApi, UseBoundStore } from 'zustand'\nimport { create } from 'zustand'\nimport { persist } from 'zustand/middleware'\nimport { hasEnumFlag } from '../../utils/enum.js'\nimport type { PersistStoreProps } from '../types.js'\nimport type { RouteExecution, RouteExecutionState } from './types.js'\nimport { RouteExecutionStatus } from './types.js'\nimport {\n isRouteDone,\n isRouteFailed,\n isRoutePartiallyDone,\n isRouteRefunded,\n} from './utils.js'\n\nexport const createRouteExecutionStore = ({\n namePrefix,\n}: PersistStoreProps): UseBoundStore<StoreApi<RouteExecutionState>> =>\n create<RouteExecutionState>()(\n persist(\n (set, get) => ({\n routes: {},\n setExecutableRoute: (route: Route, observableRouteIds?: string[]) => {\n if (!get().routes[route.id]) {\n set((state: RouteExecutionState) => {\n const routes = { ...state.routes }\n // clean previous idle routes\n Object.keys(routes)\n .filter(\n (routeId) =>\n !observableRouteIds?.includes(routeId) &&\n hasEnumFlag(\n routes[routeId]!.status,\n RouteExecutionStatus.Idle\n )\n )\n .forEach((routeId) => {\n delete routes[routeId]\n })\n routes[route.id] = {\n route,\n status: RouteExecutionStatus.Idle,\n }\n return {\n routes,\n }\n })\n }\n },\n updateRoute: (route: RouteExtended) => {\n if (get().routes[route.id]) {\n set((state: RouteExecutionState) => {\n const updatedState = {\n routes: {\n ...state.routes,\n [route.id]: { ...state.routes[route.id]!, route },\n },\n }\n const isFailed = isRouteFailed(route)\n if (isFailed) {\n updatedState.routes[route.id]!.status =\n RouteExecutionStatus.Failed\n return updatedState\n }\n const isDone = isRouteDone(route)\n if (isDone) {\n updatedState.routes[route.id]!.status =\n RouteExecutionStatus.Done\n if (isRoutePartiallyDone(route)) {\n updatedState.routes[route.id]!.status |=\n RouteExecutionStatus.Partial\n } else if (isRouteRefunded(route)) {\n updatedState.routes[route.id]!.status |=\n RouteExecutionStatus.Refunded\n }\n return updatedState\n }\n const isLoading = route.steps.some((step) => step.execution)\n if (isLoading) {\n updatedState.routes[route.id]!.status =\n RouteExecutionStatus.Pending\n }\n return updatedState\n })\n }\n },\n deleteRoutes: (type, accountAddresses) =>\n set((state: RouteExecutionState) => {\n const routes = { ...state.routes }\n Object.keys(routes)\n .filter((routeId) => {\n const route = routes[routeId]\n if (\n accountAddresses &&\n !accountAddresses.includes(route?.route.fromAddress ?? '')\n ) {\n return false\n }\n return type === 'completed'\n ? hasEnumFlag(route?.status ?? 0, RouteExecutionStatus.Done)\n : type === 'failed'\n ? hasEnumFlag(\n route?.status ?? 0,\n RouteExecutionStatus.Failed\n )\n : !hasEnumFlag(\n route?.status ?? 0,\n RouteExecutionStatus.Done\n )\n })\n .forEach((routeId) => {\n delete routes[routeId]\n })\n return {\n routes,\n }\n }),\n deleteRoute: (routeId: string) => {\n if (get().routes[routeId]) {\n set((state: RouteExecutionState) => {\n const routes = { ...state.routes }\n delete routes[routeId]\n return {\n routes,\n }\n })\n }\n },\n }),\n {\n name: `${namePrefix || 'li.fi'}-widget-routes`,\n version:
|
|
1
|
+
{"version":3,"file":"createRouteExecutionStore.js","names":[],"sources":["../../../../src/stores/routes/createRouteExecutionStore.ts"],"sourcesContent":["import type { Route, RouteExtended } from '@lifi/sdk'\nimport type { StoreApi, UseBoundStore } from 'zustand'\nimport { create } from 'zustand'\nimport { persist } from 'zustand/middleware'\nimport { hasEnumFlag } from '../../utils/enum.js'\nimport type { PersistStoreProps } from '../types.js'\nimport type { RouteExecution, RouteExecutionState } from './types.js'\nimport { RouteExecutionStatus } from './types.js'\nimport {\n isRouteDone,\n isRouteFailed,\n isRoutePartiallyDone,\n isRouteRefunded,\n} from './utils.js'\n\nexport const createRouteExecutionStore = ({\n namePrefix,\n}: PersistStoreProps): UseBoundStore<StoreApi<RouteExecutionState>> =>\n create<RouteExecutionState>()(\n persist(\n (set, get) => ({\n routes: {},\n setExecutableRoute: (route: Route, observableRouteIds?: string[]) => {\n if (!get().routes[route.id]) {\n set((state: RouteExecutionState) => {\n const routes = { ...state.routes }\n // clean previous idle routes\n Object.keys(routes)\n .filter(\n (routeId) =>\n !observableRouteIds?.includes(routeId) &&\n hasEnumFlag(\n routes[routeId]!.status,\n RouteExecutionStatus.Idle\n )\n )\n .forEach((routeId) => {\n delete routes[routeId]\n })\n routes[route.id] = {\n route,\n status: RouteExecutionStatus.Idle,\n }\n return {\n routes,\n }\n })\n }\n },\n updateRoute: (route: RouteExtended) => {\n if (get().routes[route.id]) {\n set((state: RouteExecutionState) => {\n const updatedState = {\n routes: {\n ...state.routes,\n [route.id]: { ...state.routes[route.id]!, route },\n },\n }\n const isFailed = isRouteFailed(route)\n if (isFailed) {\n updatedState.routes[route.id]!.status =\n RouteExecutionStatus.Failed\n return updatedState\n }\n const isDone = isRouteDone(route)\n if (isDone) {\n updatedState.routes[route.id]!.status =\n RouteExecutionStatus.Done\n if (isRoutePartiallyDone(route)) {\n updatedState.routes[route.id]!.status |=\n RouteExecutionStatus.Partial\n } else if (isRouteRefunded(route)) {\n updatedState.routes[route.id]!.status |=\n RouteExecutionStatus.Refunded\n }\n return updatedState\n }\n const isLoading = route.steps.some((step) => step.execution)\n if (isLoading) {\n updatedState.routes[route.id]!.status =\n RouteExecutionStatus.Pending\n }\n return updatedState\n })\n }\n },\n deleteRoutes: (type, accountAddresses) =>\n set((state: RouteExecutionState) => {\n const routes = { ...state.routes }\n Object.keys(routes)\n .filter((routeId) => {\n const route = routes[routeId]\n if (\n accountAddresses &&\n !accountAddresses.includes(route?.route.fromAddress ?? '')\n ) {\n return false\n }\n return type === 'completed'\n ? hasEnumFlag(route?.status ?? 0, RouteExecutionStatus.Done)\n : type === 'failed'\n ? hasEnumFlag(\n route?.status ?? 0,\n RouteExecutionStatus.Failed\n )\n : !hasEnumFlag(\n route?.status ?? 0,\n RouteExecutionStatus.Done\n )\n })\n .forEach((routeId) => {\n delete routes[routeId]\n })\n return {\n routes,\n }\n }),\n deleteRoute: (routeId: string) => {\n if (get().routes[routeId]) {\n set((state: RouteExecutionState) => {\n const routes = { ...state.routes }\n delete routes[routeId]\n return {\n routes,\n }\n })\n }\n },\n }),\n {\n name: `${namePrefix || 'li.fi'}-widget-routes`,\n // Bump version on breaking changes to the stored structure.\n version: 4,\n // Clear stored routes on any version mismatch to avoid errors from incompatible data shapes.\n migrate: () => ({ routes: {} }),\n partialize: (state) => ({ routes: state.routes }),\n merge: (persistedState: any, currentState: RouteExecutionState) => {\n const state = {\n ...currentState,\n ...persistedState,\n } as RouteExecutionState\n try {\n // Keep only the most recent 100 routes, evicting the oldest when the\n // limit is exceeded.\n const maxStoredRoutes = 100\n const allRoutes = Object.values(state.routes) as RouteExecution[]\n const storedRoutes = allRoutes\n .sort(\n (a, b) =>\n (b.route.steps[0]?.execution?.startedAt ?? 0) -\n (a.route.steps[0]?.execution?.startedAt ?? 0)\n )\n .slice(0, maxStoredRoutes)\n const keepIds = new Set(storedRoutes.map((r) => r.route.id))\n for (const id of Object.keys(state.routes)) {\n if (!keepIds.has(id)) {\n delete state.routes[id]\n }\n }\n } catch (error) {\n console.error(error)\n }\n return state\n },\n }\n )\n )\n"],"mappings":";;;;;;AAeA,MAAa,6BAA6B,EACxC,iBAEA,QAA6B,CAC3B,SACG,KAAK,SAAS;CACb,QAAQ,EAAE;CACV,qBAAqB,OAAc,uBAAkC;AACnE,MAAI,CAAC,KAAK,CAAC,OAAO,MAAM,IACtB,MAAK,UAA+B;GAClC,MAAM,SAAS,EAAE,GAAG,MAAM,QAAQ;AAElC,UAAO,KAAK,OAAO,CAChB,QACE,YACC,CAAC,oBAAoB,SAAS,QAAQ,IACtC,YACE,OAAO,SAAU,QACjB,qBAAqB,KACtB,CACJ,CACA,SAAS,YAAY;AACpB,WAAO,OAAO;KACd;AACJ,UAAO,MAAM,MAAM;IACjB;IACA,QAAQ,qBAAqB;IAC9B;AACD,UAAO,EACL,QACD;IACD;;CAGN,cAAc,UAAyB;AACrC,MAAI,KAAK,CAAC,OAAO,MAAM,IACrB,MAAK,UAA+B;GAClC,MAAM,eAAe,EACnB,QAAQ;IACN,GAAG,MAAM;KACR,MAAM,KAAK;KAAE,GAAG,MAAM,OAAO,MAAM;KAAM;KAAO;IAClD,EACF;AAED,OADiB,cAAc,MAAM,EACvB;AACZ,iBAAa,OAAO,MAAM,IAAK,SAC7B,qBAAqB;AACvB,WAAO;;AAGT,OADe,YAAY,MAAM,EACrB;AACV,iBAAa,OAAO,MAAM,IAAK,SAC7B,qBAAqB;AACvB,QAAI,qBAAqB,MAAM,CAC7B,cAAa,OAAO,MAAM,IAAK,UAC7B,qBAAqB;aACd,gBAAgB,MAAM,CAC/B,cAAa,OAAO,MAAM,IAAK,UAC7B,qBAAqB;AAEzB,WAAO;;AAGT,OADkB,MAAM,MAAM,MAAM,SAAS,KAAK,UAAU,CAE1D,cAAa,OAAO,MAAM,IAAK,SAC7B,qBAAqB;AAEzB,UAAO;IACP;;CAGN,eAAe,MAAM,qBACnB,KAAK,UAA+B;EAClC,MAAM,SAAS,EAAE,GAAG,MAAM,QAAQ;AAClC,SAAO,KAAK,OAAO,CAChB,QAAQ,YAAY;GACnB,MAAM,QAAQ,OAAO;AACrB,OACE,oBACA,CAAC,iBAAiB,SAAS,OAAO,MAAM,eAAe,GAAG,CAE1D,QAAO;AAET,UAAO,SAAS,cACZ,YAAY,OAAO,UAAU,GAAG,qBAAqB,KAAK,GAC1D,SAAS,WACP,YACE,OAAO,UAAU,GACjB,qBAAqB,OACtB,GACD,CAAC,YACC,OAAO,UAAU,GACjB,qBAAqB,KACtB;IACP,CACD,SAAS,YAAY;AACpB,UAAO,OAAO;IACd;AACJ,SAAO,EACL,QACD;GACD;CACJ,cAAc,YAAoB;AAChC,MAAI,KAAK,CAAC,OAAO,SACf,MAAK,UAA+B;GAClC,MAAM,SAAS,EAAE,GAAG,MAAM,QAAQ;AAClC,UAAO,OAAO;AACd,UAAO,EACL,QACD;IACD;;CAGP,GACD;CACE,MAAM,GAAG,cAAc,QAAQ;CAE/B,SAAS;CAET,gBAAgB,EAAE,QAAQ,EAAE,EAAE;CAC9B,aAAa,WAAW,EAAE,QAAQ,MAAM,QAAQ;CAChD,QAAQ,gBAAqB,iBAAsC;EACjE,MAAM,QAAQ;GACZ,GAAG;GACH,GAAG;GACJ;AACD,MAAI;GAKF,MAAM,eADY,OAAO,OAAO,MAAM,OAAO,CAE1C,MACE,GAAG,OACD,EAAE,MAAM,MAAM,IAAI,WAAW,aAAa,MAC1C,EAAE,MAAM,MAAM,IAAI,WAAW,aAAa,GAC9C,CACA,MAAM,GARe,IAQI;GAC5B,MAAM,UAAU,IAAI,IAAI,aAAa,KAAK,MAAM,EAAE,MAAM,GAAG,CAAC;AAC5D,QAAK,MAAM,MAAM,OAAO,KAAK,MAAM,OAAO,CACxC,KAAI,CAAC,QAAQ,IAAI,GAAG,CAClB,QAAO,MAAM,OAAO;WAGjB,OAAO;AACd,WAAQ,MAAM,MAAM;;AAEtB,SAAO;;CAEV,CACF,CACF"}
|
|
@@ -26,7 +26,7 @@ const getUpdatedAction = (currentRoute, updatedRoute) => {
|
|
|
26
26
|
return actionDiff.path.slice(0, actionDiffIndex).reduce((obj, path) => obj[path], updatedRoute);
|
|
27
27
|
};
|
|
28
28
|
const getSourceTxHash = (route) => {
|
|
29
|
-
const sourceAction = route?.steps[0].execution?.actions
|
|
29
|
+
const sourceAction = route?.steps[0].execution?.actions?.filter((action) => !["RESET_ALLOWANCE", "SET_ALLOWANCE"].includes(action.type)).find((action) => action.txHash || action.taskId);
|
|
30
30
|
return sourceAction?.txHash || sourceAction?.taskId;
|
|
31
31
|
};
|
|
32
32
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","names":[],"sources":["../../../../src/stores/routes/utils.ts"],"sourcesContent":["import type { ExecutionAction, RouteExtended } from '@lifi/sdk'\nimport microdiff from 'microdiff'\n\nexport const isRouteDone = (route: RouteExtended): boolean => {\n return route.steps.every((step) => step.execution?.status === 'DONE')\n}\n\nexport const isRoutePartiallyDone = (route: RouteExtended): boolean => {\n return route.steps.some((step) =>\n step.execution?.actions?.some((action) => action.substatus === 'PARTIAL')\n )\n}\n\nexport const isRouteRefunded = (route: RouteExtended): boolean => {\n return route.steps.some((step) =>\n step.execution?.actions?.some((action) => action.substatus === 'REFUNDED')\n )\n}\n\nexport const isRouteFailed = (route: RouteExtended): boolean => {\n return route.steps.some((step) => step.execution?.status === 'FAILED')\n}\n\nexport const isRouteActive = (route?: RouteExtended): boolean => {\n if (!route) {\n return false\n }\n const isDone = isRouteDone(route)\n const isFailed = isRouteFailed(route)\n const alreadyStarted = route.steps.some((step) => step.execution)\n return !isDone && !isFailed && alreadyStarted\n}\n\nexport const getUpdatedAction = (\n currentRoute: RouteExtended,\n updatedRoute: RouteExtended\n): ExecutionAction | undefined => {\n const actionDiff = microdiff(currentRoute, updatedRoute).find((diff) =>\n diff.path.includes('actions')\n )\n if (!actionDiff) {\n return undefined\n }\n // Find action index in the diff array so we can slice the complete action object\n // e.g. ['steps', 0, 'execution', 'actions', 0, 'message']\n const actionDiffIndex = actionDiff.path.indexOf('actions') + 2\n const actionPathSlice = actionDiff.path.slice(0, actionDiffIndex)\n // Reduce updated route using the diff path to get updated process\n const action = actionPathSlice.reduce(\n (obj, path) => obj[path],\n updatedRoute as any\n ) as ExecutionAction\n return action\n}\n\nexport const getSourceTxHash = (route?: RouteExtended): string | undefined => {\n const sourceAction = route?.steps[0].execution?.actions\n
|
|
1
|
+
{"version":3,"file":"utils.js","names":[],"sources":["../../../../src/stores/routes/utils.ts"],"sourcesContent":["import type { ExecutionAction, RouteExtended } from '@lifi/sdk'\nimport microdiff from 'microdiff'\n\nexport const isRouteDone = (route: RouteExtended): boolean => {\n return route.steps.every((step) => step.execution?.status === 'DONE')\n}\n\nexport const isRoutePartiallyDone = (route: RouteExtended): boolean => {\n return route.steps.some((step) =>\n step.execution?.actions?.some((action) => action.substatus === 'PARTIAL')\n )\n}\n\nexport const isRouteRefunded = (route: RouteExtended): boolean => {\n return route.steps.some((step) =>\n step.execution?.actions?.some((action) => action.substatus === 'REFUNDED')\n )\n}\n\nexport const isRouteFailed = (route: RouteExtended): boolean => {\n return route.steps.some((step) => step.execution?.status === 'FAILED')\n}\n\nexport const isRouteActive = (route?: RouteExtended): boolean => {\n if (!route) {\n return false\n }\n const isDone = isRouteDone(route)\n const isFailed = isRouteFailed(route)\n const alreadyStarted = route.steps.some((step) => step.execution)\n return !isDone && !isFailed && alreadyStarted\n}\n\nexport const getUpdatedAction = (\n currentRoute: RouteExtended,\n updatedRoute: RouteExtended\n): ExecutionAction | undefined => {\n const actionDiff = microdiff(currentRoute, updatedRoute).find((diff) =>\n diff.path.includes('actions')\n )\n if (!actionDiff) {\n return undefined\n }\n // Find action index in the diff array so we can slice the complete action object\n // e.g. ['steps', 0, 'execution', 'actions', 0, 'message']\n const actionDiffIndex = actionDiff.path.indexOf('actions') + 2\n const actionPathSlice = actionDiff.path.slice(0, actionDiffIndex)\n // Reduce updated route using the diff path to get updated process\n const action = actionPathSlice.reduce(\n (obj, path) => obj[path],\n updatedRoute as any\n ) as ExecutionAction\n return action\n}\n\nexport const getSourceTxHash = (route?: RouteExtended): string | undefined => {\n const sourceAction = route?.steps[0].execution?.actions\n ?.filter(\n (action) => !['RESET_ALLOWANCE', 'SET_ALLOWANCE'].includes(action.type)\n )\n .find((action) => action.txHash || action.taskId)\n return sourceAction?.txHash || sourceAction?.taskId\n}\n"],"mappings":";;AAGA,MAAa,eAAe,UAAkC;AAC5D,QAAO,MAAM,MAAM,OAAO,SAAS,KAAK,WAAW,WAAW,OAAO;;AAGvE,MAAa,wBAAwB,UAAkC;AACrE,QAAO,MAAM,MAAM,MAAM,SACvB,KAAK,WAAW,SAAS,MAAM,WAAW,OAAO,cAAc,UAAU,CAC1E;;AAGH,MAAa,mBAAmB,UAAkC;AAChE,QAAO,MAAM,MAAM,MAAM,SACvB,KAAK,WAAW,SAAS,MAAM,WAAW,OAAO,cAAc,WAAW,CAC3E;;AAGH,MAAa,iBAAiB,UAAkC;AAC9D,QAAO,MAAM,MAAM,MAAM,SAAS,KAAK,WAAW,WAAW,SAAS;;AAGxE,MAAa,iBAAiB,UAAmC;AAC/D,KAAI,CAAC,MACH,QAAO;CAET,MAAM,SAAS,YAAY,MAAM;CACjC,MAAM,WAAW,cAAc,MAAM;CACrC,MAAM,iBAAiB,MAAM,MAAM,MAAM,SAAS,KAAK,UAAU;AACjE,QAAO,CAAC,UAAU,CAAC,YAAY;;AAGjC,MAAa,oBACX,cACA,iBACgC;CAChC,MAAM,aAAa,UAAU,cAAc,aAAa,CAAC,MAAM,SAC7D,KAAK,KAAK,SAAS,UAAU,CAC9B;AACD,KAAI,CAAC,WACH;CAIF,MAAM,kBAAkB,WAAW,KAAK,QAAQ,UAAU,GAAG;AAO7D,QANwB,WAAW,KAAK,MAAM,GAAG,gBAAgB,CAElC,QAC5B,KAAK,SAAS,IAAI,OACnB,aACD;;AAIH,MAAa,mBAAmB,UAA8C;CAC5E,MAAM,eAAe,OAAO,MAAM,GAAG,WAAW,SAC5C,QACC,WAAW,CAAC,CAAC,mBAAmB,gBAAgB,CAAC,SAAS,OAAO,KAAK,CACxE,CACA,MAAM,WAAW,OAAO,UAAU,OAAO,OAAO;AACnD,QAAO,cAAc,UAAU,cAAc"}
|
|
@@ -6,7 +6,7 @@ const actionStatusMessages = {
|
|
|
6
6
|
CHECK_ALLOWANCE: {
|
|
7
7
|
STARTED: (t, step) => t("main.process.tokenAllowance.started", { tokenSymbol: step.action.fromToken.symbol }),
|
|
8
8
|
PENDING: (t, step) => t("main.process.tokenAllowance.pending", { tokenSymbol: step.action.fromToken.symbol }),
|
|
9
|
-
DONE: (t, step) => t("main.process.tokenAllowance.
|
|
9
|
+
DONE: (t, step) => t("main.process.tokenAllowance.done", { tokenSymbol: step.action.fromToken.symbol })
|
|
10
10
|
},
|
|
11
11
|
NATIVE_PERMIT: {
|
|
12
12
|
STARTED: (t) => t("main.process.permit.started"),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getActionMessage.js","names":[],"sources":["../../../src/utils/getActionMessage.ts"],"sourcesContent":["import type {\n ExecutionActionStatus,\n ExecutionActionType,\n LiFiStepExtended,\n StatusMessage,\n Substatus,\n} from '@lifi/sdk'\nimport type { TFunction } from 'i18next'\nimport type { SubvariantOptions, WidgetSubvariant } from '../types/widget'\n\nexport function getActionMessage(\n t: TFunction,\n step: LiFiStepExtended,\n type: ExecutionActionType,\n status: ExecutionActionStatus,\n substatus?: Substatus,\n subvariant?: WidgetSubvariant,\n subvariantOptions?: SubvariantOptions\n): {\n title?: string\n message?: string\n} {\n const messageWithSubstatus = substatus\n ? actionSubstatusMessages[status as StatusMessage]?.[substatus]?.(t)\n : undefined\n const title =\n messageWithSubstatus ??\n actionStatusMessages[type]?.[status]?.(\n t,\n step,\n subvariant,\n subvariantOptions\n )\n return { title }\n}\n\nconst actionStatusMessages: Record<\n ExecutionActionType,\n Partial<\n Record<\n ExecutionActionStatus,\n (\n t: TFunction,\n step: LiFiStepExtended,\n subvariant?: WidgetSubvariant,\n subvariantOptions?: SubvariantOptions\n ) => string\n >\n >\n> = {\n CHECK_ALLOWANCE: {\n STARTED: (t, step) =>\n t('main.process.tokenAllowance.started', {\n tokenSymbol: step.action.fromToken.symbol,\n }),\n PENDING: (t, step) =>\n t('main.process.tokenAllowance.pending', {\n tokenSymbol: step.action.fromToken.symbol,\n }),\n DONE: (t, step) =>\n t('main.process.tokenAllowance.
|
|
1
|
+
{"version":3,"file":"getActionMessage.js","names":[],"sources":["../../../src/utils/getActionMessage.ts"],"sourcesContent":["import type {\n ExecutionActionStatus,\n ExecutionActionType,\n LiFiStepExtended,\n StatusMessage,\n Substatus,\n} from '@lifi/sdk'\nimport type { TFunction } from 'i18next'\nimport type { SubvariantOptions, WidgetSubvariant } from '../types/widget'\n\nexport function getActionMessage(\n t: TFunction,\n step: LiFiStepExtended,\n type: ExecutionActionType,\n status: ExecutionActionStatus,\n substatus?: Substatus,\n subvariant?: WidgetSubvariant,\n subvariantOptions?: SubvariantOptions\n): {\n title?: string\n message?: string\n} {\n const messageWithSubstatus = substatus\n ? actionSubstatusMessages[status as StatusMessage]?.[substatus]?.(t)\n : undefined\n const title =\n messageWithSubstatus ??\n actionStatusMessages[type]?.[status]?.(\n t,\n step,\n subvariant,\n subvariantOptions\n )\n return { title }\n}\n\nconst actionStatusMessages: Record<\n ExecutionActionType,\n Partial<\n Record<\n ExecutionActionStatus,\n (\n t: TFunction,\n step: LiFiStepExtended,\n subvariant?: WidgetSubvariant,\n subvariantOptions?: SubvariantOptions\n ) => string\n >\n >\n> = {\n CHECK_ALLOWANCE: {\n STARTED: (t, step) =>\n t('main.process.tokenAllowance.started', {\n tokenSymbol: step.action.fromToken.symbol,\n }),\n PENDING: (t, step) =>\n t('main.process.tokenAllowance.pending', {\n tokenSymbol: step.action.fromToken.symbol,\n }),\n DONE: (t, step) =>\n t('main.process.tokenAllowance.done', {\n tokenSymbol: step.action.fromToken.symbol,\n }),\n },\n NATIVE_PERMIT: {\n STARTED: (t) => t('main.process.permit.started'),\n ACTION_REQUIRED: (t) => t('main.process.permit.actionRequired'),\n PENDING: (t) => t('main.process.permit.pending'),\n DONE: (t) => t('main.process.permit.done'),\n },\n RESET_ALLOWANCE: {\n STARTED: (t, step) =>\n t('main.process.tokenAllowance.pending', {\n tokenSymbol: step.action.fromToken.symbol,\n }),\n RESET_REQUIRED: (t, step) =>\n t('main.process.tokenAllowance.resetRequired', {\n tokenSymbol: step.action.fromToken.symbol,\n }),\n PENDING: (t, step) =>\n t('main.process.tokenAllowance.pending', {\n tokenSymbol: step.action.fromToken.symbol,\n }),\n DONE: (t, step) =>\n t('main.process.tokenAllowance.pending', {\n tokenSymbol: step.action.fromToken.symbol,\n }),\n },\n SET_ALLOWANCE: {\n STARTED: (t, step) =>\n t('main.process.tokenAllowance.pending', {\n tokenSymbol: step.action.fromToken.symbol,\n }),\n ACTION_REQUIRED: (t, step) =>\n t('main.process.tokenAllowance.actionRequired', {\n tokenSymbol: step.action.fromToken.symbol,\n }),\n PENDING: (t, step) =>\n t('main.process.tokenAllowance.pending', {\n tokenSymbol: step.action.fromToken.symbol,\n }),\n DONE: (t, step) =>\n t('main.process.tokenAllowance.done', {\n tokenSymbol: step.action.fromToken.symbol,\n }),\n },\n PERMIT: {\n STARTED: (t) => t('main.process.permit.started'),\n ACTION_REQUIRED: (t) => t('main.process.permit.actionRequired'),\n PENDING: (t) => t('main.process.permit.pending'),\n DONE: (t) => t('main.process.permit.done'),\n },\n SWAP: {\n STARTED: (t) => t('main.process.swap.started'),\n ACTION_REQUIRED: (t) => t('main.process.swap.actionRequired'),\n MESSAGE_REQUIRED: (t) => t('main.process.swap.messageRequired'),\n PENDING: (t) => t('main.process.swap.pending'),\n DONE: (t, _, subvariant, subvariantOptions) =>\n subvariant === 'custom'\n ? t(`main.process.${subvariantOptions?.custom ?? 'checkout'}.done`)\n : t('main.process.swap.done'),\n },\n CROSS_CHAIN: {\n STARTED: (t) => t('main.process.bridge.started'),\n ACTION_REQUIRED: (t) => t('main.process.bridge.actionRequired'),\n MESSAGE_REQUIRED: (t) => t('main.process.bridge.messageRequired'),\n PENDING: (t) => t('main.process.bridge.pending'),\n DONE: (t) => t('main.process.bridge.done'),\n },\n RECEIVING_CHAIN: {\n STARTED: (t) => t('main.process.receivingChain.pending'),\n PENDING: (t) => t('main.process.receivingChain.pending'),\n DONE: (t, _, subvariant, subvariantOptions) =>\n subvariant === 'custom'\n ? t(`main.process.${subvariantOptions?.custom ?? 'checkout'}.done`)\n : t('main.process.receivingChain.done'),\n },\n}\n\nconst actionSubstatusMessages: Record<\n StatusMessage,\n Partial<Record<Substatus, (t: TFunction) => string>>\n> = {\n PENDING: {\n // BRIDGE_NOT_AVAILABLE: 'Bridge communication is temporarily unavailable.',\n // CHAIN_NOT_AVAILABLE: 'RPC communication is temporarily unavailable.',\n // REFUND_IN_PROGRESS:\n // \"The refund has been requested and it's being processed\",\n // WAIT_DESTINATION_TRANSACTION:\n // 'The bridge off-chain logic is being executed. Wait for the transaction to appear on the destination chain.',\n // WAIT_SOURCE_CONFIRMATIONS:\n // 'The bridge deposit has been received. The bridge is waiting for more confirmations to start the off-chain logic.',\n },\n DONE: {\n // COMPLETED: 'The transfer is complete.',\n PARTIAL: (t) => t('main.process.receivingChain.partial'),\n REFUNDED: (t) => t('main.process.receivingChain.partial'),\n },\n FAILED: {\n // TODO: should be moved to failed status\n // NOT_PROCESSABLE_REFUND_NEEDED:\n // 'The transfer cannot be completed successfully. A refund operation is required.',\n // UNKNOWN_ERROR:\n // 'An unexpected error occurred. Please seek assistance in the LI.FI discord server.',\n },\n INVALID: {},\n NOT_FOUND: {},\n}\n"],"mappings":";AAUA,SAAgB,iBACd,GACA,MACA,MACA,QACA,WACA,YACA,mBAIA;AAYA,QAAO,EAAE,QAXoB,YACzB,wBAAwB,UAA2B,aAAa,EAAE,GAClE,KAAA,MAGF,qBAAqB,QAAQ,UAC3B,GACA,MACA,YACA,kBACD,EACa;;AAGlB,MAAM,uBAaF;CACF,iBAAiB;EACf,UAAU,GAAG,SACX,EAAE,uCAAuC,EACvC,aAAa,KAAK,OAAO,UAAU,QACpC,CAAC;EACJ,UAAU,GAAG,SACX,EAAE,uCAAuC,EACvC,aAAa,KAAK,OAAO,UAAU,QACpC,CAAC;EACJ,OAAO,GAAG,SACR,EAAE,oCAAoC,EACpC,aAAa,KAAK,OAAO,UAAU,QACpC,CAAC;EACL;CACD,eAAe;EACb,UAAU,MAAM,EAAE,8BAA8B;EAChD,kBAAkB,MAAM,EAAE,qCAAqC;EAC/D,UAAU,MAAM,EAAE,8BAA8B;EAChD,OAAO,MAAM,EAAE,2BAA2B;EAC3C;CACD,iBAAiB;EACf,UAAU,GAAG,SACX,EAAE,uCAAuC,EACvC,aAAa,KAAK,OAAO,UAAU,QACpC,CAAC;EACJ,iBAAiB,GAAG,SAClB,EAAE,6CAA6C,EAC7C,aAAa,KAAK,OAAO,UAAU,QACpC,CAAC;EACJ,UAAU,GAAG,SACX,EAAE,uCAAuC,EACvC,aAAa,KAAK,OAAO,UAAU,QACpC,CAAC;EACJ,OAAO,GAAG,SACR,EAAE,uCAAuC,EACvC,aAAa,KAAK,OAAO,UAAU,QACpC,CAAC;EACL;CACD,eAAe;EACb,UAAU,GAAG,SACX,EAAE,uCAAuC,EACvC,aAAa,KAAK,OAAO,UAAU,QACpC,CAAC;EACJ,kBAAkB,GAAG,SACnB,EAAE,8CAA8C,EAC9C,aAAa,KAAK,OAAO,UAAU,QACpC,CAAC;EACJ,UAAU,GAAG,SACX,EAAE,uCAAuC,EACvC,aAAa,KAAK,OAAO,UAAU,QACpC,CAAC;EACJ,OAAO,GAAG,SACR,EAAE,oCAAoC,EACpC,aAAa,KAAK,OAAO,UAAU,QACpC,CAAC;EACL;CACD,QAAQ;EACN,UAAU,MAAM,EAAE,8BAA8B;EAChD,kBAAkB,MAAM,EAAE,qCAAqC;EAC/D,UAAU,MAAM,EAAE,8BAA8B;EAChD,OAAO,MAAM,EAAE,2BAA2B;EAC3C;CACD,MAAM;EACJ,UAAU,MAAM,EAAE,4BAA4B;EAC9C,kBAAkB,MAAM,EAAE,mCAAmC;EAC7D,mBAAmB,MAAM,EAAE,oCAAoC;EAC/D,UAAU,MAAM,EAAE,4BAA4B;EAC9C,OAAO,GAAG,GAAG,YAAY,sBACvB,eAAe,WACX,EAAE,gBAAgB,mBAAmB,UAAU,WAAW,OAAO,GACjE,EAAE,yBAAyB;EAClC;CACD,aAAa;EACX,UAAU,MAAM,EAAE,8BAA8B;EAChD,kBAAkB,MAAM,EAAE,qCAAqC;EAC/D,mBAAmB,MAAM,EAAE,sCAAsC;EACjE,UAAU,MAAM,EAAE,8BAA8B;EAChD,OAAO,MAAM,EAAE,2BAA2B;EAC3C;CACD,iBAAiB;EACf,UAAU,MAAM,EAAE,sCAAsC;EACxD,UAAU,MAAM,EAAE,sCAAsC;EACxD,OAAO,GAAG,GAAG,YAAY,sBACvB,eAAe,WACX,EAAE,gBAAgB,mBAAmB,UAAU,WAAW,OAAO,GACjE,EAAE,mCAAmC;EAC5C;CACF;AAED,MAAM,0BAGF;CACF,SAAS,EASR;CACD,MAAM;EAEJ,UAAU,MAAM,EAAE,sCAAsC;EACxD,WAAW,MAAM,EAAE,sCAAsC;EAC1D;CACD,QAAQ,EAMP;CACD,SAAS,EAAE;CACX,WAAW,EAAE;CACd"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lifi/widget",
|
|
3
|
-
"version": "4.0.0-beta.
|
|
3
|
+
"version": "4.0.0-beta.13",
|
|
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
|
"type": "module",
|
|
6
6
|
"main": "./dist/esm/index.js",
|
|
@@ -47,8 +47,8 @@
|
|
|
47
47
|
"react-intersection-observer": "^10.0.3",
|
|
48
48
|
"react-transition-group": "^4.4.5",
|
|
49
49
|
"zustand": "^5.0.12",
|
|
50
|
-
"@lifi/
|
|
51
|
-
"@lifi/
|
|
50
|
+
"@lifi/widget-provider": "4.0.0-beta.11",
|
|
51
|
+
"@lifi/wallet-management": "4.0.0-beta.11"
|
|
52
52
|
},
|
|
53
53
|
"peerDependencies": {
|
|
54
54
|
"@tanstack/react-query": ">=5.90.0",
|
|
@@ -9,7 +9,7 @@ export const RouteTokens: React.FC<{
|
|
|
9
9
|
route: RouteExtended
|
|
10
10
|
showEssentials?: boolean
|
|
11
11
|
}> = ({ route, showEssentials }) => {
|
|
12
|
-
const { subvariant
|
|
12
|
+
const { subvariant } = useWidgetConfig()
|
|
13
13
|
|
|
14
14
|
const fromToken = {
|
|
15
15
|
...route.steps[0].action.fromToken,
|
|
@@ -46,7 +46,6 @@ export const RouteTokens: React.FC<{
|
|
|
46
46
|
route={route}
|
|
47
47
|
token={toToken}
|
|
48
48
|
impactToken={fromToken}
|
|
49
|
-
defaultExpanded={defaultUI?.transactionDetailsExpanded}
|
|
50
49
|
showEssentials={showEssentials}
|
|
51
50
|
/>
|
|
52
51
|
) : null}
|
|
@@ -11,77 +11,45 @@ import { CardHeader } from '../Card/CardHeader.js'
|
|
|
11
11
|
export const SelectTokenCardHeader: React.FC<
|
|
12
12
|
React.ComponentProps<typeof CardHeader> & {
|
|
13
13
|
selected?: boolean
|
|
14
|
-
compact?: boolean
|
|
15
14
|
}
|
|
16
15
|
> = styled(CardHeader, {
|
|
17
|
-
shouldForwardProp: (prop) =>
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
[theme.breakpoints.down(theme.breakpoints.values.sm)]: {
|
|
31
|
-
width: 224,
|
|
32
|
-
},
|
|
33
|
-
[theme.breakpoints.down(theme.breakpoints.values.xs)]: {
|
|
34
|
-
width: 180,
|
|
35
|
-
fontSize: 16,
|
|
36
|
-
},
|
|
37
|
-
},
|
|
38
|
-
[`.${cardHeaderClasses.subheader}`]: {
|
|
39
|
-
textOverflow: 'ellipsis',
|
|
40
|
-
whiteSpace: 'nowrap',
|
|
41
|
-
overflow: 'hidden',
|
|
42
|
-
width: 256,
|
|
43
|
-
[theme.breakpoints.down(theme.breakpoints.values.sm)]: {
|
|
44
|
-
width: 224,
|
|
45
|
-
},
|
|
46
|
-
[theme.breakpoints.down(theme.breakpoints.values.xs)]: {
|
|
47
|
-
width: 180,
|
|
48
|
-
},
|
|
16
|
+
shouldForwardProp: (prop) => !['selected'].includes(prop as string),
|
|
17
|
+
})<{ selected?: boolean }>(({ theme }) => ({
|
|
18
|
+
padding: theme.spacing(2),
|
|
19
|
+
[`.${cardHeaderClasses.title}`]: {
|
|
20
|
+
color: theme.vars.palette.text.secondary,
|
|
21
|
+
textOverflow: 'ellipsis',
|
|
22
|
+
whiteSpace: 'nowrap',
|
|
23
|
+
overflow: 'hidden',
|
|
24
|
+
width: 96,
|
|
25
|
+
fontSize: 18,
|
|
26
|
+
fontWeight: 500,
|
|
27
|
+
[theme.breakpoints.down(theme.breakpoints.values.xs)]: {
|
|
28
|
+
fontSize: 16,
|
|
49
29
|
},
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
30
|
+
},
|
|
31
|
+
[`.${cardHeaderClasses.subheader}`]: {
|
|
32
|
+
textOverflow: 'ellipsis',
|
|
33
|
+
whiteSpace: 'nowrap',
|
|
34
|
+
overflow: 'hidden',
|
|
35
|
+
width: 96,
|
|
36
|
+
},
|
|
37
|
+
variants: [
|
|
38
|
+
{
|
|
39
|
+
props: ({ selected }) => selected,
|
|
40
|
+
style: {
|
|
41
|
+
[`.${cardHeaderClasses.title}`]: {
|
|
42
|
+
color: theme.vars.palette.text.primary,
|
|
43
|
+
fontWeight: 600,
|
|
58
44
|
},
|
|
59
45
|
},
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
[`.${cardHeaderClasses.title}`]: {
|
|
64
|
-
width: 96,
|
|
65
|
-
[theme.breakpoints.down(theme.breakpoints.values.sm)]: {
|
|
66
|
-
width: 96,
|
|
67
|
-
},
|
|
68
|
-
},
|
|
69
|
-
[`.${cardHeaderClasses.subheader}`]: {
|
|
70
|
-
width: 96,
|
|
71
|
-
[theme.breakpoints.down(theme.breakpoints.values.sm)]: {
|
|
72
|
-
width: 96,
|
|
73
|
-
},
|
|
74
|
-
},
|
|
75
|
-
},
|
|
76
|
-
},
|
|
77
|
-
],
|
|
78
|
-
})
|
|
79
|
-
)
|
|
46
|
+
},
|
|
47
|
+
],
|
|
48
|
+
}))
|
|
80
49
|
|
|
81
50
|
export const SelectTokenCard: React.FC<
|
|
82
51
|
React.ComponentProps<typeof Card> & {
|
|
83
52
|
formType?: FormType
|
|
84
|
-
compact?: boolean
|
|
85
53
|
mask?: boolean
|
|
86
54
|
}
|
|
87
55
|
> = styled(Card)(({ theme }) => {
|
|
@@ -101,18 +69,16 @@ export const SelectTokenCard: React.FC<
|
|
|
101
69
|
export const CardContent: React.FC<
|
|
102
70
|
React.ComponentProps<typeof MuiCardContent> & {
|
|
103
71
|
formType?: FormType
|
|
104
|
-
compact?: boolean
|
|
105
72
|
mask?: boolean
|
|
106
73
|
}
|
|
107
74
|
> = styled(MuiCardContent, {
|
|
108
|
-
shouldForwardProp: (prop) =>
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
({ theme, formType, compact, mask = true }) => {
|
|
75
|
+
shouldForwardProp: (prop) => !['formType', 'mask'].includes(prop as string),
|
|
76
|
+
})<{ formType?: FormType; mask?: boolean }>(
|
|
77
|
+
({ theme, formType, mask = true }) => {
|
|
112
78
|
const cardVariant = theme.components?.MuiCard?.defaultProps?.variant
|
|
113
79
|
const direction = formType === 'to' ? '-8px' : 'calc(100% + 8px)'
|
|
114
|
-
const horizontal =
|
|
115
|
-
const vertical =
|
|
80
|
+
const horizontal = direction
|
|
81
|
+
const vertical = '50%'
|
|
116
82
|
return {
|
|
117
83
|
padding: 0,
|
|
118
84
|
transition: theme.transitions.create(['background-color'], {
|
package/src/config/version.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export const name = '@lifi/widget'
|
|
2
|
-
export const version = '4.0.0-beta.
|
|
2
|
+
export const version = '4.0.0-beta.13'
|
|
@@ -1,8 +1,15 @@
|
|
|
1
1
|
import { useImperativeHandle } from 'react'
|
|
2
|
+
import { widgetEvents } from '../../hooks/useWidgetEvents.js'
|
|
2
3
|
import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'
|
|
3
4
|
import { formDefaultValues } from '../../stores/form/createFormStore.js'
|
|
5
|
+
import type { FormFieldChanged } from '../../types/events.js'
|
|
6
|
+
import { WidgetEvent } from '../../types/events.js'
|
|
4
7
|
import type { FormRef } from '../../types/widget.js'
|
|
5
|
-
import type {
|
|
8
|
+
import type {
|
|
9
|
+
FormFieldNames,
|
|
10
|
+
FormStoreStore,
|
|
11
|
+
GenericFormValue,
|
|
12
|
+
} from './types.js'
|
|
6
13
|
|
|
7
14
|
export const useFormRef = (
|
|
8
15
|
formStore: FormStoreStore,
|
|
@@ -48,9 +55,21 @@ export const useFormRef = (
|
|
|
48
55
|
? { isTouched: options?.setUrlSearchParam }
|
|
49
56
|
: undefined
|
|
50
57
|
|
|
58
|
+
const oldValue = formStore
|
|
59
|
+
.getState()
|
|
60
|
+
.getFieldValues(fieldName as FormFieldNames)[0]
|
|
61
|
+
|
|
51
62
|
formStore
|
|
52
63
|
.getState()
|
|
53
64
|
.setFieldValue(fieldName, sanitizedValue, fieldValueOptions)
|
|
65
|
+
|
|
66
|
+
if (sanitizedValue !== oldValue) {
|
|
67
|
+
widgetEvents.emit(WidgetEvent.FormFieldChanged, {
|
|
68
|
+
fieldName,
|
|
69
|
+
newValue: sanitizedValue,
|
|
70
|
+
oldValue,
|
|
71
|
+
} as FormFieldChanged)
|
|
72
|
+
}
|
|
54
73
|
},
|
|
55
74
|
}
|
|
56
75
|
}, [formStore, setSelectedBookmark])
|
|
@@ -129,7 +129,10 @@ export const createRouteExecutionStore = ({
|
|
|
129
129
|
}),
|
|
130
130
|
{
|
|
131
131
|
name: `${namePrefix || 'li.fi'}-widget-routes`,
|
|
132
|
-
version
|
|
132
|
+
// Bump version on breaking changes to the stored structure.
|
|
133
|
+
version: 4,
|
|
134
|
+
// Clear stored routes on any version mismatch to avoid errors from incompatible data shapes.
|
|
135
|
+
migrate: () => ({ routes: {} }),
|
|
133
136
|
partialize: (state) => ({ routes: state.routes }),
|
|
134
137
|
merge: (persistedState: any, currentState: RouteExecutionState) => {
|
|
135
138
|
const state = {
|
|
@@ -55,7 +55,7 @@ export const getUpdatedAction = (
|
|
|
55
55
|
|
|
56
56
|
export const getSourceTxHash = (route?: RouteExtended): string | undefined => {
|
|
57
57
|
const sourceAction = route?.steps[0].execution?.actions
|
|
58
|
-
|
|
58
|
+
?.filter(
|
|
59
59
|
(action) => !['RESET_ALLOWANCE', 'SET_ALLOWANCE'].includes(action.type)
|
|
60
60
|
)
|
|
61
61
|
.find((action) => action.txHash || action.taskId)
|