diff --git a/advanced/wallets/react-wallet-v2/src/components/Modal.tsx b/advanced/wallets/react-wallet-v2/src/components/Modal.tsx
index d706312..5bcec4d 100644
--- a/advanced/wallets/react-wallet-v2/src/components/Modal.tsx
+++ b/advanced/wallets/react-wallet-v2/src/components/Modal.tsx
@@ -16,6 +16,7 @@ import { Modal as NextModal } from '@nextui-org/react'
import { useSnapshot } from 'valtio'
import { useCallback, useMemo } from 'react'
import AuthRequestModal from '@/views/AuthRequestModal'
+import LoadingModal from '@/views/LoadingModal'
export default function Modal() {
const { open, view } = useSnapshot(ModalStore.state)
@@ -56,6 +57,8 @@ export default function Modal() {
return
case 'AuthRequestModal':
return
+ case 'LoadingModal':
+ return
default:
return null
}
diff --git a/advanced/wallets/react-wallet-v2/src/pages/walletconnect.tsx b/advanced/wallets/react-wallet-v2/src/pages/walletconnect.tsx
index 5a69f20..b2029d5 100644
--- a/advanced/wallets/react-wallet-v2/src/pages/walletconnect.tsx
+++ b/advanced/wallets/react-wallet-v2/src/pages/walletconnect.tsx
@@ -3,7 +3,7 @@ import PageHeader from '@/components/PageHeader'
import QrReader from '@/components/QrReader'
import { web3wallet } from '@/utils/WalletConnectUtil'
import { Button, Input, Loading, Text } from '@nextui-org/react'
-import { Fragment, useMemo, useState } from 'react'
+import { Fragment, useEffect, useState } from 'react'
import { styledToast } from '@/utils/HelperUtil'
import ModalStore from '@/store/ModalStore'
@@ -27,7 +27,6 @@ export default function WalletConnectPage(params: { deepLink?: string }) {
})
try {
setLoading(true)
- ModalStore.open('SessionProposalModal', {})
web3wallet.core.pairing.events.on('pairing_expire', pairingExpiredListener)
await web3wallet.pair({ uri })
} catch (error) {
@@ -39,7 +38,7 @@ export default function WalletConnectPage(params: { deepLink?: string }) {
}
}
- useMemo(() => {
+ useEffect(() => {
if (deepLink) {
onConnect(deepLink)
}
@@ -48,34 +47,35 @@ export default function WalletConnectPage(params: { deepLink?: string }) {
return (
+ <>
+
-
+
+ or use walletconnect uri
+
-
- or use walletconnect uri
-
-
- setUri(e.target.value)}
- value={uri}
- data-testid="uri-input"
- contentRight={
-
- }
- />
+ setUri(e.target.value)}
+ value={uri}
+ data-testid="uri-input"
+ contentRight={
+
+ }
+ />
+
)
}
diff --git a/advanced/wallets/react-wallet-v2/src/pages/wc.tsx b/advanced/wallets/react-wallet-v2/src/pages/wc.tsx
index 2b96187..2fada37 100644
--- a/advanced/wallets/react-wallet-v2/src/pages/wc.tsx
+++ b/advanced/wallets/react-wallet-v2/src/pages/wc.tsx
@@ -1,14 +1,46 @@
import { Text } from '@nextui-org/react'
-import { Fragment } from 'react'
+import { Fragment, useCallback, useEffect, useState } from 'react'
import { useRouter } from 'next/router'
import WalletConnectPage from './walletconnect'
+import ModalStore from '@/store/ModalStore'
+import { useSnapshot } from 'valtio'
export default function DeepLinkPairingPage() {
+ const state = useSnapshot(ModalStore.state)
const router = useRouter()
+ const [loadingMessage, setLoadingMessage] = useState('')
+ const [requestTimeout, setRequestTimeout] = useState(null)
const uri = router.query.uri as string
const requestId = router.query.requestId as string
+ const removeTimeout = useCallback(() => {
+ if (requestTimeout) {
+ clearTimeout(requestTimeout)
+ }
+ }, [requestTimeout])
+
+ useEffect(() => {
+ if (state.view == 'LoadingModal') {
+ const timeout = setTimeout(() => {
+ setLoadingMessage('Your request is taking longer than usual. Feel free to try again.')
+ }, 15_000)
+ setRequestTimeout(timeout)
+ } else if (state.view) {
+ removeTimeout()
+ }
+ }, [state.view])
+
+ useEffect(() => {
+ if (requestId) {
+ ModalStore.open('LoadingModal', { loadingMessage })
+ }
+
+ if (uri) {
+ ModalStore.open('LoadingModal', { loadingMessage })
+ }
+ }, [uri, requestId, loadingMessage])
+
if (!uri && !requestId) {
return (
diff --git a/advanced/wallets/react-wallet-v2/src/store/ModalStore.ts b/advanced/wallets/react-wallet-v2/src/store/ModalStore.ts
index 65402ee..2de686a 100644
--- a/advanced/wallets/react-wallet-v2/src/store/ModalStore.ts
+++ b/advanced/wallets/react-wallet-v2/src/store/ModalStore.ts
@@ -10,6 +10,7 @@ interface ModalData {
requestEvent?: SignClientTypes.EventArguments['session_request']
requestSession?: SessionTypes.Struct
request?: Web3WalletTypes.AuthRequest
+ loadingMessage?: string
}
interface State {
@@ -29,6 +30,7 @@ interface State {
| 'SessionSignTezosModal'
| 'SessionSignKadenaModal'
| 'AuthRequestModal'
+ | 'LoadingModal'
data?: ModalData
}
diff --git a/advanced/wallets/react-wallet-v2/src/views/LoadingModal.tsx b/advanced/wallets/react-wallet-v2/src/views/LoadingModal.tsx
new file mode 100644
index 0000000..728d2b6
--- /dev/null
+++ b/advanced/wallets/react-wallet-v2/src/views/LoadingModal.tsx
@@ -0,0 +1,34 @@
+import { Col, Divider, Link, Loading, Row, Text, styled } from '@nextui-org/react'
+import { CoreTypes } from '@walletconnect/types'
+import NewReleasesIcon from '@mui/icons-material/NewReleases'
+import RequestModalContainer from '@/components/RequestModalContainer'
+import { useSnapshot } from 'valtio'
+import ModalStore from '@/store/ModalStore'
+
+export default function LoadingModal() {
+ const state = useSnapshot(ModalStore.state)
+ const message = state.data?.loadingMessage
+
+ return (
+
+
+
+
+
+
+
+
+
+ Loading your request...
+
+
+ {message ? (
+
+ ) : null}
+
-
- Attempting to pair...
-
-
- ) : (
+ return (