How to connect your Reown Wallet to Vite and React

This long article will show you how to add Reown Wallet Connect to an app made with Vite and React.
At UNCW3B, we use the same approach in our Web3 projects because it makes wallet onboarding smooth and developer-friendly.

The main goal is to help individuals connect to wallets like MetaMask, Trust Wallet, Binance Web3 Wallet, and many more. After you put it up, you can talk to users’ wallets, check their balances, send tokens, and even work with smart contracts.

This tutorial starts out easy and then moves on to the bigger picture. When you’re done, you’ll know what to do next, exactly the way we structure our dApps at UNCW3B.

What is Reown?

Reown is a framework for connecting wallets that lets your dApp connect to more than one wallet at a time using just one SDK.
Reown gives you one interface instead of having to write separate programs for MetaMask, Trust Wallet, and other wallets.

It’s essentially a “bridge” that connects your app to other wallets.
Without Reown, you would need to manually integrate each wallet provider, maintain separate UI flows, and update them as each provider changes.
With Reown, you gain a unified interface that saves hours of development time and reduces errors.

This is why UNCW3B includes Reown as a standard part of our stack when building Web3 apps.
In fact, we have measured that Reown reduces wallet connection issues for end-users by up to 40%, which directly improves user retention in our projects.

What is Wagmi?

Wagmi is a group of React hooks that work with Ethereum-based projects.
It helps you:

• Link to wallets.
• Take care of accounts.
• Get balances.
• Use smart contracts to interact.

Reown and Wagmi go along perfectly:
– Reown takes care of the modal, which is the UI for choosing a wallet.
– Wagmi is in charge of talking to the blockchain on a technical level.
Together, they give you both a clean user experience and powerful developer tools.
This Reown + Wagmi pairing is the exact setup UNCW3B uses in production-ready Web3 applications.

One key advantage of Wagmi is that it is built on top of viem, a modern blockchain client library.
This ensures you get strong type safety, great developer experience, and reliable interaction with smart contracts.
At UNCW3B, we especially like how easy it is to switch networks and how Wagmi handles multiple chains gracefully.

⚙️ 1. Start the Vite Project

First, let’s use Vite to make our React project. Vite is a fast build tool that makes setting up a React project almost instant.
At UNCW3B, we use Vite instead of Create React App because it compiles faster and is easier to configure.

npm create vite@latest reown-demo
cd reown-demo 
npm install

Now you need to install the Reown and Wagmi dependencies:

npm install @reown/appkit @reown/appkit-adapter-wagmi wagmi viem @tanstack/react-query

This provides you:

• The Reown SDK is located at @reown/appkit.
• @reown/appkit-adapter-wagmi → Lets Reown and Wagmi talk to each other.
• wagmi → React hooks for managing wallets.
• viem ← Blockchain client library that Wagmi uses behind the scenes.
• @tanstack/react-query is a library for managing state and caching (for API and blockchain queries).

At UNCW3B, we always keep this dependency set as part of our starter template.
This makes sure every new project starts with the same reliable Web3 building blocks.

📁 2. Configure Reown

Create a file named src/reown.js. This file will hold the wallet configuration.
Keeping this configuration in one place makes it easier to maintain, especially if you add more chains later.

Example: src/reown.js

import { WagmiAdapter } from "@reown/appkit-adapter-wagmi";
import { createAppKit } from "@reown/appkit/react";
import { mainnet, polygon, bsc } from "wagmi/chains";

const projectId = "xxxxx"; // Reown Dashboard üzerinden aldığın project id

const metadata = {
  name: "DappCenter",
  description: "Simple Reown wallet connect example",
  url: "http://localhost:5173", // domaininle değiştir
  icons: ["https://dappcenter.app/favicon.png"],
};

const chains = [mainnet, polygon, bsc];

export const wagmiAdapter = new WagmiAdapter({
  networks: chains,
  projectId,
  ssr: false,
});

createAppKit({
  adapters: [wagmiAdapter],
  projectId,
  networks: chains,
  metadata,
  allWallets: "SHOW",
});

What it means

• Reown needs this projectId. After you sign up, you may get it via the Reown Dashboard. It tells you what your app is. (UNCW3B stores this securely in environment variables.)
• Metadata: This tells the wallet modal how your app should look (app name, description, and logo).
• Chains: Tells your app which blockchains it works with. You can add more later, such as Arbitrum, Base, Optimism, and so on.
• createAppKit sets up the Reown modal and makes it available to everyone through window.appKit.

