@rango-dev/widget-embedded 0.1.10-next.100

package/src/pages/ConfirmWalletsPage.tsx

@@ -0,0 +1,127 @@
+import React, { useEffect } from 'react';
+import { ConfirmWallets } from '@rango-dev/ui';
+import { useNavigate } from 'react-router-dom';
+import { useBestRouteStore } from '../store/bestRoute';
+import { useWalletsStore } from '../store/wallets';
+import { useWallets } from '@rango-dev/wallets-core';
+import { navigationRoutes } from '../constants/navigationRoutes';
+import {
+  getKeplrCompatibleConnectedWallets,
+  getRequiredChains,
+  getSelectableWallets,
+  isExperimentalChain,
+} from '../utils/wallets';
+import {
+  calcOutputUsdValue,
+  getTotalFeeInUsd,
+  requiredWallets,
+} from '../utils/swap';
+import { decimalNumber, numberToString } from '../utils/numbers';
+import { useMetaStore } from '../store/meta';
+import { Network, WalletType } from '@rango-dev/wallets-shared';
+import { useNavigateBack } from '../hooks/useNavigateBack';
+import { TokenPreview } from '../components/TokenPreview';
+// @ts-ignore // TODO: fix error in tsc build
+import { t } from 'i18next';
+import { Spacer } from '@rango-dev/ui';
+import RoutesOverview from '../components/RoutesOverview';
+
+export function ConfirmWalletsPage() {
+  const navigate = useNavigate();
+  const { navigateBackFrom } = useNavigateBack();
+  const bestRoute = useBestRouteStore.use.bestRoute();
+
+  const { blockchains, tokens } = useMetaStore.use.meta();
+  const accounts = useWalletsStore.use.accounts();
+  const selectedWallets = useWalletsStore.use.selectedWallets();
+  const initSelectedWallets = useWalletsStore.use.initSelectedWallets();
+  const setSelectedWallet = useWalletsStore.use.setSelectedWallet();
+
+  const { getWalletInfo, connect } = useWallets();
+  const confirmDisabled = !requiredWallets(bestRoute).every((chain) =>
+    selectedWallets.map((wallet) => wallet.chain).includes(chain)
+  );
+
+  const firstStep = bestRoute?.result?.swaps[0];
+  const lastStep =
+    bestRoute?.result?.swaps[bestRoute?.result?.swaps.length - 1];
+
+  const fromAmount = decimalNumber(firstStep?.fromAmount, 3);
+  const toAmount = decimalNumber(lastStep?.toAmount, 3);
+  useEffect(() => {
+    initSelectedWallets();
+  }, []);
+
+  const selectableWallets = getSelectableWallets(
+    accounts,
+    selectedWallets,
+    getWalletInfo
+  );
+
+  const handleConnectChain = (wallet: string) => {
+    const network = wallet as Network;
+    getKeplrCompatibleConnectedWallets(selectableWallets).forEach(
+      (compatibleWallet: WalletType) => connect?.(compatibleWallet, network)
+    );
+  };
+
+  const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
+
+  return (
+    <ConfirmWallets
+      requiredWallets={getRequiredChains(bestRoute)}
+      selectableWallets={selectableWallets}
+      onBack={navigateBackFrom.bind(null, navigationRoutes.confirmWallets)}
+      onConfirm={() =>
+        navigate(navigationRoutes.confirmSwap, { replace: true })
+      }
+      onChange={(wallet) => setSelectedWallet(wallet)}
+      confirmDisabled={confirmDisabled}
+      handleConnectChain={(wallet) => handleConnectChain(wallet)}
+      isExperimentalChain={(wallet) =>
+        getKeplrCompatibleConnectedWallets(selectableWallets).length > 0
+          ? isExperimentalChain(blockchains, wallet)
+          : false
+      }
+      previewInputs={
+        <>
+          <TokenPreview
+            chain={{
+              displayName: firstStep?.from.blockchain || '',
+              logo: firstStep?.from.blockchainLogo || '',
+            }}
+            token={{
+              symbol: firstStep?.from.symbol || '',
+              image: firstStep?.from.logo || '',
+            }}
+            usdValue={calcOutputUsdValue(fromAmount, firstStep?.from.usdPrice)}
+            amount={fromAmount}
+            label={t('From')}
+            loadingStatus={'success'}
+          />
+          <Spacer size={12} direction="vertical" />
+          <TokenPreview
+            chain={{
+              displayName: lastStep?.to.blockchain || '',
+              logo: lastStep?.to.blockchainLogo || '',
+            }}
+            token={{
+              symbol: lastStep?.to.symbol || '',
+              image: lastStep?.to.logo || '',
+            }}
+            usdValue={calcOutputUsdValue(toAmount, lastStep?.to.usdPrice)}
+            amount={toAmount}
+            label={t('To')}
+            loadingStatus={'success'}
+          />
+        </>
+      }
+      previewRoutes={
+        <RoutesOverview
+          routes={bestRoute}
+          totalFee={numberToString(totalFeeInUsd, 0, 2)}
+        />
+      }
+    />
+  );
+}

