@rango-dev/widget-embedded 0.33.4-next.1 → 0.33.4-next.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.33.4-next.1",
+  "version": "0.33.4-next.3",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -25,23 +25,23 @@
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
     "@rango-dev/logging-core": "^0.6.0",
-    "@rango-dev/provider-all": "^0.37.4-next.1",
+    "@rango-dev/provider-all": "^0.37.4-next.2",
     "@rango-dev/queue-manager-core": "^0.27.0",
-    "@rango-dev/queue-manager-rango-preset": "^0.37.1-next.3",
+    "@rango-dev/queue-manager-rango-preset": "^0.37.1-next.4",
     "@rango-dev/queue-manager-react": "^0.27.0",
-    "@rango-dev/signer-solana": "^0.32.1-next.1",
-    "@rango-dev/ui": "^0.39.1-next.6",
-    "@rango-dev/wallets-core": "^0.38.1-next.1",
-    "@rango-dev/wallets-react": "^0.23.1-next.3",
-    "@rango-dev/wallets-shared": "^0.37.1-next.3",
+    "@rango-dev/signer-solana": "^0.32.1-next.2",
+    "@rango-dev/ui": "^0.39.1-next.8",
+    "@rango-dev/wallets-core": "^0.38.1-next.2",
+    "@rango-dev/wallets-react": "^0.23.1-next.4",
+    "@rango-dev/wallets-shared": "^0.37.1-next.4",
     "bignumber.js": "^9.1.1",
     "copy-to-clipboard": "^3.3.3",
     "dayjs": "^1.11.7",
     "ethers": "^6.13.2",
     "immer": "^9.0.19",
     "mitt": "^3.0.0",
-    "rango-sdk": "^0.1.49",
-    "rango-types": "^0.1.69",
+    "rango-sdk": "^0.1.57",
+    "rango-types": "^0.1.74",
     "react-i18next": "^12.2.0",
     "react-router-dom": "^6.8.0",
     "values.js": "2.1.1",

package/src/components/BlockchainList/BlockchainList.tsx

