From ed2c308e51e66717f9cb4800a7c95a969970fc67 Mon Sep 17 00:00:00 2001
From: Xavier <xavier@n3x.co>
Date: Wed, 28 Nov 2018 18:44:05 -0800
Subject: [PATCH 01/13] Resolve WIP

---
 src/pages/detail/detail-button-conflict.html  |  2 +-
 .../detail/detail-simpledeal-conflict.html    | 34 +++++++++++++------
 src/pages/detail/detail-simpledeal.html       |  5 +--
 3 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/src/pages/detail/detail-button-conflict.html b/src/pages/detail/detail-button-conflict.html
index 57e0d2b5..9887d989 100644
--- a/src/pages/detail/detail-button-conflict.html
+++ b/src/pages/detail/detail-button-conflict.html
@@ -32,7 +32,7 @@
             .container {
                 max-width: 175px;
                 text-align: center;
-                margin: 0 auto;
+                margin: 40px auto;
             }
 
             .button {
diff --git a/src/pages/detail/detail-simpledeal-conflict.html b/src/pages/detail/detail-simpledeal-conflict.html
index 0593d0e9..4b89564a 100644
--- a/src/pages/detail/detail-simpledeal-conflict.html
+++ b/src/pages/detail/detail-simpledeal-conflict.html
@@ -104,6 +104,8 @@
             }
 
             .conflictbox {
+                @apply --layout-vertical;
+                @apply --layout-center;
                 box-sizing: border-box;
                 padding: 40px 25px 20px 25px;
                 background-color: var(--sc-white);
@@ -181,10 +183,12 @@
                 @apply --text-button-big;
                 @apply --body-bold;
                 margin: 20px 0 0 0;
-                color: var(--sc-white);
+                color: var(--sc-grey4);
                 width: 250px;
             }
 
+            
+
             .button:active {
                 @apply --button-active;
             }
@@ -243,16 +247,24 @@
                     <div class="chat-icon"></div>
                 </div>
                 <div class="center bold">This deal is <span class="red">in conflict</span>.</div>
-                <div class="center subtitle">The hashtagmaintainer is added to the chat</div>
-                <div class="maintainerbox">
-                    <div class="avatar">
-                        <iron-image sizing="cover" preload src="https://scapiweb3-c.swarm.city/img/[[maintainer.avatar]]"
-                            placeholder="../images/defaultavatar.png">
-                        </iron-image>
+                <template is="dom-if" if="[[_isMaintainer(maintainer.address, address)]]">
+                    <div class="center subtitle">You were added to the chat</div>
+                    <div class="button" on-tap="_resolve">
+                        resolve
                     </div>
-
-                    <div class$="{{_isMaintainer(maintainer.address, address)}}">[[maintainer.username]]</div>
-                </div>
+                </template>
+                <template is="dom-if" if="[[!_isMaintainer(maintainer.address, address)]]">
+                    <div class="center subtitle">The hashtagmaintainer is added to the chat</div>
+                    <div class="maintainerbox">
+                        <div class="avatar">
+                            <iron-image sizing="cover" preload src="https://scapiweb3-c.swarm.city/img/[[maintainer.avatar]]"
+                                placeholder="../images/defaultavatar.png">
+                            </iron-image>
+                        </div>
+
+                        <div class="replier">[[maintainer.username]]</div>
+                    </div>
+                </template>
             </div>
         </div>
     </template>
@@ -362,7 +374,7 @@
                 return status == '3' ? "conflictbox" : "conflictbox pending";
             }
             _isMaintainer(maintainerAddress, userAddress) {
-                return maintainerAddress == userAddress ? "replier" : "username";
+                return maintainerAddress == userAddress;
             }
         }
         window.customElements.define(
diff --git a/src/pages/detail/detail-simpledeal.html b/src/pages/detail/detail-simpledeal.html
index 2a6ae378..4eda335c 100644
--- a/src/pages/detail/detail-simpledeal.html
+++ b/src/pages/detail/detail-simpledeal.html
@@ -133,7 +133,7 @@
               maintainer="[[hashtag.metadata.maintainer]]" on-chat="_handleOnChat"></detail-simpledeal-conflict>
           </template>
 
-          <template is="dom-if" if="{{_showConflictButton(item)}}">
+          <template is="dom-if" if="{{_showConflictButton(item, status)}}">
             <detail-button-conflict on-tap="_conflict"></detail-button-conflict>
           </template>
 
@@ -317,9 +317,10 @@
         // )
       }
 
-      _showConflictButton(item) {
+      _showConflictButton(item, status) {
         if (
           (item && item.status && item.status == '1') &&
+          status != 'input conflict' &&
           ((item && item.seekerAddress && item.seekerAddress == this.address) || (
             item && item.providerAddress && item.providerAddress == this.address
           ))) {

From d4f40872d674354b46eeb565e57cd0e9e75f7829 Mon Sep 17 00:00:00 2001
From: Xavier <xavier@n3x.co>
Date: Thu, 29 Nov 2018 11:27:37 -0800
Subject: [PATCH 02/13] Display Backup fix

---
 src/displays/display-backup.html | 184 ++++++++++++++++---------------
 1 file changed, 93 insertions(+), 91 deletions(-)

diff --git a/src/displays/display-backup.html b/src/displays/display-backup.html
index 4e8632c0..3751cfbc 100644
--- a/src/displays/display-backup.html
+++ b/src/displays/display-backup.html
@@ -80,110 +80,110 @@
                     <div class="downloadbtn" on-click="_download">{{localize('download my file')}}</div>
                 </template>
 
-    </dom-if>
-    </div>
+            </dom-if>
+        </div>
     </template>
     <script>
         class MyDisplayBackup extends new ReduxMixin(Polymer.mixinBehaviors([
-                Polymer.AppLocalizeBehavior,
-            ],
+            Polymer.AppLocalizeBehavior,
+        ],
             Polymer.Element
         )) {
             static get is() {
                 return 'display-backup';
             }
             static get properties() {
-                    return {
-                        /**
-                         * Language is the user selected language
-                         * @type {String}
-                         */
-                        language: {
-                            type: String,
-                            statePath: 'language',
-                        },
-                        /**
-                         * Path is the current or requested path
-                         * @type {String}
-                         */
-                        path: {
-                            type: String,
-                            notify: true,
-                        },
-                        /**
-                         * toggles the unlock display
-                         * @type {Boolean}
-                         */
-                        toggleUnlock: {
-                            type: Boolean,
-                            notify: true,
-                        },
-                        /**
-                         * contains the qrCodePrivateKey
-                         * @type {String}
-                         */
-                        qrCodePrivateKey: {
-                            type: String,
-                            observer: '_print',
-                            notify: true,
-                        },
-                        /**
-                         * contains the qrCodePublicKey
-                         * @type {String}
-                         */
-                        qrCodePublicKey: {
-                            type: String,
-                            observer: '_print',
-                            notify: true,
-                        },
-                        /**
-                         * contains the private key
-                         * @type {String}
-                         */
-                        privateKey: {
-                            type: String,
-                            observer: '_print',
-                        },
-                        /**
-                         * contains the osType
-                         * @type {String}
-                         */
-                        osType: {
-                            type: String,
-                            notify: true,
-                        },
-                        showJsonButton: {
-                            type: Boolean,
-                            value: true,
-                        },
-                    };
-                }
-                /**
-                 * Fired when the component is connected
-                 */
+                return {
+                    /**
+                     * Language is the user selected language
+                     * @type {String}
+                     */
+                    language: {
+                        type: String,
+                        statePath: 'language',
+                    },
+                    /**
+                     * Path is the current or requested path
+                     * @type {String}
+                     */
+                    path: {
+                        type: String,
+                        notify: true,
+                    },
+                    /**
+                     * toggles the unlock display
+                     * @type {Boolean}
+                     */
+                    toggleUnlock: {
+                        type: Boolean,
+                        notify: true,
+                    },
+                    /**
+                     * contains the qrCodePrivateKey
+                     * @type {String}
+                     */
+                    qrCodePrivateKey: {
+                        type: String,
+                        observer: '_print',
+                        notify: true,
+                    },
+                    /**
+                     * contains the qrCodePublicKey
+                     * @type {String}
+                     */
+                    qrCodePublicKey: {
+                        type: String,
+                        observer: '_print',
+                        notify: true,
+                    },
+                    /**
+                     * contains the private key
+                     * @type {String}
+                     */
+                    privateKey: {
+                        type: String,
+                        observer: '_print',
+                    },
+                    /**
+                     * contains the osType
+                     * @type {String}
+                     */
+                    osType: {
+                        type: String,
+                        notify: true,
+                    },
+                    showJsonButton: {
+                        type: Boolean,
+                        value: true,
+                    },
+                };
+            }
+            /**
+             * Fired when the component is connected
+             */
             connectedCallback() {
-                    super.connectedCallback();
-                    this._isShowDownload();
-                    this.loadResources(this.resolveUrl('../text-translations.json'));
-                    let storage = JSON.parse(localStorage.getItem('SwarmCity'));
-                    this.publicKey = storage.keyStore.address;
-                }
-                /**
-                 * toggles the password unlock display
-                 */
+                super.connectedCallback();
+                this._isShowDownload();
+                this.loadResources(this.resolveUrl('../text-translations.json'));
+                let storage = JSON.parse(localStorage.getItem('SwarmCity'));
+                this.publicKey = storage.keyStore.address;
+            }
+            /**
+             * toggles the password unlock display
+             */
             _unlock() {
                 this.qrCodePublicKey = null;
                 this.qrCodePrivateKey = null;
                 this.$.unlock._getPrivateKey().then(res => {
-                try {
-                    const { privateKey, address, publicKey, qrCodePrivateKey, qrCodePublicKey } = res;
+                    try {
+                        const { privateKey, address, publicKey, qrCodePrivateKey, qrCodePublicKey } = res;
                         if (!privateKey) {
-                        throw Error("Missing address");
+                            throw Error("Missing address");
                         }
                         this.privateKey = privateKey;
                         this.qrCodePublicKey = qrCodePublicKey;
                         this.qrCodePrivateKey = qrCodePrivateKey;
-                    }   catch (e) {
+                    } catch (e) {
                         console.error("Error showing keys (catch block): ", e.stack);
                     }
                 });
@@ -298,9 +298,10 @@
                         }
                     }
                 }
