search

fuguefoundation / ff-impact-calculator

2 stars 2 forks source link

Enhancements to crypto donation impact calculator #1

Closed fuguefoundation closed 3 years ago

fuguefoundation commented 4 years ago

  1. Incorporate API calls to the Kraken exchange (API docs - no API keys required) to get live price feed of BTCUSD, ETHUSD, and DAIUSD trading pairs. These links are the API data you'll need to call, but we only care about the price. This value should appear properly inside the Grid (where value goes in the code, make the UX/UI consistent with app) and update as the user changes the amount of their donation.

  2. Write a test (in Jest) for this API capability.

  3. The user should be able to enter a donation with up to two decimal points (e.g., .01 BTC, 2.25 ETH) and have the calculations in the app still work properly. I believe the problem of input is related to some validation/regex in index.js in either the parseNumericInput or validInteger functions. I'm not sure if adding decimals subsequently screws up the math, but please ensure that adding decimals still enables the full calculation abilities of the app.

I have a working prototype of the app for reference. See the README.md file in the repo for more information and background.

gitcoinbot commented 4 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

This issue now has a funding of 135.0 DAI (135.0 USD @ $1.0/DAI) attached to it.

gitcoinbot commented 4 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

Work has been started.

These users each claimed they can complete the work by 2 weeks, 1 day from now. Please review their action plans below:

1) sebastiantf has applied to start work _(Funders only: approve worker | reject worker)_.

Seems like a pretty good work. I have experience in JavaScript and React and API Fetching 2) developerfred has applied to start work _(Funders only: approve worker | reject worker)_.

I have experience with React and javascript I would like to incorporate the Kraken API into the project 3) kichjang has been approved to start work.

I'm not sure how live you want the pricing data to be, because I can think of a couple of solutions to it, the easiest one would be to just fire off one API on page load and be done with it, to something more complex that requires backend support such as Server Sent Events or WebSockets. I would propose making a timed interval to make an XHR/fetch request towards the Kraken API in order to refresh the pricing data periodically.

I played around with the prototype and I do indeed see that it's impossible to add a decimal point to the input field, and I think it's the replace(/^(\d+)*/g, '$1') regex there that's causing problems. This regex would probably need to have a more robust decimal parsing functionality in order to fix it.

Learn more on the Gitcoin Issue Details page.

KiChjang commented 4 years ago

@fuguefoundation I'm already having trouble trying to run npm install. I followed your troubleshooting guide in the readme, bu the problem still persists. Perhaps the version of simple-interpolation that you have on master is 1.0.6 while npm install wants to download the latest version, which is currently 1.1.0?

fuguefoundation commented 4 years ago

Hey @KiChjang , so I'm not sure what's causing this error, it's something I inherited from repo I forked from because I made no changes to package.json for this implementation. If you can resolve the problem I'll tip you some DAI. Otherwise, once I added this dist folder into node_modules/simple-interpolation I was able to run npm start and have the code compile. Note that I actually didn't use npm for the install but rather yarn install, so maybe try deleting node_modules and trying it with Yarn. Also note that it did automatically install version 1.10.0 for me as well.

KiChjang commented 4 years ago

@fuguefoundation Found the root cause -- simple-interpolation uses npx tsc as its build script, and if you do not have a global installation of TypeScript, then npx tsc would refer to an old version of the TypeScript compiler (1.5.3) since the tsc npm package is deprecated. I've submitted a PR upstream to fix this issue: https://github.com/dmytropaduchak/simple-interpolation/pull/4.

KiChjang commented 4 years ago

In the meantime, the workaround here is to globally install the latest typescript compiler by running npm install -g typescript.

gitcoinbot commented 4 years ago

@kichjang Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

KiChjang commented 4 years ago

@gitcoinbot Oh yes I am, trying to write some unit tests for the 1st functionality right now, but otherwise it's mostly done.

gitcoinbot commented 3 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

Work for 135.0 DAI (135.0 USD @ $1.0/DAI) has been submitted by:

  1. @kichjang

@fuguefoundation please take a look at the submitted work:

gitcoinbot commented 3 years ago

⚡️ A tip worth 13.50000 DAI (13.5 USD @ $1.0/DAI) has been granted to @kichjang for this issue from @fuguefoundation. ⚡️

Nice work @kichjang! Your tip has automatically been deposited in the ETH address we have on file.

gitcoinbot commented 3 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

The funding of 135.0 DAI (135.0 USD @ $1.0/DAI) attached to this issue has been approved & issued to @kichjang.

Additional Tips for this Bounty:

fuguefoundation commented 3 years ago

Hey @KiChjang , can I ask a favor of you? I'm wreaking my brain on this and could use a second set of eyes.

https://fuguefoundation.org/dev/impact/

So I've merge and tested locally, everything looks great and works as expected, same code you submitted. But when I build and load to the live server, I'm getting a blank screen. I've encountered this type of issue many times before (usually a path error), but all the files are loading in the DOM and there are no 404 errors. Everything is coming in 200, the browser just isn't showing anything. Do you mind taking a quick look at the site and see if any ideas spring to mind? Just a few minutes, I could use a second opinion.

Note, before building, I changed App.js temporarily to allow the crypto component to load as the landing page

      <Router>
        <Route path='/' exact component={CryptoRichAmIStandalone} />
        <Route path='/howrichami' component={HowRichAmIStandalone} />
        <Route path='/embed' component={HowRichAmI} />
        <Route path='/embed-crypto' component={CryptoRichAmI} />
      </Router>
KiChjang commented 3 years ago

@fuguefoundation Is the base of your URL https://fuguefoundation.org/dev/impact ? Are you able to access the other routes?

fuguefoundation commented 3 years ago

@KiChjang I set the base url to ./ since the files are in a subdirectory. No, all the other routes are a 404. But I don't understand how these files work in dev, load in the DOM (200) after I build/deploy them to live server, and then don't show anything. I've hit a road block, so if you have any suggestions I'm open to them.

KiChjang commented 3 years ago

@fuguefoundation Usually when such a problem arises, it's a matter of caching. Can you check if the prod website is downloading an old version of the JavaScript bundle and not getting the latest one from the server? You'll probably need to do some sort of cache busting.