@@ -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';
@@ -11,7 +11,6 @@ import { useSyncOwnedPoints } from 'lib/useSyncPoints';
1111
1212import { useWallet } from 'store/wallet';
1313
14−import Sigil from './Sigil';
1514import { sigil, reactRenderer } from 'urbit-sigil-js';
1615
1716function makeSigil(size, patp, colors) {
@@ -121,6 +120,10 @@ function Passport({
121120
122121 const fgColor = inverted ? 'black' : 'white';
123122
123+ const sigil = useMemo(
124+ () => Just.hasInstance(point) && makeSigil(64, patp, [bgColor, fgColor]),
125+ [patp, point, bgColor, fgColor]
126+ );
124127 return (
125128 <div
126129 style={{
@@ -146,7 +149,7 @@ function Passport({
146149 display: 'flex',
147150 alignItems: 'center',
148151 }}>
149− {Just.hasInstance(point) && makeSigil(64, patp, [bgColor, fgColor])}
152+ {sigil}
150153 <div
151154 style={{
152155 marginLeft: '16px',
@@ -253,6 +256,11 @@ function MiniPassport({ point, inverted, ...rest }) {
253256 const patp = ob.patp(point);
254257 const permissions = usePermissionsForPoint(address, point);
255258 const keyType = buildKeyType(permissions);
259+ const sigil = useMemo(
260+ () =>
261+ makeSigil(44, patp, inverted ? ['white', 'black'] : ['black', 'white']),
262+ [inverted, patp]
263+ );
256264 return (
257265 <div
258266 style={{
@@ -278,11 +286,7 @@ function MiniPassport({ point, inverted, ...rest }) {
278286 display: 'flex',
279287 alignItems: 'center',
280288 }}>
281− {makeSigil(
282− 44,
283− patp,
284− inverted ? ['white', 'black'] : ['black', 'white']
285− )}
289+ {sigil}
286290 <div
287291 style={{
288292 marginLeft: '16px',