Обмен технологиями

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

6-5 ссылок браузера Web3 на блокчейн (вызов контракта чтения-записи для связи с метамаской)

Вот взаимодействие браузера и смарт-контракта

Две библиотеки

Веб3
Контракт Truffle //truffle просто оборачивает внешний контракт в ссылку, которую проще использовать.

приходитьреагировать на проектв корневом каталоге (созданном в главе 1),

Воссоздайте проект реагирования здесь
https://blog.csdn.net/u012118993/article/details/87288516
реакцияСоздание нового проектаИспользуйте приложение create-react-app, чтобы быстро создать проект реагирования

（1）npm install -g create-react-app Глобальная установка (установить целиком)

（2）create-react-app reactproject Создайте новый проект реагирования и назовите его (примечание: имя проекта не может содержать заглавные буквы)

（3）cd reactproject Войдите в папку через команду и подготовьтесь к запуску проекта.

（4）npm start Запустить проект

E:trufflewoniu-pet-shop
1

Создано в каталоге трюфелей

Установите следующие файлы в проект реагирования
Установите web3 (установите в папку ниже)

npm install web3 --save
1

Затем установите truffle-contract

npm install truffle-contract --save
1

Демо завершено

1. Ссылка на договор
2. Выполнить внутреннюю функцию контракта
3. Добавьте поддержку библиотеки пользовательского интерфейса ant.design.
4. Завершите проект

обратите внимание на новое

Содержимое в App.js
следующее

import React from 'react'
import Web3 from 'web3'
import TruffleContract from 'truffle-contract'
import AdoptionJson from './truffle/build/contracts/Adoption.json'	//引入前面智能合约编译好得到的json文件





class App extends React.Component{
	constructor(props){
		super(props)
		this.web3 = null
		this.Adoption = null
		this.init()

		this.state = {
			//name:'woniu'
		}
	}

	init(){
		//如果网页中的web3不是undefined
		if(typeof window.web3 != 'undefined'){
		}
	}

	render(){
		return <button></button>//hello,{this.state.name}
	}
}

export default App
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

Если в браузере установлен плагин метамаски

Глобальные переменные имеют значения в браузере

Метамаска может быть связана вручную или автоматически.

Запуск сценария ранее был не определен в консоли браузера, поскольку в это время это была пустая веб-страница.

Начните с зоомагазина, построенного в рамках проекта React.

Npm start
1

Открыть в браузере
http://localhost:3000/

видеоэффекты

Видео по установке новых пакетов

Сообщалось о моей собственной ошибке, поскольку функция инициализации не была сохранена.

Фактический эффект после успеха следующий:

недавно присоединившийся

init(){
		//如果网页中的web3不是undefined
		if(typeof window.web3 != 'undefined'){
			this.web3Provider = window.web3.currentProvider;	//metamask内置了web3的实例，实际可以手动链接
		}else{
			alert('请按照metamask')
		}
	}
1
2
3
4
5
6
7
8

После сохранения измененного кода снова получите доступ к сети, не закрывая и повторно запустив npm.

Обновить сейчас
Конечно, в настоящее время всплывающего окна нет. После удаления кошелька с метамаской появится всплывающее окно.

В настоящее время для доступа используйте браузер Chrome без кошелька.

Появляется всплывающее окно, но некоторые символы искажены.

Добавьте код еще раз

Все коды следующие

import React from 'react'
import Web3 from 'web3'
import TruffleContract from 'truffle-contract'
import AdoptionJson from './truffle/build/contracts/Adoption.json'	//引入前面智能合约编译好得到的json文件

//1.链接合约
//2.执行一下合约内部函数
//3.添加ant.design ui库支持
//4.完成项目
class App extends React.Component{
	constructor(props){
		super(props)
		this.web3 = null
		this.Adoption = null
		this.init()

		this.state = {
			//name:'woniu'
		}
	}

	init(){
		//如果网页中的web3不是undefined
		if(typeof window.web3 != 'undefined'){
			this.web3Provider = window.web3.currentProvider;	//metamask内置了web3的实例，实际可以手动链接
		}else{
			alert('please install metamask')
		}
		
		this.web3 = new Web3(this.web3Provider)		//将我们的this.web3Provider装载进来
		this.initAdoption()

	}

	initAdoption(){
		this.Adoption = TruffleContract(AdoptionJson)	//使用TruffleContract传入编译后的合约，然后创建实例，可以调用合约内部函数
		this.Adoption.setProvider(this.web3Provider)	//设置来源，链接合约
		return this.markAdopted()
	}
	
	//部署，这个是异步的，使用this.Adoption.deployed().then()也可以，这里用
	//this.markAdopted(){
		//部署链接一下
	//	const adoptionInstance = this.Adoption.deployed().then()	

	//}

	async markAdopted(){
		//部署链接一下
		//await同步方式获取异步数据
		const adoptionInstance = await this.Adoption.deployed()	//部署，这个是异步的，使用this.Adoption.deployed().then()也可以，这里用
		//调用合约内部函数getAdopters
		const adopters = await adoptionInstance.getAdopters.call()
		console.log(adopters)
	}

	render(){
		return <button></button>//hello,{this.state.name}
	}
}

