【Web3】 Web3JS Pay Api

Web3Network.eth.sendSignedTransaction(serializedTx)

参数：

• from- String|Number：发送帐户的地址。如果未指定，则使用web3.eth.defaultAccount属性。或web3.eth.accounts.wallet中本地的地址。

• to- String:(可选）消息的目标地址，若未定义则为发送消息。

• value- Number|String|BN|BigNumber:(可选）为wei中的交易转移的数量，如果是发送消息，则是捐赠给地址。

• gas - Number:(可选，默认：待定）用于交易的gas（未使用的gas会退还）。

• gasPrice- Number|String|BN|BigNumber:(可选）此交易的gas价格，以wei为单位，默认为web3.eth.gasPrice。

• data- String:(可选）包含合同上函数调用数据的ABI字节字符串。

• nonce- Number:(可选）随机数的整数。

EthPayApi

介绍：实现流程一共分为两部分，一完成Api参数、二完成privateKey加密发起Pay

初始化

npm install web3

<script setup name="EthPay">
import Web3 from 'web3'

const Web3Network = new Web3(
  Web3.givenProvider || 'wss://goerli.infura.io/ws/v3/xxx'
)
</script>

'wss://goerli.infura.io/ws/v3/xxx' 网络节点需要替换为自己的网络节点，如果拿到自己网络节点查看：
【Web3】Web3连接到以太坊网络（测试网、主网）_春暖花开.,的博客-CSDN博客

一.Api参数

定义自己Eth账号

//钱包地址
const walletAddress = ref('你的ETh地址')
//钱包私钥
const walletPrivateKey = ref(
  '你的Eth私钥'
)

参数一共分为

form //发送方地址    
nonce //发送方交易次数    
gasPric //预估手续费
to //接收方地址    
value //以wei单位数量   
data //转Token代币会用到的一个字段
gas //用于交易gas

1.nonce transaction次数

  //transaction次数
  const numberTransaction = await Web3Network.eth.getTransactionCount(
    walletAddress.value
  )

2.gasPric 获取预计手续费

  //获取预计手续费
const serviceCharge = await Web3Network.eth.getGasPrice()

3. value 数量

  //以wei为单位数量
const WeiMoney = Web3.utils.toWei('0.0001')

4.合并

 const rawTx = {
    form: walletAddress.value, //发送方地址
    nonce: numberTransaction, //发送方交易次数
    gasPrice: serviceCharge, //预估手续费
    to: 'xxx', //接收方地址
    value: WeiMoney, //以wei单位数字
    data: '0x00' //转Token代币会用到的一个字段
  }

5.gas 

  //把交易数据进行gas计算
  const gas = await Web3Network.eth.estimateGas(rawTx)
  rawTx.gas = gas

二.privateKey加密调用sendSignedTransaction函数

1.私钥转数组十六进制

为什么转换？： 因为 tx.sign() 要求长度必须在32位以内所以需要转换

npm install buffer

  import { Buffer } from 'buffer'
  //把privateKey转换 数组hex
  const PrivatekeyHex = Buffer(walletPrivateKey.value, 'hex')
  console.log(`key：`, PrivatekeyHex)

2.ethereumjs-tx 库加密转换数组十六进制后Eth私钥
注意：tx.sign( ) 要求长度必须32位以内

npm install [email protected]

  import Tx from 'ethereumjs-tx' 
  //privateKey加密
  const tx = new Tx(rawTx)
  tx.sign(PrivatekeyHex)
  //通过ethereumjs-tx加密并转为十六进制字符串
  const serializedTx = '0x' + tx.serialize().toString('hex')
  console.log(serializedTx)

3.如果出现这样报错

 error  in ./node_modules/cipher-base/index.js

Module not found: Error: Can't resolve 'stream' in 'C:\Users\ttatt\Desktop\前端\xxx\xxx\Web3\Web3实战\web3defivue\node_modules\cipher-base'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }

ERROR in ./node_modules/cipher-base/index.js 3:16-43
Module not found: Error: Can't resolve 'stream' in 'C:\Users\ttatt\Desktop\xxx\xxx\85期\Web3\Web3实战\web3defivue\node_modules\cipher-base'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "stream": require.resolve("stream-browserify") }'
        - install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "stream": false }
 @ ./node_modules/create-hash/browser.js 7:11-33
 @ ./node_modules/ethereumjs-util/dist/index.js 18:17-39
 @ ./node_modules/ethereumjs-tx/es5/index.js 9:14-40
 @ ./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=script&setup=true&name=web3&lang=js 4:0-31 68:21-23 88:15-17
 @ ./src/App.vue?vue&type=script&setup=true&name=web3&lang=js 1:0-210 1:0-210 1:211-410 1:211-410
 @ ./src/App.vue 2:0-75 3:0-70 3:0-70 6:49-55
 @ ./src/main.js 2:0-28 6:22-25

webpack compiled with 1 error

要解决在 vue.config.js

npm install [email protected]

const { defineConfig } = require('@vue/cli-service')
// 引入插件
const NodePolyfillWebpackPlugin = require('node-polyfill-webpack-plugin')

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
      //使用插件
    plugins: [new NodePolyfillWebpackPlugin()]
  }
})

4.调用ETHPay函数sendSignedTransaction 开始EthPay是否成功

  //开始执行
  const Transfer = Web3Network.eth.sendSignedTransaction(serializedTx)

  // 监听是否成功 -- 加载中
  Transfer.on('transactionHash', txid => {
    console.log(
      `查看----https://goerli.etherscan.io/tx/${txid}`
    )
  })

代码

  //一.第一部分
  //transaction次数
  const numberTransaction = await Web3Network.eth.getTransactionCount(
    walletAddress.value
  )
  console.log(numberTransaction)
  //获取预计手续费
  const serviceCharge = await Web3Network.eth.getGasPrice()
  console.log(serviceCharge)

  //以wei为单位数量
  const WeiMoney = Web3.utils.toWei('0.0001')
  console.log(WeiMoney)
  //Api参数
  const rawTx = {
    form: walletAddress.value, //发送方地址
    nonce: numberTransaction, //发送方transaction次数
    gasPrice: serviceCharge, //预估手续费
    to: 'xxxx', //接收方地址
    value: WeiMoney, //以wei单位数量
    data: '0x00' //转Token会用到的一个字段
  }
  //把transaction数据进行gas计算
  const gas = await Web3Network.eth.estimateGas(rawTx)
  rawTx.gas = gas

  //二.第二部分
  //把privateKey转换 数组hex
  //因为 tx.sign() 要求长度必须在32位以内所以需要转换
  const PrivatekeyHex = Buffer(walletPrivateKey.value, 'hex')
  console.log(`key：`, PrivatekeyHex)

  //privateKey加密
  const tx = new Tx(rawTx)
  tx.sign(PrivatekeyHex)
  //通过ethereumjs-tx加密并转为十六进制字符串
  const serializedTx = '0x' + tx.serialize().toString('hex')
  //开始执行
  const Transfer = Web3Network.eth.sendSignedTransaction(serializedTx)

  // 监听是否成功 -- 加载中
  Transfer.on('transactionHash', txid => {
    console.log(txid)
    console.log(
      `查看----https://goerli.etherscan.io/tx/${txid}`
    )
  })