@rango-dev/widget-embedded 0.42.4-next.0 → 0.43.0

package/src/hooks/useStatefulConnect/useStatefulConnect.ts

@@ -1,5 +1,6 @@
 import type { HandleConnectOptions, Result } from './useStatefulConnect.types';
 import type { WalletInfoWithExtra } from '../../types';
+import type { ExtendedModalWalletInfo } from '../../utils/wallets';
 import type { Namespace } from '@rango-dev/wallets-core/namespaces/common';
 import type { NamespaceData, WalletType } from '@rango-dev/wallets-shared';
 
@@ -7,11 +8,6 @@ import { WalletState } from '@rango-dev/ui';
 import { useWallets } from '@rango-dev/wallets-react';
 import { useReducer } from 'react';
 
-import {
-  checkIsWalletPartiallyConnected,
-  type ExtendedModalWalletInfo,
-} from '../../utils/wallets';
-
 import {
   isStateOnDerivationPathStep,
   isStateOnNamespace,
@@ -68,6 +64,7 @@ export function useStatefulConnect(): UseStatefulConnect {
         network: undefined,
       }));
       await connect(type, legacyNamespacesInput);
+
       return { status: ResultStatus.Connected };
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (e: any) {
@@ -154,25 +151,6 @@ export function useStatefulConnect(): UseStatefulConnect {
       }
     }
 
-    if (!!wallet.isHub) {
-      const walletState = state(wallet.type);
-      const namespacesState = walletState.namespaces;
-      const isPartiallyConnected = checkIsWalletPartiallyConnected(
-        wallet,
-        namespacesState
-      );
-      if (isPartiallyConnected) {
-        dispatch({
-          type: 'detached',
-          payload: {
-            targetWallet: wallet,
-            selectedNamespaces: null,
-          },
-        });
-        return { status: ResultStatus.Detached };
-      }
-    }
-
     if (options?.disconnectIfConnected) {
       await handleDisconnect(wallet.type);
       return { status: ResultStatus.Disconnected };
@@ -225,19 +203,12 @@ export function useStatefulConnect(): UseStatefulConnect {
       );
     }
 
+    const type = connectState.namespace.targetWallet.type;
     const namespaces = selectedNamespaces.map((namespace) => ({
       namespace,
     }));
 
