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

package/src/components/HeaderButtons/HeaderButtons.tsx

@@ -0,0 +1,106 @@
+import type { HeaderButtonsPropTypes } from './HeaderButtons.types';
+
+import { i18n } from '@lingui/core';
+import {
+  NotificationsIcon,
+  Popover,
+  SettingsIcon,
+  Tooltip,
+  TransactionIcon,
+} from '@rango-dev/ui';
+import React from 'react';
+
+import { useAppStore } from '../../store/AppStore';
+import { getContainer } from '../../utils/common';
+import { isFeatureHidden } from '../../utils/settings';
+import { NotificationContent } from '../NotificationContent';
+
+import { HeaderButton } from './HeaderButtons.styles';
+import InProgressTransactionBadge from './InProgressTransactionBadge';
+import { NotificationsBadge } from './NotificationsBadge';
+import { RefreshButton } from './RefreshButton';
+
+export function HeaderButtons(props: HeaderButtonsPropTypes) {
+  const {
+    onClickRefresh,
+    onClickHistory,
+    onClickSettings,
+    hidden = [],
+    container,
+  } = props;
+
+  const {
+    config: { features },
+  } = useAppStore();
+
+  const isNotificationsHidden =
+    isFeatureHidden('notification', features) ||
+    hidden.includes('notifications');
+
+  return (
+    <>
+      {!hidden.includes('refresh') && (
+        <Tooltip
+          container={container || getContainer()}
+          side="top"
+          content={i18n.t('Refresh')}>
+          <RefreshButton onClick={onClickRefresh} />
+        </Tooltip>
+      )}
+
+      {!isNotificationsHidden && (
+        <Popover
+          align="end"
+          alignOffset={-88}
+          sideOffset={15}
+          collisionPadding={{ right: 20, left: 20 }}
+          container={getContainer()}
+          content={<NotificationContent />}>
+          <div>
+            <Tooltip
+              container={getContainer()}
+              side="top"
+              content={i18n.t('Notifications')}>
+              <HeaderButton
+                id="widget-header-notification-icon-btn"
+                size="small"
+                variant="ghost">
+                <NotificationsIcon size={18} color="black" />
+                <NotificationsBadge />
+              </HeaderButton>
+            </Tooltip>
+          </div>
+        </Popover>
+      )}
+      {!hidden.includes('settings') && (
+        <Tooltip
+          container={getContainer()}
+          side="top"
+          content={i18n.t('Settings')}>
+          <HeaderButton
+            id="widget-header-setting-icon-btn"
+            size="small"
+            variant="ghost"
+            onClick={onClickSettings}>
+            <SettingsIcon size={18} color="black" />
+          </HeaderButton>
+        </Tooltip>
+      )}
+      {!hidden.includes('history') && (
+        <Tooltip
+          container={getContainer()}
+          side="top"
+          content={i18n.t('History')}>
+          <HeaderButton
+            id="widget-header-history-icon-btn"
+            size="small"
+            variant="ghost"
+            onClick={onClickHistory}>
+            <TransactionIcon size={18} color="black" />
+            <InProgressTransactionBadge />
+          </HeaderButton>
+        </Tooltip>
+      )}
+    </>
+  );
+}

package/src/components/HeaderButtons/HeaderButtons.types.ts

@@ -0,0 +1,12 @@
+export interface PropTypes {
+  onClick: () => void;
+  isConnected?: boolean;
+  container?: HTMLElement;
+}
+export interface HeaderButtonsPropTypes {
+  onClickSettings?: () => void;
+  onClickRefresh?: () => void;
+  onClickHistory?: () => void;
+  hidden?: ('settings' | 'refresh' | 'history' | 'notifications')[];
+  container?: HTMLElement;
+}

package/src/components/HeaderButtons/InProgressTransactionBadge.tsx

@@ -0,0 +1,26 @@
+import type { PendingSwap } from 'rango-types';
+
+import { useManager } from '@rango-dev/queue-manager-react';
+import { InProgressIcon } from '@rango-dev/ui';
+import React from 'react';
+
+import { getPendingSwaps } from '../../utils/queue';
+
+import { InProgressTransactionBadgeContainer } from './HeaderButtons.styles';
+
+const InProgressTransactionBadge = () => {
+  const { manager } = useManager();
+  const list: PendingSwap[] = getPendingSwaps(manager).map(({ swap }) => swap);
+
+  if (!list.find((swap) => swap.status === 'running')) {
+    return null;
+  }
+
+  return (
+    <InProgressTransactionBadgeContainer id="widget-header-history-badge-container">
+      <InProgressIcon color="info" size={6} />
+    </InProgressTransactionBadgeContainer>
+  );
+};
+
+export default InProgressTransactionBadge;

