> ## Documentation Index
> Fetch the complete documentation index at: https://docs.chipipay.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Connector

> Let any Starknet dApp connect to a Chipi hosted smart-account wallet — passkey, gasless, no extension, no WalletConnect. The Argent/Ready "Web Wallet" model.

`@chipi-stack/starknet-connector` is a [starknet-react](https://starknet-react.com) /
[get-starknet](https://github.com/starknet-io/get-starknet) connector. A dApp adds
**one line** and its users can connect with their Chipi wallet — a passkey
smart-account that signs **gasless** through the paymaster. No browser extension,
no WalletConnect; the same hosted-wallet model Argent/Ready's "Web Wallet" and
Cartridge Controller use.

<Note>
  This is how Starknet dApps actually connect — via the get-starknet / starknet-react
  connector interface, not WalletConnect (which is draft/unused on Starknet).
</Note>

## Install

```bash theme={null}
npm install @chipi-stack/starknet-connector
```

## Add the connector

```tsx theme={null}
import { StarknetConfig, publicProvider } from "@starknet-react/core";
import { mainnet } from "@starknet-react/chains";
import { ChipiConnector } from "@chipi-stack/starknet-connector";

const connectors = [
  new ChipiConnector(), // "Connect with Chipi"
  // ...argent(), braavos(), etc.
];

export function Providers({ children }) {
  return (
    <StarknetConfig chains={[mainnet]} provider={publicProvider()} connectors={connectors}>
      {children}
    </StarknetConfig>
  );
}
```

Your existing `useConnect` / `useAccount` flow now offers **Connect with Chipi**,
and `account.signMessage(...)` / `account.execute(...)` route to the user's Chipi
wallet — gasless, signed with their passkey.

## How it works

```
your dApp                          Chipi hosted wallet (wallet.chipipay.com)
─────────                          ──────────────────────────────────────────
ChipiConnector.connect()
  ├─ opens a popup ──────────────►  /connect  (the user's authenticated wallet)
  └─ postMessage  ◄────────────►    approval UI (passkey + gasless paymaster)
account.execute(calls)
  └─ wallet_addInvokeTransaction ─►  user approves ─► sponsored tx ─► tx hash
```

1. `ChipiConnector` is **transport only** — it opens the hosted wallet in a popup
   and forwards get-starknet `wallet_*` RPC calls over `postMessage`. It holds no
   keys and signs nothing itself.
2. The **hosted wallet** (`/connect`) authenticates the user, renders a **decoded
   approval** for every connect / sign / execute, then runs the real passkey +
   paymaster path and posts the result back.
3. `connector.account(provider)` wraps the channel in a `starknet.js`
   `WalletAccount`, so the dApp sees a standard `AccountInterface`.

## Also on the extension

The same hosted-wallet approval path is reachable from the **Chipi Wallet
browser extension** — it injects the standard get-starknet provider on every
page (no popup needed to be *discovered*, only to approve), so dApps that scan
for installed wallets list Chipi automatically. See the extension listing on
the [Chrome Web Store](https://chromewebstore.google.com/detail/oaaommjokjjclmkgldlooihpfhbigejl).
Both paths terminate in the same hosted wallet and the same decoded-approval
security model described in [Security model](/sdk/connector/security).

## Try the example

A runnable starknet-react example lives in the repo:
[`examples/connect-with-chipi`](https://github.com/chipi-pay/sdks/tree/main/examples/connect-with-chipi).
It connects, signs typed data, and runs a gasless execute against a local Chipi
wallet — the full round-trip.