docs: improve mutation hooks documentation

website/content/hooks/mutation/useContractWrite.mdx

@@ -7,12 +7,43 @@ hookType: mutation
 
 Hook to send one or more transaction to Starknet.
 
+<a href="https://github.com/apibara/starknet-react/blob/main/website/lib/erc20.ts" target="_blank">Sample ABI file</a>
+
 ## Usage
 
 ```ts
 import { useContractWrite } from "@starknet-react/core";
+import { erc20ABI } from "./erc20";
+import { useMemo } from "react";
 
 export function App() {
-  // TODO
+  const { address } = useAccount();
+	const { chain } = useNetwork();
+
+	const { contract } = useContract({
+		abi: erc20ABI,
+		address: chain.nativeCurrency.address,
+	});
+
+	const calls = useMemo(() => {
+		if (!address || !contract) return [];
+		return contract.populateTransaction["transfer"]!(address, { low: 1, high: 0 });
+	}, [contract, address]);
+
+	const {
+		writeAsync,
+		data,
+		isPending,
+	} = useContractWrite({
+		calls,
+	});
+
+	return (
+		<>
+			<button onClick={() => writeAsync()}>Transfer</button>
+			<p>status: {isPending && <div>Submitting...</div>}</p>
+			<p>hash: {data?.transaction_hash}</p>
+		</>
+	);
 }
 ```

website/content/hooks/mutation/useSignTypedData.mdx

@@ -5,16 +5,30 @@ hookType: mutation
 
 ---
 
-Hook to disconnect the currently connected wallet.
+Request user to sign a piece of data.
+
+You can read more about Starknet signatures and the meaning of the arguments [on the Starknet.js documentation](https://www.starknetjs.com/docs/guides/signature/).
 
 ## Usage
 
 
 ```ts
-import { useSignTypedData } from "@starknet-react/core";
+import { useSignTypedData, useAccount } from "@starknet-react/core";
+import { exampleData } from "./exampleData";
 
 export function App() {
-  // TODO
+  const { account } = useAccount();
+  const { data, isPending, signTypedData } = useSignTypedData(exampleData);
+
+	return (
+		<button
+			className="w-full"
+			onClick={() => signTypedData(exampleData)}
+			disabled={!account}
+		>
+			{isPending ? <p>Waiting for wallet...</p> : <p>Sign Message</p>}
+		</button>
+	);
 }
 ```
 

website/content/hooks/query/useStarkName.mdx

@@ -9,6 +9,8 @@ Get the Stark name associated with an address.
 ## Usage
 
 ```tsx
+import { useStarkName } from "@starknet-react/core"
+
 function Component() {
   const address =
     "0x061b6c0a78f9edf13cea17b50719f3344533fadd470b8cb29c2b4318014f52d3";