Updating Auction Dapp to Web3 1.2.9 (added Bee with Webpack4 and Babel7)

[mshearer0]

I had to make a few changes to Auction Dapp to run with current Web3:

Web3 1.2.9
Node 16.14.0
NPM 8.5.2

1. Update main.js as

	if(typeof web3 !== 'undefined') {    
            if (window.ethereum) {
                web3 = new Web3_1(window.ethereum)
            }
            this.$auctionRepoInstance.setWeb3(web3)
            this.$deedRepoInstance.setWeb3(web3)    

            store.setMetamaskInstalled()

            web3.eth.net.getId().then(netId => { store.setNetworkId(netId) })

2. Update App.vue to use web3.utils.BN:

// get random deedid
            this.deed.deedId = new web3.utils.BN(`${this.$root.$data.globalState.getRandomInt(123456789,999999999)}${this.$roo
t.$data.globalState.getRandomInt(123456789,999999999)}`)

3. In Models add 'new' to initialise contract:

this.contractInstance = new this.web3.eth.Contract(Config.DEEDREPOSITORY_ABI,Config.DEEDREPOSITORY_ADDRESS)

4. In Models update all the contract fn calls to either .send (if write) or .call (if read only) in this format:

this.contractInstance.methods.registerDeed(deedId, deedURI).send({from: this.account, gas: this.gas }, function(err,
 transaction) {    

5. In Models update all the watchers as:

    async watchIfCreated(cb) {
        const currentBlock = await this.getCurrentBlock()
        this.contractInstance.events.DeedRegistered({
            filter: {}, 
            fromBlock: currentBlock - 1
            },  cb)
    }

6. Update .fromWei() to utils.fromWei()

7. If using Ropsten config.js should be of format:

JSONRPC_ENDPOINT: 'https://ropsten.infura.io/v3/_your_id',
JSONRPC_WS_ENDPOINT: 'wss://ropsten.infura.io/ws/v3/_your_id',

Note Ganache-ui doesn't support websockets so cant be used for testing. Ganache-cli does.

8. In backend the truffle test needed to be updated:

it("It should register a deed with id: 123456789", async () => {
        await instance.registerDeed(123456789,"test");
        let ownerOfDeed = await instance.exists(123456789);
        assert.equal(ownerOfDeed.valueOf(), true , `Result should be true`);
    });

Make sure DEEDREPOSITORY_ADDRESS and AUCTIONREPOSITORY_ADDRESS are the addresses of your contracts after deployment and that JSON files from backend/build/contracts match.

Swarm bee needs to be updated so have commented these lines out for now, leaving

let imageUrl = "";

Happy to submit pull request

[mshearer0]

To enable chatroom need to run local Geth node.

Whisper was removed from Go-Ethereum in v1.9.21 so had to use v1.9.20

Followed instructions at https://goethereumbook.org/en/whisper/ to generate key for config.js

[Jereczek]

Thanks! Works much better :) Tested on node 16.14.2 and ganache-cli but without whisper.

I'm facing one issue on finalizing auction. Cannot process transaction due to below issue. Maybe you have any idea?

"{
  "code": -32603,
  "message": "[ethjs-query] while formatting outputs from RPC '{\"value\":{\"code\":-32603,\"data\":{\"message\":\"VM Exception while processing transaction: revert\",\"code\":-32000,\"data\":{\"0xa9d36e72115fc4bff150471fc11111a6a830242e346a8f13f2b5e2d2f1112345\":{\"error\":\"revert\",\"program_counter\":8565,\"return\":\"0x\"},\"stack\":\"c: VM Exception while processing transaction: revert\\n    at Function.c.fromResults (/usr/local/lib/node_modules/ganache-cli/build/ganache-core.node.cli.js:4:192416)\\n    at w.processBlock (/usr/local/lib/node_modules/ganache-cli/build/ganache-core.node.cli.js:42:50915)\\n    at process._tickCallback (internal/process/next_tick.js:68:7)\",\"name\":\"c\"}}}}'",
  "stack": "Error: [ethjs-query] while formatting outputs from RPC '{\"value\":{\"code\":-32603,\"data\":{\"message\":\"VM Exception while processing transaction: revert\",\"code\":-32000,\"data\":{\"0xa9d36e72005fc4bff150471fcd5111a6a830242e356a8f1ef2b5e2d2f11d03ec\":{\"error\":\"revert\",\"program_counter\":8565,\"return\":\"0x\"},\"stack\":\"c: VM Exception while processing transaction: revert\\n    at Function.c.fromResults (/usr/local/lib/node_modules/ganache-cli/build/ganache-core.node.cli.js:4:192416)\\n    at w.processBlock (/usr/local/lib/node_modules/ganache-cli/build/ganache-core.node.cli.js:42:50915)\\n    at process._tickCallback (internal/process/next_tick.js:68:7)\",\"name\":\"c\"}}}}'\n    at new i (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/common-0.js:1:173044)\n    at s (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/common-0.js:1:168720)\n    at Object.internal (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/common-0.js:1:169330)\n    at y.<anonymous> (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/background-0.js:1:221478)\n    at Object.h (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/common-0.js:18:37172)\n    at a (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/common-0.js:1:176450)\n    at y.u.emit (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/common-0.js:1:176986)\n    at y._setTransactionStatus (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/background-1.js:1:38671)\n    at y.setTxStatusFailed (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/background-1.js:1:37903)\n    at F._failTransaction (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/background-0.js:1:245383)\n    at F.approveTransaction (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/background-0.js:1:232179)\n    at async F.updateAndApproveTransaction (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/background-0.js:1:231403)\n    at async u.<anonymous> (chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/background-0.js:1:151371)"
}"

[mshearer0]

Sorry don’t really know. One thing I forgot to put in the issue summary was that I also had to remove all the .toNumber() calls as it seems with Web@1.2.9 they aren’t needed.

(bd6129d)

[mshearer0]

Returning to this i've added support for Bee using Bee-js. Needed to move the build to Webpack4 and Babel7 to use Bee-js.

Instead of using FormData (See ethersphere/bee#2864) i translated the auction object (minus the image file) into JSON and uploaded that file along with the image file as an array using Bee-js .uploadFiles. The auction file is not actually used in the remainder of the application but can be reconstructed by parsing the JSON.

                const auctionString =  JSON.stringify(this.auction)
                const auctionInfo = new File([auctionString], "AuctionInfo.txt", { type: "text/plain" })
                const auctionImage = new File([this.auctionFileInput], "AuctionImage", { type: "application/octet-stream" })

                const bee = new Bee(`${this.$config.BZZ_ENDPOINT}`)
                const result = await bee.uploadFiles(`${this.$config.BEE_POSTAGE_BATCH}`, [auctionInfo, auctionImage])

Also src/config.js needs to be updated with:

BEE_POSTAGE_BATCH = '<your_batch_id>'

In Auction.vue and Home.vue i have substituted:

let imageUrl = ''
      if (auction[3]) {
        imageUrl = `${this.$config.BZZ_ENDPOINT}/bzz/` + auction[3] + '/AuctionImage'
      }

I'm sure there is a better and more robust way (please suggest) but this seemed to work.

Need to specify cors option when launching bee (only in development!):

bee start --verbosity 5 --swap-endpoint https://goerli.infura.io/v3/<your_infura_id> --debug-api-enable --network-id 5 --swap-initial-deposit 0 --cors-allowed-origins="*"

Geth command line for a local node to support Whisper for chat:

./geth --ropsten --syncmode "light" console --rpc -ws --shh --wsapi eth,net,rpc,web3,shh --ws.origins "*"

See PR: #1132