> ## 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.

````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 };
````

### Links

> [card] [CodeSandbox](https://codesandbox.io/p/github/chronicIntrovert/my-wallet-connect-app/main)
>
> View an interactive demo of the Bitski connector for WalletConnect

> [card] [More info](https://github.com/chronicIntrovert/my-wallet-connect-app)
>
> View the source code for the demo


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.