Skip to content

Commit

Permalink
updating with screenshots
Browse files Browse the repository at this point in the history
  • Loading branch information
@kmjones1979
kmjones1979 committed Nov 7, 2023
1 parent 886c961 commit ffb7ee6
Show file tree
Hide file tree
Showing 6 changed files with 63 additions and 89 deletions.
8 changes: 7 additions & 1 deletion ...e_Graph-SE2-Subgraph-package/en/section-2/lesson-2_Deployer account creation.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ If you need some testnet funds you can try the following faucets:
yarn run generate
```

![](/public/images/The_Graph-SE2-Subgraph-package/section-2/Lesson2-1.png)

You should see the following saved to your hardhats environment variable file
```
👛 Generating new Wallet
Expand All @@ -25,6 +27,8 @@ You should see the following saved to your hardhats environment variable file
yarn account
```

![](/public/images/The_Graph-SE2-Subgraph-package/section-2/Lesson2-2.png)

This should display your public address along with a fancy QR code. And balances?!? Woooowwwww that is slick! <3

```
Expand Down Expand Up @@ -54,4 +58,6 @@ Public address: 0x87f00B2c39F97CD00BC6d09777BC4327aCA39180
```

Send over some testnet ETH from the chain of your choice. I would suggest sepolia as its fairly easy to get some testnet ETH from various sources.
Send over some testnet ETH from the chain of your choice. I would suggest sepolia as its fairly easy to get some testnet ETH from various sources. In the output below you can see I now have a sepolia balance.

![](/public/images/The_Graph-SE2-Subgraph-package/section-2/Lesson2-3.png)
4 changes: 4 additions & 0 deletions docs/The_Graph-SE2-Subgraph-package/en/section-2/lesson-3_Deploy and verify.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ Now we can deploy to our testnet of choice... in this example we will deploy to
yarn deploy --network sepolia
```

![](/public/images/The_Graph-SE2-Subgraph-package/section-2/Lesson3-1.png)

If all is well you should see the following success output.

```
Expand All @@ -21,6 +23,8 @@ deploying "YourContract" (tx: 0xf404021d736271a7a0a84d124ed35250c533efe37c177536
yarn verify --network sepolia
```

![](/public/images/The_Graph-SE2-Subgraph-package/section-2/Lesson3-2.png)

You should see the following successful output...

```
Expand Down
90 changes: 5 additions & 85 deletions docs/The_Graph-SE2-Subgraph-package/en/section-2/lesson-5_Graph CLI.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ You can install the Graph CLI globally using the following command.
yarn global add @graphprotocol/graph-cli
```

![](/public/images/The_Graph-SE2-Subgraph-package/section-2/Lesson5.png)

#### ✅ Init your Subgraph

This can be done in a separate folder of your choosing, since it will initiate a yarn package. You will need to fill in the required configuration during the initialization process.The Start Block - Can be found on Etherescan if needed so you don't have to index the entire previous blocks.
Expand All @@ -22,28 +24,7 @@ graph init --studio name_of_your_subgraph

It should looks something like this...

```
✔ Protocol · ethereum
✔ Subgraph slug · sendmessage
✔ Directory to create the subgraph in · sendmessage
✔ Ethereum network · sepolia
✔ Contract address · 0x541D469C06990B7F0bd5103b57997cE8a39C050c
✔ Fetching ABI from Etherscan
✖ Failed to fetch Start Block: Failed to fetch contract creation transaction hash
✔ Start Block · 4089059
✔ Contract Name · Contract
✔ Index contract events as entities (Y/n) · true
Generate subgraph
Write subgraph to directory
✔ Create subgraph scaffold
✔ Initialize networks config
✔ Initialize subgraph repository
✔ Install dependencies with yarn
✔ Generate ABI and schema types with yarn codegen
Add another contract? (y/n):
Subgraph sendmessage created in sendmessage
```
![](/public/images/The_Graph-SE2-Subgraph-package/section-2/Lesson5-1.png)

#### ✅ Authenticate to Studio

