Elemental ZEC – UI Component Kit and Payment Processor

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

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

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

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

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

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

Thanks 1337bytes,
keep up the hard work. Its always great and difficult to share user/usage information in the beginning.
Hope to see cool things …

1 Like

As mentioned above, there is a lot of extra work for the current milestone that I hadn’t foreseen. I’m making progress currently with building an Elemental Zcash SSO server (OAuth2 Provider), a full stack authentication system built from scratch, which will allow for registration, login, etc; things could’ve been sped up by using a framework or third party auth system, but am prioritising future proofing instead and don’t want to trust any third party/proprietary solution, use JWT, or use Ory Hydra without a solid understanding of Go incase debugging or custom features are needed. Given app adoption, OAuth2 support should allow for cool use cases like “Login With ZECpages” or “Login With Free2Z”. This probably should’ve been a milestone or two on its own.

Code here: Initial auth GraphQL/OAuth2 provider setup by macintoshhelper · Pull Request #1 · elemental-zcash/sso · GitHub . Currently, the unverified email user creation flow is working; next step will be creating a Dockerised transactional email system (with Postfix most likely). Am not keen on requiring AWS SES usage given that the API isn’t widely adopted like S3.

I’m using a custom ORM that I’ve built, elemental-orm, which is quite a bit of extra work initially, over using an existing ORM or manual SQL, but am doing this for future proofing and faster feature development in the future; the goal is to have the same data models create PostgreSQL schemas/queries, Redis indexing, etc and have a performant/scalable single source of truth. I’m not aware of any existing Node.js ORMs that nicely integrate PostgreSQL/Redis.

Once this is done, I’ll integrate the SSO server with ZPublish user registration, create a profile page with zaddress/UA entry and an all my links style page with the Elemental Pay donation flow, and an import for the Twitter data download (will probably do this in a future milestone once I’m more caught up on higher priority tasks).

TLDR; building a custom Redis/PostgreSQL ORM and SSO server has delayed things, but hopefully will be a really nice toolset for developers to build scalable Zcash apps, and will be extracting things like the GraphQL setup for Relay.js support and having a nice GraphQL/Apollo compatible API for building mobile apps (can then do things like create a GraphQL Zcash RPC API with caching).

5 Likes

An initial version of the front-end of Elemental Pay has been published to npm: @elemental-pay/components. For now there’s just a minimal invoice flow, I think it’s best to move onto the next milestone (Point of Sale) now, given that a lot of extra work has already been done for the current milestone, and incorporate the payment listening/processing backend API as part of that, and it’ll expand on top of the invoice components together with a merchant backend. A lot of preparatory work has already been done for the Elemental Pay backend with the SSO server backend implementation, as mentioned above: Initial auth GraphQL/OAuth2 provider setup by macintoshhelper · Pull Request #1 · elemental-zcash/sso · GitHub (apologies for the massive PR, need to split things up more for easier code review :slight_smile: ).

Here is the Linktree inspired app with a donation button/flow (deployed to staging for now since database may be wiped until it’s more stable): Elemental Zcash SSO And user registration is possible here: https://sso-staging.elementalzcash.com . For now, the code lives in the SSO repo to speed up deployment, but will be extracted into the ZPublish app soon and the SSO app/server will most likely be shared between ZPublish and Elemental Pay (for online/physical merchants). Once that’s done, Twitter backup/takeout import (to bypass API quotas) can be done (lowish priority for now unless someone specifically requests this feature) together with Twitter verification with OAuth2 (can use it to search/find Zcash address and social media profiles by Twitter username).

Am planning to experiment with adding a Sign in With Zcash authentication alternative to email/password for Elemental Zcash SSO by using zecwallet-cli’s encryptMessage to send an encrypted token that can be decoded with decryptMessage on a local machine with the published Zcash address’s viewing/private key – in the style of email magic authentication links, as encrypted Zcash memos that are fee-less by not being broadcast; drawback being this requires CLI access unless the feature is integrated into mobile/desktop wallets, and there may be security drawbacks in case people publish their viewing key (could have a separate private authentication-only Zcash address in that case maybe).

7 Likes

This feature has been on my wishlist for a while, glad to see it being worked on.

5 Likes

Hi, apologies for the lack of updates and progress! I’m nearing the completion of the fifth milestone and will be making another post once it is complete.

Here is an updated link for the grant proposal on the new grants platform: Gallery View: Zcash Community Grants Program

Building an SSO/authentication server and scalable payment processing backend infrastructure has resulted in considerably more time and work being needed than I had anticipated for the payment processing milestones. I ran into a bit of a dead-end with the TypeScript GraphQL/PostgreSQL database architecture that I had built; the codebase became too tangled and would’ve been unstable and slow to add new features to. I’ve decided to build a Python Flask microservice REST API for the SSO server (OAuth2 provider), and am replicating this architecture for the backend of Elemental Pay. Code for the Flask server here: Python microservice refactor by macintoshhelper · Pull Request #4 · elemental-zcash/sso · GitHub . Have been working on some test coverage too.

