Safe-react: [Address Book v2] Import/Export design

[katspaugh]

We need to come up with the design for the Import/export feature described in #1221.

Screens

The Address Book screen:

• An Export button
• An Import button

A new Export screen – a simple modal window with:

• specify that what is going to be exported is a CSV: only names and addresses
• a success/error indication
• how many entries were exported
• a generated file download link

A new Import screen:

• Upload form – drag'n'drop and file input
• Loader when uploading/importing
• Success/error state

A new Merge contacts screen:

• A list of conflicting addresses
• Checkboxes to keep or replaces the existing addresses

@alongoni the Merge screen ☝️ is optional in this iteration, feel free to skip.

[katspaugh]

Here is the design for the AB v2 Export flow (first approach). Suggestions are appreciated :)

https://www.figma.com/proto/txqgq1QhrFFe2NlwPRh0bz/Gnosis-Safe-Web---2021-02-05?node-id=201%3A43777&viewport=240%2C310%2C0.42349866032600403&scaling=min-zoom&page-id=3%3A43299%3Ffuid%3D789860674698606135%3Ffuid%3D789860674698606135

Looks awesome!
Regarding the error view: I suggest we change the "Download" button to "Retry" in this case.

[KristinaMayman]

Looks great to me as well! Agree with Ivan's suggestion about the "Retry" button.
Also, in the final designs we should be consistent about whether Address Book is capitalised or not. I think it can remain lowercase.

[alongoni]

Now we have the Import flow design. for https://github.com/gnosis/safe-react/issues/2236

[katspaugh]

Looks amazing @alongoni! 👏

[KristinaMayman]

Great, thanks for sharing it! The only thing I would change is I would make the link say "Learn more about importing / exporting an address book". Looks good otherwise :)

[katspaugh]

Closing, since we decided to not implement the Merge UI at this point.
Great work!