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

# WalletConnect / Web3Modal

### Code Sample

WalletConnect is a protocol for connecting Dapps to mobile wallets with QR code scanning or deep linking. Utilizing WalletConnect both enables users
to sign in with the Bitski iOS app and enables deep links to the Bitski Dapp browser. If you are a Dapp focused on mobile-first, this integration offers
the perfect setup for both our browser extension and iOS app.

<Note>
  Required dependencies: [@web3modal/react and
  @web3modal/ethereum](https://docs.walletconnect.com/2.0/web3modal/react/installation),
  [wagmi](https://wagmi.sh). See the CodeSandbox's `package.json` for more
  details.
</Note>

<CodeGroup>
  ````tsx main.tsx theme={null}
  import { EthereumClient } from '@web3modal/ethereum'
  import { Web3Modal } from '@web3modal/react'
  import * as React from 'react'
  import * as ReactDOM from 'react-dom/client'
  import { WagmiConfig } from 'wagmi'

  import { App } from "./App";
  import { chains, client, walletConnectProjectId } from "./wagmi";

  const ethereumClient = new EthereumClient(client, chains)

  ReactDOM.createRoot(document.getElementById('root')!).render(

  {" "}
  <React.StrictMode>
    <WagmiConfig client={client}>
      <App />
      <Web3Modal
        projectId={walletConnectProjectId}
        ethereumClient={ethereumClient}
        mobileWallets={[
          {
            id: "bitski",
            name: "Bitski",
            links: {
              native: "bitski://",
              universal: "https://wallet.bitski.com/walletconnect",
            },
          },
        ]}
        desktopWallets={[
          {
            id: "bitski",
            name: "Bitski",
            links: {
              native:
                "https://chrome.google.com/webstore/detail/bitski/feejiigddaafeojfddjjlmfkabimkell",
              universal: "https://wallet.bitski.com",
            },
          },
        ]}
        walletImages={{
          bitski: "https://cdn.bitskistatic.com/docs-web/bitskiWallet.svg",
        }}
      />
    </WagmiConfig>
  </React.StrictMode>) ```

  ```tsx wagmi.ts
  import { w3mConnectors, w3mProvider } from "@web3modal/ethereum";
  import { configureChains, createClient } from "wagmi";
  import { goerli, mainnet } from "wagmi/chains";

  export const walletConnectProjectId = "YOUR WALLET CONNECT CLOUD PROJECT ID";

  const { chains, provider, webSocketProvider } = configureChains(
    [mainnet, ...(import.meta.env?.MODE === "development" ? [goerli] : [])],
    [w3mProvider({ projectId: walletConnectProjectId })]
  );

  export const client = createClient({
    autoConnect: true,
    connectors: w3mConnectors({
      chains,
      projectId: walletConnectProjectId,
      version: 1,
    }),
    provider,
    webSocketProvider,
  });

  export { chains };
  ````
</CodeGroup>

### Links

<CardGroup cols={2}>
  <Card title="CodeSandbox" icon="codepen" color="#ea5a0c" href="https://codesandbox.io/p/github/chronicIntrovert/my-wallet-connect-app/main">
    View an interactive demo of the Bitski connector for WalletConnect
  </Card>

  <Card title="More info" icon="square-info" color="#0285c7" href="https://github.com/chronicIntrovert/my-wallet-connect-app">
    View the source code for the demo
  </Card>
</CardGroup>