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

package/src/constants/languages.ts

@@ -0,0 +1,100 @@
+import type { FlagPropTypes, Language } from '@rango-dev/ui';
+
+import {
+  Bengali,
+  Catalonia,
+  Chinese,
+  Denmark,
+  English,
+  Finland,
+  French,
+  German,
+  Greece,
+  Hungary,
+  India,
+  Indonesian,
+  Italian,
+  Japanese,
+  Korea,
+  Lithuania,
+  Malay,
+  Netherlands,
+  Pakistan,
+  Philippines,
+  Poland,
+  Portuguese,
+  Russian,
+  SaudiArabia,
+  Serbia,
+  Slovakia,
+  SouthAfrica,
+  Spanish,
+  Swahili,
+  Swedish,
+  Thai,
+  Turkish,
+  Ukrainian,
+  Vietnamese,
+} from '@rango-dev/ui';
+
+export type LanguageItem = {
+  title: string;
+  label: string;
+  local: Language;
+  SVGFlag: React.ComponentType<FlagPropTypes>;
+};
+
+export const LANGUAGES: LanguageItem[] = [
+  { title: 'Afrikaans', label: 'Afrikaans', local: 'af', SVGFlag: SouthAfrica },
+  { title: 'Arabic', label: 'عربي', local: 'ar', SVGFlag: SaudiArabia },
+  { title: 'Bengali', label: 'বাংলা', local: 'bn', SVGFlag: Bengali },
+  { title: 'Catalan', label: 'Català', local: 'ca', SVGFlag: Catalonia },
+  {
+    title: 'Chinese (Simplified)',
+    label: '简体中文',
+    local: 'zh-CN',
+    SVGFlag: Chinese,
+  },
+  {
+    title: 'Chinese (Traditional)',
+    label: '中文（繁體)',
+    local: 'zh-TW',
+    SVGFlag: Chinese,
+  },
+  { title: 'Danish', label: 'Dansk', local: 'da', SVGFlag: Denmark },
+  { title: 'Dutch', label: 'Nederlands', local: 'nl', SVGFlag: Netherlands },
+  { title: 'English', label: 'English', local: 'en', SVGFlag: English },
+  { title: 'Filipino', label: 'Filipino', local: 'fil', SVGFlag: Philippines },
+  { title: 'Finnish', label: 'Suomalainen', local: 'fi', SVGFlag: Finland },
+  { title: 'French', label: 'Français', local: 'fr', SVGFlag: French },
+  { title: 'German', label: 'Deutsch', local: 'de', SVGFlag: German },
+  { title: 'Greek', label: 'ελληνικά', local: 'el', SVGFlag: Greece },
+  { title: 'Hindi', label: 'हिंदी', local: 'hi', SVGFlag: India },
+  { title: 'Hungarian', label: 'Magyar', local: 'hu', SVGFlag: Hungary },
+  { title: 'Indonesian', label: 'Indonesia', local: 'id', SVGFlag: Indonesian },
+  { title: 'Italian', label: 'Italiana', local: 'it', SVGFlag: Italian },
+  { title: 'Japanese', label: '日本語', local: 'ja', SVGFlag: Japanese },
+  { title: 'Korean', label: '한국인', local: 'ko', SVGFlag: Korea },
+  { title: 'Lithuanian', label: 'Lietuvių', local: 'lt', SVGFlag: Lithuania },
+  { title: 'Malay', label: 'Melayu', local: 'ms', SVGFlag: Malay },
+  { title: 'Polish', label: 'Polski', local: 'pl', SVGFlag: Poland },
+  { title: 'Portuguese', label: 'Português', local: 'pt', SVGFlag: Portuguese },
+  { title: 'Russian', label: 'Русский', local: 'ru', SVGFlag: Russian },
+  { title: 'Serbian', label: 'Cрпски', local: 'sr', SVGFlag: Serbia },
+  { title: 'Slovak', label: 'Slovenský', local: 'sk', SVGFlag: Slovakia },
+  { title: 'Spanish', label: 'Español', local: 'es', SVGFlag: Spanish },
+  { title: 'Swahili', label: 'Kiswahili', local: 'sw', SVGFlag: Swahili },
+  { title: 'Swedish', label: 'Svenska', local: 'sv', SVGFlag: Swedish },
+  { title: 'Thai', label: 'แบบไทย', local: 'th', SVGFlag: Thai },
+  { title: 'Turkish', label: 'Türkçe', local: 'tr', SVGFlag: Turkish },
+  { title: 'Ukrainian', label: 'Yкраїні', local: 'uk', SVGFlag: Ukrainian },
+  { title: 'Urdu', label: 'اردو', local: 'ur', SVGFlag: Pakistan },
+  {
+    title: 'Vietnamese',
+    label: 'Tiếng Việt',
+    local: 'vi',
+    SVGFlag: Vietnamese,
+  },
+];
+
+export const DEFAULT_LANGUAGE = 'en';

