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

package/src/constants/errors.ts

@@ -1,8 +1,8 @@
-import type { ConfirmSwapError } from '../types';
+import type { QuoteError } from '../types';
 
 import { i18n } from '@lingui/core';
 
-import { ConfirmSwapErrorTypes } from '../types';
+import { QuoteErrorType } from '../types';
 
 export const errorMessages = () => {
   return {
@@ -10,18 +10,22 @@ export const errorMessages = () => {
     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'
+        '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'),
+    noResultError: {
+      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'),
+      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'),
@@ -29,9 +33,9 @@ export const errorMessages = () => {
       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'),
+      confirmMessage: i18n.t('Confirm high price impact'),
     },
-    routeUpdatedWithHighValueLoss: {
+    quoteUpdatedWithHighValueLoss: {
       title: i18n.t(
         'Route updated and price impact is too high, try again later!'
       ),
@@ -47,14 +51,12 @@ export const errorMessages = () => {
   };
 };
 
-export function getConfirmSwapErrorMessage(error: ConfirmSwapError) {
+export function getQuoteErrorMessage(error: QuoteError) {
   switch (error.type) {
-    case ConfirmSwapErrorTypes.NO_ROUTE:
-      return error.diagnosisMessage ?? errorMessages().noRoutesError.title;
-    case ConfirmSwapErrorTypes.REQUEST_FAILED:
+    case QuoteErrorType.NO_RESULT:
+      return error.diagnosisMessage ?? errorMessages().noResultError.title;
+    case QuoteErrorType.REQUEST_FAILED:
       return errorMessages().genericServerError;
-    case ConfirmSwapErrorTypes.ROUTE_UPDATED_WITH_HIGH_VALUE_LOSS:
-      return errorMessages().routeUpdatedWithHighValueLoss.title;
     default:
       return '';
   }

package/src/constants/index.ts

@@ -1 +1,2 @@
 export const RANGO_PUBLIC_API_KEY = 'c6381a79-2817-4602-83bf-6a641a409e32';
+export const DEFAULT_BASE_URL = 'https://api.rango.exchange';

package/src/constants/messages.ts

@@ -5,6 +5,6 @@ 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?'),
+    ethWarning: i18n.t('The route goes through Ethereum. Continue?'),
   };
 };

package/src/constants/navigationRoutes.ts

@@ -1,17 +1,16 @@
 export const navigationRoutes = {
   home: '/',
   fromSwap: 'from-swap',
-  fromBlockchain: '/from-swap/blockchains',
-  toBlockchain: '/to-swap/blockchains',
   toSwap: 'to-swap',
+  blockchains: 'blockchains',
   settings: 'settings',
-  liquiditySources: '/settings/liquidity-sources',
-  themes: '/settings/themes',
-  bridges: '/settings/bridges',
-  exchanges: '/settings/exchanges',
-  languages: '/settings/languages',
+  liquiditySources: 'liquidity-sources',
+  themes: 'themes',
+  bridges: 'bridges',
+  exchanges: 'exchanges',
+  languages: 'languages',
   swaps: 'swaps',
   wallets: 'wallets',
   confirmSwap: 'confirm-swap',
-  swapDetails: 'swaps/:requestId',
+  swapDetails: ':requestId',
 };

package/src/constants/searchParams.ts

@@ -4,4 +4,5 @@ export enum SearchParams {
   'TO_CHAIN' = 'toBlockchain',
   'TO_TOKEN' = 'toToken',
   'FROM_AMOUNT' = 'fromAmount',
+  'AUTO_CONNECT' = 'autoConnect',
 }

package/src/constants/warnings.ts

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

package/src/containers/App/App.styles.ts

@@ -0,0 +1,18 @@
+import { styled } from '@rango-dev/ui';
+
+export const MainContainer = styled('div', {
+  width: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  fontFamily: '$widget',
+  boxSizing: 'border-box',
+  '& *, *::before, *::after': {
+    boxSizing: 'inherit',
+    listStyleType: 'none',
+  },
+  '& *:focus-visible': {
+    outlineColor: '$info500',
+    transition: 'none',
+  },
+});

package/src/containers/App/App.tsx

@@ -0,0 +1,55 @@
+import type { WalletType } from '@rango-dev/wallets-shared';
+
+import { I18nManager } from '@rango-dev/ui';
+import React, { useContext, useEffect, useState } from 'react';
+
+import { AppRouter } from '../../components/AppRouter';
+import { AppRoutes } from '../../components/AppRoutes';
+import { WidgetEvents } from '../../components/WidgetEvents';
+import { globalFont } from '../../globalStyles';
+import { useLanguage } from '../../hooks/useLanguage';
+import { useTheme } from '../../hooks/useTheme';
+import { useAppStore } from '../../store/AppStore';
+import { useNotificationStore } from '../../store/notification';
+import { useSettingsStore } from '../../store/settings';
+import { WidgetContext } from '../Wallets';
+
+import { MainContainer } from './App.styles';
+
+export function Main() {
+  globalFont();
+
+  const { fetch: fetchMeta, config } = useAppStore();
+  const { activeTheme } = useTheme(config?.theme || {});
+  const { activeLanguage, changeLanguage } = useLanguage();
+  const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] =
+    useState<string>('');
+  const [disconnectedWallet, setDisconnectedWallet] = useState<WalletType>();
+  const widgetContext = useContext(WidgetContext);
+
+  useEffect(() => {
+    void fetchMeta().catch();
+    void useSettingsStore.persist.rehydrate();
+    void useNotificationStore.persist.rehydrate();
+    widgetContext.onConnectWallet(setLastConnectedWalletWithNetwork);
+  }, []);
+  useEffect(() => {
+    changeLanguage(config?.language);
+  }, [config?.language]);
+
+  return (
+    <I18nManager language={activeLanguage}>
+      <MainContainer id="swap-container" className={activeTheme()}>
+        <WidgetEvents />
+        <AppRouter
+          lastConnectedWallet={lastConnectedWalletWithNetwork}
+          disconnectedWallet={disconnectedWallet}
+          clearDisconnectedWallet={() => {
+            setDisconnectedWallet(undefined);
+          }}>
+          <AppRoutes />
+        </AppRouter>
+      </MainContainer>
+    </I18nManager>
+  );
+}

package/src/containers/App/index.ts

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

package/src/containers/QuoteInfo/QuoteInfo.styles.ts

@@ -0,0 +1,31 @@
+import { styled } from '@rango-dev/ui';
+
+export const PositionTopAlerts = styled('div', {
+  paddingBottom: '$10',
+});
+
+export const QuoteContainer = styled('div', {
+  width: '100%',
+  '& .position-top__skeleton': {
+    paddingTop: '$10',
+  },
+});
+
+export const SkeletonContainer = styled('div', {
+  variants: {
+    paddingTop: {
+      true: {
+        paddingTop: '$10',
+      },
+    },
+  },
+});
+
+export const FooterStepAlarm = styled('div', {
+  paddingBottom: '$15',
+});
+
+export const FooterAlert = styled('div', {
+  width: '100%',
+  display: 'flex',
+});

package/src/containers/QuoteInfo/QuoteInfo.tsx

@@ -0,0 +1,98 @@
+import type { PropTypes } from './QuoteInfo.types';
+
+import { Divider } from '@rango-dev/ui';
+import React from 'react';
+
+import { Quote, QuoteSkeleton } from '../../components/Quote';
+import { QuoteWarningsAndErrors } from '../../components/QuoteWarningsAndErrors';
+import { useQuoteStore } from '../../store/quote';
+import { QuoteErrorType } from '../../types';
+
+import {
+  PositionTopAlerts,
+  QuoteContainer,
+  SkeletonContainer,
+} from './QuoteInfo.styles';
+
+export function QuoteInfo(props: PropTypes) {
+  const {
+    quote,
+    type,
+    loading,
+    error,
+    warning,
+    refetchQuote,
+    showWarningModal,
+    onOpenWarningModal,
+    onCloseWarningModal,
+    onConfirmWarningModal,
+    onChangeSettings,
+    expanded = false,
+    alertPosition = 'bottom',
+  } = props;
+  const { inputAmount, inputUsdValue, outputUsdValue, outputAmount } =
+    useQuoteStore();
+
+  const noResult =
+    error &&
+    (error.type === QuoteErrorType.NO_RESULT ||
+      error.type === QuoteErrorType.REQUEST_FAILED);
+
+  const showQuote = !noResult && quote && quote.result && !loading;
+
+  const quoteWarningsAndErrors = (warning || error) && (
+    <QuoteWarningsAndErrors
+      warning={warning}
+      error={error}
+      loading={loading}
+      refetchQuote={refetchQuote}
+      showWarningModal={showWarningModal}
+      onOpenWarningModal={onOpenWarningModal}
+      onCloseWarningModal={onCloseWarningModal}
+      onConfirmWarningModal={onConfirmWarningModal}
+      onChangeSettings={onChangeSettings}
+    />
+  );
+  return (
+    <>
+      {loading && (
+        <QuoteContainer>
+          <SkeletonContainer paddingTop={alertPosition === 'top'}>
+            <QuoteSkeleton type={type} expanded={expanded} />
+          </SkeletonContainer>
+        </QuoteContainer>
+      )}
+
+      {alertPosition === 'top' && (
+        <PositionTopAlerts>{quoteWarningsAndErrors}</PositionTopAlerts>
+      )}
+      {showQuote ? (
+        <QuoteContainer>
+          <Quote
+            quote={quote}
+            error={error}
+            warning={warning}
+            type={type}
+            expanded={expanded}
+            recommended={true}
+            input={{
+              value: inputAmount,
+              usdValue: inputUsdValue?.toString() ?? '',
+            }}
+            output={{
+              value: outputAmount?.toString() ?? '',
+              usdValue: outputUsdValue?.toString() ?? '',
+            }}
+          />
+        </QuoteContainer>
+      ) : null}
+
+      {alertPosition === 'bottom' && (
+        <>
+          {!warning && !error && <Divider size={16} />}
+          {quoteWarningsAndErrors}
+        </>
+      )}
+    </>
+  );
+}

package/src/containers/QuoteInfo/QuoteInfo.types.ts

@@ -0,0 +1,20 @@
+import type { QuoteProps } from '../../components/Quote/Quote.types';
+import type { QuoteError, QuoteWarning } from '../../types';
+import type { BestRouteResponse } from 'rango-sdk';
+
+export type PropTypes = {
+  quote: BestRouteResponse | null;
+  type: QuoteProps['type'];
+  loading: boolean;
+  error: QuoteError | null;
+  warning: QuoteWarning | null;
+  autoScrollOnExpanding?: boolean;
+  expanded?: boolean;
+  alertPosition?: 'top' | 'bottom';
+  refetchQuote: () => void;
+  showWarningModal: boolean;
+  onOpenWarningModal: () => void;
+  onCloseWarningModal: () => void;
+  onConfirmWarningModal: () => void;
+  onChangeSettings: () => void;
+};

package/src/containers/QuoteInfo/index.ts

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

package/src/{Wallets.tsx → containers/Wallets/Wallets.tsx}

@@ -1,25 +1,24 @@
-import type { WidgetConfig } from './types';
-import type { ProvidersOptions } from './utils/providers';
+import type {
+  OnConnectHandler,
+  PropTypes,
+  WidgetContextInterface,
+} from './Wallets.types';
+import type { ProvidersOptions } from '../../utils/providers';
 import type { EventHandler } from '@rango-dev/wallets-react';
 import type { Network } from '@rango-dev/wallets-shared';
 import type { PropsWithChildren } from 'react';
 
 import { Events, Provider } from '@rango-dev/wallets-react';
 import { isEvmBlockchain } from 'rango-sdk';
-import React, { createContext, useRef } from 'react';
+import React, { createContext, useEffect, useRef } from 'react';
 
-import { useWalletProviders } from './hooks/useWalletProviders';
-import { useMetaStore } from './store/meta';
-import { useWalletsStore } from './store/wallets';
+import { useWalletProviders } from '../../hooks/useWalletProviders';
+import { AppStoreProvider, useAppStore } from '../../store/AppStore';
+import { useWalletsStore } from '../../store/wallets';
 import {
   prepareAccountsForWalletStore,
   walletAndSupportedChainsNames,
-} from './utils/wallets';
-
-type OnConnectHandler = (key: string) => void;
-interface WidgetContextInterface {
-  onConnectWallet(handler: OnConnectHandler): void;
-}
+} from '../../utils/wallets';
 
 export const WidgetContext = createContext<WidgetContextInterface>({
   onConnectWallet: () => {
@@ -27,41 +26,41 @@ export const WidgetContext = createContext<WidgetContextInterface>({
   },
 });
 
-export function WidgetWallets(
-  props: PropsWithChildren<{
-    providers: WidgetConfig['wallets'];
-    options?: ProvidersOptions;
-    onUpdateState?: EventHandler;
-  }>
-) {
-  const { blockchains } = useMetaStore.use.meta();
-  const { providers } = useWalletProviders(props.providers, props?.options);
+function Main(props: PropsWithChildren<PropTypes>) {
+  const updateConfig = useAppStore().updateConfig;
+  const blockchains = useAppStore().blockchains();
+  const tokens = useAppStore().tokens();
+  const walletOptions: ProvidersOptions = {
+    walletConnectProjectId: props.config?.walletConnectProjectId,
+  };
+  const { providers } = useWalletProviders(props.config.wallets, walletOptions);
   const disconnectWallet = useWalletsStore.use.disconnectWallet();
   const connectWallet = useWalletsStore.use.connectWallet();
   const onConnectWalletHandler = useRef<OnConnectHandler>();
 
+  useEffect(() => {
+    if (props.config) {
+      updateConfig(props.config);
+    }
+  }, [props.config]);
+
   const evmBasedChainNames = blockchains
     .filter(isEvmBlockchain)
     .map((chain) => chain.name);
 
-  const onUpdateState: EventHandler = (
-    type,
-    event,
-    value,
-    state,
-    supportedBlockchains
-  ) => {
+  const onUpdateState: EventHandler = (type, event, value, state, meta) => {
     if (event === Events.ACCOUNTS) {
       if (value) {
         const supportedChainNames: Network[] | null =
-          walletAndSupportedChainsNames(supportedBlockchains);
+          walletAndSupportedChainsNames(meta.supportedBlockchains);
         const data = prepareAccountsForWalletStore(
           type,
           value,
           evmBasedChainNames,
-          supportedChainNames
+          supportedChainNames,
+          meta.isContractWallet
         );
-        connectWallet(data);
+        connectWallet(data, tokens);
       } else {
         disconnectWallet(type);
       }
@@ -91,7 +90,7 @@ export function WidgetWallets(
 
     // propagate updates for Dapps using external wallets
     if (props.onUpdateState) {
-      props.onUpdateState(type, event, value, state, supportedBlockchains);
+      props.onUpdateState(type, event, value, state, meta);
     }
   };
   return (
@@ -112,3 +111,12 @@ export function WidgetWallets(
     </WidgetContext.Provider>
   );
 }
+
+export function WidgetWallets(props: PropsWithChildren<PropTypes>) {
+  const { config, ...otherProps } = props;
+  return (
+    <AppStoreProvider config={config}>
+      <Main {...otherProps} config={config} />
+    </AppStoreProvider>
+  );
+}

package/src/containers/Wallets/Wallets.types.ts

@@ -0,0 +1,12 @@
+import type { WidgetConfig } from '../../types';
+import type { EventHandler } from '@rango-dev/wallets-react';
+
+export type OnConnectHandler = (key: string) => void;
+export interface WidgetContextInterface {
+  onConnectWallet(handler: OnConnectHandler): void;
+}
+
+export interface PropTypes {
+  onUpdateState?: EventHandler;
+  config: WidgetConfig;
+}

package/src/containers/Wallets/index.ts

@@ -0,0 +1 @@
+export { WidgetWallets, WidgetContext } from './Wallets';

package/src/containers/Widget/Widget.tsx

@@ -0,0 +1,19 @@
+import type { WidgetProps } from './Widget.types';
+import type { PropsWithChildren } from 'react';
+
+import React from 'react';
+
+import { DEFAULT_CONFIG } from '../../store/slices/config';
+import { Main } from '../App';
+import { WidgetProvider } from '../WidgetProvider';
+
+export function Widget(props: PropsWithChildren<WidgetProps>) {
+  if (!props.config?.externalWallets) {
+    return (
+      <WidgetProvider config={props.config ?? DEFAULT_CONFIG}>
+        <Main />
+      </WidgetProvider>
+    );
+  }
+  return <Main />;
+}

package/src/containers/Widget/Widget.types.ts

@@ -0,0 +1,5 @@
+import type { WidgetConfig } from '../../types';
+
+export type WidgetProps = {
+  config?: WidgetConfig;
+};

package/src/containers/Widget/index.ts

@@ -0,0 +1,2 @@
+export { Widget } from './Widget';
+export type { WidgetProps } from './Widget.types';

package/src/containers/WidgetInfo/WidgetInfo.tsx

@@ -0,0 +1,47 @@
+import type { WidgetInfoContextInterface } from './WidgetInfo.types';
+
+import { useManager } from '@rango-dev/queue-manager-react';
+import React, { createContext, useContext } from 'react';
+
+import { useWalletsStore } from '../../store/wallets';
+import { getPendingSwaps } from '../../utils/queue';
+import { calculateWalletUsdValue } from '../../utils/wallets';
+
+export const WidgetInfoContext = createContext<
+  WidgetInfoContextInterface | undefined
+>(undefined);
+
+export function WidgetInfo(props: React.PropsWithChildren) {
+  const { manager } = useManager();
+  const swaps = getPendingSwaps(manager);
+  const details = useWalletsStore.use.connectedWallets();
+  const isLoading = useWalletsStore.use.loading();
+  const totalBalance = calculateWalletUsdValue(details);
+  const refetch = useWalletsStore.use.getWalletsDetails();
+  // eslint-disable-next-line react/jsx-no-constructed-context-values
+  const value = {
+    swaps,
+    wallets: {
+      isLoading,
+      details,
+      totalBalance,
+      refetch,
+    },
+  };
+
+  return (
+    <WidgetInfoContext.Provider value={value}>
+      {props.children}
+    </WidgetInfoContext.Provider>
+  );
+}
+
+export function useWidget(): WidgetInfoContextInterface {
+  const context = useContext(WidgetInfoContext);
+  if (!context) {
+    throw new Error(
+      'useWidget can only be used within the WidgetProvider component'
+    );
+  }
+  return context;
+}

package/src/containers/WidgetInfo/WidgetInfo.types.ts

@@ -0,0 +1,14 @@
+import type { ConnectedWallet } from '../../store/wallets';
+import type { Wallet } from '../../types';
+import type { PendingSwapWithQueueID } from '@rango-dev/queue-manager-rango-preset';
+import type { Token } from 'rango-sdk';
+
+export interface WidgetInfoContextInterface {
+  swaps: PendingSwapWithQueueID[];
+  wallets: {
+    details: ConnectedWallet[];
+    totalBalance: string;
+    isLoading: boolean;
+    refetch: (accounts: Wallet[], tokens: Token[]) => void;
+  };
+}

package/src/containers/WidgetInfo/index.ts

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

package/src/containers/WidgetProvider/WidgetProvider.tsx

@@ -0,0 +1,28 @@
+import type { PropTypes } from './WidgetProvider.types';
+import type { PropsWithChildren } from 'react';
+
+import React, { useMemo } from 'react';
+
+import { DEFAULT_BASE_URL, RANGO_PUBLIC_API_KEY } from '../../constants';
+import QueueManager from '../../QueueManager';
+import { initConfig } from '../../utils/configs';
+import { WidgetWallets } from '../Wallets';
+import { WidgetInfo } from '../WidgetInfo';
+
+export function WidgetProvider(props: PropsWithChildren<PropTypes>) {
+  const { onUpdateState, config } = props;
+
+  useMemo(() => {
+    initConfig({
+      API_KEY: config?.apiKey || RANGO_PUBLIC_API_KEY,
+      BASE_URL: config?.apiUrl || DEFAULT_BASE_URL,
+    });
+  }, [config]);
+  return (
+    <WidgetWallets config={config} onUpdateState={onUpdateState}>
+      <QueueManager apiKey={config.apiKey}>
+        <WidgetInfo>{props.children}</WidgetInfo>
+      </QueueManager>
+    </WidgetWallets>
+  );
+}

package/src/containers/WidgetProvider/WidgetProvider.types.ts

@@ -0,0 +1,7 @@
+import type { WidgetConfig } from '../../types';
+import type { EventHandler } from '@rango-dev/wallets-react';
+
+export type PropTypes = {
+  onUpdateState?: EventHandler;
+  config: WidgetConfig;
+};

package/src/containers/WidgetProvider/index.ts

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

package/src/hooks/useConfirmSwap/index.ts

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