Soon I’ll publish the Elemental Pay website with the proof of concept Point of Sale payment flow; this will be usable by physical merchants on a smartphone (web app) and will work with a viewing key and in-conjunction with a wallet app of the merchant’s choice. After the implementation of a front-end flow, I’ll work on linking up the account system backend and dashboard for merchants with invoice support, etc.

Re Twitter integration, the official Twitter API has become virtually unusable for third party clients due to the new pricing model and new rules that state that it is not allowed to “create or attempt to create a substitute or similar service or product to the Twitter Applications”. As part of the last milestone, the 1.0.0 release of Elemental Zcash, I’ll integrate Twitter sign-in to ZPublish (which will work in tandem with the sign-in with Zcash SSO feature) and a proof-of-concept tweet import feature into ZPublish using the Twitter data takeout JSON.

This grant has taken considerably longer than planned; this is mostly due to the fact that I’ve been trying to accomplish too many different tasks and context switch between different codebases/projects and the backend infrastructure has been a lot more work than I expected. I’d be keen to focus on developing Elemental Pay after this grant and depending on community enthusiasm, would like to apply for additional funding for Elemental Pay (I’d be happy to continue working on it straight away and could apply for retroactive funding if community feedback is positive). After some user testing and adoption, Elemental Pay should have a nice path forward for being able to bring in some revenue from merchants that would prefer to use a hosted option rather than self-host the open-source repo/platform themselves which should make the project sustainable in the future.

5 Likes

I’ve published the proof-of-concept Elemental Pay Point of Sale app here: https://elementalpay.com/ . Source code here (Next.js server): elemental-pay/packages/web at main · elemental-pay/elemental-pay · GitHub . This is a client-side demo for now (no account needed). A merchant can input their business name, Zcash address for their own custodial wallet, and price amount, show the customer the QR code and a token is generated on the backend and encoded into the memo and is displayed back to the merchant to verify in their wallet app.

I feel that it’s best to delay implementing the Liberated Payments inspired flow for now as the ZIP is still a work in progress, and upon further research I’ve decided that it should be sufficient to allow 0conf transactions for lower value purchases and as far as I understand, this flow wouldn’t really prevent a double spend as the customer would still have the private/spending key, so there wouldn’t be much difference to a conventional transaction. A paper wallet style flow would be more useful, but should probably remain a low priority for now until user testing has been done and merchants are already actively using the app.

An initial minimal version of the SSO/OAuth2 server is near completion now. I feel that it’s best to move the publishing of the payment backend API forward to the next/last milestone. As part of the last milestone I plan to publish/deploy the SSO server and link it up with Elemental Pay and ZPublish, giving them an account system, finish implementing Sign in With Zcash authentication, and publish Elemental Pay 1.0 together with the invoicing/merchant/payment listening API and Elemental Zcash 1.0 with the SSO server as part of it (front-end components and backend server components).

EDIT

An alpha version of the SSO server is now live (email and Zcash address auth disabled for now, I implemented (random) account ID and password login for now to not block development on Elemental Pay. Am planning to implement Login With Zcash with both encryptmessage/decryptmessage for CLI users (no transaction needed) and on-chain verification token sent to your wallet in a memo to verify zcash address ownership, until mobile wallets support decryptmessage, then will be able to login with zcashaddress as a username and your password, and the SSO server will act as a “guarantor”/trusted verifier of the Zcash address ownership; the transaction fee will need to be funded with an initial transaction to open the account. https://sso.elementalzcash.com/ Please keep in mind that accounts will likely be deleted for 1.0 release.

The OAuth2 flow for logging into Elemental Pay (payment processor) with Elemental Zcash SSO is working locally, and will deploy this for demo purposes soon. Code here: Initial user login/signup flow with Elemental Zcash SSO | PR #1. Next steps will be working towards a MVP/1.0 release of Elemental Pay, with a merchant sign-up process, implementation of a Point of Sale merchant dashboard with invoicing API (built on top of zecwallet-light-cli – will probably implement this as a Flask microservice). And 1.0 release of Elemental Zcash with documentation. Then will implement a backend for ZPublish and integrate the donation app as part of that together with tweet import. Any feedback/ideas appreciated.

4 Likes

Hi, an update on the last milestone and current state of the project:

My laptop logic board died a couple months ago, and I was unable to get it repaired until last month, which has unfortunately delayed things; I had got a second laptop meanwhile, but it was slow and problematic to work on. Am making faster progress now that my main laptop is working again.

I’m nearing completion of the last milestone (1.0 release of Elemental Zcash and Elemental Pay) and have been working on automated setup scripts and documentation, including Storybook apps for documented examples of the component libraries to allow for easier integration into apps.

I am doing a bit of a rewrite of the zecwallet light interface to use ephemeral Docker containers for payment listening, this is requiring quite a bit more work than I had anticipated and has been slowing my progress. I will then be able to do a 1.0 release of Elemental Pay with an invoicing API.

Tasks left to do:

  • Finish zecwallet light interface API (for invoicing, SSO encrypt/decrypt message, viewing key imports for Point of Sale)
  • Finish off environment generation scripts (OAuth client IDs and secrets, env secrets, Docker Compose setup, etc)
  • Finish documentation (Storybook stories)
  • Migrate donation web app to ZPublish, integrating Elemental Pay component library (with client-side flow) and optional server-side flow with payment listening, if the user has submitted their viewing key to the SSO server).
  • 1.0 release of Elemental Zcash, Elemental Pay and Elemental SSO.
