Skip to content

Commit bccc45b

Browse files
gamedevsamgamedevsam
committed
Moved steps into own folder, added VideoResponse component, and more
1 parent da8e093 commit bccc45b

15 files changed

+276
-140
lines changed

‎docs/etherbot.4421bfe9f7a35784dae8.js

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎docs/etherbot.781fe3978c3c61fb3fd3.js

Lines changed: 54 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
</head>
88
<body>
99
<div id="root"></div>
10-
<script src="etherbot.4421bfe9f7a35784dae8.js"></script>
10+
<script src="etherbot.781fe3978c3c61fb3fd3.js"></script>
1111
</body>
1212
</html>

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,7 @@
8787
"react": "^16.4.1",
8888
"react-device-detect": "^1.5.8",
8989
"react-dom": "^16.4.1",
90+
"react-player": "^1.6.4",
9091
"react-simple-chatbot": "https://github.com/gamedevsam/react-simple-chatbot",
9192
"web3": "^1.0.0-beta.34"
9293
}

‎src/components/About.jsx

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,18 @@ import ResponseBase from './ResponseBase';
33

44
class About extends ResponseBase {
55
componentWillMount() {
6-
setTimeout(() => this.respond('404'), 1000);
6+
this.respond();
7+
}
8+
9+
render() {
10+
return (
11+
<div>
12+
I was created by <a target='_blank' href='https://keybase.io/sambatista'>Samuel Batista</a>.<br/><br/>
13+
My <a target='_blank' href='https://github.com/gamedevsam/etherbot'>source code</a> is open and free, but hasn't been analysed for defects yet.<br/><br/>
14+
That's why I'm only compatible with Rinkeby test network for now.<br/><br/>
15+
I'm only a toy for now, but my dream is to become a great tool someday!
16+
</div>
17+
);
718
}
819
}
920

‎src/components/EtherBot.jsx

Lines changed: 9 additions & 111 deletions
Original file line numberDiff line numberDiff line change
@@ -1,122 +1,20 @@
11
import React from 'react';
22
import { ThemeProvider } from 'styled-components';
3-
import { isMobile } from 'react-device-detect';
43
import ChatBot from 'react-simple-chatbot';
54
import EtherBotContainer from './EtherBotContainer';
6-
import {
7-
mobileWidth,
8-
mobileHeight,
9-
browserWidth,
10-
browserHeight
11-
} from './EtherBotContainer';
12-
import Price from './Price';
13-
import AccessMyWallet from './AccessMyWallet';
14-
import CreateWallet from './CreateWallet';
15-
import SendEthAndTokens from './SendEthAndTokens';
16-
import PrivacyAndSecurity from './PrivacyAndSecurity';
17-
import Settings from './Settings';
18-
import About from './About';
19-
import { validateAddress } from '../utils';
20-
21-
var menuCount = 0;
22-
const steps = [
23-
{
24-
id: 'welcome',
25-
hideInput: true,
26-
message: 'Welcome to EtherBot!',
27-
trigger: 'menu'
28-
},
29-
{
30-
id: 'menu',
31-
hideInput: true,
32-
options: [
33-
{ value: menuCount++, label: 'Price', trigger: 'price' },
34-
{ value: menuCount++, label: 'Create Wallet', trigger: 'create-wallet' },
35-
{ value: menuCount++, label: 'Access Wallet', trigger: 'access-wallet' },
36-
{ value: menuCount++, label: 'Send Eth & Tokens', trigger: 'send-eth-and-tokens' },
37-
{ value: menuCount++, label: 'Privacy & Security', trigger: 'privacy-and-security' },
38-
{ value: menuCount++, label: 'Settings', trigger: 'settings' },
39-
{ value: menuCount++, label: 'About', trigger: 'about' }
40-
]
41-
},
42-
{
43-
id: 'price',
44-
asMessage: true,
45-
hideInput: true,
46-
waitAction: true,
47-
component: <Price/>,
48-
trigger: 'menu',
49-
},
50-
{
51-
id: 'create-wallet',
52-
asMessage: true,
53-
hideInput: true,
54-
waitAction: true,
55-
component: <CreateWallet/>,
56-
trigger: 'menu',
57-
},
58-
{
59-
id: 'access-wallet',
60-
message: "Please enter a wallet address:",
61-
trigger: 'wallet',
62-
},
63-
{
64-
id: 'wallet',
65-
user: true,
66-
validator: validateAddress,
67-
trigger: 'wallet-balance',
68-
},
69-
{
70-
id: 'wallet-balance',
71-
asMessage: true,
72-
hideInput: false,
73-
waitAction: true,
74-
component: <AccessMyWallet/>,
75-
trigger: 'menu',
76-
},
77-
{
78-
id: 'send-eth-and-tokens',
79-
asMessage: true,
80-
hideInput: true,
81-
waitAction: true,
82-
component: <SendEthAndTokens/>,
83-
trigger: 'menu',
84-
},
85-
{
86-
id: 'privacy-and-security',
87-
hideInput: true,
88-
waitAction: true,
89-
component: <PrivacyAndSecurity/>,
90-
trigger: 'menu',
91-
},
92-
{
93-
id: 'settings',
94-
asMessage: true,
95-
hideInput: true,
96-
waitAction: true,
97-
component: <Settings/>,
98-
trigger: 'menu',
99-
},
100-
{
101-
id: 'about',
102-
asMessage: true,
103-
hideInput: true,
104-
waitAction: true,
105-
component: <About/>,
106-
trigger: 'menu',
107-
}
108-
];
5+
import { width, height } from './EtherBotContainer';
6+
import steps from '../steps';
1097

