react-feather#Download TypeScript Examples

export default function DepositModal(): ReactElement {
  const { beeDebugApi } = useContext(SettingsContext)

  return (
    <WithdrawDepositModal
      successMessage="Successful deposit."
      errorMessage="Error with depositing"
      dialogMessage="Specify the amount of BZZ you would like to deposit to your node."
      label="Deposit"
      icon={<Download size="1rem" />}
      min={new BigNumber(0)}
      action={(amount: bigint) => {
        if (!beeDebugApi) throw new Error('Bee Debug URL is not valid')

        return beeDebugApi.depositTokens(amount.toString())
      }}
    />
  )
}

export function DownloadActionBar({
  onOpen,
  onCancel,
  onDownload,
  onUpdateFeed,
  hasIndexDocument,
  loading,
}: Props): ReactElement {
  return (
    <Grid container justifyContent="space-between">
      <ExpandableListItemActions>
        {hasIndexDocument && (
          <SwarmButton onClick={onOpen} iconType={Link} disabled={loading}>
            View Website
          </SwarmButton>
        )}
        <SwarmButton onClick={onDownload} iconType={Download} disabled={loading} loading={loading}>
          Download
        </SwarmButton>
        <SwarmButton onClick={onCancel} iconType={X} disabled={loading} cancel>
          Close
        </SwarmButton>
      </ExpandableListItemActions>
      <Box mb={1} mr={1}>
        <SwarmButton onClick={onUpdateFeed} iconType={Bookmark} disabled={loading}>
          Update Feed
        </SwarmButton>
      </Box>
    </Grid>
  )
}

export function ExportFeedDialog({ identity, onClose }: Props): ReactElement {
  const { enqueueSnackbar } = useSnackbar()

  const classes = useStyles()

  function onDownload() {
    saveAs(
      new Blob([identity.identity], {
        type: 'application/json',
      }),
      identity.name + '.json',
    )
  }

  function getExportText() {
    return identity.type === 'V3' ? 'JSON file' : 'the private key string'
  }

  function onCopy() {
    navigator.clipboard
      .writeText(identity.identity)
      .then(() => enqueueSnackbar('Copied to Clipboard', { variant: 'success' }))
  }

  return (
    <SwarmDialog>
      <Box mb={4}>
        <TitleWithClose onClose={onClose}>Export</TitleWithClose>
      </Box>
      <Box mb={2}>
        <Typography align="center">{`We exported the identity associated with this feed as ${getExportText()}.`}</Typography>
      </Box>
      <Box mb={4} className={classes.wrapper}>
        <Code prettify>{identity.identity}</Code>
      </Box>
      <ExpandableListItemActions>
        <SwarmButton iconType={Download} onClick={onDownload}>
          Download JSON File
        </SwarmButton>
        <SwarmButton iconType={Clipboard} onClick={onCopy}>
          Copy To Clipboard
        </SwarmButton>
      </ExpandableListItemActions>
    </SwarmDialog>
  )
}

DownloadStyled = chakra(Download)

DownloadStyled = chakra(Download)

Backup = () => {
  const [importValid, setImportValid] = useState<boolean>()
  const [checkState, setCheckState] = useState<Record<string, boolean>>({
    general: true,
    search: true,
    theme: true,
    surface: true,
    bookmarks: true,
  })
  const prefix = useStoragePrefix()

  const Backup = useMemo(
    () =>
      storageBackup(
        Object.keys(checkState)
          .filter(key => checkState[key])
          .map(key => prefix + key)
      ),
    [checkState, prefix]
  )

  const onImport = (file: File) => {
    Backup.restore(file).then(valid => {
      if (valid) window.location.reload()
      else setImportValid(false)
    })
  }

  const checkGeneral = (general: boolean) =>
    setCheckState({ ...checkState, general })

  const checkSearch = (search: boolean) =>
    setCheckState({ ...checkState, search })

  const checkTheme = (theme: boolean) => setCheckState({ ...checkState, theme })

  const checkSurface = (surface: boolean) =>
    setCheckState({ ...checkState, surface })

  const checkBookmarks = (bookmarks: boolean) =>
    setCheckState({ ...checkState, bookmarks })

  return (
    <Section title="Backup">
      <CenterLayout>
        <Checkbox
          label="Bookmarks"
          checked={checkState.bookmarks}
          onChange={checkBookmarks}
        />
        <Checkbox
          label="General"
          checked={checkState.general}
          onChange={checkGeneral}
        />
        <Checkbox
          label="Search"
          checked={checkState.search}
          onChange={checkSearch}
        />
        <Checkbox
          label="Surface"
          checked={checkState.surface}
          onChange={checkSurface}
        />
        <Checkbox
          label="Theme"
          checked={checkState.theme}
          onChange={checkTheme}
        />
      </CenterLayout>
      <br />
      <SpacedLayout>
        <FileInput
          label="Import"
          id="backup-import"
          valid={importValid}
          onChange={onImport}
        />
        <Button onClick={() => Backup.download()}>
          Download <Download />
        </Button>
      </SpacedLayout>
      <Note>Both, import and download, will only use the checked options!</Note>
    </Section>
  )
}

