`useTransaction` hook

useTransaction.tsx

export default function App() {
  const { connectWallet, connected } = useWallet();
  const greeterContract = useContract(CONTRACT_ADDRESS, abi);

  const [greeting, setGreeting] = useState();
  const [input, setInput] = useState();

  const { execute, error, loading } = useTransaction(greeterContract.setGreeting, [input]);

  const fetchGreeting = useCallback(async () => {
    if (connected && greeterContract) {
      const res = await greeterContract.greeting();
      setGreeting(res);
    }
  }, [connected, greeterContract]);

  useEffect(() => {
    fetchGreeting();
  }, [fetchGreeting]);

  const handleSubmit = async () => {
    try {
      await execute();
      await fetchGreeting();
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <Container>
      <VStack>
        {connected ? (
          <>
            <Heading fontSize="lg">Greeting value</Heading>
            <Text>{greeting}</Text>

            <Divider />

            <FormControl isInvalid={error}>
              <VStack>
                <FormLabel>Set greeting</FormLabel>
                <Input
                  disabled={loading}
                  value={input}
                  onChange={(e) => setInput(e.target.value)}
                />
                <Button isLoading={loading} onClick={handleSubmit}>
                  Submit
                </Button>
                {error && <FormErrorMessage>{error.message}</FormErrorMessage>}
              </VStack>
            </FormControl>
          </>
        ) : (
          <Button onClick={connectWallet}>Connect wallet</Button>
        )}
      </VStack>
    </Container>
  );
}