Merge pull request #2506 from CityOfZion/CU-864efmq36-3

CU-864efmq36 - Change NWD to use wallet-connect-sdk-wallet-react - Fix deeplink
CityOfZion · Jul 11, 2023 · 5d4a522 · 5d4a522
2 parents cbf29a5 + dd5e164
commit 5d4a522
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 62 deletions.
diff --git a/app/components/ConnectDapp/ConnectionUrlForm/ConnectionUrlForm.jsx b/app/components/ConnectDapp/ConnectionUrlForm/ConnectionUrlForm.jsx
@@ -1,5 +1,5 @@
 // @flow
-import React, { useState } from 'react'
+import React, { useRef, useState } from 'react'
 
 import { ROUTES } from '../../../core/constants'
 import CloseButton from '../../CloseButton'
@@ -15,16 +15,16 @@ type Props = {
 
 const ConnectionUrlForm = ({ onURI }: Props) => {
   const [url, setUrl] = useState('')
-  const [buttonDisabled, setButtonDisabled] = useState(false)
+  const buttonDisabled = useRef(false)
 
-  async function handleSubmit() {
-    if (buttonDisabled) return
+  const handleSubmit = async (uri: string) => {
+    if (buttonDisabled.current) return
+    buttonDisabled.current = true
 
-    setButtonDisabled(true)
     try {
-      await onURI(url)
+      await onURI(uri)
     } finally {
-      setButtonDisabled(false)
+      buttonDisabled.current = false
     }
   }
 
@@ -47,7 +47,7 @@ const ConnectionUrlForm = ({ onURI }: Props) => {
       )}
       renderInstructions={renderInstructions}
     >
-      <form className={styles.form} onSubmit={handleSubmit}>
+      <form className={styles.form} onSubmit={() => handleSubmit(url)}>
         <TextInput
           name="dApp URL"
           label="Scan or Paste URL"

diff --git a/app/containers/App/App.jsx b/app/containers/App/App.jsx
@@ -55,7 +55,7 @@ const App = ({
   showInfoNotification,
 }: Props) => {
   const { requests, sessions, disconnect } = useWalletConnectWallet()
-  const [queuedWcReroute, setQueuedWcReroute] = React.useState(null)
+  const [deeplinkUri, setDeeplinkUri] = React.useState(null)
 
   useEffect(() => {
     async function handleUpgrade() {
@@ -73,25 +73,24 @@ const App = ({
 
   useEffect(
     () => {
-      const handle = (event, url) => {
+      const handle = (_event, url) => {
         const { uri } = parseQuery(decodeURI(url))
-        if (uri) {
-          if (address) {
-            history[
-              history.location.pathname === ROUTES.CONNECT_DAPP
-                ? 'replace'
-                : 'push'
-            ]({
-              pathname: ROUTES.CONNECT_DAPP,
-              state: { uri },
-            })
-          } else {
-            showInfoNotification({
-              message: 'Please login before connecting to a dApp.',
-            })
-            setQueuedWcReroute(uri)
-          }
+        if (!uri) return
+
+        if (!address) {
+          showInfoNotification({
+            message: 'Please login before connecting to a dApp.',
+          })
+          setDeeplinkUri(uri)
+          return
         }
+
+        history[
+          history.location.pathname === ROUTES.CONNECT_DAPP ? 'replace' : 'push'
+        ]({
+          pathname: ROUTES.CONNECT_DAPP,
+          state: { uri },
+        })
       }
 
       ipc.on('link', handle)
@@ -105,19 +104,15 @@ const App = ({
 
   useEffect(
     () => {
-      if (queuedWcReroute && address) {
-        setTimeout(() => {
-          // Add a timeout so that the dashboard still loads
-          // before redirecting to the connect dapp screen
-          setQueuedWcReroute(null)
-          history.push({
-            pathname: ROUTES.CONNECT_DAPP,
-            state: { uri: queuedWcReroute },
-          })
-        }, 1000)
-      }
+      if (!deeplinkUri || !address) return
+
+      setDeeplinkUri(null)
+      history.push({
+        pathname: ROUTES.CONNECT_DAPP,
+        state: { uri: deeplinkUri },
+      })
     },
-    [address, queuedWcReroute, history],
+    [address, deeplinkUri, history],
   )
 
   useEffect(

diff --git a/app/containers/ConnectDapp/ConnectDapp.jsx b/app/containers/ConnectDapp/ConnectDapp.jsx
@@ -1,4 +1,3 @@
-/* eslint-disable no-nested-ternary */
 // @flow
 import React, { useCallback, useEffect, useState, useMemo } from 'react'
 
@@ -18,21 +17,22 @@ const CONNECTION_STEPS = {
   LOADING: 'LOADING',
 }
 
-const ConnectDapp = ({ history, showErrorNotification }: Props) => {
+const ConnectDapp = ({ showErrorNotification, history }: Props) => {
+  const uri = history.location?.state?.uri
   const { connect, proposals } = useWalletConnectWallet()
 
-  const [connectionStep, setConnectionStep] = useState(
-    CONNECTION_STEPS.ENTER_URL,
-  )
+  const [connectionStep, setConnectionStep] = useState()
 
   const proposal = useMemo(() => proposals[0], [proposals])
 
   const handleOnURI = useCallback(
     async uri => {
-      setConnectionStep(true)
+      setConnectionStep(CONNECTION_STEPS.LOADING)
+
       try {
         await connect(uri)
       } catch (error) {
+        setConnectionStep(CONNECTION_STEPS.ENTER_URL)
         showErrorNotification({
           message: `An error occurred attempting to connect to a dapp: ${
             error.message
@@ -43,37 +43,31 @@ const ConnectDapp = ({ history, showErrorNotification }: Props) => {
     [connect, showErrorNotification],
   )
 
-  // Effect for handling passing URI as query param to component
   useEffect(
     () => {
-      if (
-        !history.location ||
-        !history.location.state ||
-        !history.location.state.uri
-      )
+      if (!proposal) {
+        setConnectionStep(CONNECTION_STEPS.ENTER_URL)
         return
+      }
 
-      const decoded = atob(history.location.state.uri)
-      handleOnURI(decoded)
+      setConnectionStep(CONNECTION_STEPS.APPROVE_CONNECTION)
     },
-    [history, handleOnURI],
+    [proposal],
   )
 
   useEffect(
     () => {
-      if (!proposal) {
-        setConnectionStep(CONNECTION_STEPS.ENTER_URL)
-        return
-      }
+      if (!uri) return
 
-      setConnectionStep(CONNECTION_STEPS.APPROVE_CONNECTION)
+      const decoded = atob(uri)
+      handleOnURI(decoded)
     },
-    [proposal],
+    [uri, handleOnURI],
   )
 
-  return connectionStep === CONNECTION_STEPS.LOADING ? (
-    <ConnectionLoader />
-  ) : connectionStep === CONNECTION_STEPS.APPROVE_CONNECTION ? (
+  if (connectionStep === CONNECTION_STEPS.LOADING) return <ConnectionLoader />
+
+  return connectionStep === CONNECTION_STEPS.APPROVE_CONNECTION ? (
     <ApproveConnection proposal={proposal} />
   ) : (
     <ConnectionUrlForm onURI={handleOnURI} />