-    dispatch({
-      type: 'detached',
-      payload: {
-        targetWallet: wallet,
-        selectedNamespaces:
-          namespaces?.map((namespace) => namespace.namespace) || null,
-      },
-    });
-    return { status: ResultStatus.Detached };
+    return await runConnect(type, namespaces);
   };
 
   const handleDerivationPath = async (

package/src/hooks/useStatefulConnect/useStatefulConnect.types.ts

@@ -12,11 +12,6 @@ export interface NeedsNamespacesState {
   defaultSelectedChains?: string[];
 }
 
-export interface DetachedPayload {
-  targetWallet: ExtendedModalWalletInfo;
-  selectedNamespaces: Namespace[] | null;
-}
-
 export interface NeedsDerivationPathState {
   providerType: string;
   providerImage: string;
@@ -30,7 +25,6 @@ export enum ResultStatus {
   Disconnected = 'disconnected',
   DisconnectedUnhandled = 'disconnected-unhandled',
   Noop = 'noop',
-  Detached = 'Detached',
 }
 
 export type Result = { status: ResultStatus };
@@ -47,11 +41,6 @@ interface UpdateDerivationPathAction {
   payload: NeedsDerivationPathState;
 }
 
-interface UpdateDetachedAction {
-  type: 'detached';
-  payload: DetachedPayload;
-}
-
 interface ResetAction {
   type: 'reset';
 }
@@ -64,5 +53,4 @@ export type Actions =
   | ResetAction
   | ResetDerivationAction
   | UpdateDerivationPathAction
-  | UpdateNamespaceAction
-  | UpdateDetachedAction;
+  | UpdateNamespaceAction;

package/src/hooks/useSwapInput.ts

@@ -205,7 +205,7 @@ export function useSwapInput({
       }
       return;
     }
-    if (!isPositiveNumber(inputAmount) && inputUsdValue?.eq(0)) {
+    if (!isPositiveNumber(inputAmount) || inputUsdValue?.eq(0)) {
       resetState(false);
       cancelFetch();
       return;

package/src/hooks/useSyncUrlAndStore/useSyncUrlAndStore.ts

@@ -83,7 +83,6 @@ export function useSyncUrlAndStore() {
   useEffect(() => {
     const { autoConnect, clientUrl, utmQueryParams, blockchain } =
       getUrlSearchParams();
-
     if (isInRouterContext && fetchMetaStatus === 'success') {
       updateUrlSearchParams({
         [SearchParams.FROM_BLOCKCHAIN]: fromBlockchain?.name,
@@ -108,7 +107,6 @@ export function useSyncUrlAndStore() {
     toBlockchain,
     toToken,
     campaignMode,
-    fetchMetaStatus,
   ]);
 
   useEffect(() => {

package/src/hooks/useWalletList.ts

@@ -1,4 +1,4 @@
-import type { ExtendedModalWalletInfo } from '../utils/wallets';
+import type { WalletInfoWithExtra } from '../types';
 import type { WalletInfo } from '@rango-dev/ui';
 import type { BlockchainMeta } from 'rango-sdk';
 
@@ -27,7 +27,7 @@ interface Params {
 }
 
 interface API {
-  list: ExtendedModalWalletInfo[];
+  list: WalletInfoWithExtra[];
   terminateConnectingWallets: () => void;
 }
 
@@ -64,7 +64,7 @@ export function useWalletList(params?: Params): API {
       )
     : wallets;
 
-  const sortedWallets = sortWalletsBasedOnConnectionState(wallets, state);
+  const sortedWallets = sortWalletsBasedOnConnectionState(wallets);
 
   const isExperimentalChainNotAdded = (walletType: string) =>
     !connectedWallets.find(

package/src/index.ts

@@ -59,14 +59,9 @@ import { PendingSwapNetworkStatus } from 'rango-types';
 
 import {
   isOnDerivationPath,
-  isOnDetached,
   isOnNamespace,
 } from './components/StatefulConnectModal';
-import {
-  DerivationPath,
-  Detached,
-  Namespaces,
-} from './components/WalletStatefulConnect';
+import { DerivationPath, Namespaces } from './components/WalletStatefulConnect';
 import { WIDGET_UI_ID as UI_ID } from './constants';
 import { SUPPORTED_FONTS } from './constants/fonts';
 import { WidgetWallets } from './containers/Wallets';
@@ -89,10 +84,8 @@ import { customizedThemeTokens } from './utils/ui';
 export const StatefulConnect = {
   DerivationPath,
   Namespaces,
-  Detached,
   isOnDerivationPath,
   isOnNamespace,
-  isOnDetached,
 };
 
 export type {

package/src/pages/ConfirmSwapPage.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
 import type {
   ConfirmSwap,
   ConfirmSwapFetchResult,
@@ -28,7 +29,6 @@ import { useConfirmSwap } from '../hooks/useConfirmSwap';
 import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 import { useUiStore } from '../store/ui';
-import { QuoteErrorType, QuoteWarningType } from '../types';
 import { isQuoteWarningConfirmationRequired } from '../utils/quote';
 import { joinList } from '../utils/ui';
 
@@ -121,7 +121,6 @@ export function ConfirmSwapPage() {
           setInputAmount('');
         }, 0);
       } catch (e) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         setDbErrorMessage('Error: ' + (e as any)?.message);
       }
     }
@@ -210,10 +209,6 @@ export function ConfirmSwapPage() {
         error={quoteError}
         couldChangeSettings={false}
         refetchQuote={onRefresh}
-        skipAlerts={
-          quoteError?.type === QuoteErrorType.INSUFFICIENT_SLIPPAGE ||
-          quoteWarning?.type === QuoteWarningType.INSUFFICIENT_SLIPPAGE
-        }
         showWarningModal={showQuoteWarningModal}
         confirmationDisabled={!isActiveTab}
         onOpenWarningModal={() => setShowQuoteWarningModal(true)}

package/src/pages/Home.tsx

@@ -10,8 +10,6 @@ import { HeaderButtons } from '../components/HeaderButtons';
 import { Layout, PageContainer } from '../components/Layout';
 import { QuoteWarningsAndErrors } from '../components/QuoteWarningsAndErrors';
 import { SameTokensWarning } from '../components/SameTokensWarning';
-import { SlippageWarningsAndErrors } from '../components/SlippageWarningsAndErrors/SlippageWarningsAndErrors';
-import { SwapMetrics } from '../components/SwapMetrics';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { ExpandedQuotes } from '../containers/ExpandedQuotes';
 import { Inputs } from '../containers/Inputs';
@@ -24,7 +22,6 @@ import { useUiStore } from '../store/ui';
 import { UiEventTypes } from '../types';
 import { isVariantExpandable } from '../utils/configs';
 import { emitPreventableEvent } from '../utils/events';
-import { getSlippageValidation } from '../utils/settings';
 import { getSwapButtonState, isTokensIdentical } from '../utils/swap';
 
 const MainContainer = styled('div', {
@@ -53,7 +50,6 @@ export function Home() {
     setQuoteWarningsConfirmed,
     updateQuotePartialState,
   } = useQuoteStore();
-
   const [isVisibleExpanded, setIsVisibleExpanded] = useState<boolean>(false);
   const { isLargeScreen, isExtraLargeScreen } = useScreenDetect();
 
@@ -62,17 +58,10 @@ export function Home() {
     config,
     fetchStatus: fetchMetaStatus,
     connectedWallets,
-    customSlippage,
-    slippage,
-    setSlippage,
-    setCustomSlippage,
   } = useAppStore();
 
   const { isActiveTab } = useUiStore();
   const [showQuoteWarningModal, setShowQuoteWarningModal] = useState(false);
-  const currentSlippage = customSlippage !== null ? customSlippage : slippage;
-
-  const slippageValidation = getSlippageValidation(currentSlippage);
 
   const needsToWarnEthOnPath = false;
 
@@ -102,16 +91,19 @@ export function Home() {
 
   const fetchingQuote = hasInputs && fetchMetaStatus === 'success' && loading;
 
-  const currentQuoteWarning =
-    slippageValidation?.quoteValidation || quoteWarning;
-
   const hasValidQuotes =
     !isExpandable || (isExpandable && quotes?.results.length);
-  const hasWarningOrError = currentQuoteWarning || quoteError;
+  const hasWarningOrError = quoteWarning || quoteError;
   const showMessages = hasValidQuotes && hasWarningOrError;
 
-  const showSwapMetrics = !!fromToken && !!toToken;
-  const showSlippageAlerts = showSwapMetrics && !!slippageValidation;
+  useEffect(() => {
+    resetQuoteWallets();
+    updateQuotePartialState('refetchQuote', true);
+  }, []);
+
+  useEffect(() => {
+    setIsVisibleExpanded(hasInputs);
+  }, [hasInputs]);
 
   const onClickRefresh =
     (!!selectedQuote || quoteError) && !showQuoteWarningModal
@@ -135,22 +127,6 @@ export function Home() {
     }
   };
 
-  const onChangeSlippage = (slippage: number | null) => {
-    if (slippage) {
-      setSlippage(slippage);
-      setCustomSlippage(null);
-    }
-  };
-
-  useEffect(() => {
-    resetQuoteWallets();
-    updateQuotePartialState('refetchQuote', true);
-  }, []);
-
-  useEffect(() => {
-    setIsVisibleExpanded(hasInputs);
-  }, [hasInputs]);
-
   return (
     <MainContainer>
       <Layout
@@ -218,7 +194,7 @@ export function Home() {
               loading={fetchingQuote}
               error={quoteError}
               tagHidden={false}
-              warning={currentQuoteWarning}
+              warning={quoteWarning}
               type="basic"
               onClickAllRoutes={
                 !!quotes && quotes.results.length > 1
@@ -230,33 +206,19 @@ export function Home() {
               }
             />
           ) : null}
-          {showSwapMetrics && (
-            <>
-              <Divider size={8} />
-              <SwapMetrics
-                quoteError={quoteError}
-                quoteWarning={currentQuoteWarning}
-                fromToken={fromToken}
-                toToken={toToken}
-                quote={selectedQuote}
-                loading={fetchingQuote}
-              />
-            </>
-          )}
 
           {showMessages ? (
             <>
+              <Divider size="10" />
               <QuoteWarningsAndErrors
-                warning={currentQuoteWarning}
+                warning={quoteWarning}
                 error={quoteError}
-                skipAlerts={!!slippageValidation}
                 couldChangeSettings={true}
                 refetchQuote={fetchQuote}
                 showWarningModal={showQuoteWarningModal}
                 confirmationDisabled={!isActiveTab}
                 onOpenWarningModal={() => setShowQuoteWarningModal(true)}
                 onCloseWarningModal={() => setShowQuoteWarningModal(false)}
-                onChangeSlippage={onChangeSlippage}
                 onConfirmWarningModal={() => {
                   setShowQuoteWarningModal(false);
                   setQuoteWarningsConfirmed(true);
@@ -268,17 +230,6 @@ export function Home() {
               />
             </>
           ) : null}
-
-          {showSlippageAlerts && (
-            <>
-              <Divider size="10" />
-              <SlippageWarningsAndErrors
-                onChangeSettings={() =>
-                  onHandleNavigation(navigationRoutes.settings)
-                }
-              />
-            </>
-          )}
           <SameTokensWarning />
         </PageContainer>
       </Layout>

package/src/pages/LiquiditySourcePage.tsx

@@ -22,7 +22,6 @@ import {
 } from '../components/SettingsContainer';
 import { useAppStore } from '../store/AppStore';
 import { containsText } from '../utils/numbers';
-import { replaceSpacesWithDash } from '../utils/sanitizers';
 import { getUniqueSwappersGroups } from '../utils/settings';
 
 interface PropTypes {
@@ -71,10 +70,9 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
   const list = liquiditySources.map((sourceItem) => {
     const { selected, groupTitle, logo, id, ...restSourceItem } = sourceItem;
     return {
-      id: `widget-setting-liquidity-source-${replaceSpacesWithDash(
-        id.toLowerCase()
-      )}-item-btn`,
-
+      id: `widget-setting-liquidity-source-${id
+        .toLowerCase()
+        .replace(/\s+/g, '-')}-item-btn`,
       start: <Image src={logo} size={22} type="circular" />,
       onClick: () => {
         if (!campaignMode) {

package/src/pages/WalletsPage.tsx

@@ -8,9 +8,7 @@ import {
   styled,
   Typography,
   Wallet,
-  WalletState,
 } from '@rango-dev/ui';
-import { useWallets } from '@rango-dev/wallets-react';
 import React, { useState } from 'react';
 
 import { Layout, PageContainer } from '../components/Layout';
@@ -20,7 +18,6 @@ import { useAppStore } from '../store/AppStore';
 import { useUiStore } from '../store/ui';
 import { getContainer, isSingleWalletActive } from '../utils/common';
 import {
-  checkIsWalletPartiallyConnected,
   filterBlockchainsByWalletTypes,
   filterWalletsByCategory,
 } from '../utils/wallets';
@@ -29,8 +26,7 @@ const ListContainer = styled('div', {
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  columnGap: '$5',
-  rowGap: '$10',
+  gap: '$10',
   flexWrap: 'wrap',
   paddingTop: '$5',
 });
@@ -44,7 +40,6 @@ export function WalletsPage() {
   const [blockchainCategory, setBlockchainCategory] = useState<string>('ALL');
   const blockchains = useAppStore().blockchains();
   const { config } = useAppStore();
-  const { state } = useWallets();
 
   const [selectedWalletToConnect, setSelectedWalletToConnect] =
     useState<WalletInfoWithExtra>();
@@ -88,22 +83,11 @@ export function WalletsPage() {
         </Typography>
         <ListContainer>
           {filteredWallets.map((wallet, index) => {
-            const walletState = state(wallet.type);
-            const namespacesState = walletState.namespaces;
             const key = `wallet-${index}-${wallet.type}`;
-            const isWalletPartiallyConnected = checkIsWalletPartiallyConnected(
-              wallet,
-              namespacesState
-            );
             return (
               <Wallet
                 key={key}
                 {...wallet}
-                state={
-                  isWalletPartiallyConnected
-                    ? WalletState.PARTIALLY_CONNECTED
-                    : wallet.state
-                }
                 container={getContainer()}
                 onClick={() => handleWalletItemClick(wallet)}
                 isLoading={fetchMetaStatus === 'loading'}

package/src/store/app.ts

@@ -46,7 +46,6 @@ export function createAppStore(initialData?: WidgetConfig) {
             infiniteApprove: state.infiniteApprove,
             preferredBlockchains: state.preferredBlockchains,
             disabledLiquiditySources: state.disabledLiquiditySources,
-            quoteTokensRate: state.quoteTokensRate,
           };
         },
         version: 1,

package/src/store/quote.ts

@@ -21,13 +21,8 @@ import {
   type Wallet,
   WidgetEvents,
 } from '../types';
-import { isPositiveNumber, sanitizeInputAmount } from '../utils/numbers';
-import {
-  ensureLeadingZeroForDecimal,
-  removeLeadingZeros,
-} from '../utils/sanitizers';
+import { isPositiveNumber } from '../utils/numbers';
 import { getUsdInputFrom, getUsdOutputFrom } from '../utils/swap';
-import { isZeroValue } from '../utils/validation';
 
 import createSelectors from './selectors';
 
@@ -92,7 +87,6 @@ export interface QuoteState {
     value: SomeQuoteState[K]
   ) => void;
   setInputAmount: (amount: string) => void;
-  sanitizeInputAmount: (amount: string) => void;
   setSelectedQuote: (quote: SelectedQuote | null) => void;
   retry: (retryQuote: RetryQuote) => void;
   switchFromAndTo: () => void;
@@ -229,29 +223,16 @@ export const useQuoteStore = createSelectors(
           }),
         }));
       },
-      sanitizeInputAmount: (amount) => {
-        const sanitized = sanitizeInputAmount(amount);
-
-        set(() => ({
-          inputAmount: sanitized,
-        }));
-      },
       setInputAmount: (amount) => {
-        let sanitized = amount;
-        if (!isZeroValue(amount)) {
-          // sanitize once a meaningful digit is entered (e.g. "00001" → "1")
-          sanitized = removeLeadingZeros(sanitized);
-          sanitized = ensureLeadingZeroForDecimal(sanitized);
-        }
         set((state) => ({
-          inputAmount: sanitized,
-          ...(!sanitized && {
+          inputAmount: amount,
+          ...(!amount && {
             outputAmount: null,
             outputUsdValue: new BigNumber(0),
             selectedQuote: null,
           }),
           ...(!!state.fromToken && {
-            inputUsdValue: getUsdValue(state.fromToken, sanitized),
+            inputUsdValue: getUsdValue(state.fromToken, amount),
           }),
         }));
       },

package/src/store/slices/settings.ts

@@ -16,7 +16,6 @@ import { isFeatureHidden } from '../../utils/settings';
 import { getSupportedBlockchainsFromConfig } from '../utils';
 
 export type ThemeMode = 'auto' | 'dark' | 'light';
-export type QuoteTokensRate = 'default' | 'reversed';
 
 export interface SettingsSlice {
   theme: ThemeMode;
@@ -31,8 +30,6 @@ export interface SettingsSlice {
   affiliatePercent: number | null;
   affiliateWallets: { [key: string]: string } | null;
   _customTokens: Token[];
-  quoteTokensRate: QuoteTokensRate;
-
   setSlippage: (slippage: number) => void;
   setCustomSlippage: (customSlippage: number | null) => void;
   toggleInfiniteApprove: () => void;
@@ -53,7 +50,6 @@ export interface SettingsSlice {
   setCustomToken: (token: TokenData) => void;
   deleteCustomToken: (token: Token) => void;
   customTokens: () => Token[];
-  changeQuoteTokensRate: () => void;
 }
 
 export const createSettingsSlice: StateCreator<
@@ -73,13 +69,6 @@ export const createSettingsSlice: StateCreator<
   affiliatePercent: null,
   affiliateWallets: null,
   _customTokens: [],
-  quoteTokensRate: 'default',
-
-  changeQuoteTokensRate: () =>
-    set((state) => ({
-      quoteTokensRate:
-        state.quoteTokensRate === 'default' ? 'reversed' : 'default',
-    })),
   addPreferredBlockchain: (blockchain) => {
     const currentPreferredBlockchains = get().preferredBlockchains;
 

package/src/types/quote.ts

@@ -36,10 +36,7 @@ export type InsufficientSlippageError = {
   minRequiredSlippage: string | null;
 };
 
-export type QuoteRequestFailed = {
-  type: QuoteErrorType.REQUEST_FAILED;
-  diagnosisMessage?: string;
-};
+export type QuoteRequestFailed = { type: QuoteErrorType.REQUEST_FAILED };
 export type QuoteRequestCanceled = { type: QuoteErrorType.REQUEST_CANCELED };
 
 export type QuoteError =

package/src/utils/colors.ts

@@ -2,8 +2,6 @@
 // Types
 import type { ThemeColors, WidgetColors, WidgetColorsKeys } from '../types';
 
-import { isColorKeyOverridden } from './validation';
-
 type RGB = {
   red: number;
   green: number;
@@ -42,6 +40,15 @@ function expandShortHexColor(hexColor: string) {
   return `#${hexColor}`;
 }
 
+/*
+ * We letting users to override some specific colors (e.g. `primary550`, `secondary100`).
+ * So we are generating a range of colors if `primary` (or other keys) has passed but if user is passing a specific color,
+ * we will override the user color to generated range.
+ */
+function isOverridingColor(colorKey: string): boolean {
+  return /[0-9]+$/.test(colorKey);
+}
+
 // pad a hexadecimal string with zeros if it needs it
 function pad(number: string, length: number) {
   return number.padStart(length, '0');
@@ -164,7 +171,7 @@ export function expandToGenerateThemeColors(
      */
     const isSingleColor = ['background', 'foreground'].includes(colorKey);
 
-    if (!isSingleColor && !isColorKeyOverridden(colorKey)) {
+    if (!isSingleColor && !isOverridingColor(colorKey)) {
       const expandedHexColor = expandShortHexColor(expandColor);
       Object.assign(
         output,

package/src/utils/numbers.ts

@@ -4,9 +4,6 @@ import type { BestRouteResponse } from 'rango-sdk';
 
 import { BigNumber } from 'bignumber.js';
 
-import { stripTrailingZeros } from './sanitizers';
-import { isZeroValue } from './validation';
-
 /*
  * if time > 1h -> rounded with 5 minutes precision
  * if time < 1h -> rounded with 15 seconds precision
@@ -128,11 +125,3 @@ export const containsText = (text: string, searchText: string) =>
 
 export const isPositiveNumber = (text?: string) =>
   !!text && parseFloat(text) > 0;
-
-export function sanitizeInputAmount(amount: string): string {
-  if (isZeroValue(amount)) {
-    return '0';
-  }
-
-  return stripTrailingZeros(amount);
-}

package/src/utils/settings.ts

@@ -1,4 +1,4 @@
-import type { Features, HighSlippageWarning, Routing } from '../types';
+import type { Features, Routing } from '../types';
 import type { SwapperMeta, SwapperType, Token } from 'rango-sdk';
 
 import { i18n } from '@lingui/core';
@@ -8,7 +8,6 @@ import {
   MAX_SLIPPAGE,
   MIN_SLIPPAGE,
 } from '../constants/swapSettings';
-import { QuoteWarningType } from '../types';
 
 import { removeDuplicateFrom } from './common';
 
@@ -97,11 +96,9 @@ export const addCustomTokensToSupportedTokens = (
     : supportedTokens.concat(customTokens);
 };
 
-export function getSlippageValidation(slippage: number): {
-  type: 'error' | 'warning';
-  message: string;
-  quoteValidation?: HighSlippageWarning;
-} | null {
+export function getSlippageValidation(
+  slippage: number
+): { type: 'error' | 'warning'; message: string } | null {
   if (slippage == MIN_SLIPPAGE) {
     return {
       type: 'error',
@@ -113,10 +110,6 @@ export function getSlippageValidation(slippage: number): {
       message: i18n.t(
         'Your transaction is at risk of being frontrun due to high slippage tolerance.'
       ),
-      quoteValidation: {
-        type: QuoteWarningType.HIGH_SLIPPAGE,
-        slippage: slippage.toString(),
-      },
     };
   }