search

algorandfoundation / grow-algorand

Grow Algorand and Earn ALGOs ❤️
91 stars 33 forks source link

Build Demo Applications using Algorand React Kit (Pipeline-ui.com) #85

Open michielmulders opened 3 years ago

michielmulders commented 3 years ago

Overview

What is this task?

We are looking for people to try out the React component library created specifically for Algorand. On top of that, the creator of the library is also hoping to receive feedback from developers using their project.

Specifically, you should code one out of two demo solutions. In other words, two people can have a successful submission for this bounty as we don't allow someone to deliver both solutions. You can pick from:

Option 1: Donation app A demo application that provides the user with the choice of several baked-in Algo amounts for the end-user to choose from (radio array). For instance, 1 ALGO, 5 ALGO, 10 ALGO, and 50 ALGO. After selecting an option, the end-user is directed to send the amount to a pre-specified address.

Option 2: Balance check login form Create a website that requires a user to log in via MyAlgo wallet to access it (demo components available). During the login process, the app should check if the user meets the minimum ALGO balance for accounts. If the minimum balance isn't met, the login is denied. If the user has sufficient balance, the user can see the protected web page.

As part of this task, you have to provide development feedback about the UX of using Pipeline-UI or about problems you've encountered. Make sure to explore the icons, provided demos, and components the library offers. We don't expect you to write a blog post.

Deliverable

Judging Criteria and Metrics

The following criteria will be used:

Other Requirements

DragonDev1906 commented 3 years ago

Specifically, you should code one out of three demo solutions:

Am I missing something or should that say "two demo solutions"?

michielmulders commented 3 years ago

@DragonDev1906 Sorry if that was not clear, updated the description now. We are looking for two people to code both each one solution. So, two people can have a successful bounty submission for this bounty. Let us know in the comments here which solution you'll be working on. We'll pick the best solutions and pay them out. I saw that you'll be working on option 1 the donation app. Good!

@theosch Can you start work on the second option for the balance check login form?

TheOsch commented 3 years ago

@TheOsch Can you start work on the second option for the balance check login form?

Of course.

DragonDev1906 commented 3 years ago

Here is my feedback: Overall, I liked using Pipeline-UI, as the components (especially AlgoAddress, AlgoButton and AlgoSendButton) make it really easy to build a user interface for making transfers on Algorand.

Unfortunately it is currently not possible to use the testnet (unless you modify the Pipeline-UI source or change variables using breakpoints). This makes developing a bit more annoying, especially if you don't have some ALGO on mainnet already. I think it might be best to pass a network prop (or a setting in Pipeline.init) that changes txn.genesisID, txn.genesisHash and the algoexplorerapi.io urls. Ideally there would be a component (similar to AsaList) to select the network, perhaps even setting the flag in the Wallet/Pipeline Object directly instead of having to pass the network to every component.

While looking through the docs and using the components I noticed a few things:

During installation (after running create-react-app) I had to go back to an older react version (16.x.x), even though react 17.0.0 was released in October. I don't know if that's intentional, just wanted to mention it.

BooneTB commented 3 years ago

Nice work and feedback @DragonDev1906 I would like to talk with you about the working together during the https://www.encode.club/encode-algorand-hackathon Are you taking part in the hackathon?

michielmulders commented 3 years ago

@DragonDev1906 Awesome solution! Can you reach out to me on Discord perhaps to share your wallet address and residency? You can reach me in the Algorand Discord at Michiel | Algorand Foundation#6116

For the other people working on this bounty, only Option 2 is still open!

DragonDev1906 commented 3 years ago

@BooneTB I was not aware of that Hackathon, thank you very much for the Info, I just registered myself.

headline-design commented 3 years ago

@DragonDev1906 your donation app is beautiful and functional! Congratulations on being one of the first to put our library to the test!

In response to the issues you encountered with using the "context" and "returnTo" props, we will be working on re-writing the Pipeline class to use a constructor so that the address and txID values can be accessed via Pipeline.txID and Pipeline.address. We will also enable TestNet sometime in the next few weeks.

As for a TransactionLink component, this is a great idea that is straightforward to implement. We had initially considered making this component, but held off due to the delay between receiving the txid and the creation of its corresponding page on AlgoExplorer (the link will 404 for the first few seconds after its creation). We might look into using either a delay or along with a refresh button.

Thanks for all the great feedback and notifying us about the library issues - will add everything to our to-do list!

DragonDev1906 commented 3 years ago