In our experience at UNCW3B, keeping metadata clean and professional builds trust with end users.
A clear app name, logo, and description help users feel safe when connecting their wallet.

📂 3. main.jsx File

In your main.jsx, wrap your application with Wagmi and React Query providers.
This ensures wallet and blockchain data is accessible everywhere.
If you skip this step, your components won’t be able to access wallet state.

Example: main.jsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { WagmiProvider } from "wagmi";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { wagmiAdapter } from "./reown";

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <WagmiProvider config={wagmiAdapter.wagmiConfig}>
      <QueryClientProvider client={queryClient}>
        <App />
      </QueryClientProvider>
    </WagmiProvider>
  </React.StrictMode>
);

💻 4. App.jsx File

Now, let’s create the main UI. We’ll display a Connect Wallet button if the user is not connected, or show the wallet address if they are.
This is a minimal example, but even this gives users confidence that their wallet connection is working.

Example: App.jsx

import React from "react";
import { useAccount, useDisconnect, useBalance } from "wagmi";

function App() {
  const { address, isConnected } = useAccount();
  const { disconnect } = useDisconnect();
  const { data: balance } = useBalance({ address, chainId: 1 });

  return (
    <div style={{ textAlign: "center", marginTop: "100px" }}>
      <h1>Reown Wallet Connect (Vite + React)</h1>
      {!isConnected ? (
        <button
          style={{
            padding: "10px 20px",
            fontSize: "16px",
            cursor: "pointer",
            borderRadius: "8px",
          }}
          onClick={() => window.appKit?.open()}
        >
          Connect Wallet
        </button>
      ) : (
        <div>
          <p>Connected: {address}</p>
          {balance && <p>ETH Balance: {balance.formatted}</p>}
          <button onClick={() => disconnect()}>Disconnect</button>
        </div>
      )}
    </div>
  );
}

export default App;

Reason

• useAccount() checks if the user is logged in and gets their wallet address.
• useDisconnect() lets the user disconnect on their own.
• useBalance() gets the ETH balance of the account that is connected.
• window.appKit.open() opens the modal for choosing a Reown wallet.

This makes the software more useful because the user can not only connect, but also see their balance and detach.
This is exactly how we implement wallet UX at UNCW3B, and we find that showing a user’s balance right away improves engagement.

🚀 5. Run the Project

Start the project with:

npm run dev

When you open http://localhost:5173, you should now see the Connect Wallet button.
Try connecting with MetaMask or Trust Wallet and confirm the balance shows.
At UNCW3B, this is our first checkpoint in every Web3 integration.

🎯 Final Outcome

• 🔗 With Reown, your application can be integrated with the most popular wallets like MetaMask, Trust Wallet, and Binance Web3 Wallet—with a single smooth modal.
• 🛠️ Wagmi hooks such as useAccount, useDisconnect, and useBalance give you all that you need to manage wallet data in a few lines of code.
• 🚀 The setup we’ve built is minimal, but it’s production-ready already—and you can add to it incrementally as your project expands. This is also the base template we roll out at UNCW3B.

🔮 What to do next

Now that the wallet connection is working, here are some cool things you can make from here.
These are also the exact next steps we usually add at UNCW3B:

• ✍️ Sign Messages – Use useSignMessage to let users prove they own a wallet. This is useful for login flows without passwords.
• 💸 Send Transactions – Use useSendTransaction to send ETH or tokens back. Many of our apps require microtransactions, and this is how we build them.
• 📜 Smart Contracts – Talk to contracts directly with useContractWrite and useContractRead. For example, you can mint NFTs, stake tokens, or interact with DeFi protocols.
• 🎨 Better UI – You can make the interface look nicer by replacing the standard button with a custom one or by using Reown’s built-in ConnectButton. Branding matters a lot in user trust.
• 🌐 Become Multi-Chain – To get more people to use your app, add support for other networks like Optimism, Arbitrum, or Base. At UNCW3B, we typically add Base and Arbitrum to give users low-fee options.
• 🧪 Testing – Always test wallet connections on testnets like Goerli or Sepolia before going live. This saves costly mistakes.
• 🔒 Security – Never expose private keys. Store sensitive data in environment variables and always verify user actions server-side.