@rango-dev/widget-embedded 0.12.1-next.2 → 0.12.1-next.21

package/src/components/UpdateUrl.tsx

@@ -4,10 +4,11 @@ import {
   useLocation,
   useSearchParams,
 } from 'react-router-dom';
+
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { SearchParams } from '../constants/searchParams';
 import { useBestRouteStore } from '../store/bestRoute';
 import { useMetaStore } from '../store/meta';
-import { SearchParams } from '../constants/searchParams';
-import { navigationRoutes } from '../constants/navigationRoutes';
 import { useUiStore } from '../store/ui';
 import { searchParamsToToken } from '../utils/routing';
 
@@ -17,13 +18,13 @@ export function UpdateUrl() {
   const location = useLocation();
   const firstRenderSearchParams = useRef(location.search);
   const searchParamsRef = useRef<Record<string, string>>({});
-  const fromChain = useBestRouteStore.use.fromChain();
-  const toChain = useBestRouteStore.use.toChain();
+  const fromBlockchain = useBestRouteStore.use.fromBlockchain();
+  const toBlockchain = useBestRouteStore.use.toBlockchain();
   const fromToken = useBestRouteStore.use.fromToken();
   const toToken = useBestRouteStore.use.toToken();
-  const setFromChain = useBestRouteStore.use.setFromChain();
+  const setFromBlockchain = useBestRouteStore.use.setFromBlockchain();
   const setFromToken = useBestRouteStore.use.setFromToken();
-  const setToChain = useBestRouteStore.use.setToChain();
+  const setToBlockchain = useBestRouteStore.use.setToBlockchain();
   const setToToken = useBestRouteStore.use.setToToken();
   const inputAmount = useBestRouteStore.use.inputAmount();
   const setInputAmount = useBestRouteStore.use.setInputAmount();
@@ -41,7 +42,9 @@ export function UpdateUrl() {
     searchParamsRef.current = params;
     const requestId =
       location.pathname.split(navigationRoutes.swaps + '/')[1] || null;
-    if (requestId) setSelectedSwap(requestId);
+    if (requestId) {
+      setSelectedSwap(requestId);
+    }
   }, []);
 
   useEffect(() => {
@@ -59,12 +62,14 @@ export function UpdateUrl() {
         fromAmount =
           searchParamsRef.current[SearchParams.FROM_AMOUNT] || inputAmount;
       } else {
-        if (location.state === 'redirect') return;
-        fromChainString = fromChain?.name || '';
+        if (location.state === 'redirect') {
+          return;
+        }
+        fromChainString = fromBlockchain?.name || '';
         fromTokenString =
           (fromToken?.symbol || '') +
           (fromToken?.address ? `--${fromToken?.address}` : '');
-        toChainString = toChain?.name || '';
+        toChainString = toBlockchain?.name || '';
         toTokenString =
           (toToken?.symbol || '') +
           (toToken?.address ? `--${toToken?.address}` : '');
@@ -88,7 +93,14 @@ export function UpdateUrl() {
       );
     }
     firstRender.current = false;
-  }, [location.pathname, inputAmount, fromChain, fromToken, toChain, toToken]);
+  }, [
+    location.pathname,
+    inputAmount,
+    fromBlockchain,
+    fromToken,
+    toBlockchain,
+    toToken,
+  ]);
 
   useEffect(() => {
     if (loadingStatus === 'success') {
@@ -97,31 +109,37 @@ export function UpdateUrl() {
       const toChainString = searchParams.get(SearchParams.TO_CHAIN);
       const toTokenString = searchParams.get(SearchParams.TO_TOKEN);
       const fromAmount = searchParams.get(SearchParams.FROM_AMOUNT);
-      const fromChain = blockchains.find(
+      const fromBlockchain = blockchains.find(
         (blockchain) => blockchain.name === fromChainString
       );
       const fromToken = searchParamsToToken(
         tokens,
         fromTokenString,
-        fromChain || null
+        fromBlockchain || null
       );
-      const toChain = blockchains.find(
+      const toBlockchain = blockchains.find(
         (blockchain) => blockchain.name === toChainString
       );
       const toToken = searchParamsToToken(
         tokens,
         toTokenString,
-        toChain || null
+        toBlockchain || null
       );
-      if (!!fromChain) {
-        setFromChain(fromChain);
-        if (!!fromToken) setFromToken(fromToken);
+      if (!!fromBlockchain) {
+        setFromBlockchain(fromBlockchain);
+        if (!!fromToken) {
+          setFromToken(fromToken);
+        }
+      }
+      if (!!toBlockchain) {
+        setToBlockchain(toBlockchain);
+        if (!!toToken) {
+          setToToken(toToken);
+        }
       }
-      if (!!toChain) {
-        setToChain(toChain);
-        if (!!toToken) setToToken(toToken);
+      if (fromAmount) {
+        setInputAmount(fromAmount);
       }
-      if (fromAmount) setInputAmount(fromAmount);
     }
   }, [loadingStatus]);
 

package/src/components/WalletModal/WalletModal.tsx

@@ -0,0 +1,20 @@
+import type { PropTypes } from './WalletModal.types';
+
+import { Divider, Modal } from '@rango-dev/ui';
+import React from 'react';
+
+import { ModalContent } from './WalletModalContent';
+
+export function WalletModal(props: PropTypes) {
+  const { open, onClose, ...otherProps } = props;
+
+  return (
+    <Modal
+      open={open}
+      onClose={onClose}
+      container={document.getElementById('swap-box') || document.body}>
+      <ModalContent {...otherProps} />
+      <Divider direction="vertical" size={32} />
+    </Modal>
+  );
+}

package/src/components/WalletModal/WalletModal.types.ts

@@ -0,0 +1,11 @@
+import type { WalletState } from '@rango-dev/ui';
+
+export interface PropTypes {
+  open: boolean;
+  onClose: () => void;
+  image: string;
+  state: WalletState;
+  error?: string;
+}
+
+export type ModalContentProps = Pick<PropTypes, 'state' | 'error' | 'image'>;

package/src/components/WalletModal/WalletModalContent.styles.ts

@@ -0,0 +1,44 @@
+import { keyframes, styled } from '@rango-dev/ui';
+
+export const IconContainer = styled('div', {
+  borderRadius: '$lg',
+  width: '$45',
+  height: '$45',
+  backgroundColor: '$success300',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+export const LogoContainer = styled('div', {
+  position: 'relative',
+});
+
+const spin = keyframes({
+  '0%': {
+    transform: 'rotate(0deg)',
+  },
+  '100%': {
+    transform: 'rotate(360deg)',
+  },
+});
+
+export const Spinner = styled('div', {
+  position: 'absolute',
+  border: '2px solid rgba(0, 0, 0, 0.1)',
+  borderTop: '2px solid $info500',
+  borderRadius: '$lg',
+  width: '$45',
+  height: '$45',
+  animation: `${spin} 1s linear infinite`,
+  top: 0,
+  bottom: 0,
+  right: 0,
+  left: 0,
+});
+
+export const WalletImageContainer = styled('div', {
+  '& img': {
+    borderRadius: '50%',
+  },
+});

package/src/components/WalletModal/WalletModalContent.tsx

@@ -0,0 +1,54 @@
+import type { ModalContentProps } from './WalletModal.types';
+
+import { i18n } from '@lingui/core';
+import { Image, MessageBox, WalletState } from '@rango-dev/ui';
+import React from 'react';
+
+import {
+  LogoContainer,
+  Spinner,
+  WalletImageContainer,
+} from './WalletModalContent.styles';
+
+export function ModalContent(props: ModalContentProps) {
+  const { state, image, error } = props;
+  if (state === WalletState.CONNECTED) {
+    return (
+      <MessageBox
+        type="success"
+        title={i18n.t('Wallet Connected')}
+        description={i18n.t(
+          'Your wallet is connected, you can use it to swap.'
+        )}
+      />
+    );
+  }
+
+  if (error) {
+    return (
+      <MessageBox
+        type="error"
+        title={i18n.t('Failed to Connect')}
+        description={
+          error || i18n.t('Your wallet is not connected. Please try again.')
+        }
+      />
+    );
+  }
+
+  return (
+    <MessageBox
+      type="loading"
+      title={i18n.t('Connecting to your wallet')}
+      description={i18n.t('Click connect in your wallet popup.')}
+      icon={
+        <LogoContainer>
+          <WalletImageContainer>
+            <Image src={image} size={45} />
+          </WalletImageContainer>
+          <Spinner />
+        </LogoContainer>
+      }
+    />
+  );
+}

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,
-    },
   })();