[C-2418] Fix mobile web open in app banner (#3173)

AudiusProject · Apr 7, 2023 · 98c33af · 98c33af
1 parent 443ee56
commit 98c33af
Show file tree

Hide file tree

Showing 7 changed files with 10 additions and 52 deletions.
diff --git a/apps/audius-client/packages/web/scripts/workers-site/index.js b/apps/audius-client/packages/web/scripts/workers-site/index.js
@@ -41,7 +41,10 @@ async function handleEvent(event) {
 
   const is204 = pathname === '/204'
   if (is204) {
-    return new Response(undefined, { status: 204 })
+    const response = new Response(undefined, { status: 204 })
+    response.headers.set('access-control-allow-methods', '*')
+    response.headers.set('access-control-allow-origin', '*')
+    return response
   }
 
   const isBot = checkIsBot(userAgent)

diff --git a/apps/audius-client/packages/web/src/app.tsx b/apps/audius-client/packages/web/src/app.tsx
@@ -20,16 +20,10 @@ import './services/webVitals'
 import './index.css'
 
 type AudiusAppProps = {
-  setReady: () => void
-  isReady: boolean
   shouldShowPopover: boolean
 }
 
-const AudiusApp = ({
-  setReady,
-  isReady,
-  shouldShowPopover
-}: AudiusAppProps) => {
+const AudiusApp = ({ shouldShowPopover }: AudiusAppProps) => {
   return (
     <Provider store={store}>
       <ConnectedRouter history={history}>
@@ -50,8 +44,6 @@ const AudiusApp = ({
                     <AppErrorBoundary>
                       <CoinbasePayButtonProvider>
                         <App
-                          setReady={setReady}
-                          isReady={isReady}
                           mainContentRef={mainContentRef}
                           shouldShowPopover={shouldShowPopover}
                         />

diff --git a/...client/packages/web/src/components/app-redirect-popover/components/AppRedirectPopover.tsx b/...client/packages/web/src/components/app-redirect-popover/components/AppRedirectPopover.tsx
@@ -72,7 +72,6 @@ const springProps = {
 }
 
 type AppRedirectPopoverProps = {
-  enablePopover: boolean
   incrementScroll: () => void
   decrementScroll: () => void
   onBeforeClickApp?: () => void
@@ -85,7 +84,6 @@ type AppRedirectPopoverProps = {
  * if no app is installed.
  */
 export const AppRedirectPopover = ({
-  enablePopover,
   incrementScroll,
   decrementScroll,
   onBeforeClickApp = () => {},
@@ -95,8 +93,8 @@ export const AppRedirectPopover = ({
 
   const [animDelay, setAnimDelay] = useState(false)
   useEffect(() => {
-    enablePopover && setTimeout(() => setAnimDelay(true), 1000)
-  }, [enablePopover])
+    setTimeout(() => setAnimDelay(true), 1000)
+  }, [])
 
   const shouldShow =
     !matchPath(window.location.pathname, { path: '/', exact: true }) &&

diff --git a/apps/audius-client/packages/web/src/pages/App.d.ts b/apps/audius-client/packages/web/src/pages/App.d.ts
@@ -1,8 +1,6 @@
 import { MutableRefObject } from 'react'
 
 type AppProps = {
-  setReady: () => void
-  isReady: boolean
   mainContentRef: MutableRefObject<HTMLDivElement | undefined>
   shouldShowPopover: boolean
 }

diff --git a/apps/audius-client/packages/web/src/pages/App.js b/apps/audius-client/packages/web/src/pages/App.js
@@ -364,21 +364,6 @@ class App extends Component {
       this.setState({ showWeb3ErrorBanner: true })
     }
 
-    // Once the user is loaded, we can mark the page as ready for UI
-    // Alternatively, if the page is the signup page, say we're ready without a user
-    // This is necessary for the AppRedirectPopover to load
-    if (
-      (prevProps.accountStatus === Status.LOADING &&
-        this.props.accountStatus !== Status.LOADING) ||
-      matchPath(getPathname(this.props.location), {
-        path: SIGN_UP_PAGE,
-        exact: true
-      })
-    ) {
-      // Let the UI flush
-      setImmediate(this.props.setReady)
-    }
-
     if (prevProps.theme !== this.props.theme) {
       this.handleTheme()
     }
@@ -452,7 +437,6 @@ class App extends Component {
   render() {
     const {
       theme,
-      isReady,
       incrementScroll,
       decrementScroll,
       shouldShowPopover,
@@ -971,11 +955,9 @@ class App extends Component {
           </Suspense>
         </div>
         <PlayBarProvider />
-
         <Suspense fallback={null}>
           <Modals />
         </Suspense>
-
         {
           <Suspense fallback={null}>
             <ConnectedMusicConfetti />
@@ -986,19 +968,16 @@ class App extends Component {
             <RewardClaimedToast />
           </Suspense>
         }
-
         {/* Non-mobile */}
         {!isMobileClient ? <Konami /> : null}
         {!isMobileClient ? <ConfirmerPreview /> : null}
         {!isMobileClient ? <DiscoveryNodeSelection /> : null}
         {!isMobileClient ? <Visualizer /> : null}
         {!isMobileClient ? <PinnedTrackConfirmation /> : null}
         {!isMobileClient ? <DevModeMananger /> : null}
-
         {/* Mobile-only */}
         {isMobileClient && shouldShowPopover ? (
           <AppRedirectPopover
-            enablePopover={isReady}
             incrementScroll={incrementScroll}
             decrementScroll={decrementScroll}
           />

diff --git a/apps/audius-client/packages/web/src/pages/App.test.tsx b/apps/audius-client/packages/web/src/pages/App.test.tsx
@@ -37,12 +37,7 @@ describe('smoke test', () => {
     ReactDOM.render(
       <Provider store={store}>
         <ConnectedRouter history={history}>
-          <App
-            shouldShowPopover={false}
-            isReady
-            setReady={() => {}}
-            mainContentRef={mainContentRef}
-          />
+          <App shouldShowPopover={false} mainContentRef={mainContentRef} />
         </ConnectedRouter>
       </Provider>,
       rootNode

diff --git a/apps/audius-client/packages/web/src/root.tsx b/apps/audius-client/packages/web/src/root.tsx
@@ -1,4 +1,4 @@
-import { Suspense, useState, useEffect, useCallback, lazy } from 'react'
+import { Suspense, useState, useEffect, lazy } from 'react'
 
 import { useAsync } from 'react-use'
 
@@ -23,7 +23,6 @@ const isPublicSiteSubRoute = (location = window.location) => {
 const clientIsElectron = isElectron()
 
 const Root = () => {
-  const [dappReady, setDappReady] = useState(false)
   const [renderPublicSite, setRenderPublicSite] = useState(isPublicSiteRoute())
   const isMobileClient = useIsMobile()
 
@@ -38,8 +37,6 @@ const Root = () => {
     }
   }, [])
 
-  const setReady = useCallback(() => setDappReady(true), [])
-
   const [shouldShowPopover, setShouldShowPopover] = useState(true)
 
   const shouldRedirectToApp = foundUser && !isPublicSiteSubRoute()
@@ -58,11 +55,7 @@ const Root = () => {
 
   return (
     <>
-      <Dapp
-        isReady={dappReady}
-        setReady={setReady}
-        shouldShowPopover={shouldShowPopover}
-      />
+      <Dapp shouldShowPopover={shouldShowPopover} />
     </>
   )
 }