package/src/pages/HistoryPage.tsx

@@ -0,0 +1,29 @@
+import { History } from '@rango-dev/ui';
+import { useManager } from '@rango-dev/queue-manager-react';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { useNavigateBack } from '../hooks/useNavigateBack';
+import { getPendingSwaps } from '../utils/queue';
+import { useUiStore } from '../store/ui';
+
+export function HistoryPage() {
+  const setSelectedSwap = useUiStore.use.setSelectedSwap();
+  const navigate = useNavigate();
+  const { navigateBackFrom } = useNavigateBack();
+  const { manager } = useManager();
+  const pendingSwaps = getPendingSwaps(manager).map(({ swap }) => swap);
+
+  return (
+    <History
+      //todo: move PendingSwap type to rango-types
+      //@ts-ignore
+      list={pendingSwaps}
+      onSwapClick={(requestId) => {
+        setSelectedSwap(requestId);
+        navigate(navigationRoutes.swaps + `/${requestId}`);
+      }}
+      onBack={navigateBackFrom.bind(null, navigationRoutes.swaps)}
+    />
+  );
+}

package/src/pages/Home.tsx

@@ -0,0 +1,228 @@
+import {
+  Alert,
+  BestRoute,
+  Button,
+  styled,
+  Typography,
+  VerticalSwapIcon,
+} from '@rango-dev/ui';
+import React, { useState } from 'react';
+import { useInRouterContext, useNavigate } from 'react-router-dom';
+import { Header } from '../components/Header';
+import { TokenInfo } from '../components/TokenInfo';
+import { fetchBestRoute, useBestRouteStore } from '../store/bestRoute';
+import { BottomLogo } from '../components/BottomLogo';
+import { SwithFromAndTo } from '../components/SwitchFromAndTo';
+import { Footer } from '../components/Footer';
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { useMetaStore } from '../store/meta';
+import { useWalletsStore } from '../store/wallets';
+import { errorMessages } from '../constants/errors';
+import {
+  getSwapButtonState,
+  getOutputRatio,
+  hasLimitError,
+  outputRatioHasWarning,
+  canComputePriceImpact,
+  LimitErrorMessage,
+  getTotalFeeInUsd,
+  hasHighFee,
+} from '../utils/swap';
+import {
+  numberToString,
+  secondsToString,
+  totalArrivalTime,
+} from '../utils/numbers';
+import BigNumber from 'bignumber.js';
+
+const Container = styled('div', {
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+const FromContainer = styled('div', {
+  position: 'relative',
+  paddingBottom: '$12',
+});
+
+const SwitchButtonContainer = styled('div', {
+  position: 'absolute',
+  bottom: '-12px',
+  left: '50%',
+  transform: 'translate(-50%, 10%)',
+});
+
+const BestRouteContainer = styled('div', {
+  width: '100%',
+  paddingTop: '$16',
+});
+
+const Alerts = styled('div', {
+  width: '100%',
+  paddingTop: '$16',
+});
+interface PropTypes {
+  title?: string;
+  titleSize?: number;
+  titleWeight?: number;
+}
+export function Home(props: PropTypes) {
+  const { title = 'SWAP', titleSize = 18, titleWeight = 600 } = props;
+
+  const isRouterInContext = useInRouterContext();
+  const navigate = useNavigate();
+  const [count, setCount] = useState(0);
+  const fromChain = useBestRouteStore.use.fromChain();
+  const fromToken = useBestRouteStore.use.fromToken();
+  const toChain = useBestRouteStore.use.toChain();
+  const toToken = useBestRouteStore.use.toToken();
+  const setFromChain = useBestRouteStore.use.setFromChain();
+  const setFromToken = useBestRouteStore.use.setFromToken();
+  const setToChain = useBestRouteStore.use.setToChain();
+  const setToToken = useBestRouteStore.use.setToToken();
+  const setInputAmount = useBestRouteStore.use.setInputAmount();
+  const inputUsdValue = useBestRouteStore.use.inputUsdValue();
+  const inputAmount = useBestRouteStore.use.inputAmount();
+  const outputAmount = useBestRouteStore.use.outputAmount();
+  const outputUsdValue = useBestRouteStore.use.outputUsdValue();
+  const bestRoute = useBestRouteStore.use.bestRoute();
+  const tokens = useMetaStore.use.meta().tokens;
+  const fetchingBestRoute = useBestRouteStore.use.loading();
+  const bestRouteError = useBestRouteStore.use.error();
+  const loadingMetaStatus = useMetaStore.use.loadingStatus();
+  const accounts = useWalletsStore.use.accounts();
+
+  const swithFromAndTo = () => {
+    setFromChain(toChain);
+    setFromToken(toToken);
+    setToChain(fromChain);
+    setToToken(fromToken);
+    setInputAmount(outputAmount?.toString() || '');
+    setCount((prev) => prev + 1);
+  };
+
+  const errorMessage =
+    loadingMetaStatus === 'failed'
+      ? errorMessages.genericServerError
+      : bestRouteError;
+
+  const needsToWarnEthOnPath = false;
+
+  const showBestRoute =
+    inputAmount && (!!bestRoute || fetchingBestRoute || bestRouteError);
+
+  const outToInRatio = getOutputRatio(inputUsdValue, outputUsdValue);
+
+  const highValueLoss = outputRatioHasWarning(inputUsdValue, outToInRatio);
+
+  const { fromAmountRangeError, recommendation, swap } =
+    LimitErrorMessage(bestRoute);
+
+  const priceImpactCanNotBeComputed = !canComputePriceImpact(
+    bestRoute,
+    inputAmount,
+    inputUsdValue,
+    outputUsdValue
+  );
+
+  const inputIsZero = inputAmount === '0';
+  const swapButtonState = getSwapButtonState(
+    loadingMetaStatus,
+    accounts,
+    fetchingBestRoute,
+    bestRoute,
+    hasLimitError(bestRoute),
+    highValueLoss,
+    priceImpactCanNotBeComputed,
+    needsToWarnEthOnPath,
+    inputIsZero
+  );
+
+  const totalFeeInUsd = getTotalFeeInUsd(bestRoute, tokens);
+
+  const highFee = hasHighFee(totalFeeInUsd);
+
+  return (
+    <Container>
+      <Header
+        title={title}
+        titleSize={titleSize}
+        titleWeight={titleWeight}
+        onClickRefresh={fetchBestRoute}
+      />
+      <FromContainer>
+        <TokenInfo
+          type="From"
+          chain={fromChain}
+          token={fromToken}
+          onAmountChange={setInputAmount}
+          inputAmount={inputAmount}
+        />
+        <SwitchButtonContainer>
+          <Button variant="ghost" onClick={swithFromAndTo}>
+            <VerticalSwapIcon size={24} />
+            {isRouterInContext && <SwithFromAndTo count={count} />}
+          </Button>
+        </SwitchButtonContainer>
+      </FromContainer>
+      <TokenInfo
+        type="To"
+        chain={toChain}
+        token={toToken}
+        outputAmount={
+          outputAmount ? new BigNumber(outputAmount) : new BigNumber(0)
+        }
+        outputUsdValue={outputUsdValue}
+      />
+      {showBestRoute && (
+        <BestRouteContainer>
+          <BestRoute
+            error={bestRouteError}
+            loading={fetchingBestRoute}
+            data={bestRoute}
+            totalFee={numberToString(totalFeeInUsd, 0, 2)}
+            feeWarning={highFee}
+            totalTime={secondsToString(totalArrivalTime(bestRoute))}
+          />
+        </BestRouteContainer>
+      )}
+      {(errorMessage || hasLimitError(bestRoute)) && (
+        <Alerts>
+          {errorMessage && <Alert type="error">{errorMessage}</Alert>}
+          {hasLimitError(bestRoute) && (
+            <Alert type="error" title={`${swap?.swapperId} Limit`}>
+              <>
+                <Typography variant="body2">{fromAmountRangeError}</Typography>
+                <br />
+                <Typography variant="body2">
+                  Yours: {numberToString(swap?.fromAmount || null)}
+                  {swap?.from.symbol}
+                </Typography>
+                <br />
+                <Typography variant="body2">{recommendation}</Typography>
+              </>
+            </Alert>
+          )}
+        </Alerts>
+      )}
+      <Footer>
+        <Button
+          type="primary"
+          align="grow"
+          size="large"
+          disabled={swapButtonState.disabled}
+          onClick={() => {
+            if (swapButtonState.title === 'Connect Wallet')
+              navigate(navigationRoutes.wallets);
+            else {
+              navigate(navigationRoutes.confirmWallets, { replace: true });
+            }
+          }}
+        >
+          {swapButtonState.title}
+        </Button>
+        <BottomLogo />
+      </Footer>
+    </Container>
+  );
+}

package/src/pages/LiquiditySourcesPage.tsx

@@ -0,0 +1,64 @@
+import { LiquiditySourcesSelector } from '@rango-dev/ui';
+import React from 'react';
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { useNavigateBack } from '../hooks/useNavigateBack';
+import { useMetaStore } from '../store/meta';
+import { useSettingsStore } from '../store/settings';
+import { Source } from '../types';
+import { removeDuplicateFrom } from '../utils/common';
+interface PropTypes {
+  supportedSwappers: 'all' | Source[];
+}
+export function LiquiditySourcePage({ supportedSwappers }: PropTypes) {
+  const swappers = useMetaStore.use.meta().swappers;
+  const toggleLiquiditySource = useSettingsStore.use.toggleLiquiditySource();
+  const disabledLiquiditySources =
+    useSettingsStore.use.disabledLiquiditySources();
+  const toggleAllLiquiditySources =
+    useSettingsStore.use.toggleAllLiquiditySources();
+
+  const { navigateBackFrom } = useNavigateBack();
+
+  const uniqueSwappersGroups: Array<{
+    title: string;
+    logo: string;
+    type: 'BRIDGE' | 'AGGREGATOR' | 'DEX';
+    selected: boolean;
+  }> = [];
+  removeDuplicateFrom(swappers.map((s) => s.swapperGroup))
+    .map((swapperGroup) => {
+      return swappers.find((s) => s.swapperGroup === swapperGroup);
+    })
+    .find((s) => {
+      if (s) {
+        for (const type of s.types) {
+          uniqueSwappersGroups.push({
+            title: s.swapperGroup,
+            logo: s.logo,
+            type,
+            selected: !disabledLiquiditySources.includes(s.swapperGroup),
+          });
+        }
+      }
+    });
+
+  return (
+    <LiquiditySourcesSelector
+      toggleAll={toggleAllLiquiditySources}
+      list={
+        supportedSwappers !== 'all'
+          ? uniqueSwappersGroups.filter(
+              (item) =>
+                supportedSwappers.filter(
+                  (s) => s.title === item.title && s.type === item.type
+                ).length > 0
+            )
+          : uniqueSwappersGroups
+      }
+      onChange={(liquiditySource) =>
+        toggleLiquiditySource(liquiditySource.title)
+      }
+      onBack={navigateBackFrom.bind(null, navigationRoutes.liquiditySources)}
+    />
+  );
+}

package/src/pages/SelectChainPage.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { BlockchainSelector } from '@rango-dev/ui';
+import { useBestRouteStore } from '../store/bestRoute';
+import { useMetaStore } from '../store/meta';
+import { useNavigateBack } from '../hooks/useNavigateBack';
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { BlockchainMeta } from 'rango-sdk';
+
+interface PropTypes {
+  type: 'from' | 'to';
+  supportedChains: 'all' | BlockchainMeta[];
+}
+
+export function SelectChainPage(props: PropTypes) {
+  const { type, supportedChains } = props;
+  const blockchains =
+    supportedChains === 'all'
+      ? useMetaStore.use.meta().blockchains
+      : supportedChains;
+  const loadingStatus = useMetaStore.use.loadingStatus();
+  const fromChain = useBestRouteStore.use.fromChain();
+  const toChain = useBestRouteStore.use.toChain();
+  const setFromChain = useBestRouteStore.use.setFromChain();
+  const setToChain = useBestRouteStore.use.setToChain();
+
+  const { navigateBackFrom } = useNavigateBack();
+
+  return (
+    <BlockchainSelector
+      type={type === 'from' ? 'Source' : 'Destination'}
+      list={blockchains}
+      selected={type === 'from' ? fromChain : toChain}
+      loadingStatus={loadingStatus}
+      onChange={(chain) => {
+        if (type === 'from') setFromChain(chain, true);
+        else setToChain(chain, true);
+        navigateBackFrom(navigationRoutes.fromChain);
+      }}
+      onBack={navigateBackFrom.bind(null, navigationRoutes.fromChain)}
+    />
+  );
+}

package/src/pages/SelectTokenPage.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { TokenSelector } from '@rango-dev/ui';
+import { useBestRouteStore } from '../store/bestRoute';
+import { Token } from 'rango-sdk';
+import { useNavigateBack } from '../hooks/useNavigateBack';
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { tokensAreEqual } from '../utils/wallets';
+
+interface PropTypes {
+  type: 'from' | 'to';
+  supportedTokens: 'all' | Token[];
+}
+
+export interface TokenWithBalance extends Token {
+  balance?: {
+    amount: string;
+    usdValue: string;
+  };
+}
+
+export function SelectTokenPage(props: PropTypes) {
+  const { navigateBackFrom } = useNavigateBack();
+
+  const { type, supportedTokens } = props;
+  const sourceTokens = useBestRouteStore.use.sourceTokens();
+  const destinationTokens = useBestRouteStore.use.destinationTokens();
+  const supportedSourceTokens =
+    supportedTokens === 'all'
+      ? sourceTokens
+      : sourceTokens.filter((token) =>
+          supportedTokens.some((supportedToken) =>
+            tokensAreEqual(supportedToken, token)
+          )
+        );
+
+  const supportedDestinationTokens =
+    supportedTokens === 'all'
+      ? destinationTokens
+      : destinationTokens.filter((token) =>
+          supportedTokens.some((supportedToken) =>
+            tokensAreEqual(supportedToken, token)
+          )
+        );
+  console.log(supportedSourceTokens);
+
+  const fromToken = useBestRouteStore.use.fromToken();
+  const toToken = useBestRouteStore.use.toToken();
+  const setFromToken = useBestRouteStore.use.setFromToken();
+  const setToToken = useBestRouteStore.use.setToToken();
+
+  return (
+    <TokenSelector
+      type={type === 'from' ? 'Source' : 'Destination'}
+      list={type == 'from' ? supportedSourceTokens : supportedDestinationTokens}
+      selected={type === 'from' ? fromToken : toToken}
+      onChange={(token) => {
+        if (type === 'from') setFromToken(token);
+        else setToToken(token);
+        navigateBackFrom(navigationRoutes.fromToken);
+      }}
+      onBack={navigateBackFrom.bind(null, navigationRoutes.fromToken)}
+    />
+  );
+}

package/src/pages/SettingsPage.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+import { Settings } from '@rango-dev/ui';
+import { useSettingsStore } from '../store/settings';
+import { useMetaStore } from '../store/meta';
+import { useNavigate } from 'react-router-dom';
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { removeDuplicateFrom } from '../utils/common';
+import { Source } from '../types';
+import {
+  MAX_SLIPPAGE,
+  MIN_SLIPPGAE,
+  SLIPPAGES,
+} from '../constants/swapSettings';
+import { useNavigateBack } from '../hooks/useNavigateBack';
+interface PropTypes {
+  supportedSwappers: 'all' | Source[];
+}
+export function SettingsPage({ supportedSwappers }: PropTypes) {
+  const slippage = useSettingsStore.use.slippage();
+  const setSlippage = useSettingsStore.use.setSlippage();
+  const disabledLiquiditySources =
+    useSettingsStore.use.disabledLiquiditySources();
+  const customSlippage = useSettingsStore.use.customSlippage();
+  const setCustomSlippage = useSettingsStore.use.setCustomSlippage();
+  const theme = useSettingsStore.use.theme();
+  const setTheme = useSettingsStore.use.setTheme();
+  const swappers = useMetaStore.use.meta().swappers;
+  const navigate = useNavigate();
+  const { navigateBackFrom } = useNavigateBack();
+
+  const infiniteApprove = useSettingsStore.use.infiniteApprove();
+  const toggleInfiniteApprove = useSettingsStore.use.toggleInfiniteApprove();
+  const uniqueSwappersGroups: Array<{
+    title: string;
+    logo: string;
+    type: 'BRIDGE' | 'AGGREGATOR' | 'DEX';
+    selected: boolean;
+  }> = [];
+  removeDuplicateFrom(swappers.map((s) => s.swapperGroup))
+    .map((swapperGroup) => {
+      return swappers.find((s) => s.swapperGroup === swapperGroup);
+    })
+    .find((s) => {
+      if (s) {
+        for (const type of s.types) {
+          if (supportedSwappers !== 'all') {
+          }
+          uniqueSwappersGroups.push({
+            title: s.swapperGroup,
+            logo: s.logo,
+            type,
+            selected: !disabledLiquiditySources.includes(s.swapperGroup),
+          });
+        }
+      }
+    });
+  supportedSwappers !== 'all' &&
+    uniqueSwappersGroups.filter(
+      (item) =>
+        supportedSwappers.filter(
+          (s) => s.title === item.title && s.type === item.type
+        ).length > 0
+    );
+
+  const supportedUniqueSwappersGroups =
+    supportedSwappers !== 'all'
+      ? uniqueSwappersGroups.filter(
+          (item) =>
+            supportedSwappers.filter(
+              (s) => s.title === item.title && s.type === item.type
+            ).length > 0
+        )
+      : uniqueSwappersGroups;
+
+  return (
+    <Settings
+      slippages={SLIPPAGES}
+      selectedSlippage={slippage}
+      onSlippageChange={(slippage) => setSlippage(slippage)}
+      onLiquiditySourcesClick={() =>
+        navigate(navigationRoutes.liquiditySources)
+      }
+      onBack={navigateBackFrom.bind(null, navigationRoutes.settings)}
+      liquiditySources={supportedUniqueSwappersGroups}
+      selectedLiquiditySources={supportedUniqueSwappersGroups.filter(
+        (s) => s.selected
+      )}
+      customSlippage={customSlippage || NaN}
+      onCustomSlippageChange={setCustomSlippage}
+      minSlippage={MIN_SLIPPGAE}
+      maxSlippage={MAX_SLIPPAGE}
+      selectedTheme={theme}
+      onThemeChange={setTheme}
+      infiniteApprove={infiniteApprove}
+      toggleInfiniteApprove={toggleInfiniteApprove}
+    />
+  );
+}

package/src/pages/SwapDetailsPage.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { navigationRoutes } from '../constants/navigationRoutes';
+import useCopyToClipboard from '../hooks/useCopyToClipboard';
+import { useManager } from '@rango-dev/queue-manager-react';
+import { useNavigateBack } from '../hooks/useNavigateBack';
+import { getPendingSwaps } from '../utils/queue';
+import { SwapHistory } from '@rango-dev/ui';
+import { useUiStore } from '../store/ui';
+import { cancelSwap } from '@rango-dev/queue-manager-rango-preset';
+
+export function SwapDetailsPage() {
+  const selectedSwapRequestId = useUiStore.use.selectedSwapRequestId();
+  const { navigateBackFrom } = useNavigateBack();
+  const { manager } = useManager();
+  const [isCopied, handleCopy] = useCopyToClipboard(2000);
+
+  const pendingSwaps = getPendingSwaps(manager);
+  const selectedSwap = pendingSwaps.find(
+    ({ swap }) => swap.requestId === selectedSwapRequestId
+  );
+
+  //TODO: implement swap cancellation (move queueManager logic to queueManager/rango-preset)
+  const onCancel = () => {
+    const swap = selectedSwap ? manager?.get(selectedSwap.id) : undefined;
+    if (swap) cancelSwap(swap);
+  };
+  return (
+    <SwapHistory
+      onBack={navigateBackFrom.bind(null, navigationRoutes.swapDetails)}
+      //todo: move PendingSwap type to rango-types
+      //@ts-ignore
+      pendingSwap={selectedSwap?.swap}
+      onCopy={handleCopy}
+      isCopied={isCopied}
+      onCancel={onCancel}
+    />
+  );
+}