CharXTZ (pronounced "Char-X-T-Zee", in rhyme with "Charity") is a decentralized app built on top of the Tezos blockchain. It serves as an accumulator of funds.
The webapp has been deployed to Vercel here. It can also be installed as a PWA (Progressive Web App) from the browser menu.
Note: Make sure you use a Ghostnet account to interact with this dApp. If you're using Temple wallet, and are on mobile, you'll first have to add an RPC in the settings with the URL
https://ghostnet.SmartPy.ioand set it as your default for your account. Unlike the Temple Wallet browser extension, Ghostnet RPC is not there out-of-the-box in the mobile app.
Initially, we had hoped to create a charity platform where users would have the ability to create campaigns of their own, but that proved to be a more time-consuming task that we had anticipated. As a result, we were compelled by time, and also by the fact that this happens to be our first dApp, to create a simple accumulator. It works as follows:
-
The Smart Contract is deployed on the
ghostnettestnet. There is an admin address associated with the contract (which is actually supposed to be set immediately after the deployment of the contract; have a look at the code for a better understanding of what we mean by this). Only the address associated with the contract can be used to initiate interactions that change the contract's storage fields. -
Any funds sent to the contract are kept track of by the contract's storage.
-
When the funds reach the threshold of an admin-defined target, the target plus any excess amount accumulated is automatically transferred to the admin-defined charity account associated with the contract. While for a real application, one would want such a message as "Target completed" or the like, for the purpose of this demonstration, we have allowed the contract to merely reset its counters everytime the target is completed, so that it may be used more thoroughly by the evaluators.
CharXTZ is a React application, scaffolded using create-react-app. It uses the Tezos blockchain, specifically the ghostnet testnet chain for the backend, and the Smart Contract has been written in SmartPy.
For styling, we have opted for TailwindCSS and a Tailwind-compatible components library called Flowbite. There is also a little use of Framer Motion for some subtle micro-animations.
We have also utilized commitizen to enforce the format of Conventional Commits in our commit messages.
-
Currently, the frontend works fine only locally. The build fails, because TaquitoJS seems to be using CommonJSPorting torequiremodule system, whichvitedoes not recognise. I have tried polyfillingrequire, but not with any success. So, for the time being, consider running the frontend locally by cloning the repo, installing dependencies withnpm installand starting a local server usingnpm run dev. Hopefully, I'll be able to resolve this issue by polyfillingrequiresome other way or migrating the whole project tocreate-react-appinstead ofvite(viteusesrollupfor bundling, whilecreate-react-appuseswebpack).create-react-app, which useswebpackunder the hood, and using a customwebpackconfig throughreact-app-rewiredresolved the issue. -
SmartPy development was a little overwhelming because this happened to be our first web3 project. Also, since Tezos is currently in a state of flux, we often encountered conflicting documentation. It was a little difficult to discern what is currently the standard and what is not.
-
We tried to develop the Smart Contract locally, and have it deployed through the CLI, but that proved to be very difficult to set up. We had to make do with the web IDE.
- Head on to this website to view and interact with the frontend. You may also consider cloning the repo and running a development server locally:
git clone <repo-url>
npm install
npm run start
- The Smart Contract address is
KT1W1xZqZfaMRpR1cd17yVzsKhLgHwepYL9q, and can be interacted with here. - The presentation can be downloaded by clicking on this link.
MIT.