Merge pull request #870 from swarmcity/Cancel

Cancel

src/data/data-simpledeal.html

@@ -30,7 +30,7 @@
             console.log('item metadata: ', metadataHash)
             // const itemBudgetWei = _web3.utils.toWei(String(item.budget), 'ether')
             const itemBudgetWei = item.budget * 1e18;
-            const totalSum = parseInt(itemBudgetWei) + parseInt(hashtag.fee / 2);   
+            const totalSum = parseInt(itemBudgetWei) + parseInt(hashtag.fee / 2);
 
             // generate the itemHash
             const itemHash = hdWallet.createItem(seeker.privateKey);
@@ -74,8 +74,8 @@
         async function createNewReplyAsync({ replier, reply, hashtag }) {
 
             // const hashArray = hdWallet.util.toUint8Array(reply.itemHash);
-            
-            
+
+
             // Add the accessKey
             const accessKey = hdWallet.requestAccess(replier.privateKey, reply.itemHash);
             const storage = JSON.parse(localStorage.getItem('SwarmCity'));
@@ -195,7 +195,7 @@
             const rawPayoutItem = simpleDealContract.methods.payoutItem(
                 itemHash,
             ).encodeABI();
-            
+
             // 2. Get user's nonce
             const nonce = await _web3.eth.getTransactionCount(seeker.address);
 
@@ -247,12 +247,40 @@
             return hash
         }
 
+        async function cancelItemAsync({ seeker, itemHash, hashtagAddress }) {
+            // 1. Encode the raw cancelItem
+            const simpleDealContract = new _web3.eth.Contract(simpleDeal.abi, hashtagAddress);
+            const rawCancelItem = simpleDealContract.methods.cancelItem(
+                itemHash,
+            ).encodeABI();
+
+            // 2. Get user's nonce
+            const nonce = await _web3.eth.getTransactionCount(seeker.address);
+
+            // 3. Generate tx object, sign and serialize
+            const tx = new Tx({
+                nonce: _web3.utils.toHex(nonce),
+                from: seeker.address,
+                gasPrice: 1000000000,
+                gasLimit: 3000000,
+                to: hashtagAddress,
+                data: rawCancelItem,
+                chainId: 42,
+            });
+            tx.sign(new Buffer(seeker.privateKey, 'hex'));
+            const serializedTx = tx.serialize();
+
+            // 4. Send transaction, await receipt. 
+            // Extra line for clarity
+            const hash = await sendSignedTransaction('0x' + serializedTx.toString('hex'))
+            return hash
+        }
+
         function _toHex(dec) {
             let hex = Number(dec).toString(16);
             let result = '000000'.substr(0, 6 - hex.length) + hex;
             return '0x' + result;
         }
