Skip to content

Commit ac3750d

Browse files
wangshijunwangshijun
committed
prepare @arcblock/react-scripts
1 parent 9c9f086 commit ac3750d

File tree

13 files changed

+192
-40
lines changed

13 files changed

+192
-40
lines changed

‎packages/react-scripts/config/webpack.config.dev.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,14 @@ module.exports = {
144144
],
145145
include: paths.appSrc,
146146
},
147+
148+
// Avoid "require is not defined" errors
149+
{
150+
test: /\.mjs$/,
151+
include: /node_modules/,
152+
type: 'javascript/auto',
153+
},
154+
147155
{
148156
// "oneOf" will traverse all following loaders until one will
149157
// match the requirements. When no loader matches it will fall

‎packages/react-scripts/config/webpack.config.prod.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,6 +152,14 @@ module.exports = {
152152
],
153153
include: paths.appSrc,
154154
},
155+
156+
// Avoid "require is not defined" errors
157+
{
158+
test: /\.mjs$/,
159+
include: /node_modules/,
160+
type: 'javascript/auto',
161+
},
162+
155163
{
156164
// "oneOf" will traverse all following loaders until one will
157165
// match the requirements. When no loader matches it will fall

‎packages/react-scripts/package.json‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"name": "react-scripts",
3-
"version": "1.1.4",
2+
"name": "@arcblock/react-scripts",
3+
"version": "1.1.1",
44
"description": "Configuration and scripts for Create React App.",
55
"repository": "facebookincubator/create-react-app",
66
"license": "MIT",
@@ -64,8 +64,10 @@
6464
"whatwg-fetch": "2.0.3"
6565
},
6666
"devDependencies": {
67-
"react": "^16.0.0",
68-
"react-dom": "^16.0.0"
67+
"@arcblock/ocap-js": "^0.3.2",
68+
"babel-polyfill": "^6.26.0",
69+
"react": "^16.3.2",
70+
"react-dom": "^16.3.2"
6971
},
7072
"optionalDependencies": {
7173
"fsevents": "^1.1.3"

‎packages/react-scripts/template/.editorconfig‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# For more information about the properties used in
2+
# this file, please see the EditorConfig documentation:
3+
# http://editorconfig.org/
4+
#
5+
# Sensible EditorConfig defaults
6+
# https://gist.github.com/matijs/662bf45dd4ec37b3a068
7+
root = true
8+
9+
[*]
10+
charset = utf-8
11+
end_of_line = lf
12+
indent_size = 2
13+
indent_style = space
14+
insert_final_newline = true
15+
trim_trailing_whitespace = true
16+
17+
# Make sure package.json always uses 2 spaces to indent
18+
[{package.json}]
19+
indent_size = 2
20+
indent_style = space
21+
22+
[{makefile, Makefile, *.mk}]
23+
indent_style = tab

‎packages/react-scripts/template/public/favicon.ico‎

11 KB
Binary file not shown.

‎packages/react-scripts/template/public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
work correctly both with client-side routing and a non-root public URL.
2020
Learn how to configure a non-root public URL by running `npm run build`.
2121
-->
22-
<title>React App</title>
22+
<title>ArcBlock OCAP Starter React APP</title>
2323
</head>
2424
<body>
2525
<noscript>

‎packages/react-scripts/template/src/App.css‎

Lines changed: 7 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,10 @@
1-
.App {
2-
text-align: center;
1+
.App-json {
2+
text-align: left;
33
}
44

5-
.App-logo {
6-
animation: App-logo-spin infinite 20s linear;
7-
height: 80px;
8-
}
9-
10-
.App-header {
11-
background-color: #222;
12-
height: 150px;
13-
padding: 20px;
14-
color: white;
15-
}
16-
17-
.App-title {
18-
font-size: 1.5em;
19-
}
20-
21-
.App-intro {
22-
font-size: large;
23-
}
24-
25-
@keyframes App-logo-spin {
26-
from { transform: rotate(0deg); }
27-
to { transform: rotate(360deg); }
5+
.App-json pre {
6+
background: #F0F0F0;
7+
padding: 10px;
8+
border: 1px solid #CCCCCC;
9+
border-radius: 5px;
2810
}

‎packages/react-scripts/template/src/App.js‎

Lines changed: 49 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,59 @@
11
import React, { Component } from 'react';
2-
import logo from './logo.svg';
2+
import OCAPClient from '@arcblock/ocap-js';
3+
import Layout from './components/Layout/';
4+
35
import './App.css';
46

57
class App extends Component {
8+
constructor(props) {
9+
super(props);
10+
this.state = {
11+
address: '1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa',
12+
summary: null,
13+
loading: false,
14+
};
15+
16+
this.client = new OCAPClient({
17+
dataSource: 'btc',
18+
httpBaseUrl: 'http://47.104.23.85:8080/api', // for dev in china
19+
// httpBaseUrl: 'https://ocap.arcblock.io/api', // for production
20+
enableSubscription: false,
21+
enableMutation: false,
22+
});
23+
}
24+
25+
async componentDidMount() {
26+
this.setState({ loading: true });
27+
28+
const summary = await this.client.accountByAddress({
29+
address: this.state.address,
30+
});
31+
32+
this.setState({ loading: false, summary });
33+
}
34+
635
render() {
36+
const { loading, summary, address } = this.state;
37+
738
return (
8-
<div className="App">
9-
<header className="App-header">
10-
<img src={logo} className="App-logo" alt="logo" />
11-
<h1 className="App-title">Welcome to React</h1>
12-
</header>
13-
<p className="App-intro">
14-
To get started, edit <code>src/App.js</code> and save to reload.
39+
<Layout>
40+
<h2>OCAP Data Fetching Demo</h2>
41+
{loading && (
42+
<p>Loading account summary for Bitcoin Address: {address}</p>
43+
)}
44+
{loading || (
45+
<div className="App-json">
46+
<p>Account summary for Bitcoin account: {address}</p>
47+
<pre>
48+
<code>{JSON.stringify(summary, true, ' ')}</code>
49+
</pre>
50+
</div>
51+
)}
52+
<h2>Building your own DApp</h2>
53+
<p>
54+
Edit <code>src/App.js</code> and save to reload.
1555
</p>
16-
</div>
56+
</Layout>
1757
);
1858
}
1959
}

‎packages/react-scripts/template/src/components/Layout/index.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React from 'react';
2+
import logo from './logo.png';
3+
import './layout.css';
4+
5+
export default class Layout extends React.Component {
6+
render() {
7+
return (
8+
<div className="App">
9+
<header className="App-header">
10+
<img src={logo} className="App-logo" alt="logo" />
11+
<div className="App-links">
12+
<AppLink
13+
href="https://ocap.arcblock.io"
14+
title="SDK Documentation"
15+
/>
16+
<AppLink href="https://ocap.arcblock.io" title="Go Playground" />
17+
<AppLink href="https://reactjs.org" title="Learn React" />
18+
</div>
19+
</header>
20+
<div className="App-content">{this.props.children}</div>
21+
</div>
22+
);
23+
}
24+
}
25+
26+
const AppLink = ({ link, title }) => (
27+
<a className="App-link" href={link} target="_blank" rel="noopener noreferrer">
28+
{title}
29+
</a>
30+
);

‎packages/react-scripts/template/src/components/Layout/layout.css‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
.App {
2+
text-align: center;
3+
}
4+
5+
.App-header {
6+
background-color: #282c34;
7+
min-height: 8vh;
8+
display: flex;
9+
align-items: center;
10+
justify-content: flex-start;
11+
font-size: calc(10px + 1vmin);
12+
color: white;
13+
padding: 0 10%;
14+
}
15+
16+
.App-logo {
17+
height: 4vmin;
18+
margin-right: 30px;
19+
}
20+
21+
.App-links {
22+
display: flex;
23+
justify-content: space-around;
24+
align-items: center;
25+
width: auto;
26+
}
27+
28+
.App-link {
29+
color: #61dafb;
30+
padding: 10px;
31+
text-decoration: none;
32+
border: 1px solid transparent;
33+
margin-right: 30px;
34+
cursor: pointer;
35+
}
36+
37+
.App-link:last-of-type {
38+
margin-right: 0;
39+
}
40+
41+
.App-link:hover {
42+
border: 1px solid #EEE;
43+
}
44+
45+
.App-content {
46+
padding: 0 10%;
47+
text-align: left;
48+
}

0 commit comments

Comments
 (0)