Elemental ZEC – UI Component Kit and Payment Processor

Community Grants Applications
1

Applicant background

Software Engineer with 5 years’ experience working in web and app development. Extensive expertise in building full-stack apps, design systems and server management; experienced with JavaScript and Java. Founder of open-source organization Elemental Design: Elemental Design System · GitHub

Active member of the open-source community.

Contributor to:

  • airbnb/react-sketchapp – render React code to Sketch designs or component library
  • react-figma – render React code to Figma designs
  • lona/xd-file – Adobe XD file manipulation utility for Airbnb’s Lona
  • styled-components – one of the most-used React CSS-in-JS libraries
  • commaai/explorer – annotator for self-driving car video footage

Description of Problem or Opportunity

Building a Zcash app is time consuming and a lot of work needs to be done from scratch. Node.js integrations with a light client currently need to be done manually; there should be npm packages for this. This makes prototyping ideas and developing apps for Zcash harder. Also, there are currently no open-source solutions for a merchant to accept Zcash payments. There has been community interest in a BTCPayServer integration or fork that adds support to Zcash.

Proposed Solution

A set of open-source modular components and libraries for Zcash apps to use, including a minimal payment processor, compatible with BTCPayServer/BitPay API.

The main users initially will be developers of existing and new Zcash apps. There will also be some example apps which can be used by ZEC holders, such as a Zcash donation app with a confirmation message or action, together with a demo Point of Sale app.

Solution Format

Open-source, published to GitHub. React.js and Node.js component libraries published to npm.

Technical approach

Agile methodology making use of GitHub for project management (Issues and Projects), with weekly sprints.

Front-end components

  • Built with cross-platform React.js code: using @react-platform and elemental-react
  • Published as elemental-zec

Back-end components (payment processing, light client integration)

  • Node.js libraries, including:
    • a watch-only wallet for payment processing (elemental-pay, exposing a BitPay compatible REST API)
    • ZECpages and memo.cash protocol support; decode action codes and messages, and cache/expose via Postgres and REST API. These could be integrated into wallets

How big of a problem would it be to not solve this problem?

The absence of an open-source and self-custodial payment processor is a significant hindrance to Zcash adoption. Projects such as BTCPayServer have proved popular, even being used by companies like Tesla. There is also a high risk of developers duplicating work across Zcash applications, which would be solved by creating a common component library.

Execution risks

If a BTCPayServer fork is not ready by the project’s completion, then the project may have to rely on a non-audited Node.js backend.

Developers of existing Zcash apps may be keen to stick with the frameworks/languages they use currently, so cooperation and outreach will be needed.

Unintended Consequences

Inexperienced developers could inadvertently introduce security holes while creating apps using the libraries, especially if working on payment processing apps; clear documentation will be needed to explain the risks of using certain approaches and the need for audits or using audited software for sensitive applications.

There could also be performance issues with popular apps using the libraries. Clear contribution guidelines will be needed, together with the ability to easily debug issues and benchmark performance to make it easy to implement optimisations.

Evaluation plan

Since the work will be on GitHub, repository stars, forks and community discussion in issues or GitHub Discussions will be useful metrics of usage. GitHub tracks usage of npm packages in open-source repositories, giving an insight into how many open-source projects are using the libraries. npm downloads can be tracked too. Community feedback can be collected via the Zcash forums, GitHub Discussions and Discord.

Schedule and Milestones

Total timeline will be 24 weeks (5.6 months). Weekly sprints with deliverables for milestones (GitHub and npm releases, together with demos). The first month of the project will start out with defining specifications for the full scope of the libraries and designs.

Budget

Development

Time Amount
Hourly Rate $100 / hr
Hours Per Week 21 hours
Number of Weeks 24 weeks
Total $50,400

Hosting

$57 / month (OVH Dedi) – $744 for 12 months

  • machine for development purposes (full node if light client isn’t sufficient), testing and demos
9 Likes
2

Some more details on the proposal:

One of the milestones involves working on a third party ZECpages client (published on the ZPublish GitHub/website), which would be built with Elemental ZEC. I’ve already done some work towards Twitter API integration, and am thinking of adding a Zcash tweet tipping feature if there’d be interest in this (i.e. can send a link/ID for a tweet in a memo, if an author has published their zaddr). This would also involve some of the groundwork being done towards having mobile app wallet support for ZECpages and other social media message/action protocols like memo.cash. I’d be keen to get people’s thoughts and feedback on this.

Another milestone would involve the creation of a payment processing library and donation webapp, initially with watch-only support so that a merchant/creator can trigger an API action after receiving a payment. This would initially work as a self-hosted Linktree-like website where you can receive donations/tips and later on payments.

