EN

Transfer On-Chain

Author of this section: @LiKang

this talk will introduce how to transfer and collect money through blockchain.

Transfer

in a blockchain environment, a transfer is the act of transferring assets between participants, which can be cryptocurrencies (e. G., Bitcoin, Ethereum, etc.) or other blockchain-based digital assets (e. G., tokens, NFTs, etc.). These transfers are recorded on the blockchain and secured by the network's consensus mechanism. Transfer is the most basic blockchain network operation, which involves the following points:

source Address (Sender) : the address of the blockchain account from which the asset needs to be transferred.

Destination Address (Recipient) : The address of the blockchain account that will receive the asset.

Number of assets : The exact amount or value of the asset you want to transfer.

Transaction costs A fee usually charged by the miner or validation node that performs the transaction. The amount of the fee can affect the speed of confirmation of the transaction.

Network : The blockchain network that completes the transfer (e. G., The Bitcoin network, the Ethereum network).

After the transfer occurs, it must be confirmed by a miner or other consensus mechanism participant in the network and recorded in a block that is eventually added to the blockchain.

The process of blockchain transfer roughly includes the following steps:

  1. the originator signs the transfer information with its private key and broadcasts the information to the network.
  2. A node (miner or verifier) in the network receives the transaction request and verifies the validity of the signature and transaction.
  3. Once verified, the transfer is packaged into other transactions to form a new block.
  4. This block is added to the blockchain after being confirmed by the network consensus mechanism.
  5. After the transaction is completed, the asset balance on the target address is updated to reflect the result of the transfer.

The exact details of this transfer process may vary depending on the specific blockchain technology and asset type used.

Initiate a transfer

let's implement the front-end logic first, and we will implement it quickly based on the previous courses. Connect Wallet .

Create a new one pages/transaction/index.tsx file, copy the previous code, and then make the next modification, create a new one pages/transaction/SendEth.tsx components: 

import React from "react";
  import { MetaMask, WagmiWeb3ConfigProvider} from "@ant-design/web3-wagmi";
  import { createConfig, http } from "wagmi";
  import { injected } from "wagmi/connectors";
  import { mainnet, sepolia } from "wagmi/chains";
  import { ConnectButton, Connector } from '@ant-design/web3';
+ import { SendEth } from "../../components/SendEth";


  const config = createConfig({
    chains: [mainnet, sepolia],
    transports: {
      [mainnet.id]: http(),
      [sepolia.id]: http(),
    },
    connectors: [
      injected({
        target: "metaMask",
      }),
    ],
  });
  const TransactionDemo: React.FC = () => {

    return (
      <WagmiWeb3ConfigProvider
        config={config}
        eip6963={{
          autoAddInjectedWallets: true,
        }}
        wallets={[MetaMask()]}
      >
        <Connector>
          <ConnectButton />
        </Connector>
+       <SendEth />
      </WagmiWeb3ConfigProvider>
    );
  };
  export default TransactionDemo;

then in SendEth write an input inside the component to and value the input box and initiate a transfer button with the following code: 

import * as React from "react";
import { Button, Checkbox, Form, type FormProps, Input } from "antd";
import {
  type BaseError,
  useSendTransaction,
  useWaitForTransactionReceipt,
} from "wagmi";
import { parseEther } from "viem";

type FieldType = {
  to: `0x${string}`;
  value: string;
};

export const SendEth: React.FC = () => {
  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) });
  };

  const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (
    errorInfo
  ) => {
    console.log("Failed:", errorInfo);
  };

  return (
    <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>
  );
};

in the code, we used Ant Design Of Form components and wagmi of hooks , initiated a transaction and monitored the status, entered. to and value click Initiate and the following effect will appear:

at this point, we have completed the implementation of a simple transfer requirement. You can visit https://wtf-dapp.vercel.app/transaction experience the full Demo. In order to avoid the loss of your funds, please be cautious.

Receipt

collecting money on a blockchain usually means receiving cryptocurrencies or other blockchain-based assets such as tokens (including NFTs). Give your public address to the payer. You can directly provide the address string or generate a two-dimensional code, convenient mobile phone wallet scan code.

Worthy of our attention is:

  1. do not share your private keys or mnemonic words. Only you should have this information.
  2. Make sure the address you provide is completely accurate. If the address is wrong, funds may be lost.
  3. The payer is required to pay a certain network fee (or "miner fee"), which directly affects the processing speed of the transaction.
  4. Blockchain transactions cannot be canceled once they have started, only waiting for them to be confirmed by the network.
  5. Make sure to use the correct blockchain network. For example, you can only send ether (ETH) to an address on the Ethereum network and Bitcoin (BTC) to an address on the Bitcoin network.

Two-dimensional code collection

ant-design-web3 A quick collection component is provided. You only need to pass in the selection chain, select the wallet, and enter the amount to support the quick scan code payment of the specified wallet.

You can find the documentation here: PayPanel - Ant Design Web3