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

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/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.2",
+  "version": "0.21.1-next.3",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -47,4 +47,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/readme.md

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

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/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/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/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/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/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
 ) {