package/src/constants/messages.ts

@@ -0,0 +1,10 @@
+import { i18n } from '@lingui/core';
+
+export const swapButtonTitles = () => {
+  return {
+    connectWallet: i18n.t('Connect Wallet'),
+    swap: i18n.t('Swap'),
+    swapAnyway: i18n.t('Swap anyway'),
+    ethWarning: i18n.t('The route goes through Ethereum. Continue?'),
+  };
+};

package/src/constants/navigationRoutes.ts

@@ -0,0 +1,18 @@
+export const navigationRoutes = {
+  home: '/',
+  fromSwap: 'from-swap',
+  toSwap: 'to-swap',
+  blockchains: 'blockchains',
+  settings: 'settings',
+  customTokens: 'custom-tokens',
+  addCustomTokens: 'add-custom-tokens',
+  liquiditySources: 'liquidity-sources',
+  bridges: 'bridges',
+  exchanges: 'exchanges',
+  languages: 'languages',
+  swaps: 'swaps',
+  wallets: 'wallets',
+  confirmSwap: 'confirm-swap',
+  swapDetails: ':requestId',
+  routes: 'routes',
+};

package/src/constants/numbers.ts

@@ -0,0 +1,3 @@
+import BigNumber from 'bignumber.js';
+
+export const ZERO = new BigNumber(0);

package/src/constants/profileBanner.ts

@@ -0,0 +1,3 @@
+export const PROFILE_BANNER_IMAGE_SOURCE =
+  'https://raw.githubusercontent.com/rango-exchange/assets/main/banners/widget/profile.jpg';
+export const PROFILE_BANNER_NAVIGATION_LINK = '/profile';

package/src/constants/quote.ts

@@ -0,0 +1,60 @@
+import type { I18n } from '@lingui/core';
+import type { SwapFee, TagValue } from 'rango-sdk';
+
+export type NameOfFees =
+  | 'Swapper Fee'
+  | 'Affiliate Fee'
+  | 'Outbound network fee'
+  | 'Rango Fee'
+  | 'Network Fee';
+
+export function getFeeLabel(fee: NameOfFees, t: I18n['t']): string {
+  const data: Record<NameOfFees, string> = {
+    'Network Fee': t('Network Fee'),
+    'Swapper Fee': t('Protocol Fee'),
+    'Affiliate Fee': t('Affiliate Fee'),
+    'Outbound network fee': t('Outbound Fee'),
+    'Rango Fee': t('Rango Fee'),
+  };
+  return data[fee];
+}
+
+export type FeesGroup = {
+  payable: { [key in NameOfFees]?: SwapFee[] };
+  nonePayable: { [key in NameOfFees]?: SwapFee[] };
+};
+
+export const HIGH_PRIORITY_TAGS: TagValue[] = [
+  'RECOMMENDED',
+  'CENTRALIZED',
+  'LOWEST_FEE',
+  'FASTEST',
+  'HIGH_IMPACT',
+];
+
+export type Criteria = {
+  threshold: number;
+  minInput: number;
+};
+
+export const PERCENT_MULTIPLIER = 100;
+export const GAS_FEE_MAX = 30;
+export const ROUTE_TIME_MAX = 15;
+export const SECONDS_IN_MINUTE = 60;
+export const HIGH_FEE_THRESHOLD_USD = 30;
+
+export const HIGH_VALUE_LOSS_CRITERIA: Criteria[] = [
+  { threshold: -10, minInput: 400 },
+  { threshold: -5, minInput: 1000 },
+];
+
+export const OUTPUT_CHANGE_WARNING_CRITERIA: Criteria[] = [
+  {
+    threshold: -1,
+    minInput: 1000,
+  },
+  {
+    threshold: -2,
+    minInput: 500,
+  },
+];

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/searchFor.ts

