create reusable wrapper component to tackle problem in multiple places

Author: shawnbusuttil

source/renderer/app/components/staking/widgets/PoolPopOver.tsx

@@ -6,6 +6,7 @@ import { STAKE_POOL_TOOLTIP_HOVER_WAIT } from '../../../config/timingConfig';
 import StakePool from '../../../domains/StakePool';
 import TooltipPool from './TooltipPool';
 import styles from './PoolPopOver.scss';
+import TopLevelPopOver from '../../widgets/TopLevelPopOver';
 
 /**
  * Stake pool tooltip component that can be wrapped around
@@ -52,9 +53,8 @@ export function PoolPopOver(props: {
         {props.children}
       </div>
       {isHovered ? ( // Init the pop over only when the target is hovered
-        <PopOver
+        <TopLevelPopOver
           interactive
-          zIndex={10000}
           className="PoolPopOver"
           delay={props.openWithDelay ? STAKE_POOL_TOOLTIP_HOVER_WAIT : 0}
           duration={0}

source/renderer/app/components/staking/widgets/TooltipPool.tsx

@@ -39,6 +39,7 @@ import {
   IS_RANKING_DATA_AVAILABLE,
   IS_SATURATION_DATA_AVAILABLE,
 } from '../../../config/stakingConfig';
+import TopLevelPopOver from '../../widgets/TopLevelPopOver';
 
 const messages = defineMessages({
   ranking: {
@@ -388,7 +389,7 @@ class TooltipPool extends Component<Props, State> {
                 <div className={styles.fieldLabel}>
                   {intl.formatMessage(messages[field.key])}
                 </div>
-                <PopOver
+                <TopLevelPopOver
                   offset={[0, 10]}
                   key={field.key}
                   content={
@@ -402,7 +403,7 @@ class TooltipPool extends Component<Props, State> {
                   <div className={styles.questionMark}>
                     <SVGInline svg={questionMarkIcon} />
                   </div>
-                </PopOver>
+                </TopLevelPopOver>
               </div>
             </div>
           );

source/renderer/app/components/wallet/WalletCreateDialog.tsx

@@ -25,6 +25,7 @@ import { FORM_VALIDATION_DEBOUNCE_WAIT } from '../../config/timingConfig';
 import { submitOnEnter } from '../../utils/form';
 import infoIconInline from '../../assets/images/info-icon.inline.svg';
 import LoadingSpinner from '../widgets/LoadingSpinner';
+import TopLevelPopOver from '../widgets/TopLevelPopOver';
 
 const messages = defineMessages({
   dialogTitle: {
@@ -278,13 +279,12 @@ class WalletCreateDialog extends Component<Props, State> {
                 onKeyPress={this.handleSubmitOnEnter}
                 {...spendingPasswordField.bind()}
               />
-              <PopOver
-                zIndex={10000}
+              <TopLevelPopOver
                 content={<FormattedHTMLMessage {...messages.passwordTooltip} />}
                 key="tooltip"
               >
                 <SVGInline svg={infoIconInline} className={styles.infoIcon} />
-              </PopOver>
+              </TopLevelPopOver>
             </div>
             <div className={styles.spendingPasswordField}>
               <PasswordInput

source/renderer/app/components/wallet/WalletRestoreDialog.tsx

@@ -38,6 +38,7 @@ import {
 } from '../../config/cryptoConfig';
 import infoIconInline from '../../assets/images/info-icon.inline.svg';
 import LoadingSpinner from '../widgets/LoadingSpinner';
+import TopLevelPopOver from '../widgets/TopLevelPopOver';
 
 const messages = defineMessages({
   title: {
@@ -608,12 +609,12 @@ class WalletRestoreDialog extends Component<Props, State> {
                 onKeyPress={this.handleSubmitOnEnter}
                 {...spendingPasswordField.bind()}
               />
-              <PopOver
+              <TopLevelPopOver
                 content={<FormattedHTMLMessage {...messages.passwordTooltip} />}
                 key="tooltip"
               >
                 <SVGInline svg={infoIconInline} className={styles.infoIcon} />
-              </PopOver>
+              </TopLevelPopOver>
             </div>
             <div className={styles.spendingPasswordField}>
               <PasswordInput

source/renderer/app/components/wallet/send-form/WalletSendAssetsConfirmationDialog.tsx

@@ -30,6 +30,7 @@ import { getMessages } from './WalletSendAssetsConfirmationDialog.messages';
 import { shouldShowEmptyWalletWarning } from '../../../utils/walletUtils';
 import { hasTokensLeftAfterTransaction } from '../../../utils/assets';
 import globalMessages from '../../../i18n/global-messages';
+import TopLevelPopOver from '../../widgets/TopLevelPopOver';
 
 const SHOW_TOTAL_AMOUNT = false;
 type Props = {
@@ -382,7 +383,7 @@ class WalletSendAssetsConfirmationDialog extends Component<Props, State> {
                             {intl.formatMessage(
                               messages.unformattedAmountLabel
                             )}
-                            <PopOver
+                            <TopLevelPopOver
                               content={
                                 <div className="UnformattedAmountTooltip">
                                   <FormattedHTMLMessage
@@ -400,7 +401,7 @@ class WalletSendAssetsConfirmationDialog extends Component<Props, State> {
                               <div className={styles.questionMark}>
                                 <SVGInline svg={questionMarkIcon} />
                               </div>
-                            </PopOver>
+                            </TopLevelPopOver>
                             {':'}
                           </div>
                           <div className={styles.unformattedAmount}>

source/renderer/app/components/wallet/wallet-import/WalletSelectImportDialog.tsx

@@ -28,6 +28,7 @@ import checkmarkImage from '../../../assets/images/check-w.inline.svg';
 import { MAX_ADA_WALLETS_COUNT } from '../../../config/numbersConfig';
 import type { ExportedByronWallet } from '../../../types/walletExportTypes';
 import Dialog from '../../widgets/Dialog';
+import TopLevelPopOver from '../../widgets/TopLevelPopOver';
 
 const messages = defineMessages({
   title: {
@@ -416,7 +417,7 @@ class WalletSelectImportDialog extends Component<Props> {
                     </div>
                     <div className={styles.walletsInputField}>
                       {!wallet.name ? (
-                        <PopOver
+                        <TopLevelPopOver
                           content={intl.formatMessage(
                             messages.enterWalletNameTooltip
                           )}
@@ -430,7 +431,7 @@ class WalletSelectImportDialog extends Component<Props> {
                             nameValidator,
                             onWalletNameChange
                           )}
-                        </PopOver>
+                        </TopLevelPopOver>
                       ) : (
                         <>
                           {this.getInlineEditingSmallInput(

source/renderer/app/components/widgets/TopLevelPopOver.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { PopOver, PopOverProps } from 'react-polymorph/lib/components/PopOver';
+
+const topLevelZIndex = 10000;
+
+const TopLevelPopOver = ({ children, ...props }: PopOverProps) => (
+    <PopOver
+        zIndex={topLevelZIndex}
+        {...props}
+    >
+        {children}
+    </PopOver>
+)
+
+export default TopLevelPopOver;