@headline-design There is one more thing I forgot to mention: I think it is currently not possible to have an Icon in a Field/Checkbox/Radio label because it is passed as a prop. Initially I wanted to use the Algorand Icon instead of writing "ALGO", but I couldn't figure out how to do it.

For Checkbox and Radio this could be done by having the label inside the component: <Radio>LABEL</Radio>, but this wouldn't work for the Field Component.

TheOsch commented 3 years ago

Hello,

Well, after the review made by @DragonDev1906 I connot have much to say. First, let me join his opinion that pipeline-ui is a wonderful project. If it will develop further it will be fine. As for the part I touched, I found there's something to do, but these are rathher small things that can be fixed in a few hours. Here they are:

TheOsch commented 3 years ago

Is anything wrong? Tell me, I'll fix.

johnmgrimm commented 3 years ago

Hi, Awesome job with the Pipeline UI library. Without any in-depth knowledge regarding Algorand I was able to build fairly functional application. Here are my points after working with Pipeline UI on the https://github.com/johnmgrimm/algorand-restricted-checkout, some may overlap with the previously mentioned ones as I have written them down during the development:

  1. Reverted menu order Getting Started and Why Pipeline UI should be first (IMHO)
  2. Examples from Demo section (e.g. https://www.pipeline-ui.com/docs/Demos/transaction) don't work if you don't transfer at least 10000 micro Algos (maybe this is a limitation for a new/empty accounts) and this is not the newbie knowledge (errors are hidden and visible only in the browser console)
  3. There might be another Demo subsection that will lead developer through making new Create React App and adding some simple component to it e.g. "AlgoButton"
  4. Icons install command uses yarn while in Getting Started you are using npm that might be confusing for junior developers, stick with one tool or provide both versions
  5. There should be somewhere a clear instruction how to setup and use TESTNET Algo Wallet or at leat a link to the official docs
  6. Typescript types declaration would be a handy addition to the library
  7. In the Heading component fontSize is marked as optional but if not provided it will generate invalid CSS font-size: px (without any value)
  8. Box seems to be a core concept here, so I would like it to be somehow underlined in the docs that every other element is build on top of <Box /> and that you are expecting
  9. For new Algo wallets (with no ALGO inside them) Pipeline.balance() method returns JS error:
 
    TypeError: Cannot read property 'amount' of undefined
at Function._callee$ (index.js:56)
at tryCatch (runtime.js:63)
at Generator.invoke [as _invoke] (runtime.js:293)
at Generator.next (runtime.js:118)
at asyncGeneratorStep (index.js:1)
at _next (index.js:3)
  10. ToastMessage element should rather accept a React component for the action than just a text + href, what is more a 'target="_blank"' property should be possible to disable
  11. ToastMessage secondaryMessage text is not wrapping when it is longer than available space
  12. This is not convenient that in order to use AlgoSendButton component I have to use React class component especially if I'm used to using hooks
  13. AlgoSendButton doesn't seem to work with the usual styling props e.g. ml={2}
michielmulders commented 3 years ago

@johnmgrimm Great feedback, thank you! Can you share your residency information with me (only country) via DM on Discord via Michiel | Algorand Foundation#6116 or here if you don't mind?

@TheOsch Thank you for sharing your feedback. Recorded your work! :)

Temp closing bounty

At the moment, we are not looking for further submissions for both options! We will open up the bounty again for a new feedback round within one month approximately! Payments for those who've submitted will be processed in the upcoming week or next one. Thanks!

TheOsch commented 3 years ago

May I have a favor to ask of you? When such a case will appear next time, please don't post a smile. It hurts most of all.

michielmulders commented 3 years ago

@TheOsch I'm sorry if that was inappropriate. I don't see the reason why I can't share a smile. Everyone who has submitted work, including you will receive a payment. This was a very successful bounty and will be repeated in the future, there's no reason not to smile. Just indicating for new bounty hunters that they can't and shouldn't work on this bounty.

TheOsch commented 3 years ago

Oh, sorry, I thought I've lost. Now I smile too :-)

headline-design commented 3 years ago

@TheOsch and @johnmgrimm, thanks for all the feedback and notifying us about issues (and your apps looks amazing!).We will add all of the issues you both raised to our to-do list.

