search

DAVFoundation / xplore

⛓ A block explorer for local Ethereum testnets
MIT License
62 stars 65 forks source link

Wrote getLatestTransaction function and display that in the header section #122

Closed bicep closed 5 years ago

bicep commented 6 years ago

(Based off the branch where I renamed getLatestBlock to getLatestBlockNumber in blockchain.js).

See issue #120

bicep commented 6 years ago

Made the changes, placed the method in utils.js. Let me know if there is a better place to put it.

Also I used the react-text-fit package to ensure the text in the headerSection fits, but I'm not sure if this is the best package to use. I'm also not convinced it's working properly because I get this warning from text-fit in the browser console:

webpack-internal:///584:140 Can not process element without height. Make sure the element is displayed and has a static height.

Please give me a better solution if you know of one.

debragail commented 5 years ago

@TalAter ready to merge?

debragail commented 5 years ago

Thanks @bicep! what version of webpack is being used in the build? Can you pull the latest build and see if you get the same error?

bicep commented 5 years ago

Hi @debragail I'm sorry for my late reply.

I think these were Webpack issues with react-text-fit, a package that I installed in dev dependencies to get the transaction id and eth value to fit nicely into the header box.

It's fixed now after I manually rebased.

It looks very cramped though:

screen shot 2018-12-08 at 6 28 22 pm

Perhaps people will have thoughts about a better way.

debragail commented 5 years ago

Hi @debragail I'm sorry for my late reply.

I think these were Webpack issues with react-text-fit, a package that I installed in dev dependencies to get the transaction id and eth value to fit nicely into the header box.

It's fixed now after I manually rebased.

It looks very cramped though:

screen shot 2018-12-08 at 6 28 22 pm

Perhaps people will have thoughts about a better way.

Try this layout. I kept the margins the same just changed the ordering to fit the usecase.

transimgdav_fix

debragail commented 5 years ago

You could also bring the RPC image up as well so that it is centered aligned along with the other logos:

transimgdav_fix

This is how it looks now. Maybe align the logos as well they seem to be a bit too anchored to the bottom:

screen shot 2018-12-12 at 18 57 13
TalAter commented 5 years ago

Looks good @debragail Are you able to make those changes?

debragail commented 5 years ago

@TalAter I was hoping @bicep could make the change so we could resolve. @bicep let me know if you can update this. Really appreciate your time on this and attention to detail.

bicep commented 5 years ago

Hello @TalAter @debragail

Trucated the id and put caps on the keys. It should be good to go now! Also managed the margins a little bit in the styles.

screen shot 2018-12-15 at 4 47 50 pm
debragail commented 5 years ago

Thanks so much @bicep. I just created a new issue I need @TalAter to review but the truncation might also help in mobile view for other sections.

https://github.com/DAVFoundation/xplore/issues/151

Also about responsive icons:

https://github.com/DAVFoundation/xplore/issues/150

TalAter commented 5 years ago

Merged!

Thanks Roger.