Merge pull request #483 from unchain-tech/feature/add-thegraph-ja

[WIP] Add ja contents
unchain-tech · Jan 31, 2024 · 1171812 · 1171812
2 parents 6567ad4 + fc65537
commit 1171812
Show file tree

Hide file tree

Showing 93 changed files with 1,032 additions and 106 deletions.
diff --git a/...section-0/lesson-1_Course Introduction.md → ...section-0/lesson-1_Course Introduction.md b/...section-0/lesson-1_Course Introduction.md → ...section-0/lesson-1_Course Introduction.md
@@ -19,13 +19,13 @@ This workshop is built around Scaffold-ETH 2 and The Graph. You will learn how t
 - 🔥 **Burner Wallet & Local Faucet**: Quickly test your application with a burner wallet and local faucet.
 - 🔐 **Integration with Wallet Providers**: Connect to different wallet providers and interact with the Ethereum network.
 
-![](/public/images/The_Graph-SE2-Subgraph-package/section-0/Lesson1-1.png)
+![](/public/images/TheGraph-ScaffoldEth2/section-0/0_1_1.png)
 
-![](/public/images/The_Graph-SE2-Subgraph-package/section-0/Lesson1-2.png)
+![](/public/images/TheGraph-ScaffoldEth2/section-0/0_1_2.png)
 
-![](/public/images/The_Graph-SE2-Subgraph-package/section-0/Lesson1-3.png)
+![](/public/images/TheGraph-ScaffoldEth2/section-0/L0_1_3.png)
 
