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

package/src/containers/App/App.tsx

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

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

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

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

package/src/containers/QuoteInfo/QuoteInfo.tsx

@@ -5,16 +5,14 @@ import React from 'react';
 
 import { Quote, QuoteSkeleton } from '../../components/Quote';
 import { QuoteWarningsAndErrors } from '../../components/QuoteWarningsAndErrors';
-import {
-  TOKEN_AMOUNT_MAX_DECIMALS,
-  TOKEN_AMOUNT_MIN_DECIMALS,
-  USD_VALUE_MAX_DECIMALS,
-  USD_VALUE_MIN_DECIMALS,
-} from '../../constants/routing';
 import { useQuoteStore } from '../../store/quote';
-import { numberToString } from '../../utils/numbers';
+import { QuoteErrorType } from '../../types';
 
-import { QuoteContainer } from './QuoteInfo.styles';
+import {
+  PositionTopAlerts,
+  QuoteContainer,
+  SkeletonContainer,
+} from './QuoteInfo.styles';
 
 export function QuoteInfo(props: PropTypes) {
   const {
@@ -28,19 +26,46 @@ export function QuoteInfo(props: PropTypes) {
     onOpenWarningModal,
     onCloseWarningModal,
     onConfirmWarningModal,
+    onChangeSettings,
     expanded = false,
+    alertPosition = 'bottom',
   } = props;
   const { inputAmount, inputUsdValue, outputUsdValue, outputAmount } =
     useQuoteStore();
 
-  const showQuote = quote && quote.result && !loading;
+  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>
-          <QuoteSkeleton type={type} expanded={expanded} />
+          <SkeletonContainer paddingTop={alertPosition === 'top'}>
+            <QuoteSkeleton type={type} expanded={expanded} />
+          </SkeletonContainer>
         </QuoteContainer>
       )}
+
+      {alertPosition === 'top' && (
+        <PositionTopAlerts>{quoteWarningsAndErrors}</PositionTopAlerts>
+      )}
       {showQuote ? (
         <QuoteContainer>
           <Quote
@@ -51,46 +76,22 @@ export function QuoteInfo(props: PropTypes) {
             expanded={expanded}
             recommended={true}
             input={{
-              value: numberToString(
-                inputAmount,
-                TOKEN_AMOUNT_MIN_DECIMALS,
-                TOKEN_AMOUNT_MAX_DECIMALS
-              ),
-              usdValue: numberToString(
-                inputUsdValue,
-                USD_VALUE_MIN_DECIMALS,
-                USD_VALUE_MAX_DECIMALS
-              ),
+              value: inputAmount,
+              usdValue: inputUsdValue?.toString() ?? '',
             }}
             output={{
-              value: numberToString(
-                outputAmount,
-                TOKEN_AMOUNT_MIN_DECIMALS,
-                TOKEN_AMOUNT_MAX_DECIMALS
-              ),
-              usdValue: numberToString(
-                outputUsdValue,
-                USD_VALUE_MIN_DECIMALS,
-                USD_VALUE_MAX_DECIMALS
-              ),
+              value: outputAmount?.toString() ?? '',
+              usdValue: outputUsdValue?.toString() ?? '',
             }}
           />
         </QuoteContainer>
       ) : null}
 
-      {!warning && !error && <Divider size={16} />}
-
-      {(warning || error) && (
-        <QuoteWarningsAndErrors
-          warning={warning}
-          error={error}
-          loading={loading}
-          refetchQuote={refetchQuote}
-          showWarningModal={showWarningModal}
-          onOpenWarningModal={onOpenWarningModal}
-          onCloseWarningModal={onCloseWarningModal}
-          onConfirmWarningModal={onConfirmWarningModal}
-        />
+      {alertPosition === 'bottom' && (
+        <>
+          {!warning && !error && <Divider size={16} />}
+          {quoteWarningsAndErrors}
+        </>
       )}
     </>
   );

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

@@ -8,10 +8,13 @@ export type PropTypes = {
   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/{Wallets.tsx → containers/Wallets/Wallets.tsx}

@@ -1,25 +1,25 @@
-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 { useSyncStoresWithConfig } from '../../hooks/useSyncStoresWithConfig';
+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 +27,46 @@ 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);
-  const disconnectWallet = useWalletsStore.use.disconnectWallet();
-  const connectWallet = useWalletsStore.use.connectWallet();
+function Main(props: PropsWithChildren<PropTypes>) {
+  const { updateConfig, updateSettings, fetch: fetchMeta } = useAppStore();
+  const blockchains = useAppStore().blockchains();
+  const tokens = useAppStore().tokens();
+  const walletOptions: ProvidersOptions = {
+    walletConnectProjectId: props.config?.walletConnectProjectId,
+  };
+  const { providers } = useWalletProviders(props.config.wallets, walletOptions);
+  const { connectWallet, disconnectWallet } = useWalletsStore();
   const onConnectWalletHandler = useRef<OnConnectHandler>();
+  useSyncStoresWithConfig();
+
+  useEffect(() => {
+    void fetchMeta().catch(console.log);
+  }, []);
+
+  useEffect(() => {
+    if (props.config) {
+      updateConfig(props.config);
+      updateSettings(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 +96,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 +117,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.helpers.ts

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

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

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

@@ -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';