+
+```javascript
+import { http, createConfig } from "wagmi";
+import {
+ anvil,
+ arbitrum,
+ arbitrumGoerli,
+ base,
+ baseSepolia,
+ mainnet,
+ optimism,
+ optimismGoerli,
+ sepolia,
+} from "wagmi/chains";
+import { coinbaseWallet, injected, walletConnect } from "wagmi/connectors";
+import { createClient } from "viem";
+
+export const config = createConfig({
+ chains: [
+ anvil,
+ mainnet,
+ sepolia,
+ arbitrum,
+ arbitrumGoerli,
+ optimismGoerli,
+ optimism,
+ base,
+ baseSepolia,
+ ],
+ connectors: [
+ injected(),
+ coinbaseWallet(),
+ walletConnect({ projectId: import.meta.env.VITE_WC_PROJECT_ID }),
+ ],
+ client({ chain }) {
+ return createClient({ chain, transport: http() });
+ },
+});
+
+declare module "wagmi" {
+ interface Register {
+ config: typeof config;
+ }
+}
+
+```
+
+
+
+```javascript
+import { useAccount, useConnect, useDisconnect, useSwitchChain } from "wagmi";
+import { useState } from "react";
+
+const Account = () => {
+ const account = useAccount();
+ const { connectors, connect, status, error } = useConnect();
+ const { disconnect } = useDisconnect();
+ const { chains, switchChain } = useSwitchChain();
+ const [isChainDropdownOpen, setIsChainDropdownOpen] = useState(false);
+
+ return (
+
+
+ Account
+
+
+
+ Status: {account.status.toLocaleUpperCase()}
+
+
+ Address:{" "}
+ {account.addresses?.[0]}
+
+
+ Chain ID: {account.chain?.name} | {account.chainId}
+
+
+
+ {/* Display chain switching and disconnect options when connected */}
+ {account.status === "connected" && (
+
+ {/* Chain switching dropdown */}
+
+
+ {/* Dropdown menu for chain options */}
+ {isChainDropdownOpen && (
+
+ {chains.map((chainOption) => (
+
+ ))}
+
+ )}
+
+ {/* Disconnect button */}
+
+
+ )}
+
+
+ {/* Connect section */}
+
+ Connect
+
+ {connectors.map((connector) => (
+
+ ))}
+
+ Status: {status.toLocaleUpperCase()}
+ {error?.message}
+
+
+ );
+};
+
+export default Account;
+```
+
+
+
+```javascript
+import Account from "./components/Account";
+
+function App() {
+ return (
+ <>
+
+
+```typescript
+import { defineConfig } from "@wagmi/cli";
+import { react } from "@wagmi/cli/plugins";
+import { erc20Abi, erc721Abi } from "viem";
+import hardhatDeploy from "@sunodo/wagmi-plugin-hardhat-deploy";
+
+export default defineConfig({
+ out: "src/hooks/generated.ts", // Specifies the output file for the hooks
+ contracts: [
+ {
+ abi: erc20Abi,
+ name: "erc20",
+ },
+ { abi: erc721Abi, name: "erc721" },
+ ],
+ plugins: [
+ hardhatDeploy({
+ directory: "node_modules/@cartesi/rollups/export/abi",
+ }),
+ react(),
+],
+});
+```
+
+Transaction Sent
+ )} + + {error && ( +
+
+```typescript
+import React, { useState } from "react";
+import { BaseError } from "wagmi";
+import { useWriteInputBoxAddInput } from "../hooks/generated";
+import { stringToHex } from "viem";
+
+const SimpleInput = () => {
+ const dAppAddress = `0xab7528bb862fb57e8a2bcd567a2e929a0be56a5e`;
+ const [inputValue, setInputValue] = useState("");
+
+ const { isPending, isSuccess, error, writeContractAsync } =
+ useWriteInputBoxAddInput();
+
+ async function submit(event: React.FormEvent) {
+ event.preventDefault();
+ await writeContractAsync({
+ args: [dAppAddress, stringToHex(inputValue)],
+ });
+ }
+
+ return (
+
+ Send Generic Input
+
+
+ {isSuccess && (
+ Transaction Sent
+ )}
+
+ {error && (
+
+ Error: {(error as BaseError).shortMessage || error.message}
+
+ )}
+
+ );
+};
+
+export default SimpleInput;
+
+
+```
+
+
+
+```typescript
+import Account from "./components/Account";
+import SimpleInput from "./components/SimpleInput";
+
+function App() {
+ return (
+ <>
+
+
+```typescript
+import React, { useState } from "react";
+import { BaseError } from "wagmi";
+import { useWriteEtherPortalDepositEther } from "../hooks/generated";
+
+import { parseEther, stringToHex } from "viem";
+
+const SendEther = () => {
+ const dAppAddress = `0xab7528bb862fb57e8a2bcd567a2e929a0be56a5e`;
+ const [etherValue, setEtherValue] = useState("");
+
+ const {
+ isPending,
+ isSuccess,
+ error,
+ writeContractAsync: depositToken,
+ } = useWriteEtherPortalDepositEther();
+
+ async function submit(event: React.FormEvent) {
+ event.preventDefault();
+ const data = stringToHex(`Deposited (${etherValue}) ether.`);
+ await depositToken({
+ args: [dAppAddress, data],
+ value: parseEther(etherValue),
+ });
+ }
+
+ return (
+
+ Deposit Ether
+
+
+ {isSuccess && (
+ {etherValue} ETH sent!
+ )}
+
+ {error && (
+
+ Error: {(error as BaseError).shortMessage || error.message}
+
+ )}
+
+ );
+};
+
+export default SendEther;
+
+```
+
+
+
+```typescript
+import React, { useState } from "react";
+import { BaseError } from "wagmi";
+import {
+ erc20PortalAddress,
+ useWriteErc20Approve,
+ useWriteErc20PortalDepositErc20Tokens,
+} from "../hooks/generated";
+import { Address, parseEther, stringToHex, Hex } from "viem";
+
+const SendERC20 = () => {
+ const dAppAddress = `0xab7528bb862fb57e8a2bcd567a2e929a0be56a5e`;
+ const [erc20Value, setErc20Value] = useState("");
+ const [tokenAddress, setTokenAddress] = useState();
+
+ const {
+ isPending,
+ isSuccess,
+ error,
+ writeContractAsync: depositToken,
+ } = useWriteErc20PortalDepositErc20Tokens();
+
+ const { writeContractAsync: approveToken } = useWriteErc20Approve();
+
+ const approve = async (address: Address, amount: string) => {
+ try {
+ await approveToken({
+ address,
+ args: [erc20PortalAddress, parseEther(amount)],
+ });
+ console.log("ERC20 Approval successful");
+ } catch (error) {
+ console.error("Error in approving ERC20:", error);
+ throw error;
+ }
+ };
+
+ async function submit(event: React.FormEvent) {
+ event.preventDefault();
+ const data = stringToHex(`Deposited (${erc20Value}).`);
+ await approve(tokenAddress as Address, erc20Value);
+ await depositToken({
+ args: [tokenAddress as Hex, dAppAddress, parseEther(erc20Value), data],
+ });
+ }
+
+ return (
+
+ Deposit ERC20
+
+
+ {isSuccess && (
+
+ {erc20Value} tokens sent!
+
+ )}
+
+ {error && (
+
+ Error: {(error as BaseError).shortMessage || error.message}
+
+ )}
+
+ );
+};
+
+export default SendERC20;
+
+```
+
+
+
+```typescript
+import Account from "./components/Account";
+import SimpleInput from "./components/SimpleInput";
+import SendEther from "./components/SendEther";
+import SendERC20 from "./components/SendERC20";
+
+function App() {
+ return (
+ <>
+
+
+```typescript
+import React, { useState } from "react";
+import { BaseError } from "wagmi";
+import {
+ erc721PortalAddress,
+ useWriteErc721Approve,
+ useWriteErc721PortalDepositErc721Token,
+} from "../hooks/generated";
+import { stringToHex, Address, Hex } from "viem";
+
+const SendERC721 = () => {
+ const dAppAddress = `0xab7528bb862fb57e8a2bcd567a2e929a0be56a5e`;
+ const [tokenId, setTokenId] = useState("");
+ const [tokenAddress, setTokenAddress] = useState("");
+
+ const {
+ isPending,
+ isSuccess,
+ error,
+ writeContractAsync: depositToken,
+ } = useWriteErc721PortalDepositErc721Token();
+
+ const { writeContractAsync: approveToken } = useWriteErc721Approve();
+
+ const approve = async (address: Address, tokenId: bigint) => {
+ try {
+ await approveToken({
+ address,
+ args: [erc721PortalAddress, tokenId],
+ });
+
+ console.log("Approval successful");
+ } catch (error) {
+ console.error("Error in approving ERC721:", error);
+ throw error; // Re-throw the error to be handled by the caller
+ }
+ };
+
+ async function submit(event: React.FormEvent) {
+ event.preventDefault();
+
+ const bigIntTokenId = BigInt(tokenId);
+ const data = stringToHex(`Deposited NFT of token id:(${bigIntTokenId}).`);
+
+ await approve(tokenAddress as Address, bigIntTokenId);
+
+ depositToken({
+ args: [tokenAddress as Hex, dAppAddress, bigIntTokenId, "0x", data],
+ });
+ }
+
+ return (
+
+
+ Deposit ERC721 Token
+
+
+
+ {isSuccess && (
+
+ NFT of Token number: {tokenId} sent!
+
+ )}
+
+ {error && (
+
+ Error: {(error as BaseError).shortMessage || error.message}
+
+ )}
+
+ );
+};
+
+export default SendERC721;
+
+```
+
+
+
+```typescript
+import Account from "./components/Account";
+import SendERC20 from "./components/SendERC20";
+import SendERC721 from "./components/SendERC721";
+import SendEther from "./components/SendEther";
+import SimpleInput from "./components/SimpleInput";
+
+function App() {
+ return (
+ <>
+
+
+```typescript
+// queries.ts
+
+export const NOTICES_QUERY = `
+ query notices {
+ notices {
+ edges {
+ node {
+ index
+ input {
+ index
+ }
+ payload
+ }
+ }
+ }
+ }
+`;
+
+export const REPORTS_QUERY = `
+ query reports {
+ reports {
+ edges {
+ node {
+ index
+ input {
+ index
+ }
+ payload
+ }
+ }
+ }
+ }
+`;
+
+export const VOUCHERS_QUERY = `
+ query vouchers {
+ vouchers {
+ edges {
+ node {
+ index
+ input {
+ index
+ }
+ destination
+ payload
+ }
+ }
+ }
+ }
+`;
+```
+
+
+
+```typescript
+// types.ts
+
+export type Notice = {
+ index: number;
+ input: {
+ index: number;
+ };
+ payload: string;
+};
+
+export type Report = {
+ index: number;
+ input: {
+ index: number;
+ };
+ payload: string;
+};
+
+export type Voucher = {
+ index: number;
+ input: {
+ index: number;
+ };
+ destination: string;
+ payload: string;
+};
+
+export type GraphQLResponse = {
+ data: T;
+};
+```
+
+
+
+```typescript
+// api.ts
+
+import axios from 'axios'; // install axios by running `npm i axios`
+import { GraphQLResponse } from './types';
+
+export const fetchGraphQLData = async (query: string) => {
+ const response = await axios.post>('http://localhost:8080/graphql', {
+ query,
+ });
+ return response.data.data;
+};
+```
+
+
+
+```typescript
+
+import { useEffect, useState } from 'react';
+import { fetchGraphQLData } from '../utils/api';
+import { Notice } from '../utils/types';
+import { NOTICES_QUERY } from '../utils/queries';
+
+const Notices = () => {
+ const [notices, setNotices] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ const fetchNotices = async () => {
+ try {
+ const data = await fetchGraphQLData<{ notices: { edges: { node: Notice }[] } }>(NOTICES_QUERY);
+ setNotices(data.notices.edges.map(edge => edge.node));
+ } catch (err) {
+ setError('Error fetching notices.');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchNotices();
+ }, []);
+
+ if (loading) return Loading...;
+ if (error) return {error};
+
+ return (
+
+ Notices
+
+
+
+ Index
+ Input Index
+ Payload
+
+
+
+ {notices.map((notice, idx) => (
+
+ {notice.index}
+ {notice.input.index}
+ {notice.payload}
+
+ ))}
+
+
+
+ );
+};
+
+export default Notices;
+```
+
+
+
+```typescript
+
+
+import { useEffect, useState } from 'react';
+import { fetchGraphQLData } from '../utils/api';
+import { Report } from '../utils/types';
+import { REPORTS_QUERY } from '../utils/queries';
+
+
+const Reports = () => {
+ const [reports, setReports] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ const fetchReports = async () => {
+ try {
+ const data = await fetchGraphQLData<{ reports: { edges: { node: Report }[] } }>(REPORTS_QUERY);
+ setReports(data.reports.edges.map(edge => edge.node));
+ } catch (err) {
+ setError('Error fetching reports.');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchReports();
+ }, []);
+
+ if (loading) return Loading...;
+ if (error) return {error};
+
+ return (
+
+ Reports
+
+
+
+ Index
+ Input Index
+ Payload
+
+
+
+ {reports.map((report, idx) => (
+
+ {report.index}
+ {report.input.index}
+ {report.payload}
+
+ ))}
+
+
+
+ );
+};
+
+export default Reports;
+```
+
+
+
+```typescript
+
+
+import { useEffect, useState } from 'react';
+import { fetchGraphQLData } from '../utils/api';
+import { Voucher } from '../utils/types';
+import { VOUCHERS_QUERY } from '../utils/queries';
+
+const Vouchers = () => {
+ const [vouchers, setVouchers] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ const fetchVouchers = async () => {
+ try {
+ const data = await fetchGraphQLData<{ vouchers: { edges: { node: Voucher }[] } }>(VOUCHERS_QUERY);
+ setVouchers(data.vouchers.edges.map(edge => edge.node));
+ } catch (err) {
+ setError('Error fetching vouchers.');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchVouchers();
+ }, []);
+
+ if (loading) return Loading...;
+ if (error) return {error};
+
+ return (
+
+ Vouchers
+
+
+
+ Index
+ Input Index
+ Destination
+ Payload
+
+
+
+ {vouchers.map((voucher, idx) => (
+
+ {voucher.index}
+ {voucher.input.index}
+ {voucher.destination}
+ {voucher.payload}
+
+ ))}
+
+
+
+ );
+};
+
+export default Vouchers;
+```
+
+