Fixing some minor bugs

This week I decided to try and fix some low severity bugs in the status.im repository. The issue involved a problem where a user would be able to change the values of a transaction as they were performing the final step of signing it. This would result in an error message showing up if the value was for example changed to 0.

Example of error message that could appear if changing a value to 0.

While the changes to fix this ended up being rather minimal if became a challenge for me to work on this issue as I am still not super familiar with using ClojureScript to build React Native components. The topic is very interesting however and it is clear how efficient some of the code is due to the nature of Clojure. As an aside I will show a quick example of the efficiency that is possible, this will allow you to imagine the possibilities while using it on a complex large scale project.


Here is an example of the same React component written in JS and then in ClojureScript (including imports for both).

import React, { Component } from 'react';

class Clicker extends Component {
     constructor(props) {
          super(props);
          this.state = { clicks: 0 };
          this.buttonClicked = this.buttonClicked.bind(this);
     }
     buttonClicked() {
          this.setState({clicks: clicks + 1});
     }
     render () {
          const { clicks } = this.state;
     return (
          <div>
               The number of times clicked is {clicks}
               <input 
type=”button”
value=”Click Please”
onClick={this.buttonClicked}
/>
          </div>
    );
   }
}
export default Clicker;

This simple component is quite lengthy in react, and all it is capable of doing is increasing a counter to keep track of how many times a button was clicked. The same can be accomplished with ClojureScript in half the lines of code:

(ns clicker
(:require [reagent.core :as r]))
(dfn clicker
[]
(let clicks (r/atom 0)
(fn
[]
[:div
"The number of times clicked is " @clicks
[:input
{:type "button"
:value "Click Please"
:on-click #(swap! clicks inc)}]])))

As you can see, at scale this could save a lot of time and that is without even speaking of all the other advantages of using ClojureScript.


However, it is very different that the typical JavaScript style syntax of react which many are familiar with. Therefore there is a steep learning curve and that is what I am trying to overcome.

To make matters worse, the Status project was going through quite the overhaul, adding an entire new section to the application that has long been asked for. This is great, I just happened to have been caught in the storm. While working on the develop branch the app wasn’t very stable which made testing a bit more difficult, though it did not prevent me from accomplishing my task.

My first step was to in fact test that the issue was still happening in this new redesign. I launched GenyMotion (a great tool if you are often emulating Android devices) and recreated the problem following the steps outlined in the initial issue. It was still possible to recreate, therefore I started to look for where I will be making my changes.

From previous contributions to the project, I had a good idea of the project structure. Therefore, it did not take long for me to decide to look in the screens folder for something that seemed right as I knew it was a UI problem. (The UI had to be updated to a disabled field when a user clicked on “sign transaction”). I found the appropriate file in src/status_im/ui/screens/wallet/send/views.cljs .

After a little bit of snooping, I noticed that the fields would be disabled whenever a modal would be brought up. I had the idea that I could simply use the same logic if the signing window was open. At first I believed I would need to implement this logic but as I began I noticed it of course already existed. Only in reverse. The “show-password-input” state was set to true after a user would click the “sign transaction” button. I decided to simply add this state to the selector disabled logic which was being used for if the wallet was opened from a chat conversation or a modal was open.

I pushed my changes and unfortunately my build was failing. I believe it was due to all the changes being made in the project as I simply rebased after a few days and all was passing.

Unfortunately I am still waiting for feedback, however I believe the work I accomplished is good as this has been an open issue for a while now.

Next week I will tackle an issue which involves push notifications and blocked users. I hope I am successful and will update you then.