@imtbl/checkout-widgets 2.22.1-alpha.0 → 2.23.1-0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/dist/browser/{AddTokensWidget-Cf4C0hZj.js → AddTokensWidget-tcHNMJP7.js} +28 -28
  2. package/dist/browser/{BridgeWidget-B19ueu1h.js → BridgeWidget-C1hLvZ5m.js} +66 -63
  3. package/dist/browser/{CommerceWidget-rf4XjDiJ.js → CommerceWidget-BTBtsjTM.js} +183 -183
  4. package/dist/browser/{FeesBreakdown-Dwqe_nxl.js → FeesBreakdown-CIuOWa2U.js} +2 -2
  5. package/dist/browser/{OnRampWidget-CC6Xrigx.js → OnRampWidget-CGf2WgVI.js} +6 -6
  6. package/dist/browser/{SaleWidget-iITczQWp.js → SaleWidget-BufxWLju.js} +69 -69
  7. package/dist/browser/{SpendingCapHero-D1uS4qh5.js → SpendingCapHero-w-h2TkZQ.js} +1 -1
  8. package/dist/browser/{SwapWidget-D0KUO-VU.js → SwapWidget-BANOn9nl.js} +26 -28
  9. package/dist/browser/{TokenImage-_Qe7kkzS.js → TokenImage-DiRHQD1a.js} +1 -1
  10. package/dist/browser/{TopUpView-D15fyfG-.js → TopUpView-Ds0YUOWC.js} +8 -8
  11. package/dist/browser/{WalletApproveHero-Cwv7L_bn.js → WalletApproveHero-Dp4iuc4e.js} +5 -5
  12. package/dist/browser/{WalletWidget-DyiWaSwm.js → WalletWidget-CNJ3wq2K.js} +16 -16
  13. package/dist/browser/{auto-track-DbZaRYzJ.js → auto-track-Czzb_8aV.js} +1 -1
  14. package/dist/browser/{index-BCj_F4N5.js → index--LhCh8bH.js} +1 -1
  15. package/dist/browser/{index-BH3M5w3K.js → index-BDE66Im8.js} +39448 -19104
  16. package/dist/browser/{index-DA2LhN2H.js → index-BV45HG4m.js} +2 -2
  17. package/dist/browser/{index-D1K4g3zX.js → index-BqfzuXYY.js} +1 -1
  18. package/dist/browser/{index-7GBD2TGk.js → index-C6GZHO2x.js} +1 -1
  19. package/dist/browser/{index-D9SO3VpU.js → index-C7IyH910.js} +1 -1
  20. package/dist/browser/{index-RJOLDd8o.js → index-DkbMrE9I.js} +1 -1
  21. package/dist/browser/{index-DIMD3G3p.js → index-aCZSkeUi.js} +1 -1
  22. package/dist/browser/index.js +1 -1
  23. package/dist/browser/{index.umd-BQX9rJ7N.js → index.umd-BdWIFOPJ.js} +1 -1
  24. package/dist/browser/{useInterval-TNyi_xTA.js → useInterval-BihI5iZ3.js} +1 -1
  25. package/dist/types/components/NotEnoughGas/NotEnoughGasStyles.d.ts +1 -1
  26. package/dist/types/context/analytics-provider/SegmentAnalyticsProvider.d.ts +7 -8
  27. package/dist/types/lib/clients/checkoutApiType.d.ts +2 -2
  28. package/dist/types/lib/constants.d.ts +4 -4
  29. package/dist/types/lib/logoUtils.d.ts +2 -2
  30. package/dist/types/lib/squid/functions/execute.d.ts +2 -2
  31. package/dist/types/lib/utils.d.ts +1 -1
  32. package/dist/types/widgets/add-tokens/utils/animation.d.ts +6 -1
  33. package/dist/types/widgets/immutable-commerce/CommerceWidgetRoot.d.ts +11 -11
  34. package/dist/types/widgets/swap/functions/FetchQuote.d.ts +5 -2
  35. package/jest.config.cjs +11 -0
  36. package/package.json +29 -33
  37. package/src/context/analytics-provider/SegmentAnalyticsProvider.ts +12 -8
  38. package/src/widgets/bridge/components/BridgeReviewSummary.tsx +9 -4
  39. package/tsconfig.json +19 -8
  40. package/.eslintrc.cjs +0 -75
  41. package/jest.config.ts +0 -27
