Add button to force edit token symbol when adding custom token (#6147)

2 files changed, 38 insertions, 2 deletions

diff --git a/ui/app/components/pages/add-token/add-token.component.js b/ui/app/components/pages/add-token/add-token.component.js
index 82299bf88..e860d33bc 100644
--- a/ui/app/components/pages/add-token/add-token.component.js
+++ b/ui/app/components/pages/add-token/add-token.component.js
@@ -43,6 +43,7 @@ class AddToken extends Component {
       customDecimalsError: null,
       autoFilled: false,
       displayedTab: SEARCH_TAB,
+      forceEditSymbol: false,
     }
   }
 
@@ -225,6 +226,7 @@ class AddToken extends Component {
       customSymbolError,
       customDecimalsError,
       autoFilled,
+      forceEditSymbol,
     } = this.state
 
     return (
@@ -241,14 +243,28 @@ class AddToken extends Component {
         />
         <TextField
           id="custom-symbol"
-          label={this.context.t('tokenSymbol')}
+          label={(
+            <div className="add-token__custom-symbol__label-wrapper">
+              <span className="add-token__custom-symbol__label">
+                {this.context.t('tokenSymbol')}
+              </span>
+              {(autoFilled && !forceEditSymbol) && (
+                <div
+                  className="add-token__custom-symbol__edit"
+                  onClick={() => this.setState({ forceEditSymbol: true })}
+                >
+                  {this.context.t('edit')}
+                </div>
+              )}
+            </div>
+          )}
           type="text"
           value={customSymbol}
           onChange={e => this.handleCustomSymbolChange(e.target.value)}
           error={customSymbolError}
           fullWidth
           margin="normal"
-          disabled={autoFilled}
+          disabled={autoFilled && !forceEditSymbol}
         />
         <TextField
           id="custom-decimals"
diff --git a/ui/app/components/pages/add-token/index.scss b/ui/app/components/pages/add-token/index.scss
index 39e86b97b..1690c7654 100644
--- a/ui/app/components/pages/add-token/index.scss
+++ b/ui/app/components/pages/add-token/index.scss
@@ -22,4 +22,24 @@
   &__token-list {
     margin-top: 16px;
   }
+
+  &__custom-symbol {
+
+    &__label-wrapper {
+      display: flex;
+      flex-flow: row nowrap;
+    }
+
+    &__label {
+      flex: 0 0 auto;
+    }
+
+    &__edit {
+      flex: 1 1 auto;
+      text-align: right;
+      color: $curious-blue;
+      padding-right: 4px;
+      cursor: pointer;
+    }
+  }
 }