git.iko.soy/bridge
on master help sign in
Memoize sigil rendering in Passport component
827391dLiam Fitzgerald
src/components/Passport.js+12−8
compare with master
unifiedsplit
@@ -1,4 +1,4 @@
1−import React from 'react';
1+import React, { useMemo } from 'react';
2import { Just, Nothing } from 'folktale/maybe';
2import { Just, Nothing } from 'folktale/maybe';
3import ob from 'urbit-ob';
3import ob from 'urbit-ob';
4import BN from 'bn.js';
4import BN from 'bn.js';
@@ -11,7 +11,6 @@ import { useSyncOwnedPoints } from 'lib/useSyncPoints';
11
11
12import { useWallet } from 'store/wallet';
12import { useWallet } from 'store/wallet';
13
13
14−import Sigil from './Sigil';
15import { sigil, reactRenderer } from 'urbit-sigil-js';
14import { sigil, reactRenderer } from 'urbit-sigil-js';
16
15
17function makeSigil(size, patp, colors) {
16function makeSigil(size, patp, colors) {
@@ -121,6 +120,10 @@ function Passport({
121
120
122 const fgColor = inverted ? 'black' : 'white';
121 const fgColor = inverted ? 'black' : 'white';
123
122
123+ const sigil = useMemo(
124+ () => Just.hasInstance(point) && makeSigil(64, patp, [bgColor, fgColor]),
125+ [patp, point, bgColor, fgColor]
126+ );
124 return (
127 return (
125 <div
128 <div
126 style={{
129 style={{
@@ -146,7 +149,7 @@ function Passport({
146 display: 'flex',
149 display: 'flex',
147 alignItems: 'center',
150 alignItems: 'center',
148 }}>
151 }}>
149− {Just.hasInstance(point) && makeSigil(64, patp, [bgColor, fgColor])}
152+ {sigil}
150 <div
153 <div
151 style={{
154 style={{
152 marginLeft: '16px',
155 marginLeft: '16px',
@@ -253,6 +256,11 @@ function MiniPassport({ point, inverted, ...rest }) {
253 const patp = ob.patp(point);
256 const patp = ob.patp(point);
254 const permissions = usePermissionsForPoint(address, point);
257 const permissions = usePermissionsForPoint(address, point);
255 const keyType = buildKeyType(permissions);
258 const keyType = buildKeyType(permissions);
259+ const sigil = useMemo(
260+ () =>
261+ makeSigil(44, patp, inverted ? ['white', 'black'] : ['black', 'white']),
262+ [inverted, patp]
263+ );
256 return (
264 return (
257 <div
265 <div
258 style={{
266 style={{
@@ -278,11 +286,7 @@ function MiniPassport({ point, inverted, ...rest }) {
278 display: 'flex',
286 display: 'flex',
279 alignItems: 'center',
287 alignItems: 'center',
280 }}>
288 }}>
281− {makeSigil(
289+ {sigil}
282− 44,
283− patp,
284− inverted ? ['white', 'black'] : ['black', 'white']
285− )}
286 <div
290 <div
287 style={{
291 style={{
288 marginLeft: '16px',
292 marginLeft: '16px',