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.



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


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

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

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.


Congrats! ZOMG has approved your grant proposal :slight_smile:


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.


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.