`AddressInputTextBox`

[leovigna]

Description

An input text box meant to bulk input/edit addresses. Similar behavior to an email "sender" input field as in Gmail. The field can be used for various use cases to edit a list of addresses. Users can input a comma or line separated list of Ethereum addresses. Valid addresses are parsed out and wrapped in a "pill" shaped component.

For maximum flexibility, we do NOT use Redux, but rather a more lightweight React Context, to store the input text box's data. Developers are than given the flexibility to read the text box input data using the useContext hook.

Features

• AddressPillDisplay: Simple component to wrap input addresses. onDelete & onClick props to be manage by parent.
• AddressInputTextBox: The text box input component.
  • Parses all input addresses:
  • Filter with web3.utils.isAddress
  • Transform with web3.utils.toChecksumAddress
  • Remove duplicates with lodash.uniq
  • Update addresses with setAddressList
  • Update AddressPillDisplay child components with addressList state
  • Manages child updates
  • onDelete: Remove from addressList
  • onClick: Add to selectedAddressList
• AddressInputTextBoxContext: React.createContext();
• AddressInputTextBoxContextProvider: A context that stores a list of addresses & selected address for the AddressInputTextBox's state.
  • [addressList, setAddressList] = useState([])
  • [selectedAddressList, setSelectedAddressList] = useState([])

Links

https://reactjs.org/docs/context.html https://www.reactjstutorials.com/react-context/6/react-use-context

[leovigna]

This component could potentially be abstracted as a generic solution that splits input by common separators ("," " ", "\n"), extracting "words". Then the following props could enable composition into the AddressInput

• validateInput: isAddress
• formatInput: toChecksumAddress

[netanelben]

/cib

[github-actions[bot]]

Branch issue-133 created! Clone with: git fetch && git checkout --track origin/issue-133 Rebase develop branch changes with: git checkout issue-133 && git rebase develop