@rango-dev/widget-embedded 0.23.1-next.16 → 0.23.1-next.18

package/dist/pages/ConfirmSwapPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAmD5E,wBAAgB,eAAe,sBA8T9B"}
+{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAmD5E,wBAAgB,eAAe,sBAkU9B"}

package/dist/pages/LiquiditySourcePage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LiquiditySourcePage.d.ts","sourceRoot":"","sources":["../../src/pages/LiquiditySourcePage.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAcxC,UAAU,SAAS;IACjB,UAAU,EAAE,WAAW,GAAG,SAAS,CAAC;CACrC;AAED,wBAAgB,mBAAmB,CAAC,EAAE,UAAU,EAAE,EAAE,SAAS,qBA6H5D"}
+{"version":3,"file":"LiquiditySourcePage.d.ts","sourceRoot":"","sources":["../../src/pages/LiquiditySourcePage.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAcxC,UAAU,SAAS;IACjB,UAAU,EAAE,WAAW,GAAG,SAAS,CAAC;CACrC;AAED,wBAAgB,mBAAmB,CAAC,EAAE,UAAU,EAAE,EAAE,SAAS,qBA+H5D"}

package/dist/pages/SettingsPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SettingsPage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,wBAAgB,YAAY,sBA+C3B"}
+{"version":3,"file":"SettingsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SettingsPage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,wBAAgB,YAAY,sBA8C3B"}

package/dist/types/config.d.ts

@@ -159,8 +159,8 @@ export type Features = Partial<Record<'theme' | 'language' | 'connectWalletButto
  * that defines the various properties of the theme, such as colors, fonts, and others.
  * @property {boolean} externalWallets
  * If `externalWallets` is `true`, you should add `WidgetWallets` to your app.
- * @property {boolean} enableNewLiquiditySources - The `enableNewLiquiditySources` property is a boolean value that when you
- * set it to true, whenever a new liquidity source is added, it will be added to your list as well.
+ * @property {boolean} excludeLiquiditySources - The `excludeLiquiditySources` property is a boolean value that when you
+ * set it to true, the list of liquidity sources provided in `liquiditySources` will be excluded; otherwise, they will be included.
  * @property {Features} features - An optional object for configuring the visibility or enablement of various features.
  *   Keys include:
  *   - 'notification': Visibility state for the notification icon.
@@ -190,7 +190,7 @@ export type WidgetConfig = {
     language?: Language;
     theme?: WidgetTheme;
     externalWallets?: boolean;
-    enableNewLiquiditySources?: boolean;
+    excludeLiquiditySources?: boolean;
     features?: Features;
     variant?: WidgetVariant;
 };

package/dist/types/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/types/config.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../src/types/config.ts"],"names":[],"mappings":"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"}

package/dist/utils/colors.d.ts

@@ -1,8 +1,10 @@
 import type { WidgetColors } from '../types';
-export declare const colorShade: (col: string, amt: number) => string;
-export declare const generateRangeColors: (name: string, color: string) => {
-    [x: string]: string;
+export declare function generateShades(baseColor: string, prefix: string, reverse?: boolean): {
+    [key: string]: string;
 };
+export declare function generateShade(baseColor: string, decrementAmount: number): string;
+export declare function convertToRGB(baseColor: string): number[];
+export declare function isBright(baseColor: string): boolean;
 export declare const generateColors: (mainColors: {
     [x: string]: string;
 }, reverseNeutralRange: boolean, colors?: WidgetColors) => {

package/dist/utils/colors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/utils/colors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAoB,MAAM,UAAU,CAAC;AAE/D,eAAO,MAAM,UAAU,QAAS,MAAM,OAAO,MAAM,WAyBlD,CAAC;AAEF,eAAO,MAAM,mBAAmB,SAAU,MAAM,SAAS,MAAM;;CAmC9D,CAAC;AACF,eAAO,MAAM,cAAc;;wBAEJ,OAAO,WACnB,YAAY;;CAyCtB,CAAC"}
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/utils/colors.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAoB,MAAM,UAAU,CAAC;AAE/D,wBAAgB,cAAc,CAC5B,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,MAAM,EACd,OAAO,CAAC,EAAE,OAAO,GAChB;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAE,CAyC3B;AAED,wBAAgB,aAAa,CAC3B,SAAS,EAAE,MAAM,EACjB,eAAe,EAAE,MAAM,GACtB,MAAM,CAKR;AAED,wBAAgB,YAAY,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,EAAE,CAoBxD;AAcD,wBAAgB,QAAQ,CAAC,SAAS,EAAE,MAAM,WAezC;AAED,eAAO,MAAM,cAAc;;wBAEJ,OAAO,WACnB,YAAY;;CA2BtB,CAAC"}

package/dist/utils/ui.d.ts

@@ -1,6 +1,6 @@
 import type { WidgetTheme } from '../types';
 import type { createTheme } from '@rango-dev/ui';
-import type React from 'react';
+import React from 'react';
 interface CustomizedThemeValues {
     id: string;
     tokens: Parameters<typeof createTheme>[0];
@@ -10,6 +10,9 @@ interface CustomizedTheme {
     dark: undefined | CustomizedThemeValues;
 }
 export declare function customizedThemeTokens(colors: WidgetTheme['colors']): CustomizedTheme;
-export declare function joinList(list: React.JSX.Element[], divider: React.JSX.Element): React.JSX.Element[];
+export declare function joinList(list: {
+    element: React.JSX.Element;
+    key: string;
+}[], divider: React.JSX.Element): React.JSX.Element[];
 export {};
 //# sourceMappingURL=ui.d.ts.map

package/dist/utils/ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../src/utils/ui.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,UAAU,qBAAqB;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;CAC3C;AAED,UAAU,eAAe;IACvB,KAAK,EAAE,SAAS,GAAG,qBAAqB,CAAC;IACzC,IAAI,EAAE,SAAS,GAAG,qBAAqB,CAAC;CACzC;AAED,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,WAAW,CAAC,QAAQ,CAAC,GAC5B,eAAe,CA6CjB;AAED,wBAAgB,QAAQ,CACtB,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,EAAE,EACzB,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,uBAe3B"}
+{"version":3,"file":"ui.d.ts","sourceRoot":"","sources":["../../src/utils/ui.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAMjD,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,UAAU,qBAAqB;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;CAC3C;AAED,UAAU,eAAe;IACvB,KAAK,EAAE,SAAS,GAAG,qBAAqB,CAAC;IACzC,IAAI,EAAE,SAAS,GAAG,qBAAqB,CAAC;CACzC;AAED,wBAAgB,qBAAqB,CACnC,MAAM,EAAE,WAAW,CAAC,QAAQ,CAAC,GAC5B,eAAe,CA6CjB;AAED,wBAAgB,QAAQ,CACtB,IAAI,EAAE;IAAE,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,EAAE,EACnD,OAAO,EAAE,KAAK,CAAC,GAAG,CAAC,OAAO,uBAiB3B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.23.1-next.16",
+  "version": "0.23.1-next.18",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,7 +25,7 @@
     "@rango-dev/queue-manager-core": "^0.26.0",
     "@rango-dev/queue-manager-rango-preset": "^0.28.1-next.3",
     "@rango-dev/queue-manager-react": "^0.26.0",
-    "@rango-dev/ui": "^0.29.1-next.11",
+    "@rango-dev/ui": "^0.29.1-next.14",
     "@rango-dev/wallets-react": "^0.14.1-next.1",
     "@rango-dev/wallets-shared": "^0.28.1-next.1",
     "bignumber.js": "^9.1.1",
@@ -48,4 +48,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/ConfirmWalletsModal/ConfirmWallets.styles.ts

@@ -1,11 +1,4 @@
-import {
-  Button,
-  css,
-  darkTheme,
-  IconButton,
-  styled,
-  TextField,
-} from '@rango-dev/ui';
+import { css, darkTheme, IconButton, styled, TextField } from '@rango-dev/ui';
 
 export const Title = styled('div', {
   display: 'flex',
@@ -130,10 +123,11 @@ export const StyledTextField = styled(TextField, {
 
 export const Wallets = styled('div', { overflow: 'visible', width: '100%' });
 
-export const CustomDestinationButton = styled(Button, {
+export const CustomDestinationButton = styled('div', {
   width: '100%',
-  borderRadius: '$sm !important',
-  padding: '$15 !important',
+  borderRadius: '$sm',
+  display: 'flex',
+  padding: '$15',
   justifyContent: 'space-between',
   alignItems: 'center',
   $$color: '$colors$neutral100',

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -417,17 +417,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
                         open={showCustomDestination}
                         triggerAnchor="top"
                         trigger={
-                          <CustomDestinationButton
-                            fullWidth
-                            variant="default"
-                            suffix={
-                              <ExpandedIcon
-                                orientation={
-                                  showCustomDestination ? 'up' : 'down'
-                                }>
-                                <ChevronDownIcon size={10} color="gray" />
-                              </ExpandedIcon>
-                            }>
+                          <CustomDestinationButton>
                             <div className="button__content">
                               <WalletIcon size={18} color="info" />
                               <Divider size={4} direction="horizontal" />
@@ -435,6 +425,12 @@ export function ConfirmWalletsModal(props: PropTypes) {
                                 {i18n.t('Send to a different address')}
                               </Typography>
                             </div>
+                            <ExpandedIcon
+                              orientation={
+                                showCustomDestination ? 'up' : 'down'
+                              }>
+                              <ChevronDownIcon size={10} color="gray" />
+                            </ExpandedIcon>
                           </CustomDestinationButton>
                         }
                         onClickTrigger={() =>

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -198,7 +198,7 @@ export function WalletList(props: PropTypes) {
               )
             : undefined;
         return (
-          <>
+          <React.Fragment key={`${wallet.title}_${blockchainDisplayName}`}>
             <WalletModal
               open={openWalletStateModal === wallet.type}
               onClose={handleCloseWalletModal}
@@ -302,7 +302,7 @@ export function WalletList(props: PropTypes) {
               disabled={!isActiveTab}
               {...wallet}
             />
-          </>
+          </React.Fragment>
         );
       })}
       {shouldShowMoreWallets && (

package/src/components/LoadingLiquiditySourceList/LoadingLiquiditySourceList.styles.ts

@@ -1,5 +1,5 @@
 import { ListItem, styled } from '@rango-dev/ui';
 
-export const CustomeListItem = styled(ListItem, {
+export const CustomListItem = styled(ListItem, {
   height: 61,
 });

package/src/components/LoadingLiquiditySourceList/LoadingLiquiditySourceList.tsx

@@ -3,16 +3,16 @@ import React from 'react';
 
 import { LiquiditySourceList } from '../SettingsContainer';
 
-import { CustomeListItem } from './LoadingLiquiditySourceList.styles';
+import { CustomListItem } from './LoadingLiquiditySourceList.styles';
 
 const ITEM_SKELETON_COUNT = 30;
 export function LoadingLiquiditySourceList() {
   return (
     <LiquiditySourceList>
-      {Array.from(Array(ITEM_SKELETON_COUNT), (e) => (
-        <CustomeListItem
+      {Array.from(Array(ITEM_SKELETON_COUNT), (_, index) => (
+        <CustomListItem
           hasDivider
-          key={e}
+          key={index}
           start={<Skeleton variant="circular" width={35} height={35} />}
           title={<Skeleton variant="text" size="large" width={90} />}
           end={<Checkbox checked={false} />}

package/src/components/Quote/Quote.styles.ts

@@ -55,19 +55,6 @@ export const QuoteContainer = styled(Collapsible.Root, {
         backgroundColor: '$$color',
       },
     },
-    {
-      listItem: true,
-      selected: false,
-      css: {
-        cursor: 'pointer',
-        '&:hover': {
-          backgroundColor: '$neutral300',
-          [`.${darkTheme} &`]: {
-            backgroundColor: '$neutral400',
-          },
-        },
-      },
-    },
   ],
 });
 
@@ -107,6 +94,18 @@ export const SummaryContainer = styled('div', {
         },
         backgroundColor: '$$color',
         '&:hover': {
+          '& .quote_container': {
+            '& button': {
+              backgroundColor: '$neutral500',
+              [`.${darkTheme} &`]: {
+                backgroundColor: '$neutral200',
+              },
+            },
+            backgroundColor: '$neutral500',
+            [`.${darkTheme} &`]: {
+              backgroundColor: '$neutral200',
+            },
+          },
           backgroundColor: '$neutral300',
           [`.${darkTheme} &`]: {
             backgroundColor: '$neutral400',
@@ -376,6 +375,6 @@ export const Line = styled('div', {
   borderTopColor: '$neutral',
   margin: '$5 0',
   [`.${darkTheme} &`]: {
-    borderTopColor: '$neutral400',
+    borderTopColor: '$neutral800',
   },
 });

package/src/components/Quote/Quote.tsx

@@ -329,10 +329,10 @@ export function Quote(props: QuoteProps) {
               {sortedQuoteTags.map((tag, index) => {
                 const key = `${tag.value}_${index}`;
                 return (
-                  <>
-                    <QuoteTag label={tag.label} key={key} value={tag.value} />
+                  <React.Fragment key={key}>
+                    <QuoteTag label={tag.label} value={tag.value} />
                     <Divider size={4} direction="horizontal" />
-                  </>
+                  </React.Fragment>
                 );
               })}
             </TagContainer>
@@ -438,6 +438,7 @@ export function Quote(props: QuoteProps) {
         selected={selected}
         listItem={type === 'list-item'}
         open={expanded}
+        className="quote_container"
         onOpenChange={setExpanded}>
         <QuoteTrigger
           type={type}

package/src/components/Quote/QuoteTrigger.tsx

@@ -73,14 +73,14 @@ export function QuoteTrigger(props: QuoteTriggerProps) {
           );
 
           return isMobile || isTablet ? (
-            <>
+            <React.Fragment key={key}>
               <ImageComponent
                 content={step.swapper.displayName}
                 src={step.swapper.image}
                 state={step.state}
               />
               {index !== numberOfSteps - 1 && <>{arrow}</>}
-            </>
+            </React.Fragment>
           ) : (
             <React.Fragment key={key}>
               {numberOfSteps <= MAX_STEPS ||
@@ -148,12 +148,11 @@ export function QuoteTrigger(props: QuoteTriggerProps) {
             </Typography>
             <Divider direction="horizontal" size={4} />
             {blockchains.map((blockchain, index) => (
-              <>
+              <React.Fragment key={blockchain.displayName}>
                 {blockchains.length <= MAX_BLOCKCHAINS ||
                 (blockchains.length > MAX_BLOCKCHAINS &&
                   index < MAX_BLOCKCHAINS - 1) ? (
                   <ImageComponent
-                    key={blockchain.displayName}
                     content={''}
                     src={blockchain.image}
                     open={false}
@@ -190,7 +189,7 @@ export function QuoteTrigger(props: QuoteTriggerProps) {
                     </Tooltip>
                   )
                 )}
-              </>
+              </React.Fragment>
             ))}
 
             <Divider direction="horizontal" size={32} />

package/src/components/QuoteSkeleton/QuoteSkeleton.styles.ts

@@ -27,7 +27,7 @@ export const Steps = styled('div', {
 });
 
 export const StepSeparator = styled('div', {
-  borderLeft: '1px dashed black',
+  borderLeft: '1px dashed $foreground',
   minHeight: ' 0',
   margin: '0px 11.5px',
   alignSelf: 'stretch',

package/src/components/Quotes/SelectStrategy.tsx

@@ -1,5 +1,3 @@
-import type { PreferenceType } from 'rango-sdk';
-
 import { Select } from '@rango-dev/ui';
 import React from 'react';
 
@@ -16,17 +14,11 @@ export function SelectStrategy(props: { container: HTMLElement }) {
       <Select
         container={props.container}
         options={ROUTE_STRATEGY}
-        value={
-          ROUTE_STRATEGY.find(
-            (strategy) => strategy.value === sortStrategy
-          ) as {
-            value: PreferenceType;
-            label: string;
-          }
-        }
+        value={sortStrategy}
         handleItemClick={(item) => {
-          updateQuotePartialState('sortStrategy', item.value as PreferenceType);
+          updateQuotePartialState('sortStrategy', item.value);
         }}
+        variant="filled"
       />
     </SelectContainer>
   );

package/src/components/Slippage/Slippage.tsx

@@ -47,19 +47,17 @@ export function Slippage() {
         {SLIPPAGES.map((slippageItem, index) => {
           const key = `slippage-${index}`;
           return (
-            <>
-              <SlippageChip
-                key={key}
-                onClick={() => {
-                  if (customSlippage) {
-                    setCustomSlippage(null);
-                  }
-                  setSlippage(slippageItem);
-                }}
-                selected={!customSlippage && slippageItem === slippage}
-                label={`${slippageItem.toString()}%`}
-              />
-            </>
+            <SlippageChip
+              key={key}
+              onClick={() => {
+                if (customSlippage) {
+                  setCustomSlippage(null);
+                }
+                setSlippage(slippageItem);
+              }}
+              selected={!customSlippage && slippageItem === slippage}
+              label={`${slippageItem.toString()}%`}
+            />
           );
         })}
         <TextField

package/src/components/TokenList/TokenList.tsx

@@ -19,7 +19,7 @@ import React, { useEffect, useState } from 'react';
 
 import { useAppStore } from '../../store/AppStore';
 import { useWalletsStore } from '../../store/wallets';
-import { generateRangeColors } from '../../utils/colors';
+import { generateShade, isBright } from '../../utils/colors';
 import { formatBalance } from '../../utils/wallets';
 
 import { LoadingTokenList } from './LoadingTokenList';
@@ -133,23 +133,24 @@ export function TokenList(props: PropTypes) {
           const blockchain = blockchains.find(
             (blockchain) => blockchain.name === token.blockchain
           );
-          const color = generateRangeColors(
-            token.symbol,
-            blockchain?.color || ''
+          const lightShade = generateShade(
+            blockchain?.color || '',
+            isBright(blockchain?.color || '') ? 5 : 125
           );
+          const darkShade = generateShade(blockchain?.color || '', -100);
 
           const customCssForTag = {
-            $$color: color[`${token.symbol}100`],
+            $$color: lightShade,
             [`.${darkTheme} &`]: {
-              $$color: color[`${token.symbol}900`],
+              $$color: darkShade,
             },
             backgroundColor: '$$color',
           };
 
           const customCssForTagTitle = {
-            $$color: color[`${token.symbol}700`],
+            $$color: darkShade,
             [`.${darkTheme} &`]: {
-              $$color: color[`${token.symbol}100`],
+              $$color: lightShade,
             },
             color: '$$color',
           };

package/src/hooks/useSwapInput.ts

@@ -46,7 +46,8 @@ export function useSwapInput({
   refetchQuote,
 }: UseSwapInputProps): UseSwapInput {
   const { fetch: fetchQuote, cancelFetch } = useFetchAllQuotes();
-  const { enableNewLiquiditySources, features } = useAppStore().config;
+  const { excludeLiquiditySources: configExcludeLiquiditySources, features } =
+    useAppStore().config;
   const connectedWallets = useWalletsStore.use.connectedWallets();
 
   const tokens = useAppStore().tokens();
@@ -223,7 +224,7 @@ export function useSwapInput({
     toToken?.blockchain,
     shouldSkipRequest,
     liquiditySources?.length,
-    enableNewLiquiditySources,
+    configExcludeLiquiditySources,
     disabledLiquiditySources.length,
     userSlippage,
     affiliateRef,

package/src/pages/ConfirmSwapPage.tsx

@@ -371,15 +371,19 @@ export function ConfirmSwapPage() {
         </div>
         <Divider size="12" />
 
-        {joinList(alerts, <Divider size={10} />)}
+        {joinList(
+          alerts.map((alert, index) => ({
+            element: alert,
+            key: `alert-${index}`,
+          })),
+          <Divider size={10} />
+        )}
         {alerts.length > 0 ? <Divider size={10} /> : null}
 
         <QuoteInfo
           quote={selectedQuote}
           type="swap-preview"
           expanded={true}
-          selected
-          tagHidden
           error={confirmSwapResult.error}
           loading={fetchingConfirmationQuote}
           warning={confirmSwapResult.warnings?.quote ?? null}

package/src/pages/LiquiditySourcePage.tsx

@@ -136,11 +136,13 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
           fetchStatus === 'success' && (
             <LiquiditySourceList disabled={campaignMode}>
               {filteredList.map((sourceItem) => {
+                const { groupTitle, ...otherProps } = sourceItem;
+
                 return (
                   <React.Fragment key={sourceItem.id}>
                     <ListItemButton
                       style={{ height: '61px' }}
-                      {...sourceItem}
+                      {...otherProps}
                       selected={false}
                       hasDivider
                     />

package/src/pages/SettingsPage.tsx

@@ -32,7 +32,6 @@ export function SettingsPage() {
       updateCampaignMode('liquiditySources', undefined);
     }
   };
-
   return (
     <Layout
       header={{

package/src/store/slices/config.ts

@@ -6,7 +6,7 @@ export const DEFAULT_CONFIG: WidgetConfig = {
   apiKey: '',
   title: undefined,
   multiWallets: true,
-  enableNewLiquiditySources: true,
+  excludeLiquiditySources: true,
   customDestination: true,
 };
 
@@ -72,7 +72,7 @@ export const createConfigSlice: StateCreatorWithInitialData<
       const { config, campaignMode } = get();
       return campaignMode.liquiditySources?.length
         ? false
-        : !!config.enableNewLiquiditySources;
+        : !!config.excludeLiquiditySources;
     },
     isInCampaignMode: () => {
       const { campaignMode } = get();

package/src/store/slices/data.ts

@@ -177,12 +177,12 @@ export const createDataSlice: StateCreator<
     const liquiditySources =
       campaignModeLiquiditySource ?? config.liquiditySources;
 
-    const enableNewLiquiditySources = campaignModeLiquiditySource
+    const excludeLiquiditySources = campaignModeLiquiditySource
       ? false
-      : config.enableNewLiquiditySources;
+      : config.excludeLiquiditySources;
 
     /*
-     * If the enableNewLiquiditySources flag is set to true, we return all swappers that are not included in the config.
+     * If the excludeLiquiditySources flag is set to true, we return all swappers that are not included in the config.
      * Otherwise, we return all swappers that are included in the config.
      */
     const swappers = get()._swappers.filter((swapper) => {
@@ -191,7 +191,7 @@ export const createDataSlice: StateCreator<
       );
 
       const shouldExcludeLiquiditySources =
-        enableNewLiquiditySources ||
+        excludeLiquiditySources ||
         !liquiditySources ||
         liquiditySources.length === 0;
 

package/src/types/config.ts

@@ -171,8 +171,8 @@ export type Features = Partial<
  * that defines the various properties of the theme, such as colors, fonts, and others.
  * @property {boolean} externalWallets
  * If `externalWallets` is `true`, you should add `WidgetWallets` to your app.
- * @property {boolean} enableNewLiquiditySources - The `enableNewLiquiditySources` property is a boolean value that when you
- * set it to true, whenever a new liquidity source is added, it will be added to your list as well.
+ * @property {boolean} excludeLiquiditySources - The `excludeLiquiditySources` property is a boolean value that when you
+ * set it to true, the list of liquidity sources provided in `liquiditySources` will be excluded; otherwise, they will be included.
  * @property {Features} features - An optional object for configuring the visibility or enablement of various features.
  *   Keys include:
  *   - 'notification': Visibility state for the notification icon.
@@ -203,7 +203,7 @@ export type WidgetConfig = {
   language?: Language;
   theme?: WidgetTheme;
   externalWallets?: boolean;
-  enableNewLiquiditySources?: boolean;
+  excludeLiquiditySources?: boolean;
   features?: Features;
   variant?: WidgetVariant;
 };