👨‍🚀 Revolut Emergency: Story time of building an Electron React app

Mon, 04 Nov 2019 08:06:07 +0000

Annihil / revolut-emergency

👨‍🚀 Unofficial Revolut PC app – Freeze cards, list transactions, get notifications, contact support

This small app let you

See transactions of all your pockets (split or unified view)
Freeze your cards
See your pockets' balance
Get system notifications of new transactions
Contact customer support

in case of emergency such as loss of phone.

Download for macOS • Download for Windows • Download for Linux

Install from source

Clone or download this repository
Install NodeJS
Open a terminal and cd to the downloaded folder
run npm install
run npm start
Enjoy 🙂

Troubleshooting

I did not receive an SMS verification code? The first time you log in with the desktop app, since it is a new device, the verification code will be sent via email, you can find it this way
I cannot open the app on macOS (unidentified developer) Instead of double clicking on the R Emergency.app, right click → Open If that is still not enough, you will have to go to…

View on GitHub

Living in the UK, it is almost impossible not to be tempted to try the new challenger banks such as Revolut, Starling and Monzo. I am currently using Revolut as my main bank account and felt the need to access it from my computer.

Alas, Revolut does not offer a web app and it does not seem to be in their pipeline, so I went ahead and started building a small web app for my personal use.

I quickly found that I could not hit their API in a browser, preflights requests were blocked due to a lack of CORS headers.
So I started looking at ElectronJS, making the requests using NodeJS and bridging the results using Electron IPC mechanism.

It was too cumbersome, so I started checking at another way of making http requests from the renderer side without obeying CORS. One way would be to disable web securities in the chrome flags, but since the app would be to access my bank, it wouldn't be a good idea, so I opted to enable node integration, and used Axios with node's http adapter. It works seamlessly albeit not being able anymore to see requests in the devtools.

For security reasons, I wanted to use SSL certificate pinning but it turned out Axios does not provide this option out of the box so I submitted a PR to add it, this way NodeJS rejects http requests if the fingerprint of the certificate does not match our pinned fingerprint, preventing proxy eavesdropping.

The second problem that I faced was that the list of my transactions was large, containing 2000+ items (hey please don't judge :p)
React was taking a long time rendering it all at once.
I did not want to use react-virtualized, mostly because I had poor experiences using it in the past and that it would break searching in the dom for text, so I opted to manually delay the rendering of items in the list using a react hook, and to reduce memory footprint and improve scrolling performance, I chose to use the WebComponent <virtual-scroller> since Electron gives us the ability to enable experimental blink flags. The main drawback of using that WebComponent is that list items must be display: block and since I am a big fan of display: flex everywhere, I had to style the old fashion way again ...

For the navigation, I decided not to use react-router as it is a rather simple app. Electron does not show URL anyway, so I shouldn't have to deal with routes. Instead, I used a combination of localStorage and React Context API, and was satisfied of the outcome.
For animations, I used React-Lottie to have lightweight, high frame rate, JS/SVG animations.
Most of the application were made with React using Styled Components.
To render the cards, I had to absolute position text elements on a div with rounded corners and pick the same font as credit cards use: OCRA10. The end result is pretty close to what the mobile app displays.

Thank you for reading the journey of this small app, be sure to check out the repository.

👾 GitHub Spray: Draw on your GitHub contrib graph

Sat, 02 Feb 2019 14:06:23 +0000

This may sound like a pointless project, but truth is, we all love to differentiate ourselves from others, and perhaps you might like to have this small touch on your GitHub page.

This open source CLI, available as an npm module, gives you the ability to "spray" your GH profile page.

The naming idea comes from Counter Strike, where you could spray walls with your custom image, it was very popular, to the point that a very famous technique was to spray a sexy half naked lady on a wall to drag enemies' attention and annihilate them while their defenses were lowered.

With this tool, you can draw on your 53 by 7 pixels calendar heatmap which is displayed on your profile.

It already contains several fonts so that you can easily write text.

$ github-spray -t hello

Otherwise, you can be more creative and design your own pattern.

$ github-spray -f my_octocat_heart_smiley_pattern.json

I made an handy web app to ease the creation.

It has numerous of options such as specifying the start date, the font, invert colors, adjust colors, flip horizontally or vertically the spray, set a repo origin url and push to it.

You only live once, go for it: GitHub Spray 🤙
Btw, the spray isn't permanent, you can delete it by removing the repo 🙂

Edit: Huge thanks to DEV Community for making the repo appear on the GitHub Javascript trending page, I love you guys!! <3