@lifi/widget 0.0.0-preview-6cc63bac

package/dist/esm/i18n/zh.json

@@ -0,0 +1,362 @@
+{
+  "language": {
+    "name": "中文",
+    "title": "语言"
+  },
+  "format": {
+    "currency": "{{value, currencyExt(currency: USD)}}",
+    "number": "{{value, number(maximumFractionDigits: 9)}}",
+    "percent": "{{value, percent(maximumFractionDigits: 2)}}",
+    "tokenAmount": "{{value, numberExt}}"
+  },
+  "button": {
+    "auto": "自动",
+    "bookmark": "收藏",
+    "bookmarks": "收藏夹",
+    "bridge": "跨链",
+    "bridgeReview": "查看跨链详情",
+    "buy": "购买",
+    "cancel": "取消",
+    "checkoutReview": "查看购买详情",
+    "clearAllFailed": "",
+    "clearTransaction": "",
+    "close": "关闭",
+    "confirm": "确认",
+    "connectAnotherWallet": "连接另一个钱包",
+    "connectChainWallet": "",
+    "connectWallet": "关联钱包",
+    "contactSupport": "联系技术支持",
+    "continue": "继续",
+    "copyAddress": "复制地址",
+    "dark": "深色主题",
+    "delete": "删除",
+    "deposit": "存款",
+    "depositReview": "查看存款详情",
+    "disconnect": "断开连接",
+    "done": "确认",
+    "exchange": "兑换",
+    "getGas": "开始兑换燃气费",
+    "learnMore": "了解更多",
+    "light": "浅色主题",
+    "max": "",
+    "ok": "确认",
+    "options": "选项",
+    "reset": "重置",
+    "resetSettings": "恢复默认设置",
+    "seeDetails": "查看详情",
+    "showAll": "显示所有",
+    "startBridging": "开始跨链",
+    "startSwapping": "开始兑换",
+    "swap": "兑换",
+    "swapReview": "查看兑换详情",
+    "system": "",
+    "tryAgain": "重试",
+    "viewCoverage": "查看我们的覆盖范围",
+    "viewOnExplorer": "在区块链浏览器上查看"
+  },
+  "header": {
+    "amount": "金额",
+    "bookmarkedWallets": "已收藏的钱包",
+    "bridge": "跨链",
+    "checkout": "支付",
+    "checkoutDetails": "交易细节",
+    "deposit": "存款",
+    "depositDetails": "存款详情",
+    "depositTo": "充币至",
+    "exchange": "兑换",
+    "from": "兑换自",
+    "gas": "燃气费",
+    "payWith": "支付方式",
+    "receive": "接收",
+    "received": "",
+    "recentWallets": "最近使用的钱包",
+    "refunded": "",
+    "selectChain": "选择网络",
+    "selectWallet": "选择你的钱包",
+    "send": "发送",
+    "sendToWallet": "发送到该钱包",
+    "settings": "设置",
+    "swap": "兑换",
+    "to": "兑换为",
+    "transactionDetails": "交易详情",
+    "activities": "",
+    "walletConnected": "连接钱包",
+    "youGet": "您获得",
+    "youPay": "需要支付"
+  },
+  "info": {
+    "message": {
+      "accountDeployedMessage": "",
+      "autoRefuel": "您在 {{chainName}} 链上的燃气费很低。如果启用该选项，您将获得足够的燃气费完成此次兑换。",
+      "emptyBridgesList": "我们找不到任何匹配的桥",
+      "emptyChainList": "我们找不到任何匹配的链",
+      "emptyExchangesList": "我们找不到任何匹配的交易所",
+      "emptyTokenListAllNetworks": "",
+      "emptyTransactionHistory": "",
+      "routeNotFound": "导致其的原因可能是：流动性低，所选定代币的数额太低，燃气费过高，或者当前没有合适的交易路径。",
+      "missingRouteRequiredAccount": ""
+    },
+    "title": {
+      "autoRefuel": "获得 {{chainName}} 链的燃气费",
+      "emptyTransactionHistory": "近期无交易",
+      "routeNotFound": "没有可用的路由"
+    }
+  },
+  "success": {
+    "message": {
+      "exchangePartiallySuccessful": "我们尝试执行这笔交易，但是因为滑点设置的问题或者 {{tokenSymbol}} 代币流动性不足，{{tool}} 无法完成交易"
+    },
+    "title": {
+      "bridgePartiallySuccessful": "跨链部分成功",
+      "bridgeSuccessful": "跨链成功",
+      "depositSuccessful": "存款成功",
+      "checkoutSuccessful": "购买成功",
+      "refundIssued": "退款已受理",
+      "swapPartiallySuccessful": "兑换部分完成",
+      "swapSuccessful": "兑换成功"
+    }
+  },
+  "warning": {
+    "message": {
+      "accountNotDeployedMessage": "",
+      "lowAddressActivity": "此地址在 {{chainName}} 网络上的活跃度较低。请确认您发送到了正确的地址和网络，以防止潜在的资金损失。",
+      "clearFailedTransactions": "",
+      "fundsLossPrevention": "总是确保在目的地链上适当建立智能合同账户，并避免直接转给交易所，以防止资金损失。",
+      "highValueLoss": "收到的代币的价值明显低于要被兑换的代币和交易成本。",
+      "unverifiedToken": "",
+      "insufficientFunds": "你没有足够的资金来完成这笔交易。",
+      "insufficientGas": "您没有足够的燃气费来完成此次交易。您至少需要添加：",
+      "minFromAmountUSD": "",
+      "rateChanged": "兑换比例已经改变，如果继续兑换，您将接受新的兑换比例。",
+      "resetSettings": "这将重置您的路由优先级，滑点，燃气费，选中的跨链桥和链上交易所。",
+      "slippageOutsideRecommendedLimits": "过高的滑点可能会导致交易被抢跑，造成财产损失",
+      "slippageUnderRecommendedLimits": "低幻灯片宽度可能会导致交易延迟或失败。"
+    },
+    "checkbox": {
+      "highValueLoss": ""
+    },
+    "title": {
+      "clearFailedTransactions": "",
+      "highValueLoss": "大额资金损失",
+      "insufficientGas": "燃气费不足",
+      "rateChanged": "兑换比例变动",
+      "resetSettings": "确定要恢复默认设置吗?",
+      "lowAddressActivity": "低活动地址"
+    }
+  },
+  "error": {
+    "message": {
+      "allowanceRequired": "{{tokenSymbol}} 的转账金额超过了您设置的支出上限。请提高该代币的支出上限，然后重试。",
+      "insufficientFunds": "您没有足够的燃气费支付该交易。",
+      "rateLimitExceeded": "",
+      "remainInYourWallet": "",
+      "signatureRejected": "",
+      "slippageThreshold": "滑点大于预设值，请选择其他路由并获取新的价格。",
+      "thirdPartyError": "",
+      "transactionCanceled": "交易已被取消。",
+      "transactionConflict": "交易无法处理，因为它与使用相同资金的另一个待处理交易相冲突。 请等待交易确认或检查您的交易历史，然后再次尝试。",
+      "transactionExpired": "区块高度已超过允许的最大值，或者交易哈希值已经过期。",
+      "transactionRejected": "",
+      "transactionFailed": "请查看区块浏览器以了解更多信息。",
+      "transactionNotSent": "交易未能发送。",
+      "transactionSimulationFailed": "该交易模拟执行失败。",
+      "unknown": "请再试一次或者联系支持。",
+      "walletChangedDuringExecution": "询价的钱包地址与试图签署交易的钱包地址不匹配，请确保在整个交易执行过程中使用相同的钱包地址。"
+    },
+    "title": {
+      "allowanceRequired": "余额不足",
+      "balanceIsTooLow": "余额太低",
+      "bookmarkAlreadyExists": "钱包: {{name}}，已被收藏",
+      "bookmarkNameRequired": "请输入收藏钱包的名称",
+      "chainSwitch": "请切换当前网络",
+      "exchangeRateUpdateCanceled": "兑换率更新已取消",
+      "gasLimitIsTooLow": "燃气费设置过低",
+      "insufficientFunds": "资金不足",
+      "insufficientGas": "",
+      "rateLimitExceeded": "",
+      "signatureRejected": "交易需要签名。",
+      "slippageNotMet": "滑点未满足",
+      "thirdPartyError": "",
+      "transactionCanceled": "交易取消",
+      "transactionConflict": "交易冲突",
+      "transactionExpired": "交易过期",
+      "transactionFailed": "交易失败",
+      "transactionRejected": "",
+      "transactionSimulationFailed": "交易模拟失败",
+      "transactionUnderpriced": "交易定价过低",
+      "transactionUnprepared": "无法开始该交易",
+      "unknown": "未知错误",
+      "walletAddressInvalid": "钱包地址或域名无效",
+      "walletAddressInvalid_chain": "钱包地址或者域名在所选中的 {{chainName}} 链无效",
+      "walletAddressRequired": "请输入钱包地址。",
+      "walletChainTypeInvalid": "钱包地址与所选中目标的 {{chainName}} 链不匹配",
+      "walletMismatch": "钱包地址不匹配"
+    }
+  },
+  "tooltip": {
+    "deselectAll": "取消全选",
+    "estimatedTime": "",
+    "exchangeRate": "",
+    "feeCollection": "",
+    "minReceived": "在签署兑换或者跨链交易之前， 预估的最低代币数量可能会变化，对于两步交易，这适用于第二步交易签署之前。",
+    "notFound": {
+      "text": "我们找不到这个页面。",
+      "title": "404"
+    },
+    "multistep": "",
+    "gasless": "",
+    "numberOfSteps": "每次代币兑换包含了一到两次需要签名的交易。",
+    "priceImpact": "源代币和目标代币之间的估计差值。",
+    "progressToNextUpdate": "数据将在{{value}} 秒后自动刷新，点击这里可以手动更新。",
+    "selectAll": "全选",
+    "settingsModified": "设置(已修改)",
+    "slippage": "真实的成交价位与预设的成交价位间相差的最大百分比。该值可以在设置中更改。"
+  },
+  "main": {
+    "allNetworks": "",
+    "allTokens": "所有代币",
+    "bridgeStepDetails": "通过 {{tool}} 把资产从 {{from}} 链跨到 {{to}} 链上",
+    "checkoutStepDetails": "通过 {{tool}} 购买",
+    "currentAmount": "当前余额",
+    "depositStepDetails": "通过 {{tool}} 存入资金",
+    "estimatedTime": "",
+    "exchangeRate": "",
+    "featuredTokens": "精选代币",
+    "fees": {
+      "defaultIntegrator": "集成商费用",
+      "relayerService": "",
+      "estimated": "预估总费用",
+      "free": "",
+      "network": "网络费用",
+      "paid": "已支付的费用",
+      "provider": "供应商费用"
+    },
+    "from": "从",
+    "inProgress": "进行中",
+    "maxSlippage": "最大滑点",
+    "minReceived": "最少收到",
+    "myTokens": "我的代币",
+    "onChain": "在{{chainName}} 上",
+    "ownedBy": "属于",
+    "pinnedTokens": "",
+    "popularTokens": "热门代币",
+    "priceImpact": "价格冲击",
+    "process": {
+      "bridge": {
+        "actionRequired": "",
+        "messageRequired": "",
+        "done": "跨链交易已确认",
+        "pending": "",
+        "started": "准备执行跨链交易"
+      },
+      "checkout": {
+        "done": "购买完成"
+      },
+      "deposit": {
+        "done": "已完成存款"
+      },
+      "receivingChain": {
+        "done": "跨链完成",
+        "partial": "跨链部分完成",
+        "pending": "等待接收链回应",
+        "refunded": "跨链交易资产已退还"
+      },
+      "swap": {
+        "actionRequired": "",
+        "messageRequired": "",
+        "done": "兑换完成",
+        "pending": "",
+        "started": "准备兑换"
+      },
+      "permit": {
+        "actionRequired": "",
+        "done": "",
+        "pending": "",
+        "started": ""
+      },
+      "tokenAllowance": {
+        "actionRequired": "",
+        "resetRequired": "",
+        "done": "",
+        "pending": "",
+        "started": ""
+      }
+    },
+    "quotedAmount": "报价金额",
+    "rateChange": "波动率",
+    "receiving": "接收",
+    "refuelStepDetails": "通过 {{tool}} 获取燃气费",
+    "route": "",
+    "select": "",
+    "sendToAddress": "发送到{{address}}",
+    "sendToWallet": "发送到另外的钱包",
+    "sending": "发送中",
+    "sentToAddress": "发送到{{address}}",
+    "stepBridge": "跨链",
+    "stepBridgeAndBuy": "跨链并购买",
+    "stepBridgeAndDeposit": "跨链并存款",
+    "stepBuy": "购买",
+    "stepDeposit": "存款",
+    "stepDetails": "通过 LI.FI {{tool}}",
+    "stepSwap": "兑换",
+    "stepSwapAndBridge": "兑换和跨链",
+    "stepSwapAndBuy": "兑换并购买",
+    "stepSwapAndDeposit": "兑换并存款",
+    "swapStepDetails": "通过{{tool}}在{{chain}}链上兑换代币",
+    "receipts": "",
+    "sentToWallet": "",
+    "transferId": "交易 ID",
+    "tags": {
+      "cheapest": "最佳报价",
+      "fastest": "速度最快",
+      "gasless": "",
+      "multistep": ""
+    },
+    "to": "到",
+    "tokenOnChain": "{{chainName}}链上的{{tokenSymbol}}",
+    "tokenOnChainAmount": "",
+    "tokenSearch": "",
+    "valueLoss": "资金损失",
+    "searchBridges": "搜索跨链桥",
+    "searchExchanges": "搜索交易所",
+    "searchNetwork": ""
+  },
+  "settings": {
+    "appearance": "",
+    "enabledBridges": "跨链桥",
+    "enabledExchanges": "交易所",
+    "gasPrice": {
+      "fast": "快速",
+      "normal": "正常",
+      "slow": "缓慢",
+      "title": "燃气费"
+    },
+    "routePriority": "路由优先级",
+    "slippage": "最大滑点",
+    "custom": "自定义",
+    "resetSettings": "您正在使用自定义设置来过滤可用路由。",
+    "hideSmallBalances": ""
+  },
+  "sendToWallet": {
+    "addBookmark": "添加到收藏",
+    "bookmarkWallet": "已收藏的钱包",
+    "confirmWalletAddress": "确认钱包地址",
+    "connectedWallets": "已连接的钱包",
+    "enterAddress_long": "请输入地址或钱包域名",
+    "enterAddress_short": "请输入钱包地址",
+    "enterName": "输入名称",
+    "noBookmarkedWallets": "没有收藏的钱包",
+    "noBookmarkedWalletsMessage": "",
+    "noConnectedWallets": "没有已连接的钱包",
+    "noConnectedWalletsMessage": "",
+    "noRecentWallets": "没有最近使用的钱包",
+    "noRecentWalletsMessage": "",
+    "required": ""
+  },
+  "tokenMetric": {
+    "currentPrice": "",
+    "contractAddress": "",
+    "marketCap": "",
+    "volume24h": ""
+  }
+}