export default App
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

Обновите интерфейс следующим образом.

Получил адрес контракта

Используйте приведенные выше переменные, чтобы получить локальный адрес и адрес учетной записи метамаски по умолчанию.

https://blog.csdn.net/weixin_41937552/article/details/106990561?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-1&spm=1001.2101.3001.4242

Причина, по которой здесь невозможно получить адрес метамаски, указана выше.
https://blog.csdn.net/weixin_39421014/article/details/103323245

Сначала вы можете отключить разрешения конфиденциальности метамаски.
https://www.freesion.com/article/8518937500/
Настройки режима конфиденциальности и совместимый код JS

https://blog.csdn.net/JackieDYH/article/details/115380677?utm_medium=distribute.pc_relevant.none-task-blog-baidujs_title-0&spm=1001.2101.3001.4242
Получить информацию об аккаунте

После изменения кода измените часть функции инициализации.

Вы можете использовать метамаску для ссылки на веб-сайт и распечатать текущий адрес метамаски.

Затем внесите изменения в код для события щелчка.

При нажатии на усыновление здесь появится окно для оплаты, потому что нужно вызвать функцию записи и записать в цепочку. Здесь нет необходимости переводить деньги на усыновление, но требуется родительский сбор за обработку.

Успешно вызвать функцию, которую необходимо записать в блокчейн локально (как показано ниже при нажатии кнопки):

Весь код, который в конечном итоге был успешно выполнен, выглядит следующим образом:

import React from 'react'
import Web3 from 'web3'
import TruffleContract from 'truffle-contract'
import AdoptionJson from './truffle/build/contracts/Adoption.json'	//引入前面智能合约编译好得到的json文件

//1.链接合约
//2.执行一下合约内部函数
//3.添加ant.design ui库支持
//4.完成项目
class App extends React.Component{
	constructor(props){
		super(props)
		this.web3 = null
		this.Adoption = null
		this.init()

		this.state = {
			//name:'woniu'
		}
	}

	async init(){
		//如果网页中的web3不是undefined
		//if(typeof window.web3 != 'undefined'){
		//	this.web3Provider = window.web3.currentProvider;	//metamask内置了web3的实例，实际可以手动链接
		//}else{
		//	alert('please install metamask')
		//}
		
		//this.web3 = new Web3(this.web3Provider)		//将我们的this.web3Provider装载进来
		//this.initAdoption()
		
		/* 新版的方式 */
	  //var web3Provider;
	  if (window.ethereum) {
		this.web3Provider = window.ethereum;
		try {
		  // 请求用户授权
		  await window.ethereum.enable();
		} catch (error) {
		  // 用户不授权时
		  console.error("User denied account access")
		}
	  } else if (window.web3) {   // 老版 MetaMask Legacy dapp browsers...
		this.web3Provider = window.web3.currentProvider;
	  } else {
		this.web3Provider = new Web3.providers.HttpProvider('http://localhost:7545');
	  }
	  this.web3 = new Web3(this.web3Provider);//web3js就是你需要的web3实例
	  

	  this.web3.eth.getAccounts(function (error, result) {
		if (!error)
		  console.log(result)//授权成功后result能正常获取到账号了
		  //this.account = result
	  });
	  //this.account =result
	  //this.account =account
	  this.initAdoption()
	}

	initAdoption(){
		this.Adoption = TruffleContract(AdoptionJson)	//使用TruffleContract传入编译后的合约，然后创建实例，可以调用合约内部函数
		this.Adoption.setProvider(this.web3Provider)	//设置来源，链接合约
		return this.markAdopted()
	}
	
	//部署，这个是异步的，使用this.Adoption.deployed().then()也可以，这里用
	//this.markAdopted(){
		//部署链接一下
	//	const adoptionInstance = this.Adoption.deployed().then()	

	//}

	async markAdopted(){
		//部署链接一下
		//await同步方式获取异步数据
		const adoptionInstance = await this.Adoption.deployed()	//部署，这个是异步的，使用this.Adoption.deployed().then()也可以，这里用
		//调用合约内部函数getAdopters
		const adopters = await adoptionInstance.getAdopters.call()
		console.log(adopters)
	}
	
	async adopt(petId){
		//const account = window.web3.eth.defaultAccount		//获取metamask中默认的账户
		// 授权获取账户
	    const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
        const myAccount = accounts[0];	//获取当前metamask的地址

		const adoptionInstance = await this.Adoption.deployed()		//再次进行部署
		await adoptionInstance.adopt(petId,{from:myAccount})	//调用adopt只传递唯一一个参数，以及来源之前获取的地址，进行写入函数
		this.markAdopted()
	}

	render(){
		//onclick点击事件，调用领养函数
		return <button onClick={()=>this.adopt(2)}>领养第二个</button>//hello,{this.state.name}
	}
}

export default App
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

Все функции были успешно выполнены, включая функции чтения и записи.

В этом коде все еще есть некоторые недостатки. Если транзакция завершится неудачей, будет сообщено об ошибке, и страница также сообщит об ошибке.
Когда вы нажимаете «Отклонить» или «Выйти напрямую»

Следующий шаг — украсить пользовательский интерфейс.