feat(connectors): expose ready as static method

packages/core/src/connectors/base.ts

@@ -0,0 +1,19 @@
+import { AccountInterface } from 'starknet'
+
+export abstract class Connector<Options = any> {
+  /** Unique connector id */
+  abstract readonly id: string
+  /** Connector name */
+  abstract readonly name: string
+  /** Whether connector is usable */
+  static readonly ready: boolean
+  /** Options to use with connector */
+  readonly options: Options
+
+  constructor({ options }: { options: Options }) {
+    this.options = options
+  }
+
+  abstract connect(): Promise<AccountInterface>
+  abstract account(): Promise<AccountInterface>
+}

packages/core/src/connectors/index.ts

@@ -1,21 +1,2 @@
-import { AccountInterface } from 'starknet'
-
-export abstract class Connector<Options = any> {
-  /** Unique connector id */
-  abstract readonly id: string
-  /** Connector name */
-  abstract readonly name: string
-  /** Whether connector is usable */
-  abstract readonly ready: boolean
-  /** Options to use with connector */
-  readonly options: Options
-
-  constructor({ options }: { options: Options }) {
-    this.options = options
-  }
-
-  abstract connect(): Promise<AccountInterface>
-  abstract account(): Promise<AccountInterface>
-}
-
+export { Connector } from './base'
 export { InjectedConnector } from './injected'

packages/core/src/connectors/injected.ts

@@ -14,7 +14,7 @@ type InjectedConnectorOptions = {
 export class InjectedConnector extends Connector<InjectedConnectorOptions> {
   readonly id = 'injected'
   readonly name = 'argent'
-  readonly ready = typeof window != 'undefined' && !!window.starknet
+  static readonly ready = typeof window != 'undefined' && !!window.starknet
 
   private starknet = getStarknet()
 
@@ -23,7 +23,7 @@ export class InjectedConnector extends Connector<InjectedConnectorOptions> {
   }
 
   async connect() {
-    if (!this.ready) {
+    if (!InjectedConnector.ready) {
       throw new ConnectorNotFoundError()
     }
 
@@ -43,7 +43,7 @@ export class InjectedConnector extends Connector<InjectedConnectorOptions> {
   }
 
   account() {
-    if (!this.ready) {
+    if (!InjectedConnector.ready) {
       throw new ConnectorNotFoundError()
     }
 

packages/core/src/providers/starknet/manager.ts

@@ -51,19 +51,17 @@ export function useStarknetManager(): StarknetState {
 
   const { account, library, error } = state
 
-  const connect = useCallback(async (connector: Connector) => {
-    if (connector.ready) {
-      connector.connect().then(
-        (account) => {
-          dispatch({ type: 'set_account', account: account.address })
-          dispatch({ type: 'set_provider', provider: account })
-        },
-        (err) => {
-          console.error(err)
-          dispatch({ type: 'set_error', error: 'could not activate StarkNet' })
-        }
-      )
-    }
+  const connect = useCallback((connector: Connector) => {
+    connector.connect().then(
+      (account) => {
+        dispatch({ type: 'set_account', account: account.address })
+        dispatch({ type: 'set_provider', provider: account })
+      },
+      (err) => {
+        console.error(err)
+        dispatch({ type: 'set_error', error: 'could not activate StarkNet' })
+      }
+    )
   }, [])
 
   return { account, connect, library, error }

website/docs/hooks/starknet.md

@@ -9,16 +9,15 @@ Hook to access the current instance of the underlying StarkNet library.
 ```typescript
 import { useStarknet } from '@starknet-react/core'
 
-const { account, hasStarknet, connectBrowserWallet, library, error } = useStarknet()
+const { account, connect, library, error } = useStarknet()
 ```
 
 ## Return Values
 
 ```typescript
 {
   account?: string
-  hasStarknet: boolean
-  connectBrowserWallet: () => void
+  connect: (Connector) => Promise<void>
   library: ProviderInterface
   error?: string
 }

website/docs/intro.md

@@ -17,6 +17,7 @@ yarn add @starknet-react/core @argent/get-starknet starknet
 ```
 
 Or with npm:
+
 ```
 npm install @starknet-react/core @argent/get-starknet starknet
 ```
@@ -36,21 +37,23 @@ function App() {
 ```
 
 3. Connect the wallet (needs Argent X StartkNet Wallet extension installed)
+
 ```typescript
-import { useStarknet } from '@starknet-react/core';
+import { useStarknet, InjectedConnector } from '@starknet-react/core'
 
 function YourComponent() {
-  const { connectBrowserWallet } = useStarknet()
+  const { connect } = useStarknet()
 
-  return (
-   <button onClick={connectBrowserWallet}>
-      Connect Wallet
-   </button>
-  )
+  if (!InjectedConnector.ready) {
+    ;<span>Injected connector not found</span>
+  }
+
+  return <button onClick={connect(new InjectedConnector())}>Connect Wallet</button>
 }
 ```
 
 4. Retrieve the account address
+
 ```typescript
 import { useStarknet } from '@starknet-react/core'
 

website/src/components/Demo.tsx

@@ -11,6 +11,7 @@ import {
   useStarknetTransactionManager,
   Transaction,
   useStarknet,
+  InjectedConnector,
 } from '@starknet-react/core'
 
 import CounterAbi from '../abi/counter.json'
@@ -48,16 +49,16 @@ function useCounterContract() {
 }
 
 function DemoAccount() {
-  const { account, connectBrowserWallet, hasStarknet } = useStarknet()
+  const { account, connect } = useStarknet()
   return (
     <Section>
       <SectionTitle>Account</SectionTitle>
       <div>
         <p>Connected Account: {account}</p>
       </div>
-      {hasStarknet ? (
+      {InjectedConnector.ready ? (
         <ActionRoot>
-          <Button onClick={connectBrowserWallet}>Connect Argent-X</Button>
+          <Button onClick={() => connect(new InjectedConnector())}>Connect Argent-X</Button>
         </ActionRoot>
       ) : (
         <div>