2 Likes

I’ll be publishing a 1.0 release of Elemental Zcash, Elemental Pay and Elemental SSO today. I’ve pushed the latest code to GitHub for them already. And I have published a minimal version of https://zpublish.org with live payment listening support.

Took a lot more work than expected to get it all working, but I’ve finally got a nice system working for payment listening/processing. Linktree style donation page here, with static Zcash donation Elemental Pay invoice UI if only a Zcash address without viewing key is provided, or if a viewing key is provided, it’ll provide a live update when the payment has been received https://zpublish.org/user/clns64o3l0000no01lu4vw5kj

I plan to continue working on cleaning up the code, fixing bugs, introducing automated testing, CI, etc for the next couple of months and am thinking of applying for another grant to focus on Elemental Pay improvements.

It took quite a bit of rearchitecting to get the zecwallet light interface API for Elemental Pay into a usable state; initially I was wrapping zecwallet-cli, but found this to be too unstable and hacky, and abandoned these efforts in favour of using zingolib. I developed @elemental-zcash/zingo-node, an npm library with Node.js bindings to the Rust zingolib project. For now, it’s in an experimental stage, but in the future, this could be evolve into an official Zingo SDK for Node.js/React Native.

Using the Zingo node bindings (with x64 Mac/Linux Docker compatible prebuilds – Release zingo-node-v0.0.1-beta.9 · elemental-zcash/zingo-node · GitHub), I created a JSON-RPC REST server exposing zingolib commands like initialising a wallet from a Unified Viewing Key, listing transactions, encrypting/decrypting messages/memos, etc which can run in a Docker container. There is a gateway server that uses Docker as a function (inspired by zcashblockexplorer.com viewing key imports), spinning up a ephemeral Docker container with a Zingo wallet. https://github.com/elemental-pay/wallet-service/blob/main/packages/zec-rpc-gateway/zingolight/api/api.py .

In the next couple months, I plan to experiment with building a custom Zcash wallet based off zingolib with a redo of the UI, and hopefully as part of this, contribute improvements upstream to Zingo wallet and possibly work on an SDK ecosystem that would make Zcash wallet development easier (i.e. in the lines of Bitcoin dev kit – BDK-RN: Building React Native Apps with BDK | Bitcoin Dev Kit Documentation ). This would make it easier to surface features like decryptMessage to an end user via UI for use cases like signing in with Zcash or resetting a password by proving ownership of a Zcash address/viewing key (decrypting a reset password/verify address token).

I set out to work on too many different goals for this grant which unfortunately led to many delays, and I ended up changing some of my priorities. As mentioned earlier, I decided not to work on a custom Twitter client/integration due to the removal of free API access, and am not sure that this is something that would be used much in any case. And in terms of ZECpages/memo.cash protocol support, I feel that it’s better to not rush into developing something that may not be used much (at least without user interviews/testing), and wait for Zingo and Brave adoption of a memo protocol before development on this. The SSO server was out of the scope of this grant and contributed to the delays, and I worked on this instead of some of the social-media focused features, which I felt was more important, as this opens exciting possibilities for privacy-focused login.

TLDR;

  • Publishing a 1.0 release of Elemental Zcash components and Elemental Pay today.
  • Elemental Pay payment listening support with backend Zingo wallet (with ephemeral Docker containers that expire after 6 hours – invoice expiry)
  • zingolib Node.js bindings.
    • Can be expanded to a Node.js and React Native Zingo SDK ecosystem for app/wallet devs
  • Privacy-focused SSO server for ZPublish/Elemental Pay, and could be adopted by other projects like ZECpages or Free2z – will offer account recovery via Zcash memos
  • Plan to continue working on fixes, cleanup and features in the coming months
  • Future grant ideas: Zingo or warpsync React Native SDK and Elemental Pay as a service (could generate revenue on its own in the future by offering a hosted SaaS option as an alternative to Coinbase/Bitpay/Stripe).
12 Likes

Congrats! Props to pushing this over the finish line.

4 Likes

Did you complete the documentation?