@lifi/widget 4.0.0-beta.18 → 4.0.0-beta.20

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 (303) hide show
  1. package/dist/esm/App.js.map +1 -1
  2. package/dist/esm/AppDefault.js.map +1 -1
  3. package/dist/esm/AppDrawer.js.map +1 -1
  4. package/dist/esm/AppLayout.js.map +1 -1
  5. package/dist/esm/AppProvider.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/AmountInputStartAdornment.js.map +1 -1
  9. package/dist/esm/components/AmountInput/PriceFormHelperText.js.map +1 -1
  10. package/dist/esm/components/AppContainer.js.map +1 -1
  11. package/dist/esm/components/Avatar/AccountAvatar.js.map +1 -1
  12. package/dist/esm/components/Avatar/Avatar.js.map +1 -1
  13. package/dist/esm/components/Avatar/Avatar.style.js.map +1 -1
  14. package/dist/esm/components/Avatar/ChainBadgeContent.js.map +1 -1
  15. package/dist/esm/components/Avatar/SmallAvatar.js.map +1 -1
  16. package/dist/esm/components/Avatar/TokenAvatar.js.map +1 -1
  17. package/dist/esm/components/Avatar/utils.js.map +1 -1
  18. package/dist/esm/components/BaseTransactionButton/BaseTransactionButton.js.map +1 -1
  19. package/dist/esm/components/BottomSheet/BottomSheet.js.map +1 -1
  20. package/dist/esm/components/Card/Card.js.map +1 -1
  21. package/dist/esm/components/Card/CardIconButton.js.map +1 -1
  22. package/dist/esm/components/ChainSelect/ChainSelect.js.map +1 -1
  23. package/dist/esm/components/ChainSelect/ChainSelect.style.js.map +1 -1
  24. package/dist/esm/components/ChainSelect/useChainSelect.js.map +1 -1
  25. package/dist/esm/components/Chains/AllChainsAvatar.js.map +1 -1
  26. package/dist/esm/components/Chains/ChainList.js.map +1 -1
  27. package/dist/esm/components/Chains/ChainList.style.js.map +1 -1
  28. package/dist/esm/components/Chains/ChainListItem.js.map +1 -1
  29. package/dist/esm/components/Chains/ChainSearchInput.js.map +1 -1
  30. package/dist/esm/components/Chains/ChainsExpanded.js.map +1 -1
  31. package/dist/esm/components/Chains/PinChainButton.js.map +1 -1
  32. package/dist/esm/components/Chains/SelectChainContent.js.map +1 -1
  33. package/dist/esm/components/Chains/VirtualizedChainList.js.map +1 -1
  34. package/dist/esm/components/ContextMenu.js.map +1 -1
  35. package/dist/esm/components/ContractComponent/ContractComponent.js.map +1 -1
  36. package/dist/esm/components/ContractComponent/ItemPrice.js.map +1 -1
  37. package/dist/esm/components/ContractComponent/NFT/NFT.js.map +1 -1
  38. package/dist/esm/components/ContractComponent/NFT/NFTBase.js.map +1 -1
  39. package/dist/esm/components/Dialog/Dialog.js.map +1 -1
  40. package/dist/esm/components/Expansion/Expansion.js.map +1 -1
  41. package/dist/esm/components/Expansion/ExpansionTransition.js.map +1 -1
  42. package/dist/esm/components/FeeBreakdownTooltip.js.map +1 -1
  43. package/dist/esm/components/Header/ActivitiesButton.js.map +1 -1
  44. package/dist/esm/components/Header/BackButton.js.map +1 -1
  45. package/dist/esm/components/Header/CloseDrawerButton.js.map +1 -1
  46. package/dist/esm/components/Header/DisconnectIconButton.js.map +1 -1
  47. package/dist/esm/components/Header/Header.js.map +1 -1
  48. package/dist/esm/components/Header/Header.style.js.map +1 -1
  49. package/dist/esm/components/Header/NavigationHeader.js.map +1 -1
  50. package/dist/esm/components/Header/SettingsButton.js.map +1 -1
  51. package/dist/esm/components/Header/SettingsButton.style.js.map +1 -1
  52. package/dist/esm/components/Header/SplitNavigationTabs.js.map +1 -1
  53. package/dist/esm/components/Header/WalletHeader.js.map +1 -1
  54. package/dist/esm/components/Header/WalletMenu.js.map +1 -1
  55. package/dist/esm/components/IconCircle/IconCircle.js.map +1 -1
  56. package/dist/esm/components/IconCircle/IconCircle.style.js.map +1 -1
  57. package/dist/esm/components/Initializer.js.map +1 -1
  58. package/dist/esm/components/ListItemButton.js.map +1 -1
  59. package/dist/esm/components/Messages/AccountDeployedMessage.js.map +1 -1
  60. package/dist/esm/components/Messages/AccountNotDeployedMessage.js.map +1 -1
  61. package/dist/esm/components/Messages/FundsSufficiencyMessage.js.map +1 -1
  62. package/dist/esm/components/Messages/GasRefuelMessage.js.map +1 -1
  63. package/dist/esm/components/Messages/GasSufficiencyMessage.js.map +1 -1
  64. package/dist/esm/components/Messages/MinFromAmountUSDMessage.js.map +1 -1
  65. package/dist/esm/components/Messages/MissingRouteRequiredAccountMessage.js.map +1 -1
  66. package/dist/esm/components/Messages/WarningMessages.js.map +1 -1
  67. package/dist/esm/components/Messages/useMessageQueue.js.map +1 -1
  68. package/dist/esm/components/NotFound.js.map +1 -1
  69. package/dist/esm/components/PageEntered.js.map +1 -1
  70. package/dist/esm/components/PoweredBy/PoweredBy.js.map +1 -1
  71. package/dist/esm/components/ProgressToNextUpdate.js.map +1 -1
  72. package/dist/esm/components/ReverseTokensButton/ReverseTokensButton.js.map +1 -1
  73. package/dist/esm/components/ReverseTokensButton/ReverseTokensButton.style.js.map +1 -1
  74. package/dist/esm/components/RouteCard/RouteCard.js.map +1 -1
  75. package/dist/esm/components/RouteCard/RouteCardEssentials.js.map +1 -1
  76. package/dist/esm/components/RouteCard/RouteCardSkeleton.js.map +1 -1
  77. package/dist/esm/components/RouteCard/RouteDetails.js.map +1 -1
  78. package/dist/esm/components/RouteCard/RouteNotFoundCard.js.map +1 -1
  79. package/dist/esm/components/RouteCard/RouteToken.js.map +1 -1
  80. package/dist/esm/components/RouteCard/RouteTokens.js.map +1 -1
  81. package/dist/esm/components/RouteCard/getMatchingLabels.js +1 -0
  82. package/dist/esm/components/RouteCard/getMatchingLabels.js.map +1 -1
  83. package/dist/esm/components/Routes/Routes.js.map +1 -1
  84. package/dist/esm/components/Routes/RoutesContent.js.map +1 -1
  85. package/dist/esm/components/Routes/RoutesExpanded.js.map +1 -1
  86. package/dist/esm/components/Routes/RoutesExpanded.style.js.map +1 -1
  87. package/dist/esm/components/Search/SearchInput.js.map +1 -1
  88. package/dist/esm/components/SelectChainAndToken.js.map +1 -1
  89. package/dist/esm/components/SelectTokenButton/SelectTokenButton.js.map +1 -1
  90. package/dist/esm/components/SelectTokenButton/SelectTokenButton.style.js.map +1 -1
  91. package/dist/esm/components/SendToWallet/SendToWalletButton.js.map +1 -1
  92. package/dist/esm/components/SendToWallet/SendToWalletExpandButton.js.map +1 -1
  93. package/dist/esm/components/Skeleton/WidgetSkeleton.js.map +1 -1
  94. package/dist/esm/components/Skeleton/WidgetSkeleton.style.js.map +1 -1
  95. package/dist/esm/components/Step/CircularProgress.js.map +1 -1
  96. package/dist/esm/components/Step/CircularProgress.style.js.map +1 -1
  97. package/dist/esm/components/Step/DestinationWalletAddress.js.map +1 -1
  98. package/dist/esm/components/Step/Step.js.map +1 -1
  99. package/dist/esm/components/Step/StepAction.js.map +1 -1
  100. package/dist/esm/components/Step/StepActions.js.map +1 -1
  101. package/dist/esm/components/Step/StepList.js.map +1 -1
  102. package/dist/esm/components/StepActions/StepActions.js.map +1 -1
  103. package/dist/esm/components/StepDivider/StepDivider.js.map +1 -1
  104. package/dist/esm/components/TextFitter/TextFitter.js.map +1 -1
  105. package/dist/esm/components/Timer/StepTimer.js.map +1 -1
  106. package/dist/esm/components/Timer/TimerContent.js.map +1 -1
  107. package/dist/esm/components/Token/Token.js.map +1 -1
  108. package/dist/esm/components/TokenList/PinTokenButton.js.map +1 -1
  109. package/dist/esm/components/TokenList/TokenDetailsSheet.js.map +1 -1
  110. package/dist/esm/components/TokenList/TokenDetailsSheetContent.js.map +1 -1
  111. package/dist/esm/components/TokenList/TokenList.js.map +1 -1
  112. package/dist/esm/components/TokenList/TokenListItem.js.map +1 -1
  113. package/dist/esm/components/TokenList/TokenNotFound.js.map +1 -1
  114. package/dist/esm/components/TokenList/VirtualizedTokenList.js.map +1 -1
  115. package/dist/esm/components/TokenList/useTokenSelect.js.map +1 -1
  116. package/dist/esm/components/TokenRate/TokenRate.js.map +1 -1
  117. package/dist/esm/components/Tools/ToolItem.js.map +1 -1
  118. package/dist/esm/components/Tools/Tools.js.map +1 -1
  119. package/dist/esm/components/TransactionCard/ActiveTransactionCard.js.map +1 -1
  120. package/dist/esm/components/TransactionCard/TransactionCard.js.map +1 -1
  121. package/dist/esm/components/TransactionCard/TransactionCardSkeleton.js.map +1 -1
  122. package/dist/esm/components/TransactionDetails.js.map +1 -1
  123. package/dist/esm/config/version.d.ts +1 -1
  124. package/dist/esm/config/version.js +1 -1
  125. package/dist/esm/config/version.js.map +1 -1
  126. package/dist/esm/hooks/timer/time.js.map +1 -1
  127. package/dist/esm/hooks/timer/useExecutionTimer.js.map +1 -1
  128. package/dist/esm/hooks/timer/useInterval.js.map +1 -1
  129. package/dist/esm/hooks/timer/useTimer.js.map +1 -1
  130. package/dist/esm/hooks/timer/validate.js.map +1 -1
  131. package/dist/esm/hooks/useAccountsBalancesData.js.map +1 -1
  132. package/dist/esm/hooks/useActionMessage.js.map +1 -1
  133. package/dist/esm/hooks/useAddressActivity.js.map +1 -1
  134. package/dist/esm/hooks/useAddressValidation.js.map +1 -1
  135. package/dist/esm/hooks/useAvailableChains.js.map +1 -1
  136. package/dist/esm/hooks/useChain.js.map +1 -1
  137. package/dist/esm/hooks/useChains.js.map +1 -1
  138. package/dist/esm/hooks/useContactSupport.js.map +1 -1
  139. package/dist/esm/hooks/useDebouncedWatch.js.map +1 -1
  140. package/dist/esm/hooks/useDefaultElementId.js.map +1 -1
  141. package/dist/esm/hooks/useExplorer.js.map +1 -1
  142. package/dist/esm/hooks/useFilteredByTokenBalances.js.map +1 -1
  143. package/dist/esm/hooks/useFromAmountThreshold.js.map +1 -1
  144. package/dist/esm/hooks/useFromTokenSufficiency.js.map +1 -1
  145. package/dist/esm/hooks/useGasRecommendation.js.map +1 -1
  146. package/dist/esm/hooks/useGasRefuel.js.map +1 -1
  147. package/dist/esm/hooks/useGasSufficiency.js.map +1 -1
  148. package/dist/esm/hooks/useHasChainExpansion.js.map +1 -1
  149. package/dist/esm/hooks/useHeader.js.map +1 -1
  150. package/dist/esm/hooks/useInitializeSDKProviders.js.map +1 -1
  151. package/dist/esm/hooks/useInitializer.js.map +1 -1
  152. package/dist/esm/hooks/useIsBatchingSupported.js.map +1 -1
  153. package/dist/esm/hooks/useIsContractAddress.js.map +1 -1
  154. package/dist/esm/hooks/useLanguages.js.map +1 -1
  155. package/dist/esm/hooks/useListHeight.js.map +1 -1
  156. package/dist/esm/hooks/useLongPress.js.map +1 -1
  157. package/dist/esm/hooks/useNavigateBack.js.map +1 -1
  158. package/dist/esm/hooks/useRouteExecution.js.map +1 -1
  159. package/dist/esm/hooks/useRouteRequiredAccountConnection.js.map +1 -1
  160. package/dist/esm/hooks/useRoutes.js.map +1 -1
  161. package/dist/esm/hooks/useScrollableContainer.js.map +1 -1
  162. package/dist/esm/hooks/useSetContentHeight.js.map +1 -1
  163. package/dist/esm/hooks/useSettingMonitor.js.map +1 -1
  164. package/dist/esm/hooks/useSwapOnly.js.map +1 -1
  165. package/dist/esm/hooks/useToAddressAutoPopulate.js.map +1 -1
  166. package/dist/esm/hooks/useToAddressRequirements.js.map +1 -1
  167. package/dist/esm/hooks/useToAddressReset.js.map +1 -1
  168. package/dist/esm/hooks/useToken.js.map +1 -1
  169. package/dist/esm/hooks/useTokenAddressBalance.js.map +1 -1
  170. package/dist/esm/hooks/useTokenBalance.js.map +1 -1
  171. package/dist/esm/hooks/useTokenBalances.js.map +1 -1
  172. package/dist/esm/hooks/useTokenBalancesQueries.js.map +1 -1
  173. package/dist/esm/hooks/useTokenRateText.js.map +1 -1
  174. package/dist/esm/hooks/useTokenSearch.js.map +1 -1
  175. package/dist/esm/hooks/useTokens.js.map +1 -1
  176. package/dist/esm/hooks/useTools.js.map +1 -1
  177. package/dist/esm/hooks/useTransactionDetails.js.map +1 -1
  178. package/dist/esm/hooks/useTransactionHistory.js.map +1 -1
  179. package/dist/esm/hooks/useTransactionList.js.map +1 -1
  180. package/dist/esm/hooks/useWideVariant.js.map +1 -1
  181. package/dist/esm/hooks/useWidgetChains.js.map +1 -1
  182. package/dist/esm/hooks/useWidgetEvents.js.map +1 -1
  183. package/dist/esm/pages/ActivitiesPage/ActiveTransactionItem.js.map +1 -1
  184. package/dist/esm/pages/ActivitiesPage/ActivitiesPage.js.map +1 -1
  185. package/dist/esm/pages/ActivitiesPage/ActivitiesPageMenuButton.js.map +1 -1
  186. package/dist/esm/pages/ActivitiesPage/TransactionHistoryEmpty.js.map +1 -1
  187. package/dist/esm/pages/ActivitiesPage/TransactionHistoryItem.js.map +1 -1
  188. package/dist/esm/pages/LanguagesPage.js.map +1 -1
  189. package/dist/esm/pages/MainPage/MainPage.js.map +1 -1
  190. package/dist/esm/pages/MainPage/MainWarningMessages.js.map +1 -1
  191. package/dist/esm/pages/MainPage/ReviewButton.js.map +1 -1
  192. package/dist/esm/pages/RoutesPage/RoutesPage.js.map +1 -1
  193. package/dist/esm/pages/SelectChainPage/SelectChainPage.js.map +1 -1
  194. package/dist/esm/pages/SelectEnabledToolsPage.js.map +1 -1
  195. package/dist/esm/pages/SelectTokenPage/SearchTokenInput.js.map +1 -1
  196. package/dist/esm/pages/SelectTokenPage/SelectTokenPage.js.map +1 -1
  197. package/dist/esm/pages/SendToWallet/BookmarkAddressSheet.js.map +1 -1
  198. package/dist/esm/pages/SendToWallet/BookmarksPage.js.map +1 -1
  199. package/dist/esm/pages/SendToWallet/ConfirmAddressSheet.js.map +1 -1
  200. package/dist/esm/pages/SendToWallet/ConnectedWalletsPage.js.map +1 -1
  201. package/dist/esm/pages/SendToWallet/RecentWalletsPage.js.map +1 -1
  202. package/dist/esm/pages/SendToWallet/SendToConfiguredWalletPage.js.map +1 -1
  203. package/dist/esm/pages/SendToWallet/SendToWalletPage.js.map +1 -1
  204. package/dist/esm/pages/SettingsPage/BridgeAndExchangeSettings.js.map +1 -1
  205. package/dist/esm/pages/SettingsPage/GasPriceSettings.js.map +1 -1
  206. package/dist/esm/pages/SettingsPage/LanguageSetting.js.map +1 -1
  207. package/dist/esm/pages/SettingsPage/ResetSettingsButton.js.map +1 -1
  208. package/dist/esm/pages/SettingsPage/RoutePrioritySettings.js.map +1 -1
  209. package/dist/esm/pages/SettingsPage/SettingsCard/SettingCardExpandable.js.map +1 -1
  210. package/dist/esm/pages/SettingsPage/SettingsCard/SettingsAccordian.js.map +1 -1
  211. package/dist/esm/pages/SettingsPage/SettingsPage.js.map +1 -1
  212. package/dist/esm/pages/SettingsPage/SlippageSettings/SlippageSettings.js.map +1 -1
  213. package/dist/esm/pages/SettingsPage/SlippageSettings/SlippageSettings.style.js.map +1 -1
  214. package/dist/esm/pages/SettingsPage/SmallBalanceFilterSettings.js.map +1 -1
  215. package/dist/esm/pages/SettingsPage/ThemeSettings.js.map +1 -1
  216. package/dist/esm/pages/TransactionDetailsPage/ActionRow.js.map +1 -1
  217. package/dist/esm/pages/TransactionDetailsPage/ContactSupportButton.js.map +1 -1
  218. package/dist/esm/pages/TransactionDetailsPage/ReceiptsCard.js.map +1 -1
  219. package/dist/esm/pages/TransactionDetailsPage/SentToWalletRow.js.map +1 -1
  220. package/dist/esm/pages/TransactionDetailsPage/StepActionRow.js.map +1 -1
  221. package/dist/esm/pages/TransactionDetailsPage/StepActionsList.js.map +1 -1
  222. package/dist/esm/pages/TransactionDetailsPage/TransactionDetailsPage.js.map +1 -1
  223. package/dist/esm/pages/TransactionDetailsPage/TransactionDetailsSkeleton.js.map +1 -1
  224. package/dist/esm/pages/TransactionDetailsPage/TransferIdCard.js.map +1 -1
  225. package/dist/esm/pages/TransactionPage/ConfirmToAddressSheet.js.map +1 -1
  226. package/dist/esm/pages/TransactionPage/ExchangeRateBottomSheet.js.map +1 -1
  227. package/dist/esm/pages/TransactionPage/RouteTracker.js.map +1 -1
  228. package/dist/esm/pages/TransactionPage/StartTransactionButton.js.map +1 -1
  229. package/dist/esm/pages/TransactionPage/StatusBottomSheet.js.map +1 -1
  230. package/dist/esm/pages/TransactionPage/StatusBottomSheet.style.js.map +1 -1
  231. package/dist/esm/pages/TransactionPage/TokenValueBottomSheet.js.map +1 -1
  232. package/dist/esm/pages/TransactionPage/TransactionPage.js.map +1 -1
  233. package/dist/esm/pages/TransactionPage/utils.js.map +1 -1
  234. package/dist/esm/providers/I18nProvider/I18nProvider.js.map +1 -1
  235. package/dist/esm/providers/I18nProvider/i18n.js.map +1 -1
  236. package/dist/esm/providers/QueryClientProvider.js.map +1 -1
  237. package/dist/esm/providers/SDKClientProvider.js.map +1 -1
  238. package/dist/esm/providers/ThemeProvider/ThemeProvider.js.map +1 -1
  239. package/dist/esm/providers/WalletProvider/WalletProvider.js.map +1 -1
  240. package/dist/esm/providers/WalletProvider/useExternalWalletProvider.js.map +1 -1
  241. package/dist/esm/providers/WidgetProvider/WidgetProvider.js.map +1 -1
  242. package/dist/esm/stores/StoreProvider.js.map +1 -1
  243. package/dist/esm/stores/bookmarks/BookmarkStore.js.map +1 -1
  244. package/dist/esm/stores/bookmarks/createBookmarkStore.js.map +1 -1
  245. package/dist/esm/stores/bookmarks/useBookmarkActions.js.map +1 -1
  246. package/dist/esm/stores/bookmarks/useBookmarks.js.map +1 -1
  247. package/dist/esm/stores/chains/ChainOrderStore.js.map +1 -1
  248. package/dist/esm/stores/chains/createChainOrderStore.js.map +1 -1
  249. package/dist/esm/stores/chains/useChainOrder.js.map +1 -1
  250. package/dist/esm/stores/form/FormStore.js.map +1 -1
  251. package/dist/esm/stores/form/FormUpdater.js.map +1 -1
  252. package/dist/esm/stores/form/URLSearchParamsBuilder.js.map +1 -1
  253. package/dist/esm/stores/form/createFormStore.js.map +1 -1
  254. package/dist/esm/stores/form/getDefaultValuesFromQueryString.js.map +1 -1
  255. package/dist/esm/stores/form/useFieldActions.js.map +1 -1
  256. package/dist/esm/stores/form/useFieldValues.js.map +1 -1
  257. package/dist/esm/stores/form/useFormRef.js.map +1 -1
  258. package/dist/esm/stores/form/useFormStore.js.map +1 -1
  259. package/dist/esm/stores/form/useTouchedFields.js.map +1 -1
  260. package/dist/esm/stores/header/useHeaderStore.js.map +1 -1
  261. package/dist/esm/stores/inputMode/useInputModeStore.js.map +1 -1
  262. package/dist/esm/stores/pinnedTokens/PinnedTokensStore.js.map +1 -1
  263. package/dist/esm/stores/pinnedTokens/createPinnedTokensStore.js.map +1 -1
  264. package/dist/esm/stores/routes/RouteExecutionStore.js.map +1 -1
  265. package/dist/esm/stores/routes/createRouteExecutionStore.js.map +1 -1
  266. package/dist/esm/stores/routes/useIntermediateRoutesStore.js.map +1 -1
  267. package/dist/esm/stores/routes/useRouteExecutionIndicator.js.map +1 -1
  268. package/dist/esm/stores/routes/useSetExecutableRoute.js.map +1 -1
  269. package/dist/esm/stores/routes/utils.js.map +1 -1
  270. package/dist/esm/stores/settings/SettingsStore.js.map +1 -1
  271. package/dist/esm/stores/settings/createSettingsStore.js.map +1 -1
  272. package/dist/esm/stores/settings/useSettings.js.map +1 -1
  273. package/dist/esm/stores/settings/useSettingsActions.js.map +1 -1
  274. package/dist/esm/stores/settings/useSplitSubvariantStore.js.map +1 -1
  275. package/dist/esm/themes/createTheme.js.map +1 -1
  276. package/dist/esm/themes/utils.js.map +1 -1
  277. package/dist/esm/types/events.js.map +1 -1
  278. package/dist/esm/types/widget.d.ts +9 -1
  279. package/dist/esm/types/widget.d.ts.map +1 -1
  280. package/dist/esm/types/widget.js.map +1 -1
  281. package/dist/esm/utils/compactNumberFormatter.js.map +1 -1
  282. package/dist/esm/utils/converters.js.map +1 -1
  283. package/dist/esm/utils/currencyExtendedFormatter.js.map +1 -1
  284. package/dist/esm/utils/deepEqual.js.map +1 -1
  285. package/dist/esm/utils/deepMerge.js.map +1 -1
  286. package/dist/esm/utils/fees.js.map +1 -1
  287. package/dist/esm/utils/format.js.map +1 -1
  288. package/dist/esm/utils/getActionMessage.js.map +1 -1
  289. package/dist/esm/utils/getErrorMessage.js.map +1 -1
  290. package/dist/esm/utils/getPriceImpact.js.map +1 -1
  291. package/dist/esm/utils/input.js.map +1 -1
  292. package/dist/esm/utils/item.js.map +1 -1
  293. package/dist/esm/utils/percentFormatter.js.map +1 -1
  294. package/dist/esm/utils/prepareActions.js.map +1 -1
  295. package/dist/esm/utils/timer.js.map +1 -1
  296. package/dist/esm/utils/token.js.map +1 -1
  297. package/dist/esm/utils/tokenList.js.map +1 -1
  298. package/dist/esm/utils/variant.js.map +1 -1
  299. package/dist/esm/utils/widgetSize.js.map +1 -1
  300. package/package.json +11 -11
  301. package/src/components/RouteCard/getMatchingLabels.ts +5 -0
  302. package/src/config/version.ts +1 -1
  303. package/src/types/widget.ts +9 -0
