Safe-react: Cannot manually add Safe apps on Firefox

[tschubotz]

Title/Description

Cannot manually add Safe apps anymore

Environment

• Browser: Firefox + Chrome
• Safe: 0xA063Cb7CFd8E57c30c788A0572CBbf2129ae56B6/
• Wallet: Metamask
• App Version: 2.10.2
• Environment:
  
  
  
  • production (mainnet)
  
  

Steps to reproduce

1. Open Safe where you are an owner
2. Open Safe apps tab
3. Click manage apps
4. Add custom app
5. Paste https://ipfs.gnosisdev.com/ipfs/QmV2yunABUtb66Qv8owQc8YzuCkUkEpKm8F9qUhsKX8fjS/ (Safe connect app)
6. Name and image are loaded correctly
7. Click checkbox that it's my own risk

Expected result

The "Save" button is getting enabled and I can click it.

Obtained result

The "Save" button stays greyed out and I cannot click it.

Screencast

https://drive.google.com/file/d/1QqEAF_DYNiUUiOD5cz6OOIGqm9y19wuy/view?usp=sharing

[lukasschor]

I was not able to reproduce this (used the same environment). @francovenica can you try as well?

Maybe it was a temporary availability issue with IPFS.

[pablofullana]

@nicosampler can you please try to reproduce this one on your end?

[nicosampler]

The same as @lukasschor, working for me. @tschubotz could you re-check?

[francovenica]

In prod this is working for me.

Last week ipfs was working poorly, sometimes even apps we had by default were not loading and timing out. I created a ticket for it to see if we can handle it: https://github.com/gnosis/safe-react/issues/1303

Maybe there is something we can do about this case as well: not leave the "Save" button grayed out but show any error if the app fails to load

[tschubotz]

I just tried again and it's reproducible on Firefox :-)
(I used incognito/private window to have a clean Safe app env)
Both rinkeby and mainnet.

@lukasschor has the same issue on Firefox. @francovenica could you try as well please?

[francovenica]

I gave it a try here https://rinkeby.gnosis-safe.io/app/#/safes/0x9913B9180C20C6b0F21B6480c84422F6ebc4B808/apps

I used the same URL you gave in the description of this ticket:
https://ipfs.gnosisdev.com/ipfs/QmV2yunABUtb66Qv8owQc8YzuCkUkEpKm8F9qUhsKX8fjS/

I had no issues to add it the app. (didn't use it tho)

[tschubotz]

@francovenica 😭

Maybe a Firefox on Mac issue?

@pablofullana you could reproduce the bug now right? what OS are you on?

[lukasschor]

Considering that this seems to be quite a niche issue from what we know. I would deprioritize it and move it back to the stability backlog. So no need to debug this right now. The only people adding custom Safe apps right now are a couple of developers and a few people at Gnosis using internal prototypes.

[francovenica]

@liliya-soroka has a Mac, maybe she can give it a try.

[pablofullana]

I've just reproduced it:

• Firefox 80.0.1 (64-bit)
• macOS 10.13.6

[katspaugh]

Still reproducible.

The name and icon are loaded correctly but the "Add" button is disabled.

[fmrsabino]

Still reproducible.

The name and icon are loaded correctly but the "Add" button is disabled.

Can confirm that is reproducible on Firefox 87. Tried with a standard web profile (no extensions) and the Add button was disabled.

Chrome shows the button as enabled for the same app.

[tschubotz]

Currently ~6% of our users are on Firefox. With Safe apps becoming more and more important, I think this should be fixed. -> marking as major

[fmrsabino]

The issue might be related with this callback:

https://github.com/gnosis/safe-react/blob/2cd128dac2006148c13ffae0f57b7553ce183be9/src/routes/safe/components/Apps/components/AddAppForm/FormButtons.tsx#L29-L34

on Chrome this callback is triggered when the appUrl changes OR when the agreementAccepted changes.
on Firefox the callback is only triggered when the appUrl changes 🤔

[francovenica]

I tried it myself and I was able to add a custom app
Firefox 87 (64bits)
On Win 10 64 bits
Tested on Prod env (Rinkeby)
The custom app is a ETH Wrapper https://jpalvarezl.github.io/eth-wrapper/

[nicosampler]

@francovenica the problem is with Mac

[matextrem]

The problem is related with Firefox and React-final form (https://github.com/final-form/react-final-form/issues/877). Working on a workaround.

[katspaugh]

The problem has already been fixed on the development branch.