@lifi/widget 4.4.0 → 4.5.0

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.
Files changed (175) hide show
  1. package/dist/esm/App.js.map +1 -1
  2. package/dist/esm/AppDrawer.js.map +1 -1
  3. package/dist/esm/AppLayout.js.map +1 -1
  4. package/dist/esm/AppProvider.js.map +1 -1
  5. package/dist/esm/components/ActionRow/ActionRow.js.map +1 -1
  6. package/dist/esm/components/AmountInput/AmountInput.js.map +1 -1
  7. package/dist/esm/components/AmountInput/AmountInputEndAdornment.js.map +1 -1
  8. package/dist/esm/components/AmountInput/PriceFormHelperText.js.map +1 -1
  9. package/dist/esm/components/AmountInputCard/AmountInputCardPair.js.map +1 -1
  10. package/dist/esm/components/AmountInputCard/BalanceDisplay.js.map +1 -1
  11. package/dist/esm/components/AmountInputCard/FiatValueToggle.js.map +1 -1
  12. package/dist/esm/components/AmountInputCard/PercentageChips.js.map +1 -1
  13. package/dist/esm/components/AmountInputCard/ReceiveAmountCard.js.map +1 -1
  14. package/dist/esm/components/AmountInputCard/SendAmountCard.js.map +1 -1
  15. package/dist/esm/components/AppContainer.js.map +1 -1
  16. package/dist/esm/components/Avatar/AccountAvatar.js.map +1 -1
  17. package/dist/esm/components/Avatar/Avatar.js.map +1 -1
  18. package/dist/esm/components/Avatar/ChainBadgeContent.js.map +1 -1
  19. package/dist/esm/components/Avatar/TokenAvatar.js.map +1 -1
  20. package/dist/esm/components/BaseTransactionButton/BaseTransactionButton.js.map +1 -1
  21. package/dist/esm/components/Card/CardButton.js.map +1 -1
  22. package/dist/esm/components/ChainSelect/ChainSelect.js.map +1 -1
  23. package/dist/esm/components/Chains/AllChainsAvatar.js.map +1 -1
  24. package/dist/esm/components/Chains/ChainList.js.map +1 -1
  25. package/dist/esm/components/Chains/ChainListItem.js.map +1 -1
  26. package/dist/esm/components/Chains/ChainsExpanded.js.map +1 -1
  27. package/dist/esm/components/Chains/PinChainButton.js.map +1 -1
  28. package/dist/esm/components/Chains/SelectChainExpansionContent.js.map +1 -1
  29. package/dist/esm/components/Chains/SelectChainPageContent.js.map +1 -1
  30. package/dist/esm/components/Chains/VirtualizedChainList.js.map +1 -1
  31. package/dist/esm/components/ContextMenu.js.map +1 -1
  32. package/dist/esm/components/ContractComponent/NFT/NFTBase.js.map +1 -1
  33. package/dist/esm/components/ExecutionStatusCard/ExecutionChecklist.js.map +1 -1
  34. package/dist/esm/components/ExecutionStatusCard/ExecutionStatusCard.js.map +1 -1
  35. package/dist/esm/components/ExecutionStatusCard/StaggeredRevealTypography.js.map +1 -1
  36. package/dist/esm/components/ExecutionStatusCard/StatusIcon.js.map +1 -1
  37. package/dist/esm/components/Expansion/Expansion.js.map +1 -1
  38. package/dist/esm/components/Expansion/ExpansionTransition.js.map +1 -1
  39. package/dist/esm/components/FeeBreakdownTooltip.js.map +1 -1
  40. package/dist/esm/components/Header/ActivitiesButton.js.map +1 -1
  41. package/dist/esm/components/Header/BackButton.js.map +1 -1
  42. package/dist/esm/components/Header/CloseDrawerButton.js.map +1 -1
  43. package/dist/esm/components/Header/DisconnectIconButton.js.map +1 -1
  44. package/dist/esm/components/Header/HeaderTabs.js.map +1 -1
  45. package/dist/esm/components/Header/NavigationHeader.js.map +1 -1
  46. package/dist/esm/components/Header/SettingsButton.js.map +1 -1
  47. package/dist/esm/components/Header/WalletHeader.js.map +1 -1
  48. package/dist/esm/components/Header/WalletMenu.js.map +1 -1
  49. package/dist/esm/components/IconCircle/IconCircle.js.map +1 -1
  50. package/dist/esm/components/LimitOrderSettings/LimitOrderSettings.js.map +1 -1
  51. package/dist/esm/components/LimitPriceCard/LimitPriceCard.js.map +1 -1
  52. package/dist/esm/components/LimitPriceCard/LimitPricePresets.js.map +1 -1
  53. package/dist/esm/components/Messages/AccountDeployedMessage.js.map +1 -1
  54. package/dist/esm/components/Messages/AccountNotDeployedMessage.js.map +1 -1
  55. package/dist/esm/components/Messages/AlertMessage.js.map +1 -1
  56. package/dist/esm/components/Messages/FundsSufficiencyMessage.js.map +1 -1
  57. package/dist/esm/components/Messages/GasRefuelMessage.js.map +1 -1
  58. package/dist/esm/components/Messages/GasSufficiencyMessage.js.map +1 -1
  59. package/dist/esm/components/Messages/MinFromAmountUSDMessage.js.map +1 -1
  60. package/dist/esm/components/Messages/MissingRouteRequiredAccountMessage.js.map +1 -1
  61. package/dist/esm/components/Messages/WarningMessages.js.map +1 -1
  62. package/dist/esm/components/NotFound.js.map +1 -1
  63. package/dist/esm/components/PoweredBy/PoweredBy.js.map +1 -1
  64. package/dist/esm/components/ProgressToNextUpdate.js.map +1 -1
  65. package/dist/esm/components/ReverseTokensButton/ReverseTokensButton.js.map +1 -1
  66. package/dist/esm/components/RouteCard/RouteCard.js.map +1 -1
  67. package/dist/esm/components/RouteCard/RouteCardEssentials.js.map +1 -1
  68. package/dist/esm/components/RouteCard/RouteCardSkeleton.js.map +1 -1
  69. package/dist/esm/components/RouteCard/RouteDetails.js.map +1 -1
  70. package/dist/esm/components/RouteCard/RouteNotFoundCard.js.map +1 -1
  71. package/dist/esm/components/RouteCard/RouteProviderCard.js.map +1 -1
  72. package/dist/esm/components/RouteCard/RouteToken.js.map +1 -1
  73. package/dist/esm/components/RouteCard/RouteTokens.js.map +1 -1
  74. package/dist/esm/components/Routes/LimitOrderRoutes.js.map +1 -1
  75. package/dist/esm/components/Routes/Routes.js.map +1 -1
  76. package/dist/esm/components/Routes/RoutesContent.js.map +1 -1
  77. package/dist/esm/components/Routes/RoutesExpanded.js.map +1 -1
  78. package/dist/esm/components/Search/SearchInput.js.map +1 -1
  79. package/dist/esm/components/SelectChainAndToken.js.map +1 -1
  80. package/dist/esm/components/SelectTokenButton/SelectTokenButton.js.map +1 -1
  81. package/dist/esm/components/SendToWallet/SendToWalletButton.js.map +1 -1
  82. package/dist/esm/components/SendToWallet/SendToWalletExpandButton.js.map +1 -1
  83. package/dist/esm/components/SettingsPanel/SettingsPanel.js.map +1 -1
  84. package/dist/esm/components/Skeleton/WidgetSkeleton.js.map +1 -1
  85. package/dist/esm/components/Step/StepActions.js.map +1 -1
  86. package/dist/esm/components/StepActions/SentToWalletRow.js.map +1 -1
  87. package/dist/esm/components/StepActions/StepActionRow.js.map +1 -1
  88. package/dist/esm/components/StepActions/StepActionsList.js.map +1 -1
  89. package/dist/esm/components/SwapButton/SwapButton.js.map +1 -1
  90. package/dist/esm/components/TextFitter/TextFitter.js.map +1 -1
  91. package/dist/esm/components/Timer/StepStatusTimer.js.map +1 -1
  92. package/dist/esm/components/Token/Token.js.map +1 -1
  93. package/dist/esm/components/TokenList/PinTokenButton.js.map +1 -1
  94. package/dist/esm/components/TokenList/TokenDetailsSheet.js.map +1 -1
  95. package/dist/esm/components/TokenList/TokenDetailsSheetContent.js.map +1 -1
  96. package/dist/esm/components/TokenList/TokenList.js.map +1 -1
  97. package/dist/esm/components/TokenList/TokenListItem.js.map +1 -1
  98. package/dist/esm/components/TokenList/VirtualizedTokenList.js.map +1 -1
  99. package/dist/esm/components/TokenPillButton/TokenPillButton.js.map +1 -1
  100. package/dist/esm/components/TokenRate/TokenRate.js.map +1 -1
  101. package/dist/esm/components/Tools/ToolItem.js.map +1 -1
  102. package/dist/esm/components/Tools/Tools.js.map +1 -1
  103. package/dist/esm/components/TransactionCard/ActiveTransactionCard.js.map +1 -1
  104. package/dist/esm/components/TransactionCard/TransactionCard.js.map +1 -1
  105. package/dist/esm/components/TransactionCard/TransactionCardSkeleton.js.map +1 -1
  106. package/dist/esm/config/version.d.ts +1 -1
  107. package/dist/esm/config/version.js +1 -1
  108. package/dist/esm/config/version.js.map +1 -1
  109. package/dist/esm/hooks/useAccountsBalancesData.js +1 -14
  110. package/dist/esm/hooks/useAccountsBalancesData.js.map +1 -1
  111. package/dist/esm/hooks/useToAddressAutoPopulate.js.map +1 -1
  112. package/dist/esm/hooks/useTokenBalances.js.map +1 -1
  113. package/dist/esm/hooks/useTokenBalancesQueries.js +5 -3
  114. package/dist/esm/hooks/useTokenBalancesQueries.js.map +1 -1
  115. package/dist/esm/hooks/useTokens.js.map +1 -1
  116. package/dist/esm/pages/ActivitiesPage/ActivitiesPage.js.map +1 -1
  117. package/dist/esm/pages/ActivitiesPage/ActivitiesPageMenuButton.js.map +1 -1
  118. package/dist/esm/pages/LanguagesPage.js.map +1 -1
  119. package/dist/esm/pages/MainPage/LimitPageContent.js.map +1 -1
  120. package/dist/esm/pages/MainPage/MainPage.js.map +1 -1
  121. package/dist/esm/pages/MainPage/MainPageActions.js.map +1 -1
  122. package/dist/esm/pages/RoutePriorityPage.js.map +1 -1
  123. package/dist/esm/pages/RoutesPage/RoutesPage.js.map +1 -1
  124. package/dist/esm/pages/SelectEnabledToolsPage.js.map +1 -1
  125. package/dist/esm/pages/SelectTokenPage/SelectTokenPage.js.map +1 -1
  126. package/dist/esm/pages/SendToWallet/BookmarkAddressSheet.js.map +1 -1
  127. package/dist/esm/pages/SendToWallet/BookmarksPage.js.map +1 -1
  128. package/dist/esm/pages/SendToWallet/ConfirmAddressSheet.js.map +1 -1
  129. package/dist/esm/pages/SendToWallet/ConnectedWalletsPage.js.map +1 -1
  130. package/dist/esm/pages/SendToWallet/RecentWalletsPage.js.map +1 -1
  131. package/dist/esm/pages/SendToWallet/SendToConfiguredWalletPage.js.map +1 -1
  132. package/dist/esm/pages/SendToWallet/SendToWalletPage.js.map +1 -1
  133. package/dist/esm/pages/SettingsPage/BridgeAndExchangeSettings.js.map +1 -1
  134. package/dist/esm/pages/SettingsPage/GasPriceSettings.js.map +1 -1
  135. package/dist/esm/pages/SettingsPage/LanguageSetting.js.map +1 -1
  136. package/dist/esm/pages/SettingsPage/ResetSettingsButton.js.map +1 -1
  137. package/dist/esm/pages/SettingsPage/RoutePrioritySettings.js.map +1 -1
  138. package/dist/esm/pages/SettingsPage/SettingsCard/BadgedValue.js.map +1 -1
  139. package/dist/esm/pages/SettingsPage/SettingsCard/SettingCardExpandable.js.map +1 -1
  140. package/dist/esm/pages/SettingsPage/SettingsPage.js.map +1 -1
  141. package/dist/esm/pages/SettingsPage/SlippageSettings/SlippagePage.js.map +1 -1
  142. package/dist/esm/pages/SettingsPage/SlippageSettings/SlippageSettings.js.map +1 -1
  143. package/dist/esm/pages/SettingsPage/SmallBalanceFilterSettings.js.map +1 -1
  144. package/dist/esm/pages/SettingsPage/ThemeSettings.js.map +1 -1
  145. package/dist/esm/pages/TransactionDetailsPage/ContactSupportButton.js.map +1 -1
  146. package/dist/esm/pages/TransactionDetailsPage/ReceiptsCard.js.map +1 -1
  147. package/dist/esm/pages/TransactionDetailsPage/TransactionDetailsPage.js.map +1 -1
  148. package/dist/esm/pages/TransactionDetailsPage/TransactionDetailsSkeleton.js.map +1 -1
  149. package/dist/esm/pages/TransactionDetailsPage/TransferIdCard.js.map +1 -1
  150. package/dist/esm/pages/TransactionPage/ConfirmToAddressSheet.js.map +1 -1
  151. package/dist/esm/pages/TransactionPage/ExchangeRateBottomSheet.js.map +1 -1
  152. package/dist/esm/pages/TransactionPage/ExecutionDoneCard.js.map +1 -1
  153. package/dist/esm/pages/TransactionPage/TokenValueBottomSheet.js.map +1 -1
  154. package/dist/esm/pages/TransactionPage/TransactionDoneButtons.js.map +1 -1
  155. package/dist/esm/pages/TransactionPage/TransactionExecutionContent.js.map +1 -1
  156. package/dist/esm/pages/TransactionPage/TransactionFailedButtons.js.map +1 -1
  157. package/dist/esm/pages/TransactionPage/TransactionPage.js.map +1 -1
  158. package/dist/esm/pages/TransactionPage/TransactionReview.js.map +1 -1
  159. package/dist/esm/providers/I18nProvider/I18nProvider.js.map +1 -1
  160. package/dist/esm/providers/I18nProvider/types.d.ts.map +1 -1
  161. package/dist/esm/providers/WalletProvider/WalletProvider.js.map +1 -1
  162. package/dist/esm/stores/StoreProvider.js.map +1 -1
  163. package/dist/esm/stores/form/FormStore.js.map +1 -1
  164. package/dist/esm/stores/form/FormUpdater.js.map +1 -1
  165. package/dist/esm/stores/navigationTabs/useNavigationTabsStore.js.map +1 -1
  166. package/dist/esm/utils/tokenList.js +1 -4
  167. package/dist/esm/utils/tokenList.js.map +1 -1
  168. package/package.json +4 -4
  169. package/src/config/version.ts +1 -1
  170. package/src/hooks/useAccountsBalancesData.ts +4 -31
  171. package/src/hooks/useTokenBalancesQueries.ts +12 -4
  172. package/src/utils/tokenList.ts +1 -9
  173. package/dist/esm/hooks/useFilteredByTokenBalances.js +0 -74
  174. package/dist/esm/hooks/useFilteredByTokenBalances.js.map +0 -1
  175. package/src/hooks/useFilteredByTokenBalances.ts +0 -145