package/dist/esm/index.d.ts

@@ -0,0 +1,33 @@
+import { DefaultFieldValues, DefaultValues, ExtractValueType, FormActions, FormFieldArray, FormFieldNames, FormKeyHelper, FormProps, FormStoreStore, FormType, FormTypeProps, FormValueControl, FormValues, FormValuesState, GenericFormValue, ResetOptions, SetOptions, TouchedFields, ValidationActions, ValidationProps } from "./stores/form/types.js";
+import { AllowDeny, AllowDenyItems, AllowDenySet, AllowDenySetItem, AllowDenySets, Appearance, CalculateFeeParams, CustomMode, DefaultUI, DisabledUIConfig, ExpansionType, ExplorerUrl, FieldNames, FieldValues, FormFieldOptions, FormRef, FormRefProps, FormState, HiddenUIConfig, ModeOptions, NavigationProps, PoweredByType, RequiredUIConfig, RouteLabel, RouteLabelRule, SetFieldValueFunction, SplitMode, SplitModeOptions, ToAddress, WidgetChains, WidgetConfig, WidgetConfigPartialProps, WidgetConfigProps, WidgetContractTool, WidgetDrawerProps, WidgetFeeConfig, WidgetLanguages, WidgetMode, WidgetProps, WidgetProvider, WidgetSDKConfig, WidgetTheme, WidgetThemeComponents, WidgetTokens, WidgetVariant, WidgetWalletConfig } from "./types/widget.js";
+import { WidgetDrawer } from "./AppDrawer.js";
+import { App } from "./App.js";
+import { TokenAmount } from "./types/token.js";
+import { ItemPrice, ItemPriceProps } from "./components/ContractComponent/ItemPrice.js";
+import { NFTBaseProps, NFTOwner, NFTProps } from "./components/ContractComponent/NFT/types.js";
+import { NFT } from "./components/ContractComponent/NFT/NFT.js";
+import { NFTBase } from "./components/ContractComponent/NFT/NFTBase.js";
+import { WidgetSkeleton } from "./components/Skeleton/WidgetSkeleton.js";
+import { defaultMaxHeight } from "./config/constants.js";
+import { name, version } from "./config/version.js";
+import { useWidgetChains } from "./hooks/useWidgetChains.js";
+import { navigationRoutes } from "./utils/navigationRoutes.js";
+import { ChainPinned, ChainTokenSelected, ContactSupport, FormFieldChanged, LowAddressActivityConfirmed, RouteExecutionUpdate, RouteHighValueLossUpdate, RouteSelected, SettingUpdated, TokenSearch, WidgetEvent, WidgetEvents } from "./types/events.js";
+import { WidgetEventEmitter, useWidgetEvents, widgetEvents } from "./hooks/useWidgetEvents.js";
+import { Bookmark, BookmarkActions, BookmarkProps, BookmarkState, BookmarkStore } from "./stores/bookmarks/types.js";
+import { useFieldActions } from "./stores/form/useFieldActions.js";
+import { useFieldValues } from "./stores/form/useFieldValues.js";
+import { azureLightTheme } from "./themes/azureLight.js";
+import { createTheme } from "./themes/createTheme.js";
+import { jumperTheme } from "./themes/jumper.js";
+import { palette, paletteDark, paletteLight } from "./themes/palettes.js";
+import { watermelonLightTheme } from "./themes/watermelonLight.js";
+import { windows95Theme } from "./themes/windows95.js";
+import { compactNumberFormatter } from "./utils/compactNumberFormatter.js";
+import { currencyExtendedFormatter } from "./utils/currencyExtendedFormatter.js";
+import { formatDuration, formatInputAmount, formatSlippage, formatTokenAmount, formatTokenPrice, priceToTokenAmount, usdDecimals, wrapLongWords } from "./utils/format.js";
+import { getPriceImpact } from "./utils/getPriceImpact.js";
+import { percentFormatter } from "./utils/percentFormatter.js";
+import { ChainId, ChainType, CoinKey } from "@lifi/sdk";
+export type * from "@lifi/sdk";
+export { AllowDeny, AllowDenyItems, AllowDenySet, AllowDenySetItem, AllowDenySets, Appearance, Bookmark, BookmarkActions, BookmarkProps, BookmarkState, BookmarkStore, CalculateFeeParams, ChainId, ChainPinned, ChainTokenSelected, ChainType, CoinKey, ContactSupport, CustomMode, DefaultFieldValues, DefaultUI, DefaultValues, DisabledUIConfig, ExpansionType, ExplorerUrl, ExtractValueType, FieldNames, FieldValues, FormActions, FormFieldArray, FormFieldChanged, FormFieldNames, FormFieldOptions, FormKeyHelper, FormProps, FormRef, FormRefProps, FormState, FormStoreStore, FormType, FormTypeProps, FormValueControl, FormValues, FormValuesState, GenericFormValue, HiddenUIConfig, ItemPrice, ItemPriceProps, App as LiFiWidget, LowAddressActivityConfirmed, ModeOptions, NFT, NFTBase, NFTBaseProps, NFTOwner, NFTProps, NavigationProps, PoweredByType, RequiredUIConfig, ResetOptions, RouteExecutionUpdate, RouteHighValueLossUpdate, RouteLabel, RouteLabelRule, RouteSelected, SetFieldValueFunction, SetOptions, SettingUpdated, SplitMode, SplitModeOptions, ToAddress, type TokenAmount, TokenSearch, TouchedFields, ValidationActions, ValidationProps, WidgetChains, WidgetConfig, WidgetConfigPartialProps, WidgetConfigProps, WidgetContractTool, type WidgetDrawer, WidgetDrawerProps, WidgetEvent, type WidgetEventEmitter, WidgetEvents, WidgetFeeConfig, WidgetLanguages, WidgetMode, WidgetProps, WidgetProvider, WidgetSDKConfig, WidgetSkeleton, WidgetTheme, WidgetThemeComponents, WidgetTokens, WidgetVariant, WidgetWalletConfig, azureLightTheme, compactNumberFormatter, createTheme, currencyExtendedFormatter, defaultMaxHeight, formatDuration, formatInputAmount, formatSlippage, formatTokenAmount, formatTokenPrice, getPriceImpact, jumperTheme, name, navigationRoutes, palette, paletteDark, paletteLight, percentFormatter, priceToTokenAmount, usdDecimals, useFieldActions, useFieldValues, useWidgetChains, useWidgetEvents, version, watermelonLightTheme, widgetEvents, windows95Theme, wrapLongWords };

