Add Identity Components From Downstream

components/FabricBalanceManager.js

@@ -0,0 +1,102 @@
+import * as defaults from '../settings/state';
+
+import merge from 'lodash.merge';
+import FabricComponent from '../types/component';
+
+// import * as Bitcoin from '@fabric/core/services/bitcoin';
+
+// Components
+import {
+  Card,
+  Header,
+  Icon,
+  Label,
+  Table
+} from 'semantic-ui-react';
+
+import FabricIdentityManager from './FabricIdentityManager';
+
+class BalanceManager extends FabricComponent {
+  constructor (props) {
+    super(props);
+
+    this.state = merge({
+      balances: [],
+      integrity: 'sha256-deadbeefbabe'
+    }, defaults, props);
+
+    // this.bitcoin = new Bitcoin();
+
+    return this;
+  }
+
+  componentDidMount () {
+    super.componentDidMount();
+    console.log('mounted');
+  }
+
+  render () {
+    return (
+      <>
+        <div className='ui vertical stripe segment'>
+          <div className='ui middle aligned stackable grid container'>
+            <div className='row'>
+              <div className='column'>
+                <Card fluid>
+                  <Card.Content>
+                    <Header>
+                      <h1><Icon name='bitcoin' /> Balances</h1>
+                    </Header>
+                    <FabricIdentityManager />
+                    <Table celled>
+                      <Table.Header>
+                        <Table.Row>
+                          <Table.HeaderCell>Symbol</Table.HeaderCell>
+                          <Table.HeaderCell>Asset</Table.HeaderCell>
+                          <Table.HeaderCell>Type</Table.HeaderCell>
+                          <Table.HeaderCell>Balance</Table.HeaderCell>
+                        </Table.Row>
+                      </Table.Header>
+                      <Table.Body>
+                        {this.state.balances.map((x, i) => {
+                          return (
+                            <Table.Row key={i}>
+                              <Table.Cell>{x.symbol}</Table.Cell>
+                              <Table.Cell>{x.asset}</Table.Cell>
+                              <Table.Cell><Label>{x.type}</Label></Table.Cell>
+                              <Table.Cell>{x.confirmed}</Table.Cell>
+                            </Table.Row>
+                          );
+                        })}
+                      </Table.Body>
+                      {/* <Table.Footer>
+                        <Table.Row>
+                          <Table.HeaderCell colSpan='3'>
+                            <Menu floated='right' pagination>
+                              <Menu.Item as='a' icon>
+                                <Icon name='chevron left' />
+                              </Menu.Item>
+                              <Menu.Item as='a'>1</Menu.Item>
+                              <Menu.Item as='a'>2</Menu.Item>
+                              <Menu.Item as='a'>3</Menu.Item>
+                              <Menu.Item as='a'>4</Menu.Item>
+                              <Menu.Item as='a' icon>
+                                <Icon name='chevron right' />
+                              </Menu.Item>
+                            </Menu>
+                          </Table.HeaderCell>
+                        </Table.Row>
+                      </Table.Footer> */}
+                    </Table>
+                  </Card.Content>
+                </Card>
+              </div>
+            </div>
+          </div>
+        </div>
+      </>
+    );
+  }
+}
+
+export default BalanceManager;

components/FabricBridge.js

@@ -0,0 +1,142 @@
+// State
+import * as defaults from '../settings/state';
+
+// Dependencies
+import merge from 'lodash.merge';
+import FabricComponent from '../types/component';
+
+// Components
+import {
+  Button,
+  Card,
+  Feed,
+  Icon,
+  Label
+} from 'semantic-ui-react';
+
+// Fabric Types
+// import * as Store from '@fabric/core/types/store';
+// import * as Worker from '@fabric/core/types/worker';
+import * as Remote from '@fabric/http/types/remote';
+
+class FabricBridge extends FabricComponent {
+  constructor (props) {
+    super(props);
+
+    this.settings = Object.assign({
+      host: 'localhost',
+      port: 9999,
+      secure: false
+    }, defaults, props);
+
+    this.state = merge({
+      integrity: 'sha256-deadbeefbabe',
+      status: 'disconnected',
+      messages: [],
+      meta: {
+        messages: {
+          count: 0
+        }
+      }
+    }, this.settings);
+
+    console.log('bridge settings:', this.settings);
+
+    this.remote = new Remote({
+      host: this.settings.host,
+      port: this.settings.port,
+      secure: this.settings.secure
+    });
+
+    /* this.agent = new Worker({
+      service: main,
+      settings: settings
+    }); */
+
+    return this;
+  }
+
+  _handleRemoteMessage (message) {
+    console.log('Remote message:', message);
+    this._syncState();
+  }
+
+  _handleRemoteError (error) {
+    console.log('Remote error:', error);
+  }
+
+  _syncState () {
+    this.setState({
+      status: this.remote._state.status,
+      messages: this.remote._state.messages,
+      meta: this.remote._state.meta
+    });
+  }
+
+  componentDidMount () {
+    console.log('bridge mounted! starting...');
+    // this.agent.executeMethod('connect');
+    // this.process.executeMethod('connect');
+    this.start();
+  }
+
+  connect () {
+    this._syncState();
+    this.remote.connect();
+    this._syncState();
+  }
+
+  executeMethod (name, params) {
+    return this.remote.executeMethod(name, params);
+  }
+
+  ping () {
+    this.remote.ping();
+  }
+
+  render () {
+    return (
+      <>
+        <Card fluid>
+          <Card.Content>
+            <Button.Group floated='right'>
+              <Button onClick={this.ping.bind(this)}>Ping <Icon name='info' /></Button>
+              <Button onClick={this.connect.bind(this)}>Connect <Icon name='lightning' /></Button>
+            </Button.Group>
+            <Card.Header as='h3'>Bridge</Card.Header>
+          </Card.Content>
+          <Card.Content>
+            <Feed>
+              {this.state.messages.map((message, i) => {
+                return (
+                  <Feed.Event size='small' key={i} style={{ fontSize: '0.8em', fontFamily: 'monospace' }}>
+                    <Feed.Content>
+                      <div style={{color: 'black'}}>{JSON.stringify(message, null, '  ')}</div>
+                    </Feed.Content>
+                  </Feed.Event>
+                );
+              })}
+            </Feed>
+          </Card.Content>
+          <Card.Content extra>
+            <Label><Icon name='info' /> {this.remote._state.status}</Label>
+            <Label><Icon name='mail' /> {this.remote._state.meta.messages.count}</Label>
+          </Card.Content>
+        </Card>
+      </>
+    );
+  }
+
+  async send (message) {
+    return this.remote.send(message);
+  }
+
+  async start () {
+    this.remote.on('ready', this.props.remoteReady.bind(this));
+    this.remote.on('message', this._handleRemoteMessage.bind(this));
+    this.remote.on('error', this._handleRemoteError.bind(this));
+    this.connect();
+  }
+}
+
+export default FabricBridge;

