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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.1.10-next.106",
+  "version": "0.1.10-next.114",
   "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": {
@@ -35,6 +35,7 @@
     "@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",

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

@@ -19,6 +19,8 @@ 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();
 
@@ -37,6 +39,7 @@ 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>('');
@@ -92,7 +95,7 @@ export function App({ configs }: WidgetProps) {
     >
       <div id="pageContainer" className={activeTheme}>
         <QueueManager>
-          <SwapContainer>
+          <SwapContainer fixedHeight={currentPage != navigationRoutes.home}>
             <AppRouter
               title={configs?.title}
               titleSize={configs?.titleSize}

package/src/components/AppRoutes.tsx

@@ -12,6 +12,8 @@ import { WalletsPage } from '../pages/WalletsPage';
 import { SwapDetailsPage } from '../pages/SwapDetailsPage';
 import { Configs } from '../types';
 
+const getAbsolutePath = (path: string) => path.replace('/', '');
+
 interface PropTypes {
   configs?: Configs;
 }
@@ -21,7 +23,7 @@ export function AppRoutes(props: PropTypes) {
 
   return useRoutes([
     {
-      path: navigationRoutes.home,
+      path: getAbsolutePath(navigationRoutes.home),
       element: (
         <Home
           title={configs?.title}
@@ -31,7 +33,7 @@ export function AppRoutes(props: PropTypes) {
       ),
     },
     {
-      path: navigationRoutes.fromChain,
+      path: getAbsolutePath(navigationRoutes.fromChain),
       element: (
         <SelectChainPage
           type="from"
@@ -40,7 +42,7 @@ export function AppRoutes(props: PropTypes) {
       ),
     },
     {
-      path: navigationRoutes.toChain,
+      path: getAbsolutePath(navigationRoutes.toChain),
       element: (
         <SelectChainPage
           type="to"
@@ -49,7 +51,7 @@ export function AppRoutes(props: PropTypes) {
       ),
     },
     {
-      path: navigationRoutes.fromToken + '/*',
+      path: getAbsolutePath(navigationRoutes.fromToken),
       element: (
         <SelectTokenPage
           type="from"
@@ -58,7 +60,7 @@ export function AppRoutes(props: PropTypes) {
       ),
     },
     {
-      path: navigationRoutes.toToken,
+      path: getAbsolutePath(navigationRoutes.toToken),
       element: (
         <SelectTokenPage
           type="to"
@@ -67,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'}
@@ -98,6 +100,9 @@ export function AppRoutes(props: PropTypes) {
         />
       ),
     },
-    { path: navigationRoutes.confirmSwap, element: <ConfirmSwapPage /> },
+    {
+      path: getAbsolutePath(navigationRoutes.confirmSwap),
+      element: <ConfirmSwapPage />,
+    },
   ]);
 }

package/src/components/HeaderButtons.tsx

@@ -9,12 +9,15 @@ 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();
@@ -22,7 +25,11 @@ export function HeaderButtons(props: PropTypes) {
   return (
     <ButtonsContainer>
       <Tooltip content="Refresh">
-        <Button variant="ghost" onClick={onClickRefresh}>
+        <Button
+          variant="ghost"
+          onClick={onClickRefresh}
+          disabled={!onClickRefresh}
+        >
           <RetryIcon size={24} />
         </Button>
       </Tooltip>

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);
@@ -77,7 +90,6 @@ export function Layout({ configs }: LayoutProps) {
     configs?.fromTokens,
     configs?.toTokens,
   ]);
-
   return (
     <>
       <Header>
@@ -86,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);
@@ -98,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/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>
+  );
+}

package/src/components/TokenPreview.tsx

@@ -85,7 +85,7 @@ const OutputContainer = styled('div', {
 interface PropTypes {
   label: string;
   amount: string;
-  usdValue: BigNumber;
+  usdValue?: BigNumber;
   loadingStatus: LoadingStatus;
   chain: {
     displayName: string;
@@ -120,9 +120,12 @@ export function TokenPreview(props: PropTypes) {
           <Typography variant="body2" color="neutrals800">
             {props.label}
           </Typography>
-          <Typography variant="caption" color="neutrals600">{`$${numberToString(
-            props.usdValue
-          )}`}</Typography>
+          {props.usdValue && (
+            <Typography
+              variant="caption"
+              color="neutrals600"
+            >{`$${numberToString(props.usdValue)}`}</Typography>
+          )}
         </div>
         <div className="form">
           <Button

package/src/globalStyles.ts

@@ -2,9 +2,10 @@ import { globalCss } from '@rango-dev/ui';
 
 export const globalStyles = globalCss({
   '*': {
-    '&::-webkit-scrollbar': { width: '$8' },
+    '&::-webkit-scrollbar': { width: '$8', height: '$8' },
     '&::-webkit-scrollbar-thumb': {
       backgroundColor: '$neutrals400',
+      borderRadius: '$10',
     },
     '&::-webkit-scrollbar-thumb:hover': {
       backgroundColor: '$neutrals500',

package/src/pages/ConfirmSwapPage.tsx

@@ -32,12 +32,14 @@ import { ConfirmSwapErrorTypes } from '../types';
 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 navigate = useNavigate();
   const { navigateBackFrom } = useNavigateBack();
   const bestRoute = useBestRouteStore.use.bestRoute();
   const fetchingBestRoute = useBestRouteStore.use.loading();
+  const fetchingBestRouteError = useBestRouteStore.use.error();
   const setSelectedSwap = useUiStore.use.setSelectedSwap();
   const { blockchains, tokens } = useMetaStore.use.meta();
   const accounts = useWalletsStore.use.accounts();
@@ -47,6 +49,11 @@ export function ConfirmSwapPage() {
   const slippage = useSettingsStore.use.slippage();
   const customSlippage = useSettingsStore.use.customSlippage();
 
+  const bestRouteloadingStatus = getBestRouteStatus(
+    fetchingBestRoute,
+    !!fetchingBestRouteError
+  );
+
   const { manager } = useManager();
   const { loading, errors, warnings, confirmSwap } = useConfirmSwap();
 
@@ -130,7 +137,7 @@ export function ConfirmSwapPage() {
             usdValue={calcOutputUsdValue(fromAmount, firstStep?.from.usdPrice)}
             amount={fromAmount}
             label={t('From')}
-            loadingStatus={'success'}
+            loadingStatus={bestRouteloadingStatus}
           />
           <Spacer size={12} direction="vertical" />
           <TokenPreview
@@ -145,7 +152,7 @@ export function ConfirmSwapPage() {
             usdValue={calcOutputUsdValue(toAmount, lastStep?.to.usdPrice)}
             amount={toAmount}
             label={t('To')}
-            loadingStatus={'success'}
+            loadingStatus={bestRouteloadingStatus}
           />
         </>
       }

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>

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';
@@ -46,6 +47,7 @@ export function SelectTokenPage(props: PropTypes) {
   const toToken = useBestRouteStore.use.toToken();
   const setFromToken = useBestRouteStore.use.setFromToken();
   const setToToken = useBestRouteStore.use.setToToken();
+  const loadingMetaStatus = useMetaStore.use.loadingStatus();
 
   return (
     <TokenSelector
@@ -58,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';
@@ -25,6 +25,12 @@ import {
   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();
@@ -35,6 +41,14 @@ export function SwapDetailsPage() {
   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
@@ -44,9 +58,21 @@ export function SwapDetailsPage() {
     const swap = manager?.get(selectedSwap?.id!);
     if (swap) cancelSwap(swap);
   };
-
   const swap = selectedSwap?.swap;
-  if (!swap) return null;
+
+  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);
 
@@ -81,6 +107,39 @@ export function SwapDetailsPage() {
   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={swap}
@@ -106,7 +165,7 @@ export function SwapDetailsPage() {
       {...(lastConvertedTokenInFailedSwap && {
         lastConvertedTokenInFailedSwap: {
           blockchain: lastConvertedTokenInFailedSwap.blockchain,
-          outputAmount: lastConvertedTokenInFailedSwap.outputAmount,
+          outputAmount: lastConvertedTokenInFailedSwap.outputAmount || '',
           symbol: lastConvertedTokenInFailedSwap.symbol,
         },
       })}