-                /**
-                 * downloads account info, after success routs to download-success
-                 */
+            }
+            /**
+             * downloads account info, after success routs to download-success
+             */
             _download() {
                 let storage = JSON.parse(localStorage.getItem('SwarmCity'));
                 const filename = 'SwarmCity - UTC KeyStore';
@@ -321,9 +322,10 @@
                 } else {
                     this.path = 'download-success-profile/';
                 }
-                /**
-                 * check for operating system for enable/disable the download backup file link
-                 */
+            }
+            /**
+             * check for operating system for enable/disable the download backup file link
+             */
             _isShowDownload() {
                 let userAgent = window.navigator.userAgent;
                 let platform = window.navigator.platform;

From c13ec76d18fd04caaceff1cd2bf6b2b330762608 Mon Sep 17 00:00:00 2001
From: Xavier <xavier@n3x.co>
Date: Thu, 29 Nov 2018 11:37:52 -0800
Subject: [PATCH 03/13] Faucet limit

---
 src/redux/sagas/user-saga.html | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/redux/sagas/user-saga.html b/src/redux/sagas/user-saga.html
index 79a13b74..447cf9ae 100644
--- a/src/redux/sagas/user-saga.html
+++ b/src/redux/sagas/user-saga.html
@@ -22,6 +22,8 @@
         const getFirebaseApp = (state) => state.firebaseApp;
         const getUser = (state) => state.user;
 
+        let faucetCalled = false;
+
         /*
          * redux-saga worker functions
          */
@@ -197,11 +199,12 @@
             if (address && chain == 'kovan') {
                 const ethBalance = await web3s[chain].eth.getBalance(address);
 
-                if (ethBalance < 100000000000000000) {
+                if (ethBalance < 100000000000000000 && !faucetCalled) {
                     console.log('Asking faucet for a refill, ethbalance: ', ethBalance)
                     var xhr = new XMLHttpRequest();
                     xhr.open('GET', 'https://scapiweb3-c.swarm.city/faucet/' + address);
                     xhr.send(null);
+                    faucetCalled = true;
                 }
             }
 

From be079b5fd0b6b30f71376746651dac43f5e78228 Mon Sep 17 00:00:00 2001
From: Xavier <xavier@n3x.co>
Date: Thu, 29 Nov 2018 11:43:06 -0800
Subject: [PATCH 04/13] make backup fixes

---
 src/pages/page-make-backup.html | 61 ++++++++++++++-------------------
 1 file changed, 26 insertions(+), 35 deletions(-)

diff --git a/src/pages/page-make-backup.html b/src/pages/page-make-backup.html
index b7068bd4..a5b01e10 100644
--- a/src/pages/page-make-backup.html
+++ b/src/pages/page-make-backup.html
@@ -145,6 +145,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) {
+
                 .container .close,
                 .container .triangle {
                     @apply --retina;
@@ -162,18 +163,18 @@
                 </div>
                 <div class="box" id="content">
                     <div class="textbox">
-                        <div class="inner-top">{{localize('There are no central servers on which accounts are stored.')}}</div>
-                        <div class="inner-middle">{{localize('This means you are responsible for your own account at all times.')}}</div>
+                        <div class="inner-top">There are no central servers on which accounts are
+                            stored.</div>
+                        <div class="inner-middle">This means you are responsible for your own account at
+                            all times.</div>
                     </div>
                 </div>
             </div>
             <div class="bottom">
                 <div class="buttons" id="buttons">
-                    <display-backup
-                        path="{{path}}"
-                        route="[[route]]">
+                    <display-backup path="{{path}}" route="[[route]]">
                     </display-backup>
-                    
+
                 </div>
                 <div class="bluetext-margins" id="keys">
                     <span class="bluetext" on-click="_toKeys">{{localize('show my keys')}}</span>
@@ -185,8 +186,8 @@
 
     <script>
         class MyMakeBackup extends new ReduxMixin(Polymer.mixinBehaviors([
-                Polymer.AppLocalizeBehavior,
-            ],
+            Polymer.AppLocalizeBehavior,
+        ],
             Polymer.Element
         )) {
             static get is() {
@@ -210,14 +211,6 @@
                         type: String,
                         observer: '_path',
                     },
-                    /**
-                     * pageID is an id givven to every page specific
-                     * @type {String}
-                     */
-                    pageID: {
-                        type: String,
-                        value: 'make-backup',
-                    },
                 };
             }
             connectedCallback() {
@@ -229,28 +222,26 @@
              * takes the user to page-stop-signup
              */
             _close() {
-                    this.path = 'stop-signup/';
-                }
-                /**
-                 * changes the current path to hashtag-list
-                 */
+                this.path = 'stop-signup/';
+            }
+            /**
+             * changes the current path to hashtag-list
+             */
             _enter() {
-                    this.path = 'hashtag-list/';
-                }
-                /**
-                 * changes the current path to my-keys
-                 */
+                this.path = 'hashtag-list/';
+            }
+            /**
+             * changes the current path to my-keys
+             */
             _toKeys() {
-                    this.path = 'my-keys/';
-                }
-                /**
-                 * changes the current path
-                 */
+                this.path = 'my-keys/';
+            }
+            /**
+             * changes the current path
+             */
             _path() {
-                    if (this.path != null) {
-                        this.set('route.path', this.path);
-                    }
-                    this.path = null;
+                if (this.path != null) {
+                    this.set('route.path', this.path);
                 }
                 this.path = null;
             }

From 995ca0f998039490e79092e9dc26d287df531123 Mon Sep 17 00:00:00 2001
From: Xavier <xavier@n3x.co>
Date: Thu, 29 Nov 2018 16:41:07 -0800
Subject: [PATCH 05/13] Resolving mobile view

---
 .../detail-simpledeal-conflict-resolving.html | 214 ++++++++++++++++++
 .../detail/detail-simpledeal-conflict.html    |  29 ++-
 .../detail-simpledeal-reply-detail.html       |  33 ++-
 .../detail/detail-simpledeal-selected.html    |  30 ++-
 4 files changed, 294 insertions(+), 12 deletions(-)
 create mode 100644 src/pages/detail/detail-simpledeal-conflict-resolving.html