@@ -1 +1 @@
1
- {"version":3,"file":"WalletMenu.js","names":[],"sources":["../../../../src/components/Header/WalletMenu.tsx"],"sourcesContent":["import {\n getConnectorIcon,\n useAccount,\n useWalletMenu,\n} from '@lifi/wallet-management'\nimport ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'\nimport OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'\nimport PowerSettingsNewRounded from '@mui/icons-material/PowerSettingsNewRounded'\nimport { Avatar, Badge, Box, Button, IconButton, MenuItem } from '@mui/material'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useExplorer } from '../../hooks/useExplorer.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { AvatarMasked } from '../Avatar/Avatar.style.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport { DisconnectIconButton } from './DisconnectIconButton.js'\n\nexport const WalletMenu = ({\n onClose,\n}: {\n onClose: () => void\n}): JSX.Element => {\n const { t } = useTranslation()\n const { accounts } = useAccount()\n const { getChainById } = useAvailableChains()\n const { openWalletMenu } = useWalletMenu()\n const connect = async () => {\n openWalletMenu()\n onClose()\n }\n const { getAddressLink } = useExplorer()\n\n return (\n <>\n <Box\n sx={{\n display: 'flex',\n flexDirection: 'column',\n }}\n >\n {accounts.map((account) => {\n const chain = getChainById(account.chainId)\n const walletAddress = shortenAddress(account.address)\n const handleCopyAddress = async () => {\n await navigator.clipboard.writeText(account.address ?? '')\n onClose()\n }\n\n return (\n <MenuItem key={account.address} disableTouchRipple>\n <Box\n sx={{\n flex: 1,\n display: 'flex',\n alignItems: 'center',\n }}\n >\n {chain?.logoURI ? (\n <Badge\n overlap=\"circular\"\n anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n badgeContent={\n <SmallAvatar src={chain?.logoURI} alt={chain?.name}>\n {chain?.name[0]}\n </SmallAvatar>\n }\n sx={{ marginRight: 1.5 }}\n >\n <AvatarMasked\n src={getConnectorIcon(account.connector)}\n alt={account.connector?.name}\n >\n {account.connector?.name[0]}\n </AvatarMasked>\n </Badge>\n ) : (\n <Avatar\n src={getConnectorIcon(account.connector)}\n alt={account.connector?.name}\n sx={{\n marginRight: 1.5,\n }}\n >\n {account.connector?.name[0]}\n </Avatar>\n )}\n {walletAddress}\n </Box>\n <Box\n sx={{\n ml: 2,\n }}\n >\n <IconButton size=\"medium\" onClick={handleCopyAddress}>\n <ContentCopyRounded />\n </IconButton>\n <IconButton\n size=\"medium\"\n component=\"a\"\n onClick={onClose}\n href={\n account.address\n ? getAddressLink(account.address, chain)\n : undefined\n }\n target=\"_blank\"\n >\n <OpenInNewRounded />\n </IconButton>\n <DisconnectIconButton account={account} />\n </Box>\n </MenuItem>\n )\n })}\n </Box>\n <Button\n onClick={connect}\n fullWidth\n startIcon={<PowerSettingsNewRounded />}\n sx={{\n marginTop: 1,\n }}\n >\n {t('button.connectAnotherWallet')}\n </Button>\n </>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;AAkBA,MAAa,cAAc,EACzB,cAGiB;CACjB,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,aAAa,WAAW;CAChC,MAAM,EAAE,iBAAiB,mBAAmB;CAC5C,MAAM,EAAE,mBAAmB,cAAc;CACzC,MAAM,UAAU,YAAY;EAC1B,eAAe;EACf,QAAQ;CACV;CACA,MAAM,EAAE,mBAAmB,YAAY;CAEvC,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,KAAD;EACE,IAAI;GACF,SAAS;GACT,eAAe;EACjB;YAEC,SAAS,KAAK,YAAY;GACzB,MAAM,QAAQ,aAAa,QAAQ,OAAO;GAC1C,MAAM,gBAAgB,eAAe,QAAQ,OAAO;GACpD,MAAM,oBAAoB,YAAY;IACpC,MAAM,UAAU,UAAU,UAAU,QAAQ,WAAW,EAAE;IACzD,QAAQ;GACV;GAEA,OACE,qBAAC,UAAD;IAAgC,oBAAA;cAAhC,CACE,qBAAC,KAAD;KACE,IAAI;MACF,MAAM;MACN,SAAS;MACT,YAAY;KACd;eALF,CAOG,OAAO,UACN,oBAAC,OAAD;MACE,SAAQ;MACR,cAAc;OAAE,UAAU;OAAU,YAAY;MAAQ;MACxD,cACE,oBAAC,aAAD;OAAa,KAAK,OAAO;OAAS,KAAK,OAAO;iBAC3C,OAAO,KAAK;MACF,CAAA;MAEf,IAAI,EAAE,aAAa,IAAI;gBAEvB,oBAAC,cAAD;OACE,KAAK,iBAAiB,QAAQ,SAAS;OACvC,KAAK,QAAQ,WAAW;iBAEvB,QAAQ,WAAW,KAAK;MACb,CAAA;KACT,CAAA,IAEP,oBAAC,QAAD;MACE,KAAK,iBAAiB,QAAQ,SAAS;MACvC,KAAK,QAAQ,WAAW;MACxB,IAAI,EACF,aAAa,IACf;gBAEC,QAAQ,WAAW,KAAK;KACnB,CAAA,GAET,aACE;QACL,qBAAC,KAAD;KACE,IAAI,EACF,IAAI,EACN;eAHF;MAKE,oBAAC,YAAD;OAAY,MAAK;OAAS,SAAS;iBACjC,oBAAC,oBAAD,CAAqB,CAAA;MACX,CAAA;MACZ,oBAAC,YAAD;OACE,MAAK;OACL,WAAU;OACV,SAAS;OACT,MACE,QAAQ,UACJ,eAAe,QAAQ,SAAS,KAAK,IACrC,KAAA;OAEN,QAAO;iBAEP,oBAAC,kBAAD,CAAmB,CAAA;MACT,CAAA;MACZ,oBAAC,sBAAD,EAA+B,QAAU,CAAA;KACtC;MACG;MA9DK,QAAQ,OA8Db;EAEd,CAAC;CACE,CAAA,GACL,oBAAC,QAAD;EACE,SAAS;EACT,WAAA;EACA,WAAW,oBAAC,yBAAD,CAA0B,CAAA;EACrC,IAAI,EACF,WAAW,EACb;YAEC,EAAE,6BAA6B;CAC1B,CAAA,CACR,EAAA,CAAA;AAEN"}
1
+ {"version":3,"file":"WalletMenu.js","names":[],"sources":["../../../../src/components/Header/WalletMenu.tsx"],"sourcesContent":["import {\n getConnectorIcon,\n useAccount,\n useWalletMenu,\n} from '@lifi/wallet-management'\nimport ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'\nimport OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'\nimport PowerSettingsNewRounded from '@mui/icons-material/PowerSettingsNewRounded'\nimport { Avatar, Badge, Box, Button, IconButton, MenuItem } from '@mui/material'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useExplorer } from '../../hooks/useExplorer.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { AvatarMasked } from '../Avatar/Avatar.style.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport { DisconnectIconButton } from './DisconnectIconButton.js'\n\nexport const WalletMenu = ({\n onClose,\n}: {\n onClose: () => void\n}): JSX.Element => {\n const { t } = useTranslation()\n const { accounts } = useAccount()\n const { getChainById } = useAvailableChains()\n const { openWalletMenu } = useWalletMenu()\n const connect = async () => {\n openWalletMenu()\n onClose()\n }\n const { getAddressLink } = useExplorer()\n\n return (\n <>\n <Box\n sx={{\n display: 'flex',\n flexDirection: 'column',\n }}\n >\n {accounts.map((account) => {\n const chain = getChainById(account.chainId)\n const walletAddress = shortenAddress(account.address)\n const handleCopyAddress = async () => {\n await navigator.clipboard.writeText(account.address ?? '')\n onClose()\n }\n\n return (\n <MenuItem key={account.address} disableTouchRipple>\n <Box\n sx={{\n flex: 1,\n display: 'flex',\n alignItems: 'center',\n }}\n >\n {chain?.logoURI ? (\n <Badge\n overlap=\"circular\"\n anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n badgeContent={\n <SmallAvatar src={chain?.logoURI} alt={chain?.name}>\n {chain?.name[0]}\n </SmallAvatar>\n }\n sx={{ marginRight: 1.5 }}\n >\n <AvatarMasked\n src={getConnectorIcon(account.connector)}\n alt={account.connector?.name}\n >\n {account.connector?.name[0]}\n </AvatarMasked>\n </Badge>\n ) : (\n <Avatar\n src={getConnectorIcon(account.connector)}\n alt={account.connector?.name}\n sx={{\n marginRight: 1.5,\n }}\n >\n {account.connector?.name[0]}\n </Avatar>\n )}\n {walletAddress}\n </Box>\n <Box\n sx={{\n ml: 2,\n }}\n >\n <IconButton size=\"medium\" onClick={handleCopyAddress}>\n <ContentCopyRounded />\n </IconButton>\n <IconButton\n size=\"medium\"\n component=\"a\"\n onClick={onClose}\n href={\n account.address\n ? getAddressLink(account.address, chain)\n : undefined\n }\n target=\"_blank\"\n >\n <OpenInNewRounded />\n </IconButton>\n <DisconnectIconButton account={account} />\n </Box>\n </MenuItem>\n )\n })}\n </Box>\n <Button\n onClick={connect}\n fullWidth\n startIcon={<PowerSettingsNewRounded />}\n sx={{\n marginTop: 1,\n }}\n >\n {t('button.connectAnotherWallet')}\n </Button>\n </>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;AAkBA,MAAa,cAAc,EACzB,cAGiB;CACjB,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,aAAa,WAAW;CAChC,MAAM,EAAE,iBAAiB,mBAAmB;CAC5C,MAAM,EAAE,mBAAmB,cAAc;CACzC,MAAM,UAAU,YAAY;EAC1B,eAAe;EACf,QAAQ;CACV;CACA,MAAM,EAAE,mBAAmB,YAAY;CAEvC,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,KAAD;EACE,IAAI;GACF,SAAS;GACT,eAAe;EACjB;EAEC,UAAA,SAAS,KAAK,YAAY;GACzB,MAAM,QAAQ,aAAa,QAAQ,OAAO;GAC1C,MAAM,gBAAgB,eAAe,QAAQ,OAAO;GACpD,MAAM,oBAAoB,YAAY;IACpC,MAAM,UAAU,UAAU,UAAU,QAAQ,WAAW,EAAE;IACzD,QAAQ;GACV;GAEA,OACE,qBAAC,UAAD;IAAgC,oBAAA;IAAhC,UAAA,CACE,qBAAC,KAAD;KACE,IAAI;MACF,MAAM;MACN,SAAS;MACT,YAAY;KACd;KALF,UAAA,CAOG,OAAO,UACN,oBAAC,OAAD;MACE,SAAQ;MACR,cAAc;OAAE,UAAU;OAAU,YAAY;MAAQ;MACxD,cACE,oBAAC,aAAD;OAAa,KAAK,OAAO;OAAS,KAAK,OAAO;OAC3C,UAAA,OAAO,KAAK;MACF,CAAA;MAEf,IAAI,EAAE,aAAa,IAAI;MAEvB,UAAA,oBAAC,cAAD;OACE,KAAK,iBAAiB,QAAQ,SAAS;OACvC,KAAK,QAAQ,WAAW;OAEvB,UAAA,QAAQ,WAAW,KAAK;MACb,CAAA;KACT,CAAA,IAEP,oBAAC,QAAD;MACE,KAAK,iBAAiB,QAAQ,SAAS;MACvC,KAAK,QAAQ,WAAW;MACxB,IAAI,EACF,aAAa,IACf;MAEC,UAAA,QAAQ,WAAW,KAAK;KACnB,CAAA,GAET,aACE;IACL,CAAA,GAAA,qBAAC,KAAD;KACE,IAAI,EACF,IAAI,EACN;KAHF,UAAA;MAKE,oBAAC,YAAD;OAAY,MAAK;OAAS,SAAS;OACjC,UAAA,oBAAC,oBAAD,CAAqB,CAAA;MACX,CAAA;MACZ,oBAAC,YAAD;OACE,MAAK;OACL,WAAU;OACV,SAAS;OACT,MACE,QAAQ,UACJ,eAAe,QAAQ,SAAS,KAAK,IACrC,KAAA;OAEN,QAAO;OAEP,UAAA,oBAAC,kBAAD,CAAmB,CAAA;MACT,CAAA;MACZ,oBAAC,sBAAD,EAA+B,QAAU,CAAA;KACtC;IACG,CAAA,CAAA;GA9DK,GAAA,QAAQ,OA8Db;EAEd,CAAC;CACE,CAAA,GACL,oBAAC,QAAD;EACE,SAAS;EACT,WAAA;EACA,WAAW,oBAAC,yBAAD,CAA0B,CAAA;EACrC,IAAI,EACF,WAAW,EACb;EAEC,UAAA,EAAE,6BAA6B;CAC1B,CAAA,CACR,EAAA,CAAA;AAEN"}
@@ -1 +1 @@
1
- {"version":3,"file":"IconCircle.js","names":[],"sources":["../../../../src/components/IconCircle/IconCircle.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport { useTheme } from '@mui/material'\nimport {\n getStatusColor,\n IconCircleRoot,\n iconCircleSize,\n} from './IconCircle.style.js'\nimport { type StatusIcon, statusIcons } from './statusIcons.js'\n\ninterface IconCircleProps extends Omit<BoxProps, 'color'> {\n status: StatusIcon\n size?: number\n}\n\nexport const IconCircle: React.FC<IconCircleProps> = ({\n status,\n size = iconCircleSize,\n ...rest\n}) => {\n const theme = useTheme()\n const colorConfig = getStatusColor(status, theme)\n const Icon = statusIcons[status]\n\n return (\n <IconCircleRoot colorConfig={colorConfig} circleSize={size} {...rest}>\n <Icon />\n </IconCircleRoot>\n )\n}\n"],"mappings":";;;;;AAcA,MAAa,cAAyC,EACpD,QACA,OAAA,IACA,GAAG,WACC;CAEJ,MAAM,cAAc,eAAe,QADrB,SACiC,CAAC;CAChD,MAAM,OAAO,YAAY;CAEzB,OACE,oBAAC,gBAAD;EAA6B;EAAa,YAAY;EAAM,GAAI;YAC9D,oBAAC,MAAD,CAAO,CAAA;CACO,CAAA;AAEpB"}
1
+ {"version":3,"file":"IconCircle.js","names":[],"sources":["../../../../src/components/IconCircle/IconCircle.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport { useTheme } from '@mui/material'\nimport {\n getStatusColor,\n IconCircleRoot,\n iconCircleSize,\n} from './IconCircle.style.js'\nimport { type StatusIcon, statusIcons } from './statusIcons.js'\n\ninterface IconCircleProps extends Omit<BoxProps, 'color'> {\n status: StatusIcon\n size?: number\n}\n\nexport const IconCircle: React.FC<IconCircleProps> = ({\n status,\n size = iconCircleSize,\n ...rest\n}) => {\n const theme = useTheme()\n const colorConfig = getStatusColor(status, theme)\n const Icon = statusIcons[status]\n\n return (\n <IconCircleRoot colorConfig={colorConfig} circleSize={size} {...rest}>\n <Icon />\n </IconCircleRoot>\n )\n}\n"],"mappings":";;;;;AAcA,MAAa,cAAyC,EACpD,QACA,OAAA,IACA,GAAG,WACC;CAEJ,MAAM,cAAc,eAAe,QADrB,SACiC,CAAC;CAChD,MAAM,OAAO,YAAY;CAEzB,OACE,oBAAC,gBAAD;EAA6B;EAAa,YAAY;EAAM,GAAI;EAC9D,UAAA,oBAAC,MAAD,CAAO,CAAA;CACO,CAAA;AAEpB"}
@@ -1 +1 @@
1
- {"version":3,"file":"LimitOrderSettings.js","names":["Container","Card","Switch"],"sources":["../../../../src/components/LimitOrderSettings/LimitOrderSettings.tsx"],"sourcesContent":["import Check from '@mui/icons-material/Check'\nimport KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'\nimport type { BoxProps } from '@mui/material'\nimport { Menu, MenuItem } from '@mui/material'\nimport { type ChangeEvent, type JSX, type MouseEvent, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { formatDuration } from '../../utils/format.js'\nimport { Card } from '../Card/Card.js'\nimport { Switch } from '../Switch.js'\nimport {\n Container,\n ExpiryValue,\n SettingItemButton,\n SettingItemTitle,\n SettingItemValue,\n SettingsRow,\n ToggleLabel,\n} from './LimitOrderSettings.style.js'\n\n/** Selectable order-validity durations, in seconds. */\nconst DURATIONS = [3600, 86400, 604800, 2592000, 31536000]\n\nexport const LimitOrderSettings: React.FC<BoxProps> = (props): JSX.Element => {\n const { t, i18n } = useTranslation()\n const [validUntil, partiallyFillable] = useFieldValues(\n 'validUntil',\n 'partiallyFillable'\n )\n const { setFieldValue } = useFieldActions()\n const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)\n const open = Boolean(anchorEl)\n\n const handleOpen = (event: MouseEvent<HTMLElement>): void => {\n setAnchorEl(event.currentTarget)\n }\n\n const handleClose = (): void => {\n setAnchorEl(null)\n }\n\n const handleSelect = (duration: number): void => {\n setFieldValue('validUntil', duration)\n setAnchorEl(null)\n }\n\n const handlePartiallyFillableChange = (\n event: ChangeEvent<HTMLInputElement>\n ): void => {\n setFieldValue('partiallyFillable', event.target.checked)\n }\n\n return (\n <Container {...props}>\n <Card>\n <SettingItemButton\n onClick={handleOpen}\n disableRipple\n aria-haspopup=\"menu\"\n aria-expanded={open}\n >\n <SettingItemTitle>{t('limitOrder.expiresIn')}</SettingItemTitle>\n <ExpiryValue>\n <SettingItemValue>\n {formatDuration(validUntil, i18n.language, 'long')}\n </SettingItemValue>\n <KeyboardArrowDownIcon\n sx={{ fontSize: 20, height: '18px', marginTop: '2px' }}\n />\n </ExpiryValue>\n </SettingItemButton>\n </Card>\n <Menu\n anchorEl={anchorEl}\n open={open}\n onClose={handleClose}\n anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n transformOrigin={{ vertical: 'top', horizontal: 'right' }}\n slotProps={{\n paper: {\n sx: (theme) => ({\n border: `1px solid ${theme.vars.palette.grey[300]}`,\n boxShadow: 'none',\n ...theme.applyStyles('dark', {\n borderColor: theme.vars.palette.grey[800],\n }),\n }),\n },\n }}\n >\n {DURATIONS.map((duration) => (\n <MenuItem\n key={duration}\n onClick={() => handleSelect(duration)}\n sx={(theme) => ({\n justifyContent: 'space-between',\n gap: 4,\n fontSize: 14,\n fontWeight: 700,\n lineHeight: '18px',\n color: theme.vars.palette.text.primary,\n })}\n >\n {formatDuration(duration, i18n.language, 'long')}\n {duration === validUntil ? (\n <Check color=\"primary\" fontSize=\"small\" />\n ) : null}\n </MenuItem>\n ))}\n </Menu>\n <Card>\n <SettingsRow>\n <ToggleLabel>{t('limitOrder.partiallyFillable')}</ToggleLabel>\n <Switch\n checked={partiallyFillable}\n onChange={handlePartiallyFillableChange}\n aria-label={t('limitOrder.partiallyFillable')}\n />\n </SettingsRow>\n </Card>\n </Container>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;AAsBA,MAAM,YAAY;CAAC;CAAM;CAAO;CAAQ;CAAS;AAAQ;AAEzD,MAAa,sBAA0C,UAAuB;CAC5E,MAAM,EAAE,GAAG,SAAS,eAAe;CACnC,MAAM,CAAC,YAAY,qBAAqB,eACtC,cACA,mBACF;CACA,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,CAAC,UAAU,eAAe,SAA6B,IAAI;CACjE,MAAM,OAAO,QAAQ,QAAQ;CAE7B,MAAM,cAAc,UAAyC;EAC3D,YAAY,MAAM,aAAa;CACjC;CAEA,MAAM,oBAA0B;EAC9B,YAAY,IAAI;CAClB;CAEA,MAAM,gBAAgB,aAA2B;EAC/C,cAAc,cAAc,QAAQ;EACpC,YAAY,IAAI;CAClB;CAEA,MAAM,iCACJ,UACS;EACT,cAAc,qBAAqB,MAAM,OAAO,OAAO;CACzD;CAEA,OACE,qBAACA,aAAD;EAAW,GAAI;YAAf;GACE,oBAACC,QAAD,EAAA,UACE,qBAAC,mBAAD;IACE,SAAS;IACT,eAAA;IACA,iBAAc;IACd,iBAAe;cAJjB,CAME,oBAAC,kBAAD,EAAA,UAAmB,EAAE,sBAAsB,EAAoB,CAAA,GAC/D,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,kBAAD,EAAA,UACG,eAAe,YAAY,KAAK,UAAU,MAAM,EACjC,CAAA,GAClB,oBAAC,uBAAD,EACE,IAAI;KAAE,UAAU;KAAI,QAAQ;KAAQ,WAAW;IAAM,EACtD,CAAA,CACU,EAAA,CAAA,CACI;MACf,CAAA;GACN,oBAAC,MAAD;IACY;IACJ;IACN,SAAS;IACT,cAAc;KAAE,UAAU;KAAU,YAAY;IAAQ;IACxD,iBAAiB;KAAE,UAAU;KAAO,YAAY;IAAQ;IACxD,WAAW,EACT,OAAO,EACL,KAAK,WAAW;KACd,QAAQ,aAAa,MAAM,KAAK,QAAQ,KAAK;KAC7C,WAAW;KACX,GAAG,MAAM,YAAY,QAAQ,EAC3B,aAAa,MAAM,KAAK,QAAQ,KAAK,KACvC,CAAC;IACH,GACF,EACF;cAEC,UAAU,KAAK,aACd,qBAAC,UAAD;KAEE,eAAe,aAAa,QAAQ;KACpC,KAAK,WAAW;MACd,gBAAgB;MAChB,KAAK;MACL,UAAU;MACV,YAAY;MACZ,YAAY;MACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;KACjC;eAVF,CAYG,eAAe,UAAU,KAAK,UAAU,MAAM,GAC9C,aAAa,aACZ,oBAAC,OAAD;MAAO,OAAM;MAAU,UAAS;KAAS,CAAA,IACvC,IACI;OAfH,QAeG,CACX;GACG,CAAA;GACN,oBAACA,QAAD,EAAA,UACE,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,EAAE,8BAA8B,EAAe,CAAA,GAC7D,oBAACC,UAAD;IACE,SAAS;IACT,UAAU;IACV,cAAY,EAAE,8BAA8B;GAC7C,CAAA,CACU,EAAA,CAAA,EACT,CAAA;EACG;;AAEf"}
1
+ {"version":3,"file":"LimitOrderSettings.js","names":["Container","Card","Switch"],"sources":["../../../../src/components/LimitOrderSettings/LimitOrderSettings.tsx"],"sourcesContent":["import Check from '@mui/icons-material/Check'\nimport KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'\nimport type { BoxProps } from '@mui/material'\nimport { Menu, MenuItem } from '@mui/material'\nimport { type ChangeEvent, type JSX, type MouseEvent, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { formatDuration } from '../../utils/format.js'\nimport { Card } from '../Card/Card.js'\nimport { Switch } from '../Switch.js'\nimport {\n Container,\n ExpiryValue,\n SettingItemButton,\n SettingItemTitle,\n SettingItemValue,\n SettingsRow,\n ToggleLabel,\n} from './LimitOrderSettings.style.js'\n\n/** Selectable order-validity durations, in seconds. */\nconst DURATIONS = [3600, 86400, 604800, 2592000, 31536000]\n\nexport const LimitOrderSettings: React.FC<BoxProps> = (props): JSX.Element => {\n const { t, i18n } = useTranslation()\n const [validUntil, partiallyFillable] = useFieldValues(\n 'validUntil',\n 'partiallyFillable'\n )\n const { setFieldValue } = useFieldActions()\n const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)\n const open = Boolean(anchorEl)\n\n const handleOpen = (event: MouseEvent<HTMLElement>): void => {\n setAnchorEl(event.currentTarget)\n }\n\n const handleClose = (): void => {\n setAnchorEl(null)\n }\n\n const handleSelect = (duration: number): void => {\n setFieldValue('validUntil', duration)\n setAnchorEl(null)\n }\n\n const handlePartiallyFillableChange = (\n event: ChangeEvent<HTMLInputElement>\n ): void => {\n setFieldValue('partiallyFillable', event.target.checked)\n }\n\n return (\n <Container {...props}>\n <Card>\n <SettingItemButton\n onClick={handleOpen}\n disableRipple\n aria-haspopup=\"menu\"\n aria-expanded={open}\n >\n <SettingItemTitle>{t('limitOrder.expiresIn')}</SettingItemTitle>\n <ExpiryValue>\n <SettingItemValue>\n {formatDuration(validUntil, i18n.language, 'long')}\n </SettingItemValue>\n <KeyboardArrowDownIcon\n sx={{ fontSize: 20, height: '18px', marginTop: '2px' }}\n />\n </ExpiryValue>\n </SettingItemButton>\n </Card>\n <Menu\n anchorEl={anchorEl}\n open={open}\n onClose={handleClose}\n anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n transformOrigin={{ vertical: 'top', horizontal: 'right' }}\n slotProps={{\n paper: {\n sx: (theme) => ({\n border: `1px solid ${theme.vars.palette.grey[300]}`,\n boxShadow: 'none',\n ...theme.applyStyles('dark', {\n borderColor: theme.vars.palette.grey[800],\n }),\n }),\n },\n }}\n >\n {DURATIONS.map((duration) => (\n <MenuItem\n key={duration}\n onClick={() => handleSelect(duration)}\n sx={(theme) => ({\n justifyContent: 'space-between',\n gap: 4,\n fontSize: 14,\n fontWeight: 700,\n lineHeight: '18px',\n color: theme.vars.palette.text.primary,\n })}\n >\n {formatDuration(duration, i18n.language, 'long')}\n {duration === validUntil ? (\n <Check color=\"primary\" fontSize=\"small\" />\n ) : null}\n </MenuItem>\n ))}\n </Menu>\n <Card>\n <SettingsRow>\n <ToggleLabel>{t('limitOrder.partiallyFillable')}</ToggleLabel>\n <Switch\n checked={partiallyFillable}\n onChange={handlePartiallyFillableChange}\n aria-label={t('limitOrder.partiallyFillable')}\n />\n </SettingsRow>\n </Card>\n </Container>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;AAsBA,MAAM,YAAY;CAAC;CAAM;CAAO;CAAQ;CAAS;AAAQ;AAEzD,MAAa,sBAA0C,UAAuB;CAC5E,MAAM,EAAE,GAAG,SAAS,eAAe;CACnC,MAAM,CAAC,YAAY,qBAAqB,eACtC,cACA,mBACF;CACA,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,CAAC,UAAU,eAAe,SAA6B,IAAI;CACjE,MAAM,OAAO,QAAQ,QAAQ;CAE7B,MAAM,cAAc,UAAyC;EAC3D,YAAY,MAAM,aAAa;CACjC;CAEA,MAAM,oBAA0B;EAC9B,YAAY,IAAI;CAClB;CAEA,MAAM,gBAAgB,aAA2B;EAC/C,cAAc,cAAc,QAAQ;EACpC,YAAY,IAAI;CAClB;CAEA,MAAM,iCACJ,UACS;EACT,cAAc,qBAAqB,MAAM,OAAO,OAAO;CACzD;CAEA,OACE,qBAACA,aAAD;EAAW,GAAI;EAAf,UAAA;GACE,oBAACC,QAAD,EAAA,UACE,qBAAC,mBAAD;IACE,SAAS;IACT,eAAA;IACA,iBAAc;IACd,iBAAe;IAJjB,UAAA,CAME,oBAAC,kBAAD,EAAA,UAAmB,EAAE,sBAAsB,EAAoB,CAAA,GAC/D,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,kBAAD,EAAA,UACG,eAAe,YAAY,KAAK,UAAU,MAAM,EACjC,CAAA,GAClB,oBAAC,uBAAD,EACE,IAAI;KAAE,UAAU;KAAI,QAAQ;KAAQ,WAAW;IAAM,EACtD,CAAA,CACU,EAAA,CAAA,CACI;GACf,CAAA,EAAA,CAAA;GACN,oBAAC,MAAD;IACY;IACJ;IACN,SAAS;IACT,cAAc;KAAE,UAAU;KAAU,YAAY;IAAQ;IACxD,iBAAiB;KAAE,UAAU;KAAO,YAAY;IAAQ;IACxD,WAAW,EACT,OAAO,EACL,KAAK,WAAW;KACd,QAAQ,aAAa,MAAM,KAAK,QAAQ,KAAK;KAC7C,WAAW;KACX,GAAG,MAAM,YAAY,QAAQ,EAC3B,aAAa,MAAM,KAAK,QAAQ,KAAK,KACvC,CAAC;IACH,GACF,EACF;IAEC,UAAA,UAAU,KAAK,aACd,qBAAC,UAAD;KAEE,eAAe,aAAa,QAAQ;KACpC,KAAK,WAAW;MACd,gBAAgB;MAChB,KAAK;MACL,UAAU;MACV,YAAY;MACZ,YAAY;MACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;KACjC;KAVF,UAAA,CAYG,eAAe,UAAU,KAAK,UAAU,MAAM,GAC9C,aAAa,aACZ,oBAAC,OAAD;MAAO,OAAM;MAAU,UAAS;KAAS,CAAA,IACvC,IACI;IAfH,GAAA,QAeG,CACX;GACG,CAAA;GACN,oBAACA,QAAD,EAAA,UACE,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,EAAE,8BAA8B,EAAe,CAAA,GAC7D,oBAACC,UAAD;IACE,SAAS;IACT,UAAU;IACV,cAAY,EAAE,8BAA8B;GAC7C,CAAA,CACU,EAAA,CAAA,EACT,CAAA;EACG;;AAEf"}
@@ -1 +1 @@
1
- {"version":3,"file":"LimitPriceCard.js","names":[],"sources":["../../../../src/components/LimitPriceCard/LimitPriceCard.tsx"],"sourcesContent":["import SwapHorizIcon from '@mui/icons-material/SwapHoriz'\nimport type { CardProps } from '@mui/material'\nimport { Skeleton } from '@mui/material'\nimport { type ChangeEvent, type JSX, useEffect, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useLimitMarketRate } from '../../hooks/useLimitMarketRate.js'\nimport { useLinkedLimitFields } from '../../hooks/useLinkedLimitFields.js'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { formatInputAmount } from '../../utils/format.js'\nimport { applyPriceOffset, invertPrice } from '../../utils/limitOrder.js'\nimport {\n AmountCard,\n amountHeight,\n CardBodyRow,\n CardHeaderRow,\n LargeInput,\n} from '../AmountInputCard/AmountInputCard.style.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport { InvertChip } from './LimitPriceCard.style.js'\nimport { LimitPricePresets } from './LimitPricePresets.js'\n\nconst cleanDisplay = (value: string): string =>\n value ? formatInputAmount(value, 8) : ''\n\nexport const LimitPriceCard: React.FC<CardProps> = (props): JSX.Element => {\n const { t } = useTranslation()\n const isEditingRef = useRef(false)\n const [inputValue, setInputValue] = useState('')\n\n const [\n fromChainId,\n fromTokenAddress,\n toChainId,\n toTokenAddress,\n priceInverted,\n ] = useFieldValues(\n FormKeyHelper.getChainKey('from'),\n FormKeyHelper.getTokenKey('from'),\n FormKeyHelper.getChainKey('to'),\n FormKeyHelper.getTokenKey('to'),\n 'priceInverted'\n )\n const { token: fromToken } = useToken(fromChainId, fromTokenAddress)\n const { token: toToken } = useToken(toChainId, toTokenAddress)\n\n const { isFetching } = useRoutes()\n\n // limitPrice is derived from the from/to amount fields, not stored.\n const { limitPrice, setLimitPrice } = useLinkedLimitFields()\n const { setFieldValue } = useFieldActions()\n\n const hasTokens = Boolean(fromToken && toToken)\n const showSkeleton = isFetching && !limitPrice\n const leadToken = priceInverted ? toToken : fromToken\n const unitToken = priceInverted ? fromToken : toToken\n\n const marketCanonical = useLimitMarketRate()\n\n // Canonical price is orientation-independent; flip only for display.\n const displayPrice = priceInverted ? invertPrice(limitPrice) : limitPrice\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: pair fields are intentional re-run triggers, not read in the body\n useEffect(() => {\n setFieldValue('toAmount', '', { isDirty: false, isTouched: false })\n setFieldValue('selectedRouteId', undefined)\n }, [fromChainId, fromTokenAddress, toChainId, toTokenAddress])\n\n // Keep the input in sync with derived/preset/invert updates, but never yank\n // the value out from under an actively-typing user.\n useEffect(() => {\n if (!isEditingRef.current) {\n setInputValue(cleanDisplay(displayPrice))\n }\n }, [displayPrice])\n\n const handleChange = (\n event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n ): void => {\n isEditingRef.current = true\n const formatted = formatInputAmount(event.target.value, 18, true)\n setInputValue(formatted)\n const numeric = Number(formatted)\n if (!formatted || Number.isNaN(numeric) || numeric <= 0) {\n setLimitPrice('')\n return\n }\n // Canonical price is orientation-independent; un-flip the displayed value.\n const canonical = priceInverted ? 1 / numeric : numeric\n setLimitPrice(String(canonical))\n }\n\n const handleBlur = (): void => {\n isEditingRef.current = false\n setInputValue(cleanDisplay(displayPrice))\n }\n\n const handleInvert = (): void => {\n isEditingRef.current = false\n setFieldValue('priceInverted', !priceInverted)\n }\n\n // Apply a percentage offset to the canonical market rate (0 = at market).\n const handlePreset = (pct: number): void => {\n if (marketCanonical === undefined) {\n return\n }\n isEditingRef.current = false\n setLimitPrice(applyPriceOffset(String(marketCanonical), pct))\n }\n\n const label = hasTokens\n ? t('limitOrder.priceLabel', { symbol: leadToken?.symbol })\n : t('limitOrder.price')\n\n return (\n <AmountCard {...props} mask={false}>\n <CardHeaderRow>\n <CardTitle sx={{ padding: 0 }}>{label}</CardTitle>\n {hasTokens ? (\n <InvertChip onClick={handleInvert} aria-label=\"invert price\">\n {unitToken?.symbol}\n <SwapHorizIcon sx={{ fontSize: 16 }} />\n </InvertChip>\n ) : null}\n </CardHeaderRow>\n <CardBodyRow>\n {showSkeleton ? (\n <Skeleton variant=\"rounded\" height={amountHeight} sx={{ flex: 1 }} />\n ) : (\n <LargeInput\n size=\"small\"\n autoComplete=\"off\"\n placeholder=\"0\"\n inputProps={{ inputMode: 'decimal' }}\n onChange={handleChange}\n onBlur={handleBlur}\n value={inputValue}\n name=\"limitPrice\"\n disabled={!hasTokens}\n />\n )}\n </CardBodyRow>\n <LimitPricePresets\n onSelect={handlePreset}\n disabled={!hasTokens || marketCanonical === undefined}\n />\n </AmountCard>\n )\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"LimitPriceCard.js","names":[],"sources":["../../../../src/components/LimitPriceCard/LimitPriceCard.tsx"],"sourcesContent":["import SwapHorizIcon from '@mui/icons-material/SwapHoriz'\nimport type { CardProps } from '@mui/material'\nimport { Skeleton } from '@mui/material'\nimport { type ChangeEvent, type JSX, useEffect, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useLimitMarketRate } from '../../hooks/useLimitMarketRate.js'\nimport { useLinkedLimitFields } from '../../hooks/useLinkedLimitFields.js'\nimport { useRoutes } from '../../hooks/useRoutes.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { formatInputAmount } from '../../utils/format.js'\nimport { applyPriceOffset, invertPrice } from '../../utils/limitOrder.js'\nimport {\n AmountCard,\n amountHeight,\n CardBodyRow,\n CardHeaderRow,\n LargeInput,\n} from '../AmountInputCard/AmountInputCard.style.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport { InvertChip } from './LimitPriceCard.style.js'\nimport { LimitPricePresets } from './LimitPricePresets.js'\n\nconst cleanDisplay = (value: string): string =>\n value ? formatInputAmount(value, 8) : ''\n\nexport const LimitPriceCard: React.FC<CardProps> = (props): JSX.Element => {\n const { t } = useTranslation()\n const isEditingRef = useRef(false)\n const [inputValue, setInputValue] = useState('')\n\n const [\n fromChainId,\n fromTokenAddress,\n toChainId,\n toTokenAddress,\n priceInverted,\n ] = useFieldValues(\n FormKeyHelper.getChainKey('from'),\n FormKeyHelper.getTokenKey('from'),\n FormKeyHelper.getChainKey('to'),\n FormKeyHelper.getTokenKey('to'),\n 'priceInverted'\n )\n const { token: fromToken } = useToken(fromChainId, fromTokenAddress)\n const { token: toToken } = useToken(toChainId, toTokenAddress)\n\n const { isFetching } = useRoutes()\n\n // limitPrice is derived from the from/to amount fields, not stored.\n const { limitPrice, setLimitPrice } = useLinkedLimitFields()\n const { setFieldValue } = useFieldActions()\n\n const hasTokens = Boolean(fromToken && toToken)\n const showSkeleton = isFetching && !limitPrice\n const leadToken = priceInverted ? toToken : fromToken\n const unitToken = priceInverted ? fromToken : toToken\n\n const marketCanonical = useLimitMarketRate()\n\n // Canonical price is orientation-independent; flip only for display.\n const displayPrice = priceInverted ? invertPrice(limitPrice) : limitPrice\n\n // biome-ignore lint/correctness/useExhaustiveDependencies: pair fields are intentional re-run triggers, not read in the body\n useEffect(() => {\n setFieldValue('toAmount', '', { isDirty: false, isTouched: false })\n setFieldValue('selectedRouteId', undefined)\n }, [fromChainId, fromTokenAddress, toChainId, toTokenAddress])\n\n // Keep the input in sync with derived/preset/invert updates, but never yank\n // the value out from under an actively-typing user.\n useEffect(() => {\n if (!isEditingRef.current) {\n setInputValue(cleanDisplay(displayPrice))\n }\n }, [displayPrice])\n\n const handleChange = (\n event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n ): void => {\n isEditingRef.current = true\n const formatted = formatInputAmount(event.target.value, 18, true)\n setInputValue(formatted)\n const numeric = Number(formatted)\n if (!formatted || Number.isNaN(numeric) || numeric <= 0) {\n setLimitPrice('')\n return\n }\n // Canonical price is orientation-independent; un-flip the displayed value.\n const canonical = priceInverted ? 1 / numeric : numeric\n setLimitPrice(String(canonical))\n }\n\n const handleBlur = (): void => {\n isEditingRef.current = false\n setInputValue(cleanDisplay(displayPrice))\n }\n\n const handleInvert = (): void => {\n isEditingRef.current = false\n setFieldValue('priceInverted', !priceInverted)\n }\n\n // Apply a percentage offset to the canonical market rate (0 = at market).\n const handlePreset = (pct: number): void => {\n if (marketCanonical === undefined) {\n return\n }\n isEditingRef.current = false\n setLimitPrice(applyPriceOffset(String(marketCanonical), pct))\n }\n\n const label = hasTokens\n ? t('limitOrder.priceLabel', { symbol: leadToken?.symbol })\n : t('limitOrder.price')\n\n return (\n <AmountCard {...props} mask={false}>\n <CardHeaderRow>\n <CardTitle sx={{ padding: 0 }}>{label}</CardTitle>\n {hasTokens ? (\n <InvertChip onClick={handleInvert} aria-label=\"invert price\">\n {unitToken?.symbol}\n <SwapHorizIcon sx={{ fontSize: 16 }} />\n </InvertChip>\n ) : null}\n </CardHeaderRow>\n <CardBodyRow>\n {showSkeleton ? (\n <Skeleton variant=\"rounded\" height={amountHeight} sx={{ flex: 1 }} />\n ) : (\n <LargeInput\n size=\"small\"\n autoComplete=\"off\"\n placeholder=\"0\"\n inputProps={{ inputMode: 'decimal' }}\n onChange={handleChange}\n onBlur={handleBlur}\n value={inputValue}\n name=\"limitPrice\"\n disabled={!hasTokens}\n />\n )}\n </CardBodyRow>\n <LimitPricePresets\n onSelect={handlePreset}\n disabled={!hasTokens || marketCanonical === undefined}\n />\n </AmountCard>\n )\n}\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"LimitPricePresets.js","names":[],"sources":["../../../../src/components/LimitPriceCard/LimitPricePresets.tsx"],"sourcesContent":["import { type ChangeEvent, type JSX, useEffect, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { ChipContainer } from '../AmountInputCard/PercentageChips.style.js'\nimport {\n EditablePriceChip,\n PriceChip,\n PriceChipInput,\n} from './LimitPriceCard.style.js'\n\n/** Quick-set presets, as percentage offsets from market (0 = at market). */\nconst PRESETS = [0, 1, 5, 10] as const\n\ninterface LimitPricePresetsProps {\n /** Apply a percentage offset from the market rate (0 = at market). */\n onSelect: (pct: number) => void\n /** Disables the free-form custom pill (no tokens / no market rate yet). */\n disabled: boolean\n}\n\n/**\n * Row of quick-set price controls: fixed percentage presets plus a free-form\n * \"custom %\" pill that collapses to a button until engaged. Owns its own\n * custom-input state so the card only deals with applying an offset.\n */\nexport const LimitPricePresets = ({\n onSelect,\n disabled,\n}: LimitPricePresetsProps): JSX.Element => {\n const { t } = useTranslation()\n const customInputRef = useRef<HTMLInputElement>(null)\n const [customPct, setCustomPct] = useState('')\n const [customFocused, setCustomFocused] = useState(false)\n\n // The custom pill renders as a plain button until engaged; when it flips into\n // edit mode (focused), move the caret into the freshly-mounted input.\n useEffect(() => {\n if (customFocused) {\n customInputRef.current?.focus()\n }\n }, [customFocused])\n\n // Picking a fixed preset clears any custom value so the custom pill collapses\n // back to its \"Custom\" button instead of showing a stale, no-longer-applied %.\n const handlePresetClick = (pct: number): void => {\n setCustomPct('')\n setCustomFocused(false)\n onSelect(pct)\n }\n\n // Free-form offset pill: apply the typed percentage live so the price input\n // tracks the offset as the user types. Accepts an optional leading +/- sign\n // so the price can be set above (premium) or below (discount) market.\n const handleCustomChange = (event: ChangeEvent<HTMLInputElement>): void => {\n const raw = event.target.value\n if (raw && !/^[+-]?\\d*\\.?\\d*$/.test(raw)) {\n return\n }\n setCustomPct(raw)\n const numeric = Number(raw)\n // Bare '', '+', '-', '.' etc. aren't applicable numbers yet — Number() maps\n // the signs/dot to NaN, and '' to 0, so guard both.\n if (raw === '' || Number.isNaN(numeric)) {\n return\n }\n onSelect(numeric)\n }\n\n const handleCustomKeyDown = (\n event: React.KeyboardEvent<HTMLInputElement>\n ): void => {\n if (event.key === 'Enter') {\n event.currentTarget.blur()\n }\n }\n\n // On blur, surface an explicit sign: a bare positive entry like \"10\" reads as\n // \"+10\" so the direction (above/below market) is unambiguous once collapsed.\n const handleCustomBlur = (): void => {\n setCustomFocused(false)\n setCustomPct((prev) => {\n if (!prev || prev.startsWith('+') || prev.startsWith('-')) {\n return prev\n }\n return Number.isNaN(Number(prev)) ? prev : `+${prev}`\n })\n }\n\n // Collapse to a plain \"Custom\" label only while empty and unfocused; once the\n // user engages (focus) or has typed a value, reveal the `+__%` affixes.\n const showCustomLabel = customPct === '' && !customFocused\n\n return (\n <ChipContainer sx={{ marginTop: 0.5, flexWrap: 'wrap' }}>\n {PRESETS.map((pct) => (\n <PriceChip key={pct} onClick={() => handlePresetClick(pct)}>\n {pct === 0 ? t('limitOrder.market') : `+${pct}%`}\n </PriceChip>\n ))}\n {showCustomLabel ? (\n <PriceChip disabled={disabled} onClick={() => setCustomFocused(true)}>\n {t('limitOrder.custom')}\n </PriceChip>\n ) : (\n <EditablePriceChip\n aria-disabled={disabled}\n onClick={(event) => {\n // `aria-disabled` only announces the state; enforce it so a\n // programmatic click can't apply an offset while disabled.\n if (disabled) {\n return\n }\n const input = event.currentTarget.querySelector('input')\n input?.focus()\n const numeric = Number(customPct)\n if (customPct && !Number.isNaN(numeric)) {\n onSelect(numeric)\n }\n }}\n >\n <PriceChipInput\n ref={customInputRef}\n inputMode=\"decimal\"\n autoComplete=\"off\"\n placeholder=\"0\"\n aria-label={t('limitOrder.custom')}\n value={customPct}\n onChange={handleCustomChange}\n onKeyDown={handleCustomKeyDown}\n onFocus={() => setCustomFocused(true)}\n onBlur={handleCustomBlur}\n disabled={disabled}\n style={{ width: `${Math.max(customPct.length, 1)}ch` }}\n />\n %\n </EditablePriceChip>\n )}\n </ChipContainer>\n )\n}\n"],"mappings":";;;;;;;AAUA,MAAM,UAAU;CAAC;CAAG;CAAG;CAAG;AAAE;;;;;;AAc5B,MAAa,qBAAqB,EAChC,UACA,eACyC;CACzC,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,iBAAiB,OAAyB,IAAI;CACpD,MAAM,CAAC,WAAW,gBAAgB,SAAS,EAAE;CAC7C,MAAM,CAAC,eAAe,oBAAoB,SAAS,KAAK;CAIxD,gBAAgB;EACd,IAAI,eACF,eAAe,SAAS,MAAM;CAElC,GAAG,CAAC,aAAa,CAAC;CAIlB,MAAM,qBAAqB,QAAsB;EAC/C,aAAa,EAAE;EACf,iBAAiB,KAAK;EACtB,SAAS,GAAG;CACd;CAKA,MAAM,sBAAsB,UAA+C;EACzE,MAAM,MAAM,MAAM,OAAO;EACzB,IAAI,OAAO,CAAC,mBAAmB,KAAK,GAAG,GACrC;EAEF,aAAa,GAAG;EAChB,MAAM,UAAU,OAAO,GAAG;EAG1B,IAAI,QAAQ,MAAM,OAAO,MAAM,OAAO,GACpC;EAEF,SAAS,OAAO;CAClB;CAEA,MAAM,uBACJ,UACS;EACT,IAAI,MAAM,QAAQ,SAChB,MAAM,cAAc,KAAK;CAE7B;CAIA,MAAM,yBAA+B;EACnC,iBAAiB,KAAK;EACtB,cAAc,SAAS;GACrB,IAAI,CAAC,QAAQ,KAAK,WAAW,GAAG,KAAK,KAAK,WAAW,GAAG,GACtD,OAAO;GAET,OAAO,OAAO,MAAM,OAAO,IAAI,CAAC,IAAI,OAAO,IAAI;EACjD,CAAC;CACH;CAIA,MAAM,kBAAkB,cAAc,MAAM,CAAC;CAE7C,OACE,qBAAC,eAAD;EAAe,IAAI;GAAE,WAAW;GAAK,UAAU;EAAO;YAAtD,CACG,QAAQ,KAAK,QACZ,oBAAC,WAAD;GAAqB,eAAe,kBAAkB,GAAG;aACtD,QAAQ,IAAI,EAAE,mBAAmB,IAAI,IAAI,IAAI;EACrC,GAFK,GAEL,CACZ,GACA,kBACC,oBAAC,WAAD;GAAqB;GAAU,eAAe,iBAAiB,IAAI;aAChE,EAAE,mBAAmB;EACb,CAAA,IAEX,qBAAC,mBAAD;GACE,iBAAe;GACf,UAAU,UAAU;IAGlB,IAAI,UACF;IAGF,MADoB,cAAc,cAAc,OAC5C,CAAC,EAAE,MAAM;IACb,MAAM,UAAU,OAAO,SAAS;IAChC,IAAI,aAAa,CAAC,OAAO,MAAM,OAAO,GACpC,SAAS,OAAO;GAEpB;aAdF,CAgBE,oBAAC,gBAAD;IACE,KAAK;IACL,WAAU;IACV,cAAa;IACb,aAAY;IACZ,cAAY,EAAE,mBAAmB;IACjC,OAAO;IACP,UAAU;IACV,WAAW;IACX,eAAe,iBAAiB,IAAI;IACpC,QAAQ;IACE;IACV,OAAO,EAAE,OAAO,GAAG,KAAK,IAAI,UAAU,QAAQ,CAAC,EAAE,IAAI;GACtD,CAAA,GAAC,GAEe;IAER;;AAEnB"}
1
+ {"version":3,"file":"LimitPricePresets.js","names":[],"sources":["../../../../src/components/LimitPriceCard/LimitPricePresets.tsx"],"sourcesContent":["import { type ChangeEvent, type JSX, useEffect, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { ChipContainer } from '../AmountInputCard/PercentageChips.style.js'\nimport {\n EditablePriceChip,\n PriceChip,\n PriceChipInput,\n} from './LimitPriceCard.style.js'\n\n/** Quick-set presets, as percentage offsets from market (0 = at market). */\nconst PRESETS = [0, 1, 5, 10] as const\n\ninterface LimitPricePresetsProps {\n /** Apply a percentage offset from the market rate (0 = at market). */\n onSelect: (pct: number) => void\n /** Disables the free-form custom pill (no tokens / no market rate yet). */\n disabled: boolean\n}\n\n/**\n * Row of quick-set price controls: fixed percentage presets plus a free-form\n * \"custom %\" pill that collapses to a button until engaged. Owns its own\n * custom-input state so the card only deals with applying an offset.\n */\nexport const LimitPricePresets = ({\n onSelect,\n disabled,\n}: LimitPricePresetsProps): JSX.Element => {\n const { t } = useTranslation()\n const customInputRef = useRef<HTMLInputElement>(null)\n const [customPct, setCustomPct] = useState('')\n const [customFocused, setCustomFocused] = useState(false)\n\n // The custom pill renders as a plain button until engaged; when it flips into\n // edit mode (focused), move the caret into the freshly-mounted input.\n useEffect(() => {\n if (customFocused) {\n customInputRef.current?.focus()\n }\n }, [customFocused])\n\n // Picking a fixed preset clears any custom value so the custom pill collapses\n // back to its \"Custom\" button instead of showing a stale, no-longer-applied %.\n const handlePresetClick = (pct: number): void => {\n setCustomPct('')\n setCustomFocused(false)\n onSelect(pct)\n }\n\n // Free-form offset pill: apply the typed percentage live so the price input\n // tracks the offset as the user types. Accepts an optional leading +/- sign\n // so the price can be set above (premium) or below (discount) market.\n const handleCustomChange = (event: ChangeEvent<HTMLInputElement>): void => {\n const raw = event.target.value\n if (raw && !/^[+-]?\\d*\\.?\\d*$/.test(raw)) {\n return\n }\n setCustomPct(raw)\n const numeric = Number(raw)\n // Bare '', '+', '-', '.' etc. aren't applicable numbers yet — Number() maps\n // the signs/dot to NaN, and '' to 0, so guard both.\n if (raw === '' || Number.isNaN(numeric)) {\n return\n }\n onSelect(numeric)\n }\n\n const handleCustomKeyDown = (\n event: React.KeyboardEvent<HTMLInputElement>\n ): void => {\n if (event.key === 'Enter') {\n event.currentTarget.blur()\n }\n }\n\n // On blur, surface an explicit sign: a bare positive entry like \"10\" reads as\n // \"+10\" so the direction (above/below market) is unambiguous once collapsed.\n const handleCustomBlur = (): void => {\n setCustomFocused(false)\n setCustomPct((prev) => {\n if (!prev || prev.startsWith('+') || prev.startsWith('-')) {\n return prev\n }\n return Number.isNaN(Number(prev)) ? prev : `+${prev}`\n })\n }\n\n // Collapse to a plain \"Custom\" label only while empty and unfocused; once the\n // user engages (focus) or has typed a value, reveal the `+__%` affixes.\n const showCustomLabel = customPct === '' && !customFocused\n\n return (\n <ChipContainer sx={{ marginTop: 0.5, flexWrap: 'wrap' }}>\n {PRESETS.map((pct) => (\n <PriceChip key={pct} onClick={() => handlePresetClick(pct)}>\n {pct === 0 ? t('limitOrder.market') : `+${pct}%`}\n </PriceChip>\n ))}\n {showCustomLabel ? (\n <PriceChip disabled={disabled} onClick={() => setCustomFocused(true)}>\n {t('limitOrder.custom')}\n </PriceChip>\n ) : (\n <EditablePriceChip\n aria-disabled={disabled}\n onClick={(event) => {\n // `aria-disabled` only announces the state; enforce it so a\n // programmatic click can't apply an offset while disabled.\n if (disabled) {\n return\n }\n const input = event.currentTarget.querySelector('input')\n input?.focus()\n const numeric = Number(customPct)\n if (customPct && !Number.isNaN(numeric)) {\n onSelect(numeric)\n }\n }}\n >\n <PriceChipInput\n ref={customInputRef}\n inputMode=\"decimal\"\n autoComplete=\"off\"\n placeholder=\"0\"\n aria-label={t('limitOrder.custom')}\n value={customPct}\n onChange={handleCustomChange}\n onKeyDown={handleCustomKeyDown}\n onFocus={() => setCustomFocused(true)}\n onBlur={handleCustomBlur}\n disabled={disabled}\n style={{ width: `${Math.max(customPct.length, 1)}ch` }}\n />\n %\n </EditablePriceChip>\n )}\n </ChipContainer>\n )\n}\n"],"mappings":";;;;;;;AAUA,MAAM,UAAU;CAAC;CAAG;CAAG;CAAG;AAAE;;;;;;AAc5B,MAAa,qBAAqB,EAChC,UACA,eACyC;CACzC,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,iBAAiB,OAAyB,IAAI;CACpD,MAAM,CAAC,WAAW,gBAAgB,SAAS,EAAE;CAC7C,MAAM,CAAC,eAAe,oBAAoB,SAAS,KAAK;CAIxD,gBAAgB;EACd,IAAI,eACF,eAAe,SAAS,MAAM;CAElC,GAAG,CAAC,aAAa,CAAC;CAIlB,MAAM,qBAAqB,QAAsB;EAC/C,aAAa,EAAE;EACf,iBAAiB,KAAK;EACtB,SAAS,GAAG;CACd;CAKA,MAAM,sBAAsB,UAA+C;EACzE,MAAM,MAAM,MAAM,OAAO;EACzB,IAAI,OAAO,CAAC,mBAAmB,KAAK,GAAG,GACrC;EAEF,aAAa,GAAG;EAChB,MAAM,UAAU,OAAO,GAAG;EAG1B,IAAI,QAAQ,MAAM,OAAO,MAAM,OAAO,GACpC;EAEF,SAAS,OAAO;CAClB;CAEA,MAAM,uBACJ,UACS;EACT,IAAI,MAAM,QAAQ,SAChB,MAAM,cAAc,KAAK;CAE7B;CAIA,MAAM,yBAA+B;EACnC,iBAAiB,KAAK;EACtB,cAAc,SAAS;GACrB,IAAI,CAAC,QAAQ,KAAK,WAAW,GAAG,KAAK,KAAK,WAAW,GAAG,GACtD,OAAO;GAET,OAAO,OAAO,MAAM,OAAO,IAAI,CAAC,IAAI,OAAO,IAAI;EACjD,CAAC;CACH;CAIA,MAAM,kBAAkB,cAAc,MAAM,CAAC;CAE7C,OACE,qBAAC,eAAD;EAAe,IAAI;GAAE,WAAW;GAAK,UAAU;EAAO;EAAtD,UAAA,CACG,QAAQ,KAAK,QACZ,oBAAC,WAAD;GAAqB,eAAe,kBAAkB,GAAG;GACtD,UAAA,QAAQ,IAAI,EAAE,mBAAmB,IAAI,IAAI,IAAI;EACrC,GAFK,GAEL,CACZ,GACA,kBACC,oBAAC,WAAD;GAAqB;GAAU,eAAe,iBAAiB,IAAI;GAChE,UAAA,EAAE,mBAAmB;EACb,CAAA,IAEX,qBAAC,mBAAD;GACE,iBAAe;GACf,UAAU,UAAU;IAGlB,IAAI,UACF;IAGF,MADoB,cAAc,cAAc,OAC5C,CAAC,EAAE,MAAM;IACb,MAAM,UAAU,OAAO,SAAS;IAChC,IAAI,aAAa,CAAC,OAAO,MAAM,OAAO,GACpC,SAAS,OAAO;GAEpB;GAdF,UAAA,CAgBE,oBAAC,gBAAD;IACE,KAAK;IACL,WAAU;IACV,cAAa;IACb,aAAY;IACZ,cAAY,EAAE,mBAAmB;IACjC,OAAO;IACP,UAAU;IACV,WAAW;IACX,eAAe,iBAAiB,IAAI;IACpC,QAAQ;IACE;IACV,OAAO,EAAE,OAAO,GAAG,KAAK,IAAI,UAAU,QAAQ,CAAC,EAAE,IAAI;GACtD,CAAA,GAAC,GAEe;EAER,CAAA,CAAA;;AAEnB"}
@@ -1 +1 @@
1
- {"version":3,"file":"AccountDeployedMessage.js","names":[],"sources":["../../../../src/components/Messages/AccountDeployedMessage.tsx"],"sourcesContent":["import WarningRounded from '@mui/icons-material/WarningRounded'\nimport type { BoxProps } from '@mui/material'\nimport { Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { AlertMessage } from './AlertMessage.js'\n\nexport const AccountDeployedMessage: React.FC<BoxProps> = ({ ...props }) => {\n const { t } = useTranslation()\n return (\n <AlertMessage\n title={\n <Typography\n variant=\"body2\"\n sx={{\n px: 1,\n color: 'text.primary',\n }}\n >\n {t('info.message.accountDeployedMessage')}\n </Typography>\n }\n icon={<WarningRounded />}\n severity=\"warning\"\n multiline\n {...props}\n />\n )\n}\n"],"mappings":";;;;;;AAMA,MAAa,0BAA8C,EAAE,GAAG,YAAY;CAC1E,MAAM,EAAE,MAAM,eAAe;CAC7B,OACE,oBAAC,cAAD;EACE,OACE,oBAAC,YAAD;GACE,SAAQ;GACR,IAAI;IACF,IAAI;IACJ,OAAO;GACT;aAEC,EAAE,qCAAqC;EAC9B,CAAA;EAEd,MAAM,oBAAC,gBAAD,CAAiB,CAAA;EACvB,UAAS;EACT,WAAA;EACA,GAAI;CACL,CAAA;AAEL"}
1
+ {"version":3,"file":"AccountDeployedMessage.js","names":[],"sources":["../../../../src/components/Messages/AccountDeployedMessage.tsx"],"sourcesContent":["import WarningRounded from '@mui/icons-material/WarningRounded'\nimport type { BoxProps } from '@mui/material'\nimport { Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { AlertMessage } from './AlertMessage.js'\n\nexport const AccountDeployedMessage: React.FC<BoxProps> = ({ ...props }) => {\n const { t } = useTranslation()\n return (\n <AlertMessage\n title={\n <Typography\n variant=\"body2\"\n sx={{\n px: 1,\n color: 'text.primary',\n }}\n >\n {t('info.message.accountDeployedMessage')}\n </Typography>\n }\n icon={<WarningRounded />}\n severity=\"warning\"\n multiline\n {...props}\n />\n )\n}\n"],"mappings":";;;;;;AAMA,MAAa,0BAA8C,EAAE,GAAG,YAAY;CAC1E,MAAM,EAAE,MAAM,eAAe;CAC7B,OACE,oBAAC,cAAD;EACE,OACE,oBAAC,YAAD;GACE,SAAQ;GACR,IAAI;IACF,IAAI;IACJ,OAAO;GACT;GAEC,UAAA,EAAE,qCAAqC;EAC9B,CAAA;EAEd,MAAM,oBAAC,gBAAD,CAAiB,CAAA;EACvB,UAAS;EACT,WAAA;EACA,GAAI;CACL,CAAA;AAEL"}
@@ -1 +1 @@
1
- {"version":3,"file":"AccountNotDeployedMessage.js","names":[],"sources":["../../../../src/components/Messages/AccountNotDeployedMessage.tsx"],"sourcesContent":["import WarningRounded from '@mui/icons-material/WarningRounded'\nimport { type BoxProps, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { AlertMessage } from './AlertMessage.js'\n\nexport const AccountNotDeployedMessage: React.FC<BoxProps> = (props) => {\n const { t } = useTranslation()\n\n return (\n <AlertMessage\n title={\n <Typography variant=\"body2\" sx={{ color: 'text.primary' }}>\n {t('warning.message.accountNotDeployedMessage')}\n </Typography>\n }\n icon={<WarningRounded />}\n severity=\"warning\"\n multiline\n {...props}\n />\n )\n}\n"],"mappings":";;;;;;AAKA,MAAa,6BAAiD,UAAU;CACtE,MAAM,EAAE,MAAM,eAAe;CAE7B,OACE,oBAAC,cAAD;EACE,OACE,oBAAC,YAAD;GAAY,SAAQ;GAAQ,IAAI,EAAE,OAAO,eAAe;aACrD,EAAE,2CAA2C;EACpC,CAAA;EAEd,MAAM,oBAAC,gBAAD,CAAiB,CAAA;EACvB,UAAS;EACT,WAAA;EACA,GAAI;CACL,CAAA;AAEL"}
1
+ {"version":3,"file":"AccountNotDeployedMessage.js","names":[],"sources":["../../../../src/components/Messages/AccountNotDeployedMessage.tsx"],"sourcesContent":["import WarningRounded from '@mui/icons-material/WarningRounded'\nimport { type BoxProps, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { AlertMessage } from './AlertMessage.js'\n\nexport const AccountNotDeployedMessage: React.FC<BoxProps> = (props) => {\n const { t } = useTranslation()\n\n return (\n <AlertMessage\n title={\n <Typography variant=\"body2\" sx={{ color: 'text.primary' }}>\n {t('warning.message.accountNotDeployedMessage')}\n </Typography>\n }\n icon={<WarningRounded />}\n severity=\"warning\"\n multiline\n {...props}\n />\n )\n}\n"],"mappings":";;;;;;AAKA,MAAa,6BAAiD,UAAU;CACtE,MAAM,EAAE,MAAM,eAAe;CAE7B,OACE,oBAAC,cAAD;EACE,OACE,oBAAC,YAAD;GAAY,SAAQ;GAAQ,IAAI,EAAE,OAAO,eAAe;GACrD,UAAA,EAAE,2CAA2C;EACpC,CAAA;EAEd,MAAM,oBAAC,gBAAD,CAAiB,CAAA;EACvB,UAAS;EACT,WAAA;EACA,GAAI;CACL,CAAA;AAEL"}
@@ -1 +1 @@
1
- {"version":3,"file":"AlertMessage.js","names":[],"sources":["../../../../src/components/Messages/AlertMessage.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport type { JSX, PropsWithChildren, ReactNode } from 'react'\nimport {\n AlertMessageCard,\n AlertMessageCardTitle,\n} from './AlertMessage.style.js'\nimport type { Severity } from './types.js'\n\ninterface AlertMessageProps extends PropsWithChildren<Omit<BoxProps, 'title'>> {\n icon: ReactNode\n title: ReactNode\n multiline?: boolean\n severity?: Severity\n}\n\nexport const AlertMessage = ({\n title,\n icon,\n children,\n multiline,\n severity = 'info',\n ...rest\n}: AlertMessageProps): JSX.Element => (\n <AlertMessageCard severity={severity} {...rest}>\n <AlertMessageCardTitle\n severity={severity}\n sx={{ alignItems: multiline ? 'start' : 'center' }}\n >\n {icon}\n {title}\n </AlertMessageCardTitle>\n {children}\n </AlertMessageCard>\n)\n"],"mappings":";;;AAeA,MAAa,gBAAgB,EAC3B,OACA,MACA,UACA,WACA,WAAW,QACX,GAAG,WAEH,qBAAC,kBAAD;CAA4B;CAAU,GAAI;WAA1C,CACE,qBAAC,uBAAD;EACY;EACV,IAAI,EAAE,YAAY,YAAY,UAAU,SAAS;YAFnD,CAIG,MACA,KACoB;KACtB,QACe"}
1
+ {"version":3,"file":"AlertMessage.js","names":[],"sources":["../../../../src/components/Messages/AlertMessage.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport type { JSX, PropsWithChildren, ReactNode } from 'react'\nimport {\n AlertMessageCard,\n AlertMessageCardTitle,\n} from './AlertMessage.style.js'\nimport type { Severity } from './types.js'\n\ninterface AlertMessageProps extends PropsWithChildren<Omit<BoxProps, 'title'>> {\n icon: ReactNode\n title: ReactNode\n multiline?: boolean\n severity?: Severity\n}\n\nexport const AlertMessage = ({\n title,\n icon,\n children,\n multiline,\n severity = 'info',\n ...rest\n}: AlertMessageProps): JSX.Element => (\n <AlertMessageCard severity={severity} {...rest}>\n <AlertMessageCardTitle\n severity={severity}\n sx={{ alignItems: multiline ? 'start' : 'center' }}\n >\n {icon}\n {title}\n </AlertMessageCardTitle>\n {children}\n </AlertMessageCard>\n)\n"],"mappings":";;;AAeA,MAAa,gBAAgB,EAC3B,OACA,MACA,UACA,WACA,WAAW,QACX,GAAG,WAEH,qBAAC,kBAAD;CAA4B;CAAU,GAAI;CAA1C,UAAA,CACE,qBAAC,uBAAD;EACY;EACV,IAAI,EAAE,YAAY,YAAY,UAAU,SAAS;EAFnD,UAAA,CAIG,MACA,KACoB;CACtB,CAAA,GAAA,QACe"}
@@ -1 +1 @@
1
- {"version":3,"file":"FundsSufficiencyMessage.js","names":[],"sources":["../../../../src/components/Messages/FundsSufficiencyMessage.tsx"],"sourcesContent":["import WarningRounded from '@mui/icons-material/WarningRounded'\nimport { type BoxProps, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { AlertMessage } from './AlertMessage.js'\n\nexport const FundsSufficiencyMessage: React.FC<BoxProps> = (props) => {\n const { t } = useTranslation()\n return (\n <AlertMessage\n severity=\"warning\"\n icon={<WarningRounded />}\n title={\n <Typography\n variant=\"body2\"\n sx={{\n color: 'text.primary',\n }}\n >\n {t('warning.message.insufficientFunds')}\n </Typography>\n }\n multiline\n {...props}\n />\n )\n}\n"],"mappings":";;;;;;AAKA,MAAa,2BAA+C,UAAU;CACpE,MAAM,EAAE,MAAM,eAAe;CAC7B,OACE,oBAAC,cAAD;EACE,UAAS;EACT,MAAM,oBAAC,gBAAD,CAAiB,CAAA;EACvB,OACE,oBAAC,YAAD;GACE,SAAQ;GACR,IAAI,EACF,OAAO,eACT;aAEC,EAAE,mCAAmC;EAC5B,CAAA;EAEd,WAAA;EACA,GAAI;CACL,CAAA;AAEL"}
1
+ {"version":3,"file":"FundsSufficiencyMessage.js","names":[],"sources":["../../../../src/components/Messages/FundsSufficiencyMessage.tsx"],"sourcesContent":["import WarningRounded from '@mui/icons-material/WarningRounded'\nimport { type BoxProps, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { AlertMessage } from './AlertMessage.js'\n\nexport const FundsSufficiencyMessage: React.FC<BoxProps> = (props) => {\n const { t } = useTranslation()\n return (\n <AlertMessage\n severity=\"warning\"\n icon={<WarningRounded />}\n title={\n <Typography\n variant=\"body2\"\n sx={{\n color: 'text.primary',\n }}\n >\n {t('warning.message.insufficientFunds')}\n </Typography>\n }\n multiline\n {...props}\n />\n )\n}\n"],"mappings":";;;;;;AAKA,MAAa,2BAA+C,UAAU;CACpE,MAAM,EAAE,MAAM,eAAe;CAC7B,OACE,oBAAC,cAAD;EACE,UAAS;EACT,MAAM,oBAAC,gBAAD,CAAiB,CAAA;EACvB,OACE,oBAAC,YAAD;GACE,SAAQ;GACR,IAAI,EACF,OAAO,eACT;GAEC,UAAA,EAAE,mCAAmC;EAC5B,CAAA;EAEd,WAAA;EACA,GAAI;CACL,CAAA;AAEL"}
@@ -1 +1 @@
1
- {"version":3,"file":"GasRefuelMessage.js","names":[],"sources":["../../../../src/components/Messages/GasRefuelMessage.tsx"],"sourcesContent":["import EvStation from '@mui/icons-material/EvStation'\nimport type { BoxProps } from '@mui/material'\nimport { Box, Collapse, Typography } from '@mui/material'\nimport type { ChangeEvent } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useGasRefuel } from '../../hooks/useGasRefuel.js'\nimport { useSettings } from '../../stores/settings/useSettings.js'\nimport { useSettingsActions } from '../../stores/settings/useSettingsActions.js'\nimport { AlertMessage } from './AlertMessage.js'\nimport { InfoMessageSwitch } from './GasRefuelMessage.style.js'\n\nexport const GasRefuelMessage: React.FC<BoxProps> = (props) => {\n const { t } = useTranslation()\n\n const { setValue } = useSettingsActions()\n const { enabledAutoRefuel } = useSettings(['enabledAutoRefuel'])\n\n const { enabled, chain, isLoading: isRefuelLoading } = useGasRefuel()\n\n const onChange = (_: ChangeEvent<HTMLInputElement>, checked: boolean) => {\n setValue('enabledAutoRefuel', checked)\n }\n\n const showGasRefuelMessage = chain && enabled && !isRefuelLoading\n\n return (\n <Collapse\n timeout={225}\n in={showGasRefuelMessage}\n unmountOnExit\n mountOnEnter\n >\n <AlertMessage\n icon={<EvStation />}\n title={\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n flexGrow: 1,\n }}\n >\n <Typography\n variant=\"body2\"\n sx={{\n fontWeight: 700,\n }}\n >\n {t('info.title.autoRefuel', { chainName: chain?.name ?? '' })}\n </Typography>\n <InfoMessageSwitch\n checked={enabledAutoRefuel}\n onChange={onChange}\n />\n </Box>\n }\n {...props}\n >\n <Collapse\n timeout={225}\n in={enabledAutoRefuel}\n unmountOnExit\n mountOnEnter\n >\n <Typography\n variant=\"body2\"\n sx={{\n px: 2,\n pt: 1,\n }}\n >\n {t('info.message.autoRefuel', {\n chainName: chain?.name,\n })}\n </Typography>\n </Collapse>\n </AlertMessage>\n </Collapse>\n )\n}\n"],"mappings":";;;;;;;;;;AAWA,MAAa,oBAAwC,UAAU;CAC7D,MAAM,EAAE,MAAM,eAAe;CAE7B,MAAM,EAAE,aAAa,mBAAmB;CACxC,MAAM,EAAE,sBAAsB,YAAY,CAAC,mBAAmB,CAAC;CAE/D,MAAM,EAAE,SAAS,OAAO,WAAW,oBAAoB,aAAa;CAEpE,MAAM,YAAY,GAAkC,YAAqB;EACvE,SAAS,qBAAqB,OAAO;CACvC;CAIA,OACE,oBAAC,UAAD;EACE,SAAS;EACT,IALyB,SAAS,WAAW,CAAC;EAM9C,eAAA;EACA,cAAA;YAEA,oBAAC,cAAD;GACE,MAAM,oBAAC,WAAD,CAAY,CAAA;GAClB,OACE,qBAAC,KAAD;IACE,IAAI;KACF,SAAS;KACT,YAAY;KACZ,gBAAgB;KAChB,UAAU;IACZ;cANF,CAQE,oBAAC,YAAD;KACE,SAAQ;KACR,IAAI,EACF,YAAY,IACd;eAEC,EAAE,yBAAyB,EAAE,WAAW,OAAO,QAAQ,GAAG,CAAC;IAClD,CAAA,GACZ,oBAAC,mBAAD;KACE,SAAS;KACC;IACX,CAAA,CACE;;GAEP,GAAI;aAEJ,oBAAC,UAAD;IACE,SAAS;IACT,IAAI;IACJ,eAAA;IACA,cAAA;cAEA,oBAAC,YAAD;KACE,SAAQ;KACR,IAAI;MACF,IAAI;MACJ,IAAI;KACN;eAEC,EAAE,2BAA2B,EAC5B,WAAW,OAAO,KACpB,CAAC;IACS,CAAA;GACJ,CAAA;EACE,CAAA;CACN,CAAA;AAEd"}
1
+ {"version":3,"file":"GasRefuelMessage.js","names":[],"sources":["../../../../src/components/Messages/GasRefuelMessage.tsx"],"sourcesContent":["import EvStation from '@mui/icons-material/EvStation'\nimport type { BoxProps } from '@mui/material'\nimport { Box, Collapse, Typography } from '@mui/material'\nimport type { ChangeEvent } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useGasRefuel } from '../../hooks/useGasRefuel.js'\nimport { useSettings } from '../../stores/settings/useSettings.js'\nimport { useSettingsActions } from '../../stores/settings/useSettingsActions.js'\nimport { AlertMessage } from './AlertMessage.js'\nimport { InfoMessageSwitch } from './GasRefuelMessage.style.js'\n\nexport const GasRefuelMessage: React.FC<BoxProps> = (props) => {\n const { t } = useTranslation()\n\n const { setValue } = useSettingsActions()\n const { enabledAutoRefuel } = useSettings(['enabledAutoRefuel'])\n\n const { enabled, chain, isLoading: isRefuelLoading } = useGasRefuel()\n\n const onChange = (_: ChangeEvent<HTMLInputElement>, checked: boolean) => {\n setValue('enabledAutoRefuel', checked)\n }\n\n const showGasRefuelMessage = chain && enabled && !isRefuelLoading\n\n return (\n <Collapse\n timeout={225}\n in={showGasRefuelMessage}\n unmountOnExit\n mountOnEnter\n >\n <AlertMessage\n icon={<EvStation />}\n title={\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n flexGrow: 1,\n }}\n >\n <Typography\n variant=\"body2\"\n sx={{\n fontWeight: 700,\n }}\n >\n {t('info.title.autoRefuel', { chainName: chain?.name ?? '' })}\n </Typography>\n <InfoMessageSwitch\n checked={enabledAutoRefuel}\n onChange={onChange}\n />\n </Box>\n }\n {...props}\n >\n <Collapse\n timeout={225}\n in={enabledAutoRefuel}\n unmountOnExit\n mountOnEnter\n >\n <Typography\n variant=\"body2\"\n sx={{\n px: 2,\n pt: 1,\n }}\n >\n {t('info.message.autoRefuel', {\n chainName: chain?.name,\n })}\n </Typography>\n </Collapse>\n </AlertMessage>\n </Collapse>\n )\n}\n"],"mappings":";;;;;;;;;;AAWA,MAAa,oBAAwC,UAAU;CAC7D,MAAM,EAAE,MAAM,eAAe;CAE7B,MAAM,EAAE,aAAa,mBAAmB;CACxC,MAAM,EAAE,sBAAsB,YAAY,CAAC,mBAAmB,CAAC;CAE/D,MAAM,EAAE,SAAS,OAAO,WAAW,oBAAoB,aAAa;CAEpE,MAAM,YAAY,GAAkC,YAAqB;EACvE,SAAS,qBAAqB,OAAO;CACvC;CAIA,OACE,oBAAC,UAAD;EACE,SAAS;EACT,IALyB,SAAS,WAAW,CAAC;EAM9C,eAAA;EACA,cAAA;EAEA,UAAA,oBAAC,cAAD;GACE,MAAM,oBAAC,WAAD,CAAY,CAAA;GAClB,OACE,qBAAC,KAAD;IACE,IAAI;KACF,SAAS;KACT,YAAY;KACZ,gBAAgB;KAChB,UAAU;IACZ;IANF,UAAA,CAQE,oBAAC,YAAD;KACE,SAAQ;KACR,IAAI,EACF,YAAY,IACd;KAEC,UAAA,EAAE,yBAAyB,EAAE,WAAW,OAAO,QAAQ,GAAG,CAAC;IAClD,CAAA,GACZ,oBAAC,mBAAD;KACE,SAAS;KACC;IACX,CAAA,CACE;;GAEP,GAAI;GAEJ,UAAA,oBAAC,UAAD;IACE,SAAS;IACT,IAAI;IACJ,eAAA;IACA,cAAA;IAEA,UAAA,oBAAC,YAAD;KACE,SAAQ;KACR,IAAI;MACF,IAAI;MACJ,IAAI;KACN;KAEC,UAAA,EAAE,2BAA2B,EAC5B,WAAW,OAAO,KACpB,CAAC;IACS,CAAA;GACJ,CAAA;EACE,CAAA;CACN,CAAA;AAEd"}
@@ -1 +1 @@
1
- {"version":3,"file":"GasSufficiencyMessage.js","names":[],"sources":["../../../../src/components/Messages/GasSufficiencyMessage.tsx"],"sourcesContent":["import { formatUnits } from '@lifi/sdk'\nimport EvStation from '@mui/icons-material/EvStation'\nimport { type BoxProps, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport type { GasSufficiency } from '../../hooks/useGasSufficiency.js'\nimport { AlertMessage } from './AlertMessage.js'\n\ninterface GasSufficiencyMessageProps extends BoxProps {\n insufficientGas?: GasSufficiency[]\n}\n\nexport const GasSufficiencyMessage: React.FC<GasSufficiencyMessageProps> = ({\n insufficientGas,\n ...props\n}) => {\n const { t } = useTranslation()\n return (\n <AlertMessage\n severity=\"warning\"\n icon={<EvStation />}\n title={\n <Typography\n variant=\"body2\"\n sx={{\n fontWeight: 700,\n }}\n >\n {t('warning.title.insufficientGas')}\n </Typography>\n }\n {...props}\n >\n <Typography\n variant=\"body2\"\n sx={{\n px: 2,\n pt: 1,\n }}\n >\n {t('warning.message.insufficientGas')}\n </Typography>\n {insufficientGas?.map((item, index) => (\n <Typography\n key={index}\n variant=\"body2\"\n sx={{\n px: 2,\n pt: 0.5,\n }}\n >\n {t('main.tokenOnChainAmount', {\n amount: formatUnits(\n item.insufficientAmount ?? 0n,\n item.token.decimals\n ),\n tokenSymbol: item.token.symbol,\n chainName: item.chain?.name,\n })}\n </Typography>\n ))}\n </AlertMessage>\n )\n}\n"],"mappings":";;;;;;;AAWA,MAAa,yBAA+D,EAC1E,iBACA,GAAG,YACC;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,OACE,qBAAC,cAAD;EACE,UAAS;EACT,MAAM,oBAAC,WAAD,CAAY,CAAA;EAClB,OACE,oBAAC,YAAD;GACE,SAAQ;GACR,IAAI,EACF,YAAY,IACd;aAEC,EAAE,+BAA+B;EACxB,CAAA;EAEd,GAAI;YAbN,CAeE,oBAAC,YAAD;GACE,SAAQ;GACR,IAAI;IACF,IAAI;IACJ,IAAI;GACN;aAEC,EAAE,iCAAiC;EAC1B,CAAA,GACX,iBAAiB,KAAK,MAAM,UAC3B,oBAAC,YAAD;GAEE,SAAQ;GACR,IAAI;IACF,IAAI;IACJ,IAAI;GACN;aAEC,EAAE,2BAA2B;IAC5B,QAAQ,YACN,KAAK,sBAAsB,IAC3B,KAAK,MAAM,QACb;IACA,aAAa,KAAK,MAAM;IACxB,WAAW,KAAK,OAAO;GACzB,CAAC;EACS,GAfL,KAeK,CACb,CACW;;AAElB"}
1
+ {"version":3,"file":"GasSufficiencyMessage.js","names":[],"sources":["../../../../src/components/Messages/GasSufficiencyMessage.tsx"],"sourcesContent":["import { formatUnits } from '@lifi/sdk'\nimport EvStation from '@mui/icons-material/EvStation'\nimport { type BoxProps, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport type { GasSufficiency } from '../../hooks/useGasSufficiency.js'\nimport { AlertMessage } from './AlertMessage.js'\n\ninterface GasSufficiencyMessageProps extends BoxProps {\n insufficientGas?: GasSufficiency[]\n}\n\nexport const GasSufficiencyMessage: React.FC<GasSufficiencyMessageProps> = ({\n insufficientGas,\n ...props\n}) => {\n const { t } = useTranslation()\n return (\n <AlertMessage\n severity=\"warning\"\n icon={<EvStation />}\n title={\n <Typography\n variant=\"body2\"\n sx={{\n fontWeight: 700,\n }}\n >\n {t('warning.title.insufficientGas')}\n </Typography>\n }\n {...props}\n >\n <Typography\n variant=\"body2\"\n sx={{\n px: 2,\n pt: 1,\n }}\n >\n {t('warning.message.insufficientGas')}\n </Typography>\n {insufficientGas?.map((item, index) => (\n <Typography\n key={index}\n variant=\"body2\"\n sx={{\n px: 2,\n pt: 0.5,\n }}\n >\n {t('main.tokenOnChainAmount', {\n amount: formatUnits(\n item.insufficientAmount ?? 0n,\n item.token.decimals\n ),\n tokenSymbol: item.token.symbol,\n chainName: item.chain?.name,\n })}\n </Typography>\n ))}\n </AlertMessage>\n )\n}\n"],"mappings":";;;;;;;AAWA,MAAa,yBAA+D,EAC1E,iBACA,GAAG,YACC;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,OACE,qBAAC,cAAD;EACE,UAAS;EACT,MAAM,oBAAC,WAAD,CAAY,CAAA;EAClB,OACE,oBAAC,YAAD;GACE,SAAQ;GACR,IAAI,EACF,YAAY,IACd;GAEC,UAAA,EAAE,+BAA+B;EACxB,CAAA;EAEd,GAAI;EAbN,UAAA,CAeE,oBAAC,YAAD;GACE,SAAQ;GACR,IAAI;IACF,IAAI;IACJ,IAAI;GACN;GAEC,UAAA,EAAE,iCAAiC;EAC1B,CAAA,GACX,iBAAiB,KAAK,MAAM,UAC3B,oBAAC,YAAD;GAEE,SAAQ;GACR,IAAI;IACF,IAAI;IACJ,IAAI;GACN;GAEC,UAAA,EAAE,2BAA2B;IAC5B,QAAQ,YACN,KAAK,sBAAsB,IAC3B,KAAK,MAAM,QACb;IACA,aAAa,KAAK,MAAM;IACxB,WAAW,KAAK,OAAO;GACzB,CAAC;EACS,GAfL,KAeK,CACb,CACW;;AAElB"}
@@ -1 +1 @@
1
- {"version":3,"file":"MinFromAmountUSDMessage.js","names":[],"sources":["../../../../src/components/Messages/MinFromAmountUSDMessage.tsx"],"sourcesContent":["import WarningRounded from '@mui/icons-material/WarningRounded'\nimport { type BoxProps, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { AlertMessage } from './AlertMessage.js'\n\ntype MinFromAmountUSDMessageProps = BoxProps & {\n minFromAmountUSD: number\n}\n\nexport const MinFromAmountUSDMessage: React.FC<\n MinFromAmountUSDMessageProps\n> = ({ minFromAmountUSD, ...props }) => {\n const { t } = useTranslation()\n return (\n <AlertMessage\n severity=\"warning\"\n icon={<WarningRounded />}\n title={\n <Typography\n variant=\"body2\"\n sx={{\n color: 'text.primary',\n }}\n >\n {t('warning.message.minFromAmountUSD', {\n amount: minFromAmountUSD,\n minimumFractionDigits: 0,\n })}\n </Typography>\n }\n multiline\n {...props}\n />\n )\n}\n"],"mappings":";;;;;;AASA,MAAa,2BAER,EAAE,kBAAkB,GAAG,YAAY;CACtC,MAAM,EAAE,MAAM,eAAe;CAC7B,OACE,oBAAC,cAAD;EACE,UAAS;EACT,MAAM,oBAAC,gBAAD,CAAiB,CAAA;EACvB,OACE,oBAAC,YAAD;GACE,SAAQ;GACR,IAAI,EACF,OAAO,eACT;aAEC,EAAE,oCAAoC;IACrC,QAAQ;IACR,uBAAuB;GACzB,CAAC;EACS,CAAA;EAEd,WAAA;EACA,GAAI;CACL,CAAA;AAEL"}
1
+ {"version":3,"file":"MinFromAmountUSDMessage.js","names":[],"sources":["../../../../src/components/Messages/MinFromAmountUSDMessage.tsx"],"sourcesContent":["import WarningRounded from '@mui/icons-material/WarningRounded'\nimport { type BoxProps, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { AlertMessage } from './AlertMessage.js'\n\ntype MinFromAmountUSDMessageProps = BoxProps & {\n minFromAmountUSD: number\n}\n\nexport const MinFromAmountUSDMessage: React.FC<\n MinFromAmountUSDMessageProps\n> = ({ minFromAmountUSD, ...props }) => {\n const { t } = useTranslation()\n return (\n <AlertMessage\n severity=\"warning\"\n icon={<WarningRounded />}\n title={\n <Typography\n variant=\"body2\"\n sx={{\n color: 'text.primary',\n }}\n >\n {t('warning.message.minFromAmountUSD', {\n amount: minFromAmountUSD,\n minimumFractionDigits: 0,\n })}\n </Typography>\n }\n multiline\n {...props}\n />\n )\n}\n"],"mappings":";;;;;;AASA,MAAa,2BAER,EAAE,kBAAkB,GAAG,YAAY;CACtC,MAAM,EAAE,MAAM,eAAe;CAC7B,OACE,oBAAC,cAAD;EACE,UAAS;EACT,MAAM,oBAAC,gBAAD,CAAiB,CAAA;EACvB,OACE,oBAAC,YAAD;GACE,SAAQ;GACR,IAAI,EACF,OAAO,eACT;GAEC,UAAA,EAAE,oCAAoC;IACrC,QAAQ;IACR,uBAAuB;GACzB,CAAC;EACS,CAAA;EAEd,WAAA;EACA,GAAI;CACL,CAAA;AAEL"}
@@ -1 +1 @@
1
- {"version":3,"file":"MissingRouteRequiredAccountMessage.js","names":[],"sources":["../../../../src/components/Messages/MissingRouteRequiredAccountMessage.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport Wallet from '@mui/icons-material/Wallet'\nimport type { BoxProps } from '@mui/material'\nimport { Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { AlertMessage } from './AlertMessage.js'\n\ninterface MissingRouteRequiredAccountMessageProps extends BoxProps {\n chain?: ExtendedChain\n address?: string\n}\n\nexport const MissingRouteRequiredAccountMessage: React.FC<\n MissingRouteRequiredAccountMessageProps\n> = ({ chain, address, ...props }) => {\n const { t } = useTranslation()\n\n if (!chain) {\n return null\n }\n\n return (\n <AlertMessage\n title={\n <Typography\n variant=\"body2\"\n sx={{\n px: 1,\n color: 'text.primary',\n }}\n >\n {t('info.message.missingRouteRequiredAccount', {\n chainName: chain.name,\n address: address ? `(${shortenAddress(address)})` : '',\n })}\n </Typography>\n }\n icon={<Wallet />}\n multiline\n {...props}\n />\n )\n}\n"],"mappings":";;;;;;;AAaA,MAAa,sCAER,EAAE,OAAO,SAAS,GAAG,YAAY;CACpC,MAAM,EAAE,MAAM,eAAe;CAE7B,IAAI,CAAC,OACH,OAAO;CAGT,OACE,oBAAC,cAAD;EACE,OACE,oBAAC,YAAD;GACE,SAAQ;GACR,IAAI;IACF,IAAI;IACJ,OAAO;GACT;aAEC,EAAE,4CAA4C;IAC7C,WAAW,MAAM;IACjB,SAAS,UAAU,IAAI,eAAe,OAAO,EAAE,KAAK;GACtD,CAAC;EACS,CAAA;EAEd,MAAM,oBAAC,QAAD,CAAS,CAAA;EACf,WAAA;EACA,GAAI;CACL,CAAA;AAEL"}
1
+ {"version":3,"file":"MissingRouteRequiredAccountMessage.js","names":[],"sources":["../../../../src/components/Messages/MissingRouteRequiredAccountMessage.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport Wallet from '@mui/icons-material/Wallet'\nimport type { BoxProps } from '@mui/material'\nimport { Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { AlertMessage } from './AlertMessage.js'\n\ninterface MissingRouteRequiredAccountMessageProps extends BoxProps {\n chain?: ExtendedChain\n address?: string\n}\n\nexport const MissingRouteRequiredAccountMessage: React.FC<\n MissingRouteRequiredAccountMessageProps\n> = ({ chain, address, ...props }) => {\n const { t } = useTranslation()\n\n if (!chain) {\n return null\n }\n\n return (\n <AlertMessage\n title={\n <Typography\n variant=\"body2\"\n sx={{\n px: 1,\n color: 'text.primary',\n }}\n >\n {t('info.message.missingRouteRequiredAccount', {\n chainName: chain.name,\n address: address ? `(${shortenAddress(address)})` : '',\n })}\n </Typography>\n }\n icon={<Wallet />}\n multiline\n {...props}\n />\n )\n}\n"],"mappings":";;;;;;;AAaA,MAAa,sCAER,EAAE,OAAO,SAAS,GAAG,YAAY;CACpC,MAAM,EAAE,MAAM,eAAe;CAE7B,IAAI,CAAC,OACH,OAAO;CAGT,OACE,oBAAC,cAAD;EACE,OACE,oBAAC,YAAD;GACE,SAAQ;GACR,IAAI;IACF,IAAI;IACJ,OAAO;GACT;GAEC,UAAA,EAAE,4CAA4C;IAC7C,WAAW,MAAM;IACjB,SAAS,UAAU,IAAI,eAAe,OAAO,EAAE,KAAK;GACtD,CAAC;EACS,CAAA;EAEd,MAAM,oBAAC,QAAD,CAAS,CAAA;EACf,WAAA;EACA,GAAI;CACL,CAAA;AAEL"}
@@ -1 +1 @@
1
- {"version":3,"file":"WarningMessages.js","names":[],"sources":["../../../../src/components/Messages/WarningMessages.tsx"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport type { BoxProps } from '@mui/material'\nimport { Collapse } from '@mui/material'\nimport { AccountDeployedMessage } from './AccountDeployedMessage.js'\nimport { AccountNotDeployedMessage } from './AccountNotDeployedMessage.js'\nimport { FundsSufficiencyMessage } from './FundsSufficiencyMessage.js'\nimport { GasSufficiencyMessage } from './GasSufficiencyMessage.js'\nimport { MinFromAmountUSDMessage } from './MinFromAmountUSDMessage.js'\nimport { MissingRouteRequiredAccountMessage } from './MissingRouteRequiredAccountMessage.js'\nimport { useMessageQueue } from './useMessageQueue.js'\n\ntype WarningMessagesProps = BoxProps & {\n route?: Route\n allowInteraction?: boolean\n}\n\nexport const WarningMessages: React.FC<WarningMessagesProps> = ({\n route,\n allowInteraction,\n ...props\n}) => {\n const { messages, hasMessages } = useMessageQueue(route, allowInteraction)\n\n const getMessage = () => {\n switch (messages[0]?.id) {\n case 'MISSING_ROUTE_REQUIRED_ACCOUNT':\n return (\n <MissingRouteRequiredAccountMessage\n chain={messages[0].props?.chain}\n address={messages[0].props?.address}\n {...props}\n />\n )\n case 'INSUFFICIENT_FUNDS':\n return <FundsSufficiencyMessage {...props} />\n case 'INSUFFICIENT_GAS':\n return (\n <GasSufficiencyMessage\n insufficientGas={messages[0].props?.insufficientGas}\n {...props}\n />\n )\n case 'MIN_FROM_AMOUNT_USD':\n return (\n <MinFromAmountUSDMessage\n minFromAmountUSD={messages[0].props?.minFromAmountUSD}\n {...props}\n />\n )\n case 'ACCOUNT_NOT_DEPLOYED':\n return <AccountNotDeployedMessage {...props} />\n case 'ACCOUNT_DEPLOYED':\n return <AccountDeployedMessage {...props} />\n default:\n return null\n }\n }\n\n return (\n <Collapse in={hasMessages} timeout={225} unmountOnExit mountOnEnter>\n {getMessage()}\n </Collapse>\n )\n}\n"],"mappings":";;;;;;;;;;AAgBA,MAAa,mBAAmD,EAC9D,OACA,kBACA,GAAG,YACC;CACJ,MAAM,EAAE,UAAU,gBAAgB,gBAAgB,OAAO,gBAAgB;CAEzE,MAAM,mBAAmB;EACvB,QAAQ,SAAS,EAAE,EAAE,IAArB;GACE,KAAK,kCACH,OACE,oBAAC,oCAAD;IACE,OAAO,SAAS,EAAE,CAAC,OAAO;IAC1B,SAAS,SAAS,EAAE,CAAC,OAAO;IAC5B,GAAI;GACL,CAAA;GAEL,KAAK,sBACH,OAAO,oBAAC,yBAAD,EAAyB,GAAI,MAAQ,CAAA;GAC9C,KAAK,oBACH,OACE,oBAAC,uBAAD;IACE,iBAAiB,SAAS,EAAE,CAAC,OAAO;IACpC,GAAI;GACL,CAAA;GAEL,KAAK,uBACH,OACE,oBAAC,yBAAD;IACE,kBAAkB,SAAS,EAAE,CAAC,OAAO;IACrC,GAAI;GACL,CAAA;GAEL,KAAK,wBACH,OAAO,oBAAC,2BAAD,EAA2B,GAAI,MAAQ,CAAA;GAChD,KAAK,oBACH,OAAO,oBAAC,wBAAD,EAAwB,GAAI,MAAQ,CAAA;GAC7C,SACE,OAAO;EACX;CACF;CAEA,OACE,oBAAC,UAAD;EAAU,IAAI;EAAa,SAAS;EAAK,eAAA;EAAc,cAAA;YACpD,WAAW;CACJ,CAAA;AAEd"}
1
+ {"version":3,"file":"WarningMessages.js","names":[],"sources":["../../../../src/components/Messages/WarningMessages.tsx"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport type { BoxProps } from '@mui/material'\nimport { Collapse } from '@mui/material'\nimport { AccountDeployedMessage } from './AccountDeployedMessage.js'\nimport { AccountNotDeployedMessage } from './AccountNotDeployedMessage.js'\nimport { FundsSufficiencyMessage } from './FundsSufficiencyMessage.js'\nimport { GasSufficiencyMessage } from './GasSufficiencyMessage.js'\nimport { MinFromAmountUSDMessage } from './MinFromAmountUSDMessage.js'\nimport { MissingRouteRequiredAccountMessage } from './MissingRouteRequiredAccountMessage.js'\nimport { useMessageQueue } from './useMessageQueue.js'\n\ntype WarningMessagesProps = BoxProps & {\n route?: Route\n allowInteraction?: boolean\n}\n\nexport const WarningMessages: React.FC<WarningMessagesProps> = ({\n route,\n allowInteraction,\n ...props\n}) => {\n const { messages, hasMessages } = useMessageQueue(route, allowInteraction)\n\n const getMessage = () => {\n switch (messages[0]?.id) {\n case 'MISSING_ROUTE_REQUIRED_ACCOUNT':\n return (\n <MissingRouteRequiredAccountMessage\n chain={messages[0].props?.chain}\n address={messages[0].props?.address}\n {...props}\n />\n )\n case 'INSUFFICIENT_FUNDS':\n return <FundsSufficiencyMessage {...props} />\n case 'INSUFFICIENT_GAS':\n return (\n <GasSufficiencyMessage\n insufficientGas={messages[0].props?.insufficientGas}\n {...props}\n />\n )\n case 'MIN_FROM_AMOUNT_USD':\n return (\n <MinFromAmountUSDMessage\n minFromAmountUSD={messages[0].props?.minFromAmountUSD}\n {...props}\n />\n )\n case 'ACCOUNT_NOT_DEPLOYED':\n return <AccountNotDeployedMessage {...props} />\n case 'ACCOUNT_DEPLOYED':\n return <AccountDeployedMessage {...props} />\n default:\n return null\n }\n }\n\n return (\n <Collapse in={hasMessages} timeout={225} unmountOnExit mountOnEnter>\n {getMessage()}\n </Collapse>\n )\n}\n"],"mappings":";;;;;;;;;;AAgBA,MAAa,mBAAmD,EAC9D,OACA,kBACA,GAAG,YACC;CACJ,MAAM,EAAE,UAAU,gBAAgB,gBAAgB,OAAO,gBAAgB;CAEzE,MAAM,mBAAmB;EACvB,QAAQ,SAAS,EAAE,EAAE,IAArB;GACE,KAAK,kCACH,OACE,oBAAC,oCAAD;IACE,OAAO,SAAS,EAAE,CAAC,OAAO;IAC1B,SAAS,SAAS,EAAE,CAAC,OAAO;IAC5B,GAAI;GACL,CAAA;GAEL,KAAK,sBACH,OAAO,oBAAC,yBAAD,EAAyB,GAAI,MAAQ,CAAA;GAC9C,KAAK,oBACH,OACE,oBAAC,uBAAD;IACE,iBAAiB,SAAS,EAAE,CAAC,OAAO;IACpC,GAAI;GACL,CAAA;GAEL,KAAK,uBACH,OACE,oBAAC,yBAAD;IACE,kBAAkB,SAAS,EAAE,CAAC,OAAO;IACrC,GAAI;GACL,CAAA;GAEL,KAAK,wBACH,OAAO,oBAAC,2BAAD,EAA2B,GAAI,MAAQ,CAAA;GAChD,KAAK,oBACH,OAAO,oBAAC,wBAAD,EAAwB,GAAI,MAAQ,CAAA;GAC7C,SACE,OAAO;EACX;CACF;CAEA,OACE,oBAAC,UAAD;EAAU,IAAI;EAAa,SAAS;EAAK,eAAA;EAAc,cAAA;EACpD,UAAA,WAAW;CACJ,CAAA;AAEd"}
@@ -1 +1 @@
1
- {"version":3,"file":"NotFound.js","names":[],"sources":["../../../src/components/NotFound.tsx"],"sourcesContent":["import Block from '@mui/icons-material/Block'\nimport { Box, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\n\nexport const NotFound: React.FC = () => {\n const { t } = useTranslation()\n return (\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n flexDirection: 'column',\n flex: 1,\n padding: 3,\n }}\n >\n <Typography\n sx={{\n fontSize: 48,\n }}\n >\n <Block fontSize=\"inherit\" />\n </Typography>\n <Typography\n sx={{\n fontSize: 18,\n fontWeight: 700,\n }}\n >\n {t('tooltip.notFound.title')}\n </Typography>\n <Typography\n sx={{\n fontSize: 14,\n color: 'text.secondary',\n textAlign: 'center',\n mt: 2,\n }}\n >\n {t('tooltip.notFound.text')}\n </Typography>\n </Box>\n )\n}\n"],"mappings":";;;;;AAIA,MAAa,iBAA2B;CACtC,MAAM,EAAE,MAAM,eAAe;CAC7B,OACE,qBAAC,KAAD;EACE,IAAI;GACF,SAAS;GACT,gBAAgB;GAChB,YAAY;GACZ,eAAe;GACf,MAAM;GACN,SAAS;EACX;YARF;GAUE,oBAAC,YAAD;IACE,IAAI,EACF,UAAU,GACZ;cAEA,oBAAC,OAAD,EAAO,UAAS,UAAW,CAAA;GACjB,CAAA;GACZ,oBAAC,YAAD;IACE,IAAI;KACF,UAAU;KACV,YAAY;IACd;cAEC,EAAE,wBAAwB;GACjB,CAAA;GACZ,oBAAC,YAAD;IACE,IAAI;KACF,UAAU;KACV,OAAO;KACP,WAAW;KACX,IAAI;IACN;cAEC,EAAE,uBAAuB;GAChB,CAAA;EACT;;AAET"}
1
+ {"version":3,"file":"NotFound.js","names":[],"sources":["../../../src/components/NotFound.tsx"],"sourcesContent":["import Block from '@mui/icons-material/Block'\nimport { Box, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\n\nexport const NotFound: React.FC = () => {\n const { t } = useTranslation()\n return (\n <Box\n sx={{\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n flexDirection: 'column',\n flex: 1,\n padding: 3,\n }}\n >\n <Typography\n sx={{\n fontSize: 48,\n }}\n >\n <Block fontSize=\"inherit\" />\n </Typography>\n <Typography\n sx={{\n fontSize: 18,\n fontWeight: 700,\n }}\n >\n {t('tooltip.notFound.title')}\n </Typography>\n <Typography\n sx={{\n fontSize: 14,\n color: 'text.secondary',\n textAlign: 'center',\n mt: 2,\n }}\n >\n {t('tooltip.notFound.text')}\n </Typography>\n </Box>\n )\n}\n"],"mappings":";;;;;AAIA,MAAa,iBAA2B;CACtC,MAAM,EAAE,MAAM,eAAe;CAC7B,OACE,qBAAC,KAAD;EACE,IAAI;GACF,SAAS;GACT,gBAAgB;GAChB,YAAY;GACZ,eAAe;GACf,MAAM;GACN,SAAS;EACX;EARF,UAAA;GAUE,oBAAC,YAAD;IACE,IAAI,EACF,UAAU,GACZ;IAEA,UAAA,oBAAC,OAAD,EAAO,UAAS,UAAW,CAAA;GACjB,CAAA;GACZ,oBAAC,YAAD;IACE,IAAI;KACF,UAAU;KACV,YAAY;IACd;IAEC,UAAA,EAAE,wBAAwB;GACjB,CAAA;GACZ,oBAAC,YAAD;IACE,IAAI;KACF,UAAU;KACV,OAAO;KACP,WAAW;KACX,IAAI;IACN;IAEC,UAAA,EAAE,uBAAuB;GAChB,CAAA;EACT;;AAET"}
@@ -1 +1 @@
1
- {"version":3,"file":"PoweredBy.js","names":["Link"],"sources":["../../../../src/components/PoweredBy/PoweredBy.tsx"],"sourcesContent":["import { Box, Tooltip, Typography } from '@mui/material'\nimport { version } from '../../config/version.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { Link } from './PoweredBy.style.js'\n\nconst poweredByConfig = {\n default: {\n url: 'https://li.fi',\n text: 'LI.FI',\n },\n jumper: {\n url: 'https://jumper.exchange',\n text: 'Jumper',\n },\n}\n\nexport const PoweredBy: React.FC = () => {\n const { poweredBy = 'default' } = useWidgetConfig()\n\n return (\n <Box\n sx={{\n pt: 1,\n pb: 2,\n flex: 1,\n display: 'flex',\n alignItems: 'flex-end',\n justifyContent: 'flex-end',\n }}\n >\n <Tooltip title={`v${version}`} enterDelay={1000}>\n <Link\n href={poweredByConfig[poweredBy].url}\n target=\"_blank\"\n underline=\"none\"\n color=\"text.primary\"\n >\n <Typography\n sx={{\n color: 'text.secondary',\n fontSize: 12,\n fontWeight: 500,\n px: 0.5,\n }}\n >\n Powered by\n </Typography>\n <Typography\n sx={{\n color: 'text.primary',\n fontSize: 12,\n fontWeight: 600,\n }}\n >\n {poweredByConfig[poweredBy].text}\n </Typography>\n </Link>\n </Tooltip>\n </Box>\n )\n}\n"],"mappings":";;;;;;AAKA,MAAM,kBAAkB;CACtB,SAAS;EACP,KAAK;EACL,MAAM;CACR;CACA,QAAQ;EACN,KAAK;EACL,MAAM;CACR;AACF;AAEA,MAAa,kBAA4B;CACvC,MAAM,EAAE,YAAY,cAAc,gBAAgB;CAElD,OACE,oBAAC,KAAD;EACE,IAAI;GACF,IAAI;GACJ,IAAI;GACJ,MAAM;GACN,SAAS;GACT,YAAY;GACZ,gBAAgB;EAClB;YAEA,oBAAC,SAAD;GAAS,OAAO,IAAI;GAAW,YAAY;aACzC,qBAACA,QAAD;IACE,MAAM,gBAAgB,UAAU,CAAC;IACjC,QAAO;IACP,WAAU;IACV,OAAM;cAJR,CAME,oBAAC,YAAD;KACE,IAAI;MACF,OAAO;MACP,UAAU;MACV,YAAY;MACZ,IAAI;KACN;eACD;IAEW,CAAA,GACZ,oBAAC,YAAD;KACE,IAAI;MACF,OAAO;MACP,UAAU;MACV,YAAY;KACd;eAEC,gBAAgB,UAAU,CAAC;IAClB,CAAA,CACR;;EACC,CAAA;CACN,CAAA;AAET"}
1
+ {"version":3,"file":"PoweredBy.js","names":["Link"],"sources":["../../../../src/components/PoweredBy/PoweredBy.tsx"],"sourcesContent":["import { Box, Tooltip, Typography } from '@mui/material'\nimport { version } from '../../config/version.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { Link } from './PoweredBy.style.js'\n\nconst poweredByConfig = {\n default: {\n url: 'https://li.fi',\n text: 'LI.FI',\n },\n jumper: {\n url: 'https://jumper.exchange',\n text: 'Jumper',\n },\n}\n\nexport const PoweredBy: React.FC = () => {\n const { poweredBy = 'default' } = useWidgetConfig()\n\n return (\n <Box\n sx={{\n pt: 1,\n pb: 2,\n flex: 1,\n display: 'flex',\n alignItems: 'flex-end',\n justifyContent: 'flex-end',\n }}\n >\n <Tooltip title={`v${version}`} enterDelay={1000}>\n <Link\n href={poweredByConfig[poweredBy].url}\n target=\"_blank\"\n underline=\"none\"\n color=\"text.primary\"\n >\n <Typography\n sx={{\n color: 'text.secondary',\n fontSize: 12,\n fontWeight: 500,\n px: 0.5,\n }}\n >\n Powered by\n </Typography>\n <Typography\n sx={{\n color: 'text.primary',\n fontSize: 12,\n fontWeight: 600,\n }}\n >\n {poweredByConfig[poweredBy].text}\n </Typography>\n </Link>\n </Tooltip>\n </Box>\n )\n}\n"],"mappings":";;;;;;AAKA,MAAM,kBAAkB;CACtB,SAAS;EACP,KAAK;EACL,MAAM;CACR;CACA,QAAQ;EACN,KAAK;EACL,MAAM;CACR;AACF;AAEA,MAAa,kBAA4B;CACvC,MAAM,EAAE,YAAY,cAAc,gBAAgB;CAElD,OACE,oBAAC,KAAD;EACE,IAAI;GACF,IAAI;GACJ,IAAI;GACJ,MAAM;GACN,SAAS;GACT,YAAY;GACZ,gBAAgB;EAClB;EAEA,UAAA,oBAAC,SAAD;GAAS,OAAO,IAAI;GAAW,YAAY;GACzC,UAAA,qBAACA,QAAD;IACE,MAAM,gBAAgB,UAAU,CAAC;IACjC,QAAO;IACP,WAAU;IACV,OAAM;IAJR,UAAA,CAME,oBAAC,YAAD;KACE,IAAI;MACF,OAAO;MACP,UAAU;MACV,YAAY;MACZ,IAAI;KACN;KACD,UAAA;IAEW,CAAA,GACZ,oBAAC,YAAD;KACE,IAAI;MACF,OAAO;MACP,UAAU;MACV,YAAY;KACd;KAEC,UAAA,gBAAgB,UAAU,CAAC;IAClB,CAAA,CACR;;EACC,CAAA;CACN,CAAA;AAET"}
@@ -1 +1 @@
1
- {"version":3,"file":"ProgressToNextUpdate.js","names":[],"sources":["../../../src/components/ProgressToNextUpdate.tsx"],"sourcesContent":["import type { IconButtonProps } from '@mui/material'\nimport { Box, CircularProgress, IconButton, Tooltip } from '@mui/material'\nimport { useEffect, useState } from 'react'\nimport { Trans } from 'react-i18next'\n\nconst getProgressValue = (updatedAt: number, timeToUpdate: number) =>\n updatedAt ? Math.min(100, ((Date.now() - updatedAt) / timeToUpdate) * 100) : 0\n\nconst getSecondsToUpdate = (updatedAt: number, timeToUpdate: number) =>\n Math.max(Math.round((timeToUpdate - (Date.now() - updatedAt)) / 1000), 0)\n\nexport const ProgressToNextUpdate: React.FC<\n {\n updatedAt: number\n timeToUpdate: number\n isLoading?: boolean\n } & IconButtonProps\n> = ({ updatedAt, timeToUpdate, isLoading, onClick, ...other }) => {\n const [value, setValue] = useState(() =>\n getProgressValue(updatedAt, timeToUpdate)\n )\n\n useEffect(() => {\n setValue(getProgressValue(updatedAt, timeToUpdate))\n const id = setInterval(() => {\n const time = getProgressValue(updatedAt, timeToUpdate)\n setValue(time)\n if (time >= 100) {\n clearInterval(id)\n }\n }, 1000)\n return () => clearInterval(id)\n }, [timeToUpdate, updatedAt])\n\n useEffect(() => {\n if (isLoading) {\n setValue(0)\n }\n }, [isLoading])\n\n return (\n <IconButton onClick={onClick} disabled={isLoading} {...other}>\n <Tooltip\n title={\n <Trans\n i18nKey=\"tooltip.progressToNextUpdate\"\n values={{\n value: getSecondsToUpdate(updatedAt, timeToUpdate),\n }}\n // biome-ignore lint/correctness/useJsxKeyInIterable: allowed in react-i18next\n components={[<br />]}\n />\n }\n >\n <Box\n sx={{\n display: 'grid',\n position: 'relative',\n placeItems: 'center',\n width: 24,\n height: 24,\n }}\n >\n <CircularProgress\n variant=\"determinate\"\n size={24}\n value={100}\n sx={(theme) => ({\n position: 'absolute',\n color: theme.vars.palette.grey[300],\n ...theme.applyStyles('dark', {\n color: theme.vars.palette.grey[800],\n }),\n })}\n />\n <CircularProgress\n variant={isLoading ? 'indeterminate' : 'determinate'}\n size={24}\n value={value}\n sx={(theme) => ({\n opacity: value === 100 && !isLoading ? 0.5 : 1,\n color: theme.vars.palette.primary.main,\n ...theme.applyStyles('dark', {\n color: theme.vars.palette.primary.light,\n }),\n })}\n />\n </Box>\n </Tooltip>\n </IconButton>\n )\n}\n"],"mappings":";;;;;AAKA,MAAM,oBAAoB,WAAmB,iBAC3C,YAAY,KAAK,IAAI,MAAO,KAAK,IAAI,IAAI,aAAa,eAAgB,GAAG,IAAI;AAE/E,MAAM,sBAAsB,WAAmB,iBAC7C,KAAK,IAAI,KAAK,OAAO,gBAAgB,KAAK,IAAI,IAAI,cAAc,GAAI,GAAG,CAAC;AAE1E,MAAa,wBAMR,EAAE,WAAW,cAAc,WAAW,SAAS,GAAG,YAAY;CACjE,MAAM,CAAC,OAAO,YAAY,eACxB,iBAAiB,WAAW,YAAY,CAC1C;CAEA,gBAAgB;EACd,SAAS,iBAAiB,WAAW,YAAY,CAAC;EAClD,MAAM,KAAK,kBAAkB;GAC3B,MAAM,OAAO,iBAAiB,WAAW,YAAY;GACrD,SAAS,IAAI;GACb,IAAI,QAAQ,KACV,cAAc,EAAE;EAEpB,GAAG,GAAI;EACP,aAAa,cAAc,EAAE;CAC/B,GAAG,CAAC,cAAc,SAAS,CAAC;CAE5B,gBAAgB;EACd,IAAI,WACF,SAAS,CAAC;CAEd,GAAG,CAAC,SAAS,CAAC;CAEd,OACE,oBAAC,YAAD;EAAqB;EAAS,UAAU;EAAW,GAAI;YACrD,oBAAC,SAAD;GACE,OACE,oBAAC,OAAD;IACE,SAAQ;IACR,QAAQ,EACN,OAAO,mBAAmB,WAAW,YAAY,EACnD;IAEA,YAAY,CAAC,oBAAC,MAAD,CAAK,CAAA,CAAC;GACpB,CAAA;aAGH,qBAAC,KAAD;IACE,IAAI;KACF,SAAS;KACT,UAAU;KACV,YAAY;KACZ,OAAO;KACP,QAAQ;IACV;cAPF,CASE,oBAAC,kBAAD;KACE,SAAQ;KACR,MAAM;KACN,OAAO;KACP,KAAK,WAAW;MACd,UAAU;MACV,OAAO,MAAM,KAAK,QAAQ,KAAK;MAC/B,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,MAAM,KAAK,QAAQ,KAAK,KACjC,CAAC;KACH;IACD,CAAA,GACD,oBAAC,kBAAD;KACE,SAAS,YAAY,kBAAkB;KACvC,MAAM;KACC;KACP,KAAK,WAAW;MACd,SAAS,UAAU,OAAO,CAAC,YAAY,KAAM;MAC7C,OAAO,MAAM,KAAK,QAAQ,QAAQ;MAClC,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,MAAM,KAAK,QAAQ,QAAQ,MACpC,CAAC;KACH;IACD,CAAA,CACE;;EACE,CAAA;CACC,CAAA;AAEhB"}
1
+ {"version":3,"file":"ProgressToNextUpdate.js","names":[],"sources":["../../../src/components/ProgressToNextUpdate.tsx"],"sourcesContent":["import type { IconButtonProps } from '@mui/material'\nimport { Box, CircularProgress, IconButton, Tooltip } from '@mui/material'\nimport { useEffect, useState } from 'react'\nimport { Trans } from 'react-i18next'\n\nconst getProgressValue = (updatedAt: number, timeToUpdate: number) =>\n updatedAt ? Math.min(100, ((Date.now() - updatedAt) / timeToUpdate) * 100) : 0\n\nconst getSecondsToUpdate = (updatedAt: number, timeToUpdate: number) =>\n Math.max(Math.round((timeToUpdate - (Date.now() - updatedAt)) / 1000), 0)\n\nexport const ProgressToNextUpdate: React.FC<\n {\n updatedAt: number\n timeToUpdate: number\n isLoading?: boolean\n } & IconButtonProps\n> = ({ updatedAt, timeToUpdate, isLoading, onClick, ...other }) => {\n const [value, setValue] = useState(() =>\n getProgressValue(updatedAt, timeToUpdate)\n )\n\n useEffect(() => {\n setValue(getProgressValue(updatedAt, timeToUpdate))\n const id = setInterval(() => {\n const time = getProgressValue(updatedAt, timeToUpdate)\n setValue(time)\n if (time >= 100) {\n clearInterval(id)\n }\n }, 1000)\n return () => clearInterval(id)\n }, [timeToUpdate, updatedAt])\n\n useEffect(() => {\n if (isLoading) {\n setValue(0)\n }\n }, [isLoading])\n\n return (\n <IconButton onClick={onClick} disabled={isLoading} {...other}>\n <Tooltip\n title={\n <Trans\n i18nKey=\"tooltip.progressToNextUpdate\"\n values={{\n value: getSecondsToUpdate(updatedAt, timeToUpdate),\n }}\n // biome-ignore lint/correctness/useJsxKeyInIterable: allowed in react-i18next\n components={[<br />]}\n />\n }\n >\n <Box\n sx={{\n display: 'grid',\n position: 'relative',\n placeItems: 'center',\n width: 24,\n height: 24,\n }}\n >\n <CircularProgress\n variant=\"determinate\"\n size={24}\n value={100}\n sx={(theme) => ({\n position: 'absolute',\n color: theme.vars.palette.grey[300],\n ...theme.applyStyles('dark', {\n color: theme.vars.palette.grey[800],\n }),\n })}\n />\n <CircularProgress\n variant={isLoading ? 'indeterminate' : 'determinate'}\n size={24}\n value={value}\n sx={(theme) => ({\n opacity: value === 100 && !isLoading ? 0.5 : 1,\n color: theme.vars.palette.primary.main,\n ...theme.applyStyles('dark', {\n color: theme.vars.palette.primary.light,\n }),\n })}\n />\n </Box>\n </Tooltip>\n </IconButton>\n )\n}\n"],"mappings":";;;;;AAKA,MAAM,oBAAoB,WAAmB,iBAC3C,YAAY,KAAK,IAAI,MAAO,KAAK,IAAI,IAAI,aAAa,eAAgB,GAAG,IAAI;AAE/E,MAAM,sBAAsB,WAAmB,iBAC7C,KAAK,IAAI,KAAK,OAAO,gBAAgB,KAAK,IAAI,IAAI,cAAc,GAAI,GAAG,CAAC;AAE1E,MAAa,wBAMR,EAAE,WAAW,cAAc,WAAW,SAAS,GAAG,YAAY;CACjE,MAAM,CAAC,OAAO,YAAY,eACxB,iBAAiB,WAAW,YAAY,CAC1C;CAEA,gBAAgB;EACd,SAAS,iBAAiB,WAAW,YAAY,CAAC;EAClD,MAAM,KAAK,kBAAkB;GAC3B,MAAM,OAAO,iBAAiB,WAAW,YAAY;GACrD,SAAS,IAAI;GACb,IAAI,QAAQ,KACV,cAAc,EAAE;EAEpB,GAAG,GAAI;EACP,aAAa,cAAc,EAAE;CAC/B,GAAG,CAAC,cAAc,SAAS,CAAC;CAE5B,gBAAgB;EACd,IAAI,WACF,SAAS,CAAC;CAEd,GAAG,CAAC,SAAS,CAAC;CAEd,OACE,oBAAC,YAAD;EAAqB;EAAS,UAAU;EAAW,GAAI;EACrD,UAAA,oBAAC,SAAD;GACE,OACE,oBAAC,OAAD;IACE,SAAQ;IACR,QAAQ,EACN,OAAO,mBAAmB,WAAW,YAAY,EACnD;IAEA,YAAY,CAAC,oBAAC,MAAD,CAAK,CAAA,CAAC;GACpB,CAAA;GAGH,UAAA,qBAAC,KAAD;IACE,IAAI;KACF,SAAS;KACT,UAAU;KACV,YAAY;KACZ,OAAO;KACP,QAAQ;IACV;IAPF,UAAA,CASE,oBAAC,kBAAD;KACE,SAAQ;KACR,MAAM;KACN,OAAO;KACP,KAAK,WAAW;MACd,UAAU;MACV,OAAO,MAAM,KAAK,QAAQ,KAAK;MAC/B,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,MAAM,KAAK,QAAQ,KAAK,KACjC,CAAC;KACH;IACD,CAAA,GACD,oBAAC,kBAAD;KACE,SAAS,YAAY,kBAAkB;KACvC,MAAM;KACC;KACP,KAAK,WAAW;MACd,SAAS,UAAU,OAAO,CAAC,YAAY,KAAM;MAC7C,OAAO,MAAM,KAAK,QAAQ,QAAQ;MAClC,GAAG,MAAM,YAAY,QAAQ,EAC3B,OAAO,MAAM,KAAK,QAAQ,QAAQ,MACpC,CAAC;KACH;IACD,CAAA,CACE;;EACE,CAAA;CACC,CAAA;AAEhB"}
@@ -1 +1 @@
1
- {"version":3,"file":"ReverseTokensButton.js","names":[],"sources":["../../../../src/components/ReverseTokensButton/ReverseTokensButton.tsx"],"sourcesContent":["import ArrowForward from '@mui/icons-material/ArrowForward'\nimport type { JSX } from 'react'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useToAddressAutoPopulate } from '../../hooks/useToAddressAutoPopulate.js'\nimport { useToAddressReset } from '../../hooks/useToAddressReset.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { IconCard, ReverseContainer } from './ReverseTokensButton.style.js'\n\nexport const ReverseTokensButton = (): JSX.Element => {\n const { setFieldValue, getFieldValues } = useFieldActions()\n const { getChainById } = useAvailableChains()\n const { tryResetToAddress } = useToAddressReset()\n const autoPopulateToAddress = useToAddressAutoPopulate()\n\n const handleClick = () => {\n const [fromChainId, fromToken, toChainId, toToken, toAddress] =\n getFieldValues(\n 'fromChain',\n 'fromToken',\n 'toChain',\n 'toToken',\n 'toAddress'\n )\n setFieldValue('fromAmount', '', { isTouched: true })\n setFieldValue('fromChain', toChainId, { isTouched: true })\n setFieldValue('fromToken', toToken, { isTouched: true })\n setFieldValue('toChain', fromChainId, { isTouched: true })\n setFieldValue('toToken', fromToken, { isTouched: true })\n\n const autoPopulatedToAddress = autoPopulateToAddress({\n formType: 'from',\n selectedToAddress: toAddress,\n selectedChainId: toChainId,\n selectedOppositeChainId: fromChainId,\n selectedOppositeTokenAddress: fromToken,\n })\n\n // Returning early as a compatible connected wallet was found, and toAddress has been populated\n if (autoPopulatedToAddress) {\n return\n }\n\n // Auto-population applies in certain scenarios, but otherwise,\n // we attempt to reset `toAddress` when bridging across ecosystems\n // fromChainId becomes toChainId after using reverse\n const toChain = getChainById(fromChainId)\n if (toChain) {\n tryResetToAddress(toChain)\n }\n }\n return (\n <ReverseContainer>\n <IconCard\n data-testid=\"widget-reverse-tokens-button\"\n onClick={handleClick}\n >\n <ArrowForward fontSize=\"inherit\" />\n </IconCard>\n </ReverseContainer>\n )\n}\n"],"mappings":";;;;;;;;AAQA,MAAa,4BAAyC;CACpD,MAAM,EAAE,eAAe,mBAAmB,gBAAgB;CAC1D,MAAM,EAAE,iBAAiB,mBAAmB;CAC5C,MAAM,EAAE,sBAAsB,kBAAkB;CAChD,MAAM,wBAAwB,yBAAyB;CAEvD,MAAM,oBAAoB;EACxB,MAAM,CAAC,aAAa,WAAW,WAAW,SAAS,aACjD,eACE,aACA,aACA,WACA,WACA,WACF;EACF,cAAc,cAAc,IAAI,EAAE,WAAW,KAAK,CAAC;EACnD,cAAc,aAAa,WAAW,EAAE,WAAW,KAAK,CAAC;EACzD,cAAc,aAAa,SAAS,EAAE,WAAW,KAAK,CAAC;EACvD,cAAc,WAAW,aAAa,EAAE,WAAW,KAAK,CAAC;EACzD,cAAc,WAAW,WAAW,EAAE,WAAW,KAAK,CAAC;EAWvD,IAT+B,sBAAsB;GACnD,UAAU;GACV,mBAAmB;GACnB,iBAAiB;GACjB,yBAAyB;GACzB,8BAA8B;EAChC,CAGyB,GACvB;EAMF,MAAM,UAAU,aAAa,WAAW;EACxC,IAAI,SACF,kBAAkB,OAAO;CAE7B;CACA,OACE,oBAAC,kBAAD,EAAA,UACE,oBAAC,UAAD;EACE,eAAY;EACZ,SAAS;YAET,oBAAC,cAAD,EAAc,UAAS,UAAW,CAAA;CAC1B,CAAA,EACM,CAAA;AAEtB"}
1
+ {"version":3,"file":"ReverseTokensButton.js","names":[],"sources":["../../../../src/components/ReverseTokensButton/ReverseTokensButton.tsx"],"sourcesContent":["import ArrowForward from '@mui/icons-material/ArrowForward'\nimport type { JSX } from 'react'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useToAddressAutoPopulate } from '../../hooks/useToAddressAutoPopulate.js'\nimport { useToAddressReset } from '../../hooks/useToAddressReset.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { IconCard, ReverseContainer } from './ReverseTokensButton.style.js'\n\nexport const ReverseTokensButton = (): JSX.Element => {\n const { setFieldValue, getFieldValues } = useFieldActions()\n const { getChainById } = useAvailableChains()\n const { tryResetToAddress } = useToAddressReset()\n const autoPopulateToAddress = useToAddressAutoPopulate()\n\n const handleClick = () => {\n const [fromChainId, fromToken, toChainId, toToken, toAddress] =\n getFieldValues(\n 'fromChain',\n 'fromToken',\n 'toChain',\n 'toToken',\n 'toAddress'\n )\n setFieldValue('fromAmount', '', { isTouched: true })\n setFieldValue('fromChain', toChainId, { isTouched: true })\n setFieldValue('fromToken', toToken, { isTouched: true })\n setFieldValue('toChain', fromChainId, { isTouched: true })\n setFieldValue('toToken', fromToken, { isTouched: true })\n\n const autoPopulatedToAddress = autoPopulateToAddress({\n formType: 'from',\n selectedToAddress: toAddress,\n selectedChainId: toChainId,\n selectedOppositeChainId: fromChainId,\n selectedOppositeTokenAddress: fromToken,\n })\n\n // Returning early as a compatible connected wallet was found, and toAddress has been populated\n if (autoPopulatedToAddress) {\n return\n }\n\n // Auto-population applies in certain scenarios, but otherwise,\n // we attempt to reset `toAddress` when bridging across ecosystems\n // fromChainId becomes toChainId after using reverse\n const toChain = getChainById(fromChainId)\n if (toChain) {\n tryResetToAddress(toChain)\n }\n }\n return (\n <ReverseContainer>\n <IconCard\n data-testid=\"widget-reverse-tokens-button\"\n onClick={handleClick}\n >\n <ArrowForward fontSize=\"inherit\" />\n </IconCard>\n </ReverseContainer>\n )\n}\n"],"mappings":";;;;;;;;AAQA,MAAa,4BAAyC;CACpD,MAAM,EAAE,eAAe,mBAAmB,gBAAgB;CAC1D,MAAM,EAAE,iBAAiB,mBAAmB;CAC5C,MAAM,EAAE,sBAAsB,kBAAkB;CAChD,MAAM,wBAAwB,yBAAyB;CAEvD,MAAM,oBAAoB;EACxB,MAAM,CAAC,aAAa,WAAW,WAAW,SAAS,aACjD,eACE,aACA,aACA,WACA,WACA,WACF;EACF,cAAc,cAAc,IAAI,EAAE,WAAW,KAAK,CAAC;EACnD,cAAc,aAAa,WAAW,EAAE,WAAW,KAAK,CAAC;EACzD,cAAc,aAAa,SAAS,EAAE,WAAW,KAAK,CAAC;EACvD,cAAc,WAAW,aAAa,EAAE,WAAW,KAAK,CAAC;EACzD,cAAc,WAAW,WAAW,EAAE,WAAW,KAAK,CAAC;EAWvD,IAT+B,sBAAsB;GACnD,UAAU;GACV,mBAAmB;GACnB,iBAAiB;GACjB,yBAAyB;GACzB,8BAA8B;EAChC,CAGyB,GACvB;EAMF,MAAM,UAAU,aAAa,WAAW;EACxC,IAAI,SACF,kBAAkB,OAAO;CAE7B;CACA,OACE,oBAAC,kBAAD,EAAA,UACE,oBAAC,UAAD;EACE,eAAY;EACZ,SAAS;EAET,UAAA,oBAAC,cAAD,EAAc,UAAS,UAAW,CAAA;CAC1B,CAAA,EACM,CAAA;AAEtB"}
@@ -1 +1 @@
1
- {"version":3,"file":"RouteCard.js","names":["Card"],"sources":["../../../../src/components/RouteCard/RouteCard.tsx"],"sourcesContent":["import type { TokenAmount } from '@lifi/sdk'\nimport { Box, Tooltip } from '@mui/material'\nimport { useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport type { RouteLabel } from '../../types/widget.js'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { Card } from '../Card/Card.js'\nimport { CardLabel, CardLabelTypography } from '../Card/CardLabel.js'\nimport { getMatchingLabels } from './getMatchingLabels.js'\nimport { RouteToken } from './RouteToken.js'\nimport type { RouteCardProps } from './types.js'\n\nexport const RouteCard: React.FC<\n RouteCardProps & Omit<CardProps, 'variant'>\n> = ({\n route,\n active,\n variant = 'default',\n expanded: defaultExpanded,\n ...other\n}) => {\n const { t } = useTranslation()\n const { mode, modeOptions, routeLabels, hiddenUI } = useWidgetConfig()\n\n const token: TokenAmount =\n mode === 'custom' && modeOptions?.custom?.type !== 'deposit'\n ? { ...route.fromToken, amount: BigInt(route.fromAmount) }\n : { ...route.toToken, amount: BigInt(route.toAmount) }\n const impactToken: TokenAmount | undefined =\n mode !== 'custom' && !hiddenUI?.routeCardPriceImpact\n ? { ...route.fromToken, amount: BigInt(route.fromAmount) }\n : undefined\n\n const [tags, customLabels]: [string[], RouteLabel[]] = useMemo(() => {\n const mainTag = route.tags?.find(\n (tag) => tag === 'CHEAPEST' || tag === 'FASTEST'\n )\n const tags: string[] = mainTag ? [mainTag] : []\n const { combinedFeesUSD } = getAccumulatedFeeCostsBreakdown(route)\n if (!combinedFeesUSD) {\n tags.push('gasless')\n }\n if (route.steps.length > 1) {\n tags.push('multistep')\n }\n const customLabels = getMatchingLabels(route, routeLabels)\n return [tags, customLabels]\n }, [route.tags, route, routeLabels])\n\n const cardContent = (\n <Box\n sx={{\n flex: 1,\n }}\n >\n {mode !== 'refuel' && (tags.length || customLabels.length) ? (\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n mb: 2,\n gap: 1,\n flexWrap: 'wrap',\n }}\n >\n {tags?.map((tag) => {\n const formattedTag = tag.toLowerCase()\n const tooltipKey = `tooltip.${formattedTag}` as any\n const tooltipText = t(tooltipKey)\n const hasTooltip = tooltipText !== tooltipKey\n\n const cardLabel = (\n <CardLabel\n variant={\n tag === 'gasless'\n ? 'success'\n : active\n ? 'secondary'\n : undefined\n }\n key={tag}\n >\n <CardLabelTypography>\n {t(`main.tags.${formattedTag}` as any)}\n </CardLabelTypography>\n </CardLabel>\n )\n\n return hasTooltip ? (\n <Tooltip key={tag} title={tooltipText} arrow placement=\"top\">\n {cardLabel}\n </Tooltip>\n ) : (\n cardLabel\n )\n })}\n {customLabels.map((label, index) => (\n <CardLabel key={index} sx={label.sx}>\n <CardLabelTypography>{label.text}</CardLabelTypography>\n </CardLabel>\n ))}\n </Box>\n ) : null}\n <RouteToken\n route={route}\n token={token}\n impactToken={impactToken}\n defaultExpanded={defaultExpanded}\n showEssentials\n />\n </Box>\n )\n\n return mode === 'refuel' || variant === 'cardless' ? (\n cardContent\n ) : (\n <Card\n type={active ? 'selected' : 'default'}\n selectionColor=\"secondary\"\n indented\n {...other}\n >\n {cardContent}\n </Card>\n )\n}\n"],"mappings":";;;;;;;;;;;AAcA,MAAa,aAER,EACH,OACA,QACA,UAAU,WACV,UAAU,iBACV,GAAG,YACC;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,MAAM,aAAa,aAAa,aAAa,gBAAgB;CAErE,MAAM,QACJ,SAAS,YAAY,aAAa,QAAQ,SAAS,YAC/C;EAAE,GAAG,MAAM;EAAW,QAAQ,OAAO,MAAM,UAAU;CAAE,IACvD;EAAE,GAAG,MAAM;EAAS,QAAQ,OAAO,MAAM,QAAQ;CAAE;CACzD,MAAM,cACJ,SAAS,YAAY,CAAC,UAAU,uBAC5B;EAAE,GAAG,MAAM;EAAW,QAAQ,OAAO,MAAM,UAAU;CAAE,IACvD,KAAA;CAEN,MAAM,CAAC,MAAM,gBAA0C,cAAc;EACnE,MAAM,UAAU,MAAM,MAAM,MACzB,QAAQ,QAAQ,cAAc,QAAQ,SACzC;EACA,MAAM,OAAiB,UAAU,CAAC,OAAO,IAAI,CAAC;EAC9C,MAAM,EAAE,oBAAoB,gCAAgC,KAAK;EACjE,IAAI,CAAC,iBACH,KAAK,KAAK,SAAS;EAErB,IAAI,MAAM,MAAM,SAAS,GACvB,KAAK,KAAK,WAAW;EAGvB,OAAO,CAAC,MADa,kBAAkB,OAAO,WACrB,CAAC;CAC5B,GAAG;EAAC,MAAM;EAAM;EAAO;CAAW,CAAC;CAEnC,MAAM,cACJ,qBAAC,KAAD;EACE,IAAI,EACF,MAAM,EACR;YAHF,CAKG,SAAS,aAAa,KAAK,UAAU,aAAa,UACjD,qBAAC,KAAD;GACE,IAAI;IACF,SAAS;IACT,YAAY;IACZ,IAAI;IACJ,KAAK;IACL,UAAU;GACZ;aAPF,CASG,MAAM,KAAK,QAAQ;IAClB,MAAM,eAAe,IAAI,YAAY;IACrC,MAAM,aAAa,WAAW;IAC9B,MAAM,cAAc,EAAE,UAAU;IAChC,MAAM,aAAa,gBAAgB;IAEnC,MAAM,YACJ,oBAAC,WAAD;KACE,SACE,QAAQ,YACJ,YACA,SACE,cACA,KAAA;eAIR,oBAAC,qBAAD,EAAA,UACG,EAAE,aAAa,cAAqB,EAClB,CAAA;IACZ,GALJ,GAKI;IAGb,OAAO,aACL,oBAAC,SAAD;KAAmB,OAAO;KAAa,OAAA;KAAM,WAAU;eACpD;IACM,GAFK,GAEL,IAET;GAEJ,CAAC,GACA,aAAa,KAAK,OAAO,UACxB,oBAAC,WAAD;IAAuB,IAAI,MAAM;cAC/B,oBAAC,qBAAD,EAAA,UAAsB,MAAM,KAA0B,CAAA;GAC7C,GAFK,KAEL,CACZ,CACE;OACH,MACJ,oBAAC,YAAD;GACS;GACA;GACM;GACI;GACjB,gBAAA;EACD,CAAA,CACE;;CAGP,OAAO,SAAS,YAAY,YAAY,aACtC,cAEA,oBAACA,QAAD;EACE,MAAM,SAAS,aAAa;EAC5B,gBAAe;EACf,UAAA;EACA,GAAI;YAEH;CACG,CAAA;AAEV"}
1
+ {"version":3,"file":"RouteCard.js","names":["Card"],"sources":["../../../../src/components/RouteCard/RouteCard.tsx"],"sourcesContent":["import type { TokenAmount } from '@lifi/sdk'\nimport { Box, Tooltip } from '@mui/material'\nimport { useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport type { RouteLabel } from '../../types/widget.js'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { Card } from '../Card/Card.js'\nimport { CardLabel, CardLabelTypography } from '../Card/CardLabel.js'\nimport { getMatchingLabels } from './getMatchingLabels.js'\nimport { RouteToken } from './RouteToken.js'\nimport type { RouteCardProps } from './types.js'\n\nexport const RouteCard: React.FC<\n RouteCardProps & Omit<CardProps, 'variant'>\n> = ({\n route,\n active,\n variant = 'default',\n expanded: defaultExpanded,\n ...other\n}) => {\n const { t } = useTranslation()\n const { mode, modeOptions, routeLabels, hiddenUI } = useWidgetConfig()\n\n const token: TokenAmount =\n mode === 'custom' && modeOptions?.custom?.type !== 'deposit'\n ? { ...route.fromToken, amount: BigInt(route.fromAmount) }\n : { ...route.toToken, amount: BigInt(route.toAmount) }\n const impactToken: TokenAmount | undefined =\n mode !== 'custom' && !hiddenUI?.routeCardPriceImpact\n ? { ...route.fromToken, amount: BigInt(route.fromAmount) }\n : undefined\n\n const [tags, customLabels]: [string[], RouteLabel[]] = useMemo(() => {\n const mainTag = route.tags?.find(\n (tag) => tag === 'CHEAPEST' || tag === 'FASTEST'\n )\n const tags: string[] = mainTag ? [mainTag] : []\n const { combinedFeesUSD } = getAccumulatedFeeCostsBreakdown(route)\n if (!combinedFeesUSD) {\n tags.push('gasless')\n }\n if (route.steps.length > 1) {\n tags.push('multistep')\n }\n const customLabels = getMatchingLabels(route, routeLabels)\n return [tags, customLabels]\n }, [route.tags, route, routeLabels])\n\n const cardContent = (\n <Box\n sx={{\n flex: 1,\n }}\n >\n {mode !== 'refuel' && (tags.length || customLabels.length) ? (\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n mb: 2,\n gap: 1,\n flexWrap: 'wrap',\n }}\n >\n {tags?.map((tag) => {\n const formattedTag = tag.toLowerCase()\n const tooltipKey = `tooltip.${formattedTag}` as any\n const tooltipText = t(tooltipKey)\n const hasTooltip = tooltipText !== tooltipKey\n\n const cardLabel = (\n <CardLabel\n variant={\n tag === 'gasless'\n ? 'success'\n : active\n ? 'secondary'\n : undefined\n }\n key={tag}\n >\n <CardLabelTypography>\n {t(`main.tags.${formattedTag}` as any)}\n </CardLabelTypography>\n </CardLabel>\n )\n\n return hasTooltip ? (\n <Tooltip key={tag} title={tooltipText} arrow placement=\"top\">\n {cardLabel}\n </Tooltip>\n ) : (\n cardLabel\n )\n })}\n {customLabels.map((label, index) => (\n <CardLabel key={index} sx={label.sx}>\n <CardLabelTypography>{label.text}</CardLabelTypography>\n </CardLabel>\n ))}\n </Box>\n ) : null}\n <RouteToken\n route={route}\n token={token}\n impactToken={impactToken}\n defaultExpanded={defaultExpanded}\n showEssentials\n />\n </Box>\n )\n\n return mode === 'refuel' || variant === 'cardless' ? (\n cardContent\n ) : (\n <Card\n type={active ? 'selected' : 'default'}\n selectionColor=\"secondary\"\n indented\n {...other}\n >\n {cardContent}\n </Card>\n )\n}\n"],"mappings":";;;;;;;;;;;AAcA,MAAa,aAER,EACH,OACA,QACA,UAAU,WACV,UAAU,iBACV,GAAG,YACC;CACJ,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,MAAM,aAAa,aAAa,aAAa,gBAAgB;CAErE,MAAM,QACJ,SAAS,YAAY,aAAa,QAAQ,SAAS,YAC/C;EAAE,GAAG,MAAM;EAAW,QAAQ,OAAO,MAAM,UAAU;CAAE,IACvD;EAAE,GAAG,MAAM;EAAS,QAAQ,OAAO,MAAM,QAAQ;CAAE;CACzD,MAAM,cACJ,SAAS,YAAY,CAAC,UAAU,uBAC5B;EAAE,GAAG,MAAM;EAAW,QAAQ,OAAO,MAAM,UAAU;CAAE,IACvD,KAAA;CAEN,MAAM,CAAC,MAAM,gBAA0C,cAAc;EACnE,MAAM,UAAU,MAAM,MAAM,MACzB,QAAQ,QAAQ,cAAc,QAAQ,SACzC;EACA,MAAM,OAAiB,UAAU,CAAC,OAAO,IAAI,CAAC;EAC9C,MAAM,EAAE,oBAAoB,gCAAgC,KAAK;EACjE,IAAI,CAAC,iBACH,KAAK,KAAK,SAAS;EAErB,IAAI,MAAM,MAAM,SAAS,GACvB,KAAK,KAAK,WAAW;EAGvB,OAAO,CAAC,MADa,kBAAkB,OAAO,WACrB,CAAC;CAC5B,GAAG;EAAC,MAAM;EAAM;EAAO;CAAW,CAAC;CAEnC,MAAM,cACJ,qBAAC,KAAD;EACE,IAAI,EACF,MAAM,EACR;EAHF,UAAA,CAKG,SAAS,aAAa,KAAK,UAAU,aAAa,UACjD,qBAAC,KAAD;GACE,IAAI;IACF,SAAS;IACT,YAAY;IACZ,IAAI;IACJ,KAAK;IACL,UAAU;GACZ;GAPF,UAAA,CASG,MAAM,KAAK,QAAQ;IAClB,MAAM,eAAe,IAAI,YAAY;IACrC,MAAM,aAAa,WAAW;IAC9B,MAAM,cAAc,EAAE,UAAU;IAChC,MAAM,aAAa,gBAAgB;IAEnC,MAAM,YACJ,oBAAC,WAAD;KACE,SACE,QAAQ,YACJ,YACA,SACE,cACA,KAAA;KAIR,UAAA,oBAAC,qBAAD,EAAA,UACG,EAAE,aAAa,cAAqB,EAClB,CAAA;IACZ,GALJ,GAKI;IAGb,OAAO,aACL,oBAAC,SAAD;KAAmB,OAAO;KAAa,OAAA;KAAM,WAAU;KACpD,UAAA;IACM,GAFK,GAEL,IAET;GAEJ,CAAC,GACA,aAAa,KAAK,OAAO,UACxB,oBAAC,WAAD;IAAuB,IAAI,MAAM;IAC/B,UAAA,oBAAC,qBAAD,EAAA,UAAsB,MAAM,KAA0B,CAAA;GAC7C,GAFK,KAEL,CACZ,CACE;EACH,CAAA,IAAA,MACJ,oBAAC,YAAD;GACS;GACA;GACM;GACI;GACjB,gBAAA;EACD,CAAA,CACE;;CAGP,OAAO,SAAS,YAAY,YAAY,aACtC,cAEA,oBAACA,QAAD;EACE,MAAM,SAAS,aAAa;EAC5B,gBAAe;EACf,UAAA;EACA,GAAI;EAEH,UAAA;CACG,CAAA;AAEV"}
@@ -1 +1 @@
1
- {"version":3,"file":"RouteCardEssentials.js","names":[],"sources":["../../../../src/components/RouteCard/RouteCardEssentials.tsx"],"sourcesContent":["import AccessTimeFilled from '@mui/icons-material/AccessTimeFilled'\nimport LocalGasStationRounded from '@mui/icons-material/LocalGasStationRounded'\nimport { Box, Tooltip, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport { formatDuration } from '../../utils/format.js'\nimport { FeeBreakdownTooltip } from '../FeeBreakdownTooltip.js'\nimport { IconTypography } from '../IconTypography.js'\nimport { TokenRate } from '../TokenRate/TokenRate.js'\nimport type { RouteCardEssentialsProps } from './types.js'\n\nexport const RouteCardEssentials: React.FC<RouteCardEssentialsProps> = ({\n route,\n}) => {\n const { t, i18n } = useTranslation()\n const executionTimeSeconds = Math.floor(\n route.steps.reduce(\n (duration, step) => duration + step.estimate.executionDuration,\n 0\n )\n )\n\n const { gasCosts, feeCosts, combinedFeesUSD } =\n getAccumulatedFeeCostsBreakdown(route)\n return (\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n flex: 1,\n mt: 2,\n }}\n >\n <Tooltip title={t('tooltip.exchangeRate')}>\n <TokenRate route={route} />\n </Tooltip>\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n }}\n >\n <FeeBreakdownTooltip\n gasCosts={gasCosts}\n feeCosts={feeCosts}\n gasless={!combinedFeesUSD}\n >\n <Box\n sx={{\n display: 'flex',\n mr: 1.5,\n alignItems: 'center',\n }}\n >\n <IconTypography component=\"span\" sx={{ mr: 0.5, fontSize: 16 }}>\n <LocalGasStationRounded fontSize=\"inherit\" />\n </IconTypography>\n <Typography\n data-value={combinedFeesUSD}\n sx={{\n fontSize: 14,\n color: 'text.primary',\n fontWeight: 600,\n lineHeight: 1,\n }}\n >\n {!combinedFeesUSD\n ? t('main.fees.free')\n : t('format.currency', {\n value: combinedFeesUSD,\n })}\n </Typography>\n </Box>\n </FeeBreakdownTooltip>\n <Tooltip title={t('tooltip.estimatedTime')} sx={{ cursor: 'help' }}>\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n }}\n >\n <IconTypography component=\"span\" sx={{ mr: 0.5, fontSize: 16 }}>\n <AccessTimeFilled fontSize=\"inherit\" />\n </IconTypography>\n <Typography\n sx={{\n fontSize: 14,\n color: 'text.primary',\n fontWeight: 600,\n lineHeight: 1,\n }}\n >\n {formatDuration(executionTimeSeconds, i18n.language)}\n </Typography>\n </Box>\n </Tooltip>\n </Box>\n </Box>\n )\n}\n"],"mappings":";;;;;;;;;;;AAWA,MAAa,uBAA2D,EACtE,YACI;CACJ,MAAM,EAAE,GAAG,SAAS,eAAe;CACnC,MAAM,uBAAuB,KAAK,MAChC,MAAM,MAAM,QACT,UAAU,SAAS,WAAW,KAAK,SAAS,mBAC7C,CACF,CACF;CAEA,MAAM,EAAE,UAAU,UAAU,oBAC1B,gCAAgC,KAAK;CACvC,OACE,qBAAC,KAAD;EACE,IAAI;GACF,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,MAAM;GACN,IAAI;EACN;YAPF,CASE,oBAAC,SAAD;GAAS,OAAO,EAAE,sBAAsB;aACtC,oBAAC,WAAD,EAAkB,MAAQ,CAAA;EACnB,CAAA,GACT,qBAAC,KAAD;GACE,IAAI;IACF,SAAS;IACT,YAAY;GACd;aAJF,CAME,oBAAC,qBAAD;IACY;IACA;IACV,SAAS,CAAC;cAEV,qBAAC,KAAD;KACE,IAAI;MACF,SAAS;MACT,IAAI;MACJ,YAAY;KACd;eALF,CAOE,oBAAC,gBAAD;MAAgB,WAAU;MAAO,IAAI;OAAE,IAAI;OAAK,UAAU;MAAG;gBAC3D,oBAAC,wBAAD,EAAwB,UAAS,UAAW,CAAA;KAC9B,CAAA,GAChB,oBAAC,YAAD;MACE,cAAY;MACZ,IAAI;OACF,UAAU;OACV,OAAO;OACP,YAAY;OACZ,YAAY;MACd;gBAEC,CAAC,kBACE,EAAE,gBAAgB,IAClB,EAAE,mBAAmB,EACnB,OAAO,gBACT,CAAC;KACK,CAAA,CACT;;GACc,CAAA,GACrB,oBAAC,SAAD;IAAS,OAAO,EAAE,uBAAuB;IAAG,IAAI,EAAE,QAAQ,OAAO;cAC/D,qBAAC,KAAD;KACE,IAAI;MACF,SAAS;MACT,YAAY;KACd;eAJF,CAME,oBAAC,gBAAD;MAAgB,WAAU;MAAO,IAAI;OAAE,IAAI;OAAK,UAAU;MAAG;gBAC3D,oBAAC,kBAAD,EAAkB,UAAS,UAAW,CAAA;KACxB,CAAA,GAChB,oBAAC,YAAD;MACE,IAAI;OACF,UAAU;OACV,OAAO;OACP,YAAY;OACZ,YAAY;MACd;gBAEC,eAAe,sBAAsB,KAAK,QAAQ;KACzC,CAAA,CACT;;GACE,CAAA,CACN;IACF;;AAET"}
1
+ {"version":3,"file":"RouteCardEssentials.js","names":[],"sources":["../../../../src/components/RouteCard/RouteCardEssentials.tsx"],"sourcesContent":["import AccessTimeFilled from '@mui/icons-material/AccessTimeFilled'\nimport LocalGasStationRounded from '@mui/icons-material/LocalGasStationRounded'\nimport { Box, Tooltip, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport { formatDuration } from '../../utils/format.js'\nimport { FeeBreakdownTooltip } from '../FeeBreakdownTooltip.js'\nimport { IconTypography } from '../IconTypography.js'\nimport { TokenRate } from '../TokenRate/TokenRate.js'\nimport type { RouteCardEssentialsProps } from './types.js'\n\nexport const RouteCardEssentials: React.FC<RouteCardEssentialsProps> = ({\n route,\n}) => {\n const { t, i18n } = useTranslation()\n const executionTimeSeconds = Math.floor(\n route.steps.reduce(\n (duration, step) => duration + step.estimate.executionDuration,\n 0\n )\n )\n\n const { gasCosts, feeCosts, combinedFeesUSD } =\n getAccumulatedFeeCostsBreakdown(route)\n return (\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n flex: 1,\n mt: 2,\n }}\n >\n <Tooltip title={t('tooltip.exchangeRate')}>\n <TokenRate route={route} />\n </Tooltip>\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n }}\n >\n <FeeBreakdownTooltip\n gasCosts={gasCosts}\n feeCosts={feeCosts}\n gasless={!combinedFeesUSD}\n >\n <Box\n sx={{\n display: 'flex',\n mr: 1.5,\n alignItems: 'center',\n }}\n >\n <IconTypography component=\"span\" sx={{ mr: 0.5, fontSize: 16 }}>\n <LocalGasStationRounded fontSize=\"inherit\" />\n </IconTypography>\n <Typography\n data-value={combinedFeesUSD}\n sx={{\n fontSize: 14,\n color: 'text.primary',\n fontWeight: 600,\n lineHeight: 1,\n }}\n >\n {!combinedFeesUSD\n ? t('main.fees.free')\n : t('format.currency', {\n value: combinedFeesUSD,\n })}\n </Typography>\n </Box>\n </FeeBreakdownTooltip>\n <Tooltip title={t('tooltip.estimatedTime')} sx={{ cursor: 'help' }}>\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n }}\n >\n <IconTypography component=\"span\" sx={{ mr: 0.5, fontSize: 16 }}>\n <AccessTimeFilled fontSize=\"inherit\" />\n </IconTypography>\n <Typography\n sx={{\n fontSize: 14,\n color: 'text.primary',\n fontWeight: 600,\n lineHeight: 1,\n }}\n >\n {formatDuration(executionTimeSeconds, i18n.language)}\n </Typography>\n </Box>\n </Tooltip>\n </Box>\n </Box>\n )\n}\n"],"mappings":";;;;;;;;;;;AAWA,MAAa,uBAA2D,EACtE,YACI;CACJ,MAAM,EAAE,GAAG,SAAS,eAAe;CACnC,MAAM,uBAAuB,KAAK,MAChC,MAAM,MAAM,QACT,UAAU,SAAS,WAAW,KAAK,SAAS,mBAC7C,CACF,CACF;CAEA,MAAM,EAAE,UAAU,UAAU,oBAC1B,gCAAgC,KAAK;CACvC,OACE,qBAAC,KAAD;EACE,IAAI;GACF,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,MAAM;GACN,IAAI;EACN;EAPF,UAAA,CASE,oBAAC,SAAD;GAAS,OAAO,EAAE,sBAAsB;GACtC,UAAA,oBAAC,WAAD,EAAkB,MAAQ,CAAA;EACnB,CAAA,GACT,qBAAC,KAAD;GACE,IAAI;IACF,SAAS;IACT,YAAY;GACd;GAJF,UAAA,CAME,oBAAC,qBAAD;IACY;IACA;IACV,SAAS,CAAC;IAEV,UAAA,qBAAC,KAAD;KACE,IAAI;MACF,SAAS;MACT,IAAI;MACJ,YAAY;KACd;KALF,UAAA,CAOE,oBAAC,gBAAD;MAAgB,WAAU;MAAO,IAAI;OAAE,IAAI;OAAK,UAAU;MAAG;MAC3D,UAAA,oBAAC,wBAAD,EAAwB,UAAS,UAAW,CAAA;KAC9B,CAAA,GAChB,oBAAC,YAAD;MACE,cAAY;MACZ,IAAI;OACF,UAAU;OACV,OAAO;OACP,YAAY;OACZ,YAAY;MACd;MAEC,UAAA,CAAC,kBACE,EAAE,gBAAgB,IAClB,EAAE,mBAAmB,EACnB,OAAO,gBACT,CAAC;KACK,CAAA,CACT;;GACc,CAAA,GACrB,oBAAC,SAAD;IAAS,OAAO,EAAE,uBAAuB;IAAG,IAAI,EAAE,QAAQ,OAAO;IAC/D,UAAA,qBAAC,KAAD;KACE,IAAI;MACF,SAAS;MACT,YAAY;KACd;KAJF,UAAA,CAME,oBAAC,gBAAD;MAAgB,WAAU;MAAO,IAAI;OAAE,IAAI;OAAK,UAAU;MAAG;MAC3D,UAAA,oBAAC,kBAAD,EAAkB,UAAS,UAAW,CAAA;KACxB,CAAA,GAChB,oBAAC,YAAD;MACE,IAAI;OACF,UAAU;OACV,OAAO;OACP,YAAY;OACZ,YAAY;MACd;MAEC,UAAA,eAAe,sBAAsB,KAAK,QAAQ;KACzC,CAAA,CACT;;GACE,CAAA,CACN;EACF,CAAA,CAAA;;AAET"}
@@ -1 +1 @@
1
- {"version":3,"file":"RouteCardSkeleton.js","names":["Card"],"sources":["../../../../src/components/RouteCard/RouteCardSkeleton.tsx"],"sourcesContent":["import { Box, Skeleton } from '@mui/material'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { Card } from '../Card/Card.js'\nimport { TokenSkeleton } from '../Token/Token.js'\nimport type { RouteCardSkeletonProps } from './types.js'\n\nexport const RouteCardSkeleton: React.FC<\n RouteCardSkeletonProps & Omit<CardProps, 'variant'>\n> = ({ variant, ...other }) => {\n const { mode } = useWidgetConfig()\n\n const cardContent = (\n <Box\n sx={{\n flex: 1,\n }}\n >\n {mode !== 'refuel' && mode !== 'custom' ? (\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n mb: 2,\n }}\n >\n <Skeleton\n variant=\"rectangular\"\n width={112}\n height={24}\n sx={(theme) => ({\n borderRadius: theme.vars.shape.borderRadius,\n })}\n />\n </Box>\n ) : null}\n <TokenSkeleton />\n <Box\n sx={{\n mt: 2,\n display: 'flex',\n justifyContent: 'space-between',\n }}\n >\n <Skeleton variant=\"text\" width={64} height={20} />\n <Skeleton variant=\"text\" width={56} height={20} />\n </Box>\n </Box>\n )\n\n return mode === 'refuel' || variant === 'cardless' ? (\n cardContent\n ) : (\n <Card indented {...other}>\n {cardContent}\n </Card>\n )\n}\n"],"mappings":";;;;;;AAOA,MAAa,qBAER,EAAE,SAAS,GAAG,YAAY;CAC7B,MAAM,EAAE,SAAS,gBAAgB;CAEjC,MAAM,cACJ,qBAAC,KAAD;EACE,IAAI,EACF,MAAM,EACR;YAHF;GAKG,SAAS,YAAY,SAAS,WAC7B,oBAAC,KAAD;IACE,IAAI;KACF,SAAS;KACT,YAAY;KACZ,IAAI;IACN;cAEA,oBAAC,UAAD;KACE,SAAQ;KACR,OAAO;KACP,QAAQ;KACR,KAAK,WAAW,EACd,cAAc,MAAM,KAAK,MAAM,aACjC;IACD,CAAA;GACE,CAAA,IACH;GACJ,oBAAC,eAAD,CAAgB,CAAA;GAChB,qBAAC,KAAD;IACE,IAAI;KACF,IAAI;KACJ,SAAS;KACT,gBAAgB;IAClB;cALF,CAOE,oBAAC,UAAD;KAAU,SAAQ;KAAO,OAAO;KAAI,QAAQ;IAAK,CAAA,GACjD,oBAAC,UAAD;KAAU,SAAQ;KAAO,OAAO;KAAI,QAAQ;IAAK,CAAA,CAC9C;;EACF;;CAGP,OAAO,SAAS,YAAY,YAAY,aACtC,cAEA,oBAACA,QAAD;EAAM,UAAA;EAAS,GAAI;YAChB;CACG,CAAA;AAEV"}
1
+ {"version":3,"file":"RouteCardSkeleton.js","names":["Card"],"sources":["../../../../src/components/RouteCard/RouteCardSkeleton.tsx"],"sourcesContent":["import { Box, Skeleton } from '@mui/material'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { Card } from '../Card/Card.js'\nimport { TokenSkeleton } from '../Token/Token.js'\nimport type { RouteCardSkeletonProps } from './types.js'\n\nexport const RouteCardSkeleton: React.FC<\n RouteCardSkeletonProps & Omit<CardProps, 'variant'>\n> = ({ variant, ...other }) => {\n const { mode } = useWidgetConfig()\n\n const cardContent = (\n <Box\n sx={{\n flex: 1,\n }}\n >\n {mode !== 'refuel' && mode !== 'custom' ? (\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n mb: 2,\n }}\n >\n <Skeleton\n variant=\"rectangular\"\n width={112}\n height={24}\n sx={(theme) => ({\n borderRadius: theme.vars.shape.borderRadius,\n })}\n />\n </Box>\n ) : null}\n <TokenSkeleton />\n <Box\n sx={{\n mt: 2,\n display: 'flex',\n justifyContent: 'space-between',\n }}\n >\n <Skeleton variant=\"text\" width={64} height={20} />\n <Skeleton variant=\"text\" width={56} height={20} />\n </Box>\n </Box>\n )\n\n return mode === 'refuel' || variant === 'cardless' ? (\n cardContent\n ) : (\n <Card indented {...other}>\n {cardContent}\n </Card>\n )\n}\n"],"mappings":";;;;;;AAOA,MAAa,qBAER,EAAE,SAAS,GAAG,YAAY;CAC7B,MAAM,EAAE,SAAS,gBAAgB;CAEjC,MAAM,cACJ,qBAAC,KAAD;EACE,IAAI,EACF,MAAM,EACR;EAHF,UAAA;GAKG,SAAS,YAAY,SAAS,WAC7B,oBAAC,KAAD;IACE,IAAI;KACF,SAAS;KACT,YAAY;KACZ,IAAI;IACN;IAEA,UAAA,oBAAC,UAAD;KACE,SAAQ;KACR,OAAO;KACP,QAAQ;KACR,KAAK,WAAW,EACd,cAAc,MAAM,KAAK,MAAM,aACjC;IACD,CAAA;GACE,CAAA,IACH;GACJ,oBAAC,eAAD,CAAgB,CAAA;GAChB,qBAAC,KAAD;IACE,IAAI;KACF,IAAI;KACJ,SAAS;KACT,gBAAgB;IAClB;IALF,UAAA,CAOE,oBAAC,UAAD;KAAU,SAAQ;KAAO,OAAO;KAAI,QAAQ;IAAK,CAAA,GACjD,oBAAC,UAAD;KAAU,SAAQ;KAAO,OAAO;KAAI,QAAQ;IAAK,CAAA,CAC9C;;EACF;;CAGP,OAAO,SAAS,YAAY,YAAY,aACtC,cAEA,oBAACA,QAAD;EAAM,UAAA;EAAS,GAAI;EAChB,UAAA;CACG,CAAA;AAEV"}
@@ -1 +1 @@
1
- {"version":3,"file":"RouteDetails.js","names":[],"sources":["../../../../src/components/RouteCard/RouteDetails.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport { useEthereumContext } from '@lifi/widget-provider'\nimport { Box, Tooltip } from '@mui/material'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useTokenRateText } from '../../hooks/useTokenRateText.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { isRouteDone } from '../../stores/routes/utils.js'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport {\n formatDuration,\n formatTokenAmount,\n formatTokenPrice,\n} from '../../utils/format.js'\nimport { getPriceImpact } from '../../utils/getPriceImpact.js'\nimport { FeeBreakdownTooltip } from '../FeeBreakdownTooltip.js'\nimport { StepActions } from '../Step/StepActions.js'\nimport {\n DetailInfoIcon,\n DetailLabel,\n DetailLabelContainer,\n DetailRow,\n DetailValue,\n} from './RouteDetails.style.js'\n\ninterface RouteDetailsProps {\n route: RouteExtended\n}\n\nexport const RouteDetails = ({ route }: RouteDetailsProps): JSX.Element => {\n const { t, i18n } = useTranslation()\n const { rateText, toggleRate } = useTokenRateText(route)\n const { feeConfig } = useWidgetConfig()\n const { isGaslessStep } = useEthereumContext()\n\n const { gasCosts, feeCosts, gasCostUSD, feeCostUSD } =\n getAccumulatedFeeCostsBreakdown(route)\n\n const priceImpact = getPriceImpact({\n fromAmount: BigInt(route.fromAmount),\n toAmount: BigInt(route.toAmount),\n fromToken: route.fromToken,\n toToken: route.toToken,\n })\n\n let feeAmountUSD = 0\n let feePercentage = 0\n\n const feeCollectionStep = route.steps[0].includedSteps.find(\n (includedStep) => includedStep.tool === 'feeCollection'\n )\n\n if (feeCollectionStep) {\n const estimatedFromAmount =\n BigInt(feeCollectionStep.estimate.fromAmount) -\n BigInt(feeCollectionStep.estimate.toAmount)\n\n feeAmountUSD = formatTokenPrice(\n estimatedFromAmount,\n feeCollectionStep.action.fromToken.priceUSD,\n feeCollectionStep.action.fromToken.decimals\n )\n\n feePercentage =\n feeCollectionStep.estimate.feeCosts?.reduce(\n (percentage, feeCost) =>\n percentage + Number.parseFloat(feeCost.percentage || '0'),\n 0\n ) ?? 0\n }\n\n const executionTimeSeconds = Math.floor(\n route.steps.reduce(\n (duration, step) => duration + step.estimate.executionDuration,\n 0\n )\n )\n\n const hasGaslessSupport = route.steps.every((step) => isGaslessStep?.(step))\n\n const showIntegratorFeeCollectionDetails =\n (feeAmountUSD || Number.isFinite(feeConfig?.fee)) && !hasGaslessSupport\n\n return (\n <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, pt: 1.5 }}>\n <StepActions route={route} />\n <DetailRow>\n <DetailLabelContainer>\n <DetailLabel>{t('main.fees.network')}</DetailLabel>\n <FeeBreakdownTooltip gasCosts={gasCosts} gasless={hasGaslessSupport}>\n <DetailInfoIcon />\n </FeeBreakdownTooltip>\n </DetailLabelContainer>\n <DetailValue>\n {!gasCostUSD\n ? t('main.fees.free')\n : t('format.currency', { value: gasCostUSD })}\n </DetailValue>\n </DetailRow>\n {feeCosts.length ? (\n <DetailRow>\n <DetailLabelContainer>\n <DetailLabel>{t('main.fees.provider')}</DetailLabel>\n <FeeBreakdownTooltip feeCosts={feeCosts}>\n <DetailInfoIcon />\n </FeeBreakdownTooltip>\n </DetailLabelContainer>\n <DetailValue>\n {t('format.currency', { value: feeCostUSD })}\n </DetailValue>\n </DetailRow>\n ) : null}\n {showIntegratorFeeCollectionDetails ? (\n <DetailRow>\n <DetailLabelContainer>\n <DetailLabel>\n {feeConfig?.name || t('main.fees.defaultIntegrator')}\n {feeConfig?.showFeePercentage && (\n <> ({t('format.percent', { value: feePercentage })})</>\n )}\n </DetailLabel>\n {feeConfig?.showFeeTooltip &&\n (feeConfig?.name || feeConfig?.feeTooltipComponent) ? (\n <Tooltip\n title={\n feeConfig?.feeTooltipComponent ||\n t('tooltip.feeCollection', { tool: feeConfig.name })\n }\n >\n <DetailInfoIcon />\n </Tooltip>\n ) : null}\n </DetailLabelContainer>\n <DetailValue>\n {t('format.currency', { value: feeAmountUSD })}\n </DetailValue>\n </DetailRow>\n ) : null}\n <DetailRow>\n <DetailLabelContainer>\n <DetailLabel>{t('main.priceImpact')}</DetailLabel>\n <Tooltip title={t('tooltip.priceImpact')}>\n <DetailInfoIcon />\n </Tooltip>\n </DetailLabelContainer>\n <DetailValue>\n {t('format.percent', { value: priceImpact, usePlusSign: true })}\n </DetailValue>\n </DetailRow>\n {!isRouteDone(route) ? (\n <>\n <DetailRow>\n <DetailLabelContainer>\n <DetailLabel>{t('main.maxSlippage')}</DetailLabel>\n <Tooltip title={t('tooltip.slippage')}>\n <DetailInfoIcon />\n </Tooltip>\n </DetailLabelContainer>\n <DetailValue>\n {route.steps[0].action.slippage\n ? t('format.percent', {\n value: route.steps[0].action.slippage,\n })\n : t('button.auto')}\n </DetailValue>\n </DetailRow>\n <DetailRow>\n <DetailLabelContainer>\n <DetailLabel>{t('main.minReceived')}</DetailLabel>\n <Tooltip title={t('tooltip.minReceived')}>\n <DetailInfoIcon />\n </Tooltip>\n </DetailLabelContainer>\n <DetailValue>\n {t('format.tokenAmount', {\n value: formatTokenAmount(\n BigInt(route.toAmountMin),\n route.toToken.decimals\n ),\n })}{' '}\n {route.toToken.symbol}\n </DetailValue>\n </DetailRow>\n </>\n ) : null}\n <DetailRow>\n <DetailLabelContainer>\n <DetailLabel>{t('main.exchangeRate')}</DetailLabel>\n <Tooltip title={t('tooltip.exchangeRate')}>\n <DetailInfoIcon />\n </Tooltip>\n </DetailLabelContainer>\n <DetailValue\n onClick={toggleRate}\n role=\"button\"\n sx={{ cursor: 'pointer' }}\n >\n {rateText}\n </DetailValue>\n </DetailRow>\n <DetailRow>\n <DetailLabelContainer>\n <DetailLabel>{t('main.estimatedTime')}</DetailLabel>\n <Tooltip title={t('tooltip.estimatedTime')}>\n <DetailInfoIcon />\n </Tooltip>\n </DetailLabelContainer>\n <DetailValue>\n {formatDuration(executionTimeSeconds, i18n.language)}\n </DetailValue>\n </DetailRow>\n </Box>\n )\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"RouteDetails.js","names":[],"sources":["../../../../src/components/RouteCard/RouteDetails.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport { useEthereumContext } from '@lifi/widget-provider'\nimport { Box, Tooltip } from '@mui/material'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useTokenRateText } from '../../hooks/useTokenRateText.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { isRouteDone } from '../../stores/routes/utils.js'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport {\n formatDuration,\n formatTokenAmount,\n formatTokenPrice,\n} from '../../utils/format.js'\nimport { getPriceImpact } from '../../utils/getPriceImpact.js'\nimport { FeeBreakdownTooltip } from '../FeeBreakdownTooltip.js'\nimport { StepActions } from '../Step/StepActions.js'\nimport {\n DetailInfoIcon,\n DetailLabel,\n DetailLabelContainer,\n DetailRow,\n DetailValue,\n} from './RouteDetails.style.js'\n\ninterface RouteDetailsProps {\n route: RouteExtended\n}\n\nexport const RouteDetails = ({ route }: RouteDetailsProps): JSX.Element => {\n const { t, i18n } = useTranslation()\n const { rateText, toggleRate } = useTokenRateText(route)\n const { feeConfig } = useWidgetConfig()\n const { isGaslessStep } = useEthereumContext()\n\n const { gasCosts, feeCosts, gasCostUSD, feeCostUSD } =\n getAccumulatedFeeCostsBreakdown(route)\n\n const priceImpact = getPriceImpact({\n fromAmount: BigInt(route.fromAmount),\n toAmount: BigInt(route.toAmount),\n fromToken: route.fromToken,\n toToken: route.toToken,\n })\n\n let feeAmountUSD = 0\n let feePercentage = 0\n\n const feeCollectionStep = route.steps[0].includedSteps.find(\n (includedStep) => includedStep.tool === 'feeCollection'\n )\n\n if (feeCollectionStep) {\n const estimatedFromAmount =\n BigInt(feeCollectionStep.estimate.fromAmount) -\n BigInt(feeCollectionStep.estimate.toAmount)\n\n feeAmountUSD = formatTokenPrice(\n estimatedFromAmount,\n feeCollectionStep.action.fromToken.priceUSD,\n feeCollectionStep.action.fromToken.decimals\n )\n\n feePercentage =\n feeCollectionStep.estimate.feeCosts?.reduce(\n (percentage, feeCost) =>\n percentage + Number.parseFloat(feeCost.percentage || '0'),\n 0\n ) ?? 0\n }\n\n const executionTimeSeconds = Math.floor(\n route.steps.reduce(\n (duration, step) => duration + step.estimate.executionDuration,\n 0\n )\n )\n\n const hasGaslessSupport = route.steps.every((step) => isGaslessStep?.(step))\n\n const showIntegratorFeeCollectionDetails =\n (feeAmountUSD || Number.isFinite(feeConfig?.fee)) && !hasGaslessSupport\n\n return (\n <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1, pt: 1.5 }}>\n <StepActions route={route} />\n <DetailRow>\n <DetailLabelContainer>\n <DetailLabel>{t('main.fees.network')}</DetailLabel>\n <FeeBreakdownTooltip gasCosts={gasCosts} gasless={hasGaslessSupport}>\n <DetailInfoIcon />\n </FeeBreakdownTooltip>\n </DetailLabelContainer>\n <DetailValue>\n {!gasCostUSD\n ? t('main.fees.free')\n : t('format.currency', { value: gasCostUSD })}\n </DetailValue>\n </DetailRow>\n {feeCosts.length ? (\n <DetailRow>\n <DetailLabelContainer>\n <DetailLabel>{t('main.fees.provider')}</DetailLabel>\n <FeeBreakdownTooltip feeCosts={feeCosts}>\n <DetailInfoIcon />\n </FeeBreakdownTooltip>\n </DetailLabelContainer>\n <DetailValue>\n {t('format.currency', { value: feeCostUSD })}\n </DetailValue>\n </DetailRow>\n ) : null}\n {showIntegratorFeeCollectionDetails ? (\n <DetailRow>\n <DetailLabelContainer>\n <DetailLabel>\n {feeConfig?.name || t('main.fees.defaultIntegrator')}\n {feeConfig?.showFeePercentage && (\n <> ({t('format.percent', { value: feePercentage })})</>\n )}\n </DetailLabel>\n {feeConfig?.showFeeTooltip &&\n (feeConfig?.name || feeConfig?.feeTooltipComponent) ? (\n <Tooltip\n title={\n feeConfig?.feeTooltipComponent ||\n t('tooltip.feeCollection', { tool: feeConfig.name })\n }\n >\n <DetailInfoIcon />\n </Tooltip>\n ) : null}\n </DetailLabelContainer>\n <DetailValue>\n {t('format.currency', { value: feeAmountUSD })}\n </DetailValue>\n </DetailRow>\n ) : null}\n <DetailRow>\n <DetailLabelContainer>\n <DetailLabel>{t('main.priceImpact')}</DetailLabel>\n <Tooltip title={t('tooltip.priceImpact')}>\n <DetailInfoIcon />\n </Tooltip>\n </DetailLabelContainer>\n <DetailValue>\n {t('format.percent', { value: priceImpact, usePlusSign: true })}\n </DetailValue>\n </DetailRow>\n {!isRouteDone(route) ? (\n <>\n <DetailRow>\n <DetailLabelContainer>\n <DetailLabel>{t('main.maxSlippage')}</DetailLabel>\n <Tooltip title={t('tooltip.slippage')}>\n <DetailInfoIcon />\n </Tooltip>\n </DetailLabelContainer>\n <DetailValue>\n {route.steps[0].action.slippage\n ? t('format.percent', {\n value: route.steps[0].action.slippage,\n })\n : t('button.auto')}\n </DetailValue>\n </DetailRow>\n <DetailRow>\n <DetailLabelContainer>\n <DetailLabel>{t('main.minReceived')}</DetailLabel>\n <Tooltip title={t('tooltip.minReceived')}>\n <DetailInfoIcon />\n </Tooltip>\n </DetailLabelContainer>\n <DetailValue>\n {t('format.tokenAmount', {\n value: formatTokenAmount(\n BigInt(route.toAmountMin),\n route.toToken.decimals\n ),\n })}{' '}\n {route.toToken.symbol}\n </DetailValue>\n </DetailRow>\n </>\n ) : null}\n <DetailRow>\n <DetailLabelContainer>\n <DetailLabel>{t('main.exchangeRate')}</DetailLabel>\n <Tooltip title={t('tooltip.exchangeRate')}>\n <DetailInfoIcon />\n </Tooltip>\n </DetailLabelContainer>\n <DetailValue\n onClick={toggleRate}\n role=\"button\"\n sx={{ cursor: 'pointer' }}\n >\n {rateText}\n </DetailValue>\n </DetailRow>\n <DetailRow>\n <DetailLabelContainer>\n <DetailLabel>{t('main.estimatedTime')}</DetailLabel>\n <Tooltip title={t('tooltip.estimatedTime')}>\n <DetailInfoIcon />\n </Tooltip>\n </DetailLabelContainer>\n <DetailValue>\n {formatDuration(executionTimeSeconds, i18n.language)}\n </DetailValue>\n </DetailRow>\n </Box>\n )\n}\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"RouteNotFoundCard.js","names":[],"sources":["../../../../src/components/RouteCard/RouteNotFoundCard.tsx"],"sourcesContent":["import Route from '@mui/icons-material/Route'\nimport { Box, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\n\nexport const RouteNotFoundCard: React.FC = () => {\n const { t } = useTranslation()\n return (\n <Box\n sx={{\n py: 1.625,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexDirection: 'column',\n flex: 1,\n whiteSpace: 'normal',\n }}\n >\n <Typography\n sx={{\n fontSize: 48,\n }}\n >\n <Route fontSize=\"inherit\" />\n </Typography>\n <Typography\n sx={{\n fontSize: 18,\n fontWeight: 700,\n }}\n >\n {t('info.title.routeNotFound')}\n </Typography>\n <Typography\n sx={{\n fontSize: 14,\n color: 'text.secondary',\n textAlign: 'center',\n mt: 2,\n }}\n >\n {t('info.message.routeNotFound')}\n </Typography>\n </Box>\n )\n}\n"],"mappings":";;;;;AAIA,MAAa,0BAAoC;CAC/C,MAAM,EAAE,MAAM,eAAe;CAC7B,OACE,qBAAC,KAAD;EACE,IAAI;GACF,IAAI;GACJ,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,eAAe;GACf,MAAM;GACN,YAAY;EACd;YATF;GAWE,oBAAC,YAAD;IACE,IAAI,EACF,UAAU,GACZ;cAEA,oBAAC,OAAD,EAAO,UAAS,UAAW,CAAA;GACjB,CAAA;GACZ,oBAAC,YAAD;IACE,IAAI;KACF,UAAU;KACV,YAAY;IACd;cAEC,EAAE,0BAA0B;GACnB,CAAA;GACZ,oBAAC,YAAD;IACE,IAAI;KACF,UAAU;KACV,OAAO;KACP,WAAW;KACX,IAAI;IACN;cAEC,EAAE,4BAA4B;GACrB,CAAA;EACT;;AAET"}
1
+ {"version":3,"file":"RouteNotFoundCard.js","names":[],"sources":["../../../../src/components/RouteCard/RouteNotFoundCard.tsx"],"sourcesContent":["import Route from '@mui/icons-material/Route'\nimport { Box, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\n\nexport const RouteNotFoundCard: React.FC = () => {\n const { t } = useTranslation()\n return (\n <Box\n sx={{\n py: 1.625,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexDirection: 'column',\n flex: 1,\n whiteSpace: 'normal',\n }}\n >\n <Typography\n sx={{\n fontSize: 48,\n }}\n >\n <Route fontSize=\"inherit\" />\n </Typography>\n <Typography\n sx={{\n fontSize: 18,\n fontWeight: 700,\n }}\n >\n {t('info.title.routeNotFound')}\n </Typography>\n <Typography\n sx={{\n fontSize: 14,\n color: 'text.secondary',\n textAlign: 'center',\n mt: 2,\n }}\n >\n {t('info.message.routeNotFound')}\n </Typography>\n </Box>\n )\n}\n"],"mappings":";;;;;AAIA,MAAa,0BAAoC;CAC/C,MAAM,EAAE,MAAM,eAAe;CAC7B,OACE,qBAAC,KAAD;EACE,IAAI;GACF,IAAI;GACJ,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,eAAe;GACf,MAAM;GACN,YAAY;EACd;EATF,UAAA;GAWE,oBAAC,YAAD;IACE,IAAI,EACF,UAAU,GACZ;IAEA,UAAA,oBAAC,OAAD,EAAO,UAAS,UAAW,CAAA;GACjB,CAAA;GACZ,oBAAC,YAAD;IACE,IAAI;KACF,UAAU;KACV,YAAY;IACd;IAEC,UAAA,EAAE,0BAA0B;GACnB,CAAA;GACZ,oBAAC,YAAD;IACE,IAAI;KACF,UAAU;KACV,OAAO;KACP,WAAW;KACX,IAAI;IACN;IAEC,UAAA,EAAE,4BAA4B;GACrB,CAAA;EACT;;AAET"}
@@ -1 +1 @@
1
- {"version":3,"file":"RouteProviderCard.js","names":["Card"],"sources":["../../../../src/components/RouteCard/RouteProviderCard.tsx"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport LocalGasStationRounded from '@mui/icons-material/LocalGasStationRounded'\nimport { Box, Skeleton, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { Card } from '../Card/Card.js'\nimport { IconTypography } from '../IconTypography.js'\n\ninterface RouteProviderCardProps {\n route: Route\n active?: boolean\n}\n\nexport const RouteProviderCard: React.FC<\n RouteProviderCardProps & Omit<CardProps, 'variant'>\n> = ({ route, active, onClick, ...other }) => {\n const { t } = useTranslation()\n\n const provider = route.steps[0]?.toolDetails\n const { gasCostUSD } = getAccumulatedFeeCostsBreakdown(route)\n\n return (\n <Card\n type={active ? 'selected' : 'default'}\n selectionColor=\"secondary\"\n onClick={onClick}\n sx={{ py: 1.5, px: 2, ...(onClick ? { cursor: 'pointer' } : {}) }}\n {...other}\n >\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n gap: 1,\n }}\n >\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n gap: 1,\n minWidth: 0,\n }}\n >\n <SmallAvatar src={provider?.logoURI} alt={provider?.name} size={20}>\n {provider?.name?.[0]}\n </SmallAvatar>\n <Typography\n noWrap\n sx={{\n fontSize: 14,\n fontWeight: 600,\n color: 'text.primary',\n }}\n >\n {provider?.name}\n </Typography>\n </Box>\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n }}\n >\n <IconTypography component=\"span\" sx={{ mr: 0.5, fontSize: 16 }}>\n <LocalGasStationRounded fontSize=\"inherit\" />\n </IconTypography>\n <Typography\n data-value={gasCostUSD}\n sx={{\n fontSize: 14,\n color: 'text.primary',\n fontWeight: 600,\n lineHeight: 1,\n }}\n >\n {!gasCostUSD\n ? t('main.fees.free')\n : t('format.currency', {\n value: gasCostUSD,\n })}\n </Typography>\n </Box>\n </Box>\n </Card>\n )\n}\n\nexport const RouteProviderCardSkeleton: React.FC<Omit<CardProps, 'variant'>> = (\n props\n) => {\n return (\n <Card sx={{ py: 1.5, px: 2 }} {...props}>\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n gap: 1,\n }}\n >\n <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n <Skeleton variant=\"circular\" width={20} height={20} />\n <Skeleton variant=\"text\" width={80} height={20} />\n </Box>\n <Skeleton variant=\"text\" width={56} height={20} />\n </Box>\n </Card>\n )\n}\n"],"mappings":";;;;;;;;;AAeA,MAAa,qBAER,EAAE,OAAO,QAAQ,SAAS,GAAG,YAAY;CAC5C,MAAM,EAAE,MAAM,eAAe;CAE7B,MAAM,WAAW,MAAM,MAAM,EAAE,EAAE;CACjC,MAAM,EAAE,eAAe,gCAAgC,KAAK;CAE5D,OACE,oBAACA,QAAD;EACE,MAAM,SAAS,aAAa;EAC5B,gBAAe;EACN;EACT,IAAI;GAAE,IAAI;GAAK,IAAI;GAAG,GAAI,UAAU,EAAE,QAAQ,UAAU,IAAI,CAAC;EAAG;EAChE,GAAI;YAEJ,qBAAC,KAAD;GACE,IAAI;IACF,SAAS;IACT,YAAY;IACZ,gBAAgB;IAChB,KAAK;GACP;aANF,CAQE,qBAAC,KAAD;IACE,IAAI;KACF,SAAS;KACT,YAAY;KACZ,KAAK;KACL,UAAU;IACZ;cANF,CAQE,oBAAC,aAAD;KAAa,KAAK,UAAU;KAAS,KAAK,UAAU;KAAM,MAAM;eAC7D,UAAU,OAAO;IACP,CAAA,GACb,oBAAC,YAAD;KACE,QAAA;KACA,IAAI;MACF,UAAU;MACV,YAAY;MACZ,OAAO;KACT;eAEC,UAAU;IACD,CAAA,CACT;OACL,qBAAC,KAAD;IACE,IAAI;KACF,SAAS;KACT,YAAY;IACd;cAJF,CAME,oBAAC,gBAAD;KAAgB,WAAU;KAAO,IAAI;MAAE,IAAI;MAAK,UAAU;KAAG;eAC3D,oBAAC,wBAAD,EAAwB,UAAS,UAAW,CAAA;IAC9B,CAAA,GAChB,oBAAC,YAAD;KACE,cAAY;KACZ,IAAI;MACF,UAAU;MACV,OAAO;MACP,YAAY;MACZ,YAAY;KACd;eAEC,CAAC,aACE,EAAE,gBAAgB,IAClB,EAAE,mBAAmB,EACnB,OAAO,WACT,CAAC;IACK,CAAA,CACT;KACF;;CACD,CAAA;AAEV;AAEA,MAAa,6BACX,UACG;CACH,OACE,oBAACA,QAAD;EAAM,IAAI;GAAE,IAAI;GAAK,IAAI;EAAE;EAAG,GAAI;YAChC,qBAAC,KAAD;GACE,IAAI;IACF,SAAS;IACT,YAAY;IACZ,gBAAgB;IAChB,KAAK;GACP;aANF,CAQE,qBAAC,KAAD;IAAK,IAAI;KAAE,SAAS;KAAQ,YAAY;KAAU,KAAK;IAAE;cAAzD,CACE,oBAAC,UAAD;KAAU,SAAQ;KAAW,OAAO;KAAI,QAAQ;IAAK,CAAA,GACrD,oBAAC,UAAD;KAAU,SAAQ;KAAO,OAAO;KAAI,QAAQ;IAAK,CAAA,CAC9C;OACL,oBAAC,UAAD;IAAU,SAAQ;IAAO,OAAO;IAAI,QAAQ;GAAK,CAAA,CAC9C;;CACD,CAAA;AAEV"}
1
+ {"version":3,"file":"RouteProviderCard.js","names":["Card"],"sources":["../../../../src/components/RouteCard/RouteProviderCard.tsx"],"sourcesContent":["import type { Route } from '@lifi/sdk'\nimport LocalGasStationRounded from '@mui/icons-material/LocalGasStationRounded'\nimport { Box, Skeleton, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { getAccumulatedFeeCostsBreakdown } from '../../utils/fees.js'\nimport { SmallAvatar } from '../Avatar/SmallAvatar.js'\nimport type { CardProps } from '../Card/Card.js'\nimport { Card } from '../Card/Card.js'\nimport { IconTypography } from '../IconTypography.js'\n\ninterface RouteProviderCardProps {\n route: Route\n active?: boolean\n}\n\nexport const RouteProviderCard: React.FC<\n RouteProviderCardProps & Omit<CardProps, 'variant'>\n> = ({ route, active, onClick, ...other }) => {\n const { t } = useTranslation()\n\n const provider = route.steps[0]?.toolDetails\n const { gasCostUSD } = getAccumulatedFeeCostsBreakdown(route)\n\n return (\n <Card\n type={active ? 'selected' : 'default'}\n selectionColor=\"secondary\"\n onClick={onClick}\n sx={{ py: 1.5, px: 2, ...(onClick ? { cursor: 'pointer' } : {}) }}\n {...other}\n >\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n gap: 1,\n }}\n >\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n gap: 1,\n minWidth: 0,\n }}\n >\n <SmallAvatar src={provider?.logoURI} alt={provider?.name} size={20}>\n {provider?.name?.[0]}\n </SmallAvatar>\n <Typography\n noWrap\n sx={{\n fontSize: 14,\n fontWeight: 600,\n color: 'text.primary',\n }}\n >\n {provider?.name}\n </Typography>\n </Box>\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n }}\n >\n <IconTypography component=\"span\" sx={{ mr: 0.5, fontSize: 16 }}>\n <LocalGasStationRounded fontSize=\"inherit\" />\n </IconTypography>\n <Typography\n data-value={gasCostUSD}\n sx={{\n fontSize: 14,\n color: 'text.primary',\n fontWeight: 600,\n lineHeight: 1,\n }}\n >\n {!gasCostUSD\n ? t('main.fees.free')\n : t('format.currency', {\n value: gasCostUSD,\n })}\n </Typography>\n </Box>\n </Box>\n </Card>\n )\n}\n\nexport const RouteProviderCardSkeleton: React.FC<Omit<CardProps, 'variant'>> = (\n props\n) => {\n return (\n <Card sx={{ py: 1.5, px: 2 }} {...props}>\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n gap: 1,\n }}\n >\n <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>\n <Skeleton variant=\"circular\" width={20} height={20} />\n <Skeleton variant=\"text\" width={80} height={20} />\n </Box>\n <Skeleton variant=\"text\" width={56} height={20} />\n </Box>\n </Card>\n )\n}\n"],"mappings":";;;;;;;;;AAeA,MAAa,qBAER,EAAE,OAAO,QAAQ,SAAS,GAAG,YAAY;CAC5C,MAAM,EAAE,MAAM,eAAe;CAE7B,MAAM,WAAW,MAAM,MAAM,EAAE,EAAE;CACjC,MAAM,EAAE,eAAe,gCAAgC,KAAK;CAE5D,OACE,oBAACA,QAAD;EACE,MAAM,SAAS,aAAa;EAC5B,gBAAe;EACN;EACT,IAAI;GAAE,IAAI;GAAK,IAAI;GAAG,GAAI,UAAU,EAAE,QAAQ,UAAU,IAAI,CAAC;EAAG;EAChE,GAAI;EAEJ,UAAA,qBAAC,KAAD;GACE,IAAI;IACF,SAAS;IACT,YAAY;IACZ,gBAAgB;IAChB,KAAK;GACP;GANF,UAAA,CAQE,qBAAC,KAAD;IACE,IAAI;KACF,SAAS;KACT,YAAY;KACZ,KAAK;KACL,UAAU;IACZ;IANF,UAAA,CAQE,oBAAC,aAAD;KAAa,KAAK,UAAU;KAAS,KAAK,UAAU;KAAM,MAAM;KAC7D,UAAA,UAAU,OAAO;IACP,CAAA,GACb,oBAAC,YAAD;KACE,QAAA;KACA,IAAI;MACF,UAAU;MACV,YAAY;MACZ,OAAO;KACT;KAEC,UAAA,UAAU;IACD,CAAA,CACT;GACL,CAAA,GAAA,qBAAC,KAAD;IACE,IAAI;KACF,SAAS;KACT,YAAY;IACd;IAJF,UAAA,CAME,oBAAC,gBAAD;KAAgB,WAAU;KAAO,IAAI;MAAE,IAAI;MAAK,UAAU;KAAG;KAC3D,UAAA,oBAAC,wBAAD,EAAwB,UAAS,UAAW,CAAA;IAC9B,CAAA,GAChB,oBAAC,YAAD;KACE,cAAY;KACZ,IAAI;MACF,UAAU;MACV,OAAO;MACP,YAAY;MACZ,YAAY;KACd;KAEC,UAAA,CAAC,aACE,EAAE,gBAAgB,IAClB,EAAE,mBAAmB,EACnB,OAAO,WACT,CAAC;IACK,CAAA,CACT;GACF,CAAA,CAAA;;CACD,CAAA;AAEV;AAEA,MAAa,6BACX,UACG;CACH,OACE,oBAACA,QAAD;EAAM,IAAI;GAAE,IAAI;GAAK,IAAI;EAAE;EAAG,GAAI;EAChC,UAAA,qBAAC,KAAD;GACE,IAAI;IACF,SAAS;IACT,YAAY;IACZ,gBAAgB;IAChB,KAAK;GACP;GANF,UAAA,CAQE,qBAAC,KAAD;IAAK,IAAI;KAAE,SAAS;KAAQ,YAAY;KAAU,KAAK;IAAE;IAAzD,UAAA,CACE,oBAAC,UAAD;KAAU,SAAQ;KAAW,OAAO;KAAI,QAAQ;IAAK,CAAA,GACrD,oBAAC,UAAD;KAAU,SAAQ;KAAO,OAAO;KAAI,QAAQ;IAAK,CAAA,CAC9C;GACL,CAAA,GAAA,oBAAC,UAAD;IAAU,SAAQ;IAAO,OAAO;IAAI,QAAQ;GAAK,CAAA,CAC9C;;CACD,CAAA;AAEV"}
@@ -1 +1 @@
1
- {"version":3,"file":"RouteToken.js","names":[],"sources":["../../../../src/components/RouteCard/RouteToken.tsx"],"sourcesContent":["import type { RouteExtended, TokenAmount } from '@lifi/sdk'\nimport ExpandLess from '@mui/icons-material/ExpandLess'\nimport ExpandMore from '@mui/icons-material/ExpandMore'\nimport { Box, Collapse } from '@mui/material'\nimport type { JSX } from 'react'\nimport { type MouseEventHandler, useState } from 'react'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport { Token } from '../Token/Token.js'\nimport { RouteCardEssentials } from './RouteCardEssentials.js'\nimport { RouteDetails } from './RouteDetails.js'\nimport { TokenContainer } from './RouteToken.style.js'\n\ninterface RouteTokenProps {\n route: RouteExtended\n token: TokenAmount\n impactToken?: TokenAmount\n defaultExpanded?: boolean\n showEssentials?: boolean\n}\n\nexport const RouteToken = ({\n route,\n token,\n impactToken,\n defaultExpanded,\n showEssentials,\n}: RouteTokenProps): JSX.Element => {\n const { hiddenUI } = useWidgetConfig()\n\n const [cardExpanded, setCardExpanded] = useState(defaultExpanded)\n\n const handleExpand: MouseEventHandler<HTMLButtonElement> = (e) => {\n e.stopPropagation()\n setCardExpanded((expanded) => !expanded)\n }\n\n return (\n <Box>\n <TokenContainer>\n <Token\n token={token}\n impactToken={impactToken}\n step={route.steps[0]}\n stepVisible={!cardExpanded}\n disableDescription={hiddenUI?.routeTokenDescription}\n />\n {!defaultExpanded ? (\n <CardIconButton onClick={handleExpand} size=\"small\">\n {cardExpanded ? (\n <ExpandLess fontSize=\"inherit\" />\n ) : (\n <ExpandMore fontSize=\"inherit\" />\n )}\n </CardIconButton>\n ) : null}\n </TokenContainer>\n <Collapse timeout={225} in={cardExpanded} mountOnEnter unmountOnExit>\n <RouteDetails route={route} />\n </Collapse>\n {showEssentials ? (\n <Collapse timeout={225} in={!cardExpanded}>\n <RouteCardEssentials route={route} />\n </Collapse>\n ) : null}\n </Box>\n )\n}\n"],"mappings":";;;;;;;;;;;;AAqBA,MAAa,cAAc,EACzB,OACA,OACA,aACA,iBACA,qBACkC;CAClC,MAAM,EAAE,aAAa,gBAAgB;CAErC,MAAM,CAAC,cAAc,mBAAmB,SAAS,eAAe;CAEhE,MAAM,gBAAsD,MAAM;EAChE,EAAE,gBAAgB;EAClB,iBAAiB,aAAa,CAAC,QAAQ;CACzC;CAEA,OACE,qBAAC,KAAD,EAAA,UAAA;EACE,qBAAC,gBAAD,EAAA,UAAA,CACE,oBAAC,OAAD;GACS;GACM;GACb,MAAM,MAAM,MAAM;GAClB,aAAa,CAAC;GACd,oBAAoB,UAAU;EAC/B,CAAA,GACA,CAAC,kBACA,oBAAC,gBAAD;GAAgB,SAAS;GAAc,MAAK;aACzC,eACC,oBAAC,YAAD,EAAY,UAAS,UAAW,CAAA,IAEhC,oBAAC,YAAD,EAAY,UAAS,UAAW,CAAA;EAEpB,CAAA,IACd,IACU,EAAA,CAAA;EAChB,oBAAC,UAAD;GAAU,SAAS;GAAK,IAAI;GAAc,cAAA;GAAa,eAAA;aACrD,oBAAC,cAAD,EAAqB,MAAQ,CAAA;EACrB,CAAA;EACT,iBACC,oBAAC,UAAD;GAAU,SAAS;GAAK,IAAI,CAAC;aAC3B,oBAAC,qBAAD,EAA4B,MAAQ,CAAA;EAC5B,CAAA,IACR;CACD,EAAA,CAAA;AAET"}
1
+ {"version":3,"file":"RouteToken.js","names":[],"sources":["../../../../src/components/RouteCard/RouteToken.tsx"],"sourcesContent":["import type { RouteExtended, TokenAmount } from '@lifi/sdk'\nimport ExpandLess from '@mui/icons-material/ExpandLess'\nimport ExpandMore from '@mui/icons-material/ExpandMore'\nimport { Box, Collapse } from '@mui/material'\nimport type { JSX } from 'react'\nimport { type MouseEventHandler, useState } from 'react'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport { Token } from '../Token/Token.js'\nimport { RouteCardEssentials } from './RouteCardEssentials.js'\nimport { RouteDetails } from './RouteDetails.js'\nimport { TokenContainer } from './RouteToken.style.js'\n\ninterface RouteTokenProps {\n route: RouteExtended\n token: TokenAmount\n impactToken?: TokenAmount\n defaultExpanded?: boolean\n showEssentials?: boolean\n}\n\nexport const RouteToken = ({\n route,\n token,\n impactToken,\n defaultExpanded,\n showEssentials,\n}: RouteTokenProps): JSX.Element => {\n const { hiddenUI } = useWidgetConfig()\n\n const [cardExpanded, setCardExpanded] = useState(defaultExpanded)\n\n const handleExpand: MouseEventHandler<HTMLButtonElement> = (e) => {\n e.stopPropagation()\n setCardExpanded((expanded) => !expanded)\n }\n\n return (\n <Box>\n <TokenContainer>\n <Token\n token={token}\n impactToken={impactToken}\n step={route.steps[0]}\n stepVisible={!cardExpanded}\n disableDescription={hiddenUI?.routeTokenDescription}\n />\n {!defaultExpanded ? (\n <CardIconButton onClick={handleExpand} size=\"small\">\n {cardExpanded ? (\n <ExpandLess fontSize=\"inherit\" />\n ) : (\n <ExpandMore fontSize=\"inherit\" />\n )}\n </CardIconButton>\n ) : null}\n </TokenContainer>\n <Collapse timeout={225} in={cardExpanded} mountOnEnter unmountOnExit>\n <RouteDetails route={route} />\n </Collapse>\n {showEssentials ? (\n <Collapse timeout={225} in={!cardExpanded}>\n <RouteCardEssentials route={route} />\n </Collapse>\n ) : null}\n </Box>\n )\n}\n"],"mappings":";;;;;;;;;;;;AAqBA,MAAa,cAAc,EACzB,OACA,OACA,aACA,iBACA,qBACkC;CAClC,MAAM,EAAE,aAAa,gBAAgB;CAErC,MAAM,CAAC,cAAc,mBAAmB,SAAS,eAAe;CAEhE,MAAM,gBAAsD,MAAM;EAChE,EAAE,gBAAgB;EAClB,iBAAiB,aAAa,CAAC,QAAQ;CACzC;CAEA,OACE,qBAAC,KAAD,EAAA,UAAA;EACE,qBAAC,gBAAD,EAAA,UAAA,CACE,oBAAC,OAAD;GACS;GACM;GACb,MAAM,MAAM,MAAM;GAClB,aAAa,CAAC;GACd,oBAAoB,UAAU;EAC/B,CAAA,GACA,CAAC,kBACA,oBAAC,gBAAD;GAAgB,SAAS;GAAc,MAAK;GACzC,UAAA,eACC,oBAAC,YAAD,EAAY,UAAS,UAAW,CAAA,IAEhC,oBAAC,YAAD,EAAY,UAAS,UAAW,CAAA;EAEpB,CAAA,IACd,IACU,EAAA,CAAA;EAChB,oBAAC,UAAD;GAAU,SAAS;GAAK,IAAI;GAAc,cAAA;GAAa,eAAA;GACrD,UAAA,oBAAC,cAAD,EAAqB,MAAQ,CAAA;EACrB,CAAA;EACT,iBACC,oBAAC,UAAD;GAAU,SAAS;GAAK,IAAI,CAAC;GAC3B,UAAA,oBAAC,qBAAD,EAA4B,MAAQ,CAAA;EAC5B,CAAA,IACR;CACD,EAAA,CAAA;AAET"}