Metamask in a window

Public Profile — Sat, 16 Jan 2021 23:02:17 +0000

Metamask drives me up the wall. It is a huge UX in a tiny dropdown that closes any time you click away.

To open it in a browser tab / window is easy in two steps:

A: Window -> Extensions, grab the ID value.

B: Open a new tab / window and paste in a URL that looks like this.

chrome-extension://nkbihfbeogaeaoehlefnkodbefgpgknn/home.html

(Replacing the ID from the Extensions box with the URL above)

Material UI + React Final Form = MUI-RFF (forms made easy)

Public Profile — Mon, 20 Jan 2020 03:12:18 +0000

In order to integrate React Final Form with a UI component library such as Material UI, you'll need to create a thin wrapper that passes properties between MUI and RFF components. After searching around for who else has done this, you've stumbled across this project.

Sadly, figuring out the nuances of passing properties across multiple components is non-trivial. It takes a lot of trial and error and hopefully you're writting tests along the way too (hahaha yea, right). Since you are probably in a rush and just want to get onto building features, this repo provides a set of modern and unit tested React components that make it easy to drop into your own Javascript or Typescript project as a small NPM dependency.

Please try things out and review the code first. Take a look at the demo, demo source, codesandbox, and the tests.

One thing to note in the demo is the ability to control the react form rendering. This is what really motivated me to go with RFF. With a small configuration tweak to RFF, it is easy to cut the number of renders down to the bare minimum. This improves performance significantly, especially with larger forms.

Forem: Public Profile

Metamask in a window

Material UI + React Final Form = MUI-RFF (forms made easy)