git.iko.soy/bridge
on master help sign in
Merge pull request #280 from liam-fitzgerald/feature/asset-dl
207376eAnthony Arroyo
src/components/Passport.js+8−2
compare with master
unifiedsplit
@@ -51,7 +51,13 @@ const buildKeyType = permissions => {
51 * ticket is null | boolean
51 * ticket is null | boolean
52 * address is null | Maybe<string>
52 * address is null | Maybe<string>
53 */
53 */
54−function Passport({ point, className, ticket = null, address = Nothing() }) {
54+function Passport({
55+ point,
56+ className,
57+ ticket = null,
58+ address = Nothing(),
59+ onClick,
60+}) {
55 const birthday = usePointBirthday(point.getOrElse(null));
61 const birthday = usePointBirthday(point.getOrElse(null));
56 const visualBirthday = matchBlinkyDate(birthday);
62 const visualBirthday = matchBlinkyDate(birthday);
57
63
@@ -73,7 +79,7 @@ function Passport({ point, className, ticket = null, address = Nothing() }) {
73 })}${ADDRESS_BUFFER_CHARS}`;
79 })}${ADDRESS_BUFFER_CHARS}`;
74
80
75 return (
81 return (
76− <Grid gap={4} className={cn('bg-black r8 p7', className)}>
82+ <Grid onClick={onClick} gap={4} className={cn('bg-black r8 p7', className)}>
77 <Grid.Item cols={[1, 4]}>
83 <Grid.Item cols={[1, 4]}>
78 <MaybeSigil patp={name} size={64} />
84 <MaybeSigil patp={name} size={64} />
79 </Grid.Item>
85 </Grid.Item>
src/components/SigilDownloader.jsnew file+62
@@ -0,0 +1,62 @@
1+import React, { useRef, useState } from 'react';
2+import * as ob from 'urbit-ob';
3+import { saveAs } from 'file-saver';
4+import { sigil, stringRenderer } from 'urbit-sigil-js';
5+
6+import { dataURItoBlob, loadImg, initCanvas } from 'lib/SigilDownloader';
7+
8+import WithTooltip from 'components/WithTooltip';
9+
10+export default function SigilDownloader({ point, children }) {
11+ const [downloaded, setDownloaded] = useState(false);
12+ const downloadSigil = () => {
13+ const patp = ob.patp(point);
14+
15+ const _size = 1024 / window.devicePixelRatio;
16+ const pngSize = 1024;
17+
18+ const DATA_URI_PREFIX = 'data:image/svg+xml;base64,';
19+
20+ // initialize canvas element
21+ const canvas = initCanvas(canvasRef.current, { x: _size, y: _size });
22+ const ctx = canvas.getContext('2d');
23+
24+ // make sigil svg and encoded into base64
25+ const svg = sigil({
26+ patp,
27+ full: true,
28+ renderer: stringRenderer,
29+ size: _size,
30+ colors: ['#FFFFFF', '#000000'],
31+ margin: (54 / 256) * _size,
32+ });
33+
34+ // FF rendering hack
35+ const svgDocument = new DOMParser().parseFromString(svg, 'image/svg+xml');
36+ svgDocument.documentElement.width.baseVal.valueAsString = `${pngSize}px`;
37+ svgDocument.documentElement.height.baseVal.valueAsString = `${pngSize}px`;
38+ const svgText = new XMLSerializer().serializeToString(svgDocument);
39+ const svg64 = btoa(svgText);
40+
41+ const pngTask = loadImg(DATA_URI_PREFIX + svg64, _size, _size).then(img => {
42+ ctx.drawImage(img, 0, 0, _size, _size);
43+ const png = dataURItoBlob(canvas.toDataURL('image/png'));
44+ saveAs(png, `${patp}.png`);
45+ ctx.clearRect(0, 0, pngSize, pngSize);
46+
47+ setDownloaded(true);
48+ });
49+
50+ return pngTask;
51+ };
52+ const canvasRef = useRef(null);
53+
54+ return (
55+ <WithTooltip content={downloaded ? 'Downloaded!' : 'Download'}>
56+ {React.Children.map(children, child =>
57+ React.cloneElement(child, { onClick: downloadSigil })
58+ )}
59+ <canvas style={{ display: 'none' }} ref={canvasRef} />
60+ </WithTooltip>
61+ );
62+}
src/lib/SigilDownloader.jsnew file+45
@@ -0,0 +1,45 @@
1+export const initCanvas = (canvas, size) => {
2+ const { x, y } = size;
3+ const ctx = canvas.getContext('2d');
4+
5+ let ratio = window.devicePixelRatio || 1;
6+
7+ canvas.width = x * ratio;
8+ canvas.height = y * ratio;
9+ canvas.style.width = x + 'px';
10+ canvas.style.height = y + 'px';
11+
12+ ctx.scale(ratio, ratio);
13+
14+ return canvas;
15+};
16+
17+export const loadImg = src =>
18+ new Promise((resolve, reject) => {
19+ const img = new Image();
20+ img.onload = () => resolve(img);
21+ img.onerror = () => reject(`Error loading image. src: ${src}`);
22+ img.src = src;
23+ });
24+
25+export const dataURItoBlob = dataURI => {
26+ // convert base64 to raw binary data held in a string
27+ // doesn't handle URLEncoded DataURIs
28+ const byteString = atob(dataURI.split(',')[1]);
29+ // separate out the mime component
30+ const mimeString = dataURI
31+ .split(',')[0]
32+ .split(':')[1]
33+ .split(';')[0];
34+ // write the bytes of the string to an ArrayBuffer
35+ const ab = new ArrayBuffer(byteString.length);
36+ // create a view into the buffer
37+ let ia = new Uint8Array(ab);
38+ // set the bytes of the buffer to the correct values
39+ for (var i = 0; i < byteString.length; i++) {
40+ ia[i] = byteString.charCodeAt(i);
41+ }
42+ // write the ArrayBuffer to a blob, and you're done
43+ const blob = new Blob([ab], { type: mimeString });
44+ return blob;
45+};
src/views/Point.js+5−2
@@ -1,6 +1,5 @@
1import React, { useCallback } from 'react';
1import React, { useCallback } from 'react';
2import { Just } from 'folktale/maybe';
2import { Just } from 'folktale/maybe';
3−import * as need from 'lib/need';
4import { Grid } from 'indigo-react';
3import { Grid } from 'indigo-react';
5import { azimuth } from 'azimuth-js';
4import { azimuth } from 'azimuth-js';
6
5
@@ -11,7 +10,9 @@ import Greeting from 'components/Greeting';
11import Passport from 'components/Passport';
10import Passport from 'components/Passport';
12import { ForwardButton, BootArvoButton } from 'components/Buttons';
11import { ForwardButton, BootArvoButton } from 'components/Buttons';
13import { matchBlinky } from 'components/Blinky';
12import { matchBlinky } from 'components/Blinky';
13+import SigilDownloader from 'components/SigilDownloader';
14
14
15+import * as need from 'lib/need';
15import useInvites from 'lib/useInvites';
16import useInvites from 'lib/useInvites';
16import { useSyncOwnedPoints } from 'lib/useSyncPoints';
17import { useSyncOwnedPoints } from 'lib/useSyncPoints';
17import useCurrentPermissions from 'lib/useCurrentPermissions';
18import useCurrentPermissions from 'lib/useCurrentPermissions';
@@ -89,7 +90,9 @@ export default function Point() {
89 return (
90 return (
90 <View pop={pop} inset>
91 <View pop={pop} inset>
91 <Greeting point={point} />
92 <Greeting point={point} />
93+ <SigilDownloader point={point}>
92− <Passport point={Just(point)} />
94+ <Passport point={Just(point)} />
95+ </SigilDownloader>
93 <Grid className="pt2">
96 <Grid className="pt2">
94 {inviteButton}
97 {inviteButton}
95 <Grid.Item
98 <Grid.Item