diff --git a/web/cashtab/src/components/Configure/Configure.js b/web/cashtab/src/components/Configure/Configure.js --- a/web/cashtab/src/components/Configure/Configure.js +++ b/web/cashtab/src/components/Configure/Configure.js @@ -411,6 +411,34 @@ } `; +const ContactListActions = styled.div` + text-align: center; + width: 100%; + padding: 10px; + border-radius: 5px; + a { + color: ${props => props.theme.contrast}; + margin: 0; + font-size: 14px; + border: 1px solid ${props => props.theme.contrast}; + border-radius: 5px; + padding: 2px 10px; + opacity: 0.6; + } + a:hover { + opacity: 1; + border-color: ${props => props.theme.eCashBlue}; + color: ${props => props.theme.contrast}; + background: ${props => props.theme.eCashBlue}; + } + ${({ received, ...props }) => + received && + ` + text-align: left; + background: ${props.theme.receivedMessage}; + `} +`; + const Configure = () => { const ContextValue = React.useContext(WalletContext); const authentication = React.useContext(AuthenticationContext); @@ -934,6 +962,33 @@ changeCashtabSettings('sendModal', checkedState); }; + const exportContactList = contactListArray => { + if (!contactListArray) { + errorNotification('Unable to export contact list'); + return; + } + + // convert object array into csv data + let csvContent = + 'data:text/csv;charset=utf-8,' + + contactListArray.map( + element => '\n' + element.name + '|' + element.address, + ); + + // encode csv + var encodedUri = encodeURI(csvContent); + + // hidden DOM node to set the default file name + var csvLink = document.createElement('a'); + csvLink.setAttribute('href', encodedUri); + csvLink.setAttribute( + 'download', + 'Cashtab_Contacts_' + wallet.name + '.csv', + ); + document.body.appendChild(csvLink); + csvLink.click(); + }; + return ( @@ -1340,6 +1395,21 @@ ), ) : 'Your contact list is empty'} + {/* Export button will only show when there are contacts */} + {contactListArray && + contactListArray.length > 0 && ( + + + exportContactList( + contactListArray, + ) + } + > + Export contacts + + + )}