diff --git a/packages/connectkit/src/assets/logos.tsx b/packages/connectkit/src/assets/logos.tsx index dce4a0d3..376d10f3 100644 --- a/packages/connectkit/src/assets/logos.tsx +++ b/packages/connectkit/src/assets/logos.tsx @@ -36,9 +36,6 @@ export const WalletConnect = ({ background = false, ...props }) => ( ); -export const WalletConnectLegacy = ({ background = false, ...props }) => - WalletConnect({ background, ...props }); - export const MetaMask = ({ background = false, ...props }) => ( + const clientConnector: Connector | undefined = connectors.find((c) => isWalletConnectConnector(c.id) ); if (clientConnector) { - const connector: CreateConnectorFn = walletConnect({ - projectId: '', - showQrModal: true, - }); - - setIsOpen(true); try { - await connectAsync({ connector: connector }); + const provider: any = await clientConnector.getProvider(); + const projectId = provider.rpc.projectId; + + const connector: CreateConnectorFn = walletConnect({ + projectId, + showQrModal: true, + }); + + setIsOpen(true); + try { + await connectAsync({ connector: connector }); + } catch (err) { + log('WalletConnect', err); + } + setIsOpen(false); + + // remove modal styling + document.head.removeChild(w3mcss); } catch (err) { - log('WalletConnect', err); + log('Could not get WalletConnect provider', err); } - setIsOpen(false); - - // remove modal styling - document.head.removeChild(w3mcss); } else { log('No WalletConnect connector available'); } diff --git a/packages/connectkit/src/utils/index.ts b/packages/connectkit/src/utils/index.ts index 960b2746..88285860 100644 --- a/packages/connectkit/src/utils/index.ts +++ b/packages/connectkit/src/utils/index.ts @@ -78,7 +78,7 @@ function flattenChildren(children: React.ReactNode): ReactChildArray { } export const isWalletConnectConnector = (connectorId?: string) => - connectorId === 'walletConnect' || connectorId === 'walletConnectLegacy'; + connectorId === 'walletConnect'; export const isMetaMaskConnector = (connectorId?: string) => connectorId === 'metaMask';