Do you use web3 to frontend libraries? Like web3-react?

Nice.
Why do you use ethers.js at Node instead of web3.js for generating and signing accounts? Didn’t web3.js worked for you in Node?

2 Likes

Unfortunately, this project is not open source. You can only see the initial result here https://featly.azurewebsites.net/

(but it needs to be updated with the latest changes). We have a Decentralized Loyalty Network here, where the brand can create its own loyalty programs and a token that rewards users. You can add transactions manually here, but I have also created an Oracle that pushes transactions for example from e-commerce to the blochkchain.

I don’t remember the details because I did it a few months ago, but I think that web3 integration wasn’t super easy (and it was my first contact with Vue). There also wasn’t many tutorials or docs about Vue+web3 available. I’m not sure if everything works perfectly now but the project is still ongoing. There is a status bar in the bottom of the page that informs the user about the current status. It was quite time-consuming to handle all those events in combination with Vue reactivity system.

I have to check this due-web3 library, thanks!

3 Likes

Hi @ylv-io, unfortunately, I didn’t have the time to properly advertise my project. I’m currently building a Dapp and the core module is ethvtx so I’m focusing on my needs for its evolution. When it will be done I’ll start creating more demos etc …

I know that GroundhogPay are using ethvtx in their app.

Embark was a first choice because Iuri Matias, the creator of Embark, contacted me on Reddit and told me he liked the project. Feeling supported, I naturally made the demo/template for users to be able to generate ethvtx projects when using embark. But the project is framework agnostic, as long as you know how to recover the abi / address of your contracts with your own framework, you’ll be able to use ethvtx the same way as embark.

3 Likes

@ylv-io if you’d like to see an example project using apollo-link-ethereum check out the ZeppelinOS Package Registry. It uses a slightly older version of the library, but the latest changes are mostly bug fixes.

In terms of the transaction lifecycle, that’s a more interesting question. ethers.js does an admirable job of waiting for the receipt after submitting a transaction. Essentially, when you submit a transaction it returns a promise that will resolve with the receipt. However- it does not give you the confirmations. If you want to check the number of confirmations, you need to roll your own tool.

web3.js 1.0, on the other hand, does have confirmations built-in. When submitting a transaction it returns a “promievent” which resolves to the receipt, but also allows you to listen to a configured number of confirmations. It’s a convenient construct, but it doesn’t play nicely with async / await so I’m not a big fan.

We haven’t had a significant requirement for confirmations in our projects, so I haven’t done much additional research on this. There may be add-ons for ethers.js that provide confirmation management. It wouldn’t be too hard to build though, given you just need to poll for the receipt.

Coming back to how we represent transactions in our applications: we store a list of on-going transactions in the global state. That way if components are destroyed then re-created you will still see the inline ‘pending’ status. If time allows we always include inline transaction status so that the user understands what is currently ‘on-the-go’.

3 Likes

Azure + Vue + Web3.js – interesting combination of technologies.

think that web3 integration wasn’t super easy

Thanks for input! Exactly what I am looking for. I did a small run on the website. I've spotted that it doesn't react to log in and log out events. Essentially if your Metamask is locked, it will say so but if you log in, it then wouldn't react. The same if you log out. Hope it helps!

2 Likes

Is your project open-source?) If so I would like to have a look!
I can tell that ethvtx provides caching layer in a browser which is cool. What about backend, do you use any caching or database for Ethereum data on a backend? Or you managed to keep it purely on a frontend?

1 Like

Yes it is, you can find everything under the ticket721 org on github.

I have a database & api that is connected to an ethereum node (in a read-only manner), and catches all events of my plateform, to create entities and provide a way more flexible way to interact with the informations of the contract. There are 0 critical code sections on the server.

Basically I get a lot of data from my api, with the ability to sort / filter and manipulate it how I want, I get data like prices from ethereum directly with ethvtx / web3, I interact directly with the ethereum node from the browser. If state updates happen from frontend, then the server will eventually update its informations as soon as its node gets the info aswell.

What is very very interesting is that server updates can only happen on new blocks, so I also have a frontend caching of the api that is rhythmed by new block events aswell. And I only refresh data that is really displayed. Unmounting a React component that was fetching will stop refresh mechanisms (not if the same data is fetched somewhere else of course)

2 Likes

I haven’t experienced modern Dapp browser not supporting window.ethereum object.
I don’t belive there is a need to support legacy.
Yes, it does handles cases perfectly. I’ve been building dapps with this pattern for quite some time.

1 Like

ethers.js needed less setup to get working in a Node script, plus it might have been one of the first examples in my web search.

The Party burner wallet used notifications to provide feedback on transactions and as a user they were awesome. (Assist.js by Blocknative)

Demo on GitCoin livestream:

Medium article explaining transaction feedback:

Disclosure: I’m friends with the team at Flex Dapps who built the wallet and works on Assist.

2 Likes

Hey @abcoathup! Awesome articles and assist.js looks like promising library. Have you used it yourself?

2 Likes

I have only used Assist.js as a user. It's on my list to build a simple dApp and integrate.

ethers.js

2 Likes

Being honest, I’m still using an example from react-truffle-box, but I can see that there are many alternatives.

3 Likes