@rango-dev/widget-embedded 0.30.1 → 0.31.0

package/src/components/CustomDestination/CustomDestination.types.ts

@@ -0,0 +1,7 @@
+import type { BlockchainMeta } from 'rango-types';
+
+export type PropTypes = {
+  blockchain: BlockchainMeta;
+  handleOpenChange: (open: boolean) => void;
+  open: boolean;
+};

package/src/components/FilterSelector/FilterSelector.style.ts

@@ -0,0 +1,95 @@
+import { css, darkTheme, IconButton, styled } from '@rango-dev/ui';
+
+export const IconContainer = styled('div', {
+  position: 'relative',
+  '&::before': {
+    position: 'absolute',
+    right: '1px',
+    top: '-1px',
+    width: '$8',
+    height: '$8',
+    borderRadius: '100%',
+    backgroundColor: '$neutral300',
+    [`.${darkTheme} &`]: {
+      backgroundColor: '$neutral400',
+    },
+    padding: '$2',
+  },
+  variants: {
+    isSelect: {
+      true: {
+        '&::before': {
+          content: '',
+        },
+      },
+    },
+  },
+});
+
+export const FilterButton = styled(IconButton, {
+  width: '$36',
+  height: '$36',
+  position: 'relative',
+  padding: '0',
+  overflow: 'unset',
+  backgroundColor: '$neutral300',
+  [`.${darkTheme} &`]: {
+    backgroundColor: '$neutral400',
+  },
+  '&:hover': {
+    backgroundColor: '$secondary100',
+    [`.${darkTheme} &`]: {
+      backgroundColor: '$neutral',
+    },
+    [`& ${IconContainer}::before`]: {
+      backgroundColor: '$secondary100',
+      [`.${darkTheme} &`]: {
+        backgroundColor: '$neutral',
+      },
+    },
+  },
+  variants: {
+    isSelect: {
+      true: {
+        border: '1px solid $secondary',
+      },
+    },
+  },
+});
+
+export const Badge = styled('div', {
+  position: 'absolute',
+  width: '$6',
+  height: '$6',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  borderRadius: '3px',
+  top: '$0',
+  right: '1px',
+  backgroundColor: '$secondary500',
+});
+
+export const FilterContainer = styled('div', {
+  padding: '$15',
+  borderRadius: '$sm',
+  width: '248px',
+  backgroundColor: '$background',
+  zIndex: 10,
+});
+
+export const centeredFlexContainer = css({
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
+export const FilterList = styled('ul', {
+  margin: 0,
+  listStyle: 'none',
+  height: '100%',
+  padding: 0,
+  '.item-start-container': {
+    paddingRight: '0 !important',
+  },
+});

package/src/components/FilterSelector/FilterSelector.tsx

@@ -0,0 +1,42 @@
+import type { FilterSelectorPropTypes } from './FilterSelector.type';
+
+import { FilterIcon, Popover } from '@rango-dev/ui';
+import React from 'react';
+
+import { getContainer } from '../../utils/common';
+
+import { Badge, FilterButton, IconContainer } from './FilterSelector.style';
+import { FilterSelectorContent } from './FilterSelectorContent';
+
+export function FilterSelector(props: FilterSelectorPropTypes) {
+  const { onClickItem, onOpenChange, filterBy, list, open } = props;
+  return (
+    <div>
+      <Popover
+        open={open}
+        align="end"
+        onOpenChange={onOpenChange}
+        container={getContainer()}
+        content={
+          <FilterSelectorContent
+            list={list}
+            filterBy={filterBy}
+            onClickItem={(id) => {
+              onClickItem(id);
+              onOpenChange(false);
+            }}
+          />
+        }>
+        <FilterButton
+          variant="default"
+          isSelect={!!filterBy}
+          onClick={() => onOpenChange(!props.open)}>
+          <IconContainer isSelect={!!filterBy}>
+            <FilterIcon size={16} color="black" />
+            {!!filterBy && <Badge />}
+          </IconContainer>
+        </FilterButton>
+      </Popover>
+    </div>
+  );
+}

package/src/components/FilterSelector/FilterSelector.type.ts

@@ -0,0 +1,15 @@
+export type PropTypes = {
+  filterBy: string;
+  onClickItem: (id: string) => void;
+  list: Array<FilterItem>;
+};
+
+export type FilterItem = {
+  id: string;
+  title: string;
+};
+
+export type FilterSelectorPropTypes = PropTypes & {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};

package/src/components/FilterSelector/FilterSelectorContent.tsx

@@ -0,0 +1,60 @@
+import type { PropTypes } from './FilterSelector.type';
+
+import { i18n } from '@lingui/core';
+import {
+  Button,
+  Divider,
+  ListItemButton,
+  Radio,
+  RadioRoot,
+  Typography,
+} from '@rango-dev/ui';
+import React from 'react';
+
+import {
+  centeredFlexContainer,
+  FilterContainer,
+  FilterList,
+} from './FilterSelector.style';
+
+export function FilterSelectorContent(props: PropTypes) {
+  const { filterBy: value, onClickItem } = props;
+  return (
+    <FilterContainer>
+      <div className={centeredFlexContainer()}>
+        <Typography size="small" variant="body">
+          {i18n.t('Status')}
+        </Typography>
+        <Button variant="ghost" size="xxsmall" onClick={() => onClickItem('')}>
+          {i18n.t('Reset')}
+        </Button>
+      </div>
+      <Divider size={10} />
+      <RadioRoot value={value}>
+        <FilterList>
+          {props.list.map((item, index) => {
+            return (
+              <ListItemButton
+                key={item.id}
+                style={{ height: '40px', width: '100%' }}
+                selected={false}
+                hasDivider={props.list.length - 1 != index}
+                id={item.id}
+                title={
+                  <>
+                    <Divider direction="horizontal" size={4} />
+                    <Typography size="medium" variant="body">
+                      {item.title}
+                    </Typography>
+                  </>
+                }
+                start={<Radio value={item.id} />}
+                onClick={onClickItem}
+              />
+            );
+          })}
+        </FilterList>
+      </RadioRoot>
+    </FilterContainer>
+  );
+}

package/src/components/FilterSelector/index.ts

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

package/src/components/SearchInput/SearchInput.tsx

@@ -13,6 +13,7 @@ export function SearchInput(props: PropTypes) {
     size,
     onChange,
     value,
+    style,
     setValue,
     ...inputAttributes
   } = props;
@@ -41,6 +42,7 @@ export function SearchInput(props: PropTypes) {
         padding: 10,
         borderRadius: 25,
         alignItems: 'center',
+        ...style,
       }}
       size={size}
       value={value}

package/src/components/SwapDetails/SwapDetails.styles.ts

@@ -11,6 +11,16 @@ export const Container = styled('div', {
 
 export const HeaderDetails = styled('div', {
   width: '100%',
+  '& ._icon-button': {
+    '&:hover': {
+      '& svg': {
+        color: '$secondary550',
+        [`.${darkTheme} &`]: {
+          color: '$secondary500',
+        },
+      },
+    },
+  },
 });
 
 export const StepsList = styled(ScrollableArea, {

package/src/components/SwapDetails/SwapDetails.tsx

@@ -11,6 +11,7 @@ import {
   Button,
   CopyIcon,
   Divider,
+  DoneIcon,
   IconButton,
   QuoteCost,
   RangoExplorerIcon,
@@ -88,7 +89,7 @@ export function SwapDetails(props: SwapDetailsProps) {
   const retry = useQuoteStore.use.retry();
   const isActiveTab = useUiStore.use.isActiveTab();
   const navigate = useNavigate();
-  const [_, handleCopy] = useCopyToClipboard(RESET_INTERVAL);
+  const [isCopied, handleCopy] = useCopyToClipboard(RESET_INTERVAL);
   const listRef = useRef<HTMLDivElement | null>(null);
   const [modalState, setModalState] = useState<ModalState>(null);
   const [showCompletedModal, setShowCompletedModal] = useState<
@@ -187,13 +188,7 @@ export function SwapDetails(props: SwapDetailsProps) {
   )?.diagnosisUrl;
 
   const outputUsdValue = numberToString(
-    parseFloat(
-      numberToString(
-        outputAmount,
-        TOKEN_AMOUNT_MIN_DECIMALS,
-        TOKEN_AMOUNT_MAX_DECIMALS
-      )
-    ) * (lastStep.toUsdPrice || 0),
+    parseFloat(outputAmount || '0') * (lastStep.toUsdPrice || 0),
     USD_VALUE_MIN_DECIMALS,
     USD_VALUE_MAX_DECIMALS
   );
@@ -318,11 +313,28 @@ export function SwapDetails(props: SwapDetailsProps) {
               <Typography variant="label" size="small" color="neutral700">
                 {requestId}
               </Typography>
-              <IconButton
-                variant="ghost"
-                onClick={handleCopy.bind(null, requestId || '')}>
-                <CopyIcon size={16} color="gray" />
-              </IconButton>
+              <Tooltip
+                container={getContainer()}
+                content={
+                  isCopied
+                    ? i18n.t('Copied To Clipboard')
+                    : i18n.t('Copy Request ID')
+                }
+                open={isCopied || undefined}
+                side="bottom"
+                alignOffset={-16}
+                align="end">
+                <IconButton
+                  variant="ghost"
+                  onClick={handleCopy.bind(null, requestId || '')}>
+                  {isCopied ? (
+                    <DoneIcon size={16} color="secondary" />
+                  ) : (
+                    <CopyIcon size={16} color="gray" />
+                  )}
+                </IconButton>
+              </Tooltip>
+
               <StyledLink
                 target="_blank"
                 href={`${SCANNER_BASE_URL}/swap/${requestId}`}>

package/src/components/SwapDetailsModal/SwapDetailsModal.WalletState.tsx

@@ -68,6 +68,33 @@ export const WalletStateContent = (props: WalletStateContentProps) => {
     }
   };
 
+  const handleWalletItemClick = () => {
+    if (!!walletType && !!walletInfo) {
+      if (!!walletInfo.namespaces?.length) {
+        if (walletInfo.namespaces.length > 1) {
+          setNamespacesModalState({
+            open: true,
+            providerType: walletType,
+            providerImage: walletInfo.img,
+            availableNamespaces: walletInfo.namespaces,
+            singleNamespace: walletInfo.singleNamespace,
+          });
+        } else if (walletInfo.needsDerivationPath) {
+          setDerivationPathModalState({
+            open: true,
+            providerType: walletType,
+            providerImage: walletInfo.img,
+            namespace: walletInfo.namespaces[0],
+          });
+        } else {
+          connect(walletType).catch((error) => debug(error));
+        }
+      } else {
+        connect(walletType).catch((error) => debug(error));
+      }
+    }
+  };
+
   const handleConfirmNamespaces = (selectedNamespaces: Namespace[]) => {
     if (
       !!walletInfo?.needsDerivationPath &&
@@ -117,19 +144,7 @@ export const WalletStateContent = (props: WalletStateContentProps) => {
             link={walletInfo.installLink}
             disabled={walletButtonDisabled}
             // TODO we need to show an error modal when user reject the connection
-            onClick={async () => {
-              if (walletInfo.namespaces) {
-                setNamespacesModalState({
-                  open: true,
-                  providerType: walletType,
-                  providerImage: walletInfo.img,
-                  availableNamespaces: walletInfo.namespaces,
-                  singleNamespace: walletInfo.singleNamespace,
-                });
-              } else {
-                connect(walletType).catch((error) => debug(error));
-              }
-            }}
+            onClick={handleWalletItemClick}
           />
         </WalletContainer>
       )}

package/src/components/TokenList/TokenList.tsx

@@ -17,6 +17,7 @@ import {
 } from '@rango-dev/ui';
 import React, { useEffect, useState } from 'react';
 
+import { useObserveBalanceChanges } from '../../hooks/useObserveBalanceChanges';
 import { useAppStore } from '../../store/AppStore';
 import { useWalletsStore } from '../../store/wallets';
 import { createTintsAndShades } from '../../utils/colors';
@@ -99,6 +100,11 @@ export function TokenList(props: PropTypes) {
   const [hasNextPage, setHasNextPage] = useState<boolean>(true);
   const { getBalanceFor, loading: loadingWallet } = useWalletsStore();
   const { isTokenPinned } = useAppStore();
+  /**
+   * We can create the key by hashing the list of tokens,
+   * but if the list is large, the memory usage and cost of comparisons may be high.
+   */
+  const { balanceKey } = useObserveBalanceChanges(selectedBlockchain);
 
   const loadNextPage = () => {
     setTokens(list.slice(0, tokens.length + PAGE_SIZE));
@@ -110,7 +116,7 @@ export function TokenList(props: PropTypes) {
 
   useEffect(() => {
     setTokens(list.slice(0, PAGE_SIZE));
-  }, [list.length, selectedBlockchain]);
+  }, [list.length, selectedBlockchain, balanceKey]);
 
   const renderList = () => {
     if (!tokens.length && !!searchedFor) {
@@ -244,7 +250,7 @@ export function TokenList(props: PropTypes) {
           );
         }}
         totalCount={tokens.length}
-        key={`${selectedBlockchain}-${searchedFor}`}
+        key={`${selectedBlockchain}-${searchedFor}-${balanceKey}`}
       />
     );
   };

package/src/containers/Inputs/Inputs.tsx

@@ -109,6 +109,7 @@ export function Inputs(props: PropTypes) {
           onSelectMaxBalance={() => {
             setInputAmount(tokenBalanceReal.split(',').join(''));
           }}
+          anyWalletConnected={connectedWallets.length > 0}
         />
         <SwitchFromAndToButton />
       </FromContainer>

package/src/containers/Wallets/Wallets.tsx

@@ -31,7 +31,12 @@ export const WidgetContext = createContext<WidgetContextInterface>({
 });
 
 function Main(props: PropsWithChildren<PropTypes>) {
-  const { updateConfig, updateSettings, fetch: fetchMeta } = useAppStore();
+  const {
+    updateConfig,
+    updateSettings,
+    fetch: fetchMeta,
+    fetchStatus,
+  } = useAppStore();
   const blockchains = useAppStore().blockchains();
   const { findToken } = useAppStore();
   const config = useAppStore().config;
@@ -61,7 +66,7 @@ function Main(props: PropsWithChildren<PropTypes>) {
         dappConfig: props.config,
       };
     }
-  }, [props.config]);
+  }, [props.config, fetchStatus]);
 
   const evmBasedChainNames = blockchains
     .filter(isEvmBlockchain)

package/src/containers/WidgetInfo/WidgetInfo.tsx

@@ -4,6 +4,7 @@ import { useManager } from '@rango-dev/queue-manager-react';
 import React, { createContext, useContext } from 'react';
 
 import { useLanguage } from '../../hooks/useLanguage';
+import { useUpdateQuoteInputs } from '../../hooks/useUpdateQuoteInputs/useUpdateQuoteInputs';
 import { useAppStore } from '../../store/AppStore';
 import { useNotificationStore } from '../../store/notification';
 import { useQuoteStore } from '../../store/quote';
@@ -35,6 +36,9 @@ export function WidgetInfo(props: React.PropsWithChildren) {
   const resetLanguage = useLanguage().resetLanguage;
   const notifications = useNotificationStore().getNotifications();
   const clearNotifications = useNotificationStore().clearNotifications;
+  const updateQuoteInputs = useUpdateQuoteInputs();
+  const { fromBlockchain, toBlockchain, fromToken, toToken, inputAmount } =
+    useQuoteStore();
 
   // eslint-disable-next-line react/jsx-no-constructed-context-values
   const value: WidgetInfoContextInterface = {
@@ -59,6 +63,28 @@ export function WidgetInfo(props: React.PropsWithChildren) {
       list: notifications,
       clearAll: clearNotifications,
     },
+    quote: {
+      quoteInputs: {
+        fromBlockchain: fromBlockchain?.name ?? null,
+        fromToken: fromToken
+          ? {
+              symbol: fromToken.symbol,
+              blockchain: fromToken.blockchain,
+              address: fromToken.address,
+            }
+          : null,
+        toBlockchain: toBlockchain?.name ?? null,
+        toToken: toToken
+          ? {
+              symbol: toToken.symbol,
+              blockchain: toToken.blockchain,
+              address: toToken.address,
+            }
+          : null,
+        requestAmount: inputAmount,
+      },
+      updateQuoteInputs,
+    },
   };
 
   return (

package/src/containers/WidgetInfo/WidgetInfo.types.ts

@@ -1,7 +1,7 @@
 import type { WidgetHistory } from './WidgetInfo.helpers';
 import type { FetchStatus, FindToken } from '../../store/slices/data';
 import type { ConnectedWallet } from '../../store/wallets';
-import type { Wallet } from '../../types';
+import type { QuoteInputs, UpdateQuoteInputs, Wallet } from '../../types';
 import type { Notification } from '../../types/notification';
 import type { BlockchainMeta, SwapperMeta, Token } from 'rango-sdk';
 
@@ -27,4 +27,8 @@ export interface WidgetInfoContextInterface {
     list: Notification[];
     clearAll: () => void;
   };
+  quote: {
+    quoteInputs: QuoteInputs;
+    updateQuoteInputs: UpdateQuoteInputs;
+  };
 }

package/src/hooks/useObserveBalanceChanges/index.ts

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

package/src/hooks/useObserveBalanceChanges/useObserveBalanceChanges.ts

@@ -0,0 +1,68 @@
+import type { WalletEventData } from '../../types';
+
+import { useWallets } from '@rango-dev/wallets-react';
+import { useEffect, useRef, useState } from 'react';
+
+import { widgetEventEmitter } from '../../services/eventEmitter';
+import { useWalletsStore } from '../../store/wallets';
+import { WalletEventTypes, WidgetEvents } from '../../types';
+
+// A hook to listen for and detect changes in balances on a specific blockchain.
+export function useObserveBalanceChanges(selectedBlockchain?: string) {
+  const { connectedWallets } = useWalletsStore();
+  const { getWalletInfo } = useWallets();
+  const prevFetchingBalanceWallets = useRef<string[]>([]);
+  // The "balanceKey" will be updated and incremented after each change in the balance for a blockchain.
+  const [balanceKey, setBalanceKey] = useState(0);
+
+  useEffect(() => {
+    const handleWalletEvent = (event: WalletEventData) => {
+      if (event.type === WalletEventTypes.DISCONNECT) {
+        const walletInfo = getWalletInfo(event.payload.walletType);
+        const blockchainSupported = walletInfo.supportedChains.some(
+          (chain) => chain.name === selectedBlockchain
+        );
+
+        if (blockchainSupported) {
+          setBalanceKey((prev) => prev + 1);
+        }
+      }
+    };
+
+    widgetEventEmitter.on(WidgetEvents.WalletEvent, handleWalletEvent);
+
+    if (!selectedBlockchain) {
+      return setBalanceKey((prev) => prev + 1);
+    }
+
+    const supportedWallets = connectedWallets.filter(
+      (wallet) => wallet.chain === selectedBlockchain
+    );
+
+    supportedWallets.forEach((wallet) => {
+      const { walletType } = wallet;
+      const walletIsAlreadyFetching =
+        prevFetchingBalanceWallets.current.includes(walletType);
+
+      /**
+       * Watching for changes in "wallet.balances.length" is not accurate.
+       * Additionally, checking the equality of previous and current balances for a specific blockchain is resource-intensive, so we avoid these methods.
+       */
+      if (wallet.loading && !walletIsAlreadyFetching) {
+        prevFetchingBalanceWallets.current =
+          prevFetchingBalanceWallets.current.concat(walletType);
+      } else if (!wallet.loading && walletIsAlreadyFetching) {
+        prevFetchingBalanceWallets.current =
+          prevFetchingBalanceWallets.current.filter(
+            (prevWallet) => prevWallet !== walletType
+          );
+        setBalanceKey((prev) => prev + 1);
+      }
+    });
+
+    return () =>
+      widgetEventEmitter.off(WidgetEvents.WalletEvent, handleWalletEvent);
+  }, [connectedWallets, selectedBlockchain, getWalletInfo]);
+
+  return { balanceKey };
+}

package/src/hooks/useTheme.ts

@@ -15,6 +15,13 @@ import {
 } from '../utils/configs';
 import { customizedThemeTokens } from '../utils/ui';
 
+function doesWindowPreferDarkColorScheme() {
+  return (
+    window.matchMedia &&
+    window.matchMedia('(prefers-color-scheme: dark)').matches
+  );
+}
+
 export function useTheme(props: WidgetTheme) {
   const {
     colors,
@@ -23,7 +30,9 @@ export function useTheme(props: WidgetTheme) {
     secondaryBorderRadius = DEFAULT_SECONDARY_RADIUS,
   } = props;
 
-  const [OSTheme, setOSTheme] = useState('light');
+  const [OSTheme, setOSTheme] = useState(
+    doesWindowPreferDarkColorScheme() ? 'dark' : 'light'
+  );
 
   const { theme } = useAppStore();
 
@@ -64,10 +73,7 @@ export function useTheme(props: WidgetTheme) {
       }
     };
 
-    if (
-      window.matchMedia &&
-      window.matchMedia('(prefers-color-scheme: dark)').matches
-    ) {
+    if (doesWindowPreferDarkColorScheme()) {
       setOSTheme('dark');
     }
 

package/src/hooks/useUpdateQuoteInputs/index.ts

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

package/src/hooks/useUpdateQuoteInputs/useUpdateQuoteInputs.ts

@@ -0,0 +1,50 @@
+import type { UpdateQuoteInputs } from '../../types';
+
+import { useAppStore } from '../../store/AppStore';
+import { useQuoteStore } from '../../store/quote';
+
+// This hook provides a function to update quote inputs using fewer and simpler parameters.
+export function useUpdateQuoteInputs() {
+  const { findToken } = useAppStore();
+  const blockchains = useAppStore().blockchains();
+  const tokens = useAppStore().tokens();
+  const {
+    setFromBlockchain,
+    setFromToken,
+    setToBlockchain,
+    setToToken,
+    setInputAmount,
+  } = useQuoteStore();
+
+  const updateQuoteInputs: UpdateQuoteInputs = (params) => {
+    const { fromBlockchain, fromToken, toBlockchain, toToken, requestAmount } =
+      params;
+    const meta = { blockchains, tokens };
+
+    if (fromBlockchain !== undefined) {
+      const blockchainMeta =
+        blockchains.find((blockchain) => blockchain.name === fromBlockchain) ??
+        null;
+      setFromBlockchain(blockchainMeta);
+    }
+    if (fromToken !== undefined) {
+      const token = fromToken ? findToken(fromToken) ?? null : null;
+      setFromToken({ meta, token });
+    }
+    if (toBlockchain !== undefined) {
+      const blockchainMeta =
+        blockchains.find((blockchain) => blockchain.name === toBlockchain) ??
+        null;
+      setToBlockchain(blockchainMeta);
+    }
+    if (toToken !== undefined) {
+      const token = toToken ? findToken(toToken) ?? null : null;
+      setToToken({ meta, token });
+    }
+    if (requestAmount !== undefined) {
+      setInputAmount(requestAmount);
+    }
+  };
+
+  return updateQuoteInputs;
+}