From 1d34ac0601d54555844c486e5b52fb57bbc4c791 Mon Sep 17 00:00:00 2001
From: Richard Ramos <info@richardramos.me>
Date: Fri, 24 Aug 2018 15:21:26 -0400
Subject: [PATCH] Updated the UI to request relayers

---
 .../components/approveandcallgasrelayed.js    | 114 ++++++++++++++---
 .../app/components/body-sntcontroller.js      |   2 +-
 test-dapp/app/components/callgasrelayed.js    | 117 +++++++++++++++---
 test-dapp/app/components/execute.js           | 114 ++++++++++++++---
 test-dapp/app/components/transfersnt.js       | 113 ++++++++++++++---
 5 files changed, 390 insertions(+), 70 deletions(-)

diff --git a/test-dapp/app/components/approveandcallgasrelayed.js b/test-dapp/app/components/approveandcallgasrelayed.js
index 0ef01f2..45adee8 100644
--- a/test-dapp/app/components/approveandcallgasrelayed.js
+++ b/test-dapp/app/components/approveandcallgasrelayed.js
@@ -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);
diff --git a/test-dapp/app/components/body-sntcontroller.js b/test-dapp/app/components/body-sntcontroller.js
index 5206d64..22352f1 100644
--- a/test-dapp/app/components/body-sntcontroller.js
+++ b/test-dapp/app/components/body-sntcontroller.js
@@ -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} />
diff --git a/test-dapp/app/components/callgasrelayed.js b/test-dapp/app/components/callgasrelayed.js
index efd11ba..a9f639a 100644
--- a/test-dapp/app/components/callgasrelayed.js
+++ b/test-dapp/app/components/callgasrelayed.js
@@ -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);
diff --git a/test-dapp/app/components/execute.js b/test-dapp/app/components/execute.js
index 87ca0b5..0dd50d6 100644
--- a/test-dapp/app/components/execute.js
+++ b/test-dapp/app/components/execute.js
@@ -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);
diff --git a/test-dapp/app/components/transfersnt.js b/test-dapp/app/components/transfersnt.js
index 9c91aa1..0b50550 100644
--- a/test-dapp/app/components/transfersnt.js
+++ b/test-dapp/app/components/transfersnt.js
@@ -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);