Hur man gör en Reagera HOC för Ethereum Dapps i 42 rader kod

Hur man gör en Reagera HOC för Ethereum Dapps i 42 rader kod

Reagera HOCs och Ethereum kan spela bra tillsammans

Du litade på mig och jag tog nytta av dig. Jag är ledsen.

Men om du tar ut importera/exportera – satser och några tomma rader, det är bara rader kod.

förlåt mig, jag lovar dig det kommer att vara värt det!

Vad handlar detta om?

Web3 är bron mellan webbläsaren och Ethereum blockchain. Om du gör en Ethereum Dapp med att Reagera, är din första utmaning skulle vara att få Web3 i dina komponenter.

Ett stort bibliotek som hjälper till med detta är Reagera-Web3, men denna artikel är för dem av er som föredrar att veta hur man gör något från “scratch”, även om du kanske aldrig.

Om du bara vill komma igång med att göra en Ethereum Dapp, kanske du vill ha min andra artikel:

Gör en HOC-som kommer att tillföra Web3

Vi vill att svepa en komponent med withWeb3(högre-för-komponent) och få Web3 objekt som prop i vår komponent.

med andra ord, vi vill använda det så här:

En användning exempel, Det är vad vi försöker uppnå.

oroa dig inte om JSON.stringify(), det är bara skriver ut Web3 objekt. Poängen är att MyComponent har tillgång till web3 objekt.

Den faktiska HOC

oroa dig inte, jag ska gå igenom det. Men här är det första:

Observera att vi använder asynkron/väntar på syntax.

kort sagt,withWeb3 är en funktion som:

  1. Tar i en komponent (som vi kallar PassedComponent),
  2. Försök att få web3 – objekt från webbläsaren
  3. Gör <PassedComponent web3={web3} />, när den är klar,
  4. Eller gör en laddning meddelande om web3 är ännu inte klar.

i grund och botten, det är bara att försöka ringa getWeb3, och när det är gjort, kommer det att ställa in den till vår komponenten tillstånd så att vi kan göra PassedComponent web3 – som en prop.

Så du är förmodligen undrar vad som finns inuti getWeb3.js?

Faktiskt få web3 objekt

Här är där det blir lite knepigt. Här är koden för att gripa web3:


räkna>

Det finns i huvudsak två funktioner här, att ställa två frågor:

  1. Som Web3 att ta tag i? — Första (i resolveWeb3), skapar vi en funktion där vi faktiskt försöker ta tag i web3 objekt. Detta kräver att avgöra vilken Web3 att ta tag i.
  2. När du ska ta Web3? — Andra (i vårt standard exportera), vi försöker ringa ovanstående funktion (resolveWeb3) i två olika fall.

Vi kan tala om dessa två separat.

Som Web3 att ta tag i?

resolveWeb3 – vi försöker att ta reda på om användaren kör MetaMask eller Mist, eller om de kör en lokala testrpc eller tryffel utveckla – server (standardportarna för dessa är 8545 och 9545).

Om web3 redan finns innanför fönster – objekt, då vet vi MetaMask eller Dimma är igång. Annars, vi som standard till den lokala web3.

hursomhelst, vi greppa web3 – objekt och anropa lös callback så att vi kan skicka tillbaka upp till vår app.

När du ska ta Web3?

För den andra funktionen returnerar vi ett Löfte där vi kallar resolveWeb3 i en av två fall:

  1. På dokumentet ladda händelsen (dvs när sidan är klar laddar). Det är så att MetaMask har en chans att injicera web3 – innan vi försöka ta tag i det.
  2. När getWeb3() – funktionen anropas.

anledningen till att vi behöver det andra fallet är att du kanske vill inkludera Web3 endast när användaren navigerar till en komponent/sida som kräver det.

Om så är fallet, då kan du inte lita på dokumentet ladda – händelse, eftersom det skulle ha hänt för länge sedan.

Och det är det!

Förhoppningsvis nu kan du genomföra dina egna HOC-som ger i Web3 och vad du behöver, som en tryffel-kontrakt exempel, eller konton array. Jag gör något som det här i mitt standardtext Tryffel Box:

Du kanske vill läsa min artikeln om ovan talar till dig.

jag hoppas att detta var åtminstone något intressant för dig, och om så är fallet, skulle jag älskar att hålla ned för att klappa knappen.