-
         function sendSignedTransaction(tx) {
             return new Promise((resolve, reject) => {
                 let _hash;
@@ -327,6 +355,13 @@
             disputeItem(args) {
                 return disputeItemAsync(args)
             }
+
+            /**
+             * Cancel
+             */
+            cancelItem(args) {
+                return cancelItemAsync(args)
+            }
         }
         window.customElements.define(DataSimpledeal.is, DataSimpledeal);
 

src/displays/display-show-keys.html

@@ -167,6 +167,7 @@
             @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
             only screen and (min--moz-device-pixel-ratio: 1.5),
             only screen and (min-resolution: 240dpi) {
+
                 .close,
                 .keybox[wide-layout] .close {
                     @apply --retina;
@@ -181,10 +182,10 @@
                 <template>
                     <div class="greylink" on-click="_togglePublicKey">{{localize('show my keys')}}</div>
                 </template>
-    </dom-if>
+            </dom-if>
 
-    <dom-if if="{{!toggleKeys}}">
-        <template>
+            <dom-if if="{{!toggleKeys}}">
+                <template>
                     <div class="txtbox">
                         <div class="subtitle">{{localize('Your address')}}</div>
                         <div class="key">{{publicKey}}</div>
@@ -195,25 +196,25 @@
                             <div class="privbtn" on-click="_togglePrivateKey">{{localize('show private key')}}</div>
                         </template>
 
-        <dom-if if="{{togglePrivateKey}}">
-            <template>
+                        <dom-if if="{{togglePrivateKey}}">
+                            <template>
                                 <div class="subtitle extramargin">{{localize('Your private key')}}</div>
                                 <div class="key">{{privateKey}}</div>
                                 <div class="copiedpriv" id="copiedpriv">{{localize('copied')}}</div>
                                 <div class="bluelink" on-click="_copyPrivateKey">{{localize('copy private key')}}</div>
                             </template>
-        </dom-if>
+                        </dom-if>
 
+                    </div>
+                    <div class="close" on-click="_close"></div>
+                </template>
+            </dom-if>
         </div>
-        <div class="close" on-click="_close"></div>
-        </template>
-    </dom-if>
-    </div>
     </template>
     <script>
         class DisplayShowKeys extends new ReduxMixin(Polymer.mixinBehaviors([
-                Polymer.AppLocalizeBehavior,
-            ],
+            Polymer.AppLocalizeBehavior,
+        ],
             Polymer.Element
         )) {
             static get is() {
@@ -287,13 +288,13 @@
                 };
             }
             connectedCallback() {
-                    super.connectedCallback();
-                    this.loadResources(this.resolveUrl('../text-translations.json'));
-                    this._loadAnimations();
-                }
-                /**
-                 * All animations this page needs
-                 */
+                super.connectedCallback();
+                this.loadResources(this.resolveUrl('../text-translations.json'));
+                this._loadAnimations();
+            }
+            /**
+             * All animations this page needs
+             */
             _loadAnimations() {
                 this.anim = {
                     moveUp: {
@@ -305,26 +306,27 @@
                             direction: 'normal',
                             easing: 'cubic-bezier(0.42, 0, 0.177, 0.751)',
                         },
-                    };
+                    }
                 }
-                /**
-                 * copies the public key to the clipboard
-                 */
+            }
+            /**
+             * copies the public key to the clipboard
+             */
             _copyPublicKey() {
-                    this._copyToClipboard(this.publicKey);
-                    let copied = this.shadowRoot.querySelector('#copied');
-                    copied.classList.add('showcopied');
-                    copied.animate(
-                        this.anim.moveUp.arr,
-                        this.anim.moveUp.obj
-                    );
-                    setTimeout(() => {
-                        copied.classList.remove('showcopied');
-                    }, 500);
-                }
-                /**
-                 * copies the private key to the clipboard
-                 */
+                this._copyToClipboard(this.publicKey);
+                let copied = this.shadowRoot.querySelector('#copied');
+                copied.classList.add('showcopied');
+                copied.animate(
+                    this.anim.moveUp.arr,
+                    this.anim.moveUp.obj
+                );
+                setTimeout(() => {
+                    copied.classList.remove('showcopied');
+                }, 500);
+            }
+            /**
+             * copies the private key to the clipboard
+             */
             _copyPrivateKey() {
                 this._copyToClipboard(this.privateKey);
                 let copiedpriv = this.shadowRoot.querySelector('#copiedpriv');
@@ -357,53 +359,53 @@
             }
 
             _copyToClipboard(textToCopy) {
-                    if (!navigator.clipboard) {
-                        this._fallbackCopyTextToClipboard(textToCopy);
-                        return;
-                    }
-                    navigator.clipboard.writeText(textToCopy);
+                if (!navigator.clipboard) {
+                    this._fallbackCopyTextToClipboard(textToCopy);
+                    return;
                 }
-                /**
-                 * Toggles the visibility of the full Public Key
-                 */
+                navigator.clipboard.writeText(textToCopy);
+            }
+            /**
+             * Toggles the visibility of the full Public Key
+             */
             _togglePublicKey() {
+                this.$.keyBox.classList.toggle('opened');
+                this.toggleKeys = !this.toggleKeys;
+            }
+            /**
+             * toggles the keybox visibility
+             */
+            _close() {
+                if (!this.toggleKeys) {
                     this.$.keyBox.classList.toggle('opened');
                     this.toggleKeys = !this.toggleKeys;
-                }
-                /**
-                 * toggles the keybox visibility
-                 */
-            _close() {
-                    if (!this.toggleKeys) {
-                        this.$.keyBox.classList.toggle('opened');
-                        this.toggleKeys = !this.toggleKeys;
-                        this.privateKey = null;
-                    }
-                }
-                /**
-                 * resets the private key visibility when keybox closes
-                 */
-            _toggleKeys() {
-                    this.togglePrivateKey = false;
                     this.privateKey = null;
                 }
-                /**
-                 * Toggles the visibility of the full Private Key
-                 */
+            }
+            /**
+             * resets the private key visibility when keybox closes
+             */
+            _toggleKeys() {
+                this.togglePrivateKey = false;
+                this.privateKey = null;
+            }
+            /**
+             * Toggles the visibility of the full Private Key
+             */
             _togglePrivateKey() {
                 this.$.unlock._getPrivateKey()
-                .then(res => {
-                try {
-                    const { privateKey, address, publicKey } = res;
-                        if (!privateKey) {
-                        throw Error("Missing address");
+                    .then(res => {
+                        try {
+                            const { privateKey, address, publicKey } = res;
+                            if (!privateKey) {
+                                throw Error("Missing address");
+                            }
+                            this.privateKey = privateKey;
+                        } catch (e) {
+                            console.error("Error showing keys (catch block): ", e.stack);
                         }
-                        this.privateKey = privateKey;
-                    }   catch (e) {
-                        console.error("Error showing keys (catch block): ", e.stack);
-                    }
-                })
-                .catch(e)
+                    })
+                    .catch(e)
             }
             /**
             * Scrolls to show keys in viewport

src/pages/chat/chat-top.html

@@ -157,7 +157,7 @@
         this.dispatchEvent(new CustomEvent('close'));
       }
       _getProviderAvatar(item) {
-        return item && item.replies && item.replies[item.providerAddress].avatarHash
+        return item && item.replies && item.providerAddress && item.replies[item.providerAddress].avatarHash
       }
       _isConflict(item) {
         return item && item.status && item.status == '3';

src/pages/detail/detail-button-cancel.html

@@ -0,0 +1,84 @@
+<!--
+@license
+Copyright (c) 2018 Swarm City
+This code may only be used under the license found at https://github.com/swarmcity/license
+-->
+<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../../bower_components/app-localize-behavior/app-localize-behavior.html">
+<link rel="import" href="../../../bower_components/iron-media-query/iron-media-query.html">
+<!--
+
+Example:
+```
+<detail-button-cancel></detail-button-cancel>
+```
+
+### Styling
+
+Style the button with CSS as you would a normal DOM element.
+
+The following custom properties and mixins are available for styling:
+
+| Custom property | Description | Default |
+| --- | --- | --- |
+| `--detail-button-cancel` | Mixin applied to the deal button | `{}` |
+-->
+<dom-module id="detail-button-cancel">
+    <template>
+        <style include="shared-styles">
+            :host {
+                display: block;
+            }
+
+            .container {
+                max-width: 175px;
+                text-align: center;
+                margin: 40px auto;
+            }
+
+            .button {
+                @apply --text-button-small;
+                color: var(--sc-red);
+                cursor: pointer;
+                box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.35);
+                -webkit-box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.35);
+                -moz-box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.35);
+                -o-box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.35);
+            }
+
+            .container[wide-layout] .button {
+                box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.5);
+                -webkit-box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.5);
+                -moz-box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.5);
+                -o-box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.5);
+            }
+
+            .button:active {
+                @apply --button-active;
+            }
+        </style>
+        <iron-media-query query="(min-width: 600px)" query-matches="{{wide}}"></iron-media-query>
+        <div class="container" wide-layout$="{{wide}}">
+            <div class="button" on-tap="_cancel">
+                cancel this request
+            </div>
+        </div>
+
+    </template>
+    <script>
+        class MyDetailButtonCancel extends new ReduxMixin(Polymer.mixinBehaviors([
+            Polymer.AppLocalizeBehavior,
+        ],
+            Polymer.Element
+        )) {
+            static get is() {
+                return 'detail-button-cancel';
+            }
+            _cancel() {
+                this.dispatchEvent(new CustomEvent('cancel'));
+            }
+
+        }
+        window.customElements.define(MyDetailButtonCancel.is, MyDetailButtonCancel);
+    </script>
+</dom-module>