react-device-detect#browserName JavaScript Examples

TabContentDownload = props => {
  const {
    image,
    title,
    ctas,
    ctaHeading,
    ctaChrome,
    ctaFirefox,
    ctaEdge,
    ctaChromeBrowser,
    ctaFirefoxBrowser,
    id,
  } = props
  let ctasDownload = ctas,
    ctasHeading = ctaHeading
  if (id === 'browser') {
    const isChrome = browserName === 'Chrome' || browserName === 'Brave'
    const isFirefox = browserName === 'Firefox'
    const isEdge = browserName === 'Edge'

    if (isChrome || isMobile) {
      ctasDownload = [ctaChrome]
    } else if (isFirefox) {
      ctasDownload = [ctaFirefox]
    } else if (isEdge) {
      ctasHeading =
        'We are aware that Edge is particularly slow at approving updates to MetaMask. For the latest version, we recommend using Firefox or Chrome.'
      ctasDownload = [ctaEdge]
    } else {
      ctasHeading = `${browserName} is not supported. Please download a browser that supports MetaMask.`
      ctasDownload = [ctaChromeBrowser, ctaFirefoxBrowser]
    }
  }
  return (
    <>
      {title ? <Heading>{title}</Heading> : null}
      {image ? (
        <ImageWrapper>
          <Image image={image} />
        </ImageWrapper>
      ) : null}
      <DownLoadWrapper>
        {ctasHeading ? <HeadingCta>{ctasHeading}</HeadingCta> : null}
        <Buttons>
          {ctasDownload && ctasDownload.length
            ? ctasDownload.map(cta => contentfulModuleToComponent(cta))
            : null}
        </Buttons>
      </DownLoadWrapper>
    </>
  )
}

CTA = props => {
  const {
    link: linkDefault,
    text: textDefault,
    align = 'left',
    newTab,
    iconConfig,
    color,
    button = false,
    showRightArrow = false,
    showLeftArrow = false,
    typeLayout = '',
    buttonSize,
    customClick,
    buttonDisplay,
    fontSize,
    buttonGradient,
    downloadBrowsers,
    eventCategory,
    eventLabel,
    hubSpotForm,
    buttonSecondary,
    socialLink,
  } = props
  const [keyBrowser, setKeyBrowser] = React.useState('chrome')
  const isButton = buttonDisplay || button
  const defaultIconConfig = { width: '1.5em', height: '0.5em', fill: 'black' }
  const icon = { ...defaultIconConfig, fill: color, ...iconConfig }
  const isDownloadBrowser = !isEmpty(downloadBrowsers)
  const [delayShow, setDelayShow] = React.useState(isDownloadBrowser)
  const [showPopup, setShowPopup] = React.useState(false)
  let text = textDefault,
    link = linkDefault,
    label = eventLabel,
    lowerBrowserName = lowerCase(browserName),
    iconBrowser = ''
  if (isDownloadBrowser && keyBrowser && downloadBrowsers[keyBrowser]) {
    label = eventLabel.replace('$browser', downloadBrowsers[keyBrowser]?.text)
    text = textDefault.replace('$browser', downloadBrowsers[keyBrowser]?.text)
    if (['ios', 'android', 'not-supported'].includes(keyBrowser)) {
      text = downloadBrowsers[keyBrowser]?.text
    }
    link = downloadBrowsers[keyBrowser]?.link
    iconBrowser = downloadBrowsers[keyBrowser]?.icon
  }
  const onClosePopup = () => {
    setShowPopup(false)
  }
  const handleCustomClick = e => {
    if (hubSpotForm) {
      setShowPopup(true)
      return
    }
    if (customClick) {
      e.preventDefault()
      customClick()
    }
    if (eventCategory && eventLabel) {
      trackCustomEvent({
        category: eventCategory,
        action: 'Click',
        label: label,
      })
    }
  }
  React.useEffect(() => {
    if (isDownloadBrowser) {
      if (
        isMobile &&
        ((isAndroid && downloadBrowsers['android']) ||
          (isIOS && downloadBrowsers['ios']))
      ) {
        if (isAndroid && downloadBrowsers['android']) {
          setKeyBrowser('android')
        } else if (isIOS && downloadBrowsers['ios']) {
          setKeyBrowser('ios')
        }
      } else {
        if (typeof navigator?.brave !== 'undefined') {
          lowerBrowserName = 'brave'
        }
        if (downloadBrowsers[lowerBrowserName]) {
          setKeyBrowser(lowerBrowserName)
        } else if (downloadBrowsers['not-supported']) {
          setKeyBrowser('not-supported')
        } else {
          setKeyBrowser('chrome')
        }
      }
      setDelayShow(false)
    }
  }, [downloadBrowsers, isDownloadBrowser, lowerBrowserName])
  let ele = (
    <CTAContainer
      className={classnames('ctaModuleContainer', {
        socialLink: socialLink,
      })}
      align={align}
    >
      <ContentWrapper
        to={link}
        newTab={newTab || isDownloadBrowser}
        color={color}
        typeLayout={typeLayout}
        onClick={handleCustomClick}
      >
        {socialLink ? <SocialIcon name={socialLink} /> : null}
        <LinkTitle
          className={classnames({
            [`leftArrow`]: showLeftArrow,
            [`rightArrow`]: showRightArrow || socialLink,
          })}
        >
          {showLeftArrow ? <Arrow {...icon} transform={'rotate(180)'} /> : null}
          {text}
          {showRightArrow || socialLink ? <Arrow {...icon} /> : null}
        </LinkTitle>
      </ContentWrapper>
    </CTAContainer>
  )
  if (isButton) {
    ele = (
      <Button
        size={buttonSize}
        link={link}
        text={text}
        className={keyBrowser}
        newTab={newTab || isDownloadBrowser}
        color={buttonSecondary ? 'secondary' : color}
        customClick={handleCustomClick}
        fontSize={fontSize}
        buttonGradient={buttonGradient}
        eventCategory={eventCategory}
        eventLabel={eventLabel}
        iconUrl={!delayShow ? iconBrowser : ''}
        iconPosition={['ios', 'android'].includes(keyBrowser) ? 'start' : 'end'}
        hide={delayShow}
      />
    )
  }

  if (
    isDownloadBrowser &&
    !Object.keys(downloadBrowsers).includes(lowerBrowserName) &&
    downloadBrowsers['browsers-supported']
  ) {
    ele = (
      <BrowserWrapper>
        <BrowserInfo>
          <BrowserInfoTitle>
            {downloadBrowsers['browsers-supported'].text}
          </BrowserInfoTitle>
          <BrowserInfoDesc>
            {downloadBrowsers['browsers-supported'].description}
          </BrowserInfoDesc>
        </BrowserInfo>
        <BrowserList>
          {Object.keys(downloadBrowsers).map(key => {
            const { link, icon, text } = downloadBrowsers[key]
            if (['chrome', 'firefox', 'brave', 'edge'].includes(key)) {
              return (
                <BrowserItem key={text} to={link} newTab>
                  <Image src={icon} />
                  <BrowserName>{text}</BrowserName>
                </BrowserItem>
              )
            }
            return null
          })}
        </BrowserList>
      </BrowserWrapper>
    )
  }

  return (
    <>
      {ele}
      {hubSpotForm ? (
        <Popup showPopup={showPopup} onClosePopup={onClosePopup}>
          {contentfulModuleToComponent({
            ...hubSpotForm,
          })}
        </Popup>
      ) : null}
    </>
  )
}

