status-im
/
snt-gas-relay
mirror of https://github.com/status-im/snt-gas-relay.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Updated the UI to request relayers

This commit is contained in:
Richard Ramos 2018-08-24 15:21:26 -04:00
parent dbec23fbeb
commit 1d34ac0601
5 changed files with 390 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
test-dapp/app/components/approveandcallgasrelayed.js
View File

@ -41,6 +41,7 @@ class ApproveAndCallGasRelayed extends Component {
gasLimit: 0,
gasToken: "0x0000000000000000000000000000000000000000",
signature: '',
relayer: '',
transactionError: '',
messagingError: '',
submitting: false
@ -93,7 +94,7 @@ class ApproveAndCallGasRelayed extends Component {
}
}
sendMessage = event => {
obtainRelayers = event => {
event.preventDefault();
const {web3, kid, skid} = this.props;
@ -103,6 +104,50 @@ class ApproveAndCallGasRelayed extends Component {
submitting: true
});
this.props.clearMessages();
try {
const sendOptions = {
ttl: 1000,
sig: kid,
powTarget: 1,
powTime: 20,
topic: this.state.topic,
symKeyID: skid,
payload: web3.utils.toHex({
'contract': this.props.identityAddress,
'address': web3.eth.defaultAccount,
'action': 'availability',
'token': this.state.gasToken,
'gasPrice': this.state.gasPrice
})
};
web3.shh.post(sendOptions)
.then(() => {
this.setState({submitting: false});
console.log("Message sent");
return true;
});
} catch(error){
this.setState({messagingError: error.message, submitting: false});
}
}
sendTransaction = event => {
event.preventDefault();
const {web3, kid} = this.props;
let relayer = this.state.relayer;
if(relayer == '' && this.props.relayers.length == 1){
relayer = this.props.relayers[0];
}
this.setState({
messagingError: '',
submitting: true
});
this.props.clearMessages();
try {
@ -124,11 +169,12 @@ class ApproveAndCallGasRelayed extends Component {
powTarget: 1,
powTime: 20,
topic: this.state.topic,
symKeyID: skid,
pubKey: relayer,
payload: web3.utils.toHex({
'contract': this.props.identityAddress,
'encodedFunctionCall': funCall,
'address': web3.eth.defaultAccount
'address': web3.eth.defaultAccount,
'action': 'transaction',
'encodedFunctionCall': funCall
})
};
@ -283,19 +329,10 @@ class ApproveAndCallGasRelayed extends Component {
</Card>
{ this.state.messagingError && <MySnackbarContentWrapper variant="error" message={this.state.messagingError} /> }
<Card className={classes.card}>
<CardHeader title="2. Message" />
<CardHeader title="2. Find Available Relayers" />
<CardContent>
<TextField
id="signature"
label="Signed Message"
value={this.state.signature}
margin="normal"
fullWidth
InputProps={{
readOnly: true
}}
/>
<TextField
id="symKey"
label="Symmetric Key"
@ -317,8 +354,48 @@ class ApproveAndCallGasRelayed extends Component {
/>
</CardContent>
<CardActions>
<Button size="small" color="primary" onClick={this.sendMessage} disabled={this.state.submitting}>
Send Message
<Button size="small" color="primary" onClick={this.obtainRelayers} disabled={this.state.submitting}>
Send &quot;availability&quot; Message
</Button>
</CardActions>
</Card>
<Card className={classes.card}>
<CardHeader title="3. Generate Transaction" />
<CardContent>
<TextField
id="relayer"
label="Relayer"
value={this.state.relayer}
onChange={this.handleChange('relayer')}
margin="normal"
fullWidth
select
SelectProps={{
native: true
}}
>
{
this.props.relayers.length > 0 ?
this.props.relayers.map((r, i) => <option key={i} value={r}>Relayer #{i+1}: {r}</option>)
:
<option></option>
}
</TextField>
<TextField
id="signature"
label="Signed Message"
value={this.state.signature}
margin="normal"
fullWidth
InputProps={{
readOnly: true
}}
/>
</CardContent>
<CardActions>
<Button size="small" color="primary" onClick={this.sendTransaction} disabled={this.state.submitting}>
Send &quot;transaction&quot; Message
</Button>
</CardActions>
</Card>
@ -334,7 +411,8 @@ ApproveAndCallGasRelayed.propTypes = {
web3: PropTypes.object,
kid: PropTypes.string,
skid: PropTypes.string,
clearMessages: PropTypes.func
clearMessages: PropTypes.func,
relayers: PropTypes.array.isRequired
};
export default withStyles(styles)(ApproveAndCallGasRelayed);

2
test-dapp/app/components/body-sntcontroller.js
View File

@ -113,7 +113,7 @@ class Body extends Component {
<Tab label="Execute" />
</Tabs>
{tab === 0 && <Container><TransferSNT clearMessages={this.clearMessages} web3={web3js} kid={kid} skid={skid} nonce={nonce} relayers={relayers} /></Container>}
{tab === 1 && <Container><Execute clearMessage={this.clearMessages} web3={web3js} kid={kid} skid={skid} nonce={nonce} relayers={relayers} /></Container>}
{tab === 1 && <Container><Execute clearMessages={this.clearMessages} web3={web3js} kid={kid} skid={skid} nonce={nonce} relayers={relayers} /></Container>}
<Divider />
<Container>
<Status message={message} nonceUpdateFunction={this.updateNonce} nonce={nonce} walletAddress={walletAddress} />

117
test-dapp/app/components/callgasrelayed.js
View File

@ -45,6 +45,7 @@ class CallGasRelayed extends Component {
payload: '',
message: '',
web3js: null,
relayer: '',
transactionError: '',
messagingError: '',
submitting: false
@ -97,7 +98,7 @@ class CallGasRelayed extends Component {
}
}
sendMessage = event => {
obtainRelayers = event => {
event.preventDefault();
const {web3, kid, skid} = this.props;
@ -108,6 +109,50 @@ class CallGasRelayed extends Component {
});
this.props.clearMessages();
try {
const sendOptions = {
ttl: 1000,
sig: kid,
powTarget: 1,
powTime: 20,
topic: this.state.topic,
symKeyID: skid,
payload: web3.utils.toHex({
'contract': this.props.identityAddress,
'address': web3.eth.defaultAccount,
'action': 'availability',
'token': this.state.gasToken,
'gasPrice': this.state.gasPrice
})
};
web3.shh.post(sendOptions)
.then(() => {
this.setState({submitting: false});
console.log("Message sent");
return true;
});
} catch(error){
this.setState({messagingError: error.message, submitting: false});
}
}
sendTransaction = event => {
event.preventDefault();
const {web3, kid} = this.props;
let relayer = this.state.relayer;
if(relayer == '' && this.props.relayers.length == 1){
relayer = this.props.relayers[0];
}
this.setState({
messagingError: '',
submitting: true
});
this.props.clearMessages();
try {
let jsonAbi = IdentityGasRelay._jsonInterface.filter(x => x.name == "callGasRelayed")[0];
let funCall = web3.eth.abi.encodeFunctionCall(jsonAbi, [
@ -126,14 +171,15 @@ class CallGasRelayed extends Component {
powTarget: 1,
powTime: 20,
topic: this.state.topic,
symKeyID: skid,
pubKey: relayer,
payload: web3.utils.toHex({
'contract': this.props.identityAddress,
'encodedFunctionCall': funCall,
'address': web3.eth.defaultAccount
'address': web3.eth.defaultAccount,
'action': 'transaction',
'encodedFunctionCall': funCall
})
};
web3.shh.post(sendOptions)
.then(() => {
this.setState({submitting: false});
@ -266,19 +312,10 @@ class CallGasRelayed extends Component {
</Card>
{ this.state.messagingError && <MySnackbarContentWrapper variant="error" message={this.state.messagingError} /> }
<Card className={classes.card}>
<CardHeader title="2. Message" />
<CardHeader title="2. Find Available Relayers" />
<CardContent>
<TextField
id="signature"
label="Signed Message"
value={this.state.signature}
margin="normal"
fullWidth
InputProps={{
readOnly: true
}}
/>
<TextField
id="symKey"
label="Symmetric Key"
@ -300,8 +337,49 @@ class CallGasRelayed extends Component {
/>
</CardContent>
<CardActions>
<Button size="small" color="primary" onClick={this.sendMessage} disabled={this.state.submitting}>
Send Message
<Button size="small" color="primary" onClick={this.obtainRelayers} disabled={this.state.submitting}>
Send &quot;availability&quot; Message
</Button>
</CardActions>
</Card>
<Card className={classes.card}>
<CardHeader title="3. Generate Transaction" />
<CardContent>
<TextField
id="relayer"
label="Relayer"
value={this.state.relayer}
onChange={this.handleChange('relayer')}
margin="normal"
fullWidth
select
SelectProps={{
native: true
}}
>
{
this.props.relayers.length > 0 ?
this.props.relayers.map((r, i) => <option key={i} value={r}>Relayer #{i+1}: {r}</option>)
:
<option></option>
}
</TextField>
<TextField
id="signature"
label="Signed Message"
value={this.state.signature}
margin="normal"
fullWidth
InputProps={{
readOnly: true
}}
/>
</CardContent>
<CardActions>
<Button size="small" color="primary" onClick={this.sendTransaction} disabled={this.state.submitting}>
Send &quot;transaction&quot; Message
</Button>
</CardActions>
</Card>
@ -316,7 +394,8 @@ CallGasRelayed.propTypes = {
web3: PropTypes.object,
kid: PropTypes.string,
skid: PropTypes.string,
clearMessages: PropTypes.func
clearMessages: PropTypes.func,
relayers: PropTypes.array.isRequired
};
export default withStyles(styles)(CallGasRelayed);

114
test-dapp/app/components/execute.js
View File

@ -41,6 +41,7 @@ class Execute extends Component {
msgSent: '',
payload: '',
message: '',
relayer: '',
web3js: null,
transactionError: '',
messagingError: '',
@ -99,11 +100,60 @@ class Execute extends Component {
TestContract.methods.val().call().then(value => console.log({message: "TestContract.val(): " + value}));
}
sendMessage = async event => {
obtainRelayers = async event => {
event.preventDefault();
const {web3, kid, skid} = this.props;
this.setState({
messagingError: '',
submitting: true
});
this.props.clearMessages();
const accounts = await web3.eth.getAccounts();
try {
const sendOptions = {
ttl: 1000,
sig: kid,
powTarget: 1,
powTime: 20,
topic: this.state.topic,
symKeyID: skid,
payload: web3.utils.toHex({
'contract': SNTController.options.address,
'address': accounts[2],
'action': 'availability',
'token': STT.options.address,
'gasPrice': this.state.gasPrice
})
};
web3.shh.post(sendOptions)
.then(() => {
this.setState({submitting: false});
console.log("Message sent");
return true;
});
} catch(error){
this.setState({messagingError: error.message, submitting: false});
}
}
sendTransaction = async event => {
event.preventDefault();
const {web3, kid} = this.props;
let relayer = this.state.relayer;
if(relayer == '' && this.props.relayers.length == 1){
relayer = this.props.relayers[0];
}
this.setState({
messagingError: '',
submitting: true
@ -129,10 +179,11 @@ class Execute extends Component {
powTarget: 1,
powTime: 20,
topic: this.state.topic,
symKeyID: skid,
pubKey: relayer,
payload: web3.utils.toHex({
'contract': SNTController.options.address,
'address': accounts[2],
'action': 'transaction',
'encodedFunctionCall': funCall
})
};
@ -228,19 +279,10 @@ class Execute extends Component {
</Card>
{ this.state.messagingError && <MySnackbarContentWrapper variant="error" message={this.state.messagingError} /> }
<Card className={classes.card}>
<CardHeader title="2. Message" />
<CardHeader title="2. Find Available Relayers" />
<CardContent>
<TextField
id="signature"
label="Signed Message"
value={this.state.signature}
margin="normal"
fullWidth
InputProps={{
readOnly: true
}}
/>
<TextField
id="symKey"
label="Symmetric Key"
@ -262,8 +304,47 @@ class Execute extends Component {
/>
</CardContent>
<CardActions>
<Button size="small" color="primary" onClick={this.sendMessage} disabled={this.state.submitting}>
Send Message
<Button size="small" color="primary" onClick={this.obtainRelayers} disabled={this.state.submitting}>
Send &quot;availability&quot; Message
</Button>
</CardActions>
</Card>
<Card className={classes.card}>
<CardHeader title="3. Generate Transaction" />
<CardContent>
<TextField
id="relayer"
label="Relayer"
value={this.state.relayer}
onChange={this.handleChange('relayer')}
margin="normal"
fullWidth
select
SelectProps={{
native: true
}}
>
{
this.props.relayers.length > 0 ?
this.props.relayers.map((r, i) => <option key={i} value={r}>Relayer #{i+1}: {r}</option>)
:
<option></option>
}
</TextField>
<TextField
id="signature"
label="Signed Message"
value={this.state.signature}
margin="normal"
fullWidth
InputProps={{
readOnly: true
}}
/>
</CardContent>
<CardActions>
<Button size="small" color="primary" onClick={this.sendTransaction} disabled={this.state.submitting}>
Send &quot;transaction&quot; Message
</Button>
</CardActions>
</Card>
@ -278,7 +359,8 @@ Execute.propTypes = {
web3: PropTypes.object,
kid: PropTypes.string,
skid: PropTypes.string,
clearMessages: PropTypes.func
clearMessages: PropTypes.func,
relayers: PropTypes.array.isRequired
};
export default withStyles(styles)(Execute);

113
test-dapp/app/components/transfersnt.js
View File

@ -41,6 +41,7 @@ class TransferSNT extends Component {
msgSent: '',
payload: '',
message: '',
relayer: '',
web3js: null,
transactionError: '',
messagingError: '',
@ -97,11 +98,57 @@ class TransferSNT extends Component {
}
}
sendMessage = async event => {
obtainRelayers = async event => {
event.preventDefault();
const {web3, kid, skid} = this.props;
this.setState({
messagingError: '',
submitting: true
});
this.props.clearMessages();
const accounts = await web3.eth.getAccounts();
try {
const sendOptions = {
ttl: 1000,
sig: kid,
powTarget: 1,
powTime: 20,
topic: this.state.topic,
symKeyID: skid,
payload: web3.utils.toHex({
'contract': SNTController.options.address,
'address': accounts[2],
'action': 'availability',
'token': this.state.gasToken,
'gasPrice': this.state.gasPrice
})
};
web3.shh.post(sendOptions)
.then(() => {
this.setState({submitting: false});
console.log("Message sent");
return true;
});
} catch(error){
this.setState({messagingError: error.message, submitting: false});
}
}
sendTransaction = async event => {
event.preventDefault();
const {web3, kid} = this.props;
let relayer = this.state.relayer;
if(relayer == '' && this.props.relayers.length == 1){
relayer = this.props.relayers[0];
}
this.setState({
messagingError: '',
submitting: true
@ -126,10 +173,11 @@ class TransferSNT extends Component {
powTarget: 1,
powTime: 20,
topic: this.state.topic,
symKeyID: skid,
pubKey: relayer,
payload: web3.utils.toHex({
'contract': SNTController.options.address,
'address': accounts[2],
'action': 'transaction',
'encodedFunctionCall': funCall
})
};
@ -214,19 +262,10 @@ class TransferSNT extends Component {
</Card>
{ this.state.messagingError && <MySnackbarContentWrapper variant="error" message={this.state.messagingError} /> }
<Card className={classes.card}>
<CardHeader title="2. Message" />
<CardHeader title="2. Find Available Relayers" />
<CardContent>
<TextField
id="signature"
label="Signed Message"
value={this.state.signature}
margin="normal"
fullWidth
InputProps={{
readOnly: true
}}
/>
<TextField
id="symKey"
label="Symmetric Key"
@ -248,8 +287,49 @@ class TransferSNT extends Component {
/>
</CardContent>
<CardActions>
<Button size="small" color="primary" onClick={this.sendMessage} disabled={this.state.submitting}>
Send Message
<Button size="small" color="primary" onClick={this.obtainRelayers} disabled={this.state.submitting}>
Send &quot;availability&quot; Message
</Button>
</CardActions>
</Card>
<Card className={classes.card}>
<CardHeader title="3. Generate Transaction" />
<CardContent>
<TextField
id="relayer"
label="Relayer"
value={this.state.relayer}
onChange={this.handleChange('relayer')}
margin="normal"
fullWidth
select
SelectProps={{
native: true
}}
>
{
this.props.relayers.length > 0 ?
this.props.relayers.map((r, i) => <option key={i} value={r}>Relayer #{i+1}: {r}</option>)
:
<option></option>
}
</TextField>
<TextField
id="signature"
label="Signed Message"
value={this.state.signature}
margin="normal"
fullWidth
InputProps={{
readOnly: true
}}
/>
</CardContent>
<CardActions>
<Button size="small" color="primary" onClick={this.sendTransaction} disabled={this.state.submitting}>
Send &quot;transaction&quot; Message
</Button>
</CardActions>
</Card>
@ -264,7 +344,8 @@ TransferSNT.propTypes = {
web3: PropTypes.object,
kid: PropTypes.string,
skid: PropTypes.string,
clearMessages: PropTypes.func
clearMessages: PropTypes.func,
relayers: PropTypes.array.isRequired
};
export default withStyles(styles)(TransferSNT);