rewrite web_ext with react

[gasolin]

During porting back features in #46, I found the current popup html/js are pretty complicated and several issues stall the development speed

• jquery dependency, which could be removed
• spaghetti code: it makes code hard to test
• fetchBounties are called twice (1. get all bounties then 2. getBounties again after page onload)
• dead code (gitcoin tip related code are not functional)

Therefore I created an experiment repo with create-react-app to struct the popup page. The changes are

• port features from https://github.com/gitcoinco/chrome_ext/tree/master_needs_regression_test
• remove web3
• use fetch instead of XMLHttpRequest
• cleaner code structure and element rendering, ex now table related operation is contained in History table
• inport bootstrap css from npm module
• the test framework is bundled and could test via yarn test (no test is written yet)
• fix plenty of bugs

The repo is now at https://github.com/gasolin/web_ext which can build for chrome with yarn build command.

@owocki @KennethAshley how do you think if we replace chrome_ext with web_ext for the future version once its stable?

[owocki]

related => @kamescg did a react prototype of this thats quite nice! #31

i agree that the current chrome_Ext code is unsustainable.

https://github.com/gasolin/web_ext looks really nice.. is it ready for a regression test?

[gasolin]

@owocki I think web_ext functions are in parity with current chrome_ext now. Haven't add test yet but you can try by clone the repo https://github.com/gasolin/web_ext and run yarn install/yarn build (or npm install / npm run build).

Here's the screencast.

Some differences are I use bootstrap 4 css from npm module and comment out the header/bot images.
You can add header/side bot image back easily.

I checked @kamescg branch and there are some good things like theming 👍 . Though I'd like to have less webpack configuration which brings burden when upgrading from version to version yearly.

[owocki]

wow, this looks like major progress!!

i think we might want to tweak the styling on the gitcoin pop-in, but other than that this looks great!

[owocki]

want to start a PR and we can do some QA over there?

as for the repo name, maybe well change it from chrome_ext to web_ext :)

[gasolin]

@owocki sure, please check #48
I also added some basic tests to make sure test framework works

[gasolin]

Here are tasks breakdown as future browser_ext development plan proposal

Overall

• Use fetch for all queries Should not use Synchronous XMLHttpRequest for fetching data #42 Small
• Support web extension (Firefox) Provide Firefox version of Gitcoin Chrome Extension #1 Medium
• Bounty universe integration Bounty universe integration #49 need plan

Content

• Align issue tag style issue tag style looks different from other tags #50 Small
• Detect if inject element already exists Clicking on Github profile contribution chart multiplies tip button. #21 Small

Popup

• Internationalization support (optional) + guide for language contributor
  Internationalization support #51 Small ~ Medium
  • per language translation Small

[gasolin]

@owocki @mbeacom above are recent tasks in mind.
All tasks are filed with issue number. Please take a look and add your comment, thanks

[owocki]

Detect if inject element already exists #21 Small
Support web extension (Firefox) #1 Medium
Use fetch for all queries #42 Small
Align issue tag style #50 Small

i think these are the ones were really excited about internally

[gasolin]

Hi @owocki current PR did the rewrite and fixed #42 #50, do you think if we can merge the PR then do the rest work on the new base?