package/src/components/HeaderButtons/NotificationsBadge.tsx

@@ -0,0 +1,32 @@
+import { EventSeverity } from '@rango-dev/queue-manager-rango-preset';
+import { Typography } from '@rango-dev/ui';
+import React from 'react';
+
+import { useNotificationStore } from '../../store/notification';
+
+import { NotificationsBadgeContainer } from './HeaderButtons.styles';
+
+export function NotificationsBadge() {
+  const { getNotifications } = useNotificationStore();
+
+  const notificationsList = getNotifications();
+
+  const notificationsCount = notificationsList.length;
+
+  const hasSeverNotification = !!notificationsList.find(
+    (notificationItem) =>
+      notificationItem.event.messageSeverity === EventSeverity.WARNING
+  );
+
+  return notificationsCount ? (
+    <NotificationsBadgeContainer isSever={hasSeverNotification}>
+      <Typography
+        variant="body"
+        size="xsmall"
+        color="$background"
+        id="widget-header-notifications-badge-container">
+        {notificationsCount}
+      </Typography>
+    </NotificationsBadgeContainer>
+  ) : null;
+}

package/src/components/HeaderButtons/RefreshButton.tsx

@@ -0,0 +1,83 @@
+import { RefreshProgressButton } from '@rango-dev/ui';
+import React, { useEffect, useState } from 'react';
+
+import { HeaderButton, ProgressIcon } from './HeaderButtons.styles';
+
+const REFRESH_INTERVAL = 1000;
+const MAX_ELAPSED_TIME = 60;
+const MAX_PERCENTAGE = 100;
+
+function RefreshButton({ onClick }: { onClick: (() => void) | undefined }) {
+  const [elapsedTime, setElapsedTime] = useState(0);
+  const [isRefetched, setIsRefetched] = useState(false);
+
+  const handleVisibilityChange = (interval?: number) => {
+    if (document.hidden && interval) {
+      // Tab is inactive, clear the interval
+      clearTimeout(interval);
+    }
+  };
+
+  useEffect(() => {
+    let interval: number | undefined;
+    if (onClick) {
+      interval = window.setInterval(() => {
+        setElapsedTime((prevTime) => prevTime + 1);
+
+        if (elapsedTime === MAX_ELAPSED_TIME) {
+          handleRefreshClick();
+        }
+      }, REFRESH_INTERVAL);
+    } else {
+      clearTimeout(interval);
+    }
+
+    document.addEventListener('visibilitychange', () =>
+      handleVisibilityChange(interval)
+    );
+
+    return () => {
+      document.removeEventListener('visibilitychange', () =>
+        handleVisibilityChange(interval)
+      );
+      if (interval) {
+        clearInterval(interval);
+      }
+    };
+  }, [elapsedTime, onClick]);
+
+  const clearTimeout = (interval?: number) => {
+    if (interval) {
+      clearInterval(interval);
+    }
+    setElapsedTime(0);
+  };
+
+  const handleRefreshClick = () => {
+    onClick?.();
+    setElapsedTime(0);
+    setIsRefetched(true);
+  };
+
+  return (
+    <HeaderButton
+      id="widget-header-refresh-icon-btn"
+      variant="ghost"
+      size="small"
+      style={{ paddingTop: 0, paddingBottom: 0 }}
+      onClick={handleRefreshClick}
+      disabled={!onClick}>
+      <ProgressIcon
+        onTransitionEnd={() => setIsRefetched(false)}
+        isRefetched={isRefetched}>
+        <RefreshProgressButton
+          size={22}
+          color={!onClick ? 'gray' : 'black'}
+          progress={(elapsedTime / MAX_ELAPSED_TIME) * MAX_PERCENTAGE}
+        />
+      </ProgressIcon>
+    </HeaderButton>
+  );
+}
+
+export { RefreshButton };

package/src/components/HeaderButtons/WalletButton.tsx