-![](/public/images/The_Graph-SE2-Subgraph-package/section-0/Lesson1-4.png)
+![](/public/images/TheGraph-ScaffoldEth2/section-0/0_1_4.png)
 
 To learn more about Scaffold-ETH checkout the [Github repository](https://github.com/scaffold-eth/scaffold-eth-2) or [Scaffoldeth.io](https://scaffoldeth.io).
 
@@ -43,9 +43,9 @@ For detailed instructions and more context, check out the [Getting Started Guide
 
 We are building an example smart contract and front end that utilizes The Graph protocol for data storage of event data.
 
-(Add links here to example dapp deployed online)
+https://sendmessage-tau.vercel.app
 
-(add screen shots here to show the example dapp)
+![](/public/images/TheGraph-ScaffoldEth2/section-0/0_1_5.png)
 
 ### 🌍 Upgrading this project
 
@@ -75,4 +75,5 @@ Creating `pull request` and `issues` is an important task when actually developi
 Let's make the UNCHAIN project better together ✨.
 
 ### 🙋‍♂️ Asking Questions
-If you have any questions or uncertainties up to this point, please ask in the `#thegraph` channel on Discord.
+
+If you have any questions or uncertainties up to this point, please ask in the `#thegraph` channel on Discord.
diff --git a/...age/en/section-0/lesson-2_Requirements.md → ...th2/en/section-0/lesson-2_Requirements.md b/...age/en/section-0/lesson-2_Requirements.md → ...th2/en/section-0/lesson-2_Requirements.md
diff --git a/...ection-0/lesson-3_Setup Scaffold-ETH 2.md → ...ection-0/lesson-3_Setup Scaffold-ETH 2.md b/...ection-0/lesson-3_Setup Scaffold-ETH 2.md → ...ection-0/lesson-3_Setup Scaffold-ETH 2.md
@@ -6,7 +6,7 @@ First, we will start out with a special build of Scaffold-ETH 2 written by Simon
 
 We will need a total of four different windows to setup Scaffold-ETH 2 and The Graph.
 
-![](/public/images/The_Graph-SE2-Subgraph-package/section-0/Lesson3-1.png)
+![](/public/images/TheGraph-ScaffoldEth2/section-0/0_3_1.png)
 
 ```
 git clone -b subgraph-package \
@@ -21,15 +21,15 @@ cd scaffold-eth-2-subgraph-package && \
   yarn install
 ```
 
-![](/public/images/The_Graph-SE2-Subgraph-package/section-0/Lesson3-2.png)
+![](/public/images/TheGraph-ScaffoldEth2/section-0/0_3_2.png)
 
 Next, we will want to start up our local blockchain so that we can eventually deploy and test our smart contracts. Scaffold-ETH 2 comes with Hardhat by default. To spin up the chain just type the following yarn command…
 
 ```
 yarn chain
 ```
 
-![](/public/images/The_Graph-SE2-Subgraph-package/section-0/Lesson3-3.png)
+![](/public/images/TheGraph-ScaffoldEth2/section-0/0_3_3.png)
 
 > You will keep this window up and available so that you can see any output from hardhat console. 🖥️
 
@@ -39,7 +39,7 @@ Next we are going to spin up our frontend application. Scaffold-ETH 2 comes with
 yarn start
 ```
 
-![](/public/images/The_Graph-SE2-Subgraph-package/section-0/Lesson3-4.png)
+![](/public/images/TheGraph-ScaffoldEth2/section-0/0_3_4.png)
 
 > You will also want to keep this window up at all times so that you can debug any code changes you make to NextJS, debug performance or just check that the server is running properly.
 
@@ -49,16 +49,16 @@ Next, you will want to open up a third window where you can deploy your smart co
 yarn deploy
 ```
 
-![](/public/images/The_Graph-SE2-Subgraph-package/section-0/Lesson3-5.png)
+![](/public/images/TheGraph-ScaffoldEth2/section-0/0_3_5.png)
 
 > You should get a tx along with an address and amount of gas spent on the deploy. ⛽
 
 If you navigate to http://localhost:3000 you should see the NextJS application. Explore the menus and features of Scaffold-ETH 2! Someone call in an emergency, cause hot damn that is fire! 🔥
 
-You can test by sending an update to the setGreeting function. In order to do this you will need to get some gas by clicking cash icon in the top right hand corner next to the burner wallet address. This will send you 1 ETH from the faucet. 
+You can test by sending an update to the setGreeting function. In order to do this you will need to get some gas by clicking cash icon in the top right hand corner next to the burner wallet address. This will send you 1 ETH from the faucet.
 
 Then you can simply navigate to "Debug Contracts", click the string field under setGreeting and type something fun and then click "SEND"
 
-![](/public/images/The_Graph-SE2-Subgraph-package/section-0/Lesson3-6.png)
+![](/public/images/TheGraph-ScaffoldEth2/section-0/0_3_6.png)
 
-After this is complete you should also get a transaction receipt that you can expand below to verify it was successful.
+After this is complete you should also get a transaction receipt that you can expand below to verify it was successful.
diff --git a/.../en/section-0/lesson-4_Setup The Graph.md → .../en/section-0/lesson-4_Setup The Graph.md b/.../en/section-0/lesson-4_Setup The Graph.md → .../en/section-0/lesson-4_Setup The Graph.md
@@ -16,8 +16,8 @@ yarn clean-node
 yarn run-node
 ```
 
-![](/public/images/The_Graph-SE2-Subgraph-package/section-0/Lesson4-1.png)
+![](/public/images/TheGraph-ScaffoldEth2/section-0/0_4_1.png)
 
 This will spin up all the containers for The Graph using docker-compose. You will know this is complete when it reads "Downloading latest blocks from Ethereum..."
 
-> As stated before, be sure to keep this window open so that you can see any log output from Docker. 🔎
+> As stated before, be sure to keep this window open so that you can see any log output from Docker. 🔎
diff --git a/...section-0/lesson-5_Deploy to localhost.md → ...section-0/lesson-5_Deploy to localhost.md b/...section-0/lesson-5_Deploy to localhost.md → ...section-0/lesson-5_Deploy to localhost.md
@@ -2,15 +2,15 @@
 
 ### ✅ Create and ship our Subgraph
 
-Now we can open up a fourth window to finish setting up The Graph. 😅 In this forth window we will create our local subgraph! 
+Now we can open up a fourth window to finish setting up The Graph. 😅 In this forth window we will create our local subgraph!
 
 > Note: You will only need to do this once.
 
 ```
 yarn local-create
 ```
 
-![](/public/images/The_Graph-SE2-Subgraph-package/section-0/Lesson5-1.png)
+![](/public/images/TheGraph-ScaffoldEth2/section-0/0_5_1.png)
 
 > You should see some output stating your Subgraph has been created along with a log output on your graph-node inside docker.
 
@@ -20,7 +20,7 @@ Next we will ship our subgraph! You will need to give your subgraph a version af
 yarn local-ship
 ```
 
-![](/public/images/The_Graph-SE2-Subgraph-package/section-0/Lesson5-2.png)
+![](/public/images/TheGraph-ScaffoldEth2/section-0/0_5_2.png)
 
 > This command does the following all in one… 🚀🚀🚀
 
@@ -38,7 +38,7 @@ npm install -g ts-node
 
 If your subgraph deployment was successful it will look something like this:
 
-![](/public/images/The_Graph-SE2-Subgraph-package/section-0/Lesson5-3.png)
+![](/public/images/TheGraph-ScaffoldEth2/section-0/0_5_3.png)
 
 You should get a build completed output along with the address of your Subgraph endpoint.
 
@@ -49,4 +49,4 @@ Deployed to http://localhost:8000/subgraphs/name/scaffold-eth/your-contract/grap
 
 Subgraph endpoints:
 Queries (HTTP):     http://localhost:8000/subgraphs/name/scaffold-eth/your-contract
-```
+```
diff --git a/...aph-package/en/section-0/lesson-6_Test.md → ...caffoldEth2/en/section-0/lesson-6_Test.md b/...aph-package/en/section-0/lesson-6_Test.md → ...caffoldEth2/en/section-0/lesson-6_Test.md
@@ -22,8 +22,8 @@ Go ahead and head over to your subgraph endpoint and take a look!
   }
 ```
 
-![](/public/images/The_Graph-SE2-Subgraph-package/section-0/Lesson6-1.png)
+![](/public/images/TheGraph-ScaffoldEth2/section-0/0_6_1.png)
 
 > If all is well and you’ve sent a transaction to your smart contract then you will see a similar data output!
 
-Next up we will dive into a bit more detail on how The Graph works so that as you start adding events to your smart contract you can start indexing and parsing the data you need for your front end application.
+Next up we will dive into a bit more detail on how The Graph works. As you start adding events to your smart contract, you can start indexing and parsing the data you need for your front end application.
diff --git a/.../en/section-1/lesson-1_Adding an event.md → .../en/section-1/lesson-1_Adding an event.md b/.../en/section-1/lesson-1_Adding an event.md → .../en/section-1/lesson-1_Adding an event.md
@@ -20,9 +20,9 @@ Add the following new line of code.
 
 You can drop this event and function anywhere inside the contract, but best practice is to drop it below any modifiers or the constructor.
 
-![](/public/images/The_Graph-SE2-Subgraph-package/section-1/Lesson1-1.png)
+![](/public/images/TheGraph-ScaffoldEth2/section-1/1_1_1.png)
 
-We can save our contract and then deploy those new changes. 
+We can save our contract and then deploy those new changes.
 
 > Pro tip, if you use the --reset flag you will ALWAYS get a fresh contract deployed, regardless of any updates to the source.
 
@@ -32,10 +32,10 @@ yarn deploy --reset
 
 You should see the following output:
 
-![](/public/images/The_Graph-SE2-Subgraph-package/section-1/Lesson1-2.png)
+![](/public/images/TheGraph-ScaffoldEth2/section-1/1_1_2.png)
 
 #### ✅ Test your new function
 
-Navigate over to http://localhost:3000/debug and send vitalik.eth a message. 
+Navigate over to http://localhost:3000/debug and send vitalik.eth a message.
 
-![](/public/images/The_Graph-SE2-Subgraph-package/section-1/Lesson1-3.png)
+![](/public/images/TheGraph-ScaffoldEth2/section-1/1_1_3.png)
diff --git a/...tion-1/lesson-2_Updating your subgraph.md → ...tion-1/lesson-2_Updating your subgraph.md b/...tion-1/lesson-2_Updating your subgraph.md → ...tion-1/lesson-2_Updating your subgraph.md
@@ -2,7 +2,7 @@
 
 ### ✅ Update the GraphQL schema
 
-After you add an event to your smart contract, you will need to first update the GraphQL schema to include the entities you want to store on your Graph node. If you want to catch up on entities here is a good link to the docs for that.
+After you add an event to your smart contract, you will need to first update the GraphQL schema to include the entities you want to store on your Graph node. If you want to catch up on entities [here](https://thegraph.com/docs/en/developing/creating-a-subgraph/#defining-entities) is a good link to the docs for that.
 
 In the code below we will update the existing schema to a new naming convention that matches the event name.
 
@@ -32,7 +32,7 @@ type SendMessage @entity(immutable: true) {
 
 ```
 
-![](/public/images/The_Graph-SE2-Subgraph-package/section-1/Lesson2-1.png)
+![](/public/images/TheGraph-ScaffoldEth2/section-1/1_2_1.png)
 
 #### ✅ Update the Subgraph manifest
 
@@ -54,15 +54,15 @@ entities:
           handler: handleSendMessage
 ```
 
-![](/public/images/The_Graph-SE2-Subgraph-package/section-1/Lesson2-2.png)
+![](/public/images/TheGraph-ScaffoldEth2/section-1/1_2_2.png)
 
 If you are following along, next you will need to copy over your new abi and regenerate the code.
 
 ```
 yarn abi-copy && yarn codegen
 ```
 
-![](/public/images/The_Graph-SE2-Subgraph-package/section-1/Lesson2-3.png)
+![](/public/images/TheGraph-ScaffoldEth2/section-1/1_2_3.png)
 
 #### ✅ Update the mapping script
 
@@ -122,8 +122,6 @@ export function handleSendMessage(event: SendMessageEvent): void {
 
 Your changes should be accepted inside of your editor without any linting errors.
 
-![](/public/images/The_Graph-SE2-Subgraph-package/section-1/Lesson2-4.png)
+![](/public/images/TheGraph-ScaffoldEth2/section-1/1_2_4.png)
 
 After that is done, you are almost done… time to ship it!
-
-
diff --git a/...h-package/en/section-1/lesson-3_Deploy.md → ...ffoldEth2/en/section-1/lesson-3_Deploy.md b/...h-package/en/section-1/lesson-3_Deploy.md → ...ffoldEth2/en/section-1/lesson-3_Deploy.md
@@ -6,8 +6,8 @@
 yarn local-ship
 ```
 
-![](/public/images/The_Graph-SE2-Subgraph-package/section-1/Lesson3-1.png)
+![](/public/images/TheGraph-ScaffoldEth2/section-1/1_3_1.png)
 
 Be sure to add a new version number to your subgraph when it prompts you. This should be higher then the previous version.
 
-Next we will test out the subgraph and make sure it is indexing correctly.
+Next we will test out the subgraph and make sure it is indexing correctly.
diff --git a/...aph-package/en/section-1/lesson-4_Test.md → ...caffoldEth2/en/section-1/lesson-4_Test.md b/...aph-package/en/section-1/lesson-4_Test.md → ...caffoldEth2/en/section-1/lesson-4_Test.md
@@ -1,4 +1,4 @@
-## Test 
+## Test
 
 ### ✅ Test your newly deployed Subgraph
 
@@ -14,8 +14,8 @@ Next, lets see if our data is in The Graph. Here is an example query that shows
 }
 ```
 
-You should get a nice response like this: 
+You should get a nice response like this:
 
-![](/public/images/The_Graph-SE2-Subgraph-package/section-1/Lesson4-1.png)
+![](/public/images/TheGraph-ScaffoldEth2/section-1/1_4_1.png)
 
-Data is such a beautiful thing huh? 
+Data is such a beautiful thing huh?
diff --git a/...en/section-2/lesson-1_Install Metamask.md → ...en/section-2/lesson-1_Install Metamask.md b/...en/section-2/lesson-1_Install Metamask.md → ...en/section-2/lesson-1_Install Metamask.md
diff --git a/...n-2/lesson-2_Deployer account creation.md → ...n-2/lesson-2_Deployer account creation.md b/...n-2/lesson-2_Deployer account creation.md → ...n-2/lesson-2_Deployer account creation.md
@@ -4,18 +4,20 @@
 
 Next we want to take our smart contract and deploy it to a testnet! At the time this workshop was written, The Graph supports many testnets but for this example we will use sepolia.
 
-If you need some testnet funds you can try the following faucets:
-- 
+## If you need some testnet funds you can try the following faucets:
+
+[Ethereum Sepolia Faucet - Alchemy](https://sepoliafaucet.com/)
 
 #### ✅ Create a deployer account
 
 ```
 yarn run generate
 ```
 
-![](/public/images/The_Graph-SE2-Subgraph-package/section-2/Lesson2-1.png)
+![](/public/images/TheGraph-ScaffoldEth2/section-2/2_2_1.png)
 
 You should see the following saved to your hardhats environment variable file
+
 ```
 👛 Generating new Wallet
 📄 Private Key saved to packages/hardhat/.env file
