@rango-dev/widget-embedded 0.31.1-next.3 → 0.32.1

package/src/components/WalletModal/WalletModal.tsx

@@ -0,0 +1,25 @@
+import type { PropTypes } from './WalletModal.types';
+
+import { Divider } from '@rango-dev/ui';
+import React from 'react';
+
+import { WIDGET_UI_ID } from '../../constants';
+import { WatermarkedModal } from '../common/WatermarkedModal';
+
+import { ModalContent } from './WalletModalContent';
+
+export function WalletModal(props: PropTypes) {
+  const { open, onClose, ...otherProps } = props;
+
+  return (
+    <WatermarkedModal
+      open={open}
+      onClose={onClose}
+      container={
+        document.getElementById(WIDGET_UI_ID.SWAP_BOX_ID) || document.body
+      }>
+      <ModalContent {...otherProps} />
+      <Divider direction="vertical" size={32} />
+    </WatermarkedModal>
+  );
+}

package/src/components/WalletModal/WalletModal.types.ts

@@ -0,0 +1,11 @@
+import type { WalletState } from '@rango-dev/ui';
+
+export interface PropTypes {
+  open: boolean;
+  onClose: () => void;
+  image: string;
+  state: WalletState;
+  error?: string;
+}
+
+export type ModalContentProps = Pick<PropTypes, 'state' | 'error' | 'image'>;

package/src/components/{WalletStatefulConnect/ConnectStatus.tsx → WalletModal/WalletModalContent.tsx}

@@ -1,26 +1,18 @@
-import type { ConnectStatusProps } from './ConnectStatus.types';
+import type { ModalContentProps } from './WalletModal.types';
 
 import { i18n } from '@lingui/core';
 import { Image, MessageBox, WalletState } from '@rango-dev/ui';
-import { useWallets } from '@rango-dev/wallets-react';
 import React from 'react';
 
-import { mapStatusToWalletState } from '../../utils/wallets';
-
 import {
   LogoContainer,
   Spinner,
   WalletImageContainer,
-} from './ConnectStatus.styles';
-
-export function ConnectStatus(props: ConnectStatusProps) {
-  // See `wallet` notes on its type definition
-  const { wallet, error } = props;
-  const { type, image } = wallet;
-  const { state } = useWallets();
-  const walletState = mapStatusToWalletState(state(type));
+} from './WalletModalContent.styles';
 
