Wallet refactor lists

examples/wallet/app/components/Listing/ListingColumn.js

@@ -0,0 +1,14 @@
+// @flow
+import React from 'react';
+import type { Node } from 'react';
+import Col from 'react-bootstrap/Col';
+
+type Props = {
+  children: Node
+};
+
+export default ({ children, ...other }: Props) => (
+  <Col {...other} as="td">
+    {children}
+  </Col>
+);

examples/wallet/app/components/ListingRow.js → examples/wallet/app/components/Listing/ListingRow.js

@@ -5,13 +5,13 @@ import Row from 'react-bootstrap/Row';
 import styles from './ListingRow.scss';
 
 type Props = {
-  key: string | number,
+  itemKey: string | number,
   className?: string,
   children: Node
 };
 
-export default ({ key, className, children }: Props) => (
-  <Row key={key} className={`${className || ''} ${styles.row}`}>
+export default ({ itemKey, className, children }: Props) => (
+  <Row as="tr" key={itemKey} className={`${className || ''} ${styles.row}`}>
     {children}
   </Row>
 );

examples/wallet/app/components/Listing/ListingTable.js

@@ -0,0 +1,14 @@
+// @flow
+import React from 'react';
+import type { Node } from 'react';
+import Container from 'react-bootstrap/Container';
+
+type Props = {
+  children: Node
+};
+
+export default ({ children, ...other }: Props) => (
+  <Container {...other} as="table">
+    {children}
+  </Container>
+);

examples/wallet/app/components/StakePoolList.js

@@ -1,13 +1,13 @@
 // @flow
 import React from 'react';
 import Button from 'react-bootstrap/Button';
-import Col from 'react-bootstrap/Col';
 import Row from 'react-bootstrap/Row';
-import Container from 'react-bootstrap/Container';
+import ListingColumn from './Listing/ListingColumn';
+import ListingTable from './Listing/ListingTable';
 import type { NewDelegation, PoolId, Delegation } from '../models';
 import type { PoolSelectionHandler } from './StakeDelegation';
 import { percentageFromParts } from '../utils/proportionsHelper';
-import ListingRow from './ListingRow';
+import ListingRow from './Listing/ListingRow';
 import styles from './StakePoolList.scss';
 
 type Props = {
@@ -24,7 +24,7 @@ export default ({
   newDelegation
 }: Props) => {
   return (
-    <Container>
+    <ListingTable>
       {stakePools &&
         stakePools.map((poolId: PoolId) => {
           const activeDelegation = newDelegation[poolId];
@@ -36,15 +36,17 @@ export default ({
           const currentDelegationPercentage =
             currentDelegation && percentageFromParts(currentDelegation, poolId);
           return (
-            <ListingRow key={poolId}>
-              <Col style={rowStyles} className={styles.poolId} xs={4}>
+            <ListingRow itemKey={poolId}>
+              <ListingColumn style={rowStyles} className={styles.poolId} xs={4}>
                 {poolId}
-              </Col>
-              <Col style={rowStyles} xs={2}>
+              </ListingColumn>
+              <ListingColumn style={rowStyles} xs={2}>
                 {newDelegationPercentage}%
-              </Col>
-              <Col xs={2}>{currentDelegationPercentage}%</Col>
-              <Col xs={3}>
+              </ListingColumn>
+              <ListingColumn xs={2}>
+                {currentDelegationPercentage}%
+              </ListingColumn>
+              <ListingColumn xs={3}>
                 <Row className="justify-content-between">
                   <Button
                     type="button"
@@ -63,10 +65,10 @@ export default ({
                     Add delegation
                   </Button>
                 </Row>
-              </Col>
+              </ListingColumn>
             </ListingRow>
           );
         })}
-    </Container>
+    </ListingTable>
   );
 };

examples/wallet/app/components/TransactionListing.js

@@ -1,20 +1,20 @@
 // @flow
 import React from 'react';
-import Col from 'react-bootstrap/Col';
-import Container from 'react-bootstrap/Container';
 import curry from 'lodash/curry';
 import ClickableBox from 'clickable-box';
 import config from 'config';
 // FIXME: this is obviously not portable to a webapp
 import { shell } from 'electron';
+import ListingTable from './Listing/ListingTable';
 import type {
   Transaction,
   Address,
   TransactionInput,
   TransactionOutput
 } from '../models';
 import styles from './TransactionListing.scss';
-import ListingRow from './ListingRow';
+import ListingRow from './Listing/ListingRow';
+import ListingColumn from './Listing/ListingColumn';
 
 type Props = {
   transactions: Array<Transaction>,
@@ -23,9 +23,9 @@ type Props = {
 
 export default ({ transactions, myAddress }: Props) => {
   return (
-    <Container>
+    <ListingTable>
       {transactions.map(curry(transactionToRow)(myAddress))}
-    </Container>
+    </ListingTable>
   );
 };
 
@@ -55,11 +55,11 @@ const transactionToRow = (
     return null;
   }
   return (
-    <ListingRow key={id} className={styles.row}>
-      <Col className={styles.transactionType} xs={2}>
+    <ListingRow itemKey={id} className={styles.row}>
+      <ListingColumn className={styles.transactionType} xs={2}>
         {transactionType}
-      </Col>
-      <Col xs={2} className={styles.txHash}>
+      </ListingColumn>
+      <ListingColumn xs={2} className={styles.txHash}>
         <ClickableBox
           onClick={() =>
             shell.openExternal(
@@ -71,16 +71,16 @@ const transactionToRow = (
         >
           {id}
         </ClickableBox>
-      </Col>
+      </ListingColumn>
       {/* TODO show date */}
-      <Col xs={1}>04/20/2020</Col>
-      <Col className={styles.amount} xs={2}>
+      <ListingColumn xs={1}>04/20/2020</ListingColumn>
+      <ListingColumn className={styles.amount} xs={2}>
         {inputSum > outputSum ? inputSum : outputSum}
-      </Col>
+      </ListingColumn>
       {/* TODO show confirmations */}
-      <Col className={styles.transactionStatus} xs={2}>
+      <ListingColumn className={styles.transactionStatus} xs={2}>
         pending
-      </Col>
+      </ListingColumn>
       {/* TODO add a dropdown with details (inpt sum, output sum, ) */}
     </ListingRow>
   );