I’m interested in experimenting with the idea of Liberated Payments with Point of Sale and donation transactions – Liberated Payments is a draft ZIP proposal to create a Zcash payment in the form of a private key encapsulated in a URI string. Research/testing will be needed though to make sure a 0conf transaction can’t be abused by a customer draining their private key with a higher transaction fee than a merchant quickly after a purchase (could be remedied by a shop only offering 0conf to regulars). Any thoughts on this would be appreciated.

4 Likes
3

Congrats! ZOMG has approved your grant proposal :slight_smile:

13 Likes
4

Thanks! Am excited to be working on this project and can’t wait to see how it progresses once community feedback starts coming in.

The first milestone is nearing completion. I have created a Discord community for updates and for people to provide feedback: https://elementalzcash.com/discord . There is also a Matrix channel for those that prefer open-source chat apps, there isn’t any bridging currently though so it will be used more minimally for now.

The project has been renamed to Elemental Zcash. GitHub is here: Elemental Zcash · GitHub

Here is a Sketch design web preview of the Elemental Zcash Design System: https://www.sketch.com/s/03e64eb2-2306-4036-8536-be5f6891a580. I am currently porting the designs to a cross-platform React component library which will allow for full theming/customisation by app developers, and this will be used to re-generate the Sketch design system (and there will be a Figma component library in the future too), allowing for better iteration from feedback and modularisation of the component APIs.

I would appreciate suggestions or feedback for example projects (built with Elemental Zcash) for the second milestone of the project: I’m currently thinking of building a Zcash map of physical (and online) merchants that accept Zcash in the lines of https://map.bitcoin.com and bmap.app, to supplement paywithz.cash , together with a system to report whether a merchant is still accepting Zcash or not; would be keen to hear any thoughts on this. The data would be hosted on GitHub initially, in the form of JSON, making it easier to maintain and merge community contributions. Am hoping that this will be a nice motivation for merchants to adopt Zcash point of sale to further adoption.

9 Likes
5

Share on Twitter with images :slight_smile:

1 Like
6

Cant wait to see what will be built through this project.

paywithz.cash hasnt been kept up to date in a long time and could use a UI overhaul. Some of the services dont offer Zcash anymore and havnt been updated.

I would welcome a new similar regularly (perhaps user) updated site with a map/list of merchents that accept Zcash.

2 Likes
7

Hi, apologies for the lack of activity and delays (am still working on the second milestone currently). I’ve been delayed by some things that have come up in my life. Am back on track now and will be posting frequent updates. Just a reminder that there is a Discord and Matrix channel for anyone that wants to get involved with testing, be involved in discussions or keep track of the project more closely: https://elementalzcash.com/discord and elemental-zcash:matrix.org

The core component library is near complete and I’m currently working on building a documentation website which is built with the component kit, which will be published shortly, together with a Zcash merchant map app. The code is cross-platform and is also used to generate a Sketch style guide and can be used in a React Native app. Preview: https://elementalzcash.com/react/buttons/ – source code will be pushed to GitHub shortly, and I’ll add an updated Sketch design (generated with the same code that is used on the Gatsby site), once I’ve sorted out the connection issues I’m having with the Sketch cloud service.

I’ve been working on getting in touch with merchants that I will be able to user test the Elemental Pay part of the project with. This is an example of how the JSON file backend of a merchant map would look like (user update-able through GitHub PRs): travel/country/spain/andalusia/granada-province/granada at master · macintoshhelper/travel · GitHub

– Edit –

Work in progress Sketch export of component library, generated from the same React code as used on the Gatsby documentation website – Sketch – elemental-zcash-sketch-export / Components / Buttons (and canvas view).

– Edit #2 –

Initial prototype of ZEC map is now done: https://elementalzcash.com/zec-map/ . Feedback much appreciated. GitHub repo here, for place submissions or suggestions (use issues/PRs): GitHub - elemental-zcash/zec-map: Directory of physical and online merchants that accept Zcash .

Am using placeholder data for now, but I’ll be developing a database system and working on interoperability with other crypto map sites, and a system for users to submit new places or feedback on whether places are still accepting Zcash. The site will also have some info on onboarding merchants, once Elemental Pay is ready.

Next thing I’ll be working on is some prototype designs of Zcash wallets using Elemental Zcash components (React Native compatible). Feedback on the relevant GitHub repos or on Discord/Matrix would be much appreciated, and I’d love to get developers to experiment with the components and provide feedback.

7 Likes
8

