Merge pull request #5536 from whymarrh/add-token-help

Add clarifying text to the "Add Token" button

1 files changed, 34 insertions, 0 deletions

diff --git a/ui/app/components/add-token-button/add-token-button.component.js b/ui/app/components/add-token-button/add-token-button.component.js
new file mode 100644
index 000000000..10887aed8
--- /dev/null
+++ b/ui/app/components/add-token-button/add-token-button.component.js
@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types'
+import React, {PureComponent} from 'react'
+
+export default class AddTokenButton extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func.isRequired,
+  }
+
+  static defaultProps = {
+    onClick: () => {},
+  }
+
+  static propTypes = {
+    onClick: PropTypes.func,
+  }
+
+  render () {
+    const { t } = this.context
+    const { onClick } = this.props
+
+    return (
+      <div className="add-token-button">
+        <h1 className="add-token-button__help-header">{t('missingYourTokens')}</h1>
+        <p className="add-token-button__help-desc">{t('clickToAdd', [t('addToken')])}</p>
+        <div
+          className="add-token-button__button"
+          onClick={onClick}
+        >
+          {t('addToken')}
+        </div>
+      </div>
+    )
+  }
+}