@rango-dev/widget-embedded 0.0.0-experimental-936229e8-20251208

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

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

package/src/containers/QuoteInfo/QuoteInfo.tsx

@@ -0,0 +1,78 @@
+import type { PropTypes } from './QuoteInfo.types';
+
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import { Quote } from '../../components/Quote';
+import { QuoteSkeleton } from '../../components/QuoteSkeleton';
+import { useQuoteStore } from '../../store/quote';
+import { QuoteErrorType } from '../../types';
+import { getUsdOutputFrom } from '../../utils/swap';
+
+import { QuoteContainer } from './QuoteInfo.styles';
+
+export function QuoteInfo(props: PropTypes) {
+  const {
+    quote,
+    type,
+    loading,
+    error,
+    warning,
+    expanded = false,
+    tagHidden,
+    onClick,
+    showModalFee,
+    selected,
+    id,
+    onClickAllRoutes,
+    fullExpandedMode = false,
+    container,
+  } = props;
+  const { inputAmount, inputUsdValue } = useQuoteStore()();
+
+  const outputAmount = !!quote?.outputAmount
+    ? new BigNumber(quote?.outputAmount)
+    : null;
+  const outputUsdValue = quote ? getUsdOutputFrom(quote) : null;
+
+  const noResult =
+    error &&
+    (error.type === QuoteErrorType.NO_RESULT ||
+      error.type === QuoteErrorType.REQUEST_FAILED);
+
+  const showQuote = !noResult && quote && !loading;
+
+  if (loading) {
+    return (
+      <QuoteContainer>
+        <QuoteSkeleton tagHidden={tagHidden} type={type} expanded={expanded} />
+      </QuoteContainer>
+    );
+  }
+
+  return showQuote ? (
+    <QuoteContainer onClick={() => onClick?.(quote)} id={id}>
+      <Quote
+        quote={quote}
+        error={error}
+        container={container}
+        showModalFee={showModalFee}
+        warning={warning}
+        tagHidden={tagHidden}
+        selected={selected}
+        type={type}
+        expanded={expanded}
+        onClickAllRoutes={onClickAllRoutes}
+        fullExpandedMode={fullExpandedMode}
+        input={{
+          value: inputAmount,
+          usdValue: inputUsdValue?.toString() ?? '',
+        }}
+        output={{
+          value: outputAmount?.toString() ?? '',
+          usdValue: outputUsdValue?.toString() ?? '',
+        }}
+      />
+    </QuoteContainer>
+  ) : null;
+}

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

@@ -0,0 +1,20 @@
+import type { QuoteProps } from '../../components/Quote/Quote.types';
+import type { QuoteError, QuoteWarning, SelectedQuote } from '../../types';
+
+export type PropTypes = {
+  quote: SelectedQuote | null;
+  type: QuoteProps['type'];
+  onClick?: (quote: SelectedQuote) => void;
+  loading: boolean;
+  tagHidden?: boolean;
+  error: QuoteError | null;
+  warning: QuoteWarning | null;
+  id: string;
+  autoScrollOnExpanding?: boolean;
+  expanded?: boolean;
+  onClickAllRoutes?: () => void;
+  selected?: boolean;
+  showModalFee?: boolean;
+  fullExpandedMode?: boolean;
+  container?: HTMLElement;
+};

package/src/containers/QuoteInfo/index.ts

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

package/src/containers/Refuel/Refuel.tsx

@@ -0,0 +1,25 @@
+import type { RefuelProps } from './Refuel.types';
+import type { PropsWithChildren } from 'react';
+
+import React from 'react';
+
+import { AppRouter } from '../../components/AppRouter';
+import { DEFAULT_CONFIG } from '../../store/slices/config';
+import { Main } from '../App';
+import { WidgetProvider } from '../WidgetProvider';
+
+export function Refuel(props: PropsWithChildren<RefuelProps>) {
+  const isExternalWalletsEnabled = props.config?.externalWallets;
+
+  return (
+    <AppRouter>
+      {isExternalWalletsEnabled ? (
+        <Main />
+      ) : (
+        <WidgetProvider config={props.config ?? DEFAULT_CONFIG}>
+          <Main />
+        </WidgetProvider>
+      )}
+    </AppRouter>
+  );
+}

