Enable Safe Module

enable-safe-intent-module.tsx

import { cn } from "../utils";
import {
	safeABI,
	usePrepareSafeExecTransaction,
	useSafeGetTransactionHash,
	useSafeNonce,
} from "@/blockchain";
import { useGetIntentifyModuleAddress } from "@/hooks/use-get-intentify-module-address";
import { constants } from "ethers";
import { _TypedDataEncoder } from "ethers/lib/utils";
import * as React from "react";
import { encodeFunctionData } from "viem";
import {
	useAccount,
	useChainId,
	useContractWrite,
	useWalletClient,
} from "wagmi";

type EnableSafeIntentModule = React.HTMLAttributes<HTMLElement> & {
	safeAddress: `0x${string}`;
	onSuccess?: (res: any) => void;
	onError?: (res: any) => void;
	onLoading?: () => void;
};

export const EnableSafeIntentModule = ({
	children,
	className,
	safeAddress,
}: EnableSafeIntentModule) => {
	const account = useAccount();
	const classes = cn(className);
	const chainId = useChainId();
	const intentifyModuleAddress = useGetIntentifyModuleAddress(chainId);
	const [signature, setSignature] = React.useState<{
		signed: boolean;
		signature: `0x${string}`;
	}>({
		signed: false,
		signature: "0x",
	});

	const nonce = useSafeNonce({
		address: safeAddress,
		enabled: true,
	});

	const transactionHash = useSafeGetTransactionHash({
		address: safeAddress,
		args: [
			safeAddress, // to
			BigInt(0), // value
			encodeFunctionData({
				abi: safeABI,
				functionName: "enableModule",
				args: [intentifyModuleAddress],
			}), // data
			0, // operation
			BigInt(0), // safeTxGas
			BigInt(0), // baseGas
			BigInt(0), // gasPrice
			constants.AddressZero, // gasToken
			constants.AddressZero, // refundReceiver
			nonce.data as bigint, // nonce
		],
	});

	const { config } = usePrepareSafeExecTransaction({
		address: safeAddress,
		args: [
			safeAddress, // to
			BigInt(0), // value
			encodeFunctionData({
				abi: safeABI,
				functionName: "enableModule",
				args: [intentifyModuleAddress],
			}), // data
			0, // operation
			BigInt(0), // safeTxGas
			BigInt(0), // baseGas
			BigInt(0), // gasPrice
			constants.AddressZero, // gasToken
			constants.AddressZero, // refundReceiver
			signature.signature, // signatures
		],
		enabled: signature.signed,
	});

	const _safe = useContractWrite(config);

	const { data: walletClient, isError } = useWalletClient();

	const handleSignTransaction = async () => {
		const signMessageData = await walletClient?.signMessage?.({
			message: {
				raw: transactionHash.data as `0x${string}`,
			},
		});
		if (!signMessageData) return;
		const bitShiftedSig = signMessageData
			.replace(/1b$/, "1f")
			.replace(/1c$/, "20");
		setSignature({
			signed: true,
			signature: bitShiftedSig as `0x${string}`,
		});
	};

	const handleSubmitTransaction = () => {
		_safe?.write?.();
	};

	if (!signature.signed) {
		return (
			// rome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
			<span onClick={handleSignTransaction} className={classes}>
				<button type="button">Sign Transaction</button>
			</span>
		);
	}

	return (
		// rome-ignore lint/a11y/useKeyWithClickEvents: <explanation>
		<span onClick={handleSubmitTransaction} className={classes}>
			<button type="button">Execute Transaction</button>
			{/* {children} */}
		</span>
	);
};