@rango-dev/widget-embedded 0.18.0 → 0.19.0

package/src/components/QuoteWarningsAndErrors/SlippageWariningModal.tsx

@@ -1,77 +0,0 @@
-import type {
-  HighSlippageWarning,
-  InsufficientSlippageWarning,
-} from '../../types';
-
-import { i18n } from '@lingui/core';
-import { Button, Divider, MessageBox, Modal, Typography } from '@rango-dev/ui';
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
-
-import { navigationRoutes } from '../../constants/navigationRoutes';
-import { useAppStore } from '../../store/AppStore';
-import { QuoteWarningType } from '../../types';
-import { getContainer } from '../../utils/common';
-
-type PropsTypes = {
-  open: boolean;
-  onClose: () => void;
-  onConfirm: () => void;
-  warning: InsufficientSlippageWarning | HighSlippageWarning;
-};
-
-export function SlippageWarningModal(props: PropsTypes) {
-  const { customSlippage, slippage } = useAppStore();
-  const { open, onClose, onConfirm, warning } = props;
-  const navigate = useNavigate();
-  const userSlippage = customSlippage ?? slippage;
-  return (
-    <Modal
-      anchor="bottom"
-      open={open}
-      prefix={
-        <Button
-          size="small"
-          variant="ghost"
-          onClick={() => navigate('../' + navigationRoutes.settings)}>
-          <Typography variant="label" size="medium" color="$neutral900">
-            {i18n.t('Change settings')}
-          </Typography>
-        </Button>
-      }
-      container={getContainer()}
-      onClose={onClose}>
-      <MessageBox
-        type="warning"
-        title={
-          warning.type === QuoteWarningType.HIGH_SLIPPAGE
-            ? i18n.t('High slippage')
-            : i18n.t('Low slippage')
-        }
-        description={
-          warning.type === QuoteWarningType.HIGH_SLIPPAGE
-            ? i18n.t({
-                id: ' Caution, your slippage is high (={userSlippage}). Your trade may be front run.',
-                values: { userSlippage },
-              })
-            : i18n.t({
-                id: 'We recommend you to increase slippage to at least {minRequiredSlippage} for this route.',
-                values: {
-                  minRequiredSlippage: warning.minRequiredSlippage,
-                },
-              })
-        }>
-        <Divider size={18} />
-        <Divider size={32} />
-        <Button
-          size="large"
-          type="primary"
-          variant="contained"
-          fullWidth
-          onClick={onConfirm}>
-          {i18n.t('Confirm anyway')}
-        </Button>
-      </MessageBox>
-    </Modal>
-  );
-}

package/src/components/QuoteWarningsAndErrors/UnknownPriceWarningModal.tsx

@@ -1,38 +0,0 @@
-import type { UnknownPriceWarning } from '../../types';
-
-import { Button, Divider, MessageBox, Modal, WarningIcon } from '@rango-dev/ui';
-import React from 'react';
-
-import { errorMessages } from '../../constants/errors';
-import { getContainer } from '../../utils/common';
-
-type Props = {
-  open: boolean;
-  onClose: () => void;
-  onConfirm: () => void;
-  warning: UnknownPriceWarning;
-};
-
-export function UnknownPriceWarningModal(props: Props) {
-  const { open, onClose, onConfirm } = props;
-
-  return (
-    <Modal open={open} onClose={onClose} container={getContainer()}>
-      <MessageBox
-        type="warning"
-        title={errorMessages().unknownPriceError.impactTitle}
-        description={errorMessages().unknownPriceError.description}
-      />
-
-      <Divider size={32} />
-      <Button
-        type="primary"
-        size="large"
-        prefix={<WarningIcon />}
-        fullWidth
-        onClick={onConfirm}>
-        {errorMessages().unknownPriceError.confirmMessage}
-      </Button>
-    </Modal>
-  );
-}

package/src/components/QuoteWarningsAndErrors/index.ts

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

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