@@ -0,0 +1,49 @@
+import type { PropTypes } from './HeaderButtons.types';
+
+import { i18n } from '@lingui/core';
+import { Image, Tooltip, WalletIcon, WalletState } from '@rango-dev/ui';
+import React from 'react';
+
+import { useWalletList } from '../../hooks/useWalletList';
+
+import {
+  ConnectedIcon,
+  HeaderButton,
+  rowStyles,
+  WalletImageContainer,
+} from './HeaderButtons.styles';
+
+function WalletButton(props: PropTypes) {
+  const { list } = useWalletList();
+  const connectedWallets = list.filter(
+    (wallet) =>
+      wallet.state === WalletState.CONNECTED ||
+      wallet.state === WalletState.PARTIALLY_CONNECTED
+  );
+  const content = !connectedWallets.length ? (
+    i18n.t('Connect Wallet')
+  ) : (
+    <div className={rowStyles()}>
+      {connectedWallets.map((wallet) => (
+        <WalletImageContainer key={wallet.title}>
+          <Image src={wallet.image} size={14} />
+        </WalletImageContainer>
+      ))}
+    </div>
+  );
+
+  return (
+    <Tooltip container={props.container} side="bottom" content={content}>
+      <HeaderButton
+        id="widget-header-wallet-icon-btn"
+        variant="ghost"
+        size="small"
+        onClick={props.onClick}>
+        {props.isConnected && <ConnectedIcon />}
+        <WalletIcon size={18} color="black" />
+      </HeaderButton>
+    </Tooltip>
+  );
+}
+
+export { WalletButton };

package/src/components/HeaderButtons/index.ts

@@ -0,0 +1,4 @@
+export { BackButton } from './BackButton';
+export { CancelButton } from './CancelButton';
+export { WalletButton } from './WalletButton';
+export { HeaderButtons } from './HeaderButtons';

package/src/components/HistoryGroupedList/HistoryGroupedList.helpers.ts

@@ -0,0 +1,19 @@
+/*
+ * The calculateGroupsSoFar Slices the total groups into the groups which contain the items so far.
+ * For example, if you have [10, 10, 10, 10] groups in total,
+ * slicing them to 23 will result in [10, 10, 3] :
+ * https://virtuoso.dev/grouped-with-load-on-demand/
+ */
+export function calculateGroupsSoFar(totalGroups: number[], count: number) {
+  const groups: number[] = [];
+  let index = 0;
+  do {
+    const group = totalGroups[index];
+    if (group) {
+      groups.push(Math.min(group, count));
+      count -= group;
+    }
+    index++;
+  } while (count > 0 && index <= totalGroups.length);
+  return groups;
+}

package/src/components/HistoryGroupedList/HistoryGroupedList.styles.ts

