fix: wallet connection automatically on page load fix

.gitignore

@@ -32,3 +32,9 @@ storybook-static
 
 tsconfig.tsbuildinfo
 .vercel
+
+
+app/next/certificates/*
+app/next/.env
+app/next/node_modules
+*.pem

app/demo-playground/package.json

@@ -15,7 +15,7 @@
     "postcss": "^8.4.14",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "starkweb": "latest",
+    "starkweb": "0.0.21",
     "starkwebkit": "latest",
     "starkwebkit-next-siwe": "latest",
     "tailwindcss": "^3.3.2"

app/demo-playground/src/pages/_app.tsx

@@ -1,16 +1,38 @@
 import '@/styles/globals.css';
-import { siweClient } from '@/utils/siweClient';
-import { ConnectKitProvider, getDefaultConfig } from 'starkwebkit';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
 import type { AppProps } from 'next/app';
-import { StarkwebProvider, createConfig } from 'starkweb/react';
+import {
+  mainnet,
+  sepolia,
+} from 'starkweb/chains';
+import { argentX, braavos, metamask, keplr } from 'starkweb/connectors';
+import {
+  createConfig,
+  StarkwebProvider,
+} from 'starkweb/react';
+import { ConnectKitProvider } from 'starkwebkit';
+
+import { siweClient } from '@/utils/siweClient';
+import {
+  QueryClient,
+  QueryClientProvider,
+} from '@tanstack/react-query';
+import { http } from 'starkweb';
+
 
-const config = createConfig(
-  getDefaultConfig({
-    walletConnectProjectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!,
-    appName: 'My ConnectKit App',
-  })
-);
+const config = createConfig({
+  chains: [mainnet, sepolia],
+  transports: {
+    [mainnet.chain_id]: http(),
+    [sepolia.chain_id]: http(),
+  },
+  connectors: [
+    argentX(),
+    braavos(),
+    metamask(),
+    keplr(),
+  ],
+});
 const queryClient = new QueryClient();
 export default function App({ Component, pageProps }: AppProps) {
   return (

app/demo-playground/src/pages/index.tsx

@@ -135,10 +135,10 @@ function Connect() {
             onClick={() => connect({ connector, chainId })}
             className="w-full flex items-center justify-center px-4 py-2 bg-teal-500 dark:bg-teal-600 text-white rounded-lg hover:bg-teal-600 dark:hover:bg-teal-700 transition-colors"
           >
-            <img 
+            <img
               src={connector.icon}
               alt={connector.name}
-              className="w-4 h-4 mr-2" 
+              className="w-4 h-4 mr-2"
             />
             <span className="font-medium">
               {connector.name}

app/next/.gitignore

@@ -0,0 +1,4 @@
+.next
+.env
+certificates
+node_modules

app/next/components/Web3Provider.tsx

@@ -24,6 +24,7 @@ import {
   QueryClientProvider,
 } from '@tanstack/react-query';
 
+
 export function getConfig() {
   return createConfig({
     chains: [mainnet, sepolia],

app/next/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --experimental-https --hostname wisemrmusa.fun",
     "build": "next build",
     "start": "next start",
     "lint": "next lint"

packages/starkweb/package.json

@@ -1,15 +1,12 @@
 {
     "name": "starkweb",
-    "version": "0.0.17",
+    "version": "0.0.21",
     "private": false,
     "type": "module",
     "main": "./dist/cjs/exports/starkweb.js",
     "module": "./dist/esm/exports/starkweb.js",
     "types": "./dist/types/exports/starkweb.d.ts",
     "typings": "./dist/types/exports/starkweb.d.ts",
-    "bin": {
-        "starkweb": "./dist/esm/create-starkweb/cli.js"
-    },
     "repository": {
         "type": "git",
         "url": "https://github.com/NethermindEth/starkweb"
@@ -65,11 +62,6 @@
             "import": "./dist/esm/exports/window.js",
             "default": "./dist/cjs/exports/window.js"
         },
-        "./cli": {
-            "types": "./dist/types/cli/bin.d.ts",
-            "import": "./dist/esm/cli/bin.js",
-            "default": "./dist/cjs/cli/bin.js"
-        },
         "./utils": {
             "types": "./dist/types/exports/utils.d.ts",
             "import": "./dist/esm/exports/utils.js",

packages/starkweb/src/connectors/argent.ts

@@ -28,6 +28,7 @@ export function argentX() {
   type Provider = WalletProvider
   type WalletProvider = Evaluate<SNIP1193Provider & {
       providers?: WalletProvider[] | undefined
+      isConnected: boolean
       /** Only exists in MetaMask as of 2022/04/03 */
       _events?: { connect?: (() => void) | undefined } | undefined
       /** Only exists in MetaMask as of 2022/04/03 */