@@ -1 +1 @@
1
- {"version":3,"file":"AllChainsAvatar.js","names":[],"sources":["../../../../src/components/Chains/AllChainsAvatar.tsx"],"sourcesContent":["import {\n ChainId,\n ChainType,\n type EVMChain,\n type ExtendedChain,\n} from '@lifi/sdk'\nimport { Avatar, Box } from '@mui/material'\nimport type React from 'react'\nimport { type JSX, memo, useMemo } from 'react'\n\ninterface AllChainsAvatarProps {\n chains: ExtendedChain[] | EVMChain[]\n size: 'small' | 'medium'\n}\n\nconst chainTypeIcons = [\n {\n name: 'Ethereum',\n chainType: ChainType.EVM,\n icon: 'https://lifinance.github.io/types/src/assets/icons/chains/ethereum.svg',\n defaultChainId: ChainId.ETH,\n },\n {\n name: 'Solana',\n chainType: ChainType.SVM,\n icon: 'https://lifinance.github.io/types/src/assets/icons/chains/solana.svg',\n defaultChainId: ChainId.SOL,\n },\n {\n name: 'Bitcoin',\n chainType: ChainType.UTXO,\n icon: 'https://lifinance.github.io/types/src/assets/icons/chains/bitcoin.svg',\n defaultChainId: ChainId.BTC,\n },\n {\n name: 'Sui',\n chainType: ChainType.MVM,\n icon: 'https://lifinance.github.io/types/src/assets/icons/chains/sui.svg',\n defaultChainId: ChainId.SUI,\n },\n {\n name: 'Tron',\n chainType: ChainType.TVM,\n icon: 'https://lifinance.github.io/types/src/assets/icons/chains/tron.svg',\n defaultChainId: ChainId.TRN,\n },\n]\n\nconst maxChainAvatarsCount = 4\n\nexport const AllChainsAvatar: React.NamedExoticComponent<AllChainsAvatarProps> =\n memo(({ chains, size }: AllChainsAvatarProps): JSX.Element => {\n const icons = useMemo(() => {\n // Create maps for efficient lookups\n const chainsPerChainType = new Map<ChainType, number>()\n const chainsByChainType = new Map<\n ChainType,\n (ExtendedChain | EVMChain)[]\n >()\n\n chains.forEach((chain) => {\n chainsPerChainType.set(\n chain.chainType,\n (chainsPerChainType.get(chain.chainType) || 0) + 1\n )\n const chainsOfType = chainsByChainType.get(chain.chainType) || []\n chainsOfType.push(chain)\n chainsByChainType.set(chain.chainType, chainsOfType)\n })\n\n // Get existing ecosystem icons\n const existingChainTypeIcons = chainTypeIcons.filter(\n (predefinedChain) => {\n const numberOfChains =\n chainsPerChainType.get(predefinedChain.chainType) ?? 0\n\n // If there's only one chain of this type, check if it's not the default\n if (numberOfChains === 1) {\n const chainsOfType = chainsByChainType.get(\n predefinedChain.chainType\n )\n const singleChain = chainsOfType?.[0]\n // Exclude the predefined icon if the single chain is not the default\n if (\n singleChain &&\n singleChain.id !== predefinedChain.defaultChainId\n ) {\n return false\n }\n }\n\n return numberOfChains > 0\n }\n )\n\n if (existingChainTypeIcons.length === maxChainAvatarsCount) {\n return existingChainTypeIcons\n }\n\n const remainingSlots =\n maxChainAvatarsCount - existingChainTypeIcons.length\n\n // Create a Set for O(1) lookup of predefined icon names\n const predefinedIconNames = new Set(\n existingChainTypeIcons.map((icon) => icon.name)\n )\n\n const chainsWithLogos = chains.filter((chain) => {\n // Filter out chain icons matching ecosystem icons\n return !predefinedIconNames.has(chain.name) && Boolean(chain.logoURI)\n })\n\n const additionalIcons = chainsWithLogos\n .slice(0, remainingSlots)\n .map((chain) => ({\n name: chain.name,\n chainType: chain.chainType,\n icon: chain.logoURI!,\n }))\n\n return [...existingChainTypeIcons, ...additionalIcons]\n }, [chains])\n\n const wrapperSize = size === 'small' ? '32px' : '40px'\n const avatarSize = size === 'small' ? '12px' : '16px'\n const avatarsCount = Math.min(icons.length, maxChainAvatarsCount)\n const gridRows = avatarsCount > 2 ? 2 : 1\n const gridColumns = avatarsCount > 1 ? 2 : 1\n\n return (\n <Box\n sx={{\n width: wrapperSize,\n height: wrapperSize,\n display: 'grid',\n gridTemplateRows: `repeat(${gridRows}, 1fr)`,\n gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,\n placeItems: 'center',\n }}\n >\n {icons.slice(0, avatarsCount).map((chain, idx) => {\n const isThirdAvatarInThreeAvatarLayout =\n avatarsCount === 3 && idx === 2\n\n return (\n <Avatar\n key={`${chain.chainType}-${idx}`}\n src={chain.icon}\n alt={chain.name}\n sx={{\n width: avatarSize,\n height: avatarSize,\n margin: 'auto',\n ...(isThirdAvatarInThreeAvatarLayout && {\n gridColumn: '1 / span 2',\n gridRow: '2',\n justifySelf: 'center',\n }),\n }}\n >\n {chain.chainType[0]}\n </Avatar>\n )\n })}\n </Box>\n )\n })\n"],"mappings":";;;;;AAeA,MAAM,iBAAiB;CACrB;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;EACzB;CACD;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;EACzB;CACD;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;EACzB;CACD;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;EACzB;CACD;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;EACzB;CACF;AAED,MAAM,uBAAuB;AAE7B,MAAa,kBACX,MAAM,EAAE,QAAQ,WAA8C;CAC5D,MAAM,QAAQ,cAAc;EAE1B,MAAM,qCAAqB,IAAI,KAAwB;EACvD,MAAM,oCAAoB,IAAI,KAG3B;AAEH,SAAO,SAAS,UAAU;AACxB,sBAAmB,IACjB,MAAM,YACL,mBAAmB,IAAI,MAAM,UAAU,IAAI,KAAK,EAClD;GACD,MAAM,eAAe,kBAAkB,IAAI,MAAM,UAAU,IAAI,EAAE;AACjE,gBAAa,KAAK,MAAM;AACxB,qBAAkB,IAAI,MAAM,WAAW,aAAa;IACpD;EAGF,MAAM,yBAAyB,eAAe,QAC3C,oBAAoB;GACnB,MAAM,iBACJ,mBAAmB,IAAI,gBAAgB,UAAU,IAAI;AAGvD,OAAI,mBAAmB,GAAG;IAIxB,MAAM,cAHe,kBAAkB,IACrC,gBAAgB,UAEc,GAAG;AAEnC,QACE,eACA,YAAY,OAAO,gBAAgB,eAEnC,QAAO;;AAIX,UAAO,iBAAiB;IAE3B;AAED,MAAI,uBAAuB,WAAW,qBACpC,QAAO;EAGT,MAAM,iBACJ,uBAAuB,uBAAuB;EAGhD,MAAM,sBAAsB,IAAI,IAC9B,uBAAuB,KAAK,SAAS,KAAK,KAAK,CAChD;EAOD,MAAM,kBALkB,OAAO,QAAQ,UAAU;AAE/C,UAAO,CAAC,oBAAoB,IAAI,MAAM,KAAK,IAAI,QAAQ,MAAM,QAAQ;IAGhC,CACpC,MAAM,GAAG,eAAe,CACxB,KAAK,WAAW;GACf,MAAM,MAAM;GACZ,WAAW,MAAM;GACjB,MAAM,MAAM;GACb,EAAE;AAEL,SAAO,CAAC,GAAG,wBAAwB,GAAG,gBAAgB;IACrD,CAAC,OAAO,CAAC;CAEZ,MAAM,cAAc,SAAS,UAAU,SAAS;CAChD,MAAM,aAAa,SAAS,UAAU,SAAS;CAC/C,MAAM,eAAe,KAAK,IAAI,MAAM,QAAQ,qBAAqB;CACjE,MAAM,WAAW,eAAe,IAAI,IAAI;CACxC,MAAM,cAAc,eAAe,IAAI,IAAI;AAE3C,QACE,oBAAC,KAAD;EACE,IAAI;GACF,OAAO;GACP,QAAQ;GACR,SAAS;GACT,kBAAkB,UAAU,SAAS;GACrC,qBAAqB,UAAU,YAAY;GAC3C,YAAY;GACb;YAEA,MAAM,MAAM,GAAG,aAAa,CAAC,KAAK,OAAO,QAAQ;GAChD,MAAM,mCACJ,iBAAiB,KAAK,QAAQ;AAEhC,UACE,oBAAC,QAAD;IAEE,KAAK,MAAM;IACX,KAAK,MAAM;IACX,IAAI;KACF,OAAO;KACP,QAAQ;KACR,QAAQ;KACR,GAAI,oCAAoC;MACtC,YAAY;MACZ,SAAS;MACT,aAAa;MACd;KACF;cAEA,MAAM,UAAU;IACV,EAfF,GAAG,MAAM,UAAU,GAAG,MAepB;IAEX;EACE,CAAA;EAER"}
1
+ {"version":3,"file":"AllChainsAvatar.js","names":[],"sources":["../../../../src/components/Chains/AllChainsAvatar.tsx"],"sourcesContent":["import {\n ChainId,\n ChainType,\n type EVMChain,\n type ExtendedChain,\n} from '@lifi/sdk'\nimport { Avatar, Box } from '@mui/material'\nimport type React from 'react'\nimport { type JSX, memo, useMemo } from 'react'\n\ninterface AllChainsAvatarProps {\n chains: ExtendedChain[] | EVMChain[]\n size: 'small' | 'medium'\n}\n\nconst chainTypeIcons = [\n {\n name: 'Ethereum',\n chainType: ChainType.EVM,\n icon: 'https://lifinance.github.io/types/src/assets/icons/chains/ethereum.svg',\n defaultChainId: ChainId.ETH,\n },\n {\n name: 'Solana',\n chainType: ChainType.SVM,\n icon: 'https://lifinance.github.io/types/src/assets/icons/chains/solana.svg',\n defaultChainId: ChainId.SOL,\n },\n {\n name: 'Bitcoin',\n chainType: ChainType.UTXO,\n icon: 'https://lifinance.github.io/types/src/assets/icons/chains/bitcoin.svg',\n defaultChainId: ChainId.BTC,\n },\n {\n name: 'Sui',\n chainType: ChainType.MVM,\n icon: 'https://lifinance.github.io/types/src/assets/icons/chains/sui.svg',\n defaultChainId: ChainId.SUI,\n },\n {\n name: 'Tron',\n chainType: ChainType.TVM,\n icon: 'https://lifinance.github.io/types/src/assets/icons/chains/tron.svg',\n defaultChainId: ChainId.TRN,\n },\n]\n\nconst maxChainAvatarsCount = 4\n\nexport const AllChainsAvatar: React.NamedExoticComponent<AllChainsAvatarProps> =\n memo(({ chains, size }: AllChainsAvatarProps): JSX.Element => {\n const icons = useMemo(() => {\n // Create maps for efficient lookups\n const chainsPerChainType = new Map<ChainType, number>()\n const chainsByChainType = new Map<\n ChainType,\n (ExtendedChain | EVMChain)[]\n >()\n\n chains.forEach((chain) => {\n chainsPerChainType.set(\n chain.chainType,\n (chainsPerChainType.get(chain.chainType) || 0) + 1\n )\n const chainsOfType = chainsByChainType.get(chain.chainType) || []\n chainsOfType.push(chain)\n chainsByChainType.set(chain.chainType, chainsOfType)\n })\n\n // Get existing ecosystem icons\n const existingChainTypeIcons = chainTypeIcons.filter(\n (predefinedChain) => {\n const numberOfChains =\n chainsPerChainType.get(predefinedChain.chainType) ?? 0\n\n // If there's only one chain of this type, check if it's not the default\n if (numberOfChains === 1) {\n const chainsOfType = chainsByChainType.get(\n predefinedChain.chainType\n )\n const singleChain = chainsOfType?.[0]\n // Exclude the predefined icon if the single chain is not the default\n if (\n singleChain &&\n singleChain.id !== predefinedChain.defaultChainId\n ) {\n return false\n }\n }\n\n return numberOfChains > 0\n }\n )\n\n if (existingChainTypeIcons.length === maxChainAvatarsCount) {\n return existingChainTypeIcons\n }\n\n const remainingSlots =\n maxChainAvatarsCount - existingChainTypeIcons.length\n\n // Create a Set for O(1) lookup of predefined icon names\n const predefinedIconNames = new Set(\n existingChainTypeIcons.map((icon) => icon.name)\n )\n\n const chainsWithLogos = chains.filter((chain) => {\n // Filter out chain icons matching ecosystem icons\n return !predefinedIconNames.has(chain.name) && Boolean(chain.logoURI)\n })\n\n const additionalIcons = chainsWithLogos\n .slice(0, remainingSlots)\n .map((chain) => ({\n name: chain.name,\n chainType: chain.chainType,\n icon: chain.logoURI!,\n }))\n\n return [...existingChainTypeIcons, ...additionalIcons]\n }, [chains])\n\n const wrapperSize = size === 'small' ? '32px' : '40px'\n const avatarSize = size === 'small' ? '12px' : '16px'\n const avatarsCount = Math.min(icons.length, maxChainAvatarsCount)\n const gridRows = avatarsCount > 2 ? 2 : 1\n const gridColumns = avatarsCount > 1 ? 2 : 1\n\n return (\n <Box\n sx={{\n width: wrapperSize,\n height: wrapperSize,\n display: 'grid',\n gridTemplateRows: `repeat(${gridRows}, 1fr)`,\n gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,\n placeItems: 'center',\n }}\n >\n {icons.slice(0, avatarsCount).map((chain, idx) => {\n const isThirdAvatarInThreeAvatarLayout =\n avatarsCount === 3 && idx === 2\n\n return (\n <Avatar\n key={`${chain.chainType}-${idx}`}\n src={chain.icon}\n alt={chain.name}\n sx={{\n width: avatarSize,\n height: avatarSize,\n margin: 'auto',\n ...(isThirdAvatarInThreeAvatarLayout && {\n gridColumn: '1 / span 2',\n gridRow: '2',\n justifySelf: 'center',\n }),\n }}\n >\n {chain.chainType[0]}\n </Avatar>\n )\n })}\n </Box>\n )\n })\n"],"mappings":";;;;;AAeA,MAAM,iBAAiB;CACrB;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;EACzB;CACD;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;EACzB;CACD;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;EACzB;CACD;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;EACzB;CACD;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;EACzB;CACF;AAED,MAAM,uBAAuB;AAE7B,MAAa,kBACX,MAAM,EAAE,QAAQ,WAA8C;CAC5D,MAAM,QAAQ,cAAc;EAE1B,MAAM,qCAAqB,IAAI,KAAwB;EACvD,MAAM,oCAAoB,IAAI,KAG3B;EAEH,OAAO,SAAS,UAAU;GACxB,mBAAmB,IACjB,MAAM,YACL,mBAAmB,IAAI,MAAM,UAAU,IAAI,KAAK,EAClD;GACD,MAAM,eAAe,kBAAkB,IAAI,MAAM,UAAU,IAAI,EAAE;GACjE,aAAa,KAAK,MAAM;GACxB,kBAAkB,IAAI,MAAM,WAAW,aAAa;IACpD;EAGF,MAAM,yBAAyB,eAAe,QAC3C,oBAAoB;GACnB,MAAM,iBACJ,mBAAmB,IAAI,gBAAgB,UAAU,IAAI;GAGvD,IAAI,mBAAmB,GAAG;IAIxB,MAAM,cAHe,kBAAkB,IACrC,gBAAgB,UAEc,GAAG;IAEnC,IACE,eACA,YAAY,OAAO,gBAAgB,gBAEnC,OAAO;;GAIX,OAAO,iBAAiB;IAE3B;EAED,IAAI,uBAAuB,WAAW,sBACpC,OAAO;EAGT,MAAM,iBACJ,uBAAuB,uBAAuB;EAGhD,MAAM,sBAAsB,IAAI,IAC9B,uBAAuB,KAAK,SAAS,KAAK,KAAK,CAChD;EAOD,MAAM,kBALkB,OAAO,QAAQ,UAAU;GAE/C,OAAO,CAAC,oBAAoB,IAAI,MAAM,KAAK,IAAI,QAAQ,MAAM,QAAQ;IAGhC,CACpC,MAAM,GAAG,eAAe,CACxB,KAAK,WAAW;GACf,MAAM,MAAM;GACZ,WAAW,MAAM;GACjB,MAAM,MAAM;GACb,EAAE;EAEL,OAAO,CAAC,GAAG,wBAAwB,GAAG,gBAAgB;IACrD,CAAC,OAAO,CAAC;CAEZ,MAAM,cAAc,SAAS,UAAU,SAAS;CAChD,MAAM,aAAa,SAAS,UAAU,SAAS;CAC/C,MAAM,eAAe,KAAK,IAAI,MAAM,QAAQ,qBAAqB;CACjE,MAAM,WAAW,eAAe,IAAI,IAAI;CACxC,MAAM,cAAc,eAAe,IAAI,IAAI;CAE3C,OACE,oBAAC,KAAD;EACE,IAAI;GACF,OAAO;GACP,QAAQ;GACR,SAAS;GACT,kBAAkB,UAAU,SAAS;GACrC,qBAAqB,UAAU,YAAY;GAC3C,YAAY;GACb;YAEA,MAAM,MAAM,GAAG,aAAa,CAAC,KAAK,OAAO,QAAQ;GAChD,MAAM,mCACJ,iBAAiB,KAAK,QAAQ;GAEhC,OACE,oBAAC,QAAD;IAEE,KAAK,MAAM;IACX,KAAK,MAAM;IACX,IAAI;KACF,OAAO;KACP,QAAQ;KACR,QAAQ;KACR,GAAI,oCAAoC;MACtC,YAAY;MACZ,SAAS;MACT,aAAa;MACd;KACF;cAEA,MAAM,UAAU;IACV,EAfF,GAAG,MAAM,UAAU,GAAG,MAepB;IAEX;EACE,CAAA;EAER"}
@@ -1 +1 @@
1
- {"version":3,"file":"ChainList.js","names":["List","ListItemButton","ListItemAvatar","ListItemText"],"sources":["../../../../src/components/Chains/ChainList.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport { Skeleton } from '@mui/material'\nimport type { JSX, RefObject } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { FormType } from '../../stores/form/types.js'\nimport { SearchNotFound } from '../Search/SearchNotFound.js'\nimport {\n List,\n ListItemAvatar,\n ListItemButton,\n ListItemText,\n} from './ChainList.style.js'\nimport { VirtualizedChainList } from './VirtualizedChainList.js'\n\ninterface ChainListProps {\n parentRef: RefObject<HTMLDivElement | null>\n formType: FormType\n chains: ExtendedChain[]\n onSelect: (chain: ExtendedChain) => void\n selectedChainId?: number\n isLoading: boolean\n hasSearchQuery: boolean\n inExpansion: boolean\n}\n\nexport const ChainList = ({\n parentRef,\n formType,\n chains,\n hasSearchQuery,\n onSelect,\n selectedChainId,\n isLoading,\n inExpansion,\n}: ChainListProps): JSX.Element => {\n const { t } = useTranslation()\n\n const itemsSize = inExpansion ? 'small' : 'medium'\n\n if (isLoading) {\n return (\n <List disablePadding sx={{ cursor: 'default' }}>\n {Array.from({ length: 3 }).map((_, index) => (\n <ListItemButton\n key={index}\n size={itemsSize}\n sx={{ pointerEvents: 'none' }}\n >\n <ListItemAvatar size={itemsSize}>\n <Skeleton\n variant=\"circular\"\n width={itemsSize === 'small' ? 32 : 40}\n height={itemsSize === 'small' ? 32 : 40}\n sx={{ marginRight: 2 }}\n />\n </ListItemAvatar>\n <ListItemText\n primary={\n <Skeleton\n variant=\"text\"\n width={'100%'}\n height={itemsSize === 'small' ? 18 : 24}\n />\n }\n size={itemsSize}\n />\n </ListItemButton>\n ))}\n </List>\n )\n }\n\n if (!chains.length) {\n return (\n <SearchNotFound\n message={t('info.message.emptyChainList')}\n adjustForStickySearchInput={!inExpansion}\n />\n )\n }\n\n return (\n <VirtualizedChainList\n scrollElementRef={parentRef}\n formType={formType}\n chains={chains}\n hasSearchQuery={hasSearchQuery}\n onSelect={onSelect}\n selectedChainId={selectedChainId}\n itemsSize={itemsSize}\n withPinnedChains={inExpansion}\n />\n )\n}\n"],"mappings":";;;;;;;AAyBA,MAAa,aAAa,EACxB,WACA,UACA,QACA,gBACA,UACA,iBACA,WACA,kBACiC;CACjC,MAAM,EAAE,MAAM,gBAAgB;CAE9B,MAAM,YAAY,cAAc,UAAU;AAE1C,KAAI,UACF,QACE,oBAACA,QAAD;EAAM,gBAAA;EAAe,IAAI,EAAE,QAAQ,WAAW;YAC3C,MAAM,KAAK,EAAE,QAAQ,GAAG,CAAC,CAAC,KAAK,GAAG,UACjC,qBAACC,kBAAD;GAEE,MAAM;GACN,IAAI,EAAE,eAAe,QAAQ;aAH/B,CAKE,oBAACC,kBAAD;IAAgB,MAAM;cACpB,oBAAC,UAAD;KACE,SAAQ;KACR,OAAO,cAAc,UAAU,KAAK;KACpC,QAAQ,cAAc,UAAU,KAAK;KACrC,IAAI,EAAE,aAAa,GAAG;KACtB,CAAA;IACa,CAAA,EACjB,oBAACC,gBAAD;IACE,SACE,oBAAC,UAAD;KACE,SAAQ;KACR,OAAO;KACP,QAAQ,cAAc,UAAU,KAAK;KACrC,CAAA;IAEJ,MAAM;IACN,CAAA,CACa;KAtBV,MAsBU,CACjB;EACG,CAAA;AAIX,KAAI,CAAC,OAAO,OACV,QACE,oBAAC,gBAAD;EACE,SAAS,EAAE,8BAA8B;EACzC,4BAA4B,CAAC;EAC7B,CAAA;AAIN,QACE,oBAAC,sBAAD;EACE,kBAAkB;EACR;EACF;EACQ;EACN;EACO;EACN;EACX,kBAAkB;EAClB,CAAA"}
1
+ {"version":3,"file":"ChainList.js","names":["List","ListItemButton","ListItemAvatar","ListItemText"],"sources":["../../../../src/components/Chains/ChainList.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport { Skeleton } from '@mui/material'\nimport type { JSX, RefObject } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { FormType } from '../../stores/form/types.js'\nimport { SearchNotFound } from '../Search/SearchNotFound.js'\nimport {\n List,\n ListItemAvatar,\n ListItemButton,\n ListItemText,\n} from './ChainList.style.js'\nimport { VirtualizedChainList } from './VirtualizedChainList.js'\n\ninterface ChainListProps {\n parentRef: RefObject<HTMLDivElement | null>\n formType: FormType\n chains: ExtendedChain[]\n onSelect: (chain: ExtendedChain) => void\n selectedChainId?: number\n isLoading: boolean\n hasSearchQuery: boolean\n inExpansion: boolean\n}\n\nexport const ChainList = ({\n parentRef,\n formType,\n chains,\n hasSearchQuery,\n onSelect,\n selectedChainId,\n isLoading,\n inExpansion,\n}: ChainListProps): JSX.Element => {\n const { t } = useTranslation()\n\n const itemsSize = inExpansion ? 'small' : 'medium'\n\n if (isLoading) {\n return (\n <List disablePadding sx={{ cursor: 'default' }}>\n {Array.from({ length: 3 }).map((_, index) => (\n <ListItemButton\n key={index}\n size={itemsSize}\n sx={{ pointerEvents: 'none' }}\n >\n <ListItemAvatar size={itemsSize}>\n <Skeleton\n variant=\"circular\"\n width={itemsSize === 'small' ? 32 : 40}\n height={itemsSize === 'small' ? 32 : 40}\n sx={{ marginRight: 2 }}\n />\n </ListItemAvatar>\n <ListItemText\n primary={\n <Skeleton\n variant=\"text\"\n width={'100%'}\n height={itemsSize === 'small' ? 18 : 24}\n />\n }\n size={itemsSize}\n />\n </ListItemButton>\n ))}\n </List>\n )\n }\n\n if (!chains.length) {\n return (\n <SearchNotFound\n message={t('info.message.emptyChainList')}\n adjustForStickySearchInput={!inExpansion}\n />\n )\n }\n\n return (\n <VirtualizedChainList\n scrollElementRef={parentRef}\n formType={formType}\n chains={chains}\n hasSearchQuery={hasSearchQuery}\n onSelect={onSelect}\n selectedChainId={selectedChainId}\n itemsSize={itemsSize}\n withPinnedChains={inExpansion}\n />\n )\n}\n"],"mappings":";;;;;;;AAyBA,MAAa,aAAa,EACxB,WACA,UACA,QACA,gBACA,UACA,iBACA,WACA,kBACiC;CACjC,MAAM,EAAE,MAAM,gBAAgB;CAE9B,MAAM,YAAY,cAAc,UAAU;CAE1C,IAAI,WACF,OACE,oBAACA,QAAD;EAAM,gBAAA;EAAe,IAAI,EAAE,QAAQ,WAAW;YAC3C,MAAM,KAAK,EAAE,QAAQ,GAAG,CAAC,CAAC,KAAK,GAAG,UACjC,qBAACC,kBAAD;GAEE,MAAM;GACN,IAAI,EAAE,eAAe,QAAQ;aAH/B,CAKE,oBAACC,kBAAD;IAAgB,MAAM;cACpB,oBAAC,UAAD;KACE,SAAQ;KACR,OAAO,cAAc,UAAU,KAAK;KACpC,QAAQ,cAAc,UAAU,KAAK;KACrC,IAAI,EAAE,aAAa,GAAG;KACtB,CAAA;IACa,CAAA,EACjB,oBAACC,gBAAD;IACE,SACE,oBAAC,UAAD;KACE,SAAQ;KACR,OAAO;KACP,QAAQ,cAAc,UAAU,KAAK;KACrC,CAAA;IAEJ,MAAM;IACN,CAAA,CACa;KAtBV,MAsBU,CACjB;EACG,CAAA;CAIX,IAAI,CAAC,OAAO,QACV,OACE,oBAAC,gBAAD;EACE,SAAS,EAAE,8BAA8B;EACzC,4BAA4B,CAAC;EAC7B,CAAA;CAIN,OACE,oBAAC,sBAAD;EACE,kBAAkB;EACR;EACF;EACQ;EACN;EACO;EACN;EACX,kBAAkB;EAClB,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"ChainList.style.js","names":["Avatar","MuiAvatar","ListItemAvatar","MuiListItemAvatar","ListItemText","MuiListItemText","ListItemButton","ListItemButtonBase","List","MuiList","ListItem","ListItemBase"],"sources":["../../../../src/components/Chains/ChainList.style.tsx"],"sourcesContent":["import {\n ListItem as ListItemBase,\n listItemButtonClasses,\n listItemTextClasses,\n Avatar as MuiAvatar,\n List as MuiList,\n ListItemAvatar as MuiListItemAvatar,\n ListItemText as MuiListItemText,\n styled,\n} from '@mui/material'\nimport type React from 'react'\nimport { ListItemButton as ListItemButtonBase } from '../ListItemButton.js'\n\nexport const Avatar: React.FC<\n React.ComponentProps<typeof MuiAvatar> &\n Partial<{\n size?: 'small' | 'medium'\n }>\n> = styled(MuiAvatar)<{\n size?: 'small' | 'medium'\n}>(({ size = 'medium' }) => ({\n width: size === 'small' ? 32 : 40,\n height: size === 'small' ? 32 : 40,\n}))\n\nexport const ListItemAvatar: React.FC<\n React.ComponentProps<typeof MuiListItemAvatar> &\n Partial<{\n size?: 'small' | 'medium'\n }>\n> = styled(MuiListItemAvatar)<{\n size?: 'small' | 'medium'\n}>(({ size = 'medium' }) => ({\n minWidth: size === 'small' ? 44 : 56,\n}))\n\nexport const ListItemText: React.FC<\n React.ComponentProps<typeof MuiListItemText> &\n Partial<{\n size?: 'small' | 'medium'\n }>\n> = styled(MuiListItemText)<{\n size?: 'small' | 'medium'\n}>(({ size = 'medium' }) => ({\n [`.${listItemTextClasses.primary}`]: {\n fontWeight: 500,\n fontSize: size === 'small' ? '1rem' : '1.125rem',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n },\n}))\n\nexport const ListItemButton: React.FC<\n React.ComponentProps<typeof ListItemButtonBase> &\n Partial<{\n size?: 'small' | 'medium'\n }>\n> = styled(ListItemButtonBase)<{\n size?: 'small' | 'medium'\n}>(({ size = 'medium', theme }) => {\n return {\n borderRadius: theme.vars.shape.borderRadius,\n paddingLeft: size === 'small' ? theme.spacing(1) : theme.spacing(1.5),\n height: size === 'small' ? 44 : 56,\n width: '100%',\n }\n})\n\nexport const List: React.FC<React.ComponentProps<typeof MuiList>> = styled(\n MuiList\n)(({ theme }) => ({\n display: 'flex',\n flexDirection: 'column',\n gap: theme.spacing(0.5),\n padding: 0,\n marginLeft: theme.spacing(1.5),\n marginRight: theme.spacing(1.5),\n marginBottom: theme.spacing(1.5),\n cursor: 'pointer',\n}))\n\nexport const ListItem: React.FC<React.ComponentProps<typeof ListItemBase>> =\n styled(ListItemBase)(({ theme }) => ({\n position: 'absolute',\n top: 0,\n left: 0,\n [`& .${listItemButtonClasses.root}`]: {\n paddingRight: theme.spacing(1),\n },\n }))\n"],"mappings":";;;AAaA,MAAaA,WAKT,OAAOC,OAAU,EAEjB,EAAE,OAAO,gBAAgB;CAC3B,OAAO,SAAS,UAAU,KAAK;CAC/B,QAAQ,SAAS,UAAU,KAAK;CACjC,EAAE;AAEH,MAAaC,mBAKT,OAAOC,eAAkB,EAEzB,EAAE,OAAO,gBAAgB,EAC3B,UAAU,SAAS,UAAU,KAAK,IACnC,EAAE;AAEH,MAAaC,iBAKT,OAAOC,aAAgB,EAEvB,EAAE,OAAO,gBAAgB,GAC1B,IAAI,oBAAoB,YAAY;CACnC,YAAY;CACZ,UAAU,SAAS,UAAU,SAAS;CACtC,cAAc;CACd,UAAU;CACV,YAAY;CACb,EACF,EAAE;AAEH,MAAaC,mBAKT,OAAOC,iBAAmB,EAE1B,EAAE,OAAO,UAAU,YAAY;AACjC,QAAO;EACL,cAAc,MAAM,KAAK,MAAM;EAC/B,aAAa,SAAS,UAAU,MAAM,QAAQ,EAAE,GAAG,MAAM,QAAQ,IAAI;EACrE,QAAQ,SAAS,UAAU,KAAK;EAChC,OAAO;EACR;EACD;AAEF,MAAaC,SAAuD,OAClEC,KACD,EAAE,EAAE,aAAa;CAChB,SAAS;CACT,eAAe;CACf,KAAK,MAAM,QAAQ,GAAI;CACvB,SAAS;CACT,YAAY,MAAM,QAAQ,IAAI;CAC9B,aAAa,MAAM,QAAQ,IAAI;CAC/B,cAAc,MAAM,QAAQ,IAAI;CAChC,QAAQ;CACT,EAAE;AAEH,MAAaC,aACX,OAAOC,SAAa,EAAE,EAAE,aAAa;CACnC,UAAU;CACV,KAAK;CACL,MAAM;EACL,MAAM,sBAAsB,SAAS,EACpC,cAAc,MAAM,QAAQ,EAAE,EAC/B;CACF,EAAE"}
1
+ {"version":3,"file":"ChainList.style.js","names":["Avatar","MuiAvatar","ListItemAvatar","MuiListItemAvatar","ListItemText","MuiListItemText","ListItemButton","ListItemButtonBase","List","MuiList","ListItem","ListItemBase"],"sources":["../../../../src/components/Chains/ChainList.style.tsx"],"sourcesContent":["import {\n ListItem as ListItemBase,\n listItemButtonClasses,\n listItemTextClasses,\n Avatar as MuiAvatar,\n List as MuiList,\n ListItemAvatar as MuiListItemAvatar,\n ListItemText as MuiListItemText,\n styled,\n} from '@mui/material'\nimport type React from 'react'\nimport { ListItemButton as ListItemButtonBase } from '../ListItemButton.js'\n\nexport const Avatar: React.FC<\n React.ComponentProps<typeof MuiAvatar> &\n Partial<{\n size?: 'small' | 'medium'\n }>\n> = styled(MuiAvatar)<{\n size?: 'small' | 'medium'\n}>(({ size = 'medium' }) => ({\n width: size === 'small' ? 32 : 40,\n height: size === 'small' ? 32 : 40,\n}))\n\nexport const ListItemAvatar: React.FC<\n React.ComponentProps<typeof MuiListItemAvatar> &\n Partial<{\n size?: 'small' | 'medium'\n }>\n> = styled(MuiListItemAvatar)<{\n size?: 'small' | 'medium'\n}>(({ size = 'medium' }) => ({\n minWidth: size === 'small' ? 44 : 56,\n}))\n\nexport const ListItemText: React.FC<\n React.ComponentProps<typeof MuiListItemText> &\n Partial<{\n size?: 'small' | 'medium'\n }>\n> = styled(MuiListItemText)<{\n size?: 'small' | 'medium'\n}>(({ size = 'medium' }) => ({\n [`.${listItemTextClasses.primary}`]: {\n fontWeight: 500,\n fontSize: size === 'small' ? '1rem' : '1.125rem',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n },\n}))\n\nexport const ListItemButton: React.FC<\n React.ComponentProps<typeof ListItemButtonBase> &\n Partial<{\n size?: 'small' | 'medium'\n }>\n> = styled(ListItemButtonBase)<{\n size?: 'small' | 'medium'\n}>(({ size = 'medium', theme }) => {\n return {\n borderRadius: theme.vars.shape.borderRadius,\n paddingLeft: size === 'small' ? theme.spacing(1) : theme.spacing(1.5),\n height: size === 'small' ? 44 : 56,\n width: '100%',\n }\n})\n\nexport const List: React.FC<React.ComponentProps<typeof MuiList>> = styled(\n MuiList\n)(({ theme }) => ({\n display: 'flex',\n flexDirection: 'column',\n gap: theme.spacing(0.5),\n padding: 0,\n marginLeft: theme.spacing(1.5),\n marginRight: theme.spacing(1.5),\n marginBottom: theme.spacing(1.5),\n cursor: 'pointer',\n}))\n\nexport const ListItem: React.FC<React.ComponentProps<typeof ListItemBase>> =\n styled(ListItemBase)(({ theme }) => ({\n position: 'absolute',\n top: 0,\n left: 0,\n [`& .${listItemButtonClasses.root}`]: {\n paddingRight: theme.spacing(1),\n },\n }))\n"],"mappings":";;;AAaA,MAAaA,WAKT,OAAOC,OAAU,EAEjB,EAAE,OAAO,gBAAgB;CAC3B,OAAO,SAAS,UAAU,KAAK;CAC/B,QAAQ,SAAS,UAAU,KAAK;CACjC,EAAE;AAEH,MAAaC,mBAKT,OAAOC,eAAkB,EAEzB,EAAE,OAAO,gBAAgB,EAC3B,UAAU,SAAS,UAAU,KAAK,IACnC,EAAE;AAEH,MAAaC,iBAKT,OAAOC,aAAgB,EAEvB,EAAE,OAAO,gBAAgB,GAC1B,IAAI,oBAAoB,YAAY;CACnC,YAAY;CACZ,UAAU,SAAS,UAAU,SAAS;CACtC,cAAc;CACd,UAAU;CACV,YAAY;CACb,EACF,EAAE;AAEH,MAAaC,mBAKT,OAAOC,iBAAmB,EAE1B,EAAE,OAAO,UAAU,YAAY;CACjC,OAAO;EACL,cAAc,MAAM,KAAK,MAAM;EAC/B,aAAa,SAAS,UAAU,MAAM,QAAQ,EAAE,GAAG,MAAM,QAAQ,IAAI;EACrE,QAAQ,SAAS,UAAU,KAAK;EAChC,OAAO;EACR;EACD;AAEF,MAAaC,SAAuD,OAClEC,KACD,EAAE,EAAE,aAAa;CAChB,SAAS;CACT,eAAe;CACf,KAAK,MAAM,QAAQ,GAAI;CACvB,SAAS;CACT,YAAY,MAAM,QAAQ,IAAI;CAC9B,aAAa,MAAM,QAAQ,IAAI;CAC/B,cAAc,MAAM,QAAQ,IAAI;CAChC,QAAQ;CACT,EAAE;AAEH,MAAaC,aACX,OAAOC,SAAa,EAAE,EAAE,aAAa;CACnC,UAAU;CACV,KAAK;CACL,MAAM;EACL,MAAM,sBAAsB,SAAS,EACpC,cAAc,MAAM,QAAQ,EAAE,EAC/B;CACF,EAAE"}
@@ -1 +1 @@
1
- {"version":3,"file":"ChainListItem.js","names":["ListItem","ListItemButton","ListItemAvatar","Avatar","ListItemText"],"sources":["../../../../src/components/Chains/ChainListItem.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport { Box } from '@mui/material'\nimport type React from 'react'\nimport { type JSX, memo } from 'react'\nimport {\n Avatar,\n ListItem,\n ListItemAvatar,\n ListItemButton,\n ListItemText,\n} from './ChainList.style.js'\nimport { PinChainButton, pinButtonClassName } from './PinChainButton.js'\n\ninterface ChainListItemProps {\n chain: ExtendedChain\n onSelect: (chain: ExtendedChain) => void\n selected?: boolean\n itemsSize: 'small' | 'medium'\n size: number\n start: number\n isPinned: boolean\n onPin: (chainId: number) => void\n withPin: boolean\n}\n\nexport const ChainListItem: React.NamedExoticComponent<ChainListItemProps> =\n memo(\n ({\n chain,\n onSelect,\n selected,\n itemsSize,\n size,\n start,\n isPinned,\n onPin,\n withPin,\n }: ChainListItemProps): JSX.Element => {\n return (\n <ListItem\n style={{\n height: `${size}px`,\n transform: `translateY(${start}px)`,\n padding: 0,\n overflow: 'hidden',\n }}\n sx={{\n [`&:hover .${pinButtonClassName}`]: {\n opacity: 1,\n transform: 'translateY(0)',\n },\n }}\n >\n <ListItemButton\n onClick={() => onSelect(chain)}\n selected={selected}\n size={itemsSize}\n >\n <ListItemAvatar size={itemsSize}>\n <Avatar src={chain.logoURI} alt={chain.name} size={itemsSize}>\n {chain.name[0]}\n </Avatar>\n </ListItemAvatar>\n <ListItemText primary={chain.name} size={itemsSize} />\n {withPin && (\n <Box\n style={{\n position: 'relative',\n height: 28,\n width: 28,\n }}\n >\n <PinChainButton\n isPinned={isPinned}\n onPin={() => onPin(chain.id)}\n />\n </Box>\n )}\n </ListItemButton>\n </ListItem>\n )\n }\n )\n"],"mappings":";;;;;;AAyBA,MAAa,gBACX,MACG,EACC,OACA,UACA,UACA,WACA,MACA,OACA,UACA,OACA,cACqC;AACrC,QACE,oBAACA,YAAD;EACE,OAAO;GACL,QAAQ,GAAG,KAAK;GAChB,WAAW,cAAc,MAAM;GAC/B,SAAS;GACT,UAAU;GACX;EACD,IAAI,GACD,YAAY,uBAAuB;GAClC,SAAS;GACT,WAAW;GACZ,EACF;YAED,qBAACC,kBAAD;GACE,eAAe,SAAS,MAAM;GACpB;GACV,MAAM;aAHR;IAKE,oBAACC,kBAAD;KAAgB,MAAM;eACpB,oBAACC,UAAD;MAAQ,KAAK,MAAM;MAAS,KAAK,MAAM;MAAM,MAAM;gBAChD,MAAM,KAAK;MACL,CAAA;KACM,CAAA;IACjB,oBAACC,gBAAD;KAAc,SAAS,MAAM;KAAM,MAAM;KAAa,CAAA;IACrD,WACC,oBAAC,KAAD;KACE,OAAO;MACL,UAAU;MACV,QAAQ;MACR,OAAO;MACR;eAED,oBAAC,gBAAD;MACY;MACV,aAAa,MAAM,MAAM,GAAG;MAC5B,CAAA;KACE,CAAA;IAEO;;EACR,CAAA;EAGhB"}
1
+ {"version":3,"file":"ChainListItem.js","names":["ListItem","ListItemButton","ListItemAvatar","Avatar","ListItemText"],"sources":["../../../../src/components/Chains/ChainListItem.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport { Box } from '@mui/material'\nimport type React from 'react'\nimport { type JSX, memo } from 'react'\nimport {\n Avatar,\n ListItem,\n ListItemAvatar,\n ListItemButton,\n ListItemText,\n} from './ChainList.style.js'\nimport { PinChainButton, pinButtonClassName } from './PinChainButton.js'\n\ninterface ChainListItemProps {\n chain: ExtendedChain\n onSelect: (chain: ExtendedChain) => void\n selected?: boolean\n itemsSize: 'small' | 'medium'\n size: number\n start: number\n isPinned: boolean\n onPin: (chainId: number) => void\n withPin: boolean\n}\n\nexport const ChainListItem: React.NamedExoticComponent<ChainListItemProps> =\n memo(\n ({\n chain,\n onSelect,\n selected,\n itemsSize,\n size,\n start,\n isPinned,\n onPin,\n withPin,\n }: ChainListItemProps): JSX.Element => {\n return (\n <ListItem\n style={{\n height: `${size}px`,\n transform: `translateY(${start}px)`,\n padding: 0,\n overflow: 'hidden',\n }}\n sx={{\n [`&:hover .${pinButtonClassName}`]: {\n opacity: 1,\n transform: 'translateY(0)',\n },\n }}\n >\n <ListItemButton\n onClick={() => onSelect(chain)}\n selected={selected}\n size={itemsSize}\n >\n <ListItemAvatar size={itemsSize}>\n <Avatar src={chain.logoURI} alt={chain.name} size={itemsSize}>\n {chain.name[0]}\n </Avatar>\n </ListItemAvatar>\n <ListItemText primary={chain.name} size={itemsSize} />\n {withPin && (\n <Box\n style={{\n position: 'relative',\n height: 28,\n width: 28,\n }}\n >\n <PinChainButton\n isPinned={isPinned}\n onPin={() => onPin(chain.id)}\n />\n </Box>\n )}\n </ListItemButton>\n </ListItem>\n )\n }\n )\n"],"mappings":";;;;;;AAyBA,MAAa,gBACX,MACG,EACC,OACA,UACA,UACA,WACA,MACA,OACA,UACA,OACA,cACqC;CACrC,OACE,oBAACA,YAAD;EACE,OAAO;GACL,QAAQ,GAAG,KAAK;GAChB,WAAW,cAAc,MAAM;GAC/B,SAAS;GACT,UAAU;GACX;EACD,IAAI,GACD,YAAY,uBAAuB;GAClC,SAAS;GACT,WAAW;GACZ,EACF;YAED,qBAACC,kBAAD;GACE,eAAe,SAAS,MAAM;GACpB;GACV,MAAM;aAHR;IAKE,oBAACC,kBAAD;KAAgB,MAAM;eACpB,oBAACC,UAAD;MAAQ,KAAK,MAAM;MAAS,KAAK,MAAM;MAAM,MAAM;gBAChD,MAAM,KAAK;MACL,CAAA;KACM,CAAA;IACjB,oBAACC,gBAAD;KAAc,SAAS,MAAM;KAAM,MAAM;KAAa,CAAA;IACrD,WACC,oBAAC,KAAD;KACE,OAAO;MACL,UAAU;MACV,QAAQ;MACR,OAAO;MACR;eAED,oBAAC,gBAAD;MACY;MACV,aAAa,MAAM,MAAM,GAAG;MAC5B,CAAA;KACE,CAAA;IAEO;;EACR,CAAA;EAGhB"}
@@ -1 +1 @@
1
- {"version":3,"file":"ChainSearchInput.js","names":[],"sources":["../../../../src/components/Chains/ChainSearchInput.tsx"],"sourcesContent":["import { Box } from '@mui/material'\nimport { type JSX, type RefObject, useCallback } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { SearchInput, StickySearchInput } from '../Search/SearchInput.js'\n\ninterface ChainSearchInputProps {\n inputRef: RefObject<HTMLInputElement | null>\n inExpansion: boolean\n onChange: () => void\n onClear: () => void\n searchHeaderHeight: string | number\n}\n\nexport const ChainSearchInput = ({\n inputRef,\n inExpansion,\n onChange,\n onClear,\n searchHeaderHeight,\n}: ChainSearchInputProps): JSX.Element => {\n const { t } = useTranslation()\n\n const handleClear = useCallback(() => {\n if (inputRef.current) {\n inputRef.current.value = ''\n }\n onClear()\n }, [onClear, inputRef.current])\n\n if (inExpansion) {\n return (\n <Box\n sx={{\n pt: 3,\n pb: 2,\n px: 2.5,\n height: searchHeaderHeight,\n boxSizing: 'border-box',\n }}\n >\n <SearchInput\n inputRef={inputRef}\n onChange={onChange}\n placeholder={t('main.searchNetwork')}\n size=\"small\"\n onClear={handleClear}\n />\n </Box>\n )\n }\n\n return (\n <StickySearchInput\n inputRef={inputRef}\n onChange={onChange}\n placeholder={t('main.searchNetwork')}\n onClear={handleClear}\n />\n )\n}\n"],"mappings":";;;;;;AAaA,MAAa,oBAAoB,EAC/B,UACA,aACA,UACA,SACA,yBACwC;CACxC,MAAM,EAAE,MAAM,gBAAgB;CAE9B,MAAM,cAAc,kBAAkB;AACpC,MAAI,SAAS,QACX,UAAS,QAAQ,QAAQ;AAE3B,WAAS;IACR,CAAC,SAAS,SAAS,QAAQ,CAAC;AAE/B,KAAI,YACF,QACE,oBAAC,KAAD;EACE,IAAI;GACF,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,QAAQ;GACR,WAAW;GACZ;YAED,oBAAC,aAAD;GACY;GACA;GACV,aAAa,EAAE,qBAAqB;GACpC,MAAK;GACL,SAAS;GACT,CAAA;EACE,CAAA;AAIV,QACE,oBAAC,mBAAD;EACY;EACA;EACV,aAAa,EAAE,qBAAqB;EACpC,SAAS;EACT,CAAA"}
1
+ {"version":3,"file":"ChainSearchInput.js","names":[],"sources":["../../../../src/components/Chains/ChainSearchInput.tsx"],"sourcesContent":["import { Box } from '@mui/material'\nimport { type JSX, type RefObject, useCallback } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { SearchInput, StickySearchInput } from '../Search/SearchInput.js'\n\ninterface ChainSearchInputProps {\n inputRef: RefObject<HTMLInputElement | null>\n inExpansion: boolean\n onChange: () => void\n onClear: () => void\n searchHeaderHeight: string | number\n}\n\nexport const ChainSearchInput = ({\n inputRef,\n inExpansion,\n onChange,\n onClear,\n searchHeaderHeight,\n}: ChainSearchInputProps): JSX.Element => {\n const { t } = useTranslation()\n\n const handleClear = useCallback(() => {\n if (inputRef.current) {\n inputRef.current.value = ''\n }\n onClear()\n }, [onClear, inputRef.current])\n\n if (inExpansion) {\n return (\n <Box\n sx={{\n pt: 3,\n pb: 2,\n px: 2.5,\n height: searchHeaderHeight,\n boxSizing: 'border-box',\n }}\n >\n <SearchInput\n inputRef={inputRef}\n onChange={onChange}\n placeholder={t('main.searchNetwork')}\n size=\"small\"\n onClear={handleClear}\n />\n </Box>\n )\n }\n\n return (\n <StickySearchInput\n inputRef={inputRef}\n onChange={onChange}\n placeholder={t('main.searchNetwork')}\n onClear={handleClear}\n />\n )\n}\n"],"mappings":";;;;;;AAaA,MAAa,oBAAoB,EAC/B,UACA,aACA,UACA,SACA,yBACwC;CACxC,MAAM,EAAE,MAAM,gBAAgB;CAE9B,MAAM,cAAc,kBAAkB;EACpC,IAAI,SAAS,SACX,SAAS,QAAQ,QAAQ;EAE3B,SAAS;IACR,CAAC,SAAS,SAAS,QAAQ,CAAC;CAE/B,IAAI,aACF,OACE,oBAAC,KAAD;EACE,IAAI;GACF,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,QAAQ;GACR,WAAW;GACZ;YAED,oBAAC,aAAD;GACY;GACA;GACV,aAAa,EAAE,qBAAqB;GACpC,MAAK;GACL,SAAS;GACT,CAAA;EACE,CAAA;CAIV,OACE,oBAAC,mBAAD;EACY;EACA;EACV,aAAa,EAAE,qBAAqB;EACpC,SAAS;EACT,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"ChainsExpanded.js","names":[],"sources":["../../../../src/components/Chains/ChainsExpanded.tsx"],"sourcesContent":["import type React from 'react'\nimport { memo } from 'react'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport type { FormType } from '../../stores/form/types.js'\nimport { getWidgetMaxHeight } from '../../utils/widgetSize.js'\nimport { ExpansionTransition } from '../Expansion/ExpansionTransition.js'\nimport {\n chainExpansionWidth,\n SelectChainExpansionContainer,\n} from './ChainsExpanded.style.js'\nimport { SelectChainContent } from './SelectChainContent.js'\n\ninterface ChainsExpandedProps {\n formType: FormType\n open: boolean\n}\n\nexport const ChainsExpanded: React.NamedExoticComponent<ChainsExpandedProps> =\n memo(function ChainsExpanded({ formType, open }: ChainsExpandedProps) {\n const { theme } = useWidgetConfig()\n\n return (\n <ExpansionTransition in={open} width={chainExpansionWidth}>\n <SelectChainExpansionContainer\n expansionHeight={getWidgetMaxHeight(theme)}\n >\n <SelectChainContent inExpansion formType={formType} />\n </SelectChainExpansionContainer>\n </ExpansionTransition>\n )\n })\n"],"mappings":";;;;;;;;AAiBA,MAAa,iBACX,KAAK,SAAS,eAAe,EAAE,UAAU,QAA6B;CACpE,MAAM,EAAE,UAAU,iBAAiB;AAEnC,QACE,oBAAC,qBAAD;EAAqB,IAAI;EAAM,OAAO;YACpC,oBAAC,+BAAD;GACE,iBAAiB,mBAAmB,MAAM;aAE1C,oBAAC,oBAAD;IAAoB,aAAA;IAAsB;IAAY,CAAA;GACxB,CAAA;EACZ,CAAA;EAExB"}
1
+ {"version":3,"file":"ChainsExpanded.js","names":[],"sources":["../../../../src/components/Chains/ChainsExpanded.tsx"],"sourcesContent":["import type React from 'react'\nimport { memo } from 'react'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport type { FormType } from '../../stores/form/types.js'\nimport { getWidgetMaxHeight } from '../../utils/widgetSize.js'\nimport { ExpansionTransition } from '../Expansion/ExpansionTransition.js'\nimport {\n chainExpansionWidth,\n SelectChainExpansionContainer,\n} from './ChainsExpanded.style.js'\nimport { SelectChainContent } from './SelectChainContent.js'\n\ninterface ChainsExpandedProps {\n formType: FormType\n open: boolean\n}\n\nexport const ChainsExpanded: React.NamedExoticComponent<ChainsExpandedProps> =\n memo(function ChainsExpanded({ formType, open }: ChainsExpandedProps) {\n const { theme } = useWidgetConfig()\n\n return (\n <ExpansionTransition in={open} width={chainExpansionWidth}>\n <SelectChainExpansionContainer\n expansionHeight={getWidgetMaxHeight(theme)}\n >\n <SelectChainContent inExpansion formType={formType} />\n </SelectChainExpansionContainer>\n </ExpansionTransition>\n )\n })\n"],"mappings":";;;;;;;;AAiBA,MAAa,iBACX,KAAK,SAAS,eAAe,EAAE,UAAU,QAA6B;CACpE,MAAM,EAAE,UAAU,iBAAiB;CAEnC,OACE,oBAAC,qBAAD;EAAqB,IAAI;EAAM,OAAO;YACpC,oBAAC,+BAAD;GACE,iBAAiB,mBAAmB,MAAM;aAE1C,oBAAC,oBAAD;IAAoB,aAAA;IAAsB;IAAY,CAAA;GACxB,CAAA;EACZ,CAAA;EAExB"}
@@ -1 +1 @@
1
- {"version":3,"file":"PinChainButton.js","names":[],"sources":["../../../../src/components/Chains/PinChainButton.tsx"],"sourcesContent":["import PushPinIcon from '@mui/icons-material/PushPin'\nimport PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined'\nimport { IconButton } from '@mui/material'\nimport type { JSX } from 'react'\n\ninterface PinChainButtonProps {\n isPinned: boolean\n onPin: () => void\n}\n\nexport const pinButtonClassName = 'pin-button'\nconst animationDuration = 225\n\nexport const PinChainButton = ({\n isPinned,\n onPin,\n}: PinChainButtonProps): JSX.Element => {\n const PinIcon = isPinned ? PushPinIcon : PushPinOutlinedIcon\n return (\n <IconButton\n className={pinButtonClassName}\n edge=\"end\"\n aria-label=\"pin\"\n onClick={(e) => {\n e.stopPropagation()\n onPin()\n }}\n sx={{\n position: 'absolute',\n top: 0,\n left: 0,\n height: 28,\n width: 28,\n transition: `opacity ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1), transform ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,\n ...(isPinned\n ? {\n opacity: 1,\n transform: 'translateY(0)',\n }\n : {\n opacity: 0,\n transform: 'translateY(-50%)',\n }),\n }}\n >\n <PinIcon\n sx={{\n height: 20,\n width: 20,\n color: 'text.secondary',\n }}\n />\n </IconButton>\n )\n}\n"],"mappings":";;;;;AAUA,MAAa,qBAAqB;AAClC,MAAM,oBAAoB;AAE1B,MAAa,kBAAkB,EAC7B,UACA,YACsC;CACtC,MAAM,UAAU,WAAW,cAAc;AACzC,QACE,oBAAC,YAAD;EACE,WAAW;EACX,MAAK;EACL,cAAW;EACX,UAAU,MAAM;AACd,KAAE,iBAAiB;AACnB,UAAO;;EAET,IAAI;GACF,UAAU;GACV,KAAK;GACL,MAAM;GACN,QAAQ;GACR,OAAO;GACP,YAAY,WAAW,kBAAkB,6CAA6C,kBAAkB;GACxG,GAAI,WACA;IACE,SAAS;IACT,WAAW;IACZ,GACD;IACE,SAAS;IACT,WAAW;IACZ;GACN;YAED,oBAAC,SAAD,EACE,IAAI;GACF,QAAQ;GACR,OAAO;GACP,OAAO;GACR,EACD,CAAA;EACS,CAAA"}
1
+ {"version":3,"file":"PinChainButton.js","names":[],"sources":["../../../../src/components/Chains/PinChainButton.tsx"],"sourcesContent":["import PushPinIcon from '@mui/icons-material/PushPin'\nimport PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined'\nimport { IconButton } from '@mui/material'\nimport type { JSX } from 'react'\n\ninterface PinChainButtonProps {\n isPinned: boolean\n onPin: () => void\n}\n\nexport const pinButtonClassName = 'pin-button'\nconst animationDuration = 225\n\nexport const PinChainButton = ({\n isPinned,\n onPin,\n}: PinChainButtonProps): JSX.Element => {\n const PinIcon = isPinned ? PushPinIcon : PushPinOutlinedIcon\n return (\n <IconButton\n className={pinButtonClassName}\n edge=\"end\"\n aria-label=\"pin\"\n onClick={(e) => {\n e.stopPropagation()\n onPin()\n }}\n sx={{\n position: 'absolute',\n top: 0,\n left: 0,\n height: 28,\n width: 28,\n transition: `opacity ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1), transform ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,\n ...(isPinned\n ? {\n opacity: 1,\n transform: 'translateY(0)',\n }\n : {\n opacity: 0,\n transform: 'translateY(-50%)',\n }),\n }}\n >\n <PinIcon\n sx={{\n height: 20,\n width: 20,\n color: 'text.secondary',\n }}\n />\n </IconButton>\n )\n}\n"],"mappings":";;;;;AAUA,MAAa,qBAAqB;AAClC,MAAM,oBAAoB;AAE1B,MAAa,kBAAkB,EAC7B,UACA,YACsC;CACtC,MAAM,UAAU,WAAW,cAAc;CACzC,OACE,oBAAC,YAAD;EACE,WAAW;EACX,MAAK;EACL,cAAW;EACX,UAAU,MAAM;GACd,EAAE,iBAAiB;GACnB,OAAO;;EAET,IAAI;GACF,UAAU;GACV,KAAK;GACL,MAAM;GACN,QAAQ;GACR,OAAO;GACP,YAAY,WAAW,kBAAkB,6CAA6C,kBAAkB;GACxG,GAAI,WACA;IACE,SAAS;IACT,WAAW;IACZ,GACD;IACE,SAAS;IACT,WAAW;IACZ;GACN;YAED,oBAAC,SAAD,EACE,IAAI;GACF,QAAQ;GACR,OAAO;GACP,OAAO;GACR,EACD,CAAA;EACS,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"SelectChainContent.js","names":[],"sources":["../../../../src/components/Chains/SelectChainContent.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport { Box, debounce, useTheme } from '@mui/material'\nimport type React from 'react'\nimport { memo, useCallback, useMemo, useRef, useState } from 'react'\nimport { useDefaultElementId } from '../../hooks/useDefaultElementId.js'\nimport { useScrollableContainer } from '../../hooks/useScrollableContainer.js'\nimport { FormKeyHelper, type FormType } from '../../stores/form/types.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { getWidgetMaxHeight } from '../../utils/widgetSize.js'\nimport { useChainSelect } from '../ChainSelect/useChainSelect.js'\nimport { FullPageContainer } from '../FullPageContainer.js'\nimport { ChainList } from './ChainList.js'\nimport { ChainSearchInput } from './ChainSearchInput.js'\n\ninterface SelectChainContentProps {\n formType: FormType\n onSelect?: (chain: ExtendedChain) => void\n inExpansion: boolean\n}\n\nconst searchHeaderHeight = '80px'\n\nexport const SelectChainContent: React.NamedExoticComponent<SelectChainContentProps> =\n memo(function SelectChainContent({\n formType,\n onSelect,\n inExpansion,\n }: SelectChainContentProps) {\n const theme = useTheme()\n const { chains, isLoading, setCurrentChain } = useChainSelect(formType)\n const elementId = useDefaultElementId()\n const scrollableContainer = useScrollableContainer(elementId ?? '')\n const [selectedChainId] = useFieldValues(\n FormKeyHelper.getChainKey(formType)\n )\n const inputRef = useRef<HTMLInputElement>(null)\n const listRef = useRef<HTMLDivElement>(null)\n const [debouncedSearchValue, setDebouncedSearchValue] = useState('')\n\n const filteredChains = useMemo(() => {\n const value = debouncedSearchValue.toLowerCase()\n return value\n ? (chains?.filter((chain) =>\n chain.name.toLowerCase().includes(value)\n ) ?? [])\n : (chains ?? [])\n }, [chains, debouncedSearchValue])\n\n const scrollToTop = useCallback(() => {\n // Scroll widget container to top\n if (!inExpansion && scrollableContainer) {\n scrollableContainer.scrollTop = 0\n }\n }, [inExpansion, scrollableContainer])\n\n const debouncedFilterChains = useMemo(\n () =>\n debounce((value: string) => {\n setDebouncedSearchValue(value)\n scrollToTop()\n }, 250),\n [scrollToTop]\n )\n\n const onSelectChainFallback = useCallback(\n (chain: ExtendedChain) => {\n setCurrentChain(chain.id)\n },\n [setCurrentChain]\n )\n\n const onChange = useCallback(() => {\n const value = inputRef.current?.value || ''\n debouncedFilterChains(value)\n }, [debouncedFilterChains])\n\n const onClear = useCallback(() => {\n setDebouncedSearchValue('')\n scrollToTop()\n }, [scrollToTop])\n\n const listContainerHeight = useMemo(() => {\n const fullContainerHeight = getWidgetMaxHeight(theme)\n const heightValue =\n typeof fullContainerHeight === 'number'\n ? `${fullContainerHeight}px`\n : fullContainerHeight\n return `calc(${heightValue} - ${searchHeaderHeight})`\n }, [theme])\n\n return (\n <FullPageContainer disableGutters>\n <ChainSearchInput\n inputRef={inputRef}\n inExpansion={inExpansion}\n onChange={onChange}\n onClear={onClear}\n searchHeaderHeight={searchHeaderHeight}\n />\n <Box\n ref={listRef}\n sx={\n inExpansion ? { height: listContainerHeight, overflow: 'auto' } : {}\n }\n >\n <ChainList\n parentRef={listRef}\n formType={formType}\n chains={filteredChains}\n isLoading={isLoading}\n onSelect={onSelect ?? onSelectChainFallback}\n selectedChainId={selectedChainId}\n hasSearchQuery={!!inputRef.current?.value}\n inExpansion={inExpansion}\n />\n </Box>\n </FullPageContainer>\n )\n })\n"],"mappings":";;;;;;;;;;;;;AAoBA,MAAM,qBAAqB;AAE3B,MAAa,qBACX,KAAK,SAAS,mBAAmB,EAC/B,UACA,UACA,eAC0B;CAC1B,MAAM,QAAQ,UAAU;CACxB,MAAM,EAAE,QAAQ,WAAW,oBAAoB,eAAe,SAAS;CAEvE,MAAM,sBAAsB,uBADV,qBAC0C,IAAI,GAAG;CACnE,MAAM,CAAC,mBAAmB,eACxB,cAAc,YAAY,SAAS,CACpC;CACD,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,UAAU,OAAuB,KAAK;CAC5C,MAAM,CAAC,sBAAsB,2BAA2B,SAAS,GAAG;CAEpE,MAAM,iBAAiB,cAAc;EACnC,MAAM,QAAQ,qBAAqB,aAAa;AAChD,SAAO,QACF,QAAQ,QAAQ,UACf,MAAM,KAAK,aAAa,CAAC,SAAS,MAAM,CACzC,IAAI,EAAE,GACN,UAAU,EAAE;IAChB,CAAC,QAAQ,qBAAqB,CAAC;CAElC,MAAM,cAAc,kBAAkB;AAEpC,MAAI,CAAC,eAAe,oBAClB,qBAAoB,YAAY;IAEjC,CAAC,aAAa,oBAAoB,CAAC;CAEtC,MAAM,wBAAwB,cAE1B,UAAU,UAAkB;AAC1B,0BAAwB,MAAM;AAC9B,eAAa;IACZ,IAAI,EACT,CAAC,YAAY,CACd;CAED,MAAM,wBAAwB,aAC3B,UAAyB;AACxB,kBAAgB,MAAM,GAAG;IAE3B,CAAC,gBAAgB,CAClB;CAED,MAAM,WAAW,kBAAkB;AAEjC,wBADc,SAAS,SAAS,SAAS,GACb;IAC3B,CAAC,sBAAsB,CAAC;CAE3B,MAAM,UAAU,kBAAkB;AAChC,0BAAwB,GAAG;AAC3B,eAAa;IACZ,CAAC,YAAY,CAAC;CAEjB,MAAM,sBAAsB,cAAc;EACxC,MAAM,sBAAsB,mBAAmB,MAAM;AAKrD,SAAO,QAHL,OAAO,wBAAwB,WAC3B,GAAG,oBAAoB,MACvB,oBACqB,KAAK,mBAAmB;IAClD,CAAC,MAAM,CAAC;AAEX,QACE,qBAAC,mBAAD;EAAmB,gBAAA;YAAnB,CACE,oBAAC,kBAAD;GACY;GACG;GACH;GACD;GACW;GACpB,CAAA,EACF,oBAAC,KAAD;GACE,KAAK;GACL,IACE,cAAc;IAAE,QAAQ;IAAqB,UAAU;IAAQ,GAAG,EAAE;aAGtE,oBAAC,WAAD;IACE,WAAW;IACD;IACV,QAAQ;IACG;IACX,UAAU,YAAY;IACL;IACjB,gBAAgB,CAAC,CAAC,SAAS,SAAS;IACvB;IACb,CAAA;GACE,CAAA,CACY;;EAEtB"}
1
+ {"version":3,"file":"SelectChainContent.js","names":[],"sources":["../../../../src/components/Chains/SelectChainContent.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport { Box, debounce, useTheme } from '@mui/material'\nimport type React from 'react'\nimport { memo, useCallback, useMemo, useRef, useState } from 'react'\nimport { useDefaultElementId } from '../../hooks/useDefaultElementId.js'\nimport { useScrollableContainer } from '../../hooks/useScrollableContainer.js'\nimport { FormKeyHelper, type FormType } from '../../stores/form/types.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { getWidgetMaxHeight } from '../../utils/widgetSize.js'\nimport { useChainSelect } from '../ChainSelect/useChainSelect.js'\nimport { FullPageContainer } from '../FullPageContainer.js'\nimport { ChainList } from './ChainList.js'\nimport { ChainSearchInput } from './ChainSearchInput.js'\n\ninterface SelectChainContentProps {\n formType: FormType\n onSelect?: (chain: ExtendedChain) => void\n inExpansion: boolean\n}\n\nconst searchHeaderHeight = '80px'\n\nexport const SelectChainContent: React.NamedExoticComponent<SelectChainContentProps> =\n memo(function SelectChainContent({\n formType,\n onSelect,\n inExpansion,\n }: SelectChainContentProps) {\n const theme = useTheme()\n const { chains, isLoading, setCurrentChain } = useChainSelect(formType)\n const elementId = useDefaultElementId()\n const scrollableContainer = useScrollableContainer(elementId ?? '')\n const [selectedChainId] = useFieldValues(\n FormKeyHelper.getChainKey(formType)\n )\n const inputRef = useRef<HTMLInputElement>(null)\n const listRef = useRef<HTMLDivElement>(null)\n const [debouncedSearchValue, setDebouncedSearchValue] = useState('')\n\n const filteredChains = useMemo(() => {\n const value = debouncedSearchValue.toLowerCase()\n return value\n ? (chains?.filter((chain) =>\n chain.name.toLowerCase().includes(value)\n ) ?? [])\n : (chains ?? [])\n }, [chains, debouncedSearchValue])\n\n const scrollToTop = useCallback(() => {\n // Scroll widget container to top\n if (!inExpansion && scrollableContainer) {\n scrollableContainer.scrollTop = 0\n }\n }, [inExpansion, scrollableContainer])\n\n const debouncedFilterChains = useMemo(\n () =>\n debounce((value: string) => {\n setDebouncedSearchValue(value)\n scrollToTop()\n }, 250),\n [scrollToTop]\n )\n\n const onSelectChainFallback = useCallback(\n (chain: ExtendedChain) => {\n setCurrentChain(chain.id)\n },\n [setCurrentChain]\n )\n\n const onChange = useCallback(() => {\n const value = inputRef.current?.value || ''\n debouncedFilterChains(value)\n }, [debouncedFilterChains])\n\n const onClear = useCallback(() => {\n setDebouncedSearchValue('')\n scrollToTop()\n }, [scrollToTop])\n\n const listContainerHeight = useMemo(() => {\n const fullContainerHeight = getWidgetMaxHeight(theme)\n const heightValue =\n typeof fullContainerHeight === 'number'\n ? `${fullContainerHeight}px`\n : fullContainerHeight\n return `calc(${heightValue} - ${searchHeaderHeight})`\n }, [theme])\n\n return (\n <FullPageContainer disableGutters>\n <ChainSearchInput\n inputRef={inputRef}\n inExpansion={inExpansion}\n onChange={onChange}\n onClear={onClear}\n searchHeaderHeight={searchHeaderHeight}\n />\n <Box\n ref={listRef}\n sx={\n inExpansion ? { height: listContainerHeight, overflow: 'auto' } : {}\n }\n >\n <ChainList\n parentRef={listRef}\n formType={formType}\n chains={filteredChains}\n isLoading={isLoading}\n onSelect={onSelect ?? onSelectChainFallback}\n selectedChainId={selectedChainId}\n hasSearchQuery={!!inputRef.current?.value}\n inExpansion={inExpansion}\n />\n </Box>\n </FullPageContainer>\n )\n })\n"],"mappings":";;;;;;;;;;;;;AAoBA,MAAM,qBAAqB;AAE3B,MAAa,qBACX,KAAK,SAAS,mBAAmB,EAC/B,UACA,UACA,eAC0B;CAC1B,MAAM,QAAQ,UAAU;CACxB,MAAM,EAAE,QAAQ,WAAW,oBAAoB,eAAe,SAAS;CAEvE,MAAM,sBAAsB,uBADV,qBAC0C,IAAI,GAAG;CACnE,MAAM,CAAC,mBAAmB,eACxB,cAAc,YAAY,SAAS,CACpC;CACD,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,UAAU,OAAuB,KAAK;CAC5C,MAAM,CAAC,sBAAsB,2BAA2B,SAAS,GAAG;CAEpE,MAAM,iBAAiB,cAAc;EACnC,MAAM,QAAQ,qBAAqB,aAAa;EAChD,OAAO,QACF,QAAQ,QAAQ,UACf,MAAM,KAAK,aAAa,CAAC,SAAS,MAAM,CACzC,IAAI,EAAE,GACN,UAAU,EAAE;IAChB,CAAC,QAAQ,qBAAqB,CAAC;CAElC,MAAM,cAAc,kBAAkB;EAEpC,IAAI,CAAC,eAAe,qBAClB,oBAAoB,YAAY;IAEjC,CAAC,aAAa,oBAAoB,CAAC;CAEtC,MAAM,wBAAwB,cAE1B,UAAU,UAAkB;EAC1B,wBAAwB,MAAM;EAC9B,aAAa;IACZ,IAAI,EACT,CAAC,YAAY,CACd;CAED,MAAM,wBAAwB,aAC3B,UAAyB;EACxB,gBAAgB,MAAM,GAAG;IAE3B,CAAC,gBAAgB,CAClB;CAED,MAAM,WAAW,kBAAkB;EAEjC,sBADc,SAAS,SAAS,SAAS,GACb;IAC3B,CAAC,sBAAsB,CAAC;CAE3B,MAAM,UAAU,kBAAkB;EAChC,wBAAwB,GAAG;EAC3B,aAAa;IACZ,CAAC,YAAY,CAAC;CAEjB,MAAM,sBAAsB,cAAc;EACxC,MAAM,sBAAsB,mBAAmB,MAAM;EAKrD,OAAO,QAHL,OAAO,wBAAwB,WAC3B,GAAG,oBAAoB,MACvB,oBACqB,KAAK,mBAAmB;IAClD,CAAC,MAAM,CAAC;CAEX,OACE,qBAAC,mBAAD;EAAmB,gBAAA;YAAnB,CACE,oBAAC,kBAAD;GACY;GACG;GACH;GACD;GACW;GACpB,CAAA,EACF,oBAAC,KAAD;GACE,KAAK;GACL,IACE,cAAc;IAAE,QAAQ;IAAqB,UAAU;IAAQ,GAAG,EAAE;aAGtE,oBAAC,WAAD;IACE,WAAW;IACD;IACV,QAAQ;IACG;IACX,UAAU,YAAY;IACL;IACjB,gBAAgB,CAAC,CAAC,SAAS,SAAS;IACvB;IACb,CAAA;GACE,CAAA,CACY;;EAEtB"}
@@ -1 +1 @@
1
- {"version":3,"file":"VirtualizedChainList.js","names":[],"sources":["../../../../src/components/Chains/VirtualizedChainList.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport { useVirtualizer } from '@tanstack/react-virtual'\nimport type { JSX, RefObject } from 'react'\nimport { useCallback, useEffect, useMemo, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'\nimport { FormKeyHelper, type FormType } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { AllChainsAvatar } from './AllChainsAvatar.js'\nimport {\n List,\n ListItem,\n ListItemAvatar,\n ListItemButton,\n ListItemText,\n} from './ChainList.style.js'\nimport { ChainListItem } from './ChainListItem.js'\n\ninterface VirtualizedChainListProps {\n scrollElementRef: RefObject<HTMLDivElement | null>\n formType: FormType\n chains: ExtendedChain[]\n onSelect: (chain: ExtendedChain) => void\n selectedChainId?: number\n itemsSize: 'small' | 'medium'\n hasSearchQuery: boolean\n withPinnedChains: boolean\n}\n\nexport const VirtualizedChainList = ({\n formType,\n chains,\n hasSearchQuery,\n onSelect,\n selectedChainId,\n itemsSize,\n scrollElementRef,\n withPinnedChains,\n}: VirtualizedChainListProps): JSX.Element => {\n const { t } = useTranslation()\n const selectedChainIdRef = useRef(selectedChainId) // Store the initial selected chain ID to scroll to it once chains are loaded\n const hasScrolledRef = useRef(false)\n const [\n pinnedChains,\n setPinnedChain,\n isAllNetworks,\n setIsAllNetworks,\n showAllNetworks,\n ] = useChainOrderStore((state) => [\n state.pinnedChains,\n state.setPinnedChain,\n state[`${formType}IsAllNetworks`],\n state.setIsAllNetworks,\n state[`${formType}ShowAllNetworks`],\n ])\n const { setFieldValue } = useFieldActions()\n const onPin = useCallback(\n (chainId: number) => {\n setPinnedChain(chainId)\n },\n [setPinnedChain]\n )\n\n const sortedChains = useMemo(() => {\n if (!pinnedChains.length) {\n return chains\n }\n // Pinning logic: move pinned chains to the top of the list\n const pinned = pinnedChains\n .map((id) => chains.find((c) => c.id === id))\n .filter(Boolean) as ExtendedChain[]\n const pinnedIds = new Set(pinned.map((c) => c.id))\n const rest = chains.filter((c) => !pinnedIds.has(c.id))\n return [...pinned, ...rest]\n }, [chains, pinnedChains])\n\n const showAllNetworksOption = showAllNetworks && !hasSearchQuery\n\n const getItemKey = useCallback(\n (index: number) => {\n if (showAllNetworksOption && index === 0) {\n return 'all-chains'\n }\n const chainIndex = index - (showAllNetworksOption ? 1 : 0)\n return `${sortedChains[chainIndex].id}-${index}`\n },\n [sortedChains, showAllNetworksOption]\n )\n\n const onChainSelect = useCallback(\n (chain: ExtendedChain) => {\n setIsAllNetworks(false, formType)\n onSelect(chain)\n },\n [onSelect, setIsAllNetworks, formType]\n )\n\n const { getVirtualItems, getTotalSize, measure, range, getOffsetForIndex } =\n useVirtualizer({\n count: sortedChains.length + (showAllNetworksOption ? 1 : 0), // +1 for the all networks item\n overscan: 3,\n paddingEnd: 0,\n getScrollElement: () => scrollElementRef.current,\n estimateSize: () => {\n return itemsSize === 'small' ? 48 : 60\n },\n getItemKey,\n })\n\n // Using mountOnEnter of the ExpansionTransition component\n // leads to a short delay for setting up scrollElementRef,\n // which in turn leads to getVirtualItems() returning an empty array.\n // Workaround: Re-measure when scroll element becomes available\n useEffect(() => {\n if (scrollElementRef.current) {\n measure()\n }\n }, [measure, scrollElementRef.current])\n\n const scrollToIndex = useCallback(\n (index: number) => {\n requestAnimationFrame(() => {\n const offsetInfo = getOffsetForIndex(index, 'center')\n if (!scrollElementRef.current || !offsetInfo) {\n return\n }\n scrollElementRef.current.scrollTo({\n top: offsetInfo[0],\n left: 0,\n behavior: 'smooth',\n })\n })\n },\n [getOffsetForIndex, scrollElementRef.current]\n )\n\n useEffect(() => {\n // Mark as scrolled if \"All Networks\" is initially selected\n if (isAllNetworks) {\n hasScrolledRef.current = true\n return\n }\n\n // Only scroll if sortedChains is not empty and we haven't scrolled yet\n if (!hasScrolledRef.current && sortedChains.length > 0 && range) {\n const selectedChainIndex = sortedChains.findIndex(\n (chain) => chain.id === selectedChainIdRef.current\n )\n if (selectedChainIndex !== -1) {\n // Only scroll if the selected chain is not in the visible range\n // +1 and -1 to account for partially visible items\n if (\n range.startIndex + 1 > selectedChainIndex ||\n range.endIndex - 1 < selectedChainIndex\n ) {\n scrollToIndex(selectedChainIndex)\n }\n }\n hasScrolledRef.current = true // Mark as scrolled (when needed)\n }\n }, [sortedChains, scrollToIndex, range, isAllNetworks])\n\n const selectAllNetworks = useCallback(() => {\n setIsAllNetworks(true, formType)\n // Reset the chain and token fields when selecting all networks\n setFieldValue(FormKeyHelper.getChainKey(formType), '', { isTouched: true })\n setFieldValue(FormKeyHelper.getTokenKey(formType), '', { isTouched: true })\n }, [setIsAllNetworks, formType, setFieldValue])\n\n return (\n <List\n className=\"long-list\"\n style={{ height: getTotalSize() }}\n disablePadding\n >\n {getVirtualItems().map((item) => {\n if (showAllNetworksOption && item.index === 0) {\n return (\n <ListItem\n key={item.key}\n style={{\n height: `${itemsSize}px`,\n transform: `translateY(${item.start}px)`,\n padding: 0,\n }}\n >\n <ListItemButton\n onClick={selectAllNetworks}\n selected={isAllNetworks}\n size={itemsSize}\n >\n <ListItemAvatar size={itemsSize}>\n <AllChainsAvatar chains={chains} size={itemsSize} />\n </ListItemAvatar>\n <ListItemText\n primary={t('main.allNetworks')}\n size={itemsSize}\n />\n </ListItemButton>\n </ListItem>\n )\n }\n\n const chain = sortedChains[item.index - (showAllNetworksOption ? 1 : 0)]\n return (\n <ChainListItem\n key={item.key}\n chain={chain}\n onSelect={onChainSelect}\n selected={!isAllNetworks && chain.id === selectedChainId}\n itemsSize={itemsSize}\n size={item.size}\n start={item.start}\n withPin={withPinnedChains}\n isPinned={pinnedChains.includes(chain.id)}\n onPin={onPin}\n />\n )\n })}\n </List>\n )\n}\n"],"mappings":";;;;;;;;;;;AA6BA,MAAa,wBAAwB,EACnC,UACA,QACA,gBACA,UACA,iBACA,WACA,kBACA,uBAC4C;CAC5C,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,qBAAqB,OAAO,gBAAgB;CAClD,MAAM,iBAAiB,OAAO,MAAM;CACpC,MAAM,CACJ,cACA,gBACA,eACA,kBACA,mBACE,oBAAoB,UAAU;EAChC,MAAM;EACN,MAAM;EACN,MAAM,GAAG,SAAS;EAClB,MAAM;EACN,MAAM,GAAG,SAAS;EACnB,CAAC;CACF,MAAM,EAAE,kBAAkB,iBAAiB;CAC3C,MAAM,QAAQ,aACX,YAAoB;AACnB,iBAAe,QAAQ;IAEzB,CAAC,eAAe,CACjB;CAED,MAAM,eAAe,cAAc;AACjC,MAAI,CAAC,aAAa,OAChB,QAAO;EAGT,MAAM,SAAS,aACZ,KAAK,OAAO,OAAO,MAAM,MAAM,EAAE,OAAO,GAAG,CAAC,CAC5C,OAAO,QAAQ;EAClB,MAAM,YAAY,IAAI,IAAI,OAAO,KAAK,MAAM,EAAE,GAAG,CAAC;EAClD,MAAM,OAAO,OAAO,QAAQ,MAAM,CAAC,UAAU,IAAI,EAAE,GAAG,CAAC;AACvD,SAAO,CAAC,GAAG,QAAQ,GAAG,KAAK;IAC1B,CAAC,QAAQ,aAAa,CAAC;CAE1B,MAAM,wBAAwB,mBAAmB,CAAC;CAElD,MAAM,aAAa,aAChB,UAAkB;AACjB,MAAI,yBAAyB,UAAU,EACrC,QAAO;AAGT,SAAO,GAAG,aADS,SAAS,wBAAwB,IAAI,IACrB,GAAG,GAAG;IAE3C,CAAC,cAAc,sBAAsB,CACtC;CAED,MAAM,gBAAgB,aACnB,UAAyB;AACxB,mBAAiB,OAAO,SAAS;AACjC,WAAS,MAAM;IAEjB;EAAC;EAAU;EAAkB;EAAS,CACvC;CAED,MAAM,EAAE,iBAAiB,cAAc,SAAS,OAAO,sBACrD,eAAe;EACb,OAAO,aAAa,UAAU,wBAAwB,IAAI;EAC1D,UAAU;EACV,YAAY;EACZ,wBAAwB,iBAAiB;EACzC,oBAAoB;AAClB,UAAO,cAAc,UAAU,KAAK;;EAEtC;EACD,CAAC;AAMJ,iBAAgB;AACd,MAAI,iBAAiB,QACnB,UAAS;IAEV,CAAC,SAAS,iBAAiB,QAAQ,CAAC;CAEvC,MAAM,gBAAgB,aACnB,UAAkB;AACjB,8BAA4B;GAC1B,MAAM,aAAa,kBAAkB,OAAO,SAAS;AACrD,OAAI,CAAC,iBAAiB,WAAW,CAAC,WAChC;AAEF,oBAAiB,QAAQ,SAAS;IAChC,KAAK,WAAW;IAChB,MAAM;IACN,UAAU;IACX,CAAC;IACF;IAEJ,CAAC,mBAAmB,iBAAiB,QAAQ,CAC9C;AAED,iBAAgB;AAEd,MAAI,eAAe;AACjB,kBAAe,UAAU;AACzB;;AAIF,MAAI,CAAC,eAAe,WAAW,aAAa,SAAS,KAAK,OAAO;GAC/D,MAAM,qBAAqB,aAAa,WACrC,UAAU,MAAM,OAAO,mBAAmB,QAC5C;AACD,OAAI,uBAAuB;QAIvB,MAAM,aAAa,IAAI,sBACvB,MAAM,WAAW,IAAI,mBAErB,eAAc,mBAAmB;;AAGrC,kBAAe,UAAU;;IAE1B;EAAC;EAAc;EAAe;EAAO;EAAc,CAAC;CAEvD,MAAM,oBAAoB,kBAAkB;AAC1C,mBAAiB,MAAM,SAAS;AAEhC,gBAAc,cAAc,YAAY,SAAS,EAAE,IAAI,EAAE,WAAW,MAAM,CAAC;AAC3E,gBAAc,cAAc,YAAY,SAAS,EAAE,IAAI,EAAE,WAAW,MAAM,CAAC;IAC1E;EAAC;EAAkB;EAAU;EAAc,CAAC;AAE/C,QACE,oBAAC,MAAD;EACE,WAAU;EACV,OAAO,EAAE,QAAQ,cAAc,EAAE;EACjC,gBAAA;YAEC,iBAAiB,CAAC,KAAK,SAAS;AAC/B,OAAI,yBAAyB,KAAK,UAAU,EAC1C,QACE,oBAAC,UAAD;IAEE,OAAO;KACL,QAAQ,GAAG,UAAU;KACrB,WAAW,cAAc,KAAK,MAAM;KACpC,SAAS;KACV;cAED,qBAAC,gBAAD;KACE,SAAS;KACT,UAAU;KACV,MAAM;eAHR,CAKE,oBAAC,gBAAD;MAAgB,MAAM;gBACpB,oBAAC,iBAAD;OAAyB;OAAQ,MAAM;OAAa,CAAA;MACrC,CAAA,EACjB,oBAAC,cAAD;MACE,SAAS,EAAE,mBAAmB;MAC9B,MAAM;MACN,CAAA,CACa;;IACR,EApBJ,KAAK,IAoBD;GAIf,MAAM,QAAQ,aAAa,KAAK,SAAS,wBAAwB,IAAI;AACrE,UACE,oBAAC,eAAD;IAES;IACP,UAAU;IACV,UAAU,CAAC,iBAAiB,MAAM,OAAO;IAC9B;IACX,MAAM,KAAK;IACX,OAAO,KAAK;IACZ,SAAS;IACT,UAAU,aAAa,SAAS,MAAM,GAAG;IAClC;IACP,EAVK,KAAK,IAUV;IAEJ;EACG,CAAA"}
1
+ {"version":3,"file":"VirtualizedChainList.js","names":[],"sources":["../../../../src/components/Chains/VirtualizedChainList.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport { useVirtualizer } from '@tanstack/react-virtual'\nimport type { JSX, RefObject } from 'react'\nimport { useCallback, useEffect, useMemo, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'\nimport { FormKeyHelper, type FormType } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { AllChainsAvatar } from './AllChainsAvatar.js'\nimport {\n List,\n ListItem,\n ListItemAvatar,\n ListItemButton,\n ListItemText,\n} from './ChainList.style.js'\nimport { ChainListItem } from './ChainListItem.js'\n\ninterface VirtualizedChainListProps {\n scrollElementRef: RefObject<HTMLDivElement | null>\n formType: FormType\n chains: ExtendedChain[]\n onSelect: (chain: ExtendedChain) => void\n selectedChainId?: number\n itemsSize: 'small' | 'medium'\n hasSearchQuery: boolean\n withPinnedChains: boolean\n}\n\nexport const VirtualizedChainList = ({\n formType,\n chains,\n hasSearchQuery,\n onSelect,\n selectedChainId,\n itemsSize,\n scrollElementRef,\n withPinnedChains,\n}: VirtualizedChainListProps): JSX.Element => {\n const { t } = useTranslation()\n const selectedChainIdRef = useRef(selectedChainId) // Store the initial selected chain ID to scroll to it once chains are loaded\n const hasScrolledRef = useRef(false)\n const [\n pinnedChains,\n setPinnedChain,\n isAllNetworks,\n setIsAllNetworks,\n showAllNetworks,\n ] = useChainOrderStore((state) => [\n state.pinnedChains,\n state.setPinnedChain,\n state[`${formType}IsAllNetworks`],\n state.setIsAllNetworks,\n state[`${formType}ShowAllNetworks`],\n ])\n const { setFieldValue } = useFieldActions()\n const onPin = useCallback(\n (chainId: number) => {\n setPinnedChain(chainId)\n },\n [setPinnedChain]\n )\n\n const sortedChains = useMemo(() => {\n if (!pinnedChains.length) {\n return chains\n }\n // Pinning logic: move pinned chains to the top of the list\n const pinned = pinnedChains\n .map((id) => chains.find((c) => c.id === id))\n .filter(Boolean) as ExtendedChain[]\n const pinnedIds = new Set(pinned.map((c) => c.id))\n const rest = chains.filter((c) => !pinnedIds.has(c.id))\n return [...pinned, ...rest]\n }, [chains, pinnedChains])\n\n const showAllNetworksOption = showAllNetworks && !hasSearchQuery\n\n const getItemKey = useCallback(\n (index: number) => {\n if (showAllNetworksOption && index === 0) {\n return 'all-chains'\n }\n const chainIndex = index - (showAllNetworksOption ? 1 : 0)\n return `${sortedChains[chainIndex].id}-${index}`\n },\n [sortedChains, showAllNetworksOption]\n )\n\n const onChainSelect = useCallback(\n (chain: ExtendedChain) => {\n setIsAllNetworks(false, formType)\n onSelect(chain)\n },\n [onSelect, setIsAllNetworks, formType]\n )\n\n const { getVirtualItems, getTotalSize, measure, range, getOffsetForIndex } =\n useVirtualizer({\n count: sortedChains.length + (showAllNetworksOption ? 1 : 0), // +1 for the all networks item\n overscan: 3,\n paddingEnd: 0,\n getScrollElement: () => scrollElementRef.current,\n estimateSize: () => {\n return itemsSize === 'small' ? 48 : 60\n },\n getItemKey,\n })\n\n // Using mountOnEnter of the ExpansionTransition component\n // leads to a short delay for setting up scrollElementRef,\n // which in turn leads to getVirtualItems() returning an empty array.\n // Workaround: Re-measure when scroll element becomes available\n useEffect(() => {\n if (scrollElementRef.current) {\n measure()\n }\n }, [measure, scrollElementRef.current])\n\n const scrollToIndex = useCallback(\n (index: number) => {\n requestAnimationFrame(() => {\n const offsetInfo = getOffsetForIndex(index, 'center')\n if (!scrollElementRef.current || !offsetInfo) {\n return\n }\n scrollElementRef.current.scrollTo({\n top: offsetInfo[0],\n left: 0,\n behavior: 'smooth',\n })\n })\n },\n [getOffsetForIndex, scrollElementRef.current]\n )\n\n useEffect(() => {\n // Mark as scrolled if \"All Networks\" is initially selected\n if (isAllNetworks) {\n hasScrolledRef.current = true\n return\n }\n\n // Only scroll if sortedChains is not empty and we haven't scrolled yet\n if (!hasScrolledRef.current && sortedChains.length > 0 && range) {\n const selectedChainIndex = sortedChains.findIndex(\n (chain) => chain.id === selectedChainIdRef.current\n )\n if (selectedChainIndex !== -1) {\n // Only scroll if the selected chain is not in the visible range\n // +1 and -1 to account for partially visible items\n if (\n range.startIndex + 1 > selectedChainIndex ||\n range.endIndex - 1 < selectedChainIndex\n ) {\n scrollToIndex(selectedChainIndex)\n }\n }\n hasScrolledRef.current = true // Mark as scrolled (when needed)\n }\n }, [sortedChains, scrollToIndex, range, isAllNetworks])\n\n const selectAllNetworks = useCallback(() => {\n setIsAllNetworks(true, formType)\n // Reset the chain and token fields when selecting all networks\n setFieldValue(FormKeyHelper.getChainKey(formType), '', { isTouched: true })\n setFieldValue(FormKeyHelper.getTokenKey(formType), '', { isTouched: true })\n }, [setIsAllNetworks, formType, setFieldValue])\n\n return (\n <List\n className=\"long-list\"\n style={{ height: getTotalSize() }}\n disablePadding\n >\n {getVirtualItems().map((item) => {\n if (showAllNetworksOption && item.index === 0) {\n return (\n <ListItem\n key={item.key}\n style={{\n height: `${itemsSize}px`,\n transform: `translateY(${item.start}px)`,\n padding: 0,\n }}\n >\n <ListItemButton\n onClick={selectAllNetworks}\n selected={isAllNetworks}\n size={itemsSize}\n >\n <ListItemAvatar size={itemsSize}>\n <AllChainsAvatar chains={chains} size={itemsSize} />\n </ListItemAvatar>\n <ListItemText\n primary={t('main.allNetworks')}\n size={itemsSize}\n />\n </ListItemButton>\n </ListItem>\n )\n }\n\n const chain = sortedChains[item.index - (showAllNetworksOption ? 1 : 0)]\n return (\n <ChainListItem\n key={item.key}\n chain={chain}\n onSelect={onChainSelect}\n selected={!isAllNetworks && chain.id === selectedChainId}\n itemsSize={itemsSize}\n size={item.size}\n start={item.start}\n withPin={withPinnedChains}\n isPinned={pinnedChains.includes(chain.id)}\n onPin={onPin}\n />\n )\n })}\n </List>\n )\n}\n"],"mappings":";;;;;;;;;;;AA6BA,MAAa,wBAAwB,EACnC,UACA,QACA,gBACA,UACA,iBACA,WACA,kBACA,uBAC4C;CAC5C,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,qBAAqB,OAAO,gBAAgB;CAClD,MAAM,iBAAiB,OAAO,MAAM;CACpC,MAAM,CACJ,cACA,gBACA,eACA,kBACA,mBACE,oBAAoB,UAAU;EAChC,MAAM;EACN,MAAM;EACN,MAAM,GAAG,SAAS;EAClB,MAAM;EACN,MAAM,GAAG,SAAS;EACnB,CAAC;CACF,MAAM,EAAE,kBAAkB,iBAAiB;CAC3C,MAAM,QAAQ,aACX,YAAoB;EACnB,eAAe,QAAQ;IAEzB,CAAC,eAAe,CACjB;CAED,MAAM,eAAe,cAAc;EACjC,IAAI,CAAC,aAAa,QAChB,OAAO;EAGT,MAAM,SAAS,aACZ,KAAK,OAAO,OAAO,MAAM,MAAM,EAAE,OAAO,GAAG,CAAC,CAC5C,OAAO,QAAQ;EAClB,MAAM,YAAY,IAAI,IAAI,OAAO,KAAK,MAAM,EAAE,GAAG,CAAC;EAClD,MAAM,OAAO,OAAO,QAAQ,MAAM,CAAC,UAAU,IAAI,EAAE,GAAG,CAAC;EACvD,OAAO,CAAC,GAAG,QAAQ,GAAG,KAAK;IAC1B,CAAC,QAAQ,aAAa,CAAC;CAE1B,MAAM,wBAAwB,mBAAmB,CAAC;CAElD,MAAM,aAAa,aAChB,UAAkB;EACjB,IAAI,yBAAyB,UAAU,GACrC,OAAO;EAGT,OAAO,GAAG,aADS,SAAS,wBAAwB,IAAI,IACrB,GAAG,GAAG;IAE3C,CAAC,cAAc,sBAAsB,CACtC;CAED,MAAM,gBAAgB,aACnB,UAAyB;EACxB,iBAAiB,OAAO,SAAS;EACjC,SAAS,MAAM;IAEjB;EAAC;EAAU;EAAkB;EAAS,CACvC;CAED,MAAM,EAAE,iBAAiB,cAAc,SAAS,OAAO,sBACrD,eAAe;EACb,OAAO,aAAa,UAAU,wBAAwB,IAAI;EAC1D,UAAU;EACV,YAAY;EACZ,wBAAwB,iBAAiB;EACzC,oBAAoB;GAClB,OAAO,cAAc,UAAU,KAAK;;EAEtC;EACD,CAAC;CAMJ,gBAAgB;EACd,IAAI,iBAAiB,SACnB,SAAS;IAEV,CAAC,SAAS,iBAAiB,QAAQ,CAAC;CAEvC,MAAM,gBAAgB,aACnB,UAAkB;EACjB,4BAA4B;GAC1B,MAAM,aAAa,kBAAkB,OAAO,SAAS;GACrD,IAAI,CAAC,iBAAiB,WAAW,CAAC,YAChC;GAEF,iBAAiB,QAAQ,SAAS;IAChC,KAAK,WAAW;IAChB,MAAM;IACN,UAAU;IACX,CAAC;IACF;IAEJ,CAAC,mBAAmB,iBAAiB,QAAQ,CAC9C;CAED,gBAAgB;EAEd,IAAI,eAAe;GACjB,eAAe,UAAU;GACzB;;EAIF,IAAI,CAAC,eAAe,WAAW,aAAa,SAAS,KAAK,OAAO;GAC/D,MAAM,qBAAqB,aAAa,WACrC,UAAU,MAAM,OAAO,mBAAmB,QAC5C;GACD,IAAI,uBAAuB;QAIvB,MAAM,aAAa,IAAI,sBACvB,MAAM,WAAW,IAAI,oBAErB,cAAc,mBAAmB;;GAGrC,eAAe,UAAU;;IAE1B;EAAC;EAAc;EAAe;EAAO;EAAc,CAAC;CAEvD,MAAM,oBAAoB,kBAAkB;EAC1C,iBAAiB,MAAM,SAAS;EAEhC,cAAc,cAAc,YAAY,SAAS,EAAE,IAAI,EAAE,WAAW,MAAM,CAAC;EAC3E,cAAc,cAAc,YAAY,SAAS,EAAE,IAAI,EAAE,WAAW,MAAM,CAAC;IAC1E;EAAC;EAAkB;EAAU;EAAc,CAAC;CAE/C,OACE,oBAAC,MAAD;EACE,WAAU;EACV,OAAO,EAAE,QAAQ,cAAc,EAAE;EACjC,gBAAA;YAEC,iBAAiB,CAAC,KAAK,SAAS;GAC/B,IAAI,yBAAyB,KAAK,UAAU,GAC1C,OACE,oBAAC,UAAD;IAEE,OAAO;KACL,QAAQ,GAAG,UAAU;KACrB,WAAW,cAAc,KAAK,MAAM;KACpC,SAAS;KACV;cAED,qBAAC,gBAAD;KACE,SAAS;KACT,UAAU;KACV,MAAM;eAHR,CAKE,oBAAC,gBAAD;MAAgB,MAAM;gBACpB,oBAAC,iBAAD;OAAyB;OAAQ,MAAM;OAAa,CAAA;MACrC,CAAA,EACjB,oBAAC,cAAD;MACE,SAAS,EAAE,mBAAmB;MAC9B,MAAM;MACN,CAAA,CACa;;IACR,EApBJ,KAAK,IAoBD;GAIf,MAAM,QAAQ,aAAa,KAAK,SAAS,wBAAwB,IAAI;GACrE,OACE,oBAAC,eAAD;IAES;IACP,UAAU;IACV,UAAU,CAAC,iBAAiB,MAAM,OAAO;IAC9B;IACX,MAAM,KAAK;IACX,OAAO,KAAK;IACZ,SAAS;IACT,UAAU,aAAa,SAAS,MAAM,GAAG;IAClC;IACP,EAVK,KAAK,IAUV;IAEJ;EACG,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"ContextMenu.js","names":["Menu"],"sources":["../../../src/components/ContextMenu.tsx"],"sourcesContent":["import MoreVertIcon from '@mui/icons-material/MoreVert'\nimport type { SxProps, Theme } from '@mui/material'\nimport { MenuItem } from '@mui/material'\nimport { type JSX, useId, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { ContextMenuButton } from './ContextMenu.style.js'\nimport { Menu } from './Menu.js'\n\nexport interface ContextMenuItemConfig {\n icon: React.ReactNode\n label: string\n onClick: () => void\n}\n\ninterface ContextMenuProps {\n items: ContextMenuItemConfig[]\n disabled?: boolean\n buttonSx?: SxProps<Theme>\n}\n\nexport const ContextMenu = ({\n items,\n disabled,\n buttonSx,\n}: ContextMenuProps): JSX.Element => {\n const { t } = useTranslation()\n const menuId = useId()\n const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)\n const open = Boolean(anchorEl)\n\n const handleOpen = (e: React.MouseEvent<HTMLButtonElement>) => {\n setAnchorEl(e.currentTarget)\n }\n\n const closeMenu = () => {\n setAnchorEl(null)\n }\n\n const handleItemClick = (onClick: () => void) => () => {\n onClick()\n closeMenu()\n }\n\n return (\n <>\n <ContextMenuButton\n aria-label={t('button.options')}\n aria-controls={open ? menuId : undefined}\n aria-haspopup=\"true\"\n aria-expanded={open ? 'true' : undefined}\n onClick={handleOpen}\n sx={{ opacity: disabled ? 0.5 : 1, ...buttonSx }}\n disableRipple\n >\n <MoreVertIcon fontSize=\"small\" />\n </ContextMenuButton>\n <Menu\n id={menuId}\n elevation={0}\n anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n transformOrigin={{ vertical: 'top', horizontal: 'right' }}\n anchorEl={anchorEl}\n open={open}\n onClose={closeMenu}\n >\n {items.map((item) => (\n <MenuItem key={item.label} onClick={handleItemClick(item.onClick)}>\n {item.icon}\n {item.label}\n </MenuItem>\n ))}\n </Menu>\n </>\n )\n}\n"],"mappings":";;;;;;;;AAoBA,MAAa,eAAe,EAC1B,OACA,UACA,eACmC;CACnC,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,SAAS,OAAO;CACtB,MAAM,CAAC,UAAU,eAAe,SAA6B,KAAK;CAClE,MAAM,OAAO,QAAQ,SAAS;CAE9B,MAAM,cAAc,MAA2C;AAC7D,cAAY,EAAE,cAAc;;CAG9B,MAAM,kBAAkB;AACtB,cAAY,KAAK;;CAGnB,MAAM,mBAAmB,kBAA8B;AACrD,WAAS;AACT,aAAW;;AAGb,QACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,mBAAD;EACE,cAAY,EAAE,iBAAiB;EAC/B,iBAAe,OAAO,SAAS,KAAA;EAC/B,iBAAc;EACd,iBAAe,OAAO,SAAS,KAAA;EAC/B,SAAS;EACT,IAAI;GAAE,SAAS,WAAW,KAAM;GAAG,GAAG;GAAU;EAChD,eAAA;YAEA,oBAAC,cAAD,EAAc,UAAS,SAAU,CAAA;EACf,CAAA,EACpB,oBAACA,QAAD;EACE,IAAI;EACJ,WAAW;EACX,cAAc;GAAE,UAAU;GAAU,YAAY;GAAS;EACzD,iBAAiB;GAAE,UAAU;GAAO,YAAY;GAAS;EAC/C;EACJ;EACN,SAAS;YAER,MAAM,KAAK,SACV,qBAAC,UAAD;GAA2B,SAAS,gBAAgB,KAAK,QAAQ;aAAjE,CACG,KAAK,MACL,KAAK,MACG;KAHI,KAAK,MAGT,CACX;EACG,CAAA,CACN,EAAA,CAAA"}
1
+ {"version":3,"file":"ContextMenu.js","names":["Menu"],"sources":["../../../src/components/ContextMenu.tsx"],"sourcesContent":["import MoreVertIcon from '@mui/icons-material/MoreVert'\nimport type { SxProps, Theme } from '@mui/material'\nimport { MenuItem } from '@mui/material'\nimport { type JSX, useId, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { ContextMenuButton } from './ContextMenu.style.js'\nimport { Menu } from './Menu.js'\n\nexport interface ContextMenuItemConfig {\n icon: React.ReactNode\n label: string\n onClick: () => void\n}\n\ninterface ContextMenuProps {\n items: ContextMenuItemConfig[]\n disabled?: boolean\n buttonSx?: SxProps<Theme>\n}\n\nexport const ContextMenu = ({\n items,\n disabled,\n buttonSx,\n}: ContextMenuProps): JSX.Element => {\n const { t } = useTranslation()\n const menuId = useId()\n const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)\n const open = Boolean(anchorEl)\n\n const handleOpen = (e: React.MouseEvent<HTMLButtonElement>) => {\n setAnchorEl(e.currentTarget)\n }\n\n const closeMenu = () => {\n setAnchorEl(null)\n }\n\n const handleItemClick = (onClick: () => void) => () => {\n onClick()\n closeMenu()\n }\n\n return (\n <>\n <ContextMenuButton\n aria-label={t('button.options')}\n aria-controls={open ? menuId : undefined}\n aria-haspopup=\"true\"\n aria-expanded={open ? 'true' : undefined}\n onClick={handleOpen}\n sx={{ opacity: disabled ? 0.5 : 1, ...buttonSx }}\n disableRipple\n >\n <MoreVertIcon fontSize=\"small\" />\n </ContextMenuButton>\n <Menu\n id={menuId}\n elevation={0}\n anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n transformOrigin={{ vertical: 'top', horizontal: 'right' }}\n anchorEl={anchorEl}\n open={open}\n onClose={closeMenu}\n >\n {items.map((item) => (\n <MenuItem key={item.label} onClick={handleItemClick(item.onClick)}>\n {item.icon}\n {item.label}\n </MenuItem>\n ))}\n </Menu>\n </>\n )\n}\n"],"mappings":";;;;;;;;AAoBA,MAAa,eAAe,EAC1B,OACA,UACA,eACmC;CACnC,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,SAAS,OAAO;CACtB,MAAM,CAAC,UAAU,eAAe,SAA6B,KAAK;CAClE,MAAM,OAAO,QAAQ,SAAS;CAE9B,MAAM,cAAc,MAA2C;EAC7D,YAAY,EAAE,cAAc;;CAG9B,MAAM,kBAAkB;EACtB,YAAY,KAAK;;CAGnB,MAAM,mBAAmB,kBAA8B;EACrD,SAAS;EACT,WAAW;;CAGb,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,mBAAD;EACE,cAAY,EAAE,iBAAiB;EAC/B,iBAAe,OAAO,SAAS,KAAA;EAC/B,iBAAc;EACd,iBAAe,OAAO,SAAS,KAAA;EAC/B,SAAS;EACT,IAAI;GAAE,SAAS,WAAW,KAAM;GAAG,GAAG;GAAU;EAChD,eAAA;YAEA,oBAAC,cAAD,EAAc,UAAS,SAAU,CAAA;EACf,CAAA,EACpB,oBAACA,QAAD;EACE,IAAI;EACJ,WAAW;EACX,cAAc;GAAE,UAAU;GAAU,YAAY;GAAS;EACzD,iBAAiB;GAAE,UAAU;GAAO,YAAY;GAAS;EAC/C;EACJ;EACN,SAAS;YAER,MAAM,KAAK,SACV,qBAAC,UAAD;GAA2B,SAAS,gBAAgB,KAAK,QAAQ;aAAjE,CACG,KAAK,MACL,KAAK,MACG;KAHI,KAAK,MAGT,CACX;EACG,CAAA,CACN,EAAA,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"ContractComponent.js","names":[],"sources":["../../../../src/components/ContractComponent/ContractComponent.tsx"],"sourcesContent":["import type { CardProps } from '@mui/material'\nimport type { PropsWithChildren } from 'react'\nimport { Card } from '../Card/Card.js'\n\nexport const ContractComponent: React.FC<PropsWithChildren<CardProps>> = ({\n children,\n ...props\n}) => {\n if (!children) {\n return null\n }\n\n return <Card {...props}>{children}</Card>\n}\n"],"mappings":";;;AAIA,MAAa,qBAA6D,EACxE,UACA,GAAG,YACC;AACJ,KAAI,CAAC,SACH,QAAO;AAGT,QAAO,oBAAC,MAAD;EAAM,GAAI;EAAQ;EAAgB,CAAA"}
1
+ {"version":3,"file":"ContractComponent.js","names":[],"sources":["../../../../src/components/ContractComponent/ContractComponent.tsx"],"sourcesContent":["import type { CardProps } from '@mui/material'\nimport type { PropsWithChildren } from 'react'\nimport { Card } from '../Card/Card.js'\n\nexport const ContractComponent: React.FC<PropsWithChildren<CardProps>> = ({\n children,\n ...props\n}) => {\n if (!children) {\n return null\n }\n\n return <Card {...props}>{children}</Card>\n}\n"],"mappings":";;;AAIA,MAAa,qBAA6D,EACxE,UACA,GAAG,YACC;CACJ,IAAI,CAAC,UACH,OAAO;CAGT,OAAO,oBAAC,MAAD;EAAM,GAAI;EAAQ;EAAgB,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"ItemPrice.js","names":["Token"],"sources":["../../../../src/components/ContractComponent/ItemPrice.tsx"],"sourcesContent":["import { type ContractCall, formatUnits } from '@lifi/sdk'\nimport { useEffect } from 'react'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport type { TokenAmount } from '../../types/token.js'\nimport { Token } from '../Token/Token.js'\n\nexport interface ItemPriceProps {\n token: TokenAmount\n contractCalls?: ContractCall[]\n}\n\nexport const ItemPrice: React.FC<ItemPriceProps> = ({\n token,\n contractCalls,\n}) => {\n const { setFieldValue } = useFieldActions()\n\n useEffect(() => {\n if (token) {\n setFieldValue('toChain', token.chainId, { isTouched: true })\n setFieldValue('toToken', token.address, { isTouched: true })\n setFieldValue(\n 'toAmount',\n token.amount ? formatUnits(token.amount, token.decimals) : '',\n {\n isTouched: true,\n }\n )\n }\n if (contractCalls) {\n setFieldValue('contractCalls', contractCalls, {\n isTouched: true,\n })\n }\n }, [contractCalls, setFieldValue, token])\n return <Token token={token} sx={{ p: 2 }} />\n}\n"],"mappings":";;;;;;AAWA,MAAa,aAAuC,EAClD,OACA,oBACI;CACJ,MAAM,EAAE,kBAAkB,iBAAiB;AAE3C,iBAAgB;AACd,MAAI,OAAO;AACT,iBAAc,WAAW,MAAM,SAAS,EAAE,WAAW,MAAM,CAAC;AAC5D,iBAAc,WAAW,MAAM,SAAS,EAAE,WAAW,MAAM,CAAC;AAC5D,iBACE,YACA,MAAM,SAAS,YAAY,MAAM,QAAQ,MAAM,SAAS,GAAG,IAC3D,EACE,WAAW,MACZ,CACF;;AAEH,MAAI,cACF,eAAc,iBAAiB,eAAe,EAC5C,WAAW,MACZ,CAAC;IAEH;EAAC;EAAe;EAAe;EAAM,CAAC;AACzC,QAAO,oBAACA,SAAD;EAAc;EAAO,IAAI,EAAE,GAAG,GAAG;EAAI,CAAA"}
1
+ {"version":3,"file":"ItemPrice.js","names":["Token"],"sources":["../../../../src/components/ContractComponent/ItemPrice.tsx"],"sourcesContent":["import { type ContractCall, formatUnits } from '@lifi/sdk'\nimport { useEffect } from 'react'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport type { TokenAmount } from '../../types/token.js'\nimport { Token } from '../Token/Token.js'\n\nexport interface ItemPriceProps {\n token: TokenAmount\n contractCalls?: ContractCall[]\n}\n\nexport const ItemPrice: React.FC<ItemPriceProps> = ({\n token,\n contractCalls,\n}) => {\n const { setFieldValue } = useFieldActions()\n\n useEffect(() => {\n if (token) {\n setFieldValue('toChain', token.chainId, { isTouched: true })\n setFieldValue('toToken', token.address, { isTouched: true })\n setFieldValue(\n 'toAmount',\n token.amount ? formatUnits(token.amount, token.decimals) : '',\n {\n isTouched: true,\n }\n )\n }\n if (contractCalls) {\n setFieldValue('contractCalls', contractCalls, {\n isTouched: true,\n })\n }\n }, [contractCalls, setFieldValue, token])\n return <Token token={token} sx={{ p: 2 }} />\n}\n"],"mappings":";;;;;;AAWA,MAAa,aAAuC,EAClD,OACA,oBACI;CACJ,MAAM,EAAE,kBAAkB,iBAAiB;CAE3C,gBAAgB;EACd,IAAI,OAAO;GACT,cAAc,WAAW,MAAM,SAAS,EAAE,WAAW,MAAM,CAAC;GAC5D,cAAc,WAAW,MAAM,SAAS,EAAE,WAAW,MAAM,CAAC;GAC5D,cACE,YACA,MAAM,SAAS,YAAY,MAAM,QAAQ,MAAM,SAAS,GAAG,IAC3D,EACE,WAAW,MACZ,CACF;;EAEH,IAAI,eACF,cAAc,iBAAiB,eAAe,EAC5C,WAAW,MACZ,CAAC;IAEH;EAAC;EAAe;EAAe;EAAM,CAAC;CACzC,OAAO,oBAACA,SAAD;EAAc;EAAO,IAAI,EAAE,GAAG,GAAG;EAAI,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"NFT.js","names":[],"sources":["../../../../../src/components/ContractComponent/NFT/NFT.tsx"],"sourcesContent":["import { formatUnits } from '@lifi/sdk'\nimport { useEffect } from 'react'\nimport { useFieldActions } from '../../../stores/form/useFieldActions.js'\nimport { NFTBase } from './NFTBase.js'\nimport type { NFTProps } from './types.js'\n\nexport const NFT: React.FC<NFTProps> = ({\n imageUrl,\n isLoading,\n collectionName,\n assetName,\n owner,\n token,\n contractCall,\n}) => {\n const { setFieldValue } = useFieldActions()\n\n useEffect(() => {\n if (token) {\n setFieldValue('toChain', token.chainId, { isTouched: true })\n setFieldValue('toToken', token.address, { isTouched: true })\n setFieldValue(\n 'toAmount',\n token.amount ? formatUnits(token.amount, token.decimals) : '',\n {\n isTouched: true,\n }\n )\n }\n if (contractCall) {\n setFieldValue('contractCalls', [contractCall], {\n isTouched: true,\n })\n }\n }, [contractCall, setFieldValue, token])\n return (\n <NFTBase\n isLoading={isLoading}\n imageUrl={imageUrl}\n collectionName={collectionName}\n assetName={assetName}\n owner={owner}\n token={token}\n />\n )\n}\n"],"mappings":";;;;;;AAMA,MAAa,OAA2B,EACtC,UACA,WACA,gBACA,WACA,OACA,OACA,mBACI;CACJ,MAAM,EAAE,kBAAkB,iBAAiB;AAE3C,iBAAgB;AACd,MAAI,OAAO;AACT,iBAAc,WAAW,MAAM,SAAS,EAAE,WAAW,MAAM,CAAC;AAC5D,iBAAc,WAAW,MAAM,SAAS,EAAE,WAAW,MAAM,CAAC;AAC5D,iBACE,YACA,MAAM,SAAS,YAAY,MAAM,QAAQ,MAAM,SAAS,GAAG,IAC3D,EACE,WAAW,MACZ,CACF;;AAEH,MAAI,aACF,eAAc,iBAAiB,CAAC,aAAa,EAAE,EAC7C,WAAW,MACZ,CAAC;IAEH;EAAC;EAAc;EAAe;EAAM,CAAC;AACxC,QACE,oBAAC,SAAD;EACa;EACD;EACM;EACL;EACJ;EACA;EACP,CAAA"}
1
+ {"version":3,"file":"NFT.js","names":[],"sources":["../../../../../src/components/ContractComponent/NFT/NFT.tsx"],"sourcesContent":["import { formatUnits } from '@lifi/sdk'\nimport { useEffect } from 'react'\nimport { useFieldActions } from '../../../stores/form/useFieldActions.js'\nimport { NFTBase } from './NFTBase.js'\nimport type { NFTProps } from './types.js'\n\nexport const NFT: React.FC<NFTProps> = ({\n imageUrl,\n isLoading,\n collectionName,\n assetName,\n owner,\n token,\n contractCall,\n}) => {\n const { setFieldValue } = useFieldActions()\n\n useEffect(() => {\n if (token) {\n setFieldValue('toChain', token.chainId, { isTouched: true })\n setFieldValue('toToken', token.address, { isTouched: true })\n setFieldValue(\n 'toAmount',\n token.amount ? formatUnits(token.amount, token.decimals) : '',\n {\n isTouched: true,\n }\n )\n }\n if (contractCall) {\n setFieldValue('contractCalls', [contractCall], {\n isTouched: true,\n })\n }\n }, [contractCall, setFieldValue, token])\n return (\n <NFTBase\n isLoading={isLoading}\n imageUrl={imageUrl}\n collectionName={collectionName}\n assetName={assetName}\n owner={owner}\n token={token}\n />\n )\n}\n"],"mappings":";;;;;;AAMA,MAAa,OAA2B,EACtC,UACA,WACA,gBACA,WACA,OACA,OACA,mBACI;CACJ,MAAM,EAAE,kBAAkB,iBAAiB;CAE3C,gBAAgB;EACd,IAAI,OAAO;GACT,cAAc,WAAW,MAAM,SAAS,EAAE,WAAW,MAAM,CAAC;GAC5D,cAAc,WAAW,MAAM,SAAS,EAAE,WAAW,MAAM,CAAC;GAC5D,cACE,YACA,MAAM,SAAS,YAAY,MAAM,QAAQ,MAAM,SAAS,GAAG,IAC3D,EACE,WAAW,MACZ,CACF;;EAEH,IAAI,cACF,cAAc,iBAAiB,CAAC,aAAa,EAAE,EAC7C,WAAW,MACZ,CAAC;IAEH;EAAC;EAAc;EAAe;EAAM,CAAC;CACxC,OACE,oBAAC,SAAD;EACa;EACD;EACM;EACL;EACJ;EACA;EACP,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"NFTBase.js","names":[],"sources":["../../../../../src/components/ContractComponent/NFT/NFTBase.tsx"],"sourcesContent":["import { Box, Link, Skeleton, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { Token } from '../../Token/Token.js'\nimport { PreviewAvatar } from './NFT.style.js'\nimport type { NFTProps } from './types.js'\n\nexport const NFTBase: React.FC<NFTProps> = ({\n imageUrl,\n isLoading,\n collectionName,\n assetName,\n owner,\n token,\n}) => {\n const { t } = useTranslation()\n return (\n <Box\n sx={{\n p: 2,\n }}\n >\n <Box\n sx={{\n display: 'flex',\n }}\n >\n {isLoading ? (\n <Skeleton\n width={96}\n height={96}\n variant=\"rectangular\"\n sx={{ borderRadius: 1 }}\n />\n ) : (\n <PreviewAvatar src={imageUrl} />\n )}\n <Box\n sx={{\n ml: 2,\n }}\n >\n {isLoading ? (\n <Skeleton width={144} height={21} variant=\"text\" />\n ) : (\n <Typography\n sx={{\n fontSize: 14,\n color: 'text.secondary',\n }}\n >\n {collectionName}\n </Typography>\n )}\n {isLoading ? (\n <Skeleton width={112} height={27} variant=\"text\" />\n ) : (\n <Typography\n sx={{\n fontSize: 18,\n fontWeight: 600,\n }}\n >\n {assetName}\n </Typography>\n )}\n {isLoading ? (\n <Skeleton width={128} height={21} variant=\"text\" />\n ) : owner ? (\n <Typography\n sx={{\n fontSize: 14,\n color: 'text.secondary',\n }}\n >\n {t('main.ownedBy')}{' '}\n <Link\n href={owner.url}\n target=\"_blank\"\n underline=\"none\"\n color=\"primary\"\n >\n {owner.name}\n </Link>\n </Typography>\n ) : null}\n </Box>\n </Box>\n <Token token={token} isLoading={isLoading} sx={{ mt: 2 }} />\n </Box>\n )\n}\n"],"mappings":";;;;;;AAMA,MAAa,WAA+B,EAC1C,UACA,WACA,gBACA,WACA,OACA,YACI;CACJ,MAAM,EAAE,MAAM,gBAAgB;AAC9B,QACE,qBAAC,KAAD;EACE,IAAI,EACF,GAAG,GACJ;YAHH,CAKE,qBAAC,KAAD;GACE,IAAI,EACF,SAAS,QACV;aAHH,CAKG,YACC,oBAAC,UAAD;IACE,OAAO;IACP,QAAQ;IACR,SAAQ;IACR,IAAI,EAAE,cAAc,GAAG;IACvB,CAAA,GAEF,oBAAC,eAAD,EAAe,KAAK,UAAY,CAAA,EAElC,qBAAC,KAAD;IACE,IAAI,EACF,IAAI,GACL;cAHH;KAKG,YACC,oBAAC,UAAD;MAAU,OAAO;MAAK,QAAQ;MAAI,SAAQ;MAAS,CAAA,GAEnD,oBAAC,YAAD;MACE,IAAI;OACF,UAAU;OACV,OAAO;OACR;gBAEA;MACU,CAAA;KAEd,YACC,oBAAC,UAAD;MAAU,OAAO;MAAK,QAAQ;MAAI,SAAQ;MAAS,CAAA,GAEnD,oBAAC,YAAD;MACE,IAAI;OACF,UAAU;OACV,YAAY;OACb;gBAEA;MACU,CAAA;KAEd,YACC,oBAAC,UAAD;MAAU,OAAO;MAAK,QAAQ;MAAI,SAAQ;MAAS,CAAA,GACjD,QACF,qBAAC,YAAD;MACE,IAAI;OACF,UAAU;OACV,OAAO;OACR;gBAJH;OAMG,EAAE,eAAe;OAAE;OACpB,oBAAC,MAAD;QACE,MAAM,MAAM;QACZ,QAAO;QACP,WAAU;QACV,OAAM;kBAEL,MAAM;QACF,CAAA;OACI;UACX;KACA;MACF;MACN,oBAAC,OAAD;GAAc;GAAkB;GAAW,IAAI,EAAE,IAAI,GAAG;GAAI,CAAA,CACxD"}
1
+ {"version":3,"file":"NFTBase.js","names":[],"sources":["../../../../../src/components/ContractComponent/NFT/NFTBase.tsx"],"sourcesContent":["import { Box, Link, Skeleton, Typography } from '@mui/material'\nimport { useTranslation } from 'react-i18next'\nimport { Token } from '../../Token/Token.js'\nimport { PreviewAvatar } from './NFT.style.js'\nimport type { NFTProps } from './types.js'\n\nexport const NFTBase: React.FC<NFTProps> = ({\n imageUrl,\n isLoading,\n collectionName,\n assetName,\n owner,\n token,\n}) => {\n const { t } = useTranslation()\n return (\n <Box\n sx={{\n p: 2,\n }}\n >\n <Box\n sx={{\n display: 'flex',\n }}\n >\n {isLoading ? (\n <Skeleton\n width={96}\n height={96}\n variant=\"rectangular\"\n sx={{ borderRadius: 1 }}\n />\n ) : (\n <PreviewAvatar src={imageUrl} />\n )}\n <Box\n sx={{\n ml: 2,\n }}\n >\n {isLoading ? (\n <Skeleton width={144} height={21} variant=\"text\" />\n ) : (\n <Typography\n sx={{\n fontSize: 14,\n color: 'text.secondary',\n }}\n >\n {collectionName}\n </Typography>\n )}\n {isLoading ? (\n <Skeleton width={112} height={27} variant=\"text\" />\n ) : (\n <Typography\n sx={{\n fontSize: 18,\n fontWeight: 600,\n }}\n >\n {assetName}\n </Typography>\n )}\n {isLoading ? (\n <Skeleton width={128} height={21} variant=\"text\" />\n ) : owner ? (\n <Typography\n sx={{\n fontSize: 14,\n color: 'text.secondary',\n }}\n >\n {t('main.ownedBy')}{' '}\n <Link\n href={owner.url}\n target=\"_blank\"\n underline=\"none\"\n color=\"primary\"\n >\n {owner.name}\n </Link>\n </Typography>\n ) : null}\n </Box>\n </Box>\n <Token token={token} isLoading={isLoading} sx={{ mt: 2 }} />\n </Box>\n )\n}\n"],"mappings":";;;;;;AAMA,MAAa,WAA+B,EAC1C,UACA,WACA,gBACA,WACA,OACA,YACI;CACJ,MAAM,EAAE,MAAM,gBAAgB;CAC9B,OACE,qBAAC,KAAD;EACE,IAAI,EACF,GAAG,GACJ;YAHH,CAKE,qBAAC,KAAD;GACE,IAAI,EACF,SAAS,QACV;aAHH,CAKG,YACC,oBAAC,UAAD;IACE,OAAO;IACP,QAAQ;IACR,SAAQ;IACR,IAAI,EAAE,cAAc,GAAG;IACvB,CAAA,GAEF,oBAAC,eAAD,EAAe,KAAK,UAAY,CAAA,EAElC,qBAAC,KAAD;IACE,IAAI,EACF,IAAI,GACL;cAHH;KAKG,YACC,oBAAC,UAAD;MAAU,OAAO;MAAK,QAAQ;MAAI,SAAQ;MAAS,CAAA,GAEnD,oBAAC,YAAD;MACE,IAAI;OACF,UAAU;OACV,OAAO;OACR;gBAEA;MACU,CAAA;KAEd,YACC,oBAAC,UAAD;MAAU,OAAO;MAAK,QAAQ;MAAI,SAAQ;MAAS,CAAA,GAEnD,oBAAC,YAAD;MACE,IAAI;OACF,UAAU;OACV,YAAY;OACb;gBAEA;MACU,CAAA;KAEd,YACC,oBAAC,UAAD;MAAU,OAAO;MAAK,QAAQ;MAAI,SAAQ;MAAS,CAAA,GACjD,QACF,qBAAC,YAAD;MACE,IAAI;OACF,UAAU;OACV,OAAO;OACR;gBAJH;OAMG,EAAE,eAAe;OAAE;OACpB,oBAAC,MAAD;QACE,MAAM,MAAM;QACZ,QAAO;QACP,WAAU;QACV,OAAM;kBAEL,MAAM;QACF,CAAA;OACI;UACX;KACA;MACF;MACN,oBAAC,OAAD;GAAc;GAAkB;GAAW,IAAI,EAAE,IAAI,GAAG;GAAI,CAAA,CACxD"}
@@ -1 +1 @@
1
- {"version":3,"file":"Dialog.js","names":["Dialog","MuiDialog"],"sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import type { DialogProps, Theme } from '@mui/material'\nimport { Dialog as MuiDialog } from '@mui/material'\nimport type { PropsWithChildren } from 'react'\nimport { useGetScrollableContainer } from '../../hooks/useScrollableContainer.js'\n\nexport const modalProps: { sx: { position: string; overflow: string } } = {\n sx: {\n position: 'absolute',\n overflow: 'hidden',\n },\n}\n\nexport const slotProps: DialogProps['slotProps'] = {\n paper: {\n sx: (theme: Theme) => ({\n position: 'absolute',\n backgroundImage: 'none',\n backgroundColor: theme.vars.palette.background.default,\n borderTopLeftRadius: theme.vars.shape.borderRadius,\n borderTopRightRadius: theme.vars.shape.borderRadius,\n }),\n },\n backdrop: {\n sx: {\n position: 'absolute',\n backgroundColor: 'rgb(0 0 0 / 32%)',\n backdropFilter: 'blur(3px)',\n },\n },\n}\n\nexport const Dialog: React.FC<PropsWithChildren<DialogProps>> = ({\n children,\n open,\n onClose,\n}) => {\n const getContainer = useGetScrollableContainer()\n return (\n <MuiDialog\n container={getContainer}\n open={open}\n onClose={onClose}\n sx={modalProps.sx}\n slotProps={slotProps}\n >\n {children}\n </MuiDialog>\n )\n}\n"],"mappings":";;;;AAKA,MAAa,aAA6D,EACxE,IAAI;CACF,UAAU;CACV,UAAU;CACX,EACF;AAED,MAAa,YAAsC;CACjD,OAAO,EACL,KAAK,WAAkB;EACrB,UAAU;EACV,iBAAiB;EACjB,iBAAiB,MAAM,KAAK,QAAQ,WAAW;EAC/C,qBAAqB,MAAM,KAAK,MAAM;EACtC,sBAAsB,MAAM,KAAK,MAAM;EACxC,GACF;CACD,UAAU,EACR,IAAI;EACF,UAAU;EACV,iBAAiB;EACjB,gBAAgB;EACjB,EACF;CACF;AAED,MAAaA,YAAoD,EAC/D,UACA,MACA,cACI;AAEJ,QACE,oBAACC,QAAD;EACE,WAHiB,2BAGM;EACjB;EACG;EACT,IAAI,WAAW;EACJ;EAEV;EACS,CAAA"}
1
+ {"version":3,"file":"Dialog.js","names":["Dialog","MuiDialog"],"sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import type { DialogProps, Theme } from '@mui/material'\nimport { Dialog as MuiDialog } from '@mui/material'\nimport type { PropsWithChildren } from 'react'\nimport { useGetScrollableContainer } from '../../hooks/useScrollableContainer.js'\n\nexport const modalProps: { sx: { position: string; overflow: string } } = {\n sx: {\n position: 'absolute',\n overflow: 'hidden',\n },\n}\n\nexport const slotProps: DialogProps['slotProps'] = {\n paper: {\n sx: (theme: Theme) => ({\n position: 'absolute',\n backgroundImage: 'none',\n backgroundColor: theme.vars.palette.background.default,\n borderTopLeftRadius: theme.vars.shape.borderRadius,\n borderTopRightRadius: theme.vars.shape.borderRadius,\n }),\n },\n backdrop: {\n sx: {\n position: 'absolute',\n backgroundColor: 'rgb(0 0 0 / 32%)',\n backdropFilter: 'blur(3px)',\n },\n },\n}\n\nexport const Dialog: React.FC<PropsWithChildren<DialogProps>> = ({\n children,\n open,\n onClose,\n}) => {\n const getContainer = useGetScrollableContainer()\n return (\n <MuiDialog\n container={getContainer}\n open={open}\n onClose={onClose}\n sx={modalProps.sx}\n slotProps={slotProps}\n >\n {children}\n </MuiDialog>\n )\n}\n"],"mappings":";;;;AAKA,MAAa,aAA6D,EACxE,IAAI;CACF,UAAU;CACV,UAAU;CACX,EACF;AAED,MAAa,YAAsC;CACjD,OAAO,EACL,KAAK,WAAkB;EACrB,UAAU;EACV,iBAAiB;EACjB,iBAAiB,MAAM,KAAK,QAAQ,WAAW;EAC/C,qBAAqB,MAAM,KAAK,MAAM;EACtC,sBAAsB,MAAM,KAAK,MAAM;EACxC,GACF;CACD,UAAU,EACR,IAAI;EACF,UAAU;EACV,iBAAiB;EACjB,gBAAgB;EACjB,EACF;CACF;AAED,MAAaA,YAAoD,EAC/D,UACA,MACA,cACI;CAEJ,OACE,oBAACC,QAAD;EACE,WAHiB,2BAGM;EACjB;EACG;EACT,IAAI,WAAW;EACJ;EAEV;EACS,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"Expansion.js","names":[],"sources":["../../../../src/components/Expansion/Expansion.tsx"],"sourcesContent":["import { type JSX, useMemo, useRef, useState } from 'react'\nimport { useHasChainExpansion } from '../../hooks/useHasChainExpansion.js'\nimport { ExpansionType } from '../../types/widget.js'\nimport { ChainsExpanded } from '../Chains/ChainsExpanded.js'\nimport { chainExpansionWidth } from '../Chains/ChainsExpanded.style.js'\nimport { RoutesExpanded } from '../Routes/RoutesExpanded.js'\nimport { routesExpansionWidth } from '../Routes/RoutesExpanded.style.js'\nimport { ExpansionContainer } from './Expansion.style.js'\n\nexport function Expansion(): JSX.Element {\n const [withChainExpansion, expansionType] = useHasChainExpansion()\n const chainExpansionTypeRef = useRef<ExpansionType>(expansionType)\n const [routesOpen, setRoutesOpen] = useState(false)\n\n // Track the previous chain expansion type to avoid re-renders when transitioning to Routes\n if (\n expansionType === ExpansionType.FromChain ||\n expansionType === ExpansionType.ToChain\n ) {\n chainExpansionTypeRef.current = expansionType\n }\n\n const containerWidth = useMemo(() => {\n return routesOpen\n ? routesExpansionWidth\n : withChainExpansion\n ? chainExpansionWidth\n : 0\n }, [routesOpen, withChainExpansion])\n\n return (\n <ExpansionContainer width={containerWidth}>\n <RoutesExpanded\n canOpen={expansionType === ExpansionType.Routes}\n setOpenExpansion={setRoutesOpen}\n />\n <ChainsExpanded\n formType={\n chainExpansionTypeRef.current === ExpansionType.FromChain\n ? 'from'\n : 'to'\n }\n open={withChainExpansion}\n />\n </ExpansionContainer>\n )\n}\n"],"mappings":";;;;;;;;;;AASA,SAAgB,YAAyB;CACvC,MAAM,CAAC,oBAAoB,iBAAiB,sBAAsB;CAClE,MAAM,wBAAwB,OAAsB,cAAc;CAClE,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;AAGnD,KACE,kBAAA,eACA,kBAAA,UAEA,uBAAsB,UAAU;AAWlC,QACE,qBAAC,oBAAD;EAAoB,OATC,cAAc;AACnC,UAAO,aACH,uBACA,qBACE,sBACA;KACL,CAAC,YAAY,mBAAmB,CAGQ;YAAzC,CACE,oBAAC,gBAAD;GACE,SAAS,kBAAA;GACT,kBAAkB;GAClB,CAAA,EACF,oBAAC,gBAAD;GACE,UACE,sBAAsB,YAAA,cAClB,SACA;GAEN,MAAM;GACN,CAAA,CACiB"}
1
+ {"version":3,"file":"Expansion.js","names":[],"sources":["../../../../src/components/Expansion/Expansion.tsx"],"sourcesContent":["import { type JSX, useMemo, useRef, useState } from 'react'\nimport { useHasChainExpansion } from '../../hooks/useHasChainExpansion.js'\nimport { ExpansionType } from '../../types/widget.js'\nimport { ChainsExpanded } from '../Chains/ChainsExpanded.js'\nimport { chainExpansionWidth } from '../Chains/ChainsExpanded.style.js'\nimport { RoutesExpanded } from '../Routes/RoutesExpanded.js'\nimport { routesExpansionWidth } from '../Routes/RoutesExpanded.style.js'\nimport { ExpansionContainer } from './Expansion.style.js'\n\nexport function Expansion(): JSX.Element {\n const [withChainExpansion, expansionType] = useHasChainExpansion()\n const chainExpansionTypeRef = useRef<ExpansionType>(expansionType)\n const [routesOpen, setRoutesOpen] = useState(false)\n\n // Track the previous chain expansion type to avoid re-renders when transitioning to Routes\n if (\n expansionType === ExpansionType.FromChain ||\n expansionType === ExpansionType.ToChain\n ) {\n chainExpansionTypeRef.current = expansionType\n }\n\n const containerWidth = useMemo(() => {\n return routesOpen\n ? routesExpansionWidth\n : withChainExpansion\n ? chainExpansionWidth\n : 0\n }, [routesOpen, withChainExpansion])\n\n return (\n <ExpansionContainer width={containerWidth}>\n <RoutesExpanded\n canOpen={expansionType === ExpansionType.Routes}\n setOpenExpansion={setRoutesOpen}\n />\n <ChainsExpanded\n formType={\n chainExpansionTypeRef.current === ExpansionType.FromChain\n ? 'from'\n : 'to'\n }\n open={withChainExpansion}\n />\n </ExpansionContainer>\n )\n}\n"],"mappings":";;;;;;;;;;AASA,SAAgB,YAAyB;CACvC,MAAM,CAAC,oBAAoB,iBAAiB,sBAAsB;CAClE,MAAM,wBAAwB,OAAsB,cAAc;CAClE,MAAM,CAAC,YAAY,iBAAiB,SAAS,MAAM;CAGnD,IACE,kBAAA,eACA,kBAAA,WAEA,sBAAsB,UAAU;CAWlC,OACE,qBAAC,oBAAD;EAAoB,OATC,cAAc;GACnC,OAAO,aACH,uBACA,qBACE,sBACA;KACL,CAAC,YAAY,mBAAmB,CAGQ;YAAzC,CACE,oBAAC,gBAAD;GACE,SAAS,kBAAA;GACT,kBAAkB;GAClB,CAAA,EACF,oBAAC,gBAAD;GACE,UACE,sBAAsB,YAAA,cAClB,SACA;GAEN,MAAM;GACN,CAAA,CACiB"}
@@ -1 +1 @@
1
- {"version":3,"file":"ExpansionTransition.js","names":[],"sources":["../../../../src/components/Expansion/ExpansionTransition.tsx"],"sourcesContent":["import { Box } from '@mui/material'\nimport { type JSX, type PropsWithChildren, useRef } from 'react'\nimport { Transition } from 'react-transition-group'\nimport {\n animationDuration,\n defaultStyle,\n transitionStyles,\n} from './Expansion.style.js'\n\ninterface ExpansionTransitionProps {\n in: boolean\n width: string\n onExited?: () => void\n}\n\nexport function ExpansionTransition({\n in: inProp,\n children,\n width,\n onExited,\n}: PropsWithChildren<ExpansionTransitionProps>): JSX.Element {\n const nodeRef = useRef(null)\n return (\n <Transition\n nodeRef={nodeRef}\n in={inProp}\n timeout={animationDuration}\n onExited={onExited}\n mountOnEnter\n unmountOnExit\n >\n {(state) => {\n return (\n <Box\n ref={nodeRef}\n style={{\n ...defaultStyle,\n ...transitionStyles[state as keyof typeof transitionStyles],\n width,\n }}\n >\n {children}\n </Box>\n )\n }}\n </Transition>\n )\n}\n"],"mappings":";;;;;;AAeA,SAAgB,oBAAoB,EAClC,IAAI,QACJ,UACA,OACA,YAC2D;CAC3D,MAAM,UAAU,OAAO,KAAK;AAC5B,QACE,oBAAC,YAAD;EACW;EACT,IAAI;EACJ,SAAA;EACU;EACV,cAAA;EACA,eAAA;aAEE,UAAU;AACV,UACE,oBAAC,KAAD;IACE,KAAK;IACL,OAAO;KACL,GAAG;KACH,GAAG,iBAAiB;KACpB;KACD;IAEA;IACG,CAAA;;EAGC,CAAA"}
1
+ {"version":3,"file":"ExpansionTransition.js","names":[],"sources":["../../../../src/components/Expansion/ExpansionTransition.tsx"],"sourcesContent":["import { Box } from '@mui/material'\nimport { type JSX, type PropsWithChildren, useRef } from 'react'\nimport { Transition } from 'react-transition-group'\nimport {\n animationDuration,\n defaultStyle,\n transitionStyles,\n} from './Expansion.style.js'\n\ninterface ExpansionTransitionProps {\n in: boolean\n width: string\n onExited?: () => void\n}\n\nexport function ExpansionTransition({\n in: inProp,\n children,\n width,\n onExited,\n}: PropsWithChildren<ExpansionTransitionProps>): JSX.Element {\n const nodeRef = useRef(null)\n return (\n <Transition\n nodeRef={nodeRef}\n in={inProp}\n timeout={animationDuration}\n onExited={onExited}\n mountOnEnter\n unmountOnExit\n >\n {(state) => {\n return (\n <Box\n ref={nodeRef}\n style={{\n ...defaultStyle,\n ...transitionStyles[state as keyof typeof transitionStyles],\n width,\n }}\n >\n {children}\n </Box>\n )\n }}\n </Transition>\n )\n}\n"],"mappings":";;;;;;AAeA,SAAgB,oBAAoB,EAClC,IAAI,QACJ,UACA,OACA,YAC2D;CAC3D,MAAM,UAAU,OAAO,KAAK;CAC5B,OACE,oBAAC,YAAD;EACW;EACT,IAAI;EACJ,SAAA;EACU;EACV,cAAA;EACA,eAAA;aAEE,UAAU;GACV,OACE,oBAAC,KAAD;IACE,KAAK;IACL,OAAO;KACL,GAAG;KACH,GAAG,iBAAiB;KACpB;KACD;IAEA;IACG,CAAA;;EAGC,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"FeeBreakdownTooltip.js","names":[],"sources":["../../../src/components/FeeBreakdownTooltip.tsx"],"sourcesContent":["import { Box, Tooltip, Typography } from '@mui/material'\nimport type { TFunction } from 'i18next'\nimport type { ReactElement } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { FeesBreakdown } from '../utils/fees.js'\nimport { formatTokenAmount } from '../utils/format.js'\n\ninterface FeeBreakdownTooltipProps {\n gasCosts?: FeesBreakdown[]\n feeCosts?: FeesBreakdown[]\n gasless?: boolean\n children: ReactElement<any, any>\n}\n\nexport const FeeBreakdownTooltip: React.FC<FeeBreakdownTooltipProps> = ({\n gasCosts,\n feeCosts,\n gasless,\n children,\n}) => {\n const { t } = useTranslation()\n return (\n <Tooltip\n title={\n <Box>\n {gasless ? <Box>{t('tooltip.gasless')}</Box> : null}\n {gasCosts?.length && !gasless ? (\n <Box>\n {t('main.fees.network')}\n {getFeeBreakdownTypography(gasCosts, t)}\n </Box>\n ) : null}\n {feeCosts?.length && !gasless ? (\n <Box\n sx={{\n mt: 0.5,\n }}\n >\n {t('main.fees.provider')}\n {getFeeBreakdownTypography(feeCosts, t)}\n </Box>\n ) : null}\n </Box>\n }\n sx={{ cursor: 'help' }}\n >\n {children}\n </Tooltip>\n )\n}\n\nconst getFeeBreakdownTypography = (fees: FeesBreakdown[], t: TFunction) =>\n fees.map((fee, index) => (\n <Typography\n color=\"inherit\"\n key={`${fee.token.address}${index}`}\n sx={{\n fontSize: 12,\n fontWeight: '500',\n }}\n >\n {t('format.currency', { value: fee.amountUSD })} (\n {t('format.tokenAmount', {\n value: formatTokenAmount(fee.amount, fee.token.decimals),\n })}{' '}\n {fee.token.symbol})\n </Typography>\n ))\n"],"mappings":";;;;;AAcA,MAAa,uBAA2D,EACtE,UACA,UACA,SACA,eACI;CACJ,MAAM,EAAE,MAAM,gBAAgB;AAC9B,QACE,oBAAC,SAAD;EACE,OACE,qBAAC,KAAD,EAAA,UAAA;GACG,UAAU,oBAAC,KAAD,EAAA,UAAM,EAAE,kBAAkB,EAAO,CAAA,GAAG;GAC9C,UAAU,UAAU,CAAC,UACpB,qBAAC,KAAD,EAAA,UAAA,CACG,EAAE,oBAAoB,EACtB,0BAA0B,UAAU,EAAE,CACnC,EAAA,CAAA,GACJ;GACH,UAAU,UAAU,CAAC,UACpB,qBAAC,KAAD;IACE,IAAI,EACF,IAAI,IACL;cAHH,CAKG,EAAE,qBAAqB,EACvB,0BAA0B,UAAU,EAAE,CACnC;QACJ;GACA,EAAA,CAAA;EAER,IAAI,EAAE,QAAQ,QAAQ;EAErB;EACO,CAAA;;AAId,MAAM,6BAA6B,MAAuB,MACxD,KAAK,KAAK,KAAK,UACb,qBAAC,YAAD;CACE,OAAM;CAEN,IAAI;EACF,UAAU;EACV,YAAY;EACb;WANH;EAQG,EAAE,mBAAmB,EAAE,OAAO,IAAI,WAAW,CAAC;EAAC;EAC/C,EAAE,sBAAsB,EACvB,OAAO,kBAAkB,IAAI,QAAQ,IAAI,MAAM,SAAS,EACzD,CAAC;EAAE;EACH,IAAI,MAAM;EAAO;EACP;GAXN,GAAG,IAAI,MAAM,UAAU,QAWjB,CACb"}
1
+ {"version":3,"file":"FeeBreakdownTooltip.js","names":[],"sources":["../../../src/components/FeeBreakdownTooltip.tsx"],"sourcesContent":["import { Box, Tooltip, Typography } from '@mui/material'\nimport type { TFunction } from 'i18next'\nimport type { ReactElement } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { FeesBreakdown } from '../utils/fees.js'\nimport { formatTokenAmount } from '../utils/format.js'\n\ninterface FeeBreakdownTooltipProps {\n gasCosts?: FeesBreakdown[]\n feeCosts?: FeesBreakdown[]\n gasless?: boolean\n children: ReactElement<any, any>\n}\n\nexport const FeeBreakdownTooltip: React.FC<FeeBreakdownTooltipProps> = ({\n gasCosts,\n feeCosts,\n gasless,\n children,\n}) => {\n const { t } = useTranslation()\n return (\n <Tooltip\n title={\n <Box>\n {gasless ? <Box>{t('tooltip.gasless')}</Box> : null}\n {gasCosts?.length && !gasless ? (\n <Box>\n {t('main.fees.network')}\n {getFeeBreakdownTypography(gasCosts, t)}\n </Box>\n ) : null}\n {feeCosts?.length && !gasless ? (\n <Box\n sx={{\n mt: 0.5,\n }}\n >\n {t('main.fees.provider')}\n {getFeeBreakdownTypography(feeCosts, t)}\n </Box>\n ) : null}\n </Box>\n }\n sx={{ cursor: 'help' }}\n >\n {children}\n </Tooltip>\n )\n}\n\nconst getFeeBreakdownTypography = (fees: FeesBreakdown[], t: TFunction) =>\n fees.map((fee, index) => (\n <Typography\n color=\"inherit\"\n key={`${fee.token.address}${index}`}\n sx={{\n fontSize: 12,\n fontWeight: '500',\n }}\n >\n {t('format.currency', { value: fee.amountUSD })} (\n {t('format.tokenAmount', {\n value: formatTokenAmount(fee.amount, fee.token.decimals),\n })}{' '}\n {fee.token.symbol})\n </Typography>\n ))\n"],"mappings":";;;;;AAcA,MAAa,uBAA2D,EACtE,UACA,UACA,SACA,eACI;CACJ,MAAM,EAAE,MAAM,gBAAgB;CAC9B,OACE,oBAAC,SAAD;EACE,OACE,qBAAC,KAAD,EAAA,UAAA;GACG,UAAU,oBAAC,KAAD,EAAA,UAAM,EAAE,kBAAkB,EAAO,CAAA,GAAG;GAC9C,UAAU,UAAU,CAAC,UACpB,qBAAC,KAAD,EAAA,UAAA,CACG,EAAE,oBAAoB,EACtB,0BAA0B,UAAU,EAAE,CACnC,EAAA,CAAA,GACJ;GACH,UAAU,UAAU,CAAC,UACpB,qBAAC,KAAD;IACE,IAAI,EACF,IAAI,IACL;cAHH,CAKG,EAAE,qBAAqB,EACvB,0BAA0B,UAAU,EAAE,CACnC;QACJ;GACA,EAAA,CAAA;EAER,IAAI,EAAE,QAAQ,QAAQ;EAErB;EACO,CAAA;;AAId,MAAM,6BAA6B,MAAuB,MACxD,KAAK,KAAK,KAAK,UACb,qBAAC,YAAD;CACE,OAAM;CAEN,IAAI;EACF,UAAU;EACV,YAAY;EACb;WANH;EAQG,EAAE,mBAAmB,EAAE,OAAO,IAAI,WAAW,CAAC;EAAC;EAC/C,EAAE,sBAAsB,EACvB,OAAO,kBAAkB,IAAI,QAAQ,IAAI,MAAM,SAAS,EACzD,CAAC;EAAE;EACH,IAAI,MAAM;EAAO;EACP;GAXN,GAAG,IAAI,MAAM,UAAU,QAWjB,CACb"}
@@ -1 +1 @@
1
- {"version":3,"file":"ActivitiesButton.js","names":["HistoryIcon"],"sources":["../../../../src/components/Header/ActivitiesButton.tsx"],"sourcesContent":["import ErrorRounded from '@mui/icons-material/ErrorRounded'\nimport HistoryIcon from '@mui/icons-material/History'\nimport { Tooltip } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useRouteExecutionIndicator } from '../../stores/routes/useRouteExecutionIndicator.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { CircularProgressPending } from '../Step/CircularProgress.style.js'\nimport {\n ActivitiesIconButton,\n ErrorBadge,\n IconContainer,\n ProgressTrack,\n} from './ActivitiesButton.style.js'\n\nexport const ActivitiesButton = (): JSX.Element => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n const indicator = useRouteExecutionIndicator()\n\n return (\n <Tooltip title={t('header.activities')}>\n <ActivitiesIconButton\n active={indicator.active || indicator.failed}\n size=\"medium\"\n onClick={() => navigate({ to: navigationRoutes.activities })}\n disableRipple={indicator.active || indicator.failed}\n >\n <ErrorBadge\n invisible={!indicator.failed}\n badgeContent={\n <ErrorRounded color=\"error\" sx={{ width: 20, height: 20 }} />\n }\n overlap=\"circular\"\n anchorOrigin={{ vertical: 'top', horizontal: 'right' }}\n >\n <IconContainer>\n {(indicator.active || indicator.failed) && (\n <ProgressTrack\n variant=\"determinate\"\n value={100}\n size={40}\n thickness={3}\n />\n )}\n {indicator.active && (\n <CircularProgressPending\n size={40}\n sx={{ position: 'absolute', top: -8, left: -8 }}\n />\n )}\n <HistoryIcon />\n </IconContainer>\n </ErrorBadge>\n </ActivitiesIconButton>\n </Tooltip>\n )\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAa,yBAAsC;CACjD,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,WAAW,aAAa;CAC9B,MAAM,YAAY,4BAA4B;AAE9C,QACE,oBAAC,SAAD;EAAS,OAAO,EAAE,oBAAoB;YACpC,oBAAC,sBAAD;GACE,QAAQ,UAAU,UAAU,UAAU;GACtC,MAAK;GACL,eAAe,SAAS,EAAE,IAAI,iBAAiB,YAAY,CAAC;GAC5D,eAAe,UAAU,UAAU,UAAU;aAE7C,oBAAC,YAAD;IACE,WAAW,CAAC,UAAU;IACtB,cACE,oBAAC,cAAD;KAAc,OAAM;KAAQ,IAAI;MAAE,OAAO;MAAI,QAAQ;MAAI;KAAI,CAAA;IAE/D,SAAQ;IACR,cAAc;KAAE,UAAU;KAAO,YAAY;KAAS;cAEtD,qBAAC,eAAD,EAAA,UAAA;MACI,UAAU,UAAU,UAAU,WAC9B,oBAAC,eAAD;MACE,SAAQ;MACR,OAAO;MACP,MAAM;MACN,WAAW;MACX,CAAA;KAEH,UAAU,UACT,oBAAC,yBAAD;MACE,MAAM;MACN,IAAI;OAAE,UAAU;OAAY,KAAK;OAAI,MAAM;OAAI;MAC/C,CAAA;KAEJ,oBAACA,SAAD,EAAe,CAAA;KACD,EAAA,CAAA;IACL,CAAA;GACQ,CAAA;EACf,CAAA"}
1
+ {"version":3,"file":"ActivitiesButton.js","names":["HistoryIcon"],"sources":["../../../../src/components/Header/ActivitiesButton.tsx"],"sourcesContent":["import ErrorRounded from '@mui/icons-material/ErrorRounded'\nimport HistoryIcon from '@mui/icons-material/History'\nimport { Tooltip } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useRouteExecutionIndicator } from '../../stores/routes/useRouteExecutionIndicator.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { CircularProgressPending } from '../Step/CircularProgress.style.js'\nimport {\n ActivitiesIconButton,\n ErrorBadge,\n IconContainer,\n ProgressTrack,\n} from './ActivitiesButton.style.js'\n\nexport const ActivitiesButton = (): JSX.Element => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n const indicator = useRouteExecutionIndicator()\n\n return (\n <Tooltip title={t('header.activities')}>\n <ActivitiesIconButton\n active={indicator.active || indicator.failed}\n size=\"medium\"\n onClick={() => navigate({ to: navigationRoutes.activities })}\n disableRipple={indicator.active || indicator.failed}\n >\n <ErrorBadge\n invisible={!indicator.failed}\n badgeContent={\n <ErrorRounded color=\"error\" sx={{ width: 20, height: 20 }} />\n }\n overlap=\"circular\"\n anchorOrigin={{ vertical: 'top', horizontal: 'right' }}\n >\n <IconContainer>\n {(indicator.active || indicator.failed) && (\n <ProgressTrack\n variant=\"determinate\"\n value={100}\n size={40}\n thickness={3}\n />\n )}\n {indicator.active && (\n <CircularProgressPending\n size={40}\n sx={{ position: 'absolute', top: -8, left: -8 }}\n />\n )}\n <HistoryIcon />\n </IconContainer>\n </ErrorBadge>\n </ActivitiesIconButton>\n </Tooltip>\n )\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAa,yBAAsC;CACjD,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,WAAW,aAAa;CAC9B,MAAM,YAAY,4BAA4B;CAE9C,OACE,oBAAC,SAAD;EAAS,OAAO,EAAE,oBAAoB;YACpC,oBAAC,sBAAD;GACE,QAAQ,UAAU,UAAU,UAAU;GACtC,MAAK;GACL,eAAe,SAAS,EAAE,IAAI,iBAAiB,YAAY,CAAC;GAC5D,eAAe,UAAU,UAAU,UAAU;aAE7C,oBAAC,YAAD;IACE,WAAW,CAAC,UAAU;IACtB,cACE,oBAAC,cAAD;KAAc,OAAM;KAAQ,IAAI;MAAE,OAAO;MAAI,QAAQ;MAAI;KAAI,CAAA;IAE/D,SAAQ;IACR,cAAc;KAAE,UAAU;KAAO,YAAY;KAAS;cAEtD,qBAAC,eAAD,EAAA,UAAA;MACI,UAAU,UAAU,UAAU,WAC9B,oBAAC,eAAD;MACE,SAAQ;MACR,OAAO;MACP,MAAM;MACN,WAAW;MACX,CAAA;KAEH,UAAU,UACT,oBAAC,yBAAD;MACE,MAAM;MACN,IAAI;OAAE,UAAU;OAAY,KAAK;OAAI,MAAM;OAAI;MAC/C,CAAA;KAEJ,oBAACA,SAAD,EAAe,CAAA;KACD,EAAA,CAAA;IACL,CAAA;GACQ,CAAA;EACf,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"BackButton.js","names":[],"sources":["../../../../src/components/Header/BackButton.tsx"],"sourcesContent":["import ArrowBack from '@mui/icons-material/ArrowBack'\nimport { IconButton, useTheme } from '@mui/material'\nimport { useNavigateBack } from '../../hooks/useNavigateBack.js'\nimport { useHeaderStore } from '../../stores/header/useHeaderStore.js'\n\nexport const BackButton: React.FC = () => {\n const theme = useTheme()\n const navigateBack = useNavigateBack()\n const [backAction, executeBackAction] = useHeaderStore((state) => [\n state.backAction,\n state.executeBackAction,\n ])\n\n return (\n <IconButton\n size=\"medium\"\n edge={theme?.navigation?.edge ? 'start' : false}\n onClick={() => {\n if (backAction) {\n executeBackAction()\n } else {\n navigateBack()\n }\n }}\n >\n <ArrowBack />\n </IconButton>\n )\n}\n"],"mappings":";;;;;;AAKA,MAAa,mBAA6B;CACxC,MAAM,QAAQ,UAAU;CACxB,MAAM,eAAe,iBAAiB;CACtC,MAAM,CAAC,YAAY,qBAAqB,gBAAgB,UAAU,CAChE,MAAM,YACN,MAAM,kBACP,CAAC;AAEF,QACE,oBAAC,YAAD;EACE,MAAK;EACL,MAAM,OAAO,YAAY,OAAO,UAAU;EAC1C,eAAe;AACb,OAAI,WACF,oBAAmB;OAEnB,eAAc;;YAIlB,oBAAC,WAAD,EAAa,CAAA;EACF,CAAA"}
1
+ {"version":3,"file":"BackButton.js","names":[],"sources":["../../../../src/components/Header/BackButton.tsx"],"sourcesContent":["import ArrowBack from '@mui/icons-material/ArrowBack'\nimport { IconButton, useTheme } from '@mui/material'\nimport { useNavigateBack } from '../../hooks/useNavigateBack.js'\nimport { useHeaderStore } from '../../stores/header/useHeaderStore.js'\n\nexport const BackButton: React.FC = () => {\n const theme = useTheme()\n const navigateBack = useNavigateBack()\n const [backAction, executeBackAction] = useHeaderStore((state) => [\n state.backAction,\n state.executeBackAction,\n ])\n\n return (\n <IconButton\n size=\"medium\"\n edge={theme?.navigation?.edge ? 'start' : false}\n onClick={() => {\n if (backAction) {\n executeBackAction()\n } else {\n navigateBack()\n }\n }}\n >\n <ArrowBack />\n </IconButton>\n )\n}\n"],"mappings":";;;;;;AAKA,MAAa,mBAA6B;CACxC,MAAM,QAAQ,UAAU;CACxB,MAAM,eAAe,iBAAiB;CACtC,MAAM,CAAC,YAAY,qBAAqB,gBAAgB,UAAU,CAChE,MAAM,YACN,MAAM,kBACP,CAAC;CAEF,OACE,oBAAC,YAAD;EACE,MAAK;EACL,MAAM,OAAO,YAAY,OAAO,UAAU;EAC1C,eAAe;GACb,IAAI,YACF,mBAAmB;QAEnB,cAAc;;YAIlB,oBAAC,WAAD,EAAa,CAAA;EACF,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"CloseDrawerButton.js","names":[],"sources":["../../../../src/components/Header/CloseDrawerButton.tsx"],"sourcesContent":["import CloseRounded from '@mui/icons-material/CloseRounded'\nimport { IconButton, Tooltip } from '@mui/material'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useDrawer } from '../../AppDrawerContext.js'\nimport { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'\n\ninterface CloseDrawerButtonProps {\n header?: 'navigation' | 'wallet'\n}\n\nexport const CloseDrawerButton = ({\n header,\n}: CloseDrawerButtonProps): JSX.Element | null => {\n const { t } = useTranslation()\n const { closeDrawer } = useDrawer()\n const { useExternalWalletProvidersOnly } = useExternalWalletProvider()\n\n const showInNavigationHeader =\n header === 'navigation' && useExternalWalletProvidersOnly\n\n const showInWalletHeader = header === 'wallet'\n\n return showInNavigationHeader || showInWalletHeader ? (\n <Tooltip title={t('button.close')}>\n <IconButton size=\"medium\" onClick={closeDrawer}>\n <CloseRounded />\n </IconButton>\n </Tooltip>\n ) : null\n}\n"],"mappings":";;;;;;;AAWA,MAAa,qBAAqB,EAChC,aACgD;CAChD,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,gBAAgB,WAAW;CACnC,MAAM,EAAE,mCAAmC,2BAA2B;AAOtE,QAJE,WAAW,gBAAgB,kCAEF,WAAW,WAGpC,oBAAC,SAAD;EAAS,OAAO,EAAE,eAAe;YAC/B,oBAAC,YAAD;GAAY,MAAK;GAAS,SAAS;aACjC,oBAAC,cAAD,EAAgB,CAAA;GACL,CAAA;EACL,CAAA,GACR"}
1
+ {"version":3,"file":"CloseDrawerButton.js","names":[],"sources":["../../../../src/components/Header/CloseDrawerButton.tsx"],"sourcesContent":["import CloseRounded from '@mui/icons-material/CloseRounded'\nimport { IconButton, Tooltip } from '@mui/material'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useDrawer } from '../../AppDrawerContext.js'\nimport { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'\n\ninterface CloseDrawerButtonProps {\n header?: 'navigation' | 'wallet'\n}\n\nexport const CloseDrawerButton = ({\n header,\n}: CloseDrawerButtonProps): JSX.Element | null => {\n const { t } = useTranslation()\n const { closeDrawer } = useDrawer()\n const { useExternalWalletProvidersOnly } = useExternalWalletProvider()\n\n const showInNavigationHeader =\n header === 'navigation' && useExternalWalletProvidersOnly\n\n const showInWalletHeader = header === 'wallet'\n\n return showInNavigationHeader || showInWalletHeader ? (\n <Tooltip title={t('button.close')}>\n <IconButton size=\"medium\" onClick={closeDrawer}>\n <CloseRounded />\n </IconButton>\n </Tooltip>\n ) : null\n}\n"],"mappings":";;;;;;;AAWA,MAAa,qBAAqB,EAChC,aACgD;CAChD,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,EAAE,gBAAgB,WAAW;CACnC,MAAM,EAAE,mCAAmC,2BAA2B;CAOtE,OAJE,WAAW,gBAAgB,kCAEF,WAAW,WAGpC,oBAAC,SAAD;EAAS,OAAO,EAAE,eAAe;YAC/B,oBAAC,YAAD;GAAY,MAAK;GAAS,SAAS;aACjC,oBAAC,cAAD,EAAgB,CAAA;GACL,CAAA;EACL,CAAA,GACR"}
@@ -1 +1 @@
1
- {"version":3,"file":"DisconnectIconButton.js","names":[],"sources":["../../../../src/components/Header/DisconnectIconButton.tsx"],"sourcesContent":["import { useAccountDisconnect } from '@lifi/wallet-management'\nimport type { Account } from '@lifi/widget-provider'\nimport PowerSettingsNewRounded from '@mui/icons-material/PowerSettingsNewRounded'\nimport { IconButton } from '@mui/material'\nimport type { JSX } from 'react'\n\nexport const DisconnectIconButton = ({\n account,\n}: {\n account: Account\n}): JSX.Element => {\n const disconnect = useAccountDisconnect()\n return (\n <IconButton\n size=\"medium\"\n onClick={async (e) => {\n e.stopPropagation()\n await disconnect(account)\n }}\n >\n <PowerSettingsNewRounded />\n </IconButton>\n )\n}\n"],"mappings":";;;;;AAMA,MAAa,wBAAwB,EACnC,cAGiB;CACjB,MAAM,aAAa,sBAAsB;AACzC,QACE,oBAAC,YAAD;EACE,MAAK;EACL,SAAS,OAAO,MAAM;AACpB,KAAE,iBAAiB;AACnB,SAAM,WAAW,QAAQ;;YAG3B,oBAAC,yBAAD,EAA2B,CAAA;EAChB,CAAA"}
1
+ {"version":3,"file":"DisconnectIconButton.js","names":[],"sources":["../../../../src/components/Header/DisconnectIconButton.tsx"],"sourcesContent":["import { useAccountDisconnect } from '@lifi/wallet-management'\nimport type { Account } from '@lifi/widget-provider'\nimport PowerSettingsNewRounded from '@mui/icons-material/PowerSettingsNewRounded'\nimport { IconButton } from '@mui/material'\nimport type { JSX } from 'react'\n\nexport const DisconnectIconButton = ({\n account,\n}: {\n account: Account\n}): JSX.Element => {\n const disconnect = useAccountDisconnect()\n return (\n <IconButton\n size=\"medium\"\n onClick={async (e) => {\n e.stopPropagation()\n await disconnect(account)\n }}\n >\n <PowerSettingsNewRounded />\n </IconButton>\n )\n}\n"],"mappings":";;;;;AAMA,MAAa,wBAAwB,EACnC,cAGiB;CACjB,MAAM,aAAa,sBAAsB;CACzC,OACE,oBAAC,YAAD;EACE,MAAK;EACL,SAAS,OAAO,MAAM;GACpB,EAAE,iBAAiB;GACnB,MAAM,WAAW,QAAQ;;YAG3B,oBAAC,yBAAD,EAA2B,CAAA;EAChB,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"Header.js","names":[],"sources":["../../../../src/components/Header/Header.tsx"],"sourcesContent":["import { useLocation } from '@tanstack/react-router'\nimport type { FC, PropsWithChildren } from 'react'\nimport { useLayoutEffect, useRef } from 'react'\nimport { useDefaultElementId } from '../../hooks/useDefaultElementId.js'\nimport { useSetHeaderHeight } from '../../stores/header/useHeaderStore.js'\nimport { createElementId, ElementId } from '../../utils/elements.js'\nimport { stickyHeaderRoutes } from '../../utils/navigationRoutes.js'\nimport { Container } from './Header.style.js'\nimport { NavigationHeader } from './NavigationHeader.js'\nimport { WalletHeader } from './WalletHeader.js'\n\nconst HeaderContainer: FC<PropsWithChildren> = ({ children }) => {\n const { pathname } = useLocation()\n const elementId = useDefaultElementId()\n const headerRef = useRef<HTMLDivElement>(null)\n const { setHeaderHeight } = useSetHeaderHeight()\n\n useLayoutEffect(() => {\n const handleHeaderResize = () => {\n const height = headerRef.current?.getBoundingClientRect().height\n\n if (height) {\n setHeaderHeight(height)\n }\n }\n\n let resizeObserver: ResizeObserver\n\n if (headerRef.current) {\n resizeObserver = new ResizeObserver(handleHeaderResize)\n resizeObserver.observe(headerRef.current)\n }\n\n return () => {\n if (resizeObserver) {\n resizeObserver.disconnect()\n }\n }\n }, [setHeaderHeight])\n\n return (\n <Container\n id={createElementId(ElementId.Header, elementId ?? '')}\n sticky={stickyHeaderRoutes.some((route) => pathname.includes(route))}\n ref={headerRef}\n >\n {children}\n </Container>\n )\n}\n\nexport const Header: FC = () => {\n return (\n <HeaderContainer>\n <WalletHeader />\n <NavigationHeader />\n </HeaderContainer>\n )\n}\n"],"mappings":";;;;;;;;;;;AAWA,MAAM,mBAA0C,EAAE,eAAe;CAC/D,MAAM,EAAE,aAAa,aAAa;CAClC,MAAM,YAAY,qBAAqB;CACvC,MAAM,YAAY,OAAuB,KAAK;CAC9C,MAAM,EAAE,oBAAoB,oBAAoB;AAEhD,uBAAsB;EACpB,MAAM,2BAA2B;GAC/B,MAAM,SAAS,UAAU,SAAS,uBAAuB,CAAC;AAE1D,OAAI,OACF,iBAAgB,OAAO;;EAI3B,IAAI;AAEJ,MAAI,UAAU,SAAS;AACrB,oBAAiB,IAAI,eAAe,mBAAmB;AACvD,kBAAe,QAAQ,UAAU,QAAQ;;AAG3C,eAAa;AACX,OAAI,eACF,gBAAe,YAAY;;IAG9B,CAAC,gBAAgB,CAAC;AAErB,QACE,oBAAC,WAAD;EACE,IAAI,gBAAA,iBAAkC,aAAa,GAAG;EACtD,QAAQ,mBAAmB,MAAM,UAAU,SAAS,SAAS,MAAM,CAAC;EACpE,KAAK;EAEJ;EACS,CAAA;;AAIhB,MAAa,eAAmB;AAC9B,QACE,qBAAC,iBAAD,EAAA,UAAA,CACE,oBAAC,cAAD,EAAgB,CAAA,EAChB,oBAAC,kBAAD,EAAoB,CAAA,CACJ,EAAA,CAAA"}
1
+ {"version":3,"file":"Header.js","names":[],"sources":["../../../../src/components/Header/Header.tsx"],"sourcesContent":["import { useLocation } from '@tanstack/react-router'\nimport type { FC, PropsWithChildren } from 'react'\nimport { useLayoutEffect, useRef } from 'react'\nimport { useDefaultElementId } from '../../hooks/useDefaultElementId.js'\nimport { useSetHeaderHeight } from '../../stores/header/useHeaderStore.js'\nimport { createElementId, ElementId } from '../../utils/elements.js'\nimport { stickyHeaderRoutes } from '../../utils/navigationRoutes.js'\nimport { Container } from './Header.style.js'\nimport { NavigationHeader } from './NavigationHeader.js'\nimport { WalletHeader } from './WalletHeader.js'\n\nconst HeaderContainer: FC<PropsWithChildren> = ({ children }) => {\n const { pathname } = useLocation()\n const elementId = useDefaultElementId()\n const headerRef = useRef<HTMLDivElement>(null)\n const { setHeaderHeight } = useSetHeaderHeight()\n\n useLayoutEffect(() => {\n const handleHeaderResize = () => {\n const height = headerRef.current?.getBoundingClientRect().height\n\n if (height) {\n setHeaderHeight(height)\n }\n }\n\n let resizeObserver: ResizeObserver\n\n if (headerRef.current) {\n resizeObserver = new ResizeObserver(handleHeaderResize)\n resizeObserver.observe(headerRef.current)\n }\n\n return () => {\n if (resizeObserver) {\n resizeObserver.disconnect()\n }\n }\n }, [setHeaderHeight])\n\n return (\n <Container\n id={createElementId(ElementId.Header, elementId ?? '')}\n sticky={stickyHeaderRoutes.some((route) => pathname.includes(route))}\n ref={headerRef}\n >\n {children}\n </Container>\n )\n}\n\nexport const Header: FC = () => {\n return (\n <HeaderContainer>\n <WalletHeader />\n <NavigationHeader />\n </HeaderContainer>\n )\n}\n"],"mappings":";;;;;;;;;;;AAWA,MAAM,mBAA0C,EAAE,eAAe;CAC/D,MAAM,EAAE,aAAa,aAAa;CAClC,MAAM,YAAY,qBAAqB;CACvC,MAAM,YAAY,OAAuB,KAAK;CAC9C,MAAM,EAAE,oBAAoB,oBAAoB;CAEhD,sBAAsB;EACpB,MAAM,2BAA2B;GAC/B,MAAM,SAAS,UAAU,SAAS,uBAAuB,CAAC;GAE1D,IAAI,QACF,gBAAgB,OAAO;;EAI3B,IAAI;EAEJ,IAAI,UAAU,SAAS;GACrB,iBAAiB,IAAI,eAAe,mBAAmB;GACvD,eAAe,QAAQ,UAAU,QAAQ;;EAG3C,aAAa;GACX,IAAI,gBACF,eAAe,YAAY;;IAG9B,CAAC,gBAAgB,CAAC;CAErB,OACE,oBAAC,WAAD;EACE,IAAI,gBAAA,iBAAkC,aAAa,GAAG;EACtD,QAAQ,mBAAmB,MAAM,UAAU,SAAS,SAAS,MAAM,CAAC;EACpE,KAAK;EAEJ;EACS,CAAA;;AAIhB,MAAa,eAAmB;CAC9B,OACE,qBAAC,iBAAD,EAAA,UAAA,CACE,oBAAC,cAAD,EAAgB,CAAA,EAChB,oBAAC,kBAAD,EAAoB,CAAA,CACJ,EAAA,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"Header.style.js","names":["Container"],"sources":["../../../../src/components/Header/Header.style.ts"],"sourcesContent":["import {\n AppBar,\n Avatar,\n Box,\n Button,\n buttonClasses,\n styled,\n} from '@mui/material'\nimport type React from 'react'\nimport { getAvatarMask } from '../Avatar/utils.js'\n\nexport const HeaderAppBar: React.FC<\n React.ComponentProps<typeof AppBar> & { sticky?: boolean }\n> = styled(AppBar)(({ theme }) => ({\n backgroundColor: 'transparent',\n ...theme.applyStyles('dark', {\n backgroundColor: 'transparent',\n }),\n color: theme.vars.palette.text.primary,\n flexDirection: 'row',\n alignItems: 'center',\n position: 'relative',\n}))\n\nexport const Container: React.FC<\n React.ComponentProps<typeof Box> & { sticky?: boolean }\n> = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'sticky',\n})<{ sticky?: boolean }>(({ theme, sticky }) => {\n return {\n display: 'flex',\n flexDirection: 'column',\n backgroundColor: theme.vars.palette.background.default,\n position: sticky ? 'sticky' : 'relative',\n top: 0,\n zIndex: 1200,\n gap: theme.spacing(0.5),\n padding: theme.spacing(1.5, 3, 1.5, 3),\n overflow: 'auto',\n borderRadius: theme.container?.borderRadius ?? 0,\n ...theme.header,\n ...(theme.header?.position === 'fixed'\n ? {\n minWidth: theme.breakpoints.values.xs,\n maxWidth: theme.breakpoints.values.sm,\n width: '100%',\n }\n : {}),\n }\n})\n\nexport const WalletButton: React.FC<\n React.ComponentProps<typeof Button> & { withOffset?: boolean }\n> = styled(Button, {\n shouldForwardProp: (prop) => prop !== 'withOffset',\n})<{ withOffset?: boolean }>(({ withOffset, theme }) => ({\n color: theme.vars.palette.text.primary,\n padding: theme.spacing(1, 1.5),\n maxHeight: 40,\n fontSize: '0.875rem',\n fontWeight: 600,\n borderRadius: `calc(${theme.vars.shape.borderRadius} * 2)`,\n backgroundColor: 'transparent',\n '&:hover': {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n },\n ...theme.applyStyles('dark', {\n backgroundColor: 'transparent',\n '&:hover': {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n },\n }),\n [`.${buttonClasses.endIcon} > *:nth-of-type(1)`]: {\n fontSize: '24px',\n },\n [`.${buttonClasses.startIcon} > *:nth-of-type(1)`]: {\n fontSize: '24px',\n },\n ...(theme.navigation.edge && {\n marginRight: withOffset ? theme.spacing(-1.25) : 0,\n }),\n}))\n\nexport const DrawerWalletContainer: React.FC<\n React.ComponentProps<typeof Box> & { avatarSize?: number; badgeSize?: number }\n> = styled(Box)(({ theme }) => ({\n width: '100%',\n display: 'flex',\n justifyContent: 'space-between',\n\n ...(theme.navigation.edge && {\n '& button:first-of-type': {\n marginLeft: theme.spacing(-1),\n },\n '& button:last-of-type': {\n marginRight: theme.spacing(-1.25),\n },\n }),\n}))\n\nexport const HeaderControlsContainer: React.FC<\n React.ComponentProps<typeof Box> & { avatarSize?: number; badgeSize?: number }\n> = styled(Box)(({ theme }) => ({\n display: 'flex',\n gap: theme.spacing(0.5),\n ...(theme.navigation.edge && {\n '& button:last-of-type': {\n marginRight: theme.spacing(-1.25),\n },\n }),\n}))\n\nexport const WalletAvatar: React.FC<\n React.ComponentProps<typeof Avatar> & {\n avatarSize?: number\n badgeSize?: number\n }\n> = styled(Avatar, {\n shouldForwardProp: (prop) => prop !== 'avatarSize' && prop !== 'badgeSize',\n})<{ avatarSize?: number; badgeSize?: number }>(\n ({ avatarSize = 24, badgeSize = 12 }) => ({\n mask: getAvatarMask(badgeSize),\n width: avatarSize,\n height: avatarSize,\n })\n)\n"],"mappings":";;;AAWA,MAAa,eAET,OAAO,OAAO,EAAE,EAAE,aAAa;CACjC,iBAAiB;CACjB,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,eAClB,CAAC;CACF,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,eAAe;CACf,YAAY;CACZ,UAAU;CACX,EAAE;AAEH,MAAaA,cAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,UACvC,CAAC,EAAwB,EAAE,OAAO,aAAa;AAC9C,QAAO;EACL,SAAS;EACT,eAAe;EACf,iBAAiB,MAAM,KAAK,QAAQ,WAAW;EAC/C,UAAU,SAAS,WAAW;EAC9B,KAAK;EACL,QAAQ;EACR,KAAK,MAAM,QAAQ,GAAI;EACvB,SAAS,MAAM,QAAQ,KAAK,GAAG,KAAK,EAAE;EACtC,UAAU;EACV,cAAc,MAAM,WAAW,gBAAgB;EAC/C,GAAG,MAAM;EACT,GAAI,MAAM,QAAQ,aAAa,UAC3B;GACE,UAAU,MAAM,YAAY,OAAO;GACnC,UAAU,MAAM,YAAY,OAAO;GACnC,OAAO;GACR,GACD,EAAE;EACP;EACD;AAEF,MAAa,eAET,OAAO,QAAQ,EACjB,oBAAoB,SAAS,SAAS,cACvC,CAAC,EAA4B,EAAE,YAAY,aAAa;CACvD,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,SAAS,MAAM,QAAQ,GAAG,IAAI;CAC9B,WAAW;CACX,UAAU;CACV,YAAY;CACZ,cAAc,QAAQ,MAAM,KAAK,MAAM,aAAa;CACpD,iBAAiB;CACjB,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBAC/E;CACD,GAAG,MAAM,YAAY,QAAQ;EAC3B,iBAAiB;EACjB,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBAC/E;EACF,CAAC;EACD,IAAI,cAAc,QAAQ,uBAAuB,EAChD,UAAU,QACX;EACA,IAAI,cAAc,UAAU,uBAAuB,EAClD,UAAU,QACX;CACD,GAAI,MAAM,WAAW,QAAQ,EAC3B,aAAa,aAAa,MAAM,QAAQ,MAAM,GAAG,GAClD;CACF,EAAE;AAEH,MAAa,wBAET,OAAO,IAAI,EAAE,EAAE,aAAa;CAC9B,OAAO;CACP,SAAS;CACT,gBAAgB;CAEhB,GAAI,MAAM,WAAW,QAAQ;EAC3B,0BAA0B,EACxB,YAAY,MAAM,QAAQ,GAAG,EAC9B;EACD,yBAAyB,EACvB,aAAa,MAAM,QAAQ,MAAM,EAClC;EACF;CACF,EAAE;AAEH,MAAa,0BAET,OAAO,IAAI,EAAE,EAAE,aAAa;CAC9B,SAAS;CACT,KAAK,MAAM,QAAQ,GAAI;CACvB,GAAI,MAAM,WAAW,QAAQ,EAC3B,yBAAyB,EACvB,aAAa,MAAM,QAAQ,MAAM,EAClC,EACF;CACF,EAAE;AAEH,MAAa,eAKT,OAAO,QAAQ,EACjB,oBAAoB,SAAS,SAAS,gBAAgB,SAAS,aAChE,CAAC,EACC,EAAE,aAAa,IAAI,YAAY,UAAU;CACxC,MAAM,cAAc,UAAU;CAC9B,OAAO;CACP,QAAQ;CACT,EACF"}
1
+ {"version":3,"file":"Header.style.js","names":["Container"],"sources":["../../../../src/components/Header/Header.style.ts"],"sourcesContent":["import {\n AppBar,\n Avatar,\n Box,\n Button,\n buttonClasses,\n styled,\n} from '@mui/material'\nimport type React from 'react'\nimport { getAvatarMask } from '../Avatar/utils.js'\n\nexport const HeaderAppBar: React.FC<\n React.ComponentProps<typeof AppBar> & { sticky?: boolean }\n> = styled(AppBar)(({ theme }) => ({\n backgroundColor: 'transparent',\n ...theme.applyStyles('dark', {\n backgroundColor: 'transparent',\n }),\n color: theme.vars.palette.text.primary,\n flexDirection: 'row',\n alignItems: 'center',\n position: 'relative',\n}))\n\nexport const Container: React.FC<\n React.ComponentProps<typeof Box> & { sticky?: boolean }\n> = styled(Box, {\n shouldForwardProp: (prop) => prop !== 'sticky',\n})<{ sticky?: boolean }>(({ theme, sticky }) => {\n return {\n display: 'flex',\n flexDirection: 'column',\n backgroundColor: theme.vars.palette.background.default,\n position: sticky ? 'sticky' : 'relative',\n top: 0,\n zIndex: 1200,\n gap: theme.spacing(0.5),\n padding: theme.spacing(1.5, 3, 1.5, 3),\n overflow: 'auto',\n borderRadius: theme.container?.borderRadius ?? 0,\n ...theme.header,\n ...(theme.header?.position === 'fixed'\n ? {\n minWidth: theme.breakpoints.values.xs,\n maxWidth: theme.breakpoints.values.sm,\n width: '100%',\n }\n : {}),\n }\n})\n\nexport const WalletButton: React.FC<\n React.ComponentProps<typeof Button> & { withOffset?: boolean }\n> = styled(Button, {\n shouldForwardProp: (prop) => prop !== 'withOffset',\n})<{ withOffset?: boolean }>(({ withOffset, theme }) => ({\n color: theme.vars.palette.text.primary,\n padding: theme.spacing(1, 1.5),\n maxHeight: 40,\n fontSize: '0.875rem',\n fontWeight: 600,\n borderRadius: `calc(${theme.vars.shape.borderRadius} * 2)`,\n backgroundColor: 'transparent',\n '&:hover': {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n },\n ...theme.applyStyles('dark', {\n backgroundColor: 'transparent',\n '&:hover': {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n },\n }),\n [`.${buttonClasses.endIcon} > *:nth-of-type(1)`]: {\n fontSize: '24px',\n },\n [`.${buttonClasses.startIcon} > *:nth-of-type(1)`]: {\n fontSize: '24px',\n },\n ...(theme.navigation.edge && {\n marginRight: withOffset ? theme.spacing(-1.25) : 0,\n }),\n}))\n\nexport const DrawerWalletContainer: React.FC<\n React.ComponentProps<typeof Box> & { avatarSize?: number; badgeSize?: number }\n> = styled(Box)(({ theme }) => ({\n width: '100%',\n display: 'flex',\n justifyContent: 'space-between',\n\n ...(theme.navigation.edge && {\n '& button:first-of-type': {\n marginLeft: theme.spacing(-1),\n },\n '& button:last-of-type': {\n marginRight: theme.spacing(-1.25),\n },\n }),\n}))\n\nexport const HeaderControlsContainer: React.FC<\n React.ComponentProps<typeof Box> & { avatarSize?: number; badgeSize?: number }\n> = styled(Box)(({ theme }) => ({\n display: 'flex',\n gap: theme.spacing(0.5),\n ...(theme.navigation.edge && {\n '& button:last-of-type': {\n marginRight: theme.spacing(-1.25),\n },\n }),\n}))\n\nexport const WalletAvatar: React.FC<\n React.ComponentProps<typeof Avatar> & {\n avatarSize?: number\n badgeSize?: number\n }\n> = styled(Avatar, {\n shouldForwardProp: (prop) => prop !== 'avatarSize' && prop !== 'badgeSize',\n})<{ avatarSize?: number; badgeSize?: number }>(\n ({ avatarSize = 24, badgeSize = 12 }) => ({\n mask: getAvatarMask(badgeSize),\n width: avatarSize,\n height: avatarSize,\n })\n)\n"],"mappings":";;;AAWA,MAAa,eAET,OAAO,OAAO,EAAE,EAAE,aAAa;CACjC,iBAAiB;CACjB,GAAG,MAAM,YAAY,QAAQ,EAC3B,iBAAiB,eAClB,CAAC;CACF,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,eAAe;CACf,YAAY;CACZ,UAAU;CACX,EAAE;AAEH,MAAaA,cAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,UACvC,CAAC,EAAwB,EAAE,OAAO,aAAa;CAC9C,OAAO;EACL,SAAS;EACT,eAAe;EACf,iBAAiB,MAAM,KAAK,QAAQ,WAAW;EAC/C,UAAU,SAAS,WAAW;EAC9B,KAAK;EACL,QAAQ;EACR,KAAK,MAAM,QAAQ,GAAI;EACvB,SAAS,MAAM,QAAQ,KAAK,GAAG,KAAK,EAAE;EACtC,UAAU;EACV,cAAc,MAAM,WAAW,gBAAgB;EAC/C,GAAG,MAAM;EACT,GAAI,MAAM,QAAQ,aAAa,UAC3B;GACE,UAAU,MAAM,YAAY,OAAO;GACnC,UAAU,MAAM,YAAY,OAAO;GACnC,OAAO;GACR,GACD,EAAE;EACP;EACD;AAEF,MAAa,eAET,OAAO,QAAQ,EACjB,oBAAoB,SAAS,SAAS,cACvC,CAAC,EAA4B,EAAE,YAAY,aAAa;CACvD,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,SAAS,MAAM,QAAQ,GAAG,IAAI;CAC9B,WAAW;CACX,UAAU;CACV,YAAY;CACZ,cAAc,QAAQ,MAAM,KAAK,MAAM,aAAa;CACpD,iBAAiB;CACjB,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBAC/E;CACD,GAAG,MAAM,YAAY,QAAQ;EAC3B,iBAAiB;EACjB,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBAC/E;EACF,CAAC;EACD,IAAI,cAAc,QAAQ,uBAAuB,EAChD,UAAU,QACX;EACA,IAAI,cAAc,UAAU,uBAAuB,EAClD,UAAU,QACX;CACD,GAAI,MAAM,WAAW,QAAQ,EAC3B,aAAa,aAAa,MAAM,QAAQ,MAAM,GAAG,GAClD;CACF,EAAE;AAEH,MAAa,wBAET,OAAO,IAAI,EAAE,EAAE,aAAa;CAC9B,OAAO;CACP,SAAS;CACT,gBAAgB;CAEhB,GAAI,MAAM,WAAW,QAAQ;EAC3B,0BAA0B,EACxB,YAAY,MAAM,QAAQ,GAAG,EAC9B;EACD,yBAAyB,EACvB,aAAa,MAAM,QAAQ,MAAM,EAClC;EACF;CACF,EAAE;AAEH,MAAa,0BAET,OAAO,IAAI,EAAE,EAAE,aAAa;CAC9B,SAAS;CACT,KAAK,MAAM,QAAQ,GAAI;CACvB,GAAI,MAAM,WAAW,QAAQ,EAC3B,yBAAyB,EACvB,aAAa,MAAM,QAAQ,MAAM,EAClC,EACF;CACF,EAAE;AAEH,MAAa,eAKT,OAAO,QAAQ,EACjB,oBAAoB,SAAS,SAAS,gBAAgB,SAAS,aAChE,CAAC,EACC,EAAE,aAAa,IAAI,YAAY,UAAU;CACxC,MAAM,cAAc,UAAU;CAC9B,OAAO;CACP,QAAQ;CACT,EACF"}
@@ -1 +1 @@
1
- {"version":3,"file":"NavigationHeader.js","names":[],"sources":["../../../../src/components/Header/NavigationHeader.tsx"],"sourcesContent":["import { useAccount } from '@lifi/wallet-management'\nimport { Box, Typography } from '@mui/material'\nimport { useLocation } from '@tanstack/react-router'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useHeaderStore } from '../../stores/header/useHeaderStore.js'\nimport { HiddenUI } from '../../types/widget.js'\nimport {\n backButtonRoutes,\n navigationRoutes,\n navigationRoutesValues,\n} from '../../utils/navigationRoutes.js'\nimport { ActivitiesButton } from './ActivitiesButton.js'\nimport { BackButton } from './BackButton.js'\nimport { CloseDrawerButton } from './CloseDrawerButton.js'\nimport { HeaderAppBar, HeaderControlsContainer } from './Header.style.js'\nimport { SettingsButton } from './SettingsButton.js'\nimport { SplitNavigationTabs } from './SplitNavigationTabs.js'\n\nexport const NavigationHeader: React.FC = () => {\n const { subvariant, hiddenUI, variant, defaultUI, subvariantOptions } =\n useWidgetConfig()\n const { account } = useAccount()\n const [element, title] = useHeaderStore((state) => [\n state.element,\n state.title,\n ])\n const { pathname } = useLocation()\n const cleanedPathname = pathname.endsWith('/')\n ? pathname.slice(0, -1)\n : pathname\n const path = cleanedPathname.substring(cleanedPathname.lastIndexOf('/') + 1)\n const hasPath = navigationRoutesValues.includes(path)\n\n // Show tabs when split is undefined (default tabs) or an object with defaultTab\n // Hide tabs when split is a string ('bridge' or 'swap' - single mode)\n const showSplitOptions =\n subvariant === 'split' &&\n !hasPath &&\n typeof subvariantOptions?.split !== 'string'\n\n return (\n <HeaderAppBar elevation={0} sx={{ paddingTop: 1, paddingBottom: 0.5 }}>\n {backButtonRoutes.includes(path) ? <BackButton /> : null}\n {showSplitOptions ? (\n <Box sx={{ flex: 1, marginRight: 1 }}>\n <SplitNavigationTabs />\n </Box>\n ) : (\n <Typography\n align={hasPath ? 'center' : 'left'}\n noWrap={defaultUI?.navigationHeaderTitleNoWrap ?? true}\n sx={{\n fontSize: hasPath ? 18 : 24,\n fontWeight: '700',\n flex: 1,\n }}\n >\n {title}\n </Typography>\n )}\n {pathname === navigationRoutes.home ? (\n <HeaderControlsContainer>\n {account.isConnected && !hiddenUI?.includes(HiddenUI.History) && (\n <ActivitiesButton />\n )}\n <SettingsButton />\n {variant === 'drawer' &&\n !hiddenUI?.includes(HiddenUI.DrawerCloseButton) ? (\n <CloseDrawerButton header=\"navigation\" />\n ) : null}\n </HeaderControlsContainer>\n ) : (\n element || (\n <Box\n sx={{\n width: 28,\n height: 40,\n }}\n />\n )\n )}\n </HeaderAppBar>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAa,yBAAmC;CAC9C,MAAM,EAAE,YAAY,UAAU,SAAS,WAAW,sBAChD,iBAAiB;CACnB,MAAM,EAAE,YAAY,YAAY;CAChC,MAAM,CAAC,SAAS,SAAS,gBAAgB,UAAU,CACjD,MAAM,SACN,MAAM,MACP,CAAC;CACF,MAAM,EAAE,aAAa,aAAa;CAClC,MAAM,kBAAkB,SAAS,SAAS,IAAI,GAC1C,SAAS,MAAM,GAAG,GAAG,GACrB;CACJ,MAAM,OAAO,gBAAgB,UAAU,gBAAgB,YAAY,IAAI,GAAG,EAAE;CAC5E,MAAM,UAAU,uBAAuB,SAAS,KAAK;CAIrD,MAAM,mBACJ,eAAe,WACf,CAAC,WACD,OAAO,mBAAmB,UAAU;AAEtC,QACE,qBAAC,cAAD;EAAc,WAAW;EAAG,IAAI;GAAE,YAAY;GAAG,eAAe;GAAK;YAArE;GACG,iBAAiB,SAAS,KAAK,GAAG,oBAAC,YAAD,EAAc,CAAA,GAAG;GACnD,mBACC,oBAAC,KAAD;IAAK,IAAI;KAAE,MAAM;KAAG,aAAa;KAAG;cAClC,oBAAC,qBAAD,EAAuB,CAAA;IACnB,CAAA,GAEN,oBAAC,YAAD;IACE,OAAO,UAAU,WAAW;IAC5B,QAAQ,WAAW,+BAA+B;IAClD,IAAI;KACF,UAAU,UAAU,KAAK;KACzB,YAAY;KACZ,MAAM;KACP;cAEA;IACU,CAAA;GAEd,aAAa,iBAAiB,OAC7B,qBAAC,yBAAD,EAAA,UAAA;IACG,QAAQ,eAAe,CAAC,UAAU,SAAA,UAA0B,IAC3D,oBAAC,kBAAD,EAAoB,CAAA;IAEtB,oBAAC,gBAAD,EAAkB,CAAA;IACjB,YAAY,YACb,CAAC,UAAU,SAAA,oBAAoC,GAC7C,oBAAC,mBAAD,EAAmB,QAAO,cAAe,CAAA,GACvC;IACoB,EAAA,CAAA,GAE1B,WACE,oBAAC,KAAD,EACE,IAAI;IACF,OAAO;IACP,QAAQ;IACT,EACD,CAAA;GAGO"}
1
+ {"version":3,"file":"NavigationHeader.js","names":[],"sources":["../../../../src/components/Header/NavigationHeader.tsx"],"sourcesContent":["import { useAccount } from '@lifi/wallet-management'\nimport { Box, Typography } from '@mui/material'\nimport { useLocation } from '@tanstack/react-router'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useHeaderStore } from '../../stores/header/useHeaderStore.js'\nimport { HiddenUI } from '../../types/widget.js'\nimport {\n backButtonRoutes,\n navigationRoutes,\n navigationRoutesValues,\n} from '../../utils/navigationRoutes.js'\nimport { ActivitiesButton } from './ActivitiesButton.js'\nimport { BackButton } from './BackButton.js'\nimport { CloseDrawerButton } from './CloseDrawerButton.js'\nimport { HeaderAppBar, HeaderControlsContainer } from './Header.style.js'\nimport { SettingsButton } from './SettingsButton.js'\nimport { SplitNavigationTabs } from './SplitNavigationTabs.js'\n\nexport const NavigationHeader: React.FC = () => {\n const { subvariant, hiddenUI, variant, defaultUI, subvariantOptions } =\n useWidgetConfig()\n const { account } = useAccount()\n const [element, title] = useHeaderStore((state) => [\n state.element,\n state.title,\n ])\n const { pathname } = useLocation()\n const cleanedPathname = pathname.endsWith('/')\n ? pathname.slice(0, -1)\n : pathname\n const path = cleanedPathname.substring(cleanedPathname.lastIndexOf('/') + 1)\n const hasPath = navigationRoutesValues.includes(path)\n\n // Show tabs when split is undefined (default tabs) or an object with defaultTab\n // Hide tabs when split is a string ('bridge' or 'swap' - single mode)\n const showSplitOptions =\n subvariant === 'split' &&\n !hasPath &&\n typeof subvariantOptions?.split !== 'string'\n\n return (\n <HeaderAppBar elevation={0} sx={{ paddingTop: 1, paddingBottom: 0.5 }}>\n {backButtonRoutes.includes(path) ? <BackButton /> : null}\n {showSplitOptions ? (\n <Box sx={{ flex: 1, marginRight: 1 }}>\n <SplitNavigationTabs />\n </Box>\n ) : (\n <Typography\n align={hasPath ? 'center' : 'left'}\n noWrap={defaultUI?.navigationHeaderTitleNoWrap ?? true}\n sx={{\n fontSize: hasPath ? 18 : 24,\n fontWeight: '700',\n flex: 1,\n }}\n >\n {title}\n </Typography>\n )}\n {pathname === navigationRoutes.home ? (\n <HeaderControlsContainer>\n {account.isConnected && !hiddenUI?.includes(HiddenUI.History) && (\n <ActivitiesButton />\n )}\n <SettingsButton />\n {variant === 'drawer' &&\n !hiddenUI?.includes(HiddenUI.DrawerCloseButton) ? (\n <CloseDrawerButton header=\"navigation\" />\n ) : null}\n </HeaderControlsContainer>\n ) : (\n element || (\n <Box\n sx={{\n width: 28,\n height: 40,\n }}\n />\n )\n )}\n </HeaderAppBar>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAa,yBAAmC;CAC9C,MAAM,EAAE,YAAY,UAAU,SAAS,WAAW,sBAChD,iBAAiB;CACnB,MAAM,EAAE,YAAY,YAAY;CAChC,MAAM,CAAC,SAAS,SAAS,gBAAgB,UAAU,CACjD,MAAM,SACN,MAAM,MACP,CAAC;CACF,MAAM,EAAE,aAAa,aAAa;CAClC,MAAM,kBAAkB,SAAS,SAAS,IAAI,GAC1C,SAAS,MAAM,GAAG,GAAG,GACrB;CACJ,MAAM,OAAO,gBAAgB,UAAU,gBAAgB,YAAY,IAAI,GAAG,EAAE;CAC5E,MAAM,UAAU,uBAAuB,SAAS,KAAK;CAIrD,MAAM,mBACJ,eAAe,WACf,CAAC,WACD,OAAO,mBAAmB,UAAU;CAEtC,OACE,qBAAC,cAAD;EAAc,WAAW;EAAG,IAAI;GAAE,YAAY;GAAG,eAAe;GAAK;YAArE;GACG,iBAAiB,SAAS,KAAK,GAAG,oBAAC,YAAD,EAAc,CAAA,GAAG;GACnD,mBACC,oBAAC,KAAD;IAAK,IAAI;KAAE,MAAM;KAAG,aAAa;KAAG;cAClC,oBAAC,qBAAD,EAAuB,CAAA;IACnB,CAAA,GAEN,oBAAC,YAAD;IACE,OAAO,UAAU,WAAW;IAC5B,QAAQ,WAAW,+BAA+B;IAClD,IAAI;KACF,UAAU,UAAU,KAAK;KACzB,YAAY;KACZ,MAAM;KACP;cAEA;IACU,CAAA;GAEd,aAAa,iBAAiB,OAC7B,qBAAC,yBAAD,EAAA,UAAA;IACG,QAAQ,eAAe,CAAC,UAAU,SAAA,UAA0B,IAC3D,oBAAC,kBAAD,EAAoB,CAAA;IAEtB,oBAAC,gBAAD,EAAkB,CAAA;IACjB,YAAY,YACb,CAAC,UAAU,SAAA,oBAAoC,GAC7C,oBAAC,mBAAD,EAAmB,QAAO,cAAe,CAAA,GACvC;IACoB,EAAA,CAAA,GAE1B,WACE,oBAAC,KAAD,EACE,IAAI;IACF,OAAO;IACP,QAAQ;IACT,EACD,CAAA;GAGO"}
@@ -1 +1 @@
1
- {"version":3,"file":"SettingsButton.js","names":[],"sources":["../../../../src/components/Header/SettingsButton.tsx"],"sourcesContent":["import Settings from '@mui/icons-material/Settings'\nimport { Tooltip } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useSettingMonitor } from '../../hooks/useSettingMonitor.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport {\n SettingsIconBadge,\n SettingsIconButton,\n} from './SettingsButton.style.js'\n\nexport const SettingsButton = (): JSX.Element => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n\n const { isCustomRouteSettings, isRouteSettingsWithWarnings } =\n useSettingMonitor()\n\n const variant = isRouteSettingsWithWarnings\n ? 'warning'\n : isCustomRouteSettings\n ? 'info'\n : undefined\n\n const tooltipMessage = variant\n ? t('tooltip.settingsModified')\n : t('header.settings')\n\n return (\n <Tooltip title={tooltipMessage}>\n <SettingsIconButton\n size=\"medium\"\n onClick={() => navigate({ to: navigationRoutes.settings })}\n variant={variant}\n >\n {variant ? (\n <SettingsIconBadge variant=\"dot\" color={variant}>\n <Settings />\n </SettingsIconBadge>\n ) : (\n <Settings />\n )}\n </SettingsIconButton>\n </Tooltip>\n )\n}\n"],"mappings":";;;;;;;;;AAYA,MAAa,uBAAoC;CAC/C,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,WAAW,aAAa;CAE9B,MAAM,EAAE,uBAAuB,gCAC7B,mBAAmB;CAErB,MAAM,UAAU,8BACZ,YACA,wBACE,SACA,KAAA;AAMN,QACE,oBAAC,SAAD;EAAS,OALY,UACnB,EAAE,2BAA2B,GAC7B,EAAE,kBAAkB;YAIpB,oBAAC,oBAAD;GACE,MAAK;GACL,eAAe,SAAS,EAAE,IAAI,iBAAiB,UAAU,CAAC;GACjD;aAER,UACC,oBAAC,mBAAD;IAAmB,SAAQ;IAAM,OAAO;cACtC,oBAAC,UAAD,EAAY,CAAA;IACM,CAAA,GAEpB,oBAAC,UAAD,EAAY,CAAA;GAEK,CAAA;EACb,CAAA"}
1
+ {"version":3,"file":"SettingsButton.js","names":[],"sources":["../../../../src/components/Header/SettingsButton.tsx"],"sourcesContent":["import Settings from '@mui/icons-material/Settings'\nimport { Tooltip } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useSettingMonitor } from '../../hooks/useSettingMonitor.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport {\n SettingsIconBadge,\n SettingsIconButton,\n} from './SettingsButton.style.js'\n\nexport const SettingsButton = (): JSX.Element => {\n const { t } = useTranslation()\n const navigate = useNavigate()\n\n const { isCustomRouteSettings, isRouteSettingsWithWarnings } =\n useSettingMonitor()\n\n const variant = isRouteSettingsWithWarnings\n ? 'warning'\n : isCustomRouteSettings\n ? 'info'\n : undefined\n\n const tooltipMessage = variant\n ? t('tooltip.settingsModified')\n : t('header.settings')\n\n return (\n <Tooltip title={tooltipMessage}>\n <SettingsIconButton\n size=\"medium\"\n onClick={() => navigate({ to: navigationRoutes.settings })}\n variant={variant}\n >\n {variant ? (\n <SettingsIconBadge variant=\"dot\" color={variant}>\n <Settings />\n </SettingsIconBadge>\n ) : (\n <Settings />\n )}\n </SettingsIconButton>\n </Tooltip>\n )\n}\n"],"mappings":";;;;;;;;;AAYA,MAAa,uBAAoC;CAC/C,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,WAAW,aAAa;CAE9B,MAAM,EAAE,uBAAuB,gCAC7B,mBAAmB;CAErB,MAAM,UAAU,8BACZ,YACA,wBACE,SACA,KAAA;CAMN,OACE,oBAAC,SAAD;EAAS,OALY,UACnB,EAAE,2BAA2B,GAC7B,EAAE,kBAAkB;YAIpB,oBAAC,oBAAD;GACE,MAAK;GACL,eAAe,SAAS,EAAE,IAAI,iBAAiB,UAAU,CAAC;GACjD;aAER,UACC,oBAAC,mBAAD;IAAmB,SAAQ;IAAM,OAAO;cACtC,oBAAC,UAAD,EAAY,CAAA;IACM,CAAA,GAEpB,oBAAC,UAAD,EAAY,CAAA;GAEK,CAAA;EACb,CAAA"}
@@ -1 +1 @@
1
- {"version":3,"file":"SettingsButton.style.js","names":["MuiBadge"],"sources":["../../../../src/components/Header/SettingsButton.style.tsx"],"sourcesContent":["import {\n badgeClasses,\n IconButton,\n Badge as MuiBadge,\n styled,\n} from '@mui/material'\nimport type React from 'react'\n\nexport const SettingsIconBadge: React.FC<\n React.ComponentProps<typeof MuiBadge>\n> = styled(MuiBadge)(({ theme }) => ({\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(1.25),\n [`.${badgeClasses.badge}`]: {\n width: 10,\n height: 10,\n borderRadius: '50%',\n transform: 'translate(70%, -70%)',\n },\n}))\n\ninterface SettingsIconButtonProps {\n variant?: 'info' | 'warning'\n}\n\nexport const SettingsIconButton: React.FC<\n React.ComponentProps<typeof IconButton> & SettingsIconButtonProps\n> = styled(IconButton, {\n shouldForwardProp: (props) => props !== 'variant',\n})<SettingsIconButtonProps>(({ theme, variant }) => {\n switch (variant) {\n case 'info':\n return {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 8%, transparent)`,\n '&:hover': {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,\n },\n ...theme.applyStyles('dark', {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,\n '&:hover': {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 16%, transparent)`,\n },\n }),\n }\n case 'warning':\n return {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent)`,\n '&:hover': {\n backgroundColor: `color-mix(in srgb, color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent) 80%, black)`,\n },\n ...theme.applyStyles('dark', {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent)`,\n '&:hover': {\n backgroundColor: `color-mix(in srgb, color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent) 80%, black)`,\n },\n }),\n }\n default:\n return {}\n }\n})\n"],"mappings":";;AAQA,MAAa,oBAET,OAAOA,MAAS,EAAE,EAAE,aAAa;CACnC,SAAS;CACT,YAAY;CACZ,KAAK,MAAM,QAAQ,KAAK;EACvB,IAAI,aAAa,UAAU;EAC1B,OAAO;EACP,QAAQ;EACR,cAAc;EACd,WAAW;EACZ;CACF,EAAE;AAMH,MAAa,qBAET,OAAO,YAAY,EACrB,oBAAoB,UAAU,UAAU,WACzC,CAAC,EAA2B,EAAE,OAAO,cAAc;AAClD,SAAQ,SAAR;EACE,KAAK,OACH,QAAO;GACL,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK;GACpE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,qBACrE;GACD,GAAG,MAAM,YAAY,QAAQ;IAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK;IACpE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,qBACrE;IACF,CAAC;GACH;EACH,KAAK,UACH,QAAO;GACL,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;GACvE,WAAW,EACT,iBAAiB,yCAAyC,MAAM,KAAK,QAAQ,QAAQ,KAAK,iCAC3F;GACD,GAAG,MAAM,YAAY,QAAQ;IAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;IACvE,WAAW,EACT,iBAAiB,yCAAyC,MAAM,KAAK,QAAQ,QAAQ,KAAK,iCAC3F;IACF,CAAC;GACH;EACH,QACE,QAAO,EAAE;;EAEb"}
1
+ {"version":3,"file":"SettingsButton.style.js","names":["MuiBadge"],"sources":["../../../../src/components/Header/SettingsButton.style.tsx"],"sourcesContent":["import {\n badgeClasses,\n IconButton,\n Badge as MuiBadge,\n styled,\n} from '@mui/material'\nimport type React from 'react'\n\nexport const SettingsIconBadge: React.FC<\n React.ComponentProps<typeof MuiBadge>\n> = styled(MuiBadge)(({ theme }) => ({\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(1.25),\n [`.${badgeClasses.badge}`]: {\n width: 10,\n height: 10,\n borderRadius: '50%',\n transform: 'translate(70%, -70%)',\n },\n}))\n\ninterface SettingsIconButtonProps {\n variant?: 'info' | 'warning'\n}\n\nexport const SettingsIconButton: React.FC<\n React.ComponentProps<typeof IconButton> & SettingsIconButtonProps\n> = styled(IconButton, {\n shouldForwardProp: (props) => props !== 'variant',\n})<SettingsIconButtonProps>(({ theme, variant }) => {\n switch (variant) {\n case 'info':\n return {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 8%, transparent)`,\n '&:hover': {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,\n },\n ...theme.applyStyles('dark', {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 12%, transparent)`,\n '&:hover': {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.info.main} 16%, transparent)`,\n },\n }),\n }\n case 'warning':\n return {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent)`,\n '&:hover': {\n backgroundColor: `color-mix(in srgb, color-mix(in srgb, ${theme.vars.palette.warning.main} 32%, transparent) 80%, black)`,\n },\n ...theme.applyStyles('dark', {\n backgroundColor: `color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent)`,\n '&:hover': {\n backgroundColor: `color-mix(in srgb, color-mix(in srgb, ${theme.vars.palette.warning.main} 16%, transparent) 80%, black)`,\n },\n }),\n }\n default:\n return {}\n }\n})\n"],"mappings":";;AAQA,MAAa,oBAET,OAAOA,MAAS,EAAE,EAAE,aAAa;CACnC,SAAS;CACT,YAAY;CACZ,KAAK,MAAM,QAAQ,KAAK;EACvB,IAAI,aAAa,UAAU;EAC1B,OAAO;EACP,QAAQ;EACR,cAAc;EACd,WAAW;EACZ;CACF,EAAE;AAMH,MAAa,qBAET,OAAO,YAAY,EACrB,oBAAoB,UAAU,UAAU,WACzC,CAAC,EAA2B,EAAE,OAAO,cAAc;CAClD,QAAQ,SAAR;EACE,KAAK,QACH,OAAO;GACL,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK;GACpE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,qBACrE;GACD,GAAG,MAAM,YAAY,QAAQ;IAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK;IACpE,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,KAAK,KAAK,qBACrE;IACF,CAAC;GACH;EACH,KAAK,WACH,OAAO;GACL,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;GACvE,WAAW,EACT,iBAAiB,yCAAyC,MAAM,KAAK,QAAQ,QAAQ,KAAK,iCAC3F;GACD,GAAG,MAAM,YAAY,QAAQ;IAC3B,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,QAAQ,KAAK;IACvE,WAAW,EACT,iBAAiB,yCAAyC,MAAM,KAAK,QAAQ,QAAQ,KAAK,iCAC3F;IACF,CAAC;GACH;EACH,SACE,OAAO,EAAE;;EAEb"}
@@ -1 +1 @@
1
- {"version":3,"file":"SplitNavigationTabs.js","names":[],"sources":["../../../../src/components/Header/SplitNavigationTabs.tsx"],"sourcesContent":["import type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useSplitSubvariantStore } from '../../stores/settings/useSplitSubvariantStore.js'\nimport { NavigationTab, NavigationTabs } from '../Tabs/NavigationTabs.js'\n\nexport const SplitNavigationTabs = (): JSX.Element => {\n const { t } = useTranslation()\n const [state, setState] = useSplitSubvariantStore((state) => [\n state.state,\n state.setState,\n ])\n\n const { setFieldValue } = useFieldActions()\n const handleChange = (_: React.SyntheticEvent, value: number) => {\n setFieldValue('fromAmount', '')\n setFieldValue('fromToken', '')\n setFieldValue('toToken', '')\n setState(value === 0 ? 'swap' : 'bridge')\n }\n\n return (\n <NavigationTabs\n value={state === 'swap' ? 0 : 1}\n onChange={handleChange}\n aria-label=\"tabs\"\n >\n <NavigationTab label={t('header.swap')} disableRipple />\n <NavigationTab label={t('header.bridge')} disableRipple />\n </NavigationTabs>\n )\n}\n"],"mappings":";;;;;;AAMA,MAAa,4BAAyC;CACpD,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,CAAC,OAAO,YAAY,yBAAyB,UAAU,CAC3D,MAAM,OACN,MAAM,SACP,CAAC;CAEF,MAAM,EAAE,kBAAkB,iBAAiB;CAC3C,MAAM,gBAAgB,GAAyB,UAAkB;AAC/D,gBAAc,cAAc,GAAG;AAC/B,gBAAc,aAAa,GAAG;AAC9B,gBAAc,WAAW,GAAG;AAC5B,WAAS,UAAU,IAAI,SAAS,SAAS;;AAG3C,QACE,qBAAC,gBAAD;EACE,OAAO,UAAU,SAAS,IAAI;EAC9B,UAAU;EACV,cAAW;YAHb,CAKE,oBAAC,eAAD;GAAe,OAAO,EAAE,cAAc;GAAE,eAAA;GAAgB,CAAA,EACxD,oBAAC,eAAD;GAAe,OAAO,EAAE,gBAAgB;GAAE,eAAA;GAAgB,CAAA,CAC3C"}
1
+ {"version":3,"file":"SplitNavigationTabs.js","names":[],"sources":["../../../../src/components/Header/SplitNavigationTabs.tsx"],"sourcesContent":["import type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useSplitSubvariantStore } from '../../stores/settings/useSplitSubvariantStore.js'\nimport { NavigationTab, NavigationTabs } from '../Tabs/NavigationTabs.js'\n\nexport const SplitNavigationTabs = (): JSX.Element => {\n const { t } = useTranslation()\n const [state, setState] = useSplitSubvariantStore((state) => [\n state.state,\n state.setState,\n ])\n\n const { setFieldValue } = useFieldActions()\n const handleChange = (_: React.SyntheticEvent, value: number) => {\n setFieldValue('fromAmount', '')\n setFieldValue('fromToken', '')\n setFieldValue('toToken', '')\n setState(value === 0 ? 'swap' : 'bridge')\n }\n\n return (\n <NavigationTabs\n value={state === 'swap' ? 0 : 1}\n onChange={handleChange}\n aria-label=\"tabs\"\n >\n <NavigationTab label={t('header.swap')} disableRipple />\n <NavigationTab label={t('header.bridge')} disableRipple />\n </NavigationTabs>\n )\n}\n"],"mappings":";;;;;;AAMA,MAAa,4BAAyC;CACpD,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,CAAC,OAAO,YAAY,yBAAyB,UAAU,CAC3D,MAAM,OACN,MAAM,SACP,CAAC;CAEF,MAAM,EAAE,kBAAkB,iBAAiB;CAC3C,MAAM,gBAAgB,GAAyB,UAAkB;EAC/D,cAAc,cAAc,GAAG;EAC/B,cAAc,aAAa,GAAG;EAC9B,cAAc,WAAW,GAAG;EAC5B,SAAS,UAAU,IAAI,SAAS,SAAS;;CAG3C,OACE,qBAAC,gBAAD;EACE,OAAO,UAAU,SAAS,IAAI;EAC9B,UAAU;EACV,cAAW;YAHb,CAKE,oBAAC,eAAD;GAAe,OAAO,EAAE,cAAc;GAAE,eAAA;GAAgB,CAAA,EACxD,oBAAC,eAAD;GAAe,OAAO,EAAE,gBAAgB;GAAE,eAAA;GAAgB,CAAA,CAC3C"}