UI-REACT: Confirm transaction modal auto closing in Tonkeeper browser

Yaroslav-Bulavin commented 4 months ago

Describe the bug

So, in localhost and TMA - sendTransaction works perfectly. But, If I use my app in Tonkeeper browser - it immediately closes the confirm transaction popup, so I can't make the transaction. Example:

https://github.com/ton-connect/sdk/assets/59208843/8655dd09-352a-416b-9a48-cd2e770f0ec9

My code: tonkeeperbug4

If I add config param into sendTransaction method { modals: ['before', 'success', 'error'] } App won't show me confirm transaction popup. Instead of this, it will show me canceled transaction popup. Example:

https://github.com/ton-connect/sdk/assets/59208843/ce259215-68b3-4490-bffd-22a8adbdf730

My package.json: { "name": "XXXXXXXXXX", "version": "0.1.0", "private": true, "dependencies": { "@chakra-ui/react": "^2.8.0", "@craco/craco": "^7.1.0", "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@kloktunov/react-telegram-webapp": "^1.1.3", "@reduxjs/toolkit": "^1.9.5", "@telegram-auth/react": "^1.0.3", "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^13.0.0", "@testing-library/user-event": "^13.2.1", "@tonconnect/ui-react": "^2.0.2", "@types/jest": "^29.5.4", "@types/node": "^16.7.13", "@types/react": "^18.0.0", "@types/react-dom": "^18.0.0", "crypto-js": "^4.2.0", "dayjs": "^1.11.10", "ethers": "^6.13.1", "framer-motion": "^10.16.4", "html-react-parser": "^5.0.7", "i18next": "^23.5.1", "i18next-browser-languagedetector": "^7.1.0", "i18next-http-backend": "^2.2.2", "lodash": "^4.17.21", "lottie-react-web": "^2.2.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-google-recaptcha-v3": "^1.10.1", "react-hook-form": "^7.47.0", "react-i18next": "^13.2.2", "react-intersection-observer": "^9.8.2", "react-outside-click-handler": "^1.3.0", "react-redux": "^8.1.2", "react-router-dom": "^6.15.0", "react-scripts": "5.0.1", "typescript": "^4.4.2", "viem": "^2.7.19", "web-vitals": "^2.1.0" }, "scripts": { "start": "craco start", "build": "craco build", "test": "craco test", "eject": "craco eject", "lint": "eslint . --ext .js,.ts,.tsx", "lint:fix": "eslint . --ext .js,.ts,.tsx --fix" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "devDependencies": { "@babel/plugin-proposal-private-property-in-object": "^7.21.11", "@types/crypto-js": "^4.2.2", "@types/react-outside-click-handler": "^1.3.3", "@typescript-eslint/eslint-plugin": "^6.5.0", "@typescript-eslint/parser": "^6.5.0", "eslint": "^8.48.0", "eslint-config-prettier": "^9.0.0", "eslint-config-standard-with-typescript": "^39.0.0", "eslint-import-resolver-alias": "^1.1.2", "eslint-plugin-import": "^2.28.1", "eslint-plugin-n": "^16.0.2", "eslint-plugin-prettier": "^5.0.0", "eslint-plugin-promise": "^6.1.1", "eslint-plugin-react": "^7.33.2", "prettier": "^3.0.2" }, "browserslist": { "production": [ "chrome >= 67", "edge >= 79", "firefox >= 68", "opera >= 54", "safari >= 14" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } } My index.tsx: tonkeeperbug3

Expected behavior

App opens ton-connect confirm transaction modal and then tonkeeper confirm transaction modal

Current behavior

1.ton-connect confirm transaction modal blinks and tonkeeper confirm transaction modal doesn't appear OR

ton-connect canceled transaction modal opening instead of confirm transaction modal

Steps to Reproduce

put app link into Tonkeeper browser search bar
click on black send ton tx button

Environment

Iphone 11 IOS 17.5.1 Tonkeeper mobile app v4.6.3 "@tonconnect/ui-react": "^2.0.2"

Additional context

No response

Yaroslav-Bulavin commented 4 months ago

UPD: Connection is restored, wallet persist and connected - but the app throw an error tonkeepbb tonkeepbb2

unsphere commented 4 months ago

I get the same error: [TON_CONNECT_SDK_ERROR] P: App tries to send rpc request to the injected wallet while not connected. Unknown app only in wallet browsers like Tonkeeper Browser for all sendTransaction. In web it is working fine. Same error also happens with the latest version 2.0.6. Any idea how to fix this?

Yaroslav-Bulavin commented 2 months ago

@unsphere So, for me, the issue causes due to different base URL of tonconnect-manifest file. If your manifestURL in TonConnectProvider is https://dev-my-site/tonconnect-manifest.json but you view as example prod version of the app https://prod-my-site - the manifestURL should have THE SAME BASE URL with your current app. Of course You need to have tonconnect-manifest.json in a public folder. It's strange because in all browsers except Tonkeeper browser if you have tonconnect-manifest.json file on another domain - you can use it without any errors, but for Tonkeeper browser you should use the same domain - and it will work. I hope it was able to solve your issue.

ton-connect / sdk