@rango-dev/widget-embedded 0.0.0-experimental-936229e8-20251208

package/src/pages/SwapDetailsPage.tsx

@@ -0,0 +1,78 @@
+import { i18n } from '@lingui/core';
+import { cancelSwap } from '@rango-dev/queue-manager-rango-preset';
+import { useManager } from '@rango-dev/queue-manager-react';
+import { Alert } from '@rango-dev/ui';
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+import { SwapDetails } from '../components/SwapDetails';
+import { SwapDetailsPlaceholder } from '../components/SwapDetails/SwapDetails.Placeholder';
+import { useNavigateBack } from '../hooks/useNavigateBack';
+import { useAppStore } from '../store/AppStore';
+import { getPendingSwaps } from '../utils/queue';
+
+export function SwapDetailsPage() {
+  const { manager, state } = useManager();
+  const loading = !state.loadedFromPersistor;
+  const pendingSwaps = getPendingSwaps(manager);
+  const { requestId } = useParams<{ requestId: string }>();
+  const navigateBack = useNavigateBack();
+  const { fetchStatus: fetchMetaStatus } = useAppStore();
+
+  if (!requestId) {
+    return (
+      <Alert
+        containerStyles={{ margin: '20px' }}
+        type="error"
+        title={i18n.t(
+          'The request ID is necessary to display the swap details.'
+        )}
+      />
+    );
+  }
+
+  const showSkeleton = loading || fetchMetaStatus === 'loading';
+
+  const selectedSwap = requestId
+    ? pendingSwaps.find(({ swap }) => swap.requestId === requestId)
+    : undefined;
+
+  const onCancel = () => {
+    if (selectedSwap?.id) {
+      const swap = manager?.get(selectedSwap.id);
+      if (swap) {
+        cancelSwap(swap);
+      }
+    }
+  };
+
+  const onDelete = async () => {
+    if (selectedSwap?.id) {
+      try {
+        manager?.deleteQueue(selectedSwap.id);
+        navigateBack();
+      } catch (e) {
+        console.log(e);
+      }
+    }
+  };
+  const swap = selectedSwap?.swap;
+
+  if (!swap || showSkeleton) {
+    return (
+      <SwapDetailsPlaceholder
+        requestId={requestId}
+        showSkeleton={showSkeleton}
+      />
+    );
+  }
+
+  return (
+    <SwapDetails
+      swap={swap}
+      requestId={requestId}
+      onCancel={onCancel}
+      onDelete={onDelete}
+    />
+  );
+}

package/src/pages/WalletsPage.tsx

@@ -0,0 +1,110 @@
+import type { WalletInfoWithExtra } from '../types';
+
+import { i18n } from '@lingui/core';
+import {
+  Divider,
+  getCategoriesCount,
+  SelectableCategoryList,
+  styled,
+  Typography,
+  Wallet,
+} from '@rango-dev/ui';
+import React, { useState } from 'react';
+
+import { Layout, PageContainer } from '../components/Layout';
+import { StatefulConnectModal } from '../components/StatefulConnectModal';
+import { useWalletList } from '../hooks/useWalletList';
+import { useAppStore } from '../store/AppStore';
+import { useUiStore } from '../store/ui';
+import { getContainer, isSingleWalletActive } from '../utils/common';
+import {
+  filterBlockchainsByWalletTypes,
+  filterWalletsByCategory,
+} from '../utils/wallets';
+
+const ListContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  columnGap: '$5',
+  rowGap: '$10',
+  flexWrap: 'wrap',
+  paddingTop: '$5',
+});
+
+const Container = styled(PageContainer, {
+  textAlign: 'center',
+});
+
+export function WalletsPage() {
+  const { fetchStatus: fetchMetaStatus } = useAppStore();
+  const [blockchainCategory, setBlockchainCategory] = useState<string>('ALL');
+  const blockchains = useAppStore().blockchains();
+  const { config } = useAppStore();
+  const [selectedWalletToConnect, setSelectedWalletToConnect] =
+    useState<WalletInfoWithExtra>();
+  const isActiveTab = useUiStore.use.isActiveTab();
+
+  const { list } = useWalletList();
+
+  const filteredBlockchains = filterBlockchainsByWalletTypes(list, blockchains);
+  const activeCategoriesCount = getCategoriesCount(filteredBlockchains);
+  const showCategory = activeCategoriesCount !== 1;
+
+  const filteredWallets = filterWalletsByCategory(list, blockchainCategory);
+
+  const handleWalletItemClick = (wallet: WalletInfoWithExtra) => {
+    if (isSingleWalletActive(list, config.multiWallets)) {
+      return;
+    }
+
+    setSelectedWalletToConnect(wallet);
+  };
+
+  return (
+    <Layout
+      header={{
+        title: i18n.t('Connect Wallets'),
+      }}>
+      <Container>
+        {showCategory && (
+          <>
+            <SelectableCategoryList
+              setCategory={setBlockchainCategory}
+              category={blockchainCategory}
+              blockchains={filteredBlockchains}
+              isLoading={fetchMetaStatus === 'loading'}
+            />
+            <Divider size={24} />
+          </>
+        )}
+        <Typography variant="title" size="xmedium" align="center">
+          {i18n.t('Choose a wallet to connect.')}
+        </Typography>
+        <ListContainer>
+          {filteredWallets.map((wallet, index) => {
+            const key = `wallet-${index}-${wallet.type}`;
+            return (
+              <Wallet
+                key={key}
+                {...wallet}
+                state={wallet.state}
+                container={getContainer()}
+                onClick={() => handleWalletItemClick(wallet)}
+                isLoading={fetchMetaStatus === 'loading'}
+                disabled={!isActiveTab}
+              />
+            );
+          })}
+          <StatefulConnectModal
+            id="widget-state-full-connect-modal"
+            wallet={selectedWalletToConnect}
+            onClose={() => {
+              setSelectedWalletToConnect(undefined);
+            }}
+          />
+        </ListContainer>
+      </Container>
+    </Layout>
+  );
+}

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/services/eventEmitter.ts

