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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.1.10-next.100",
+  "version": "0.1.10-next.106",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -26,13 +26,13 @@
     "trailingComma": "es5"
   },
   "dependencies": {
-    "@rango-dev/provider-all": "^0.1.11-next.79",
-    "@rango-dev/queue-manager-core": "^0.1.10-next.75",
-    "@rango-dev/queue-manager-rango-preset": "^0.1.10-next.77",
-    "@rango-dev/queue-manager-react": "^0.1.10-next.73",
+    "@rango-dev/provider-all": "^0.1.11-next.84",
+    "@rango-dev/queue-manager-core": "^0.1.10-next.82",
+    "@rango-dev/queue-manager-rango-preset": "^0.1.10-next.102",
+    "@rango-dev/queue-manager-react": "^0.1.10-next.76",
     "@rango-dev/ui": "^0.1.10-next.75",
-    "@rango-dev/wallets-core": "^0.1.11-next.80",
-    "@rango-dev/wallets-shared": "^0.1.11-next.78",
+    "@rango-dev/wallets-core": "^0.1.11-next.88",
+    "@rango-dev/wallets-shared": "^0.1.11-next.84",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "i18next": "^22.4.11",
@@ -41,8 +41,8 @@
     "immer": "^9.0.19",
     "mitt": "^3.0.0",
     "parcel": "^2.8.0",
-    "rango-sdk": "^0.1.19",
-    "rango-types": "^0.1.23",
+    "rango-sdk": "^0.1.23",
+    "rango-types": "^0.1.28",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^12.2.0",

package/src/App.tsx

@@ -1,12 +1,12 @@
 import { SwapContainer } from '@rango-dev/ui';
-import React from 'react';
+import React, { useState } from 'react';
 import { AppRouter } from './components/AppRouter';
 import { useMetaStore } from './store/meta';
 import './app.css';
 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,
@@ -22,7 +22,6 @@ import './i18n';
 
 const providers = allProviders();
 
-//todo: update interface and update widget state based on WidgetProps change
 export type WidgetProps = {
   configs?: Configs;
 };
@@ -39,6 +38,10 @@ export function App({ configs }: WidgetProps) {
   const disconnectWallet = useWalletsStore.use.disconnectWallet();
   const connectWallet = useWalletsStore.use.connectWallet();
 
+  const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] =
+    useState<string>('');
+  const [disconnectedWallet, setDisconnectedWallet] = useState<WalletType>();
+
   const evmBasedChainNames = blockchains
     .filter(isEvmBlockchain)
     .map((chain) => chain.name);
@@ -47,7 +50,7 @@ export function App({ configs }: WidgetProps) {
     type,
     event,
     value,
-    _,
+    state,
     supportedChains
   ) => {
     if (event === Events.ACCOUNTS) {
@@ -63,8 +66,22 @@ export function App({ configs }: WidgetProps) {
         connectWallet(data);
       } else {
         disconnectWallet(type);
+        setDisconnectedWallet(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);
+    }
   };
 
   return (
@@ -80,6 +97,11 @@ export function App({ configs }: WidgetProps) {
               title={configs?.title}
               titleSize={configs?.titleSize}
               titleWeight={configs?.titleWeight}
+              lastConnectedWallet={lastConnectedWalletWithNetwork}
+              disconnectedWallet={disconnectedWallet}
+              clearDisconnectedWallet={() => {
+                setDisconnectedWallet(undefined);
+              }}
             >
               <Layout configs={configs} />
             </AppRouter>

package/src/QueueManager.tsx

@@ -3,6 +3,7 @@ import { Provider as ManagerProvider } from '@rango-dev/queue-manager-react';
 import {
   swapQueueDef,
   SwapQueueContext,
+  checkWaitingForNetworkChange,
 } from '@rango-dev/queue-manager-rango-preset';
 import { useWallets } from '@rango-dev/wallets-core';
 import {
@@ -62,7 +63,7 @@ function QueueManager(props: PropsWithChildren<{}>) {
       blockchains: allBlockchains,
       evmBasedChains: evmBasedChains,
       evmNetworkChainInfo:
-        convertEvmBlockchainMetaToEvmChainInfo(evmBasedChains),
+      convertEvmBlockchainMetaToEvmChainInfo(evmBasedChains),
       getSupportedChainNames,
     },
     getSigners,
@@ -83,7 +84,9 @@ function QueueManager(props: PropsWithChildren<{}>) {
       //@ts-ignore
       queuesDefs={[swapQueueDef]}
       context={context}
-      onPersistedDataLoaded={(_manager) => {}}
+      onPersistedDataLoaded={(manager) => {
+        checkWaitingForNetworkChange(manager);
+      }}
       isPaused={false}
     >
       {props.children}

package/src/components/AppRouter.tsx

@@ -5,9 +5,14 @@ import {
   useLocation,
   useNavigate,
 } from 'react-router';
+import { useQueueManager } from '@rango-dev/queue-manager-rango-preset';
 import { navigationRoutes } from '../constants/navigationRoutes';
+import { WalletType } from '@rango-dev/wallets-shared';
+import { isEvmBlockchain } from 'rango-types';
 import { UpdateUrl } from './UpdateUrl';
 import { Home } from '../pages/Home';
+import { useMetaStore } from '../store/meta';
+
 interface PropTypes {
   title?: string;
   titleSize?: number;
@@ -22,23 +27,13 @@ const Route: React.FC = ({
   const ref = useRef(true);
 
   useEffect(() => {
-    if (
-      [navigationRoutes.confirmWallets, navigationRoutes.confirmSwap].includes(
-        location.pathname
-      ) &&
-      ref.current
-    )
+    if (location.pathname === navigationRoutes.confirmSwap && ref.current)
       navigate(navigationRoutes.home + location.search, { state: 'redirect' });
 
     ref.current = false;
   }, []);
 
-  if (
-    [navigationRoutes.confirmWallets, navigationRoutes.confirmSwap].includes(
-      location.pathname
-    ) &&
-    ref.current
-  )
+  if (location.pathname === navigationRoutes.confirmSwap && ref.current)
     return <Home {...props} />;
 
   return <> {children}</>;
@@ -47,9 +42,25 @@ const Route: React.FC = ({
 export function AppRouter({
   children,
   ...props
-}: PropTypes & PropsWithChildren) {
+}: PropTypes &
+  PropsWithChildren & {
+    lastConnectedWallet: string;
+    disconnectedWallet: WalletType | undefined;
+    clearDisconnectedWallet: () => void;
+  }) {
   const isRouterInContext = useInRouterContext();
   const Router = isRouterInContext ? Route : MemoryRouter;
+  const { blockchains } = useMetaStore.use.meta();
+
+  const evmChains = blockchains.filter(isEvmBlockchain);
+
+  useQueueManager({
+    lastConnectedWallet: props.lastConnectedWallet,
+    clearDisconnectedWallet: props.clearDisconnectedWallet,
+    disconnectedWallet: props.disconnectedWallet,
+    evmChains,
+    notifier: () => {},
+  });
 
   return (
     <>

package/src/components/AppRoutes.tsx

@@ -9,7 +9,6 @@ import { SelectChainPage } from '../pages/SelectChainPage';
 import { SelectTokenPage } from '../pages/SelectTokenPage';
 import { SettingsPage } from '../pages/SettingsPage';
 import { WalletsPage } from '../pages/WalletsPage';
-import { ConfirmWalletsPage } from '../pages/ConfirmWalletsPage';
 import { SwapDetailsPage } from '../pages/SwapDetailsPage';
 import { Configs } from '../types';
 
@@ -100,6 +99,5 @@ export function AppRoutes(props: PropTypes) {
       ),
     },
     { path: navigationRoutes.confirmSwap, element: <ConfirmSwapPage /> },
-    { path: navigationRoutes.confirmWallets, element: <ConfirmWalletsPage /> },
   ]);
 }

package/src/components/Layout.tsx

@@ -65,6 +65,19 @@ export function Layout({ configs }: LayoutProps) {
     setFromToken(configs?.fromToken || null);
     setFromChain(configs?.fromChain || null);
   }, [configs?.fromToken, configs?.fromChain]);
+
+  useEffect(() => {
+    setToChain(null);
+    setFromChain(null);
+    setFromToken(null);
+    setToToken(null);
+  }, [
+    configs?.fromChains,
+    configs?.toChains,
+    configs?.fromTokens,
+    configs?.toTokens,
+  ]);
+
   return (
     <>
       <Header>

package/src/components/UpdateUrl.tsx

@@ -52,9 +52,7 @@ export function UpdateUrl() {
       fromAmount = '';
     if (
       loadingStatus !== 'success' &&
-      ![navigationRoutes.confirmWallets, navigationRoutes.confirmSwap].includes(
-        location.pathname
-      )
+      location.pathname != navigationRoutes.confirmSwap
     ) {
       fromChainString = searchParamsRef.current[SearchParams.FROM_CHAIN];
       fromTokenString = searchParamsRef.current[SearchParams.FROM_TOKEN];

package/src/components/warnings/BalanceWarnings.tsx

@@ -23,6 +23,7 @@ const ListItem = styled('li', {
 
 const Message = styled(Typography, {
   display: 'block',
+  color: '$warning500 !important',
 });
 
 export function BalanceWarnings({ messages }: PropTypes) {

package/src/components/warnings/MinRequiredSlippage.tsx

@@ -1,18 +1,23 @@
-import { Typography } from '@rango-dev/ui';
+import { Spacer, Typography, styled } from '@rango-dev/ui';
 import React from 'react';
 import { ChangeSlippageButton } from '../ChangeSlippageButton';
 
 interface PropTypes {
-  minRequiredSlippage: number | null;
+  minRequiredSlippage: string | null;
 }
 
+const StyledMessage = styled(Typography, {
+  color: '$error500 !important',
+});
+
 export function MinRequiredSlippage({ minRequiredSlippage }: PropTypes) {
   return (
-    <Typography variant="body2">
+    <StyledMessage variant="body2">
       We recommend you to increase slippage to at least &nbsp;
       {minRequiredSlippage}
       &nbsp; for this route.
+      <Spacer size={8} direction="vertical" />
       <ChangeSlippageButton />
-    </Typography>
+    </StyledMessage>
   );
 }

package/src/constants/navigationRoutes.ts

@@ -9,6 +9,5 @@ export const navigationRoutes = {
   swaps: '/swaps',
   wallets: '/wallets',
   confirmSwap: '/confirm-swap',
-  confirmWallets: '/confirm-wallets',
   swapDetails: '/swaps/:requestId',
 };

package/src/hooks/useConfirmSwap.ts

@@ -93,6 +93,7 @@ export function useConfirmSwap(): ConfirmSwap {
           meta
         );
 
+        //@ts-ignore
         return newSwap;
       }
       return;
@@ -228,7 +229,7 @@ export function useConfirmSwap(): ConfirmSwap {
           false,
           meta
         );
-
+        //@ts-ignore
         return newSwap;
       } else if (!proceedAnywayRef.current) {
         proceedAnywayRef.current = true;

package/src/hooks/useNavigateBack.ts

@@ -8,6 +8,8 @@ export function useNavigateBack() {
   navigationRoutes;
 
   const navigateBackFrom = (currentRoute: string) => {
+    if (currentRoute === navigationRoutes.swapDetails)
+      return navigate(navigationRoutes.swaps, { replace: true });
     if (
       !isRouterInContext ||
       (window.history.state && window.history.state.idx > 0)
@@ -23,7 +25,7 @@ export function useNavigateBack() {
           navigationRoutes.settings,
           navigationRoutes.wallets,
           navigationRoutes.swaps,
-          navigationRoutes.confirmWallets,
+          navigationRoutes.confirmSwap,
         ].includes(currentRoute)
       )
         navigate(navigationRoutes.home, { replace: true });
@@ -31,8 +33,6 @@ export function useNavigateBack() {
         navigate(navigationRoutes.settings, { replace: true });
       else if (currentRoute === navigationRoutes.swapDetails)
         navigate(navigationRoutes.swaps, { replace: true });
-      else if (currentRoute === navigationRoutes.confirmSwap)
-        navigate(navigationRoutes.confirmWallets, { replace: true });
     }
   };
 

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,98 @@
-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';
 
 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 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 { 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 +108,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={'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)}
+        />
+      }
       loading={loading}
       errors={ConfirmSwapErrors(errors)}
       warnings={ConfirmSwapWarnings(warnings)}
@@ -66,7 +168,6 @@ export function ConfirmSwapPage() {
           ? 'Proceed anyway!'
           : 'Confirm swap!'
       }
-      confirmButtonDisabled={fetchingBestRoute}
     />
   );
 }

package/src/pages/Home.tsx

@@ -215,7 +215,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/SelectTokenPage.tsx

@@ -41,7 +41,6 @@ export function SelectTokenPage(props: PropTypes) {
             tokensAreEqual(supportedToken, token)
           )
         );
-  console.log(supportedSourceTokens);
 
   const fromToken = useBestRouteStore.use.fromToken();
   const toToken = useBestRouteStore.use.toToken();