git.iko.soy/bridge
on 44dc2fe help sign in
bridge/src/components/Passport.js
329 lines 8.6 kB history raw
1import React, { useMemo } from 'react';
2import { Just, Nothing } from 'folktale/maybe';
3import ob from 'urbit-ob';
4import BN from 'bn.js';
5import 'style/anim.css';
7import * as need from 'lib/need';
8import { chunkStr, Matrix, walk, rand } from 'lib/card';
9import usePermissionsForPoint from 'lib/usePermissionsForPoint';
10import { useSyncOwnedPoints } from 'lib/useSyncPoints';
12import { useWallet } from 'store/wallet';
14import { sigil, reactRenderer } from 'urbit-sigil-js';
16function makeSigil(size, patp, colors) {
17 const config = {
18 patp: patp,
19 colors: colors,
20 margin: 0,
21 renderer: reactRenderer,
22 };
24 // Planet
25 if (patp.length === 14) {
26 return sigil({
27 patp: patp,
28 size: size,
29 ...config,
30 });
31 }
32 // Star
33 if (patp.length === 7) {
34 return sigil({
35 patp: patp,
36 width: size * 2,
37 height: size,
38 full: true,
39 ...config,
40 });
41 }
42 // Galaxy
43 if (patp.length === 4) {
44 return sigil({
45 patp: patp,
46 size: size,
47 full: true,
48 ...config,
49 });
50 }
53const buildKeyType = permissions => {
54 if (permissions.isOwner) {
55 return 'Ownership';
56 } else if (permissions.isManagementProxy) {
57 return 'Management';
58 } else if (permissions.isSpawnProxy) {
59 return 'Spawn';
60 } else if (permissions.isVotingProxy) {
61 return 'Voting';
62 } else if (permissions.isTransferProxy) {
63 return 'Transfer';
64 }
65};
67const symbols = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
69/**
70 * Address is Maybe<string>
71 * point is Maybe<string>
72 * animationMode is 'slide' | 'step' | 'none'
73 *
74 */
75function Passport({
76 address,
77 point,
78 inverted,
79 animationMode = 'none',
80 keyType,
81}) {
82 const [cols, rows, tile] = [35, 12, 12];
84 const loading = Nothing.hasInstance(address) || Nothing.hasInstance(point);
85 const defaultMatrix = () => {
86 return Matrix.new(rows, cols);
87 };
89 const patp = ob.patp(point.value);
91 const makeMatrix = addr => {
92 // remove the 0x
93 const onlyTheNumberPart = addr.substring(2);
94 // make bigNum from hex
95 const int = new BN(onlyTheNumberPart, 16);
96 // make a bigger number
97 const big = int.pow(new BN(10));
98 // parse that to a string and pad
99 const b10 = big.toString(10).padStart(32, '0');
100 // split the big number into parts
101 const chunkSize = Math.ceil(b10.length / 8);
102 const chunks = chunkStr(b10, chunkSize).map(c => new BN(c));
103 // generate an empty matrix
104 const startMatrix = Matrix.new(rows, cols);
105 // do a few random walks starting at diff coordinates
106 const [, matrix] = chunks.reduce((acc, chunk) => {
107 return walk(chunk, acc[1]);
108 // start with the 'random' points (not actually random, they are deterministic)
109 }, rand(big, startMatrix));
111 return matrix;
112 };
114 const matrix = address.matchWith({
115 Just: ({ value }) => makeMatrix(value),
116 Nothing: defaultMatrix,
117 });
119 const bgColor = inverted ? 'white' : 'black';
121 const fgColor = inverted ? 'black' : 'white';
123 const sigil = useMemo(
124 () => Just.hasInstance(point) && makeSigil(64, patp, [bgColor, fgColor]),
125 [patp, point, bgColor, fgColor]
126 );
127 return (
128 <div
129 style={{
130 fontFamily: 'Inter',
131 backgroundColor: bgColor,
132 border: inverted ? '2px solid #E6E6E6' : '2px solid black',
133 borderRadius: '20px',
134 marginBottom: '16px',
135 width: `${16 + 16 + cols * tile}px`,
136 minWidth: `${16 + 16 + cols * tile}px`,
137 display: 'flex',
138 flexDirection: 'column',
139 }}>
140 <div
141 style={{
142 height: '64px',
143 padding: '16px',
144 display: 'flex',
145 }}>
146 <div
147 style={{
148 width: '100%',
149 display: 'flex',
150 alignItems: 'center',
151 }}>
152 {sigil}
153 <div
154 style={{
155 marginLeft: '16px',
156 }}>
157 <div
158 style={{
159 fontWeight: '600',
160 color: fgColor,
161 fontSize: '16px',
162 fontFamily: 'Source Code Pro',
163 }}>
164 {Just.hasInstance(point) && patp}
165 </div>
166 {keyType !== '' ? (
167 <div
168 style={{
169 marginTop: '8px',
170 fontWeight: '500',
171 color: fgColor,
172 fontSize: '14px',
173 fontFamily: 'Source Code Pro',
174 }}>
175 {keyType}
176 </div>
177 ) : (
178 <div />
179 )}
180 </div>
181 </div>
182 </div>
183 <div
184 style={{
185 display: 'flex',
186 flexDirection: 'column',
187 padding: '16px',
188 paddingTop: '0px',
189 filter: inverted ? 'invert(1)' : '',
190 }}>
191 {matrix.map((row, _row) => {
192 return (
193 <div
194 key={`card:row:${_row}`}
195 style={{ display: 'flex', justifyContent: 'space-between' }}>
196 {row.map((v, _col) => {
197 return (
198 <Cell
199 row={_row}
200 col={_col}
201 value={typeof symbols[v] === 'undefined' ? 13 : v}
202 spriteSheet={'a'}
203 spriteSheetHeight={12}
204 spriteSheetWidth={168}
205 inverted={inverted}
206 loading={loading}
207 animationMode={animationMode}
208 />
209 );
210 })}
211 </div>
212 );
213 })}
214 </div>
215 </div>
216 );
219const Cell = props => {
220 return (
221 <div
222 key={`card:cell:${props.row}:${props.col}:${props.value}`}
223 className={
224 props.loading
225 ? 'blink'
226 : props.animationMode === 'none'
227 ? ''
228 : `${props.animationMode}-h-${props.value}`
229 }
230 style={{
231 backgroundImage: `url(/spritesheet_a.png)`,
232 backgroundPosition:
233 props.animationMode === 'none'
234 ? `-${props.spriteSheetHeight * props.value}px 0px`
235 : '',
236 backgroundSize: `${props.spriteSheetWidth}px ${props.spriteSheetHeight}px`,
237 width: `${props.spriteSheetHeight}px`,
238 maxWidth: `${props.spriteSheetHeight}px`,
239 height: `${props.spriteSheetHeight}px`,
240 maxHeight: `${props.spriteSheetHeight}px`,
241 animationDelay: `${props.value * 50}ms`,
242 }}
243 />
244 );
245};
247/**
248 * point is number
249 *
250 */
251function MiniPassport({ point, inverted, ...rest }) {
252 useSyncOwnedPoints([point]);
253 const { wallet } = useWallet();
254 const address = need.addressFromWallet(wallet);
256 const patp = ob.patp(point);
257 const permissions = usePermissionsForPoint(address, point);
258 const keyType = buildKeyType(permissions);
259 const sigil = useMemo(
260 () =>
261 makeSigil(44, patp, inverted ? ['white', 'black'] : ['black', 'white']),
262 [inverted, patp]
263 );
264 return (
265 <div
266 style={{
267 fontFamily: 'Inter',
268 backgroundColor: inverted ? 'white' : 'black',
269 border: inverted ? '2px solid #E6E6E6' : '2px solid black',
270 borderRadius: '20px',
271 marginBottom: '16px',
272 maxWidth: `${230}px`,
273 display: 'flex',
274 flexDirection: 'column',
275 }}
276 {...rest}>
277 <div
278 style={{
279 height: '44px',
280 padding: '16px',
281 display: 'flex',
282 }}>
283 <div
284 style={{
285 width: '100%',
286 display: 'flex',
287 alignItems: 'center',
288 }}>
289 {sigil}
290 <div
291 style={{
292 marginLeft: '16px',
293 display: 'flex',
294 flexDirection: 'column',
295 justifyContent: 'space-between',
296 }}>
297 <div
298 style={{
299 fontWeight: '600',
300 color: inverted ? 'black' : 'white',
301 fontSize: '14px',
302 fontFamily: 'Source Code Pro',
303 }}>
304 {patp}
305 </div>
306 {keyType !== '' ? (
307 <div
308 style={{
309 marginTop: '8px',
310 fontWeight: '500',
311 color: inverted ? 'black' : 'white',
312 fontSize: '12px',
313 fontFamily: 'Source Code Pro',
314 }}>
315 {keyType}
316 </div>
317 ) : (
318 <div />
319 )}
320 </div>
321 </div>
322 </div>
323 </div>
324 );
327Passport.Mini = MiniPassport;
329export default Passport;