package/dist/esm/index.js

@@ -0,0 +1,28 @@
+import { useWidgetEvents, widgetEvents } from "./hooks/useWidgetEvents.js";
+import { WidgetEvent } from "./types/events.js";
+import { defaultMaxHeight } from "./config/constants.js";
+import { ExpansionType } from "./types/widget.js";
+import { navigationRoutes } from "./utils/navigationRoutes.js";
+import { name, version } from "./config/version.js";
+import { useFieldActions } from "./stores/form/useFieldActions.js";
+import { formatDuration, formatInputAmount, formatSlippage, formatTokenAmount, formatTokenPrice, priceToTokenAmount, usdDecimals, wrapLongWords } from "./utils/format.js";
+import { FormKeyHelper } from "./stores/form/types.js";
+import { useFieldValues } from "./stores/form/useFieldValues.js";
+import { getPriceImpact } from "./utils/getPriceImpact.js";
+import { compactNumberFormatter } from "./utils/compactNumberFormatter.js";
+import { currencyExtendedFormatter } from "./utils/currencyExtendedFormatter.js";
+import { percentFormatter } from "./utils/percentFormatter.js";
+import { palette, paletteDark, paletteLight } from "./themes/palettes.js";
+import { createTheme } from "./themes/createTheme.js";
+import { App } from "./App.js";
+import { ItemPrice } from "./components/ContractComponent/ItemPrice.js";
+import { NFTBase } from "./components/ContractComponent/NFT/NFTBase.js";
+import { NFT } from "./components/ContractComponent/NFT/NFT.js";
+import { WidgetSkeleton } from "./components/Skeleton/WidgetSkeleton.js";
+import { useWidgetChains } from "./hooks/useWidgetChains.js";
+import { azureLightTheme } from "./themes/azureLight.js";
+import { jumperTheme } from "./themes/jumper.js";
+import { watermelonLightTheme } from "./themes/watermelonLight.js";
+import { windows95Theme } from "./themes/windows95.js";
+import { ChainId, ChainType, CoinKey } from "@lifi/sdk";
+export { ChainId, ChainType, CoinKey, ExpansionType, FormKeyHelper, ItemPrice, App as LiFiWidget, NFT, NFTBase, WidgetEvent, WidgetSkeleton, azureLightTheme, compactNumberFormatter, createTheme, currencyExtendedFormatter, defaultMaxHeight, formatDuration, formatInputAmount, formatSlippage, formatTokenAmount, formatTokenPrice, getPriceImpact, jumperTheme, name, navigationRoutes, palette, paletteDark, paletteLight, percentFormatter, priceToTokenAmount, usdDecimals, useFieldActions, useFieldValues, useWidgetChains, useWidgetEvents, version, watermelonLightTheme, widgetEvents, windows95Theme, wrapLongWords };

