EIP-712 der Reaktionsweg

Kurz gesagt, EIP-712 zielt darauf ab, die Benutzerfreundlichkeit der Signierung von Nachrichten außerhalb der Kette für die Verwendung in der Kette zu verbessern. In diesem Artikel werde ich EIP-712 nicht im Detail erläutern. Stattdessen können Sie diesen gut geschriebenen Artikel lesen. Hier erstellen wir eine einfache Testumgebung mit React.

1. Verwenden der Create-React-App.

Ok, also fangen wir an. Wir werden unser Projekt mit CRA booten. React App erstellen ist eine komfortable Lernumgebung React und der beste Weg, um eine neue einseitige Anwendung in React zu erstellen. Wir werden Garn verwenden, um unser Projekt zu erstellen.

$ yarn create reag-app eip-712-testing-environtment

Dies ist nicht erforderlich, aber ich liebe es, meinen Code nur ein wenig zu organisieren. So strukturiere ich meinen Code.

“Schreiben Sie sauberen Code und Sie können nachts gut schlafen. “

– James Richman

2. Einrichten von Web3-Reagieren mit MetaMask.

MetaMask ist eine Brücke, mit der Sie das verteilte Web von morgen heute in Ihrem Browser besuchen können. Sie können Ethereum dApps direkt in Ihrem Browser ausführen, ohne einen vollständigen Ethereum-Knoten auszuführen. … Unsere Mission ist es, Ethereum für so viele Menschen wie möglich so einfach wie möglich zu gestalten.

In diesem Projekt verwende ich eine neue Bibliothek web3-react von NoahZinsmeister. Es ist eine Drop-In-Lösung zum Erstellen von Ethereum-dApps in React.

$ yarn add web3-react

In der root index.js importieren wir Web3Provider und verpacken unsere & lt; App / & gt; -Komponente wie folgt.

Dann erstellen wir eine Datei in unserem utils-Ordner mit dem Namen web3-connector.js . Hier beginnt der interessante Teil. web3-react bietet uns Connectors , mit denen wir entscheiden können, wie Benutzer mit Ihrer dApp interagieren sollen. Sie können dann auswählen, welche Konnektoren Sie in Ihrer App verwenden möchten.

In diesem Beispiel verwenden wir MetaMaskConnector , um mit MetaMask für Zeichendaten zu interagieren. Vergessen Sie nicht, Ihr Connectors-Objekt in das Stammverzeichnis index.js im obigen Screenshot zu importieren.

3. Web3-Instanz abrufen

In unserer app / index.js können wir die bereitgestellte Funktion useWeb3Context verwenden, um schnell mit der Verwendung von web3-react in unserer App zu beginnen.

Unabhängig davon, wie Sie auf das Kontextobjekt web3-react zugreifen, sieht es folgendermaßen aus:

Wir müssen dann sicherstellen, dass wir mit MetaMask verbunden sind. Dazu müssen wir MetaMask als Browsererweiterung installieren. Bitte führen Sie die restlichen Schritte aus, um fortzufahren.

Als Nächstes verwenden wir die neuen React Hooks useEffect , um eine Verbindung mit web3Context.setConnector herzustellen und unsere Web3-Instanz von unserer neuen Version bereitzustellen MetaMask installiert.

Fuh, das war eine Menge Code, nur um unsere web3 Instanzen zu erhalten. Lassen Sie uns console.log web3 in Zeile 10 über dem Screenshot sehen und sehen, was wir hier haben.

4.Signieren Sie Daten mit MetaMask.

Auch hier werde ich nicht auf das Schema und die Typen eingehen, die zum Signieren von Daten erforderlich sind, um die Signatur von der MetaMask zu erhalten. Schauen Sie sich das hier an.

Um unsere Daten mit MetaMask zu signieren, müssen wir unser web3.currentProvider.sendAsync () verwenden und unseren Unterzeichner und die Nutzlast übergeben die Funktion.


So würde mein Tastenauslöser aussehen:

Wenn alles gut funktioniert, wird ein MetaMask-Popup angezeigt, das den Benutzer bestätigt, die Daten zu signieren:

Zusammenfassung

Während des gesamten Projekts ist es interessant, dass die Ethereum-Community die Benutzerfreundlichkeit ihres Protokolls für die Massenakzeptanz ihrer Benutzer verbessern möchte. Daher ist EIP712 ein guter Anfang, um sicherzustellen, dass mehr Benutzer Ethereum problemlos verwenden können.

Für das vollständige Repo dieses Projekts – https://github.com/ayepRahman/eip-712-testing-environment