use UI button for add token functionality (#8781)

2024-12-23 09:52:26 +01:00 · 2020-06-12 11:22:00 -05:00 · 2020-06-12 11:22:00 -05:00 · 73ba992125
commit 73ba992125
parent 4ac4790cfa
43 changed files with 33 additions and 170 deletions
--- a/app/_locales/am/messages.json
+++ b/app/_locales/am/messages.json
@ -648,9 +648,6 @@
  "metamaskVersion": {
    "message": "የ MetaMask ስሪት"
  },
-  "missingYourTokens": {
-    "message": "ተለዋጭ ስሞችዎን አላዩም?"
-  },
  "mobileSyncText": {
    "message": "እርስዎ መሆንዎትን ለማረጋገጥ እባከዎ የይለፍ ቃልዎን ያስገቡ!"
  },
--- a/app/_locales/ar/messages.json
+++ b/app/_locales/ar/messages.json
@ -644,9 +644,6 @@
  "metamaskVersion": {
    "message": "إصدار MetaMask "
  },
-  "missingYourTokens": {
-    "message": "لا تجد رموزك؟"
-  },
  "mobileSyncText": {
    "message": "يرجى إدخال كلمة مرورك لتأكيد هويتك!"
  },
--- a/app/_locales/bg/messages.json
+++ b/app/_locales/bg/messages.json
@ -647,9 +647,6 @@
  "metamaskVersion": {
    "message": "Версия на MetaMask"
  },
-  "missingYourTokens": {
-    "message": "Не виждате жетоните си?"
-  },
  "mobileSyncText": {
    "message": "Моля, въведете вашата парола, за да потвърдите, че сте вие!"
  },
--- a/app/_locales/bn/messages.json
+++ b/app/_locales/bn/messages.json
@ -651,9 +651,6 @@
  "metamaskVersion": {
    "message": "MetaMask সংস্করণ"
  },
-  "missingYourTokens": {
-    "message": "আপনার টোকেনগুলি দেখতে পাচ্ছেন না?"
-  },
  "mobileSyncText": {
    "message": "এটি যে আপনি তা নিশ্চিত করতে অনুগ্রহ করে আপনার পাসওয়ার্ড লিখুন!"
  },
--- a/app/_locales/ca/messages.json
+++ b/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!"
  },
--- a/app/_locales/da/messages.json
+++ b/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!"
  },
--- a/app/_locales/de/messages.json
+++ b/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!"
  },
--- a/app/_locales/el/messages.json
+++ b/app/_locales/el/messages.json
@ -648,9 +648,6 @@
  "metamaskVersion": {
    "message": "Έκδοση MetaMask "
  },
-  "missingYourTokens": {
-    "message": "Δεν βλέπετε τα διακριτικά σας;"
-  },
  "mobileSyncText": {
    "message": "Παρακαλούμε δώστε τον κωδικό πρόσβασής σας για να επιβεβαιώσετε ότι είστε εσείς!"
  },
--- a/app/_locales/en/messages.json
+++ b/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!"
  },
--- a/app/_locales/es/messages.json
+++ b/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"
  },
--- a/app/_locales/es_419/messages.json
+++ b/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ú."
  },
--- a/app/_locales/et/messages.json
+++ b/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!"
  },
--- a/app/_locales/fa/messages.json
+++ b/app/_locales/fa/messages.json
@ -651,9 +651,6 @@
  "metamaskVersion": {
    "message": "نسخه MetaMask"
  },
-  "missingYourTokens": {
-    "message": "آیا رمزیاب های تان را نمیبیند؟"
-  },
  "mobileSyncText": {
    "message": "لطفًا رمز عبور را وارد نمایید تا تأیید شود که خود شما هستید!"
  },
--- a/app/_locales/fi/messages.json
+++ b/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!"
  },
--- a/app/_locales/fil/messages.json
+++ b/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!"
  },
--- a/app/_locales/fr/messages.json
+++ b/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 !"
  },
--- a/app/_locales/he/messages.json
+++ b/app/_locales/he/messages.json
@ -648,9 +648,6 @@
  "metamaskVersion": {
    "message": "גרסת MetaMask"
  },
-  "missingYourTokens": {
-    "message": "אין באפשרותך לראות את הטוקנים שלך?"
-  },
  "mobileSyncText": {
    "message": "נא להזין את הססמה שלך כדי לאשר שזה/זו אכן את/ה!"
  },
--- a/app/_locales/hi/messages.json
+++ b/app/_locales/hi/messages.json
@ -648,9 +648,6 @@
  "metamaskVersion": {
    "message": "MetaMask का संस्करण"
  },
-  "missingYourTokens": {
-    "message": "अपने टोकन को देख नहीं पा रहें हैं?"
-  },
  "mobileSyncText": {
    "message": "यह आप ही हैं इसकी पुष्टि करने के लिए कृपया अपना पासवर्ड दर्ज करें!"
  },
--- a/app/_locales/hr/messages.json
+++ b/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!"
  },
--- a/app/_locales/ht/messages.json
+++ b/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"
  },
--- a/app/_locales/hu/messages.json
+++ b/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!"
  },
--- a/app/_locales/id/messages.json
+++ b/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!"
  },
--- a/app/_locales/it/messages.json
+++ b/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!"
  },
--- a/app/_locales/kn/messages.json
+++ b/app/_locales/kn/messages.json
@ -651,9 +651,6 @@
  "metamaskVersion": {
    "message": "MetaMask ಆವೃತ್ತಿ"
  },
