Wallet list own stakepools

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/OwnStakepoolsList.js

@@ -0,0 +1,29 @@
+// @flow
+import React from 'react';
+import Button from 'react-bootstrap/Button';
+import ListingColumn from './Listing/ListingColumn';
+import ListingTable from './Listing/ListingTable';
+import type { PoolId } from '../models';
+import ListingRow from './Listing/ListingRow';
+
+type Props = {
+  stakePools: Array<PoolId>
+};
+
+export default ({ stakePools }: Props) => {
+  return (
+    <ListingTable>
+      {stakePools &&
+        stakePools.map((poolId: PoolId) => {
+          return (
+            <ListingRow itemKey={poolId}>
+              <ListingColumn xs={8}>{poolId}</ListingColumn>
+              <ListingColumn xs={3}>
+                <Button type="button" disabled size="sm" />
+              </ListingColumn>
+            </ListingRow>
+          );
+        })}
+    </ListingTable>
+  );
+};

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>
   );

examples/wallet/app/containers/OwnStakepoolsList.js

@@ -0,0 +1,28 @@
+// @flow
+import { connect } from 'react-redux';
+import type { AppState } from '../reducers/types';
+import type { Pool, PoolId } from '../models';
+import OwnStakepoolsList from '../components/OwnStakepoolsList';
+
+export type GetOnlyOwnStakepools = typeof getOnlyOwnStakepools;
+
+export function getOnlyOwnStakepools(
+  state: AppState
+): { stakePools: Array<PoolId> } {
+  const {
+    stakePools: { availablePools },
+    account: { publicKey }
+  } = state;
+  console.log(availablePools);
+  return {
+    stakePools: availablePools
+      .filter(
+        (pool: Pool) =>
+          pool.owners.find(it => it === publicKey) ||
+          pool.operators.find(it => it === publicKey)
+      )
+      .map(({ id }) => id)
+  };
+}
+
+export default connect(getOnlyOwnStakepools)(OwnStakepoolsList);

examples/wallet/app/pages/OwnStakepools.js

@@ -3,13 +3,15 @@ import React from 'react';
 import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
 import SidebarLayout from '../containers/SidebarLayout';
+import OwnStakepoolsList from '../containers/OwnStakepoolsList';
 
 export default () => (
   <SidebarLayout>
     <Container>
       <Row className="justify-content-center m-2">
         <h2>My stakepools</h2>
       </Row>
+      <OwnStakepoolsList />
     </Container>
   </SidebarLayout>
 );

examples/wallet/app/reducers/types.js

@@ -6,6 +6,7 @@ import type {
   Balance,
   Counter,
   PrivateKey,
+  PublicKey,
   Delegation,
   Identifier,
   Pool,
@@ -34,6 +35,7 @@ export type Account = AccountKeys &
 export type AccountKeys = {
   address: Address,
   privateKey: PrivateKey,
+  publicKey: PublicKey,
   identifier: Identifier
 };
 

examples/wallet/app/utils/wasmWrapper.js

@@ -52,6 +52,7 @@ async function getAccountDataFromPrivateKey(
     .to_string(config.get('addressPrefix'));
   return {
     address,
+    publicKey: publicKey.to_bech32(),
     privateKey: secret,
     identifier: identifier.to_hex()
   };