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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.1.10-next.98",
+  "version": "0.1.10",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -10,8 +10,8 @@
   ],
   "browserslist": "> 0.5%, last 2 versions, not dead",
   "scripts": {
-    "dev": "parcel public/index.html -p 3001",
-    "build:app": "parcel build",
+    "dev": "parcel public/index.html -p 3001 --cache-dir=.parcel-cache",
+    "build:app": "parcel build --cache-dir=.parcel-cache",
     "build": "tsdx build --entry ./src/lib.tsx"
   },
   "husky": {
@@ -26,23 +26,24 @@
     "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",
+    "dayjs": "^1.11.7",
     "i18next": "^22.4.11",
     "i18next-browser-languagedetector": "^7.0.1",
     "i18next-http-backend": "^2.1.1",
     "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/readme.md

@@ -1,2 +1 @@
-
-Widget will use `components`, `queues` and `wallets` to make a react app to be embedded as widget.
+# @rango-dev/widget-embedded

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,
@@ -19,10 +19,11 @@ import QueueManager from './QueueManager';
 import { isEvmBlockchain } from 'rango-sdk';
 import { Configs } from './types';
 import './i18n';
+import { useUiStore } from './store/ui';
+import { navigationRoutes } from './constants/navigationRoutes';
 
 const providers = allProviders();
 
-//todo: update interface and update widget state based on WidgetProps change
 export type WidgetProps = {
   configs?: Configs;
 };
@@ -38,6 +39,11 @@ export function App({ configs }: WidgetProps) {
   const { blockchains } = useMetaStore.use.meta();
   const disconnectWallet = useWalletsStore.use.disconnectWallet();
   const connectWallet = useWalletsStore.use.connectWallet();
+  const currentPage = useUiStore.use.currentPage();
+
+  const [lastConnectedWalletWithNetwork, setLastConnectedWalletWithNetwork] =
+    useState<string>('');
+  const [disconnectedWallet, setDisconnectedWallet] = useState<WalletType>();
 
   const evmBasedChainNames = blockchains
     .filter(isEvmBlockchain)
@@ -47,7 +53,7 @@ export function App({ configs }: WidgetProps) {
     type,
     event,
     value,
-    _,
+    state,
     supportedChains
   ) => {
     if (event === Events.ACCOUNTS) {
@@ -63,8 +69,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 (
@@ -75,11 +95,16 @@ export function App({ configs }: WidgetProps) {
     >
       <div id="pageContainer" className={activeTheme}>
         <QueueManager>
-          <SwapContainer>
+          <SwapContainer fixedHeight={currentPage != navigationRoutes.home}>
             <AppRouter
               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,10 +9,11 @@ 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';
 
+const getAbsolutePath = (path: string) => path.replace('/', '');
+
 interface PropTypes {
   configs?: Configs;
 }
@@ -22,7 +23,7 @@ export function AppRoutes(props: PropTypes) {
 
   return useRoutes([
     {
-      path: navigationRoutes.home,
+      path: getAbsolutePath(navigationRoutes.home),
       element: (
         <Home
           title={configs?.title}
@@ -32,7 +33,7 @@ export function AppRoutes(props: PropTypes) {
       ),
     },
     {
-      path: navigationRoutes.fromChain,
+      path: getAbsolutePath(navigationRoutes.fromChain),
       element: (
         <SelectChainPage
           type="from"
@@ -41,7 +42,7 @@ export function AppRoutes(props: PropTypes) {
       ),
     },
     {
-      path: navigationRoutes.toChain,
+      path: getAbsolutePath(navigationRoutes.toChain),
       element: (
         <SelectChainPage
           type="to"
@@ -50,7 +51,7 @@ export function AppRoutes(props: PropTypes) {
       ),
     },
     {
-      path: navigationRoutes.fromToken + '/*',
+      path: getAbsolutePath(navigationRoutes.fromToken),
       element: (
         <SelectTokenPage
           type="from"
@@ -59,7 +60,7 @@ export function AppRoutes(props: PropTypes) {
       ),
     },
     {
-      path: navigationRoutes.toToken,
+      path: getAbsolutePath(navigationRoutes.toToken),
       element: (
         <SelectTokenPage
           type="to"
@@ -68,26 +69,26 @@ export function AppRoutes(props: PropTypes) {
       ),
     },
     {
-      path: navigationRoutes.settings,
+      path: getAbsolutePath(navigationRoutes.settings),
       element: (
         <SettingsPage supportedSwappers={configs?.liquiditySources || 'all'} />
       ),
     },
     {
-      path: navigationRoutes.liquiditySources,
+      path: getAbsolutePath(navigationRoutes.liquiditySources),
       element: (
         <LiquiditySourcePage
           supportedSwappers={configs?.liquiditySources || 'all'}
         />
       ),
     },
-    { path: navigationRoutes.swaps, element: <HistoryPage /> },
+    { path: getAbsolutePath(navigationRoutes.swaps), element: <HistoryPage /> },
     {
       path: navigationRoutes.swapDetails,
       element: <SwapDetailsPage />,
     },
     {
-      path: navigationRoutes.wallets,
+      path: getAbsolutePath(navigationRoutes.wallets),
       element: (
         <WalletsPage
           supportedWallets={configs?.wallets || 'all'}
@@ -99,7 +100,9 @@ export function AppRoutes(props: PropTypes) {
         />
       ),
     },
-    { path: navigationRoutes.confirmSwap, element: <ConfirmSwapPage /> },
-    { path: navigationRoutes.confirmWallets, element: <ConfirmWalletsPage /> },
+    {
+      path: getAbsolutePath(navigationRoutes.confirmSwap),
+      element: <ConfirmSwapPage />,
+    },
   ]);
 }

package/src/components/ChangeSlippageButton.tsx

@@ -1,23 +1,19 @@
 import React from 'react';
-import { Button, styled } from '@rango-dev/ui';
+import { Button } from '@rango-dev/ui';
 import { useNavigate } from 'react-router-dom';
 import { navigationRoutes } from '../constants/navigationRoutes';
 
-const StyledButton = styled(Button, {
-  marginTop: '$8',
-});
-
 export function ChangeSlippageButton() {
   const navigate = useNavigate();
 
   return (
-    <StyledButton
+    <Button
       type="primary"
-      variant="contained"
+      variant="outlined"
       size="small"
       onClick={() => navigate(navigationRoutes.settings)}
     >
       Change Slippage
-    </StyledButton>
+    </Button>
   );
 }

package/src/components/HeaderButtons.tsx

@@ -9,21 +9,28 @@ import {
 } from '@rango-dev/ui';
 import { useNavigate } from 'react-router-dom';
 import { navigationRoutes } from '../constants/navigationRoutes';
-import { PropTypes } from './Header';
 
 const ButtonsContainer = styled('div', {
   display: 'flex',
 });
 
+interface PropTypes {
+  onClickRefresh?: () => void;
+}
+
 export function HeaderButtons(props: PropTypes) {
   const { onClickRefresh } = props;
   const navigate = useNavigate();
 
   return (
     <ButtonsContainer>
-      <Tooltip content="Retry">
-        <Button variant="ghost" onClick={onClickRefresh}>
-          <RetryIcon size={28} />
+      <Tooltip content="Refresh">
+        <Button
+          variant="ghost"
+          onClick={onClickRefresh}
+          disabled={!onClickRefresh}
+        >
+          <RetryIcon size={24} />
         </Button>
       </Tooltip>
       <Tooltip content="Transactions History">

package/src/components/Layout.tsx

@@ -1,11 +1,17 @@
-import { Button, AddWalletIcon, Typography, styled } from '@rango-dev/ui';
+import {
+  Button,
+  AddWalletIcon,
+  Typography,
+  styled,
+  Spinner,
+} from '@rango-dev/ui';
 import React, { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useWallets } from '@rango-dev/wallets-core';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { useUiStore } from '../store/ui';
 import { AppRoutes } from './AppRoutes';
-import { useWalletsStore } from '../store/wallets';
+import { fetchingBalanceSelector, useWalletsStore } from '../store/wallets';
 import {
   calculateWalletUsdValue,
   getSelectableWallets,
@@ -14,11 +20,15 @@ import { removeDuplicateFrom } from '../utils/common';
 import { Configs } from '../types';
 import { useTranslation } from 'react-i18next';
 import { useBestRouteStore } from '../store/bestRoute';
+import { useMetaStore } from '../store/meta';
 
 const Header = styled('div', {
   display: 'flex',
   width: '100%',
   justifyContent: 'end',
+  '.balance': {
+    display: 'flex',
+  },
 });
 
 const WalletImage = styled('img', {
@@ -52,6 +62,9 @@ export function Layout({ configs }: LayoutProps) {
   const totalBalance = calculateWalletUsdValue(balances);
   const connectWalletsButtonDisabled =
     useUiStore.use.connectWalletsButtonDisabled();
+  const loadingMetaStatus = useMetaStore.use.loadingStatus();
+  const fetchingBalance = useWalletsStore(fetchingBalanceSelector);
+
   const { t } = useTranslation();
   useEffect(() => {
     setToChain(configs?.toChain || null);
@@ -65,6 +78,18 @@ 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>
@@ -73,6 +98,8 @@ export function Layout({ configs }: LayoutProps) {
           suffix={<AddWalletIcon size={20} />}
           variant="ghost"
           flexContent
+          loading={loadingMetaStatus === 'loading'}
+          disabled={loadingMetaStatus === 'failed'}
           onClick={() => {
             if (!connectWalletsButtonDisabled)
               navigate(navigationRoutes.wallets);
@@ -85,9 +112,14 @@ export function Layout({ configs }: LayoutProps) {
           ) : (
             <></>
           )}
-          <Typography variant="body2">
-            {!accounts?.length ? t('Connect Wallet') : `$${totalBalance || 0}`}
-          </Typography>
+          <div className="balance">
+            <Typography variant="body2">
+              {!accounts?.length
+                ? t('Connect Wallet')
+                : `$${totalBalance || 0}`}
+            </Typography>
+            {fetchingBalance && <Spinner />}
+          </div>
         </Button>
       </Header>
       <AppRoutes configs={configs} />

package/src/components/RoutesOverview.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { styled } from '@rango-dev/ui';
+import { BestRouteResponse } from 'rango-sdk';
+import { ChevronRightIcon } from '@rango-dev/ui';
+import { GasIcon } from '@rango-dev/ui';
+import { Spacer } from '@rango-dev/ui';
+
+export const Container = styled('div', {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  padding: '$8',
+  borderRadius: '$5',
+  backgroundColor: '$neutrals300',
+  color: '$neutrals800',
+  fontSize: '$12',
+
+  '.routes': {
+    display: 'flex',
+    alignItems: 'center',
+  },
+  '.fee': {
+    display: 'flex',
+    alignItems: 'center',
+  },
+});
+
+interface PropTypes {
+  routes: BestRouteResponse | null;
+  totalFee?: string;
+}
+function RoutesOverview(props: PropTypes) {
+  if (!props.routes) return null;
+
+  const swaps = props.routes.result?.swaps;
+  return (
+    <Container>
+      <div className="routes">
+        {swaps?.map((swap, idx) => {
+          const isLast = idx + 1 == swaps.length;
+          return (
+            <>
+              <div className="route">{swap.from.symbol}</div>
+              <ChevronRightIcon size={12} />
+              {isLast ? <div className="route">{swap.to.symbol}</div> : null}
+            </>
+          );
+        })}
+      </div>
+      {props.totalFee ? (
+        <div className="fee">
+          <GasIcon size={12} />
+          <Spacer size={4} />${props.totalFee}
+        </div>
+      ) : null}
+    </Container>
+  );
+}
+
+export default RoutesOverview;

package/src/components/SwapDetailsPlaceholder.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { SecondaryPage, Spinner, Alert, styled } from '@rango-dev/ui';
+import { LoaderContainer } from '../pages/WalletsPage';
+
+const PlaceholderContainer = styled('div', { height: '450px' });
+
+interface PropTypes {
+  requestId: string;
+  loading: boolean;
+  onBack: () => void;
+}
+
+export function SwapDetailsPlaceholder(props: PropTypes) {
+  const { requestId, loading, onBack } = props;
+
+  return (
+    <SecondaryPage title="Swap Details" textField={false} onBack={onBack}>
+      <PlaceholderContainer>
+        {loading ? (
+          <LoaderContainer>
+            <Spinner size={24} />
+          </LoaderContainer>
+        ) : (
+          <Alert
+            type="secondary"
+            title={`Swap with request ID = ${requestId} not found.`}
+          />
+        )}
+      </PlaceholderContainer>
+    </SecondaryPage>
+  );
+}