git.iko.soy/bridge
on master help sign in
incorporate new card designs
abd024fLiam Fitzgerald
public/spritesheet_a.pngnew file
compare with master
unifiedsplit

Binary file not shown.

src/components/Passport.js+272−140
@@ -1,36 +1,51 @@
1−import React, { useMemo } from 'react';
1+import React from 'react';
2−import cn from 'classnames';
3import { Just, Nothing } from 'folktale/maybe';
2import { Just, Nothing } from 'folktale/maybe';
4import ob from 'urbit-ob';
3import ob from 'urbit-ob';
5−import { Grid, Flex, Text } from 'indigo-react';
4+import BN from 'bn.js';
6−import { times } from 'lodash';
7
5
8import * as need from 'lib/need';
6import * as need from 'lib/need';
9−import usePointBirthday from 'lib/usePointBirthday';
7+import { chunkStr, Matrix, walk, rand } from 'lib/card';
10−
11−import Blinky, {
12− LOADING_CHARACTER,
13− INTERSTITIAL_CHARACTER,
14− matchBlinkyDate,
15−} from './Blinky';
16−import Sigil from './Sigil';
17−import MaybeSigil from './MaybeSigil';
18import usePermissionsForPoint from 'lib/usePermissionsForPoint';
8import usePermissionsForPoint from 'lib/usePermissionsForPoint';
19−import { useWallet } from 'store/wallet';
20import { useSyncOwnedPoints } from 'lib/useSyncPoints';
9import { useSyncOwnedPoints } from 'lib/useSyncPoints';
21
10
22−const TICKET_CHAR_LENGTH = 30;
11+import { useWallet } from 'store/wallet';
23−const TICKET = times(TICKET_CHAR_LENGTH, i =>
24− i % 2 === 0 ? LOADING_CHARACTER : INTERSTITIAL_CHARACTER
25−).join('');
26−const PENDING_TICKET = TICKET;
27−const VALID_TICKET = `${TICKET} ◆`;
28
12
29−const VISIBLE_ADDRESS_CHAR_COUNT = 20;
13+import MaybeSigil from './MaybeSigil';
30−const EMPTY_ADDRESS = times(VISIBLE_ADDRESS_CHAR_COUNT, () => '<').join('');
14+import { sigil, reactRenderer } from 'urbit-sigil-js';
31−const ADDRESS_BUFFER_CHARS = times(40, () => '<').join('');
32
15
33−const INVERTED_COLORWAY = ['#fff', '#000'];
16+function makeSigil(size, patp, colors) {
17+ const config = {
18+ patp: patp,
19+ colors: colors,
20+ margin: 0,
21+ renderer: reactRenderer,
22+ };
23+
24+ // Planet
25+ if (patp.length === 14) {
26+ return sigil({
27+ ...config,
28+ size: size,
29+ });
30+ }
31+ // Star
32+ if (patp.length === 7) {
33+ return sigil({
34+ ...config,
35+ width: size * 2,
36+ height: size,
37+ full: true,
38+ });
39+ }
40+ // Galaxy
41+ if (patp.length === 4) {
42+ return sigil({
43+ ...config,
44+ size: size,
45+ full: true,
46+ });
47+ }
48+}
34
49
35const buildKeyType = permissions => {
50const buildKeyType = permissions => {
36 if (permissions.isOwner) {
51 if (permissions.isOwner) {
@@ -46,139 +61,256 @@ const buildKeyType = permissions => {
46 }
61 }
47};
62};
48
63
64+const symbols = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13];
65+
49/**
66/**
67+ * Address is Maybe<string>
50− * point is Maybe<number>
68+ * point is Maybe<string>
51− * ticket is null | boolean
69+ * animationMode is 'slide' | 'step' | 'none'
52− * address is null | Maybe<string>
70+ *
53 */
71 */
54−function Passport({
72+function Passport({ address, point, inverted, animationMode, keyType }) {
55− point,
73+ const [cols, rows, tile] = [35, 12, 12];
56− className,
74+
57− ticket = null,
75+ const loading = Nothing.hasInstance(address) || Nothing.hasInstance(point);
58− address = Nothing(),
76+ const defaultMatrix = () => {
59− onClick,
77+ return Matrix.new(rows, cols);
60−}) {
78+ };
61− const birthday = usePointBirthday(point.getOrElse(null));
79+
62− const visualBirthday = matchBlinkyDate(birthday);
63−
64− const name = point.matchWith({
65− Nothing: () => Nothing(),
66− Just: p => Just(ob.patp(p.value)),
80+ const patp = ob.patp(point.value);
67− });
81+
68− const visualName = name.matchWith({
82+ const makeMatrix = addr => {
69− Nothing: () => '...',
83+ // remove the 0x
84+ const onlyTheNumberPart = addr.substring(2);
85+ // make bigNum from hex
86+ const int = new BN(onlyTheNumberPart, 16);
87+ // make a bigger number
88+ const big = int.pow(new BN(10));
89+ // parse that to a string and pad
90+ const b10 = big.toString(10).padStart(32, '0');
91+ // split the big number into parts
92+ const chunkSize = Math.ceil(b10.length / 8);
93+ const chunks = chunkStr(b10, chunkSize).map(c => new BN(c));
94+ // generate an empty matrix
95+ const startMatrix = Matrix.new(rows, cols);
96+ // do a few random walks starting at diff coordinates
97+ const [, matrix] = chunks.reduce((acc, chunk) => {
98+ return walk(chunk, acc[1]);
99+ // start with the 'random' points (not actually random, they are deterministic)
100+ }, rand(big, startMatrix));
101+
102+ return matrix;
103+ };
104+
105+ const matrix = address.matchWith({
70− Just: p => p.value,
106+ Just: ({ value }) => makeMatrix(value),
107+ Nothing: defaultMatrix,
71 });
108 });
72
109
73− const showTicket = ticket !== null;
110+ const bgColor = inverted ? 'white' : 'black';
74− const isValidTicket = !!ticket;
111+
75− const visibleTicket = isValidTicket ? VALID_TICKET : PENDING_TICKET;
112+ const fgColor = inverted ? 'black' : 'white';
76− const visibleAddress = `${address.matchWith({
77− Nothing: () => EMPTY_ADDRESS,
78− Just: p => p.value.slice(0, VISIBLE_ADDRESS_CHAR_COUNT),
79− })}${ADDRESS_BUFFER_CHARS}`;
80
113
81 return (
114 return (
82− <Grid onClick={onClick} gap={4} className={cn('bg-black r8 p7', className)}>
115+ <div
83− <Grid.Item cols={[1, 4]}>
116+ style={{
84− <MaybeSigil patp={name} size={64} />
117+ fontFamily: 'Inter',
85− </Grid.Item>
118+ backgroundColor: bgColor,
86− <Grid.Item as={Flex} cols={[4, 13]} col justify="between">
119+ border: inverted ? '2px solid #E6E6E6' : '2px solid black',
87− <Flex.Item className="mono white f5 pb2">{visualName}</Flex.Item>
120+ borderRadius: '20px',
88− <Flex.Item as={Flex} col>
121+ marginBottom: '16px',
89− <Flex.Item as={Text} className="mono f6 f5-ns gray4 uppercase">
122+ minWidth: `${16 + 16 + cols * tile}px`,
90− Birth Time
123+ display: 'flex',
91− </Flex.Item>
124+ flexDirection: 'column',
92− <Flex.Item as={Text} className="mono f6 f5-ns gray4 uppercase">
125+ }}>
93− {visualBirthday}
126+ <div
94− </Flex.Item>
127+ style={{
95− </Flex.Item>
128+ height: '64px',
96− </Grid.Item>
129+ padding: '16px',
97− {showTicket && (
130+ display: 'flex',
98− <Grid.Item full className="mv3" as={Flex} col>
131+ }}>
99− <Flex.Item as={Text} className="mono f6 f5-ns gray4 uppercase">
132+ <div
100− Master Ticket
133+ style={{
101− </Flex.Item>
134+ width: '100%',
102− <Flex.Item
135+ display: 'flex',
103− as={Text}
136+ alignItems: 'center',
104− className={cn('arial f6 f5-ns wrap', {
137+ }}>
105− gray4: !isValidTicket,
138+ {Just.hasInstance(point) && (
106− green3: isValidTicket,
139+ <MaybeSigil patp={patp.map(ob.patp).value} />
140+ )}
141+ <div
142+ style={{
143+ marginLeft: '16px',
144+ }}>
145+ <div
146+ style={{
147+ fontWeight: '600',
148+ color: fgColor,
149+ fontSize: '16px',
150+ fontFamily: 'Source Code Pro',
151+ }}>
152+ {patp}
153+ </div>
154+ {keyType !== '' ? (
155+ <div
156+ style={{
157+ marginTop: '8px',
158+ fontWeight: '500',
159+ color: fgColor,
160+ fontSize: '14px',
161+ fontFamily: 'Source Code Pro',
162+ }}>
163+ {keyType}
164+ </div>
165+ ) : (
166+ <div />
167+ )}
168+ </div>
169+ </div>
170+ </div>
171+ <div
172+ style={{
173+ display: 'flex',
174+ flexDirection: 'column',
175+ padding: '16px',
176+ paddingTop: '0px',
177+ filter: inverted ? 'invert(1)' : '',
178+ }}>
179+ {matrix.map((row, _row) => {
180+ return (
181+ <div
182+ key={`card:row:${_row}`}
183+ style={{ display: 'flex', justifyContent: 'space-between' }}>
184+ {row.map((v, _col) => {
185+ return (
186+ <Cell
187+ row={_row}
188+ col={_col}
189+ value={typeof symbols[v] === 'undefined' ? 13 : v}
190+ spriteSheet={'a'}
191+ spriteSheetHeight={12}
192+ spriteSheetWidth={168}
193+ inverted={inverted}
194+ loading={loading}
195+ animationMode={animationMode}
196+ />
197+ );
107− })}>
198+ })}
108− {visibleTicket}
199+ </div>
109− </Flex.Item>
200+ );
110− <Flex.Item as={Text} className="mono f6 f5-ns gray4 wrap">
201+ })}
111− {visibleAddress}
202+ </div>
112− </Flex.Item>
203+ </div>
113− </Grid.Item>
114− )}
115− </Grid>
116 );
204 );
117}
205}
118
206
119−// TODO: Passport.Mini should probably accept Maybe<> for point
207+const Cell = props => {
120−// in order to display a pretty skeleton loading view
208+ return (
121−// but that requires making usePermissionsForPoint accept a Maybe<point>
209+ <div
122−// and I don't feel like that refactor is worth it right now, and the spec
210+ key={`card:cell:${props.row}:${props.col}:${props.value}`}
123−// doesn't call for it, hence the TODO
211+ className={
124−Passport.Mini = function MiniPassport({ point, className, inverted, ...rest }) {
212+ props.loading
125− useSyncOwnedPoints([point]);
213+ ? 'blink'
214+ : props.animationMode === 'none'
215+ ? ''
216+ : `${props.animationMode}-h-${props.value}`
217+ }
218+ style={{
219+ backgroundImage: `url(/spritesheet_a.png)`,
220+ backgroundPosition:
221+ props.animationMode === 'none'
222+ ? `-${props.spriteSheetHeight * props.value}px 0px`
223+ : '',
224+ backgroundSize: `${props.spriteSheetWidth}px ${props.spriteSheetHeight}px`,
225+ width: `${props.spriteSheetHeight}px`,
226+ maxWidth: `${props.spriteSheetHeight}px`,
227+ height: `${props.spriteSheetHeight}px`,
228+ maxHeight: `${props.spriteSheetHeight}px`,
229+ animationDelay: `${props.value * 50}ms`,
230+ }}
231+ />
232+ );
233+};
126
234
235+/**
236+ * point is number
237+ *
238+ */
239+function MiniPassport({ point, inverted, ...rest }) {
240+ useSyncOwnedPoints([point]);
127 const { wallet } = useWallet();
241 const { wallet } = useWallet();
128 const address = need.addressFromWallet(wallet);
242 const address = need.addressFromWallet(wallet);
129
243
244+ const patp = ob.patp(point);
130 const permissions = usePermissionsForPoint(address, point);
245 const permissions = usePermissionsForPoint(address, point);
131 const keyType = buildKeyType(permissions);
246 const keyType = buildKeyType(permissions);
132− const name = useMemo(() => ob.patp(point), [point]);
133−
134 return (
247 return (
135− <Grid
248+ <div
136− gap={4}
249+ style={{
137− className={cn(
250+ fontFamily: 'Inter',
138− 'r8 p4',
251+ backgroundColor: inverted ? 'white' : 'black',
139− {
252+ border: inverted ? '2px solid #E6E6E6' : '2px solid black',
140− 'bg-black': !inverted,
253+ borderRadius: '20px',
141− 'bg-white b-gray4 b1': inverted,
254+ marginBottom: '16px',
142− },
255+ width: `${230}px`,
143− className
256+ display: 'flex',
257+ flexDirection: 'column',
144− )}
258+ }}
145 {...rest}>
259 {...rest}>
146− <Grid.Item cols={[1, 4]}>
260+ <div
147− <Sigil
261+ style={{
148− patp={name}
262+ height: '44px',
149− size={64}
263+ padding: '16px',
150− colors={inverted ? INVERTED_COLORWAY : undefined}
264+ display: 'flex',
151− />
265+ }}>
152− </Grid.Item>
266+ <div
153− <Grid.Item as={Flex} cols={[4, 13]} col justify="between">
267+ style={{
154− <Flex.Item
268+ width: '100%',
155− className={cn('mono f6 pb2', {
269+ display: 'flex',
156− white: !inverted,
270+ alignItems: 'center',
157− black: inverted,
271+ }}>
272+ {makeSigil(
273+ 44,
274+ patp,
275+ inverted ? ['white', 'black'] : ['black', 'white']
276+ )}
277+ <div
278+ style={{
279+ marginLeft: '16px',
280+ display: 'flex',
281+ flexDirection: 'column',
282+ justifyContent: 'space-between',
283+ }}>
284+ <div
285+ style={{
286+ fontWeight: '600',
287+ color: inverted ? 'black' : 'white',
288+ fontSize: '14px',
289+ fontFamily: 'Source Code Pro',
158− })}>
290+ }}>
159− {name}
291+ {patp}
160− </Flex.Item>
292+ </div>
161− <Flex.Item as={Flex} col className={cn('mono f6 uppercase')}>
293+ {keyType !== '' ? (
162− <Flex.Item
294+ <div
163− as={Text}
295+ style={{
164− className={cn({
296+ marginTop: '8px',
165− gray4: !inverted,
297+ fontWeight: '500',
166− black: inverted,
298+ color: inverted ? 'black' : 'white',
167− })}>
299+ fontSize: '12px',
168− Key Type
300+ fontFamily: 'Source Code Pro',
169− </Flex.Item>
170− <Flex.Item
171− as={Text}
172− className={cn({
173− white: !inverted,
174− black: inverted,
175− })}>
301+ }}>
176− {keyType || <Blinky />}
302+ {keyType}
177− </Flex.Item>
303+ </div>
178− </Flex.Item>
304+ ) : (
179− </Grid.Item>
305+ <div />
180− </Grid>
306+ )}
307+ </div>
308+ </div>
309+ </div>
310+ </div>
181 );
311 );
182−};
312+}
313+
314+Passport.Mini = MiniPassport;
183
315
184export default Passport;
316export default Passport;
src/lib/card.jsnew file+191
@@ -0,0 +1,191 @@
1+const initCanvas = (canvas, size, ratio) => {
2+ const { x, y } = size;
3+ // let ctx = canvas.getContext('2d')
4+
5+ const dpi200 = window.devicePixelRatio * (200 / 72);
6+
7+ canvas.width = x * dpi200;
8+ canvas.height = y * dpi200;
9+ canvas.style.width = x + 'px';
10+ canvas.style.height = y + 'px';
11+
12+ canvas.getContext('2d').scale(dpi200, dpi200);
13+
14+ return canvas;
15+};
16+
17+// takes a
18+const mapToRange = (v, l1, h1, l2, h2) =>
19+ l2 + ((h2 - l2) * (v - l1)) / (h1 - l1);
20+
21+const seq = num => Array.from(Array(num), (_, i) => i);
22+
23+const compose = (...fns) =>
24+ fns.reduce((f, g) => (...xs) => {
25+ const r = g(...xs);
26+ return Array.isArray(r) ? f(...r) : f(r);
27+ });
28+
29+const Matrix = {
30+ get: {
31+ at: (m, r, c) => m[r][c],
32+ nn: (m, r, c) => m[r - 1][c],
33+ ne: (m, r, c) => m[r - 1][c + 1],
34+ ee: (m, r, c) => m[r][c + 1],
35+ se: (m, r, c) => m[r + 1][c + 1],
36+ ss: (m, r, c) => m[r + 1][c],
37+ sw: (m, r, c) => m[r + 1][c - 1],
38+ ww: (m, r, c) => m[r][c - 1],
39+ nw: (m, r, c) => m[r - 1][c - 1],
40+ },
41+ set: {
42+ at: (m, r, c, v) => (m[r][c] = v),
43+ nn: (m, r, c, v) => (m[r - 1][c] = v),
44+ ne: (m, r, c, v) => (m[r - 1][c + 1] = v),
45+ ee: (m, r, c, v) => (m[r][c + 1] = v),
46+ se: (m, r, c, v) => (m[r + 1][c + 1] = v),
47+ ss: (m, r, c, v) => (m[r + 1][c] = v),
48+ sw: (m, r, c, v) => (m[r + 1][c - 1] = v),
49+ ww: (m, r, c, v) => (m[r][c - 1] = v),
50+ nw: (m, r, c, v) => (m[r - 1][c - 1] = v),
51+ },
52+ coord: {
53+ at: (r, c) => ({ r: r, c: c }),
54+ nn: (r, c) => ({ r: r - 1, c: c }),
55+ ne: (r, c) => ({ r: r - 1, c: c + 1 }),
56+ ee: (r, c) => ({ r: r, c: c + 1 }),
57+ se: (r, c) => ({ r: r + 1, c: c + 1 }),
58+ ss: (r, c) => ({ r: r + 1, c: c }),
59+ sw: (r, c) => ({ r: r + 1, c: c - 1 }),
60+ ww: (r, c) => ({ r: r, c: c - 1 }),
61+ nw: (r, c) => ({ r: r - 1, c: c - 1 }),
62+ },
63+ dirs: {
64+ NN: 'nn',
65+ NE: 'ne',
66+ EE: 'ee',
67+ SE: 'se',
68+ SS: 'ss',
69+ SW: 'sw',
70+ WW: 'ww',
71+ NW: 'nw',
72+ },
73+ new: (rs, cs) => seq(rs).map(_ => seq(cs).map(_ => 0)),
74+ rows: m => m.length - 1,
75+ cols: m => m[0].length - 1,
76+};
77+
78+const chunkStr = (str, size) => {
79+ const r = new RegExp(`.{1,${size}}`, 'g');
80+ return str.match(r);
81+};
82+
83+const Base3Mapping = [
84+ Matrix.dirs.NN,
85+ Matrix.dirs.NE,
86+ Matrix.dirs.EE,
87+ Matrix.dirs.SE,
88+ Matrix.dirs.SS,
89+ Matrix.dirs.SW,
90+ Matrix.dirs.WW,
91+ Matrix.dirs.NW,
92+];
93+
94+const walk = (int, matrix) => {
95+ // convert the int to a base8 string, split to array
96+ var chunks = int.toString(8).split('');
97+
98+ // convert the int to a base10 string
99+ var b10 = int.toString(10);
100+
101+ // get number of rows and cols
102+ var rows = Matrix.rows(matrix);
103+ var cols = Matrix.cols(matrix);
104+
105+ // split the length-4 number into 2 parts, which is a number from 0-99
106+ // if the substring is empty, substitute 10
107+ var sx = parseInt(b10.substring(0, 2) || 0, 10);
108+ var sy = parseInt(b10.substring(2, 4) || 0, 10);
109+
110+ // generate a starting coordinate
111+ var coord = {
112+ c: ~~mapToRange(sx, 0, 99, 0, cols),
113+ r: ~~mapToRange(sy, 0, 99, 0, rows),
114+ };
115+
116+ var vect;
117+ var next;
118+
119+ for (var i = 0; i < chunks.length; i++) {
120+ // Each chunk is a number from 0-7 which refers to a direction assigned in Base3Mapping.
121+ // Get the current chunk, and then get the direction it has been paired with.
122+ vect = Base3Mapping[chunks[i]];
123+
124+ // generate the next coordinate to go to, based on the current coordinate and the direction stored in vect.
125+ next = Matrix.coord[vect](coord.r, coord.c);
126+
127+ // If at an edge of the matrix, substitute the opposite direction.
128+ if (next.r < 0) vect = Matrix.dirs.SS;
129+ if (next.c < 0) vect = Matrix.dirs.EE;
130+ if (next.r > rows) vect = Matrix.dirs.NN;
131+ if (next.c > cols) vect = Matrix.dirs.WW;
132+
133+ // If at in the corner of the matrix, substitute an alternative direction.
134+ if (next.r === 0 && coord.c === 0) vect = Matrix.dirs.SE;
135+ if (next.r > rows && coord.c === 0) vect = Matrix.dirs.NE;
136+ if (next.r === 0 && coord.c > cols) vect = Matrix.dirs.SW;
137+ if (next.r > rows && coord.c > cols) vect = Matrix.dirs.NW;
138+
139+ // get the next coordinate again in case there was an edge/cornercase
140+ next = Matrix.coord[vect](coord.r, coord.c);
141+
142+ // increment the value at the next coordinate.
143+ Matrix.set.at(
144+ matrix,
145+ next.r,
146+ next.c,
147+ Matrix.get.at(matrix, next.r, next.c) + 1
148+ );
149+
150+ // set the new current coordinate.
151+ coord = next;
152+ }
153+
154+ // return a 2-ary array in order to pass both values to the next function in the compose pipeline.
155+ return [int, matrix];
156+};
157+
158+const rand = (int, matrix) => {
159+ // break base10 integer into chunks with length of 4
160+ var chunks = chunkStr(int.toString(10), 4);
161+ var cols = Matrix.cols(matrix);
162+ var rows = Matrix.rows(matrix);
163+ var ch;
164+ var x;
165+ var y;
166+ var c;
167+ var r;
168+
169+ for (var i = 0; i < chunks.length; i++) {
170+ // for each chunk in chunks
171+ ch = chunks[i];
172+
173+ // split the length-4 number into 2 parts, which is a number from 0-99
174+ // if the substring is empty, substitute 10
175+ x = parseInt(ch.substring(0, 2) || 0, 10);
176+ y = parseInt(ch.substring(2, 4) || 0, 10);
177+
178+ // map num from 0-99 to 0 - num of cols, then use ~~ for fast math.floor
179+ // c (col) and r (row) are coordinates
180+ c = ~~mapToRange(x, 0, 99, 0, cols);
181+ r = ~~mapToRange(y, 0, 99, 0, rows);
182+
183+ // increment number at the coordinate
184+ Matrix.set.at(matrix, r, c, Matrix.get.at(matrix, r, c) + 1);
185+ }
186+
187+ // return a 2-ary array in order to pass both values to the next function in the compose pipeline.
188+ return [int, matrix];
189+};
190+
191+export { chunkStr, initCanvas, seq, Matrix, compose, mapToRange, walk, rand };
src/views/Point.js+9−4
@@ -4,13 +4,13 @@ import { Grid } from 'indigo-react';
4import { azimuth } from 'azimuth-js';
4import { azimuth } from 'azimuth-js';
5
5
6import { usePointCursor } from 'store/pointCursor';
6import { usePointCursor } from 'store/pointCursor';
7+import { useWallet } from 'store/wallet';
7
8
8import View from 'components/View';
9import View from 'components/View';
9import Greeting from 'components/Greeting';
10import Greeting from 'components/Greeting';
10import Passport from 'components/Passport';
11import Passport from 'components/Passport';
11import { ForwardButton, BootArvoButton } from 'components/Buttons';
12import { ForwardButton, BootArvoButton } from 'components/Buttons';
12import { matchBlinky } from 'components/Blinky';
13import { matchBlinky } from 'components/Blinky';
13−import SigilDownloader from 'components/SigilDownloader';
14
14
15import * as need from 'lib/need';
15import * as need from 'lib/need';
16import useInvites from 'lib/useInvites';
16import useInvites from 'lib/useInvites';
@@ -22,6 +22,7 @@ export default function Point() {
22 const { pop, push, names } = useLocalRouter();
22 const { pop, push, names } = useLocalRouter();
23 const { pointCursor } = usePointCursor();
23 const { pointCursor } = usePointCursor();
24
24
25+ const { wallet } = useWallet();
25 const point = need.point(pointCursor);
26 const point = need.point(pointCursor);
26
27
27 const {
28 const {
@@ -87,12 +88,16 @@ export default function Point() {
87 // sync the current cursor
88 // sync the current cursor
88 useSyncOwnedPoints([point]);
89 useSyncOwnedPoints([point]);
89
90
91+ const address = need.addressFromWallet(wallet);
92+
90 return (
93 return (
91 <View pop={pop} inset>
94 <View pop={pop} inset>
92 <Greeting point={point} />
95 <Greeting point={point} />
93− <SigilDownloader point={point}>
96+ <Passport
94− <Passport point={Just(point)} />
97+ point={Just(point)}
95− </SigilDownloader>
98+ address={Just(address)}
99+ animationMode={'none'}
100+ />
96 <Grid className="pt2">
101 <Grid className="pt2">
97 {inviteButton}
102 {inviteButton}
98 <Grid.Item
103 <Grid.Item