diff --git a/src/pages/detail/detail-simpledeal-conflict-resolving.html b/src/pages/detail/detail-simpledeal-conflict-resolving.html
new file mode 100644
index 00000000..afd8fd06
--- /dev/null
+++ b/src/pages/detail/detail-simpledeal-conflict-resolving.html
@@ -0,0 +1,214 @@
+<!--
+@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">
+<link rel="import" href="../../../bower_components/iron-image/iron-image.html">
+<link rel="import" href="../../../bower_components/paper-slider/paper-slider.html">
+
+<!--
+    Displays and shared styles only
+-->
+<link rel="import" href="../../displays/display-button-disagree.html">
+<link rel="import" href="../../displays/display-button-confirm.html">
+<!--
+
+Example:
+```
+<detail-simpledeal-conflict-resolving></detail-simpledeal-conflict-resolving>
+```
+
+### 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-simpledeal-conflict-resolving` | Mixin applied to the deal button | `{}` |
+-->
+<dom-module id="detail-simpledeal-conflict-resolving">
+    <template>
+        <style include="shared-styles">
+            :host {
+                display: block;
+            }
+
+            .container {
+                width: 100%;
+            }
+
+            iron-image {
+                height: 40px;
+                width: 40px;
+                border-radius: 50%;
+                min-height: 24px;
+                min-width: 24px;
+            }
+
+            .proportionbox {
+                @apply --layout-vertical;
+                @apply --layout-center-center;
+                box-sizing: border-box;
+                margin: 30px 0;
+            }
+
+            .userbox {
+                @apply --layout-vertical;
+                @apply --layout-center-center;
+                box-sizing: border-box;
+                text-align: center
+            }
+
+            .flex {
+                @apply --layout-flex;
+            }
+
+            .percentage {
+                color: var(--sc-green);
+                @apply --body-bold;
+            }
+
+            .amount {
+                color: var(--sc-yellow);
+                @apply --body-bold;
+
+            }
+
+            .horizontal {
+                @apply --layout-horizontal;
+                width: 100%;
+            }
+
+            .sliderbox {
+                @apply --layout-start
+            }
+
+            paper-slider {
+                --paper-slider-knob-color: var(--sc-green);
+                --paper-slider-knob-start-color:  var(--sc-green);
+                --paper-slider-knob-start-border-color:  var(--sc-green);
+                --paper-slider-active-color: rgba(189, 189, 189, 1);
+                width: 100%;
+                margin-top: 5px;
+                box-sizing: border-box;
+            }
+
+            .name {
+                color: var(--sc-blue);
+                @apply --small-bold;
+                margin-top: 5px;
+            }
+
+            .reputation {
+                color: var(--sc-blue);
+                @apply --small-bold;
+            }
+
+            .choice {
+                @apply --layout-horizontal;
+                @apply --layout-center-center;
+                padding: 20px 0 30px 0 ;
+            }
+
+            @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) {
+                .chat-icon {
+                    @apply --retina;
+                }
+            }
+        </style>
+        <iron-media-query query="(min-width: 600px)" query-matches="{{wide}}"></iron-media-query>
+        <div class="container" wide-layout$="{{wide}}">
+            <div class="horizontal">
+                <div class="proportionbox">
+                    <div class="percentage">
+                        [[_showPerc(percSeeker)]]%</div>
+                    <div class="amount">
+                        [[_calcAmount(percSeeker)]] SWT
+                    </div>
+                </div>
+                <div class="flex"></div>
+                <div class="proportionbox">
+                    <div class="percentage">
+                        [[_showPerc(percProvider)]]%
+                    </div>
+                    <div class="amount">
+                        [[_calcAmount(percProvider)]] SWT
+                    </div>
+                </div>
+            </div>
+            <div class="sliderbox horizontal">
+                <div class="userbox">
+                    <iron-image sizing="cover" preload src="https://scapiweb3-c.swarm.city/img/[[item.seekerAvatarHash]]"
+                        placeholder="../images/defaultavatar.png">
+                    </iron-image>
+                    <div class="name">[[item.seekerUsername]]</div>
+                    <div class="reputation">[[item.seekerRep]] SWR</div>
+                </div>
+                <paper-slider min="0" max="1" step="0.01" value="{{percProvider}}" immediate-value="{{percProvider}}" expand></paper-slider>
+                <div class="userbox">
+                    <iron-image sizing="cover" preload src="https://scapiweb3-c.swarm.city/img/[[reply.avatarHash]]"
+                        placeholder="../images/defaultavatar.png">
+                    </iron-image>
+                    <div class="name">[[reply.username]]</div>
+                    <div class="reputation">[[reply.providerRep]] SWR</div>
+                </div>
+            </div>
+            <div class="choice">
+                <display-button-disagree on-tap="_disagree"></display-button-disagree>
+                <display-button-confirm on-tap="_agree"></display-button-confirm>
+            </div>
+        </div>
+    </template>
+    <script>
+        class MyDetailSimpledealConflictResolving extends new ReduxMixin(Polymer.mixinBehaviors([
+            Polymer.AppLocalizeBehavior,
+        ],
+            Polymer.Element
+        )) {
+            static get is() {
+                return 'detail-simpledeal-conflict-resolving';
+            }
+            static get properties() {
+                return {
+                    item: Object,
+                    reply: Object,
+                    percSeeker: {
+                        type: Number,
+                        computed: '_computePerc(percProvider)',
+                    },
+                    percProvider: {
+                        type: Number,
+                        value: '0.5',
+                    }
+                };
+            }
+            _computePerc(perc) {
+                return 1 - perc;
+            }
+            _showPerc(fraction) {
+                return (fraction * 100).toFixed(0);
+            }
+            _calcAmount(perc) {
+                return ((this.item.itemValue * perc) / 1e18).toFixed(2);
+            }
+            _agree() {
+                console.log('resolving! Seeker gets: ' + (this.percSeeker * this.item.itemValue) / 1e18
+                    + ' SWT (' + this.percSeeker * 100 + '%) and provider gets: ' + (this.percProvider * this.item.itemValue) / 1e18 + ' SWT (' + this.percProvider * 100 + '%)')
+            }
+            _disagree() {
+                this.dispatchEvent(new CustomEvent('close'));
+            }
+        }
+        window.customElements.define(
+            MyDetailSimpledealConflictResolving.is,
+            MyDetailSimpledealConflictResolving
+        );
+    </script>
+</dom-module>
\ No newline at end of file
diff --git a/src/pages/detail/detail-simpledeal-conflict.html b/src/pages/detail/detail-simpledeal-conflict.html
index 4b89564a..c9a3b4d3 100644
--- a/src/pages/detail/detail-simpledeal-conflict.html
+++ b/src/pages/detail/detail-simpledeal-conflict.html
@@ -13,6 +13,7 @@
 -->
 <link rel="import" href="../../displays/display-button-disagree.html">
 <link rel="import" href="../../displays/display-button-confirm.html">
+<link rel="import" href="./detail-simpledeal-conflict-resolving.html">
 <!--
 
 Example:
@@ -182,12 +183,12 @@
             .button {
                 @apply --text-button-big;
                 @apply --body-bold;
-                margin: 20px 0 0 0;
+                margin: 50px 0 20px 0;
                 color: var(--sc-grey4);
                 width: 250px;
             }
 
-            
+
 
             .button:active {
                 @apply --button-active;
@@ -209,6 +210,11 @@
                 opacity: 0.5;
             }
 
+            detail-simpledeal-conflict-resolving {
+                width: 100%;
+                box-sizing: border-box;
+            }
+
             @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) {
@@ -249,9 +255,15 @@
                 <div class="center bold">This deal is <span class="red">in conflict</span>.</div>
                 <template is="dom-if" if="[[_isMaintainer(maintainer.address, address)]]">
                     <div class="center subtitle">You were added to the chat</div>
-                    <div class="button" on-tap="_resolve">
-                        resolve
-                    </div>
+
+                    <template is="dom-if" if="[[!resolving]]">
+                        <div class="button" on-tap="_resolve">
+                            resolve
+                        </div>
+                    </template>
+                    <template is="dom-if" if="[[resolving]]">
+                        <detail-simpledeal-conflict-resolving item="[[item]]" reply="[[reply]]" on-close="_resolve"></detail-simpledeal-conflict-resolving>
+                    </template>
                 </template>
                 <template is="dom-if" if="[[!_isMaintainer(maintainer.address, address)]]">
                     <div class="center subtitle">The hashtagmaintainer is added to the chat</div>
@@ -283,6 +295,10 @@
                     reply: Object,
                     address: String,
                     maintainer: Object,
+                    resolving: {
+                        type: Boolean,
+                        value: false,
+                    },
                 };
             }
             /**
@@ -376,6 +392,9 @@
             _isMaintainer(maintainerAddress, userAddress) {
                 return maintainerAddress == userAddress;
             }
+            _resolve() {
+                this.resolving = !this.resolving;
+            }
         }
         window.customElements.define(
             MyDetailSimpledealConflict.is,
diff --git a/src/pages/detail/detail-simpledeal-reply-detail.html b/src/pages/detail/detail-simpledeal-reply-detail.html
index 285add8a..04576942 100644
--- a/src/pages/detail/detail-simpledeal-reply-detail.html
+++ b/src/pages/detail/detail-simpledeal-reply-detail.html
@@ -52,6 +52,10 @@
                 @apply --layout-flex;
                 @apply --body-default;
                 color: var(--sc-grey4);
+                -webkit-user-select: text;
+                -moz-user-select: text;
+                -ms-user-select: text;
+                user-select: text;
             }
 
             .price {
@@ -92,10 +96,30 @@
                 margin: 40px 0;
             }
 
-            .button:active{
+            .button:active {
                 @apply --button-active;
             }
 
+            .dont-break-out {
+
+                /* These are technically the same, but use both */
+                overflow-wrap: break-word;
+                word-wrap: break-word;
+
+                -ms-word-break: break-all;
+                /* This is the dangerous one in WebKit, as it breaks things wherever */
+                word-break: break-all;
+                /* Instead use this non-standard one: */
+                word-break: break-word;
+
+                /* Adds a hyphen where the word breaks, if supported (No Blink) */
+                -ms-hyphens: auto;
+                -moz-hyphens: auto;
+                -webkit-hyphens: auto;
+                hyphens: auto;
+
+            }
+
             @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) {
@@ -110,7 +134,7 @@
                 <div class="back-icon"></div>
             </div>
             <div class="descriptionbox">
-                <div class="description">[[replyDetail.message]]</div>
+                <div class="description dont-break-out">[[replyDetail.message]]</div>
                 <div class="price">for [[_formatValue(item.itemValue)]] SWT</div>
             </div>
             <div class="date">
@@ -118,7 +142,8 @@
             </div>
             <div class="providerbox" on-tap="_toUserReputation">
                 <div class="avatar">
-                    <iron-image sizing="cover" preload   src="https://scapiweb3-c.swarm.city/img/[[replyDetail.avatarHash]]" placeholder="../images/defaultavatar.png">
+                    <iron-image sizing="cover" preload src="https://scapiweb3-c.swarm.city/img/[[replyDetail.avatarHash]]"
+                        placeholder="../images/defaultavatar.png">
                     </iron-image>
                 </div>
                 <div class="username">[[replyDetail.username]] · [[replyDetail.providerRep]] SWR</div>
@@ -126,7 +151,7 @@
             <div class="buttonbox">
                 <div class="button" on-tap="_selectProvider">
                     Select [[replyDetail.username]]
-                </div>            
+                </div>
             </div>
         </div>
     </template>
diff --git a/src/pages/detail/detail-simpledeal-selected.html b/src/pages/detail/detail-simpledeal-selected.html
index 9bfbff81..213be12b 100644
--- a/src/pages/detail/detail-simpledeal-selected.html
+++ b/src/pages/detail/detail-simpledeal-selected.html
@@ -38,6 +38,10 @@
                 @apply --layout-flex;
                 @apply --body-default;
                 color: var(--sc-grey4);
+                -webkit-user-select: text;
+                -moz-user-select: text;
+                -ms-user-select: text;
+                user-select: text;
             }
 
             .price {
@@ -149,6 +153,26 @@
                 opacity: 0.5;
             }
 
