A look back

The setup

Wow, what a journey that has been already. When hundehausen and I started with tipxmr.live neither of us had extensive experience on creating a production-ready piece of software - not to mention a non-custodial, WASM-using service for many users. Fair to say that we bit off way more than we could chew.

Fortunately, mghny has been there from the beginning. In late August it all started with the configuration of the webpack.config. Since we wanted to use monero-javascript by woodser in combination with react we could not use the standard “npx create-react-app” and had to do the initial setup manually. Mghny helped us out there and after some hours we could get the Monero WebAssembly to run without an error.

It felt like a huge victory! We were basically done, right? Little did we know…

Creating the basic framework

We got to work, writing React components. A header, footer, a basic mockup of how the donation site would look like. I was pretty new to React in general and quickly learned a ton of fundamentals and nifty tricks. Building a project truly is the best way to learn a programming language.

Soon after, the complexity started to build. We aim to provide an easy and intuitive experience for the user. So we have to carry the burden of the complexity when creating tipxmr. Streamers should be able to have an account that is associated with a wallet and username, therefore we need some kind of database. With the streamer account there has to be some basic settings the streamer can play with. What seemed like a really good idea to me, for example, is the option of the streamer to set a XMR price per character of a message or per second of display time for the message. Then the streamer should be able to set a funding goal, change the font color of the messages and stuff like that. Not to mention the settings that go along with a Monero wallet such as setting the restore height, withdrawing funds, etc.

We needed a dashboard. The streamer signs in by entereing their seed into the browser. If your alarm clocks are not ringing now - they should. Normally you never enter your seed into a browser. But, with tipxmr its okay. No, really it is. Basically, the browser runs a local application: the Monero WebAssembly wallet. This means that while the browser serves as the GUI interface for the wallet, there is no communication to a backend server. To authenticate a given streamer, we simply have the hash of their seed in our database. Therefore, we cannot access any funds, but still make sure only the correct streamer gets their custom config (for the settings mentioned above).

Throught our struggle we continually got help from mghny. Eventually hundehausen brought up the idea of creating a CCS proposal to fund our effort. Soon after, our proposal was live on getmonero.org and we reached our goal of 72 XMR within 2 days - amazing. Mghny decided to join our project and we set out to finish the service.

Where we stand now

If there is one bitter lesson I have learned so far it is this: Programming a secure and reliable service is hard. When we started in late August, we thought we would be done by the end of September. It is now mid-November and we are nowehere near release. There is much to do. From finishing the basic architecture to implementing all the functionality to reviewing and refactoring the code.

Hopefully we will have something working by the end of the year, but I am a wiser person now. So all I can say: Soon.

What we are working on

Right now the main issue is the database structure. We will have one remote database that is running on our server. There we will store the configs of all streamers. For this database we use CouchDB. Then each streamer will have their own local database (PouchDB). Upon login and verification the streamer will get their config in the local database and be able to read and write to it. If changes are made, they are synced back to our server and updated there.

Then we need to implement the actual animation component. The animation will be a site that is accessed by the OBS Browser plugin. Once the streamer recieves a donation the animation component needs to display it.

Also, we have to create the process for new streamers to sign up for the service. While the mockup of the signup process is ready, we still have to implement it so that a new entry in the remote database is made.

The other day mghny and I set up Storybookjs to write and test new components and flows more easily.

To conclude

I hope you got a little glimps into the tipxmr project. My goal is to blog regularly, maybe once a week, to keep interested supporters up to date with our progress.