package/src/containers/Refuel/Refuel.types.ts

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

package/src/containers/Refuel/index.ts

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

package/src/containers/Settings/Lists.tsx

@@ -0,0 +1,315 @@
+import type { ThemeMode } from '../../store/slices/settings';
+import type { ListPropTypes, SvgIconProps } from '@rango-dev/ui';
+
+import { i18n } from '@lingui/core';
+import {
+  AutoThemeIcon,
+  BridgesIcon,
+  ChevronRightIcon,
+  DarkModeIcon,
+  Divider,
+  ExchangeIcon,
+  InfinityIcon,
+  InfoIcon,
+  LanguageIcon,
+  LightModeIcon,
+  List,
+  ListItem,
+  ListItemButton,
+  Skeleton,
+  styled,
+  Switch,
+  Tabs,
+  TargetIcon,
+  Tooltip,
+  Typography,
+} from '@rango-dev/ui';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { SlippageTooltipContainer as TooltipContainer } from '../../components/Slippage/Slippage.styles';
+import { navigationRoutes } from '../../constants/navigationRoutes';
+import { ThemeModeEnum } from '../../constants/settings';
+import { useLanguage } from '../../hooks/useLanguage';
+import { useAppStore } from '../../store/AppStore';
+import { getContainer } from '../../utils/common';
+import { getUniqueSwappersGroups, isFeatureHidden } from '../../utils/settings';
+
+const ThemeSection = styled('div', {
+  width: '202px',
+  height: '$40',
+});
+
+const themesList = [
+  {
+    id: ThemeModeEnum.LIGHT,
+    icon: <LightModeIcon color="black" size={24} />,
+    tooltip: (
+      <Typography size="xsmall" variant="body">
+        {i18n.t('Light')}
+      </Typography>
+    ),
+  },
+  {
+    id: ThemeModeEnum.DARK,
+    icon: <DarkModeIcon color="black" size={24} />,
+    tooltip: (
+      <Typography size="xsmall" variant="body">
+        {i18n.t('Dark')}
+      </Typography>
+    ),
+  },
+  {
+    id: ThemeModeEnum.AUTO,
+    icon: <AutoThemeIcon color="black" size={24} />,
+    tooltip: (
+      <Typography size="xsmall" variant="body">
+        {i18n.t('Auto')}
+      </Typography>
+    ),
+  },
+];
+
+const getThemeIcon = (theme: ThemeMode) => {
+  const iconProps: SvgIconProps = { color: 'gray', size: 16 };
+
+  // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
+  switch (theme) {
+    case 'auto':
+      return <AutoThemeIcon {...iconProps} />;
+    case 'dark':
+      return <DarkModeIcon {...iconProps} />;
+    default:
+      return <LightModeIcon {...iconProps} />;
+  }
+};
+
+export function SettingsLists() {
+  const navigate = useNavigate();
+  const { theme: themeConfig } = useAppStore().config;
+  const { setTheme, theme } = useAppStore();
+  const { activeLanguage, languages } = useLanguage();
+  const currentLanguage = languages.find(
+    (language) => language.local === activeLanguage
+  )?.label;
+
+  const fetchStatus = useAppStore().fetchStatus;
+  const swappers = useAppStore().swappers();
+  const disabledLiquiditySources = useAppStore().getDisabledLiquiditySources();
+  const {
+    config: { features },
+  } = useAppStore();
+  const customTokens = useAppStore().customTokens();
+  const isThemeHidden = isFeatureHidden('theme', features);
+  const isLiquidityHidden = isFeatureHidden('liquiditySource', features);
+  const isLanguageHidden = isFeatureHidden('language', features);
+  const isCustomTokensHidden = isFeatureHidden('customTokens', features);
+
+  const infiniteApprove = useAppStore().infiniteApprove;
+  const toggleInfiniteApprove = useAppStore().toggleInfiniteApprove;
+
+  const supportedUniqueSwappersGroups = getUniqueSwappersGroups(
+    swappers,
+    disabledLiquiditySources
+  );
+
+  const bridgeSources = supportedUniqueSwappersGroups.filter((uniqueItem) =>
+    ['BRIDGE', 'AGGREGATOR', 'OFF_CHAIN'].includes(uniqueItem.type)
+  );
+
+  const totalBridgeSources = bridgeSources.length;
+  const totalSelectedBridgeSources = bridgeSources.filter(
+    (uniqueItem) => uniqueItem.selected
+  ).length;
+
+  const exchangeSources = supportedUniqueSwappersGroups.filter(
+    (uniqueItem) => uniqueItem.type === 'DEX'
+  );
+
+  const totalExchangeSources = exchangeSources.length;
+  const totalSelectedExchangeSources = exchangeSources.filter(
+    (uniqueItem) => uniqueItem.selected
+  ).length;
+
+  const handleSwapperEndItem = (totalSelected: number, total: number) => {
+    // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
+    switch (fetchStatus) {
+      case 'loading':
+        return <Skeleton variant="text" size="medium" width={50} />;
+      case 'failed':
+        return (
+          <Typography variant="body" size="medium" color="$error500">
+            {i18n.t('Loading failed')}
+          </Typography>
+        );
+      default:
+        return (
+          <Typography variant="body" size="medium">
+            {`${totalSelected} / ${total}`}
+          </Typography>
+        );
+    }
+  };
+
+  const bridgeItem = {
+    id: 'widget-setting-bridge-item-btn',
+    title: (
+      <Typography variant="title" size="xmedium">
+        {i18n.t('Bridges')}
+      </Typography>
+    ),
+    end: (
+      <>
+        {handleSwapperEndItem(totalSelectedBridgeSources, totalBridgeSources)}
+        <Divider direction="horizontal" size={8} />
+        <ChevronRightIcon color="black" />
+      </>
+    ),
+    onClick: () => navigate(navigationRoutes.bridges),
+    start: <BridgesIcon color="gray" size={16} />,
+  };
+
+  const exchangeItem = {
+    id: 'widget-setting-exchange-item-btn',
+    title: (
+      <Typography variant="title" size="xmedium">
+        {i18n.t('Exchanges')}
+      </Typography>
+    ),
+    end: (
+      <>
+        {handleSwapperEndItem(
+          totalSelectedExchangeSources,
+          totalExchangeSources
+        )}
+        <Divider direction="horizontal" size={8} />
+        <ChevronRightIcon color="black" />
+      </>
+    ),
+    start: <ExchangeIcon color="gray" size={16} />,
+    onClick: () => navigate(navigationRoutes.exchanges),
+  };
+
+  const customTokensItem = {
+    id: 'widget-setting-custom-tokens-item-btn',
+    title: (
+      <Typography variant="title" size="xmedium">
+        {i18n.t('Custom Tokens')}
+      </Typography>
+    ),
+    end: (
+      <>
+        <Typography variant="body" size="medium">
+          {`${customTokens.length}`}
+        </Typography>
+        <Divider direction="horizontal" size={8} />
+        <ChevronRightIcon color="black" />
+      </>
+    ),
+    start: <TargetIcon color="gray" size={16} />,
+    onClick: () => navigate(navigationRoutes.customTokens),
+  };
+  const languageItem = {
+    id: 'widget-setting-language-item-btn',
+    title: (
+      <Typography variant="title" size="xmedium">
+        {i18n.t('Language')}
+      </Typography>
+    ),
+    start: <LanguageIcon color="gray" size={16} />,
+    end: (
+      <>
+        <Typography variant="body" size="medium">
+          {currentLanguage}
+        </Typography>
+        <Divider direction="horizontal" size={8} />
+        <ChevronRightIcon color="black" />
+      </>
+    ),
+    onClick: () => navigate(navigationRoutes.languages),
+  };
+
+  const infiniteApprovalItem = {
+    id: 'widget-setting-infinite-approval-item-btn',
+    title: (
+      <React.Fragment>
+        <Typography variant="title" size="xmedium">
+          {i18n.t('Infinite approval')}
+        </Typography>
+        <Divider direction="horizontal" size={4} />
+        <Tooltip
+          side="top"
+          sideOffset={4}
+          container={getContainer()}
+          content={
+            <TooltipContainer>
+              <Typography variant="label" size="medium" color="neutral700">
+                <b>{i18n.t('Warning')}</b>:&nbsp;
+                {i18n.t(
+                  "Enabling the 'Infinite approval' mode grants unrestricted access to underlying smart contracts, allowing them to utilize the approved token amount without limitations."
+                )}
+              </Typography>
+            </TooltipContainer>
+          }>
+          <InfoIcon color="gray" />
+        </Tooltip>
+      </React.Fragment>
+    ),
+    start: <InfinityIcon color="gray" size={16} />,
+    end: <Switch checked={infiniteApprove} />,
+    onClick: toggleInfiniteApprove,
+  };
+
+  const themeItem = {
+    id: 'widget-setting-theme-item-btn',
+    type: <ListItem />,
+    title: (
+      <Typography variant="title" size="xmedium">
+        {i18n.t('Theme')}
+      </Typography>
+    ),
+    end: (
+      <ThemeSection>
+        <Tabs
+          container={getContainer()}
+          items={themesList}
+          value={theme}
+          className="widget-setting-theme-item-tabs-container"
+          onChange={(item) => setTheme(item.id as ThemeMode)}
+          type="primary"
+          borderRadius="small"
+        />
+      </ThemeSection>
+    ),
+    start: getThemeIcon(theme),
+  };
+
+  const settingItems: ListPropTypes['items'] = isLiquidityHidden
+    ? []
+    : [bridgeItem, exchangeItem];
+  if (!isCustomTokensHidden) {
+    settingItems.push(customTokensItem);
+  }
+  if (!isLanguageHidden) {
+    settingItems.push(languageItem);
+  }
+  settingItems.push(infiniteApprovalItem);
+
+  if (!themeConfig?.singleTheme && !isThemeHidden) {
+    settingItems.push(themeItem);
+  }
+
+  return (
+    <List
+      type={
+        <ListItemButton
+          className="widget-settings-list-item-btn"
+          hasDivider
+          id="_"
+          onClick={() => console.log()}
+        />
+      }
+      items={settingItems}
+    />
+  );
+}

