Merge branch 'develop' into sorin/YOEXT-1069/pool-transition

Emurgo · Apr 12, 2024 · e03da02 · e03da02
2 parents ae0dfde + a3a216f
commit e03da02
Show file tree

Hide file tree

Showing 9 changed files with 52 additions and 19 deletions.
diff --git a/packages/yoroi-extension/app/components/settings/menu/SettingsMenu.js b/packages/yoroi-extension/app/components/settings/menu/SettingsMenu.js
@@ -97,7 +97,12 @@ class SettingsMenu extends Component<Props & InjectedLayoutProps> {
     ];
 
     return (
-      <SubMenu options={settingOptions} onItemClick={onItemClick} isActiveItem={isActiveItem} />
+      <SubMenu
+        options={settingOptions}
+        onItemClick={onItemClick}
+        isActiveItem={isActiveItem}
+        locationId='settings'
+      />
     );
   }
 }

diff --git a/packages/yoroi-extension/app/components/swap/SwapMenu.js b/packages/yoroi-extension/app/components/swap/SwapMenu.js
@@ -46,7 +46,12 @@ export default class SwapMenu extends Component<Props> {
     ];
 
     return (
-      <SubMenu options={settingOptions} onItemClick={onItemClick} isActiveItem={isActiveItem} />
+      <SubMenu
+        options={settingOptions}
+        onItemClick={onItemClick}
+        isActiveItem={isActiveItem}
+        locationId='swap'
+      />
     );
   }
 }
