@@ -5,9 +5,13 @@ import { sigil, stringRenderer } from 'urbit-sigil-js';
55
66import { dataURItoBlob, loadImg, initCanvas } from 'lib/SigilDownloader';
77
8−import WithTooltip from 'components/WithTooltip';
8+import { DownloadButton } from 'components/Buttons';
99
10−export default function SigilDownloader({ point, children }) {
10+export default function DownloadSigilButton({
11+ point,
12+ children = 'Download Sigil',
13+ ...rest
14+}) {
1115 const [downloaded, setDownloaded] = useState(false);
1216 const downloadSigil = () => {
1317 const patp = ob.patp(point);
@@ -24,7 +28,6 @@ export default function SigilDownloader({ point, children }) {
2428 // make sigil svg and encoded into base64
2529 const svg = sigil({
2630 patp,
27− full: true,
2831 renderer: stringRenderer,
2932 size: _size,
3033 colors: ['#FFFFFF', '#000000'],
@@ -52,11 +55,18 @@ export default function SigilDownloader({ point, children }) {
5255 const canvasRef = useRef(null);
5356
5457 return (
55− <WithTooltip content={downloaded ? 'Downloaded!' : 'Download'}>
56− {React.Children.map(children, child =>
57− React.cloneElement(child, { onClick: downloadSigil })
58− )}
58+ <>
59+ <DownloadButton
60+ as="span"
61+ disabled={downloaded}
62+ onClick={downloadSigil}
63+ detail={
64+ downloaded ? 'Downloaded!' : 'Download the sigil for this point'
65+ }
66+ {...rest}>
67+ {children}
68+ </DownloadButton>
5969 <canvas style={{ display: 'none' }} ref={canvasRef} />
60− </WithTooltip>
70+ </>
6171 );
6272}