+            .dont-break-out {
+
+                /* These are technically the same, but use both */
+                overflow-wrap: break-word;
+                word-wrap: break-word;
+
+                -ms-word-break: break-all;
+                /* This is the dangerous one in WebKit, as it breaks things wherever */
+                word-break: break-all;
+                /* Instead use this non-standard one: */
+                word-break: break-word;
+
+                /* Adds a hyphen where the word breaks, if supported (No Blink) */
+                -ms-hyphens: auto;
+                -moz-hyphens: auto;
+                -webkit-hyphens: auto;
+                hyphens: auto;
+
+            }
+
             .container[wide-layout] #error {
                 @apply --error-msg-wide;
                 margin: 30px 0px 0px 0px;
@@ -158,7 +182,7 @@
         <div class="container" wide-layout$="{{wide}}">
             <div class="whitebox">
                 <div class="descriptionbox">
-                    <div class="description">[[reply.message]]</div>
+                    <div class="description dont-break-out">[[reply.message]]</div>
                     <div class="price">for [[_formatValue(item.itemValue)]] SWT</div>
                 </div>
                 <div class="date">
@@ -182,7 +206,7 @@
                 </div>
             </div>
             <div class$="{{_checkPending(item.status)}}">
-            <!-- <div class="bluebox pending"> -->
+                <!-- <div class="bluebox pending"> -->
                 <template is="dom-if" if="[[_isReplier(reply.replierAddress, address)]]">
                     <div class="white-text">[[item.seekerUsername]] selected you to make a deal. Do you accept?</div>
                     <template is="dom-if" if="{{showError}}">
@@ -309,7 +333,7 @@
                 }
             }
             _checkPending(status) {
-                return status == '0'? "bluebox" : "bluebox pending";
+                return status == '0' ? "bluebox" : "bluebox pending";
             }
         }
         window.customElements.define(

From a31d3915a34cd7f0d6cba5d196b1dd44889f346c Mon Sep 17 00:00:00 2001
From: Xavier <xavier@n3x.co>
Date: Thu, 29 Nov 2018 17:07:14 -0800
Subject: [PATCH 06/13] In data-simpledeal

---
 src/data/data-simpledeal.html                 | 40 +++++++++++++++++
 .../detail-simpledeal-conflict-resolving.html | 11 +++--
 .../detail/detail-simpledeal-conflict.html    |  6 ++-
 src/pages/detail/detail-simpledeal.html       | 43 ++++++++++++++++++-
 4 files changed, 93 insertions(+), 7 deletions(-)

diff --git a/src/data/data-simpledeal.html b/src/data/data-simpledeal.html
index 79f98e35..eee5afb6 100644
--- a/src/data/data-simpledeal.html
+++ b/src/data/data-simpledeal.html
@@ -247,6 +247,39 @@
             return hash
         }
 
+        async function resolveItemAsync({ maintainer, item, hashtagAddress, seekerPercentage }) {
+            const seekerFraction = item.value * seekerPercentage;
+            console.log(seekerFraction);
+
+            // 1. Encode the raw resolveItem
+            const simpleDealContract = new _web3.eth.Contract(simpleDeal.abi, hashtagAddress);
+            const rawResolveItem = simpleDealContract.methods.resolveItem(
+                item.hash,
+                seekerFraction,
+            ).encodeABI();
+
+            // 2. Get user's nonce
+            const nonce = await _web3.eth.getTransactionCount(maintainer.address);
+
+            // 3. Generate tx object, sign and serialize
+            const tx = new Tx({
+                nonce: _web3.utils.toHex(nonce),
+                from: maintainer.address,
+                gasPrice: 1000000000,
+                gasLimit: 3000000,
+                to: hashtagAddress,
+                data: rawResolveItem,
+                chainId: 42,
+            });
+            tx.sign(new Buffer(maintainer.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
+        }
+
         async function cancelItemAsync({ seeker, itemHash, hashtagAddress }) {
             // 1. Encode the raw cancelItem
             const simpleDealContract = new _web3.eth.Contract(simpleDeal.abi, hashtagAddress);
@@ -356,6 +389,13 @@
                 return disputeItemAsync(args)
             }
 
+            /**
+             * Resolve
+             */
+            resolveItem(args) {
+                return resolveItemAsync(args)
+            }
+
             /**
              * Cancel
              */
diff --git a/src/pages/detail/detail-simpledeal-conflict-resolving.html b/src/pages/detail/detail-simpledeal-conflict-resolving.html
index afd8fd06..5facea6f 100644
--- a/src/pages/detail/detail-simpledeal-conflict-resolving.html
+++ b/src/pages/detail/detail-simpledeal-conflict-resolving.html
@@ -90,8 +90,8 @@
 
             paper-slider {
                 --paper-slider-knob-color: var(--sc-green);
-                --paper-slider-knob-start-color:  var(--sc-green);
-                --paper-slider-knob-start-border-color:  var(--sc-green);
+                --paper-slider-knob-start-color: var(--sc-green);
+                --paper-slider-knob-start-border-color: var(--sc-green);
                 --paper-slider-active-color: rgba(189, 189, 189, 1);
                 width: 100%;
                 margin-top: 5px;
@@ -112,7 +112,7 @@
             .choice {
                 @apply --layout-horizontal;
                 @apply --layout-center-center;
-                padding: 20px 0 30px 0 ;
+                padding: 20px 0 30px 0;
             }
 
             @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
@@ -151,7 +151,8 @@
                     <div class="name">[[item.seekerUsername]]</div>
                     <div class="reputation">[[item.seekerRep]] SWR</div>
                 </div>
-                <paper-slider min="0" max="1" step="0.01" value="{{percProvider}}" immediate-value="{{percProvider}}" expand></paper-slider>
+                <paper-slider min="0" max="1" step="0.01" value="{{percProvider}}" immediate-value="{{percProvider}}"
+                    expand></paper-slider>
                 <div class="userbox">
                     <iron-image sizing="cover" preload src="https://scapiweb3-c.swarm.city/img/[[reply.avatarHash]]"
                         placeholder="../images/defaultavatar.png">
@@ -201,6 +202,8 @@
             _agree() {
                 console.log('resolving! Seeker gets: ' + (this.percSeeker * this.item.itemValue) / 1e18
                     + ' SWT (' + this.percSeeker * 100 + '%) and provider gets: ' + (this.percProvider * this.item.itemValue) / 1e18 + ' SWT (' + this.percProvider * 100 + '%)')
+
+                this.dispatchEvent(new CustomEvent('resolve', { detail: this.percSeeker }));
             }
             _disagree() {
                 this.dispatchEvent(new CustomEvent('close'));
diff --git a/src/pages/detail/detail-simpledeal-conflict.html b/src/pages/detail/detail-simpledeal-conflict.html
index c9a3b4d3..f9a2a005 100644
--- a/src/pages/detail/detail-simpledeal-conflict.html
+++ b/src/pages/detail/detail-simpledeal-conflict.html
@@ -262,7 +262,8 @@
                         </div>
                     </template>
                     <template is="dom-if" if="[[resolving]]">
-                        <detail-simpledeal-conflict-resolving item="[[item]]" reply="[[reply]]" on-close="_resolve"></detail-simpledeal-conflict-resolving>
+                        <detail-simpledeal-conflict-resolving item="[[item]]" reply="[[reply]]" on-close="_resolve"
+                            on-resolve="_handleOnResolve"></detail-simpledeal-conflict-resolving>
                     </template>
                 </template>
                 <template is="dom-if" if="[[!_isMaintainer(maintainer.address, address)]]">
@@ -395,6 +396,9 @@
             _resolve() {
                 this.resolving = !this.resolving;
             }
+            _handleOnResolve(e) {
+                this.dispatchEvent(new CustomEvent("resolve", { detail: e.detail }));
+            }
         }
         window.customElements.define(
             MyDetailSimpledealConflict.is,
diff --git a/src/pages/detail/detail-simpledeal.html b/src/pages/detail/detail-simpledeal.html
index 4eda335c..f69510ff 100644
--- a/src/pages/detail/detail-simpledeal.html
+++ b/src/pages/detail/detail-simpledeal.html
@@ -130,7 +130,7 @@
 
           <template is="dom-if" if="{{_isEqualTo(status, 'conflict')}}">
             <detail-simpledeal-conflict address="[[address]]" item="[[item]]" reply="[[_getProviderReply(item)]]"
-              maintainer="[[hashtag.metadata.maintainer]]" on-chat="_handleOnChat"></detail-simpledeal-conflict>
+              maintainer="[[hashtag.metadata.maintainer]]" on-chat="_handleOnChat" on-resolve="_handleOnresolve"></detail-simpledeal-conflict>
           </template>
 
           <template is="dom-if" if="{{_showConflictButton(item, status)}}">
@@ -498,6 +498,46 @@
           }
         });
       }
