78 | 
79 |
107 | 
108 |
BigchainDB Examples
22 |You can check these out!
23 |-
24 |
- On the Record 25 |
- Share Trader 26 |
- Interledger 27 |
16 |
18 | );
19 |
20 | ReactDOM.render(
38 |
55 |
56 | );
57 | }
58 | return null;
59 | }
60 | });
61 |
62 | export default AccountDetail;
63 |
--------------------------------------------------------------------------------
/client/interledger/js/components/asset_row.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import moment from 'moment';
3 | import classnames from 'classnames';
4 | import { safeInvoke } from 'js-utility-belt/es6';
5 |
6 | import AssetActionPanel from '../../../lib/js/react/components/asset_action_panel';
7 | import AssetDetail from '../../../lib/js/react/components/asset_detail';
8 |
9 | import inBacklog from '../../../lib/js/utils/bigchaindb/in_backlog';
10 |
11 |
12 | const AssetRow = React.createClass({
13 | propTypes: {
14 | account: React.PropTypes.object.isRequired,
15 | asset: React.PropTypes.object.isRequired,
16 | accountList: React.PropTypes.array,
17 | actionMap: React.PropTypes.object,
18 | handleAccountClick: React.PropTypes.func,
19 | handleAssetClick: React.PropTypes.func,
20 | isActive: React.PropTypes.bool
21 | },
22 |
23 | getDefaultProps() {
24 | return {
25 | actionMap: {
26 | 'single-owner-transfer': {
27 | actionName: 'ESCROW',
28 | actionMessage: 'Escrow asset with:',
29 | selectAccounts: true
30 | },
31 | 'multi-owner-execute': {
32 | actionName: 'EXECUTE',
33 | actionMessage: 'Execute escrow of asset:',
34 | selectAccounts: false
35 | },
36 | 'multi-owner-abort': {
37 | actionName: 'ABORT',
38 | actionMessage: 'Abort escrow of asset:',
39 | selectAccounts: false
40 | }
41 | }
42 | };
43 | },
44 |
45 | getInitialState() {
46 | return {
47 | connectors: null,
48 | expiresIn: null
49 | };
50 | },
51 |
52 | componentDidMount() {
53 | if (this.getOperation() !== 'transfer') {
54 | this.intervalId = window.setInterval(this.setExpiryTime, 1000);
55 | }
56 | },
57 |
58 | componentWillUnmount() {
59 | window.clearInterval(this.intervalId);
60 | },
61 |
62 | setExpiryTime() {
63 | const {
64 | asset
65 | } = this.props;
66 | const expires = moment.unix(parseFloat(asset.expiryTime));
67 | const expiresIn = moment.utc(expires.diff(moment.utc()));
68 | this.setState({
69 | expiresIn: expiresIn > 0 ? expiresIn : -1
70 | });
71 | },
72 |
73 | handleAssetClick() {
74 | const {
75 | account,
76 | handleAccountClick,
77 | asset,
78 | handleAssetClick
79 | } = this.props;
80 |
81 | safeInvoke(handleAssetClick, asset);
82 | safeInvoke(handleAccountClick, account);
83 | },
84 |
85 | handleDestinationAccountSelection(destinationAccount) {
86 | const {
87 | account,
88 | asset
89 | } = this.props;
90 |
91 | account.ledger.getConnectors().then((res) => {
92 | this.setState({
93 | connectors: res.connectors
94 | });
95 | });
96 |
97 | // quoting should happen here
98 | // const quotes = connectors.map((connector) => connector.getQuote(asset, destinationAccount));
99 | },
100 |
101 | handleActionClick(selectedAccount) {
102 | const {
103 | connectors
104 | } = this.state;
105 |
106 | const {
107 | account,
108 | asset
109 | } = this.props;
110 |
111 | const idToTransfer = {
112 | txid: asset.id,
113 | cid: 0
114 | };
115 |
116 | if (asset.type === 'single-owner') {
117 | const transfer = {
118 | account: selectedAccount.ledger.id === account.ledger.id ?
119 | selectedAccount : connectors[0],
120 | asset: idToTransfer,
121 | destinationAccount: selectedAccount,
122 | executionCondition: 'cc:0:3:47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU:0',
123 | expiresAt: moment().unix() + 100
124 | };
125 |
126 | account.ledger.send(transfer);
127 | } else if (asset.type === 'multi-owner') {
128 | const transfer = {
129 | account,
130 | asset: idToTransfer
131 | };
132 | if (this.getOperation() === 'execute') {
133 | const conditionFulfillment = 'cf:0:';
134 | account.ledger.fulfillCondition(transfer, conditionFulfillment);
135 | } else {
136 | account.ledger.fulfillCondition(transfer);
137 | }
138 | }
139 | },
140 |
141 | getOperation() {
142 | const {
143 | account,
144 | asset
145 | } = this.props;
146 |
147 | let operation = 'transfer';
148 | if (asset.hasOwnProperty('executeCondition') &&
149 | account.vk === asset.executeCondition.public_key) {
150 | operation = 'execute';
151 | } else if (asset.hasOwnProperty('abortCondition') &&
152 | account.vk === asset.abortCondition.public_key) {
153 | operation = 'abort';
154 | }
155 | return operation;
156 | },
157 |
158 | render() {
159 | const {
160 | account,
161 | accountList,
162 | actionMap,
163 | asset,
164 | isActive
165 | } = this.props;
166 |
167 | const {
168 | expiresIn
169 | } = this.state;
170 |
171 | const assetInBacklog = inBacklog(asset);
172 | const operation = this.getOperation();
173 |
174 | let actionsPanel = null;
175 | if (isActive && accountList && !assetInBacklog) {
176 | const actionType = actionMap[`${asset.type}-${operation}`];
177 | actionsPanel = (
178 |
39 | {account.name}
40 |
41 |
42 | {account.vk}
43 |
44 |
45 | {account.api}
46 |
47 |
195 | {isExpired ? 'EXPIRED' : `Expires in ${expiresIn.format('HH:mm:ss')}`}
196 |
197 | );
198 | }
199 |
200 |
201 | return (
202 |
206 |
210 | {escrowDetails}
211 | {actionsPanel}
212 |
213 |
214 | );
215 | }
216 | });
217 |
218 | export default AssetRow;
219 |
--------------------------------------------------------------------------------
/client/interledger/js/components/assets.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import AssetRow from './asset_row';
4 | import Spinner from '../../../lib/js/react/components/spinner';
5 |
6 |
7 | const Assets = ({
8 | account,
9 | accountList,
10 | assetList,
11 | activeAsset,
12 | handleAccountClick,
13 | handleAssetClick
14 | }) => {
15 | if (assetList && assetList.length) {
16 | return (
17 |
18 | {assetList.map((asset) => {
19 | const isActive = !!activeAsset && activeAsset.id === asset.id;
20 |
21 | return (
22 |
30 | );
31 | })}
32 |
33 | );
34 | } else {
35 | return (
36 |
37 |
39 | );
40 | }
41 | };
42 |
43 | Assets.propTypes = {
44 | account: React.PropTypes.object,
45 | accountList: React.PropTypes.array,
46 | activeAsset: React.PropTypes.object,
47 | assetClasses: React.PropTypes.object,
48 | assetList: React.PropTypes.array,
49 | handleAccountClick: React.PropTypes.func,
50 | handleAssetClick: React.PropTypes.func
51 | };
52 |
53 | export default Assets;
54 |
--------------------------------------------------------------------------------
/client/interledger/js/components/interledger.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { Navbar } from 'react-bootstrap/lib';
4 |
5 | import AccountList from '../../../lib/js/react/components/account_list';
6 | import AccountDetail from './account_detail';
7 |
8 | import AssetActions from '../../../lib/js/react/actions/asset_actions';
9 |
10 | import BigchainDBConnection from '../../../lib/js/react/components/bigchaindb_connection';
11 |
12 |
13 | const Interledger = React.createClass({
14 | propTypes: {
15 | // Injected through BigchainDBConnection
16 | accountList: React.PropTypes.array,
17 | activeAccount: React.PropTypes.object,
18 | activeAsset: React.PropTypes.object,
19 | assetList: React.PropTypes.object,
20 | handleAccountChange: React.PropTypes.func,
21 | handleAssetChange: React.PropTypes.func
22 | },
23 |
24 | fetchAssetList({ account }) {
25 | if (account) {
26 | AssetActions.fetchAssetList({
27 | account
28 | });
29 | }
30 | },
31 |
32 | render() {
33 | const {
34 | accountList,
35 | activeAccount,
36 | activeAsset,
37 | assetList,
38 | handleAccountChange,
39 | handleAssetChange
40 | } = this.props;
41 |
42 | return (
43 |
44 |
45 |
47 |
65 | );
66 | }
67 | });
68 |
69 | export default BigchainDBConnection(Interledger);
70 |
--------------------------------------------------------------------------------
/client/interledger/scss/custom_style.scss:
--------------------------------------------------------------------------------
1 | @import "../../lib/css/scss/variables";
2 |
3 | .interledger {
4 |
5 | .asset-container {
6 | border: 1px solid lighten($fg-color, 70%);
7 | box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
8 | margin-top: 1em;
9 |
10 | &:hover {
11 | border: 1px solid $ascribe-pink;
12 | cursor: pointer;
13 | }
14 |
15 | &.inBacklog {
16 | background: rgba(black, .05);
17 | &:hover {
18 | border: 1px solid lighten($ascribe-pink, 50%);
19 | cursor: default;
20 | }
21 | }
22 | }
23 |
24 | .asset-container-actions {
25 | margin-top: 1.7em
26 | }
27 |
28 | .asset-container-id {
29 | color: lighten($fg-color, 50%);
30 | }
31 |
32 | .asset-escrow-details {
33 | color: rgba(black, 0.8);
34 | font-size: 0.8em;
35 | font-style: italic;
36 | margin-bottom: -1em;
37 | margin-top: 1em;
38 | text-align: right;
39 |
40 | &.isExpired {
41 | color: rgba(red, 0.8);
42 | }
43 | }
44 |
45 | .card {
46 | overflow: visible;
47 | }
48 |
49 | .ledger-0 {
50 | color: darken($ascribe-blue, 10%);
51 | }
52 | .ledger-1 {
53 | color: $ascribe-pink;
54 | }
55 | .ledger-2 {
56 | color: $ascribe-dark-blue;
57 | }
58 | .ledger-3 {
59 | color: $ascribe-black;
60 | }
61 |
62 | #wrapper {
63 | margin-top: 80px;
64 | padding-left: 0 !important;
65 | }
66 |
67 | }
--------------------------------------------------------------------------------
/client/lib/css/scss/account.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | .list-row,
4 | .list-item {
5 | font-size: .9em;
6 | text-transform: uppercase;
7 | padding: 1em;
8 | background-color: $bg-color;
9 | border-bottom: 1px solid lighten($fg-color, 80%);
10 | color: lighten($fg-color, 30%);
11 | }
12 |
13 | .list-row {
14 | &:hover {
15 | color: $bg-color !important;
16 | .list-row-detail {
17 | color: $bg-color !important;
18 | }
19 | background-color: lighten($bg-color--hover, 30%);
20 | cursor: pointer;
21 | }
22 | }
23 |
24 | .list-row.active {
25 | color: $bg-color !important;
26 | .list-row-detail {
27 | color: $bg-color !important;
28 | }
29 | background-color: $bg-color--hover;
30 | }
31 |
32 | .list-row-name {
33 | font-weight: bold;
34 | }
35 |
36 | .list-row-detail {
37 | font-size: 0.8em;
38 | font-style: italic;
39 | color: lighten($fg-color, 50%);
40 | }
41 |
42 | .list-row-name,
43 | .list-row-detail {
44 | text-overflow: ellipsis;
45 | overflow: hidden;
46 | }
--------------------------------------------------------------------------------
/client/lib/css/scss/asset.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 |
4 | .asset-container {
5 | border-bottom: 1px solid lighten($fg-color, 50%);
6 | border-left: 5px solid transparent;
7 | padding: 1em;
8 | }
9 |
10 | .asset-container-actions {
11 | margin-top: 1em
12 | }
13 |
14 | .asset-container-id,
15 | .asset-container-timestamp {
16 | font-size: 0.8em;
17 | text-transform: uppercase;
18 | }
19 |
20 | .asset-container-id {
21 | margin-bottom: 1em;
22 | overflow: hidden;
23 | font-size: 0.75em;
24 | font-style: italic;
25 | text-overflow: ellipsis;
26 | }
27 |
28 | .asset-container-timestamp {
29 | color: lighten($fg-color, 50%);
30 | margin-bottom: -.6em;
31 | text-align: right;
32 | }
--------------------------------------------------------------------------------
/client/lib/css/scss/card.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | .card {
4 | max-width: $row--wide;
5 | background: $bg-color;
6 | box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
7 | padding: 20px 40px;
8 | margin: 0 auto 40px;
9 | overflow: hidden;
10 |
11 | .desc {
12 | font-size: 35px;
13 | line-height: 150%;
14 | margin: 0 0 25px 0;
15 |
16 | @media (max-width: 600px) {
17 | font-size: 20px;
18 | }
19 |
20 | strong {
21 | background-color: black;
22 | color: $fg-color;
23 | padding: 4px 20px;
24 | }
25 | }
26 | }
27 |
28 | .card--summary {
29 | .desc {
30 | float: left;
31 | width: 60%;
32 | @media (max-width: 600px) {
33 | float: none;
34 | width: 100%;
35 | display: block;
36 | margin-left: auto;
37 | margin-right: auto;
38 | }
39 | }
40 |
41 | .preview {
42 | margin-top: -10px;
43 | float: right;
44 | width: 30%;
45 | max-width: 400px;
46 | @media (max-width: 600px) {
47 | float: none;
48 | width: 100%;
49 | margin-bottom: 30px;
50 | }
51 | }
52 | }
53 |
54 | .card {
55 | .disclaimer {
56 | padding-top: 30px;
57 | text-align: right;
58 | font-size: 12px;
59 | }
60 | }
61 |
62 | .card--claim {
63 | box-shadow: none;
64 | background-color: transparent;
65 | .desc {
66 | font-size: 20px;
67 | text-align: center;
68 | a {
69 | color: inherit;
70 | }
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/client/lib/css/scss/custom_bootstrap.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | .pagination {
4 | margin-right: 2em;
5 | }
6 | .pagination > li > a,
7 | .pagination > li > span {
8 | color: lighten($fg-color, 60%);
9 | }
10 |
11 | .pagination > li > a:hover,
12 | .pagination > li > span:hover {
13 | color: lighten($fg-color, 30%);
14 | border-color: lighten($fg-color, 40%);
15 | }
16 |
17 | .pagination > .active > a,
18 | .pagination > .active > a:hover,
19 | .pagination > .active > a:focus,
20 | .pagination > .active > span,
21 | .pagination > .active > span:hover,
22 | .pagination > .active > span:focus {
23 | background-color: $bg-color;
24 | border-color: lighten($fg-color, 30%);
25 | color: $fg-color;
26 | }
27 |
28 | .btn-default {
29 | border-radius: 0;
30 | border: 1px solid lighten($fg-color, 20%);
31 | margin: .2em;
32 | background: $bg-color;
33 | color: lighten($fg-color, 20%);
34 | }
35 |
36 | .btn-default:focus,
37 | .btn-default.focus,
38 | .btn-default:active,
39 | .btn-default.active,
40 | .btn-default.active:focus,
41 | .btn-default.active:hover,
42 | .btn-default:hover {
43 | background: lighten($fg-color, 20%);
44 | color: $bg-color;
45 | border: 1px solid $bg-color;
46 | }
47 |
48 | .btn-secondary{
49 | border-radius: 0;
50 | border: 1px solid $bg-color;
51 | margin: .2em;
52 | background: lighten($fg-color, 20%);
53 | color: $bg-color;
54 | }
55 |
56 | .label-primary {
57 | background-color: lighten($fg-color, 40%);
58 | color: $bg-color !important;
59 | border: 1px solid lighten($fg-color, 10%);
60 | margin-right: .3em;
61 | max-width: 100%;
62 | text-overflow: ellipsis;
63 | white-space: nowrap;
64 | overflow: hidden;
65 | display: inline-block;
66 | padding: .5em 0.8em .4em 0.5em
67 | }
68 |
69 | .dropdown-menu {
70 | > li > a {
71 | color: $fg-color;
72 | }
73 | background-color: $bg-color;
74 | }
75 |
76 | .dropdown-menu > li > a:hover {
77 | color: $bg-color;
78 | background-color: $bg-color--hover;
79 | cursor: pointer;
80 | }
81 |
82 | .btn-group.open .dropdown-toggle {
83 | box-shadow: none;
84 | }
85 |
86 | .open > .btn-default.dropdown-toggle:hover,
87 | .open > .btn-default.dropdown-toggle:focus,
88 | .open > .btn-default.dropdown-toggle.focus{
89 | color: $fg-color;
90 | background-color: lighten($bg-color, 7%);
91 | border: 1px solid $fg-color;
92 | }
--------------------------------------------------------------------------------
/client/lib/css/scss/main.scss:
--------------------------------------------------------------------------------
1 | @import url(https://fonts.googleapis.com/css?family=Lato:300);
2 | // TODO: this should be removed
3 | @import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css);
4 |
5 | @import './style';
6 | $icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
7 | @import "~bootstrap-sass/assets/stylesheets/bootstrap";
8 | @import 'custom_bootstrap';
9 | @import 'normalize.css';
10 | @import 'account';
11 | @import 'asset';
12 | @import 'card';
13 | @import 'search';
14 | @import 'sidebar';
15 | @import 'spinner';
16 | @import 'style';
17 | @import '../../../on_the_record/scss/custom_style';
18 | @import '../../../share_trader/scss/custom_style';
19 | @import '../../../interledger/scss/custom_style';
20 |
--------------------------------------------------------------------------------
/client/lib/css/scss/normalize.css:
--------------------------------------------------------------------------------
1 | /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
2 |
3 | /**
4 | * 1. Set default font family to sans-serif.
5 | * 2. Prevent iOS and IE text size adjust after device orientation change,
6 | * without disabling user zoom.
7 | */
8 |
9 | html {
10 | font-family: sans-serif; /* 1 */
11 | -ms-text-size-adjust: 100%; /* 2 */
12 | -webkit-text-size-adjust: 100%; /* 2 */
13 | }
14 |
15 | /**
16 | * Remove default margin.
17 | */
18 |
19 | body {
20 | margin: 0;
21 | }
22 |
23 | /* HTML5 display definitions
24 | ========================================================================== */
25 |
26 | /**
27 | * Correct `block` display not defined for any HTML5 element in IE 8/9.
28 | * Correct `block` display not defined for `details` or `summary` in IE 10/11
29 | * and Firefox.
30 | * Correct `block` display not defined for `main` in IE 11.
31 | */
32 |
33 | article,
34 | aside,
35 | details,
36 | figcaption,
37 | figure,
38 | footer,
39 | header,
40 | hgroup,
41 | main,
42 | menu,
43 | nav,
44 | section,
45 | summary {
46 | display: block;
47 | }
48 |
49 | /**
50 | * 1. Correct `inline-block` display not defined in IE 8/9.
51 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
52 | */
53 |
54 | audio,
55 | canvas,
56 | progress,
57 | video {
58 | display: inline-block; /* 1 */
59 | vertical-align: baseline; /* 2 */
60 | }
61 |
62 | /**
63 | * Prevent modern browsers from displaying `audio` without controls.
64 | * Remove excess height in iOS 5 devices.
65 | */
66 |
67 | audio:not([controls]) {
68 | display: none;
69 | height: 0;
70 | }
71 |
72 | /**
73 | * Address `[hidden]` styling not present in IE 8/9/10.
74 | * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
75 | */
76 |
77 | [hidden],
78 | template {
79 | display: none;
80 | }
81 |
82 | /* Links
83 | ========================================================================== */
84 |
85 | /**
86 | * Remove the gray background color from active links in IE 10.
87 | */
88 |
89 | a {
90 | background-color: transparent;
91 | }
92 |
93 | /**
94 | * Improve readability of focused elements when they are also in an
95 | * active/hover state.
96 | */
97 |
98 | a:active,
99 | a:hover {
100 | outline: 0;
101 | }
102 |
103 | /* Text-level semantics
104 | ========================================================================== */
105 |
106 | /**
107 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
108 | */
109 |
110 | abbr[title] {
111 | border-bottom: 1px dotted;
112 | }
113 |
114 | /**
115 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
116 | */
117 |
118 | b,
119 | strong {
120 | font-weight: bold;
121 | }
122 |
123 | /**
124 | * Address styling not present in Safari and Chrome.
125 | */
126 |
127 | dfn {
128 | font-style: italic;
129 | }
130 |
131 | /**
132 | * Address variable `h1` font-size and margin within `section` and `article`
133 | * contexts in Firefox 4+, Safari, and Chrome.
134 | */
135 |
136 | h1 {
137 | font-size: 2em;
138 | margin: 0.67em 0;
139 | }
140 |
141 | /**
142 | * Address styling not present in IE 8/9.
143 | */
144 |
145 | mark {
146 | background: #ff0;
147 | color: #000;
148 | }
149 |
150 | /**
151 | * Address inconsistent and variable font size in all browsers.
152 | */
153 |
154 | small {
155 | font-size: 80%;
156 | }
157 |
158 | /**
159 | * Prevent `sub` and `sup` affecting `line-height` in all browsers.
160 | */
161 |
162 | sub,
163 | sup {
164 | font-size: 75%;
165 | line-height: 0;
166 | position: relative;
167 | vertical-align: baseline;
168 | }
169 |
170 | sup {
171 | top: -0.5em;
172 | }
173 |
174 | sub {
175 | bottom: -0.25em;
176 | }
177 |
178 | /* Embedded content
179 | ========================================================================== */
180 |
181 | /**
182 | * Remove border when inside `a` element in IE 8/9/10.
183 | */
184 |
185 | img {
186 | border: 0;
187 | }
188 |
189 | /**
190 | * Correct overflow not hidden in IE 9/10/11.
191 | */
192 |
193 | svg:not(:root) {
194 | overflow: hidden;
195 | }
196 |
197 | /* Grouping content
198 | ========================================================================== */
199 |
200 | /**
201 | * Address margin not present in IE 8/9 and Safari.
202 | */
203 |
204 | figure {
205 | margin: 1em 40px;
206 | }
207 |
208 | /**
209 | * Address differences between Firefox and other browsers.
210 | */
211 |
212 | hr {
213 | box-sizing: content-box;
214 | height: 0;
215 | }
216 |
217 | /**
218 | * Contain overflow in all browsers.
219 | */
220 |
221 | pre {
222 | overflow: auto;
223 | }
224 |
225 | /**
226 | * Address odd `em`-unit font size rendering in all browsers.
227 | */
228 |
229 | code,
230 | kbd,
231 | pre,
232 | samp {
233 | font-family: monospace, monospace;
234 | font-size: 1em;
235 | }
236 |
237 | /* Forms
238 | ========================================================================== */
239 |
240 | /**
241 | * Known limitation: by default, Chrome and Safari on OS X allow very limited
242 | * styling of `select`, unless a `border` property is set.
243 | */
244 |
245 | /**
246 | * 1. Correct color not being inherited.
247 | * Known issue: affects color of disabled elements.
248 | * 2. Correct font properties not being inherited.
249 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
250 | */
251 |
252 | button,
253 | input,
254 | optgroup,
255 | select,
256 | textarea {
257 | color: inherit; /* 1 */
258 | font: inherit; /* 2 */
259 | margin: 0; /* 3 */
260 | }
261 |
262 | /**
263 | * Address `overflow` set to `hidden` in IE 8/9/10/11.
264 | */
265 |
266 | button {
267 | overflow: visible;
268 | }
269 |
270 | /**
271 | * Address inconsistent `text-transform` inheritance for `button` and `select`.
272 | * All other form control elements do not inherit `text-transform` values.
273 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
274 | * Correct `select` style inheritance in Firefox.
275 | */
276 |
277 | button,
278 | select {
279 | text-transform: none;
280 | }
281 |
282 | /**
283 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
284 | * and `video` controls.
285 | * 2. Correct inability to style clickable `input` types in iOS.
286 | * 3. Improve usability and consistency of cursor style between image-type
287 | * `input` and others.
288 | */
289 |
290 | button,
291 | html input[type="button"], /* 1 */
292 | input[type="reset"],
293 | input[type="submit"] {
294 | -webkit-appearance: button; /* 2 */
295 | cursor: pointer; /* 3 */
296 | }
297 |
298 | /**
299 | * Re-set default cursor for disabled elements.
300 | */
301 |
302 | button[disabled],
303 | html input[disabled] {
304 | cursor: default;
305 | }
306 |
307 | /**
308 | * Remove inner padding and border in Firefox 4+.
309 | */
310 |
311 | button::-moz-focus-inner,
312 | input::-moz-focus-inner {
313 | border: 0;
314 | padding: 0;
315 | }
316 |
317 | /**
318 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in
319 | * the UA stylesheet.
320 | */
321 |
322 | input {
323 | line-height: normal;
324 | }
325 |
326 | /**
327 | * It's recommended that you don't attempt to style these elements.
328 | * Firefox's implementation doesn't respect box-sizing, padding, or width.
329 | *
330 | * 1. Address box sizing set to `content-box` in IE 8/9/10.
331 | * 2. Remove excess padding in IE 8/9/10.
332 | */
333 |
334 | input[type="checkbox"],
335 | input[type="radio"] {
336 | box-sizing: border-box; /* 1 */
337 | padding: 0; /* 2 */
338 | }
339 |
340 | /**
341 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain
342 | * `font-size` values of the `input`, it causes the cursor style of the
343 | * decrement button to change from `default` to `text`.
344 | */
345 |
346 | input[type="number"]::-webkit-inner-spin-button,
347 | input[type="number"]::-webkit-outer-spin-button {
348 | height: auto;
349 | }
350 |
351 | /**
352 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
353 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
354 | */
355 |
356 | input[type="search"] {
357 | -webkit-appearance: textfield; /* 1 */
358 | box-sizing: content-box; /* 2 */
359 | }
360 |
361 | /**
362 | * Remove inner padding and search cancel button in Safari and Chrome on OS X.
363 | * Safari (but not Chrome) clips the cancel button when the search input has
364 | * padding (and `textfield` appearance).
365 | */
366 |
367 | input[type="search"]::-webkit-search-cancel-button,
368 | input[type="search"]::-webkit-search-decoration {
369 | -webkit-appearance: none;
370 | }
371 |
372 | /**
373 | * Define consistent border, margin, and padding.
374 | */
375 |
376 | fieldset {
377 | border: 1px solid #c0c0c0;
378 | margin: 0 2px;
379 | padding: 0.35em 0.625em 0.75em;
380 | }
381 |
382 | /**
383 | * 1. Correct `color` not being inherited in IE 8/9/10/11.
384 | * 2. Remove padding so people aren't caught out if they zero out fieldsets.
385 | */
386 |
387 | legend {
388 | border: 0; /* 1 */
389 | padding: 0; /* 2 */
390 | }
391 |
392 | /**
393 | * Remove default vertical scrollbar in IE 8/9/10/11.
394 | */
395 |
396 | textarea {
397 | overflow: auto;
398 | }
399 |
400 | /**
401 | * Don't inherit the `font-weight` (applied by a rule above).
402 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
403 | */
404 |
405 | optgroup {
406 | font-weight: bold;
407 | }
408 |
409 | /* Tables
410 | ========================================================================== */
411 |
412 | /**
413 | * Remove most spacing between table cells.
414 | */
415 |
416 | table {
417 | border-collapse: collapse;
418 | border-spacing: 0;
419 | }
420 |
421 | td,
422 | th {
423 | padding: 0;
424 | }
425 |
--------------------------------------------------------------------------------
/client/lib/css/scss/search.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | .searchbar {
4 | margin: 0 auto;
5 | }
6 |
7 | .searchbar input[type="url"] {
8 | width: 80%;
9 | display: inline-block;
10 | @media (max-width: 480px) {
11 | width: 70%;
12 | }
13 | }
14 |
15 | .searchbar input[type="submit"] {
16 | width: calc(20% - 15px);
17 | padding-left: 0;
18 | padding-right: 0;
19 | margin-left: 15px;
20 | margin-right: 0;
21 | display: inline-block;
22 | @media (max-width: 480px) {
23 | width: 30%;
24 | margin-left: 0px;
25 | }
26 | }
--------------------------------------------------------------------------------
/client/lib/css/scss/sidebar.scss:
--------------------------------------------------------------------------------
1 | @import 'variables';
2 |
3 |
4 | #wrapper {
5 | padding-left: $sidebar--wide;
6 | transition: all 0.4s ease 0s;
7 | margin-top: $navbar-height;
8 | }
9 |
10 | #sidebar-wrapper {
11 | margin-left: -$sidebar--wide;
12 | left: $sidebar--wide;
13 | width: $sidebar--wide;
14 | height: 100%;
15 | overflow-y: auto;
16 | z-index: 1200;
17 | transition: all 0.4s ease 0s;
18 | }
19 |
20 | .sidebar-nav {
21 | position: fixed;
22 | top: $navbar-height;
23 | width: $sidebar--wide;
24 | margin: 0;
25 | padding: 2em 0;
26 | z-index: 1100;
27 | height: 100vh;
28 | border-right: 1px solid #888888;
29 | ul {
30 | list-style: none;
31 | padding: 0;
32 | }
33 | .dropdown-menu {
34 | overflow-y: scroll;
35 | max-height: 50vh;
36 | }
37 |
38 | }
39 |
40 | @media (max-width: 930px) {
41 |
42 | #wrapper {
43 | padding-left: 0;
44 | }
45 |
46 | #sidebar-wrapper {
47 | left: 0;
48 | }
49 |
50 | #wrapper.active {
51 | position: relative;
52 | left: $sidebar--wide;
53 | }
54 |
55 | #wrapper.active #sidebar-wrapper {
56 | left: $sidebar--wide;
57 | width: $sidebar--wide;
58 | transition: all 0.4s ease 0s;
59 | }
60 |
61 | }
62 |
63 |
--------------------------------------------------------------------------------
/client/lib/css/scss/spinner.scss:
--------------------------------------------------------------------------------
1 | @import 'variables';
2 |
3 |
4 | [class^="spinner-wrapper-"]{
5 | margin: auto;
6 | }
7 |
8 | .spinner-wrapper-blue {
9 | color: $ascribe-blue;
10 | .spinner-circle {
11 | border-color: $ascribe-blue;
12 | }
13 | }
14 |
15 | .spinner-wrapper-dark-blue {
16 | color: $ascribe-dark-blue;
17 | .spinner-circle {
18 | border-color: $ascribe-dark-blue;
19 | }
20 | }
21 |
22 | .spinner-wrapper-pink {
23 | color: $ascribe-pink;
24 | .spinner-circle {
25 | border-color: $ascribe-pink;
26 | }
27 | }
28 |
29 | .spinner-wrapper-loop {
30 | -webkit-animation: spinner-color-loop 20s infinite;
31 | -moz-animation: spinner-color-loop 20s infinite;
32 | -o-animation: spinner-color-loop 20s infinite;
33 | -ms-animation: spinner-color-loop 20s infinite;
34 | animation: spinner-color-loop 20s;
35 |
36 | }
37 |
38 | .spinner-wrapper-black {
39 | color: $ascribe-black;
40 | .spinner-circle {
41 | border-color: $ascribe-black;
42 | }
43 | }
44 |
45 | .spinner-wrapper-white {
46 | color: $ascribe-white;
47 | .spinner-circle {
48 | border-color: $ascribe-white;
49 | }
50 | }
51 |
52 | .spinner-wrapper-lg {
53 | width: $ascribe--spinner-size-lg;
54 | height: $ascribe--spinner-size-lg;
55 | }
56 |
57 | .spinner-wrapper-md {
58 | width: $ascribe--spinner-size-md;
59 | height: $ascribe--spinner-size-md;
60 | }
61 |
62 | .spinner-wrapper-sm {
63 | width: $ascribe--spinner-size-sm;
64 | height: $ascribe--spinner-size-sm;
65 | }
66 |
67 | .spinner-circle {
68 | border-radius: 50%;
69 | border-style: solid;
70 |
71 | -webkit-animation: spin 1s infinite linear;
72 | -moz-animation: spin 1s infinite linear;
73 | -o-animation: spin 1s infinite linear;
74 | -ms-animation: spin 1s infinite linear;
75 | animation: spin 1s infinite linear;
76 | }
77 | .spinner-wrapper-lg .spinner-inner,
78 | .spinner-wrapper-lg .spinner-circle {
79 | width: $ascribe--spinner-size-lg;
80 | height: $ascribe--spinner-size-lg;
81 | }
82 |
83 | .spinner-wrapper-md .spinner-inner,
84 | .spinner-wrapper-md .spinner-circle {
85 | width: $ascribe--spinner-size-md;
86 | height: $ascribe--spinner-size-md;
87 | }
88 |
89 | .spinner-wrapper-sm .spinner-inner,
90 | .spinner-wrapper-sm .spinner-circle {
91 | width: $ascribe--spinner-size-sm;
92 | height: $ascribe--spinner-size-sm;
93 | }
94 |
95 | .spinner-wrapper-lg .spinner-circle,
96 | .spinner-wrapper-sm .spinner-circle,
97 | .spinner-wrapper-md .spinner-circle {
98 | border-width: 1px 1px 1px 0;
99 | }
100 |
101 | //.spinner-inner {
102 | // position: relative;
103 | // text-align: center;
104 | //}
105 |
106 | .spinner-inner {
107 | display: none;
108 | }
109 |
110 | .spinner-wrapper-lg .spinner-inner {
111 | font-size: $ascribe--spinner-size-lg;
112 | line-height: $ascribe--spinner-size-lg;
113 | top: -52px;
114 | }
115 |
116 | .spinner-wrapper-md .spinner-inner {
117 | font-size: $ascribe--spinner-size-md;
118 | line-height: $ascribe--spinner-size-md;
119 | top: -34px;
120 | }
121 |
122 | .spinner-wrapper-sm .spinner-inner {
123 | font-size: $ascribe--spinner-size-sm;
124 | line-height: $ascribe--spinner-size-sm;
125 | top: -15px;
126 | }
127 |
128 | @-webkit-keyframes spin {
129 | from {-webkit-transform: rotate(0deg);}
130 | to {-webkit-transform: rotate(359deg);}
131 | }
132 |
133 | @-moz-keyframes spin {
134 | from {-moz-transform: rotate(0deg);}
135 | to {-moz-transform: rotate(359deg);}
136 | }
137 |
138 | @-o-keyframes spin {
139 | from {-o-transform: rotate(0deg);}
140 | to {-o-transform: rotate(359deg);}
141 | }
142 |
143 | @keyframes spin{
144 | from {transform: rotate(0deg);}
145 | to {transform: rotate(359deg);}
146 | }
--------------------------------------------------------------------------------
/client/lib/css/scss/style.scss:
--------------------------------------------------------------------------------
1 | @import "variables";
2 |
3 | /**
4 | * Colors and backgrounds
5 | */
6 |
7 | $row: 100%;
8 | $row--wide: 900px;
9 | $gutter: 20px;
10 | $small: 12px;
11 |
12 | $color--brand: #c90000;
13 | $color--background-secondary: #EEE;
14 |
15 | html {
16 | font-family: 'Lato', sans-serif;
17 | }
18 |
19 | body {
20 | background-color: $bg-color;
21 | }
22 |
23 | .app {
24 | margin: auto;
25 | //max-width: $content--max-width + $sidebar--wide;
26 | height: 100%;
27 | }
28 |
29 | a {
30 | color: $fg-color;
31 | }
32 |
33 | #page-content-wrapper {
34 | width: 100%;
35 | }
36 |
37 | .page-content {
38 | padding: 0 1em;
39 | }
40 |
41 | .content-text {
42 | margin-top: 2em;
43 | text-align: center;
44 | }
45 |
46 | .hero,
47 | .page--result {
48 | background-color: $color--background-secondary;
49 | }
50 |
51 | .logo-brand {
52 | > span:first-of-type {
53 | font-weight: 700;
54 | }
55 | }
56 |
57 | .navbar-fixed-bottom {
58 | margin-left: $sidebar--wide;
59 | }
60 |
61 | @media (max-width: 930px) {
62 | .navbar-fixed-bottom {
63 | margin-left: 0;
64 | }
65 | }
66 |
67 | /**
68 | * Layout
69 | */
70 |
71 | .row {
72 | max-width: $row;
73 | margin-left: auto;
74 | margin-right: auto;
75 | }
76 |
77 | .vertical-align-outer {
78 | position: absolute;
79 | display: table;
80 | width: 100%;
81 | height: 100%;
82 | }
83 |
84 | .vertical-align-inner {
85 | display: table-cell;
86 | vertical-align: middle;
87 | }
88 |
89 | input {
90 | width: 100%;
91 | font-size: 20px;
92 | line-height: 130%;
93 | border: 1px solid #BBB;
94 | padding: 1em;
95 | }
96 |
97 | #app-container {
98 | margin-top: 50vh;
99 | text-align: center;
100 | background: $fg-color;
101 | color: black;
102 | }
103 |
104 | #container {
105 | background-color: $color--background;
106 | }
107 |
108 | .content-header-wrapper {
109 | background-color: $bg-color;
110 | width: 100%;
111 | }
112 |
113 | .content-header {
114 | width: 100%;
115 | max-width: $content--max-width;
116 | position: fixed;
117 | background-color: $bg-color;
118 | height: 70px;
119 | box-shadow: 0 2px 2px -2px rgba(0, 0, 0, .5);
120 | z-index: 1200;
121 | }
122 |
--------------------------------------------------------------------------------
/client/lib/css/scss/variables.scss:
--------------------------------------------------------------------------------
1 |
2 | /**
3 | * Colors and backgrounds
4 | */
5 |
6 | /*79589F*/
7 | $ascribe-black: #222;
8 | $ascribe-dark-blue: #003C69;
9 | $ascribe-blue: #65CFE9;
10 | $ascribe-light-blue: #D3DEE4;
11 | $ascribe-pink: #D10074;
12 | $ascribe-white: white;
13 |
14 | $color--brand: #c90000;
15 | $color--background: #FAFAFA;
16 | $color--background-secondary: #FAFAFA;
17 |
18 | $bg-color: #FAFAFA;
19 | $fg-color: black;
20 | $bg-color--hover: lighten($fg-color, 20%);
21 |
22 | /**
23 | * Sizes
24 | */
25 |
26 | $ascribe--spinner-color: $ascribe-blue;
27 |
28 | $ascribe--spinner-size-lg: 50px;
29 | $ascribe--spinner-size-md: 30px;
30 | $ascribe--spinner-size-sm: 15px;
31 |
32 | $navbar-height: 70px;
33 | $header-height: 70px;
34 |
35 | $row: 700px;
36 | $row--wide: 900px;
37 | $gutter: 20px;
38 | $small: 12px;
39 |
40 | $content--max-width: 1100px;
41 | $sidebar--wide: 250px;
42 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/client/lib/js/constants/api_urls.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable prefer-template */
2 | import { API_PATH } from './application_constants';
3 |
4 |
5 | const ApiUrls = {
6 | 'accounts': API_PATH + 'accounts/',
7 | 'accounts_detail': API_PATH + 'accounts/%(accountId)s/',
8 | 'assets_for_account': API_PATH + 'accounts/%(accountId)s/assets/',
9 | 'assets': API_PATH + 'assets/',
10 | 'assets_detail': API_PATH + 'assets/%(assetId)s/',
11 | 'assets_transfer': API_PATH + 'assets/%(assetId)s/%(cid)s/transfer/',
12 | 'assets_escrow': API_PATH + 'assets/%(assetId)s/%(cid)s/escrow/',
13 | 'assets_escrow_fulfill': API_PATH + 'assets/%(assetId)s/%(cid)s/escrow/fulfill/'
14 | };
15 |
16 |
17 | export default ApiUrls;
18 |
--------------------------------------------------------------------------------
/client/lib/js/constants/application_constants.js:
--------------------------------------------------------------------------------
1 | export const FLASK_BASE_URL = process.env.FLASK_BASE_URL;
2 | export const API_PATH = `${FLASK_BASE_URL}/api/`;
3 |
4 | export default {
5 | API_PATH,
6 | FLASK_BASE_URL,
7 | };
8 |
--------------------------------------------------------------------------------
/client/lib/js/plugins/ledger_utils.js:
--------------------------------------------------------------------------------
1 | import BigchainDBLedgerPlugin from 'ilp-plugin-bigchaindb';
2 |
3 | const connectToBigchainDBLedger = (account) => {
4 | const ledgerPlugin = new BigchainDBLedgerPlugin({
5 | auth: {
6 | account: {
7 | id: account.vk,
8 | key: account.sk,
9 | uri: {
10 | api: `http://${account.ledger.api}`,
11 | ws: `ws://${account.ledger.ws}/users/${account.vk}`
12 | }
13 | }
14 | },
15 | ledgerId: account.ledger.id
16 | });
17 |
18 | ledgerPlugin.connect().catch(console.error);
19 | return ledgerPlugin;
20 | };
21 |
22 |
23 | export default connectToBigchainDBLedger;
24 |
--------------------------------------------------------------------------------
/client/lib/js/react/actions/account_actions.js:
--------------------------------------------------------------------------------
1 | import alt from '../alt';
2 |
3 |
4 | class AccountActions {
5 | constructor() {
6 | this.generateActions(
7 | 'flushAccount',
8 | 'fetchAccount',
9 | 'successFetchAccount',
10 | 'flushAccountList',
11 | 'fetchAccountList',
12 | 'successFetchAccountList',
13 | 'errorAccount',
14 | 'postAccount',
15 | 'successPostAccount'
16 | );
17 | }
18 | }
19 |
20 | export default alt.createActions(AccountActions);
21 |
--------------------------------------------------------------------------------
/client/lib/js/react/actions/asset_actions.js:
--------------------------------------------------------------------------------
1 | import alt from '../alt';
2 |
3 |
4 | class AssetActions {
5 | constructor() {
6 | this.generateActions(
7 | 'flushAsset',
8 | 'fetchAsset',
9 | 'successFetchAsset',
10 | 'transferAsset',
11 | 'escrowAsset',
12 | 'fulfillEscrowAsset',
13 | 'flushAssetList',
14 | 'fetchAssetList',
15 | 'successFetchAssetList',
16 | 'errorAsset',
17 | 'postAsset',
18 | 'successPostAsset'
19 | );
20 | }
21 | }
22 |
23 | export default alt.createActions(AssetActions);
24 |
--------------------------------------------------------------------------------
/client/lib/js/react/alt.js:
--------------------------------------------------------------------------------
1 | import Alt from 'alt';
2 |
3 |
4 | const alt = new Alt();
5 |
6 | export default alt;
7 |
--------------------------------------------------------------------------------
/client/lib/js/react/components/account_detail.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import classnames from 'classnames';
4 | import { Row } from 'react-bootstrap/lib';
5 |
6 |
7 | const AccountDetail = ({
8 | account,
9 | isActive,
10 | handleClick
11 | }) => {
12 | return (
13 | Interledger
46 |
48 |
64 |
49 |
63 |
50 |
55 |
61 |
62 |
17 | {account.name}
18 |
19 |
20 | {account.vk}
21 |
22 |
55 | {accountList
56 | .sort((a, b) => {
57 | if (a.name < b.name) return -1;
58 | if (a.name > b.name) return 1;
59 | return 0;
60 | })
61 | .map(account => (
62 |
67 | {children}
68 |
69 | ))}
70 |
71 | );
72 | } else {
73 | return (
74 |
75 |
77 | );
78 | }
79 | }
80 | });
81 |
82 | const AccountWrapper = React.createClass({
83 | propTypes: {
84 | account: React.PropTypes.object,
85 | children: React.PropTypes.node,
86 | handleClick: React.PropTypes.func,
87 | isActive: React.PropTypes.bool
88 | },
89 |
90 | handleClick() {
91 | const { account, handleClick } = this.props;
92 | safeInvoke(handleClick, account);
93 | },
94 |
95 | render() {
96 | const {
97 | account,
98 | isActive,
99 | children
100 | } = this.props;
101 |
102 | return (
103 |
104 | {
105 | React.Children.map(children, (child) =>
106 | React.cloneElement(child, {
107 | account,
108 | isActive,
109 | handleClick: this.handleClick
110 | })
111 | )
112 | }
113 |
114 | );
115 | }
116 | });
117 |
118 | export default AccountList;
119 |
--------------------------------------------------------------------------------
/client/lib/js/react/components/asset_action_panel.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { Button, DropdownButton, MenuItem } from 'react-bootstrap/lib';
4 | import { safeInvoke } from 'js-utility-belt/es6';
5 |
6 |
7 | const AssetActionPanel = React.createClass({
8 | propTypes: {
9 | accountList: React.PropTypes.array.isRequired,
10 | activeAccount: React.PropTypes.object.isRequired,
11 | handleActionClick: React.PropTypes.func.isRequired,
12 | actionMessage: React.PropTypes.string,
13 | actionName: React.PropTypes.string,
14 | handleAccountSelection: React.PropTypes.func,
15 | selectAccounts: React.PropTypes.bool
16 | },
17 |
18 | getDefaultProps() {
19 | return {
20 | actionMessage: 'Transfer asset to:',
21 | actionName: 'TRANSFER',
22 | selectAccounts: true
23 | };
24 | },
25 |
26 | getInitialState() {
27 | return {
28 | selectedAccount: null
29 | };
30 | },
31 |
32 | setSelectedAccount(account) {
33 | this.setState({
34 | selectedAccount: account
35 | });
36 |
37 | safeInvoke(this.props.handleAccountSelection, account);
38 | },
39 |
40 | render() {
41 | const {
42 | accountList,
43 | actionMessage,
44 | actionName,
45 | activeAccount,
46 | handleActionClick,
47 | selectAccounts
48 | } = this.props;
49 |
50 | const {
51 | selectedAccount
52 | } = this.state;
53 |
54 | const transferButton = (!selectAccounts || selectedAccount) ?
55 | : null;
60 |
61 | const accountDropdown = selectAccounts ?
62 |
83 |
87 | );
88 | }
89 | });
90 |
91 |
92 | export default AssetActionPanel;
93 |
--------------------------------------------------------------------------------
/client/lib/js/react/components/asset_detail.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { Row, Glyphicon } from 'react-bootstrap/lib';
4 | import classnames from 'classnames';
5 | import moment from 'moment';
6 |
7 |
8 | const AssetDetail = React.createClass({
9 | propTypes: {
10 | asset: React.PropTypes.object.isRequired,
11 | assetContent: React.PropTypes.string,
12 | children: React.PropTypes.node,
13 | className: React.PropTypes.string,
14 | inBacklog: React.PropTypes.bool,
15 | onClick: React.PropTypes.func
16 | },
17 |
18 | getAssetContent() {
19 | const {
20 | asset,
21 | assetContent
22 | } = this.props;
23 |
24 | if (assetContent) {
25 | return assetContent;
26 | }
27 | // TODO: Validate
28 | const { data: { payload: { content } } = {} } = asset.transaction;
29 | return content || '-';
30 | },
31 |
32 | render() {
33 | const {
34 | asset,
35 | children,
36 | className,
37 | inBacklog,
38 | onClick
39 | } = this.props;
40 |
41 | const assetContent = this.getAssetContent();
42 | const validGlyph = inBacklog ? {actionMessage}
84 | {accountDropdown}
85 | {transferButton}
86 |
49 |
60 |
50 | {asset.id}
51 |
52 |
53 | {assetContent}
54 |
55 |
56 | {`${timestamp} `}{validGlyph}
57 |
58 | {children}
59 |
60 |
61 |
62 |
70 |
71 |
72 | );
73 | }
74 | });
75 |
76 | export default Search;
77 |
--------------------------------------------------------------------------------
/client/lib/js/react/components/spinner.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classNames from 'classnames';
3 |
4 |
5 | const Spinner = React.createClass({
6 | propTypes: {
7 | classNames: React.PropTypes.string,
8 | color: React.PropTypes.oneOf(
9 | ['black', 'blue', 'dark-blue', 'light-blue', 'pink', 'white', 'loop']
10 | ),
11 | size: React.PropTypes.oneOf(
12 | ['sm', 'md', 'lg']
13 | )
14 | },
15 |
16 | getDefaultProps() {
17 | return {
18 | inline: false,
19 | size: 'md',
20 | color: 'black'
21 | };
22 | },
23 |
24 | render() {
25 | const {
26 | classNames: classes,
27 | color,
28 | size
29 | } = this.props;
30 |
31 | return (
32 |
36 |
37 |
39 | );
40 | }
41 | });
42 |
43 | export default Spinner;
44 |
--------------------------------------------------------------------------------
/client/lib/js/react/sources/account_source.js:
--------------------------------------------------------------------------------
1 | import AccountActions from '../actions/account_actions';
2 |
3 | import request from '../../utils/request';
4 |
5 |
6 | const AccountSource = {
7 | lookupAccount: {
8 | remote(state) {
9 | return request('accounts_detail', {
10 | urlTemplateSpec: {
11 | accountId: state.accountMeta.idToFetch
12 | }
13 | });
14 | },
15 |
16 | success: AccountActions.successFetchAccount,
17 | error: AccountActions.errorAccount
18 | },
19 |
20 | lookupAccountList: {
21 | remote(state) {
22 | return request('accounts', {
23 | query: {
24 | app: state.accountMeta.app
25 | }
26 | });
27 | },
28 |
29 | success: AccountActions.successFetchAccountList,
30 | error: AccountActions.errorAccount
31 | },
32 |
33 | postAccount: {
34 | remote(state) {
35 | return request('accounts', {
36 | method: 'POST',
37 | jsonBody: state.accountMeta.payloadToPost
38 | });
39 | },
40 |
41 | success: AccountActions.successPostAccount,
42 | error: AccountActions.errorAccount
43 | }
44 | };
45 |
46 | export default AccountSource;
47 |
--------------------------------------------------------------------------------
/client/lib/js/react/sources/asset_source.js:
--------------------------------------------------------------------------------
1 | import request from '../../utils/request';
2 |
3 | import AssetActions from '../actions/asset_actions';
4 |
5 |
6 | const AssetSource = {
7 | lookupAssetList: {
8 | remote(state) {
9 | const { account, search } = state.assetMeta;
10 | // fetch assets for account
11 | const url = `${account.api}/accounts/${account.vk}/assets/`;
12 | return request(url, {
13 | query: { search }
14 | });
15 | },
16 |
17 | success: AssetActions.successFetchAssetList,
18 | error: AssetActions.errorAsset
19 | },
20 |
21 | postAsset: {
22 | remote(state) {
23 | const { account, payloadToPost } = state.assetMeta;
24 | const url = `${account.api}/assets/`;
25 | return request(url, {
26 | method: 'POST',
27 | jsonBody: payloadToPost
28 | });
29 | },
30 |
31 | success: AssetActions.successPostAsset,
32 | error: AssetActions.errorAsset
33 | },
34 |
35 | transferAsset: {
36 | remote(state) {
37 | const { account, idToTransfer: { cid, txid: assetId }, payloadToPost } = state.assetMeta;
38 | const url = `${account.api}/assets/${assetId}/${cid}/transfer/`;
39 | return request(url, {
40 | method: 'POST',
41 | jsonBody: payloadToPost,
42 | urlTemplateSpec: { assetId, cid }
43 | });
44 | },
45 |
46 | success: AssetActions.successPostAsset,
47 | error: AssetActions.errorAsset
48 | },
49 |
50 | escrowAsset: {
51 | remote(state) {
52 | const { idToTransfer: { cid, txid: assetId }, payloadToPost } = state.assetMeta;
53 |
54 | return request('assets_escrow', {
55 | method: 'POST',
56 | jsonBody: payloadToPost,
57 | urlTemplateSpec: { assetId, cid }
58 | });
59 | },
60 |
61 | success: AssetActions.successPostAsset,
62 | error: AssetActions.errorAsset
63 | },
64 |
65 | fulfillEscrowAsset: {
66 | remote(state) {
67 | const { idToTransfer: { cid, txid: assetId }, payloadToPost } = state.assetMeta;
68 |
69 | return request('assets_escrow_fulfill', {
70 | method: 'POST',
71 | jsonBody: payloadToPost,
72 | urlTemplateSpec: { assetId, cid }
73 | });
74 | },
75 |
76 | success: AssetActions.successPostAsset,
77 | error: AssetActions.errorAsset
78 | }
79 | };
80 |
81 | export default AssetSource;
82 |
--------------------------------------------------------------------------------
/client/lib/js/react/stores/account_store.js:
--------------------------------------------------------------------------------
1 | import alt from '../alt';
2 |
3 | import AccountActions from '../actions/account_actions';
4 | import AccountSource from '../sources/account_source';
5 |
6 | import AssetActions from '../actions/asset_actions';
7 |
8 | import connectToBigchainDBLedger from '../../plugins/ledger_utils';
9 |
10 |
11 | class AccountStore {
12 | constructor() {
13 | this.account = null;
14 | this.accountList = null;
15 | this.accountMeta = {
16 | err: null,
17 | payloadToPost: null,
18 | idToFetch: null,
19 | app: null
20 | };
21 | this.bindActions(AccountActions);
22 | this.registerAsync(AccountSource);
23 | }
24 |
25 | onFetchAccount(idToFetch) {
26 | this.accountMeta.idToFetch = idToFetch;
27 | this.getInstance().lookupAccount();
28 | }
29 |
30 | onSuccessFetchAccount(account) {
31 | if (account) {
32 | this.account = this.postProcessAccount(account);
33 | this.accountMeta.err = null;
34 | this.accountMeta.idToFetch = null;
35 | this.accountMeta.app = null;
36 | } else {
37 | this.accountMeta.err = new Error('Problem fetching the account');
38 | }
39 | }
40 |
41 | onFetchAccountList({ app }) {
42 | this.accountMeta.app = app;
43 | this.getInstance().lookupAccountList();
44 | }
45 |
46 | onSuccessFetchAccountList(accountList) {
47 | if (accountList) {
48 | this.accountList = accountList.accounts.map((account) => this.postProcessAccount(account));
49 | this.accountMeta.err = null;
50 | this.accountMeta.app = null;
51 | } else {
52 | this.accountMeta.err = new Error('Problem fetching the account list');
53 | }
54 | }
55 |
56 | postProcessAccount(account) {
57 | const processedAccount = Object.assign({}, account);
58 |
59 | // ledger bindings
60 | processedAccount.ledger = connectToBigchainDBLedger(account);
61 | processedAccount.api = `http://${account.ledger.api}/api`;
62 |
63 | // connectors
64 | processedAccount.ledger.getConnectors()
65 | .then((res) => {
66 | processedAccount.connectors = res.connectors;
67 | processedAccount.isConnector =
68 | res.connectors.filter((connector) => connector.vk === account.vk).length > 0;
69 | });
70 |
71 | // assets
72 | AssetActions.fetchAssetList.defer({
73 | account: processedAccount
74 | });
75 |
76 | return processedAccount;
77 | }
78 |
79 | onPostAccount(payloadToPost) {
80 | this.accountMeta.payloadToPost = payloadToPost;
81 | this.getInstance().postAccount();
82 | }
83 |
84 | onSuccessPostAccount(account) {
85 | if (account) {
86 | this.account = account;
87 | this.accountMeta.err = null;
88 | this.accountMeta.payloadToPost = null;
89 | this.accountMeta.app = null;
90 | } else {
91 | this.accountMeta.err = new Error('Problem posting to the account');
92 | }
93 | }
94 |
95 | onFlushAccount() {
96 | this.account = null;
97 | this.accountMeta.err = null;
98 | this.accountMeta.payloadToPost = null;
99 | this.accountMeta.idToFetch = null;
100 | this.accountMeta.app = null;
101 | }
102 |
103 | onFlushAccountList() {
104 | this.accountList = null;
105 | this.accountMeta.err = null;
106 | this.accountMeta.app = null;
107 | }
108 |
109 | onErrorAccount(err) {
110 | this.accountMeta.err = err;
111 | }
112 | }
113 |
114 | export default alt.createStore(AccountStore, 'AccountStore');
115 |
--------------------------------------------------------------------------------
/client/lib/js/react/stores/asset_store.js:
--------------------------------------------------------------------------------
1 | import { safeMerge } from 'js-utility-belt/es6';
2 | import alt from '../alt';
3 |
4 | import parseEscrowData from '../../utils/cryptoconditions/parse_escrow_data';
5 |
6 | import AssetActions from '../actions/asset_actions';
7 | import AssetSource from '../sources/asset_source';
8 |
9 | class AssetStore {
10 | constructor() {
11 | this.asset = null;
12 | this.assetList = {};
13 | this.assetMeta = {
14 | err: null,
15 | isFetchingList: false,
16 | payloadToPost: null,
17 | idToFetch: null,
18 | idToTransfer: null,
19 | account_: null,
20 | search: null
21 | };
22 | this.bindActions(AssetActions);
23 | this.registerAsync(AssetSource);
24 | }
25 |
26 | onFetchAssetList({ account, search, blockWhenFetching }) {
27 | if (!blockWhenFetching ||
28 | (blockWhenFetching && !this.assetMeta.isFetchingList)) {
29 | this.assetMeta.account = account;
30 | this.assetMeta.search = search;
31 | this.assetMeta.isFetchingList = true;
32 | this.getInstance().lookupAssetList();
33 | }
34 | }
35 |
36 | onSuccessFetchAssetList(assetList) {
37 | if (assetList) {
38 | const { assets, account } = assetList;
39 | if (account && assets) {
40 | if (assets.hasOwnProperty('bigchain')) {
41 | this.assetList[account] =
42 | assets.bigchain
43 | .concat(assets.backlog)
44 | .map(this.postProcessAsset)
45 | .sort((a, b) => a.transaction.timestamp - b.transaction.timestamp);
46 | }
47 | }
48 | this.assetMeta.err = null;
49 | this.assetMeta.account = null;
50 | } else {
51 | this.assetMeta.err = new Error('Problem fetching the asset list');
52 | }
53 | this.assetMeta.isFetchingList = false;
54 | }
55 |
56 | postProcessAsset(asset) {
57 | const condition = asset.transaction.conditions[0].condition;
58 |
59 | if (Array.isArray(condition.details.subfulfillments)) {
60 | asset.type = 'multi-owner';
61 | return safeMerge(
62 | asset,
63 | parseEscrowData(condition.details)
64 | );
65 | } else {
66 | asset.type = 'single-owner';
67 | }
68 |
69 | return asset;
70 | }
71 |
72 | onFlushAssetList(account) {
73 | this.assetList[account] = [];
74 | this.assetMeta.account = null;
75 | this.assetMeta.search = null;
76 | this.assetMeta.isFetchingList = false;
77 | }
78 |
79 | onPostAsset({ account, payloadToPost }) {
80 | this.assetMeta.account = account;
81 | this.assetMeta.payloadToPost = payloadToPost;
82 | this.getInstance().postAsset();
83 | }
84 |
85 | onTransferAsset({ account, idToTransfer, payloadToPost }) {
86 | this.assetMeta.account = account;
87 | this.assetMeta.idToTransfer = idToTransfer;
88 | this.assetMeta.payloadToPost = payloadToPost;
89 | this.getInstance().transferAsset();
90 | }
91 |
92 | onEscrowAsset({ idToTransfer, payloadToPost }) {
93 | this.assetMeta.idToTransfer = idToTransfer;
94 | this.assetMeta.payloadToPost = payloadToPost;
95 | this.getInstance().escrowAsset();
96 | }
97 |
98 | onFulfillEscrowAsset({ idToTransfer, payloadToPost }) {
99 | this.assetMeta.idToTransfer = idToTransfer;
100 | this.assetMeta.payloadToPost = payloadToPost;
101 | this.getInstance().fulfillEscrowAsset();
102 | }
103 |
104 | onSuccessPostAsset(asset) {
105 | if (asset) {
106 | this.asset = asset;
107 | this.assetMeta.err = null;
108 | this.assetMeta.idToTransfer = null;
109 | this.assetMeta.payloadToPost = null;
110 | } else {
111 | this.assetMeta.err = new Error('Problem posting to the asset');
112 | }
113 | }
114 |
115 | onFlushAsset() {
116 | this.asset = null;
117 | this.assetMeta.err = null;
118 | this.assetMeta.payloadToPost = null;
119 | this.assetMeta.idToFetch = null;
120 | this.assetMeta.search = null;
121 | this.assetMeta.isFetchingList = false;
122 | }
123 |
124 | onErrorAsset(err) {
125 | this.assetMeta.err = err;
126 | this.assetMeta.isFetchingList = false;
127 | }
128 | }
129 |
130 | export default alt.createStore(AssetStore, 'AssetStore');
131 |
--------------------------------------------------------------------------------
/client/lib/js/utils/bigchaindb/in_backlog.js:
--------------------------------------------------------------------------------
1 | // TODO: improve backlog identifier: asset.hasOwnProperty('assignee')
2 |
3 | const inBacklog = (asset) => {
4 | return asset.hasOwnProperty('assignee');
5 | };
6 |
7 | export default inBacklog;
8 |
--------------------------------------------------------------------------------
/client/lib/js/utils/cryptoconditions/filter_by_type.js:
--------------------------------------------------------------------------------
1 |
2 | const filterByType = ({ condition, typeId, maxDepth }) => {
3 | let res = [];
4 | if (condition.hasOwnProperty('type_id') && condition.type_id === typeId) {
5 | res.push(condition);
6 | }
7 |
8 | if (condition.hasOwnProperty('subfulfillments') && (maxDepth || maxDepth == null)) {
9 | res = res.concat(...Object.values(condition.subfulfillments).map((subcondition) => {
10 | return filterByType({
11 | typeId,
12 | condition: subcondition,
13 | maxDepth: maxDepth && maxDepth - 1
14 | });
15 | }));
16 | }
17 |
18 | return res;
19 | };
20 |
21 |
22 | export default filterByType;
23 |
--------------------------------------------------------------------------------
/client/lib/js/utils/cryptoconditions/parse_escrow_data.js:
--------------------------------------------------------------------------------
1 | import filterByType from './filter_by_type';
2 | import TypeIds from './type_ids';
3 |
4 |
5 | const filterChildrenByTypes = ({ condition, types }) => {
6 | if (condition.hasOwnProperty('subfulfillments')) {
7 | const children = Object.values(types)
8 | .map((type) => {
9 | return filterByType({
10 | condition,
11 | typeId: type,
12 | maxDepth: 1
13 | });
14 | })
15 | .reduce((a, b) => a.concat(b));
16 | if (children.length >= types.length) {
17 | return children;
18 | }
19 | }
20 | return null;
21 | };
22 |
23 |
24 | export default function parseEscrowData(condition) {
25 | const expiryCondition = filterByType({
26 | condition,
27 | typeId: TypeIds.timeout
28 | });
29 |
30 | const thresholdConditions = filterByType({
31 | condition,
32 | typeId: TypeIds.threshold
33 | });
34 |
35 | let executeCondition = null;
36 | let abortCondition = null;
37 |
38 | Object.values(thresholdConditions).forEach((thresholdCondition) => {
39 | if (!executeCondition) {
40 | const filteredExecuteCondition = filterChildrenByTypes({
41 | condition: thresholdCondition,
42 | types: [TypeIds.ed25519, TypeIds.timeout]
43 | });
44 | executeCondition = filteredExecuteCondition ?
45 | filterByType({
46 | condition: thresholdCondition,
47 | typeId: TypeIds.ed25519
48 | })[0] : null;
49 | }
50 | if (!abortCondition) {
51 | const filteredAbortCondition = filterChildrenByTypes({
52 | condition: thresholdCondition,
53 | types: [TypeIds.ed25519, TypeIds.inverter]
54 | });
55 | abortCondition = filteredAbortCondition ?
56 | filterByType({
57 | condition: thresholdCondition,
58 | typeId: TypeIds.ed25519
59 | })[0] : null;
60 | }
61 | });
62 |
63 | return {
64 | expiryTime: (expiryCondition.length > 0) ? expiryCondition[0].expire_time : null,
65 | executeCondition,
66 | abortCondition
67 | };
68 | }
69 |
--------------------------------------------------------------------------------
/client/lib/js/utils/cryptoconditions/type_ids.js:
--------------------------------------------------------------------------------
1 |
2 | const TypeIds = {
3 | 'preimage': 0,
4 | 'prefix': 1,
5 | 'threshold': 2,
6 | 'rsa': 3,
7 | 'ed25519': 4,
8 | 'inverter': 98,
9 | 'timeout': 99
10 | };
11 |
12 |
13 | export default TypeIds;
14 |
--------------------------------------------------------------------------------
/client/lib/js/utils/request.js:
--------------------------------------------------------------------------------
1 | import { request as baseRequest, sanitize } from 'js-utility-belt/es6';
2 |
3 | import ApiUrls from '../constants/api_urls';
4 |
5 |
6 | const DEFAULT_REQUEST_CONFIG = {
7 | credentials: 'include',
8 | headers: {
9 | 'Accept': 'application/json',
10 | 'Content-Type': 'application/json'
11 | }
12 | };
13 |
14 | /**
15 | * Small wrapper around js-utility-belt's request that provides url resolving, default settings, and
16 | * response handling.
17 | */
18 | export default function request(url, config = {}) {
19 | // Load default fetch configuration and remove any falsy query parameters
20 | const requestConfig = Object.assign({}, DEFAULT_REQUEST_CONFIG, config, {
21 | query: config.query && sanitize(config.query)
22 | });
23 | let apiUrl = url;
24 |
25 | if (!url) {
26 | return Promise.reject(new Error('Request was not given a url.'));
27 | } else if (!url.match(/^http/)) {
28 | apiUrl = ApiUrls[url];
29 | if (!apiUrl) {
30 | return Promise.reject(new Error(`Request could not find a url mapping for "${url}"`));
31 | }
32 | }
33 |
34 | return baseRequest(apiUrl, requestConfig)
35 | .then((res) => res.json())
36 | .catch((err) => {
37 | console.error(err);
38 | throw err;
39 | });
40 | }
41 |
--------------------------------------------------------------------------------
/client/on_the_record/js/app.js:
--------------------------------------------------------------------------------
1 | // Install necessary polyfills (see supported browsers) into global
2 | import 'core-js/es6';
3 | import 'core-js/stage/4';
4 | import 'isomorphic-fetch';
5 |
6 | import React from 'react';
7 | import ReactDOM from 'react-dom';
8 |
9 | import OnTheRecord from './components/on_the_record';
10 |
11 | import '../../lib/css/scss/main.scss';
12 |
13 |
14 | const App = () => (
15 | A
38 |
16 |
18 | );
19 |
20 | ReactDOM.render(
13 | No messages found on BigchainDB. Start typing...
14 |
15 | );
16 | }
17 |
18 | return (
19 |
20 | {assetList
21 | .map(asset => (
22 |
29 | );
30 | };
31 |
32 | AssetHistory.propTypes = {
33 | assetList: React.PropTypes.array.isRequired
34 | };
35 |
36 | export default AssetHistory;
37 |
--------------------------------------------------------------------------------
/client/on_the_record/js/components/assets.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import Scroll from 'react-scroll';
4 |
5 | import AssetActions from '../../../lib/js/react/actions/asset_actions';
6 |
7 | import AssetHistory from './asset_history';
8 |
9 |
10 | const Assets = React.createClass({
11 |
12 | propTypes: {
13 | activeAccount: React.PropTypes.object,
14 | assetList: React.PropTypes.array
15 | },
16 |
17 | getInitialState() {
18 | return { value: "" };
19 | },
20 |
21 | handleInputSubmit(event) {
22 | event.preventDefault();
23 | const { activeAccount } = this.props;
24 | const { value } = this.state;
25 |
26 | const payloadToPost = {
27 | to: activeAccount.vk,
28 | content: value
29 | };
30 | AssetActions.postAsset({
31 | payloadToPost,
32 | account: activeAccount
33 | });
34 |
35 | this.setState({ value: "" });
36 |
37 | Scroll.animateScroll.scrollToBottom();
38 | },
39 |
40 | handleInputChange(event) {
41 | this.setState({ value: event.target.value });
42 | },
43 |
44 | render() {
45 | const {
46 | activeAccount,
47 | assetList
48 | } = this.props;
49 |
50 | const { value } = this.state;
51 |
52 | if (!assetList || !activeAccount) {
53 | return (
54 |
55 | Select account from the list...
56 |
57 | );
58 | }
59 |
60 | return (
61 |
62 |
73 | );
74 | }
75 | });
76 |
77 | export default Assets;
78 |
--------------------------------------------------------------------------------
/client/on_the_record/js/components/on_the_record.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { Navbar } from 'react-bootstrap/lib';
4 |
5 | import Scroll from 'react-scroll';
6 |
7 | import AccountList from '../../../lib/js/react/components/account_list';
8 | import AccountDetail from '../../../lib/js/react/components/account_detail';
9 |
10 | import Assets from './assets';
11 | import Search from '../../../lib/js/react/components/search';
12 |
13 | import AssetActions from '../../../lib/js/react/actions/asset_actions';
14 |
15 | import BigchainDBConnection from '../../../lib/js/react/components/bigchaindb_connection';
16 |
17 |
18 | const OnTheRecord = React.createClass({
19 | propTypes: {
20 | // Injected through BigchainDBConnection
21 | activeAccount: React.PropTypes.object,
22 | assetList: React.PropTypes.object,
23 | assetMeta: React.PropTypes.object,
24 | handleAccountChange: React.PropTypes.func
25 | },
26 |
27 | getInitialState() {
28 | return {
29 | search: null
30 | };
31 | },
32 |
33 | fetchAssetList({ account, search }) {
34 | if (account) {
35 | AssetActions.fetchAssetList({
36 | account,
37 | search,
38 | blockWhenFetching: true
39 | });
40 | Scroll.animateScroll.scrollToBottom();
41 | }
42 | },
43 |
44 | handleAccountChangeAndScroll(account) {
45 | this.props.handleAccountChange(account);
46 | Scroll.animateScroll.scrollToBottom();
47 | },
48 |
49 | handleSearch(query) {
50 | const { activeAccount } = this.props;
51 |
52 | this.setState({
53 | search: query
54 | });
55 |
56 | this.fetchAssetList({
57 | account: activeAccount,
58 | search: query
59 | });
60 | },
61 |
62 | render() {
63 | const {
64 | activeAccount,
65 | assetList,
66 | assetMeta
67 | } = this.props;
68 |
69 | const assetListForAccount = (
70 | assetList && activeAccount && Array.isArray(assetList[activeAccount.vk])) ?
71 | assetList[activeAccount.vk] : null;
72 |
73 | return (
74 |
75 |
76 |
78 |
101 | );
102 | }
103 | });
104 |
105 |
106 | export default BigchainDBConnection(OnTheRecord);
107 |
--------------------------------------------------------------------------------
/client/on_the_record/scss/custom_style.scss:
--------------------------------------------------------------------------------
1 |
2 | .on-the-record {
3 |
4 | .asset-container {
5 | background: lighten($fg-color, 95%);
6 | border: 1px solid lighten($fg-color, 50%);
7 | border-radius: .7em;
8 | margin-bottom: .5em;
9 | }
10 |
11 | .asset-container-id {
12 | color: lighten($fg-color, 50%);
13 | }
14 |
15 | .page-content {
16 | padding-bottom: 5em;
17 | padding-top: 1em;
18 | }
19 | }
--------------------------------------------------------------------------------
/client/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "bigchaindb-examples",
3 | "version": "0.0.3",
4 | "description": "BigchainDB Examples",
5 | "homepage": "https://www.bigchain.io/",
6 | "bugs": "https://github.com/bigchain/bigchaindb-examples/issues",
7 | "license": "Apache-2.0",
8 | "author": "Dimitri De Jonghe",
9 | "repository": {
10 | "type": "git",
11 | "url": "git@github.com:bigchaindb/bigchaindb-examples.git"
12 | },
13 | "keywords": [
14 | "bigchaindb",
15 | "blockchain",
16 | "examples",
17 | "react"
18 | ],
19 | "scripts": {
20 | "lint": "eslint ./",
21 | "build": "rimraf ./build && cross-env NODE_ENV=extract webpack",
22 | "build:dist": "rimraf ./dist && cross-env NODE_ENV=production webpack -p",
23 | "clean": "rimraf ./build ./dist",
24 | "start": "cross-env NODE_ENV=demo node server.demo.js",
25 | "test": "echo \"Error: no test specified\" && exit 1",
26 | "postinstall": "npm run build"
27 | },
28 | "dependencies": {
29 | "alt": "^0.18.4",
30 | "bootstrap-sass": "^3.3.6",
31 | "classnames": "^2.2.5",
32 | "core-js": "^2.4.0",
33 | "ilp-plugin-bigchaindb": "^0.0.7",
34 | "js-utility-belt": "^1.5.0",
35 | "moment": "^2.14.1",
36 | "react": "^15.2.1",
37 | "react-bootstrap": "^0.30.7",
38 | "react-dom": "^15.2.1",
39 | "react-matrix": "0.0.6",
40 | "react-scroll": "^1.0.24"
41 | },
42 | "devDependencies": {
43 | "autoprefixer": "^6.3.7",
44 | "babel-cli": "^6.10.1",
45 | "babel-eslint": "^6.1.2",
46 | "babel-loader": "^6.2.4",
47 | "babel-plugin-react-transform": "^2.0.2",
48 | "babel-plugin-transform-object-assign": "^6.8.0",
49 | "babel-plugin-transform-react-display-name": "^6.8.0",
50 | "babel-plugin-transform-runtime": "^6.9.0",
51 | "babel-preset-es2015": "^6.9.0",
52 | "babel-preset-react": "^6.11.1",
53 | "babel-runtime": "^6.9.2",
54 | "cross-env": "^2.0.0",
55 | "css-loader": "^0.23.1",
56 | "dotenv": "^2.0.0",
57 | "eslint": "^2.10.2",
58 | "eslint-config-ascribe-react": "^1.0.1",
59 | "eslint-plugin-import": "^1.10.3",
60 | "eslint-plugin-jsx-a11y": "^2.0.1",
61 | "eslint-plugin-react": "^5.2.2",
62 | "extract-text-webpack-plugin": "=2.0.0-beta.1",
63 | "file-loader": "^0.9.0",
64 | "html-webpack-plugin": "^2.22.0",
65 | "node-sass": "^3.8.0",
66 | "postcss-loader": "^0.9.1",
67 | "react-transform-hmr": "^1.0.4",
68 | "rimraf": "^2.5.3",
69 | "sass-loader": "^4.0.0",
70 | "style-loader": "^0.13.1",
71 | "url-loader": "^0.5.7",
72 | "webpack": "=2.1.0-beta.17",
73 | "webpack-combine-loaders": "^2.0.0",
74 | "webpack-dev-server": "=2.1.0-beta.0"
75 | }
76 | }
77 |
--------------------------------------------------------------------------------
/client/server.demo.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable strict, no-console */
2 | /* eslint-disable import/no-extraneous-dependencies, import/newline-after-import */
3 | 'use strict';
4 |
5 | const WebpackDevServer = require('webpack-dev-server');
6 | const webpack = require('webpack');
7 | const config = require('./webpack.config.js');
8 |
9 | require('dotenv').load({ silent: true });
10 |
11 | const HOST_NAME = process.env.CLIENT_HOST || 'localhost';
12 | const PORT = process.env.CLIENT_PORT || 3000;
13 |
14 | // Enable hot reloading if on demo mode
15 | if (process.env.NODE_ENV === 'demo') {
16 | // Each entry must have the hot dev server included
17 | Object.keys(config.entry).forEach((entryName) => {
18 | config.entry[entryName] = [
19 | config.entry[entryName],
20 | 'webpack/hot/dev-server',
21 | `webpack-dev-server/client?http://${HOST_NAME}:${PORT}/`
22 | ];
23 | });
24 | config.plugins.push(new webpack.HotModuleReplacementPlugin());
25 | // React hot reloading is enabled through .babelrc and babel-react-transform
26 | }
27 |
28 | // Specify output location for bundled files
29 | config.output.publicPath = '/';
30 |
31 | // Configure server
32 | const compiler = webpack(config);
33 |
34 | const server = new WebpackDevServer(compiler, {
35 | publicPath: config.output.publicPath,
36 | contentBase: './demo',
37 | hot: true,
38 | noInfo: true,
39 | stats: { colors: true }
40 | });
41 |
42 | // Start server
43 | server.listen(PORT, HOST_NAME, (err) => {
44 | if (err) {
45 | console.error(`Demo server ran into ${err} while starting on ${HOST_NAME}:${PORT}.` +
46 | 'Shutting down...');
47 | server.close();
48 | }
49 | console.log(`Demo server running on ${HOST_NAME}:${PORT}`);
50 | });
51 |
--------------------------------------------------------------------------------
/client/share_trader/js/app.js:
--------------------------------------------------------------------------------
1 | // Install necessary polyfills (see supported browsers) into global
2 | import 'core-js/es6';
3 | import 'core-js/stage/4';
4 | import 'isomorphic-fetch';
5 |
6 | import React from 'react';
7 | import ReactDOM from 'react-dom';
8 |
9 | import ShareTrader from './components/share_trader';
10 |
11 | import '../../lib/css/scss/main.scss';
12 |
13 |
14 | const App = () => (
15 | "On the Record"
77 |
79 |
92 |
100 |
93 |
99 |
94 |
98 |
16 |
18 | );
19 |
20 | ReactDOM.render(
106 |
112 | );
113 | }
114 | });
115 |
116 |
117 | export default AssetMatrix;
118 |
--------------------------------------------------------------------------------
/client/share_trader/js/components/asset_row.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classnames from 'classnames';
3 | import { safeInvoke } from 'js-utility-belt/es6';
4 |
5 | import AssetActions from '../../../lib/js/react/actions/asset_actions';
6 |
7 | import AssetActionPanel from '../../../lib/js/react/components/asset_action_panel';
8 | import AssetDetail from '../../../lib/js/react/components/asset_detail';
9 |
10 |
11 | const AssetRow = React.createClass({
12 | propTypes: {
13 | accountList: React.PropTypes.array,
14 | activeAccount: React.PropTypes.object,
15 | asset: React.PropTypes.object,
16 | assetClass: React.PropTypes.string,
17 | handleAssetClick: React.PropTypes.func,
18 | isActive: React.PropTypes.bool
19 | },
20 |
21 | getInitialState() {
22 | return {
23 | inTransfer: false
24 | };
25 | },
26 |
27 | handleAssetClick() {
28 | const {
29 | asset,
30 | handleAssetClick
31 | } = this.props;
32 | safeInvoke(handleAssetClick, asset);
33 | },
34 |
35 | handleTransferClick(selectedAccount) {
36 | const {
37 | asset,
38 | activeAccount
39 | } = this.props;
40 |
41 | const idToTransfer = {
42 | txid: asset.id,
43 | cid: 0
44 | };
45 |
46 | const payloadToPost = {
47 | source: activeAccount,
48 | to: selectedAccount
49 | };
50 |
51 | AssetActions.transferAsset({
52 | idToTransfer,
53 | payloadToPost,
54 | account: activeAccount
55 | });
56 |
57 | this.setState({ inTransfer: true });
58 | },
59 |
60 | render() {
61 | const {
62 | asset,
63 | activeAccount,
64 | accountList,
65 | assetClass,
66 | isActive
67 | } = this.props;
68 |
69 | const {
70 | inTransfer
71 | } = this.state;
72 |
73 | const { data: { payload: { content } } = {} } = asset.transaction;
74 |
75 | let actionsPanel = null;
76 | if (isActive && activeAccount && accountList && !inTransfer) {
77 | actionsPanel = (
78 |
19 | {assetList.sort((a, b) => {
20 | if (a.transaction.timestamp === b.transaction.timestamp) {
21 | if (a.id < b.id) {
22 | return -1;
23 | } else {
24 | return a.id > b.id ? 1 : 0;
25 | }
26 | }
27 | return a.transaction.timestamp - b.transaction.timestamp;
28 | })
29 | .map((asset) => {
30 | const isActive = !!activeAsset && activeAsset.id === asset.id;
31 | const assetClass = assetClasses[asset.transaction.conditions[0].new_owners[0]];
32 |
33 | return (
34 |
45 | );
46 | } else {
47 | return (
48 |
49 |
51 | );
52 | }
53 | };
54 |
55 | Assets.propTypes = {
56 | accountList: React.PropTypes.array,
57 | activeAccount: React.PropTypes.object,
58 | activeAsset: React.PropTypes.object,
59 | assetClasses: React.PropTypes.object,
60 | assetList: React.PropTypes.array,
61 | handleAssetClick: React.PropTypes.func
62 | };
63 |
64 | export default Assets;
65 |
--------------------------------------------------------------------------------
/client/share_trader/js/components/share_trader.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Navbar, Row, Col, Button } from 'react-bootstrap/lib';
3 |
4 | import AccountList from '../../../lib/js/react/components/account_list';
5 | import AccountDetail from '../../../lib/js/react/components/account_detail';
6 |
7 | import Assets from './assets';
8 | import AssetMatrix from './asset_matrix';
9 |
10 | import AssetActions from '../../../lib/js/react/actions/asset_actions';
11 |
12 | import BigchainDBConnection from '../../../lib/js/react/components/bigchaindb_connection';
13 |
14 |
15 | const ShareTrader = React.createClass({
16 | propTypes: {
17 | // Injected through BigchainDBConnection
18 | accountList: React.PropTypes.array,
19 | activeAccount: React.PropTypes.object,
20 | activeAsset: React.PropTypes.object,
21 | assetList: React.PropTypes.object,
22 | handleAccountChange: React.PropTypes.func,
23 | handleAssetChange: React.PropTypes.func,
24 | resetActiveAccount: React.PropTypes.func
25 | },
26 |
27 | fetchAssetList({ account }) {
28 | AssetActions.fetchAssetList({
29 | account,
30 | blockWhenFetching: false
31 | });
32 | },
33 |
34 | mapAccountsOnStates(accountList) {
35 | const states = {
36 | 'default': 'available'
37 | };
38 |
39 | if (!accountList) {
40 | return states;
41 | }
42 |
43 | for (let i = 0; i < accountList.length; i++) {
44 | states[accountList[i].vk] = `state${i}`;
45 | }
46 |
47 | return states;
48 | },
49 |
50 | flattenAssetList(assetList) {
51 | return [].concat(...Object.values(assetList));
52 | },
53 |
54 | render() {
55 | const {
56 | activeAccount,
57 | accountList,
58 | activeAsset,
59 | assetList,
60 | handleAccountChange,
61 | handleAssetChange,
62 | resetActiveAccount
63 | } = this.props;
64 |
65 | const states = this.mapAccountsOnStates(accountList);
66 | const assetListForAccount =
67 | activeAccount && assetList.hasOwnProperty(activeAccount.vk) ?
68 | assetList[activeAccount.vk] : this.flattenAssetList(assetList);
69 |
70 | return (
71 |
72 |
73 |
75 |
122 | );
123 | }
124 | });
125 |
126 | export default BigchainDBConnection(ShareTrader);
127 |
--------------------------------------------------------------------------------
/client/share_trader/scss/custom_style.scss:
--------------------------------------------------------------------------------
1 | .share-trader {
2 | $colorAvailable: #ECF0F1;
3 | $colorGrid: #BDC3C7;
4 | $colorState0: #3498DB;
5 | $colorState1: #39418b;
6 | $colorState2: #E74C3C;
7 | $colorState3: #34495E;
8 | $colorState4: #1ABC9C;
9 | $colorState5: #ff8600;
10 | $colorState6: #437c2b;
11 | $colorState7: #adaf35;
12 | $colorState8: #5bbc50;
13 |
14 | $colorList: (
15 | ("available", $colorAvailable),
16 | ("state0", $colorState0),
17 | ("state1", $colorState1),
18 | ("state2", $colorState2),
19 | ("state3", $colorState3),
20 | ("state4", $colorState4),
21 | ("state5", $colorState5),
22 | ("state6", $colorState6),
23 | ("state7", $colorState7),
24 | ("state8", $colorState8)
25 | );
26 |
27 | .Matrix {
28 | border: 1px solid black;
29 |
30 | .Grid {
31 | stroke: $colorGrid;
32 | }
33 |
34 | .Cell {
35 | @each $colorMap in $colorList {
36 | $state: nth($colorMap, 1);
37 | $color: nth($colorMap, 2);
38 |
39 | &.#{$state} {
40 | fill: $color;
41 | }
42 | }
43 | }
44 | .available {
45 | stroke: black;
46 | stroke-width: 0.1;
47 | }
48 | }
49 |
50 | @each $colorMap in $colorList {
51 | $state: nth($colorMap, 1);
52 | $color: nth($colorMap, 2);
53 |
54 | .asset-container.#{$state} {
55 | .asset-container-id,
56 | .asset-container-timestamp .glyphicon {
57 | color: $color
58 | }
59 | &.active {
60 | background: rgba($color, 0.1);
61 | border-left-color: $color;
62 | }
63 | &:hover {
64 | background: rgba($color, 0.05);
65 | border-left-color: rgba($color, 0.6);
66 | cursor: pointer;
67 | }
68 | &.inTransfer {
69 | background: rgba($color, 0.05);
70 | border-left-color: rgba($color, 0.4);
71 | cursor: wait;
72 | }
73 | }
74 | }
75 |
76 | .asset-container {
77 | width: 100%
78 | }
79 |
80 | .asset-history {
81 | height: calc(100vh - 70px);
82 | overflow-y: scroll;
83 | padding: 0;
84 | }
85 |
86 | .asset-matrix {
87 | border-right: 1px solid #888888;
88 | height: 100%;
89 | }
90 |
91 | .page-content {
92 | height: calc(100vh - 70px);
93 | padding-right: 0;
94 |
95 | .row {
96 | height: 100%;
97 | }
98 | }
99 | }
--------------------------------------------------------------------------------
/client/webpack.config.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable strict, no-console, object-shorthand */
2 | /* eslint-disable import/no-extraneous-dependencies, import/newline-after-import */
3 | 'use strict';
4 |
5 | const path = require('path');
6 |
7 | const webpack = require('webpack');
8 | const autoPrefixer = require('autoprefixer');
9 | const combineLoaders = require('webpack-combine-loaders');
10 | const ExtractTextPlugin = require('extract-text-webpack-plugin');
11 | const HtmlWebpackPlugin = require('html-webpack-plugin');
12 |
13 | require('dotenv').load({ path: '../.env', silent: true });
14 |
15 | const PRODUCTION = process.env.NODE_ENV === 'production';
16 | const EXTRACT = process.env.NODE_ENV === 'extract';
17 |
18 | const PATHS = {
19 | ON_THE_RECORD: path.resolve(__dirname, 'on_the_record/js/app.js'),
20 | SHARE_TRADER: path.resolve(__dirname, 'share_trader/js/app.js'),
21 | INTERLEDGER: path.resolve(__dirname, 'interledger/js/app.js'),
22 |
23 | BUILD: path.resolve(__dirname, 'build'),
24 | DIST: path.resolve(__dirname, 'dist'),
25 | NODE_MODULES: path.resolve(__dirname, 'node_modules'),
26 | };
27 |
28 |
29 | /** ENTRY POINTS **/
30 | const ENTRY = {
31 | // Use one entry per app
32 | ontherecord: PATHS.ON_THE_RECORD,
33 | sharetrader: PATHS.SHARE_TRADER,
34 | interledger: PATHS.INTERLEDGER,
35 | };
36 |
37 | const ENTRY_NAMES = {
38 | ontherecord: 'On the Record',
39 | sharetrader: 'Share Trader',
40 | interledger: 'Interledger',
41 | };
42 |
43 |
44 | /** EXTERNAL DEFINITIONS INJECTED INTO APP **/
45 | const DEFINITIONS = {
46 | 'process.env': {
47 | NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
48 | FLASK_BASE_URL: JSON.stringify(`http://${process.env.FLASK_HOST || 'localhost'}:` +
49 | `${process.env.FLASK_PORT || '8000'}`),
50 | },
51 | };
52 |
53 |
54 | /** PLUGINS **/
55 | const PLUGINS = [
56 | new webpack.DefinePlugin(DEFINITIONS),
57 | new webpack.NoErrorsPlugin(),
58 | ];
59 |
60 | const PROD_PLUGINS = [
61 | new webpack.optimize.UglifyJsPlugin({
62 | compress: {
63 | warnings: false
64 | },
65 | output: {
66 | comments: false
67 | },
68 | sourceMap: true,
69 | }),
70 | new webpack.LoaderOptionsPlugin({
71 | debug: false,
72 | minimize: true
73 | }),
74 | ];
75 |
76 | const EXTRACT_CSS_PLUGIN = new ExtractTextPlugin(
77 | PRODUCTION ? '[name]/styles.min.css' : '[name]/styles.css', {
78 | allChunks: true
79 | }
80 | );
81 |
82 | // Generate html files for each of the example apps specified in ENTRY
83 | const HTML_PLUGINS = Object.keys(ENTRY).map((entryName) => (
84 | new HtmlWebpackPlugin({
85 | filename: `${entryName}/index.html`,
86 | title: `${ENTRY_NAMES[entryName]} - powered by BigchainDB`,
87 | chunks: [entryName],
88 | minify: PRODUCTION ? {
89 | collapseWhitespace: true,
90 | minifyJS: true,
91 | removeComments: true,
92 | removeRedundantAttributes: true
93 | } : false,
94 | template: path.resolve(__dirname, 'app_index_template.html'),
95 |
96 | // Our own options
97 | PRODUCTION: PRODUCTION
98 | })
99 | ));
100 |
101 | PLUGINS.push(...HTML_PLUGINS);
102 |
103 | if (EXTRACT || PRODUCTION) {
104 | PLUGINS.push(EXTRACT_CSS_PLUGIN);
105 | }
106 |
107 | if (PRODUCTION) {
108 | PLUGINS.push(...PROD_PLUGINS);
109 | }
110 |
111 |
112 | /** LOADERS **/
113 | const JS_LOADER = combineLoaders([
114 | {
115 | loader: 'babel',
116 | query: {
117 | cacheDirectory: true,
118 | },
119 | },
120 | ]);
121 |
122 | const CSS_LOADER = combineLoaders([
123 | {
124 | loader: 'css',
125 | query: {
126 | sourceMap: true
127 | }
128 | },
129 | { loader: 'postcss' },
130 | {
131 | loader: 'sass',
132 | query: {
133 | precision: '8', // See https://github.com/twbs/bootstrap-sass#sass-number-precision
134 | outputStyle: 'expanded',
135 | sourceMap: true
136 | }
137 | },
138 | ]);
139 |
140 | const LOADERS = [
141 | {
142 | test: /\.jsx?$/,
143 | exclude: [PATHS.NODE_MODULES],
144 | loader: JS_LOADER,
145 | },
146 | {
147 | test: /\.json$/,
148 | loader: 'json'
149 | },
150 | {
151 | test: /\.s[ac]ss$/,
152 | exclude: [PATHS.NODE_MODULES],
153 | loader: PRODUCTION || EXTRACT ? ExtractTextPlugin.extract('style', CSS_LOADER)
154 | : `style!${CSS_LOADER}`,
155 | },
156 | {
157 | test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/,
158 | loader: 'url-loader?limit=100000'
159 | },
160 | ];
161 |
162 |
163 | /** EXPORTED WEBPACK CONFIG **/
164 | module.exports = {
165 | entry: ENTRY,
166 |
167 | output: {
168 | filename: PRODUCTION ? '[name]/bundle.min.js' : '[name]/bundle.js',
169 | path: PRODUCTION ? PATHS.DIST : PATHS.BUILD,
170 | },
171 |
172 | debug: !PRODUCTION,
173 |
174 | devtool: PRODUCTION ? '#source-map' : '#inline-source-map',
175 |
176 | resolve: {
177 | alias: {
178 | 'babel-runtime': path.resolve(PATHS.NODE_MODULES, 'babel-runtime'),
179 | 'core-js': path.resolve(PATHS.NODE_MODULES, 'core-js'),
180 | },
181 | extensions: ['', '.js', '.jsx'],
182 | modules: ['node_modules'], // Don't use absolute path here to allow recursive matching
183 | },
184 |
185 | plugins: PLUGINS,
186 |
187 | module: {
188 | loaders: LOADERS,
189 | },
190 |
191 | postcss: [autoPrefixer()],
192 | };
193 |
--------------------------------------------------------------------------------
/commands/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bigchaindb/bigchaindb-examples/656183a378047f6481ac0e767ab0f6d7f64e3ef1/commands/__init__.py
--------------------------------------------------------------------------------
/commands/bigchaindb_examples.py:
--------------------------------------------------------------------------------
1 | import os
2 | import re
3 | import argparse
4 | import logging
5 | import subprocess
6 |
7 | import rethinkdb as r
8 | from bigchaindb import Bigchain
9 |
10 | from init_accounts import main as init_accounts_main
11 | from init_assets import main as init_assets_main
12 | from apps_config import APPS
13 |
14 | logging.basicConfig(level=logging.INFO)
15 | logger = logging.getLogger(__name__)
16 |
17 |
18 | def start(parser, scope):
19 | """Utility function to execute a subcommand.
20 | The function will look up in the ``scope``
21 | if there is a function called ``run_Share Trader
74 |
76 |
93 |
121 |
94 |
120 |
95 |
96 |
118 |
119 |
98 |
107 |
108 |
99 |
106 |