Add metamask required pop-up on MyBit Trust

[mybit-bot]

Introduction: On https://trust.mybit.io/ when you click create new but do not have metamask installed/unlocked the application gets stuck in a load screen. We need a solution that notifies the user that metamask is required.

Proposed Solution(s): Option 1 is to create an isolated pop-up/screen which instructs users that metamask is required to proceed with links to download/unlock. You can pull this from the MyBit UI Kit or MyBit Go. Please ask Cristiano Martins for specific file if needed. Option 2 is to integrate metamask required into the create new pop-up. This is the preferred approach as it is cleaner; however, it involves solving the problem of the create new box not currently loading if metamask is not installed/unlocked.

Requirements:

1. Follow Brand Guidelines ﹍https://files.mybit.io/files/﹍
2. Utilise components and/or theme styles similar to those on the MyBit UI Kit. https://ui.mybit.io/
3. All new design components should be re-usable so they can be added to the UI Kit and easily be used in other projects.
4. Pop-up/screen should know if metamask is installed but locked or if it needs to be installed.

To Submit:

1. Upload proposed solution on a staging URL for us to review.
2. Please submit a pull request with the final version once approved by the team in Step 1.

Disclaimer All work completed via the MyBit Decentralised Development Fund is property of the MyBit Foundation (CHE-177.186.963) and may be used, re-used, and/or distributed, re-distributed by the MyBit Foundation for financial gain. The contributor holds no warrant nor claims for any future payments resulting from monetisation schemes originating from the MyBit Foundation or any of its affiliates. Where law permits outside of open source regulations, the contributor is not permitted to distribute any work completed via the MyBit Decentralised Development Fund (DDF) for personal gain.

[status-open-bounty]

Balance: 0 ETH Tokens: MYB: 12500.00 Contract address: 0x775dde5b7e7681c79ba71f911cb387952b12dad1 Network: Mainnet Paid to: cryptomental Visit https://openbounty.status.im to learn more.

[cryptomental]

I am able to reproduce this issue on a vanilla Chromium browser without Metamask and any plugins installed. I would like to tackle this bounty and open a pull request this week.

[cryptomental]

@mybit-bot please check the staging deployment at http://51.75.66.221:3000/create-new

• I opted for suggested solution (2) and integrated it into the 'create new' pop-up.
• solved the problem of the create new box not loading.
• I tried to make it robust and tested Metamask log in/log out as well as switching networks and accounts.

Tested against:

• Google Chrome | 62.0.3202.94 (Official Build) (64-bit)
• Chromium Version 65.0.3325.181
• Firefox 63.0 (64bit)
• Brave Browser Version 0.55.22 Chromium: 70.0.3538.77 (Official Build) (64-bit)

If the solution is accepted I will open a pull request and also later submit a similar solution to the Will dApp.

[cryptomental]

I noticed that the page refreshes often in case Metamask is locked due to Metamask emitting events, I will try to relax this a bit and open a pull request today.

[cryptomental]

Hi @jjperezaguinaga @csmartinsfct did you have a chance to have a look at the pull request and error message shown at http://51.75.66.221:3000/create-new when locking and unlocking Metamask / uninstalled Metamask? I tried this on different browsers, looks fine now and I would like to push the bounty further ;)

[cryptomental]

hi @kyledewy thank you for merging!

[0xjjpa]

Hi @cryptomental, thanks for the contribution. Payment should be on its way!