+      _handleOnresolve(e) {
+        const seekerPercentage = e.detail;
+        console.log(seekerPercentage)
+        this.$.unlock._getPrivateKey().then(res => {
+          try {
+            const { privateKey, address, publicKey } = res;
+            if (!privateKey) {
+              throw Error("Missing address");
+            }
+            const maintainer = {
+              address,
+              privateKey
+            };
+
+            const item = {
+              hash: this.item.itemHash,
+              value: this.item.itemValue,
+            };
+            const hashtagAddress = this.hashtag.address;
+            this.$.simpledeal
+              .resolveItem({ maintainer, item, hashtagAddress,  seekerPercentage})
+              .then(receipt => {
+                console.log("Successfully resolved item, receipt:", receipt);
+                this.dispatch({
+                  type: "UPDATE_ITEM",
+                  hashtagAddress,
+                  itemHash: this.item.itemHash,
+                  data: {
+                    status: "4-pending"
+                  }
+                });
+              })
+              .catch(err => {
+                console.log("Error resolving item:", err);
+              });
+          } catch (e) {
+            console.error("Error resolving item (catch block): ", e.stack);
+          }
+        });
+      }
       _handleOnCancel() {
         this.$.unlock._getPrivateKey().then(res => {
           try {
@@ -653,7 +693,6 @@
         })
       }
       _handleOnReputation(e) {
-        console.log('rep')
         this.dispatchEvent(
           new CustomEvent("reputation", {
             detail: e.detail

From 048b0719cafdc9091c1e6810821be544d987eec2 Mon Sep 17 00:00:00 2001
From: Xavier <xavier@n3x.co>
Date: Thu, 29 Nov 2018 18:27:19 -0800
Subject: [PATCH 07/13] Temptative release candidate

---
 src/pages/chat/chat-router.html                  | 4 ++--
 src/pages/detail/detail-router.html              | 4 +++-
 src/pages/detail/detail-simpledeal-conflict.html | 5 +++--
 src/pages/detail/detail-simpledeal.html          | 6 +++---
 src/pages/hashtag/hashtag-simpledeal.html        | 4 ++--
 src/redux/sagas/hashtag-saga.html                | 6 +++---
 6 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/pages/chat/chat-router.html b/src/pages/chat/chat-router.html
index f1b53d8f..ecc6b346 100644
--- a/src/pages/chat/chat-router.html
+++ b/src/pages/chat/chat-router.html
@@ -191,8 +191,8 @@
             ].avatarHash;
         }
         if (this.hashtag && this.hashtag.metadata && this.hashtag.metadata.maintainer
-          && this.hashtag.metadata.maintainer.address && this.hashtag.metadata.maintainer.avatar) {
-          avatars[this.hashtag.metadata.maintainer.address] = this.hashtag.metadata.maintainer.avatar;
+          && this.hashtag.maintainerAddress && this.hashtag.metadata.maintainer.avatar) {
+          avatars[this.hashtag.maintainerAddress] = this.hashtag.metadata.maintainer.avatar;
         }
         this.set("avatars", avatars);
       }
diff --git a/src/pages/detail/detail-router.html b/src/pages/detail/detail-router.html
index 266cd94e..8a97922a 100644
--- a/src/pages/detail/detail-router.html
+++ b/src/pages/detail/detail-router.html
@@ -170,8 +170,10 @@
                             }
                             break;
                         case ('2-pending'):
+                        case ('4-pending'):
                         case ('2'):
-                            // Item paid out
+                        case ('4'):
+                            // Item paid out or resolved
                             this.status = 'done';
                             break;
                         case ('3-pending'):
diff --git a/src/pages/detail/detail-simpledeal-conflict.html b/src/pages/detail/detail-simpledeal-conflict.html
index f9a2a005..76b4ecb8 100644
--- a/src/pages/detail/detail-simpledeal-conflict.html
+++ b/src/pages/detail/detail-simpledeal-conflict.html
@@ -253,7 +253,7 @@
                     <div class="chat-icon"></div>
                 </div>
                 <div class="center bold">This deal is <span class="red">in conflict</span>.</div>
-                <template is="dom-if" if="[[_isMaintainer(maintainer.address, address)]]">
+                <template is="dom-if" if="[[_isMaintainer(hashtag.maintainerAddress, address)]]">
                     <div class="center subtitle">You were added to the chat</div>
 
                     <template is="dom-if" if="[[!resolving]]">
@@ -266,7 +266,7 @@
                             on-resolve="_handleOnResolve"></detail-simpledeal-conflict-resolving>
                     </template>
                 </template>
-                <template is="dom-if" if="[[!_isMaintainer(maintainer.address, address)]]">
+                <template is="dom-if" if="[[!_isMaintainer(hashtag.maintainerAddress, address)]]">
                     <div class="center subtitle">The hashtagmaintainer is added to the chat</div>
                     <div class="maintainerbox">
                         <div class="avatar">
@@ -296,6 +296,7 @@
                     reply: Object,
                     address: String,
                     maintainer: Object,
+                    hashtag: Object,
                     resolving: {
                         type: Boolean,
                         value: false,
diff --git a/src/pages/detail/detail-simpledeal.html b/src/pages/detail/detail-simpledeal.html
index f69510ff..58c18754 100644
--- a/src/pages/detail/detail-simpledeal.html
+++ b/src/pages/detail/detail-simpledeal.html
@@ -130,7 +130,7 @@
 
           <template is="dom-if" if="{{_isEqualTo(status, 'conflict')}}">
             <detail-simpledeal-conflict address="[[address]]" item="[[item]]" reply="[[_getProviderReply(item)]]"
-              maintainer="[[hashtag.metadata.maintainer]]" on-chat="_handleOnChat" on-resolve="_handleOnresolve"></detail-simpledeal-conflict>
+              maintainer="[[hashtag.metadata.maintainer]]" hashtag="[[hashtag]]" on-chat="_handleOnChat" on-resolve="_handleOnresolve"></detail-simpledeal-conflict>
           </template>
 
           <template is="dom-if" if="{{_showConflictButton(item, status)}}">
@@ -339,8 +339,8 @@
               this.hashtag &&
               this.hashtag.metadata &&
               this.hashtag.metadata.maintainer &&
-              this.hashtag.metadata.maintainer.address &&
-              this.hashtag.metadata.maintainer.address == this.address
+              this.hashtag.maintainerAddress &&
+              this.hashtag.maintainerAddress == this.address
             )
           )
         )
diff --git a/src/pages/hashtag/hashtag-simpledeal.html b/src/pages/hashtag/hashtag-simpledeal.html
index 88473ae3..5bf5d5e3 100644
--- a/src/pages/hashtag/hashtag-simpledeal.html
+++ b/src/pages/hashtag/hashtag-simpledeal.html
@@ -164,8 +164,8 @@
                     if ((this.hashtag && 
                     this.hashtag.metadata && 
                     this.hashtag.metadata.maintainer &&
-                    this.hashtag.metadata.maintainer.address && 
-                    this.hashtag.metadata.maintainer.address == this.address) &&(
+                    this.hashtag.maintainerAddress && 
+                    this.hashtag.maintainerAddress == this.address) &&(
                         item.status &&
                         item.status == '3'
                     )) involved = true;
diff --git a/src/redux/sagas/hashtag-saga.html b/src/redux/sagas/hashtag-saga.html
index 176837ad..7a12e277 100644
--- a/src/redux/sagas/hashtag-saga.html
+++ b/src/redux/sagas/hashtag-saga.html
@@ -74,7 +74,7 @@
                 console.log('Error retrieving deployBlock from ' + hashtagAddress, e, e.stack)
             }
             return {
-                mantainerAddress: await hashtagContract.methods.payoutAddress().call(),
+                maintainerAddress: await hashtagContract.methods.payoutAddress().call(),
                 hashtagName: await hashtagContract.methods.hashtagName().call(),
                 hashtagMetadataHash: await hashtagContract.methods.hashtagMetadataHash().call(),
                 hashtagFee: parseInt(await hashtagContract.methods.hashtagFee().call()),
@@ -270,13 +270,13 @@
                 // If the seeker or the provider are not provided, fetch them from the current state
                 if (!seekerAddress) seekerAddress = yield select(getItem).seekerAddress
                 if (!providerAddress) providerAddress = yield select(getItem).providerAddress
-                const mantainerAddress = yield select(getHashtag).mantainerAddress
+                const maintainerAddress = yield select(getHashtag).maintainerAddress
                 const yourAddress = yield select(selectors.address)
                 if (!yourAddress) {
                     console.warn('Warning, yourAddress is not defined at the moment of checking if you belong in a chat. Possible race condition.')
                 }
                 // Check if the user is either the seeker or the provider
-                if (providerAddress == yourAddress || seekerAddress == yourAddress || (itemStatus == 3 && yourAddress == mantainerAddress)) {
+                if (providerAddress == yourAddress || seekerAddress == yourAddress || (itemStatus == 3 && yourAddress == maintainerAddress)) {
                     window.dispatchEvent(new CustomEvent('openChat', {
                         detail: { itemHash, yourAddress }
                     }));

From 8320400c52413d875114f42cf6189951da70db25 Mon Sep 17 00:00:00 2001
From: Xavier <xavier@n3x.co>
Date: Thu, 29 Nov 2018 18:43:41 -0800
Subject: [PATCH 08/13] Resolve item release conflict

---
 src/pages/detail/detail-simpledeal-done.html | 2 +-
 src/pages/hashtag/hashtag-simpledeal.html    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/detail/detail-simpledeal-done.html b/src/pages/detail/detail-simpledeal-done.html
index d42f59cd..b80eae90 100644
--- a/src/pages/detail/detail-simpledeal-done.html
+++ b/src/pages/detail/detail-simpledeal-done.html
@@ -81,7 +81,7 @@
             }
 
             _checkPending(status) {
-                return status == '2' ? "container" : "container pending";
+                return (status == '2' || status == '4') ? "container" : "container pending";
             }
         }
         window.customElements.define(
diff --git a/src/pages/hashtag/hashtag-simpledeal.html b/src/pages/hashtag/hashtag-simpledeal.html
index 5bf5d5e3..400c9f8b 100644
--- a/src/pages/hashtag/hashtag-simpledeal.html
+++ b/src/pages/hashtag/hashtag-simpledeal.html
@@ -170,7 +170,7 @@
                         item.status == '3'
                     )) involved = true;
                 }