@@ -0,0 +1,6 @@
+export const MIN_LENGTH_SYMBOL_EXACT_MATCH = 1;
+export const MIN_LENGTH_SYMBOL_START_WITH = 2;
+export const MIN_LENGTH_SYMBOL_CONTAINS = 3;
+export const MIN_LENGTH_TOKEN_NAME_EXACT_MATCH = 3;
+export const MIN_LENGTH_TOKEN_NAME_CONTAINS = 3;
+export const MIN_LENGTH_TOKEN_ADDRESS_CONTAINS = 4;

package/src/constants/searchParams.ts

@@ -0,0 +1,18 @@
+export enum SearchParams {
+  FROM_BLOCKCHAIN = 'fromBlockchain',
+  FROM_TOKEN = 'fromToken',
+  TO_BLOCKCHAIN = 'toBlockchain',
+  TO_TOKEN = 'toToken',
+  FROM_AMOUNT = 'fromAmount',
+  AUTO_CONNECT = 'autoConnect',
+
+  // This is for custom tokens
+  BLOCKCHAIN = 'blockchain',
+  /*
+   * dApps can transmit liquidity sources as a search parameter,
+   * and these take precedence over widget configurations
+   */
+  LIQUIDITY_SOURCES = 'liquiditySources',
+  // iframe environments
+  CLIENT_URL = 'clientUrl',
+}

package/src/constants/settings.ts

@@ -0,0 +1,5 @@
+export enum ThemeModeEnum {
+  DARK = 'dark',
+  LIGHT = 'light',
+  AUTO = 'auto',
+}

package/src/constants/swapSettings.ts

@@ -0,0 +1,13 @@
+const LOW = 0.5;
+const MEDIUM = 1;
+const HIGH = 3;
+
+export const SLIPPAGES = [LOW, MEDIUM, HIGH];
+
+export const DEFAULT_SLIPPAGE = 1;
+
+export const HIGH_SLIPPAGE = 5;
+
+export const MAX_SLIPPAGE = 30;
+
+export const MIN_SLIPPAGE = 0;

package/src/constants/wallets.ts

@@ -0,0 +1,5 @@
+import { WalletTypes } from '@rango-dev/wallets-shared';
+
+export const BALANCE_SEPARATOR = '~';
+
+export const EXCLUDED_WALLETS = [WalletTypes.LEAP];

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

@@ -0,0 +1,16 @@
+import { styled } from '@rango-dev/ui';
+
+export const MainContainer = styled('div', {
+  fontFamily: '$widget',
+  boxSizing: 'border-box',
+  textAlign: 'left',
+  height: '100%',
+  '& *, *::before, *::after': {
+    boxSizing: 'inherit',
+  },
+  '& *:focus-visible': {
+    outlineColor: '$info500',
+    transition: 'none',
+  },
+  '& ul, ol, li': { listStyleType: 'none' },
+});

package/src/containers/App/App.tsx

@@ -0,0 +1,25 @@
+import { I18nManager } from '@rango-dev/ui';
+import React from 'react';
+
+import { AppRoutes } from '../../components/AppRoutes';
+import { useBootstrap } from '../../hooks/useBootstrap';
+import { useLanguage } from '../../hooks/useLanguage';
+import { useTheme } from '../../hooks/useTheme';
+import { useAppStore } from '../../store/AppStore';
+
+import { MainContainer } from './App.styles';
+
+export function Main() {
+  useBootstrap();
+  const { config } = useAppStore();
+  const { activeTheme } = useTheme(config?.theme || {});
+  const { activeLanguage } = useLanguage();
+
+  return (
+    <I18nManager language={activeLanguage}>
+      <MainContainer id="swap-container" className={activeTheme()}>
+        <AppRoutes />
+      </MainContainer>
+    </I18nManager>
+  );
+}

