use UI button for add token functionality (#8781)

app/_locales/am/messages.json

@@ -648,9 +648,6 @@
   "metamaskVersion": {
     "message": "የ MetaMask ስሪት"
   },
-  "missingYourTokens": {
-    "message": "ተለዋጭ ስሞችዎን አላዩም?"
-  },
   "mobileSyncText": {
     "message": "እርስዎ መሆንዎትን ለማረጋገጥ እባከዎ የይለፍ ቃልዎን ያስገቡ!"
   },

app/_locales/ar/messages.json

@@ -644,9 +644,6 @@
   "metamaskVersion": {
     "message": "إصدار MetaMask "
   },
-  "missingYourTokens": {
-    "message": "لا تجد رموزك؟"
-  },
   "mobileSyncText": {
     "message": "يرجى إدخال كلمة مرورك لتأكيد هويتك!"
   },

app/_locales/bg/messages.json

@@ -647,9 +647,6 @@
   "metamaskVersion": {
     "message": "Версия на MetaMask"
   },
-  "missingYourTokens": {
-    "message": "Не виждате жетоните си?"
-  },
   "mobileSyncText": {
     "message": "Моля, въведете вашата парола, за да потвърдите, че сте вие!"
   },

app/_locales/bn/messages.json

@@ -651,9 +651,6 @@
   "metamaskVersion": {
     "message": "MetaMask সংস্করণ"
   },
-  "missingYourTokens": {
-    "message": "আপনার টোকেনগুলি দেখতে পাচ্ছেন না?"
-  },
   "mobileSyncText": {
     "message": "এটি যে আপনি তা নিশ্চিত করতে অনুগ্রহ করে আপনার পাসওয়ার্ড লিখুন!"
   },

app/_locales/ca/messages.json

@@ -635,9 +635,6 @@
   "metamaskVersion": {
     "message": "Versió MetaMask"
   },
-  "missingYourTokens": {
-    "message": "No veus els teus tokens?"
-  },
   "mobileSyncText": {
     "message": "Si us plau, introdueix la teva contrasenya per confirmar que ets tu!"
   },

app/_locales/da/messages.json

@@ -635,9 +635,6 @@
   "metamaskDescription": {
     "message": "Som forbinder dig til Ethereum og de decentraliserede internet."
   },
-  "missingYourTokens": {
-    "message": "Kan du ikke se dine tokens?"
-  },
   "mobileSyncText": {
     "message": "Indtast din adgangskode for at bekræfte, at det er dig!"
   },

app/_locales/de/messages.json

@@ -627,9 +627,6 @@
   "metamaskVersion": {
     "message": "MetaMask-Version"
   },
-  "missingYourTokens": {
-    "message": "Sie können Ihre Token nicht sehen?"
-  },
   "mobileSyncText": {
     "message": "Bitte geben Sie Ihr Passwort ein, um Ihre Identität zu verifizieren!"
   },

app/_locales/el/messages.json

@@ -648,9 +648,6 @@
   "metamaskVersion": {
     "message": "Έκδοση MetaMask "
   },
-  "missingYourTokens": {
-    "message": "Δεν βλέπετε τα διακριτικά σας;"
-  },
   "mobileSyncText": {
     "message": "Παρακαλούμε δώστε τον κωδικό πρόσβασής σας για να επιβεβαιώσετε ότι είστε εσείς!"
   },

app/_locales/en/messages.json

@@ -935,9 +935,6 @@
   "metamaskVersion": {
     "message": "MetaMask Version"
   },
-  "missingYourTokens": {
-    "message": "Don't see your tokens?"
-  },
   "mobileSyncText": {
     "message": "Please enter your password to confirm it's you!"
   },

app/_locales/es/messages.json

@@ -527,9 +527,6 @@
   "metamaskVersion": {
     "message": "Versión de MetaMask"
   },
-  "missingYourTokens": {
-    "message": "¿No ves tus tokens?"
-  },
   "myAccounts": {
     "message": "Mis cuentas"
   },

app/_locales/es_419/messages.json

@@ -636,9 +636,6 @@
   "metamaskVersion": {
     "message": "Versión de MetaMask"
   },
-  "missingYourTokens": {
-    "message": "¿No puedes ver tus tokens?"
-  },
   "mobileSyncText": {
     "message": "Ingresa tu contraseña para confirmar que eres tú."
   },

app/_locales/et/messages.json

@@ -641,9 +641,6 @@
   "metamaskVersion": {
     "message": "MetaMaski versioon"
   },
-  "missingYourTokens": {
-    "message": "Te ei näe oma lube?"
-  },
   "mobileSyncText": {
     "message": "Sisestage parool, et saaksime teid tuvastada!"
   },

app/_locales/fa/messages.json

@@ -651,9 +651,6 @@
   "metamaskVersion": {
     "message": "نسخه MetaMask"
   },
-  "missingYourTokens": {
-    "message": "آیا رمزیاب های تان را نمیبیند؟"
-  },
   "mobileSyncText": {
     "message": "لطفًا رمز عبور را وارد نمایید تا تأیید شود که خود شما هستید!"
   },

app/_locales/fi/messages.json

@@ -648,9 +648,6 @@
   "metamaskVersion": {
     "message": "MetaMask-versio"
   },
-  "missingYourTokens": {
-    "message": "Etkö näe tietueitasi?"
-  },
   "mobileSyncText": {
     "message": "Vahvista henkilöllisyytesi antamalla salasanasi!"
   },

app/_locales/fil/messages.json

@@ -589,9 +589,6 @@
   "metamaskVersion": {
     "message": "Bersyon ng MetaMask"
   },
-  "missingYourTokens": {
-    "message": "Hindi mo ba nakikita ang iyong mga token?"
-  },
   "mobileSyncText": {
     "message": "Pakilagay ang iyong password para kumpirmahing ikaw ito!"
   },

app/_locales/fr/messages.json

@@ -633,9 +633,6 @@
   "metamaskVersion": {
     "message": "Version de MetaMask"
   },
-  "missingYourTokens": {
-    "message": "Vous ne voyez pas vos jetons ?"
-  },
   "mobileSyncText": {
     "message": "Veuillez entrer votre mot de passe pour confirmer que c'est bien vous !"
   },

app/_locales/he/messages.json

@@ -648,9 +648,6 @@
   "metamaskVersion": {
     "message": "גרסת MetaMask"
   },
-  "missingYourTokens": {
-    "message": "אין באפשרותך לראות את הטוקנים שלך?"
-  },
   "mobileSyncText": {
     "message": "נא להזין את הססמה שלך כדי לאשר שזה/זו אכן את/ה!"
   },

app/_locales/hi/messages.json

@@ -648,9 +648,6 @@
   "metamaskVersion": {
     "message": "MetaMask का संस्करण"
   },
-  "missingYourTokens": {
-    "message": "अपने टोकन को देख नहीं पा रहें हैं?"
-  },
   "mobileSyncText": {
     "message": "यह आप ही हैं इसकी पुष्टि करने के लिए कृपया अपना पासवर्ड दर्ज करें!"
   },

app/_locales/hr/messages.json

@@ -644,9 +644,6 @@
   "metamaskVersion": {
     "message": "Inačica usluge MetaMask"
   },
-  "missingYourTokens": {
-    "message": "Ne vidite svoje tokene?"
-  },
   "mobileSyncText": {
     "message": "Upišite svoju lozinku kako biste potvrdili da ste to vi!"
   },

app/_locales/ht/messages.json

@@ -383,9 +383,6 @@
   "metamaskVersion": {
     "message": "MetaMask Vèsyon"
   },
-  "missingYourTokens": {
-    "message": "Ou pa wè token ou a?"
-  },
   "myAccounts": {
     "message": "Kont mwen"
   },

app/_locales/hu/messages.json

@@ -644,9 +644,6 @@
   "metamaskVersion": {
     "message": "MetaMask verzió"
   },
-  "missingYourTokens": {
-    "message": "Nem látja az érméit?"
-  },
   "mobileSyncText": {
     "message": "Kérünk írd be jelszavad, hogy igazold kiléted!"
   },

app/_locales/id/messages.json

@@ -632,9 +632,6 @@
   "metamaskVersion": {
     "message": "Versi MetaMask"
   },
-  "missingYourTokens": {
-    "message": "Tidak melihat token Anda?"
-  },
   "mobileSyncText": {
     "message": "Harap masukkan sandi untuk mengonfirmasi ini memang Anda!"
   },

app/_locales/it/messages.json

@@ -789,9 +789,6 @@
   "metamaskVersion": {
     "message": "versione di MetaMask"
   },
-  "missingYourTokens": {
-    "message": "Non vedi i tuoi token?"
-  },
   "mobileSyncText": {
     "message": "Per favore inserisci la password per confermare che sei te!"
   },

app/_locales/kn/messages.json

@@ -651,9 +651,6 @@
   "metamaskVersion": {
     "message": "MetaMask ಆವೃತ್ತಿ"
   },
-  "missingYourTokens": {
-    "message": "ನಿಮ್ಮ ಟೋಕನ್‌ಗಳು ಕಾಣಿಸುತ್ತಿಲ್ಲವೇ?"
-  },
   "mobileSyncText": {
     "message": "ಇದು ನೀವೇ ಎಂಬುದನ್ನು ಖಚಿತಪಡಿಸಲು ದಯವಿಟ್ಟು ನಿಮ್ಮ ಪಾಸ್‌ವರ್ಡ್ ಅನ್ನು ನಮೂದಿಸಿ!"
   },

app/_locales/ko/messages.json

@@ -645,9 +645,6 @@
   "metamaskVersion": {
     "message": "메타마스크 버전"
   },
-  "missingYourTokens": {
-    "message": "당신의 토큰이 보이지 않나요?"
-  },
   "mobileSyncText": {
     "message": "본인 여부를 확인하기 위해 비밀번호를 입력해 주세요!"
   },

app/_locales/lt/messages.json

@@ -651,9 +651,6 @@
   "metamaskVersion": {
     "message": "„MetaMask“ versija"
   },
-  "missingYourTokens": {
-    "message": "Nematote savo žetonų?"
-  },
   "mobileSyncText": {
     "message": "Įveskite savo slaptažodį, kad patvirtintumėte, jog tai tikrai jūs!"
   },

app/_locales/lv/messages.json

@@ -647,9 +647,6 @@
   "metamaskVersion": {
     "message": "MetaMask versija"
   },
-  "missingYourTokens": {
-    "message": "Neredzat savus marķierus?"
-  },
   "mobileSyncText": {
     "message": "Lūdzu, ievadiet paroli, lai apstiprinātu, ka tas esat jūs."
   },

app/_locales/ms/messages.json

@@ -625,9 +625,6 @@
   "metamaskVersion": {
     "message": "Versi MetaMask"
   },
-  "missingYourTokens": {
-    "message": "Tidak nampak token anda?"
-  },
   "mobileSyncText": {
     "message": "Sila masukkan kata laluan anda untuk mengesahkan ini memang anda!"
   },

app/_locales/no/messages.json

@@ -641,9 +641,6 @@
   "metamaskVersion": {
     "message": "MetaMask-versjon "
   },
-  "missingYourTokens": {
-    "message": "Ser du ikke sjetongene dine?"
-  },
   "mobileSyncText": {
     "message": "Vennligst skriv inn passordet ditt for å bekrefte at det er deg!"
   },

app/_locales/pl/messages.json

@@ -645,9 +645,6 @@
   "metamaskVersion": {
     "message": "Wersja MetaMask"
   },
-  "missingYourTokens": {
-    "message": "Nie widzisz swoich token?"
-  },
   "mobileSyncText": {
     "message": "Wpisz hasło, aby potwierdzić, że to Ty!"
   },

app/_locales/pt_BR/messages.json

@@ -639,9 +639,6 @@
   "metamaskVersion": {
     "message": "Versão do MetaMask"
   },
-  "missingYourTokens": {
-    "message": "Não está vendo seus tokens?"
-  },
   "mobileSyncText": {
     "message": "Insira sua senha para confirmar que é você!"
   },

app/_locales/ro/messages.json

@@ -638,9 +638,6 @@
   "metamaskVersion": {
     "message": "Versiune MetaMask"
   },
-  "missingYourTokens": {
-    "message": "Nu vă vedeți token-urile?"
-  },
   "mobileSyncText": {
     "message": "Vă rugăm introduceți parola pentru a vă confirma identitatea!"
   },

app/_locales/ru/messages.json

@@ -868,9 +868,6 @@
   "metamaskVersion": {
     "message": "Версия MetaMask"
   },
-  "missingYourTokens": {
-    "message": "Не видите свои токены?"
-  },
   "mobileSyncText": {
     "message": "Пожалуйста, введите ваш пароль, чтобы подтвердить, что это вы!"
   },

app/_locales/sk/messages.json

@@ -620,9 +620,6 @@
   "metamaskVersion": {
     "message": "Verzia MetaMask"
   },
-  "missingYourTokens": {
-    "message": "Nevidíte svoje tokeny?"
-  },
   "mobileSyncText": {
     "message": "Zadajte svoje heslo a potvrďte, že ste to vy!"
   },

app/_locales/sl/messages.json

@@ -636,9 +636,6 @@
   "metamaskVersion": {
     "message": "Različica"
   },
-  "missingYourTokens": {
-    "message": "Ne vidite vaših žetonov?"
-  },
   "mobileSyncText": {
     "message": "Vnesite geslo in potrdite, da ste to vi."
   },

app/_locales/sr/messages.json

@@ -642,9 +642,6 @@
   "metamaskVersion": {
     "message": "MetaMask verzija"
   },
-  "missingYourTokens": {
-    "message": "Ne vidite svoje tokene?"
-  },
   "mobileSyncText": {
     "message": "Molimo vas unesite šifru kako biste potvrdili da ste to vi!"
   },

app/_locales/sv/messages.json

@@ -635,9 +635,6 @@
   "metamaskVersion": {
     "message": "MetaMask-version"
   },
-  "missingYourTokens": {
-    "message": "Ser du inte dina tokens?"
-  },
   "mobileSyncText": {
     "message": "Var vänlig ange ditt lösenord för att bekräfta att det är du!"
   },

app/_locales/sw/messages.json

@@ -629,9 +629,6 @@
   "metamaskVersion": {
     "message": "Toleo la MetaMask"
   },
-  "missingYourTokens": {
-    "message": "Je, huoni vianzio vyako?"
-  },
   "mobileSyncText": {
     "message": "Tafadhali ingiza nenosiri lako ili kuthibitisha kuwa ni wewe!"
   },

app/_locales/uk/messages.json

@@ -651,9 +651,6 @@
   "metamaskVersion": {
     "message": "Версія MetaMask"
   },
-  "missingYourTokens": {
-    "message": "Не бачите ваших токенів?"
-  },
   "mobileSyncText": {
     "message": "Введіть пароль, щоб підтвердити свою особу!"
   },

app/_locales/zh_CN/messages.json

@@ -639,9 +639,6 @@
   "metamaskVersion": {
     "message": "MetaMask 版本"
   },
-  "missingYourTokens": {
-    "message": "无法看到您的代币？"
-  },
   "mobileSyncText": {
     "message": "请输入密码确认个人身份！"
   },

app/_locales/zh_TW/messages.json

@@ -645,9 +645,6 @@
   "metamaskVersion": {
     "message": "MetaMask 版本"
   },
-  "missingYourTokens": {
-    "message": "看不到您的代幣？"
-  },
   "mobileSyncText": {
     "message": "請輸入密碼確認身份！"
   },

ui/app/components/app/add-token-button/add-token-button.component.js

@@ -1,33 +1,35 @@
-import PropTypes from 'prop-types'
+import React from 'react'
-import React, { PureComponent } from 'react'
+import { useMetricEvent } from '../../../hooks/useMetricEvent'
+import { useI18nContext } from '../../../hooks/useI18nContext'
+import { useHistory } from 'react-router-dom'
+import { ADD_TOKEN_ROUTE } from '../../../helpers/constants/routes'
+import Button from '../../ui/button'
 
-export default class AddTokenButton extends PureComponent {
-  static contextTypes = {
-    t: PropTypes.func.isRequired,
-  }
 
-  static defaultProps = {
+export default function AddTokenButton () {
-    onClick: () => {},
+  const addTokenEvent = useMetricEvent({
-  }
+    eventOpts: {
+      category: 'Navigation',
+      action: 'Token Menu',
+      name: 'Clicked "Add Token"',
+    },
+  })
+  const t = useI18nContext()
+  const history = useHistory()
 
-  static propTypes = {
+  return (
-    onClick: PropTypes.func,
+    <div className="add-token-button">
-  }
+      <Button
-
+        className="add-token-button__button"
-  render () {
+        type="secondary"
-    const { t } = this.context
+        rounded
-    const { onClick } = this.props
+        onClick={() => {
-
+          history.push(ADD_TOKEN_ROUTE)
-    return (
+          addTokenEvent()
-      <div className="add-token-button">
+        }}
-        <span className="add-token-button__description">{t('missingYourTokens')}</span>
+      >
-        <button
+        {t('addToken')}
-          className="add-token-button__button"
+      </Button>
-          onClick={onClick}
+    </div>
-        >
+  )
-          {t('addToken')}
-        </button>
-      </div>
-    )
-  }
 }

ui/app/components/app/add-token-button/index.scss

@@ -1,22 +1,6 @@
 .add-token-button {
-  width: 100%;
-  height: 90px;
-  padding: 20px;
-  text-align: center;
-  font-size: 1rem;
-
   &__button {
-    background-color: transparent;
+    max-width: 200px;
-    color: $Blue-500;
+    margin: 16px auto;
-    display: inline-block;
-    font-size: 1rem;
-
-    &:hover {
-      color: $Blue-400;
-    }
-
-    &:active {
-      color: $Blue-600;
-    }
   }
 }