-                if (item.status && item.status == '2') involved = false
+                if (item.status && (item.status == '2' || item.status == '4')) involved = false
                 return involved;
             }
 

From 8d57b08fecb116fb5be4da61914e38965073487b Mon Sep 17 00:00:00 2001
From: Xavier <xavier@n3x.co>
Date: Fri, 30 Nov 2018 16:34:45 -0800
Subject: [PATCH 09/13] Adding conflict resolve message to chat

---
 src/displays/display-unlock.html              |  6 +-
 src/pages/chat/chat-conflict-resolve.html     | 99 +++++++++++++++++++
 src/pages/chat/chat-conflict-start.html       | 18 ++--
 src/pages/chat/chat-member-added.html         |  8 +-
 src/pages/chat/chat-message.html              | 12 +--
 src/pages/chat/chat-messages.html             | 64 ++++++------
 src/pages/chat/chat-my-message.html           | 12 +--
 src/pages/chat/chat-router.html               |  2 +-
 .../detail-simpledeal-input-conflict.html     |  4 +-
 src/pages/detail/detail-simpledeal.html       | 23 ++++-
 10 files changed, 188 insertions(+), 60 deletions(-)
 create mode 100644 src/pages/chat/chat-conflict-resolve.html

diff --git a/src/displays/display-unlock.html b/src/displays/display-unlock.html
index 53f78edb..430bf2f9 100644
--- a/src/displays/display-unlock.html
+++ b/src/displays/display-unlock.html
@@ -362,9 +362,9 @@
                 this.disableScroll();
                 window.scrollTo(0, 0);
                 this.error = '';
-                setTimeout(() => {
-                    this.$$('#input').focus();
-                }, 1);
+                // setTimeout(() => {
+                //     this.$$('#input').focus();
+                // }, 1);
                 this.$.container.classList.remove('hidden');
                 if (this.blue) {
                     this.$.container.classList.add('blue');
diff --git a/src/pages/chat/chat-conflict-resolve.html b/src/pages/chat/chat-conflict-resolve.html
new file mode 100644
index 00000000..b8892faa
--- /dev/null
+++ b/src/pages/chat/chat-conflict-resolve.html
@@ -0,0 +1,99 @@
+<!--
+  @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" />
+
+<!-- Displays and shared styles only -->
+<link rel="import" href="../../shared-styles.html" />
+
+<dom-module id="chat-conflict-resolve">
+  <template>
+    <style include="shared-styles">
+      :host {
+        display: block;
+      }
+
+      .container {
+        margin-top: 20px;
+      }
+
+      .date {
+        @apply --layout-horizontal;
+        @apply --layout-center-justified;
+        @apply --smallest-light;
+        color: var(--sc-grey3b);
+      }
+
+      .text {
+        @apply --layout-horizontal;
+        @apply --layout-center-justified;
+        @apply --small-light;
+        margin: 5px 0 10px 0;
+        padding: 10px 20px;
+        box-sizing: border-box;
+        text-align: center;
+        background-color: var(--sc-grey1b);
+      }
+
+      .red {
+        color: var(--sc-red);
+      }
+    </style>
+    <div class="container">
+      <div class="date">[[_formatDate(message.time)]]</div>
+      <div class="text">
+        The conflict is resolved by the hashtag maintainer.
+        [[item.seekerUsername]] has been paid [[_seekerPayout(item.itemValue, message)]] SWT
+        and [[_getProviderUsername(item)]] has been paid [[_providerPayout(item.itemValue, message)]] SWT.
+      </div>
+    </div>
+  </template>
+  <script>
+    class MyChatConflictResolve extends (new ReduxMixin(
+      Polymer.mixinBehaviors([Polymer.AppLocalizeBehavior], Polymer.Element)
+    )) {
+      static get is() {
+        return "chat-conflict-resolve";
+      }
+      static get properties() {
+        return {
+          message: Object,
+          item: Object,
+        };
+      }
+
+      /**
+       * formats epoch
+       * @param {DateTime} dateTime epoch in javascript milliseconds
+       * @return {string} formatted date string
+       */
+      _formatDate(dateTime) {
+        let milliseconds = dateTime * 1000;
+        if (webpack.moment().valueOf() - milliseconds < 86400000) {
+          return webpack.moment(milliseconds).fromNow();
+        } else {
+          return webpack.moment(milliseconds).format("DD MMM YYYY - HH:mm");
+        }
+      }
+      _seekerPayout(wei, message) {
+        if (message && message.seekerPercentage) return ((wei * message.seekerPercentage) / 1e18).toFixed(2);
+        if (message && message.message.seekerPercentage) return ((wei * message.seekerPercentage) / 1e18).toFixed(2);
+
+      }
+
+      _providerPayout(wei, message) {
+        if (message && message.seekerPercentage) return ((wei - (wei * message.seekerPercentage)) / 1e18).toFixed(2);
+        if (message && message.message.seekerPercentage) return ((wei - (wei * message.seekerPercentage)) / 1e18).toFixed(2);
+
+      }
+      _getProviderUsername(item) {
+        if (item && item.replies) {
+          return item.replies[item.providerAddress].username
+        }
+      }
+    }
+    window.customElements.define(MyChatConflictResolve.is, MyChatConflictResolve);
+  </script>
+</dom-module>
\ No newline at end of file
diff --git a/src/pages/chat/chat-conflict-start.html b/src/pages/chat/chat-conflict-start.html
index 9c1cda75..3fe7aeb6 100644
--- a/src/pages/chat/chat-conflict-start.html
+++ b/src/pages/chat/chat-conflict-start.html
@@ -3,10 +3,7 @@
   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/polymer/polymer-element.html" />
 
 <!-- Displays and shared styles only -->
 <link rel="import" href="../../shared-styles.html" />
@@ -19,7 +16,8 @@
       }
 
       .container {
-        margin-top: 50px;}
+        margin-top: 50px;
+      }
 
       .date {
         @apply --layout-horizontal;
@@ -27,6 +25,7 @@
         @apply --smallest-light;
         color: var(--sc-grey3b);
       }
+
       .text {
         @apply --layout-horizontal;
         @apply --layout-center-justified;
@@ -36,14 +35,15 @@
         box-sizing: border-box;
         background-color: var(--sc-grey1b);
       }
+
       .red {
         color: var(--sc-red);
       }
     </style>
     <div class="container">
-      <div class="date">[[_formatDate(item.time)]]</div>
+      <div class="date">[[_formatDate(message.time)]]</div>
       <div class="text">
-          This deal is now&nbsp;<span class="red">in conflict.</span>
+        This deal is now&nbsp;<span class="red">in conflict.</span>
       </div>
     </div>
   </template>
@@ -56,7 +56,7 @@
       }
       static get properties() {
         return {
-          item: Object,
+          message: Object,
         };
       }
 
@@ -76,4 +76,4 @@
     }
     window.customElements.define(MyChatConflictStart.is, MyChatConflictStart);
   </script>
-</dom-module>
+</dom-module>
\ No newline at end of file
diff --git a/src/pages/chat/chat-member-added.html b/src/pages/chat/chat-member-added.html
index 08faefdb..5fba3f33 100644
--- a/src/pages/chat/chat-member-added.html
+++ b/src/pages/chat/chat-member-added.html
@@ -64,18 +64,18 @@
       }
     </style>
     <div class="container">
-      <div class="date">[[_formatDate(item.time)]]</div>
+      <div class="date">[[_formatDate(message.time)]]</div>
       <div class="text">The hashtagmaintainer is added.</div>
       <div class="member">
         <iron-image
           class="avatar"
           sizing="cover"
           preload
-          src="https://scapiweb3-c.swarm.city/img/[[item.message.avatar]]"
+          src="https://scapiweb3-c.swarm.city/img/[[message.message.avatar]]"
           placeholder="../images/defaultavatar.png"
         >
         </iron-image>
-        <div class="name">[[item.message.username]]</div>
+        <div class="name">[[message.message.username]]</div>
       </div>
     </div>
   </template>
@@ -88,7 +88,7 @@
       }
       static get properties() {
         return {
-          item: Object
+          message: Object
         };
       }
 
diff --git a/src/pages/chat/chat-message.html b/src/pages/chat/chat-message.html
index 5e3c23aa..f936b469 100644
--- a/src/pages/chat/chat-message.html
+++ b/src/pages/chat/chat-message.html
@@ -62,14 +62,14 @@
     </style>
     <div class="container">
       <div class="vertical">
-        <div class="message-date">[[_formatDate(item.time)]]</div>
-        <div class="message-text">[[item.message]]</div>
+        <div class="message-date">[[_formatDate(message.time)]]</div>
+        <div class="message-text">[[message.message]]</div>
       </div>
       <iron-image
         class="avatar-chat"
         sizing="cover"
         preload
-        src="https://scapiweb3-c.swarm.city/img/[[_getAvatar(item, avatars)]]"
+        src="https://scapiweb3-c.swarm.city/img/[[_getAvatar(message, avatars)]]"
         placeholder="../images/defaultavatar.png"
       >
       </iron-image>
@@ -84,7 +84,7 @@
       }
       static get properties() {
         return {
-          item: Object,
+          message: Object,
           avatars: Object
         };
       }
