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

package/src/pages/WalletsPage.tsx

@@ -15,6 +15,9 @@ import { useUiStore } from '../store/ui';
 import { useNavigateBack } from '../hooks/useNavigateBack';
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { useTranslation } from 'react-i18next';
+import { useMetaStore } from '../store/meta';
+import { Spinner } from '@rango-dev/ui';
+import { LoadingFailedAlert } from '@rango-dev/ui';
 
 interface PropTypes {
   supportedWallets: 'all' | WalletType[];
@@ -25,9 +28,17 @@ const ListContainer = styled('div', {
   display: 'grid',
   gap: '.5rem',
   gridTemplateColumns: ' repeat(2, minmax(0, 1fr))',
-  height: '450px',
   alignContent: 'baseline',
   padding: '0.5rem',
+  overflowY: 'auto',
+});
+
+export const LoaderContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  width: '100%',
+  position: 'absolute',
+  top: '50%',
 });
 
 const AlertContainer = styled('div', {
@@ -50,6 +61,7 @@ export function WalletsPage({ supportedWallets, multiWallets }: PropTypes) {
   const [walletErrorMessage, setWalletErrorMessage] = useState('');
   const toggleConnectWalletsButton =
     useUiStore.use.toggleConnectWalletsButton();
+  const loadingMetaStatus = useMetaStore.use.loadingStatus();
   const { t } = useTranslation();
 
   const onSelectWallet = async (type: WalletType) => {
@@ -104,14 +116,21 @@ export function WalletsPage({ supportedWallets, multiWallets }: PropTypes) {
             <Alert type="error">{walletErrorMessage}</Alert>
           </AlertContainer>
         )}
+        {loadingMetaStatus === 'loading' && (
+          <LoaderContainer className="loader">
+            <Spinner size={24} />
+          </LoaderContainer>
+        )}
+        {loadingMetaStatus === 'failed' && <LoadingFailedAlert />}
         <ListContainer>
-          {sortedWallets.map((wallet, index) => (
-            <Wallet
-              {...wallet}
-              key={`${index}-${wallet.type}`}
-              onClick={onSelectWallet}
-            />
-          ))}
+          {loadingMetaStatus === 'success' &&
+            sortedWallets.map((wallet, index) => (
+              <Wallet
+                {...wallet}
+                key={`${index}-${wallet.type}`}
+                onClick={onSelectWallet}
+              />
+            ))}
         </ListContainer>
       </>
     </SecondaryPage>

package/src/store/bestRoute.ts

@@ -71,6 +71,7 @@ export const useBestRouteStore = createSelectors(
         set((state) => {
           let outputAmount: BigNumber | null = null;
           let outputUsdValue: BigNumber = ZERO;
+          if (!state.inputAmount || state.inputAmount === '0') return {};
           if (!!bestRoute) {
             outputAmount = !!bestRoute.result?.outputAmount
               ? new BigNumber(bestRoute.result?.outputAmount)
@@ -145,6 +146,7 @@ export const useBestRouteStore = createSelectors(
           toToken: token,
         })),
       setInputAmount: (amount) => {
+        console.log(amount, typeof amount);
         set((state) => ({
           inputAmount: amount,
           ...(!amount && {
@@ -211,7 +213,7 @@ export const useBestRouteStore = createSelectors(
           fromToken,
           inputAmount,
           outputAmount: null,
-          inputUsdValue: new BigNumber(0),
+          inputUsdValue: getUsdValue(fromToken || null, inputAmount),
           outputUsdValue: new BigNumber(0),
           toChain,
           toToken,
@@ -231,11 +233,11 @@ const bestRoute = (
   settingsStore: typeof useSettingsStore
 ) => {
   let abortController: AbortController | null = null;
-  const fetchBestRoute = debounce(() => {
+  const fetchBestRoute = () => {
     const { fromToken, toToken, inputAmount } = bestRouteStore.getState();
     const { slippage, customSlippage, disabledLiquiditySources } =
       settingsStore.getState();
-    if (!fromToken || !toToken || !inputAmount) return;
+    if (!fromToken || !toToken || !inputAmount || inputAmount === '0') return;
     abortController?.abort();
     abortController = new AbortController();
     const userSlippage = !!customSlippage ? customSlippage : slippage;
@@ -249,12 +251,13 @@ const bestRoute = (
       userSlippage,
       false
     );
-    bestRouteStore.setState({
-      loading: true,
-      bestRoute: null,
-      outputAmount: null,
-      outputUsdValue: new BigNumber(0),
-    });
+    if (!bestRouteStore.getState().loading)
+      bestRouteStore.setState({
+        loading: true,
+        bestRoute: null,
+        outputAmount: null,
+        outputUsdValue: new BigNumber(0),
+      });
     httpService
       .getBestRoute(requestBody, {
         signal: abortController.signal,
@@ -272,7 +275,32 @@ const bestRoute = (
           loading: false,
         });
       });
-  }, 600);
+  };
+
+  const debouncedFetchBestRoute = debounce(fetchBestRoute, 600);
+
+  const bestRouteParamsListener = () => {
+    const { fromToken, toToken, inputAmount, inputUsdValue } =
+      useBestRouteStore.getState();
+    if (!inputAmount || inputAmount === '0') return;
+
+    if (tokensAreEqual(fromToken, toToken))
+      return bestRouteStore.setState({
+        loading: false,
+        bestRoute: null,
+        outputAmount: new BigNumber(inputAmount),
+        outputUsdValue: inputUsdValue,
+      });
+
+    if (!bestRouteStore.getState().loading)
+      bestRouteStore.setState({
+        loading: true,
+        bestRoute: null,
+        outputAmount: null,
+        outputUsdValue: new BigNumber(0),
+      });
+    debouncedFetchBestRoute();
+  };
 
   useBestRouteStore.subscribe(
     (state) => ({
@@ -282,8 +310,7 @@ const bestRoute = (
       toToken: state.toToken,
       inputAmount: state.inputAmount,
     }),
-
-    fetchBestRoute.bind(null),
+    bestRouteParamsListener,
     {
       equalityFn: (prevState, state) => {
         if (isRouteParametersChanged(prevState, state)) return false;
@@ -298,7 +325,7 @@ const bestRoute = (
       customSlippage: state.customSlippage,
       disabledLiquiditySources: state.disabledLiquiditySources,
     }),
-    fetchBestRoute.bind(null),
+    bestRouteParamsListener,
     {
       equalityFn: (prevState, state) => {
         if (isRouteParametersChanged(prevState, state)) return false;

package/src/store/ui.ts

@@ -4,18 +4,22 @@ import createSelectors from './selectors';
 interface UiState {
   connectWalletsButtonDisabled: boolean;
   selectedSwapRequestId: string | null;
+  currentPage: string;
   toggleConnectWalletsButton: () => void;
   setSelectedSwap: (requestId: string | null) => void;
+  setCurrentPage: (path: string) => void;
 }
 
 export const useUiStore = createSelectors(
   create<UiState>()((set) => ({
     connectWalletsButtonDisabled: false,
     selectedSwapRequestId: null,
+    currentPage: '',
     toggleConnectWalletsButton: () =>
       set((state) => ({
         connectWalletsButtonDisabled: !state.connectWalletsButtonDisabled,
       })),
     setSelectedSwap: (requestId) => set({ selectedSwapRequestId: requestId }),
+    setCurrentPage: (path) => set({ currentPage: path }),
   }))
 );

package/src/store/wallets.ts

@@ -142,7 +142,7 @@ export const useWalletsStore = createSelectors(
             }
           });
           return {
-            selectedWallets: state.selectedWallets.concat(selectedWallets),
+            selectedWallets: selectedWallets,
           };
         }),
       setSelectedWallet: (wallet) =>
@@ -188,3 +188,6 @@ useWalletsStore.subscribe(
     equalityFn: shallow,
   }
 );
+
+export const fetchingBalanceSelector = (state: WalletsStore) =>
+  !!state.balances.find((wallet) => wallet.loading);

package/src/utils/date.ts

@@ -0,0 +1,62 @@
+import { PendingSwap } from '@rango-dev/queue-manager-rango-preset';
+import dayjs from 'dayjs';
+import { GroupBy } from '@rango-dev/ui';
+
+export const groupSwapsByDate: GroupBy = swaps => {
+  const output: Map<
+    string,
+    {
+      title: string;
+      swaps: PendingSwap[];
+    }
+  > = new Map([
+    [
+      'today',
+      {
+        title: 'Today',
+        swaps: [],
+      },
+    ],
+    [
+      'week',
+      {
+        title: 'This week',
+        swaps: [],
+      },
+    ],
+    [
+      'month',
+      {
+        title: 'This month',
+        swaps: [],
+      },
+    ],
+    [
+      'year',
+      {
+        title: 'This year',
+        swaps: [],
+      },
+    ],
+    [
+      'history',
+      {
+        title: 'History',
+        swaps: [],
+      },
+    ],
+  ]);
+
+  const now = dayjs();
+  swaps.forEach(swap => {
+    const swapDate = dayjs(Number(swap.creationTime));
+    if (now.isSame(swapDate, 'day')) output.get('today')?.swaps.push(swap);
+    else if (now.isSame(swapDate, 'week')) output.get('week')?.swaps.push(swap);
+    else if (now.isSame(swapDate, 'month'))
+      output.get('month')?.swaps.push(swap);
+    else if (now.isSame(swapDate, 'year')) output.get('year')?.swaps.push(swap);
+    else output.get('history')?.swaps.push(swap);
+  });
+
+  return Array.from(output.values());
+};

package/src/utils/routing.ts

@@ -117,19 +117,22 @@ export function isRouteParametersChanged(
   currentParams: BestRouteParams
 ) {
   return (
-    prevParams.fromChain?.name !== currentParams.fromChain?.name ||
-    prevParams.toChain?.name !== currentParams.toChain?.name ||
-    prevParams.fromToken?.symbol !== currentParams.fromToken?.symbol ||
-    prevParams.toToken?.symbol !== currentParams.toToken?.symbol ||
-    prevParams.fromToken?.blockchain !== currentParams.fromToken?.blockchain ||
-    prevParams.toToken?.blockchain !== currentParams.toToken?.blockchain ||
-    prevParams.fromToken?.address !== currentParams.fromToken?.address ||
-    prevParams.toToken?.address !== currentParams.toToken?.address ||
-    prevParams.inputAmount !== currentParams.inputAmount ||
-    prevParams.slippage !== currentParams.slippage ||
-    prevParams.customSlippage !== currentParams.customSlippage ||
-    prevParams.disabledLiquiditySources?.length !==
-      currentParams.disabledLiquiditySources?.length
+    !!currentParams.fromToken &&
+    !!currentParams.toToken &&
+    (prevParams.fromChain?.name !== currentParams.fromChain?.name ||
+      prevParams.toChain?.name !== currentParams.toChain?.name ||
+      prevParams.fromToken?.symbol !== currentParams.fromToken?.symbol ||
+      prevParams.toToken?.symbol !== currentParams.toToken?.symbol ||
+      prevParams.fromToken?.blockchain !==
+        currentParams.fromToken?.blockchain ||
+      prevParams.toToken?.blockchain !== currentParams.toToken?.blockchain ||
+      prevParams.fromToken?.address !== currentParams.fromToken?.address ||
+      prevParams.toToken?.address !== currentParams.toToken?.address ||
+      prevParams.inputAmount !== currentParams.inputAmount ||
+      prevParams.slippage !== currentParams.slippage ||
+      prevParams.customSlippage !== currentParams.customSlippage ||
+      prevParams.disabledLiquiditySources?.length !==
+        currentParams.disabledLiquiditySources?.length)
   );
 }
 
@@ -148,3 +151,10 @@ export function getBestRouteWithCalculatedFees(
     result: { ...bestRoute.result, swaps: swapsWithFee },
   };
 }
+
+//todo: refactor bestRoute store and add loadingStatus
+export const getBestRouteStatus = (loading: boolean, error: boolean) => {
+  if (loading) return 'loading';
+  if (error) return 'failed';
+  else return 'success';
+};

package/src/utils/swap.ts

@@ -434,6 +434,8 @@ export function createBestRouteRequestBody(
       });
   });
 
+  const filteredBlockchains = selectedWallets.map((wallet) => wallet.chain);
+
   const requestBody: BestRouteRequest = {
     amount: inputAmount.toString(),
     checkPrerequisites,
@@ -451,8 +453,8 @@ export function createBestRouteRequestBody(
     selectedWallets: selectedWalletsMap,
     swapperGroups: disabledLiquiditySources,
     swappersGroupsExclude: true,
-    //@ts-ignore
     slippage: slippage.toString(),
+    ...(checkPrerequisites && { blockchains: filteredBlockchains }),
   };
 
   return requestBody;

package/dist/components/Header.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-export declare const HeaderContainer: any;
-export interface PropTypes {
-    onClickRefresh: () => void;
-    title?: string;
-    titleSize?: number;
-    titleWeight?: number;
-}
-export declare function Header(props: PropTypes): JSX.Element;
-//# sourceMappingURL=Header.d.ts.map

package/dist/components/Header.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../src/components/Header.tsx"],"names":[],"mappings":";AAKA,eAAO,MAAM,eAAe,KAM1B,CAAC;AAEH,MAAM,WAAW,SAAS;IACxB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,SAAS,eAgBtC"}

package/src/components/Header.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { css, styled, Typography } from '@rango-dev/ui';
-import { HeaderButtons } from './HeaderButtons';
-import { useTranslation } from 'react-i18next';
-
-export const HeaderContainer = styled('div', {
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  width: '100%',
-  padding: '$16 0',
-});
-
-export interface PropTypes {
-  onClickRefresh: () => void;
-  title?: string;
-  titleSize?: number;
-  titleWeight?: number;
-}
-
-export function Header(props: PropTypes) {
-  const { onClickRefresh, title, titleSize, titleWeight } = props;
-  const { t } = useTranslation();
-  const titleStyle = css({
-    fontSize: `${titleSize}px !important`,
-    fontWeight: `${titleWeight} !important`,
-  });
-
-  return (
-    <HeaderContainer>
-      <Typography variant="h4" className={titleStyle()}>
-        {title ? t(title.toLocaleLowerCase()) : ''}
-      </Typography>
-      <HeaderButtons onClickRefresh={onClickRefresh} />
-    </HeaderContainer>
-  );
-}