package/dist/esm/pages/ActivitiesPage/ActiveTransactionItem.js

@@ -0,0 +1,36 @@
+import { navigationRoutes } from "../../utils/navigationRoutes.js";
+import { TransactionCardSkeleton } from "../../components/TransactionCard/TransactionCardSkeleton.js";
+import { ActiveTransactionCard } from "../../components/TransactionCard/ActiveTransactionCard.js";
+import { useRouteExecution } from "../../hooks/useRouteExecution.js";
+import { useNavigate } from "@tanstack/react-router";
+import { jsx } from "react/jsx-runtime";
+//#region src/pages/ActivitiesPage/ActiveTransactionItem.tsx
+const ActiveTransactionItem = ({ routeId }) => {
+	const navigate = useNavigate();
+	const { route, status, deleteRoute } = useRouteExecution({
+		routeId,
+		executeInBackground: true
+	});
+	const lastActiveStep = route?.steps.findLast((step) => step.execution);
+	if (!route || !lastActiveStep) return /* @__PURE__ */ jsx(TransactionCardSkeleton, { active: true });
+	const handleClick = () => {
+		navigate({
+			to: navigationRoutes.transactionExecution,
+			search: { routeId }
+		});
+	};
+	const handleDelete = (e) => {
+		e.stopPropagation();
+		deleteRoute();
+	};
+	return /* @__PURE__ */ jsx(ActiveTransactionCard, {
+		route,
+		status,
+		onClick: handleClick,
+		onDelete: handleDelete
+	});
+};
+//#endregion
+export { ActiveTransactionItem };
+
+//# sourceMappingURL=ActiveTransactionItem.js.map

