@rango-dev/widget-embedded 0.12.1-next.9 → 0.14.0

package/src/components/TokenList/TokenList.tsx

@@ -21,6 +21,7 @@ import {
 } from '@rango-dev/ui';
 import React, { forwardRef, useEffect, useState } from 'react';
 
+import { useAppStore } from '../../store/app';
 import { useMetaStore } from '../../store/meta';
 import { useWalletsStore } from '../../store/wallets';
 import { generateRangeColors } from '../../utils/common';
@@ -28,6 +29,7 @@ import { generateRangeColors } from '../../utils/common';
 import { LoadingTokenList } from './LoadingTokenList';
 import {
   BalanceContainer,
+  Container,
   End,
   ImageSection,
   List,
@@ -82,13 +84,14 @@ const renderDesc = (props: RenderDescProps) => {
 };
 
 export function TokenList(props: PropTypes) {
-  const { list, searchedFor = '', onChange } = props;
+  const { list, searchedFor = '', onChange, selectedBlockchain } = props;
 
   const [tokens, setTokens] = useState<TokenWithBalance[]>(list);
   const loadingStatus = useMetaStore.use.loadingStatus();
   const [hasNextPage, setHasNextPage] = useState<boolean>(true);
   const loadingWallet = useWalletsStore.use.loading();
   const { blockchains } = useMetaStore.use.meta();
+  const { isTokenPinned } = useAppStore();
 
   // eslint-disable-next-line react/display-name
   const innerElementType: React.FC<CommonProps> = forwardRef((render, ref) => {
@@ -131,27 +134,29 @@ export function TokenList(props: PropTypes) {
     return (
       <VirtualizedList
         Item={({ index, style }) => {
-          const address = tokens[index].address || '';
+          const token = tokens[index];
+
+          const address = token.address || '';
           const blockchain = blockchains.find(
-            (blockchain) => blockchain.name === tokens[index].blockchain
+            (blockchain) => blockchain.name === token.blockchain
           );
           const color = generateRangeColors(
-            tokens[index].symbol,
+            token.symbol,
             blockchain?.color || ''
           );
 
           const customCssForTag = {
-            $$color: color[`${tokens[index].symbol}100`],
+            $$color: color[`${token.symbol}100`],
             [`.${darkTheme} &`]: {
-              $$color: color[`${tokens[index].symbol}900`],
+              $$color: color[`${token.symbol}900`],
             },
             backgroundColor: '$$color',
           };
 
           const customCssForTagTitle = {
-            $$color: color[`${tokens[index].symbol}700`],
+            $$color: color[`${token.symbol}700`],
             [`.${darkTheme} &`]: {
-              $$color: color[`${tokens[index].symbol}100`],
+              $$color: color[`${token.symbol}100`],
             },
             color: '$$color',
           };
@@ -167,14 +172,14 @@ export function TokenList(props: PropTypes) {
                   height: style?.height,
                 }}
                 tab-index={index}
-                key={`${tokens[index].symbol}${tokens[index].address}`}
-                id={`${tokens[index].symbol}${tokens[index].address}`}
+                key={`${token.symbol}${token.address}`}
+                id={`${token.symbol}${token.address}`}
                 hasDivider
                 onClick={() => onChange(tokens[index])}
                 start={
                   <ImageSection>
-                    <Image src={tokens[index].image} size={30} />
-                    {tokens[index].pin && (
+                    <Image src={token.image} size={30} />
+                    {isTokenPinned(token) && (
                       <Pin>
                         <PinIcon size={12} color="gray" />
                       </Pin>
@@ -183,11 +188,11 @@ export function TokenList(props: PropTypes) {
                 }
                 title={
                   blockchain?.type === 'COSMOS' ||
-                  !!tokens[index].name ||
-                  (!tokens[index].name && !address) ? (
+                  !!token.name ||
+                  (!token.name && !address) ? (
                     <Title>
                       <Typography variant="title" size="xmedium">
-                        {tokens[index].symbol}
+                        {token.symbol}
                       </Typography>
                       <Divider direction="horizontal" size={4} />
                       <Tag css={customCssForTag}>
@@ -195,7 +200,7 @@ export function TokenList(props: PropTypes) {
                           variant="body"
                           size="xsmall"
                           css={customCssForTagTitle}>
-                          {tokens[index].blockchain}
+                          {token.blockchain}
                         </TagTitle>
                       </Tag>
                     </Title>
@@ -210,12 +215,12 @@ export function TokenList(props: PropTypes) {
                         token: tokens[index],
                         customCssForTag,
                         customCssForTagTitle,
-                        name: tokens[index].name,
+                        name: token.name,
                         url: blockchain.info.addressUrl
                           .split('{wallet}')
                           .join(address),
                       })
-                    : tokens[index].name || undefined
+                    : token.name || undefined
                 }
                 end={
                   loadingWallet ? (
@@ -228,15 +233,15 @@ export function TokenList(props: PropTypes) {
                     tokens[index]?.balance && (
                       <BalanceContainer>
                         <Typography variant="title" size="small">
-                          {tokens[index].balance?.amount}
+                          {token.balance?.amount}
                         </Typography>
                         <div />
-                        {tokens[index].balance?.usdValue && (
+                        {token.balance?.usdValue && (
                           <Typography
                             variant="body"
                             color="neutral800"
                             size="xsmall">
-                            {`$${tokens[index].balance?.usdValue}`}
+                            {`$${token.balance?.usdValue}`}
                           </Typography>
                         )}
                       </BalanceContainer>
@@ -252,18 +257,19 @@ export function TokenList(props: PropTypes) {
         loadNextPage={loadNextPage}
         innerElementType={innerElementType}
         size={60}
+        key={`${selectedBlockchain}-${searchedFor}`}
       />
     );
   };
 
   return (
-    <div>
+    <Container>
       <Typography variant="label" size="large">
         {i18n.t('Select Token')}
       </Typography>
       <Divider size={4} />
       {loadingStatus === 'loading' && <LoadingTokenList size={PAGE_SIZE} />}
       {loadingStatus === 'success' && <List>{renderList()}</List>}
-    </div>
+    </Container>
   );
 }

package/src/components/TokenList/TokenList.types.ts

@@ -5,13 +5,13 @@ export interface TokenWithBalance extends Token {
     amount: string;
     usdValue: string;
   };
-  pin?: boolean;
 }
 
 export interface PropTypes {
   list: TokenWithBalance[];
   searchedFor?: string;
   onChange: (token: TokenWithBalance) => void;
+  selectedBlockchain?: string;
 }
 
 export interface LoadingTokenListProps {

package/src/components/UpdateUrl.tsx

@@ -1,3 +1,5 @@
+import type { WidgetConfig } from '../types';
+
 import { useEffect, useRef } from 'react';
 import {
   createSearchParams,
@@ -7,12 +9,15 @@ import {
 
 import { navigationRoutes } from '../constants/navigationRoutes';
 import { SearchParams } from '../constants/searchParams';
+import { useSyncStoresWithConfig } from '../hooks/useSyncStoresWithConfig';
 import { useBestRouteStore } from '../store/bestRoute';
 import { useMetaStore } from '../store/meta';
 import { useUiStore } from '../store/ui';
 import { searchParamsToToken } from '../utils/routing';
 
-export function UpdateUrl() {
+type Props = { config: WidgetConfig | undefined };
+
+export function UpdateUrl(props: Props) {
   const firstRender = useRef(true);
   const [searchParams, setSearchParams] = useSearchParams();
   const location = useLocation();
@@ -31,6 +36,7 @@ export function UpdateUrl() {
   const loadingStatus = useMetaStore.use.loadingStatus();
   const { blockchains, tokens } = useMetaStore.use.meta();
   const setSelectedSwap = useUiStore.use.setSelectedSwap();
+  useSyncStoresWithConfig(props.config);
 
   useEffect(() => {
     const params: Record<string, string> = {};

package/src/components/WidgetEvents.tsx

@@ -16,7 +16,7 @@ export function WidgetEvents() {
   const connectedWallets = useWalletsStore.use.connectedWallets();
   const getWalletsDetails = useWalletsStore.use.getWalletsDetails();
   const setNotification = useNotificationStore.use.setNotification();
-
+  const setAsRead = useNotificationStore.use.setAsRead();
   const widgetEvents = useEvents();
 
   useEffect(() => {
@@ -42,10 +42,16 @@ export function WidgetEvents() {
         toAccount && getWalletsDetails([toAccount]);
       }
       if (
-        event.type === StepEventType.TX_EXECUTION_BLOCKED &&
-        validBlockedStatuses.includes(event.status)
+        (event.type === StepEventType.TX_EXECUTION_BLOCKED &&
+          validBlockedStatuses.includes(event.status)) ||
+        event.type === StepEventType.FAILED
       ) {
         setNotification(event, route);
+      } else if (
+        event.type === StepEventType.TX_EXECUTION ||
+        event.type === StepEventType.CHECK_STATUS
+      ) {
+        setAsRead(route.requestId);
       }
     });
 

package/src/constants/errors.ts

@@ -22,7 +22,7 @@ export const errorMessages = {
     decreaseAmount: i18n.t('Bridge Limit Error: Please decrease your amount'),
   },
   highValueLossError: {
-    impacTitle: i18n.t('High Price Impact'),
+    impactTitle: i18n.t('High Price Impact'),
     title: i18n.t('Price impact is too high!'),
     description: i18n.t(
       'The price impact is significantly higher than the allowed amount. If you are sure, continue, otherwise, change the swap.'
@@ -35,7 +35,7 @@ export const errorMessages = {
     ),
   },
   unknownPriceError: {
-    impacTitle: i18n.t('USD Price Unknown'),
+    impactTitle: i18n.t('USD Price Unknown'),
     title: i18n.t('USD Price Unknown, Cannot calculate Price Impact.'),
     description: i18n.t(
       'USD Price Unknown, Cannot calculate Price Impact. The price impact may be higher than usual. Are you sure to continue the Swap?'

package/src/constants/routing.ts

@@ -1,2 +1,17 @@
-export const LOW_PRICE_IMPACT = 3;
-export const HIGHT_PRICE_IMPACT = 10;
+export const LOW_PRICE_IMPACT = -3;
+export const HIGHT_PRICE_IMPACT = -10;
+
+export const TOKEN_AMOUNT_MIN_DECIMALS = 6;
+export const TOKEN_AMOUNT_MAX_DECIMALS = 6;
+
+export const USD_VALUE_MIN_DECIMALS = 4;
+export const USD_VALUE_MAX_DECIMALS = 4;
+
+export const GAS_FEE_MIN_DECIMALS = 2;
+export const GAS_FEE_MAX_DECIMALS = 2;
+
+export const PERCENTAGE_CHANGE_MIN_DECIMALS = 2;
+export const PERCENTAGE_CHANGE_MAX_DECIMALS = 2;
+
+export const BALANCE_MIN_DECIMALS = 8;
+export const BALANCE_MAX_DECIMALS = 8;

package/src/constants.ts

@@ -0,0 +1 @@
+export const RANGO_PUBLIC_API_KEY = 'c6381a79-2817-4602-83bf-6a641a409e32';

package/src/globalStyles.ts

@@ -1,12 +1,9 @@
 import { globalCss } from '@rango-dev/ui';
 
-export const globalFont = (fontFamily: string) =>
+export const globalFont = () =>
   globalCss({
     '@import': [
       "url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap')",
       "url('https://fonts.cdnfonts.com/css/times-new-roman')",
     ],
-    body: {
-      fontFamily,
-    },
   })();

package/src/hooks/useFetchBestRoute.ts

@@ -12,11 +12,11 @@ interface UseFetchBestRoute {
 
 export function useFetchBestRoute(): UseFetchBestRoute {
   const [loading, setLoading] = useState(false);
-  const cancel = () => abortController.current?.abort();
   const abortController = useRef<AbortController | null>(null);
+  const cancel = () => abortController.current?.abort();
 
   const fetch: UseFetchBestRoute['fetch'] = async (requestBody) => {
-    abortController.current?.abort();
+    cancel();
     abortController.current = new AbortController();
 
     setLoading(true);

package/src/hooks/useNavigateBack.ts

@@ -1,10 +1,12 @@
 import { useInRouterContext, useNavigate } from 'react-router-dom';
 
 import { navigationRoutes } from '../constants/navigationRoutes';
+import { useBestRouteStore } from '../store/bestRoute';
 
 export function useNavigateBack() {
   const isRouterInContext = useInRouterContext();
   const navigate = useNavigate();
+  const routeWalletsConfirmed = useBestRouteStore.use.routeWalletsConfirmed();
 
   navigationRoutes;
 
@@ -20,6 +22,14 @@ export function useNavigateBack() {
       // eslint-disable-next-line @typescript-eslint/no-magic-numbers
       navigate(-1);
     } else {
+      if (
+        [navigationRoutes.settings, navigationRoutes.wallets].includes(
+          currentRoute
+        ) &&
+        routeWalletsConfirmed
+      ) {
+        return navigate('/' + navigationRoutes.confirmSwap, { replace: true });
+      }
       if (
         [
           navigationRoutes.fromSwap,

package/src/hooks/usePrepareBlockchainList.ts

@@ -0,0 +1,125 @@
+import type { BlockchainMeta } from 'rango-sdk';
+
+import { useMemo, useRef } from 'react';
+
+interface PrepareListOptions {
+  limit?: number;
+  selected?: string;
+}
+
+interface PrepareListOutput {
+  list: BlockchainMeta[];
+  more: BlockchainMeta[];
+}
+
+/**
+ *
+ * UI needs some specific logics like limiting the list and sorting,
+ * this function is getting the raw blockchains list and return a list for showing in UI.
+ *
+ */
+export function usePrepareBlockchainList(
+  blockchains: BlockchainMeta[],
+  options?: PrepareListOptions
+): PrepareListOutput {
+  const prevSelectedBlockchain = useRef({ index: -1, name: '' });
+
+  blockchains.sort(sortByMostUsedBlockchains);
+
+  const blockchainsHash = blockchains
+    .map((blockchain) => blockchain.name)
+    .join('-');
+
+  return useMemo(() => {
+    const list: BlockchainMeta[] = blockchains;
+    let more: BlockchainMeta[] = [];
+
+    // Checking `limit` has set and it should be more than of the list items.
+    if (options?.limit && blockchains.length > options.limit) {
+      const start = options.limit;
+      /** Try find the blockchain and returns the index. */
+      const selectedIndex = options.selected
+        ? blockchains.findIndex(
+            (blockchains) => blockchains.name === options.selected
+          )
+        : -1;
+
+      const prevSelectedBlockchainWasInMoreSection =
+        prevSelectedBlockchain.current.index > options.limit - 1 &&
+        !!blockchains.find(
+          (blockchains) =>
+            blockchains.name === prevSelectedBlockchain.current.name
+        );
+
+      /*
+       * If the selected blockchain is in `more` section, we should move it to front of the list
+       */
+      if (
+        options.selected &&
+        ((prevSelectedBlockchainWasInMoreSection &&
+          selectedIndex < options.limit - 1) ||
+          selectedIndex > options.limit - 1)
+      ) {
+        blockchains.sort(
+          generateSortBySelectedFor(
+            prevSelectedBlockchainWasInMoreSection
+              ? prevSelectedBlockchain.current.name
+              : options.selected
+          )
+        );
+      }
+
+      /*
+       * Splice will modify the original list and returns the deleted items
+       * We use the deleted items as `more`
+       */
+      more = list.splice(start);
+      prevSelectedBlockchain.current = {
+        index: selectedIndex,
+        name: options.selected ?? '',
+      };
+    }
+
+    return {
+      list,
+      more,
+    };
+  }, [blockchainsHash]);
+}
+
+function generateSortBySelectedFor(selected: string) {
+  /** Move `selected` blockchain to the front of list. */
+  return function sortBySelected(a: BlockchainMeta, b: BlockchainMeta) {
+    if (a.name === selected) {
+      return -1;
+    }
+    if (b.name === selected) {
+      return 1;
+    }
+
+    return 0;
+  };
+}
+
+/** There is a hardcoded list of blockchains that we want to show them first in the list. */
+function sortByMostUsedBlockchains(a: BlockchainMeta, b: BlockchainMeta) {
+  const mostUsed = ['ETH', 'COSMOS', 'OSMOSIS'];
+  const aIndexInMostUsed = mostUsed.findIndex((token) => token === a.name);
+  const bIndexInMostUsed = mostUsed.findIndex((token) => token === b.name);
+  const aIsMostUsed = aIndexInMostUsed > -1;
+  const bIsMostUsed = bIndexInMostUsed > -1;
+
+  if (aIsMostUsed && bIsMostUsed) {
+    return aIndexInMostUsed > bIndexInMostUsed ? 1 : -1;
+  }
+
+  if (aIsMostUsed) {
+    return -1;
+  }
+
+  if (bIsMostUsed) {
+    return 1;
+  }
+
+  return 0;
+}

package/src/hooks/useSwapInput.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { useBestRouteStore } from '../store/bestRoute';
 import { useSettingsStore } from '../store/settings';
@@ -41,6 +41,7 @@ export function useSwapInput(): UseSwapInput {
     disabledLiquiditySources,
   } = useSettingsStore();
   const [error, setError] = useState('');
+  const prevDisabledLiquiditySources = useRef(disabledLiquiditySources);
   const userSlippage = customSlippage ?? slippage;
   const hasTokensValue = !fromToken || !toToken;
   const shouldSkipRequest =
@@ -53,6 +54,7 @@ export function useSwapInput(): UseSwapInput {
       setLoading(true);
     }
     if (!shouldSkipRequest) {
+      resetRoute();
       const requestBody = createBestRouteRequestBody({
         fromToken,
         toToken,
@@ -87,7 +89,8 @@ export function useSwapInput(): UseSwapInput {
   useEffect(() => {
     if (!isPositiveNumber(inputAmount) || inputUsdValue?.eq(0)) {
       setLoading(false);
-      return cancelFetch();
+      cancelFetch();
+      return;
     }
     if (shouldSkipRequest) {
       return;
@@ -96,7 +99,18 @@ export function useSwapInput(): UseSwapInput {
     setLoading(true);
     debouncedFetch();
     return cancelFetch;
-  }, [inputAmount]);
+  }, [inputAmount, shouldSkipRequest]);
+
+  useEffect(() => {
+    const disabledLiquiditySourceReset =
+      !!prevDisabledLiquiditySources.current.length &&
+      !disabledLiquiditySources.length;
+    if (!shouldSkipRequest && disabledLiquiditySourceReset) {
+      fetch();
+    }
+    prevDisabledLiquiditySources.current = disabledLiquiditySources;
+    return cancelFetch;
+  }, [disabledLiquiditySources.length]);
 
   return { fetch, loading, error };
 }

package/src/hooks/useSyncStoresWithConfig.ts

@@ -0,0 +1,102 @@
+import type { WidgetConfig } from '../types';
+import type { Asset } from 'rango-sdk';
+
+import { useEffect, useRef } from 'react';
+
+import { useBestRouteStore } from '../store/bestRoute';
+import { useMetaStore } from '../store/meta';
+import { useSettingsStore } from '../store/settings';
+import { tokensAreEqual } from '../utils/wallets';
+
+export function useSyncStoresWithConfig(config: WidgetConfig | undefined) {
+  const {
+    setInputAmount,
+    setToToken,
+    setToBlockchain,
+    setFromBlockchain,
+    setFromToken,
+  } = useBestRouteStore();
+
+  const {
+    meta: { tokens, blockchains },
+    loadingStatus: loadingMetaStatus,
+  } = useMetaStore();
+
+  const { setAffiliateRef, setAffiliatePercent, setAffiliateWallets } =
+    useSettingsStore();
+
+  const prevConfigFromToken = useRef<Asset | undefined>(undefined);
+  const prevConfigToToken = useRef<Asset | undefined>(undefined);
+  const prevConfigFromBlockchain = useRef<string | undefined>(undefined);
+  const prevConfigToBlockchain = useRef<string | undefined>(undefined);
+
+  useEffect(() => {
+    setInputAmount(config?.amount?.toString() || '');
+  }, [config?.amount]);
+
+  useEffect(() => {
+    if (loadingMetaStatus === 'success') {
+      const chain = blockchains.find(
+        (chain) => chain.name === config?.from?.blockchain
+      );
+      const token = tokens.find((t) =>
+        tokensAreEqual(t, config?.from?.token || null)
+      );
+
+      if (chain || (!chain && prevConfigFromBlockchain.current)) {
+        setFromBlockchain(chain ?? null);
+      }
+
+      if (token || (!token && prevConfigFromToken.current)) {
+        setFromToken(token ?? null);
+      }
+
+      prevConfigFromBlockchain.current = config?.from?.blockchain;
+      prevConfigFromToken.current = config?.from?.token;
+    }
+  }, [
+    config?.from?.token?.symbol,
+    config?.from?.token?.address,
+    config?.from?.blockchain,
+    config?.from?.blockchain,
+    loadingMetaStatus,
+  ]);
+
+  useEffect(() => {
+    if (loadingMetaStatus === 'success') {
+      const chain = blockchains.find(
+        (chain) => chain.name === config?.to?.blockchain
+      );
+      const token = tokens.find((t) =>
+        tokensAreEqual(t, config?.to?.token || null)
+      );
+
+      if (chain || (!chain && prevConfigToBlockchain.current)) {
+        setToBlockchain(chain ?? null);
+      }
+
+      if (token || (!token && prevConfigToToken.current)) {
+        setToToken(token ?? null);
+      }
+
+      prevConfigToBlockchain.current = config?.to?.blockchain;
+      prevConfigToToken.current = config?.to?.token;
+    }
+  }, [
+    config?.to?.token?.symbol,
+    config?.to?.token?.address,
+    config?.to?.token?.blockchain,
+    config?.to?.blockchain,
+    loadingMetaStatus,
+  ]);
+
+  useEffect(() => {
+    setAffiliateRef(config?.affiliate?.ref ?? null);
+    setAffiliatePercent(config?.affiliate?.percent ?? null);
+    setAffiliateWallets(config?.affiliate?.wallets ?? null);
+  }, [
+    config?.affiliate?.ref,
+    config?.affiliate?.percent,
+    config?.affiliate?.wallets,
+  ]);
+}