@rango-dev/widget-embedded 0.12.1-next.32 → 0.12.1-next.33

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

@@ -1 +1 @@
-{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAsC,MAAM,OAAO,CAAC;AA8E3D,wBAAgB,IAAI,sBAyYnB"}
+{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAsC,MAAM,OAAO,CAAC;AA+E3D,wBAAgB,IAAI,sBA2YnB"}

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

@@ -1 +1 @@
-{"version":3,"file":"LiquiditySourcePage.d.ts","sourceRoot":"","sources":["../../src/pages/LiquiditySourcePage.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAkBxC,UAAU,SAAS;IACjB,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,UAAU,EAAE,WAAW,GAAG,SAAS,CAAC;CACrC;AAED,wBAAgB,mBAAmB,CAAC,EAClC,iBAAiB,EACjB,UAAU,GACX,EAAE,SAAS,qBAsHX"}
+{"version":3,"file":"LiquiditySourcePage.d.ts","sourceRoot":"","sources":["../../src/pages/LiquiditySourcePage.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAqBxC,UAAU,SAAS;IACjB,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,UAAU,EAAE,WAAW,GAAG,SAAS,CAAC;CACrC;AAED,wBAAgB,mBAAmB,CAAC,EAClC,iBAAiB,EACjB,UAAU,GACX,EAAE,SAAS,qBAwHX"}

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

@@ -1 +1 @@
-{"version":3,"file":"SettingsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SettingsPage.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,UAAU,SAAS;IACjB,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,YAAY,CAAC,EAAE,iBAAiB,EAAE,WAAW,EAAE,EAAE,SAAS,qBA0JzE"}
+{"version":3,"file":"SettingsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SettingsPage.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,UAAU,SAAS;IACjB,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,wBAAgB,YAAY,CAAC,EAAE,iBAAiB,EAAE,WAAW,EAAE,EAAE,SAAS,qBAgKzE"}

package/dist/utils/meta.d.ts

@@ -1,3 +1,4 @@
 import type { BlockchainMeta } from 'rango-sdk';
 export declare function getBlockchainDisplayNameFor(blockchainName: string, blockchains: BlockchainMeta[]): string | undefined;
+export declare function getBlockchainShortNameFor(blockchainName: string, blockchains: BlockchainMeta[]): string | undefined;
 //# sourceMappingURL=meta.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../src/utils/meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAEhD,wBAAgB,2BAA2B,CACzC,cAAc,EAAE,MAAM,EACtB,WAAW,EAAE,cAAc,EAAE,GAC5B,MAAM,GAAG,SAAS,CAGpB"}
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../src/utils/meta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,WAAW,CAAC;AAEhD,wBAAgB,2BAA2B,CACzC,cAAc,EAAE,MAAM,EACtB,WAAW,EAAE,cAAc,EAAE,GAC5B,MAAM,GAAG,SAAS,CAGpB;AACD,wBAAgB,yBAAyB,CACvC,cAAc,EAAE,MAAM,EACtB,WAAW,EAAE,cAAc,EAAE,GAC5B,MAAM,GAAG,SAAS,CAGpB"}

package/dist/utils/settings.d.ts

@@ -7,4 +7,5 @@ export type UniqueSwappersGroupType = {
     selected: boolean;
 };
 export declare function getUniqueSwappersGroups(supportedSwappers?: string[]): UniqueSwappersGroupType[];
+export declare function sortLiquiditySourcesByGroupTitle(a: UniqueSwappersGroupType, b: UniqueSwappersGroupType): 0 | 1 | -1;
 //# sourceMappingURL=settings.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../../src/utils/settings.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,YAAY,GAAG,KAAK,CAAC;AAElE,MAAM,MAAM,uBAAuB,GAAG;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,mBAAmB,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,wBAAgB,uBAAuB,CACrC,iBAAiB,CAAC,EAAE,MAAM,EAAE,GAC3B,uBAAuB,EAAE,CAuC3B"}
+{"version":3,"file":"settings.d.ts","sourceRoot":"","sources":["../../src/utils/settings.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,mBAAmB,GAAG,QAAQ,GAAG,YAAY,GAAG,KAAK,CAAC;AAElE,MAAM,MAAM,uBAAuB,GAAG;IACpC,EAAE,EAAE,MAAM,CAAC;IACX,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,mBAAmB,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,wBAAgB,uBAAuB,CACrC,iBAAiB,CAAC,EAAE,MAAM,EAAE,GAC3B,uBAAuB,EAAE,CAuC3B;AAED,wBAAgB,gCAAgC,CAC9C,CAAC,EAAE,uBAAuB,EAC1B,CAAC,EAAE,uBAAuB,cAW3B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.12.1-next.32",
+  "version": "0.12.1-next.33",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.js",
@@ -23,7 +23,7 @@
     "@rango-dev/queue-manager-core": "^0.15.1-next.2",
     "@rango-dev/queue-manager-rango-preset": "^0.15.1-next.6",
     "@rango-dev/queue-manager-react": "^0.15.1-next.4",
-    "@rango-dev/ui": "^0.15.1-next.22",
+    "@rango-dev/ui": "^0.15.1-next.23",
     "@rango-dev/wallets-react": "^0.1.1-next.6",
     "@rango-dev/wallets-shared": "^0.15.1-next.4",
     "bignumber.js": "^9.1.1",

package/src/components/BlockchainsSection/BlockchainsSection.tsx

@@ -18,18 +18,22 @@ import { useMetaStore } from '../../store/meta';
 import { Container } from './BlockchainsSection.styles';
 
 const LIST_SIZE = 10;
+const MAX_ITEMS = LIST_SIZE + 1;
 const NUMBER_OF_LOADING = 12;
 
 export function BlockchainsSection(props: PropTypes) {
   const { blockchains, type, blockchain, onChange, onMoreClick } = props;
   const blockchainsList = usePrepareBlockchainList(blockchains, {
-    limit: LIST_SIZE,
+    limit: blockchains.length === MAX_ITEMS ? MAX_ITEMS : LIST_SIZE,
     selected: blockchain?.name,
   });
 
   const loadingStatus = useMetaStore.use.loadingStatus();
   const resetToBlockchain = useBestRouteStore.use.resetToBlockchain();
   const resetFromBlockchain = useBestRouteStore.use.resetFromBlockchain();
+  const showMoreButton =
+    blockchains.length !== MAX_ITEMS && blockchainsList.more.length;
+
   return (
     <div>
       <Divider size={12} />
@@ -66,7 +70,7 @@ export function BlockchainsSection(props: PropTypes) {
               </BlockchainsChip>
             ))}
 
-            {blockchainsList.more.length ? (
+            {showMoreButton ? (
               <BlockchainsChip onClick={onMoreClick}>
                 <Typography variant="body" size="xsmall" color="secondary500">
                   {i18n._('More +{count}', {

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

@@ -8,10 +8,12 @@ import {
   USD_VALUE_MAX_DECIMALS,
   USD_VALUE_MIN_DECIMALS,
 } from '../../constants/routing';
+import { getBlockchainShortNameFor } from '../../utils/meta';
 import { numberToString } from '../../utils/numbers';
 
 export function formatBestRoute(
-  bestRoute: BestRouteResponse
+  bestRoute: BestRouteResponse,
+  blockchains: BlockchainMeta[]
 ): Step[] | undefined {
   return bestRoute.result?.swaps.map((swap) => {
     return {
@@ -19,7 +21,8 @@ export function formatBestRoute(
       from: {
         token: { displayName: swap.from.symbol, image: swap.from.logo },
         chain: {
-          displayName: swap.from.blockchain,
+          displayName:
+            getBlockchainShortNameFor(swap.from.blockchain, blockchains) ?? '',
           image: swap.from.blockchainLogo,
         },
         price: {
@@ -38,7 +41,8 @@ export function formatBestRoute(
       to: {
         token: { displayName: swap.to.symbol, image: swap.to.logo },
         chain: {
-          displayName: swap.to.blockchain,
+          displayName:
+            getBlockchainShortNameFor(swap.to.blockchain, blockchains) ?? '',
           image: swap.to.blockchainLogo,
         },
         price: {

package/src/components/SettingsContainer/SettingsContainer.style.ts

@@ -2,6 +2,7 @@ import { styled } from '@rango-dev/ui';
 
 export const SettingsContainer = styled('div', {
   height: '100%',
+  overflow: 'hidden',
 });
 
 export const LiquiditySourceList = styled('ul', {
@@ -9,7 +10,7 @@ export const LiquiditySourceList = styled('ul', {
   margin: 0,
   listStyle: 'none',
   height: '100%',
-  overflowY: 'visible',
+  overflowY: 'auto',
 });
 
 export const LiquiditySourceSuffix = styled('div', {

package/src/components/SwapDetails/SwapDetails.helpers.tsx

@@ -8,6 +8,7 @@ import {
   TOKEN_AMOUNT_MAX_DECIMALS,
   TOKEN_AMOUNT_MIN_DECIMALS,
 } from '../../constants/routing';
+import { getBlockchainShortNameFor } from '../../utils/meta';
 import { numberToString } from '../../utils/numbers';
 import { isNetworkStatusInWarningState } from '../../utils/swap';
 import { SwapDetailsAlerts } from '../SwapDetailsAlerts';
@@ -15,17 +16,18 @@ import { SwapDetailsAlerts } from '../SwapDetailsAlerts';
 export const RESET_INTERVAL = 2_000;
 export const SECONDS = 60;
 
-export const getSteps = ({ swap, ...args }: GetStep): Step[] => {
+export const getSteps = ({ swap, blockchains, ...args }: GetStep): Step[] => {
   const hasAlreadyProceededToSign = swap.hasAlreadyProceededToSign !== false;
   return swap.steps.map((step, index) => {
     const amountToConvert =
       index === 0 ? swap.inputAmount : swap.steps[index - 1].outputAmount;
     return {
       from: {
-        token: { displayName: step.fromSymbol, image: step.fromLogo || '' },
+        token: { displayName: step.fromSymbol, image: step.fromLogo ?? '' },
         chain: {
-          displayName: step.fromBlockchain,
-          image: step.fromBlockchainLogo || '',
+          displayName:
+            getBlockchainShortNameFor(step.fromBlockchain, blockchains) ?? '',
+          image: step.fromBlockchainLogo ?? '',
         },
         price: {
           value: numberToString(
@@ -38,8 +40,9 @@ export const getSteps = ({ swap, ...args }: GetStep): Step[] => {
       to: {
         token: { displayName: step.toSymbol, image: step.toLogo },
         chain: {
-          displayName: step.toBlockchain,
-          image: step.toBlockchainLogo || '',
+          displayName:
+            getBlockchainShortNameFor(step.toBlockchain, blockchains) ?? '',
+          image: step.toBlockchainLogo ?? '',
         },
         price: {
           value: numberToString(
@@ -49,7 +52,7 @@ export const getSteps = ({ swap, ...args }: GetStep): Step[] => {
           ),
         },
       },
-      swapper: { displayName: step.swapperId, image: step.swapperLogo || '' },
+      swapper: { displayName: step.swapperId, image: step.swapperLogo ?? '' },
       alerts: (
         <SwapDetailsAlerts
           step={step}

package/src/components/SwapDetails/SwapDetails.tsx

@@ -75,7 +75,7 @@ export function SwapDetails(props: SwapDetailsProps) {
     'success' | 'failed' | null
   >(null);
   const {
-    meta: { tokens },
+    meta: { tokens, blockchains },
   } = useMetaStore();
 
   const onCancel = () => {
@@ -151,6 +151,7 @@ export function SwapDetails(props: SwapDetailsProps) {
     showNetworkModal: currentStepNetworkStatus,
     setNetworkModal: setModalState,
     message: stepMessage,
+    blockchains,
   });
   const numberOfSteps = steps.length;
   const [firstStep, lastStep] = [swap.steps[0], swap.steps[numberOfSteps - 1]];

package/src/components/SwapDetailsAlerts/SwapDetailsAlerts.types.ts

@@ -2,6 +2,7 @@ import type { getSwapMessages } from '../../utils/swap';
 import type { ModalState } from '../SwapDetailsModal';
 import type { ConnectResult } from '@rango-dev/wallets-react';
 import type {
+  BlockchainMeta,
   PendingSwap,
   PendingSwapNetworkStatus,
   PendingSwapStep,
@@ -22,7 +23,7 @@ export interface FailedAlertsProps {
   message: ReturnType<typeof getSwapMessages>;
 }
 
-export type GetStep = { swap: PendingSwap } & Omit<
-  SwapAlertsProps,
-  'step' | 'hasAlreadyProceededToSign'
->;
+export type GetStep = {
+  swap: PendingSwap;
+  blockchains: BlockchainMeta[];
+} & Omit<SwapAlertsProps, 'step' | 'hasAlreadyProceededToSign'>;

package/src/pages/ConfirmSwapPage.tsx

@@ -128,7 +128,7 @@ export function ConfirmSwapPage(props: PropTypes) {
   const [showWallets, setShowWallets] = useState(false);
   const setSelectedSwap = useUiStore.use.setSelectedSwap();
   const {
-    meta: { tokens },
+    meta: { tokens, blockchains },
     loadingStatus: loadingMetaStatus,
   } = useMetaStore();
   const slippage = useSettingsStore.use.slippage();
@@ -463,7 +463,7 @@ export function ConfirmSwapPage(props: PropTypes) {
           <BestRoute
             expanded={true}
             tooltipContainer={getContainer()}
-            steps={formatBestRoute(bestRoute) ?? []}
+            steps={formatBestRoute(bestRoute, blockchains) ?? []}
             input={{
               value: numberToString(
                 inputAmount,

package/src/pages/Home.tsx

@@ -41,6 +41,7 @@ import { useUiStore } from '../store/ui';
 import { useWalletsStore } from '../store/wallets';
 import { ButtonState } from '../types';
 import { getContainer } from '../utils/common';
+import { getBlockchainShortNameFor } from '../utils/meta';
 import {
   numberToString,
   secondsToString,
@@ -112,7 +113,7 @@ export function Home() {
   } = useBestRouteStore();
 
   const {
-    meta: { tokens },
+    meta: { tokens, blockchains },
     loadingStatus: loadingMetaStatus,
   } = useMetaStore();
 
@@ -210,7 +211,8 @@ export function Home() {
       from: {
         token: { displayName: swap.from.symbol, image: swap.from.logo },
         chain: {
-          displayName: swap.from.blockchain,
+          displayName:
+            getBlockchainShortNameFor(swap.from.blockchain, blockchains) ?? '',
           image: swap.from.blockchainLogo,
         },
         price: {
@@ -227,7 +229,8 @@ export function Home() {
       to: {
         token: { displayName: swap.to.symbol, image: swap.to.logo },
         chain: {
-          displayName: swap.to.blockchain,
+          displayName:
+            getBlockchainShortNameFor(swap.to.blockchain, blockchains) ?? '',
           image: swap.to.blockchainLogo,
         },
         price: {

package/src/pages/LiquiditySourcePage.tsx

@@ -28,7 +28,10 @@ import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useMetaStore } from '../store/meta';
 import { useSettingsStore } from '../store/settings';
 import { containsText } from '../utils/numbers';
-import { getUniqueSwappersGroups } from '../utils/settings';
+import {
+  getUniqueSwappersGroups,
+  sortLiquiditySourcesByGroupTitle,
+} from '../utils/settings';
 
 interface PropTypes {
   supportedSwappers?: string[];
@@ -76,20 +79,22 @@ export function LiquiditySourcePage({
     });
   };
 
-  const list = liquiditySources.map((sourceItem) => {
-    const { selected, groupTitle, logo } = sourceItem;
-    return {
-      start: <Image src={logo} size={22} type="circular" />,
-      onClick: () => toggleLiquiditySource(groupTitle),
-      end: <Checkbox checked={selected} />,
-      title: (
-        <Typography variant="title" size="xmedium">
-          {i18n.t(groupTitle)}
-        </Typography>
-      ),
-      ...sourceItem,
-    };
-  });
+  const list = liquiditySources
+    .sort(sortLiquiditySourcesByGroupTitle)
+    .map((sourceItem) => {
+      const { selected, groupTitle, logo } = sourceItem;
+      return {
+        start: <Image src={logo} size={22} type="circular" />,
+        onClick: () => toggleLiquiditySource(groupTitle),
+        end: <Checkbox checked={selected} />,
+        title: (
+          <Typography variant="title" size="xmedium">
+            {i18n.t(groupTitle)}
+          </Typography>
+        ),
+        ...sourceItem,
+      };
+    });
 
   const searchHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value;
@@ -123,7 +128,7 @@ export function LiquiditySourcePage({
           fullWidth
           color="light"
           variant="contained"
-          placeholder={i18n.t('Swap {sourceType}', { sourceType })}
+          placeholder={i18n.t('Search {sourceType}', { sourceType })}
           onChange={searchHandler}
         />
         {loadingMetaStatus === 'loading' && <LoadingLiquiditySourceList />}

package/src/pages/SettingsPage.tsx

@@ -110,16 +110,18 @@ export function SettingsPage({ supportedSwappers, singleTheme }: PropTypes) {
     onClick: () => navigate(navigationRoutes.exchanges),
   };
 
-  const languageItem = {
-    id: 'language-item',
-    title: (
-      <Typography variant="title" size="xmedium">
-        {i18n.t('Language')}
-      </Typography>
-    ),
-    end: <ChevronRightIcon color="gray" />,
-    onClick: () => navigate(navigationRoutes.languages),
-  };
+  /*
+   * const languageItem = {
+   *   id: 'language-item',
+   *   title: (
+   *     <Typography variant="title" size="xmedium">
+   *       {i18n.t('Language')}
+   *     </Typography>
+   *   ),
+   *   end: <ChevronRightIcon color="gray" />,
+   *   onClick: () => navigate(navigationRoutes.languages),
+   * };
+   */
 
   const themeItem = {
     id: 'theme-item',
@@ -160,7 +162,11 @@ export function SettingsPage({ supportedSwappers, singleTheme }: PropTypes) {
     onClick: toggleInfiniteApprove,
   };
 
-  const settingItems = [bridgeItem, exchangeItem, languageItem];
+  const settingItems = [
+    bridgeItem,
+    exchangeItem,
+    // languageItem
+  ];
   if (!singleTheme) {
     settingItems.push(themeItem);
   }

package/src/utils/meta.ts

@@ -7,3 +7,10 @@ export function getBlockchainDisplayNameFor(
   return blockchains.find((blockchain) => blockchain.name === blockchainName)
     ?.displayName;
 }
+export function getBlockchainShortNameFor(
+  blockchainName: string,
+  blockchains: BlockchainMeta[]
+): string | undefined {
+  return blockchains.find((blockchain) => blockchain.name === blockchainName)
+    ?.shortName;
+}

package/src/utils/settings.ts

@@ -55,3 +55,18 @@ export function getUniqueSwappersGroups(
 
   return uniqueSupportedSwappersGroups;
 }
+
+export function sortLiquiditySourcesByGroupTitle(
+  a: UniqueSwappersGroupType,
+  b: UniqueSwappersGroupType
+) {
+  if (a.groupTitle < b.groupTitle) {
+    return -1;
+  }
+
+  if (a.groupTitle > b.groupTitle) {
+    return 1;
+  }
+
+  return 0;
+}