@rango-dev/widget-embedded 0.43.1-next.2 → 0.43.1-next.4

package/src/components/SwapDetailsAlerts/SwapDetailsAlerts.tsx

@@ -40,6 +40,7 @@ export function SwapDetailsAlerts(props: SwapAlertsProps) {
         return (
           <Fragment key={key}>
             <Alert
+              id="widget-swap-details-tx-alert"
               type={
                 lastUrl
                   ? (loading && 'loading') || (error && 'error') || 'success'
@@ -65,7 +66,13 @@ export function SwapDetailsAlerts(props: SwapAlertsProps) {
           </Fragment>
         );
       })}
-      {waitingProgress && <Alert type="loading" title={message.shortMessage} />}
+      {waitingProgress && (
+        <Alert
+          id="widget-swap-details-loading-alert"
+          type="loading"
+          title={message.shortMessage}
+        />
+      )}
       {step.status !== 'failed' && hasWarning && (
         <WarningAlert
           switchNetwork={switchNetwork}

package/src/components/SwapDetailsModal/SwapDetailsCompleteModal.tsx

@@ -44,6 +44,7 @@ export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
     <WatermarkedModal
       open={open}
       onClose={onClose}
+      id="widget-swap-details-complete-modal"
       container={
         document.getElementById(WIDGET_UI_ID.SWAP_BOX_ID) || document.body
       }>
@@ -52,6 +53,7 @@ export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
           <TokenAmount
             direction="vertical"
             tooltipContainer={getContainer()}
+            id="widget-swap-details-complete-modal-success-token-amount-container"
             type="output"
             centerAlign={true}
             price={{

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

@@ -73,6 +73,7 @@ export const WalletStateContent = (props: WalletStateContentProps) => {
         </WalletContainer>
       )}
       <StatefulConnectModal
+        id="widget-swap-details-modal"
         wallet={selectedWalletToConnect}
         onClose={() => {
           setSelectedWalletToConnect(undefined);

package/src/components/SwapDetailsModal/SwapDetailsModal.tsx

@@ -29,6 +29,7 @@ export function SwapDetailsModal(props: ModalPropTypes) {
 
   return (
     <WatermarkedModal
+      id="widget-swap-details-modal"
       open={!!state}
       onClose={onClose}
       container={

package/src/components/SwitchFromAndTo/SwitchFromAndTo.tsx

@@ -15,6 +15,7 @@ export function SwitchFromAndToButton() {
   return (
     <SwitchButtonContainer>
       <StyledButton
+        id="widget-switch-from-and-to-btn"
         onClick={(event) => {
           const button = event.currentTarget;
 

package/src/components/WalletStatefulConnect/DerivationPath.tsx

@@ -100,6 +100,7 @@ export function DerivationPath(props: PropTypes) {
           {i18n.t('Choose Derivation Path Template')}
         </InputLabel>
         <Select
+          id="widget-derivation-path-template-select"
           value={selectedDerivationPathId || ''}
           options={derivationPaths.map((derivationPath) => ({
             value: derivationPath.id,
@@ -116,6 +117,7 @@ export function DerivationPath(props: PropTypes) {
             : i18n.t('Enter Index')}
         </InputLabel>
         <TextField
+          id="widget-derivation-path-template-input"
           type={isCustomOptionSelected ? 'text' : 'number'}
           variant="contained"
           value={derivationPathIndex}

package/src/components/WalletStatefulConnect/Detached.tsx

@@ -25,7 +25,7 @@ export function Detached(props: PropTypes) {
         icon={<Image src={targetWallet.image} size={45} />}
       />
       <Divider size={20} />
-      <NamespaceList>
+      <NamespaceList id="widget-detached-namespace-list" as={'ul'}>
         {targetWallet.needsNamespace?.data.map((namespace, index, array) => (
           <React.Fragment key={namespace.id}>
             {namespace.unsupported ? (

package/src/components/WalletStatefulConnect/ExperimentalChain.tsx

@@ -5,13 +5,15 @@ import React from 'react';
 interface PropTypes {
   displayName?: string;
   onConfirm: () => void;
+  id: string;
 }
 
 export function ExperimentalChain(props: PropTypes) {
-  const { displayName, onConfirm } = props;
+  const { displayName, onConfirm, id } = props;
 
   return (
     <MessageBox
+      id={id}
       title={i18n.t({
         id: 'Add {blockchainDisplayName} Chain',
         values: { blockchainDisplayName: displayName },

package/src/components/WalletStatefulConnect/NamespaceDetachedItem.tsx

@@ -97,7 +97,7 @@ export const NamespaceDetachedItem = function NamespaceDetachedItem(
           size={40}
         />
         <NamespaceItemInnerContent>
-          <NamespaceDetachedItemInfo>
+          <NamespaceDetachedItemInfo className="widget-namespace-detached-item-info-div">
             <Typography variant="label" size="large">
               {namespace.label}
             </Typography>
@@ -124,6 +124,7 @@ export const NamespaceDetachedItem = function NamespaceDetachedItem(
           )}
           {!namespaceState.connected && error && (
             <NamespaceItemErrorDropdownToggle
+              className="widget-namespace-detached-item-error-toggle-btn"
               onClick={() =>
                 setErrorIsExpanded((errorIsExpanded) => !errorIsExpanded)
               }>
@@ -167,7 +168,7 @@ export const NamespaceDetachedItem = function NamespaceDetachedItem(
       {!namespaceState.connected && !!error && errorIsExpanded && (
         <>
           <Divider size={4} />
-          <NamespaceItemError>
+          <NamespaceItemError id="widget-namespace-item-error-div">
             <Typography variant="body" size="small" color="neutral700">
               {(error.cause as Error)?.message || error.message}
             </Typography>

package/src/components/WalletStatefulConnect/NamespaceListItem.tsx

@@ -21,7 +21,10 @@ export function NamespaceListItem(props: NamespaceItemPropTypes) {
   const supportedChains = namespace.getSupportedChains(blockchains);
   const showSupportedChains = supportedChains.length > 1;
   return (
-    <NamespaceItemContainer onClick={onClick} clickable>
+    <NamespaceItemContainer
+      onClick={onClick}
+      clickable
+      className="widget-namespace-list-item">
       <NamespaceItemContent>
         <NamespaceLogo
           src={getBlockchainLogo(blockchains, namespace.id)}

package/src/components/WalletStatefulConnect/Namespaces.tsx

@@ -117,6 +117,7 @@ export function Namespaces(props: PropTypes) {
         <>
           <Divider size={20} />
           <Alert
+            id="widget-wallet-stateful-connect-alert"
             variant="alarm"
             type="info"
             title={i18n.t(

package/src/components/WalletStatefulConnect/SupportedChainsList.tsx

@@ -15,7 +15,7 @@ const SUPPORTED_CHAINS_MAX_DISPLAYED_NUMBER = 3;
 export function SupportedChainsList(props: PropTypes) {
   const { chains } = props;
   return (
-    <SupportedChainsContainer>
+    <SupportedChainsContainer id="widget-supported-chains-container">
       {chains
         .slice(0, SUPPORTED_CHAINS_MAX_DISPLAYED_NUMBER)
         .map((chain, index) => (

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

@@ -15,6 +15,7 @@ export function ActivateTabModal(props: PropTypes) {
       open={open}
       dismissible
       onClose={onClose}
+      id="widget-active-tab-modal"
       container={getContainer()}>
       <MessageBox
         title={i18n.t('Activate current tab')}

package/src/containers/ExpandedQuotes/ExpandedQuotes.tsx

@@ -47,7 +47,7 @@ export function ExpandedQuotes(props: PropTypes) {
   return (
     <Container
       expandMode={config?.variant === 'full-expanded' ? 'full' : 'default'}
-      className={`${containerClass} ${LayoutContainer()}`}
+      className={`${containerClass} ${LayoutContainer()} widget-expanded-quotes-container`}
       id={WIDGET_UI_ID.EXPANDED_BOX_ID}>
       <Header
         title={i18n.t('Routes')}

package/src/containers/Inputs/Inputs.tsx

@@ -78,6 +78,7 @@ export function Inputs(props: PropTypes) {
       <FromContainer>
         <SwapInput
           label={i18n.t('From')}
+          id="widget-swap-from"
           mode="From"
           onInputChange={setInputAmount}
           onInputBlur={sanitizeInputAmount}
@@ -133,6 +134,7 @@ export function Inputs(props: PropTypes) {
         sharpBottomStyle={!isExpandable && (!!selectedQuote || fetchingQuote)}
         label={i18n.t('To')}
         mode="To"
+        id="widget-swap-to-input"
         fetchingQuote={fetchingQuote}
         chain={{
           displayName: toBlockchain?.displayName || '',

package/src/containers/QuoteInfo/QuoteInfo.tsx

@@ -23,6 +23,7 @@ export function QuoteInfo(props: PropTypes) {
     onClick,
     showModalFee,
     selected,
+    id,
     onClickAllRoutes,
     fullExpandedMode = false,
     container,
@@ -50,7 +51,7 @@ export function QuoteInfo(props: PropTypes) {
   }
 
   return showQuote ? (
-    <QuoteContainer onClick={() => onClick?.(quote)}>
+    <QuoteContainer onClick={() => onClick?.(quote)} id={id}>
       <Quote
         quote={quote}
         error={error}

package/src/containers/QuoteInfo/QuoteInfo.types.ts

@@ -9,6 +9,7 @@ export type PropTypes = {
   tagHidden?: boolean;
   error: QuoteError | null;
   warning: QuoteWarning | null;
+  id: string;
   autoScrollOnExpanding?: boolean;
   expanded?: boolean;
   onClickAllRoutes?: () => void;

package/src/containers/Settings/Lists.tsx

@@ -73,6 +73,7 @@ const themesList = [
 const getThemeIcon = (theme: ThemeMode) => {
   const iconProps: SvgIconProps = { color: 'gray', size: 16 };
 
+  // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
   switch (theme) {
     case 'auto':
       return <AutoThemeIcon {...iconProps} />;
@@ -131,6 +132,7 @@ export function SettingsLists() {
   ).length;
 
   const handleSwapperEndItem = (totalSelected: number, total: number) => {
+    // eslint-disable-next-line @typescript-eslint/switch-exhaustiveness-check
     switch (fetchStatus) {
       case 'loading':
         return <Skeleton variant="text" size="medium" width={50} />;
@@ -230,7 +232,7 @@ export function SettingsLists() {
   const infiniteApprovalItem = {
     id: 'widget-setting-infinite-approval-item-btn',
     title: (
-      <>
+      <React.Fragment>
         <Typography variant="title" size="xmedium">
           {i18n.t('Infinite approval')}
         </Typography>
@@ -251,7 +253,7 @@ export function SettingsLists() {
           }>
           <InfoIcon color="gray" />
         </Tooltip>
-      </>
+      </React.Fragment>
     ),
     start: <InfinityIcon color="gray" size={16} />,
     end: <Switch checked={infiniteApprove} />,
@@ -272,6 +274,7 @@ export function SettingsLists() {
           container={getContainer()}
           items={themesList}
           value={theme}
+          className="widget-setting-theme-item-tabs-container"
           onChange={(item) => setTheme(item.id as ThemeMode)}
           type="primary"
           borderRadius="small"
@@ -298,7 +301,14 @@ export function SettingsLists() {
 
   return (
     <List
-      type={<ListItemButton hasDivider id="_" onClick={() => console.log()} />}
+      type={
+        <ListItemButton
+          className="widget-settings-list-item-btn"
+          hasDivider
+          id="_"
+          onClick={() => console.log()}
+        />
+      }
       items={settingItems}
     />
   );

package/src/pages/AddCustomTokenPage.tsx

@@ -93,6 +93,7 @@ export function AddCustomTokenPage() {
             <Divider size={10} />
             <TextField
               fullWidth
+              id="widget-add-custom-token-token-address-input"
               disabled={!blockchain}
               variant="contained"
               placeholder={i18n.t('Enter token address')}
@@ -107,7 +108,12 @@ export function AddCustomTokenPage() {
             {!isValidAddress && !!address && (
               <>
                 <Divider size={4} />
-                <Alert type="error" variant="alarm" title="Invalid Address" />
+                <Alert
+                  id="widget-add-custom-token-invalid-address-alert"
+                  type="error"
+                  variant="alarm"
+                  title="Invalid Address"
+                />
               </>
             )}
           </div>

package/src/pages/ConfirmSwapPage.tsx

@@ -199,7 +199,14 @@ export function ConfirmSwapPage() {
   const quoteError = confirmSwapResult.error;
   const alerts = [];
   if (dbErrorMessage) {
-    alerts.push(<Alert type="error" variant="alarm" title={dbErrorMessage} />);
+    alerts.push(
+      <Alert
+        id="widget-confirm-swap-db-error-alert"
+        type="error"
+        variant="alarm"
+        title={dbErrorMessage}
+      />
+    );
   }
 
   if (quoteWarning || quoteError) {
@@ -304,6 +311,7 @@ export function ConfirmSwapPage() {
         <QuoteInfo
           quote={selectedQuote}
           type="swap-preview"
+          id="widget-confirm-swap-quote-container"
           expanded
           tagHidden
           error={confirmSwapResult.error}

package/src/pages/CustomTokensPage.tsx

@@ -94,6 +94,7 @@ export function CustomTokensPage() {
           {!!customTokens.length ? (
             <>
               <SearchInput
+                id="widget-custom-tokens-search-token-input"
                 value={searchedFor}
                 setValue={setSearchedFor}
                 fullWidth
@@ -152,6 +153,7 @@ export function CustomTokensPage() {
         </Content>
         <WatermarkedModal
           open={isDeleteModalOpen}
+          id="widget-custom-tokens-delete-modal"
           dismissible
           onClose={() => setIsDeleteModalOpen(false)}
           container={getContainer()}>

package/src/pages/HistoryPage.tsx

@@ -159,6 +159,7 @@ export function HistoryPage() {
             fullWidth
             variant="contained"
             placeholder={i18n.t('Search Transaction')}
+            id="widget-history-search-transaction-input"
             autoFocus
             onChange={handleSearch}
             style={{ height: 36 }}
@@ -211,6 +212,7 @@ export function HistoryPage() {
       <WatermarkedModal
         open={openClearModal}
         onClose={onCloseModal}
+        id="widget-history-clear-modal"
         container={getContainer()}>
         <Divider size={20} />
         <MessageBox

package/src/pages/Home.tsx

@@ -217,6 +217,7 @@ export function Home() {
               quote={selectedQuote}
               loading={fetchingQuote}
               error={quoteError}
+              id="widget-home-expandable-quote-container"
               tagHidden={false}
               warning={currentQuoteWarning}
               type="basic"

package/src/pages/LanguagePage.tsx

@@ -45,6 +45,7 @@ export function LanguagePage() {
       <PageContainer>
         <Alert
           type="warning"
+          id="widget-language-machine-translation-alarm-alert"
           variant="alarm"
           title="Warning: We are using machine translation, so the translations may be inaccurate."
         />
@@ -54,6 +55,7 @@ export function LanguagePage() {
             type={
               <ListItemButton
                 title={i18n.t('language')}
+                className="widget-language-list-item-btn"
                 id="_"
                 onClick={() => console.log()}
               />

package/src/pages/LiquiditySourcePage.tsx

@@ -70,6 +70,7 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
 
   const list = liquiditySources.map((sourceItem) => {
     const { selected, groupTitle, logo, id, ...restSourceItem } = sourceItem;
+
     return {
       id: `widget-setting-liquidity-source-${replaceSpacesWithDash(
         id.toLowerCase()
@@ -129,6 +130,7 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
         <SearchInput
           value={searchedFor}
           setValue={setSearchedFor}
+          id="widget-liquidity-source-search-input"
           fullWidth
           color="light"
           variant="contained"
@@ -148,7 +150,9 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
           </NotFoundContainer>
         ) : (
           fetchStatus === 'success' && (
-            <LiquiditySourceList disabled={campaignMode}>
+            <LiquiditySourceList
+              disabled={campaignMode}
+              className="widget-liquidity-source-list">
               {filteredList.map((sourceItem) => {
                 const { groupTitle, ...otherProps } = sourceItem;
 
@@ -158,6 +162,7 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
                       style={{ height: '61px' }}
                       {...otherProps}
                       selected={false}
+                      className="widget-liquidity-source-list-item-btn"
                       hasDivider
                     />
                   </React.Fragment>

package/src/pages/SelectBlockchainPage.tsx

@@ -58,6 +58,7 @@ export function SelectBlockchainPage(props: PropTypes) {
           value={searchedFor}
           autoFocus
           placeholder={i18n.t('Search Chain')}
+          id="widget-select-blockchain-search-input"
           color="light"
           variant="contained"
           size="large"

package/src/pages/SelectSwapItemPage/SelectSwapItemsPage.tsx

@@ -117,6 +117,7 @@ export function SelectSwapItemsPage(props: PropTypes) {
         <Divider size={24} />
         <SearchInput
           value={searchedFor}
+          id="widget-select-swap-item-search-input"
           autoFocus
           placeholder={i18n.t('Search Token')}
           color="light"

package/src/pages/SettingsPage.tsx

@@ -42,6 +42,7 @@ export function SettingsPage() {
           <Alert
             type="info"
             variant="alarm"
+            id="widget-settings-campaign-mode-alert"
             title={i18n.t(
               "Currently, you're in campaign mode with restrictions on liquidity sources. Would you like to switch out of this mode and make use of all available liquidity sources?"
             )}

package/src/pages/WalletsPage.tsx

@@ -112,6 +112,7 @@ export function WalletsPage() {
             );
           })}
           <StatefulConnectModal
+            id="widget-state-full-connect-modal"
             wallet={selectedWalletToConnect}
             onClose={() => {
               setSelectedWalletToConnect(undefined);

package/src/store/slices/wallets.ts

@@ -60,6 +60,7 @@ interface DeprecatedTokenBalance {
   rawAmount: string;
   decimal: number | null;
   amount: string;
+  isSupported: boolean;
   logo: string | null;
   usdPrice: number | null;
 }
@@ -807,6 +808,7 @@ export const createWalletsSlice = keepLastUpdated<AppStoreState, WalletsSlice>(
                   rawAmount: balance.amount,
                   decimal: balance.decimals,
                   amount: amount.toString(),
+                  isSupported: !!token,
                   logo: token?.image || null,
                   usdPrice: token?.usdPrice || null,
                 });

package/src/types/config.ts

@@ -200,7 +200,7 @@ export type TonConnectConfig = {
  * exchange.It can also used to limit source swap blockchains/tokens to some limited ones.
  * @property {TrezorManifest} trezorManifest - Trezor Connect Manifest requires that you,
  * as a Trezor Connect integrator,share your e-mail and application url.
- * @property {TonConnectConfig} tonConnect - Configuration for TON Connect compatible providers like MyTonWallet.
+ * @property {TonConnectConfig} tonConnect - Configuration for the TON Connect provider.
  * @property {BlockchainAndTokenConfig} to - The "to" property is an optional property of type
  * "BlockchainAndTokenConfig" that specifies the default blockchain and token to which the user wants to
  * exchange.It can also used to limit destination swap blockchains/tokens to some limited ones.

package/src/utils/swap.ts

@@ -305,8 +305,9 @@ export function getTotalFeeInUsd(
 
 export function getUsdFee(fee: SwapFee): BigNumber {
   let totalFeeInUsd = ZERO;
+  const price = new BigNumber(fee.price || 0);
   totalFeeInUsd = totalFeeInUsd.plus(
-    new BigNumber(fee.amount).multipliedBy(fee.price || 0)
+    new BigNumber(fee.amount).multipliedBy(price)
   );
 
   return totalFeeInUsd;