@@ -102,8 +102,8 @@
           return webpack.moment(milliseconds).format("DD MMM YYYY - HH:mm");
         }
       }
-      _getAvatar(item, avatars) {
-        if (item && item.sender in avatars) return avatars[item.sender];
+      _getAvatar(message, avatars) {
+        if (message && message.sender in avatars) return avatars[message.sender];
       }
     }
     window.customElements.define(MyChatMessage.is, MyChatMessage);
diff --git a/src/pages/chat/chat-messages.html b/src/pages/chat/chat-messages.html
index b388d03a..0f6149ca 100644
--- a/src/pages/chat/chat-messages.html
+++ b/src/pages/chat/chat-messages.html
@@ -16,6 +16,7 @@
 <link rel="import" href="./chat-message.html" />
 <link rel="import" href="./chat-my-message.html" />
 <link rel="import" href="./chat-conflict-start.html" />
+<link rel="import" href="./chat-conflict-resolve.html" />
 <link rel="import" href="./chat-member-added.html" />
 
 <dom-module id="chat-messages">
@@ -36,27 +37,30 @@
       }
     </style>
     <div id="container" class="container">
-      <template is="dom-repeat" items="[[messages]]">
-        <template is="dom-if" if="[[!_statusMessage(item)]]">
-          <template is="dom-if" if="[[_myMessage(item)]]">
+      <template is="dom-repeat" items="[[messages]]" as="message">
+        <template is="dom-if" if="[[!_statusMessage(message)]]">
+          <template is="dom-if" if="[[_myMessage(message)]]">
             <chat-my-message
               avatars="[[avatars]]"
-              item="[[item]]"
+              message="[[message]]"
             ></chat-my-message>
           </template>
-          <template is="dom-if" if="[[!_myMessage(item)]]">
+          <template is="dom-if" if="[[!_myMessage(message)]]">
             <chat-message
               avatars="[[avatars]]" 
-              item="[[item]]"></chat-message>
+              message="[[message]]"></chat-message>
           </template>
         </template>
-        <template is="dom-if" if="[[_statusMessage(item)]]">
-            <template is="dom-if" if="[[_conflictStart(item)]]">
-              <chat-conflict-start item="[[item]]"></chat-conflict-start>
+        <template is="dom-if" if="[[_statusMessage(message)]]">
+            <template is="dom-if" if="[[_conflictStart(message)]]">
+              <chat-conflict-start message="[[message]]"></chat-conflict-start>
             </template>
-            <template is="dom-if" if="[[_memberAdded(item)]]">
-                <chat-member-added item="[[item]]"></chat-member-added>
+            <template is="dom-if" if="[[_memberAdded(message)]]">
+                <chat-member-added message="[[message]]"></chat-member-added>
             </template>
+            <template is="dom-if" if="[[_conflictResolve(message)]]">
+              <chat-conflict-resolve message="[[message]]" item="[[item]]"></chat-conflict-resolve>
+          </template>
         </template>
       </template>
     </div>
@@ -76,6 +80,7 @@
           },
           address: String,
           avatars: Object,
+          item: Object,
           secret: Object,
           initialScroll: {
             type: Boolean,
@@ -83,33 +88,36 @@
           }
         };
       }
-      _statusMessage(item) {
-        return (item && item.type && item.type != 'message');
+      _statusMessage(message) {
+        return (message && message.type && message.type != 'message');
+      }
+      _conflictStart(message) {
+        return message && message.type && message.type == 'conflict-start';
       }
-      _conflictStart(item) {
-        return item && item.type && item.type == 'conflict-start';
+      _memberAdded(message) {
+        return message && message.type && message.type == 'member-added';
       }
-      _memberAdded(item) {
-        return item && item.type && item.type == 'member-added';
+      _conflictResolve(message) {
+        return message && message.type && message.type == 'conflict-resolve';
       }
-      _myMessage(item) {
-        return (item && item.sender && item.sender == this.address);
+      _myMessage(message) {
+        return (message && message.sender && message.sender == this.address);
       }
       /**
        * scrolls the messages box down to newest message if not scrolled up yet
        */
       _scrollToBottom() {
-        if (
-          this.$.container.scrollHeight - this.$.container.scrollTop <=
-          this.$.container.clientHeight + 100
-        ) {
+        // if (
+        //   this.$.container.scrollHeight - this.$.container.scrollTop <=
+        //   this.$.container.clientHeight + 100
+        // ) {
           this.$.container.scrollTop = this.$.container.scrollHeight;
-        }
+        // }
         // scroll down on initial load of the messages
-        if (!this.initialScroll && this.$.container.scrollHeight > 501) {
-          this.$.container.scrollTop = this.$.container.scrollHeight;
-          this.initialScroll = true;
-        }
+        // if (!this.initialScroll && this.$.container.scrollHeight > 501) {
+        //   this.$.container.scrollTop = this.$.container.scrollHeight;
+        //   this.initialScroll = true;
+        // }
       }
     }
     window.customElements.define(MyChatMessages.is, MyChatMessages);
diff --git a/src/pages/chat/chat-my-message.html b/src/pages/chat/chat-my-message.html
index 03858a65..9c2a8c05 100644
--- a/src/pages/chat/chat-my-message.html
+++ b/src/pages/chat/chat-my-message.html
@@ -66,13 +66,13 @@
         class="avatar-chat"
         sizing="cover"
         preload
-        src="https://scapiweb3-c.swarm.city/img/[[_getAvatar(item, avatars)]]"
+        src="https://scapiweb3-c.swarm.city/img/[[_getAvatar(message, avatars)]]"
         placeholder="../images/defaultavatar.png"
       >
       </iron-image>
       <div class="vertical">
-        <div class="message-date">[[_formatDate(item.time)]]</div>
-        <div class="message-text">[[item.message]]</div>
+        <div class="message-date">[[_formatDate(message.time)]]</div>
+        <div class="message-text">[[message.message]]</div>
       </div>
     </div>
   </template>
@@ -85,7 +85,7 @@
       }
       static get properties() {
         return {
-          item: Object,
+          message: Object,
           avatars: Object
         };
       }
@@ -103,8 +103,8 @@
           return webpack.moment(milliseconds).format("DD MMM YYYY - HH:mm");
         }
       }
-      _getAvatar(item, avatars) {
-        if (item && item.sender in avatars) return avatars[item.sender];
+      _getAvatar(message, avatars) {
+        if (message && message.sender in avatars) return avatars[message.sender];
       }
     }
     window.customElements.define(MyChatMyMessage.is, MyChatMyMessage);
diff --git a/src/pages/chat/chat-router.html b/src/pages/chat/chat-router.html
index ecc6b346..823ef877 100644
--- a/src/pages/chat/chat-router.html
+++ b/src/pages/chat/chat-router.html
@@ -34,7 +34,7 @@
     <app-location route="{{route}}"></app-location>
     <chat-top item="[[item]]" hashtag="[[hashtag]]" on-close="_handleOnClose"></chat-top>
     <div class="container">
-      <chat-messages address="[[address]]" messages="[[messages]]" avatars="[[avatars]]"></chat-messages>
+      <chat-messages address="[[address]]" item="[[item]]" messages="[[messages]]" avatars="[[avatars]]"></chat-messages>
       <chat-new address="[[address]]" avatars="[[avatars]]" on-send="_handleOnSend"></chat-new>
     </div>
   </template>
diff --git a/src/pages/detail/detail-simpledeal-input-conflict.html b/src/pages/detail/detail-simpledeal-input-conflict.html
index 6b21193f..dbfc303e 100644
--- a/src/pages/detail/detail-simpledeal-input-conflict.html
+++ b/src/pages/detail/detail-simpledeal-input-conflict.html
@@ -24,6 +24,7 @@
             }
 
             .container {
+                background-color: var(--sc-white);
                 box-sizing: border-box;
                 padding: 20px 25px 15px 25px;
             }
@@ -66,8 +67,7 @@
         </style>
         <iron-media-query query="(min-width: 600px)" query-matches="{{wide}}"></iron-media-query>
         <div class="container">
-            <paper-textarea label="What's your motivation?" type="txt" value="{{message}}"
-                autofocus></paper-textarea>
+            <paper-textarea label="What's your motivation?" type="txt" value="{{message}}" autofocus></paper-textarea>
             <div class="choice">
                 <display-button-disagree on-tap="_close"></display-button-disagree>
                 <display-button-confirm on-tap="_conflict"></display-button-confirm>
diff --git a/src/pages/detail/detail-simpledeal.html b/src/pages/detail/detail-simpledeal.html
index 58c18754..476d7a5c 100644
--- a/src/pages/detail/detail-simpledeal.html
+++ b/src/pages/detail/detail-simpledeal.html
@@ -517,8 +517,9 @@
               value: this.item.itemValue,
             };
             const hashtagAddress = this.hashtag.address;
+
             this.$.simpledeal
