@rango-dev/widget-embedded 0.14.1-next.9 → 0.15.0

package/src/components/NoRoutes/NoRoutes.tsx

@@ -40,14 +40,14 @@ export function NoRoutes(props: PropTypes) {
       <NoRouteIcon size={24} color="gray" />
       <Divider size={4} />
       <Typography variant="title" size="small">
-        {errorMessages.noRoutesError.title}
+        {errorMessages().noRoutesError.title}
       </Typography>
       {!!info.description && (
         <Typography
           variant="body"
           size="small"
           align="center"
-          color="neutral900">
+          color="neutral700">
           {info.description}
         </Typography>
       )}

package/src/components/NotificationContent/NotificationContent.tsx

@@ -72,7 +72,7 @@ export function NotificationContent() {
                 key={notificationItem.requestId}
                 onClick={() => handleOnClick(notificationItem.requestId)}
                 title={
-                  <Typography variant="body" size="small" color="$neutral900">
+                  <Typography variant="body" size="small" color="$neutral700">
                     {i18n.t(notificationItem.event.message)}
                   </Typography>
                 }

package/src/components/NotificationContent/NotificationNotFound.tsx

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

package/src/components/RouteErrors/RouteErrors.tsx

@@ -42,8 +42,8 @@ export function RouteErrors(props: PropTypes) {
               <Alert
                 title={
                   highValueLoss
-                    ? errorMessages.highValueLossError.title
-                    : errorMessages.unknownPriceError.title
+                    ? errorMessages().highValueLossError.title
+                    : errorMessages().unknownPriceError.title
                 }
                 type={
                   highValueLoss && !!percentageChange?.lt(WARNING_LEVEL_LIMIT)

package/src/components/RouteErrors/RouteErrorsModal.tsx

@@ -87,14 +87,14 @@ export function RouteErrorsModal(props: ModalPropTypes) {
       {highValueLoss ? (
         <MessageBox
           type={type}
-          title={errorMessages.highValueLossError.impactTitle}
-          description={errorMessages.highValueLossError.description}
+          title={errorMessages().highValueLossError.impactTitle}
+          description={errorMessages().highValueLossError.description}
         />
       ) : (
         <MessageBox
           type={type}
-          title={errorMessages.unknownPriceError.impactTitle}
-          description={errorMessages.unknownPriceError.description}
+          title={errorMessages().unknownPriceError.impactTitle}
+          description={errorMessages().unknownPriceError.description}
         />
       )}
       {highValueLoss && (
@@ -121,8 +121,8 @@ export function RouteErrorsModal(props: ModalPropTypes) {
           navigate(navigationRoutes.confirmSwap);
         }}>
         {highValueLoss
-          ? errorMessages.highValueLossError.confirmMessage
-          : errorMessages.unknownPriceError.confirmMessage}
+          ? errorMessages().highValueLossError.confirmMessage
+          : errorMessages().unknownPriceError.confirmMessage}
       </Button>
     </Modal>
   );

package/src/components/RouteErrors/RouteErrorsModalItem.tsx

@@ -10,7 +10,7 @@ export function RouteErrorsModalItem(props: ModalContentData) {
 
   return (
     <Item>
-      <Typography size="medium" variant="label" color="neutral800">
+      <Typography size="medium" variant="label" color="neutral600">
         {title}
       </Typography>
       <Typography

package/src/components/Slippage/SlippageTooltipContent.tsx

@@ -7,7 +7,7 @@ import { SlippageTooltipContainer } from './Slippage.styles';
 export function SlippageTooltipContent() {
   return (
     <SlippageTooltipContainer>
-      <Typography variant="label" size="medium" color="neutral900">
+      <Typography variant="label" size="medium" color="neutral700">
         {i18n.t(
           'Your transaction will be reverted if the price changes unfavorably by more than this percentage'
         )}

package/src/components/SwapDetails/SwapDetails.Placeholder.tsx

@@ -38,11 +38,11 @@ export function SwapDetailsPlaceholder(props: SwapDetailsPlaceholderPropTypes) {
         <Container>
           <HeaderDetails>
             <div className="row">
-              <Typography variant="label" size="large" color="neutral900">
+              <Typography variant="label" size="large" color="neutral700">
                 {`${i18n.t('Request ID')}:`}
               </Typography>
               <div className="request-id">
-                <Typography variant="label" size="small" color="neutral900">
+                <Typography variant="label" size="small" color="neutral700">
                   <Skeleton width={60} height={10} variant="rounded" />
                 </Typography>
                 <IconButton variant="ghost">
@@ -51,10 +51,10 @@ export function SwapDetailsPlaceholder(props: SwapDetailsPlaceholderPropTypes) {
               </div>
             </div>
             <div className="row">
-              <Typography variant="label" size="large" color="neutral900">
+              <Typography variant="label" size="large" color="neutral700">
                 {`${i18n.t('Created at')}:`}
               </Typography>
-              <Typography variant="label" size="small" color="neutral900">
+              <Typography variant="label" size="small" color="neutral700">
                 <Skeleton width={60} height={10} variant="rounded" />
               </Typography>
             </div>
@@ -67,9 +67,8 @@ export function SwapDetailsPlaceholder(props: SwapDetailsPlaceholderPropTypes) {
           <NotFound
             title={i18n.t('Not found')}
             description={i18n.t({
-              id: 'swapNotFound',
+              id: 'Swap with request ID = {requestId} not found.',
               values: { requestId },
-              message: 'Swap with request ID = {requestId} not found.',
             })}
           />
         </PlaceholderContainer>

package/src/components/SwapDetails/SwapDetails.tsx

@@ -206,9 +206,7 @@ export function SwapDetails(props: SwapDetailsProps) {
   const completeModalDesc =
     swap.status === 'success'
       ? i18n.t({
-          id: 'receivedMessage',
-          message:
-            'You have received {amount} {token} in {conciseAddress} wallet on {chain} chain.',
+          id: 'You have received {amount} {token} in {conciseAddress} wallet on {chain} chain.',
           values: {
             amount: numberToString(
               outputAmount,
@@ -226,9 +224,7 @@ export function SwapDetails(props: SwapDetailsProps) {
       : `${i18n.t('Transaction was not sent.')} ${
           lastConvertedTokenInFailedSwap
             ? i18n.t({
-                id: 'remainSymbol',
-                message:
-                  '{amount} {symbol} on {blockchain} remain in your wallet',
+                id: '{amount} {symbol} on {blockchain} remain in your wallet',
                 values: {
                   amount: lastConvertedTokenInFailedSwap.outputAmount,
                   symbol: lastConvertedTokenInFailedSwap.symbol,
@@ -281,11 +277,11 @@ export function SwapDetails(props: SwapDetailsProps) {
       <Container>
         <HeaderDetails>
           <div className="row">
-            <Typography variant="label" size="large" color="neutral900">
+            <Typography variant="label" size="large" color="neutral700">
               {`${i18n.t('Request ID')}:`}
             </Typography>
             <div className="request-id">
-              <Typography variant="label" size="small" color="neutral900">
+              <Typography variant="label" size="small" color="neutral700">
                 {requestId}
               </Typography>
               <IconButton
@@ -296,10 +292,10 @@ export function SwapDetails(props: SwapDetailsProps) {
             </div>
           </div>
           <div className="row">
-            <Typography variant="label" size="large" color="neutral900">
+            <Typography variant="label" size="large" color="neutral700">
               {`${i18n.t('Created at')}:`}
             </Typography>
-            <Typography variant="label" size="small" color="neutral900">
+            <Typography variant="label" size="small" color="neutral700">
               {swapDate}
             </Typography>
           </div>

package/src/components/SwapDetailsModal/SwapDetailsCompleteModal.tsx

@@ -52,7 +52,7 @@ export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
           <Typography
             variant="body"
             size="medium"
-            color="neutral900"
+            color="neutral700"
             align="center">
             {description}
           </Typography>

package/src/components/SwapsGroup/SwapsGroup.tsx

@@ -34,7 +34,7 @@ export function SwapsGroup(props: PropTypes) {
                 <Typography
                   variant="label"
                   size="medium"
-                  color="neutral800"
+                  color="neutral600"
                   className="group-title">
                   {i18n.t(group.title)}
                 </Typography>
@@ -68,7 +68,7 @@ export function SwapsGroup(props: PropTypes) {
                 <Typography
                   variant="label"
                   size="medium"
-                  color="neutral800"
+                  color="neutral600"
                   className="group-title">
                   {i18n.t(group.title)}
                 </Typography>

package/src/components/TokenList/TokenList.styles.ts

@@ -40,7 +40,7 @@ export const List = styled('ul', {
         '& a': {
           fontSize: '$12',
           lineHeight: '$16',
-          color: '$neutral800',
+          color: '$neutral600',
           textDecoration: 'none',
         },
       },

package/src/components/TokenList/TokenList.tsx

@@ -239,7 +239,7 @@ export function TokenList(props: PropTypes) {
                         {token.balance?.usdValue && (
                           <Typography
                             variant="body"
-                            color="neutral800"
+                            color="neutral600"
                             size="xsmall">
                             {`$${token.balance?.usdValue}`}
                           </Typography>

package/src/constants/configs.ts

@@ -0,0 +1 @@
+export const BLOCKCHAIN_LIST_SIZE = 10;

package/src/constants/errors.ts

@@ -4,54 +4,57 @@ import { i18n } from '@lingui/core';
 
 import { ConfirmSwapErrorTypes } from '../types';
 
-export const errorMessages = {
-  genericServerError: i18n.t('Failed Network, Please retry your swap.'),
-  liquiditySourcesError: {
-    title: i18n.t('Please reset your liquidity sources.'),
-    description: i18n.t(
-      'You have limited the liquidity sources and this might result in Rango finding no routes. Please consider resetting your liquidity sources'
-    ),
-  },
-  noRoutesError: {
-    title: i18n.t('No Routes Found'),
-    description:
-      "Reasons why Rango couldn't find a route: low liquidity on token, very low input amount or no routes available for the selected input/output token combination.",
-  },
-  bridgeLimitErrors: {
-    increaseAmount: i18n.t('Bridge Limit Error: Please increase your amount'),
-    decreaseAmount: i18n.t('Bridge Limit Error: Please decrease your amount'),
-  },
-  highValueLossError: {
-    impactTitle: i18n.t('High Price Impact'),
-    title: i18n.t('Price impact is too high!'),
-    description: i18n.t(
-      'The price impact is significantly higher than the allowed amount. If you are sure, continue, otherwise, change the swap.'
-    ),
-    confirmMessage: i18n.t('Confirm High price impact'),
-  },
-  routeUpdatedWithHighValueLoss: {
-    title: i18n.t(
-      'Route updated and price impact is too high, try again later!'
-    ),
-  },
-  unknownPriceError: {
-    impactTitle: i18n.t('USD Price Unknown'),
-    title: i18n.t('USD Price Unknown, Cannot calculate Price Impact.'),
-    description: i18n.t(
-      'USD Price Unknown, Cannot calculate Price Impact. The price impact may be higher than usual. Are you sure to continue the Swap?'
-    ),
-    confirmMessage: i18n.t('Confirm USD Price Unknown'),
-  },
+export const errorMessages = () => {
+  return {
+    genericServerError: i18n.t('Failed Network, Please retry your swap.'),
+    liquiditySourcesError: {
+      title: i18n.t('Please reset your liquidity sources.'),
+      description: i18n.t(
+        'You have limited the liquidity sources and this might result in Rango finding no routes. Please consider resetting your liquidity sources'
+      ),
+    },
+    noRoutesError: {
+      title: i18n.t('No Routes Found'),
+      description: i18n.t(
+        "Reasons why Rango couldn't find a route: low liquidity on token, very low input amount or no routes available for the selected input/output token combination."
+      ),
+    },
+    bridgeLimitErrors: {
+      increaseAmount: i18n.t('Bridge Limit Error: Please increase your amount'),
+      decreaseAmount: i18n.t('Bridge Limit Error: Please decrease your amount'),
+    },
+    highValueLossError: {
+      impactTitle: i18n.t('High Price Impact'),
+      title: i18n.t('Price impact is too high!'),
+      description: i18n.t(
+        'The price impact is significantly higher than the allowed amount. If you are sure, continue, otherwise, change the swap.'
+      ),
+      confirmMessage: i18n.t('Confirm High price impact'),
+    },
+    routeUpdatedWithHighValueLoss: {
+      title: i18n.t(
+        'Route updated and price impact is too high, try again later!'
+      ),
+    },
+    unknownPriceError: {
+      impactTitle: i18n.t('USD Price Unknown'),
+      title: i18n.t('USD Price Unknown, Cannot calculate Price Impact.'),
+      description: i18n.t(
+        'USD Price Unknown, Cannot calculate Price Impact. The price impact may be higher than usual. Are you sure to continue the Swap?'
+      ),
+      confirmMessage: i18n.t('Confirm USD Price Unknown'),
+    },
+  };
 };
 
 export function getConfirmSwapErrorMessage(error: ConfirmSwapError) {
   switch (error.type) {
     case ConfirmSwapErrorTypes.NO_ROUTE:
-      return error.diagnosisMessage ?? errorMessages.noRoutesError.title;
+      return error.diagnosisMessage ?? errorMessages().noRoutesError.title;
     case ConfirmSwapErrorTypes.REQUEST_FAILED:
-      return errorMessages.genericServerError;
+      return errorMessages().genericServerError;
     case ConfirmSwapErrorTypes.ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS:
-      return errorMessages.routeUpdatedWithHighValueLoss.title;
+      return errorMessages().routeUpdatedWithHighValueLoss.title;
     default:
       return '';
   }

package/src/constants/languages.ts

@@ -0,0 +1,19 @@
+import type { FlagPropTypes, Language } from '@rango-dev/ui';
+
+import { English, French, Japanese, Spanish } from '@rango-dev/ui';
+
+export type LanguageItem = {
+  title: string;
+  label: string;
+  local: Language;
+  SVGFlag: React.ComponentType<FlagPropTypes>;
+};
+
+export const LANGUAGES: LanguageItem[] = [
+  { title: 'English', label: 'English', local: 'en', SVGFlag: English },
+  { title: 'Spanish', label: 'Español', local: 'es', SVGFlag: Spanish },
+  { title: 'French', label: 'Français', local: 'fr', SVGFlag: French },
+  { title: 'Japanese', label: '日本語', local: 'ja', SVGFlag: Japanese },
+];
+
+export const DEFAULT_LANGUAGE = 'en';

package/src/constants/messages.ts

@@ -1,8 +1,10 @@
 import { i18n } from '@lingui/core';
 
-export const swapButtonTitles = {
-  connectWallet: i18n.t('Connect Wallet'),
-  swap: i18n.t('Swap'),
-  swapAnyway: i18n.t('Swap anyway'),
-  ethRouteWarning: i18n.t('The route goes through Ethereum. Continue?'),
+export const swapButtonTitles = () => {
+  return {
+    connectWallet: i18n.t('Connect Wallet'),
+    swap: i18n.t('Swap'),
+    swapAnyway: i18n.t('Swap anyway'),
+    ethRouteWarning: i18n.t('The route goes through Ethereum. Continue?'),
+  };
 };

package/src/hooks/useConfirmSwap.ts

@@ -70,7 +70,7 @@ function throwErrorIfResponseIsNotValid(
   params: { inputUsdValue: BigNumber | null; outputUsdValue: number | null }
 ) {
   if (!response.result) {
-    throw new Error(errorMessages.noRoutesError.title, {
+    throw new Error(errorMessages().noRoutesError.title, {
       cause: {
         type: ConfirmSwapErrorTypes.NO_ROUTE,
         diagnosisMessage: response.diagnosisMessages?.[0],

package/src/hooks/useLanguage.ts

@@ -0,0 +1,27 @@
+import type { LanguageItem } from '../constants/languages';
+
+import { type Language } from '@rango-dev/ui';
+
+import { DEFAULT_LANGUAGE, LANGUAGES } from '../constants/languages';
+import { useSettingsStore } from '../store/settings';
+
+interface UseLanguage {
+  languages: LanguageItem[];
+  defaultLanguage: Language;
+  activeLanguage: Language;
+  changeLanguage: (language: Language) => void;
+}
+
+export function useLanguage(): UseLanguage {
+  const language = useSettingsStore.use.language();
+  const setLanguage = useSettingsStore.use.setLanguage();
+  const languages = LANGUAGES;
+  const defaultLanguage = DEFAULT_LANGUAGE;
+
+  return {
+    activeLanguage: language,
+    languages,
+    defaultLanguage,
+    changeLanguage: setLanguage,
+  };
+}

package/src/hooks/usePrepareBlockchainList/index.ts

@@ -0,0 +1 @@
+export { usePrepareBlockchainList } from './usePrepareBlockchainList';

package/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.constants.ts

@@ -0,0 +1 @@
+export const MOST_USED_BLOCKChAINS = ['ETH', 'COSMOS', 'OSMOSIS'];

package/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.helpers.ts

@@ -0,0 +1,108 @@
+import type { PrepareListOptions } from './usePrepareBlockchainList.types';
+import type { BlockchainMeta } from 'rango-sdk';
+
+import { MOST_USED_BLOCKChAINS } from './usePrepareBlockchainList.constants';
+
+export function prepare(
+  blockchains: BlockchainMeta[],
+  preferredBlockchains: string[],
+  options?: PrepareListOptions
+) {
+  /*
+   * TODO:
+   * We copying the `blockchains` which can causes performance penalties but we should because we are mutating the original object.
+   * A better way to solve the problem maybe is using new JS features like Use toSpliced() but
+   * we can not use it right now because we need to upgrade our toolings first.
+   */
+  const list: BlockchainMeta[] = JSON.parse(JSON.stringify(blockchains));
+  let more: BlockchainMeta[] = [];
+
+  list.sort(sortByMostUsedBlockchains);
+
+  // Checking `limit` has set and it should be more than of the list items.
+  if (!!options?.limit && blockchains.length > options.limit) {
+    const start = options.limit;
+    let preferredBlockchainsWithoutMainList = preferredBlockchains;
+
+    if (preferredBlockchains.length <= options.limit) {
+      /*
+       * For first X (limit) numbers, we need to remove them from preferred if exists.
+       */
+      for (let i = 0; i < options.limit; i++) {
+        const blockchain = list[i];
+        preferredBlockchainsWithoutMainList =
+          preferredBlockchainsWithoutMainList.filter((preferredBlockchain) => {
+            return blockchain.name !== preferredBlockchain;
+          });
+      }
+    }
+    list.sort(
+      generateSortByPreferredBlockchainsFor(preferredBlockchainsWithoutMainList)
+    );
+
+    /*
+     * Splice will modify the original list and returns the deleted items
+     * We use the deleted items as `more`
+     */
+    more = list.splice(start);
+  }
+  return {
+    list,
+    more,
+  };
+}
+
+/** There is a hardcoded list of blockchains that we want to show them first in the list. */
+export function sortByMostUsedBlockchains(
+  a: BlockchainMeta,
+  b: BlockchainMeta
+) {
+  const mostUsed = MOST_USED_BLOCKChAINS;
+  const aIndexInMostUsed = mostUsed.findIndex((token) => token === a.name);
+  const bIndexInMostUsed = mostUsed.findIndex((token) => token === b.name);
+  const aIsMostUsed = aIndexInMostUsed > -1;
+  const bIsMostUsed = bIndexInMostUsed > -1;
+
+  if (aIsMostUsed && bIsMostUsed) {
+    return aIndexInMostUsed > bIndexInMostUsed ? 1 : -1;
+  }
+
+  if (aIsMostUsed) {
+    return -1;
+  }
+
+  if (bIsMostUsed) {
+    return 1;
+  }
+
+  return 0;
+}
+
+export function generateSortByPreferredBlockchainsFor(
+  preferredBlockchains: string[]
+) {
+  return function sortByPreferred(a: BlockchainMeta, b: BlockchainMeta) {
+    const aIndexInPreferred = preferredBlockchains.findIndex(
+      (blockchain) => blockchain === a.name
+    );
+    const bIndexInPreferred = preferredBlockchains.findIndex(
+      (blockchain) => blockchain === b.name
+    );
+
+    const aIsPreferred = aIndexInPreferred > -1;
+    const bIsPreferred = bIndexInPreferred > -1;
+
+    if (aIsPreferred && bIsPreferred) {
+      return aIndexInPreferred > bIndexInPreferred ? 1 : -1;
+    }
+
+    if (preferredBlockchains.includes(a.name)) {
+      return -1;
+    }
+    if (preferredBlockchains.includes(b.name)) {
+      return 1;
+    }
+
+    return 0;
+  };
+}