StarknetKit
Docs
Injected

Injected connector

We provide support for the two popular Wallet extensions on Starknet, Argent X and Braavos.

Argent X

ArgentX is the first open-source wallet on StarkNet powered by native account abstraction. Available as a browser extension across different browsers’ web stores, Argent X helps you create, manage, and connect accounts to decentralized applications built on StarkNet.

Braavos

Braavos Smart Wallet for StarkNet makes self-custodial asset management easier than ever! With Braavos, you can securely access decentralized applications on StarkNet and manage your assets from within your browser.

Keplr

Keplr is a browser extension wallet for the Inter blockchain ecosystem. It is a IBC-enabled wallet for the Cosmos ecosystem. Recently available for Starknet.

MetaMask Snap

MetaMask Snap is an extension of the MetaMask wallet for Starknet. More informations about integration methods here.

OKX Wallet

OKX Wallet is a universal crypto wallet available on a wide range of platforms (app, web, extension, etc.)

Fordefi

For builders, traders, and operators, Fordefi’s comprehensive MPC wallet platform and web3 gateway enables you to securely self-custody your private keys, seamlessly connect to thousands of dApps across any blockchain, protect your workflows with granular policies, and manage your digital asset operations all-in-one place.

Establishing a Connection with InjectedConnector

To enable the Injected connector, you need to first import the InjectedConnector from StarknetKit:

import { connect, disconnect } from "starknetkit"
import { InjectedConnector } from "starknetkit/injected"

After importing, you need to call the connect method, passing in your Argent X/Braavos connector:

const { wallet } = await connect({
  connectors: [
    new InjectedConnector({ options: { id: 'braavos', name: 'Braavos' } }),
    new InjectedConnector({ options: { id: 'argentX', name: 'Argent X' } }),
    new InjectedConnector({ options: { id: 'keplr', name: 'Keplr' } }),
    new InjectedConnector({ options: { id: 'metamask', name: 'MetaMask' } }),
    new InjectedConnector({ options: { id: 'okxwallet', name: 'OKX' } }),
    new InjectedConnector({ options: { id: 'fordefi', name: 'Fordefi' } })
  ],
})
ℹ️

If you face import errors with typescript, head to your tsconfig.json, and update your moduleResolution and module to use Bundler and ES2015 respectively.

Connection Parameters

The Injected Connector takes a single param options used to specify the id of the connector to be used. Name and icon can be passed as additional (optional) parameters.

// with id only
new InjectedConnector({
  options: { id: "argentX" },
})
new InjectedConnector({
  options: { id: "braavos" },
})
 
// with id, name and icon
new InjectedConnector({
  options: {
    id: "argentX",
    name: "Argent X",
    icon: "data:image/svg+xml;base64,PHN2ZyB3aWR0a....",
  },
})
 
new InjectedConnector({
  options: {
    id: "braavos",
    name: "Braavos",
    icon: "data:image/svg+xml;base64,PHN2ZyB3aWR0a....",
  },
})

The available methods are:

available(): boolean; // check if the connector is available
chainId(): Promise<bigint>; // get the chain id
ready(): Promise<boolean>; // check if the connector is ready to use
account(provider: ProviderOptions | ProviderInterface): Promise<AccountInterface>; // get the connected account
connect(params: ConnectOptions): Promise<ConnectorData>; // connect to the connector
disconnect(): Promise<void>; // disconnect from the connector
request<T extends RpcMessage["type"]>(call: RequestFnCall<T>): Promise<RpcTypeToMessageMap[T]["result"]>; // send a request to the connector