连接到钱包connect with Dapp

Posted 2023-02-16

【中文标题】连接到钱包connect with Dapp

【英文标题】：connect to walletconnect with Dapp

【发布时间】：2021-11-28 23:37:16

【问题描述】：

我创建了自己的彩票智能合约，还用 html 和 javascript 创建了前端 Dapp。我之前使用元掩码进行连接。而且我还使用 infura 进行连接而不使用元掩码。但现在我想用walletconnect将项目连接到手机中的信任钱包。但是我找不到使用 walletconnect 将 dapp 连接到信任钱包的真实代码。请有人帮我用二维码将 html 前端连接到信任钱包。如果您需要查看我的项目，我可以为您发送我项目的所有代码。

我在此代码之前使用了钱包连接：

<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 <a href="https://web3modal.com/">TypeScript and React example application</a></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>

还有这个用于正常连接的代码：

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);

我想连接信任钱包和元掩码，并且可以连接到另一个钱包。我想要所有钱包的全局代码类型。

【问题讨论】：

请一些人帮助我关于钱包连接。我不能在我的项目中使用 html 和 java 脚本。

什么是infura ID？因为当我在 infura 上创建一个新项目时，它给了我一个项目 ID，但是我想在我的手机上使用 TrustWallet。

【参考方案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 <a href="https://web3modal.com/">TypeScript and React example application</a></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>

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。