components/FabricChannelManager.js

@@ -0,0 +1,110 @@
+import merge from 'lodash.merge';
+import FabricComponent from '../types/component';
+
+// Components
+import {
+  Button,
+  Card,
+  Header,
+  Icon,
+  Table
+} from 'semantic-ui-react';
+
+class ChannelManager extends FabricComponent {
+  constructor (props) {
+    super(props);
+
+    this.state = merge({
+      channels: [],
+      integrity: 'sha256-deadbeefbabe'
+    }, props);
+
+    return this;
+  }
+
+  render () {
+    return (
+      <>
+        <div className='ui vertical stripe segment'>
+          <div className='ui middle aligned stackable grid container'>
+            <div className='row'>
+              <div className='column'>
+                <Card fluid>
+                  <Card.Content attached='top'>
+                    <Button.Group floated='right'>
+                      <Button><Icon name='history' /></Button>
+                      <Button><Icon name='refresh' /></Button>
+                    </Button.Group>
+                    <Button.Group>
+                      <Button><Icon name='info' /></Button>
+                      <Button><Icon name='star' /></Button>
+                    </Button.Group>
+                  </Card.Content>
+                  <Card.Content>
+                    <Header>
+                      <Button.Group floated='right' icon>
+                        <Button icon labelPosition='right' color='green'> Connect <Icon name='add' /></Button>
+                      </Button.Group>
+                      <h1><Icon name='road' /> Channels</h1>
+                    </Header>
+                    <p>Channels are funded contracts between yourself and your peers.</p>
+                    <Table celled>
+                      <Table.Header>
+                        <Table.Row>
+                          <Table.HeaderCell>Status</Table.HeaderCell>
+                          <Table.HeaderCell>Peer</Table.HeaderCell>
+                          <Table.HeaderCell>Outbound Potential</Table.HeaderCell>
+                          <Table.HeaderCell>Inbound Potential</Table.HeaderCell>
+                        </Table.Row>
+                      </Table.Header>
+                      <Table.Body>
+                        {this.state.channels.map((x, i) => {
+                          return (
+                            <Table.Row key={i}>
+                              <Table.Cell>{x.status}</Table.Cell>
+                              <Table.Cell>{x.peer}</Table.Cell>
+                              <Table.Cell>{x.balances.outbound}</Table.Cell>
+                              <Table.Cell>{x.balances.inbound}</Table.Cell>
+                            </Table.Row>
+                          );
+                        })}
+                      </Table.Body>
+                      {/* <Table.Footer>
+                        <Table.Row>
+                          <Table.HeaderCell colSpan='3'>
+                            <Menu floated='right' pagination>
+                              <Menu.Item as='a' icon>
+                                <Icon name='chevron left' />
+                              </Menu.Item>
+                              <Menu.Item as='a'>1</Menu.Item>
+                              <Menu.Item as='a'>2</Menu.Item>
+                              <Menu.Item as='a'>3</Menu.Item>
+                              <Menu.Item as='a'>4</Menu.Item>
+                              <Menu.Item as='a' icon>
+                                <Icon name='chevron right' />
+                              </Menu.Item>
+                            </Menu>
+                          </Table.HeaderCell>
+                        </Table.Row>
+                      </Table.Footer> */}
+                    </Table>
+                  </Card.Content>
+                  <Card.Content extra>
+                    <Button.Group floated='right'>
+                      <Button icon labelPosition='left'>
+                        <a href={this.link}>{this.link}</a>
+                        <Icon name='linkify' />
+                      </Button>
+                    </Button.Group>
+                  </Card.Content>
+                </Card>
+              </div>
+            </div>
+          </div>
+        </div>
+      </>
+    );
+  }
+}
+
+export default ChannelManager;