example 프로젝트에 저희 프로젝트를 넣었더니
저희 프로젝트에 잘 되던 기능들이 고장나네요.
그래서 서버 배포하려면 하나의 프로젝트 루트 파일만 있어야한다고 하길래
다시 저희 프로젝트에 walletconnect 2.0을 넣어보려고 합니다.
깨달음을 얻기 위해 walletconnect 공식 문서를 찾아갔었습니다.
그래서 적용해본 결과 이런 오류가 떴죠.
- Tried to register two views with the same name RNSVGSvgView 오류
ERROR Invariant Violation: Tried to register two views with the same name RNSVGSvgView자주 봤던 에러입니다. 짜증나게 반갑네요.
어쩔까요
구글링 해봐야죠
관련 SOF 문서를 읽어보니 뭐 버전 문제라고 합디다.
npm install react-native-svg@9.6.4를 다운받아주니 잘 돌아가네요 오호라~
그리고 어찌 하다보니 이런 오류가 뜹니다
2. connect wallet 버튼 눌렀더니 뜬 오류
ERROR {"context": "core"} {"context": "core/relayer"} [Error: Socket stalled when trying to connect to wss://relay.walletconnect.com]
ERROR {"context": "core"} {"context": "core/relayer"} [Error: Socket stalled when trying to connect to wss://relay.walletconnect.com]내일 해결해보도록 하죠
내일 모레가 되었습니다.
개발자는 머리를 들어 다시 컴퓨터 화면을 봐주세요.
짜잔!
전날 밤 중에 마피아가 오류를 두고갔습니다!@
개발자는 머리를 굴려 문제를 해결하세요!
구글링 중 이런 글을 발견했습니다
https://velog.io/@emprore/api4700.com.facebook.react.bridge.ReadableNativeArray-cannot-be-cast-abi4700.com-%EC%9D%98-%EC%98%A4%EB%A5%98%EC%9D%98-%EA%B2%BD%EC%9A%B0
에뮬레이터를 삭제하고 yarn start 를 몇 번 반복하다보면 링킹이 되어서 주술사가 마법이라도 부린 듯이 해결되었다고 하네요 그럼 저도 해보겠습니다.
뭐 예상했듯이 될 리가 없죠
그럼 이 문제에 예상되는 다른 원인을 짚어보죠
왠지 왠지 expo가 기대하는 react-native-svg버전과 walletconnect가 사용하는 버전이 달라서 그런 것 같습니다.
그렇다면 어떻게 해야할까요~?
당연 환경 제공자인 expo에 말을 따라야겠죠?
순종적인 태도로 밀고나갑니다.
제가 expo를 바꿀 순 없으니까요
자 그럼 익숙한 오류가 나옵니다
도돌이표를 만나 다시 돌아왔네요
뫼비우스의 띠 같습니다.
이 말도 안 되는 상황이요
하하하
저와 같이하는 팀원이 walletconnect에 직접 질문을 남겼고
이런 답변을 받아서 yarn.lock을 지웠더니 해결되었다고 합니다!
https://github.com/orgs/WalletConnect/discussions/3322
이 결과물 레포지토리를 다시 포크하여 진행을 하였습니다!
그 후에 다시 만난 에러 이름하야 BigInt
[ReferenceError: Can't find variable: BigInt] walletconnect
이런 오류가 뜨네요.
검색해보니 월렛 커넥트 공식 문서에 관련한 installation 조언이 있네요
https://docs.walletconnect.com/2.0/reactnative/walletconnectmodal/installation
Add this line in your project's root file, making sure it's executed before @walletconnect/modal-react-native is imported
랍니다. 그래서 이 코드를 삽입해주면 잘 돌아간다고 하네요
if (typeof BigInt === 'undefined') global.BigInt = require('big-integer')
네 잘 돌아갔습니다
이제는 왜 open만 되고, session connect는 안 되는지 그리고 어떻게 sendTransaction을 보내야하는지를 알아봐야겠네요
walletconnect discussion 페이지에다가
is:open provider method walletconnect/modal-react-native
이렇게 쳐봤더니
https://github.com/orgs/WalletConnect/discussions/2784
이런 좋은 코드 예시가 있는 질문이 나왔습니다
이 질문에서 나온 코드를 보니까
제가 더 자세한 코드를 뜯어봐야겠다고 생각이 들었네요. 분명 나와있는 코드인데
사용법을 모르나 싶어서요
보니까 open 함수를 쓰면 알아서 ConnectWallet 함수가 실행ㅎ되어야 하는 것 같은데 안 되는 걸 보니 이건 제가 제대로 못 쓰고 있는 것 같네요
음 잘 안 돼서
질문을 또 해봤습니다
https://github.com/orgs/WalletConnect/discussions/3439
답이 잘 오길...기원하며 잠시 마무리 하고 다음에 오겠습니다.
답변이 안와서
다른 방식으로 물어봤습니다.
https://github.com/orgs/WalletConnect/discussions/3439
그리고 아무도 답글을 안 달아줘서
제가 달아줬습니다.
제 팀 멤버가 js를 tsx로 바꿔서 시도해보았더니 정상 작동을 했거든요.
그래서 저는 다음 단계로 넘어갑니다.
"어떻게 sendTransaction을 사용하냐!" 입니다.
그래서 관련된 내용이 있는지 discussion에 검색해봤습니다.
https://github.com/orgs/WalletConnect/discussions/2784
나오더라구요
이에서 착안하여
<Pressable onPress={()=>provider?.request({
method: 'eth_sendTransaction',
params: [{
data: "0x1111",
from: address,
to: address,
}]
})
} style={{marginTop:16}}>
<Text>{isConnected ? 'sendTx' : 'Connect'}</Text>
</Pressable>이런 코드를 넣었더니 잘 동작했습니다
끝!
그럼 다음 포스팅은 walletconnect의 추가적인 사용방법에 대해서 말해봅시다!
