@rango-dev/widget-embedded 0.27.3 → 0.27.4-next.1

package/dist/pages/Home.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA8B,MAAM,OAAO,CAAC;AA4BnD,eAAO,MAAM,6BAA6B,MAAM,CAAC;AAEjD,wBAAgB,IAAI,sBA0MnB"}
+{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA8B,MAAM,OAAO,CAAC;AA2BnD,eAAO,MAAM,6BAA6B,MAAM,CAAC;AAEjD,wBAAgB,IAAI,sBA0MnB"}

package/dist/pages/WalletsPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WalletsPage.d.ts","sourceRoot":"","sources":["../../src/pages/WalletsPage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAsBxC,eAAO,MAAM,mBAAmB,OAAQ,CAAC;AACzC,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,wBAAgB,WAAW,sBA0E1B"}
+{"version":3,"file":"WalletsPage.d.ts","sourceRoot":"","sources":["../../src/pages/WalletsPage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAsBxC,eAAO,MAAM,mBAAmB,OAAQ,CAAC;AACzC,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,wBAAgB,WAAW,sBAyE1B"}

package/dist/utils/providers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"providers.d.ts","sourceRoot":"","sources":["../../src/utils/providers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAIlE,MAAM,WAAW,gBAAgB;IAC/B,sBAAsB,CAAC,EAAE,YAAY,CAAC,wBAAwB,CAAC,CAAC;CACjE;AAED;;;;;GAKG;AACH,wBAAgB,yBAAyB,CACvC,SAAS,EAAE,YAAY,CAAC,SAAS,CAAC,EAClC,OAAO,CAAC,EAAE,gBAAgB,GACzB,iBAAiB,EAAE,CAoCrB;AAED,wBAAgB,yBAAyB,CACvC,MAAM,EAAE,YAAY,CAAC,SAAS,CAAC,EAC/B,OAAO,CAAC,EAAE,gBAAgB,GACzB,MAAM,EAAE,CAMV"}
+{"version":3,"file":"providers.d.ts","sourceRoot":"","sources":["../../src/utils/providers.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAIlE,MAAM,WAAW,gBAAgB;IAC/B,sBAAsB,CAAC,EAAE,YAAY,CAAC,wBAAwB,CAAC,CAAC;CACjE;AAED;;;;;GAKG;AACH,wBAAgB,yBAAyB,CACvC,SAAS,EAAE,YAAY,CAAC,SAAS,CAAC,EAClC,OAAO,CAAC,EAAE,gBAAgB,GACzB,iBAAiB,EAAE,CAqCrB;AAED,wBAAgB,yBAAyB,CACvC,MAAM,EAAE,YAAY,CAAC,SAAS,CAAC,EAC/B,OAAO,CAAC,EAAE,gBAAgB,GACzB,MAAM,EAAE,CAMV"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.27.3",
+  "version": "0.27.4-next.1",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -24,14 +24,14 @@
   "dependencies": {
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
-    "@rango-dev/logging-core": "^0.2.0",
-    "@rango-dev/provider-all": "^0.32.1",
+    "@rango-dev/logging-core": "^0.2.1-next.1",
+    "@rango-dev/provider-all": "^0.32.2-next.2",
     "@rango-dev/queue-manager-core": "^0.26.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.32.0",
+    "@rango-dev/queue-manager-rango-preset": "^0.32.1-next.0",
     "@rango-dev/queue-manager-react": "^0.26.0",
-    "@rango-dev/ui": "^0.33.0",
-    "@rango-dev/wallets-react": "^0.18.0",
-    "@rango-dev/wallets-shared": "^0.32.0",
+    "@rango-dev/ui": "^0.33.1-next.4",
+    "@rango-dev/wallets-react": "^0.18.1-next.0",
+    "@rango-dev/wallets-shared": "^0.32.1-next.0",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",
@@ -52,4 +52,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -437,7 +437,6 @@ export function ConfirmWalletsModal(props: PropTypes) {
                         }>
                         <Divider size={4} />
                         <StyledTextField
-                          autoFocus
                           placeholder={i18n.t('Your destination address')}
                           value={customDestination || ''}
                           onChange={(e) => {
@@ -449,6 +448,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
                               setCustomDestination(value.length ? value : null);
                             }
                           }}
+                          {...(!customDestination && { autoFocus: true })}
                         />
                       </CustomCollapsible>
 

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -44,7 +44,6 @@ import {
 const ACCOUNT_ADDRESS_MAX_CHARACTERS = 7;
 export function WalletList(props: PropTypes) {
   const { chain, isSelected, selectWallet, limit, onShowMore } = props;
-  const { config } = useAppStore();
   const isActiveTab = useUiStore.use.isActiveTab();
 
   const connectedWallets = useWalletsStore.use.connectedWallets();
@@ -61,7 +60,6 @@ export function WalletList(props: PropTypes) {
   let modalTimerId: ReturnType<typeof setTimeout> | null = null;
   const { list, error, handleClick, disconnectConnectingWallets } =
     useWalletList({
-      config,
       chain,
       onBeforeConnect: (type) => {
         modalTimerId = setTimeout(() => {

package/src/components/HeaderButtons/WalletButton.tsx

@@ -5,7 +5,6 @@ import { Image, Tooltip, WalletIcon } from '@rango-dev/ui';
 import React from 'react';
 
 import { useWalletList } from '../../hooks/useWalletList';
-import { useAppStore } from '../../store/AppStore';
 
 import {
   ConnectedIcon,
@@ -15,9 +14,7 @@ import {
 } from './HeaderButtons.styles';
 
 function WalletButton(props: PropTypes) {
-  const { config } = useAppStore();
-
-  const { list } = useWalletList({ config });
+  const { list } = useWalletList({});
   const connectedWallets = list.filter(
     (wallet) => wallet.state === 'connected'
   );

package/src/components/Quote/Quote.styles.ts

@@ -63,7 +63,25 @@ export const stepsDetailsStyles = css({
 });
 export const AllRoutesButton = styled(Button, {
   backgroundColor: 'transparent',
-  border: '1px solid $secondary',
+  border: '1px solid $secondary600',
+  [`.${darkTheme} &`]: {
+    border: '1px solid $secondary',
+  },
+  transition: 'background-color 0.3s ease',
+  '&:hover': {
+    backgroundColor: '$secondary600',
+    [`.${darkTheme} &`]: {
+      backgroundColor: '$secondary',
+    },
+    '.allRoutesLabel': {
+      $$color: '$colors$background',
+      [`.${darkTheme} &`]: {
+        $$color: '$colors$foreground',
+      },
+      color: '$$color',
+      transition: 'color 0.3s ease',
+    },
+  },
 });
 export const SummaryContainer = styled('div', {
   borderRadius: '$xm',

package/src/components/Quote/Quote.tsx

@@ -90,6 +90,8 @@ export function Quote(props: QuoteProps) {
   const blockchains = useAppStore().blockchains();
   const tokens = useAppStore().tokens();
   const swappers = useAppStore().swappers();
+  const { customSlippage, slippage } = useAppStore();
+  const userSlippage = customSlippage || slippage;
   const [expanded, setExpanded] = useState(props.expanded);
   const quoteRef = useRef<HTMLButtonElement | null>(null);
   const roundedInput = numberToString(
@@ -149,7 +151,7 @@ export function Quote(props: QuoteProps) {
         : i18n.t('Slippage Warning');
 
       if (hasBridgeLimitError) {
-        alertTitle = error?.recommendation;
+        alertTitle = i18n.t('Bridge Limit Error');
       }
 
       return {
@@ -229,50 +231,43 @@ export function Quote(props: QuoteProps) {
                 type={stepHasError ? 'error' : 'warning'}
                 title={alertTitle}
                 footer={
-                  !fullExpandedMode ? (
-                    <FooterAlert>
-                      {hasBridgeLimitError && (
-                        <>
-                          <Typography
-                            size="xsmall"
-                            variant="body"
-                            color="neutral900">
-                            {error.fromAmountRangeError}
-                          </Typography>
-                          <Divider direction="horizontal" size={8} />
-                          <Typography
-                            size="xsmall"
-                            variant="body"
-                            color="neutral900">
-                            |
-                          </Typography>
-                          <Divider direction="horizontal" size={8} />
-                          <Typography
-                            size="xsmall"
-                            variant="body"
-                            color="neutral900">
-                            {i18n.t({
-                              id: 'Yours: {amount} {symbol}',
-                              values: {
-                                amount: numberToString(
-                                  swap.fromAmount,
-                                  TOKEN_AMOUNT_MIN_DECIMALS,
-                                  TOKEN_AMOUNT_MAX_DECIMALS
-                                ),
-                                symbol: swap?.from.symbol,
-                              },
-                            })}
-                          </Typography>
-                        </>
-                      )}
-                      {(hasSlippageError || hasSlippageWarning) &&
-                        !hasBridgeLimitError && (
+                  <FooterAlert>
+                    {hasBridgeLimitError && (
+                      <div>
+                        <Typography
+                          size="xsmall"
+                          variant="body"
+                          color="neutral900">
+                          {error.fromAmountRangeError}
+                        </Typography>
+                        <Divider direction="vertical" size={2} />
+                        <Typography
+                          size="xsmall"
+                          variant="body"
+                          color="neutral900">
+                          {i18n.t({
+                            id: 'Yours: {amount} {symbol}',
+                            values: {
+                              amount: numberToString(
+                                swap.fromAmount,
+                                TOKEN_AMOUNT_MIN_DECIMALS,
+                                TOKEN_AMOUNT_MAX_DECIMALS
+                              ),
+                              symbol: swap?.from.symbol,
+                            },
+                          })}
+                        </Typography>
+                      </div>
+                    )}
+                    {(hasSlippageError || hasSlippageWarning) &&
+                      !hasBridgeLimitError && (
+                        <div>
                           <Typography
                             size="xsmall"
                             variant="body"
                             color="neutral900">
                             {i18n.t({
-                              id: 'Minimum required slippage is {minRequiredSlippage}',
+                              id: 'Minimum required slippage: {minRequiredSlippage}',
                               values: {
                                 ...(error?.type ===
                                   QuoteErrorType.INSUFFICIENT_SLIPPAGE && {
@@ -287,9 +282,21 @@ export function Quote(props: QuoteProps) {
                               },
                             })}
                           </Typography>
-                        )}
-                    </FooterAlert>
-                  ) : null
+                          <Divider direction="vertical" size={2} />
+                          <Typography
+                            size="xsmall"
+                            variant="body"
+                            color="neutral900">
+                            {i18n.t({
+                              id: 'Yours: {userSlippage}',
+                              values: {
+                                userSlippage,
+                              },
+                            })}
+                          </Typography>
+                        </div>
+                      )}
+                  </FooterAlert>
                 }
               />
             </FooterStepAlarm>
@@ -381,8 +388,18 @@ export function Quote(props: QuoteProps) {
               }}
               size="xxsmall"
               type="secondary"
-              variant="default">
-              <Typography color="secondary" variant="label" size="medium">
+              variant="default"
+              css={{
+                paddingLeft: '$10',
+                paddingRight: '$10',
+                paddingTop: '$5',
+                paddingBottom: '$5',
+              }}>
+              <Typography
+                color="secondary"
+                variant="body"
+                size="xsmall"
+                className="allRoutesLabel">
                 {i18n.t('See All Routes')}
               </Typography>
             </AllRoutesButton>

package/src/containers/Wallets/Wallets.tsx

@@ -39,7 +39,7 @@ function Main(props: PropsWithChildren<PropTypes>) {
   const walletOptions: ProvidersOptions = {
     walletConnectProjectId: props.config?.walletConnectProjectId,
   };
-  const { providers } = useWalletProviders(props.config.wallets, walletOptions);
+  const { providers } = useWalletProviders(config.wallets, walletOptions);
   const { connectWallet, disconnectWallet } = useWalletsStore();
   const onConnectWalletHandler = useRef<OnWalletConnectionChange>();
   const onDisconnectWalletHandler = useRef<OnWalletConnectionChange>();

package/src/hooks/useConfirmSwap/useConfirmSwap.ts

@@ -1,4 +1,4 @@
-import type { ConfirmSwap, Params } from './useConfirmSwap.types';
+import type { ConfirmSwap } from './useConfirmSwap.types';
 import type { PendingSwapSettings, SelectedQuote } from '../../types';
 import type { ConfirmRouteRequest } from 'rango-sdk';
 
@@ -39,7 +39,7 @@ export function useConfirmSwap(): ConfirmSwap {
 
   useEffect(() => cancelFetch, []);
 
-  const fetch: ConfirmSwap['fetch'] = async (params: Params) => {
+  const fetch: ConfirmSwap['fetch'] = async (params) => {
     const selectedWallets = params.selectedWallets;
     const customDestination =
       params?.customDestination ?? customDestinationFromStore;
@@ -67,7 +67,7 @@ export function useConfirmSwap(): ConfirmSwap {
     };
 
     try {
-      return await fetchQuote(requestBody).then((response) => {
+      return await fetchQuote(requestBody, true).then((response) => {
         const { result } = response;
 
         throwErrorIfResponseIsNotValid({

package/src/hooks/useFetch.ts

@@ -9,11 +9,13 @@ type UseFetchOptions<TRequest, TResponse> = {
   ) => Promise<TResponse>;
 };
 export type UseFetchResult<TRequest, TResponse> = {
-  fetch: (requestBody: TRequest) => Promise<TResponse>;
+  fetch: (requestBody: TRequest, retryOnFail?: boolean) => Promise<TResponse>;
   cancelFetch: () => void;
   loading: boolean;
 };
 
+const RETRY_DELAY = 2_000;
+
 export function useFetch<TRequest, TResponse>({
   request,
 }: UseFetchOptions<TRequest, TResponse>): UseFetchResult<TRequest, TResponse> {
@@ -22,8 +24,14 @@ export function useFetch<TRequest, TResponse>({
 
   const cancelFetch = () => abortController.current?.abort();
 
+  const retryFetch = async (requestBody: TRequest) => {
+    await new Promise((resolve) => setTimeout(resolve, RETRY_DELAY));
+    return await fetch(requestBody, false);
+  };
+
   const fetch: UseFetchResult<TRequest, TResponse>['fetch'] = async (
-    requestBody
+    requestBody,
+    retryOnFail = false
   ) => {
     cancelFetch();
     abortController.current = new AbortController();
@@ -38,6 +46,9 @@ export function useFetch<TRequest, TResponse>({
       return res;
       // eslint-disable-next-line no-useless-catch
     } catch (error) {
+      if (retryOnFail) {
+        return await retryFetch(requestBody);
+      }
       throw error;
     } finally {
       setLoading(false);

package/src/hooks/usePrepareBlockchainList/usePrepareBlockchainList.test.ts

@@ -271,7 +271,7 @@ describe('usePrepareBlockchainList', () => {
     ]);
   });
 
-  it.only('Last item of the main list should be moved to front if it selected again.', () => {
+  it('Last item of the main list should be moved to front if it selected again.', () => {
     const listLimit = 10;
     const preferredBlockchains = ['AVAX_CCHAIN', 'BTC'];
     const expected = [

package/src/hooks/useSyncUrlAndStore/useSyncUrlAndStore.ts

@@ -38,6 +38,13 @@ export function useSyncUrlAndStore() {
   const liquiditySourcesParamsRef = useRef<string>();
 
   const getUrlSearchParams = () => {
+    const utmQueryParams: Record<string, string> = {};
+
+    for (const [key, value] of searchParams.entries()) {
+      if (key.startsWith('utm_')) {
+        utmQueryParams[key] = value;
+      }
+    }
     const fromAmount = searchParams.get(SearchParams.FROM_AMOUNT);
     const fromBlockchain = searchParams.get(SearchParams.FROM_BLOCKCHAIN);
     const fromToken = searchParams.get(SearchParams.FROM_TOKEN);
@@ -56,6 +63,7 @@ export function useSyncUrlAndStore() {
       autoConnect,
       clientUrl,
       liquiditySources,
+      utmQueryParams,
     };
   };
 
@@ -71,7 +79,7 @@ export function useSyncUrlAndStore() {
   };
 
   useEffect(() => {
-    const { autoConnect, clientUrl } = getUrlSearchParams();
+    const { autoConnect, clientUrl, utmQueryParams } = getUrlSearchParams();
     if (isInRouterContext && fetchMetaStatus === 'success') {
       updateUrlSearchParams({
         [SearchParams.FROM_BLOCKCHAIN]: fromBlockchain?.name,
@@ -84,6 +92,7 @@ export function useSyncUrlAndStore() {
         [SearchParams.LIQUIDITY_SOURCES]: campaignMode
           ? liquiditySourcesParamsRef.current
           : undefined,
+        ...utmQueryParams,
       });
     }
   }, [

package/src/hooks/useWalletList.ts

@@ -1,4 +1,3 @@
-import type { WidgetConfig } from '../types';
 import type { WalletInfo } from '@rango-dev/ui';
 import type { BlockchainMeta } from 'rango-sdk';
 
@@ -25,7 +24,6 @@ import {
 const ALL_SUPPORTED_WALLETS = Object.values(WalletTypes);
 
 interface Params {
-  config?: WidgetConfig;
   chain?: string;
   onBeforeConnect?: (walletType: string) => void;
   onConnect?: (walletType: string) => void;
@@ -37,7 +35,8 @@ interface Params {
  * you can use this list whenever you need to show the list of wallets and needed callbacks
  */
 export function useWalletList(params: Params) {
-  const { config, chain, onBeforeConnect, onConnect } = params;
+  const { chain, onBeforeConnect, onConnect } = params;
+  const { config } = useAppStore();
   const { state, disconnect, getWalletInfo, connect } = useWallets();
   const { connectedWallets } = useWalletsStore();
   const blockchains = useAppStore().blockchains();

package/src/hooks/useWalletProviders.ts

@@ -13,8 +13,10 @@ export function useWalletProviders(
 ) {
   const clearConnectedWallet = useWalletsStore.use.clearConnectedWallet();
   let generateProviders: ProviderInterface[] = matchAndGenerateProviders(
-    undefined,
-    options
+    providers,
+    {
+      walletConnectProjectId: options?.walletConnectProjectId,
+    }
   );
 
   useEffect(() => {

package/src/pages/Home.tsx

@@ -23,8 +23,7 @@ import { isVariantExpandable } from '../utils/configs';
 import { getSwapButtonState, isTokensIdentical } from '../utils/swap';
 
 const MainContainer = styled('div', {
-  display: 'grid',
-  gridTemplateColumns: 'auto auto',
+  display: 'flex',
   alignItems: 'flex-start',
   maxHeight: 700,
   '& .footer__alert': {

package/src/pages/WalletsPage.tsx

@@ -28,7 +28,7 @@ export const TIME_TO_CLOSE_MODAL = 3_000;
 export const TIME_TO_IGNORE_MODAL = 300;
 
 export function WalletsPage() {
-  const { config, fetchStatus: fetchMetaStatus } = useAppStore();
+  const { fetchStatus: fetchMetaStatus } = useAppStore();
   const [openModal, setOpenModal] = useState(false);
   const [selectedWalletType, setSelectedWalletType] = useState<WalletType>('');
   let modalTimerId: ReturnType<typeof setTimeout> | null = null;
@@ -36,7 +36,6 @@ export function WalletsPage() {
 
   const { list, handleClick, error, disconnectConnectingWallets } =
     useWalletList({
-      config,
       onBeforeConnect: (type) => {
         modalTimerId = setTimeout(() => {
           setOpenModal(true);

package/src/utils/meta.ts

@@ -21,7 +21,7 @@ export function getSwapperDisplayName(
   swapperId: string,
   swappers: SwapperMeta[]
 ) {
-  return swappers.find((swapper) => swapper.id === swapperId)?.swapperGroup;
+  return swappers.find((swapper) => swapper.id === swapperId)?.title;
 }
 
 export function findToken(t: Asset, tokens: Token[]) {

package/src/utils/providers.ts

@@ -21,6 +21,7 @@ export function matchAndGenerateProviders(
     walletconnect2: {
       WC_PROJECT_ID: options?.walletConnectProjectId || '',
     },
+    selectedProviders: providers,
   });
 
   if (providers) {