@@ -0,0 +1,11 @@
+import type { Events, WidgetEventEmitter } from '../types';
+
+import mitt from 'mitt';
+
+export const eventEmitter = mitt<Events>();
+
+// To be exported for Dapps
+export const widgetEventEmitter: WidgetEventEmitter = {
+  on: eventEmitter.on,
+  off: eventEmitter.off,
+};

package/src/services/httpService.ts

@@ -0,0 +1,13 @@
+import { RangoClient } from 'rango-sdk';
+
+import { getConfig } from '../utils/configs';
+
+let rango: RangoClient | undefined = undefined;
+
+export const httpService = () => {
+  if (rango) {
+    return rango;
+  }
+  rango = new RangoClient(getConfig('API_KEY'), getConfig('BASE_URL'));
+  return rango;
+};

package/src/store/AppStore.tsx

@@ -0,0 +1,46 @@
+import type { WidgetConfig } from '../types';
+import type { PropsWithChildren } from 'react';
+
+import React, { createContext, useContext, useEffect, useRef } from 'react';
+
+import { createAppStore } from './app';
+
+type AppStore = ReturnType<typeof createAppStore>;
+type AppStoreProviderProps = PropsWithChildren<{ config?: WidgetConfig }>;
+
+export const AppStoreContext = createContext<AppStore | null>(null);
+
+export function useAppStore() {
+  const store = useContext(AppStoreContext);
+
+  useEffect(() => {
+    if (store && !store.persist.hasHydrated()) {
+      /*
+       * folan
+       * asds
+       *
+       */
+      void store.persist.rehydrate();
+    }
+  }, []);
+
+  if (!store) {
+    throw new Error('Missing AppStoreContext.Provider in the tree');
+  }
+
+  return store();
+}
+
+export function AppStoreProvider(props: AppStoreProviderProps) {
+  const appStoreRef = useRef<AppStore>();
+
+  if (!appStoreRef.current) {
+    appStoreRef.current = createAppStore(props.config);
+  }
+
+  return (
+    <AppStoreContext.Provider value={appStoreRef.current}>
+      {props.children}
+    </AppStoreContext.Provider>
+  );
+}

package/src/store/app.ts

@@ -0,0 +1,66 @@
+import type { WidgetConfig } from '../types';
+import type { AppStoreState } from './slices/types';
+import type { StateCreator } from 'zustand';
+
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+import { createConfigSlice } from './slices/config';
+import { createDataSlice } from './slices/data';
+import { createSettingsSlice } from './slices/settings';
+import { createWalletsSlice } from './slices/wallets';
+
+export type StateCreatorWithInitialData<
+  T extends Partial<WidgetConfig>,
+  R extends Partial<AppStoreState>,
+  V extends Partial<AppStoreState>
+> = (
+  initialData: T | undefined,
+  ...rest: Parameters<StateCreator<R, [], [], V>>
+) => ReturnType<StateCreator<R, [], [], V>>;
+
+export type { AppStoreState };
+
+export function createAppStore(initialData?: WidgetConfig) {
+  return create<AppStoreState>()(
+    persist(
+      (...a) => ({
+        ...createWalletsSlice(...a),
+        ...createDataSlice(...a),
+        ...createSettingsSlice(...a),
+        ...createConfigSlice(initialData, ...a),
+      }),
+      {
+        name: 'user-settings',
+        skipHydration: true,
+        partialize: (state) => {
+          return {
+            _customTokens: state._customTokens,
+            theme: state.theme,
+            language: state.language,
+            affiliatePercent: state.affiliatePercent,
+            affiliateRef: state.affiliateRef,
+            affiliateWallets: state.affiliateWallets,
+            slippage: state.slippage,
+            customSlippage: state.customSlippage,
+            infiniteApprove: state.infiniteApprove,
+            preferredBlockchains: state.preferredBlockchains,
+            disabledLiquiditySources: state.disabledLiquiditySources,
+            quoteTokensRate: state.quoteTokensRate,
+          };
+        },
+        version: 1,
+        migrate: (persistedState, version) => {
+          const state = persistedState as AppStoreState;
+          if (version === 0) {
+            state._customTokens = state._customTokens.map((token) => ({
+              ...token,
+              warning: true,
+            }));
+          }
+          return state;
+        },
+      }
+    )
+  );
+}