@@ -27,30 +29,30 @@ 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)
+![](/public/images/TheGraph-ScaffoldEth2/section-2/2_2_2.png)
 
 This should display your public address along with a fancy QR code. And balances?!? Woooowwwww that is slick! <3
 
 ```
 
- ▄▄▄▄▄▄▄ ▄  ▄  ▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄ 
- █ ▄▄▄ █ █▀▀▄ █▀█▄ ▄▄█ █ ▄▄▄ █ 
- █ ███ █ ▄▄██▀▄█ ▀ ███ █ ███ █ 
- █▄▄▄▄▄█ ▄▀▄▀▄▀▄▀▄ █ ▄ █▄▄▄▄▄█ 
- ▄  ▄▄▄▄▄▄▀█▄▀▄█▄▄ ▄█▀▄  ▄ ▄▄▄ 
- ▄▀▀█ █▄██▀▀▀▀▄█▀▀▄█▄██▀▄▄█▀█  
-   ▀▄▄ ▄█▄▄▄▀ █▀▄▀▀▄▄█ ██▀█ ▄▀ 
- ▄█▀▀██▄ ▀▄   █ ▀  ▀█ ▀▄▀█▄███ 
- ▄█▀██ ▄▄▄ ▀ ▄ █▄▀▄▄  ██▄▀▄▀▄█ 
- █▄ █▄ ▄█▄█▄▀▀▀ ▄█▄█▀▄ █▀▀▄▄▀▄ 
- ███▄█▀▄   █ ▀▄█▀ █████▄▄█▀█▄▄ 
- ▄▄▄▄▄▄▄ █▄ █▄ ██▀ █ █ ▄ █ ██  
- █ ▄▄▄ █ █ ▀██▄██▀▀▄ █▄▄▄██▄▄  
- █ ███ █ ▀▄▀▄ ▀▄▄ ▄█▀▀ ▄▄▄██▄▄ 
- █▄▄▄▄▄█ ▄█ ▄█  ▄▀▄█ ▄▀ ▄▄▄▀ ▀ 
+ ▄▄▄▄▄▄▄ ▄  ▄  ▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄
+ █ ▄▄▄ █ █▀▀▄ █▀█▄ ▄▄█ █ ▄▄▄ █
+ █ ███ █ ▄▄██▀▄█ ▀ ███ █ ███ █
+ █▄▄▄▄▄█ ▄▀▄▀▄▀▄▀▄ █ ▄ █▄▄▄▄▄█
+ ▄  ▄▄▄▄▄▄▀█▄▀▄█▄▄ ▄█▀▄  ▄ ▄▄▄
+ ▄▀▀█ █▄██▀▀▀▀▄█▀▀▄█▄██▀▄▄█▀█
+   ▀▄▄ ▄█▄▄▄▀ █▀▄▀▀▄▄█ ██▀█ ▄▀
+ ▄█▀▀██▄ ▀▄   █ ▀  ▀█ ▀▄▀█▄███
+ ▄█▀██ ▄▄▄ ▀ ▄ █▄▀▄▄  ██▄▀▄▀▄█
+ █▄ █▄ ▄█▄█▄▀▀▀ ▄█▄█▀▄ █▀▀▄▄▀▄
+ ███▄█▀▄   █ ▀▄█▀ █████▄▄█▀█▄▄
+ ▄▄▄▄▄▄▄ █▄ █▄ ██▀ █ █ ▄ █ ██
+ █ ▄▄▄ █ █ ▀██▄██▀▀▄ █▄▄▄██▄▄
+ █ ███ █ ▀▄▀▄ ▀▄▄ ▄█▀▀ ▄▄▄██▄▄
+ █▄▄▄▄▄█ ▄█ ▄█  ▄▀▄█ ▄▀ ▄▄▄▀ ▀
 ▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀
 
-Public address: 0x87f00B2c39F97CD00BC6d09777BC4327aCA39180 
+Public address: 0x87f00B2c39F97CD00BC6d09777BC4327aCA39180
 
 -- localhost -- 📡
    balance: 0
@@ -60,4 +62,4 @@ 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. 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)
+![](/public/images/TheGraph-ScaffoldEth2/section-2/2_2_3.png)
diff --git a/...n/section-2/lesson-3_Deploy and verify.md → ...n/section-2/lesson-3_Deploy and verify.md b/...n/section-2/lesson-3_Deploy and verify.md → ...n/section-2/lesson-3_Deploy and verify.md
@@ -8,7 +8,7 @@ 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)
+![](/public/images/TheGraph-ScaffoldEth2/section-2/2_3_1.png)
 
 If all is well you should see the following success output.
 
@@ -23,7 +23,7 @@ deploying "YourContract" (tx: 0xf404021d736271a7a0a84d124ed35250c533efe37c177536
 yarn verify --network sepolia
 ```
 