@@ -1,6 +1,6 @@
1
- import { b as reactExports, ac as hFlex, ad as _defineProperty, ae as _objectWithoutProperties, af as useForwardLocalDomRef, ag as _slicedToArray, ah as useResizeObserver, Q as useTheme, ai as usePrevious, aj as useGetMotionProfile, ak as useBrowserEffect, al as merge, am as getHeadingTextStyles, an as getMotionProfileSx, ao as useConvertSxToEmotionStyles, ap as DUMMY_WIDTH_PUSHER_TEXT, x as jsxs, w as jsx, B as Box, aq as useGetSubcomponentChild, ar as flattenChildren, as as vFlex, at as centerFlexChildren, au as SmartClone, av as FormControlLabel, aw as FormControlValidation, ax as FormControlCaption, r as ro, R as Ro, ay as getDefaultExportFromCjs, az as commonjsGlobal, k as useTranslation, aA as Drawer, aB as Divider, H as Heading, y as Button, aC as useProvidersContext, F as useAnalytics, aD as WalletDrawer, aE as UnableToConnectDrawer, aF as Fragment, aG as Gt, U as UserJourney, aH as removeSpace, aI as getProviderSlugFromRdns, aJ as D, aK as isPassportProvider, aL as connectEIP6963Provider, aM as identifyUser, aN as ConnectEIP6963ProviderError, aO as ProvidersContextActions, aP as MenuItem, aQ as J, aR as SQUID_NATIVE_TOKEN, aS as commonjsRequire, X as getRemoteImage, aT as OnboardingPagination, aU as ViewContext, aV as useHandover, G as EventTargetContext, aW as HandoverTarget, V as ViewActions, t as getRemoteRive, aX as APPROVE_TXN_ANIMATION, aY as RiveStateMachineInput, aZ as HandoverContent, a_ as keyframes, j as ie, a$ as isNativeToken, b0 as getTokenImageByAddress, b1 as FramedImage, b2 as FramedIcon, b3 as ButtCon, b4 as TextInput, b5 as VerticalMenu, K as getDefaultTokenImage, b6 as TOKEN_PRIORITY_ORDER, D as Body, b7 as EllipsizedText, b8 as Tooltip, b9 as Sticker, ba as getDurationFormatted, bb as getTotalRouteFees, bc as getRouteAndTokenBalances, S as Stack, bd as Icon, be as Badge, bf as getFormattedAmounts, bg as getRemoteVideo, bh as FramedVideo, bi as listVariants, bj as motion, bk as listItemVariants, bl as Banner, bm as useRoutes, bn as useInjectedProviders, bo as hn, bp as RouteError, z as SimpleLayout, bq as dist, O as orchestrationEvents, c as parseUnits, a5 as SharedViews, br as SquidFooter, bs as TOOLKIT_SQUID_URL, bt as merge$1, bu as SvgIcon, bv as WalletWarningHero, bw as getFormattedNumber, bx as FIXED_HANDOVER_DURATION, by as EXECUTE_TXN_ANIMATION, L as Link, bz as Trans, bA as useExecute, bB as getRouteChains, bC as t, bD as convertToNetworkChangeableProvider, bE as verifyAndSwitchChain, bF as PriceDisplay, a0 as LoadingView, bG as getFromAmountData, bH as viewReducer, bI as initialViewState, bJ as useSquid, bK as useTokens, bL as v4, bM as K, bN as isValidAddress, P as amountInputValidation, bO as fetchChains, bP as fetchBalances, W as CloudImage, a6 as ErrorView, bQ as ServiceUnavailableErrorView } from './index-BH3M5w3K.js';
2
- import { T as TokenImage } from './TokenImage-_Qe7kkzS.js';
3
- import { f as fetchRiskAssessmentV2, r as resultHasSanctionedWallets, F as FeesBreakdown } from './FeesBreakdown-Dwqe_nxl.js';
1
+ import { r as reactExports, ac as hFlex, ad as _defineProperty, ae as _objectWithoutProperties, af as useForwardLocalDomRef, ag as _slicedToArray, ah as useResizeObserver, Q as useTheme, ai as usePrevious, aj as useGetMotionProfile, ak as useBrowserEffect, al as merge, am as getHeadingTextStyles, an as getMotionProfileSx, ao as useConvertSxToEmotionStyles, ap as DUMMY_WIDTH_PUSHER_TEXT, v as jsxs, q as jsx, x as Box, aq as useGetSubcomponentChild, ar as flattenChildren, as as vFlex, at as centerFlexChildren, au as SmartClone, av as FormControlLabel, aw as FormControlValidation, ax as FormControlCaption, w, d as de, ay as getDefaultExportFromCjs, az as commonjsGlobal, h as useTranslation, aA as Drawer, aB as Divider, H as Heading, y as Button, aC as useProvidersContext, F as useAnalytics, aD as WalletDrawer, aE as UnableToConnectDrawer, aF as Fragment, aG as Ue, U as UserJourney, aH as removeSpace, aI as getProviderSlugFromRdns, aJ as L, aK as isPassportProvider, aL as connectEIP6963Provider, aM as identifyUser, aN as ConnectEIP6963ProviderError, aO as ProvidersContextActions, aP as MenuItem, aQ as Ce, aR as SQUID_NATIVE_TOKEN, aS as commonjsRequire, W as getRemoteImage, aT as OnboardingPagination, aU as ViewContext, aV as useHandover, G as EventTargetContext, aW as HandoverTarget, V as ViewActions, k as getRemoteRive, aX as APPROVE_TXN_ANIMATION, aY as RiveStateMachineInput, aZ as HandoverContent, a_ as keyframes, B as Be, a$ as isNativeToken, b0 as getTokenImageByAddress, b1 as FramedImage, b2 as FramedIcon, b3 as ButtCon, b4 as TextInput, b5 as VerticalMenu, K as getDefaultTokenImage, b6 as TOKEN_PRIORITY_ORDER, A as Body, b7 as EllipsizedText, b8 as Tooltip, b9 as Sticker, ba as getDurationFormatted, bb as getTotalRouteFees, bc as getRouteAndTokenBalances, S as Stack, bd as Icon, be as Badge, bf as getFormattedAmounts, bg as getRemoteVideo, bh as FramedVideo, bi as listVariants, bj as motion, bk as listItemVariants, bl as Banner, bm as useRoutes, bn as useInjectedProviders, bo as X, bp as RouteError, z as SimpleLayout, bq as dist, O as orchestrationEvents, b as parseUnits, a5 as SharedViews, br as SquidFooter, bs as TOOLKIT_SQUID_URL, bt as merge$1, bu as SvgIcon, bv as WalletWarningHero, bw as getFormattedNumber, bx as FIXED_HANDOVER_DURATION, by as EXECUTE_TXN_ANIMATION, L as Link, bz as Trans, bA as useExecute, bB as getRouteChains, bC as t, bD as convertToNetworkChangeableProvider, bE as verifyAndSwitchChain, bF as PriceDisplay, a0 as LoadingView, bG as getFromAmountData, bH as viewReducer, bI as initialViewState, bJ as useSquid, bK as useTokens, bL as v4, bM as r, bN as isValidAddress, P as amountInputValidation, bO as fetchChains, bP as fetchBalances, R as CloudImage, a6 as ErrorView, bQ as ServiceUnavailableErrorView } from './index-BDE66Im8.js';
2
+ import { T as TokenImage } from './TokenImage-DiRHQD1a.js';
3
+ import { f as fetchRiskAssessmentV2, r as resultHasSanctionedWallets, F as FeesBreakdown } from './FeesBreakdown-CIuOWa2U.js';
4
4
 
