search

WalletConnect / modal-react-native

Simplest and most minimal way to connect your users with WalletConnect
https://docs.walletconnect.com/2.0/advanced/walletconnectmodal/about?platform=react-native
Apache License 2.0
31 stars 9 forks source link

[bug]: Error initializing WalletConnect SDK [TypeError: undefined is not an object (evaluating 'source.length')] #89

Closed Francis11h closed 11 months ago

Francis11h commented 12 months ago

Description

after following this guide: https://docs.walletconnect.com/advanced/walletconnectmodal/usage try to integrate WalletConnectModal into my project, every time show this error

image

WalletConnect Modal SDK version

1.0.0-rc.11

Output of npx react-native info

System: OS: macOS 13.5 CPU: (10) arm64 Apple M1 Pro Memory: 527.23 MB / 16.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 18.17.1 path: ~/.nvm/versions/node/v18.17.1/bin/node Yarn: version: 1.22.17 path: /usr/local/bin/yarn npm: version: 9.6.7 path: ~/.nvm/versions/node/v18.17.1/bin/npm Watchman: version: 2023.08.07.00 path: /opt/homebrew/bin/watchman Managers: CocoaPods: version: 1.12.1 path: /opt/homebrew/bin/pod SDKs: iOS SDK: Platforms:

Expo Version (if applies)

No response

Steps to reproduce

totally follow this guide : https://docs.walletconnect.com/advanced/walletconnectmodal/usage

Snack, code example, screenshot, or link to a repository

import React, { useEffect, useMemo, useState } from 'react' import { SafeAreaView, StyleSheet, Text, TouchableOpacity, View } from 'react-native' import { useWalletConnectModal, WalletConnectModal } from '@walletconnect/modal-react-native' import Clipboard from '@react-native-clipboard/clipboard' import { numberToHex, sanitizeHex } from '@walletconnect/encoding' import { ethers } from 'ethers' import { Web3Provider } from '@ethersproject/providers' import ContractUtils from './utils/ContractUtils' import ConfigUtils from './utils/ConfigUtils' import { RequestModal } from './components/RequestModal'

const WalletConnectModalPage: React.FC = () => { const { isConnected, provider, open, address, isOpen } = useWalletConnectModal() const [client, setClient] = useState() const [modalVisible, setModalVisible] = useState(false) const [rpcResponse, setRpcResponse] = useState() const [loading, setLoading] = useState(false)

// Init ethers client when the wallet is connected useEffect(() => { if (isConnected && provider) { const _client = new ethers.providers.Web3Provider(provider) console.log('init ethers when the wallet is connected, _client ...', _client) setClient(_client) } }, [isConnected, provider])

const onConnect = async () => { if (isConnected) { return provider?.disconnect() } return await open() }

const onCopy = (value: string) => { Clipboard.setString(value) }

const onResponse = (response: any) => { setRpcResponse(response) setLoading(false) }

const onModalClose = () => { setModalVisible(false) setLoading(false) setRpcResponse(undefined) }

const onAction = (callback: any) => async () => { try { setLoading(true) setModalVisible(true) const response = await callback() onResponse(response) } catch (error: any) { onResponse({ error: error?.message || 'error' }) } }

const onSendTransaction = async () => { if (!client) { return }

const signer = client.getSigner()

const { chainId } = await client.getNetwork()

const amount = sanitizeHex(numberToHex(0.0001))
const transaction = {
  to: '0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045', // vitalik.eth
  value: amount,
  chainId
}

// Send the transaction using the signer
const txResponse = await signer.sendTransaction(transaction)
const transactionHash = txResponse.hash
console.log('transactionHash is ' + transactionHash)

// Wait for the transaction to be mined (optional)
const receipt = await txResponse.wait()
console.log('Transaction was mined in block:', receipt.blockNumber)

return {
  method: 'send transaction',
  blockNumber: receipt.blockNumber,
  result: transactionHash
}

}

const onSignMessage = async () => { if (!client) { return }

const [address] = await client.listAccounts()
const signer = client.getSigner(address)

const signature = await signer?.signMessage('Hello World!')
return {
  method: 'sign message',
  signature: signature
}

}

const onReadContract = async () => { const contract = new ethers.Contract(ContractUtils.contractAddress, ContractUtils.goerliABI, client)

// Read contract information
const totalSupply = await contract.totalSupply()

return {
  method: 'read contract',
  data: totalSupply
}

}

const onWriteContract = async () => { if (!client) { return }

const [address] = await client.listAccounts()
const signer = client.getSigner(address)

const contract = new ethers.Contract(ContractUtils.contractAddress, ContractUtils.goerliABI, signer)

const receipt = await contract.mint()
const hash = receipt.hash
console.log('receipt', receipt)
return {
  method: 'write contract',
  response: hash
}

}

return (

{isConnected ? 'Disconnect' : 'Connect'} Send Transaction Sign Message Read Contract Write Contract

) }

const styles = StyleSheet.create({ container: { alignItems: 'center', height: '100%', justifyContent: 'center' }, button: { justifyContent: 'center', alignItems: 'center', backgroundColor: '#3396FF', borderRadius: 20, width: 200, height: 50, borderWidth: 1, borderColor: 'rgba(0, 0, 0, 0.1)', marginTop: 4 }, buttonDisabled: { backgroundColor: '#999' }, buttonText: { color: 'white', fontWeight: '700' } })

export default WalletConnectModalPage

ducsilva commented 11 months ago

the same me

Francis11h commented 11 months ago

@ignaciosantise

ignaciosantise commented 11 months ago

Hey @Francis11h! can you provide a repository with the reproducible issue?

you can run npx react-native@latest init ModalExample and add the code there

ignaciosantise commented 11 months ago

Closing this as i cannot reproduce it. If it's still happing, please provide a public repository with the reproducible issue