-  if (walletState === WalletState.CONNECTED) {
+export function ModalContent(props: ModalContentProps) {
+  const { state, image, error } = props;
+  if (state === WalletState.CONNECTED) {
     return (
       <MessageBox
         type="success"

package/src/components/WalletModal/index.ts

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

package/src/components/{WalletStatefulConnect/Namespaces.tsx → WalletNamespacesModal/WalletNamespacesModal.tsx}

@@ -1,5 +1,6 @@
-import type { PropTypes } from './Namespaces.types';
+import type { PropTypes } from './WalletNamespacesModal.types';
 import type { Namespace } from '@rango-dev/wallets-shared';
+import type { BlockchainMeta } from 'rango-sdk';
 
 import { i18n } from '@lingui/core';
 import {
@@ -15,15 +16,27 @@ import {
 import { namespaces } from '@rango-dev/wallets-shared';
 import React, { useMemo, useState } from 'react';
 
+import { WIDGET_UI_ID } from '../../constants';
 import { useAppStore } from '../../store/AppStore';
+import { WatermarkedModal } from '../common/WatermarkedModal';
 import { WalletImageContainer } from '../HeaderButtons/HeaderButtons.styles';
+import {
+  LogoContainer,
+  Spinner,
+} from '../WalletModal/WalletModalContent.styles';
+
+import { NamespaceList } from './WalletNamespacesModal.styles';
 
-import { LogoContainer, Spinner } from './ConnectStatus.styles';
-import { getBlockchainLogo } from './Namespaces.helpers';
-import { NamespaceList } from './Namespaces.styles';
+const getBlockchainLogo = (
+  blockchains: BlockchainMeta[],
+  blockchainName: string
+) => {
+  return blockchains.find((blockchain) => blockchain.name === blockchainName)
+    ?.logo;
+};
 
-export function Namespaces(props: PropTypes) {
-  const { singleNamespace, availableNamespaces, providerImage } = props.value;
+export function WalletNamespacesModal(props: PropTypes) {
+  const { singleNamespace, availableNamespaces } = props;
 
   const [selectedNamespaces, setSelectedNamespaces] = useState<Namespace[]>([]);
 
@@ -63,7 +76,12 @@ export function Namespaces(props: PropTypes) {
   };
 
   return (
-    <>
+    <WatermarkedModal
+      open={props.open}
+      onClose={props.onClose}
+      container={
+        document.getElementById(WIDGET_UI_ID.SWAP_BOX_ID) || document.body
+      }>
       <Divider size={20} />
       <MessageBox
         type="info"
@@ -74,7 +92,7 @@ export function Namespaces(props: PropTypes) {
         icon={
           <LogoContainer>
             <WalletImageContainer>
-              <Image src={providerImage} size={45} />
+              <Image src={props.image} size={45} />
             </WalletImageContainer>
             <Spinner />
           </LogoContainer>
@@ -114,6 +132,6 @@ export function Namespaces(props: PropTypes) {
         onClick={() => props.onConfirm(selectedNamespaces)}>
         {i18n.t('Confirm')}
       </Button>
-    </>
+    </WatermarkedModal>
   );
 }

package/src/components/{WalletStatefulConnect/Namespaces.types.tsx → WalletNamespacesModal/WalletNamespacesModal.types.tsx}

@@ -1,7 +1,10 @@
-import type { NeedsNamespacesState } from '../../hooks/useStatefulConnect';
 import type { Namespace } from '@rango-dev/wallets-shared';
 
 export interface PropTypes {
+  open: boolean;
+  image?: string;
+  onClose: () => void;
   onConfirm: (namespaces: Namespace[]) => void;
-  value: NeedsNamespacesState;
+  availableNamespaces?: Namespace[];
+  singleNamespace?: boolean;
 }

package/src/components/WalletNamespacesModal/index.ts

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

package/src/constants/customTokens.ts

@@ -0,0 +1,6 @@
+import { TransactionType } from 'rango-types';
+
+export const ACTIVE_BLOCKCHAINS_FOR_CUSTOM_TOKENS: string[] = [
+  TransactionType.EVM,
+  TransactionType.SOLANA,
+];

package/src/constants/navigationRoutes.ts

@@ -4,6 +4,8 @@ export const navigationRoutes = {
   toSwap: 'to-swap',
   blockchains: 'blockchains',
   settings: 'settings',
+  customTokens: 'custom-tokens',
+  addCustomTokens: 'add-custom-tokens',
   liquiditySources: 'liquidity-sources',
   bridges: 'bridges',
   exchanges: 'exchanges',

package/src/constants/searchParams.ts

@@ -5,6 +5,9 @@ export enum SearchParams {
   TO_TOKEN = 'toToken',
   FROM_AMOUNT = 'fromAmount',
   AUTO_CONNECT = 'autoConnect',
+
+  // This is for custom tokens
+  BLOCKCHAIN = 'blockchain',
   /*
    * dApps can transmit liquidity sources as a search parameter,
    * and these take precedence over widget configurations

package/src/containers/Settings/Lists.tsx

@@ -20,6 +20,7 @@ import {
   styled,
   Switch,
   Tabs,
+  TargetIcon,
   Tooltip,
   Typography,
 } from '@rango-dev/ui';
@@ -97,9 +98,11 @@ export function SettingsLists() {
   const {
     config: { features },
   } = useAppStore();
+  const customTokens = useAppStore().customTokens();
   const isThemeHidden = isFeatureHidden('theme', features);
   const isLiquidityHidden = isFeatureHidden('liquiditySource', features);
   const isLanguageHidden = isFeatureHidden('language', features);
+  const isCustomTokensHidden = isFeatureHidden('customTokens', features);
 
   const infiniteApprove = useAppStore().infiniteApprove;
   const toggleInfiniteApprove = useAppStore().toggleInfiniteApprove;
@@ -185,6 +188,25 @@ export function SettingsLists() {
     onClick: () => navigate(navigationRoutes.exchanges),
   };
 
+  const customTokensItem = {
+    id: 'custom-tokens-item',
+    title: (
+      <Typography variant="title" size="xmedium">
+        {i18n.t('Custom Tokens')}
+      </Typography>
+    ),
+    end: (
+      <>
+        <Typography variant="body" size="medium">
+          {`${customTokens.length}`}
+        </Typography>
+        <Divider direction="horizontal" size={8} />
+        <ChevronRightIcon color="black" />
+      </>
+    ),
+    start: <TargetIcon color="gray" size={16} />,
+    onClick: () => navigate(navigationRoutes.customTokens),
+  };
   const languageItem = {
     id: 'language-item',
     title: (
@@ -261,7 +283,9 @@ export function SettingsLists() {
   const settingItems: ListPropTypes['items'] = isLiquidityHidden
     ? []
     : [bridgeItem, exchangeItem];
-
+  if (!isCustomTokensHidden) {
+    settingItems.push(customTokensItem);
+  }
   if (!isLanguageHidden) {
     settingItems.push(languageItem);
   }

package/src/hooks/useFetchCustomToken.ts

@@ -0,0 +1,114 @@
+import type { Token } from 'rango-sdk';
+
+import { i18n } from '@lingui/core';
+import { useState } from 'react';
+
+import { useAppStore } from '../store/AppStore';
+import { getConfig } from '../utils/configs';
+
+type ErrorType = {
+  title: string;
+  message: string;
+};
+
+interface UseFetchCustomToken {
+  fetchCustomToken: ({
+    blockchain,
+    tokenAddress,
+  }: {
+    blockchain: string;
+    tokenAddress: string;
+  }) => Promise<Token>;
+  loading: boolean;
+  error?: ErrorType;
+}
+
+export function useFetchCustomToken(): UseFetchCustomToken {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<undefined | ErrorType>(undefined);
+  const { findToken } = useAppStore();
+  const customTokens = useAppStore().customTokens();
+
+  function produceErrorMessage(
+    type: 'duplicated' | 'not-found' | 'token-exist',
+    blockchain?: string
+  ) {
+    switch (type) {
+      case 'duplicated':
+        return {
+          title: i18n.t('Duplicate Token'),
+          message: i18n.t(
+            'The address you entered is duplicate, please enter a new address.'
+          ),
+        };
+      case 'token-exist':
+        return {
+          title: i18n.t('Token Already Exists'),
+          message: i18n.t(
+            `There's no need to add this token again because it already exists and is supported by us.`
+          ),
+        };
+      case 'not-found':
+        return {
+          title: i18n.t('Token Not Found'),
+          message: i18n.t(
+            `Sorry, no token was found on ${blockchain} blockchain with the provided address. please make sure you have entered the right token address.`
+          ),
+        };
+    }
+  }
+
+  const fetchCustomToken: UseFetchCustomToken['fetchCustomToken'] = async ({
+    blockchain,
+    tokenAddress,
+  }) => {
+    setLoading(true);
+    try {
+      // Check for duplicate token in customTokens
+      const isDuplicate = customTokens.some(
+        (token) => token.address?.toLowerCase() === tokenAddress.toLowerCase()
+      );
+      if (isDuplicate) {
+        const errorMessage = produceErrorMessage('duplicated');
+        setError(errorMessage);
+        return undefined;
+      }
+
+      const res = await fetch(
+        `${getConfig('BASE_URL')}/meta/token?apiKey=${getConfig(
+          'API_KEY'
+        )}&blockchain=${blockchain}&address=${tokenAddress}`
+      );
+      const contentType = res.headers.get('content-type');
+      const response =
+        contentType &&
+        contentType.includes('application/json') &&
+        (await res.json());
+      if (!response || response.error) {
+        const errorMessage = produceErrorMessage('not-found', blockchain);
+        setError(errorMessage);
+        return undefined;
+      }
+
+      // Check if token is already in the system
+      const isTokenFound = findToken({
+        blockchain: response.blockchain,
+        address: response.address,
+        symbol: response.symbol,
+      });
+      if (isTokenFound) {
+        const errorMessage = produceErrorMessage('token-exist');
+        setError(errorMessage);
+        return undefined;
+      }
+
+      return response;
+    } catch (error: any) {
+      setError(undefined);
+      throw new Error(error.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+  return { fetchCustomToken, loading, error };
+}

package/src/hooks/useSwapInput.ts

@@ -11,6 +11,8 @@ import { isPositiveNumber } from '../utils/numbers';
 import {
   generateQuoteWarnings,
   getDefaultQuote,
+  getQuoteFromTokenUsdPrice,
+  getQuoteToTokenUsdPrice,
   sortQuotesBy,
 } from '../utils/quote';
 import { isFeatureEnabled } from '../utils/settings';
@@ -146,12 +148,15 @@ export function useSwapInput({
             requestId: quote?.requestId || '',
             swaps: quote?.swaps,
           });
-
+          const outputUsdValue =
+            getQuoteToTokenUsdPrice(quote) || toToken?.usdPrice;
+          const inputUsdValue =
+            getQuoteFromTokenUsdPrice(quote) || fromToken?.usdPrice;
           const quoteWarning =
             quote &&
             generateQuoteWarnings(quote, {
-              fromToken,
-              toToken,
+              fromToken: { ...fromToken, usdPrice: inputUsdValue },
+              toToken: { ...toToken, usdPrice: outputUsdValue },
               userSlippage,
               findToken,
             });

package/src/hooks/useSyncUrlAndStore/useSyncUrlAndStore.ts

@@ -54,6 +54,8 @@ export function useSyncUrlAndStore() {
     const clientUrl = searchParams.get(SearchParams.CLIENT_URL);
     const liquiditySources = searchParams.get(SearchParams.LIQUIDITY_SOURCES);
 
+    const blockchain = searchParams.get(SearchParams.BLOCKCHAIN);
+
     return {
       fromAmount,
       fromBlockchain,
@@ -64,6 +66,7 @@ export function useSyncUrlAndStore() {
       clientUrl,
       liquiditySources,
       utmQueryParams,
+      blockchain,
     };
   };
 
@@ -79,7 +82,8 @@ export function useSyncUrlAndStore() {
   };
 
   useEffect(() => {
-    const { autoConnect, clientUrl, utmQueryParams } = getUrlSearchParams();
+    const { autoConnect, clientUrl, utmQueryParams, blockchain } =
+      getUrlSearchParams();
     if (isInRouterContext && fetchMetaStatus === 'success') {
       updateUrlSearchParams({
         [SearchParams.FROM_BLOCKCHAIN]: fromBlockchain?.name,
@@ -89,6 +93,7 @@ export function useSyncUrlAndStore() {
         [SearchParams.FROM_AMOUNT]: inputAmount,
         [SearchParams.AUTO_CONNECT]: autoConnect ?? undefined,
         [SearchParams.CLIENT_URL]: clientUrl ?? undefined,
+        [SearchParams.BLOCKCHAIN]: blockchain ?? undefined,
         [SearchParams.LIQUIDITY_SOURCES]: campaignMode
           ? liquiditySourcesParamsRef.current
           : undefined,

package/src/hooks/useTheme.ts

@@ -93,8 +93,12 @@ export function useTheme(props: WidgetTheme) {
     if (theme === 'auto') {
       return OSTheme === 'dark' ? darkClassNames : lightClassNames;
     }
+
     return theme === 'dark' ? darkClassNames : lightClassNames;
   };
 
-  return { activeTheme: getActiveTheme };
+  return {
+    activeTheme: getActiveTheme,
+    mode: theme === 'auto' ? OSTheme : theme,
+  };
 }

package/src/hooks/useWalletList.ts

@@ -1,5 +1,5 @@
-import type { WalletInfoWithExtra } from '../types';
 import type { WalletInfo } from '@rango-dev/ui';
+import type { NamespaceData, WalletType } from '@rango-dev/wallets-shared';
 import type { BlockchainMeta } from 'rango-sdk';
 
 import { WalletState } from '@rango-dev/ui';
@@ -9,10 +9,11 @@ import {
   KEPLR_COMPATIBLE_WALLETS,
   WalletTypes,
 } from '@rango-dev/wallets-shared';
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 import { useAppStore } from '../store/AppStore';
 import { useWalletsStore } from '../store/wallets';
+import { isSingleWalletActive } from '../utils/common';
 import { configWalletsToWalletName } from '../utils/providers';
 import {
   hashWalletsState,
@@ -21,33 +22,26 @@ import {
   sortWalletsBasedOnConnectionState,
 } from '../utils/wallets';
 
-import { useStatefulConnect } from './useStatefulConnect/useStatefulConnect';
-
 const ALL_SUPPORTED_WALLETS = Object.values(WalletTypes);
 
 interface Params {
   chain?: string;
-}
-
-interface API {
-  list: WalletInfoWithExtra[];
-  terminateConnectingWallets: () => void;
+  onBeforeConnect?: (walletType: string) => void;
+  onConnect?: (walletType: string) => void;
+  onError?: (error?: string) => void;
 }
 
 /**
- *
- * Returning list of wallets which has a applied sorting and filtering (some of wallet can be excluded).
- * It can have some functionality on list itself,
- * now it only has a method to disconnect the wallets that has `connecting` status. This is useful for exiting page and terminating wallet connection.
- *
+ * gets list of wallets with their information and an action for handling click callback fo UI
+ * we need to share the logic of rendering list of wallets and handle clicking on them in different places
+ * you can use this list whenever you need to show the list of wallets and needed callbacks
  */
-export function useWalletList(params?: Params): API {
-  const { chain } = params || {};
+export function useWalletList(params: Params) {
+  const { chain, onBeforeConnect, onConnect, onError } = params;
   const { config } = useAppStore();
-  const { state, getWalletInfo } = useWallets();
+  const { state, disconnect, getWalletInfo, connect } = useWallets();
   const { connectedWallets } = useWalletsStore();
   const blockchains = useAppStore().blockchains();
-  const { handleDisconnect } = useStatefulConnect();
 
   /** It can be what has been set by widget config or as a fallback we use all the supported wallets by our library */
   const listAvailableWalletTypes =
@@ -73,6 +67,7 @@ export function useWalletList(params?: Params): API {
     : wallets;
 
   const sortedWallets = sortWalletsBasedOnConnectionState(wallets);
+  const [error, setError] = useState('');
 
   const isExperimentalChainNotAdded = (walletType: string) =>
     !connectedWallets.find(
@@ -81,18 +76,51 @@ export function useWalletList(params?: Params): API {
         connectedWallet.chain === chain
     );
 
-  const terminateConnectingWallets = useCallback(() => {
+  const handleClick = async (
+    type: WalletType,
+    namespaces?: NamespaceData[]
+  ) => {
+    const wallet = state(type);
+    try {
+      if (error) {
+        setError('');
+      }
+      if (wallet.connected) {
+        await disconnect(type);
+      } else {
+        if (isSingleWalletActive(wallets, config.multiWallets)) {
+          return;
+        }
+        onBeforeConnect?.(type);
+        await connect(type, undefined, namespaces);
+        onConnect?.(type);
+      }
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } catch (e: any) {
+      onError?.(e?.message);
+      setError('Error: ' + e?.message);
+    }
+  };
+
+  const disconnectConnectingWallets = useCallback(() => {
     const connectingWallets =
       wallets?.filter((wallet) => wallet.state === WalletState.CONNECTING) ||
       [];
     for (const wallet of connectingWallets) {
-      void handleDisconnect(wallet.type);
+      void disconnect(wallet.type);
     }
   }, [hashWalletsState(wallets)]);
 
+  const disconnectWallet = async (type: WalletType) => {
+    const wallet = state(type);
+    if (wallet.connected) {
+      await disconnect(type);
+    }
+  };
+
   useEffect(() => {
     return () => {
-      terminateConnectingWallets();
+      disconnectConnectingWallets();
     };
   }, []);
 
@@ -147,6 +175,9 @@ export function useWalletList(params?: Params): API {
     list: sortedWallets.filter(
       (wallet) => !shouldExcludeWallet(wallet.type, chain ?? '', blockchains)
     ),
-    terminateConnectingWallets,
+    error,
+    handleClick,
+    disconnectConnectingWallets,
+    disconnectWallet,
   };
 }