fix(popover): ios safari not showing the popover

.github/workflows/release.yaml

@@ -62,10 +62,8 @@ jobs:
 
             The IPFS hash of the bundle is `${{ steps.upload.outputs.hash }}`
 
-            Uniswap uses [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)
-            to store your settings.
-            **Beware** that other sites you access via the same IPFS gateway can read and modify your settings on
-            Uniswap without your permission.
+            Uniswap uses [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) to store your settings.
+            **Beware** that other sites you access via the _same_ IPFS gateway can read and modify your settings on Uniswap without your permission.
 
             Preferred URLs:
             - [ipfs://${{ steps.upload.outputs.hash }}/](ipfs://${{ steps.upload.outputs.hash }}/)

package.json

@@ -16,7 +16,8 @@
     "@material-ui/core": "^4.9.5",
     "@mycrypto/eth-scan": "^2.1.0",
     "@popperjs/core": "^2.4.0",
-    "@reach/dialog": "^0.2.8",
+    "@reach/dialog": "^0.10.3",
+    "@reach/portal": "^0.10.3",
     "@reduxjs/toolkit": "^1.3.5",
     "@types/jest": "^25.2.1",
     "@types/node": "^13.13.5",

src/components/Modal/index.tsx

@@ -11,7 +11,7 @@ import { useGesture } from 'react-use-gesture'
 
 // errors emitted, fix with https://github.com/styled-components/styled-components/pull/3006
 const AnimatedDialogOverlay = animated(DialogOverlay)
-const StyledDialogOverlay = styled(AnimatedDialogOverlay)`
+const StyledDialogOverlay = styled(AnimatedDialogOverlay)<{ mobile: boolean }>`
   &[data-reach-dialog-overlay] {
     z-index: 2;
     display: flex;
@@ -95,7 +95,7 @@ interface ModalProps {
   onDismiss: () => void
   minHeight?: number | false
   maxHeight?: number
-  initialFocusRef?: React.Ref<any>
+  initialFocusRef?: React.RefObject<any>
   children?: React.ReactNode
 }
 
@@ -145,7 +145,7 @@ export default function Modal({
                 style={props}
                 onDismiss={onDismiss}
                 initialFocusRef={initialFocusRef}
-                mobile={isMobile}
+                mobile={true}
               >
                 <Spring // animation for entrance and exit
                   from={{
@@ -191,15 +191,9 @@ export default function Modal({
                 style={props}
                 onDismiss={onDismiss}
                 initialFocusRef={initialFocusRef}
-                mobile={isMobile ? isMobile : undefined}
+                mobile={false}
               >
-                <StyledDialogContent
-                  hidden={true}
-                  minHeight={minHeight}
-                  maxHeight={maxHeight}
-                  isOpen={isOpen}
-                  mobile={isMobile ? isMobile : undefined}
-                >
+                <StyledDialogContent hidden={true} minHeight={minHeight} maxHeight={maxHeight} isOpen={isOpen}>
                   <HiddenCloseButton onClick={onDismiss} />
                   {children}
                 </StyledDialogContent>

src/components/Popover/index.tsx

+import { Placement } from '@popperjs/core'
 import { transparentize } from 'polished'
 import React, { useState } from 'react'
-import { createPortal } from 'react-dom'
 import { usePopper } from 'react-popper'
 import styled, { keyframes } from 'styled-components'
 import useInterval from '../../hooks/useInterval'
+import Portal from '@reach/portal'
 
 const fadeIn = keyframes`
   from {
@@ -26,7 +27,6 @@ const fadeOut = keyframes`
 `
 
 const PopoverContainer = styled.div<{ show: boolean }>`
-  position: relative;
   z-index: 9999;
 
   visibility: ${props => (!props.show ? 'hidden' : 'visible')};
@@ -45,7 +45,6 @@ const ReferenceElement = styled.div`
 `
 
 const Arrow = styled.div`
-  position: absolute;
   width: 8px;
   height: 8px;
   z-index: 9998;
@@ -98,42 +97,39 @@ const Arrow = styled.div`
 
 export interface PopoverProps {
   content: React.ReactNode
-  showPopup: boolean
+  show: boolean
   children: React.ReactNode
+  placement?: Placement
 }
 
-export default function Popover({ content, showPopup, children }: PopoverProps) {
+export default function Popover({ content, show, children, placement = 'auto' }: PopoverProps) {
   const [referenceElement, setReferenceElement] = useState<HTMLDivElement>(null)
   const [popperElement, setPopperElement] = useState<HTMLDivElement>(null)
   const [arrowElement, setArrowElement] = useState<HTMLDivElement>(null)
   const { styles, update, attributes } = usePopper(referenceElement, popperElement, {
-    placement: 'auto',
+    placement,
     strategy: 'fixed',
     modifiers: [
       { name: 'offset', options: { offset: [8, 8] } },
       { name: 'arrow', options: { element: arrowElement } }
     ]
   })
-
-  const portal = createPortal(
-    <PopoverContainer show={showPopup} ref={setPopperElement} style={styles.popper} {...attributes.popper}>
-      {content}
-      <Arrow
-        className={`arrow-${attributes.popper?.['data-popper-placement'] ?? ''}`}
-        ref={setArrowElement}
-        style={styles.arrow}
-        {...attributes.arrow}
-      />
-    </PopoverContainer>,
-    document.getElementById('popover-container')
-  )
-
-  useInterval(update, showPopup ? 100 : null)
+  useInterval(update, show ? 100 : null)
 
   return (
     <>
       <ReferenceElement ref={setReferenceElement}>{children}</ReferenceElement>
-      {portal}
+      <Portal>
+        <PopoverContainer show={show} ref={setPopperElement} style={styles.popper} {...attributes.popper}>
+          {content}
+          <Arrow
+            className={`arrow-${attributes.popper?.['data-popper-placement'] ?? ''}`}
+            ref={setArrowElement}
+            style={styles.arrow}
+            {...attributes.arrow}
+          />
+        </PopoverContainer>
+      </Portal>
     </>
   )
 }

src/components/QuestionHelper/index.tsx

-import React, { useState } from 'react'
+import React, { useCallback, useState } from 'react'
 import { HelpCircle as Question } from 'react-feather'
 import styled from 'styled-components'
 import Tooltip from '../Tooltip'
@@ -23,22 +23,15 @@ const QuestionWrapper = styled.div`
 `
 
 export default function QuestionHelper({ text, disabled }: { text: string; disabled?: boolean }) {
-  const [showPopup, setShowPopup] = useState<boolean>(false)
+  const [show, setShow] = useState<boolean>(false)
+
+  const open = useCallback(() => setShow(true), [setShow])
+  const close = useCallback(() => setShow(false), [setShow])
 
   return (
     <span style={{ marginLeft: 4 }}>
-      <Tooltip text={text} showPopup={showPopup && !disabled}>
-        <QuestionWrapper
-          onClick={() => {
-            setShowPopup(true)
-          }}
-          onMouseEnter={() => {
-            setShowPopup(true)
-          }}
-          onMouseLeave={() => {
-            setShowPopup(false)
-          }}
-        >
+      <Tooltip text={text} show={show && !disabled}>
+        <QuestionWrapper onClick={open} onMouseEnter={open} onMouseLeave={close}>
           <Question size={16} />
         </QuestionWrapper>
       </Tooltip>

src/components/SearchModal/SortButton.tsx

@@ -18,19 +18,14 @@ export const FilterWrapper = styled(RowFixed)`
 `
 
 export default function SortButton({
-  title,
   toggleSortOrder,
   ascending
 }: {
-  title: string
   toggleSortOrder: () => void
   ascending: boolean
 }) {
   return (
     <FilterWrapper onClick={toggleSortOrder}>
-      <Text fontSize={14} fontWeight={500}>
-        {title}
-      </Text>
       <Text fontSize={14} fontWeight={500}>
         {ascending ? '↑' : '↓'}
       </Text>

src/components/SearchModal/index.tsx

@@ -155,7 +155,8 @@ function SearchModal({
           </RowBetween>
           <Tooltip
             text="Import any token into your list by pasting the token address into the search field."
-            showPopup={tooltipOpen}
+            show={tooltipOpen}
+            placement="bottom"
           >
             <SearchInput
               type={'text'}
@@ -175,11 +176,7 @@ function SearchModal({
               {isTokenView ? 'Token Name' : 'Pool Name'}
             </Text>
             {isTokenView && (
-              <SortButton
-                ascending={invertSearchOrder}
-                toggleSortOrder={() => setInvertSearchOrder(iso => !iso)}
-                title="Your Balances"
-              />
+              <SortButton ascending={invertSearchOrder} toggleSortOrder={() => setInvertSearchOrder(iso => !iso)} />
             )}
           </RowBetween>
         </PaddedColumn>
@@ -210,7 +207,7 @@ function SearchModal({
             <div>
               {isTokenView ? (
                 <Text fontWeight={500} color={theme.text2} fontSize={14}>
-                  <StyledLink onClick={openTooltip}>Having trouble importing a token?</StyledLink>
+                  <StyledLink onClick={openTooltip}>Having trouble finding a token?</StyledLink>
                 </Text>
               ) : (
                 <Text fontWeight={500}>

src/hooks/useInterval.ts

@@ -16,6 +16,7 @@ export default function useInterval(callback: () => void, delay: null | number)
     }
 
     if (delay !== null) {
+      tick()
       const id = setInterval(tick, delay)
       return () => clearInterval(id)
     }