القائمة
Use wagmi React hooks for Celo dApps. Includes wallet connection, transaction hooks, and React integration patterns.
يُحدَّد Prompt الذي يراجع المصدر أولًا بشكل افتراضي. يمكنك التبديل إلى أمر مباشر أو تنزيل نسخة محلية.
اقرأ SKILL.md وأي ملفات مرافقة يعرضها SkillsMP قبل أن تقرر التثبيت.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
يتجاوز الأمر المباشر Prompt المخصّص للمراجعة. افحص المصدر قبل تشغيله.
npx skills add https://github.com/celo-org/agent-skills --skill wagmiيبقى الأمر في سطر واحد. مرّر أفقيًا لمراجعته كاملًا قبل النسخ.
تفضّل نسخة محلية؟ نزّل الملفات المتاحة حاليًا لدى SkillsMP.
استنادا إلى تصنيف SOC المهني
عرض SKILL.md
| name | wagmi |
| description | Use wagmi React hooks for Celo dApps. Includes wallet connection, transaction hooks, and React integration patterns. |
| license | Apache-2.0 |
| metadata | {"author":"celo-org","version":"1.0.0"} |
Wagmi is a React library for building Ethereum applications with hooks. It uses viem under the hood.
Source: https://wagmi.sh
npm install wagmi viem@2.x @tanstack/react-query
// config.ts
import { http, createConfig } from "wagmi";
import { celo, celoSepolia } from "wagmi/chains";
export const config = createConfig({
chains: [celo, celoSepolia],
: {
[celo.]: (),
[celoSepolia.]: (),
},
});
import { http, createConfig } from "wagmi";
import { celo, celoSepolia } from "wagmi/chains";
import { injected, walletConnect, metaMask } from "wagmi/connectors";
const projectId = process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!;
export const config = createConfig({
chains: [celo, celoSepolia],
connectors: [
injected(),
walletConnect({ projectId }),
metaMask(),
],
transports: {
[celo.id]: http(),
[celoSepolia.id]: http(),
},
});
// app.tsx
import { WagmiProvider } from "wagmi";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { config } from "./config";
const queryClient = new QueryClient();
function App({ children }: { children: React.ReactNode }) {
return (
<WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>
{children}
</QueryClientProvider>
</WagmiProvider>
);
}
import { useConnect, useConnectors } from "wagmi";
function WalletOptions() {
const { connect } = useConnect();
const connectors = useConnectors();
return (
<div>
{connectors.map((connector) => (
<button
key={connector.uid}
onClick={() => connect({ connector })}
>
{connector.name}
</button>
))}
</div>
);
}
import { useAccount, useDisconnect } from "wagmi";
function Account() {
const { address, isConnected, chain } = useAccount();
const { disconnect } = useDisconnect();
if (!isConnected) return <WalletOptions />;
return (
<div>
<p>Connected: {address}</p>
<p>Chain: {chain?.name}</p>
<button onClick={() => disconnect()}>Disconnect</button>
</div>
);
}
import { useReadContract } from "wagmi";
const ERC20_ABI = [
{
name: "balanceOf",
type: "function",
stateMutability: "view",
inputs: [{ name: "account", type: "address" }],
outputs: [{ type: "uint256" }],
},
] as const;
function TokenBalance({ address }: { address: `0x${string}` }) {
const { data: balance, isLoading } = useReadContract({
address: "0x765de816845861e75a25fca122bb6898b8b1282a", // USDm
abi: ERC20_ABI,
functionName: "balanceOf",
args: [address],
});
if (isLoading) return <div>Loading...</div>;
return <div>Balance: {balance?.toString()}</div>;
}
import { useWriteContract, useWaitForTransactionReceipt } from "wagmi";
import { parseEther } from "viem";
function TransferToken() {
const { writeContract, data: hash, isPending } = useWriteContract();
const { isLoading: isConfirming, isSuccess } = useWaitForTransactionReceipt({
hash,
});
async function handleTransfer() {
writeContract({
address: "0x765de816845861e75a25fca122bb6898b8b1282a",
abi: ERC20_ABI,
functionName: "transfer",
args: ["0x...", parseEther("10")],
});
}
return (
<div>
<button onClick={handleTransfer} disabled={isPending}>
{isPending ? "Confirming..." : "Transfer"}
</button>
{isConfirming && <div>Waiting for confirmation...</div>}
{isSuccess && <div>Transaction confirmed!</div>}
</div>
);
}
import { useSendTransaction, useWaitForTransactionReceipt } from "wagmi";
import { parseEther } from "viem";
function SendCelo() {
const { sendTransaction, data: hash, isPending } = useSendTransaction();
const { isSuccess } = useWaitForTransactionReceipt({ hash });
return (
<button
onClick={() =>
sendTransaction({
to: "0x...",
value: parseEther("0.1"),
})
}
disabled={isPending}
>
Send 0.1 CELO
</button>
);
}
import { useSwitchChain } from "wagmi";
import { celo, celoSepolia } from "wagmi/chains";
function NetworkSwitcher() {
const { switchChain, isPending } = useSwitchChain();
return (
<div>
<button
onClick={() => switchChain({ chainId: celo.id })}
disabled={isPending}
>
Switch to Celo Mainnet
</button>
<button
onClick={() => switchChain({ chainId: celoSepolia.id })}
disabled={isPending}
>
Switch to Celo Sepolia
</button>
</div>
);
}
| Hook | Purpose |
|---|---|
| useAccount | Get connected account info |
| useConnect | Connect wallet |
| useDisconnect | Disconnect wallet |
| useReadContract | Read contract state |
| useWriteContract | Write to contract |
| useSendTransaction | Send native currency |
| useWaitForTransactionReceipt | Wait for tx confirmation |
| useSwitchChain | Switch networks |
| useBalance | Get account balance |
| useChainId | Get current chain ID |
| Network | Chain ID |
|---|---|
| Celo Mainnet | 42220 |
| Celo Sepolia | 11142220 |
{
"dependencies": {
"wagmi": "^2.0.0",
"viem": "^2.0.0",
"@tanstack/react-query": "^5.0.0"
}
}