5afe / safe-react

Deprecated! New repo – https://github.com/safe-global/web-core
MIT License
332 stars 363 forks source link

Multisig Migration #122

Closed lukasschor closed 4 years ago

lukasschor commented 5 years ago

What is this feature about? (1 sentence)

As a old Multisig user, I want to mirror the owner structure of my existing multisig on a safe so that I can reduce the switching effort.

Why is it needed? What is the value? For whom do we build it?

We have a significant userbase using the old Gnosis Multisig contracts & interface. We want to make it as easy as possible to switch to the Gnosis Safe for Teams.

High-level overview of the feature

Feature that allows to setup a Safe with the same properties as an existing multisig. Mid-sized banner at the top of the site (or even a full-screen pup-up) that explains that there is a successor to the Multisig Wallet (=Gnosis Safe for Teams) which has the following benefits:

Three buttons "Dismiss" (close banner/pop-up), "Read more" (link to safe.gnosis.io/teams) and "Migrate wallet" (link to Safe for Teams onboarding with pre-populated information.

Clicking the button "Migrate wallet" would forward to Gnosis Safe for Teams > Create New Safe > Review with (1) Safe Name, (2) Owner addresses + Owner Names and (3) Threshold already populated (taken from current Multisig).

Clicking the button "Dismiss" would dismiss the banner/pop-up for this session. There should also be a checkbox "Don't show this again" that would (after clicking "Dismiss") not show the banner/pop-up when the app is opened in the future.

lukasschor commented 5 years ago

@giacomolicari This is also going to be relevant for you. Implementation is planned for late October / beginning of November, but feel free to already give feedback now or during the design stage.

giacomolicari commented 5 years ago

Sure @lukasschor , I can give feedback on this :)

posthnikova commented 5 years ago

Popup:

image.png

Popup with checkbox checked:

image.png

"Migrate wallet" button leads here:

image.png

lukasschor commented 5 years ago

Looks great. 👍

Another approach would be to already design the pop-up in the Safe for Teams design language to make a contrast to the current design language and hint towards the improved UX/UI. I'm definitely not saying this would be necessarily better, as it comes with its own drawbacks (e.g. it wouldn't look as "native" as it looks right now). But curious to hear your thoughts on this. @posthnikova

KristinaMayman commented 5 years ago

I think it makes sense to have the Multisig popup look native, but maybe there can be a more prominent link with something like "Check out the new look!"? I think "Read more" sounds a bit tedious, it would be good to have something where the user can just get a quick look.

Also, is there a reason why "Dismiss" is so prominently highlighted as a button and "Migrate wallet" not at all? Is that just to be in line with the Multisig design? If not, I would change that.

Small typo in the Safe for Teams design: it should be "Make sure you have 0.00041..."

posthnikova commented 5 years ago

@lukasschor @KristinaMayman I chose native style because it's less obtrusive and to reuse styles from Multisig design would be faster. If it doesn't work, we should show new styles more prominently.

I think "Read more" sounds a bit tedious, it would be good to have something where the user can just get a quick look.

I just realised it goes to Safe website and there is not much more new information than in the popup, the same advantages are listed. There's no way to migrate wallet when you're on the Safe website so maybe we should not link there.

Also, is there a reason why "Dismiss" is so prominently highlighted as a button

This is the style used everywhere in Multisig. I would definitely show a more prominent "Migrate wallet" button

posthnikova commented 5 years ago

UX sync:

posthnikova commented 5 years ago

Changes after UX sync: button renamed to "Create new Safe", added a mention that they have to move funds to the new Safe. "Read more" leads to blog post. We need a blog post explaining how to migrate and a way to migrate from the Safe website.

image.png

image.png

lukasschor commented 5 years ago

I would rephrase the last section to...

Migrating couldn't be easier: 1) Click the button below to create a Safe with the exact same owner and signature policies as your existing Multisig. 2) Try out the new interface and learn about the many benefits. 3) As soon as you feel comfortable, start moving funds to your new Safe.

KristinaMayman commented 5 years ago

I like the rephrasing, yes. The only thing is that from the first point it's unclear whether clicking the button would allow me to copy the owner policies myself or if that would be done automatically. So maybe something like "Click the button below to create a Safe. Your current owner and signature policies will be applied to it automatically."

posthnikova commented 5 years ago

@lukasschor @KristinaMayman Text changed.

image.png

image.png

lukasschor commented 4 years ago

Looks good to me now.

