diff --git a/examples/nextjs-app/.gitignore b/examples/nextjs-app/.gitignore index c87c9b39..0d7ef356 100644 --- a/examples/nextjs-app/.gitignore +++ b/examples/nextjs-app/.gitignore @@ -34,3 +34,5 @@ yarn-error.log* # typescript *.tsbuildinfo next-env.d.ts + +certificates \ No newline at end of file diff --git a/examples/nextjs-app/app/LogDisplay.tsx b/examples/nextjs-app/app/LogDisplay.tsx new file mode 100644 index 00000000..999daf35 --- /dev/null +++ b/examples/nextjs-app/app/LogDisplay.tsx @@ -0,0 +1,45 @@ +// @ts-nocheck +'use client'; + + +import { useEffect, useState } from 'react'; + +function LogDisplay() { + const [logs, setLogs] = useState([]); + + useEffect(() => { + // Override console.log to capture logs + const originalConsoleLog = console.log; + console.log = function(...args) { + const logMessage = args.join(' '); + const event = new CustomEvent('log', { detail: logMessage }); + window.dispatchEvent(event); + originalConsoleLog.apply(console, args); + }; + + // Listen for log events + const handleLogEvent = (event: CustomEvent) => { + setLogs((prevLogs) => [...prevLogs, event.detail]); + }; + + window.addEventListener('log', handleLogEvent); + + return () => { + window.removeEventListener('log', handleLogEvent); + console.log = originalConsoleLog; // Restore original console.log + }; + }, []); + + return ( +
+

Logs

+
+ {logs.map((log, index) => ( +
{log}
+ ))} +
+
+ ); +} + +export default LogDisplay; diff --git a/examples/nextjs/.gitignore b/examples/nextjs/.gitignore index c87c9b39..0d7ef356 100644 --- a/examples/nextjs/.gitignore +++ b/examples/nextjs/.gitignore @@ -34,3 +34,5 @@ yarn-error.log* # typescript *.tsbuildinfo next-env.d.ts + +certificates \ No newline at end of file diff --git a/package.json b/package.json index 9b4449cd..20b19ecc 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,9 @@ "dev:connectkit-next-siwe": "yarn workspace connectkit-next-siwe run dev", "dev:cra": "yarn workspace cra run dev", "dev:nextjs": "yarn workspace nextjs run dev", + "dev:nextjs:https": "yarn workspace nextjs run dev --experimental-https", "dev:nextjs-app": "yarn workspace nextjs-app run dev", + "dev:nextjs-app:https": "yarn workspace nextjs-app run dev --experimental-https", "dev:nextjs-siwe": "yarn workspace nextjs-siwe run dev", "dev:vite": "yarn workspace vite run dev", "dev:testbench": "yarn workspace testbench run dev", diff --git a/packages/connectkit/rollup.config.prod.js b/packages/connectkit/rollup.config.prod.js index 29e8c117..50e1a276 100644 --- a/packages/connectkit/rollup.config.prod.js +++ b/packages/connectkit/rollup.config.prod.js @@ -1,7 +1,7 @@ import peerDepsExternal from 'rollup-plugin-peer-deps-external'; import typescript from 'rollup-plugin-typescript2'; -import packageJson from './package.json'; +import packageJson from './package.json' assert { type: 'json' }; export default [ { diff --git a/packages/connectkit/src/components/Common/ConnectorList/index.tsx b/packages/connectkit/src/components/Common/ConnectorList/index.tsx index 436c21d5..eed4f0e3 100644 --- a/packages/connectkit/src/components/Common/ConnectorList/index.tsx +++ b/packages/connectkit/src/components/Common/ConnectorList/index.tsx @@ -17,6 +17,7 @@ import Alert from '../Alert'; import { WalletProps, useWallets } from '../../../wallets/useWallets'; import { detectBrowser, + isAndroid, isCoinbaseWalletConnector, isWalletConnectConnector, } from '../../../utils'; @@ -34,15 +35,15 @@ const ConnectorList = () => { context.options?.hideRecentBadge || lastConnectorId === 'walletConnect' // do not hoist walletconnect to top of list ? wallets : [ - // move last used wallet to top of list - // using .filter and spread to avoid mutating original array order with .sort - ...wallets.filter( - (wallet) => lastConnectorId === wallet.connector.id - ), - ...wallets.filter( - (wallet) => lastConnectorId !== wallet.connector.id - ), - ]; + // move last used wallet to top of list + // using .filter and spread to avoid mutating original array order with .sort + ...wallets.filter( + (wallet) => lastConnectorId === wallet.connector.id + ), + ...wallets.filter( + (wallet) => lastConnectorId !== wallet.connector.id + ), + ]; return ( @@ -97,7 +98,7 @@ const ConnectorItem = ({ let deeplink = (!wallet.isInstalled && isMobile) || - (wallet.shouldDeeplinkDesktop && !isMobile) + (wallet.shouldDeeplinkDesktop && !isMobile) ? wallet.getWalletConnectDeeplink?.(uri ?? '') : undefined; @@ -114,21 +115,22 @@ const ConnectorItem = ({ type="button" as={deeplink ? 'a' : undefined} href={deeplink ? deeplink : undefined} + target={deeplink && isAndroid() ? '_blank' : undefined} disabled={context.route !== routes.CONNECTORS} onClick={ deeplink ? undefined : () => { - if (redirectToMoreWallets) { - context.setRoute(routes.MOBILECONNECTORS); - } else { - if (shouldConnectImmediately) { - connect({ connector: wallet?.connector }); - } - context.setRoute(routes.CONNECT); - context.setConnector({ id: wallet.id }); + if (redirectToMoreWallets) { + context.setRoute(routes.MOBILECONNECTORS); + } else { + if (shouldConnectImmediately) { + connect({ connector: wallet?.connector }); } + context.setRoute(routes.CONNECT); + context.setConnector({ id: wallet.id }); } + } } >