Expand All @@ -70,42 +51,7 @@ graph codegen && graph build

Success will look something like the following!

```
✔ Apply migrations
✔ Load subgraph from subgraph.yaml
Load contract ABI from abis/Contract.json
✔ Load contract ABIs
Generate types for contract ABI: Contract (abis/Contract.json)
Write types to generated/Contract/Contract.ts
✔ Generate types for contract ABIs
✔ Generate types for data source templates
✔ Load data source template ABIs
✔ Generate types for data source template ABIs
✔ Load GraphQL schema from schema.graphql
Write types to generated/schema.ts
✔ Generate types for GraphQL schema
Types generated successfully
Skip migration: Bump mapping apiVersion from 0.0.1 to 0.0.2
Skip migration: Bump mapping apiVersion from 0.0.2 to 0.0.3
Skip migration: Bump mapping apiVersion from 0.0.3 to 0.0.4
Skip migration: Bump mapping apiVersion from 0.0.4 to 0.0.5
Skip migration: Bump mapping apiVersion from 0.0.5 to 0.0.6
Skip migration: Bump manifest specVersion from 0.0.1 to 0.0.2
Skip migration: Bump manifest specVersion from 0.0.2 to 0.0.4
✔ Apply migrations
✔ Load subgraph from subgraph.yaml
Compile data source: Contract => build/Contract/Contract.wasm
✔ Compile subgraph
Copy schema file build/schema.graphql
Write subgraph file build/Contract/abis/Contract.json
Write subgraph manifest build/subgraph.yaml
✔ Write compiled subgraph to build/
Build completed: build/subgraph.yaml
```
![](/public/images/The_Graph-SE2-Subgraph-package/section-2/Lesson5-3.png)

#### ✅ Deploy

Expand All @@ -117,33 +63,7 @@ graph deploy --studio name_of_your_subgraph

Choose a version and fire away!

```
Which version label to use? (e.g. "v0.0.1"): 0.0.1
Skip migration: Bump mapping apiVersion from 0.0.1 to 0.0.2
Skip migration: Bump mapping apiVersion from 0.0.2 to 0.0.3
Skip migration: Bump mapping apiVersion from 0.0.3 to 0.0.4
Skip migration: Bump mapping apiVersion from 0.0.4 to 0.0.5
Skip migration: Bump mapping apiVersion from 0.0.5 to 0.0.6
Skip migration: Bump manifest specVersion from 0.0.1 to 0.0.2
Skip migration: Bump manifest specVersion from 0.0.2 to 0.0.4
✔ Apply migrations
✔ Load subgraph from subgraph.yaml
Compile data source: Contract => build/Contract/Contract.wasm
✔ Compile subgraph
Copy schema file build/schema.graphql
Write subgraph file build/Contract/abis/Contract.json
Write subgraph manifest build/subgraph.yaml
✔ Write compiled subgraph to build/
Add file to IPFS build/schema.graphql
.. QmTLSV6vUwnPYyi9oqMJ3Ds3TkgE1A8PEaYa5yhbd3y73b
Add file to IPFS build/Contract/abis/Contract.json
.. QmT5j3kGMkVjUVaW8MhMKRSnZXdTDrTSUcf5MC9hFKNHYf
Add file to IPFS build/Contract/Contract.wasm
.. QmeuaTgxLJKp8N2R2RCiQFvJa1fPz81tytc4xECBoRCpjv
✔ Upload subgraph to IPFS
Build completed: QmUqgKBRWxFGNG6oPZuZxuCwJbEvKe6UbKCe8WTcDJvusk
```
![](/public/images/The_Graph-SE2-Subgraph-package/section-2/Lesson5-4.png)

It might take up to 5 minutes for you subgraph to deploy to the studio. Once it has been deployed, you can check that is fully syncing and has no errors. A successful deploy will look like the following.