@@ -1,18 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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 { WidgetContext } from '../Wallets';
-
-import { MainContainer } from './App.styles';
-
-export function Main() {
-  globalFont();
-
-  const { 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 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

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

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

@@ -1,31 +0,0 @@
-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

@@ -1,99 +0,0 @@
-import type { PropTypes } from './QuoteInfo.types';
-
-import { Divider } from '@rango-dev/ui';
-import React from 'react';
-
-import { Quote } from '../../components/Quote';
-import { QuoteSkeleton } from '../../components/QuoteSkeleton';
-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

@@ -1,20 +0,0 @@
-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

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

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

@@ -1,12 +0,0 @@
-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

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

package/src/containers/Widget/Widget.tsx

@@ -1,19 +0,0 @@
-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

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

package/src/containers/Widget/index.ts

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

package/src/containers/WidgetInfo/WidgetInfo.helpers.ts

@@ -1,64 +0,0 @@
-import type { Meta } from '../../store/quote';
-import type { Manager } from '@rango-dev/queue-manager-core';
-import type { PendingSwap } from 'rango-types/lib';
-
-import {
-  cancelSwap,
-  getCurrentBlockchainOfOrNull,
-  getCurrentStep,
-  getRelatedWalletOrNull,
-} from '@rango-dev/queue-manager-rango-preset';
-
-import { getPendingSwaps } from '../../utils/queue';
-
-interface WidgetHistoryActions {
-  retrySwap: (pendingSwap: PendingSwap, meta: Meta) => void;
-}
-
-export class WidgetHistory {
-  private manager: Manager | undefined;
-  private actions: WidgetHistoryActions;
-
-  constructor(manager: Manager | undefined, actions: WidgetHistoryActions) {
-    this.manager = manager;
-    this.actions = actions;
-  }
-
-  public getAllSwaps() {
-    return getPendingSwaps(this.manager);
-  }
-
-  public getCurrentStep(swap: PendingSwap) {
-    return this.getCurrentStepInfo(swap).step;
-  }
-
-  public getCurrentStepWallet(swap: PendingSwap) {
-    return this.getCurrentStepInfo(swap).wallet;
-  }
-
-  public getCurrentStepNetwork(swap: PendingSwap) {
-    return this.getCurrentStepInfo(swap).network;
-  }
-
-  public retry(swap: PendingSwap, meta: Meta) {
-    return this.actions.retrySwap(swap, meta);
-  }
-
-  public cancel(id: string) {
-    const queue = this.manager?.get(id);
-    if (queue) {
-      cancelSwap(queue);
-    }
-  }
-
-  private getCurrentStepInfo(swap: PendingSwap) {
-    const currentStep = getCurrentStep(swap);
-    return {
-      step: currentStep,
-      wallet: currentStep ? getRelatedWalletOrNull(swap, currentStep) : null,
-      network: currentStep
-        ? getCurrentBlockchainOfOrNull(swap, currentStep)
-        : null,
-    };
-  }
-}

package/src/containers/WidgetInfo/WidgetInfo.tsx

@@ -1,62 +0,0 @@
-import type { WidgetInfoContextInterface } from './WidgetInfo.types';
-
-import { useManager } from '@rango-dev/queue-manager-react';
-import React, { createContext, useContext } from 'react';
-
-import { useAppStore } from '../../store/AppStore';
-import { useQuoteStore } from '../../store/quote';
-import { useWalletsStore } from '../../store/wallets';
-import { calculateWalletUsdValue } from '../../utils/wallets';
-
-import { WidgetHistory } from './WidgetInfo.helpers';
-
-export const WidgetInfoContext = createContext<
-  WidgetInfoContextInterface | undefined
->(undefined);
-
-export function WidgetInfo(props: React.PropsWithChildren) {
-  const { manager } = useManager();
-  const retrySwap = useQuoteStore.use.retry();
-  const history = new WidgetHistory(manager, { retrySwap });
-  const details = useWalletsStore.use.connectedWallets();
-  const isLoading = useWalletsStore.use.loading();
-  const totalBalance = calculateWalletUsdValue(details);
-  const refetch = useWalletsStore.use.getWalletsDetails();
-  const blockchains = useAppStore().blockchains();
-  const tokens = useAppStore().tokens();
-  const swappers = useAppStore().swappers();
-  const loadingStatus = useAppStore().fetchStatus;
-
-  // eslint-disable-next-line react/jsx-no-constructed-context-values
-  const value = {
-    history,
-    wallets: {
-      isLoading,
-      details,
-      totalBalance,
-      refetch,
-    },
-    meta: {
-      blockchains,
-      tokens,
-      swappers,
-      loadingStatus,
-    },
-  };
-
-  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

@@ -1,21 +0,0 @@
-import type { WidgetHistory } from './WidgetInfo.helpers';
-import type { FetchStatus } from '../../store/slices/data';
-import type { ConnectedWallet } from '../../store/wallets';
-import type { Wallet } from '../../types';
-import type { BlockchainMeta, SwapperMeta, Token } from 'rango-sdk';
-
-export interface WidgetInfoContextInterface {
-  history: WidgetHistory;
-  wallets: {
-    details: ConnectedWallet[];
-    totalBalance: string;
-    isLoading: boolean;
-    refetch: (accounts: Wallet[], tokens: Token[]) => void;
-  };
-  meta: {
-    blockchains: BlockchainMeta[];
-    tokens: Token[];
-    swappers: SwapperMeta[];
-    loadingStatus: FetchStatus;
-  };
-}

package/src/containers/WidgetInfo/index.ts

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

package/src/containers/WidgetProvider/WidgetProvider.tsx

@@ -1,28 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

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

package/src/hooks/useConfirmSwap/index.ts

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