Skip to content

Commit

Permalink
made relays able to advertise
Browse files Browse the repository at this point in the history
  • Loading branch information
@Steven-Ireland
Steven-Ireland committed Jun 6, 2017
1 parent 0eb3bfd commit b3dcaa2
Show file tree
Hide file tree
Showing 5 changed files with 134 additions and 34 deletions.
2 changes: 1 addition & 1 deletion src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ class App extends Component {
<BrowserRouter>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/dial/:address/" component={Dial} />
<Route path="/dial/:address/:relay" component={Dial} />
<Route path="/talk/:address/:relay/:room/:encryptionKey" component={Talk} />

<Route path="*" component={NotFound} />
Expand Down
20 changes: 9 additions & 11 deletions src/Dial.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,25 +18,23 @@ class Dial extends Component {
componentDidMount() {
if (typeof window.web3 === 'undefined' || typeof window.web3.currentProvider === 'undefined') {
// there is no web3 impl, we should add one. Maybe.

// But let's just wait a sec in case metamask is slow.
setTimeout(() => {
if (typeof window.web3 === 'undefined') {
// If still undefined..
this.setState({
color: 'red',
status: 'No Web3 detected. Please download at metamask.io',
});
} else {
this.setup();
}
//window.web3.shh.newIdentity((err, identity) => {
call.bind(this)(window.web3, this.props.match.params.address, (p) => this.setState({progress: p}));
//});
}, 1000);
}, 3000);
} else {
// window.web3.shh.newIdentity((err, identity) => {
call.bind(this)(window.web3, this.props.match.params.address, (p) => this.setState({progress: p}));
// });
this.setup();
}
}
setup() {
call.bind(this)(window.web3, this.props.match.params.address, this.props.match.params.relay, (p) => this.setState({progress: p}));

}
componentWillUnmount() {
Expand All @@ -63,8 +61,8 @@ function endCall() {
})
}