I run the paywithz.cash site, and I agree with you, it could be better and more time could be spent curating the lists. Merchants that accept Zcash can be a fluid thing. Please let me know if you find anything that needs updating. There’s a contact link, a Twitter account, dm me here, or send a zcash memo.
Also, another list of merchants or a merchant map would be good! I miss the list that was on the zcashcommunity website. I’d often compare with that list to see if anything needed to be added or removed.

6 Likes
9

Hi! An initial prototype of the first standalone app built with Elemental Zcash is now live: a cross-platform third-party client for ZECpages, built on top of the REST API: https://zpublish.org/ (work in progress, will be improved incrementally). For now, a work-in-progress prototype of the web client is working; support for pagination, polls, replies, etc will be added soon. there will be an Android/iOS app in the nearish future. Please submit feedback here, as GitHub issues at ZPublish | GitHub or in the Elemental Zcash Discord/Matrix channel.

As part of this, I’ve been working on plumbing that makes building standalone apps easier such as an extendable icon build pipeline, better theming overrides, etc.

8 Likes
10

Quick update: a MVP version of ZPublish is now ready, I ran into some delays due to feature creep, and some health reasons (had Covid recently). I’ve implemented a virtualized list and infinite loading system (for high performance for long lists – will be ported to Elemental Zcash component library soon) on top of the ZECpages API, some reply threading and improved UX on post creation: https://zpublish.org/ .

For now, Twitter integration is on hold, since I’d want to do user testing and get sufficient feedback before investing much time on the Twitter API back-end infrastructure, and some sort of memo handshake specification would be needed for authenticating/validating the sender of a post via Zcash memo; the UI for Twitter post feed rendering exists in code and is shared with the ZECpages UI components.

Some improvements are in the works for zec-map, including an API for providing/sharing Zcash physical merchant locations with other cryptocurrency maps, and am planning on creating documentation with some kind of incentive system for onboarding physical merchants to accept Zcash.

6 Likes
11

Do you plan to deliver the Twitter client as part of a future milestone?

3 Likes
12

I feel that a full Twitter client would be too much for the scope of a single milestone or the Elemental Zcash project, and that it would be best to consult with the community and do user testing before investing too much time into implementing full Twitter integration; I was initially thinking of doing this as part of my ZPublish grant application, but there didn’t seem to be sufficient interest in it at the time. Also, Twitter API quotas make building full custom clients not very feasible.

I’ve ported a proof-of-concept front-end implementation of a Twitter feed that I had built earlier to use Elemental Zcash components.
Code: platform/microblog-timeline.js at 91e6621d5c88822cc03ba6e7e1053c5b973aa4da · zpublish/platform · GitHub & web demo: Home | Microblog App | ZPublish - Microblog (some of the profile image caches have since disappeared from the Twitter CDN).

I think that it’s best to carry forward the Twitter integration into the next milestone: the Elemental Pay library with donation app; this would involve the back-end/database setup necessary for Twitter API and OAuth anyway (for storing tokens safely), and Twitter OAuth together with tweet import would pair nicely with the donation app. Twitter API/OAuth can be integrated together with the Elemental Pay library for donations, into ZPublish.

3 Likes
13

Cool, thanks for the response! :+1:

1 Like
14

Personally would like to see an implementation of this over the merchant thing. Maybe you can team up with @BrunchTime and apply for a new grant together. The more people working on promoting ZECPages the better, IMO. It’s the best “usage” of the memo field in the cryptocurrency ecosystem and has a ton of potential, but it needs some TLC. I can imagine it being like Disqus at some point where if I want comments on my website, I can embed some iframe you provide that gives me a ZECPages-like comment system.

3 Likes
15

Are there any features you would like to see specifically? If you’d be up for user testing, please join the Discord :slightly_smiling_face: .

I like the idea re Disqus, but I feel that iframes should be considered deprecated given their uncertain browser API future and bad UX. A REST API and React components for comment support could be nice, i.e. similar to Stripe components.

One of the main limiting factors is finding a nice way to sign/verify the identity of a memo sender (sender handshakes). Maybe payment disclosure with an HMAC message signed by the platform API could work, but I don’t believe the light client supports them. It would be nice to validate a Zcash memo as being sent by a specific Twitter user. I haven’t been able to get ZecWallet Lite client’s encryptmessage/decryptmessage to work

16

Hey! I had a draft here, but after coming back to it, I wiped it out and am going to re-try to respond.

I think this is a pretty interesting proposal and somewhere I can see Elemental working together nicely. Seems like zingolabs can tackle some of the harder dev problems and Elemental could gain exposure to new customers.

You could even offer a Pro version like: https://pro.chakra-ui.com for some components. Maybe bring on @Ziga and create a super team.

