Merge pull request #3365 from Emurgo/chore/YOEXT-940/eliminate-warnings

Chore/yoext 940/eliminate warnings
Emurgo · Dec 15, 2023 · 6f9f5a3 · 6f9f5a3
2 parents 9185836 + 13d878e
commit 6f9f5a3
Show file tree

Hide file tree

Showing 177 changed files with 528 additions and 525 deletions.
diff --git a/packages/yoroi-extension/.eslintrc.js b/packages/yoroi-extension/.eslintrc.js
@@ -106,6 +106,7 @@ module.exports = {
     'flowtype/no-primitive-constructor-types': 2,
     'flowtype/no-dupe-keys': 2,
     'no-extra-boolean-cast': 0,
+    'react/jsx-first-prop-new-line': 0,
     'no-restricted-properties': [
       2,
       { object: 'TrezorConnect', message: 'Use TrezorWrapper instead to minimize Trezor iframe lifespan', },

diff --git a/packages/yoroi-extension/app/api/ada/lib/storage/database/index.js b/packages/yoroi-extension/app/api/ada/lib/storage/database/index.js
@@ -260,7 +260,7 @@ async function fixLovefieldDuplicatePrimaryKey(errorMessage: string): Promise<vo
     window.indexedDB.open('yoroi-schema'),
     'could not open DB',
   );
-  
+
   const store = db
     .transaction([storeName], 'readwrite')
     .objectStore(storeName);

diff --git a/packages/yoroi-extension/app/components/common/AmountDisplay.js b/packages/yoroi-extension/app/components/common/AmountDisplay.js
@@ -85,14 +85,14 @@ export default class AmountDisplay extends Component<Props> {
     return (
       <>
         {showAmount === true && (
-          <p className={styles.amount}>
+          <div className={styles.amount}>
             {balanceDisplay}&nbsp;{truncateToken(getTokenName(tokenInfo))}
-          </p>
+          </div>
         )}
         {showFiat === true && (
-          <p className={styles.fiat}>
+          <div className={styles.fiat}>
             {fiatDisplay || '-'} {currency || 'USD'}
-          </p>
+          </div>
         )}
       </>
     );
@@ -117,8 +117,8 @@ export function FiatDisplay(props: {|
   }
 
   return (
-    <p className={styles.fiat}>
+    <div className={styles.fiat}>
       {formatValue(props.amount)} {props.currency}
-    </p>
+    </div>
   );
 }
diff --git a/packages/yoroi-extension/app/components/common/CheckboxLabel.js b/packages/yoroi-extension/app/components/common/CheckboxLabel.js
@@ -50,7 +50,7 @@ function CheckboxLabel({
             strong: { fontWeight: 500 },
           }}
         >
-          <Typography
+          <Typography component="div"
             marginBottom={description !== null ? '8px' : 0}
             sx={{
               color: 'var(--yoroi-comp-checkbox-text)',

diff --git a/packages/yoroi-extension/app/components/common/NumericInputRP.js b/packages/yoroi-extension/app/components/common/NumericInputRP.js
@@ -482,7 +482,7 @@ class AmountInput extends Component<AmountInputProps> {
         <NumericInputRP {...this.props} />
         {/* Do not show fee in case of some error is showing */}
         {error == null || error === '' ? (
-          <Typography
+          <Typography component="div"
             sx={{
               position: 'absolute',
               bottom: '86px',
@@ -496,7 +496,7 @@ class AmountInput extends Component<AmountInputProps> {
           </Typography>
         ) : null}
 
-        <Typography
+        <Typography component="div"
           variant="body3"
           sx={{
             position: 'absolute',

diff --git a/packages/yoroi-extension/app/components/common/Warning.js b/packages/yoroi-extension/app/components/common/Warning.js
@@ -21,7 +21,7 @@ export default function Warning({ children }: Props): Node {
     >
       <Box sx={{ display: 'flex', alignItems: 'center', gap: '8px', mb: '8px' }}>
         <InfoWarningIcon />
-        <Typography
+        <Typography component="div"
           variant="body1"
           fontWeight={500}
           color={theme => theme.palette.yellow[500]}

diff --git a/packages/yoroi-extension/app/components/common/card/Card.js b/packages/yoroi-extension/app/components/common/card/Card.js
@@ -19,7 +19,7 @@ export default function Card(props: Props): Node {
       <Box>
         <img src={imageSrc} alt={label} />
       </Box>
-      <Typography
+      <Typography component="div"
         variant="h3"
         color="grayscale.max"
         fontWeight={500}
@@ -30,7 +30,7 @@ export default function Card(props: Props): Node {
       >
         {label}
       </Typography>
-      <Typography variant="body2" color="grayscale.900" mb="16px">
+      <Typography component="div" variant="body2" color="grayscale.900" mb="16px">
         {description}
       </Typography>
       {props.children}

diff --git a/packages/yoroi-extension/app/components/common/stepper/Stepper.js b/packages/yoroi-extension/app/components/common/stepper/Stepper.js
@@ -71,7 +71,7 @@ function Stepper(props: Props & Intl): Node {
               {isPrevStep ? (
                 <StepMarkIcon />
               ) : (
-                <Typography
+                <Typography component="div"
                   variant="body2"
                   fontWeight={500}
                   color={isCurrentStep ? 'common.white' : stepColor}
@@ -81,7 +81,7 @@ function Stepper(props: Props & Intl): Node {
                 </Typography>
               )}
             </Box>
-            <Typography sx={{ cursor }} variant="body1" color={stepColor} fontWeight={500}>
+            <Typography component="div" sx={{ cursor }} variant="body1" color={stepColor} fontWeight={500}>
               {intl.formatMessage(message)}
             </Typography>
           </Stack>

diff --git a/packages/yoroi-extension/app/components/common/table/Table.js b/packages/yoroi-extension/app/components/common/table/Table.js
@@ -35,7 +35,7 @@ export default function Table({
       }}
     >
       {columnNames.map((name, i) => (
-        <Typography
+        <Typography component="div"
           variant="body2"
           key={name}
           textAlign={columnAlignment[i] ? columnAlignment[i] : 'right'}

diff --git a/packages/yoroi-extension/app/components/common/tabs/Tabs.js b/packages/yoroi-extension/app/components/common/tabs/Tabs.js
@@ -31,7 +31,7 @@ export default function Tabs({ tabs = [] }: Props): Node {
 
 const TabButton = ({ label, isActive, onClick }: TabProps): Node => (
   <Box onClick={onClick} p="8px" borderRadius="8px" bgcolor={isActive ? 'grayscale.200' : ''}>
-    <Typography variant="body1" fontWeight={500}>
+    <Typography component="div" variant="body1" fontWeight={500}>
       {label}
     </Typography>
   </Box>

diff --git a/packages/yoroi-extension/app/components/common/walletInfo/WalletInfo.js b/packages/yoroi-extension/app/components/common/walletInfo/WalletInfo.js
@@ -135,8 +135,8 @@ export default class WalletInfo extends Component<Props> {
     const truncatedName = truncateLongName(walletName);
 
     return (
-      <Tooltip title={<Typography variant="body3">{walletName}</Typography>}>
-        <Typography variant="body-2-medium">{truncatedName}</Typography>
+      <Tooltip title={<Typography component="div" variant="body3">{walletName}</Typography>}>
+        <Typography component="div" variant="body-2-medium">{truncatedName}</Typography>
       </Tooltip>
     );
   };

diff --git a/.../yoroi-extension/app/components/dapp-connector/ConnectedWebsites/ConnectedWebsitesPage.js b/.../yoroi-extension/app/components/dapp-connector/ConnectedWebsites/ConnectedWebsitesPage.js
@@ -75,10 +75,10 @@ class ConnectedWebsitesPage extends Component<AllProps> {
         <Box mt="-24px" display="flex" flexDirection="column" alignItems="center" gap="16px">
           <NoDappsConnected />
           <Box textAlign="center">
-            <Typography variant="h5" fontWeight={500} mb="8px">
+            <Typography component="div" variant="h5" fontWeight={500} mb="8px">
               {intl.formatMessage(messages.noWebsitesConnected)}
             </Typography>
-            <Typography variant="body1" color="grayscale.600">
+            <Typography component="div" variant="body1" color="grayscale.600">
               {intl.formatMessage(connectorMessages.messageReadOnly)}
             </Typography>
           </Box>
@@ -132,7 +132,7 @@ class ConnectedWebsitesPage extends Component<AllProps> {
     return (
       <Box>
         <Box mb="15px">
-          <Typography fontWeight={500} variant="h5">
+          <Typography component="div" fontWeight={500} variant="h5">
             {intl.formatMessage(messages.connectedDapps, { dappsCount: cardanoNodes.length })}
           </Typography>
         </Box>
@@ -149,10 +149,10 @@ class ConnectedWebsitesPage extends Component<AllProps> {
           }}
         >
           <Box width="100%">
-            <Typography variant="body2">{intl.formatMessage(messages.walletsLabel)}</Typography>
+            <Typography component="div" variant="body2">{intl.formatMessage(messages.walletsLabel)}</Typography>
           </Box>
           <Box width="100%">
-            <Typography variant="body2">{intl.formatMessage(messages.dappsLabel)}</Typography>
+            <Typography component="div" variant="body2">{intl.formatMessage(messages.dappsLabel)}</Typography>
           </Box>
         </Box>
         <Box mt="16px">{cardanoNodes}</Box>
@@ -171,7 +171,7 @@ class ConnectedWebsitesPage extends Component<AllProps> {
         <div className={styles.noDappsFound}>
           <NoDappsFoundImg />
           <h3>{intl.formatMessage(messages.noWebsitesConnected)} </h3>
-          <p>{intl.formatMessage(connectorMessages.messageReadOnly)}</p>
+          <div>{intl.formatMessage(connectorMessages.messageReadOnly)}</div>
         </div>
       </div>
     );
@@ -217,8 +217,8 @@ class ConnectedWebsitesPage extends Component<AllProps> {
       <div className={styles.component}>
         <div className={styles.container}>
           <div className={styles.header}>
-            <p>{intl.formatMessage(messages.walletsLabel)}</p>
-            <p>{intl.formatMessage(messages.dappsLabel)}</p>
+            <div>{intl.formatMessage(messages.walletsLabel)}</div>
+            <div>{intl.formatMessage(messages.dappsLabel)}</div>
           </div>
           <div>
             {cardanoNodes.length > 0 && (

diff --git a/packages/yoroi-extension/app/components/dapp-connector/ConnectedWebsites/WalletRow.js b/packages/yoroi-extension/app/components/dapp-connector/ConnectedWebsites/WalletRow.js
@@ -118,27 +118,27 @@ export default class WalletRow extends Component<Props, State> {
           onMouseLeave={this.hideDeleteIcon}
           className={styles.component}
         >
-          <p className={styles.name}>
+          <div className={styles.name}>
             {settingsCache.conceptualWalletName}
             {settingsCache && (
               <span>
                 {' '}
                 &#183; <WalletType wallet={settingsCache} />
               </span>
             )}
-          </p>
+          </div>
           <div className={styles.rowWrapper}>
             <div>
               <div className={styles.card}>
                 <div className={styles.avatar}>
                   <NavPlate plate={plate} wallet={settingsCache} />
                 </div>
-                <p className={styles.balance}>
+                <div className={styles.balance}>
                   {this.renderAmountDisplay({
                     shouldHideBalance,
                     amount: balance,
                   })}
-                </p>
+                </div>
               </div>
             </div>
             <div className={styles.dapp}>
@@ -149,9 +149,9 @@ export default class WalletRow extends Component<Props, State> {
                 <Tooltip
                   followCursor
                   placement="top"
-                  title={<Typography variant="body3">{url}</Typography>}
+                  title={<Typography component="div" variant="body3">{url}</Typography>}
                 >
-                  <Typography
+                  <Typography component="div"
                     variant="body1"
                     sx={{
                       fontWeight: '500',
@@ -165,7 +165,7 @@ export default class WalletRow extends Component<Props, State> {
                   </Typography>
                 </Tooltip>
                 {isActiveSite && (
-                  <p className={styles.status}>{intl.formatMessage(messages.active)}</p>
+                  <div className={styles.status}>{intl.formatMessage(messages.active)}</div>
                 )}
               </div>
             </div>

diff --git a/packages/yoroi-extension/app/components/dapp-connector/ConnectedWebsites/WalletRowRevamp.js b/packages/yoroi-extension/app/components/dapp-connector/ConnectedWebsites/WalletRowRevamp.js
@@ -131,10 +131,10 @@ export default class WalletRowRevamp extends Component<Props, State> {
             {plateIcon}
           </Box>
           <div>
-            <Typography variant="caption1" color="grayscale.900" id="connectedWalletNameLabel">
+            <Typography component="div" variant="caption1" color="grayscale.900" id="connectedWalletNameLabel">
               {settingsCache.conceptualWalletName}
             </Typography>
-            <Typography variant="body2" fontWeight={500} id="connectedWalletBalanceLabel">
+            <Typography component="div" variant="body2" fontWeight={500} id="connectedWalletBalanceLabel">
               {this.renderAmountDisplay({
                 shouldHideBalance,
                 amount: balance,
@@ -146,7 +146,7 @@ export default class WalletRowRevamp extends Component<Props, State> {
           <Box width="32px" height="32px" borderRadius="50%" overflow="hidden">
             {websiteIcon ? <img width="100%" src={websiteIcon} alt={url} /> : <NoDappImage />}
           </Box>
-          <Typography
+          <Typography component="div"
             variant="body1"
             color="grayscale.900"
             sx={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}

diff --git a/packages/yoroi-extension/app/components/experimental/YoroiPalette/YoroiPalette.js b/packages/yoroi-extension/app/components/experimental/YoroiPalette/YoroiPalette.js
@@ -85,10 +85,10 @@ export default class YoroiPalettePage extends Component<Props, State> {
                     backgroundColor: color.hex
                 }}
               />
-              <p className={styles.colorHex}>
+              <div className={styles.colorHex}>
                 {String(color.hex)}
-              </p>
-              <p className={styles.colorName}>{color.name}</p>
+              </div>
+              <div className={styles.colorName}>{color.name}</div>
             </div>
             ))}
         </div>
@@ -131,7 +131,7 @@ export default class YoroiPalettePage extends Component<Props, State> {
                 border: '1px solid var(--yoroi-palette-gray-200)',
               }}
             />
-            <p>{subRow.text}</p>
+            <div>{subRow.text}</div>
           </li>
           {i < subRows.length -1 && <li className={styles.arrowDown}><ArrowDown /></li>}
         </>

diff --git a/packages/yoroi-extension/app/components/experimental/YoroiTheme/YoroiThemesPage.js b/packages/yoroi-extension/app/components/experimental/YoroiTheme/YoroiThemesPage.js
@@ -73,12 +73,12 @@ export default class YoroiThemesPage extends Component<Props, State> {
                   if (typeof entry[1] === 'object') {
                     return (
                       <div className={styles.row} key={entry[0]}>
-                        <p className={styles.rowKey}>{entry[0]}</p>
+                        <div className={styles.rowKey}>{entry[0]}</div>
                         <ul className={styles.subRow}>
                           {Object.entries(Object(entry[1])).map(row => (
                             <li className={styles.subRowItem} key={row[0]}>
-                              <p className={styles.key}>{JSON.stringify(row[0])}</p>
-                              <p className={styles.value}>{JSON.stringify(row[1])}</p>
+                              <div className={styles.key}>{JSON.stringify(row[0])}</div>
+                              <div className={styles.value}>{JSON.stringify(row[1])}</div>
                             </li>
                           ))}
                         </ul>

diff --git a/packages/yoroi-extension/app/components/loading/Crashed.js b/packages/yoroi-extension/app/components/loading/Crashed.js
@@ -64,15 +64,15 @@ export default class Crashed extends Component<Props> {
     );
 
     return (
-      <p>
-        <Typography sx={{ textAlign: 'justify', mb: '15px' }}>
+      <div>
+        <Typography component="div" sx={{ textAlign: 'justify', mb: '15px' }}>
           <FormattedMessage {...globalMessages.forMoreHelp} values={{ supportRequestLink }} />
         </Typography>
 
-        <Typography variant="subtitle2" sx={{ textAlign: 'justify' }}>
+        <Typography component="div" variant="subtitle2" sx={{ textAlign: 'justify' }}>
           <FormattedMessage {...globalMessages.logsContent} values={{ downloadLogsLink }} />
         </Typography>
-      </p>
+      </div>
     );
   };
 }
diff --git a/packages/yoroi-extension/app/components/loading/Loading.js b/packages/yoroi-extension/app/components/loading/Loading.js
@@ -112,10 +112,10 @@ export default class Loading extends Component<Props> {
     );
 
     return (
-      <p>
+      <div>
         <FormattedMessage {...globalMessages.logsContent} values={{ downloadLogsLink }} /><br />
         <FormattedMessage {...globalMessages.forMoreHelp} values={{ supportRequestLink }} />
-      </p>
+      </div>
     );
   };
 

diff --git a/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.js b/packages/yoroi-extension/app/components/profile/complexity-level/ComplexityLevelForm.js
@@ -92,7 +92,7 @@ class ComplexityLevel extends Component<Props & InjectedProps> {
     return (
       <Box className={styles.component}>
         {isRevampLayout && (
-          <Typography
+          <Typography component="div"
             textAlign="center"
             color="grayscale.900"
             mb="16px"
@@ -103,7 +103,7 @@ class ComplexityLevel extends Component<Props & InjectedProps> {
           </Typography>
         )}
 
-        <Typography
+        <Typography component="div"
           textAlign="center"
           variant="body1"
           color={isRevampLayout ? 'grayscale.800' : 'var(--yoroi-palette-gray-600)'}
@@ -112,7 +112,7 @@ class ComplexityLevel extends Component<Props & InjectedProps> {
         </Typography>
 
         {complexityLevel && (
-          <Typography
+          <Typography component="div"
             variant="body1"
             my="1rem"
             mx="auto"
@@ -198,10 +198,10 @@ class ComplexityLevel extends Component<Props & InjectedProps> {
                   <Box sx={{ p: '15px' }}>
                     <Box sx={{ mb: '16px' }}>{level.image}</Box>
                     <Box mb="10px">
-                      <Typography mb="4px" variant="h3" fontWeight={500}>
+                      <Typography component="div" mb="4px" variant="h3" fontWeight={500}>
                         {level.name}
                       </Typography>
-                      <Typography variant="body2">{level.description}</Typography>
+                      <Typography component="div" variant="body2">{level.description}</Typography>
                     </Box>
                   </Box>
                 </Box>
@@ -218,7 +218,7 @@ class ComplexityLevel extends Component<Props & InjectedProps> {
                 <div className={styles.cardContent}>
                   <div>
                     <h3>{level.name}</h3>
-                    <p>{level.description}</p>
+                    <div>{level.description}</div>
                   </div>
                   <LoadingButton
                     variant={isRevampLayout ? 'contained' : 'primary'}
-Original file line number
+Diff line change
@@ Expand Up / @@ -112,10 +112,10 @@ export default class Loading extends Component<Props> { @@
         );
         return (
-          <p>
+          <div>
             <FormattedMessage {...globalMessages.logsContent} values={{ downloadLogsLink }} /><br />
             <FormattedMessage {...globalMessages.forMoreHelp} values={{ supportRequestLink }} />
-          </p>
+          </div>
         );
       };
@@ Expand Down @@