DownloadPage = props => {
  const {
    data: {
      seo,
      header,
      footer,
      download_extension,
      download_ios,
      download_android,
      browser_chrome,
      browser_firefox,
      browser_brave,
      browser_edge,
      cta_chrome,
      cta_ios,
      cta_android,
      cta_firefox,
      cta_edge,
      cta_chrome_browser,
      cta_firefox_browser,
    },
    location,
  } = props
  const browsers = [
    {
      image: browser_chrome,
      cta: cta_chrome,
      label: 'Chrome',
    },
    {
      image: browser_firefox,
      cta: cta_firefox,
      label: 'Firefox',
    },
    {
      image: browser_brave,
      cta: cta_chrome,
      label: 'Brave',
    },
    {
      image: browser_edge,
      cta: cta_edge,
      label: 'Edge',
    },
  ]

  const appExtensions = {
    browser: {
      image: download_extension,
      label: isMobile ? 'Chrome' : browserName,
      title: 'Install MetaMask for your browser',
      ctaChrome: cta_chrome,
      ctaFirefox: cta_firefox,
      ctaEdge: cta_edge,
      ctaChromeBrowser: cta_chrome_browser,
      ctaFirefoxBrowser: cta_firefox_browser,
    },
    ios: {
      image: download_ios,
      label: 'iOS',
      title: 'Install MetaMask for iPhone',
      ctaText: 'Install MetaMask for iPhone',
      ctas: [cta_ios],
    },
    android: {
      image: download_android,
      label: 'Android',
      title: 'Install MetaMask for Android',
      ctas: [cta_android],
    },
  }
  return (
    <Layout>
      {seo && <Seo moduleConfig={{ ...seo, pagePath: location.pathname }} />}
      <Header moduleConfig={header} hideDownloadBtn />
      <Container>
        <DownloadTitle>Install MetaMask</DownloadTitle>
        <DownloadContainer appExtensions={appExtensions} />
        <DownloadBrowser browsers={browsers} />
      </Container>
      <Footer moduleConfig={footer} />
    </Layout>
  )
}