@giacomolicari What do you think?

giacomolicari commented 4 years ago

I'm fine with it :) The only thing I would maybe change is that text Migration couldn't be easier: etc.., I'd make it bigger to emphasize how the migration process work and which steps users have to take. What's your opinion? @lukasschor

lukasschor commented 4 years ago

Agree, maybe we could make „Migration couldn‘t be easier“ as a title and also work with icons (1, 2, 3) and change the ones for the benefits to roman numbers or to symbols. Also, user experience has shown that gas efficiency is not really a big benefit for existing users, so I would leave it out.

posthnikova commented 4 years ago

UX sync: Make "Migration couldn't be easier" bigger, remove 1-2-3 circles from top list, add 1-2-3 numbers to migration process, remove benefit 5

posthnikova commented 4 years ago

Changes after UX sync @lukasschor @giacomolicari

image.png

image.png

lukasschor commented 4 years ago

Looks good. Moving this to Dev Backlog. 👍

lukasschor commented 4 years ago

@giacomolicari So from my side everything is fine and you could start implementing this feature. When do you think you will have time to work on this?

giacomolicari commented 4 years ago

Hi @lukasschor , I'd have a question about the flow. Do we show a migration modal for each wallet in the multisig app or just one for all wallets?

lukasschor commented 4 years ago

I would show it every time any wallet is opened until the user ticks „don‘t show this again“. Even though that would mean that they would see this modal even after migrating a certain wallet. But if it annoys the user, he could always click that box.

The assumption is that as soon as they migrated one wallet, users would be able to just replicate others from the Safe interface. But in case that‘s not correct we might have to add an additional „Migrate to Safe“ button in the interface header or similar.

Do you think that makes sense?

giacomolicari commented 4 years ago

Yes I understand. My only concern is about data we have to send from the Multisig app to Safe's endpoint. I understand I have to collect some data from the wallet, like list of owners and wallet's address. In case a user is on the index page, we would send the whole list of multisigs a user holds, like:

[
   {
      "name":"Multisig 1",
      "address":"0x.....",
      "owners":[
         {
            "name":"Owner 1",
            "address":"0x...."
         },
         {
            "name":"Owner 2",
            "address":"0x...."
         }
      ]
   },
{
      "name":"Multisig 2",
      "address":"0x.....",
      "owners":[
         {
            "name":"Owner 1",
            "address":"0x...."
         },
         {
            "name":"Owner 2",
            "address":"0x...."
         }
      ]
   }
]

instead, if the user is on a wallet's detail page, we would send just data related to that wallet

[
   {
      "name":"Multisig 1",
      "address":"0x.....",
      "owners":[
         {
            "name":"Owner 1",
            "address":"0x...."
         },
         {
            "name":"Owner 2",
            "address":"0x...."
         }
      ]
   }
]

Could you also provide me with the Safe's endpoint and what kind of http request to send? (GET, POST)

thank you @lukasschor

lukasschor commented 4 years ago

I understand. This modal would only show on the wallet detail page, as we can only migrate one wallet at a time.

@germartinez could you provide Giacomo with the information above?

germartinez commented 4 years ago

There is no endpoint needed for this feature. We should create a link in the Multisig pointing to the Safe creation form in the Safe for Teams (gnosis-safe.io/open) and passing the required data from the Multisig in a way that the Safe creation form in can be filled automatically.

The data required in the link is:

gnosis-safe.io/open?name=<name>&threshold=<threshold>&ownernames=<address1>,<address2>,<address3>&ownernames=<owner1>,<owner2>,<owner3>

lukasschor commented 4 years ago

@germartinez Because currently we do not allow users to create a Safe without an active wallet connection, we show this screen if the wallet gets disconnected in the creation flow. Does this cause any issues for this migration feature? Because the user would land on the interface and first have to connect a wallet but we should definitely not show this blank screen.

Screenshot 2019-10-29 at 11 03 07
germartinez commented 4 years ago

Right now, that would be the behaviour. The URL would still have the data, so whenever the provider is connected, the form would be shown automatically with all the data.

lukasschor commented 4 years ago

@giacomolicari For the public launch we will rename the Safe for Teams to "Gnosis Safe Multisig". So there are two changes needed in the text of the migration screen.

68747470733a2f2f696d616765732e7a656e68756275736572636f6e74656e742e636f6d2f3563336630626164383166623534356431626435383533312f30396530383931632d636639612d343734332d383230382d323830316534386232306363