@@ -0,0 +1,44 @@
+import { css, darkTheme, styled } from '@rango-dev/ui';
+
+export const groupStyles = css();
+
+export const SwapItemContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  padding: '$5',
+});
+
+export const Group = styled('div', {
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  backgroundColor: '$background',
+  padding: '$10 $5 0 $5',
+  [`& .${groupStyles}`]: {
+    $$color: '$colors$neutral600',
+    [`.${darkTheme} &`]: {
+      $$color: '$colors$neutral700',
+    },
+    color: '$$color',
+  },
+});
+
+export const Time = styled('div', {
+  display: 'flex',
+  justifyContent: 'flex-start',
+  padding: '$2',
+});
+
+export const SwapList = styled('div', {
+  gap: '$10',
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+export const NotFoundContainer = styled('div', {
+  height: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});

package/src/components/HistoryGroupedList/HistoryGroupedList.tsx

@@ -0,0 +1,174 @@
+import type { PropTypes } from './HistoryGroupedList.types';
+
+import { i18n } from '@lingui/core';
+import { getCurrentStep } from '@rango-dev/queue-manager-rango-preset';
+import {
+  Divider,
+  GroupedVirtualizedList,
+  Skeleton,
+  SwapListItem,
+  Typography,
+} from '@rango-dev/ui';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+
+import {
+  TOKEN_AMOUNT_MAX_DECIMALS,
+  TOKEN_AMOUNT_MIN_DECIMALS,
+} from '../../constants/routing';
+import { getContainer } from '../../utils/common';
+import { numberToString } from '../../utils/numbers';
+
+import { calculateGroupsSoFar } from './HistoryGroupedList.helpers';
+import {
+  Group,
+  groupStyles,
+  SwapItemContainer,
+  SwapList,
+  Time,
+} from './HistoryGroupedList.styles';
+
+const ITEMS_PER_PAGE = 10;
+
+export function HistoryGroupedList(props: PropTypes) {
+  const { list, onSwapClick, groupBy, isLoading } = props;
+  const [currentGroupCounts, setCurrentGroupCounts] = useState<number[]>([]);
+  const loadedItems = useRef(0);
+  const { swaps, groupCounts, groups } = groupBy(list);
+
+  const calculateGroups = useCallback(calculateGroupsSoFar, []);
+
+  const loadMore = useCallback(() => {
+    const remainedItems = list.length - loadedItems.current;
+    if (remainedItems) {
+      loadedItems.current += Math.min(remainedItems, ITEMS_PER_PAGE);
+      setCurrentGroupCounts(calculateGroups(groupCounts, loadedItems.current));
+    }
+  }, [list.length]);
+
+  useEffect(() => {
+    if (!isLoading) {
+      loadMore();
+    }
+  }, [isLoading, loadMore]);
+
+  if (isLoading) {
+    // The number of items presented in each group.
+    const swaps = [1, 2];
+    const loadingGroups = [swaps, swaps];
+    return (
+      <>
+        {loadingGroups.map((group, index) => {
+          const key = index;
+          return (
+            <Group key={key}>
+              <Time>
+                <Skeleton variant="text" width={60} size="small" />
+                <Divider size={16} />
+              </Time>
+              <Divider size={4} />
+              <SwapList>
+                {group.map((_, index) => {
+                  const key = index;
+                  return <SwapListItem isLoading={true} key={key} />;
+                })}
+              </SwapList>
+            </Group>
+          );
+        })}
+      </>
+    );
+  }
+
+  return (
+    <GroupedVirtualizedList
+      style={{
+        // See note on https://github.com/rango-exchange/rango-client/pull/1284
+        flexGrow: 1,
+        minHeight: 0,
+      }}
+      endReached={() => {
+        if (loadedItems.current < list.length) {
+          loadMore();
+        }
+      }}
+      groupCounts={currentGroupCounts}
+      groupContent={(index) => {
+        return (
+          <Group>
+            <Time>
+              <Typography
+                variant="label"
+                size="medium"
+                className={groupStyles()}>
+                {groups[index]}
+              </Typography>
+            </Time>
+          </Group>
+        );
+      }}
+      itemContent={(index, groupIndex) => {
+        const swap = swaps[index];
+        if (!swap) {
+          return null;
+        }
+        const currentStep = getCurrentStep(swap);
+        const firstStep = swap.steps[0];
+        const lastStep = swap.steps[swap.steps.length - 1];
+        if (!firstStep || !lastStep) {
+          return null;
+        }
+        return (
+          <SwapItemContainer key={swap.requestId}>
+            <SwapListItem
+              className="widget-history-group-list-swap-item-btn"
+              requestId={swap.requestId}
+              creationTime={swap.creationTime}
+              status={swap.status}
+              onClick={onSwapClick}
+              currentStep={currentStep}
+              tooltipContainer={getContainer()}
+              onlyShowTime={groups[groupIndex] === i18n.t('Today')}
+              swapTokenData={{
+                from: {
+                  token: {
+                    image: firstStep.fromLogo,
+                    displayName: firstStep.fromSymbol,
+                  },
+                  blockchain: {
+                    image: firstStep.fromBlockchainLogo || '',
+                  },
+                  amount: numberToString(
+                    swap.inputAmount,
+                    TOKEN_AMOUNT_MIN_DECIMALS,
+                    TOKEN_AMOUNT_MAX_DECIMALS
+                  ),
+                  realAmount: swap.inputAmount,
+                },
+                to: {
+                  token: {
+                    image: lastStep.toLogo,
+                    displayName: lastStep.toSymbol,
+                  },
+                  blockchain: {
+                    image: lastStep.toBlockchainLogo || '',
+                  },
+                  amount: numberToString(
+                    lastStep.outputAmount ||
+                      lastStep.expectedOutputAmountHumanReadable ||
+                      '',
+                    TOKEN_AMOUNT_MIN_DECIMALS,
+                    TOKEN_AMOUNT_MAX_DECIMALS
+                  ),
+                  realAmount:
+                    lastStep.outputAmount ||
+                    lastStep.expectedOutputAmountHumanReadable ||
+                    '',
+                },
+              }}
+            />
+          </SwapItemContainer>
+        );
+      }}
+    />
+  );
+}

package/src/components/HistoryGroupedList/HistoryGroupedList.types.ts

@@ -0,0 +1,14 @@
+import type { PendingSwap } from 'rango-types';
+
+export type GroupBy = (list: PendingSwap[]) => {
+  swaps: PendingSwap[];
+  groups: string[];
+  groupCounts: number[];
+};
+
+export interface PropTypes {
+  list: PendingSwap[];
+  onSwapClick: (requestId: string) => void;
+  groupBy: GroupBy;
+  isLoading: boolean;
+}

package/src/components/HistoryGroupedList/index.ts

@@ -0,0 +1 @@
+export { HistoryGroupedList } from './HistoryGroupedList';

package/src/components/ImportCustomToken/ImportCustomToken.tsx

@@ -0,0 +1,121 @@
+import type { PropTypes } from './ImportCustomToken.types';
+
+import { i18n } from '@lingui/core';
+import { Button, Divider, MessageBox } from '@rango-dev/ui';
+import React, { useEffect, useState } from 'react';
+
+import { useAppStore } from '../../store/AppStore';
+import { getContainer } from '../../utils/common';
+import { WatermarkedModal } from '../common/WatermarkedModal';
+import { CustomTokenModal } from '../CustomTokenModal';
+
+export function ImportCustomToken(props: PropTypes) {
+  const {
+    token,
+    blockchain,
+    error,
+    address,
+    fetchCustomToken,
+    onCloseErrorModal,
+    onImport,
+    onExitErrorModal,
+    onExitImportModal,
+  } = props;
+  const { setCustomToken } = useAppStore();
+  const [showErrorModal, setShowErrorModal] = useState<boolean>(false);
+  const [showImportModal, setShowImportModal] = useState<boolean>(false);
+  const [retryClicked, setRetryClicked] = useState(false);
+
+  const getCustomToken = () => {
+    if (blockchain) {
+      void fetchCustomToken?.({
+        blockchain: blockchain.name,
+        tokenAddress: address,
+      });
+    }
+  };
+
+  const closeErrorModal = () => {
+    if (error?.type !== 'network-error') {
+      onCloseErrorModal?.();
+    }
+    setShowErrorModal(false);
+  };
+
+  const handleErrorModalButtonClick = () => {
+    setRetryClicked(true);
+    closeErrorModal();
+  };
+
+  const handleExit = () => {
+    if (retryClicked && error?.type === 'network-error') {
+      setRetryClicked(false);
+      void getCustomToken();
+    }
+    onExitErrorModal();
+  };
+
+  const handleSubmit = () => {
+    if (token) {
+      setCustomToken(token);
+      onImport();
+    }
+  };
+
+  useEffect(() => {
+    if (!!error) {
+      setShowErrorModal(true);
+    }
+  }, [error]);
+
+  useEffect(() => {
+    if (blockchain && token) {
+      setShowImportModal(true);
+    }
+  }, [blockchain, token]);
+  return (
+    <>
+      <WatermarkedModal
+        open={showErrorModal}
+        dismissible
+        id="widget-add-custom-token-modal"
+        onClose={closeErrorModal}
+        onExit={handleExit}
+        container={getContainer()}>
+        <MessageBox
+          title={error?.title ?? ''}
+          type="error"
+          description={
+            error?.message || i18n.t('Failed Network, Please retry.')
+          }>
+          <Divider size={40} />
+          <Divider size={10} />
+          {/* eslint-disable-next-line jsx-id-attribute-enforcement/missing-ids */}
+          <Button
+            id={`widget-add-custom-token-${
+              error?.type === 'network-error' ? 'retry' : 'add-another'
+            }-btn`}
+            variant="contained"
+            size="large"
+            type="primary"
+            fullWidth
+            onClick={handleErrorModalButtonClick}>
+            {error?.type === 'network-error'
+              ? i18n.t('Retry')
+              : i18n.t('Add another custom token')}
+          </Button>
+        </MessageBox>
+      </WatermarkedModal>
+      {blockchain && token && (
+        <CustomTokenModal
+          blockchain={blockchain}
+          token={token}
+          onSubmitClick={handleSubmit}
+          onClose={() => setShowImportModal(false)}
+          open={showImportModal}
+          onExit={onExitImportModal}
+        />
+      )}
+    </>
+  );
+}