Elemental ZEC – UI Component Kit and Payment Processor

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: https://github.com/elemental-design

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
7 Likes

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

Congrats! ZOMG has approved your grant proposal :slight_smile:

13 Likes

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

Share on Twitter with images :slight_smile:

1 Like

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

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

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

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

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

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

3 Likes

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

Cool, thanks for the response! :+1:

1 Like

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

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