package/dist/esm/pages/ActivitiesPage/ActiveTransactionItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActiveTransactionItem.js","names":[],"sources":["../../../../src/pages/ActivitiesPage/ActiveTransactionItem.tsx"],"sourcesContent":["import { useNavigate } from '@tanstack/react-router'\nimport type { MouseEvent } from 'react'\nimport { ActiveTransactionCard } from '../../components/TransactionCard/ActiveTransactionCard.js'\nimport { TransactionCardSkeleton } from '../../components/TransactionCard/TransactionCardSkeleton.js'\nimport { useRouteExecution } from '../../hooks/useRouteExecution.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\n\nexport const ActiveTransactionItem: React.FC<{ routeId: string }> = ({\n  routeId,\n}) => {\n  const navigate = useNavigate()\n  const { route, status, deleteRoute } = useRouteExecution({\n    routeId,\n    executeInBackground: true,\n  })\n\n  const lastActiveStep = route?.steps.findLast((step) => step.execution)\n\n  if (!route || !lastActiveStep) {\n    return <TransactionCardSkeleton active />\n  }\n\n  const handleClick = () => {\n    navigate({\n      to: navigationRoutes.transactionExecution,\n      search: { routeId },\n    })\n  }\n\n  const handleDelete = (e: MouseEvent) => {\n    e.stopPropagation()\n    deleteRoute()\n  }\n\n  return (\n    <ActiveTransactionCard\n      route={route}\n      status={status}\n      onClick={handleClick}\n      onDelete={handleDelete}\n    />\n  )\n}\n"],"mappings":";;;;;;;AAOA,MAAa,yBAAwD,EACnE,cACI;CACJ,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,OAAO,QAAQ,gBAAgB,kBAAkB;EACvD;EACA,qBAAqB;CACvB,CAAC;CAED,MAAM,iBAAiB,OAAO,MAAM,UAAU,SAAS,KAAK,SAAS;CAErE,IAAI,CAAC,SAAS,CAAC,gBACb,OAAO,oBAAC,yBAAD,EAAyB,QAAA,KAAQ,CAAA;CAG1C,MAAM,oBAAoB;EACxB,SAAS;GACP,IAAI,iBAAiB;GACrB,QAAQ,EAAE,QAAQ;EACpB,CAAC;CACH;CAEA,MAAM,gBAAgB,MAAkB;EACtC,EAAE,gBAAgB;EAClB,YAAY;CACd;CAEA,OACE,oBAAC,uBAAD;EACS;EACC;EACR,SAAS;EACT,UAAU;CACX,CAAA;AAEL"}

package/dist/esm/pages/ActivitiesPage/ActivitiesPage.js