package/src/store/middlewares/keepLastUpdated.ts

@@ -0,0 +1,26 @@
+import type { StateCreator } from 'zustand';
+
+/**
+ * you can wrap your slice in this middleware, it will update `lastUpdatedAt` for that slice when a zustand's `set` is calling
+ */
+export const keepLastUpdated: <Store, Slice extends { lastUpdatedAt: number }>(
+  config: StateCreator<Store, [], [], Slice>
+) => StateCreator<Store, [], [], Slice> = (slice) => (set, get, api) => {
+  const modifedSet: typeof set = (...params) => {
+    const [partial, ...restParams] = params;
+    set((state) => {
+      // @see https://github.com/pmndrs/zustand/blob/90f8d592d4cde9aa15f236e320f17ccbc86cf0fb/src/vanilla.ts#L69-L72
+      type State = ReturnType<typeof get>;
+      const nextState =
+        typeof partial === 'function'
+          ? (partial as (s: State) => State)(state)
+          : partial;
+
+      return {
+        ...nextState,
+        lastUpdatedAt: +new Date(),
+      };
+    }, ...restParams);
+  };
+  return slice(modifedSet, get, api);
+};

package/src/store/notification.ts

@@ -0,0 +1,138 @@
+import type { Notification } from '../types/notification';
+
+import {
+  type PendingSwapWithQueueID,
+  type Route,
+  type RouteEvent,
+  type StepEvent,
+} from '@rango-dev/queue-manager-rango-preset';
+import { create } from 'zustand';
+import { persist, subscribeWithSelector } from 'zustand/middleware';
+
+import createSelectors from './selectors';
+
+export interface NotificationState {
+  isSynced: boolean;
+  notifications: Notification[];
+  setNotification: (event: RouteEvent | StepEvent, route: Route) => void;
+  removeNotification: (requestId: Notification['requestId']) => void;
+  getNotifications: () => Notification[];
+  syncNotifications: (swaps: PendingSwapWithQueueID[]) => void;
+  clearNotifications: () => void;
+}
+
+export const useNotificationStore = createSelectors(
+  create<NotificationState>()(
+    persist(
+      subscribeWithSelector((set, get) => ({
+        isSynced: false,
+        notifications: [],
+        setNotification: (event, route) => {
+          const fromStep = route.steps[0];
+          const toStep = route.steps[route.steps.length - 1];
+          if (!fromStep || !toStep) {
+            return;
+          }
+          const notification: Notification = {
+            event,
+            creationTime: Date.now(),
+            requestId: route.requestId,
+            route: {
+              creationTime: parseInt(route.creationTime),
+              from: {
+                blockchain: fromStep.fromBlockchain,
+                address: fromStep.fromSymbolAddress,
+                symbol: fromStep.fromSymbol,
+              },
+              to: {
+                blockchain: toStep.toBlockchain,
+                address: toStep.toSymbolAddress,
+                symbol: toStep.toSymbol,
+              },
+            },
+          };
+
+          const excludedList = get().notifications.filter(
+            (notificationItem) => notificationItem.requestId !== route.requestId
+          );
+
+          set(() => ({
+            notifications: [...excludedList, notification],
+          }));
+        },
+        removeNotification: (requestId) => {
+          set((state) => ({
+            notifications: state.notifications.filter(
+              (notification) => notification.requestId !== requestId
+            ),
+          }));
+        },
+        getNotifications: () => {
+          const { isSynced, notifications } = get();
+          return isSynced
+            ? 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) => {
+          const { isSynced, notifications } = get();
+
+          if (!isSynced) {
+            const nextNotifications: Notification[] = [];
+            notifications.forEach((notification) => {
+              const swapExist = swaps.some(
+                (swap) => swap.swap.requestId === notification.requestId
+              );
+              if (swapExist) {
+                nextNotifications.push(notification);
+              }
+            });
+
+            set({ isSynced: true, notifications: nextNotifications });
+          }
+        },
+        clearNotifications: () => set({ notifications: [] }),
+      })),
+
+      {
+        name: 'notification',
+        skipHydration: true,
+        partialize: ({ isSynced, ...otherProps }) => otherProps,
+        version: 1,
+        migrate: (persistedState, version) => {
+          if (version === 0) {
+            /**
+             * Eliminate the persistence of read notifications,
+             * and remove the "read" flag from other notifications to align with the current modifications in the notification store structure.
+             */
+            const oldNotifications = (
+              persistedState as {
+                notifications: (Notification & { read: boolean })[];
+              }
+            ).notifications;
+
+            (persistedState as NotificationState).notifications =
+              oldNotifications
+                .filter(
+                  (notification: Notification & { read: boolean }) =>
+                    !notification.read
+                )
+                .map(({ read, ...otherProps }) => otherProps);
+          }
+
+          return persistedState as NotificationState;
+        },
+      }
+    )
+  )
+);