@rango-dev/widget-embedded 0.30.1 → 0.31.0

package/src/index.ts

@@ -4,6 +4,7 @@ import type {
   BlockchainAndTokenConfig,
   QuoteEventData,
   Tokens,
+  UiEventData,
   WalletEventData,
   WalletInfoWithExtra,
   WidgetColors,
@@ -71,6 +72,7 @@ import { widgetEventEmitter } from './services/eventEmitter';
 import {
   WidgetEvents as MainEvents,
   QuoteEventTypes,
+  UiEventTypes,
   WalletEventTypes,
   WidgetEvents,
 } from './types';
@@ -108,6 +110,7 @@ export type {
   WidgetVariant,
   WalletEventData,
   QuoteEventData,
+  UiEventData,
   WalletInfoWithExtra,
 };
 export {
@@ -133,6 +136,7 @@ export {
   MainEvents,
   QuoteEventTypes,
   WalletEventTypes,
+  UiEventTypes,
   RouteEventType,
   StepEventType,
   StepExecutionEventStatus,

package/src/pages/HistoryPage.tsx

@@ -1,15 +1,30 @@
-import type { PendingSwap, PendingSwapStep } from 'rango-types';
-
 import { i18n } from '@lingui/core';
 import { useManager } from '@rango-dev/queue-manager-react';
-import { Divider, NotFound, styled } from '@rango-dev/ui';
-import React, { useState } from 'react';
+import {
+  Button,
+  darkTheme,
+  Divider,
+  MessageBox,
+  NotFound,
+  styled,
+  Typography,
+} from '@rango-dev/ui';
+import {
+  type PendingSwap,
+  type PendingSwapStep,
+  TransactionStatus,
+} from 'rango-types';
+import React, { useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { WatermarkedModal } from '../components/common/WatermarkedModal';
+import { FilterSelector } from '../components/FilterSelector';
+import { SuffixContainer } from '../components/HeaderButtons/HeaderButtons.styles';
 import { HistoryGroupedList } from '../components/HistoryGroupedList';
 import { NotFoundContainer } from '../components/HistoryGroupedList/HistoryGroupedList.styles';
 import { Layout, PageContainer } from '../components/Layout';
 import { SearchInput } from '../components/SearchInput';
+import { getContainer } from '../utils/common';
 import { groupSwapsByDate } from '../utils/date';
 import { containsText } from '../utils/numbers';
 import { getPendingSwaps } from '../utils/queue';
@@ -23,6 +38,33 @@ const HistoryGroupedListContainer = styled('div', {
   height: '100%',
 });
 
+const SearchAndFilterBar = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+const Description = styled('div', {
+  '._typography': {
+    color: '$neutral700',
+    [`.${darkTheme}&`]: {
+      color: '$neutral900',
+    },
+  },
+});
+
+const transactionStatusFilters = [
+  {
+    id: TransactionStatus.SUCCESS,
+    title: i18n.t('Complete'),
+  },
+  {
+    id: TransactionStatus.RUNNING,
+    title: i18n.t('Running'),
+  },
+  { id: TransactionStatus.FAILED, title: i18n.t('Failed') },
+];
+
 const isStepContainsText = (steps: PendingSwapStep[], value: string) => {
   if (!steps?.length) {
     return false;
@@ -41,50 +83,116 @@ export function HistoryPage() {
   const { manager, state } = useManager();
   const list: PendingSwap[] = getPendingSwaps(manager).map(({ swap }) => swap);
   const [searchedFor, setSearchedFor] = useState<string>('');
+  const [openFilterSelector, setOpenFilterSelector] = useState(false);
   const loading = !state.loadedFromPersistor;
-
+  const [filterBy, setFilterBy] = useState('');
+  const [openClearModal, setOpenClearModal] = useState(false);
   const searchHandler = (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value;
     setSearchedFor(value);
   };
 
-  let filteredList = list;
-  if (searchedFor) {
-    filteredList = list.filter(
-      (swap) =>
-        containsText(swap.inputAmount, searchedFor) ||
-        containsText(swap.status, searchedFor) ||
-        isStepContainsText(swap.steps, searchedFor) ||
-        containsText(swap.requestId, searchedFor)
-    );
-  }
+  const filteredList = useMemo(() => {
+    if (!searchedFor && !filterBy) {
+      return list;
+    }
+
+    return list.filter((swap) => {
+      const { inputAmount, status, steps, requestId } = swap;
+
+      const matchesSearch =
+        !searchedFor ||
+        containsText(inputAmount, searchedFor) ||
+        containsText(status, searchedFor) ||
+        isStepContainsText(steps, searchedFor) ||
+        containsText(requestId, searchedFor);
+
+      const matchesFilter = !filterBy || filterBy === status;
+
+      return matchesSearch && matchesFilter;
+    });
+  }, [list, searchedFor, filterBy]);
 
   const isEmpty = !filteredList?.length && !loading;
 
+  const onCloseModal = () => setOpenClearModal(false);
+  const onClear = async () => {
+    try {
+      await manager?.clearQueue();
+
+      setOpenClearModal(false);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+  const isClearButtonDisabled = useMemo(() => {
+    return !list.some(
+      (swap) =>
+        swap.status === TransactionStatus.SUCCESS ||
+        swap.status === TransactionStatus.FAILED
+    );
+  }, [list]);
+
   return (
     <Layout
       header={{
         title: i18n.t('History'),
+        suffix: (
+          <SuffixContainer>
+            <Button
+              disabled={isClearButtonDisabled}
+              variant="ghost"
+              size="xsmall"
+              onClick={() => setOpenClearModal(true)}>
+              <Typography size="medium" variant="label" color="error">
+                {i18n.t('Clear all Txs')}
+              </Typography>
+            </Button>
+          </SuffixContainer>
+        ),
       }}>
       <PageContainer>
-        <SearchInput
-          setValue={setSearchedFor}
-          fullWidth
-          variant="contained"
-          placeholder={i18n.t('Search Transaction')}
-          autoFocus
-          onChange={searchHandler}
-          value={searchedFor}
-        />
+        <SearchAndFilterBar>
+          <SearchInput
+            setValue={setSearchedFor}
+            fullWidth
+            variant="contained"
+            placeholder={i18n.t('Search Transaction')}
+            autoFocus
+            onChange={searchHandler}
+            style={{ height: 36 }}
+            value={searchedFor}
+          />
+          <Divider size={10} direction="horizontal" />
+
+          <FilterSelector
+            filterBy={filterBy}
+            open={openFilterSelector}
+            onOpenChange={(open) => setOpenFilterSelector(open)}
+            onClickItem={(id) => setFilterBy(id)}
+            list={transactionStatusFilters}
+          />
+        </SearchAndFilterBar>
+
         <Divider size="16" />
         <HistoryGroupedListContainer>
           {isEmpty && (
             <NotFoundContainer>
               <Divider size={32} />
               <NotFound
-                title={i18n.t('No results found')}
+                title={
+                  searchedFor
+                    ? i18n.t('No results found')
+                    : i18n.t('No transactions')
+                }
+                titleColor={!searchedFor ? '$info' : undefined}
+                hasIcon={!!searchedFor}
                 description={
-                  searchedFor ? i18n.t('Try using different keywords') : ''
+                  searchedFor
+                    ? i18n.t('Try using different keywords')
+                    : i18n.t(
+                        'Your transaction history is stored locally and will appear here after you start a swap'
+                      )
                 }
               />
             </NotFoundContainer>
@@ -99,6 +207,52 @@ export function HistoryPage() {
           )}
         </HistoryGroupedListContainer>
       </PageContainer>
+      <WatermarkedModal
+        open={openClearModal}
+        onClose={onCloseModal}
+        container={getContainer()}>
+        <Divider size={20} />
+        <MessageBox
+          type="warning"
+          title={i18n.t('Clear History')}
+          description={
+            <Description>
+              <Typography variant="body" size="medium">
+                {i18n.t(
+                  'This would clear all succeeded/failed transactions from widget. Do you wish to proceed?'
+                )}
+              </Typography>
+              <Divider size={'24'} />
+
+              <Typography variant="body" size="small">
+                {i18n.t(
+                  'Hint: This does not clear your transaction history on blockchain. Only hides them in this page.'
+                )}
+              </Typography>
+            </Description>
+          }
+        />
+        <Divider size={40} />
+
+        <Divider size={10} />
+        <Button
+          variant="contained"
+          type="primary"
+          size="large"
+          onClick={onClear}>
+          {i18n.t('Yes, Clear history')}
+        </Button>
+        <Divider size={10} />
+        <Button
+          variant="outlined"
+          type="primary"
+          size="large"
+          onClick={onCloseModal}>
+          <Typography variant="title" size="medium" color="primary">
+            {i18n.t('No, Cancel')}
+          </Typography>
+        </Button>
+      </WatermarkedModal>
     </Layout>
   );
 }

package/src/pages/Home.tsx

@@ -19,7 +19,9 @@ import { useAppStore } from '../store/AppStore';
 import { useQuoteStore } from '../store/quote';
 import { useUiStore } from '../store/ui';
 import { useWalletsStore } from '../store/wallets';
+import { UiEventTypes } from '../types';
 import { isVariantExpandable } from '../utils/configs';
+import { emitPreventableEvent } from '../utils/events';
 import { getSwapButtonState, isTokensIdentical } from '../utils/swap';
 
 const MainContainer = styled('div', {
@@ -115,14 +117,12 @@ export function Home() {
       navigate(route);
     }
   };
-
   const onClickOnQuote = (quote: SelectedQuote) => {
     if (selectedQuote?.requestId !== quote.requestId) {
       setShowQuoteWarningModal(false);
       setSelectedQuote(quote);
     }
   };
-
   return (
     <MainContainer>
       <Layout
@@ -138,7 +138,10 @@ export function Home() {
             fullWidth
             onClick={() => {
               if (swapButtonState.action === 'connect-wallet') {
-                onHandleNavigation(navigationRoutes.wallets);
+                emitPreventableEvent(
+                  { type: UiEventTypes.CLICK_CONNECT_WALLET },
+                  () => onHandleNavigation(navigationRoutes.wallets)
+                );
               } else if (swapButtonState.action === 'confirm-warning') {
                 setShowQuoteWarningModal(true);
               } else {

package/src/pages/WalletsPage.tsx

@@ -80,12 +80,14 @@ export function WalletsPage() {
           setSelectedWalletType(type);
         }, TIME_TO_IGNORE_MODAL);
       },
-      onConnect: () => {
+      onConnect: (type) => {
         if (modalTimerId) {
           clearTimeout(modalTimerId);
         }
         setTimeout(() => {
-          setOpenModal(false);
+          if (selectedWalletType === type) {
+            setOpenModal(false);
+          }
         }, TIME_TO_CLOSE_MODAL);
       },
     });
@@ -126,21 +128,35 @@ export function WalletsPage() {
 
   const filteredWallets = filterWalletsByCategory(list, blockchainCategory);
 
-  const handleWalletItemClick = (type: string, wallet: WalletInfoWithExtra) => {
+  const handleWalletItemClick = (wallet: WalletInfoWithExtra) => {
     if (isSingleWalletActive(list, config.multiWallets)) {
       return;
     }
 
-    if (!!wallet.namespaces && wallet.state === WalletState.DISCONNECTED) {
-      setNamespacesModalState({
-        open: true,
-        providerType: type,
-        providerImage: wallet.image,
-        availableNamespaces: wallet.namespaces,
-        singleNamespace: wallet.singleNamespace,
-      });
+    if (
+      !!wallet.namespaces?.length &&
+      wallet.state === WalletState.DISCONNECTED
+    ) {
+      if (wallet.namespaces.length > 1) {
+        setNamespacesModalState({
+          open: true,
+          providerType: wallet.type,
+          providerImage: wallet.image,
+          availableNamespaces: wallet.namespaces,
+          singleNamespace: wallet.singleNamespace,
+        });
+      } else if (wallet.needsDerivationPath) {
+        setDerivationPathModalState({
+          open: true,
+          providerType: wallet.type,
+          providerImage: wallet.image,
+          namespace: wallet.namespaces[0],
+        });
+      } else {
+        void handleClick(wallet.type);
+      }
     } else {
-      void handleClick(type);
+      void handleClick(wallet.type);
     }
   };
 
@@ -208,7 +224,7 @@ export function WalletsPage() {
                 key={key}
                 {...wallet}
                 container={getContainer()}
-                onClick={(type) => handleWalletItemClick(type, wallet)}
+                onClick={() => handleWalletItemClick(wallet)}
                 isLoading={fetchMetaStatus === 'loading'}
                 disabled={!isActiveTab}
               />

package/src/services/cacheService.ts

@@ -0,0 +1,35 @@
+import type { Token } from 'rango-sdk';
+
+interface CacheServiceInterface<V> {
+  get<K extends keyof V>(key: K): V[K] | undefined;
+  set<K extends keyof V>(key: K, value: V[K]): void;
+  remove<K extends keyof V>(key: K): void;
+  clear(): void;
+}
+
+class CacheService<T> implements CacheServiceInterface<T> {
+  #cache: Map<string, T[keyof T]> = new Map();
+
+  get<K extends keyof T>(key: K): T[K] | undefined {
+    return this.#cache.get(key as string) as T[K];
+  }
+
+  set<K extends keyof T>(key: K, value: T[K]): void {
+    this.#cache.set(key as string, value);
+  }
+
+  remove<K extends keyof T>(key: K): void {
+    this.#cache.delete(key as string);
+  }
+
+  clear(): void {
+    this.#cache.clear();
+  }
+}
+
+export type CachedEntries = {
+  supportedSourceTokens: Token[];
+  supportedDestinationTokens: Token[];
+};
+
+export const cacheService = new CacheService<CachedEntries>();

package/src/store/notification.ts

@@ -36,6 +36,7 @@ export const useNotificationStore = createSelectors(
             creationTime: Date.now(),
             requestId: route.requestId,
             route: {
+              creationTime: parseInt(route.creationTime),
               from: {
                 blockchain: fromStep.fromBlockchain,
                 address: fromStep.fromSymbolAddress,
@@ -67,7 +68,18 @@ export const useNotificationStore = createSelectors(
         getNotifications: () => {
           const { isSynced, notifications } = get();
           return isSynced
-            ? notifications.sort((a, b) => b.creationTime - a.creationTime)
+            ? notifications.sort((a, b) => {
+                if (a.route.creationTime && !b.route.creationTime) {
+                  return -1;
+                }
+                if (!a.route.creationTime && b.route.creationTime) {
+                  return 1;
+                }
+                if (!a.route.creationTime && !b.route.creationTime) {
+                  return b.creationTime - a.creationTime;
+                }
+                return b.route.creationTime - a.route.creationTime;
+              })
             : [];
         },
         syncNotifications: (swaps) => {

package/src/store/quote.ts

@@ -224,7 +224,7 @@ export const useQuoteStore = createSelectors(
         set((state) => ({
           inputAmount: amount,
           ...(!amount && {
-            outputAmount: new BigNumber(0),
+            outputAmount: null,
             outputUsdValue: new BigNumber(0),
             selectedQuote: null,
           }),

package/src/store/slices/config.ts

@@ -1,7 +1,11 @@
+import type { DataSlice } from './data';
 import type { SettingsSlice } from './settings';
 import type { WidgetConfig } from '../../types';
 import type { StateCreatorWithInitialData } from '../app';
 
+import { cacheService } from '../../services/cacheService';
+import { matchTokensFromConfigWithMeta } from '../utils';
+
 export const DEFAULT_CONFIG: WidgetConfig = {
   apiKey: '',
   title: undefined,
@@ -54,7 +58,7 @@ export interface ConfigSlice {
 
 export const createConfigSlice: StateCreatorWithInitialData<
   WidgetConfig,
-  ConfigSlice & SettingsSlice,
+  ConfigSlice & SettingsSlice & DataSlice,
   ConfigSlice
 > = (initialData, set, get) => {
   return {
@@ -87,6 +91,40 @@ export const createConfigSlice: StateCreatorWithInitialData<
     // Actions
     updateConfig: (nextConfig: WidgetConfig) => {
       const currentConfig = get().config;
+      const {
+        _tokensMapByTokenHash: tokensMapByTokenHash,
+        _tokensMapByBlockchainName: tokensMapByBlockchainName,
+      } = get();
+
+      const supportedSourceTokens = matchTokensFromConfigWithMeta({
+        type: 'source',
+        config: {
+          blockchains: nextConfig.from?.blockchains,
+          tokens: nextConfig.from?.tokens,
+        },
+        meta: {
+          tokensMapByBlockchainName,
+          tokensMapByTokenHash,
+        },
+      });
+
+      const supportedDestinationTokens = matchTokensFromConfigWithMeta({
+        type: 'destination',
+        config: {
+          blockchains: nextConfig.to?.blockchains,
+          tokens: nextConfig.to?.tokens,
+        },
+        meta: {
+          tokensMapByBlockchainName,
+          tokensMapByTokenHash,
+        },
+      });
+
+      cacheService.set('supportedSourceTokens', supportedSourceTokens);
+      cacheService.set(
+        'supportedDestinationTokens',
+        supportedDestinationTokens
+      );
 
       set({
         config: {

package/src/store/slices/data.test.ts

@@ -3,6 +3,7 @@ import type { EvmBlockchainMeta, Token } from 'rango-sdk';
 
 import { assert, beforeEach, describe, expect, test } from 'vitest';
 
+import { cacheService } from '../../services/cacheService';
 import {
   createEvmBlockchain,
   createInitialAppStore,
@@ -17,6 +18,7 @@ let customTokens: [Token, Token, Token];
 let rangoBlockchain: EvmBlockchainMeta;
 
 beforeEach(() => {
+  cacheService.clear();
   rangoBlockchain = createEvmBlockchain();
 
   customTokens = [
@@ -52,6 +54,10 @@ beforeEach(() => {
   customTokens.forEach((token) => {
     const tokenHash = createTokenHash(token);
     initData._tokensMapByTokenHash.set(tokenHash, token);
+    if (!initData._tokensMapByBlockchainName[token.blockchain]) {
+      initData._tokensMapByBlockchainName[token.blockchain] = [];
+    }
+    initData._tokensMapByBlockchainName[token.blockchain].push(tokenHash);
   });
 
   const appStore = createAppStore();
@@ -351,3 +357,81 @@ describe('search in tokens', () => {
     expect(secondResult).toBe('RNG');
   });
 });
+
+describe('supported tokens from config', () => {
+  test('Should ensure tokens include only tokens from the config', () => {
+    const rangoToken = customTokens[0];
+    const djangoToken = customTokens[1];
+
+    const configTokens = [rangoToken, djangoToken];
+
+    appStoreState = updateAppStoreConfig(appStoreState, {
+      from: {
+        tokens: configTokens,
+      },
+      to: { tokens: configTokens },
+    });
+
+    let sourceTokens = appStoreState.tokens({
+      type: 'source',
+    });
+
+    let destinationTokens = appStoreState.tokens({
+      type: 'destination',
+    });
+
+    expect(configTokens).toMatchObject(sourceTokens);
+    expect(configTokens).toMatchObject(destinationTokens);
+
+    appStoreState = updateAppStoreConfig(appStoreState, {
+      from: {
+        blockchains: [rangoBlockchain.name],
+        tokens: {
+          [rangoBlockchain.name]: {
+            tokens: configTokens,
+            isExcluded: false,
+          },
+        },
+      },
+      to: {
+        blockchains: [rangoBlockchain.name],
+        tokens: {
+          [rangoBlockchain.name]: {
+            tokens: configTokens,
+            isExcluded: false,
+          },
+        },
+      },
+    });
+
+    sourceTokens = appStoreState.tokens({
+      type: 'source',
+    });
+
+    destinationTokens = appStoreState.tokens({
+      type: 'destination',
+    });
+
+    expect(sourceTokens).toMatchObject(sourceTokens);
+    expect(configTokens).toMatchObject(destinationTokens);
+  });
+
+  test('Check tokens calculation is caching', () => {
+    const rangoToken = customTokens[0];
+    const djangoToken = customTokens[1];
+
+    appStoreState = updateAppStoreConfig(appStoreState, {
+      from: {
+        tokens: [rangoToken, djangoToken],
+      },
+    });
+
+    expect(cacheService.get('supportedSourceTokens')?.length ?? 0).toBe(0);
+
+    appStoreState.tokens({
+      type: 'source',
+    });
+
+    expect(cacheService.get('supportedSourceTokens')?.length ?? 0).toBe(2);
+  });
+});