1108
const EtherBot = () => (
1119
<EtherBotContainer>
11210
<ThemeProvider theme={{
113-
background: '#f5f8fb',
11+
background: '#ffffff',
11412
fontFamily: 'Helvetica Neue',
115-
headerBgColor: '#343535',
116-
headerFontColor: '#fff',
13+
headerBgColor: '#f5f8fb',
14+
headerFontColor: '#4a4a4a',
11715
headerFontSize: '16px',
118-
botBubbleColor: '#343535',
119-
botFontColor: '#fff',
16+
botBubbleColor: '#f5f8fb',
17+
botFontColor: '#4a4a4a',
12018
userBubbleColor: '#fff',
12119
userFontColor: '#4a4a4a'
12220
}}>
@@ -129,8 +27,8 @@ const EtherBot = () => (
12927
botDelay={0} /*ms*/
13028
userDelay={0} /*ms*/
13129
steps={steps}
132-
width={isMobile ? `${mobileWidth}px` : `${browserWidth}px`}
133-
height={isMobile ? `${mobileHeight}px` : `${browserHeight}px`}
30+
width={`${width}px`}
31+
height={`${height}px`}
13432
/>
13533
</ThemeProvider>
13634
</EtherBotContainer>

‎src/components/EtherBotContainer.jsx

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,23 @@
11
import styled from 'styled-components';
22
import { isMobile } from 'react-device-detect';
33

4-
export const mobileWidth = 350;
5-
export const mobileHeight = 520;
6-
export const browserWidth = 800;
7-
export const browserHeight = 600;
4+
const mobileWidth = 350;
5+
const mobileHeight = 520;
6+
const browserWidth = 800;
7+
const browserHeight = 600;
8+
9+
const width = isMobile ? mobileWidth : browserWidth;
10+
const height = isMobile ? mobileHeight : browserHeight;
811

912
const EtherBotContainer = styled.div`
1013
position: absolute;
11-
width: ${isMobile ? mobileWidth : browserWidth}px;
12-
height: ${isMobile ? mobileHeight : browserHeight}px;
14+
width: ${width}px;
15+
height: ${height}px;
1316
z-index: 15;
1417
top: 50%;
1518
left: 50%;
16-
margin: -${(isMobile ? mobileHeight : browserHeight) / 2}px 0 0 -${(isMobile ? mobileWidth : browserWidth) / 2}px;
19+
margin: -${height / 2}px 0 0 -${width / 2}px;
1720
`
1821

22+
export { width, height };
1923
export default EtherBotContainer

‎src/components/Price.jsx renamed to ‎src/components/EtherPrice.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import ResponseBase from './ResponseBase';
33
import axios from 'axios'
44

5-
class Price extends ResponseBase {
5+
class EtherPrice extends ResponseBase {
66
componentWillMount() {
77
axios.get('https://min-api.cryptocompare.com/data/price?fsym=ETH&tsyms=USD,JPY,EUR')
88
.then(response => {
@@ -12,4 +12,4 @@ class Price extends ResponseBase {
1212
}
1313
}
1414

15-
export default Price
15+
export default EtherPrice

‎src/components/Settings.jsx

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎src/components/VideoResponse.jsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
import PropTypes from 'prop-types';
3+
import ReactPlayer from 'react-player';
4+
import ResponseBase from './ResponseBase';
5+
import { width } from './EtherBotContainer';
6+
7+
class VideoResponse extends ResponseBase {
8+
render() {
9+
return (
10+
<div>
11+
<ReactPlayer url={this.props.src} width={width - (width/10)} onReady={() => this.respond()}/>
12+
</div>
13+
);
14+
}
15+
}
16+
17+
VideoResponse.propTypes = {
18+
src: PropTypes.string,
19+
};
20+
21+
VideoResponse.defaultProps = {
22+
src: undefined,
23+
};
24+
25+
export default VideoResponse

‎src/steps.js

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
import React from 'react';
2+
import EtherPrice from './components/EtherPrice';
3+
import AccessMyWallet from './components/AccessMyWallet';
4+
import CreateWallet from './components/CreateWallet';
5+
import SendEthAndTokens from './components/SendEthAndTokens';
6+
import PrivacyAndSecurity from './components/PrivacyAndSecurity';
7+
import VideoResponse from './components/VideoResponse';
8+
import About from './components/About';
9+
import { validateAddress } from './utils';
10+
11+
var menu_count = 0;
12+
var help_menu_count = 0;
13+
const steps = [
14+
{
15+
id: 'welcome',
16+
hideInput: true,
17+
message: 'Welcome to EtherBot!',
18+
trigger: 'menu'
19+
},
20+
{
21+
id: 'menu',
22+
hideInput: true,
23+
options: [
24+
{ value: menu_count++, label: 'Ether Price', trigger: 'eth_price' },
25+
//{ value: menu_count++, label: 'Create Wallet', trigger: 'create_wallet' },
26+
{ value: menu_count++, label: 'Access Wallet', trigger: 'access_wallet' },
27+
//{ value: menu_count++, label: 'Send Eth & Tokens', trigger: 'send_eth_and_tokens' },
28+
//{ value: menu_count++, label: 'Email Eth & Tokens', trigger: 'email_eth_and_tokens' }, // todo
29+
{ value: menu_count++, label: 'Help & Tips', trigger: 'help' },
30+
{ value: menu_count++, label: 'About', trigger: 'about' },
31+
]
32+
},
33+
{
34+
id: 'eth_price',
35+
asMessage: true,
36+
hideInput: true,
37+
waitAction: true,
38+
component: <EtherPrice/>,
39+
trigger: 'menu',
40+
},
41+
{
42+
id: 'create_wallet',
43+
asMessage: true,
44+
hideInput: true,
45+
waitAction: true,
46+
component: <CreateWallet/>,
47+
trigger: 'menu',
48+
},
49+
{
50+
id: 'access_wallet',
51+
message: "Please enter a wallet address:",
52+
trigger: 'wallet',
53+
},
54+
{
55+
id: 'wallet',
56+
user: true,
57+
validator: validateAddress,
58+
trigger: 'wallet_balance',
59+
},
60+
{
61+
id: 'wallet_balance',
62+
asMessage: true,
63+
hideInput: false,
64+
waitAction: true,
65+
component: <AccessMyWallet/>,
66+
trigger: 'menu',
67+
},
68+
{
69+
id: 'send_eth_and_tokens',
70+
asMessage: true,
71+
hideInput: true,
72+
waitAction: true,
73+
component: <SendEthAndTokens/>,
74+
trigger: 'menu',
75+
},
76+
{
77+
id: 'help',
78+
hideInput: true,
79+
message: 'How can I help?',
80+
trigger: 'help_menu',
81+
},
82+
{
83+
id: 'help_menu',
84+
hideInput: true,
85+
options: [
86+
{ value: help_menu_count++, label: 'What is cryptocurrency?', trigger: 'what_is_cryptocurrency' },
87+
{ value: help_menu_count++, label: 'What is blockchain?', trigger: 'what_is_blockchain' },
88+
{ value: help_menu_count++, label: 'What is ethereum?', trigger: 'what_is_ethereum' },
89+
{ value: help_menu_count++, label: 'Privacy & Security', trigger: 'privacy_and_security' },
90+
{ value: help_menu_count++, label: 'Something Else', trigger: 'something_else' }
91+
]
92+
},
93+
{
94+
id: 'what_is_cryptocurrency',
95+
hideInput: true,
96+
waitAction: true,
97+
component: <VideoResponse src="https://www.youtube.com/watch?v=5MfbuQnGM2M"/>,
98+
trigger: 'menu',
99+
},
100+
{
101+
id: 'what_is_blockchain',
102+
hideInput: true,
103+
waitAction: true,
104+
component: <VideoResponse src="https://www.youtube.com/watch?v=6WG7D47tGb0"/>,
105+
trigger: 'menu',
106+
},
107+
{
108+
id: 'what_is_ethereum',
109+
hideInput: true,
110+
waitAction: true,
111+
component: <VideoResponse src="https://www.youtube.com/watch?v=TDGq4aeevgY"/>,
112+
trigger: 'menu',
113+
},
114+
{
115+
id: 'privacy_and_security',
116+
hideInput: true,
117+
waitAction: true,
118+
component: <PrivacyAndSecurity/>,
119+
trigger: 'menu',
120+
},
121+
{
122+
id: 'something_else',
123+
hideInput: true,
124+
waitAction: true,
125+
component: <PrivacyAndSecurity/>,
126+
trigger: 'menu',
127+
},
128+
{
129+
id: 'about',
130+
asMessage: true,
131+
hideInput: true,
132+
waitAction: true,
133+
component: <About/>,
134+
trigger: 'menu',
135+
}
136+
];
137+
138+
export default steps;

0 commit comments

Comments
 (0)