React Dapp uses @tronweb3/walletconnect-tron , but its not working with i phone devices.

[jay3024]

i have developed react dapp that connects with tron wallet using trsut wallet/ token pocket etc.
below is my code

import {
WalletConnectWallet,
WalletConnectChainID,
} from "@tronweb3/walletconnect-tron";

const [wallet, setWallet] = useState(null);
const [walletAddress, setWalletAddress] = useState("");

// ✅ Initialize WalletConnect (Only Once)
const initWallet = () => {
try {
if (wallet) return; // Prevent re-initialization

  const walletInstance = new WalletConnectWallet({
    network: WalletConnectChainID.Mainnet,
    options: {
      relayUrl: "wss://relay.walletconnect.com",
      projectId: "6452f101b7036593f91517bdddefc96e",
     
      metadata: {
        name: "MyDApp",
        description: "DApp WalletConnect",
        url: "https://mydapp.com/",
        icons: ["https://explorer-api.walletconnect.com/w3m/v1/getWalletImage/3386dde1-8b24-48c8-4b81-16979e342000?projectId=45a6812dbe886b990e2547d329da237b&sdkType=wcm&sdkVersion=js-2.7.0"],
      },
    },
  });

  setWallet(walletInstance);
  console.log("✅ Wallet initialized:", walletInstance);
} catch (error) {
  console.error("❌ Error initializing WalletConnect:", error);
}

};

// ✅ Connect Wallet (Ensuring Initialization)
const connectWallet = async () => {
setLoader1(true);

if (!wallet) {
  console.warn("⚠️ Wallet is not initialized! Initializing now...");
  initWallet();
}

try {
  const { address } = await wallet.connect();
  setWalletAddress(address);
  console.log("✅ Connected Address:", address);

  // ✅ Fetch the latest balance immediately
  fetchBalance(address);

  // ✅ Start listening for account changes
  listenForAccountChanges();

  setLoader1(false);
} catch (error) {
  console.error("❌ Wallet Connect Error:", error);
  setLoader1(false);
}

};
this is code is working fine in android / pc , but in i Phone devices the wallet connect modal opens but only header part is appears.
as shown in screenshot.

and on other side in android it works well .

expected behavior in i phone devices:
wallet connect modal should open and in that wallet icons will shows(trust wallet/ token pocket etc).
the expected behavior is shown in second screenshot where wallet icons are there, you can select the wallet and connect the tron address with dapp.


i stuck in this . please give me solution whether it can be possible with @tronweb3/walletconnect-tron or need something diffrent package?.
@bkrem
@chris13524
@ganchoradkov
@quetool
@skibitsky

[ganchoradkov]

hey @jay3024 I checked this lib but its using veeery outdated packages. I would recommend you to use up-to-date dependencies by overriting the dependencies of @tronweb3/walletconnect-tron
https://www.npmjs.com/package/@tronweb3/walletconnect-tron?activeTab=code

[ganchoradkov]

try using latest versions and let us know if the issue persists

[jay3024]

@ganchoradkov below is the package.json wich is up to date
{
"name": "my-project",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"@iconify/react": "^5.2.0",
"@reown/walletkit": "^1.2.1",
"@tronweb3/tronwallet-adapter-react-hooks": "^1.1.9",
"@tronweb3/tronwallet-adapters": "^1.2.7",
"@tronweb3/walletconnect-tron": "^3.0.0",
"@walletconnect/client": "^1.8.0",
"@walletconnect/core": "^2.18.1",
"@walletconnect/modal": "^2.7.0",
"@walletconnect/utils": "^2.18.1",
"buffer": "^6.0.3",
"framer-motion": "^12.4.7",
"lucide-react": "^0.477.0",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-intersection-observer": "^9.15.1",
"react-router-dom": "^7.2.0",
"sweetalert2": "^11.17.2",
"tronweb": "^6.0.1"
},

"devDependencies": {
"@eslint/js": "^9.19.0",
"@types/react": "^19.0.8",
"@types/react-dom": "^19.0.3",
"@vitejs/plugin-react": "^4.3.4",
"autoprefixer": "^10.4.20",
"eslint": "^9.19.0",
"eslint-plugin-react": "^7.37.4",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.18",
"globals": "^15.14.0",
"postcss": "^8.5.3",
"tailwindcss": "^3.4.17",
"vite": "^6.1.0"
}
}

as you can see @tronweb3/walletconnect-tron is latest v.3.0.0
kindly guide me what's the issue.