metamask-extension/ui/app/pages/add-token/token-list/token-list-placeholder/token-list-placeholder.component.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Button from '../../../../components/ui/button'

export default class TokenListPlaceholder extends Component {
  static contextTypes = {
    t: PropTypes.func,
  }

  render() {
    return (
      <div className="token-list-placeholder">
        <img src="images/tokensearch.svg" />
        <div className="token-list-placeholder__text">
          {this.context.t('addAcquiredTokens')}
        </div>
        <Button
          type="link"
          className="token-list-placeholder__link"
          href="https://metamask.zendesk.com/hc/en-us/articles/360015489031"
          target="_blank"
          rel="noopener noreferrer"
        >
          {this.context.t('learnMore')}
        </Button>
      </div>
    )
  }
}