@@ -48,6 +48,7 @@ export function BlockchainList(props: PropTypes) {
         {blockchains.map((item) => (
           <ListItemButton
             key={`${item.name}-${item.chainId}`}
+            className={`widget-blockchain-list-item-btn`}
             hasDivider
             onClick={() => onChange(item)}
             start={<Image src={item.logo} size={30} />}
@@ -56,7 +57,7 @@ export function BlockchainList(props: PropTypes) {
                 {item.displayName}
               </Typography>
             }
-            id={item.chainId as string}
+            id={item.name}
           />
         ))}
       </List>

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -331,6 +331,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
         footer: (
           <ConfirmButton>
             <Button
+              id="widget-confirm-wallet-modal-confirm-btn"
               loading={loading}
               disabled={isConfirmSwapDisabled(
                 loading,
@@ -355,6 +356,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
         header: (
           <ShowMoreHeader>
             <NavigateBack
+              id="widget-confirm-wallet-modal-navigate-back-icon-btn"
               variant="ghost"
               onClick={setShowMoreWalletFor.bind(null, '')}>
               <ChevronLeftIcon size={16} />
@@ -383,6 +385,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
           type="error"
           description={<BalanceErrors messages={balanceWarnings ?? []} />}>
           <Button
+            id="widget-confirm-wallet-modal-proceed-anyway-btn"
             variant="outlined"
             size="large"
             type="primary"

package/src/components/CustomDestination/CustomDestination.tsx

@@ -63,13 +63,19 @@ export function CustomDestination(props: PropTypes) {
   const renderSuffix = () => {
     if (customDestination) {
       return (
-        <IconButton onClick={handleClear} variant="ghost">
+        <IconButton
+          id="widget-custom-destination-close-icon-btn"
+          onClick={handleClear}
+          variant="ghost">
           <CloseIcon size={12} color="gray" />
         </IconButton>
       );
     } else if (!isFirefox) {
       return (
-        <IconButton onClick={handlePaste} variant="ghost">
+        <IconButton
+          id="widget-custom-destination-paste-icon-btn"
+          onClick={handlePaste}
+          variant="ghost">
           <PasteIcon size={16} />
         </IconButton>
       );

package/src/components/CustomTokenModal/CustomTokenModal.tsx

@@ -80,6 +80,7 @@ export function CustomTokenModal(props: PropTypes) {
       <Divider size={10} />
 
       <Button
+        id="widget-custom-token-modal-import-btn"
         variant="contained"
         size="large"
         type="primary"

package/src/components/FilterSelector/FilterSelector.tsx

@@ -28,6 +28,7 @@ export function FilterSelector(props: FilterSelectorPropTypes) {
           />
         }>
         <FilterButton
+          id="widget-filter-selector-filter-icon-btn"
           variant="default"
           isSelect={!!filterBy}
           onClick={() => onOpenChange(!props.open)}>

package/src/components/FilterSelector/FilterSelectorContent.tsx

@@ -25,7 +25,11 @@ export function FilterSelectorContent(props: PropTypes) {
         <Typography size="small" variant="body">
           {i18n.t('Status')}
         </Typography>
-        <Button variant="ghost" size="xxsmall" onClick={() => onClickItem('')}>
+        <Button
+          id="widget-filter-selector-reset-btn"
+          variant="ghost"
+          size="xxsmall"
+          onClick={() => onClickItem('')}>
           {i18n.t('Reset')}
         </Button>
       </div>

package/src/components/HeaderButtons/BackButton.tsx

@@ -7,7 +7,11 @@ import { HeaderButton } from './HeaderButtons.styles';
 
 function BackButton(props: PropTypes) {
   return (
-    <HeaderButton variant="ghost" size="small" onClick={props.onClick}>
+    <HeaderButton
+      id="widget-header-back-icon-btn"
+      variant="ghost"
+      size="small"
+      onClick={props.onClick}>
       <ChevronLeftIcon color="black" size={16} />
     </HeaderButton>
   );

package/src/components/HeaderButtons/CancelButton.tsx

@@ -9,7 +9,11 @@ import { SuffixContainer } from './HeaderButtons.styles';
 function CancelButton(props: PropTypes) {
   return (
     <SuffixContainer>
-      <Button variant="ghost" onClick={props.onClick} size="xsmall">
+      <Button
+        id="widget-header-cancel-btn"
+        variant="ghost"
+        onClick={props.onClick}
+        size="xsmall">
         <Typography variant="label" size="medium" color="error500">
           {i18n.t('Cancel')}
         </Typography>

package/src/components/HeaderButtons/HeaderButtons.tsx

@@ -61,7 +61,10 @@ export function HeaderButtons(props: HeaderButtonsPropTypes) {
               container={getContainer()}
               side="top"
               content={i18n.t('Notifications')}>
-              <HeaderButton size="small" variant="ghost">
+              <HeaderButton
+                id="widget-header-notification-icon-btn"
+                size="small"
+                variant="ghost">
                 <NotificationsIcon size={18} color="black" />
                 <NotificationsBadge />
               </HeaderButton>
@@ -74,7 +77,11 @@ export function HeaderButtons(props: HeaderButtonsPropTypes) {
           container={getContainer()}
           side="top"
           content={i18n.t('Settings')}>
-          <HeaderButton size="small" variant="ghost" onClick={onClickSettings}>
+          <HeaderButton
+            id="widget-header-setting-icon-btn"
+            size="small"
+            variant="ghost"
+            onClick={onClickSettings}>
             <SettingsIcon size={18} color="black" />
           </HeaderButton>
         </Tooltip>
@@ -84,7 +91,11 @@ export function HeaderButtons(props: HeaderButtonsPropTypes) {
           container={getContainer()}
           side="top"
           content={i18n.t('History')}>
-          <HeaderButton size="small" variant="ghost" onClick={onClickHistory}>
+          <HeaderButton
+            id="widget-header-history-icon-btn"
+            size="small"
+            variant="ghost"
+            onClick={onClickHistory}>
             <TransactionIcon size={18} color="black" />
             <InProgressTransactionBadge />
           </HeaderButton>

package/src/components/HeaderButtons/RefreshButton.tsx

@@ -61,6 +61,7 @@ function RefreshButton({ onClick }: { onClick: (() => void) | undefined }) {
 
   return (
     <HeaderButton
+      id="widget-header-refresh-icon-btn"
       variant="ghost"
       size="small"
       style={{ paddingTop: 0, paddingBottom: 0 }}

package/src/components/HeaderButtons/WalletButton.tsx

@@ -32,7 +32,11 @@ function WalletButton(props: PropTypes) {
 
   return (
     <Tooltip container={props.container} side="bottom" content={content}>
-      <HeaderButton variant="ghost" size="small" onClick={props.onClick}>
+      <HeaderButton
+        id="widget-header-wallet-icon-btn"
+        variant="ghost"
+        size="small"
+        onClick={props.onClick}>
         {props.isConnected && <ConnectedIcon />}
         <WalletIcon size={18} color="black" />
       </HeaderButton>

package/src/components/NoResult/NoResult.tsx

@@ -68,6 +68,7 @@ export function NoResult(props: PropTypes) {
               info.alert.action && (
                 <Button
                   size="xsmall"
+                  id="widget-no-result-alert-btn"
                   type={info.alert.type}
                   prefix={
                     <PrefixIcon>

package/src/components/Quote/QuoteCostDetails.tsx

@@ -91,7 +91,10 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
               {i18n.t('Gas & Fee Explanation')}
             </Typography>
 
-            <IconButton onClick={() => setOpen(false)} variant="ghost">
+            <IconButton
+              id="widget-quote-cost-details-modal-close-icon-btn"
+              onClick={() => setOpen(false)}
+              variant="ghost">
               <CloseIcon color="gray" size={14} />
             </IconButton>
           </ModalHeader>

package/src/components/QuoteWarningsAndErrors/HighValueLossWarningModal.tsx

@@ -78,6 +78,7 @@ export function HighValueLossWarningModal(props: Props) {
     <WatermarkedModal
       footer={
         <Button
+          id="widget-high-value-loss-warning-modal-confirm-btn"
           type="primary"
           size="large"
           prefix={<WarningIcon />}

package/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.tsx

@@ -71,6 +71,7 @@ export function QuoteWarningsAndErrors(props: PropTypes) {
             {...(alertInfo.action === 'change-settings' && {
               action: (
                 <Button
+                  id="widget-quote-warning-error-change-settings-btn"
                   size="xxsmall"
                   type={alertInfo.alertType}
                   onClick={onChangeSettings}>

package/src/components/QuoteWarningsAndErrors/SlippageWariningModal.tsx

@@ -35,6 +35,7 @@ export function SlippageWarningModal(props: PropsTypes) {
       prefix={
         <Button
           size="small"
+          id="widget-slippage-warning-modal-change-settings-btn"
           variant="ghost"
           onClick={() => navigate('../' + navigationRoutes.settings)}>
           <Typography variant="label" size="medium" color="$neutral900">
@@ -67,6 +68,7 @@ export function SlippageWarningModal(props: PropsTypes) {
         <Divider size={18} />
         <Divider size={32} />
         <Button
+          id="widget-slippage-warning-modal-confirm-anyway-btn"
           size="large"
           type="primary"
           variant="contained"

package/src/components/QuoteWarningsAndErrors/UnknownPriceWarningModal.tsx

@@ -21,6 +21,7 @@ export function UnknownPriceWarningModal(props: Props) {
     <WatermarkedModal
       footer={
         <Button
+          id="widget-unknown-price-warning-modal-confirm-btn"
           type="primary"
           size="large"
           prefix={<WarningIcon />}

package/src/components/Quotes/Quotes.tsx

@@ -49,6 +49,7 @@ export function Quotes(props: PropTypes) {
     }
     const mergedQuote: SelectedQuote = {
       requestAmount: quotes.requestAmount, // Assuming quotes is an array
+      validationStatus: null,
       ...quote,
     };
 
@@ -112,7 +113,11 @@ export function Quotes(props: PropTypes) {
                       container={container}
                       selected={selectedQuote?.requestId === quote.requestId}
                       tagHidden={false}
-                      quote={{ ...quote, requestAmount: quotes.requestAmount }}
+                      quote={{
+                        ...quote,
+                        requestAmount: quotes.requestAmount,
+                        validationStatus: null,
+                      }}
                       loading={loading}
                       error={quoteError?.options || null}
                       warning={quoteWarning}

package/src/components/SwapDetails/SwapDetails.tsx

@@ -272,6 +272,7 @@ export function SwapDetails(props: SwapDetailsProps) {
         suffix: swap.status !== 'running' && (
           <SuffixContainer>
             <Button
+              id="widget-swap-details-delete-btn"
               variant="ghost"
               type="error"
               size="xsmall"
@@ -288,6 +289,7 @@ export function SwapDetails(props: SwapDetailsProps) {
         !showCompletedModal && (
           <Button
             fullWidth
+            id="widget-swap-details-try-again-btn"
             variant="contained"
             type="primary"
             size="large"
@@ -325,6 +327,7 @@ export function SwapDetails(props: SwapDetailsProps) {
                 alignOffset={-16}
                 align="end">
                 <IconButton
+                  id="widget-swap-details-done-copy-icon-btn"
                   variant="ghost"
                   onClick={handleCopy.bind(null, requestId || '')}>
                   {isCopied ? (

package/src/components/SwapDetailsAlerts/SwapDetailsAlerts.Warning.tsx

@@ -14,6 +14,7 @@ export function WarningAlert(props: WaningAlertsProps) {
         title={message.shortMessage}
         action={
           <Button
+            id="widget-swap-details-warning-alert-change-network-btn"
             size="xxsmall"
             type="warning"
             onClick={() => {
@@ -37,6 +38,7 @@ export function WarningAlert(props: WaningAlertsProps) {
         title={message.shortMessage}
         action={
           <Button
+            id="widget-swap-details-warning-alert-connect-wallet-btn"
             size="xxsmall"
             type="warning"
             onClick={() => {

package/src/components/SwapDetailsAlerts/SwapDetailsAlerts.tsx

@@ -53,6 +53,7 @@ export function SwapDetailsAlerts(props: SwapAlertsProps) {
               action={
                 explorerUrl.url && (
                   <IconButton
+                    id="widget-swap-details-tx-link-icon-btn"
                     variant="ghost"
                     size="xsmall"
                     onClick={() => window.open(explorerUrl.url, '_blank')}>

package/src/components/SwapDetailsModal/SwapDetailsCompleteModal.tsx

@@ -75,6 +75,7 @@ export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
       <Divider size={32} />
       {status === 'success' && (
         <Button
+          id="widget-swap-details-modal-done-btn"
           variant="contained"
           type="primary"
           size="large"
@@ -92,6 +93,7 @@ export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
         <>
           <Button
             variant="contained"
+            id="widget-swap-detail-modal-diagnosis-btn"
             type="primary"
             size="large"
             onClick={() => window.open(diagnosisUrl, '_blank')}>
@@ -100,7 +102,12 @@ export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
           <Divider size={12} />
         </>
       )}
-      <Button variant="outlined" type="primary" size="large" onClick={onClose}>
+      <Button
+        id="widget-swap-details-modal-see-details-btn"
+        variant="outlined"
+        type="primary"
+        size="large"
+        onClick={onClose}>
         <Typography variant="title" size="medium" color="primary">
           {i18n.t('See Details')}
         </Typography>

package/src/components/SwapDetailsModal/SwapDetailsModal.Cancel.tsx

@@ -16,13 +16,19 @@ export const CancelContent = ({ onCancel, onClose }: CancelContentProps) => {
       <Divider size={32} />
       <Button
         variant="contained"
+        id="widget-swap-details-modal-cancel-swap-yes-btn"
         type="primary"
         size="large"
         onClick={onCancel}>
         {i18n.t('Yes, Cancel it')}
       </Button>
       <Divider size={12} />
-      <Button variant="outlined" type="primary" size="large" onClick={onClose}>
+      <Button
+        id="widget-swap-details-modal-cancel-swap-no-btn"
+        variant="outlined"
+        type="primary"
+        size="large"
+        onClick={onClose}>
         {i18n.t('No, Continue')}
       </Button>
     </>

package/src/components/SwapDetailsModal/SwapDetailsModal.Delete.tsx

@@ -15,6 +15,7 @@ export const DeleteContent = ({ onDelete, onClose }: DeleteContentProps) => {
       />
       <Divider size={32} />
       <Button
+        id="widget-swap-details-modal-delete-swap-yes-btn"
         variant="contained"
         type="primary"
         size="large"
@@ -22,7 +23,12 @@ export const DeleteContent = ({ onDelete, onClose }: DeleteContentProps) => {
         {i18n.t('Yes, Delete it')}
       </Button>
       <Divider size={12} />
-      <Button variant="outlined" type="primary" size="large" onClick={onClose}>
+      <Button
+        id="widget-swap-details-modal-delete-swap-no-btn"
+        variant="outlined"
+        type="primary"
+        size="large"
+        onClick={onClose}>
         <Typography variant="title" size="medium" color="primary">
           {i18n.t('No, Cancel')}
         </Typography>

package/src/components/TokenList/TokenList.tsx

@@ -202,6 +202,7 @@ export function TokenList(props: PropTypes) {
                 tab-index={index}
                 key={`${token.symbol}${token.address}`}
                 id={`${token.symbol}${token.address}`}
+                className={`widget-token-list-item-btn`}
                 hasDivider
                 onClick={() => onChange && onChange(tokens[index])}
                 start={

package/src/components/WalletStatefulConnect/DerivationPath.tsx

@@ -143,6 +143,7 @@ export function DerivationPath(props: PropTypes) {
       </InputsContainer>
 
       <Button
+        id="widget-derivation-path-confirm-btn"
         type="primary"
         onClick={handleConfirm}
         disabled={

package/src/components/WalletStatefulConnect/ExperimentalChain.tsx

@@ -24,6 +24,7 @@ export function ExperimentalChain(props: PropTypes) {
       <Divider size={18} />
       <Divider size={32} />
       <Button
+        id="widget-experimental-chain-confirm-btn"
         onClick={onConfirm}
         variant="outlined"
         type="primary"

package/src/components/WalletStatefulConnect/Namespaces.tsx

@@ -109,6 +109,7 @@ export function Namespaces(props: PropTypes) {
         )}
       </NamespaceList>
       <Button
+        id="widget-name-space-confirm-btn"
         type="primary"
         disabled={!selectedNamespaces.length}
         onClick={() => props.onConfirm(selectedNamespaces)}>

package/src/components/common/ActivateTabAlert/ActivateTabAlert.tsx

@@ -9,6 +9,7 @@ export function ActivateTabAlert(props: PropTypes) {
     <Alert
       action={
         <Button
+          id="widget-active-tab-btn"
           onClick={props.onActivateTab}
           variant="contained"
           size="xxsmall"

package/src/components/common/ActivateTabModal/ActivateTabModal.tsx

@@ -24,6 +24,7 @@ export function ActivateTabModal(props: PropTypes) {
         )}>
         <Divider size={20} />
         <Button
+          id="widget-modal-confirm-activate-tab-btn"
           variant="contained"
           size="large"
           type="primary"

package/src/containers/Settings/Lists.tsx

@@ -150,7 +150,7 @@ export function SettingsLists() {
   };
 
   const bridgeItem = {
-    id: 'bridge-item',
+    id: 'widget-setting-bridge-item-btn',
     title: (
       <Typography variant="title" size="xmedium">
         {i18n.t('Bridges')}
@@ -168,7 +168,7 @@ export function SettingsLists() {
   };
 
   const exchangeItem = {
-    id: 'exchange-item',
+    id: 'widget-setting-exchange-item-btn',
     title: (
       <Typography variant="title" size="xmedium">
         {i18n.t('Exchanges')}
@@ -189,7 +189,7 @@ export function SettingsLists() {
   };
 
   const customTokensItem = {
-    id: 'custom-tokens-item',
+    id: 'widget-setting-custom-tokens-item-btn',
     title: (
       <Typography variant="title" size="xmedium">
         {i18n.t('Custom Tokens')}
@@ -208,7 +208,7 @@ export function SettingsLists() {
     onClick: () => navigate(navigationRoutes.customTokens),
   };
   const languageItem = {
-    id: 'language-item',
+    id: 'widget-setting-language-item-btn',
     title: (
       <Typography variant="title" size="xmedium">
         {i18n.t('Language')}
@@ -228,7 +228,7 @@ export function SettingsLists() {
   };
 
   const infiniteApprovalItem = {
-    id: 'infinite-approval-item',
+    id: 'widget-setting-infinite-approval-item-btn',
     title: (
       <>
         <Typography variant="title" size="xmedium">
@@ -259,7 +259,7 @@ export function SettingsLists() {
   };
 
   const themeItem = {
-    id: 'theme-item',
+    id: 'widget-setting-theme-item-btn',
     type: <ListItem />,
     title: (
       <Typography variant="title" size="xmedium">

package/src/hooks/useConfirmSwap/useConfirmSwap.ts

@@ -71,6 +71,10 @@ export function useConfirmSwap(): ConfirmSwap {
       return await fetchQuote(requestBody, true).then((response) => {
         const { result } = response;
 
+        if (!result) {
+          throw new Error('Error fetching updated route');
+        }
+
         throwErrorIfResponseIsNotValid({
           diagnosisMessages: result.diagnosisMessages,
           requestId: result.requestId,

package/src/hooks/useFetchConfirmQuote.ts

@@ -14,7 +14,7 @@ export function useFetchConfirmQuote(): UseFetchResult<
     ConfirmRouteResponse
   >({
     request: async (requestBody, options) =>
-      await httpService().confirmRouteRequest(requestBody, options),
+      await httpService().confirmRoute(requestBody, options),
   });
 
   return { fetch, loading, cancelFetch };

package/src/hooks/useFetchCustomToken.ts

@@ -3,8 +3,8 @@ import type { Token } from 'rango-sdk';
 import { i18n } from '@lingui/core';
 import { useState } from 'react';
 
+import { httpService } from '../services/httpService';
 import { useAppStore } from '../store/AppStore';
-import { getConfig } from '../utils/configs';
 
 type ErrorType = {
   title: string;
@@ -18,7 +18,7 @@ interface UseFetchCustomToken {
   }: {
     blockchain: string;
     tokenAddress: string;
-  }) => Promise<Token>;
+  }) => Promise<Token | undefined>;
   loading: boolean;
   error?: ErrorType;
 }
@@ -77,27 +77,23 @@ export function useFetchCustomToken(): UseFetchCustomToken {
         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 response = await httpService().getCustomToken({
+        blockchain,
+        address: tokenAddress,
+      });
+
+      if (!response || !response.token || response.error) {
         const errorMessage = produceErrorMessage('not-found', blockchain);
         setError(errorMessage);
         return undefined;
       }
 
       // Check if token is already in the system
+      const token = response.token;
       const isTokenFound = findToken({
-        blockchain: response.blockchain,
-        address: response.address,
-        symbol: response.symbol,
+        blockchain: token.blockchain,
+        address: token.address,
+        symbol: token.symbol,
       });
       if (isTokenFound) {
         const errorMessage = produceErrorMessage('token-exist');
@@ -105,7 +101,7 @@ export function useFetchCustomToken(): UseFetchCustomToken {
         return undefined;
       }
 
-      return response;
+      return token;
     } catch (error: any) {
       setError(undefined);
       throw new Error(error.message);