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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.33.4-next.2",
+  "version": "0.33.4-next.4",
   "license": "MIT",
   "type": "module",
   "source": "./src/index.ts",
@@ -30,7 +30,7 @@
     "@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.2",
-    "@rango-dev/ui": "^0.39.1-next.7",
+    "@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",
@@ -54,4 +54,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

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/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/pages/AddCustomTokenPage.tsx

@@ -154,6 +154,7 @@ export function AddCustomTokenPage() {
           </div>
 
           <Button
+            id="widget-add-custom-token-import-btn"
             disabled={isImportDisabled}
             type="primary"
             variant="contained"
@@ -176,8 +177,11 @@ export function AddCustomTokenPage() {
             }>
             <Divider size={40} />
             <Divider size={10} />
-
+            {/* eslint-disable-next-line jsx-id-attribute-enforcement/missing-ids */}
             <Button
+              id={`widget-add-custom-token-${
+                networkError ? 'retry' : 'add-another'
+              }-btn`}
               variant="contained"
               size="large"
               type="primary"

package/src/pages/ConfirmSwapPage.tsx

@@ -243,6 +243,7 @@ export function ConfirmSwapPage() {
         <Buttons>
           <div className={confirmBtnStyles()}>
             <Button
+              id="widget-confirm-swap-start-btn"
               variant="contained"
               type="primary"
               size="large"
@@ -254,6 +255,7 @@ export function ConfirmSwapPage() {
             </Button>
           </div>
           <IconButton
+            id="widget-confirm-swap-wallet-icon-btn"
             variant="contained"
             type="primary"
             size="large"

package/src/pages/CustomTokensPage.tsx

@@ -110,6 +110,7 @@ export function CustomTokensPage() {
                 showTitle={false}
                 action={(token) => (
                   <DeleteIconButton
+                    id="widget-custom-token-delete-icon-btn"
                     variant="ghost"
                     onClick={() => {
                       setIsDeleteModalOpen(true);
@@ -140,6 +141,7 @@ export function CustomTokensPage() {
           <Divider size={20} />
 
           <Button
+            id="widget-custom-token-add-btn"
             type="primary"
             variant="contained"
             size="large"
@@ -161,6 +163,7 @@ export function CustomTokensPage() {
 
             <Button
               fullWidth
+              id="widget-custom-token-delete-modal-yes-btn"
               variant="contained"
               type="primary"
               size="large"
@@ -169,6 +172,7 @@ export function CustomTokensPage() {
             </Button>
             <Divider size={12} />
             <Button
+              id="widget-custom-token-delete-modal-no-btn"
               fullWidth
               variant="outlined"
               type="primary"

package/src/pages/HistoryPage.tsx

@@ -140,6 +140,7 @@ export function HistoryPage() {
         suffix: (
           <SuffixContainer>
             <Button
+              id="widget-history-clear-btn"
               disabled={isClearButtonDisabled}
               variant="ghost"
               size="xsmall"
@@ -234,6 +235,7 @@ export function HistoryPage() {
         />
         <Divider size={30} />
         <Button
+          id="widget-history-clear-modal-yes-btn"
           variant="contained"
           type="primary"
           size="large"
@@ -242,6 +244,7 @@ export function HistoryPage() {
         </Button>
         <Divider size={10} />
         <Button
+          id="widget-history-clear-modal-no-btn"
           variant="outlined"
           type="primary"
           size="large"

package/src/pages/Home.tsx

@@ -128,7 +128,9 @@ export function Home() {
       <Layout
         height="auto"
         footer={
+          // eslint-disable-next-line jsx-id-attribute-enforcement/missing-ids
           <Button
+            id={`widget-swap-${swapButtonState.action}-btn`}
             type="primary"
             size="large"
             disabled={swapButtonState.disabled || !isActiveTab}

package/src/pages/LanguagePage.tsx

@@ -21,7 +21,7 @@ export function LanguagePage() {
   const languageList = languages.map((languageItem) => {
     const { local, label, SVGFlag } = languageItem;
     return {
-      id: local,
+      id: `widget-setting-languages-${local}-item-btn`,
       value: local,
       title: (
         <Typography variant="title" size="xmedium">