web3 第七章 （payment）

转账

使用 wagmi 中的 hook useSendTransaction 进行转账操作

先写一个简单的表单，用来输入账号和金额

<Form
      name="basic"
      labelCol={{ span: 8 }}
      wrapperCol={{ span: 16 }}
      style={{ maxWidth: 600 }}
      initialValues={{ remember: true }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item<FieldType>
        label="to"
        name="to"
        rules={[{ required: true, message: "Please input!" }]}
      >
        <Input />
      </Form.Item>

      <Form.Item<FieldType>
        label="value"
        name="value"
        rules={[{ required: true, message: "Please input!" }]}
      >
        <Input />
      </Form.Item>

      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
        <Button type="primary" htmlType="submit">
          {isPending ? "Confirming..." : "Send"}
        </Button>
      </Form.Item>

      {hash && <div>Transaction Hash: {hash}</div>}
      {isConfirming && <div>Waiting for confirmation...</div>}
      {isConfirmed && <div>Transaction confirmed.</div>}
      {error && (
        <div>Error: {(error as BaseError).shortMessage || error.message}</div>
      )}
    </Form>

 const {
    data: hash,
    error,
    isPending,
    sendTransaction,
  } = useSendTransaction();

  const { isLoading: isConfirming, isSuccess: isConfirmed } =
    useWaitForTransactionReceipt({ hash });

  const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
    console.log("Success:", values);
    sendTransaction({ to: values.to, value: parseEther(values.value) });
  };

1. useSendTransaction 钩子

useSendTransaction 钩子用于发送以太坊交易，并返回有关交易状态的数据。

 
const {
  data: hash,
  error,
  isPending,
  sendTransaction,
} = useSendTransaction();

• data: hash：这是交易哈希，它在交易成功发送后返回。
• error：如果发送交易时发生错误，会返回这个错误信息。
• isPending：布尔值，表示交易是否正在进行中。
• sendTransaction：函数，用于发送交易。

2. useWaitForTransactionReceipt 钩子

useWaitForTransactionReceipt 钩子用于等待特定交易的确认。

const { isLoading: isConfirming, isSuccess: isConfirmed } =
  useWaitForTransactionReceipt({ hash });

• isLoading: isConfirming：布尔值，表示交易是否正在确认中。
• isSuccess: isConfirmed：布尔值，表示交易是否已成功确认。

3. onFinish 函数

onFinish 函数是在表单提交时调用的回调函数。它使用表单的值来发送交易。

const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
  console.log("Success:", values);
  sendTransaction({ to: values.to, value: parseEther(values.value) });
};

• values：表单的值，其中 values.to 是接收交易的地址，values.value 是发送的以太币数量。
• parseEther(values.value)：将字符串格式的以太币数量转换为 Wei（以太坊的最小单位），这是因为以太坊交易需要以 Wei 为单位指定金额。
• sendTransaction：调用这个函数来发送交易，参数包含 to 和 value。