@TheOsch, in response to the issue of only the first address being imported, we did not add a feature to import multiple addresses because MyAlgo Connect provides an option to select which address you wish to use in its pop-up window. However, we can see that it could be useful to switch between multiple addresses in an app itself, so we will enable this feature in the near future. As for the Pipeline.balance issue, thanks especially for notifying us about this. We will update the method so that it returns 0 instead of undefined. Also, we made the return value a string and appended it with "Algos" so that it would be very clear that the method is returning the balance in Algos (as opposed to an ASA). However, we can change this return type to a number if developers would prefer.

@johnmgrimm, in response to issue 12, we added an onChange prop to both Algo buttons in the latest Pipeline-UI update (which enables you to now use the Algo buttons with functional components and apps. We also added the documentation for this feature to their respective pages on pipeline-ui.com.

In response to issue 13, we deliberately did not add any customizable styling props to the buttons with hard-coded Algorand functions (You can only override their default appearance with some effort, which is by design). However, this is also a feature that we might consider changing in the future.

gitcoinbot commented 3 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 265 years, 3 months from now. Please review their action plans below:

1) dragondev1906 has started work.

I will implement the Donation app (option 1) 2) theosch has started work.

I'm going to try to implement both options in a few days 3) johnmgrimm has started work.

I will create an application with a restricted access. It will allow to proceed to the checkout page only if you have at least 10 ALGO in your Algorand Wallet. 4) jotagep has started work.

I'm gonna code Donation App Tech stack:

🚀🚀

Learn more on the Gitcoin Issue Details page.

TheOsch commented 3 years ago

Payments for those who've submitted will be processed in the upcoming week or next one.

Please excuse me for asking this question here, but it's extremely important for me: when will they be processed exactly?

BooneTB commented 3 years ago

@BooneTB I was not aware of that Hackathon, thank you very much for the Info, I just registered myself.

@DragonDev1906 :) glad to hear that, I would love to work together on this prototype https://stiffmoney.com/ and rebuild it using Pipeline UI. Interested in working together?

mnguyen96 commented 3 years ago

@johnmgrimm Great feedback, thank you! Can you share your residency information with me (only country) via DM on Discord via Michiel | Algorand Foundation#6116 or here if you don't mind?

@TheOsch Thank you for sharing your feedback. Recorded your work! :)

Temp closing bounty

At the moment, we are not looking for further submissions for both options! We will open up the bounty again for a new feedback round within one month approximately! Payments for those who've submitted will be processed in the upcoming week or next one. Thanks!

Unfortunately I did not see this until 99% of the way through my project. It would have been nice if this info was on the main bounty page. I know it hasn't been a month yet but is there an estimate on if/when a new round is open?

scholtz commented 3 years ago

I have used following components: Card, Heading, Text, Table, Loader, Button, QR, Input, Textarea, Box, Select

I had issues with form elements: Some of them are default formatted for exact width, while for example select is formatted for full widht.

Loader works good.

Table component is not usable for the production environment. In competitive UI framework it works the way that you put there the table config and data, and sorting, pagination and filtering is handled by the component.

There is lack of documentation, eg how to set the live data to table.

QR is simple qr code and does not create the algorand format qr code.

I wanted to use also the Pipeline component, but it lacks any usable methods. The point of my application is that the donation request is submitted to the network with specific note, and everybody see the donation and can respond by donating. There is no way how to read the public transactions on the blockchain. Also there is lack of support of every other wallet then the MyAlgoWallet.. I have solved this issue by generating standard QR code which is accepted by Official wallet, AWallet as well as MyAlgoWallet.

In Pipeline there is no way how to define custom algod or indexer servers. The choice between mainnet and testnet is fatal because most developers work on sandbox, than they test in testnet and then they publish it to mainnet.

Guys, that temp closing bounty shown only in this thread and not in the gitcoin page is funny.. I did not come here until i had to write the review..

The link to the work I have done: https://github.com/scholtz/algo-donate

gitcoinbot commented 3 years ago

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

Work for 749.997 ALGO (892.50 USD @ $1.29/ALGO) has been submitted by:

  1. @meutz12
  2. @dragondev1906
  3. @x24xc
  4. @theosch
  5. @johnmgrimm

@michielmulders please take a look at the submitted work:

gitcoinbot commented 3 years ago

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

The funding of 749.997 ALGO (997.5 USD @ $1.33/ALGO) attached to this issue has been cancelled by the bounty submitter

michielmulders commented 3 years ago

@headline-design Can you take a look at @scholtz's feedback? The sandbox is a valuable comment as many use this for development purposes. Let us know! :)

michielmulders commented 3 years ago

@scholtz You've been paid for the valuable feedback, bit of an unfortunate coincidence