-              .resolveItem({ maintainer, item, hashtagAddress,  seekerPercentage})
+              .resolveItem({ maintainer, item, hashtagAddress, seekerPercentage })
               .then(receipt => {
                 console.log("Successfully resolved item, receipt:", receipt);
                 this.dispatch({
@@ -529,6 +530,26 @@
                     status: "4-pending"
                   }
                 });
+                console.log('sending resolve message')
+                this.$.socket
+                  ._sendChatMessage({
+                    itemHash: this.item.itemHash,
+                    message: {
+                      sender: maintainer.address,
+                      time: Math.floor(Date.now() / 1000),
+                      seekerPercentage,
+                      type: "conflict-resolve",
+                    }
+                  })
+                  .then(() => {
+
+                    console.log(
+                      "Successfully sent resolve message"
+                    );
+                  })
+                  .catch(err => {
+                    console.log("Error sending resolve message:", err);
+                  });
               })
               .catch(err => {
                 console.log("Error resolving item:", err);

From bdba865edd64b99d9df5feb9e45312e10d51ac4a Mon Sep 17 00:00:00 2001
From: Xavier <xavier@n3x.co>
Date: Fri, 30 Nov 2018 16:58:38 -0800
Subject: [PATCH 10/13] resolving amount

---
 src/pages/detail/detail-simpledeal-conflict-resolving.html | 2 +-
 src/pages/detail/detail-simpledeal-conflict.html           | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/pages/detail/detail-simpledeal-conflict-resolving.html b/src/pages/detail/detail-simpledeal-conflict-resolving.html
index 5facea6f..14b57674 100644
--- a/src/pages/detail/detail-simpledeal-conflict-resolving.html
+++ b/src/pages/detail/detail-simpledeal-conflict-resolving.html
@@ -197,7 +197,7 @@
                 return (fraction * 100).toFixed(0);
             }
             _calcAmount(perc) {
-                return ((this.item.itemValue * perc) / 1e18).toFixed(2);
+                return ((this.item.itemValue * 2 * perc) / 1e18).toFixed(2);
             }
             _agree() {
                 console.log('resolving! Seeker gets: ' + (this.percSeeker * this.item.itemValue) / 1e18
diff --git a/src/pages/detail/detail-simpledeal-conflict.html b/src/pages/detail/detail-simpledeal-conflict.html
index 76b4ecb8..43d09ca0 100644
--- a/src/pages/detail/detail-simpledeal-conflict.html
+++ b/src/pages/detail/detail-simpledeal-conflict.html
@@ -113,6 +113,10 @@
                 border-bottom: 4px solid var(--sc-red);
                 position: relative;
             }
+            .container[wide-layout] .conflictbox {
+
+                @apply --layout-start;
+            }
 
             .maintainerbox {
                 @apply --layout-horizontal;

From 61c0ad5f8ac10ee8d60130ddb2decbe2e37fd2ff Mon Sep 17 00:00:00 2001
From: Xavier <xavier@n3x.co>
Date: Fri, 30 Nov 2018 17:08:41 -0800
Subject: [PATCH 11/13] Fix on amount

---
 src/pages/detail/detail-simpledeal-conflict-resolving.html | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/pages/detail/detail-simpledeal-conflict-resolving.html b/src/pages/detail/detail-simpledeal-conflict-resolving.html
index 14b57674..34355f83 100644
--- a/src/pages/detail/detail-simpledeal-conflict-resolving.html
+++ b/src/pages/detail/detail-simpledeal-conflict-resolving.html
@@ -56,6 +56,10 @@
                 box-sizing: border-box;
                 margin: 30px 0;
             }
+            
+            .container[wide-layout] .proportionbox {
+                @apply --layout-start;
+            }
 
             .userbox {
                 @apply --layout-vertical;
@@ -151,7 +155,7 @@
                     <div class="name">[[item.seekerUsername]]</div>
                     <div class="reputation">[[item.seekerRep]] SWR</div>
                 </div>
-                <paper-slider min="0" max="1" step="0.01" value="{{percProvider}}" immediate-value="{{percProvider}}"
+                <paper-slider min="0" max="2" step="0.01" value="{{percProvider}}" immediate-value="{{percProvider}}"
                     expand></paper-slider>
                 <div class="userbox">
                     <iron-image sizing="cover" preload src="https://scapiweb3-c.swarm.city/img/[[reply.avatarHash]]"

From 577b2cba89ed4d7c044e89611ac6e80cfda25687 Mon Sep 17 00:00:00 2001
From: Xavier <xavier@n3x.co>
Date: Fri, 30 Nov 2018 17:15:31 -0800
Subject: [PATCH 12/13] Fixing item value

---
 src/data/data-simpledeal.html                              | 2 +-
 src/pages/detail/detail-simpledeal-conflict-resolving.html | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/data/data-simpledeal.html b/src/data/data-simpledeal.html
index eee5afb6..6fef8760 100644
--- a/src/data/data-simpledeal.html
+++ b/src/data/data-simpledeal.html
@@ -248,7 +248,7 @@
         }
 
         async function resolveItemAsync({ maintainer, item, hashtagAddress, seekerPercentage }) {
-            const seekerFraction = item.value * seekerPercentage;
+            const seekerFraction = item.value * 2 * seekerPercentage;
             console.log(seekerFraction);
 
             // 1. Encode the raw resolveItem
diff --git a/src/pages/detail/detail-simpledeal-conflict-resolving.html b/src/pages/detail/detail-simpledeal-conflict-resolving.html
index 34355f83..cd094a1c 100644
--- a/src/pages/detail/detail-simpledeal-conflict-resolving.html
+++ b/src/pages/detail/detail-simpledeal-conflict-resolving.html
@@ -155,7 +155,7 @@
                     <div class="name">[[item.seekerUsername]]</div>
                     <div class="reputation">[[item.seekerRep]] SWR</div>
                 </div>
-                <paper-slider min="0" max="2" step="0.01" value="{{percProvider}}" immediate-value="{{percProvider}}"
+                <paper-slider min="0" max="1" step="0.01" value="{{percProvider}}" immediate-value="{{percProvider}}"
                     expand></paper-slider>
                 <div class="userbox">
                     <iron-image sizing="cover" preload src="https://scapiweb3-c.swarm.city/img/[[reply.avatarHash]]"

From da7fd572f086914d90f051a1711ecb72ea779a53 Mon Sep 17 00:00:00 2001
From: Xavier <xavier@n3x.co>
Date: Fri, 30 Nov 2018 18:37:11 -0800
Subject: [PATCH 13/13] Allow chat after resolving

---
 src/pages/detail/detail-simpledeal-done.html | 63 ++++++++++++++++++++
 src/pages/detail/detail-simpledeal.html      |  2 +-
 2 files changed, 64 insertions(+), 1 deletion(-)

diff --git a/src/pages/detail/detail-simpledeal-done.html b/src/pages/detail/detail-simpledeal-done.html
index b80eae90..4f0713bf 100644
--- a/src/pages/detail/detail-simpledeal-done.html
+++ b/src/pages/detail/detail-simpledeal-done.html
@@ -26,6 +26,7 @@
                 @apply --layout-vertical;
                 @apply --layout-start-justified;
                 @apply --layout-center;
+                position: relative;
                 box-sizing: border-box;
                 background-color: var(--sc-white);
                 padding: 40px 15px;
@@ -45,9 +46,39 @@
             .pending {
                 opacity: 0.5;
             }
+
+            .chat-button {
+                @apply --icon-button-big;
+                position: absolute;
+                top: -40px;
+                right: 0;
+                z-index: 99;
+                right: 30px;
+            }
+
+            .chat-button:active {
+                @apply --button-active;
+            }
+
+            .chat-icon {
+                @apply --chat-blue-normal;
+            }
+
+            @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) {
+                .chat-icon {
+                    @apply --retina;
+                }
+            }
         </style>
         <iron-media-query query="(min-width: 600px)" query-matches="{{wide}}"></iron-media-query>
         <div class$="{{_checkPending(item.status)}}" wide-layout$="{{wide}}">
+            <template is="dom-if" if="[[_showChatButton(item, address, hashtag)]]">
+                <div class="chat-button" on-tap="_toChat">
+                    <div class="chat-icon"></div>
+                </div>
+            </template>
             <div class="time">[[_formatDate(item.timestamp)]]</div>
             <div class="text">This deal has been completed.</div>
         </div>
@@ -64,6 +95,8 @@
             static get properties() {
                 return {
                     item: Object,
+                    address: Object,
+                    hashtag: Object,
                 };
             }
             /**
@@ -83,6 +116,36 @@
             _checkPending(status) {
                 return (status == '2' || status == '4') ? "container" : "container pending";
             }
+            _showChatButton(item, address, hashtag) {
+                return (
+                    (
+                        item
+                        && item.status
+                        && item.status == '2'
+                        && (item.seekerAddress
+                            && item.seekerAddress == address)
+                        || (item.providerAddress
+                            && item.providerAddress == address
+
+                        )
+                    )
+                    ||
+                    (
+                        item
+                        && item.status
+                        && item.status == '4'
+                        && hashtag
+                        && hashtag.maintainerAddress
+                        && address
+                        && address == hashtag.maintainerAddress)
+                )
+            }
+            /**
+            * Change the route to the chat view
+            */
+            _toChat() {
+                this.dispatchEvent(new CustomEvent('chat'));
+            }
         }
         window.customElements.define(
             MyDetailSimpledealDone.is,
diff --git a/src/pages/detail/detail-simpledeal.html b/src/pages/detail/detail-simpledeal.html
index 476d7a5c..773c66db 100644
--- a/src/pages/detail/detail-simpledeal.html
+++ b/src/pages/detail/detail-simpledeal.html
@@ -121,7 +121,7 @@
           </template>
 
           <template is="dom-if" if="{{_isEqualTo(status, 'done')}}">
-            <detail-simpledeal-done item="[[item]]"></detail-simpledeal-done>
+            <detail-simpledeal-done item="[[item]]" address="[[address]]" hashtag="[[hashtag]]" on-chat="_handleOnChat"></detail-simpledeal-done>
           </template>
 
           <template is="dom-if" if="{{_isEqualTo(status, 'input conflict')}}">