@rango-dev/widget-embedded 0.12.1-next.3 → 0.12.1-next.31

package/src/pages/SwapDetailsPage.tsx

@@ -1,166 +1,65 @@
+import { cancelSwap } from '@rango-dev/queue-manager-rango-preset';
+import { useManager } from '@rango-dev/queue-manager-react';
 import React from 'react';
+
+import { SwapDetails } from '../components/SwapDetails';
+import { SwapDetailsPlaceholder } from '../components/SwapDetails/SwapDetails.Placeholder';
 import { navigationRoutes } from '../constants/navigationRoutes';
-import { useManager } from '@rango-dev/queue-manager-react';
 import { useNavigateBack } from '../hooks/useNavigateBack';
-import { getPendingSwaps } from '../utils/queue';
-import {
-  SwapHistory,
-  useCopyToClipboard,
-  SwapDetailsPlaceholder,
-} from '@rango-dev/ui';
+import { useMetaStore } from '../store/meta';
 import { useUiStore } from '../store/ui';
-import {
-  cancelSwap,
-  PendingSwapNetworkStatus,
-} from '@rango-dev/queue-manager-rango-preset';
-import { useWallets } from '@rango-dev/wallets-react';
-import {
-  getCurrentBlockchainOfOrNull,
-  getCurrentStep,
-  getRelatedWalletOrNull,
-} from '@rango-dev/queue-manager-rango-preset';
-import { getSwapDate } from '../utils/time';
-import { useNavigate } from 'react-router-dom';
-import { useBestRouteStore } from '../store/bestRoute';
-import {
-  getLastConvertedTokenInFailedSwap,
-  getSwapMessages,
-  isNetworkStatusInWarningState,
-  shouldRetrySwap,
-} from '../utils/swap';
-import { getFormatedPendingSwap } from '../utils/routing';
+import { getPendingSwaps } from '../utils/queue';
 
 export function SwapDetailsPage() {
-  const selectedSwapRequestId = useUiStore.use.selectedSwapRequestId();
-  const { canSwitchNetworkTo, connect, getWalletInfo } = useWallets();
-  const retry = useBestRouteStore.use.retry();
-  const navigate = useNavigate();
-  const { navigateBackFrom } = useNavigateBack();
-  const [isCopied, handleCopy] = useCopyToClipboard(2000);
   const { manager, state } = useManager();
-
+  const loading = !state.loadedFromPersistor;
   const pendingSwaps = getPendingSwaps(manager);
+  const requestId = useUiStore.use.selectedSwapRequestId();
+  const { navigateBackFrom } = useNavigateBack();
+  const { loadingStatus } = useMetaStore();
+
+  const showSkeleton = loading || loadingStatus === 'loading';
+
   const selectedSwap = pendingSwaps.find(
-    ({ swap }) => swap.requestId === selectedSwapRequestId
+    ({ swap }) => swap.requestId === requestId
   );
 
   const onCancel = () => {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @typescript-eslint/no-non-null-asserted-optional-chain
-    const swap = manager?.get(selectedSwap?.id!);
-    if (swap) cancelSwap(swap);
+    if (selectedSwap?.id) {
+      const swap = manager?.get(selectedSwap.id);
+      if (swap) {
+        cancelSwap(swap);
+      }
+    }
+  };
+
+  const onDelete = async () => {
+    if (selectedSwap?.id) {
+      try {
+        await manager?.deleteQueue(selectedSwap.id);
+        navigateBackFrom(navigationRoutes.swapDetails);
+      } catch (e) {
+        console.log(e);
+      }
+    }
   };
   const swap = selectedSwap?.swap;
-  const loading = !state.loadedFromPersistor;
 
-  if (!swap)
+  if (!swap || showSkeleton) {
     return (
       <SwapDetailsPlaceholder
-        requestId={selectedSwapRequestId || ''}
-        loading={loading}
-        onBack={navigateBackFrom.bind(null, navigationRoutes.swapDetails)}
+        requestId={requestId || ''}
+        showSkeleton={showSkeleton}
       />
     );
-
-  const currentStep = getCurrentStep(swap);
-
-  const currentStepBlockchain = currentStep
-    ? getCurrentBlockchainOfOrNull(swap, currentStep)
-    : null;
-  const currentStepWallet = currentStep
-    ? getRelatedWalletOrNull(swap, currentStep)
-    : null;
-  const currentStepNetworkStatus = currentStep?.networkStatus;
-
-  const swapMessages = getSwapMessages(swap, currentStep);
-
-  const networkWarningState = isNetworkStatusInWarningState(currentStep);
-
-  const swapDate = getSwapDate(swap);
-
-  const shouldRetry = shouldRetrySwap(swap);
-
-  const isMobileWallet = (walletType: string): boolean =>
-    !!getWalletInfo(walletType)?.mobileWallet;
-
-  const showSwitchNetwork =
-    currentStepNetworkStatus ===
-      PendingSwapNetworkStatus.WaitingForNetworkChange &&
-    !!currentStepBlockchain &&
-    !!currentStepWallet?.walletType &&
-    (isMobileWallet(currentStepWallet.walletType) ||
-      canSwitchNetworkTo(currentStepWallet.walletType, currentStepBlockchain));
-
-  const switchNetwork = showSwitchNetwork
-    ? connect.bind(null, currentStepWallet.walletType, currentStepBlockchain)
-    : undefined;
-
-  const lastConvertedTokenInFailedSwap =
-    getLastConvertedTokenInFailedSwap(swap);
+  }
 
   return (
-    <SwapHistory
-      onBack={navigateBackFrom.bind(null, navigationRoutes.swapDetails)}
-      /* TODO: It was temporarily removed to find a better solution*/
-      /*
-      previewInputs={
-        <>
-          <TokenPreview
-            chain={{
-              displayName: firstStep?.fromBlockchain || '',
-              logo: firstStep?.fromBlockchainLogo || '',
-            }}
-            token={{
-              symbol: firstStep?.fromSymbol || '',
-              image: firstStep?.fromLogo || '',
-            }}
-            amount={fromAmount}
-            label={t('From')}
-            loadingStatus={'success'}
-          />
-          <Divider size={12} />
-          <TokenPreview
-            chain={{
-              displayName: lastStep?.toBlockchain || '',
-              logo: lastStep?.toBlockchainLogo || '',
-            }}
-            token={{
-              symbol: lastStep?.toSymbol || '',
-              image: lastStep?.toLogo || '',
-            }}
-            amount={toAmount}
-            label={t('To')}
-            loadingStatus={'success'}
-          />
-        </>
-      }
-      */
-      pendingSwap={getFormatedPendingSwap(swap)}
-      onCopy={handleCopy}
-      isCopied={isCopied}
+    <SwapDetails
+      swap={swap}
+      requestId={requestId || ''}
       onCancel={onCancel}
-      shortMessage={swapMessages.shortMessage}
-      detailedMessage={swapMessages.detailedMessage}
-      currentStepBlockchain={currentStepBlockchain || ''}
-      switchNetwork={switchNetwork}
-      type={
-        networkWarningState ? 'warning' : swap.extraMessageSeverity || undefined
-      }
-      date={swapDate}
-      {...(shouldRetry && {
-        onRetry: () => {
-          retry(swap);
-          setTimeout(() => {
-            navigate(navigationRoutes.home);
-          }, 0);
-        },
-      })}
-      {...(lastConvertedTokenInFailedSwap && {
-        lastConvertedTokenInFailedSwap: {
-          blockchain: lastConvertedTokenInFailedSwap.blockchain,
-          outputAmount: lastConvertedTokenInFailedSwap.outputAmount || '',
-          symbol: lastConvertedTokenInFailedSwap.symbol,
-        },
-      })}
+      onDelete={onDelete}
     />
   );
 }

