[Address Book V2] - Export address book

[matextrem]

What: This new feature allow users to export their Address book as CSV.

Why: As part of the new redesign of the Address Book. This PR closes #2235

How to test it:

• Load a safe with some entries on the address book or Open a new one and add some entries.
• Go to Address Book section.
• Click on Export icon.

[github-actions]

CLA Assistant Lite All Contributors have signed the CLA.

[github-actions]

ESLint Summary View Full Report

Annotations are provided inline on the Files Changed tab. You can also see all annotations that were generated on the annotations page.

Type	Occurrences	Fixable
Errors	0	0
Warnings	0	0
Ignored	0	N/A

• Result: ✅ success
• Annotations: 0 total

---

^{Report generated by eslint-plus-action}

[github-actions]

• Safe Multisig app mainnet

[github-actions]

• Safe Multisig app rinkeby

[katspaugh]

Great work, @matextrem!

Did you manage to simulate an error state?

[katspaugh]

Noticed a small bug:

• if you click export
• and then close the modal by clicking outside of the modal

it will show a success notification.

[lukasschor]

Some feedback on the copy used in this PR:

The (only addresses and names) was confusing for me. What else should it be? Why do we need to mention this? I would just leave this out.

file with your XX Address Book entries - Shouldn't it say file with XX Address Book entries?

[tschubotz]

Adding to what Lukas said, please call it addressbook everywhere for consistency, i.e. with out the whitespace in between. That how it's called in the sidebar currentl .

[katspaugh]

addressbook w/o a space doesn't seem to be the mainstream spelling (according to Google and Wikipedia).

[tschubotz]

addressbook w/o a space doesn't seem to be the mainstream spelling (according to Google and Wikipedia).

I'm happy either way. I just think it needs to be consistent. I totally agree with you based on your links that the one with a space is more common. In English, words aren't connected together endlessly like in German.

Then let's use address book. But please adapt the sidebar label then too, please!

[alongoni]

Looks good!!

[matextrem]

Great work, @matextrem!

Did you manage to simulate an error state?

I tried it by hardcoding the error state to see how the UI behaves

[nicosampler]

Let's implement the styles using styled-components instead of material 🙏🏾.
We should only use the styles from material when we are editing a component and we don't want to refactor the code, but as this is a completely new code, we should definitely go with styled.

[katspaugh]

Looks and works great!

Just one last detail I would add: disable/add loader to the download button after clicking on it.

[katspaugh]

I'll go ahead and merge this PR. Will make a separate ticket for the button state.