I recommend reading @zanca’s Announcing Zingo thread – some good stuff in there and I sense some potential “synergy” and an actual developer ecosystem being built out.

6 Likes
17

Quick update on the current milestone, will be updating/editing this post with more details soon:

The scope of the current milestone (Elemental Pay with donation app) is a bit too wide for four weeks’ work and it’s difficult to narrow down on an MVP that can be developed in a short amount of time. I’ve been making progress on the Elemental Pay back-end API (for payment listening/verification and invoicing). This is shared work with the Point of Sale milestone. Some of the code behind API infrastructure will also be shared/ported for use in ZPublish for storing Twitter tokens to support Twitter login, as mentioned above.

Re the previous milestone, I am ideating/experimenting with some ideas/proof of concepts for ZECpages memo handshakes such as an EC signature appended to each post, for example for verifying the Twitter user that created a ZECpages post based on a private key kept on the ZPublish server. There’s some overlap with the handshake ideas discussed in the Zemo application forum post, there’ll need to be some consensus on a memo protocol design for this to move forward with it though.

I’m working on creating a Zcash payment flow component library inspired by the Stripe client API, that can be used for a couple of functionalities.

“Static” payment functionality will remain inside the Elemental Zcash React library – QR code and zaddress copying, with a button to dismiss the modal. This will be used as part of the Elemental Pay donation page generator project – an AllMyLinks/Linktree style static HTML/React page generated with Gatsby that can be hosted on GitHub Pages with links to social media accounts together with a Zcash address donation flow.

Dynamic payment functionality (verifying payments) will require the Elemental Pay libraries. I’m working on an Elemental Pay API server with a GraphQL interface (or can switch it to REST, subject to feedback) which will interoperate together with the Elemental Pay React component library. The API server can be self-hosted, or a hosted one can be used, where viewing keys are uploaded to. This will interoperate with either Zcash lite wallet RPC or BTCPayServer.

— Update —

Was unwell for a week which has delayed things :slightly_frowning_face: . Designs for the payment processing (and will be shared/re-used with the Point of Sale app) are here: Elemental Pay Sketch Screens . Am working on the web implementation of it, for the ZPublish website currently, but have been running into issues with the responsive styling of it.

— Update #2 —

Am working on a bunch of backend infrastructure which is taking some time, which is necessary for ZPublish and Elemental Pay; four weeks for an MVP of Elemental Pay was a bit ambitious… Currently working on a full-stack SSO OAuth2 authentication server, then will work on a ZPublish Twitter profile mirror (as part of the donation app) using archive JSON (will add tip functionality to archived tweets, using archive JSON to save the need to account for API limits for now). For now, progress can be tracked on GitHub (commits/PRs mainly).

4 Likes
18

Hey! Thanks for the comment and idea, definitely sounds interesting :+1: . Having a Zingo wallet library that expands on ZecWallet Lite’s React Native support would be great and work well with Elemental Zcash, especially if there’s wasm support down the line.

A Pro version of Elemental Pay components would be nice, I’ve been thinking of offering some kind of hosted option of the Elemental Pay backend for merchants that don’t want to self-host, and this could work together with offering Pro components and would include server/front-end maintenance/support for merchants.

Having protocol expansions such as a handshake/signature system for apps like ZECpages/Zemo is something that could be done more easily via Zingo I feel.

4 Likes
19

Hi 1337bytes,
https://elementalzcash.com/react/getting-started/

Looking good, wondering if you can share some info from your evaluation plan?

The work will be on GitHub, repository stars, forks and community discussion in issues or GitHub Discussions will be useful metrics of usage. GitHub tracks usage of npm packages in open-source repositories, giving an insight into how many open-source projects are using the libraries. npm downloads can be tracked too. Community feedback can be collected via the Zcash forums, GitHub Discussions and Discord.

Thanks

2 Likes
20

Thanks! I’ve just opened up GitHub Discussions for the React component library: Discussions · elemental-zcash/react · GitHub . I’d say GitHub stars/forks are more of a meaningful metric post 1.0 (stable) release of the libraries, especially as doing a lot of outreach/marketing of the library at this stage would not be very productive given limited testing and APIs not being stable to use in production apps. There’s a graph of npm downloads of @elemental-zcash/components.

To my knowledge, there are no community apps built with Elemental Zcash yet, hopefully this will change with the release of Elemental Pay, which will allow developers to track/confirm Zcash payments more easily and provide Stripe/PayPal/CoinBase Commerce style UI/UX flows; some work is needed on “Getting Started” documentation too, to cover the setup for styled-components, locale context, React Native, etc. I’d be more than happy to spend time to onboard developers onto using the libraries.

2 Likes