vote pending
Off-chain typescript libraries, React web3 components to build dApp TXs with Paas APIs
Current Project Status
vote pending
Amount
Received
₳0
Amount
Requested
₳115,000
Percentage
Received
0.00%
Solution

TBA

Problem

The off-chain libraries, web3 components that work with Paas (F11 funded project) APIs is a simple solution to build dApp smart contract TXs or migrate existing web2 projects to web3 dApps.

Team

1 member

Off-chain typescript libraries, React web3 components to build dApp TXs with Paas APIs

Please describe your proposed solution

We completed technical milestones and deployed Catalyst project 1100097 PAAS MVP to publish, provide compiled smart contracts as JSON objects through APIs at: https://paas.bworks.app/web. There are already several published Aiken, Plutus smart contracts on PAAS MVP with various signature, string, number and time validators ready to use.

This proposal continue our F11 PAAS project by developing typescript off-chain libraries, web3 React components to integrate with PAAS APIs to build dApp transactions(TXs) via internet as below:

const lockTx = await paasLib.lock({wallet: 'connectedWallet', contract: 'paasContractId', assetPolicy: 'assetPolicy', amount: 'assetAmount', datum: 'datum'})

const unlockTxHash = await paasLib.unlock({wallet: 'connectedWallet', lockedUtxo: 'lockedUtxo', receiverAddress: 'receiverAddress', redeemer: ''redeemer})

<PaasTx onClick={lock || unlock || mint} />

The project to result out published libraries, components on NPM package registry for others can use via Yarn add, NPM install with below details:

Off-chain library functions

  • Build, sign and submit a TX with available smart contracts on PAAS.
  • Record submitted TX metadata, error message to PAAS API.
  • Get locked UTXO, contractId to use for unlock a locked TX.
  • Utils, validations around Cardano smart contract subject.

React components

  • Connect installed wallet.
  • Lock asset to a smart contract.
  • Unlock asset from a locked UTXO.
  • Mint asset token with smart contract.

Features

  • Sign TX by installed wallet.
  • Tracking TX metadata, error message via the Paas web and APIs.
  • Support Plutus V3, Conway era and mint policy Plutus contract.
  • Up to date nodeJs, React and Cardano node version.
  • WASM packing with webpack, vite.

Language

Typescript (javascript), the most popular language to develop web frontend, mobile apps.

Diagram

web3Paas-4837fb.jpg

Demo

<https://www.youtube.com/watch?v=lxcB5J475hU>Users

dApp developers, researchers and learners.

<u>Conclusion</u>

As a result others can use the libraries, components with available smart contracts on PAAS to build dApp similarly to building web2, migrate existing web2 to Cardano web3 by including web3 React components into current projects. This benefits community at some level.

Please define the positive impact your project will have on the wider Cardano community

Benefits when building dApps with these off-chain libraries, web3 components:

  • Build web3 like web2 with lower cost, time and human resource.
  • Web2 developers can approach web3 dApps with the same mindset, code style.
  • Intuitive, realtime tools to track TX submission status, error message on the web.
  • React components to migrate existing web2 projects to Cardano web3 dApps.
  • Improving developer experience, accelerating dApp adoption and grow TXs.

Share the outputs: the developed libraries, components are open source and published to NPM registry for community can use to develop dApps.

Measure the impact: Number of downloads from NPM registry, number of TXs build by the libraries, components monitored on Paas report.

What is your capability to deliver your project with high levels of trust and accountability? How do you intend to validate if your approach is feasible?

Team capacity

We are the team that building Paas platform and its smart contracts consists members in various domains:

  • Experienced Cardano web3, smart contract developers.
  • Seasoned backend, frontend software and Cardano DevOps developers.
  • Community, social marketing people.

Cardano projects

Process and report

  • Document with function, task list and acceptance criteria for each function/feature.
  • Development and deployment to public github repo and demo URL.
  • User guide for community and reviewers to verify the functions, features.

The evidences of works

  • Shared google docs task and checklist.
  • Github commits.
  • App screenshots, deploy code url, video demo.

What are the key milestones you need to achieve in order to complete your project successfully?

Milestone 1: <u>Develop off-chain typescript libraries for dApp transaction</u>

Time: month 01-02

Milestone outputs

Develop typescript off-chain library with below functions:

  • Fetch available smart contract from PAAS APIs to build lock, unlock and mint asset transactions.
  • Connect installed wallet then submit transaction to Cardano blockchain.
  • Record transaction metadata to PAAS API when lock.
  • Get locked transaction UTXO to unlock asset from smart contract.

Acceptance criteria

  • Can use the libraries to build smart contract lock, unlock and mint asset TXs with Paas contractId without error.
  • The libraries functions return TxHash or error message if the transaction is failed.
  • Libraries worked with no error, acceptant latency.

Evidence of milestone completion

  • Google docs task list.
  • User guide.
  • Recorded screenshoots.
  • Youtube video.
  • Github commits.

Milestone 2: <u>Develop web3 components use for dApp to submit transactions</u>

Time: month 03-04

Milestone outputs

Develop below React component:

  • Connect installed wallet component.
  • Lock asset to smart contract component.
  • Unlock asset from smart contract component.
  • Mint asset token component.

Acceptance criteria

  • React components works as expected to connect wallet, lock, unlock and mint transactions without error.
  • Javascript, typescript project can use these components to make smart contract transactions.
  • Components worked with no error, acceptant latency.

Evidence of milestone completion

  • Google docs task list.
  • User guide.
  • Recorded screenshoots.
  • Youtube demo video.
  • Github commits.

Milestone 3: <u>Develop APIs</u>

Time: month 05

Milestone outputs

