git.iko.soy/bridge
on 1ec514b help sign in
bridge/src/walletgen/views/Download.js
147 lines 5.4 kB history raw
1import React from 'react'
2import saveAs from 'file-saver'
3import * as lodash from 'lodash'
4import JSZip from 'jszip';
6import Button from '../components/Button'
7import CheckBox from '../components/CheckBox'
9const NEXT_STEP_NUM = 7;
11class Download extends React.Component {
12 handleSave = (event) => {
13 const { props } = this
15 const wallets = props['wallets.value']
16 const profile = props['profile.value']
17 const paper = props['paperCollateral.value']
19 const urbit_registration = Object.entries(wallets).reduce((acc, [k, v]) => {
20 const owner = lodash.get(v, 'ownership.keys.address', '')
21 const transfer = ''
22 const spawn = lodash.get(v, 'spawn.keys.address', '')
23 const manage = lodash.get(v, 'management.keys.address', '')
24 const voting = lodash.get(v, 'voting.keys.address', '')
25 const auth = lodash.get(v, 'network.keys.auth.public', '')
26 const crypt = lodash.get(v, 'network.keys.crypt.public', '')
27 return {
28 ...acc,
29 [k]: [owner, transfer, spawn, manage, voting, auth, crypt],
30 }
32 }, { idCode: profile.idCode });
34 const json_urbit_registration = JSON.stringify(urbit_registration);
35 const encoded_urbit_registration = new Blob(
36 [btoa(json_urbit_registration)],
37 {type: "text/plain;charset=utf-8"}
38 );
40 const zip = new JSZip();
42 const bin0 = paper.filter(item => item.bin === '0');
43 const bin1 = paper.filter(item => item.bin === '1');
44 const bin2 = paper.filter(item => item.bin === '2');
45 const bin3 = paper.filter(item => item.bin === '3');
46 const bin4 = paper.filter(item => item.bin === '4');
48 const bin0Folder = zip.folder("0. Public");
49 const bin1Folder = zip.folder("1. Very High Friction Custody");
50 const bin2Folder = zip.folder("2. High Friction Custody");
51 const bin3Folder = zip.folder("3. Medium Friction Custody");
52 const bin4Folder = zip.folder("4. Low Friction Custody");
54 bin0.forEach(item => bin0Folder.file(`${item.pageTitle}.png`, item.png))
55 bin1.forEach(item => bin1Folder.file(`${item.pageTitle}.png`, item.png));
56 bin2.forEach(item => bin2Folder.file(`${item.pageTitle}.png`, item.png));
57 bin3.forEach(item => bin3Folder.file(`${item.pageTitle}.png`, item.png));
58 bin4.forEach(item => bin4Folder.file(`${item.pageTitle}.png`, item.png));
60 // TEMPORARY
61 // const jsonWallet = JSON.stringify(wallets, null, 2);
62 // zip.file("jsonWallet.json", jsonWallet);
64 zip.generateAsync({type:"blob"})
65 .then((content) => {
66 saveAs(content, 'urbit-wallets.zip')
67 setTimeout(() => {
68 saveAs(encoded_urbit_registration, 'urbit-registration.txt');
69 props.setGlobalState({ didClickDownload: true });
70 }, 2000);
71 });
73 }
75 render() {
77 const { setGlobalState } = this.props
79 const { props } = this
81 const downloaded = props['downloaded']
82 const didClickDownload = props['didClickDownload']
84 const nextButtonClass = downloaded ? 'btn btn-primary' : 'btn shape-gray-10'
86 return(
87 <div className={'col-md-6'}>
88 <h2 className={'mb-4'}>Your wallets have been generated. Download the files to a storage medium you trust.</h2>
91 <div
92 className={ `white row text-mono pb-2` }
93 style={{borderBottom:'2px solid #222' }}
94 >
95 <div className={'col-md-6 text-400'}>{'Filename'}</div>
96 <div className={'col-md-6 text-400'}>{'Contents'}</div>
97 </div>
100 <div
101 className={ `white row pv-4` }
102 style={{borderBottom:'2px solid #222' }}
103 >
104 <div className={'col-md-6 text-mono text-600'}>{'urbit-wallets.zip'}</div>
105 <div className={'col-md-6'}><p className={'mv-0'}>Paper wallet PNG files for <code>{`${props['profile.shipCount']}`}</code> ships, organized by recommended custody tier. This contains your private keys, keep it safe. </p></div>
106 </div>
109 <div
110 className={ `white row pv-2` }
111 style={{borderBottom:'2px solid #222' }}
112 >
113 <div className={'col-md-6 text-600 text-mono'}>{'urbit-registration.txt'}</div>
114 <div className={'col-md-6 mv-0'}><p className={'mv-0'}>{`A file containing the public addresses of your wallets. You need to upload this to Registration next.`}</p></div>
115 </div>
117 <Button
118 className={'btn btn-primary mv-6'}
119 text={'Download All'}
120 onClick={ e => this.handleSave(e) }
121 />
123 {
124 didClickDownload
125 ? <div>
126 <p>Please verify that the above files have been successfully downloaded. You may wish to unpack the zip file and inspect the contents. If you open your .png wallets on your screen, ensure you are in a secure location.</p>
127 <CheckBox
128 title={'I have my urbit-wallets.zip and urbit-registration.txt'}
129 onChange={ () => setGlobalState({ downloaded: !downloaded }) }
130 state={ downloaded }
131 />
133 <Button
134 className={ nextButtonClass + ' mt-8' }
135 text={'Next →'}
136 disabled={ !downloaded }
137 onClick= { () => setGlobalState({ route: '/Done' , 'currentStep': NEXT_STEP_NUM })}
138 />
139 </div>
140 : <div />
141 }
142 </div>
143 )
144 }
147export default Download