@rango-dev/widget-embedded 0.1.10-next.99 → 0.1.10

package/src/lib.tsx

@@ -1,11 +1,11 @@
 import { SwapContainer } from '@rango-dev/ui';
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { AppRouter } from './components/AppRouter';
 import { useMetaStore } from './store/meta';
 import { Events, Provider } from '@rango-dev/wallets-core';
 import { allProviders } from '@rango-dev/provider-all';
 import { EventHandler } from '@rango-dev/wallets-core/dist/wallet';
-import { Network } from '@rango-dev/wallets-shared';
+import { Network, WalletType } from '@rango-dev/wallets-shared';
 import {
   prepareAccountsForWalletStore,
   walletAndSupportedChainsNames,
@@ -41,6 +41,10 @@ export const SwapBox: React.FC<WidgetProps> = ({ configs }) => {
   const { changeLanguage } = useSelectLanguage();
   const clearConnectedWallet = useWalletsStore.use.clearConnectedWallet();
 
+  const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] =
+    useState<string>('');
+  const [disconnectedWallet, setDisconnectedWallet] = useState<WalletType>();
+
   const evmBasedChainNames = blockchains
     .filter(isEvmBlockchain)
     .map((chain) => chain.name);
@@ -49,7 +53,7 @@ export const SwapBox: React.FC<WidgetProps> = ({ configs }) => {
     type,
     event,
     value,
-    _,
+    state,
     supportedChains
   ) => {
     if (event === Events.ACCOUNTS) {
@@ -67,6 +71,19 @@ export const SwapBox: React.FC<WidgetProps> = ({ configs }) => {
         disconnectWallet(type);
       }
     }
+
+    if (event === Events.ACCOUNTS && state.connected) {
+      const key = `${type}-${state.network}-${value}`;
+
+      if (state.connected) {
+        setLastConnectedWalletWithNetwork(key);
+      }
+    }
+
+    if (event === Events.NETWORK && state.network) {
+      const key = `${type}-${state.network}`;
+      setLastConnectedWalletWithNetwork(key);
+    }
   };
   let providers = allProviders();
 
@@ -108,6 +125,11 @@ export const SwapBox: React.FC<WidgetProps> = ({ configs }) => {
               title={configs.title}
               titleSize={configs.titleSize}
               titleWeight={configs.titleWeight}
+              lastConnectedWallet={lastConnectedWalletWithNetwork}
+              disconnectedWallet={disconnectedWallet}
+              clearDisconnectedWallet={() => {
+                setDisconnectedWallet(undefined);
+              }}
             >
               <Layout configs={configs} />
             </AppRouter>

package/src/pages/ConfirmSwapPage.tsx

@@ -1,41 +1,105 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { ConfirmSwap } from '@rango-dev/ui';
 import { useBestRouteStore } from '../store/bestRoute';
-import { useSettingsStore } from '../store/settings';
-import { ConfirmSwapExtraMessages } from '../components/warnings/ConfirmSwapExtraMessages';
-import { useNavigateBack } from '../hooks/useNavigateBack';
+import { useWalletsStore } from '../store/wallets';
+import { useWallets } from '@rango-dev/wallets-core';
 import { navigationRoutes } from '../constants/navigationRoutes';
-import { ConfirmSwapErrors } from '../components/ConfirmSwapErrors';
-import { ConfirmSwapWarnings } from '../components/ConfirmSwapWarnings';
+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, ConfirmSwap } from '@rango-dev/ui';
+import RoutesOverview from '../components/RoutesOverview';
 import { useManager } from '@rango-dev/queue-manager-react';
-import { useUiStore } from '../store/ui';
 import { useConfirmSwap } from '../hooks/useConfirmSwap';
+import { useSettingsStore } from '../store/settings';
+import { useUiStore } from '../store/ui';
 import { ConfirmSwapErrorTypes } from '../types';
-import { useMetaStore } from '../store/meta';
-import { getBestRouteWithCalculatedFees } from '../utils/routing';
+import { ConfirmSwapErrors } from '../components/ConfirmSwapErrors';
+import { ConfirmSwapWarnings } from '../components/ConfirmSwapWarnings';
+import { ConfirmSwapExtraMessages } from '../components/warnings/ConfirmSwapExtraMessages';
+import { getBestRouteStatus } from '../utils/routing';
 
 export function ConfirmSwapPage() {
-  const setSelectedSwap = useUiStore.use.setSelectedSwap();
-  const { navigateBackFrom } = useNavigateBack();
-  const { manager } = useManager();
   const navigate = useNavigate();
-
+  const { navigateBackFrom } = useNavigateBack();
   const bestRoute = useBestRouteStore.use.bestRoute();
   const fetchingBestRoute = useBestRouteStore.use.loading();
-  const { tokens } = useMetaStore.use.meta();
-
+  const fetchingBestRouteError = useBestRouteStore.use.error();
+  const setSelectedSwap = useUiStore.use.setSelectedSwap();
+  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 slippage = useSettingsStore.use.slippage();
   const customSlippage = useSettingsStore.use.customSlippage();
-  const selectedSlippage = customSlippage || slippage;
+
+  const bestRouteloadingStatus = getBestRouteStatus(
+    fetchingBestRoute,
+    !!fetchingBestRouteError
+  );
+
+  const { manager } = useManager();
   const { loading, errors, warnings, confirmSwap } = useConfirmSwap();
 
+  const selectedSlippage = customSlippage || slippage;
+
   const showHighSlippageWarning = !errors.find(
     (error) => error.type === ConfirmSwapErrorTypes.INSUFFICIENT_SLIPPAGE
   );
 
+  const { getWalletInfo, connect } = useWallets();
+  const confirmDisabled =
+    fetchingBestRoute ||
+    !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 (
     <ConfirmSwap
+      requiredWallets={getRequiredChains(bestRoute)}
+      selectableWallets={selectableWallets}
+      onBack={navigateBackFrom.bind(null, navigationRoutes.confirmSwap)}
       onConfirm={() => {
         confirmSwap?.().then((swap) => {
           if (swap) {
@@ -51,8 +115,53 @@ export function ConfirmSwapPage() {
           }
         });
       }}
-      onBack={navigateBackFrom.bind(null, navigationRoutes.confirmSwap)}
-      bestRoute={getBestRouteWithCalculatedFees(bestRoute, tokens)}
+      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={bestRouteloadingStatus}
+          />
+          <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={bestRouteloadingStatus}
+          />
+        </>
+      }
+      previewRoutes={
+        <RoutesOverview
+          routes={bestRoute}
+          totalFee={numberToString(totalFeeInUsd, 0, 2)}
+        />
+      }
       loading={loading}
       errors={ConfirmSwapErrors(errors)}
       warnings={ConfirmSwapWarnings(warnings)}
@@ -66,7 +175,6 @@ export function ConfirmSwapPage() {
           ? 'Proceed anyway!'
           : 'Confirm swap!'
       }
-      confirmButtonDisabled={fetchingBestRoute}
     />
   );
 }

package/src/pages/HistoryPage.tsx

@@ -6,6 +6,7 @@ import { navigationRoutes } from '../constants/navigationRoutes';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { getPendingSwaps } from '../utils/queue';
 import { useUiStore } from '../store/ui';
+import { groupSwapsByDate } from '../utils/date';
 
 export function HistoryPage() {
   const setSelectedSwap = useUiStore.use.setSelectedSwap();
@@ -16,12 +17,11 @@ export function HistoryPage() {
 
   return (
     <History
-      //todo: move PendingSwap type to rango-types
-      //@ts-ignore
       list={pendingSwaps}
-      onSwapClick={(requestId) => {
+      groupBy={groupSwapsByDate}
+      onSwapClick={requestId => {
         setSelectedSwap(requestId);
-        navigate(navigationRoutes.swaps + `/${requestId}`);
+        navigate(navigationRoutes.swaps + `/${requestId}`, { replace: true });
       }}
       onBack={navigateBackFrom.bind(null, navigationRoutes.swaps)}
     />

package/src/pages/Home.tsx

@@ -5,10 +5,10 @@ import {
   styled,
   Typography,
   VerticalSwapIcon,
+  Header,
 } from '@rango-dev/ui';
-import React, { useState } from 'react';
+import React, { useEffect, 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';
@@ -34,6 +34,8 @@ import {
   totalArrivalTime,
 } from '../utils/numbers';
 import BigNumber from 'bignumber.js';
+import { HeaderButtons } from '../components/HeaderButtons';
+import { useUiStore } from '../store/ui';
 
 const Container = styled('div', {
   display: 'flex',
@@ -67,7 +69,7 @@ interface PropTypes {
   titleWeight?: number;
 }
 export function Home(props: PropTypes) {
-  const { title = 'SWAP', titleSize = 18, titleWeight = 600 } = props;
+  const { title = 'SWAP' } = props;
 
   const isRouterInContext = useInRouterContext();
   const navigate = useNavigate();
@@ -91,6 +93,7 @@ export function Home(props: PropTypes) {
   const bestRouteError = useBestRouteStore.use.error();
   const loadingMetaStatus = useMetaStore.use.loadingStatus();
   const accounts = useWalletsStore.use.accounts();
+  const setCurrentPage = useUiStore.use.setCurrentPage();
 
   const swithFromAndTo = () => {
     setFromChain(toChain);
@@ -142,13 +145,21 @@ export function Home(props: PropTypes) {
 
   const highFee = hasHighFee(totalFeeInUsd);
 
+  useEffect(() => {
+    setCurrentPage(navigationRoutes.home);
+
+    return setCurrentPage.bind(null, '');
+  }, []);
+
   return (
     <Container>
       <Header
         title={title}
-        titleSize={titleSize}
-        titleWeight={titleWeight}
-        onClickRefresh={fetchBestRoute}
+        suffix={
+          <HeaderButtons
+            onClickRefresh={!!bestRoute ? fetchBestRoute : undefined}
+          />
+        }
       />
       <FromContainer>
         <TokenInfo
@@ -160,7 +171,7 @@ export function Home(props: PropTypes) {
         />
         <SwitchButtonContainer>
           <Button variant="ghost" onClick={swithFromAndTo}>
-            <VerticalSwapIcon size={24} />
+            <VerticalSwapIcon size={32} />
             {isRouterInContext && <SwithFromAndTo count={count} />}
           </Button>
         </SwitchButtonContainer>
@@ -215,7 +226,7 @@ export function Home(props: PropTypes) {
             if (swapButtonState.title === 'Connect Wallet')
               navigate(navigationRoutes.wallets);
             else {
-              navigate(navigationRoutes.confirmWallets, { replace: true });
+              navigate(navigationRoutes.confirmSwap, { replace: true });
             }
           }}
         >

package/src/pages/LiquiditySourcesPage.tsx

@@ -11,6 +11,7 @@ interface PropTypes {
 }
 export function LiquiditySourcePage({ supportedSwappers }: PropTypes) {
   const swappers = useMetaStore.use.meta().swappers;
+  const loadingMetaStatus = useMetaStore.use.loadingStatus();
   const toggleLiquiditySource = useSettingsStore.use.toggleLiquiditySource();
   const disabledLiquiditySources =
     useSettingsStore.use.disabledLiquiditySources();
@@ -59,6 +60,7 @@ export function LiquiditySourcePage({ supportedSwappers }: PropTypes) {
         toggleLiquiditySource(liquiditySource.title)
       }
       onBack={navigateBackFrom.bind(null, navigationRoutes.liquiditySources)}
+      loadingStatus={loadingMetaStatus}
     />
   );
 }

package/src/pages/SelectTokenPage.tsx

@@ -5,6 +5,7 @@ import { Token } from 'rango-sdk';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { tokensAreEqual } from '../utils/wallets';
+import { useMetaStore } from '../store/meta';
 
 interface PropTypes {
   type: 'from' | 'to';
@@ -41,12 +42,12 @@ export function SelectTokenPage(props: PropTypes) {
             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();
+  const loadingMetaStatus = useMetaStore.use.loadingStatus();
 
   return (
     <TokenSelector
@@ -59,6 +60,7 @@ export function SelectTokenPage(props: PropTypes) {
         navigateBackFrom(navigationRoutes.fromToken);
       }}
       onBack={navigateBackFrom.bind(null, navigationRoutes.fromToken)}
+      loadingStatus={loadingMetaStatus}
     />
   );
 }

package/src/pages/SettingsPage.tsx

@@ -30,6 +30,8 @@ export function SettingsPage({ supportedSwappers }: PropTypes) {
 
   const infiniteApprove = useSettingsStore.use.infiniteApprove();
   const toggleInfiniteApprove = useSettingsStore.use.toggleInfiniteApprove();
+  const loadingMetaStatus = useMetaStore.use.loadingStatus();
+
   const uniqueSwappersGroups: Array<{
     title: string;
     logo: string;
@@ -93,6 +95,7 @@ export function SettingsPage({ supportedSwappers }: PropTypes) {
       onThemeChange={setTheme}
       infiniteApprove={infiniteApprove}
       toggleInfiniteApprove={toggleInfiniteApprove}
+      loadingStatus={loadingMetaStatus}
     />
   );
 }

package/src/pages/SwapDetailsPage.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import useCopyToClipboard from '../hooks/useCopyToClipboard';
 import { useManager } from '@rango-dev/queue-manager-react';
@@ -6,33 +6,169 @@ 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';
+import {
+  cancelSwap,
+  PendingSwapNetworkStatus,
+} from '@rango-dev/queue-manager-rango-preset';
+import { useWallets } from '@rango-dev/wallets-core';
+import {
+  getCurrentBlockchainOfOrNull,
+  getCurrentStep,
+  getRelatedWalletOrNull,
+} from '@rango-dev/queue-manager-rango-preset';
+import { getSwapDate } from '../utils/time';
+import { useNavigate } from 'react-router-dom';
+import { useBestRouteStore } from '../store/bestRoute';
+import {
+  getLastConvertedTokenInFailedSwap,
+  getSwapMessages,
+  isNetworkStatusInWarningState,
+  shouldRetrySwap,
+} from '../utils/swap';
+import { TokenPreview } from '../components/TokenPreview';
+import { Spacer } from '@rango-dev/ui';
+import { numberToString } from '../utils/numbers';
+//@ts-ignore
+import { t } from 'i18next';
+import { SwapDetailsPlaceholder } from '../components/SwapDetailsPlaceholder';
 
 export function SwapDetailsPage() {
   const selectedSwapRequestId = useUiStore.use.selectedSwapRequestId();
+  const { canSwitchNetworkTo, connect } = useWallets();
+  const retry = useBestRouteStore.use.retry();
+  const navigate = useNavigate();
   const { navigateBackFrom } = useNavigateBack();
-  const { manager } = useManager();
   const [isCopied, handleCopy] = useCopyToClipboard(2000);
+  const { manager } = useManager();
+
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setLoading(false);
+    }, 5000);
+  }, []);
 
   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;
+    const swap = manager?.get(selectedSwap?.id!);
     if (swap) cancelSwap(swap);
   };
+  const swap = selectedSwap?.swap;
+
+  if (!swap)
+    return (
+      <SwapDetailsPlaceholder
+        requestId={selectedSwapRequestId || ''}
+        loading={loading}
+        onBack={navigateBackFrom.bind(null, navigationRoutes.swapDetails)}
+      />
+    );
+
+  const firstStep = swap.steps[0];
+  const lastStep = swap.steps[swap.steps.length - 1];
+  const fromAmount = numberToString(swap.inputAmount);
+  const toAmount = numberToString(swap.simulationResult.outputAmount);
+
+  const currentStep = getCurrentStep(swap);
+
+  const currentStepBlockchain = currentStep
+    ? getCurrentBlockchainOfOrNull(swap, currentStep)
+    : null;
+  const currentStepWallet = currentStep
+    ? getRelatedWalletOrNull(swap, currentStep)
+    : null;
+  const currentStepNetworkStatus = currentStep?.networkStatus;
+
+  const swapMessages = getSwapMessages(swap, currentStep);
+
+  const networkWarningState = isNetworkStatusInWarningState(currentStep);
+
+  const swapDate = getSwapDate(swap);
+
+  const shouldRetry = shouldRetrySwap(swap);
+
+  const switchNetwork =
+    !!currentStepBlockchain &&
+    !!currentStepWallet?.walletType &&
+    currentStepNetworkStatus ===
+      PendingSwapNetworkStatus.WaitingForNetworkChange &&
+    canSwitchNetworkTo(currentStepWallet?.walletType, currentStepBlockchain)
+      ? connect.bind(null, currentStepWallet.walletType, currentStepBlockchain)
+      : undefined;
+
+  const lastConvertedTokenInFailedSwap =
+    getLastConvertedTokenInFailedSwap(swap);
+
   return (
     <SwapHistory
       onBack={navigateBackFrom.bind(null, navigationRoutes.swapDetails)}
+      previewInputs={
+        <>
+          <TokenPreview
+            chain={{
+              displayName: firstStep?.fromBlockchain || '',
+              // @ts-ignore
+              logo: firstStep?.fromBlockchainLogo || '',
+            }}
+            token={{
+              symbol: firstStep?.fromSymbol || '',
+              image: firstStep?.fromLogo || '',
+            }}
+            amount={fromAmount}
+            label={t('From')}
+            loadingStatus={'success'}
+          />
+          <Spacer size={12} direction="vertical" />
+          <TokenPreview
+            chain={{
+              displayName: lastStep?.toBlockchain || '',
+              // @ts-ignore
+              logo: lastStep?.toBlockchainLogo || '',
+            }}
+            token={{
+              symbol: lastStep?.toSymbol || '',
+              image: lastStep?.toLogo || '',
+            }}
+            amount={toAmount}
+            label={t('To')}
+            loadingStatus={'success'}
+          />
+        </>
+      }
       //todo: move PendingSwap type to rango-types
       //@ts-ignore
-      pendingSwap={selectedSwap?.swap}
+      pendingSwap={swap}
       onCopy={handleCopy}
       isCopied={isCopied}
       onCancel={onCancel}
+      shortMessage={swapMessages.shortMessage}
+      detailedMessage={swapMessages.detailedMessage}
+      currentStepBlockchain={currentStepBlockchain || ''}
+      switchNetwork={switchNetwork}
+      type={
+        networkWarningState ? 'warning' : swap.extraMessageSeverity || undefined
+      }
+      date={swapDate}
+      {...(shouldRetry && {
+        onRetry: () => {
+          retry(swap);
+          setTimeout(() => {
+            navigate(navigationRoutes.home);
+          }, 0);
+        },
+      })}
+      {...(lastConvertedTokenInFailedSwap && {
+        lastConvertedTokenInFailedSwap: {
+          blockchain: lastConvertedTokenInFailedSwap.blockchain,
+          outputAmount: lastConvertedTokenInFailedSwap.outputAmount || '',
+          symbol: lastConvertedTokenInFailedSwap.symbol,
+        },
+      })}
     />
   );
 }