connect to walletconnect with Dapp - frontend

Question

I created my own lottery smart contract and also created front ends Dapp in html and javascript. I before used metamask for connecting. and also I used infura for connecting without metamask. but now I want to connect the project to trust wallet in phone with walletconnect. But I cannot find true code for connecting dapp to trust wallet with walletconnect. Please someone help me to connect html front end to the trust wallet with Qr-code. If you need to see my project I can send all code of my project for you.
I used before this code for wallet connect:
<div class="container">
<div class="row">
<div class="col-md-12">
<h5>Web3modal example for vanille JavaScript and HTML</h5>
<p>No wallet connected. Connect wallet to show accounts and their ETH balances.</p>
<div class="alert alert-danger" id="alert-error-https" style="display: none">
You can run this example only over HTTPS connection.
</div>
<div id="prepare">
<button class="btn btn-primary" id="btn-connect">
Connect wallet
</button>
</div>
<div id="connected" style="display: none">
<button class="btn btn-primary" id="btn-disconnect">
Disconnect wallet
</button>
<hr>
<div id="network">
<p>
<strong>Connected blockchain:</strong> <span id="network-name"></span>
</p>
<p>
<strong>Selected account:</strong> <span id="selected-account"></span>
</p>
</div>
<hr>
<h4>All account balances</h4>
<table class="table table-listing">
<thead>
<th>Address</th>
<th>ETH balance</th>
</thead>
<tbody id="accounts">
</tbody>
</table>
<p>Please try to switch between different accounts in your wallet if your wallet supports this functionality.</p>
</div>
<br>
<div class="well">
<p class="text-muted">See also the TypeScript and React example application</p>
</div>
</div>
</div>
</div>
<!-- We use simple <template> templating for the example -->
<div id="templates" style="display: none">
<template id="template-balance">
<tr>
<th class="address"></th>
<td class="balance"></td>
</tr>
</template>
</div>
<script type="text/javascript" src="https://unpkg.com/web3#1.2.11/dist/web3.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/web3modal#1.9.0/dist/index.js"></script>
<script type="text/javascript" src="https://unpkg.com/evm-chains#0.2.0/dist/umd/index.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/#walletconnect/web3-provider#1.2.1/dist/umd/index.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/fortmatic#2.0.6/dist/fortmatic.js"></script>
<!-- This is our example code -->
<script type="text/javascript" src="./example.js"></script>
and also this code for normal connect :
if (typeof window.ethereum !== 'undefined')
{
console.log('MetaMask is installed!');
web333 = new Web3(web3.currentProvider);
const accountsH = ethereum.request({ method: 'eth_requestAccounts' });
const accountH = accountsH[0];
const showAccountH = document.querySelector('.showAccount');
const accounts = ethereum.request({ method: 'eth_requestAccounts' });
const account = accounts[0];
const showAccount = document.querySelector('.showAccount');
}else{
console.log('MetaMask not installed!');
alert("Please install Metamsk wallet first, then try again");
web333 = new Web3(new Web3.providers.HttpProvider("https://ropsten.infura.io/v3/3c68/* my infura ID */5811f301753"));
}
var addressH = "0x35C00a/*MY CONTRACT ADDRESS */8D639145";
var abiH =[/*my contract ABI*/];
contractH = new web333.eth.Contract(abiH, addressH);
I want to connect trust wallet and metamask and can connect to the other wallet. I want the global type of code for all wallets.

Answer 1

<div class="container">
<div class="row">
<div class="col-md-12">
<h5>Web3modal example for vanille JavaScript and HTML</h5>
<p>No wallet connected. Connect wallet to show accounts and their ETH balances.</p>
<div class="alert alert-danger" id="alert-error-https" style="display: none">
You can run this example only over HTTPS connection.
</div>
<div id="prepare">
<button class="btn btn-primary" id="btn-connect">
Connect wallet
</button>
</div>
<div id="connected" style="display: none">
<button class="btn btn-primary" id="btn-disconnect">
Disconnect wallet
</button>
<hr>
<div id="network">
<p>
<strong>Connected blockchain:</strong> <span id="network-name"></span>
</p>
<p>
<strong>Selected account:</strong> <span id="selected-account"></span>
</p>
</div>
<hr>
<h4>All account balances</h4>
<table class="table table-listing">
<thead>
<th>Address</th>
<th>ETH balance</th>
</thead>
<tbody id="accounts">
</tbody>
</table>
<p>Please try to switch between different accounts in your wallet if your wallet supports this functionality.</p>
</div>
<br>
<div class="well">
<p class="text-muted">See also the TypeScript and React example application</p>
</div>
</div>
</div>
</div>
<!-- We use simple <template> templating for the example -->
<div id="templates" style="display: none">
<template id="template-balance">
<tr>
<th class="address"></th>
<td class="balance"></td>
</tr>
</template>
</div>
<script type="text/javascript" src="https://unpkg.com/web3#1.2.11/dist/web3.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/web3modal#1.9.0/dist/index.js"></script>
<script type="text/javascript" src="https://unpkg.com/evm-chains#0.2.0/dist/umd/index.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/#walletconnect/web3-provider#1.2.1/dist/umd/index.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/fortmatic#2.0.6/dist/fortmatic.js"></script>
<!-- This is our example code -->
<script type="text/javascript" src="./example.js"></script>