-  "missingYourTokens": {
-    "message": "ನಿಮ್ಮ ಟೋಕನ್‌ಗಳು ಕಾಣಿಸುತ್ತಿಲ್ಲವೇ?"
-  },
  "mobileSyncText": {
    "message": "ಇದು ನೀವೇ ಎಂಬುದನ್ನು ಖಚಿತಪಡಿಸಲು ದಯವಿಟ್ಟು ನಿಮ್ಮ ಪಾಸ್‌ವರ್ಡ್ ಅನ್ನು ನಮೂದಿಸಿ!"
  },
--- a/app/_locales/ko/messages.json
+++ b/app/_locales/ko/messages.json
@ -645,9 +645,6 @@
  "metamaskVersion": {
    "message": "메타마스크 버전"
  },
-  "missingYourTokens": {
-    "message": "당신의 토큰이 보이지 않나요?"
-  },
  "mobileSyncText": {
    "message": "본인 여부를 확인하기 위해 비밀번호를 입력해 주세요!"
  },
--- a/app/_locales/lt/messages.json
+++ b/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!"
  },
--- a/app/_locales/lv/messages.json
+++ b/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."
  },
--- a/app/_locales/ms/messages.json
+++ b/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!"
  },
--- a/app/_locales/no/messages.json
+++ b/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!"
  },
--- a/app/_locales/pl/messages.json
+++ b/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!"
  },
--- a/app/_locales/pt_BR/messages.json
+++ b/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ê!"
  },
--- a/app/_locales/ro/messages.json
+++ b/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!"
  },
--- a/app/_locales/ru/messages.json
+++ b/app/_locales/ru/messages.json
@ -868,9 +868,6 @@
  "metamaskVersion": {
    "message": "Версия MetaMask"
  },
-  "missingYourTokens": {
-    "message": "Не видите свои токены?"
-  },
  "mobileSyncText": {
    "message": "Пожалуйста, введите ваш пароль, чтобы подтвердить, что это вы!"
  },
--- a/app/_locales/sk/messages.json
+++ b/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!"
  },
--- a/app/_locales/sl/messages.json
+++ b/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."
  },
--- a/app/_locales/sr/messages.json
+++ b/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!"
  },
--- a/app/_locales/sv/messages.json
+++ b/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!"
  },
--- a/app/_locales/sw/messages.json
+++ b/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!"
  },
--- a/app/_locales/uk/messages.json
+++ b/app/_locales/uk/messages.json
@ -651,9 +651,6 @@
  "metamaskVersion": {
    "message": "Версія MetaMask"
  },
-  "missingYourTokens": {
-    "message": "Не бачите ваших токенів?"
-  },
  "mobileSyncText": {
    "message": "Введіть пароль, щоб підтвердити свою особу!"
  },
--- a/app/_locales/zh_CN/messages.json
+++ b/app/_locales/zh_CN/messages.json
@ -639,9 +639,6 @@
  "metamaskVersion": {
    "message": "MetaMask 版本"
  },
-  "missingYourTokens": {
-    "message": "无法看到您的代币？"
-  },
  "mobileSyncText": {
    "message": "请输入密码确认个人身份！"
  },
--- a/app/_locales/zh_TW/messages.json
+++ b/app/_locales/zh_TW/messages.json
@ -645,9 +645,6 @@
  "metamaskVersion": {
    "message": "MetaMask 版本"
  },
-  "missingYourTokens": {
-    "message": "看不到您的代幣？"
-  },
  "mobileSyncText": {
    "message": "請輸入密碼確認身份！"
  },
--- a/ui/app/components/app/add-token-button/add-token-button.component.js
+++ b/ui/app/components/app/add-token-button/add-token-button.component.js
@ -1,33 +1,35 @@
-import PropTypes from 'prop-types'
-import React, { PureComponent } from 'react'
+import React 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 = {
-    onClick: () => {},
-  }
+export default function AddTokenButton () {
+  const addTokenEvent = useMetricEvent({
+    eventOpts: {
+      category: 'Navigation',
+      action: 'Token Menu',
+      name: 'Clicked "Add Token"',
+    },
+  })
+  const t = useI18nContext()
+  const history = useHistory()

-  static propTypes = {
-    onClick: PropTypes.func,
-  }
-
-  render () {
-    const { t } = this.context
-    const { onClick } = this.props
-
-    return (
-      <div className="add-token-button">
-        <span className="add-token-button__description">{t('missingYourTokens')}</span>
-        <button
-          className="add-token-button__button"
-          onClick={onClick}
-        >
-          {t('addToken')}
-        </button>
-      </div>
-    )
-  }
+  return (
+    <div className="add-token-button">
+      <Button
+        className="add-token-button__button"
+        type="secondary"
+        rounded
+        onClick={() => {
+          history.push(ADD_TOKEN_ROUTE)
+          addTokenEvent()
+        }}
+      >
+        {t('addToken')}
+      </Button>
+    </div>
+  )
 }
--- a/ui/app/components/app/add-token-button/index.scss
+++ b/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;
-    color: $Blue-500;
-    display: inline-block;
-    font-size: 1rem;
-
-    &:hover {
-      color: $Blue-400;
-    }
-
-    &:active {
-      color: $Blue-600;
-    }
+    max-width: 200px;
+    margin: 16px auto;
  }
 }