Web3Modal function is just added

.vscode/launch.json

@@ -0,0 +1,29 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "args": [
+                "--extensionDevelopmentPath=${workspaceFolder}"
+            ],
+            "name": "Launch Extension",
+            "outFiles": [
+                "${workspaceFolder}/out/**/*.js"
+            ],
+            "preLaunchTask": "npm",
+            "request": "launch",
+            "type": "pwa-extensionHost"
+        },
+        {
+            "type": "pwa-node",
+            "request": "launch",
+            "name": "Launch Program",
+            "skipFiles": [
+                "<node_internals>/**"
+            ],
+            "program": "${workspaceFolder}\\src\\index.js"
+        }
+    ]
+}

src/components/PleaseConnect.js

@@ -1,15 +1,77 @@
 import React from "react";
 import "../styles/PleaseConnect.css";
 import { ReactComponent as Tellor } from "../assets/Tellor_TRB.svg";
+// import WalletConnect from "@walletconnect/client";
+// import QRCodeModal from "@walletconnect/qrcode-modal";
+// import {Moral} from 'react-moralis'
+import WalletConnectProvider from "@walletconnect/web3-provider";
 
-function PleaseConnect() {
-  const connectMetaMask = async () => {
-    await window.ethereum.request({
-      method: "eth_requestAccounts",
-    });
-    window.location.reload();
+import Web3 from "web3";
+import Web3Modal from "web3modal";
+
+let provider = undefined;
+
+const connectMetaMask = async ({web3})=>{
+
+}
+
+const connectTrustWallet = async ({web3})=>{
+
+  console.log("Hello");
+
+  const providerOptions = {
+    walletconnect: {
+      package: WalletConnectProvider, // required
+      options: {
+        infuraId: "c520d3ab5dfc483e90822fbdfd707bf3" // required
+      }
+    } 
   };
 
+  const web3Modal = new Web3Modal({
+    network: "mainnet", // optional
+    cacheProvider: true, // optional
+    providerOptions // required
+  });
+
+
+  try{
+    provider = await web3Modal.connect();
+  }
+  catch(error){
+    provider = undefined;
+  }
+
+  if(provider){
+    const web3 = new Web3(provider);
+    console.log(web3);
+
+    // Subscribe to accounts change
+    provider.on("accountsChanged", (accounts) => {
+      console.log(accounts);
+    });
+
+    // Subscribe to chainId change
+    provider.on("chainChanged", (chainId) => {
+      console.log(chainId);
+    });
+
+    // Subscribe to provider connection
+    provider.on("connect", (info) => {
+      console.log(info);
+    });
+
+    // Subscribe to provider disconnection
+    provider.on("disconnect", (error) => {
+      console.log(error);
+    });
+  }
+}
+
+function PleaseConnect() {
+
+  // useContext(undefined);
+
   return (
     <div className='PleaseConnect__page'>
 
@@ -33,7 +95,7 @@ function PleaseConnect() {
             <div className="PleaseConnect__line"></div>
           </div>
           <div className="PleaseConnect__Connect">
-            <button onClick={connectMetaMask}>Connect to Trusr wallet</button>
+            <button onClick={connectTrustWallet}>Connect to Trusr wallet</button>
           </div>
         </div>
 
@@ -51,7 +113,6 @@ function PleaseConnect() {
             </a>
           </p>
         </div>
-
       </div>
     </div>
   );