@@ -60,13 +61,25 @@ export function argentX() {
       if (provider && window.starknet_argentX?.isConnected) {
         this.onConnect.bind(this)
         provider.on('accountsChanged', this.onAccountsChanged.bind(this))
+        provider.on('networkChanged', this.onChainChanged.bind(this))
       }
     },
     async connect({ chainId, isReconnecting } = {}) {
       const provider = await this.getProvider()
 
       let accounts: readonly Address[] = []
-      if (isReconnecting) accounts = await this.getAccounts().catch(() => [])
+      if (isReconnecting) {
+        try {
+          accounts = await this.getAccounts().catch(() => []) 
+          const currentChainId = await this.getChainId()
+          return { accounts, chainId: chainId ?? currentChainId }
+        } catch (error) {
+          throw new ProviderRpcError(
+            'Failed to retrieve accounts',
+            (error as RpcError).code || -32000
+          )
+        }
+      } 
 
       try {
         if (!accounts?.length) {
@@ -115,7 +128,7 @@ export function argentX() {
         const provider = await this.getProvider()
         const accounts = (await provider.request({
           type: 'wallet_requestAccounts',
-          params: {}
+          params: {silent_mode: true}
         })) as string[]
         return accounts.map((x) => getStarknetAddress(x))
       } catch (error) {
@@ -156,9 +169,8 @@ export function argentX() {
           // If shim exists in storage, connector is disconnected
           await config.storage?.getItem('argentX.disconnected')
         if (isDisconnected) return false
-
-        const accounts = await this.getAccounts()
-        return !!accounts.length
+        let provider = await this.getProvider()
+        return provider.isConnected
       } catch {
         return false
       }

packages/starkweb/src/connectors/braavos.ts

@@ -21,6 +21,7 @@ import { ProviderRpcError } from "../errors/rpc.js"
     type Provider = WalletProvider
     type WalletProvider = Evaluate<SNIP1193Provider & {
         providers?: WalletProvider[] | undefined
+        isConnected: boolean
         /** Only exists in MetaMask as of 2022/04/03 */
         _events?: { connect?: (() => void) | undefined } | undefined
         /** Only exists in MetaMask as of 2022/04/03 */
@@ -55,7 +56,21 @@ import { ProviderRpcError } from "../errors/rpc.js"
         const provider = await this.getProvider()
 
         let accounts: readonly Address[] = []
-        if (isReconnecting) accounts = await this.getAccounts().catch(() => [])
+        if (isReconnecting) {
+          try {
+            accounts = await this.getAccounts().catch(() => [])
+            const currentChainId = await this.getChainId()
+            return { accounts, chainId: chainId ?? currentChainId }
+          } catch (error) {
+            throw new ProviderRpcError(
+              error as Error,
+              {
+                shortMessage: 'Failed to retrieve accounts',
+                code: (error as RpcError).code || -32000
+              }
+            )
+          }
+        }
 
         try {
           if (!accounts?.length) {
@@ -104,7 +119,7 @@ import { ProviderRpcError } from "../errors/rpc.js"
           const provider = await this.getProvider()
           const accounts = (await provider.request({
             type: 'wallet_requestAccounts',
-            params: {}
+            params: {silent_mode: true}
           })) as string[]
           return accounts.map((x) => getStarknetAddress(x))
         } catch (error) {
@@ -138,9 +153,8 @@ import { ProviderRpcError } from "../errors/rpc.js"
             // If shim exists in storage, connector is disconnected
             await config.storage?.getItem('braavos.disconnected')
           if (isDisconnected) return false
-
-          const accounts = await this.getAccounts()
-          return !!accounts.length
+          let provider = await this.getProvider()
+          return provider.isConnected
         } catch {
           return false
         }

packages/starkweb/src/connectors/keplr.ts

@@ -22,6 +22,7 @@ import { ProviderRpcError } from "../errors/rpc.js"
     type Provider = WalletProvider
     type WalletProvider = Evaluate<SNIP1193Provider & {
         providers?: WalletProvider[] | undefined
+        isConnected: boolean
         /** Only exists in MetaMask as of 2022/04/03 */
         _events?: { connect?: (() => void) | undefined } | undefined
         /** Only exists in MetaMask as of 2022/04/03 */
@@ -51,13 +52,28 @@ import { ProviderRpcError } from "../errors/rpc.js"
         if (provider && window.starknet_keplr?.isConnected) {
           this.onConnect.bind(this)
           provider.on('accountsChanged', this.onAccountsChanged.bind(this))
+          provider.on('networkChanged', this.onChainChanged.bind(this))
         }
       },
       async connect({ chainId, isReconnecting } = {}) {
         const provider = await this.getProvider()
 
         let accounts: readonly Address[] = []
-        if (isReconnecting) accounts = await this.getAccounts().catch(() => [])
+        if (isReconnecting) {
+          try {
+            accounts = await this.getAccounts().catch(() => [])
+            const currentChainId = await this.getChainId()
+            return { accounts, chainId: chainId ?? currentChainId }
+          } catch (error) {
+            throw new ProviderRpcError(
+              error as Error,
+              {
+                shortMessage: 'Failed to retrieve accounts',
+                code: (error as RpcError).code || -32000
+              }
+            )
+          }
+        } 
 
         try {
           if (!accounts?.length) {
@@ -105,7 +121,7 @@ import { ProviderRpcError } from "../errors/rpc.js"
         const provider = await this.getProvider()
         const accounts = (await provider.request({
           type: 'wallet_requestAccounts',
-          params: {}
+          params: {silent_mode: true}
         })) as string[]
         return accounts.map((x) => getStarknetAddress(x))
       },
@@ -140,8 +156,8 @@ import { ProviderRpcError } from "../errors/rpc.js"
             await config.storage?.getItem('keplr.disconnected')
           if (isDisconnected) return false
 
-          const accounts = await this.getAccounts()
-          return !!accounts.length
+          const provider = await this.getProvider()
+          return provider.isConnected
         } catch {
           return false
         }

packages/starkweb/src/connectors/metamask.ts

@@ -23,6 +23,7 @@ import { injectMetamaskBridge } from './metamask-bridge.js'
     type Provider = WalletProvider
     type WalletProvider = SNIP1193Provider & {
       providers?: SNIP1193Provider[] | undefined
+      isConnected: boolean
       /** Only exists in MetaMask as of 2022/04/03 */
       _events?: { connect?: (() => void) | undefined } | undefined
       /** Only exists in MetaMask as of 2022/04/03 */
@@ -54,16 +55,31 @@ import { injectMetamaskBridge } from './metamask-bridge.js'
 
         await config.storage?.setItem('metamask.disconnected', true)
         const provider = await this.getProvider()
-        if (provider) {
+        if (provider && window.starknet_metamask?.isConnected) {
           this.onConnect.bind(this)
           provider.on('accountsChanged', this.onAccountsChanged.bind(this))
+          provider.on('networkChanged', this.onChainChanged.bind(this))
         }
       },
       async connect({ chainId, isReconnecting } = {}) {
         const provider = await this.getProvider()
 
         let accounts: readonly Address[] = []
-        if (isReconnecting) accounts = await this.getAccounts().catch(() => [])
+        if (isReconnecting) {
+          try {
+            accounts = await this.getAccounts().catch(() => [])
+            const currentChainId = await this.getChainId()
+            return { accounts, chainId: chainId ?? currentChainId }
+          } catch (error) {
+            throw new ProviderRpcError(
+              error as Error,
+              {
+                shortMessage: 'Failed to retrieve accounts',
+                code: (error as RpcError).code || -32000
+              }
+            )
+          }
+        }
 
         try {
           if (!accounts?.length) {
@@ -111,7 +127,7 @@ import { injectMetamaskBridge } from './metamask-bridge.js'
         const provider = await this.getProvider()
         const accounts = (await provider?.request({
           type: 'wallet_requestAccounts',
-          params: {}
+          params: {silent_mode: true}
         })) as string[]
         return accounts.map((x) => getStarknetAddress(x))
       },
@@ -151,8 +167,8 @@ import { injectMetamaskBridge } from './metamask-bridge.js'
             await config.storage?.getItem('metamask.disconnected')
           if (isDisconnected) return false
 
-          const accounts = await this.getAccounts()
-          return !!accounts.length
+          const provider = await this.getProvider()
+          return provider.isConnected
         } catch {
           return false
         }

packages/starkweb/src/exports/connectors.ts

@@ -4,4 +4,3 @@ export { injected } from "../connectors/injected.js";
 export { keplr } from "../connectors/keplr.js";
 export { metamask } from "../connectors/metamask.js";
 export { createConnector } from "../core/connectors/createConnector.js";
-

packages/starkweb/src/types/window.ts

@@ -19,5 +19,11 @@ declare global {
       enable: () => Promise<string[]>
       isConnected: boolean
     } & SNIP1193Provider | undefined
+    starknet_catridge?: {
+      enable: () => Promise<string[]>
+      isConnected: boolean
+      connect: () => Promise<{address: string}>
+      disconnect: () => Promise<void>
+    } & SNIP1193Provider | undefined
   }
 }