@@ -1,12 +1,14 @@
1−import React, { useRef } from 'react';
1+import React, { useRef, useState } from 'react';
22import * as ob from 'urbit-ob';
33import { saveAs } from 'file-saver';
44import { sigil, stringRenderer } from 'urbit-sigil-js';
55
66import { dataURItoBlob, loadImg, initCanvas } from 'lib/SigilDownloader';
77
8−// const attachClickHandler = (children, handler) => Array.isArray(children) ? children.map((Child,key) => (<Child key={key} onClick={handler} />)) : (<children onClick={handler}>);
8+import WithTooltip from 'components/WithTooltip';
9+
910export default function SigilDownloader({ point, children }) {
11+ const [downloaded, setDownloaded] = useState(false);
1012 const downloadSigil = () => {
1113 const patp = ob.patp(point);
1214
@@ -36,14 +38,13 @@ export default function SigilDownloader({ point, children }) {
3638 const svgText = new XMLSerializer().serializeToString(svgDocument);
3739 const svg64 = btoa(svgText);
3840
39− const svgBlob = new Blob([svgText], { type: 'image/svg+xml' });
40− saveAs(svgBlob, `${patp}.svg`);
41−
4241 const pngTask = loadImg(DATA_URI_PREFIX + svg64, _size, _size).then(img => {
4342 ctx.drawImage(img, 0, 0, _size, _size);
4443 const png = dataURItoBlob(canvas.toDataURL('image/png'));
4544 saveAs(png, `${patp}.png`);
4645 ctx.clearRect(0, 0, pngSize, pngSize);
46+
47+ setDownloaded(true);
4748 });
4849
4950 return pngTask;
@@ -51,11 +52,11 @@ export default function SigilDownloader({ point, children }) {
5152 const canvasRef = useRef(null);
5253
5354 return (
54− <>
55+ <WithTooltip content={downloaded ? 'Downloaded!' : 'Download'}>
5556 {React.Children.map(children, child =>
5657 React.cloneElement(child, { onClick: downloadSigil })
5758 )}
5859 <canvas style={{ display: 'none' }} ref={canvasRef} />
59− </>
60+ </WithTooltip>
6061 );
6162}