I have a React App which I am using the default Injector Provider Metamask and WalletConnect. But it seems like the WalletConnect provider always had issues. With some fixes gathered from all over the internet it seems like at one point I have made it work. That changed a few days when something in the Trust Wallet code or WalletConnect code changed and it DOES NOT work anymore.
Package.json
{
"name": "uim-staking",
"version": "0.1.0",
"private": true,
"homepage": ".",
"dependencies": {
"@chakra-ui/icons": "^1.1.1",
"@chakra-ui/react": "^1.8.1",
"@emotion/react": "^11.7.1",
"@emotion/styled": "^11.6.0",
"@fortawesome/fontawesome-svg-core": "^1.2.36",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/react-fontawesome": "^0.1.17",
"@fullpage/react-fullpage": "^0.1.22",
"@nivo/core": "^0.79.0",
"@nivo/line": "^0.79.1",
"@walletconnect/web3-provider": "^1.7.8",
"arweave": "^1.10.23",
"axios": "^0.26.1",
"env-cmd": "^10.1.0",
"framer-motion": "^4.1.17",
"magic-sdk": "^7.0.0",
"moralis": "^1.5.11",
"react": "^17.0.2",
"react-countdown": "^2.3.2",
"react-countup": "^6.1.1",
"react-dom": "^17.0.2",
"react-error-overlay": "6.0.9",
"react-google-recaptcha": "^2.1.0",
"react-live-clock": "^5.7.0",
"react-moralis": "^1.2.1",
"react-router-dom": "^6.2.1",
"react-scripts": "4.0.3",
"uuidv4": "^6.2.12",
"web-vitals": "^2.1.4"
},
"scripts": {
"start-mainnet": "HTTPS=true env-cmd -f .env.production.local react-scripts start",
"start-mainnet-http": "env-cmd -f .env.production.local react-scripts start",
"start-testnet": "HTTPS=true env-cmd -f .env.staging react-scripts start",
"start-testnet-http": "env-cmd -f .env.staging react-scripts start",
"build-mainnet": "env-cmd -f .env.production react-scripts build",
"build-testnet": "env-cmd -f .env.staging react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
The code I am using for authentication is the following:
if (provider === "walletconnect") {
authenticate({
provider: "walletconnect",
chainId: 56,
mobileLinks: ["metamask", "trust"],
signingMessage: "Universe Island Marketplace Authentication",
}).then(function (user) {
window.location.reload();
onClose();
});
}
The problem with this code is that on iOS there was a bug sometime ago which instead of opening the Trust Wallet app directly, a redirect to the Trust Wallet page link is made instead which of directly opening the app.
Like someone reported recently the same stuff, Trust Wallet via WalletConnect not connecting on mobile / iOS, this seems to be a bug related to Trust Wallet. There was a piece of code which previously prevented the redirect.
document.addEventListener('visibilitychange', () => {
if (document.visibilityState === 'hidden') {
window.localStorage.removeItem('WALLETCONNECT_DEEPLINK_CHOICE');
}
});
But this code, instead of preventing the redirect now it does not prevent the redirect at all, what it does is prevent the Trust Wallet from opening. When doing an executeFunction(…) on iOS Safari, iOS Chrome the Trust Wallet app is not opened automatically even though the transaction call is sent to it and the user has to manually switch apps to the Trust Wallet and accept the call. Authentication also sometimes work, sometimes does not.