@@ -0,0 +1,101 @@
+import { PageContainer } from "../../components/PageContainer.js";
+import { useRouteExecutionStore } from "../../stores/routes/RouteExecutionStore.js";
+import { TransactionCardSkeleton } from "../../components/TransactionCard/TransactionCardSkeleton.js";
+import { useHeader } from "../../hooks/useHeader.js";
+import { useListHeight } from "../../hooks/useListHeight.js";
+import { useTransactionList } from "../../hooks/useTransactionList.js";
+import { ActiveTransactionItem } from "./ActiveTransactionItem.js";
+import { ActivitiesPageMenuButton } from "./ActivitiesPageMenuButton.js";
+import { TransactionHistoryEmpty } from "./TransactionHistoryEmpty.js";
+import { TransactionHistoryItem } from "./TransactionHistoryItem.js";
+import { useCallback, useMemo, useRef } from "react";
+import { Box, List } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useAccount } from "@lifi/wallet-management";
+//#region src/pages/ActivitiesPage/ActivitiesPage.tsx
+const SKELETON_COUNT = 2;
+const ActivitiesPage = () => {
+	const parentRef = useRef(null);
+	const { items, isLoading } = useTransactionList();
+	const { t } = useTranslation();
+	const { accounts } = useAccount();
+	const accountAddresses = useMemo(() => accounts.map((account) => account.address), [accounts]);
+	const hasFailedItems = useRouteExecutionStore(useCallback((state) => Object.values(state.routes).some((r) => r?.status === 8 && accountAddresses.includes(r.route.fromAddress)), [accountAddresses]));
+	useHeader(t("header.activities"), hasFailedItems ? /* @__PURE__ */ jsx(ActivitiesPageMenuButton, {}) : null);
+	const { listHeight } = useListHeight({ listParentRef: parentRef });
+	const hasStoreItems = items.length > 0;
+	const skeletonCount = isLoading && hasStoreItems ? SKELETON_COUNT : 0;
+	const totalCount = items.length + skeletonCount;
+	const getItemKey = useCallback((index) => {
+		if (index >= items.length) return `skeleton-${index}`;
+		const item = items[index];
+		if (item.type === "active") return `active-${item.routeId}`;
+		return `${item.type}-${item.txHash || item.routeExecution.route.id}`;
+	}, [items]);
+	const { getVirtualItems, getTotalSize, measureElement } = useVirtualizer({
+		count: hasStoreItems ? totalCount : 0,
+		overscan: 3,
+		paddingEnd: 12,
+		getScrollElement: () => parentRef.current,
+		estimateSize: (index) => items[index]?.type === "active" ? 218 : 196,
+		getItemKey
+	});
+	const isEmpty = !items.length && !isLoading;
+	return /* @__PURE__ */ jsx(PageContainer, {
+		disableGutters: true,
+		children: /* @__PURE__ */ jsx(Box, {
+			className: "long-list",
+			ref: parentRef,
+			style: { height: listHeight },
+			sx: {
+				overflow: "auto",
+				paddingX: 3,
+				paddingTop: 1.5
+			},
+			children: isEmpty ? /* @__PURE__ */ jsx(TransactionHistoryEmpty, {}) : isLoading && !hasStoreItems ? /* @__PURE__ */ jsx(List, {
+				disablePadding: true,
+				sx: {
+					display: "flex",
+					flexDirection: "column",
+					gap: 2,
+					marginBottom: 2
+				},
+				children: Array.from({ length: SKELETON_COUNT }).map((_, index) => /* @__PURE__ */ jsx(TransactionCardSkeleton, {}, index))
+			}) : /* @__PURE__ */ jsx(List, {
+				style: {
+					height: getTotalSize(),
+					position: "relative"
+				},
+				disablePadding: true,
+				children: getVirtualItems().map((item) => {
+					const listItem = item.index < items.length ? items[item.index] : null;
+					return /* @__PURE__ */ jsx("li", {
+						ref: measureElement,
+						"data-index": item.index,
+						style: {
+							position: "absolute",
+							top: 0,
+							left: 0,
+							width: "100%",
+							paddingBottom: 16,
+							transform: `translateY(${item.start}px)`,
+							listStyle: "none"
+						},
+						children: !listItem ? /* @__PURE__ */ jsx(TransactionCardSkeleton, {}) : listItem.type === "active" ? /* @__PURE__ */ jsx(ActiveTransactionItem, { routeId: listItem.routeId }) : /* @__PURE__ */ jsx(TransactionHistoryItem, {
+							route: listItem.routeExecution.route,
+							type: listItem.type,
+							transactionHash: listItem.txHash,
+							startedAt: listItem.startedAt
+						})
+					}, item.key);
+				})
+			})
+		})
+	});
+};
+//#endregion
+export { ActivitiesPage };
+
+//# sourceMappingURL=ActivitiesPage.js.map