package/src/pages/ThemePage.tsx

@@ -0,0 +1,96 @@
+import { i18n } from '@lingui/core';
+import {
+  AutoThemeIcon,
+  DarkModeIcon,
+  LightModeIcon,
+  List,
+  ListItemButton,
+  Radio,
+  RadioRoot,
+  Typography,
+} from '@rango-dev/ui';
+import React from 'react';
+
+import { Layout } from '../components/Layout';
+import { SettingsContainer } from '../components/SettingsContainer';
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { useNavigateBack } from '../hooks/useNavigateBack';
+import { useSettingsStore } from '../store/settings';
+
+type Theme = 'dark' | 'light' | 'auto';
+
+enum Mode {
+  DARK = 'dark',
+  LIGHT = 'light',
+  AUTO = 'auto',
+}
+
+export function ThemePage() {
+  const { navigateBackFrom } = useNavigateBack();
+  const theme = useSettingsStore.use.theme();
+  const setTheme = useSettingsStore.use.setTheme();
+
+  const themesList = [
+    {
+      id: Mode.LIGHT,
+      value: Mode.LIGHT,
+      title: (
+        <Typography variant="title" size="xmedium">
+          {i18n.t('Light')}
+        </Typography>
+      ),
+      onClick: () => setTheme(Mode.LIGHT as Theme),
+      start: <LightModeIcon color="gray" />,
+      end: <Radio value={Mode.LIGHT} />,
+    },
+    {
+      id: Mode.DARK,
+      value: Mode.DARK,
+      title: (
+        <Typography variant="title" size="xmedium">
+          {i18n.t('Dark')}
+        </Typography>
+      ),
+      onClick: () => setTheme(Mode.DARK as Theme),
+      start: <DarkModeIcon color="gray" />,
+      end: <Radio value={Mode.DARK} />,
+    },
+    {
+      id: Mode.AUTO,
+      value: Mode.AUTO,
+      title: (
+        <Typography variant="title" size="xmedium">
+          {i18n.t('Auto')}
+        </Typography>
+      ),
+      onClick: () => setTheme(Mode.AUTO as Theme),
+      start: <AutoThemeIcon color="gray" />,
+      end: <Radio value={Mode.AUTO} />,
+    },
+  ];
+
+  return (
+    <Layout
+      header={{
+        onBack: navigateBackFrom.bind(null, navigationRoutes.settings),
+        title: i18n.t('Theme'),
+      }}>
+      <SettingsContainer>
+        <RadioRoot
+          onValueChange={(value) => setTheme(value as Theme)}
+          value={theme}>
+          <List
+            type={
+              <ListItemButton
+                title={i18n.t('Theme')}
+                id="_"
+                onClick={() => console.log()}
+              />
+            }
+            items={themesList}
+          />
+        </RadioRoot>
+      </SettingsContainer>
+    </Layout>
+  );
+}

