@rango-dev/widget-embedded 0.1.10-next.84 → 0.1.10-next.86

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.1.10-next.84",
+  "version": "0.1.10-next.86",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -10,7 +10,7 @@
   ],
   "browserslist": "> 0.5%, last 2 versions, not dead",
   "scripts": {
-    "dev": "parcel public/index.html -p 3000",
+    "dev": "parcel public/index.html -p 3001",
     "build:app": "parcel build",
     "build": "tsdx build --entry ./src/lib.tsx --transpileOnly"
   },
@@ -26,14 +26,19 @@
     "trailingComma": "es5"
   },
   "dependencies": {
-    "@rango-dev/provider-all": "^0.1.11-next.76",
+    "@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/ui": "^0.1.10-next.75",
     "@rango-dev/wallets-core": "^0.1.11-next.77",
     "bignumber.js": "^9.1.1",
+    "copy-to-clipboard": "^3.3.3",
     "immer": "^9.0.19",
     "mitt": "^3.0.0",
     "parcel": "^2.8.0",
-    "rango-sdk": "^0.1.17",
+    "rango-sdk": "^0.1.18",
+    "rango-types": "^0.1.22",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.8.0",

package/src/App.tsx

@@ -1,5 +1,11 @@
-import { SwapContainer } from '@rango-dev/ui';
-import React from 'react';
+import {
+  SwapContainer,
+  Alert,
+  Button,
+  Typography,
+  Drawer,
+} from '@rango-dev/ui';
+import React, { useState } from 'react';
 import { AppRouter } from './components/AppRouter';
 import { useMetaStore } from './store/meta';
 import './app.css';
@@ -7,11 +13,15 @@ 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 { prepareAccountsForWalletStore, walletAndSupportedChainsNames } from './utils/wallets';
+import {
+  prepareAccountsForWalletStore,
+  walletAndSupportedChainsNames,
+} from './utils/wallets';
 import { useWalletsStore } from './store/wallets';
 import { Layout } from './components/Layout';
 import { globalStyles } from './globalStyles';
 import { useTheme } from './hooks/useTheme';
+import QueueManager from './QueueManager';
 import { isEvmBlockchain } from 'rango-sdk';
 
 const providers = allProviders();
@@ -40,11 +50,18 @@ export function App() {
   const { blockchains } = useMetaStore.use.meta();
   const disconnectWallet = useWalletsStore.use.disconnectWallet();
   const connectWallet = useWalletsStore.use.connectWallet();
+
   const evmBasedChainNames = blockchains
     .filter(isEvmBlockchain)
     .map((chain) => chain.name);
 
-  const onUpdateState: EventHandler = (type, event, value, state, supportedChains) => {
+  const onUpdateState: EventHandler = (
+    type,
+    event,
+    value,
+    state,
+    supportedChains
+  ) => {
     if (event === Events.ACCOUNTS) {
       if (value) {
         const supportedChainNames: Network[] | null =
@@ -54,7 +71,7 @@ export function App() {
           type,
           value,
           evmBasedChainNames,
-          supportedChainNames,
+          supportedChainNames
         );
         connectWallet(data);
       } else {
@@ -62,16 +79,22 @@ export function App() {
       }
     }
   };
-  
+
   return (
     //@ts-ignore
-    <Provider allBlockChains={blockchains} providers={providers} onUpdateState={onUpdateState}>
+    <Provider
+      allBlockChains={blockchains}
+      providers={providers}
+      onUpdateState={onUpdateState}
+    >
       <div id="pageContainer" className={activeTheme}>
-        <SwapContainer>
-          <AppRouter>
-            <Layout />
-          </AppRouter>
-        </SwapContainer>
+        <QueueManager>
+          <SwapContainer>
+            <AppRouter>
+              <Layout />
+            </AppRouter>
+          </SwapContainer>
+        </QueueManager>
       </div>
     </Provider>
   );

package/src/QueueManager.tsx

@@ -0,0 +1,93 @@
+import React, { PropsWithChildren } from 'react';
+import { Provider as ManagerProvider } from '@rango-dev/queue-manager-react';
+import {
+  swapQueueDef,
+  SwapQueueContext,
+} from '@rango-dev/queue-manager-rango-preset';
+import { useWallets } from '@rango-dev/wallets-core';
+import {
+  convertEvmBlockchainMetaToEvmChainInfo,
+  Network,
+  WalletType,
+} from '@rango-dev/wallets-shared';
+import { useMetaStore } from './store/meta';
+import { useWalletsStore } from './store/wallets';
+import { walletAndSupportedChainsNames } from './utils/wallets';
+import { isEvmBlockchain } from 'rango-sdk';
+
+function QueueManager(props: PropsWithChildren<{}>) {
+  const {
+    providers,
+    getSigners,
+    state,
+    connect,
+    canSwitchNetworkTo,
+    getWalletInfo,
+  } = useWallets();
+
+  const { blockchains } = useMetaStore.use.meta();
+  const balances = useWalletsStore.use.balances();
+
+  const wallets = {
+    blockchains: balances.map((wallet) => ({
+      accounts: [wallet],
+      name: wallet.chain,
+    })),
+  };
+
+  const switchNetwork = (wallet: WalletType, network: Network) => {
+    if (!canSwitchNetworkTo(wallet, network)) {
+      return undefined;
+    }
+    return connect(wallet, network);
+  };
+
+  // TODO: this code copy & pasted from rango, should be refactored.
+  const allBlockchains = blockchains
+    .filter((blockchain) => blockchain.enabled)
+    .reduce(
+      (blockchainsObj, blockchain) => (
+        (blockchainsObj[blockchain.name] = blockchain), blockchainsObj
+      ),
+      {}
+    );
+  const evmBasedChains = blockchains.filter(isEvmBlockchain);
+  const getSupportedChainNames = (type: WalletType) => {
+    const { supportedChains } = getWalletInfo(type);
+    return walletAndSupportedChainsNames(supportedChains);
+  };
+  const allProviders = providers();
+  const context: SwapQueueContext = {
+    meta: {
+      blockchains: allBlockchains,
+      evmBasedChains: evmBasedChains,
+      evmNetworkChainInfo:
+        convertEvmBlockchainMetaToEvmChainInfo(evmBasedChains),
+      getSupportedChainNames,
+    },
+    getSigners,
+    //todo: remove Network type
+    //@ts-ignore
+    wallets,
+    providers: allProviders,
+    switchNetwork,
+    connect,
+    state,
+    notifier: (message) => {
+      console.log('[notifier]', message);
+    },
+  };
+
+  return (
+    <ManagerProvider
+      queuesDefs={[swapQueueDef]}
+      context={context}
+      onPersistedDataLoaded={(_manager) => {}}
+      isPaused={false}
+    >
+      {props.children}
+    </ManagerProvider>
+  );
+}
+
+export default QueueManager;

package/src/components/AppRoutes.tsx

@@ -30,9 +30,12 @@ export const AppRoutes = () =>
       path: navigationRoutes.liquiditySources,
       element: <LiquiditySourcePage />,
     },
-    { path: navigationRoutes.history, element: <HistoryPage /> },
+    { path: navigationRoutes.swaps, element: <HistoryPage /> },
+    {
+      path: navigationRoutes.swapDetails,
+      element: <SwapDetailsPage />,
+    },
     { path: navigationRoutes.wallets, element: <WalletsPage /> },
     { path: navigationRoutes.confirmSwap, element: <ConfirmSwapPage /> },
     { path: navigationRoutes.confirmWallets, element: <ConfirmWalletsPage /> },
-    { path: navigationRoutes.swapDetails, element: <SwapDetailsPage /> },
   ]);

package/src/components/HeaderButtons.tsx

@@ -1,5 +1,12 @@
 import React from 'react';
-import { SettingsIcon, Tooltip, styled, Button, HistoryIcon, RetryIcon } from '@rango-dev/ui';
+import {
+  SettingsIcon,
+  Tooltip,
+  styled,
+  Button,
+  HistoryIcon,
+  RetryIcon,
+} from '@rango-dev/ui';
 import { useNavigate } from 'react-router-dom';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { PropTypes } from './Header';
@@ -15,17 +22,23 @@ export function HeaderButtons(props: PropTypes) {
   return (
     <ButtonsContainer>
       <Tooltip content="Retry">
-        <Button variant="ghost" onClick={onClickRefresh.bind(null)}>
+        <Button variant="ghost" onClick={onClickRefresh}>
           <RetryIcon size={28} />
         </Button>
       </Tooltip>
       <Tooltip content="Transactions History">
-        <Button variant="ghost" onClick={() => navigate(navigationRoutes.history)}>
+        <Button
+          variant="ghost"
+          onClick={() => navigate(navigationRoutes.swaps)}
+        >
           <HistoryIcon size={24} />
         </Button>
       </Tooltip>
       <Tooltip content="Settings">
-        <Button variant="ghost" onClick={() => navigate(navigationRoutes.settings)}>
+        <Button
+          variant="ghost"
+          onClick={() => navigate(navigationRoutes.settings)}
+        >
           <SettingsIcon size={24} />
         </Button>
       </Tooltip>

package/src/components/UpdateUrl.tsx

@@ -9,6 +9,7 @@ import { useBestRouteStore } from '../store/bestRoute';
 import { useMetaStore } from '../store/meta';
 import { SearchParams } from '../constants/searchParams';
 import { navigationRoutes } from '../constants/navigationRoutes';
+import { useUiStore } from '../store/ui';
 
 function searchParamsToToken(
   tokens: Token[],
@@ -33,17 +34,6 @@ export function UpdateUrl() {
   const location = useLocation();
   const firstRenderSearchParams = useRef(location.search);
   const searchParamsRef = useRef<Record<string, string>>({});
-
-  useEffect(() => {
-    const params: Record<string, string> = {};
-    createSearchParams(firstRenderSearchParams.current).forEach(
-      (value, key) => {
-        params[key] = value;
-      }
-    );
-    searchParamsRef.current = params;
-  }, []);
-
   const fromChain = useBestRouteStore.use.fromChain();
   const toChain = useBestRouteStore.use.toChain();
   const fromToken = useBestRouteStore.use.fromToken();
@@ -56,6 +46,20 @@ export function UpdateUrl() {
   const setInputAmount = useBestRouteStore.use.setInputAmount();
   const loadingStatus = useMetaStore.use.loadingStatus();
   const { blockchains, tokens } = useMetaStore.use.meta();
+  const setSelectedSwap = useUiStore.use.setSelectedSwap();
+
+  useEffect(() => {
+    const params: Record<string, string> = {};
+    createSearchParams(firstRenderSearchParams.current).forEach(
+      (value, key) => {
+        params[key] = value;
+      }
+    );
+    searchParamsRef.current = params;
+    const requestId =
+      location.pathname.split(navigationRoutes.swaps + '/')[1] || null;
+    if (requestId) setSelectedSwap(requestId);
+  }, []);
 
   useEffect(() => {
     let fromChainString = '',

package/src/constants/navigationRoutes.ts

@@ -6,9 +6,9 @@ export const navigationRoutes = {
   toToken: '/to-token',
   settings: '/settings',
   liquiditySources: '/settings/liquidity-sources',
-  history: '/history',
+  swaps: '/swaps',
   wallets: '/wallets',
   confirmSwap: '/confirm-swap',
   confirmWallets: '/confirm-wallets',
-  swapDetails: '/history/swap-details',
+  swapDetails: '/swaps/:requestId',
 };

package/src/hooks/useCopyToClipboard.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import copy from 'copy-to-clipboard';
+
+export default function useCopyToClipboard(resetInterval?: number) {
+  const [isCopied, setCopied] = React.useState(false);
+
+  const handleCopy = React.useCallback((text: string | number) => {
+    copy(text.toString());
+    setCopied(true);
+  }, []);
+
+  React.useEffect(() => {
+    let timeout: NodeJS.Timeout;
+    if (isCopied && resetInterval) {
+      timeout = setTimeout(() => setCopied(false), resetInterval);
+    }
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [isCopied, resetInterval]);
+
+  return [isCopied, handleCopy] as const;
+}

package/src/hooks/useNavigateBack.ts

@@ -22,14 +22,17 @@ export function useNavigateBack() {
           navigationRoutes.toToken,
           navigationRoutes.settings,
           navigationRoutes.wallets,
-          navigationRoutes.history,
+          navigationRoutes.swaps,
+          navigationRoutes.confirmWallets,
         ].includes(currentRoute)
       )
         navigate(navigationRoutes.home, { replace: true });
-      else if (currentRoute === navigationRoutes.liquiditySources) {
+      else if (currentRoute === navigationRoutes.liquiditySources)
         navigate(navigationRoutes.settings, { replace: true });
-      } else if (currentRoute === navigationRoutes.swapDetails)
-        navigate(navigationRoutes.history, { replace: true });
+      else if (currentRoute === navigationRoutes.swapDetails)
+        navigate(navigationRoutes.swaps, { replace: true });
+      else if (currentRoute === navigationRoutes.confirmSwap)
+        navigate(navigationRoutes.confirmWallets, { replace: true });
     }
   };
 

package/src/pages/ConfirmSwapPage.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useNavigate } from 'react-router-dom';
 import { ConfirmSwap } from '@rango-dev/ui';
 import { useBestRouteStore } from '../store/bestRoute';
 import { useSettingsStore } from '../store/settings';
@@ -8,25 +9,37 @@ import { navigationRoutes } from '../constants/navigationRoutes';
 import { confirmSwap, useConfirmSwapStore } from '../store/confirmSwap';
 import { ConfirmSwapErrors } from '../components/ConfirmSwapErrors';
 import { ConfirmSwapWarnings } from '../components/ConfirmSwapWarnings';
+import { useManager } from '@rango-dev/queue-manager-react';
+import { useUiStore } from '../store/ui';
 
 export function ConfirmSwapPage() {
+  const setSelectedSwap = useUiStore.use.setSelectedSwap();
   const { navigateBackFrom } = useNavigateBack();
+  const { manager } = useManager();
+  const navigate = useNavigate();
 
   const bestRoute = useBestRouteStore.use.bestRoute();
 
   const loading = useConfirmSwapStore.use.loading();
   const warnings = useConfirmSwapStore.use.warnings();
   const errors = useConfirmSwapStore.use.errors();
-
-  console.log('loading:', loading, 'warnings:', warnings, 'errors:', errors);
-
   const slippage = useSettingsStore.use.slippage();
   const customSlippage = useSettingsStore.use.customSlippage();
   const selectedSlippage = customSlippage || slippage;
 
   return (
     <ConfirmSwap
-      onConfirm={confirmSwap.bind(null)}
+      onConfirm={() => {
+        confirmSwap().then((swap) => {
+          if (swap) {
+            manager?.create('swap', { swapDetails: swap });
+            setSelectedSwap(swap.requestId);
+            navigate(navigationRoutes.swaps + `/${swap.requestId}`, {
+              replace: true,
+            });
+          }
+        });
+      }}
       onBack={navigateBackFrom.bind(null, navigationRoutes.confirmSwap)}
       bestRoute={bestRoute}
       loading={loading}

package/src/pages/ConfirmWalletsPage.tsx

@@ -64,7 +64,9 @@ export function ConfirmWalletsPage() {
       swap={bestRoute!}
       fromAmount={fromAmount}
       toAmount={toAmount}
-      onConfirm={navigate.bind(null, navigationRoutes.confirmSwap)}
+      onConfirm={() =>
+        navigate(navigationRoutes.confirmSwap, { replace: true })
+      }
       onChange={(wallet) => setSelectedWallet(wallet)}
       confirmDisabled={confirmDisabled}
       handleConnectChain={(wallet) => handleConnectChain(wallet)}