-![](/public/images/The_Graph-SE2-Subgraph-package/section-2/Lesson3-2.png)
+![](/public/images/TheGraph-ScaffoldEth2/section-2/2_3_2.png)
 
 You should see the following successful output...
 
@@ -32,6 +32,5 @@ verifying YourContract (0x541D469C06990B7F0bd5103b57997cE8a39C050c) ...
 waiting for result...
  => contract YourContract is now verified
 ```
-
- You can also check your contract was successfully on etherscan. [Here](https://sepolia.etherscan.io/address/0x541D469C06990B7F0bd5103b57997cE8a39C050c#code) is the one I deployed and verified.
 
+You can also check your contract was successfully on etherscan. [Here](https://sepolia.etherscan.io/address/0x541D469C06990B7F0bd5103b57997cE8a39C050c#code) is the one I deployed and verified.
diff --git a/.../en/section-2/lesson-4_Subgraph Studio.md → .../en/section-2/lesson-4_Subgraph Studio.md b/.../en/section-2/lesson-4_Subgraph Studio.md → .../en/section-2/lesson-4_Subgraph Studio.md
@@ -6,21 +6,20 @@ Now that our smart contract is on a public testnet it is time to push our Subgra
 
 #### ✅ Navigate to https://thegraph.com/studio
 
-![](/public/images/The_Graph-SE2-Subgraph-package/section-2/Studio1.png)
+![Studio1](/public/images/TheGraph-ScaffoldEth2/section-2/2_4_1.png)
 
 #### ✅ Connect your wallet
 
-![](/public/images/The_Graph-SE2-Subgraph-package/section-2/Studio2.png)
+![Studio2](/public/images/TheGraph-ScaffoldEth2/section-2/2_4_2.png)
 
 You might need to sign a request to verify that you own the connected wallet.
 
-![](/public/images/The_Graph-SE2-Subgraph-package/section-2/Studio3.png)
+![Studio3](/public/images/TheGraph-ScaffoldEth2/section-2/2_4_3.png)
 
 #### ✅ Click Create a Subgraph
 
-![](/public/images/The_Graph-SE2-Subgraph-package/section-2/Studio4.png)
+![Studio4](/public/images/TheGraph-ScaffoldEth2/section-2/2_4_4.png)
 
 #### ✅ Name your Subgraph
 
-![](/public/images/The_Graph-SE2-Subgraph-package/section-2/Studio5.png)
-
+![Studio5](/public/images/TheGraph-ScaffoldEth2/section-2/2_4_5.png)