5
5
  /**
6
6
  * The function `useInterval` sets up an interval that repeatedly calls a given callback function with
@@ -292,9 +292,9 @@ HeroFormControl.inputs = SUPPORTED_INPUT_COMPONENTS_MAP;
292
292
 
293
293
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
294
294
  function sendAddTokensCloseEvent(eventTarget) {
295
- const closeWidgetEvent = new CustomEvent(ro.IMTBL_ADD_TOKENS_WIDGET_EVENT, {
295
+ const closeWidgetEvent = new CustomEvent(w.IMTBL_ADD_TOKENS_WIDGET_EVENT, {
296
296
  detail: {
297
- type: Ro.CLOSE_WIDGET,
297
+ type: de.CLOSE_WIDGET,
298
298
  data: {},
299
299
  },
300
300
  });
@@ -305,9 +305,9 @@ function sendAddTokensCloseEvent(eventTarget) {
305
305
  eventTarget.dispatchEvent(closeWidgetEvent);
306
306
  }
307
307
  function sendConnectProviderSuccessEvent(eventTarget, providerType, provider, providerInfo) {
308
- const successEvent = new CustomEvent(ro.IMTBL_ADD_TOKENS_WIDGET_EVENT, {
308
+ const successEvent = new CustomEvent(w.IMTBL_ADD_TOKENS_WIDGET_EVENT, {
309
309
  detail: {
310
- type: Ro.CONNECT_SUCCESS,
310
+ type: de.CONNECT_SUCCESS,
311
311
  data: {
312
312
  provider,
313
313
  providerType,
@@ -321,9 +321,9 @@ function sendConnectProviderSuccessEvent(eventTarget, providerType, provider, pr
321
321
  eventTarget.dispatchEvent(successEvent);
322
322
  }
323
323
  const sendAddTokensSuccessEvent = (eventTarget, transactionHash) => {
324
- const successEvent = new CustomEvent(ro.IMTBL_ADD_TOKENS_WIDGET_EVENT, {
324
+ const successEvent = new CustomEvent(w.IMTBL_ADD_TOKENS_WIDGET_EVENT, {
325
325
  detail: {
326
- type: Ro.SUCCESS,
326
+ type: de.SUCCESS,
327
327
  data: {
328
328
  transactionHash,
329
329
  },
@@ -335,9 +335,9 @@ const sendAddTokensSuccessEvent = (eventTarget, transactionHash) => {
335
335
  eventTarget.dispatchEvent(successEvent);
336
336
  };
337
337
  const sendAddTokensFailedEvent = (eventTarget, reason) => {
338
- const failedEvent = new CustomEvent(ro.IMTBL_ADD_TOKENS_WIDGET_EVENT, {
338
+ const failedEvent = new CustomEvent(w.IMTBL_ADD_TOKENS_WIDGET_EVENT, {
339
339
  detail: {
340
- type: Ro.FAILURE,
340
+ type: de.FAILURE,
341
341
  data: {
342
342
  reason,
343
343
  timestamp: new Date().getTime(),
@@ -929,9 +929,9 @@ function ConnectWalletDrawer({ heading, visible, onClose, onConnect, onError, pr
929
929
  walletRdns: info.rdns,
930
930
  },
931
931
  });
932
- if (info.rdns === Gt.PASSPORT) {
932
+ if (info.rdns === Ue.PASSPORT) {
933
933
  const { isConnected } = await checkout.checkIsWalletConnected({
934
- provider: new D(providerDetail.provider),
934
+ provider: new L(providerDetail.provider),
935
935
  });
936
936
  if (isConnected) {
937
937
  if ((providerType === 'from' && !lockedToProvider)
@@ -975,7 +975,7 @@ function ConnectWalletDrawer({ heading, visible, onClose, onConnect, onError, pr
975
975
  // Keep prev wallet change event
976
976
  prevWalletChangeEvent.current = event;
977
977
  const { info } = event.providerDetail;
978
- if (providerType === 'to' && info.rdns !== Gt.PASSPORT) {
978
+ if (providerType === 'to' && info.rdns !== Ue.PASSPORT) {
979
979
  setShowEOAWarningDrawer(true);
980
980
  return;
981
981
  }
@@ -1046,7 +1046,7 @@ function convertToUsd(tokens, amount, token) {
1046
1046
  }
1047
1047
  const address = token.address === 'native' ? SQUID_NATIVE_TOKEN : token.address;
1048
1048
  const toToken = tokens.find((value) => value.address.toLowerCase() === address.toLowerCase()
1049
- && value.chainId === J.IMTBL_ZKEVM_MAINNET.toString());
1049
+ && value.chainId === Ce.IMTBL_ZKEVM_MAINNET.toString());
1050
1050
  if (!toToken) {
1051
1051
  return 0;
1052
1052
  }
@@ -4154,7 +4154,7 @@ function TokenDrawerMenu({ checkout, config, toTokenAddress, addTokensState, add
4154
4154
  (async () => {
4155
4155
  try {
4156
4156
  const tokenResponse = await checkout.getTokenAllowList({
4157
- type: ie.SWAP,
4157
+ type: Be.SWAP,
4158
4158
  chainId: checkout.config.l2ChainId,
4159
4159
  });
4160
4160
  if (tokenResponse?.tokens.length > 0) {
@@ -4553,7 +4553,7 @@ function AddTokens({ checkout, toAmount, config, toTokenAddress, showOnrampOptio
4553
4553
  const walletOptions = reactExports.useMemo(() => providers
4554
4554
  // TODO: Check if must filter passport on L1
4555
4555
  .map((detail) => {
4556
- if (detail.info.rdns === Gt.PASSPORT) {
4556
+ if (detail.info.rdns === Ue.PASSPORT) {
4557
4557
  return {
4558
4558
  ...detail,
4559
4559
  info: {
@@ -4574,7 +4574,7 @@ function AddTokens({ checkout, toAmount, config, toTokenAddress, showOnrampOptio
4574
4574
  await identifyUser(identify, toProvider, { anonymousId });
4575
4575
  })();
4576
4576
  }, [toProvider, lockedToProvider]);
4577
- const toChain = reactExports.useMemo(() => chains?.find((chain) => chain.id === J.IMTBL_ZKEVM_MAINNET.toString()), [chains]);
4577
+ const toChain = reactExports.useMemo(() => chains?.find((chain) => chain.id === Ce.IMTBL_ZKEVM_MAINNET.toString()), [chains]);
4578
4578
  reactExports.useEffect(() => {
4579
4579
  if (!id || isSwapAvailable === undefined) {
4580
4580
  return;
@@ -4589,7 +4589,7 @@ function AddTokens({ checkout, toAmount, config, toTokenAddress, showOnrampOptio
4589
4589
  geoBlocked: !isSwapAvailable,
4590
4590
  },
4591
4591
  }).then((ctx) => {
4592
- hn('commerce', `addTokensLoaded_${ctx.event.messageId}`);
4592
+ X('commerce', `addTokensLoaded_${ctx.event.messageId}`);
4593
4593
  });
4594
4594
  }, [id, isSwapAvailable]);
4595
4595
  reactExports.useEffect(() => {
@@ -4615,7 +4615,7 @@ function AddTokens({ checkout, toAmount, config, toTokenAddress, showOnrampOptio
4615
4615
  && isValidAmount) {
4616
4616
  setFetchingRoutes(true);
4617
4617
  try {
4618
- const availableRoutes = await fetchRoutes(squid, tokens, balances, J.IMTBL_ZKEVM_MAINNET.toString(), selectedToken.address === 'native'
4618
+ const availableRoutes = await fetchRoutes(squid, tokens, balances, Ce.IMTBL_ZKEVM_MAINNET.toString(), selectedToken.address === 'native'
4619
4619
  ? SQUID_NATIVE_TOKEN
4620
4620
  : selectedToken.address, selectedAmount, 5, 1000, isSwapAvailable);
4621
4621
  addTokensDispatch({
@@ -4669,7 +4669,7 @@ function AddTokens({ checkout, toAmount, config, toTokenAddress, showOnrampOptio
4669
4669
  const fetchOnRampTokens = async () => {
4670
4670
  try {
4671
4671
  const tokenResponse = await checkout.getTokenAllowList({
4672
- type: ie.ONRAMP,
4672
+ type: Be.ONRAMP,
4673
4673
  chainId: checkout.config.l2ChainId,
4674
4674
  });
4675
4675
  if (tokenResponse?.tokens.length > 0) {
@@ -4700,7 +4700,7 @@ function AddTokens({ checkout, toAmount, config, toTokenAddress, showOnrampOptio
4700
4700
  showBackButton: true,
4701
4701
  provider: toProvider,
4702
4702
  };
4703
- orchestrationEvents.sendRequestOnrampEvent(eventTarget, ro.IMTBL_ADD_TOKENS_WIDGET_EVENT, data);
4703
+ orchestrationEvents.sendRequestOnrampEvent(eventTarget, w.IMTBL_ADD_TOKENS_WIDGET_EVENT, data);
4704
4704
  };
4705
4705
  const handleCardClick = () => {
4706
4706
  setPayWithCardClicked(true);
@@ -4766,7 +4766,7 @@ function AddTokens({ checkout, toAmount, config, toTokenAddress, showOnrampOptio
4766
4766
  type: AddTokensWidgetViews.REVIEW,
4767
4767
  data: {
4768
4768
  balance: selectedRouteData.amountData.balance,
4769
- toChainId: J.IMTBL_ZKEVM_MAINNET.toString(),
4769
+ toChainId: Ce.IMTBL_ZKEVM_MAINNET.toString(),
4770
4770
  toTokenAddress: selectedToken.address,
4771
4771
  toAmount: selectedAmount,
4772
4772
  additionalBuffer: selectedRouteData.amountData.additionalBuffer,
@@ -5294,9 +5294,9 @@ function Review({ data, showBackButton = false, onBackButtonClick, onCloseButton
5294
5294
  action: 'Succeeded',
5295
5295
  extras: {
5296
5296
  contextId: id,
5297
- ...(route.route.params.fromChain !== J.IMTBL_ZKEVM_MAINNET.toString()
5297
+ ...(route.route.params.fromChain !== Ce.IMTBL_ZKEVM_MAINNET.toString()
5298
5298
  && { txHash: executeTxnReceipt.hash }),
5299
- ...(route.route.params.fromChain === J.IMTBL_ZKEVM_MAINNET.toString()
5299
+ ...(route.route.params.fromChain === Ce.IMTBL_ZKEVM_MAINNET.toString()
5300
5300
  && { immutableZkEVMTxHash: executeTxnReceipt.hash }),
5301
5301
  toTokenAddress: route.route.params.toToken,
5302
5302
  toTokenChainId: route.route.params.toChain,
@@ -5310,7 +5310,7 @@ function Review({ data, showBackButton = false, onBackButtonClick, onCloseButton
5310
5310
  toTokenSymbol: amountData?.toToken.symbol,
5311
5311
  },
5312
5312
  }).then((ctx) => {
5313
- hn('commerce', `addTokensFundsAdded_${ctx.event.messageId}`);
5313
+ X('commerce', `addTokensFundsAdded_${ctx.event.messageId}`);
5314
5314
  });
5315
5315
  sendAddTokensSuccessEvent(eventTarget, executeTxnReceipt.hash);
5316
5316
  if (toChain === fromChain) {
@@ -5461,7 +5461,7 @@ function AddTokensWidget({ showOnrampOption = true, showSwapOption = true, showB
5461
5461
  return undefined;
5462
5462
  }, [experiments, toTokenAddressParameter]);
5463
5463
  reactExports.useEffect(() => {
5464
- if (config.environment !== K.PRODUCTION) {
5464
+ if (config.environment !== r.PRODUCTION) {
5465
5465
  showErrorHandover(AddTokensErrorTypes.ENVIRONMENT_ERROR, { contextId: id });
5466
5466
  }
5467
5467
  }, [config, id]);
@@ -5549,7 +5549,7 @@ function AddTokensWidget({ showOnrampOption = true, showSwapOption = true, showB
5549
5549
  objectFit: 'cover',
5550
5550
  objectPosition: 'center',
5551
5551
  } }), viewState.view.type === AddTokensWidgetViews.ADD_TOKENS && (jsx(AddTokens, { config: config, checkout: checkout, toTokenAddress: toTokenAddress, toAmount: toAmount, showBackButton: showBackButton, showOnrampOption: showOnrampOption, showSwapOption: showSwapOption, showBridgeOption: showBridgeOption, onCloseButtonClick: () => sendAddTokensCloseEvent(eventTarget), onBackButtonClick: () => {
5552
- orchestrationEvents.sendRequestGoBackEvent(eventTarget, ro.IMTBL_ADD_TOKENS_WIDGET_EVENT, {});
5552
+ orchestrationEvents.sendRequestGoBackEvent(eventTarget, w.IMTBL_ADD_TOKENS_WIDGET_EVENT, {});
5553
5553
  } })), viewState.view.type === AddTokensWidgetViews.REVIEW && (jsx(Review, { data: viewState.view.data, onCloseButtonClick: () => sendAddTokensCloseEvent(eventTarget), onBackButtonClick: () => {
5554
5554
  viewDispatch({
5555
5555
  payload: {