@@ -1,4 +1,4 @@
1−import React from 'react';
1+import React, { useMemo } from 'react';
22import { Just, Nothing } from 'folktale/maybe';
33import ob from 'urbit-ob';
44import BN from 'bn.js';
@@ -120,6 +120,10 @@ function Passport({
120120
121121 const fgColor = inverted ? 'black' : 'white';
122122
123+ const sigil = useMemo(
124+ () => Just.hasInstance(point) && makeSigil(64, patp, [bgColor, fgColor]),
125+ [patp, point, bgColor, fgColor]
126+ );
123127 return (
124128 <div
125129 style={{
@@ -145,7 +149,7 @@ function Passport({
145149 display: 'flex',
146150 alignItems: 'center',
147151 }}>
148− {Just.hasInstance(point) && makeSigil(64, patp, [bgColor, fgColor])}
152+ {sigil}
149153 <div
150154 style={{
151155 marginLeft: '16px',
@@ -252,6 +256,11 @@ function MiniPassport({ point, inverted, ...rest }) {
252256 const patp = ob.patp(point);
253257 const permissions = usePermissionsForPoint(address, point);
254258 const keyType = buildKeyType(permissions);
259+ const sigil = useMemo(
260+ () =>
261+ makeSigil(44, patp, inverted ? ['white', 'black'] : ['black', 'white']),
262+ [inverted, patp]
263+ );
255264 return (
256265 <div
257266 style={{
@@ -277,11 +286,7 @@ function MiniPassport({ point, inverted, ...rest }) {
277286 display: 'flex',
278287 alignItems: 'center',
279288 }}>
280− {makeSigil(
281− 44,
282− patp,
283− inverted ? ['white', 'black'] : ['black', 'white']
284− )}
289+ {sigil}
285290 <div
286291 style={{
287292 marginLeft: '16px',