Rename Recipient => DataList in OperationDetailsModal

src/components/modals/OperationDetails.js

@@ -217,12 +217,12 @@ const OperationDetails = connect(mapStateToProps)((props: Props) => {
             <B />
             <Box>
               <OpDetailsTitle>{t('app:operationDetails.from')}</OpDetailsTitle>
-              <Recipients recipients={uniqueSenders} t={t} />
+              <DataList lines={uniqueSenders} t={t} />
             </Box>
             <B />
             <Box>
               <OpDetailsTitle>{t('app:operationDetails.to')}</OpDetailsTitle>
-              <Recipients recipients={recipients} t={t} />
+              <DataList lines={recipients} t={t} />
             </Box>
           </Box>
         </GrowScroll>
@@ -271,7 +271,7 @@ const More = styled(Text).attrs({
   outline: none;
 `
 
-export class Recipients extends Component<{ recipients: Array<*>, t: T }, *> {
+export class DataList extends Component<{ lines: string[], t: T }, *> {
   state = {
     showMore: false,
   }
@@ -279,18 +279,18 @@ export class Recipients extends Component<{ recipients: Array<*>, t: T }, *> {
     this.setState(({ showMore }) => ({ showMore: !showMore }))
   }
   render() {
-    const { recipients, t } = this.props
+    const { lines, t } = this.props
     const { showMore } = this.state
     // Hardcoded for now
     const numToShow = 2
-    const shouldShowMore = recipients.length > 3
+    const shouldShowMore = lines.length > 3
     return (
       <Box>
-        {(shouldShowMore ? recipients.slice(0, numToShow) : recipients).map(recipient => (
+        {(shouldShowMore ? lines.slice(0, numToShow) : lines).map(line => (
-          <OpDetailsData key={recipient}>
+          <OpDetailsData key={line}>
-            {recipient}
+            {line}
             <GradientHover>
-              <CopyWithFeedback text={recipient} />
+              <CopyWithFeedback text={line} />
             </GradientHover>
           </OpDetailsData>
         ))}
@@ -299,14 +299,12 @@ export class Recipients extends Component<{ recipients: Array<*>, t: T }, *> {
             <Box onClick={this.onClick} py={1}>
               <More fontSize={4} color="wallet" ff="Open Sans|SemiBold" mt={1}>
                 <IconChevronRight size={12} style={{ marginRight: 5 }} />
-                {t('app:operationDetails.showMore', { recipients: recipients.length - numToShow })}
+                {t('app:operationDetails.showMore', { recipients: lines.length - numToShow })}
               </More>
             </Box>
           )}
         {showMore &&
-          recipients
+          lines.slice(numToShow).map(line => <OpDetailsData key={line}>{line}</OpDetailsData>)}
-            .slice(numToShow)
-            .map(recipient => <OpDetailsData key={recipient}>{recipient}</OpDetailsData>)}
         {shouldShowMore &&
           showMore && (
             <Box onClick={this.onClick} py={1}>