Connectkit support telegram web apps

examples/nextjs-app/.gitignore

@@ -34,3 +34,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+certificates

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<string[]>([]);
+
+  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 (
+    <div style={{ padding: '10px', backgroundColor: '#333', color: '#fff', fontFamily: 'monospace' }}>
+      <h2>Logs</h2>
+      <div style={{ maxHeight: '300px', overflowY: 'auto' }}>
+        {logs.map((log, index) => (
+          <div key={index}>{log}</div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default LogDisplay;

examples/nextjs/.gitignore

@@ -34,3 +34,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+certificates

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",

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 [
   {

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 (
     <ScrollArea mobileDirection={'horizontal'}>
@@ -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 });
             }
+          }
       }
     >
       <ConnectorIcon