0

Metamask is working perfectly.

BinanceChainWallet is working perfectly.

WalletConnectProvider (model: QR - desktop/mobile wallet support), not working when I click on Wallet-Connect model on the front-end it give me console error only without opining the QR and the wallets etc..

Platform on: Laravel 8.0 and JS

Vendor/Provider used https://github.com/sawirricardo/laravel-web3

Wallet-Connect Model repo https://github.com/WalletConnect/web3modal/blob/master/docs/providers/walletconnect.md

imported packages:

Console Log error (Chrome Developer Tools):

Uncaught (in promise) TypeError: e is not a constructor
at walletconnect.ts:31:22
at tslib.es6.js:100:1
at Object.next (tslib.es6.js:81:45)
at tslib.es6.js:74:1
at new Promise (<anonymous>)
at Module.A (tslib.es6.js:70:1)
at walletconnect.ts:15:44
at new Promise (<anonymous>)
at t.default (walletconnect.ts:15:10)
at e.<anonymous> (providers.ts:201:30)

walletconnect.ts - providers.ts - tslib.es6.js are imported from cdns.

The problem is in one of these 2 files (LaravelWeb3Scripts.php/walletconnect.ts)

File: walletconnect.ts

import { IAbstractConnectorOptions, getChainId } from "../../helpers";

export interface IWalletConnectConnectorOptions
extends IAbstractConnectorOptions {
   infuraId?: string;
   rpc?: { [chainId: number]: string };
   bridge?: string;
   qrcode?: boolean;
}

const ConnectToWalletConnect = (
  WalletConnectProvider: any,
  opts: IWalletConnectConnectorOptions ) => {
     return new Promise(async (resolve, reject) => {
        let bridge = "https://bridge.walletconnect.org";
        let qrcode = true;
        let infuraId = "";
        let rpc = undefined;
        let chainId = 1;
        console.log('wallet connect'); // todo remove dev item
        if (opts) {
           bridge = opts.bridge || bridge;
           qrcode = typeof opts.qrcode !== "undefined" ? opts.qrcode : qrcode;
           infuraId = opts.infuraId || "";
           rpc = opts.rpc || undefined;
           chainId =
           opts.network && getChainId(opts.network) ? getChainId(opts.network) : 1;
        }

        const provider = new WalletConnectProvider({ // this line giving the error
           bridge,
           qrcode,
           infuraId,
           rpc,
           chainId
        });
        try {
           await provider.enable();
           resolve(provider);
        } catch (e) {
             reject(e);
          }
     });
  };

export default ConnectToWalletConnect;

File: LaravelWeb3Scripts.php

<?php

namespace Sawirricardo\LaravelWeb3\Components;

use Illuminate\View\Component;

class LaravelWeb3Scripts extends Component {
   /**
   * Create a new component instance.
   *
   * @return void
   */
   public function __construct() {
    //
   }

   /**
   * Get the view / contents that represent the component.
   *
   * @return \Illuminate\Contracts\View\View|\Closure|string
   */
   public function render() {
    return <<<'blade'

<script>
   class LaravelWeb3 {
      constructor() {
         this._provider = null;
         this.reloadAfterFetching = true;
         this.alertUserIfMetamaskIsNotInstalled = true;
         this.contracts = @json(config('web3.contracts'));
         this.web3ModalOptions = {
           cacheProvider: true,
           disableInjectedProvider: false,
           providerOptions: {
              binancechainwallet: {
                 package: true
              },
              walletconnect: {
                 package: WalletConnectProvider,
                 options: {
                    infuraId: "*********// hidden for post",
                 },
              },
           },
        };
     }

     async onConnect() {
        try {
           const web3Modal = this.prepareWeb3Modal();
           const provider = await web3Modal.connect();
           provider.on("accountsChanged", async (accounts) => {
              console.log("accountsChanged", accounts);
              web3Modal.clearCachedProvider();
              await this.fetchAccount(provider);
              if (this.reloadAfterFetching) window.location.reload();
           });
           provider.on("chainChanged", async (chainId) => {
              console.log("chainChanged", chainId);
              web3Modal.clearCachedProvider();
              await this.fetchAccount(provider);
              if (this.reloadAfterFetching) window.location.reload();
           });
           provider.on("connect", ( { chainId }) => {
              console.log("connect", chainId);
           });

           provider.on("disconnect", ( { code, message }) => {
              console.log("disconnect", code, message);
           });
           await this.fetchAccount(provider);
           if (this.reloadAfterFetching) window.location.reload();
        } catch (e) {
             console.log({ e });
          }
     }

     async fetchAccount(web3Provider) {
        const provider = new ethers.providers.Web3Provider(web3Provider);
        const message = await(await(await fetch("/_web3/users/signature", {
           method: "get",
           headers: {
              "Content-Type": "application/json",
              "X-CSRF-Token": "{{ csrf_token() }}",
           },
         })).json()).message;
         await fetch("/_web3/users",{
            method:'post',
            body: JSON.stringify({
               signature: await provider.getSigner().signMessage(message),
               address: await provider.getSigner().getAddress(),
            }),
            headers: {
               "Content-Type": "application/json",
               "X-CSRF-Token": "{{ csrf_token() }}",
            },
         })
         this._provider = provider;
      }

      async onDisconnect() {
         this._provider = null;
         const web3Modal = this.prepareWeb3Modal();
         await web3Modal.clearCachedProvider();
         await fetch("/_web3/users/logout",{
            method: "delete",
            headers: {
               "Content-Type": "application/json",
               "X-CSRF-Token": "{{ csrf_token() }}",
            },
         });
         if (this.reloadAfterFetching) window.location.reload();
      }

      async getProvider() {
         if (!this._provider) {
            const web3Modal = this.prepareWeb3Modal();
            const web3Provider = await web3Modal.connect();
            this._provider = new ethers.providers.Web3Provider(web3Provider);
         }
         return this._provider;
      }

      prepareWeb3Modal () {
         let Web3Modal, WalletConnectProvider;
         // if (!(window.web3 || window.ethereum) && this.alertUserIfMetamaskIsNotInstalled) {
            // alert(`Please install Metamask first`);
            // return;
         // }
         if (window.Web3Modal.default) {
            Web3Modal = window.Web3Modal.default;
         }
         if (window.WalletConnectProvider) {
            WalletConnectProvider = window.WalletConnectProvider.default;
         }
         const web3Modal = new Web3Modal(this.web3ModalOptions);
         return web3Modal;
      }

      addContract(address,contract) {
         this.contracts = [...this.contracts, { address, contract }];
      }
   }

   window.laravelWeb3 = new LaravelWeb3(); 
</script>
blade;
 }
}
0

1 Answer 1

0

i have fixed the problem, by adding const WalletConnectProvider = window.WalletConnectProvider.default; inside constructor()

2
  • In which file you edit the above code ? Please tell me the answer it file in Node module of the plugin or else anywhere.
    – Sahil
    Commented Dec 27, 2022 at 5:08
  • in LaravelWeb3Scripts.php constructor()
    – AMHF
    Commented Jan 8, 2023 at 0:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.