Expand Down
46 changes: 44 additions & 2 deletions docs/The_Graph-SE2-Subgraph-package/en/section-2/lesson-6_Frontend.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,41 @@ Update the configuration to point to the testnet that you deployed to in previou
targetNetwork: chains.sepolia,
```

It should look like this when changed:

![](/public/images/The_Graph-SE2-Subgraph-package/section-2/Lesson6-1.png)

Once you change this you can go back to scaffold-ETH and refresh the UI. You will get kicked from your burner wallet, you will want to connect to the testnet work using your metamask wallet.

#### ✅ Fire off a test message to someone you know!
Click "CONNECT WALLET"...

![](/public/images/The_Graph-SE2-Subgraph-package/section-2/Lesson6-2.png)

Choose Metamask...

![](/public/images/The_Graph-SE2-Subgraph-package/section-2/Lesson6-3.png)

Switch the network...

![](/public/images/The_Graph-SE2-Subgraph-package/section-2/Lesson6-4.png)

![](/public/images/The_Graph-SE2-Subgraph-package/section-2/Lesson6-5.png)

Once complete you should now be connected to your dapp on sepolia network.

![](/public/images/The_Graph-SE2-Subgraph-package/section-2/Lesson6-6.png)

#### ✅ Fire off a test message to someone you know! (or Vitalik heh)

Then check to see if the message was indexed successfully in the studio.
We now want to send an event on the testnet that we have deployed our smart contract. We can do that fairly easily now that our frontend is properly configured.

![](/public/images/The_Graph-SE2-Subgraph-package/section-2/Lesson6-7.png)

![](/public/images/The_Graph-SE2-Subgraph-package/section-2/Lesson6-8.png)

Then check to see if the message was indexed successfully in the studio. You can find the GraphiQL explorer on the "Playground" page.

![](/public/images/The_Graph-SE2-Subgraph-package/section-2/Lesson6-9.png)

#### ✅ Update our GraphQL URL to point to our development endpoint

Expand All @@ -34,6 +64,10 @@ The development endpoint for your subgraph can be found on the details tab in Su
});
```

The change will look something like this:

![](/public/images/The_Graph-SE2-Subgraph-package/section-2/Lesson6-10.png)

#### ✅ Start with a clean slate in your index.ts file

Let's import everything we will need into our index.ts file. You can also clean out all the info in the return.
Expand All @@ -60,6 +94,10 @@ const Home: NextPage = () => {
export default Home;
```

After your change the home directory will look something like this:

![](/public/images/The_Graph-SE2-Subgraph-package/section-2/Lesson6-11.png)

#### ✅ Display our messages in a table format

Lastly a table to display our messages.
Expand Down Expand Up @@ -109,6 +147,8 @@ And then load the data like so...
const messages = messagesData?.sendMessages || [];
```

![](/public/images/The_Graph-SE2-Subgraph-package/section-2/Lesson6-13.png)

We can then make this a bit prettier and use the <Address> component instead of just plain text.

```
Expand All @@ -121,4 +161,6 @@ We can then make this a bit prettier and use the <Address> component instead of

This will look a lot nicer than those long strings! :D

![](/public/images/The_Graph-SE2-Subgraph-package/section-2/Lesson6-14.png)

> Note: If you want to see the full complete file you can do so [here](https://gist.github.com/kmjones1979/26ef9633b61b17f237e88eb41bb688de)!
4 changes: 3 additions & 1 deletion docs/The_Graph-SE2-Subgraph-package/en/section-2/lesson-7_Ship your frontend.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,4 +32,6 @@ Auto-detected Project Settings (Next.js):
✅ Production: https://testing-red.vercel.app [3m]
📝 Deployed to production. Run `vercel --prod` to overwrite later (https://vercel.link/2F).
💡 To change the domain or build command, go to https://vercel.com/kevin-kevinjonescr/testing/settings
```
```

Thank you so much for learning all about Scaffold-ETH and The Graph. We want to hear about how you enjoyed this tutorial and any feedback you have. You can join The Graph Discord and reach out if you have questions or problems along your web3 journey! Keep BUIDLing my friends!
Binary file added public/images/The_Graph-SE2-Subgraph-package/section-2/Lesson5.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit ffb7ee6

Please sign in to comment.