@rango-dev/widget-embedded 0.21.1-next.1 → 0.21.1-next.3

package/dist/store/slices/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../src/store/slices/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,QAAQ,CAAC;AAE1D,eAAO,MAAM,cAAc,EAAE,YAK5B,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,EAAE,YAAY,CAAC;IAErB,YAAY,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,2BAA2B,CACzD,YAAY,EACZ,WAAW,EACX,WAAW,CAiBZ,CAAC"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../src/store/slices/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAChD,OAAO,KAAK,EAAE,2BAA2B,EAAE,MAAM,QAAQ,CAAC;AAE1D,eAAO,MAAM,cAAc,EAAE,YAM5B,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,EAAE,YAAY,CAAC;IAErB,YAAY,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;CAC9C,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,2BAA2B,CACzD,YAAY,EACZ,WAAW,EACX,WAAW,CAiBZ,CAAC"}

package/dist/types/config.d.ts

@@ -172,6 +172,7 @@ export type Features = Partial<Record<'theme' | 'language' | 'connectWalletButto
 export type WidgetConfig = {
     apiKey: string;
     apiUrl?: string;
+    title?: string;
     walletConnectProjectId?: string;
     affiliate?: WidgetAffiliate;
     amount?: number;

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/types/notification.d.ts

@@ -2,13 +2,13 @@ import { type Route, type RouteEvent, type Step, type StepEvent } from '@rango-d
 type NotificationRoute = {
     from: {
         blockchain: Step['fromBlockchain'];
-        tokenSymbol: Step['fromSymbol'];
-        tokenAddress: Step['fromSymbolAddress'];
+        symbol: Step['fromSymbol'];
+        address: Step['fromSymbolAddress'];
     };
     to: {
         blockchain: Step['toBlockchain'];
-        tokenSymbol: Step['toSymbol'];
-        tokenAddress: Step['toSymbolAddress'];
+        symbol: Step['toSymbol'];
+        address: Step['toSymbolAddress'];
     };
 };
 export type Notification = Pick<Route, 'requestId'> & {

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

@@ -1 +1 @@
-{"version":3,"file":"notification.d.ts","sourceRoot":"","sources":["../../src/types/notification.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,KAAK,EACV,KAAK,UAAU,EACf,KAAK,IAAI,EACT,KAAK,SAAS,EACf,MAAM,uCAAuC,CAAC;AAE/C,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE;QACJ,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACnC,WAAW,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAChC,YAAY,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;KACzC,CAAC;IACF,EAAE,EAAE;QACF,UAAU,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QACjC,WAAW,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QAC9B,YAAY,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;KACvC,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,EAAE,WAAW,CAAC,GAAG;IACpD,KAAK,EAAE,UAAU,GAAG,SAAS,CAAC;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,iBAAiB,CAAC;CAC1B,CAAC"}
+{"version":3,"file":"notification.d.ts","sourceRoot":"","sources":["../../src/types/notification.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,KAAK,EACV,KAAK,UAAU,EACf,KAAK,IAAI,EACT,KAAK,SAAS,EACf,MAAM,uCAAuC,CAAC;AAE/C,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE;QACJ,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACnC,MAAM,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;QAC3B,OAAO,EAAE,IAAI,CAAC,mBAAmB,CAAC,CAAC;KACpC,CAAC;IACF,EAAE,EAAE;QACF,UAAU,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;QACjC,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;QACzB,OAAO,EAAE,IAAI,CAAC,iBAAiB,CAAC,CAAC;KAClC,CAAC;CACH,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,EAAE,WAAW,CAAC,GAAG;IACpD,KAAK,EAAE,UAAU,GAAG,SAAS,CAAC;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,iBAAiB,CAAC;CAC1B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/utils/common.ts"],"names":[],"mappings":"AAEA,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,CAEtD;AAED,wBAAgB,QAAQ,CACtB,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,EAC3B,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,WAK5B;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,aAGvB,GAAG,UAS9B;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,OAAO,CAGtE;AAED,eAAO,MAAM,YAAY,mBACkC,CAAC"}
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../src/utils/common.ts"],"names":[],"mappings":"AAEA,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,CAEtD;AAED,wBAAgB,QAAQ,CACtB,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,EAC3B,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,WAK5B;AAED,wBAAgB,QAAQ,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,aAGvB,GAAG,UAS9B;AAED,wBAAgB,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,OAAO,CAGtE;AAED,eAAO,MAAM,YAAY,mBACyC,CAAC"}

package/dist/utils/wallets.d.ts

@@ -18,7 +18,7 @@ export declare const isExperimentalChain: (blockchains: BlockchainMeta[], wallet
 export declare const getKeplrCompatibleConnectedWallets: (selectableWallets: Wallet[]) => WalletType[];
 export declare function formatBalance(balance: Balance | null): Balance | null;
 export declare function sortTokens(tokens: Token[], getBalanceFor: (token: Token) => Balance | null, isTokenPinned: (token: Token) => boolean): Token[];
-export declare function tokensAreEqual(tokenA: Pick<Token, 'blockchain' | 'symbol' | 'address'> | null, tokenB: Pick<Token, 'blockchain' | 'symbol' | 'address'> | null): boolean;
+export declare function areTokensEqual(tokenA: Pick<Token, 'blockchain' | 'symbol' | 'address'> | null, tokenB: Pick<Token, 'blockchain' | 'symbol' | 'address'> | null): boolean;
 export declare function sortWalletsBasedOnConnectionState(wallets: ModalWalletInfo[]): ModalWalletInfo[];
 export declare function getConciseAddress(address: string, maxChars?: number, ellipsisLength?: number): string;
 export declare function getAddress({ chain, connectedWallets, walletType, }: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.21.1-next.1",
+  "version": "0.21.1-next.3",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,7 +25,7 @@
     "@rango-dev/queue-manager-core": "^0.25.0",
     "@rango-dev/queue-manager-rango-preset": "^0.26.0",
     "@rango-dev/queue-manager-react": "^0.25.0",
-    "@rango-dev/ui": "^0.27.1-next.0",
+    "@rango-dev/ui": "^0.27.1-next.1",
     "@rango-dev/wallets-react": "^0.12.0",
     "@rango-dev/wallets-shared": "^0.26.0",
     "bignumber.js": "^9.1.1",

package/readme.md

@@ -1,3 +1,4 @@
 # @rango-dev/widget-embedded
 
 Rango Embedded Widget
+

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -18,7 +18,7 @@ import {
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { RANGO_SWAP_BOX_ID } from '../../constants';
+import { WIDGET_UI_ID } from '../../constants';
 import { getQuoteErrorMessage } from '../../constants/errors';
 import { getQuoteUpdateWarningMessage } from '../../constants/warnings';
 import { useAppStore } from '../../store/AppStore';
@@ -228,7 +228,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
   }, [connectedWallets.length]);
 
   const modalContainer = document.getElementById(
-    RANGO_SWAP_BOX_ID
+    WIDGET_UI_ID.SWAP_BOX_ID
   ) as HTMLDivElement;
 
   const navigate = useNavigate();

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -18,7 +18,7 @@ import {
 import React, { useEffect, useState } from 'react';
 
 import { useWallets } from '../..';
-import { RANGO_SWAP_BOX_ID } from '../../constants';
+import { WIDGET_UI_ID } from '../../constants';
 import { useWalletList } from '../../hooks/useWalletList';
 import {
   TIME_TO_CLOSE_MODAL,
@@ -112,7 +112,7 @@ export function WalletList(props: PropTypes) {
   }, [JSON.stringify(list)]);
 
   const modalContainer = document.getElementById(
-    RANGO_SWAP_BOX_ID
+    WIDGET_UI_ID.SWAP_BOX_ID
   ) as HTMLDivElement;
 
   useEffect(() => {

package/src/components/Layout/Layout.styles.ts

@@ -36,7 +36,6 @@ export const Content = styled('div', {
   overflowY: 'auto',
 });
 export const Footer = styled('div', {
-  backgroundColor: '$background',
   '& .footer__content': {
     padding: '$0 $20',
   },

package/src/components/Layout/Layout.tsx

@@ -6,7 +6,7 @@ import { useManager } from '@rango-dev/queue-manager-react';
 import { BottomLogo, Divider, Header } from '@rango-dev/ui';
 import React, { useEffect, useRef } from 'react';
 
-import { RANGO_SWAP_BOX_ID } from '../../constants';
+import { WIDGET_UI_ID } from '../../constants';
 import { useNavigateBack } from '../../hooks/useNavigateBack';
 import { useTheme } from '../../hooks/useTheme';
 import { useAppStore } from '../../store/AppStore';
@@ -76,7 +76,10 @@ function Layout(props: PropsWithChildren<PropTypes>) {
   }, []);
 
   return (
-    <Container height={height} id={RANGO_SWAP_BOX_ID} className={activeTheme()}>
+    <Container
+      height={height}
+      id={WIDGET_UI_ID.SWAP_BOX_ID}
+      className={activeTheme()}>
       <Header
         prefix={<>{showBackButton && <BackButton onClick={navigateBack} />}</>}
         title={header.title}

package/src/components/NotificationContent/NotificationContent.tsx

@@ -14,6 +14,7 @@ import { useNavigate } from 'react-router-dom';
 import { navigationRoutes } from '../../constants/navigationRoutes';
 import { useAppStore } from '../../store/AppStore';
 import { useNotificationStore } from '../../store/notification';
+import { areTokensEqual } from '../../utils/wallets';
 
 import { Container, Images, List } from './NotificationContent.styles';
 import { NotificationNotFound } from './NotificationNotFound';
@@ -41,50 +42,40 @@ export function NotificationContent() {
       {sortedNotification.length ? (
         <List>
           {sortedNotification.map((notificationItem) => {
-            const fromToken = tokens.find(
-              (tokenItem) =>
-                tokenItem.address ===
-                  notificationItem.route.from.tokenAddress &&
-                tokenItem.blockchain ===
-                  notificationItem.route.from.blockchain &&
-                tokenItem.symbol === notificationItem.route.from.tokenSymbol
+            const { route, requestId, event } = notificationItem;
+            const fromToken = tokens.find((tokenItem) =>
+              areTokensEqual(tokenItem, route.from)
             );
 
             const fromBlockchain = blockchains.find(
-              (blockchainItem) =>
-                blockchainItem.name === notificationItem.route.from.blockchain
+              (blockchainItem) => blockchainItem.name === route.from.blockchain
             );
 
-            const toToken = tokens.find(
-              (tokenItem) =>
-                tokenItem.address === notificationItem.route.to.tokenAddress &&
-                tokenItem.blockchain === notificationItem.route.to.blockchain &&
-                tokenItem.symbol === notificationItem.route.to.tokenSymbol
+            const toToken = tokens.find((tokenItem) =>
+              areTokensEqual(tokenItem, route.to)
             );
 
             const toBlockchain = blockchains.find(
-              (blockchainItem) =>
-                blockchainItem.name === notificationItem.route.to.blockchain
+              (blockchainItem) => blockchainItem.name === route.to.blockchain
             );
 
             return (
               <ListItemButton
-                key={notificationItem.requestId}
-                onClick={() => handleOnClick(notificationItem.requestId)}
+                key={requestId}
+                onClick={() => handleOnClick(requestId)}
                 title={
                   <Typography
                     variant="body"
                     size="small"
                     color={
-                      notificationItem.event.messageSeverity ===
-                      EventSeverity.WARNING
+                      event.messageSeverity === EventSeverity.WARNING
                         ? '$foreground'
                         : '$neutral700'
                     }>
-                    {i18n.t(notificationItem.event.message)}
+                    {i18n.t(event.message)}
                   </Typography>
                 }
-                id={notificationItem.requestId}
+                id={requestId}
                 start={
                   <Images>
                     <div className="from-chain-token">

package/src/components/NotificationContent/NotificationNotFound.tsx

@@ -10,7 +10,7 @@ export function NotificationNotFound() {
       <NoNotificationIcon color="secondary" size={26} />
       <Divider size={12} />
       <Typography variant="body" size="medium" color="neutral700">
-        {i18n.t('You have no notification')}
+        {i18n.t('There are no notifications.')}
       </Typography>
     </NotFoundContainer>
   );

package/src/components/SwapDetailsModal/SwapDetailsCompleteModal.tsx

@@ -12,7 +12,7 @@ import {
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { RANGO_SWAP_BOX_ID } from '../../constants';
+import { WIDGET_UI_ID } from '../../constants';
 import { getContainer } from '../../utils/common';
 
 export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
@@ -36,7 +36,9 @@ export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
     <Modal
       open={open}
       onClose={onClose}
-      container={document.getElementById(RANGO_SWAP_BOX_ID) || document.body}>
+      container={
+        document.getElementById(WIDGET_UI_ID.SWAP_BOX_ID) || document.body
+      }>
       {status === 'success' ? (
         <MessageBox type="success" title={i18n.t('Swap Successful')}>
           <TokenAmount

package/src/components/SwapDetailsModal/SwapDetailsModal.tsx

@@ -4,7 +4,7 @@ import { Modal } from '@rango-dev/ui';
 import { PendingSwapNetworkStatus } from 'rango-types';
 import React from 'react';
 
-import { RANGO_SWAP_BOX_ID } from '../../constants';
+import { WIDGET_UI_ID } from '../../constants';
 
 import { CancelContent } from './SwapDetailsModal.Cancel';
 import { DeleteContent } from './SwapDetailsModal.Delete';
@@ -31,7 +31,9 @@ export function SwapDetailsModal(props: ModalPropTypes) {
     <Modal
       open={!!state}
       onClose={onClose}
-      container={document.getElementById(RANGO_SWAP_BOX_ID) || document.body}>
+      container={
+        document.getElementById(WIDGET_UI_ID.SWAP_BOX_ID) || document.body
+      }>
       {showWalletStateContent && (
         <WalletStateContent
           type={modalNetworkValues[state].type}

package/src/components/WalletModal/WalletModal.tsx

@@ -3,7 +3,7 @@ import type { PropTypes } from './WalletModal.types';
 import { Divider, Modal } from '@rango-dev/ui';
 import React from 'react';
 
-import { RANGO_SWAP_BOX_ID } from '../../constants';
+import { WIDGET_UI_ID } from '../../constants';
 
 import { ModalContent } from './WalletModalContent';
 
@@ -14,7 +14,9 @@ export function WalletModal(props: PropTypes) {
     <Modal
       open={open}
       onClose={onClose}
-      container={document.getElementById(RANGO_SWAP_BOX_ID) || document.body}>
+      container={
+        document.getElementById(WIDGET_UI_ID.SWAP_BOX_ID) || document.body
+      }>
       <ModalContent {...otherProps} />
       <Divider direction="vertical" size={32} />
     </Modal>

package/src/constants/index.ts

@@ -1,4 +1,10 @@
+import { UI_ID } from '@rango-dev/ui';
+
 export const RANGO_PUBLIC_API_KEY = 'c6381a79-2817-4602-83bf-6a641a409e32';
 export const DEFAULT_BASE_URL = 'https://api.rango.exchange';
-export const RANGO_SWAP_BOX_ID = 'rango-swap-box';
 export const SCANNER_BASE_URL = 'https://scan.rango.exchange';
+
+export const WIDGET_UI_ID = {
+  SWAP_BOX_ID: 'rango-swap-box',
+  ...UI_ID,
+};

package/src/hooks/useSwapInput.ts

@@ -11,7 +11,7 @@ import { isPositiveNumber } from '../utils/numbers';
 import { generateQuoteWarnings } from '../utils/quote';
 import { isFeatureEnabled } from '../utils/settings';
 import { createQuoteRequestBody } from '../utils/swap';
-import { tokensAreEqual } from '../utils/wallets';
+import { areTokensEqual } from '../utils/wallets';
 
 import {
   handleQuoteErrors,
@@ -68,7 +68,7 @@ export function useSwapInput(): UseSwapInput {
   const tokensValueInvalid = !fromToken || !toToken;
   const shouldSkipRequest =
     tokensValueInvalid ||
-    tokensAreEqual(fromToken, toToken) ||
+    areTokensEqual(fromToken, toToken) ||
     !isPositiveNumber(inputAmount);
 
   const resetState = (loading: boolean) => {

package/src/hooks/useSyncStoresWithConfig.ts

@@ -8,7 +8,7 @@ import {
   isBlockchainExcludedInConfig,
   isTokenExcludedInConfig,
 } from '../utils/configs';
-import { tokensAreEqual } from '../utils/wallets';
+import { areTokensEqual } from '../utils/wallets';
 
 export function useSyncStoresWithConfig() {
   const {
@@ -50,7 +50,7 @@ export function useSyncStoresWithConfig() {
         (chain) => chain.name === config?.from?.blockchain
       );
       const token = tokens.find((t) =>
-        tokensAreEqual(t, config?.from?.token || null)
+        areTokensEqual(t, config?.from?.token || null)
       );
 
       if (chain || (!chain && prevConfigFromBlockchain.current)) {
@@ -99,7 +99,7 @@ export function useSyncStoresWithConfig() {
         (chain) => chain.name === config?.to?.blockchain
       );
       const token = tokens.find((t) =>
-        tokensAreEqual(t, config?.to?.token || null)
+        areTokensEqual(t, config?.to?.token || null)
       );
 
       if (chain || (!chain && prevConfigToBlockchain.current)) {

package/src/index.ts

@@ -55,6 +55,7 @@ import {
 import { Networks, WalletTypes } from '@rango-dev/wallets-shared';
 import { PendingSwapNetworkStatus } from 'rango-types';
 
+import { WIDGET_UI_ID as UI_ID } from './constants';
 import { WidgetWallets } from './containers/Wallets';
 import { Widget } from './containers/Widget';
 import { useWidget } from './containers/WidgetInfo';
@@ -105,6 +106,7 @@ export {
   StepEventType,
   StepExecutionEventStatus,
   StepExecutionBlockedEventStatus,
+  UI_ID,
 };
 
 // Internal type exports for Rango

package/src/pages/Home.tsx

@@ -62,7 +62,7 @@ export function Home() {
     setQuoteWarningsConfirmed,
   } = useQuoteStore();
 
-  const fetchMetaStatus = useAppStore().fetchStatus;
+  const { config, fetchStatus: fetchMetaStatus } = useAppStore();
 
   const { connectedWallets, getBalanceFor } = useWalletsStore();
   const { isActiveTab } = useUiStore();
@@ -152,7 +152,7 @@ export function Home() {
           navigate(navigationRoutes.wallets);
         },
         hasBackButton: false,
-        title: i18n.t('Swap'),
+        title: config.title || i18n.t('Swap'),
         suffix: (
           <HomeButtons
             onClickRefresh={

package/src/store/notification.ts

@@ -34,13 +34,13 @@ export const useNotificationStore = createSelectors(
             route: {
               from: {
                 blockchain: fromStep.fromBlockchain,
-                tokenAddress: fromStep.fromSymbolAddress,
-                tokenSymbol: fromStep.fromSymbol,
+                address: fromStep.fromSymbolAddress,
+                symbol: fromStep.fromSymbol,
               },
               to: {
                 blockchain: toStep.toBlockchain,
-                tokenSymbol: toStep.toSymbol,
-                tokenAddress: toStep.toSymbolAddress,
+                address: toStep.toSymbolAddress,
+                symbol: toStep.toSymbol,
               },
             },
           };

package/src/store/slices/config.ts

@@ -3,6 +3,7 @@ import type { StateCreatorWithInitialData } from '../app';
 
 export const DEFAULT_CONFIG: WidgetConfig = {
   apiKey: '',
+  title: undefined,
   multiWallets: true,
   enableNewLiquiditySources: true,
   customDestination: true,

package/src/store/slices/data.ts

@@ -8,7 +8,7 @@ import { httpService as sdk } from '../../services/httpService';
 import { containsText } from '../../utils/common';
 import { isTokenExcludedInConfig } from '../../utils/configs';
 import { sortLiquiditySourcesByGroupTitle } from '../../utils/settings';
-import { tokensAreEqual } from '../../utils/wallets';
+import { areTokensEqual } from '../../utils/wallets';
 
 type BlockchainOptions = {
   type?: 'source' | 'destination';
@@ -163,7 +163,7 @@ export const createDataSlice: StateCreator<
         ? get().config.from?.pinnedTokens
         : get().config.to?.pinnedTokens;
     const pinned = !!pinnedTokens?.some((pinnedToken) =>
-      tokensAreEqual(pinnedToken, token)
+      areTokensEqual(pinnedToken, token)
     );
     return pinned;
   },

package/src/types/config.ts

@@ -184,6 +184,7 @@ export type Features = Partial<
 export type WidgetConfig = {
   apiKey: string;
   apiUrl?: string;
+  title?: string;
   walletConnectProjectId?: string;
   affiliate?: WidgetAffiliate;
   amount?: number;

package/src/types/notification.ts

@@ -8,13 +8,13 @@ import {
 type NotificationRoute = {
   from: {
     blockchain: Step['fromBlockchain'];
-    tokenSymbol: Step['fromSymbol'];
-    tokenAddress: Step['fromSymbolAddress'];
+    symbol: Step['fromSymbol'];
+    address: Step['fromSymbolAddress'];
   };
   to: {
     blockchain: Step['toBlockchain'];
-    tokenSymbol: Step['toSymbol'];
-    tokenAddress: Step['toSymbolAddress'];
+    symbol: Step['toSymbol'];
+    address: Step['toSymbolAddress'];
   };
 };
 

package/src/utils/common.ts

@@ -1,4 +1,4 @@
-import { RANGO_SWAP_BOX_ID } from '../constants';
+import { WIDGET_UI_ID } from '../constants';
 
 export function removeDuplicateFrom<T>(array: T[]): T[] {
   return Array.from(new Set(array));
@@ -33,4 +33,4 @@ export function containsText(text: string, searchText: string): boolean {
 }
 
 export const getContainer = () =>
-  document.getElementById(RANGO_SWAP_BOX_ID) as HTMLElement;
+  document.getElementById(WIDGET_UI_ID.SWAP_BOX_ID) as HTMLElement;

package/src/utils/configs.ts

@@ -3,7 +3,7 @@ import type { Asset, BlockchainMeta, Token } from 'rango-sdk';
 
 import { RANGO_PUBLIC_API_KEY } from '../constants';
 
-import { tokensAreEqual } from './wallets';
+import { areTokensEqual } from './wallets';
 
 export interface Configs {
   API_KEY: string;
@@ -57,10 +57,10 @@ export const isTokenExcludedInConfig = (
   let result = false;
   if (tokensConfig && token) {
     if (Array.isArray(tokensConfig)) {
-      result = !tokensConfig.some((asset) => tokensAreEqual(asset, token));
+      result = !tokensConfig.some((asset) => areTokensEqual(asset, token));
     } else if (!Array.isArray(tokensConfig) && tokensConfig[token.blockchain]) {
       result = tokensConfig[token.blockchain].tokens.some((asset) =>
-        tokensAreEqual(asset, token)
+        areTokensEqual(asset, token)
       );
       const isExcluded = tokensConfig[token.blockchain].isExcluded;
       return (!isExcluded && !result) || (isExcluded && result);

package/src/utils/meta.ts

@@ -1,6 +1,6 @@
 import type { Asset, BlockchainMeta, SwapperMeta, Token } from 'rango-sdk';
 
-import { tokensAreEqual } from './wallets';
+import { areTokensEqual } from './wallets';
 
 export function getBlockchainDisplayNameFor(
   blockchainName: string,
@@ -25,7 +25,7 @@ export function getSwapperDisplayName(
 }
 
 export function findToken(t: Asset, tokens: Token[]) {
-  return tokens.find((token) => tokensAreEqual(token, t)) ?? null;
+  return tokens.find((token) => areTokensEqual(token, t)) ?? null;
 }
 
 export function findBlockchain(name: string, blockchains: BlockchainMeta[]) {

package/src/utils/wallets.ts

@@ -443,7 +443,7 @@ export function sortTokens(
   return tokens;
 }
 
-export function tokensAreEqual(
+export function areTokensEqual(
   tokenA: Pick<Token, 'blockchain' | 'symbol' | 'address'> | null,
   tokenB: Pick<Token, 'blockchain' | 'symbol' | 'address'> | null
 ) {