package/src/containers/Wallets/Wallets.helpers.ts

@@ -0,0 +1,26 @@
+import type { OnUpdateState } from './Wallets.types';
+import type { LegacyEventHandler } from '@rango-dev/wallets-core/legacy';
+
+import { LegacyEvents } from '@rango-dev/wallets-core/legacy';
+
+/*
+ * propagate updates for Dapps using external wallets
+ *
+ * Note: to take more control over the public interface and wallets-core interface (which may be changed) we use this layer
+ */
+export function propagateEvents(
+  cb: OnUpdateState,
+  eventParams: Parameters<LegacyEventHandler>
+): void {
+  const [walletType, event, value, coreState, info] = eventParams;
+
+  /*
+   * PROVIDER_DISCONNECTED has conflict with WalletEventTypes.DISCONNECT since they are doing samething, the first one is using only for Hub, the second one is what we exposed to the lib users.
+   * so for backward-compat we need to keep the behavior of WalletEventTypes.DISCONNECT
+   */
+  if (event === LegacyEvents.PROVIDER_DISCONNECTED) {
+    return;
+  }
+
+  cb(walletType, event, value, coreState, info);
+}

package/src/containers/Wallets/Wallets.tsx

@@ -0,0 +1,121 @@
+import type {
+  OnWalletConnectHandler,
+  OnWalletDisconnectHandler,
+  PropTypes,
+  WidgetContextInterface,
+} from './Wallets.types';
+import type { ProvidersOptions } from '../../utils/providers';
+import type { LegacyEventHandler } from '@rango-dev/wallets-core/legacy';
+import type { PropsWithChildren } from 'react';
+
+import { Provider } from '@rango-dev/wallets-react';
+import React, { createContext, useEffect, useMemo, useRef } from 'react';
+
+import { useWalletProviders } from '../../hooks/useWalletProviders';
+import { AppStoreProvider, useAppStore } from '../../store/AppStore';
+import { useUiStore } from '../../store/ui';
+
+import { useUpdates } from './useUpdates';
+import { propagateEvents } from './Wallets.helpers';
+
+export const WidgetContext = createContext<WidgetContextInterface>({
+  onConnectWallet: () => {
+    return;
+  },
+  onDisconnectWallet: () => {
+    return;
+  },
+});
+
+function Main(props: PropsWithChildren<PropTypes>) {
+  const {
+    updateConfig,
+    updateSettings,
+    fetch: fetchMeta,
+    fetchStatus,
+  } = useAppStore();
+  const blockchains = useAppStore().blockchains();
+  const config = useAppStore().config;
+
+  const walletOptions: ProvidersOptions = {
+    walletConnectProjectId: config?.walletConnectProjectId,
+    trezorManifest: config?.trezorManifest,
+    tonConnect: config.tonConnect,
+    walletConnectListedDesktopWalletLink:
+      props.config.__UNSTABLE_OR_INTERNAL__
+        ?.walletConnectListedDesktopWalletLink,
+  };
+  const { providers } = useWalletProviders(config.wallets, walletOptions);
+  const onConnectWalletHandler = useRef<OnWalletConnectHandler>();
+  const onDisconnectWalletHandler = useRef<OnWalletDisconnectHandler>();
+  const { handler: handleEvent } = useUpdates({
+    onConnectWalletHandler,
+    onDisconnectWalletHandler,
+  });
+
+  useEffect(() => {
+    void fetchMeta().catch(console.log);
+  }, []);
+
+  useEffect(() => {
+    if (props.config) {
+      updateConfig(props.config);
+      updateSettings(props.config);
+      window['__rango'] = {
+        config,
+        dappConfig: props.config,
+      };
+    }
+  }, [props.config, fetchStatus]);
+
+  const isActiveTab = useUiStore.use.isActiveTab();
+
+  const handlers = useMemo(
+    () => ({
+      onConnectWallet: (handler: OnWalletConnectHandler) => {
+        onConnectWalletHandler.current = handler;
+      },
+      onDisconnectWallet: (handler: OnWalletDisconnectHandler) => {
+        onDisconnectWalletHandler.current = handler;
+      },
+    }),
+    []
+  );
+
+  return (
+    <WidgetContext.Provider value={handlers}>
+      <Provider
+        allBlockChains={blockchains}
+        providers={providers}
+        onUpdateState={(type, event, value, state, info) => {
+          const eventParams: Parameters<LegacyEventHandler> = [
+            type,
+            event,
+            value,
+            state,
+            info,
+          ];
+          handleEvent(...eventParams);
+
+          if (props.onUpdateState) {
+            propagateEvents(props.onUpdateState, eventParams);
+          }
+        }}
+        autoConnect={!!isActiveTab}
+        configs={{
+          wallets: config.wallets,
+        }}>
+        {props.children}
+      </Provider>
+    </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,39 @@
+import type { WidgetConfig } from '../../types';
+import type { LastConnectedWallet } from '@rango-dev/queue-manager-rango-preset';
+import type {
+  LegacyEventHandler as EventHandler,
+  LegacyEvents,
+} from '@rango-dev/wallets-core/legacy';
+
+export type OnWalletConnectHandler = (wallet: LastConnectedWallet) => void;
+export type OnWalletDisconnectHandler = (walletType: string) => void;
+export interface WidgetContextInterface {
+  /**
+   * A wallet connection handler, utilized within the wallet provider,
+   * is linked to the useBootstrap hook for synchronizing the state of the last connected wallet.
+   * It's important not to override this handler in other locations.
+   */
+  onConnectWallet(handler: OnWalletConnectHandler): void;
+  /**
+   * A wallet disconnection handler, utilized within the wallet provider,
+   * is linked to the useBootstrap hook for synchronizing the state of the last disconnected wallet.
+   * It's important not to override this handler in other locations.
+   */
+  onDisconnectWallet(handler: OnWalletDisconnectHandler): void;
+}
+
+type EventHandlerParams = Parameters<EventHandler>;
+type EventParam = Exclude<LegacyEvents, LegacyEvents.PROVIDER_DISCONNECTED>;
+
+export type OnUpdateState = (
+  type: EventHandlerParams[0],
+  event: EventParam,
+  value: EventHandlerParams[2],
+  coreState: EventHandlerParams[3],
+  info: EventHandlerParams[4]
+) => void;
+
+export interface PropTypes {
+  onUpdateState?: OnUpdateState;
+  config: WidgetConfig;
+}

package/src/containers/Wallets/index.ts

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