@lifi/widget 4.0.0-beta.11 → 4.0.0-beta.12
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/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/routes/createRouteExecutionStore.js +1 -0
- package/dist/esm/stores/routes/createRouteExecutionStore.js.map +1 -1
- package/dist/esm/utils/getActionMessage.js +1 -1
- package/dist/esm/utils/getActionMessage.js.map +1 -1
- package/package.json +1 -1
- package/src/components/SelectTokenButton/SelectTokenButton.style.tsx +35 -69
- package/src/config/version.ts +1 -1
- package/src/stores/routes/createRouteExecutionStore.ts +1 -0
- package/src/utils/getActionMessage.ts +1 -1
|
@@ -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.12'\n"],"mappings":";AAAA,MAAa,OAAO;AACpB,MAAa,UAAU"}
|
|
@@ -63,6 +63,7 @@ const createRouteExecutionStore = ({ namePrefix }) => create()(persist((set, get
|
|
|
63
63
|
}), {
|
|
64
64
|
name: `${namePrefix || "li.fi"}-widget-routes`,
|
|
65
65
|
version: 3,
|
|
66
|
+
migrate: (persistedState) => persistedState,
|
|
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: 3,\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;CAC/B,SAAS;CACT,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"}
|
|
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: 3,\n migrate: (persistedState: any) => persistedState,\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":"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"}
|
|
@@ -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.12",
|
|
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",
|
|
@@ -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.12'
|
|
@@ -130,6 +130,7 @@ export const createRouteExecutionStore = ({
|
|
|
130
130
|
{
|
|
131
131
|
name: `${namePrefix || 'li.fi'}-widget-routes`,
|
|
132
132
|
version: 3,
|
|
133
|
+
migrate: (persistedState: any) => persistedState,
|
|
133
134
|
partialize: (state) => ({ routes: state.routes }),
|
|
134
135
|
merge: (persistedState: any, currentState: RouteExecutionState) => {
|
|
135
136
|
const state = {
|