package/src/pages/WalletsPage.tsx

@@ -1,29 +1,17 @@
-import {
-  Alert,
-  SecondaryPage,
-  styled,
-  Wallet,
-  WalletState,
-  WalletInfo,
-} from '@rango-dev/ui';
-import React, { useEffect, useRef, useState } from 'react';
-import { getlistWallet, sortWalletsBasedOnState } from '../utils/wallets';
-import {
-  WalletType,
-  WalletTypes,
-  detectMobileScreens,
-} from '@rango-dev/wallets-shared';
-import { useWallets } from '@rango-dev/wallets-react';
+import type { WidgetConfig } from '../types';
+import type { WalletType } from '@rango-dev/wallets-shared';
 
-import { useUiStore } from '../store/ui';
-import { useNavigateBack } from '../hooks/useNavigateBack';
-import { navigationRoutes } from '../constants/navigationRoutes';
 import { i18n } from '@lingui/core';
+import { styled, Typography, Wallet, WalletState } from '@rango-dev/ui';
+import React, { Fragment, useState } from 'react';
+
+import { Layout } from '../components/Layout';
+import { WalletModal } from '../components/WalletModal';
+import { navigationRoutes } from '../constants/navigationRoutes';
+import { useNavigateBack } from '../hooks/useNavigateBack';
+import { useWalletList } from '../hooks/useWalletList';
 import { useMetaStore } from '../store/meta';
