@lifi/widget 4.0.0-beta.12 → 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/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 -2
- 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/package.json +3 -3
- package/src/components/Header/ActivitiesButton.tsx +1 -0
- package/src/components/RouteCard/RouteTokens.tsx +1 -2
- package/src/config/version.ts +1 -1
- package/src/stores/form/useFormRef.ts +20 -1
- package/src/stores/routes/createRouteExecutionStore.ts +4 -2
- package/src/stores/routes/utils.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"}
|
|
@@ -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,8 +62,8 @@ const createRouteExecutionStore = ({ namePrefix }) => create()(persist((set, get
|
|
|
62
62
|
}
|
|
63
63
|
}), {
|
|
64
64
|
name: `${namePrefix || "li.fi"}-widget-routes`,
|
|
65
|
-
version:
|
|
66
|
-
migrate: (
|
|
65
|
+
version: 4,
|
|
66
|
+
migrate: () => ({ routes: {} }),
|
|
67
67
|
partialize: (state) => ({ routes: state.routes }),
|
|
68
68
|
merge: (persistedState, currentState) => {
|
|
69
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":"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"}
|
|
@@ -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"}
|
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}
|
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,8 +129,10 @@ export const createRouteExecutionStore = ({
|
|
|
129
129
|
}),
|
|
130
130
|
{
|
|
131
131
|
name: `${namePrefix || 'li.fi'}-widget-routes`,
|
|
132
|
-
version
|
|
133
|
-
|
|
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: {} }),
|
|
134
136
|
partialize: (state) => ({ routes: state.routes }),
|
|
135
137
|
merge: (persistedState: any, currentState: RouteExecutionState) => {
|
|
136
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)
|