Develop and deploy APIs:

  • Record (post) transaction metadata for smart contract lock transaction.
  • Return (get) the UTXO use for smart contract unlock transaction.
  • Utils around smart contract transaction subject e.g parse contract address, wallet public key hash and validations.
  • Get contractId for a locked UTXO

Acceptance criteria

  • Users can post, get data through APIs and the APIs return valid data.
  • The APIs work fast, lesser than 2 seconds through internet.
  • APIs worked with no error, acceptant latency.

Evidence of milestone completion

  • Google docs task list.
  • User guide.
  • API endpoint URLs for community to try.
  • Screenshoots recorded the APIs test.
  • Youtube video demo.
  • Github commits

Milestone 4: <u>Develop dApp examples for demo</u>

Time: month 06

Milestone outputs

Develop and deploy 04 examples that use library in milestone-1 and components in milestone-2 with some typical Aiken and Plutus smart contracts:

  • Build and submit smart contract lock and unlock transactions.
  • Mint asset token transaction with smart contract.

Acceptance criteria

  • Examples are developed and deployed with public URLs.
  • User can build and submit smart contract TXs on Cardano mainnet.
  • Examples worked without errors and acceptant latency.

Evidence of milestone completion

  • Google docs task lists.
  • User guide.
  • Public URLs for community user to try examples.
  • Recorded screenshoots.
  • Youtube video.
  • Github commits.

Final Milestone: <u>Publish libraries and components to NPM registry for dApp can use via NPM install or Yarn add. Build community and support</u>

Time: month 07-08

Milestone outputs

  • Publish libraries, components NPM registry so developer can add them to project via NPM install or Yarn add.
  • Communicate the project via Cardano community telegram, discord to build community.
  • Create social channel twitter(X), youtube for user to update information.
  • Support to build dApp with the libraries and components.
  • Close out report.

Acceptance criteria

  • Libraries, components are packed and published. User can get packages with NPM install or Yarn add.
  • User can build dApp TXs, migrate web2 to web3 with libraries, components.
  • Project is communicated to Cardano community channels and social channels Twitter, youtube.
  • Telegram support channel is created and have people to support.
  • Close out report is submitted.

Evidence of milestone completion

  • Google docs checklist.
  • User guide.
  • NPM register urls to view Libraries and components.
  • Communicated messages on social channels.
  • Recorded screenshoots.
  • Youtube video demo.
  • Github commits, release tags.

Who is in the project team and what are their roles?

1.Thang Tran - full stack, smart contract &amp; web3 engineer.

GitHub: <https://github.com/saigonbitmaster>, <https://github.com/bWorksApp>

Responsibilities: engineering management, smart contract, web3 developer, full stack developer.

2-David do - professional social marketing and community manager

<https://www.linkedin.com/in/david-do-0bb52b283/>

Responsibilities: Promotion, user acquisition and community engagement.

3-Thang Vu - senior software and web3 developer.

<https://github.com/vmthang>

Responsibilities: smart contract, web3 developer, full stack engineer.

4-Thanh Nguyen - senior full stack engineer

<https://www.linkedin.com/in/congthanh-nguyen-b152361a0>

GitHub: https://github.com/makotovnjp

Responsibilities: full stack engineer.

5-Oanh Ngo - experienced QA/QC.

<https://www.linkedin.com/in/oanh-ngo-06b331100>

Responsibilities: QA/QC test, report.

6-Chuong Pham - senior devOps, experienced Cardano engineer.

<https://github.com/jackchuong>

Responsibilities: Cardano CLI scripts, web3 dev, build tools.

7-Dung Phan - senior devOps, experienced Cardano engineer.

<https://www.linkedin.com/in/phan-d%C5%A9ng-6682b5245/>

Responsibilities: dApp deployment. Library, web assembly packing and publishing.

Please provide a cost breakdown of the proposed work and resources

Total cost 115k Ada, equivalent to 40k $ at Ada price ~0.35$. Average 120 Ada per a work hour for estimated total 958 work hours.

Milestone-1: Develop off-chain typescript libraries for dApp TXs

25,000 Ada for estimated 208 work hours.

Milestone-2: Develop web3 components use for dApp to submit transactions

25,000 Ada for estimated 208 work hours.

Milestone-3: Develop APIs

20,000 Ada for estimated 167 work hours.

Milestone-4: Develop dApp examples for demo

20,000 Ada. Estimated 167 work hours.

Final milestone: QA/QC and fix bugs. Pack, publish libraries, components to NPM registry. Build , support community.

25,000 Ada. Estimated 208 work hours.

How does the cost of the project represent value for money for the Cardano ecosystem?

The use of requested budget

  • Develop off-chain library to integrated with published smart contract on PAAS MVP platform.
  • Develop set of React components for dApp to use.
  • Publish library and components to NPM registry for dApp to use.
  • Grow and support community users.

The return of funds

Libraries, components to build dApp easier so so it accelerates dApp adoption, attract existing web2 migrate to Cardano web3 and developers from other backgrounds to build Cardano based dApps. These make positive impacts to Cardano ecosystem.

close

Playlist

  • EP2: epoch_length

    Authored by: Darlington Kofa

    3m 24s
    Darlington Kofa
  • EP1: 'd' parameter

    Authored by: Darlington Kofa

    4m 3s
    Darlington Kofa
  • EP3: key_deposit

    Authored by: Darlington Kofa

    3m 48s
    Darlington Kofa
  • EP4: epoch_no

    Authored by: Darlington Kofa

    2m 16s
    Darlington Kofa
  • EP5: max_block_size

    Authored by: Darlington Kofa

    3m 14s
    Darlington Kofa
  • EP6: pool_deposit

    Authored by: Darlington Kofa

    3m 19s
    Darlington Kofa
  • EP7: max_tx_size

    Authored by: Darlington Kofa

    4m 59s
    Darlington Kofa
0:00
/
~0:00