@rango-dev/widget-embedded 0.12.1-next.3 → 0.12.1-next.30

package/src/components/WalletModal/index.ts

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

package/src/components/WidgetEvents.tsx

@@ -1,22 +1,27 @@
-import { useEffect } from 'react';
 import {
-  useEvents,
+  isApprovalTX,
   MainEvents,
+  RouteEventType,
   StepEventType,
   StepExecutionEventStatus,
-  isApprovalTX,
+  useEvents,
 } from '@rango-dev/queue-manager-rango-preset';
+import { useEffect } from 'react';
+
+import { useNotificationStore } from '../store/notification';
 import { useWalletsStore } from '../store/wallets';
+import { validBlockedStatuses } from '../types/notification';
 
 export function WidgetEvents() {
   const connectedWallets = useWalletsStore.use.connectedWallets();
   const getWalletsDetails = useWalletsStore.use.getWalletsDetails();
-
+  const setNotification = useNotificationStore.use.setNotification();
+  const setAsRead = useNotificationStore.use.setAsRead();
   const widgetEvents = useEvents();
 
   useEffect(() => {
     widgetEvents.on(MainEvents.StepEvent, (widgetEvent) => {
-      const { event, step } = widgetEvent;
+      const { event, step, route } = widgetEvent;
       const shouldRefetchBalance =
         (event.type === StepEventType.TX_EXECUTION &&
           event.status === StepExecutionEventStatus.TX_SENT &&
@@ -36,6 +41,33 @@ export function WidgetEvents() {
         fromAccount && getWalletsDetails([fromAccount]);
         toAccount && getWalletsDetails([toAccount]);
       }
+      if (
+        (event.type === StepEventType.TX_EXECUTION_BLOCKED &&
+          validBlockedStatuses.includes(event.status)) ||
+        event.type === StepEventType.FAILED
+      ) {
+        setNotification(event, route);
+      } else if (
+        event.type === StepEventType.TX_EXECUTION ||
+        event.type === StepEventType.CHECK_STATUS
+      ) {
+        setAsRead(route.requestId);
+      }
+    });
+
+    return () => widgetEvents.all.clear();
+  }, [widgetEvents, connectedWallets.length]);
+
+  useEffect(() => {
+    widgetEvents.on(MainEvents.RouteEvent, (widgetEvent) => {
+      const { event, route } = widgetEvent;
+
+      if (
+        event.type === RouteEventType.FAILED ||
+        event.type === RouteEventType.SUCCEEDED
+      ) {
+        setNotification(event, route);
+      }
     });
 
     return () => widgetEvents.all.clear();

package/src/constants/errors.ts

@@ -1,3 +1,58 @@
+import type { ConfirmSwapError } from '../types';
+
+import { i18n } from '@lingui/core';
+
+import { ConfirmSwapErrorTypes } from '../types';
+
 export const errorMessages = {
-  genericServerError: 'Error connecting server, please reload the app and try again',
+  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 function getConfirmSwapErrorMessage(error: ConfirmSwapError) {
+  switch (error.type) {
+    case ConfirmSwapErrorTypes.NO_ROUTE:
+      return error.diagnosisMessage ?? errorMessages.noRoutesError.title;
+    case ConfirmSwapErrorTypes.REQUEST_FAILED:
+      return errorMessages.genericServerError;
+    case ConfirmSwapErrorTypes.ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS:
+      return errorMessages.routeUpdatedWithHighValueLoss.title;
+    default:
+      return '';
+  }
+}

package/src/constants/messages.ts

@@ -0,0 +1,8 @@
+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?'),
+};

package/src/constants/navigationRoutes.ts

@@ -1,11 +1,15 @@
 export const navigationRoutes = {
   home: '/',
-  fromChain: 'from-chain',
-  fromToken: 'from-token',
-  toChain: 'to-chain',
-  toToken: 'to-token',
+  fromSwap: 'from-swap',
+  fromBlockchain: '/from-swap/blockchains',
+  toBlockchain: '/to-swap/blockchains',
+  toSwap: 'to-swap',
   settings: 'settings',
   liquiditySources: '/settings/liquidity-sources',
+  themes: '/settings/themes',
+  bridges: '/settings/bridges',
+  exchanges: '/settings/exchanges',
+  languages: '/settings/languages',
   swaps: 'swaps',
   wallets: 'wallets',
   confirmSwap: 'confirm-swap',

package/src/constants/routing.ts

@@ -0,0 +1,17 @@
+export const LOW_PRICE_IMPACT = -3;
+export const HIGHT_PRICE_IMPACT = -10;
+
+export const TOKEN_AMOUNT_MIN_DECIMALS = 6;
+export const TOKEN_AMOUNT_MAX_DECIMALS = 6;
+
+export const USD_VALUE_MIN_DECIMALS = 4;
+export const USD_VALUE_MAX_DECIMALS = 4;
+
+export const GAS_FEE_MIN_DECIMALS = 2;
+export const GAS_FEE_MAX_DECIMALS = 2;
+
+export const PERCENTAGE_CHANGE_MIN_DECIMALS = 2;
+export const PERCENTAGE_CHANGE_MAX_DECIMALS = 2;
+
+export const BALANCE_MIN_DECIMALS = 8;
+export const BALANCE_MAX_DECIMALS = 8;

package/src/constants/searchParams.ts

@@ -1,7 +1,7 @@
 export enum SearchParams {
-  'FROM_CHAIN' = 'fromChain',
+  'FROM_CHAIN' = 'fromBlockchain',
   'FROM_TOKEN' = 'fromToken',
-  'TO_CHAIN' = 'toChain',
+  'TO_CHAIN' = 'toBlockchain',
   'TO_TOKEN' = 'toToken',
   'FROM_AMOUNT' = 'fromAmount',
 }

package/src/constants/swapSettings.ts

@@ -1,4 +1,8 @@
-export const SLIPPAGES = [0.5, 1, 3, 5, 8, 13, 20];
+const LOW = 0.5;
+const MEDIUM = 1;
+const HIGH = 3;
+
+export const SLIPPAGES = [LOW, MEDIUM, HIGH];
 
 export const DEFAULT_SLIPPAGE = 1;
 

package/src/constants/wallets.ts

@@ -0,0 +1,3 @@
+import { WalletTypes } from '@rango-dev/wallets-shared';
+
+export const EXCLUDED_WALLETS = [WalletTypes.LEAP];

package/src/constants/warnings.ts

@@ -0,0 +1,26 @@
+import type { RouteWarning } from '../types';
+
+import { i18n } from '@lingui/core';
+
+import { RouteWarningType } from '../types';
+
+export function getRouteWarningMessage(warning: RouteWarning) {
+  switch (warning.type) {
+    case RouteWarningType.ROUTE_UPDATED:
+      return i18n.t('Route has been updated.');
+    case RouteWarningType.ROUTE_AND_OUTPUT_AMOUNT_UPDATED:
+      return i18n.t(
+        'Output amount changed to {newOutputAmount} ({percentageChange}% change).',
+        {
+          newOutputAmount: warning.newOutputAmount,
+          percentageChange: warning.percentageChange,
+        }
+      );
+    case RouteWarningType.ROUTE_SWAPPERS_UPDATED:
+      return i18n.t('Route swappers has been updated.');
+    case RouteWarningType.ROUTE_COINS_UPDATED:
+      return i18n.t('Route internal coins has been updated.');
+    default:
+      return '';
+  }
+}

package/src/globalStyles.ts

@@ -1,12 +1,9 @@
 import { globalCss } from '@rango-dev/ui';
 
-export const globalFont = (fontFamily: string) =>
+export const globalFont = () =>
   globalCss({
     '@import': [
       "url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap')",
       "url('https://fonts.cdnfonts.com/css/times-new-roman')",
     ],
-    body: {
-      fontFamily,
-    },
   })();