package/src/containers/App/index.ts

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

package/src/containers/ExpandedQuotes/ExpandedQuotes.styles.ts

@@ -0,0 +1,44 @@
+import { darkTheme, styled } from '@rango-dev/ui';
+
+export const Container = styled('div', {
+  transition: 'width 0.2s, opacity 0.2s, margin-left 0.2s',
+  height: '700px',
+  width: '390px',
+  position: 'relative',
+  opacity: 1,
+  marginLeft: '$16',
+  backgroundColor: '$neutral100',
+  [`.${darkTheme} &`]: {
+    backgroundColor: '$neutral300',
+  },
+
+  variants: {
+    expandMode: {
+      default: {
+        width: '390px',
+      },
+      full: {
+        width: '719px',
+      },
+    },
+  },
+
+  '&.is-hidden': {
+    width: 0,
+    height: 0,
+    opacity: 0,
+    marginLeft: 0,
+  },
+});
+
+export const Content = styled('div', {
+  position: 'relative',
+  overflow: 'hidden',
+  padding: '$20',
+  flexGrow: 1,
+  display: 'flex',
+  flexDirection: 'column',
+  overflowY: 'auto',
+  borderRadius: '$primary',
+  backgroundColor: '$background',
+});

package/src/containers/ExpandedQuotes/ExpandedQuotes.tsx

@@ -0,0 +1,78 @@
+import type { PropTypes } from './ExpandedQuotes.types';
+
+import { i18n } from '@lingui/core';
+import { Header } from '@rango-dev/ui';
+import React, { useEffect, useState } from 'react';
+
+import { HeaderButtons } from '../../components/HeaderButtons';
+import { LayoutContainer } from '../../components/Layout/Layout.styles';
+import { Quotes } from '../../components/Quotes';
+import { SelectStrategy } from '../../components/Quotes/SelectStrategy';
+import { WIDGET_UI_ID } from '../../constants';
+import { useAppStore } from '../../store/AppStore';
+import { getExpanded } from '../../utils/common';
+
+import { Container, Content } from './ExpandedQuotes.styles';
+
+export const TIME_TO_CLOSE_OPEN_EXPANDED = 100;
+
+export function ExpandedQuotes(props: PropTypes) {
+  const { fetch, loading, onClickOnQuote, onClickRefresh, isVisible } = props;
+  const [isDelayedVisible, setIsDelayedVisible] = useState(false);
+  const containerClass = isDelayedVisible ? '' : 'is-hidden';
+  const { config } = useAppStore();
+  const fullExpandedMode = config?.variant === 'full-expanded';
+  const container = getExpanded();
+  useEffect(() => {
+    let timeout: ReturnType<typeof setTimeout> | null = null;
+
+    if (isVisible) {
+      timeout = setTimeout(() => {
+        setIsDelayedVisible(true);
+      }, TIME_TO_CLOSE_OPEN_EXPANDED);
+    } else {
+      setIsDelayedVisible(false);
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    }
+
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    };
+  }, [isVisible]);
+
+  return (
+    <Container
+      expandMode={config?.variant === 'full-expanded' ? 'full' : 'default'}
+      className={`${containerClass} ${LayoutContainer()} widget-expanded-quotes-container`}
+      id={WIDGET_UI_ID.EXPANDED_BOX_ID}>
+      <Header
+        title={i18n.t('Routes')}
+        suffix={
+          <>
+            <SelectStrategy container={container} />
+            <HeaderButtons
+              container={container}
+              onClickRefresh={onClickRefresh}
+              hidden={['history', 'notifications', 'settings']}
+            />
+          </>
+        }
+      />
+      <Content>
+        <Quotes
+          showModalFee={true}
+          fetch={fetch}
+          hasSort={false}
+          loading={loading}
+          container={getExpanded()}
+          onClickOnQuote={onClickOnQuote}
+          fullExpandedMode={fullExpandedMode}
+        />
+      </Content>
+    </Container>
+  );
+}

package/src/containers/ExpandedQuotes/ExpandedQuotes.types.ts

