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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.43.1-next.3",
+  "version": "0.43.1-next.4",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -30,7 +30,7 @@
     "@rango-dev/queue-manager-rango-preset": "^0.45.2-next.10",
     "@rango-dev/queue-manager-react": "^0.29.0",
     "@rango-dev/signer-solana": "^0.39.1-next.3",
-    "@rango-dev/ui": "^0.46.2-next.11",
+    "@rango-dev/ui": "^0.46.2-next.12",
     "@rango-dev/wallets-core": "^0.43.1-next.10",
     "@rango-dev/wallets-react": "^0.30.2-next.11",
     "@rango-dev/wallets-shared": "^0.44.2-next.12",

package/src/components/BlockchainList/BlockchainList.tsx

@@ -44,7 +44,10 @@ export function BlockchainList(props: PropTypes) {
       );
     }
     return (
-      <List as="ul" key={`${blockchainCategory}-${searchedFor}`}>
+      <List
+        as="ul"
+        key={`${blockchainCategory}-${searchedFor}`}
+        id="widget-blockchain-list">
         {blockchains.map((item) => (
           <ListItemButton
             key={`${item.name}-${item.chainId}`}

package/src/components/BlockchainList/LoadingBlockchainList.tsx

@@ -6,7 +6,7 @@ import { List } from './BlockchainList.styles';
 const ITEM_SKELETON_COUNT = 20;
 export function LoadingBlockchainList() {
   return (
-    <List>
+    <List id="widget-blockchain-loading-list" as="ul">
       {Array.from(Array(ITEM_SKELETON_COUNT), (e) => (
         <ListItem
           key={e}

package/src/components/BlockchainSelectorButton/BlockchainSelectorButton.tsx

@@ -20,7 +20,8 @@ export function BlockchainSelectorButton(props: PropTypes) {
       <Divider size={10} />
       <InputContainer
         onClick={disabled ? undefined : onClick}
-        disabled={disabled}>
+        disabled={disabled}
+        id="widget-blockchain-selector-container">
         <FlexContainer>
           {hasLogo && (
             <>

package/src/components/BlockchainsSection/BlockchainsSection.tsx

@@ -57,7 +57,7 @@ export function BlockchainsSection(props: PropTypes) {
         </>
       )}
       <Divider size={12} />
-      <Blockchains>
+      <Blockchains id="widget-blockchains-section-container">
         {fetchStatus === 'loading' &&
           Array.from(
             Array(
@@ -70,6 +70,7 @@ export function BlockchainsSection(props: PropTypes) {
         {fetchStatus === 'success' && (
           <>
             <BlockchainsChip
+              className="widget-blockchains-section-all-btn"
               selected={!blockchain}
               onClick={() => {
                 if (type === 'from') {
@@ -90,6 +91,7 @@ export function BlockchainsSection(props: PropTypes) {
                 sideOffset={2}
                 container={getContainer()}>
                 <BlockchainsChip
+                  className="widget-blockchains-section-item-btn"
                   key={item.name}
                   selected={!!blockchain && blockchain.name === item.name}
                   onClick={() => onChange(item)}>
@@ -100,6 +102,7 @@ export function BlockchainsSection(props: PropTypes) {
 
             {onlyOneItemInList ? (
               <BlockchainsChip
+                className="widget-blockchains-section-only-item-btn"
                 key={blockchainsList.more[0].name}
                 selected={
                   !!blockchain &&
@@ -111,7 +114,10 @@ export function BlockchainsSection(props: PropTypes) {
             ) : null}
 
             {showMoreButton ? (
-              <BlockchainsChip onClick={onMoreClick} key="more-blockchains">
+              <BlockchainsChip
+                onClick={onMoreClick}
+                key="more-blockchains"
+                className="widget-blockchains-section-more-items-btn">
                 <Typography variant="body" size="xsmall" color="secondary500">
                   {i18n._('More +{count}', {
                     count: blockchainsList.more.length,

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -307,6 +307,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
 
   return (
     <WatermarkedModal
+      id="widget-confirm-wallets-modal"
       open={open}
       onClose={() => {
         if (!quoteWalletsConfirmed) {
@@ -368,6 +369,7 @@ export function ConfirmWalletsModal(props: PropTypes) {
       })}
       anchor="center">
       <WatermarkedModal
+        id='"widget-confirm-wallets-insufficient-account-balance-modal'
         open={isInsufficientBalanceModalOpen}
         onClose={setBalanceWarnings.bind(null, [])}
         container={modalContainer}>
@@ -406,7 +408,12 @@ export function ConfirmWalletsModal(props: PropTypes) {
         <>
           {error && (
             <>
-              <Alert variant="alarm" type="error" title={i18n.t(error)} />
+              <Alert
+                id="widget-confirm-wallet-modal-error-alert"
+                variant="alarm"
+                type="error"
+                title={i18n.t(error)}
+              />
               <Divider size={12} />
             </>
           )}

package/src/components/ConfirmWalletsModal/WalletList.tsx

@@ -198,12 +198,14 @@ export function WalletList(props: PropTypes) {
           <React.Fragment key={`${wallet.title}_${blockchainDisplayName}`}>
             {!!experimentalChainWallet && (
               <WatermarkedModal
+                id="widget-wallets-list-watermarked-modal"
                 open={!!experimentalChainWallet && showExperimentalChainModal}
                 container={modalContainer}
                 onClose={() => {
                   setExperimentalChainWallet(null);
                 }}>
                 <ExperimentalChain
+                  id="widget-wallets-list-experimental-chain-container"
                   displayName={blockchainDisplayName}
                   onConfirm={() => {
                     void addExperimentalChain(experimentalChainWallet);
@@ -213,6 +215,7 @@ export function WalletList(props: PropTypes) {
             )}
             {addingExperimentalChainStatus && (
               <WatermarkedModal
+                id="widget-wallets-list-experimental-chain-watermarked-modal"
                 open={!!addingExperimentalChainStatus}
                 onClose={setAddingExperimentalChainStatus.bind(null, null)}
                 container={modalContainer}>
@@ -226,6 +229,7 @@ export function WalletList(props: PropTypes) {
             )}
             <SelectableWallet
               key={wallet.type}
+              id="widget-wallets-list-selectable-wallet-btn"
               description={getWalletDescription()}
               descriptionColor={getWalletDescriptionColor()}
               onClick={onSelectableWalletClick}
@@ -237,6 +241,7 @@ export function WalletList(props: PropTypes) {
         );
       })}
       <StatefulConnectModal
+        id="widget-wallets-list-stateful-connect-modal"
         wallet={selectedWalletToConnect}
         options={{ defaultSelectedChains: quoteChains || [chain] }}
         onClose={() => {
@@ -257,7 +262,10 @@ export function WalletList(props: PropTypes) {
         }}
       />
       {shouldShowMoreWallets && (
-        <ShowMoreWallets selected={false} onClick={onShowMore}>
+        <ShowMoreWallets
+          selected={false}
+          onClick={onShowMore}
+          id="widget-wallets-list-show-more-wallets-btn">
           <Typography variant="label" size="medium">
             {i18n.t('Show more wallets')}
             <Typography variant="label" size="medium" color="$primary">

package/src/components/CustomDestination/CustomDestination.tsx

@@ -102,7 +102,7 @@ export function CustomDestination(props: PropTypes) {
         open={open}
         triggerAnchor="top"
         trigger={
-          <CustomDestinationButton>
+          <CustomDestinationButton id="widget-custom-destination-collapsible-btn">
             <div className="button__content">
               <WalletIcon size={18} color="info" />
               <Divider size={4} direction="horizontal" />
@@ -120,6 +120,7 @@ export function CustomDestination(props: PropTypes) {
         }
         onClickTrigger={() => handleOpenChange(!open)}>
         <StyledTextField
+          id="widget-custom-destination-blockchain-address-input"
           ref={inputRef}
           style={{
             padding: 0,

package/src/components/CustomTokenModal/CustomTokenModal.tsx

@@ -23,6 +23,7 @@ export function CustomTokenModal(props: PropTypes) {
   return (
     <WatermarkedModal
       open={open}
+      id="widget-custom-token-watermarked-modal"
       dismissible
       onClose={onClose}
       onExit={onExit}

package/src/components/FilterSelector/FilterSelectorContent.tsx

@@ -40,6 +40,7 @@ export function FilterSelectorContent(props: PropTypes) {
             return (
               <ListItemButton
                 key={item.id}
+                className="widget-filter-selector-list-item-btn"
                 style={{ height: '40px', width: '100%' }}
                 selected={false}
                 hasDivider={props.list.length - 1 != index}

package/src/components/HeaderButtons/InProgressTransactionBadge.tsx

@@ -17,7 +17,7 @@ const InProgressTransactionBadge = () => {
   }
 
   return (
-    <InProgressTransactionBadgeContainer>
+    <InProgressTransactionBadgeContainer id="widget-header-history-badge-container">
       <InProgressIcon color="info" size={6} />
     </InProgressTransactionBadgeContainer>
   );

package/src/components/HeaderButtons/NotificationsBadge.tsx

@@ -20,7 +20,11 @@ export function NotificationsBadge() {
 
   return notificationsCount ? (
     <NotificationsBadgeContainer isSever={hasSeverNotification}>
-      <Typography variant="body" size="xsmall" color="$background">
+      <Typography
+        variant="body"
+        size="xsmall"
+        color="$background"
+        id="widget-header-notifications-badge-container">
         {notificationsCount}
       </Typography>
     </NotificationsBadgeContainer>

package/src/components/HistoryGroupedList/HistoryGroupedList.tsx

@@ -112,6 +112,7 @@ export function HistoryGroupedList(props: PropTypes) {
         return (
           <SwapItemContainer key={swap.requestId}>
             <SwapListItem
+              className="widget-history-group-list-swap-item-btn"
               requestId={swap.requestId}
               creationTime={swap.creationTime}
               status={swap.status}

package/src/components/ImportCustomToken/ImportCustomToken.tsx

@@ -73,12 +73,12 @@ export function ImportCustomToken(props: PropTypes) {
       setShowImportModal(true);
     }
   }, [blockchain, token]);
-
   return (
     <>
       <WatermarkedModal
         open={showErrorModal}
         dismissible
+        id="widget-add-custom-token-modal"
         onClose={closeErrorModal}
         onExit={handleExit}
         container={getContainer()}>

package/src/components/NoResult/NoResult.tsx

@@ -42,7 +42,7 @@ export function NoResult(props: PropTypes) {
   }
 
   return (
-    <Container>
+    <Container id="widget-no-result-container">
       <NoRouteIcon size={NoRouteIconSize[size]} color="gray" />
       <Divider size={4} />
       <Typography variant="title" size={NoRouteTitleSize[size]}>
@@ -64,6 +64,7 @@ export function NoResult(props: PropTypes) {
       {!!info.alert && (
         <Footer size={size}>
           <Alert
+            id="widget-no-result-alert"
             type={info.alert.type}
             title={info.alert.text}
             titleAlign={'left'}

package/src/components/NotificationContent/NotificationContent.tsx

@@ -24,6 +24,7 @@ export function NotificationContent() {
 
   return (
     <Notifications
+      id="widget-notifications-container"
       list={notifications}
       getBlockchainImage={(blockchain) =>
         getBlockchainImage(blockchain, blockchains)

package/src/components/Quote/Quote.tsx

@@ -226,6 +226,7 @@ export function Quote(props: QuoteProps) {
                 variant="alarm"
                 type={stepHasError ? 'error' : 'warning'}
                 title={alertTitle}
+                id="widget-quote-footer-step-alarm-alert"
                 footer={
                   <FooterAlert>
                     {hasBridgeLimitError && (
@@ -336,6 +337,7 @@ export function Quote(props: QuoteProps) {
       tooltipContainer={getExpanded()}
       steps={steps}
       tags={sortedQuoteTags}
+      id="widget-quote-full-expanded-quote-container"
       quoteCost={
         <QuoteCostDetails
           quote={quote}
@@ -359,6 +361,7 @@ export function Quote(props: QuoteProps) {
     />
   ) : (
     <SummaryContainer
+      id="widget-quote-summary-container"
       selected={selected}
       listItem={type === 'list-item'}
       basic={type === 'basic'}>
@@ -397,6 +400,7 @@ export function Quote(props: QuoteProps) {
                 e.stopPropagation();
                 onClickAllRoutes();
               }}
+              id="widget-quote-all-routes-btn"
               size="xxsmall"
               type="secondary"
               variant="default"
@@ -447,6 +451,7 @@ export function Quote(props: QuoteProps) {
         )}
         {type === 'list-item' && (
           <TokenAmount
+            id="widget-quote-token-amount-container"
             tooltipContainer={container}
             type="output"
             direction="vertical"
@@ -500,6 +505,7 @@ export function Quote(props: QuoteProps) {
               return (
                 <StepDetails
                   type="quote-details"
+                  className="widget-quote-step-details-container"
                   key={key}
                   tooltipContainer={container}
                   step={step}

package/src/components/Quote/QuoteCostDetails.tsx

@@ -98,6 +98,7 @@ export function QuoteCostDetails(props: QuoteCostDetailsProps) {
       />
 
       <WatermarkedModal
+        id="widget-quote-cost-explanation-modal"
         container={container}
         open={open}
         anchor={fullExpandedMode ? 'center' : 'bottom'}

package/src/components/Quote/QuoteSummary.tsx

@@ -23,6 +23,7 @@ export function QuoteSummary(props: PropTypes) {
       <TokenAmount
         direction="horizontal"
         label={i18n.t('Swap input')}
+        id="widget-quote-summary-swap-input"
         type="input"
         tooltipContainer={getContainer()}
         price={{
@@ -39,6 +40,7 @@ export function QuoteSummary(props: PropTypes) {
       />
       <div className={separatorStyles()} />
       <TokenAmount
+        id="widget-quote-summary-estimated-input"
         direction="horizontal"
         tooltipContainer={getContainer()}
         label={i18n.t('Estimated output')}

package/src/components/Quote/QuoteTrigger.tsx

@@ -53,6 +53,7 @@ export function QuoteTrigger(props: QuoteTriggerProps) {
 
   return (
     <Trigger
+      className="widget-quote-trigger-btn"
       listItem={type === 'list-item'}
       ref={(ref) => (quoteRef.current = ref)}
       selected={selected}

package/src/components/QuoteWarningsAndErrors/HighValueLossWarningModal.tsx

@@ -76,6 +76,7 @@ export function HighValueLossWarningModal(props: Props) {
 
   return (
     <WatermarkedModal
+      id="widget-high-value-loss-warning-modal"
       footer={
         <Button
           id="widget-high-value-loss-warning-modal-confirm-btn"

package/src/components/QuoteWarningsAndErrors/QuoteWarningsAndErrors.tsx

@@ -88,6 +88,7 @@ export function QuoteWarningsAndErrors(props: PropTypes) {
         <Alerts>
           <Divider size={10} />
           <Alert
+            id="widget-quote-warning-and-errors-alert"
             title={alertInfo.title}
             type={alertInfo.alertType}
             variant="alarm"

package/src/components/QuoteWarningsAndErrors/SlippageWariningModal.tsx

@@ -29,6 +29,7 @@ export function SlippageWarningModal(props: PropsTypes) {
 
   return (
     <WatermarkedModal
+      id="widget-slippage-warning-modal"
       anchor="bottom"
       open={open}
       container={getContainer()}

package/src/components/QuoteWarningsAndErrors/UnknownPriceWarningModal.tsx

@@ -19,6 +19,7 @@ export function UnknownPriceWarningModal(props: Props) {
   const { open, onClose, onConfirm, confirmationDisabled } = props;
   return (
     <WatermarkedModal
+      id="widget-unknown-price-warning-modal"
       footer={
         <Button
           id="widget-unknown-price-warning-modal-confirm-btn"

package/src/components/Quotes/Quotes.tsx

@@ -108,6 +108,7 @@ export function Quotes(props: PropTypes) {
                 return (
                   <React.Fragment key={quote.requestId}>
                     <QuoteInfo
+                      id="widget-quotes-quote-info-container"
                       showModalFee={showModalFee}
                       container={container}
                       selected={selectedQuote?.requestId === quote.requestId}

package/src/components/Quotes/SelectStrategy.tsx

@@ -37,6 +37,7 @@ export function SelectStrategy(props: { container: HTMLElement }) {
   return (
     <SelectContainer>
       <Select
+        id={'widget-quotes-strategy-select'}
         container={props.container}
         options={ROUTE_STRATEGY}
         value={sortStrategy}

package/src/components/RefreshModal/RefreshModal.tsx

@@ -17,6 +17,7 @@ export function RefreshModal(props: PropTypes) {
       open={open}
       dismissible
       onClose={onClose}
+      id="widget-refresh-modal"
       container={getContainer()}>
       <MessageBox
         title={i18n.t('Something went wrong')}
@@ -25,6 +26,7 @@ export function RefreshModal(props: PropTypes) {
         <Divider size={30} />
         <RefreshButton
           variant="outlined"
+          id="widget-refresh-modal-refresh-btn"
           size="large"
           type="primary"
           fullWidth

package/src/components/SearchInput/SearchInput.tsx

@@ -16,12 +16,16 @@ export function SearchInput(props: PropTypes) {
     style,
     setValue,
     suffix,
+    id,
     ...inputAttributes
   } = props;
 
   let inputSuffix = !!value.length ? (
-    // eslint-disable-next-line jsx-id-attribute-enforcement/missing-ids
-    <IconButton variant="ghost" onClick={() => setValue?.('')} size="small">
+    <IconButton
+      id={`${id}۰icon-btn`}
+      variant="ghost"
+      onClick={() => setValue?.('')}
+      size="small">
       <CloseIcon color="gray" size={10} />
     </IconButton>
   ) : null;
@@ -37,6 +41,7 @@ export function SearchInput(props: PropTypes) {
           <SearchIcon color="black" />
         </IconWrapper>
       }
+      id={id}
       suffix={inputSuffix}
       fullWidth={fullWidth}
       color={color}

package/src/components/Slippage/Slippage.tsx

@@ -84,6 +84,7 @@ export function Slippage() {
           const key = `slippage-${index}`;
           return (
             <SlippageChip
+              id={`widget-slippage-chip-${slippageItem.toString()}%-btn`}
               key={key}
               onClick={() => onClickSlippageChip(slippageItem)}
               selected={customSlippage === null && slippageItem === slippage}
@@ -100,6 +101,7 @@ export function Slippage() {
             min="0.01"
             max="30"
             step="0.01"
+            id="widget-slippage-chip-text-input"
             onInput={onInput}
             fullWidth
             variant="contained"
@@ -122,6 +124,7 @@ export function Slippage() {
         <>
           <Divider size={10} />
           <Alert
+            id="widget-slippage-alert"
             variant="alarm"
             type={slippageValidation.type}
             title={slippageValidation.message}

package/src/components/StatefulConnectModal/StatefulConnectModal.tsx

@@ -31,6 +31,7 @@ const DELAY_SHOWING_MODAL_FOR = 300;
 
 interface PropTypes {
   wallet: WalletInfoWithExtra | undefined;
+  id: string;
   onClose: () => void;
   // When connecting wallet is executed **successfully**, this will be called afterwards.
   onConnect?: () => void;
@@ -155,6 +156,7 @@ export function StatefulConnectModal(props: PropTypes) {
 
   return (
     <WatermarkedModal
+      id={props.id}
       open={isConnecting}
       onClose={handleClosingModal}
       onExit={() => {

package/src/components/SwapDetails/SwapDetails.tsx

@@ -314,7 +314,7 @@ export function SwapDetails(props: SwapDetailsProps) {
           </Button>
         )
       }>
-      <Container compact ref={containerRef}>
+      <Container compact ref={containerRef} id="widget-swap-details-container">
         <RequestIdContainer className={rowStyles()}>
           <Typography variant="label" size="large" color="neutral700">
             {`${i18n.t('Request ID')}`}
@@ -443,6 +443,7 @@ export function SwapDetails(props: SwapDetailsProps) {
               (state === 'completed' && index === steps.length - 1);
             return (
               <StepDetails
+                className={'widget-swap-details-step-item-container'}
                 key={key}
                 step={step}
                 type="swap-progress"

package/src/components/SwapDetailsAlerts/SwapDetailsAlerts.Failed.tsx

@@ -13,6 +13,7 @@ export function FailedAlert(props: FailedAlertsProps) {
 
   return (
     <Alert
+      id="widget-failed-swap-details-alert"
       type="error"
       title={message.shortMessage}
       containerStyles={{
@@ -23,6 +24,7 @@ export function FailedAlert(props: FailedAlertsProps) {
       action={
         message.detailedMessage.content && (
           <IconButton
+            id="widget-swap-details-failed-btn"
             onClick={() => setShowContentError((prev) => !prev)}
             variant="ghost"
             size="xsmall">

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

@@ -11,6 +11,7 @@ export function WarningAlert(props: WaningAlertsProps) {
     return (
       <Alert
         type="warning"
+        id="widget-swap-details-change-network-alert"
         title={message.shortMessage}
         action={
           <Button
@@ -36,6 +37,7 @@ export function WarningAlert(props: WaningAlertsProps) {
       <Alert
         type="warning"
         title={message.shortMessage}
+        id="widget-swap-details-warning-alert-connect-wallet-alert"
         action={
           <Button
             id="widget-swap-details-warning-alert-connect-wallet-btn"
@@ -53,5 +55,11 @@ export function WarningAlert(props: WaningAlertsProps) {
     );
   }
 
-  return <Alert type="warning" title={message.shortMessage} />;
+  return (
+    <Alert
+      id="widget-swap-details-short-alert"
+      type="warning"
+      title={message.shortMessage}
+    />
+  );
 }

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;