-import { Spinner } from '@rango-dev/ui';
-import { LoadingFailedAlert } from '@rango-dev/ui';
-import { WidgetConfig } from '../types';
-import { configWalletsToWalletName } from '../utils/providers';
+import { getContainer } from '../utils/common';
 
 interface PropTypes {
   supportedWallets: WidgetConfig['wallets'];
@@ -33,120 +21,87 @@ interface PropTypes {
 
 const ListContainer = styled('div', {
   display: 'grid',
-  gap: '.5rem',
-  gridTemplateColumns: ' repeat(2, minmax(0, 1fr))',
+  gap: '$10',
+  gridTemplateColumns: ' repeat(3, minmax(0, 1fr))',
   alignContent: 'baseline',
-  padding: '0.5rem',
-  overflowY: 'auto',
-});
-
-const LoaderContainer = styled('div', {
-  display: 'flex',
-  justifyContent: 'center',
-  width: '100%',
-  position: 'absolute',
-  top: '50%',
+  paddingTop: '$15',
+  height: '100%',
 });
 
-const AlertContainer = styled('div', {
-  paddingBottom: '$16',
+const Container = styled('div', {
+  textAlign: 'center',
 });
 
-const ALL_SUPPORTED_WALLETS = Object.values(WalletTypes);
+export const TIME_TO_CLOSE_MODAL = 3_000;
+export const TIME_TO_IGNORE_MODAL = 300;
 
-export function WalletsPage({
-  supportedWallets,
-  multiWallets,
-  config,
-}: PropTypes) {
+export function WalletsPage({ config }: PropTypes) {
   const { navigateBackFrom } = useNavigateBack();
-  const { state, disconnect, getWalletInfo, connect } = useWallets();
-  const wallets = getlistWallet(
-    state,
-    getWalletInfo,
-    configWalletsToWalletName(supportedWallets, {
-      walletConnectProjectId: config?.walletConnectProjectId,
-    }) || ALL_SUPPORTED_WALLETS
-  );
-  const walletsRef = useRef<WalletInfo[]>();
-
-  let sortedWallets = detectMobileScreens()
-    ? wallets.filter((wallet) => wallet.showOnMobile)
-    : wallets;
-  sortedWallets = sortWalletsBasedOnState(sortedWallets);
-  const [walletErrorMessage, setWalletErrorMessage] = useState('');
-  const toggleConnectWalletsButton =
-    useUiStore.use.toggleConnectWalletsButton();
-  const loadingMetaStatus = useMetaStore.use.loadingStatus();
+  const [openModal, setOpenModal] = useState(false);
+  const [selectedWalletType, setSelectedWalletType] = useState<WalletType>('');
+  let modalTimerId: ReturnType<typeof setTimeout> | null = null;
 
-  const onSelectWallet = async (type: WalletType) => {
-    const wallet = state(type);
-    try {
-      if (walletErrorMessage) setWalletErrorMessage('');
-      if (wallet.connected) {
-        await disconnect(type);
-      } else {
-        if (
-          !multiWallets &&
-          !!wallets.find((w) => w.state === WalletState.CONNECTED)
-        ) {
-          return;
-        }
-        await connect(type);
+  const { list, handleClick, error } = useWalletList({
+    config,
+    onBeforeConnect: (type) => {
+      modalTimerId = setTimeout(() => {
+        setOpenModal(true);
+        setSelectedWalletType(type);
+      }, TIME_TO_IGNORE_MODAL);
+    },
+    onConnect: () => {
+      if (modalTimerId) {
+        clearTimeout(modalTimerId);
       }
-    } catch (e) {
-      setWalletErrorMessage('Error: ' + (e as any)?.message);
-    }
-  };
-  const disconnectConnectingWallets = () => {
-    const connectingWallets =
-      walletsRef.current?.filter(
-        (wallet) => wallet.state === WalletState.CONNECTING
-      ) || [];
-    for (const wallet of connectingWallets) {
-      disconnect(wallet.type);
-    }
-  };
-  useEffect(() => {
-    toggleConnectWalletsButton();
-    return () => {
-      disconnectConnectingWallets();
-      toggleConnectWalletsButton();
-    };
-  }, []);
+      setTimeout(() => {
+        setOpenModal(false);
+      }, TIME_TO_CLOSE_MODAL);
+    },
+  });
 
-  useEffect(() => {
-    walletsRef.current = wallets;
-  }, [wallets]);
+  const loadingMetaStatus = useMetaStore.use.loadingStatus();
+  const selectedWallet = list.find(
+    (wallet) => wallet.type === selectedWalletType
+  );
+  const selectedWalletImage = selectedWallet?.image || '';
+  const selectedWalletState =
+    selectedWallet?.state || WalletState.NOT_INSTALLED;
 
   return (
-    <SecondaryPage
-      title={i18n.t('Select Wallet') || ''}
-      textField={false}
-      onBack={navigateBackFrom.bind(null, navigationRoutes.wallets)}>
-      <>
-        {walletErrorMessage && (
-          <AlertContainer>
-            <Alert type="error" title={walletErrorMessage} />
-          </AlertContainer>
-        )}
-        {loadingMetaStatus === 'loading' && (
-          <LoaderContainer className="loader">
-            <Spinner size={24} />
-          </LoaderContainer>
-        )}
-        {loadingMetaStatus === 'failed' && <LoadingFailedAlert />}
+    <Layout
+      header={{
+        title: i18n.t('Connect Wallets'),
+        onBack: navigateBackFrom.bind(null, navigationRoutes.wallets),
+      }}>
+      <Container>
+        <Typography variant="title" size="xmedium" align="center">
+          {i18n.t('Choose a wallet to connect.')}
+        </Typography>
         <ListContainer>
-          {loadingMetaStatus === 'success' &&
-            sortedWallets.map((wallet, index) => (
-              <Wallet
-                {...wallet}
-                key={`${index}-${wallet.type}`}
-                onClick={onSelectWallet}
-              />
-            ))}
+          {list.map((wallet, index) => {
+            const key = `wallet-${index}-${wallet.type}`;
+            return (
+              <Fragment key={key}>
+                <Wallet
+                  {...wallet}
+                  container={getContainer()}
+                  onClick={(type) => {
+                    void handleClick(type);
+                  }}
+                  isLoading={loadingMetaStatus === 'loading'}
+                />
+              </Fragment>
+            );
+          })}
+          <WalletModal
+            open={!!openModal}
+            onClose={() => setOpenModal(false)}
+            image={selectedWalletImage}
+            state={selectedWalletState}
+            error={error}
+          />
         </ListContainer>
-      </>
-    </SecondaryPage>
+      </Container>
+    </Layout>
   );
 }

package/src/services/httpService.ts

@@ -1,14 +1,13 @@
 import { RangoClient } from 'rango-sdk';
-import { getConfig } from '../utils/configs';
 
-// this API key is limited and
-// it is only for test purpose
-export const RANGO_PUBLIC_API_KEY = 'c6381a79-2817-4602-83bf-6a641a409e32';
+import { getConfig } from '../utils/configs';
 
 let rango: RangoClient | undefined = undefined;
 
 export const httpService = () => {
-  if (rango) return rango;
+  if (rango) {
+    return rango;
+  }
   rango = new RangoClient(getConfig('API_KEY'));
   return rango;
 };

package/src/store/app.ts

@@ -0,0 +1,15 @@
+import type { ConfigSlice } from './slices/config';
+import type { DataSlice } from './slices/data';
+
+import { create } from 'zustand';
+
+import createSelectors from './selectors';
+import { createConfigSlice } from './slices/config';
+import { createDataSlice } from './slices/data';
+
+const store = create<DataSlice & ConfigSlice>()((...a) => ({
+  ...createDataSlice(...a),
+  ...createConfigSlice(...a),
+}));
+
+export const useAppStore = createSelectors(store);