diff --git a/packages/yoroi-extension/app/components/topbar/SubMenu.js b/packages/yoroi-extension/app/components/topbar/SubMenu.js
@@ -17,6 +17,7 @@ type Props = {|
   +isActiveItem: string => boolean,
   +onItemClick: string => void,
   +options: Array<SubMenuOption>,
+  locationId: string,
 |};
 type InjectedProps = {|
   +isRevampLayout: boolean,
@@ -25,12 +26,12 @@ type AllProps = {| ...Props, ...InjectedProps |};
 @observer
 class SubMenu extends Component<AllProps> {
   render(): Node {
-    const { onItemClick, isActiveItem, options } = this.props;
+    const { onItemClick, isActiveItem, options, locationId } = this.props;
 
     const isRevamp = this.props.isRevampLayout;
     return (
-      <div className={styles.componentWrapper} id="subMenu">
-        <div className={isRevamp ? styles.componentRevamp : styles.component} id="settingsMenuLayout">
+      <div className={styles.componentWrapper}>
+        <div className={isRevamp ? styles.componentRevamp : styles.component}>
           {options
             .filter(o => !o.hidden)
             .map(({ label, route, className }) => (
@@ -40,6 +41,7 @@ class SubMenu extends Component<AllProps> {
                 onClick={() => onItemClick(route)}
                 active={isActiveItem(route)}
                 className={className}
+                locationId={locationId}
               />
             ))}
         </div>

diff --git a/packages/yoroi-extension/app/components/topbar/SubMenuItem.js b/packages/yoroi-extension/app/components/topbar/SubMenuItem.js
@@ -13,6 +13,7 @@ type Props = {|
   +onClick: void => void,
   +className: string,
   +disabled?: boolean,
+  locationId: string,
 |};
 
 type InjectedProps = {| +isRevampLayout: boolean |};
@@ -24,7 +25,7 @@ class SubMenuItem extends Component<Props & InjectedProps> {
   };
 
   render(): Node {
-    const { label, active, disabled, onClick, className, isRevampLayout } = this.props;
+    const { label, active, disabled, onClick, className, isRevampLayout, locationId } = this.props;
     let state = styles.enabled;
     if (disabled === true) {
       state = styles.disabled;
@@ -42,7 +43,7 @@ class SubMenuItem extends Component<Props & InjectedProps> {
         className={componentClasses}
         disabled={disabled}
         onClick={onClick}
-        id={'subMenuItem_'+subMenuItemId}
+        id={locationId + '-' + subMenuItemId + 'SubTab-button'}
       >
         {label}
       </Box>

diff --git a/packages/yoroi-extension/app/components/wallet/WalletReceiveRevamp.js b/packages/yoroi-extension/app/components/wallet/WalletReceiveRevamp.js
@@ -82,6 +82,7 @@ export default class WalletReceiveRevamp extends Component<Props> {
   static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = {
     intl: intlShape.isRequired,
   };
+  locationId: string = 'wallet:receive:infoPanel:footer'
 
   getAmount: TokenEntry => ?Node = tokenEntry => {
     if (this.props.shouldHideBalance) {
@@ -109,7 +110,7 @@ export default class WalletReceiveRevamp extends Component<Props> {
 
   getValueBlock: void => {|
     header: ?Node,
-    body: ($ReadOnly<StandardAddress>) => ?Node,
+    body: ($ReadOnly<StandardAddress>, number) => ?Node,
   |} = () => {
     if (this.props.addressBook) {
       return { header: undefined, body: () => undefined };
@@ -121,8 +122,14 @@ export default class WalletReceiveRevamp extends Component<Props> {
         {intl.formatMessage(messages.outputAmountUTXO)}
       </Typography>
     );
-    const body = address => (
-      <Typography component="div" variant="body1" color="grayscale.900" textAlign="right">
+    const body = (address, rowIndex: number) => (
+      <Typography
+        component="div"
+        variant="body1"
+        color="grayscale.900"
+        textAlign="right"
+        id={this.locationId + ':addressRow_' + rowIndex + '-adaAmount-text'}
+      >
         {address.values != null ? (
           <span>{this.getAmount(address.values.getDefaultEntry())}</span>
         ) : (
@@ -176,15 +183,17 @@ export default class WalletReceiveRevamp extends Component<Props> {
             address.isUsed === true ? styles.usedWalletAddress : null,
           ]);
           const notificationElementId = `address-${index}-copyNotification`;
+          const rowLocationId = `${this.locationId}:addressRow_${index}`;
           return (
             <Box
               key={`gen-${address.address}`}
               sx={{ p: '13px 24px !important' }}
               className={addressClasses}
+              id={this.locationId + '-addressRow_' + index + '-box'}
             >
               {/* Address Id */}
               <CopyableAddress
-                id='walletReceiveRevamp'
+                id={rowLocationId}
                 hash={address.address}
                 elementId={notificationElementId}
                 onCopyAddress={() => onCopyAddressTooltip(address.address, notificationElementId)}
@@ -207,7 +216,7 @@ export default class WalletReceiveRevamp extends Component<Props> {
                 </ExplorableHashContainer>
               </CopyableAddress>
               {/* Address balance block start */}
-              {valueBlock.body(address)}
+              {valueBlock.body(address, index)}
               {/* Generate payment URL for Address action */}
               {onGeneratePaymentURI != null && (
                 <Box
@@ -221,6 +230,7 @@ export default class WalletReceiveRevamp extends Component<Props> {
                     type="button"
                     onClick={onGeneratePaymentURI.bind(this, address.address)}
                     className={styles.btnGenerateURI}
+                    id={rowLocationId + '-generateUrl-button'}
                   >
                     <div className={styles.generateURLActionBlock}>
                       <span className={styles.generateURIIcon}>
@@ -238,7 +248,11 @@ export default class WalletReceiveRevamp extends Component<Props> {
                   justifyContent: 'flex-end',
                 }}
               >
-                <button type="button" onClick={onVerifyAddress.bind(this, address)}>
+                <button
+                  type="button"
+                  onClick={onVerifyAddress.bind(this, address)}
+                  id={rowLocationId + '-verifyAddress-button'}
+                >
                   <div>
                     <span className={styles.verifyIcon}>
                       <VerifyIcon />
@@ -257,7 +271,7 @@ export default class WalletReceiveRevamp extends Component<Props> {
       return (
         <div className={styles.component}>
           {this.props.header}
-          <div className={styles.notFound}>
+          <div className={styles.notFound} id={this.locationId + '-noAddresses-component'}>
             <NoTransactionModernSvg />
             <h1>{intl.formatMessage(messages.noResultsFoundLabel)}</h1>
             <div>{intl.formatMessage(messages.notFoundAnyAddresses)}</div>

diff --git a/packages/yoroi-extension/app/components/wallet/navigation/ReceiveNavButtonRevamp.js b/packages/yoroi-extension/app/components/wallet/navigation/ReceiveNavButtonRevamp.js
@@ -37,10 +37,13 @@ export default class ReceiveNavButtonRevamp extends Component<Props> {
   renderButton: void => Node = () => {
     const isTopLvl = Boolean(this.props.isToplevel);
     const isActive = Boolean(this.props.isActive);
+    const locationId='wallet:receive:navigationPanel'
+    const simplifiedLabel = this.props.label.toLowerCase().replace(/[ \/]/gi, '')
     return (
       <Box
         onClick={this.props.onClick}
         color={isTopLvl && isActive ? 'primary.600' : 'grayscale.600'}
+        id={locationId + '-' + simplifiedLabel + 'MenuItem-button'}
       >
         <Box display="flex" alignItems="center" gap="6px">
           <Typography component="div" variant="body1" fontWeight={this.props.isActive ? 500 : 400}>

diff --git a/packages/yoroi-extension/app/components/wallet/receive/StandardHeaderRevamp.js b/packages/yoroi-extension/app/components/wallet/receive/StandardHeaderRevamp.js
@@ -68,6 +68,7 @@ export default class StandardHeaderRevamp extends Component<Props> {
     } = this.props;
     const { intl } = this.context;
     const mainAddressNotificationId = 'mainAddress-copyNotification';
+    const locationId = 'wallet:receive:infoPanel:header'
 
     const generateAddressForm = (
       <LoadingButton
@@ -82,6 +83,7 @@ export default class StandardHeaderRevamp extends Component<Props> {
             height: 'unset',
           },
         }}
+        id={locationId + '-generateNewAddress-button'}
       >
         {intl.formatMessage(messages.generateNewAddressButtonLabel)}
       </LoadingButton>
@@ -125,14 +127,14 @@ export default class StandardHeaderRevamp extends Component<Props> {
                   },
                 }}
               >
-                <QrCodeWrapper fgColor="#000" value={walletAddress} size={153} />
+                <QrCodeWrapper fgColor="#000" value={walletAddress} size={153} id={locationId + '-addressQrCode-image'} />
               </Box>
             </Box>
           </Box>
           <Box width="100%">
             <Box mb="8px">
               <CopyableAddress
-                id='standartHeaderRevamp'
+                id={locationId}
                 darkVariant
                 sx={{
                   justifyContent: 'flex-start',
@@ -167,7 +169,7 @@ export default class StandardHeaderRevamp extends Component<Props> {
             </Typography>
 
             {generateAddressForm}
-            {error && <div className={styles.error}>{intl.formatMessage(error)}</div>}
+            {error && <div className={styles.error} id={locationId + '-addressError-text'}>{intl.formatMessage(error)}</div>}
           </Box>
         </Box>
       </Box>

diff --git a/packages/yoroi-extension/app/components/widgets/CopyableAddress.js b/packages/yoroi-extension/app/components/widgets/CopyableAddress.js
@@ -71,7 +71,7 @@ export default class CopyableAddress extends Component<Props> {
         }
         placement={this.props.placementTooltip}
       >
-        <span className={styles.copyIconBig}>
+        <span className={styles.copyIconBig} id={id + '-copyAddress-button'}>
           <Icon />
         </span>
       </Tooltip>
@@ -83,7 +83,7 @@ export default class CopyableAddress extends Component<Props> {
         className={classnames([styles.component, darkVariant === true && styles.componentDark])}
         id={id + '-copyableAddress-box'}
       >
-        <span>{this.props.children}</span>
+        <span id={id + '-address-text'}>{this.props.children}</span>
         <CopyToClipboard
           text={hash}
           onCopy={onCopyAddress == null ? undefined : (_text, _result) => onCopyAddress()}

diff --git a/packages/yoroi-extension/app/containers/wallet/Wallet.js b/packages/yoroi-extension/app/containers/wallet/Wallet.js
@@ -149,6 +149,7 @@ class Wallet extends Component<AllProps> {
           }))}
         onItemClick={route => actions.router.goToRoute.trigger({ route })}
         isActiveItem={route => this.props.stores.app.currentRoute.startsWith(route)}
+        locationId='wallet'
       />
     );