react-icons/fa#FaCogs JavaScript Examples

WalletDownloaders = ({ gaCategory, settingsEndpoint }) => {
  const [ platformsData, setPlatformsData ] = useState(null)
  const [ loading, setLoading ] = useState(true)
  const [ hasError, setHasError ] = useState(false)
  const [ activeModal, setActiveModal ] = useState('')
  const checksumRefs = {
    windows: useRef(null),
    darwin: useRef(null),
    linux: useRef(null)
  }

  const validateData = (data) => {
    if (!data.platforms) return false
    const validPlatforms = [ 'windows', 'darwin', 'linux' ]
    if (Object.keys(data.platforms).length !== validPlatforms.length) return false
    let valid = true
    validPlatforms.forEach(platform => {
      if (!data.platforms[platform]) {
        valid = false
      } else {
        const validKeys = [ 'signature', 'hash', 'URL', 'version', 'SHA256' ]
        if (Object.keys(data.platforms[platform]).length !== validKeys.length) {
          valid = false
        } else {
          validKeys.forEach(key => {
            if (typeof data.platforms[platform][key] !== 'string' || !data.platforms[platform][key]) valid = false
          })
        }
      }
    })

    return valid
  }

  const loadDaedalusData = async () => {
    try {
      setLoading(true)
      const result = await fetch(settingsEndpoint)
      const jsonResult = await result.json()
      if (!validateData(jsonResult)) throw new Error('Invalid data')
      setPlatformsData(Object.keys(jsonResult.platforms).map(platform => ({ ...jsonResult.platforms[platform], key: platform })))
      setLoading(false)
    } catch (error) {
      console.error(error.message, error)
      analytics.exception({ description: error.message, fatal: false, args: [ settingsEndpoint ], error })
      setHasError(true)
      setLoading(false)
    }
  }

  useEffect(() => {
    loadDaedalusData()
  }, [])

  const getOrderedPlatforms = (order) => {
    const platforms = []
    order.forEach(platform => {
      platforms.push(platformsData.filter(({ key }) => platform === key).shift())
    })

    return platforms.filter(platform => Boolean(platform))
  }

  const checksumOnClick = (SHA256, platform, version) => (e) => {
    e.preventDefault()
    analytics.click({ category: gaCategory, label: `checksum_copy_${platform}_${version}`, event: e })
    const el = checksumRefs[platform].current
    if (!el) return
    el.select()
    el.setSelectionRange(0, SHA256.length)
    document.execCommand('copy')
  }

  const openModal = (name) => (e) => {
    e.preventDefault()
    setActiveModal(name)
  }

  const getFilename = (URL) => URL.replace(/^.*\/(.*?)$/, '$1')

  const renderTemplateString = (content, { SHA256, URL, version, hash, signature }) => {
    const params = {
      sha256: SHA256,
      version,
      hash,
      signature,
      filename: getFilename(URL)
    }

    return content.replace(/{{\s?([^}\s]+)\s?}}/g, (original, key) => {
      return params[key] || original
    })
  }

  const getPGPFilename = (URL) => `${getFilename(URL)}.asc`
  const getPGPBlob = (signature) => window.Blob && new window.Blob([ signature ], { type: 'text/txt' })
  const getPGPSignatureHref = (signature) => {
    const blob = getPGPBlob(signature)
    return blob ? URL.createObjectURL(blob) : '#'
  }

  const onDownloadPGPSignature = (signature, URL) => (e) => {
    if (window.navigator.msSaveBlob || e.target.href === '#') e.preventDefault()
    if (window.navigator.msSaveBlob) window.navigator.msSaveBlob(getPGPBlob(signature), getPGPFilename(URL))
  }

  const unCacheURL = (url) => {
    return url + '?t=' + (new Date().getTime())
  }

  return (
    <GlobalContentQuery
      render={content => (
        <Box marginTop={4} marginBottom={4}>
          {platformsData && !hasError && !loading &&
            <Container>
              {getOrderedPlatforms(content.downloaders_content.platforms_order.map(platform => platform.platform_name)).map(({ key, signature, hash, URL, version, SHA256 }) => (
                <Box flex={1} key={key} display='flex' flexDirection='column' justifyContent='flex-end' textAlign='center'>
                  <span><strong>{content.downloaders_content[key].full_label}</strong></span>
                  <span>{content.downloaders_content.version}: {version}</span>
                  <Box marginTop={1} marginBottom={1}>
                    <Button
                      component={Link}
                      href={unCacheURL(URL)}
                      variant='contained'
                      color='primary'
                      tracking={{ category: gaCategory, label: `download_${key}_${version}` }}
                    >
                      {content.downloaders_content[key].short_label}<Box component='span' marginLeft={1}><FaDownload /></Box>
                    </Button>
                  </Box>
                  <Box>
                    <span>{content.downloaders_content.sha_checksum}</span>
                    <ChecksumArea
                      ref={checksumRefs[key]}
                      title={content.downloaders_content.copy_to_clipboard}
                      onClick={checksumOnClick(SHA256, key, version)}
                      aria-label={content.downloaders_content.copy_to_clipboard}
                      value={SHA256}
                      readOnly
                      rows={3}
                    />
                    <Link
                      href='#'
                      onClick={openModal(`${key}_checksum`)}
                      tracking={{ category: gaCategory, label: `view_checksum_instructions_${key}_${version}` }}
                    >
                      {content.downloaders_content.verify_checksum}
                    </Link>
                    <Modal
                      open={activeModal === `${key}_checksum`}
                      onClose={openModal('')}
                      disableScrollLock
                    >
                      <ModalContent>
                        <CloseModal
                          href='#'
                          onClick={openModal('')}
                        >
                          <MdClose />
                        </CloseModal>
                        <ModalContentInner>
                          <Markdown
                            source={renderTemplateString(content.downloaders_content[key].checksum_instructions, { SHA256, signature, hash, URL, version })}
                          />
                        </ModalContentInner>
                      </ModalContent>
                    </Modal>
                  </Box>
                  <Box marginTop={1}>
                    <Link
                      onClick={onDownloadPGPSignature(signature, URL)}
                      tracking={{ category: gaCategory, label: `download_pgp_signature_${key}_${version}` }}
                      href={getPGPSignatureHref(signature)}
                      download={getPGPFilename(URL)}
                    >
                      {content.downloaders_content.pgp_signature}<Box marginLeft={1} component='span'><FaDownload /></Box>
                    </Link>
                    <Box>
                      <Link
                        href='#'
                        onClick={openModal(`${key}_pgp`)}
                        tracking={{ category: gaCategory, label: `view_pgp_instructions_${key}_${version}` }}
                      >
                        {content.downloaders_content.verify_signature}
                      </Link>
                      <Modal
                        open={activeModal === `${key}_pgp`}
                        onClose={openModal('')}
                        disableScrollLock
                      >
                        <ModalContent>
                          <CloseModal
                            href='#'
                            onClick={openModal('')}
                          >
                            <MdClose />
                          </CloseModal>
                          <ModalContentInner>
                            <Markdown
                              source={renderTemplateString(content.downloaders_content[key].signature_instructions, { SHA256, signature, hash, URL, version })}
                            />
                          </ModalContentInner>
                        </ModalContent>
                      </Modal>
                    </Box>
                  </Box>
                </Box>
              ))}
            </Container>
          }
          {loading &&
            <LoadingContainer>
              <div>
                <CircularProgress />
              </div>
            </LoadingContainer>
          }
          {hasError &&
            <ErrorContainer pl={12} pr={12}>
              <Typography variant='h1' color='error'><FaCogs /></Typography>
              <Typography variant='h3' color='error'>{content.downloaders_content.no_releases_available}</Typography>
            </ErrorContainer>
          }
        </Box>
      )}
    />
  )
}