package/dist/esm/pages/ActivitiesPage/ActivitiesPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActivitiesPage.js","names":[],"sources":["../../../../src/pages/ActivitiesPage/ActivitiesPage.tsx"],"sourcesContent":["import { useAccount } from '@lifi/wallet-management'\nimport { Box, List } from '@mui/material'\nimport { useVirtualizer } from '@tanstack/react-virtual'\nimport { type JSX, useCallback, useMemo, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { PageContainer } from '../../components/PageContainer.js'\nimport { TransactionCardSkeleton } from '../../components/TransactionCard/TransactionCardSkeleton.js'\nimport { useHeader } from '../../hooks/useHeader.js'\nimport { useListHeight } from '../../hooks/useListHeight.js'\nimport { useTransactionList } from '../../hooks/useTransactionList.js'\nimport { useRouteExecutionStore } from '../../stores/routes/RouteExecutionStore.js'\nimport { RouteExecutionStatus } from '../../stores/routes/types.js'\nimport { ActiveTransactionItem } from './ActiveTransactionItem.js'\nimport { ActivitiesPageMenuButton } from './ActivitiesPageMenuButton.js'\nimport { TransactionHistoryEmpty } from './TransactionHistoryEmpty.js'\nimport { TransactionHistoryItem } from './TransactionHistoryItem.js'\n\nconst SKELETON_COUNT = 2\n\nexport const ActivitiesPage = (): JSX.Element => {\n  // Parent ref and useVirtualizer should be in one file to avoid blank page (0 virtual items) issue\n  const parentRef = useRef<HTMLDivElement | null>(null)\n  const { items, isLoading } = useTransactionList()\n\n  const { t } = useTranslation()\n  const { accounts } = useAccount()\n  const accountAddresses = useMemo(\n    () => accounts.map((account) => account.address),\n    [accounts]\n  )\n  const hasFailedItems = useRouteExecutionStore(\n    useCallback(\n      (state) =>\n        Object.values(state.routes).some(\n          (r) =>\n            r?.status === RouteExecutionStatus.Failed &&\n            accountAddresses.includes(r.route.fromAddress)\n        ),\n      [accountAddresses]\n    )\n  )\n\n  useHeader(\n    t('header.activities'),\n    hasFailedItems ? <ActivitiesPageMenuButton /> : null\n  )\n\n  const { listHeight } = useListHeight({\n    listParentRef: parentRef,\n  })\n\n  const hasStoreItems = items.length > 0\n  const skeletonCount = isLoading && hasStoreItems ? SKELETON_COUNT : 0\n  const totalCount = items.length + skeletonCount\n\n  const getItemKey = useCallback(\n    (index: number) => {\n      if (index >= items.length) {\n        return `skeleton-${index}`\n      }\n      const item = items[index]\n      if (item.type === 'active') {\n        return `active-${item.routeId}`\n      }\n      return `${item.type}-${item.txHash || item.routeExecution.route.id}`\n    },\n    [items]\n  )\n\n  const { getVirtualItems, getTotalSize, measureElement } = useVirtualizer({\n    count: hasStoreItems ? totalCount : 0,\n    overscan: 3,\n    paddingEnd: 12,\n    getScrollElement: () => parentRef.current,\n    estimateSize: (index) => (items[index]?.type === 'active' ? 218 : 196),\n    getItemKey,\n  })\n\n  const isEmpty = !items.length && !isLoading\n\n  return (\n    <PageContainer disableGutters>\n      <Box\n        className=\"long-list\"\n        ref={parentRef}\n        style={{ height: listHeight }}\n        sx={{ overflow: 'auto', paddingX: 3, paddingTop: 1.5 }}\n      >\n        {isEmpty ? (\n          <TransactionHistoryEmpty />\n        ) : isLoading && !hasStoreItems ? (\n          <List\n            disablePadding\n            sx={{\n              display: 'flex',\n              flexDirection: 'column',\n              gap: 2,\n              marginBottom: 2,\n            }}\n          >\n            {Array.from({ length: SKELETON_COUNT }).map((_, index) => (\n              <TransactionCardSkeleton key={index} />\n            ))}\n          </List>\n        ) : (\n          <List\n            style={{ height: getTotalSize(), position: 'relative' }}\n            disablePadding\n          >\n            {getVirtualItems().map((item) => {\n              const listItem =\n                item.index < items.length ? items[item.index] : null\n              return (\n                <li\n                  key={item.key}\n                  ref={measureElement}\n                  data-index={item.index}\n                  style={{\n                    position: 'absolute',\n                    top: 0,\n                    left: 0,\n                    width: '100%',\n                    paddingBottom: 16,\n                    transform: `translateY(${item.start}px)`,\n                    listStyle: 'none',\n                  }}\n                >\n                  {!listItem ? (\n                    <TransactionCardSkeleton />\n                  ) : listItem.type === 'active' ? (\n                    <ActiveTransactionItem routeId={listItem.routeId} />\n                  ) : (\n                    <TransactionHistoryItem\n                      route={listItem.routeExecution.route}\n                      type={listItem.type}\n                      transactionHash={listItem.txHash}\n                      startedAt={listItem.startedAt}\n                    />\n                  )}\n                </li>\n              )\n            })}\n          </List>\n        )}\n      </Box>\n    </PageContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,MAAM,iBAAiB;AAEvB,MAAa,uBAAoC;CAE/C,MAAM,YAAY,OAA8B,IAAI;CACpD,MAAM,EAAE,OAAO,cAAc,mBAAmB;CAEhD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,aAAa,WAAW;CAChC,MAAM,mBAAmB,cACjB,SAAS,KAAK,YAAY,QAAQ,OAAO,GAC/C,CAAC,QAAQ,CACX;CACA,MAAM,iBAAiB,uBACrB,aACG,UACC,OAAO,OAAO,MAAM,MAAM,EAAE,MACzB,MACC,GAAG,WAAA,KACH,iBAAiB,SAAS,EAAE,MAAM,WAAW,CACjD,GACF,CAAC,gBAAgB,CACnB,CACF;CAEA,UACE,EAAE,mBAAmB,GACrB,iBAAiB,oBAAC,0BAAD,CAA2B,CAAA,IAAI,IAClD;CAEA,MAAM,EAAE,eAAe,cAAc,EACnC,eAAe,UACjB,CAAC;CAED,MAAM,gBAAgB,MAAM,SAAS;CACrC,MAAM,gBAAgB,aAAa,gBAAgB,iBAAiB;CACpE,MAAM,aAAa,MAAM,SAAS;CAElC,MAAM,aAAa,aAChB,UAAkB;EACjB,IAAI,SAAS,MAAM,QACjB,OAAO,YAAY;EAErB,MAAM,OAAO,MAAM;EACnB,IAAI,KAAK,SAAS,UAChB,OAAO,UAAU,KAAK;EAExB,OAAO,GAAG,KAAK,KAAK,GAAG,KAAK,UAAU,KAAK,eAAe,MAAM;CAClE,GACA,CAAC,KAAK,CACR;CAEA,MAAM,EAAE,iBAAiB,cAAc,mBAAmB,eAAe;EACvE,OAAO,gBAAgB,aAAa;EACpC,UAAU;EACV,YAAY;EACZ,wBAAwB,UAAU;EAClC,eAAe,UAAW,MAAM,QAAQ,SAAS,WAAW,MAAM;EAClE;CACF,CAAC;CAED,MAAM,UAAU,CAAC,MAAM,UAAU,CAAC;CAElC,OACE,oBAAC,eAAD;EAAe,gBAAA;YACb,oBAAC,KAAD;GACE,WAAU;GACV,KAAK;GACL,OAAO,EAAE,QAAQ,WAAW;GAC5B,IAAI;IAAE,UAAU;IAAQ,UAAU;IAAG,YAAY;GAAI;aAEpD,UACC,oBAAC,yBAAD,CAA0B,CAAA,IACxB,aAAa,CAAC,gBAChB,oBAAC,MAAD;IACE,gBAAA;IACA,IAAI;KACF,SAAS;KACT,eAAe;KACf,KAAK;KACL,cAAc;IAChB;cAEC,MAAM,KAAK,EAAE,QAAQ,eAAe,CAAC,EAAE,KAAK,GAAG,UAC9C,oBAAC,yBAAD,CAAsC,GAAR,KAAQ,CACvC;GACG,CAAA,IAEN,oBAAC,MAAD;IACE,OAAO;KAAE,QAAQ,aAAa;KAAG,UAAU;IAAW;IACtD,gBAAA;cAEC,gBAAgB,EAAE,KAAK,SAAS;KAC/B,MAAM,WACJ,KAAK,QAAQ,MAAM,SAAS,MAAM,KAAK,SAAS;KAClD,OACE,oBAAC,MAAD;MAEE,KAAK;MACL,cAAY,KAAK;MACjB,OAAO;OACL,UAAU;OACV,KAAK;OACL,MAAM;OACN,OAAO;OACP,eAAe;OACf,WAAW,cAAc,KAAK,MAAM;OACpC,WAAW;MACb;gBAEC,CAAC,WACA,oBAAC,yBAAD,CAA0B,CAAA,IACxB,SAAS,SAAS,WACpB,oBAAC,uBAAD,EAAuB,SAAS,SAAS,QAAU,CAAA,IAEnD,oBAAC,wBAAD;OACE,OAAO,SAAS,eAAe;OAC/B,MAAM,SAAS;OACf,iBAAiB,SAAS;OAC1B,WAAW,SAAS;MACrB,CAAA;KAED,GAzBG,KAAK,GAyBR;IAER,CAAC;GACG,CAAA;EAEL,CAAA;CACQ,CAAA;AAEnB"}

package/dist/esm/pages/ActivitiesPage/ActivitiesPageMenuButton.js

@@ -0,0 +1,55 @@
+import { useRouteExecutionStore } from "../../stores/routes/RouteExecutionStore.js";
+import { ContextMenu } from "../../components/ContextMenu.js";
+import { Dialog as Dialog$1 } from "../../components/Dialog/Dialog.js";
+import { DialogActions as DialogActions$1, DialogContainer, DialogContent as DialogContent$1, DialogContentText as DialogContentText$1, DialogTitle as DialogTitle$1 } from "../../components/Dialog/Dialog.style.js";
+import { useMemo, useState } from "react";
+import { Button } from "@mui/material";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { useAccount } from "@lifi/wallet-management";
+import DeleteOutline from "@mui/icons-material/DeleteOutlined";
+//#region src/pages/ActivitiesPage/ActivitiesPageMenuButton.tsx
+const ActivitiesPageMenuButton = () => {
+	const { t } = useTranslation();
+	const [dialogOpen, setDialogOpen] = useState(false);
+	const deleteRoutes = useRouteExecutionStore((store) => store.deleteRoutes);
+	const { accounts } = useAccount();
+	const accountAddresses = useMemo(() => accounts.flatMap((account) => account.address ?? []), [accounts]);
+	const handleDialogOpen = () => setDialogOpen(true);
+	const handleDialogClose = () => setDialogOpen(false);
+	const handleRemoveAllFailed = () => {
+		deleteRoutes("failed", accountAddresses);
+		handleDialogClose();
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ContextMenu, {
+		buttonSx: {
+			position: "static",
+			marginRight: -1.5
+		},
+		items: [{
+			icon: /* @__PURE__ */ jsx(DeleteOutline, {}),
+			label: t("button.clearAllFailed"),
+			onClick: handleDialogOpen
+		}]
+	}), /* @__PURE__ */ jsx(Dialog$1, {
+		open: dialogOpen,
+		onClose: handleDialogClose,
+		children: /* @__PURE__ */ jsxs(DialogContainer, { children: [
+			/* @__PURE__ */ jsx(DialogTitle$1, { children: t("warning.title.clearFailedTransactions") }),
+			/* @__PURE__ */ jsx(DialogContent$1, { children: /* @__PURE__ */ jsx(DialogContentText$1, { children: t("warning.message.clearFailedTransactions") }) }),
+			/* @__PURE__ */ jsxs(DialogActions$1, { children: [/* @__PURE__ */ jsx(Button, {
+				onClick: handleDialogClose,
+				children: t("button.cancel")
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "contained",
+				onClick: handleRemoveAllFailed,
+				autoFocus: true,
+				children: t("button.delete")
+			})] })
+		] })
+	})] });
+};
+//#endregion
+export { ActivitiesPageMenuButton };
+
+//# sourceMappingURL=ActivitiesPageMenuButton.js.map