ShareModal: React.FC<ShareModalProps> = ({ open, onClose, data, date }) => {
  const [copied, setCopied] = useState(false);
  const svgContainer = useRef<any>(null);

  // We have to insert the CSS locally so saveSvgAsPng can query fonts
  useEffect(() => {
    fetch('https://use.typekit.net/jrq0bbf.css')
      .then((request: any) => request.text())
      .then((css: string) => {
        const style = document.createElement('style');
        style.appendChild(document.createTextNode(css));
        document.head.appendChild(style);
      });
  }, []);

  if (!open) {
    return null;
  }

  const download = async () => {
    await saveSvgAsPng(svgContainer.current.firstChild, 'crypofees.png');
  };

  const copy = async () => {
    const uri = await svgAsPngUri(svgContainer.current.firstChild, 'crypofees.png');
    const blob = uriToBlob(uri);
    // @ts-ignore
    navigator.clipboard.write([
      // @ts-ignore
      new ClipboardItem({ 'image/png': blob }), // eslint-disable-line no-undef
    ]);
    setCopied(true);
    setTimeout(() => setCopied(false), 5000);
  };

  return (
    <div className="modal" onClick={onClose}>
      <div className="content" onClick={(e: any) => e.stopPropagation()}>
        <h2>
          <button className="close" onClick={onClose}>
            ×
          </button>
          Share
        </h2>

        <div className="card-border" ref={svgContainer}>
          <SocialCard data={data} date={date} />
        </div>

        <div className="buttons">
          <Button
            href={`https://twitter.com/intent/tweet?text=${encodeURI(
              'CryptoFees.info'
            )}&url=${encodeURI(window.location.href)}`}
            Icon={Twitter}
          >
            Share on Twitter
          </Button>

          <Button onClick={copy} Icon={Copy}>
            {copied ? 'Copied' : 'Copy Image'}
          </Button>
          <Button onClick={download} Icon={Download}>
            Download Image
          </Button>
        </div>
      </div>

      <style jsx>{`
        .modal {
          position: fixed;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          background: #aaaaaaaa;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        }

        .content {
          width: 600px;
          max-width: 100%;
          background: #f9fafc;
          padding: 12px;
        }

        .card-border {
          margin: 4px 0;
          border: solid 1px #777;
        }

        h2 {
          margin: 0;
        }

        .close {
          border: none;
          background: transparent;
          float: right;
          font-size: 24px;
          cursor: pointer;
          outline: none;
        }

        .buttons {
          display: flex;
        }
        .buttons > :global(*) {
          margin-right: 4px;
        }
      `}</style>
    </div>
  );
}

export default function Feeds(): ReactElement {
  const { identities, setIdentities } = useContext(IdentityContext)
  const { status } = useContext(BeeContext)

  const navigate = useNavigate()

  const [selectedIdentity, setSelectedIdentity] = useState<Identity | null>(null)
  const [showImport, setShowImport] = useState(false)
  const [showExport, setShowExport] = useState(false)
  const [showDelete, setShowDelete] = useState(false)

  function createNewFeed() {
    return navigate(ROUTES.FEEDS_NEW)
  }

  function viewFeed(uuid: string) {
    navigate(ROUTES.FEEDS_PAGE.replace(':uuid', uuid))
  }

  function onDialogClose() {
    setShowDelete(false)
    setShowExport(false)
    setShowImport(false)
    setSelectedIdentity(null)
  }

  function onDelete(identity: Identity) {
    onDialogClose()
    const updatedFeeds = identities.filter(x => x.uuid !== identity.uuid)
    setIdentities(updatedFeeds)
    persistIdentitiesWithoutUpdate(updatedFeeds)
  }

  function onShowExport(identity: Identity) {
    setSelectedIdentity(identity)
    setShowExport(true)
  }

  function onShowDelete(identity: Identity) {
    setSelectedIdentity(identity)
    setShowDelete(true)
  }

  if (status.all === CheckState.ERROR) return <TroubleshootConnectionCard />

  return (
    <div>
      {showImport && <ImportFeedDialog onClose={() => setShowImport(false)} />}
      {showExport && selectedIdentity && <ExportFeedDialog identity={selectedIdentity} onClose={onDialogClose} />}
      {showDelete && selectedIdentity && (
        <DeleteFeedDialog
          identity={selectedIdentity}
          onClose={onDialogClose}
          onConfirm={(identity: Identity) => onDelete(identity)}
        />
      )}
      <Box mb={4}>
        <Typography variant="h1">Feeds</Typography>
      </Box>
      <Box mb={4}>
        <ExpandableListItemActions>
          <SwarmButton iconType={PlusSquare} onClick={createNewFeed}>
            Create New Feed
          </SwarmButton>
          <SwarmButton iconType={PlusSquare} onClick={() => setShowImport(true)}>
            Import Feed
          </SwarmButton>
        </ExpandableListItemActions>
      </Box>
      {identities.map((x, i) => (
        <ExpandableList key={i} label={`${x.name} Website`} defaultOpen>
          <Box mb={0.5}>
            <ExpandableList label={x.name} level={1}>
              <ExpandableListItemKey label="Identity address" value={x.address} />
              <ExpandableListItem label="Identity type" value={formatEnum(x.type)} />
            </ExpandableList>
          </Box>
          <ExpandableListItemKey label="Topic" value={'00'.repeat(32)} />
          {x.feedHash && <ExpandableListItemKey label="Feed hash" value={x.feedHash} />}
          <Box mt={0.75}>
            <ExpandableListItemActions>
              <SwarmButton onClick={() => viewFeed(x.uuid)} iconType={Info}>
                View Feed Page
              </SwarmButton>
              <SwarmButton onClick={() => onShowExport(x)} iconType={Download}>
                Export...
              </SwarmButton>
              <SwarmButton onClick={() => onShowDelete(x)} iconType={Trash}>
                Delete...
              </SwarmButton>
            </ExpandableListItemActions>
          </Box>
        </ExpandableList>
      ))}
    </div>
  )
}