Complete documentation for setting up the environment, processing payments, and handling withdrawals.
Create your Vite project and enter the directory.
1npm create vite@latest my-cryptoproject
2cd my-projectInstall wagmi, viem, react-query, and your SDK dependency.
1npm install wagmi viem @tanstack/react-query my-gateway-sdkSet up your main entry file with WagmiProvider and QueryClientProvider.
1import React from "react";
2import ReactDOM from "react-dom/client";
3import { WagmiProvider, createConfig, http } from "wagmi";
4import { sepolia } from "wagmi/chains";
5import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
6import App from "./App";
7
8const config = createConfig({
9 chains: [sepolia],
10 transports: {
11 [sepolia.id]: http() // use your alchemy url sometime http does not work
12 }
13});
14
15const queryClient = new QueryClient();
16
17ReactDOM.createRoot(document.getElementById("root")!).render(
18 <React.StrictMode>
19 <WagmiProvider config={config}>
20 <QueryClientProvider client={queryClient}>
21 <App />
22 </QueryClientProvider>
23 </WagmiProvider>
24 </React.StrictMode>
25);Create a ConnectButton component to connect and disconnect wallets.
1"use client";
2import { useConnect, useAccount, useDisconnect } from "wagmi";
3import { useState } from "react";
4
5export function ConnectButton() {
6 const { connectors, connect, status, error } = useConnect();
7 const { address, isConnected } = useAccount();
8 const { disconnect } = useDisconnect();
9 const [activating, setActivating] = useState<string | null>(null);
10
11 if (isConnected) {
12 return (
13 <div className="space-y-2">
14 <p className="text-sm break-all">Connected: {address}</p>
15 <button onClick={() => disconnect()} className="px-4 py-2 bg-red-500 text-white rounded-md">
16 Disconnect
17 </button>
18 </div>
19 );
20 }
21
22 return (
23 <div className="space-y-2">
24 {connectors.map((connector) => (
25 <button
26 key={connector.id}
27 onClick={() => {
28 setActivating(connector.id);
29 connect({ connector });
30 }}
31 disabled={status === "pending" && activating === connector.id}
32 className="flex items-center justify-between px-4 py-2 bg-gray-200 rounded-md w-full"
33 >
34 {connector.name}
35 {status === "pending" && activating === connector.id && " (connecting...)"}
36 </button>
37 ))}
38 {error && <p className="text-sm text-red-500">Error: {error.message}</p>}
39 </div>
40 );
41}Fetch and display merchant balance with your SDK.
1"use client";
2import { useMerchantBalance } from "my-gateway-sdk";
3
4export default function MerchantDashboard({ merchant }: { merchant: `0x${string}` }) {
5 const { balance, isLoading, refetch } = useMerchantBalance(merchant);
6
7 if (isLoading) return <p>Loading...</p>;
8
9 return (
10 <div className="space-y-4 p-4 border rounded-md">
11 <p><strong>Merchant Balance:</strong> {balance ? balance.toString() : "0"} wei</p>
12 <button onClick={() => refetch()} className="px-4 py-2 bg-blue-500 text-white rounded-md">
13 Refresh
14 </button>
15 </div>
16 );
17}Bring it all together in your App component.
1import { ConnectButton } from "./ConnectButton";
2import MerchantDashboard from "./MerchantDashboard";
3
4function App() {
5 return (
6 <div>
7 <h1>Crypto Payment Gateway</h1>
8 <ConnectButton />
9 <MerchantDashboard merchant="0x1234...abcd" />
10 </div>
11 );
12}
13export default App;