on master help sign in
wc: handle missing peer icon
74d868etomholford
src/lib/useWalletConnect.ts+13−1
@@ -2,7 +2,7 @@ import WalletConnect from '@walletconnect/client';
2import QRCodeModal from '@walletconnect/qrcode-modal';
2import QRCodeModal from '@walletconnect/qrcode-modal';
3import { ITxData } from '@walletconnect/types';
3import { ITxData } from '@walletconnect/types';
4
4
5−import { useEffect, useState } from 'react';
5+import { useEffect, useMemo, useState } from 'react';
6import { Just } from 'folktale/maybe';
6import { Just } from 'folktale/maybe';
7
7
8import { useWallet } from 'store/wallet';
8import { useWallet } from 'store/wallet';
@@ -103,6 +103,17 @@ export const useWalletConnect = () => {
103 return connector.connected;
103 return connector.connected;
104 };
104 };
105
105
106+ const peerIcon = useMemo(() => {
107+ if (!peerMeta?.icons) {
108+ return null;
109+ }
110+
111+ // Some peers return a list of empty string(s) :)
112+ const iconCandidates = peerMeta.icons.filter(pm => pm !== '');
113+
114+ return iconCandidates.length > 0 ? iconCandidates[0] : null;
115+ }, [peerMeta]);
116+
106 const signTransaction = async ({
117 const signTransaction = async ({
107 from,
118 from,
108 to,
119 to,
@@ -219,6 +230,7 @@ export const useWalletConnect = () => {
219 connector,
230 connector,
220 disconnect,
231 disconnect,
221 isConnected,
232 isConnected,
233+ peerIcon,
222 peerMeta,
234 peerMeta,
223 resetConnector,
235 resetConnector,
224 signTransaction,
236 signTransaction,
src/views/Login/WalletConnect.tsx+3−2
@@ -19,6 +19,7 @@ const WalletConnectLogin = ({ className, goHome }) => {
19 connector,
19 connector,
20 disconnect,
20 disconnect,
21 isConnected,
21 isConnected,
22+ peerIcon,
22 peerMeta,
23 peerMeta,
23 } = useWalletConnect();
24 } = useWalletConnect();
24
25
@@ -41,8 +42,8 @@ const WalletConnectLogin = ({ className, goHome }) => {
41 <Grid.Item full className="f6 gray5 mt3 mb3">
42 <Grid.Item full className="f6 gray5 mt3 mb3">
42 <Grid>
43 <Grid>
43 <Grid.Item style={{ gridArea: 'auto / 3 / auto / 5' }}>
44 <Grid.Item style={{ gridArea: 'auto / 3 / auto / 5' }}>
44− {peerMeta.icons && peerMeta.icons.length > 0 ? (
45+ {peerIcon ? (
45− <Image src={peerMeta.icons[0]} />
46+ <Image src={peerIcon} />
46 ) : (
47 ) : (
47 <LegacyText>Icon Unavailable</LegacyText>
48 <LegacyText>Icon Unavailable</LegacyText>
48 )}
49 )}