function call(web3, addr, progress) {
Wispa.makeCall(web3, addr, progress, (callee, relayAddr, room, key) => {
function call(web3, addr, relay, progress) {
Wispa.makeCall(web3, addr, relay, progress, (callee, relayAddr, room, key) => {
this.props.history.push('/talk/' + callee + '/' + relayAddr + '/' + room + '/' + key);
});
}
Expand Down
69 changes: 66 additions & 3 deletions src/Home.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@
text-align: center;
}

.Home .content {
.Home > .content {
position: absolute;
top: 40%;
top: 30%;
left: 50%;

transform: translate(-50%, -40%);
transform: translate(-50%, 0%);
}

.callContainer {
Expand All @@ -25,3 +25,66 @@
.callContainer .ui.input {
margin-right: .5rem;
}

.Home .relayContainer.ui.list {
margin: auto;
margin-top: 2rem;

vertical-align: middle;
width: 200px;
}




/* @see https://codepen.io/thith/pen/WbbqXa */
.sonar-wrapper {
overflow: hidden;

padding-left: 15px;
padding-right: 15px !important;
}

/* The circle */
.sonar-emitter {
position: relative;
margin: 32px auto;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: green;
z-index: 0;
}

/* pseudo element - same shape and size as its parent */
.sonar-emitter::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
content: '';
background-color: green;
z-index: -1;
pointer-events: none;
opacity: 0;
}

/*
Animate the pseudo element.
NOTE: add browser prefixes where needed.
*/
.sonar-emitter::after {
animation: sonarWave 2s linear infinite;
}

@keyframes sonarWave {
from {
opacity: 0.5;
}
to {
transform: scale(3.5);
opacity: 0;
}
}
58 changes: 44 additions & 14 deletions src/Home.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,35 +2,50 @@ import React, { Component } from 'react';
import {Link, withRouter} from 'react-router-dom';
import Wispa from './Util/Wispa.js';

import {Input, Button} from 'semantic-ui-react';
import {Input, Button, List} from 'semantic-ui-react';
import './Home.css';

class Home extends Component {
constructor() {
super();
this.state = {
address: '',
relays: [],
}
}
componentDidMount() {
if (typeof window.web3 === 'undefined' || typeof window.web3.currentProvider === 'undefined') {
// there is no web3 impl, we should add one. Maybe.

setTimeout(() => {
if (typeof window.web3 === 'undefined') {
// If still undefined..
this.setState({
color: 'red',
status: 'No Web3 detected. Please download at metamask.io',
});
} else {
this.setup();
}
}, 3000);
} else {
// but for the hackathon we'll assume there is one :)
// window.web3.shh.newIdentity((err, identity) => {
// if (err) {
// console.log(err);
// } else {

Wispa.listenForCalls(window.web3, 'something', (caller, relayAddr, room, key) => {
this.props.history.push('/talk/' + caller + '/' + relayAddr + '/' + room + '/' + key);
});
this.setup()

// }
// });
}
}

setup() {
Wispa.listenForCalls(window.web3, 'something', (caller, relayAddr, room, key) => {
this.props.history.push('/talk/' + caller + '/' + relayAddr + '/' + room + '/' + key);
});

Wispa.listenForRelays(window.web3, (relayAddr) => {
if (this.state.relays.indexOf(relayAddr) === -1) {
this.state.relays.push(relayAddr)
this.setState({relays: this.state.relays});
}
});
}
render() {
return (
<div className="Home">
Expand All @@ -40,10 +55,25 @@ class Home extends Component {
</div>
<div className="callContainer">
<Input size="huge" placeholder="Address" onChange={this.handleChange.bind(this, 'address')}></Input>
<Button as={Link} to={'/dial/'+this.state.address} inverted size="huge" color="green" >Call</Button>
<Button as={Link} to={'/dial/'+this.state.address+'/'+this.state.relays[0]} inverted size="huge" color="green" >Call</Button>
</div>

<List className="relayContainer" inverted>
{
this.state.relays.map((relay) => {
return <List.Item key={relay}>
<div className="sonar-wrapper image">
<div className="sonar-emitter"></div>
</div>
<List.Content verticalAlign="middle">
<List.Header>{relay}</List.Header>
</List.Content>
</List.Item>
})
}
</List>
</div>
<audio ref="audio" autoPlay></audio>

</div>
);
}
Expand Down
19 changes: 14 additions & 5 deletions src/Util/Wispa.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ class Wispa {

// const foundAddr = '0x' + ethUtils.pubToAddress(pubKey).toString('hex');
// if (foundAddr.toLowerCase() === call.address.toLowerCase()) {
cb(call.address.toLowerCase(), affirm.relayAddr, myChallenge, affirm.key);
cb(call.address.toLowerCase(), affirm.relay, myChallenge, affirm.key);
// } else {
// console.log("Cheater detected? ");
// console.log(affirm);
Expand All @@ -77,14 +77,14 @@ class Wispa {
console.log("Listening to calls for " + web3.eth.defaultAccount);
}

static makeCall(web3, address, progress, cb) {
static makeCall(web3, address, relay, progress, cb) {
const challenge = makeChallenge(10);

const call = {
address,
challenge,
pubkey: '1234', // TODO actually make a keypair..
self: web3.eth.defaultAccount,
self: web3.eth.accounts[0],
};

const socket = io("https://relay-telecom.herokuapp.com");
Expand Down Expand Up @@ -126,7 +126,7 @@ class Wispa {
const affirm = {
// signature: mySignature,
key: '1234symmetricKey1234',
relay: '123.456.7.8',
relay,
}

// web3.shh.post({
Expand All @@ -140,11 +140,20 @@ class Wispa {
socket.emit('relaytelecom-affirm', JSON.stringify(affirm));
progress(4);

cb(address.toLowerCase(), affirm.relayAddr, reply.challenge, affirm.key);
cb(address.toLowerCase(), relay, reply.challenge, affirm.key);
});
// }
// });
}

static listenForRelays(web3, foundRelay) {
const socket = io("https://relay-telecom.herokuapp.com");

socket.on('relaytelecom-advertise', (advertisement) => {
console.log(advertisement);
foundRelay(advertisement);
});
}
}


Expand Down

0 comments on commit b3dcaa2

Please sign in to comment.