@@ -0,0 +1,9 @@
+import type { SelectedQuote } from '../../types';
+
+export type PropTypes = {
+  loading: boolean;
+  onClickOnQuote: (quote: SelectedQuote) => void;
+  fetch: (shouldChangeSelectedQuote?: boolean) => void;
+  onClickRefresh?: () => void;
+  isVisible: boolean;
+};

package/src/containers/ExpandedQuotes/index.ts

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

package/src/containers/Inputs/Inputs.styles.ts

@@ -0,0 +1,12 @@
+import { styled } from '@rango-dev/ui';
+
+export const Container = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '$5',
+  alignSelf: 'stretch',
+});
+
+export const FromContainer = styled('div', {
+  position: 'relative',
+});

package/src/containers/Inputs/Inputs.tsx

@@ -0,0 +1,185 @@
+import type { PropTypes } from './Inputs.types';
+
+import { i18n } from '@lingui/core';
+import { SwapInput } from '@rango-dev/ui';
+import BigNumber from 'bignumber.js';
+import React from 'react';
+
+import { SwitchFromAndToButton } from '../../components/SwitchFromAndTo';
+import { errorMessages } from '../../constants/errors';
+import { ZERO } from '../../constants/numbers';
+import {
+  PERCENTAGE_CHANGE_MAX_DECIMALS,
+  PERCENTAGE_CHANGE_MIN_DECIMALS,
+  TOKEN_AMOUNT_MAX_DECIMALS,
+  TOKEN_AMOUNT_MIN_DECIMALS,
+  USD_VALUE_MAX_DECIMALS,
+  USD_VALUE_MIN_DECIMALS,
+} from '../../constants/routing';
+import { useSwapMode } from '../../hooks/useSwapMode';
+import { useAppStore } from '../../store/AppStore';
+import { useQuoteStore } from '../../store/quote';
+import { getContainer } from '../../utils/common';
+import { numberToString } from '../../utils/numbers';
+import { getPriceImpact, getPriceImpactLevel } from '../../utils/quote';
+import { canComputePriceImpact } from '../../utils/swap';
+import { formatBalance, isFetchingBalance } from '../../utils/wallets';
+
+import { Container, FromContainer } from './Inputs.styles';
+
+export function Inputs(props: PropTypes) {
+  const { fetchingQuote, fetchMetaStatus, onClickToken, isExpandable } = props;
+  const {
+    fromToken,
+    fromBlockchain,
+    toToken,
+    toBlockchain,
+    setInputAmount,
+    sanitizeInputAmount,
+    inputAmount,
+    inputUsdValue,
+    outputAmount,
+    outputUsdValue,
+    selectedQuote,
+  } = useQuoteStore()();
+  const { swapMode } = useSwapMode();
+  const { connectedWallets, getBalanceFor } = useAppStore();
+  const fromTokenBalance = fromToken ? getBalanceFor(fromToken) : null;
+  const fromTokenFormattedBalance =
+    formatBalance(fromTokenBalance)?.amount ?? '0';
+
+  const fromBalanceAmount = fromTokenBalance
+    ? new BigNumber(fromTokenBalance.amount).shiftedBy(
+        -fromTokenBalance.decimals
+      )
+    : ZERO;
+
+  const fetchingBalance =
+    !!fromBlockchain &&
+    isFetchingBalance(connectedWallets, fromBlockchain.name);
+
+  const priceImpactInputCanNotBeComputed = !canComputePriceImpact(
+    selectedQuote,
+    inputAmount,
+    inputUsdValue
+  );
+
+  const priceImpactOutputCanNotBeComputed = !canComputePriceImpact(
+    selectedQuote,
+    inputAmount,
+    outputUsdValue
+  );
+
+  const percentageChange =
+    !inputUsdValue || !outputUsdValue || !outputUsdValue.gt(0)
+      ? null
+      : getPriceImpact(inputUsdValue.toString(), outputUsdValue.toString());
+
+  return (
+    <Container>
+      <FromContainer>
+        <SwapInput
+          label={i18n.t('From')}
+          id="widget-swap-from"
+          mode="From"
+          onInputChange={setInputAmount}
+          onInputBlur={sanitizeInputAmount}
+          balance={fromTokenFormattedBalance}
+          chain={{
+            displayName: fromBlockchain?.displayName || '',
+            image: fromBlockchain?.logo,
+          }}
+          token={{
+            displayName: fromToken?.symbol || '',
+            image: fromToken?.image,
+            securityWarning: !!fromToken?.warning,
+          }}
+          onClickToken={() => onClickToken('from')}
+          price={{
+            value: inputAmount,
+            usdValue: priceImpactInputCanNotBeComputed
+              ? undefined
+              : numberToString(
+                  inputUsdValue,
+                  USD_VALUE_MIN_DECIMALS,
+                  USD_VALUE_MAX_DECIMALS
+                ),
+            realUsdValue: priceImpactInputCanNotBeComputed
+              ? undefined
+              : inputUsdValue?.toString(),
+            error: priceImpactInputCanNotBeComputed
+              ? errorMessages().unknownPriceError.impactTitle
+              : undefined,
+          }}
+          disabled={fetchMetaStatus === 'failed'}
+          loading={fetchMetaStatus === 'loading'}
+          loadingBalance={fetchingBalance}
+          tooltipContainer={getContainer()}
+          onSelectMaxBalance={() => {
+            const tokenBalanceReal = numberToString(
+              fromBalanceAmount,
+              fromTokenBalance?.decimals
+            );
+
+            // if a token hasn't any value, we will reset the input by setting an empty string.
+            const nextInputAmount = !!fromTokenBalance?.amount
+              ? tokenBalanceReal.split(',').join('')
+              : '';
+
+            setInputAmount(nextInputAmount);
+          }}
+          anyWalletConnected={connectedWallets.length > 0}
+        />
+        {swapMode === 'swap' && <SwitchFromAndToButton />}
+      </FromContainer>
+      <SwapInput
+        selectionType={swapMode === 'swap' ? 'token' : 'chain'}
+        sharpBottomStyle={!isExpandable && (!!selectedQuote || fetchingQuote)}
+        label={i18n.t('To')}
+        mode="To"
+        id="widget-swap-to-input"
+        fetchingQuote={fetchingQuote}
+        chain={{
+          displayName: toBlockchain?.displayName || '',
+          image: toBlockchain?.logo,
+        }}
+        token={{
+          displayName: toToken?.symbol || '',
+          image: toToken?.image,
+          securityWarning: !!toToken?.warning,
+        }}
+        percentageChange={numberToString(
+          getPriceImpact(inputUsdValue, outputUsdValue),
+          PERCENTAGE_CHANGE_MIN_DECIMALS,
+          PERCENTAGE_CHANGE_MAX_DECIMALS
+        )}
+        warningLevel={getPriceImpactLevel(percentageChange ?? 0)}
+        price={{
+          value: numberToString(
+            outputAmount,
+            TOKEN_AMOUNT_MIN_DECIMALS,
+            TOKEN_AMOUNT_MAX_DECIMALS
+          ),
+          usdValue: priceImpactOutputCanNotBeComputed
+            ? undefined
+            : numberToString(
+                outputUsdValue,
+                USD_VALUE_MIN_DECIMALS,
+                USD_VALUE_MAX_DECIMALS
+              ),
+          realValue: outputAmount?.toString(),
+          realUsdValue: priceImpactOutputCanNotBeComputed
+            ? undefined
+            : outputUsdValue?.toString(),
+          error: priceImpactOutputCanNotBeComputed
+            ? errorMessages().unknownPriceError.impactTitle
+            : undefined,
+        }}
+        onClickToken={() => onClickToken('to')}
+        disabled={fetchMetaStatus === 'failed'}
+        loading={fetchMetaStatus === 'loading'}
+        tooltipContainer={getContainer()}
+      />
+    </Container>
+  );
+}

package/src/containers/Inputs/Inputs.types.ts

@@ -0,0 +1,8 @@
+import type { FetchStatus } from '../../store/slices/data';
+
+export type PropTypes = {
+  fetchingQuote: boolean;
+  fetchMetaStatus: FetchStatus;
+  onClickToken: (mode: 'from' | 'to') => void;
+  isExpandable?: boolean;
+};

package/src/containers/Inputs/index.ts

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