If you’re building with Next.js or React, wagmi is the most developer-friendly library.

Install:

npm install wagmi viem

Setup Provider & Connect Button

import { WagmiConfig, createConfig, configureChains } from 'wagmi';
import { mainnet } from 'wagmi/chains';
import { MetaMaskConnector } from 'wagmi/connectors/metaMask';
import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';

const { chains, publicClient } = configureChains(
  [
    {
      id: 420042, // VSC Chain ID
      name: 'Vector Smart Chain',
      rpcUrls: { default: { http: ['<https://rpc.vscblockchain.org>'] } },
    }
  ],
  [jsonRpcProvider({ rpc: () => ({ http: '<https://rpc.vscblockchain.org>' }) })]
);

const config = createConfig({
  autoConnect: true,
  connectors: [new MetaMaskConnector({ chains })],
  publicClient,
});

function App() {
  return (
    <WagmiConfig config={config}>
      {/* UI Components with useAccount, useConnect, useContractRead, etc. */}
    </WagmiConfig>
  );
}