diff --git a/docs/TheGraph-ScaffoldEth2/en/section-0/lesson-1_Course Introduction.md b/docs/TheGraph-ScaffoldEth2/en/section-0/lesson-1_Course Introduction.md new file mode 100644 index 000000000..dbb25d7dc --- /dev/null +++ b/docs/TheGraph-ScaffoldEth2/en/section-0/lesson-1_Course Introduction.md @@ -0,0 +1,79 @@ +## GETTING STARTED + +### 🎉 Course Introduction + +This workshop is built around Scaffold-ETH 2 and The Graph. You will learn how to: + +1. Setup a development environment for your dapp using Scaffold-ETH 2 and The Graph +2. Update and deploy your smart contract +3. Create and deploy a Subgraph to The Graph +4. Edit your frontend to interact with both your smart contract and Subgraph + +### 🏗 What is Scaffold-ETH 2 🏗 + +🧪 An open-source, up-to-date toolkit for building decentralized applications (dapps) on the Ethereum blockchain. It's designed to make it easier for developers to create and deploy smart contracts and build user interfaces that interact with those contracts. + +⚙️ Built using NextJS, RainbowKit, Hardhat, Wagmi, and Typescript. + +- ✅ **Contract Hot Reload**: Your frontend auto-adapts to your smart contract as you edit it. +- 🔥 **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/TheGraph-ScaffoldEth2/section-0/0_1_1.png) + +![](/public/images/TheGraph-ScaffoldEth2/section-0/0_1_2.png) + +![](/public/images/TheGraph-ScaffoldEth2/section-0/L0_1_3.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). + +### 🧑🏼‍🚀 What is The Graph? + +[The Graph](https://thegraph.com/) is a protocol for building decentralized applications (dApps) quickly on Ethereum and IPFS using GraphQL. + +- 🗃️ **Decentralized Indexing**: The Graph enables open APIs ("subgraphs") to efficiently index and organize blockchain data. +- 🔎 **Efficient Querying**: The protocol uses GraphQL for streamlined querying blockchain data. +- 🙌 **Community Ecosystem**: The Graph fosters collaboration by empowering developers to build, deploy, and share subgraphs! + +For detailed instructions and more context, check out the [Getting Started Guide](https://thegraph.com/docs/en/cookbook/quick-start). + +### 🧱 What we are building + +We are building an example smart contract and front end that utilizes The Graph protocol for data storage of event data. + +https://sendmessage-tau.vercel.app + +![](/public/images/TheGraph-ScaffoldEth2/section-0/0_1_5.png) + +### 🌍 Upgrading this project + +This learning content is operated under[UNCHAIN License](https://github.com/unchain-dev/UNCHAIN-projects/blob/main/LICENSE). + +If you're participating in the project and think, 'This could be clearer if done this way!' or 'This is incorrect!', please feel free to send a `pull request`. + +To edit code directly from GitHub and send a `pull request` directly, see [here](https://docs.github.com/en/repositories/working-with-files/managing-files/editing-files#editing-files-in-another-users-repository). + +Any requests are welcome 🎉. + +You can also `Fork` the project to your own GitHub account, edit the contents, and send a `pull request`. + +- See [here](https://docs.github.com/en/get-started/quickstart/fork-a-repo) for instructions on how to `Fork` a project. +- How to create a `pull request` from a `Fork` is [here](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request-from-a-fork). + +**👋 Send a `pull request` to `UNCHAIN-projects`! ⏩ Visit [UNCHAIN's GitHub](https://github.com/unchain-tech/UNCHAIN-projects)!** + +### ⚡️ Create an `Issue` + +If you feel that you want to leave a suggestion but not enough to send a `pull request`, you can create an `Issue` at [here](https://github.com/unchain-tech/UNCHAIN-projects/issues). + +See [here](https://docs.github.com/en/issues/tracking-your-work-with-issues/creating-an-issue) for information on how to create an `Issue`. + +Creating `pull request` and `issues` is an important task when actually developing as a team, so please try it. + +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. diff --git a/docs/TheGraph-ScaffoldEth2/en/section-0/lesson-2_Requirements.md b/docs/TheGraph-ScaffoldEth2/en/section-0/lesson-2_Requirements.md new file mode 100644 index 000000000..a7aa33cb6 --- /dev/null +++ b/docs/TheGraph-ScaffoldEth2/en/section-0/lesson-2_Requirements.md @@ -0,0 +1,11 @@ +## Requirements + +### ✅ What you will need + +Before you begin, you need to install the following tools: + +- [Node.js](https://nodejs.org/en/download/) +- Yarn ([v1](https://classic.yarnpkg.com/en/docs/install/) or [v2+](https://yarnpkg.com/getting-started/install)) +- [Git](https://git-scm.com/downloads) +- [Docker](https://docs.docker.com/get-docker/) + diff --git a/docs/TheGraph-ScaffoldEth2/en/section-0/lesson-3_Setup Scaffold-ETH 2.md b/docs/TheGraph-ScaffoldEth2/en/section-0/lesson-3_Setup Scaffold-ETH 2.md new file mode 100644 index 000000000..b01e7218d --- /dev/null +++ b/docs/TheGraph-ScaffoldEth2/en/section-0/lesson-3_Setup Scaffold-ETH 2.md @@ -0,0 +1,64 @@ +## Setup Scaffold-ETH 2 + +### 🖥️ Setup Subgraph Package + +First, we will start out with a special build of Scaffold-ETH 2 written by Simon from Edge and Node… Thanks Simon! 🫡 + +We will need a total of four different windows to setup Scaffold-ETH 2 and The Graph. + +![](/public/images/TheGraph-ScaffoldEth2/section-0/0_3_1.png) + +``` +git clone -b subgraph-package \ + https://github.com/scaffold-eth/scaffold-eth-2.git \ + scaffold-eth-2-subgraph-package +``` + +Once you have this checked out on your machine, navigate into the directory and install all of the dependencies using yarn. + +``` +cd scaffold-eth-2-subgraph-package && \ + yarn install +``` + +![](/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/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. 🖥️ + +Next we are going to spin up our frontend application. Scaffold-ETH 2 comes with NextJS by default and also can be started with a simple yarn command. You will need to open up a new command line and type the following… + +``` +yarn start +``` + +![](/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. + +Next, you will want to open up a third window where you can deploy your smart contract, along with some other useful commands found in Scaffold-ETH. To do a deploy you can simply run the following… + +``` +yarn deploy +``` + +![](/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. + +Then you can simply navigate to "Debug Contracts", click the string field under setGreeting and type something fun and then click "SEND" + +![](/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. diff --git a/docs/TheGraph-ScaffoldEth2/en/section-0/lesson-4_Setup The Graph.md b/docs/TheGraph-ScaffoldEth2/en/section-0/lesson-4_Setup The Graph.md new file mode 100644 index 000000000..8d32bfe5f --- /dev/null +++ b/docs/TheGraph-ScaffoldEth2/en/section-0/lesson-4_Setup The Graph.md @@ -0,0 +1,23 @@ +## Setup The Graph (Docker) + +### 🚀 Setup The Graph Integration + +Now that we have spun up our blockchain, started our frontend application and deployed our smart contract, we can start setting up our subgraph and utilize The Graph! + +First run the following to clean up any old data. Do this if you need to reset everything. + +``` +yarn clean-node +``` + +> We can now spin up a graph node by running the following command… 🧑‍🚀 + +``` +yarn run-node +``` + +![](/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. 🔎 diff --git a/docs/TheGraph-ScaffoldEth2/en/section-0/lesson-5_Deploy to localhost.md b/docs/TheGraph-ScaffoldEth2/en/section-0/lesson-5_Deploy to localhost.md new file mode 100644 index 000000000..78e34d726 --- /dev/null +++ b/docs/TheGraph-ScaffoldEth2/en/section-0/lesson-5_Deploy to localhost.md @@ -0,0 +1,52 @@ +## Deploy + +### ✅ 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! + +> Note: You will only need to do this once. + +``` +yarn local-create +``` + +![](/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. + +Next we will ship our subgraph! You will need to give your subgraph a version after executing this command. (e.g. 0.0.1). + +``` +yarn local-ship +``` + +![](/public/images/TheGraph-ScaffoldEth2/section-0/0_5_2.png) + +> This command does the following all in one… 🚀🚀🚀 + +- Copies the contracts ABI from the hardhat/deployments folder +- Generates the networks.json file +- Generates AssemblyScript types from the subgraph schema and the contract ABIs. +- Compiles and checks the mapping functions. +- … and deploy a local subgraph! + +> If you get an error ts-node you can install it with the following command + +``` +npm install -g ts-node +``` + +If your subgraph deployment was successful it will look something like this: + +![](/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. + +``` +Build completed: QmYdGWsVSUYTd1dJnqn84kJkDggc2GD9RZWK5xLVEMB9iP + +Deployed to http://localhost:8000/subgraphs/name/scaffold-eth/your-contract/graphql + +Subgraph endpoints: +Queries (HTTP): http://localhost:8000/subgraphs/name/scaffold-eth/your-contract +``` diff --git a/docs/TheGraph-ScaffoldEth2/en/section-0/lesson-6_Test.md b/docs/TheGraph-ScaffoldEth2/en/section-0/lesson-6_Test.md new file mode 100644 index 000000000..aeec06e32 --- /dev/null +++ b/docs/TheGraph-ScaffoldEth2/en/section-0/lesson-6_Test.md @@ -0,0 +1,29 @@ +## Test + +### ✅ Test your Subgraph + +Go ahead and head over to your subgraph endpoint and take a look! + +> Here is an example query… + +``` + { + greetings(first: 25, orderBy: createdAt, orderDirection: desc) { + id + greeting + premium + value + createdAt + sender { + address + greetingCount + } + } + } +``` + +![](/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. 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/docs/TheGraph-ScaffoldEth2/en/section-1/lesson-1_Adding an event.md b/docs/TheGraph-ScaffoldEth2/en/section-1/lesson-1_Adding an event.md new file mode 100644 index 000000000..0200d837e --- /dev/null +++ b/docs/TheGraph-ScaffoldEth2/en/section-1/lesson-1_Adding an event.md @@ -0,0 +1,41 @@ +## Adding an event + +### 🧑🏼‍💻 Adding more events / Subgraph updates 👩🏽‍💻 + +Now we want to start making some changes to our contract. We will create a new function and a new event for that function. + +#### ✅ Add an event to our contract + +> Open up YourContract.sol under packages/hardhat/contracts + +Add the following new line of code. + +``` + event SendMessage(address _from, address _to, string message); + + function sendMessage(address _to, string calldata message) external { + emit SendMessage(msg.sender, _to, message); + } +``` + +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/TheGraph-ScaffoldEth2/section-1/1_1_1.png) + +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. + +``` +yarn deploy --reset +``` + +You should see the following output: + +![](/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. + +![](/public/images/TheGraph-ScaffoldEth2/section-1/1_1_3.png) diff --git a/docs/TheGraph-ScaffoldEth2/en/section-1/lesson-2_Updating your subgraph.md b/docs/TheGraph-ScaffoldEth2/en/section-1/lesson-2_Updating your subgraph.md new file mode 100644 index 000000000..b12776238 --- /dev/null +++ b/docs/TheGraph-ScaffoldEth2/en/section-1/lesson-2_Updating your subgraph.md @@ -0,0 +1,127 @@ +## Updating your subgraph + +### ✅ 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](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. + +> The schema file is located in packages/subgraph/src/schema.graphql + +``` +type GreetingChange @entity(immutable: true) { + id: Bytes! + greetingSetter: Bytes! # address + newGreeting: String! # string + premium: Boolean! # bool + value: BigInt! # uint256 + blockNumber: BigInt! + blockTimestamp: BigInt! + transactionHash: Bytes! +} + +type SendMessage @entity(immutable: true) { + id: Bytes! + _from: Bytes! # address + _to: Bytes! # address + message: String! # string + blockNumber: BigInt! + blockTimestamp: BigInt! + transactionHash: Bytes! +} + +``` + +![](/public/images/TheGraph-ScaffoldEth2/section-1/1_2_1.png) + +#### ✅ Update the Subgraph manifest + +You will also need to add these entities to the Subgraph YAML configuration and also add the event handlers as well. + +> This file is located in packages/subgraph/subgraph.yaml + +``` +entities: + - GreetingChange + - SendMessage +``` + +``` + eventHandlers: + - event: GreetingChange(indexed address,string,bool,uint256) + handler: handleGreetingChange + - event: SendMessage(address,address,string) + handler: handleSendMessage +``` + +![](/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/TheGraph-ScaffoldEth2/section-1/1_2_3.png) + +#### ✅ Update the mapping script + +Next you will need to update the mappings for the files we have edited above. + +> The file is located under packages/subgraph/src/mapping.ts + +``` +import { + YourContract, + GreetingChange as GreetingChangeEvent, + SendMessage as SendMessageEvent +} from "../generated/YourContract/YourContract"; +``` + +As well as the schema. + +``` +import { GreetingChange, SendMessage } from "../generated/schema" +``` + +Lastly, we will need to add the mapping functions for each event. + +``` +export function handleGreetingChange(event: GreetingChangeEvent): void { + let entity = new GreetingChange( + event.transaction.hash.concatI32(event.logIndex.toI32()) + ) + entity.greetingSetter = event.params.greetingSetter + entity.newGreeting = event.params.newGreeting + entity.premium = event.params.premium + entity.value = event.params.value + + entity.blockNumber = event.block.number + entity.blockTimestamp = event.block.timestamp + entity.transactionHash = event.transaction.hash + + entity.save() +} + +export function handleSendMessage(event: SendMessageEvent): void { + let entity = new SendMessage( + event.transaction.hash.concatI32(event.logIndex.toI32()) + ) + entity._from = event.params._from + entity._to = event.params._to + entity.message = event.params.message + + entity.blockNumber = event.block.number + entity.blockTimestamp = event.block.timestamp + entity.transactionHash = event.transaction.hash + + entity.save() +} + +``` + +Your changes should be accepted inside of your editor without any linting errors. + +![](/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/docs/TheGraph-ScaffoldEth2/en/section-1/lesson-3_Deploy.md b/docs/TheGraph-ScaffoldEth2/en/section-1/lesson-3_Deploy.md new file mode 100644 index 000000000..55870199b --- /dev/null +++ b/docs/TheGraph-ScaffoldEth2/en/section-1/lesson-3_Deploy.md @@ -0,0 +1,13 @@ +## Deploy your subgraph + +### ✅ Ship your updated Subgraph + +``` +yarn local-ship +``` + +![](/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. diff --git a/docs/TheGraph-ScaffoldEth2/en/section-1/lesson-4_Test.md b/docs/TheGraph-ScaffoldEth2/en/section-1/lesson-4_Test.md new file mode 100644 index 000000000..860969f1c --- /dev/null +++ b/docs/TheGraph-ScaffoldEth2/en/section-1/lesson-4_Test.md @@ -0,0 +1,21 @@ +## Test + +### ✅ Test your newly deployed Subgraph + +Next, lets see if our data is in The Graph. Here is an example query that shows us the first message. + +``` +{ + sendMessages(first: 1, orderBy: blockTimestamp, orderDirection: desc) { + message + _from + _to + } +} +``` + +You should get a nice response like this: + +![](/public/images/TheGraph-ScaffoldEth2/section-1/1_4_1.png) + +Data is such a beautiful thing huh? diff --git a/docs/TheGraph-ScaffoldEth2/en/section-2/lesson-1_Install Metamask.md b/docs/TheGraph-ScaffoldEth2/en/section-2/lesson-1_Install Metamask.md new file mode 100644 index 000000000..e236e6c95 --- /dev/null +++ b/docs/TheGraph-ScaffoldEth2/en/section-2/lesson-1_Install Metamask.md @@ -0,0 +1,7 @@ +## Install Metamask + +### Install MetaMask + +When we deploy a smart contract to the blockchain or interact with a deployed smart contract, we need to pay for gas. Therefore, we need a Web3 wallet, such as MetaMask. Click here to install MetaMask.[here](https://metamask.io/) + +You will also want to get some testnet ETH, so that you can deploy your contract to a testnet later in this tutorial. \ No newline at end of file diff --git a/docs/TheGraph-ScaffoldEth2/en/section-2/lesson-2_Deployer account creation.md b/docs/TheGraph-ScaffoldEth2/en/section-2/lesson-2_Deployer account creation.md new file mode 100644 index 000000000..eb7c0bcea --- /dev/null +++ b/docs/TheGraph-ScaffoldEth2/en/section-2/lesson-2_Deployer account creation.md @@ -0,0 +1,65 @@ +## Deployer account + +### ⛵ Ship to a testnet + +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: + +[Ethereum Sepolia Faucet - Alchemy](https://sepoliafaucet.com/) + +#### ✅ Create a deployer account + +``` +yarn run generate +``` + +![](/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 +``` + +#### ✅ Fund the account + +``` +yarn account +``` + +![](/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 + +-- localhost -- 📡 + balance: 0 + nonce: 0 + +``` + +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/TheGraph-ScaffoldEth2/section-2/2_2_3.png) diff --git a/docs/TheGraph-ScaffoldEth2/en/section-2/lesson-3_Deploy and verify.md b/docs/TheGraph-ScaffoldEth2/en/section-2/lesson-3_Deploy and verify.md new file mode 100644 index 000000000..efbd4412e --- /dev/null +++ b/docs/TheGraph-ScaffoldEth2/en/section-2/lesson-3_Deploy and verify.md @@ -0,0 +1,36 @@ +## Deploy and verify + +### ✅ Deploy! + +Now we can deploy to our testnet of choice... in this example we will deploy to sepolia. + +``` +yarn deploy --network sepolia +``` + +![](/public/images/TheGraph-ScaffoldEth2/section-2/2_3_1.png) + +If all is well you should see the following success output. + +``` +deploying "YourContract" (tx: 0xf404021d736271a7a0a84d124ed35250c533efe37c1775367b6510a8836bf0bd)...: deployed at 0x541D469C06990B7F0bd5103b57997cE8a39C050c with 605281 gas +📝 Updated TypeScript contract definition file on ../nextjs/generated/deployedContracts.ts +``` + +#### ✅ Verification + +``` +yarn verify --network sepolia +``` + +![](/public/images/TheGraph-ScaffoldEth2/section-2/2_3_2.png) + +You should see the following successful output... + +``` +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. diff --git a/docs/TheGraph-ScaffoldEth2/en/section-2/lesson-4_Subgraph Studio.md b/docs/TheGraph-ScaffoldEth2/en/section-2/lesson-4_Subgraph Studio.md new file mode 100644 index 000000000..fd1cb4ced --- /dev/null +++ b/docs/TheGraph-ScaffoldEth2/en/section-2/lesson-4_Subgraph Studio.md @@ -0,0 +1,25 @@ +## Subgraph studio + +### Migrating you Subgraph to the Studio + +Now that our smart contract is on a public testnet it is time to push our Subgraph to the Studio. + +#### ✅ Navigate to https://thegraph.com/studio + +![Studio1](/public/images/TheGraph-ScaffoldEth2/section-2/2_4_1.png) + +#### ✅ Connect your wallet + +![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. + +![Studio3](/public/images/TheGraph-ScaffoldEth2/section-2/2_4_3.png) + +#### ✅ Click Create a Subgraph + +![Studio4](/public/images/TheGraph-ScaffoldEth2/section-2/2_4_4.png) + +#### ✅ Name your Subgraph + +![Studio5](/public/images/TheGraph-ScaffoldEth2/section-2/2_4_5.png) diff --git a/docs/TheGraph-ScaffoldEth2/en/section-2/lesson-5_Graph CLI.md b/docs/TheGraph-ScaffoldEth2/en/section-2/lesson-5_Graph CLI.md new file mode 100644 index 000000000..4125d116f --- /dev/null +++ b/docs/TheGraph-ScaffoldEth2/en/section-2/lesson-5_Graph CLI.md @@ -0,0 +1,104 @@ +## Graph CLI + +### ✅ Deploy your subgraph using the CLI + +#### ✅ Use the Graph CLI to complete the deployment + +![Studio6](/public/images/TheGraph-ScaffoldEth2/section-2/2_5_1.png) + +You can install the Graph CLI globally using the following command. + +``` +curl -LS https://cli.thegraph.com/install.sh | sudo sh +``` + +![](/public/images/TheGraph-ScaffoldEth2/section-2/2_5_2.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. + +``` +graph init --studio name_of_your_subgraph +``` + +It should looks something like this... + +![](/public/images/TheGraph-ScaffoldEth2/section-2/2_5_3.png) + +#### ✅ Authenticate to Studio + +Grab your authentication string from Auth & Deploy on Subgraph Studio. + +``` +graph auth --studio auth_key_here +``` + +Success looks like this: + +``` +Deploy key set for https://api.studio.thegraph.com/deploy/ +``` + +#### ✅ Run codegen and build your subgraph + +You will need to change into the directory where the subgraph was created in the previous step. + +``` +cd sendmessage +graph codegen && graph build +``` + +Success will look something like the following! + +![](/public/images/TheGraph-ScaffoldEth2/section-2/2_5_4.png) + +#### ✅ Deploy + +Now we are ready to deploy to the Studio + +``` +graph deploy --studio name_of_your_subgraph +``` + +Choose a version and fire away! + +![](/public/images/TheGraph-ScaffoldEth2/section-2/2_5_5.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. + +![Studio7](/public/images/TheGraph-ScaffoldEth2/section-2/2_5_6.png) + +#### ✅ Send a transaction and verify in Subgraph Playground + +On Etherscan you can send a transaction directly to your contract on the Contract -> Write Contract tab. + +Our Query: + +``` +{ + sendMessages(first: 5) { + id + _from + _to + message + } +} +``` + +Our data object response: + +``` +{ + "data": { + "sendMessages": [ + { + "id": "0x053e32f85f9f485334119585abfc73e507a4ce86e968130b90410df70eb3a66e71000000", + "_from": "0x142cd5d7ac1ea8919f1644af1870792b9f77d44a", + "_to": "0x007e483cf6df009db5ec571270b454764d954d95", + "message": "I love you" + } + ] + } +} +``` diff --git a/docs/TheGraph-ScaffoldEth2/en/section-2/lesson-6_Frontend.md b/docs/TheGraph-ScaffoldEth2/en/section-2/lesson-6_Frontend.md new file mode 100644 index 000000000..a7f1f1405 --- /dev/null +++ b/docs/TheGraph-ScaffoldEth2/en/section-2/lesson-6_Frontend.md @@ -0,0 +1,174 @@ +## Frontend + +### Updating and deploying our Frontend + +Now that we have our contract deployed to a testnet and the data is getting indexed in Subgraph Studio. It is time to update our frontend. + +#### ✅ Step 1: Update the Scaffold-ETH config + +Update the configuration to point to the testnet that you deployed to in previous steps. + +> The scaffold.config.ts is located in packages/nextjs + +``` + targetNetwork: chains.sepolia, +``` + +It should look like this when changed: + +![](/public/images/TheGraph-ScaffoldEth2/section-2/2_6_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. + +Click "CONNECT WALLET"... + +![](/public/images/TheGraph-ScaffoldEth2/section-2/2_6_2.png) + +Choose Metamask... + +![](/public/images/TheGraph-ScaffoldEth2/section-2/2_6_3.png) + +Switch the network... + +![](/public/images/TheGraph-ScaffoldEth2/section-2/2_6_4.png) + +![](/public/images/TheGraph-ScaffoldEth2/section-2/2_6_5.png) + +Once complete you should now be connected to your dapp on sepolia network. + +![](/public/images/TheGraph-ScaffoldEth2/section-2/2_6_6.png) + +#### ✅ Fire off a test message to someone you know! (or Vitalik heh) + +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/TheGraph-ScaffoldEth2/section-2/2_6_7.png) + +![](/public/images/TheGraph-ScaffoldEth2/section-2/2_6_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/TheGraph-ScaffoldEth2/section-2/2_6_9.png) + +#### ✅ Update our GraphQL URL to point to our development endpoint + +The development endpoint for your subgraph can be found on the details tab in Subgraph Studio. + +> Edit \_app.tsx located in packages/nextjs/pages + +``` + const subgraphUri = "https://api.studio.thegraph.com/query/51078/sendmessage-test/version/latest"; + const apolloClient = new ApolloClient({ + uri: subgraphUri, + cache: new InMemoryCache(), + }); +``` + +The change will look something like this: + +![](/public/images/TheGraph-ScaffoldEth2/section-2/2_6_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. + +> this file is located in packages/nextjs/pages + +It should look something like this... + +``` +import type { NextPage } from "next"; +import { MetaHeader } from "~~/components/MetaHeader"; + +import { gql } from "@apollo/client"; +import { useQuery } from "@apollo/client"; + +const Home: NextPage = () => { + return ( + <> + + + ); +}; + +export default Home; +``` + +After your change the home directory will look something like this: + +![](/public/images/TheGraph-ScaffoldEth2/section-2/2_6_11.png) + +#### ✅ Display our messages in a table format + +Lastly a table to display our messages. + +``` +

Messages

+ + + + + + + + + + {messages.map((message) => ( + + + + + + ))} + +
FromToMessage
{message._from}{message._to}{message.message}
+``` + +We should create a const with our GraphQL query outside of the main function. + +``` +export const GET_MESSAGES = gql` +{ + sendMessages(first: 5) { + id + _from + _to + message + } +} +`; +``` + +And then load the data like so... + +``` + const { loading, error, data: messagesData } = useQuery(GET_MESSAGES); + + const messages = messagesData?.sendMessages || []; +``` + +![](/public/images/TheGraph-ScaffoldEth2/section-2/2_6_13.png) + +We can then make this a bit prettier and use the `
` component instead of just plain text. + +First, import the Address component. + +``` +import { Address } from "~~/components/scaffold-eth"; +``` + +Then, update the table to display the message as follows. + +``` + +
+
+ {message.message} + +``` + +This will look a lot nicer than those long strings! :D + +![](/public/images/TheGraph-ScaffoldEth2/section-2/2_6_14.png) + +> Note: If you want to see the full complete file you can do so [here](https://gist.github.com/kmjones1979/26ef9633b61b17f237e88eb41bb688de)! diff --git a/docs/TheGraph-ScaffoldEth2/en/section-2/lesson-7_Ship your frontend.md b/docs/TheGraph-ScaffoldEth2/en/section-2/lesson-7_Ship your frontend.md new file mode 100644 index 000000000..37b94f2ad --- /dev/null +++ b/docs/TheGraph-ScaffoldEth2/en/section-2/lesson-7_Ship your frontend.md @@ -0,0 +1,37 @@ +## Ship + +### ✅ YOLO Vercel! + +Last step is to push our frontend to vercel! This is easy with the following command, which essential skips build errors with the following command line switches 'vercel --build-env NEXT_PUBLIC_IGNORE_BUILD_ERROR=true' + +This might take some time, so grab a coffee. ☕ + +``` +yarn vercel:yolo +``` + +You should see the following prompts. + +``` +Vercel CLI 28.20.0 +? Set up and deploy “~/projects/ethereum/scaffold-eth-2-subgraph-package-workshop/packages/nextjs”? [Y/n] +y +? Which scope do you want to deploy to? myscope +? Link to existing project? [y/N] n +? What’s your project’s name? sendmessage +? In which directory is your code located? ./ +Local settings detected in vercel.json: +Auto-detected Project Settings (Next.js): +- Build Command: next build +- Development Command: next dev --port $PORT +- Install Command: `yarn install`, `pnpm install`, or `npm install` +- Output Directory: Next.js default +? Want to modify these settings? [y/N] n +🔗 Linked to kevin-kevinjonescr/testing (created .vercel) +🔍 Inspect: https://vercel.com/kevin-kevinjonescr/testing/E2rfnyzC4ud5DskrwhybQ4Hiicjx [2s] +✅ 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! \ No newline at end of file diff --git "a/docs/TheGraph-ScaffoldEth2/ja/section-0/lesson-1_\343\202\263\343\203\274\343\202\271\343\201\256\347\264\271\344\273\213.md" "b/docs/TheGraph-ScaffoldEth2/ja/section-0/lesson-1_\343\202\263\343\203\274\343\202\271\343\201\256\347\264\271\344\273\213.md" new file mode 100644 index 000000000..3153ed171 --- /dev/null +++ "b/docs/TheGraph-ScaffoldEth2/ja/section-0/lesson-1_\343\202\263\343\203\274\343\202\271\343\201\256\347\264\271\344\273\213.md" @@ -0,0 +1,79 @@ +## はじめに + +### 🎉 コースの紹介 + +このワークショップは、Scaffold-ETH 2とThe Graphを中心に構築されています。以下の内容を学びます: + +1. Scaffold-ETH 2とThe Graphを使用して、dappの開発環境をセットアップする方法 +2. スマートコントラクトの更新とデプロイをする方法 +3. The Graphにサブグラフを作成してデプロイする方法 +4. フロントエンドを編集して、スマートコントラクトとサブグラフの両方とやり取りする方法 + +### 🏗 Scaffold-ETH 2 とは 🏗 + +🧪 イーサリアムブロックチェーン上で分散型アプリケーション(dApps)を構築するためのオープンソースの最新ツールキットです。開発者にとって、スマートコントラクトの作成・デプロイ、およびそれらのコントラクトとやり取りを行うユーザーインタフェースの構築がより簡単に行えることを目的としています。 + +⚙️ NextJS、RainbowKit、Hardhat、Wagmi、Typescriptを使用して構築されています。 + +- ✅ **コントラクトのホットリロード**: スマートコントラクトを編集すると、フロントエンドが自動的にそれに適応します。 +- 🔥 **バーナーウォレット&ローカルフォーセット**: バーナーウォレットとローカルフォーセットを使用して、アプリケーションを素早くテストします。 +- 🔐 **ウォレットプロバイダーとの統合**: 異なるウォレットプロバイダーに接続し、Ethereumネットワークとやり取りします。 + +![](/public/images/TheGraph-ScaffoldEth2/section-0/0_1_1.png) + +![](/public/images/TheGraph-ScaffoldEth2/section-0/0_1_2.png) + +![](/public/images/TheGraph-ScaffoldEth2/section-0/L0_1_3.png) + +![](/public/images/TheGraph-ScaffoldEth2/section-0/0_1_4.png) + +Scaffold-ETHについてもっと知りたい場合は、[Github リポジトリ](https://github.com/scaffold-eth/scaffold-eth-2) や [Scaffoldeth.io](https://scaffoldeth.io) をご覧ください。 + +### 🧑🏼‍🚀 The Graph とは? + +[The Graph](https://thegraph.com/) は、GraphQLを使用してEthereumとIPFS上でdAppを素早く構築するためのプロトコルです。 + +- 🗃️ **分散型インデックス作成**: The Graphは、効率的にブロックチェーンデータをインデックス化・整理するためのオープンAPI(「サブグラフ」)を可能にします。 +- 🔎 **効率的なクエリ**: プロトコルは、GraphQLを使用してブロックチェーンデータを効率的にクエリできます。 +- 🙌 **コミュニティエコシステム**: The Graphは、開発者がサブグラフを構築・デプロイ・共有できることで、コラボレーションを促進します! + +詳しい手順と背景については、[Getting Started Guide](https://thegraph.com/docs/en/cookbook/quick-start) をご覧ください。 + +### 🧱 何を構築するのか + +イベントデータのデータストレージにThe Graphプロトコルを利用するスマートコントラクトとフロントエンドを構築します。 + +https://sendmessage-tau.vercel.app + +![](/public/images/TheGraph-ScaffoldEth2/section-0/0_1_5.png) + +### 🌍 プロジェクトをアップグレードする + +この学習コンテンツは、[UNCHAIN License](https://github.com/unchain-dev/UNCHAIN-projects/blob/main/LICENSE) のもとで運用されています。 + +プロジェクトに参加していて、「こうすればもっと分かりやすいのに!」「これは間違っている!」と思ったら、ぜひ`pull request`を送ってください。 + +GitHubから直接コードを編集して直接`pull request`を送る方法は、[こちら](https://docs.github.com/ja/repositories/working-with-files/managing-files/editing-files#editing-files-in-another-users-repository)を参照してください。 + +どんなリクエストでも大歓迎です 🎉 + +また、プロジェクトを自分のGitHubアカウントに`Fork`して、中身を編集してから`pull request`を送ることもできます。 + +- プロジェクトを`Fork`する方法は、[こちら](https://docs.github.com/ja/get-started/quickstart/fork-a-repo) を参照してください。 +- `Fork`から`pull request`を作成する方法は、[こちら](https://docs.github.com/ja/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request-from-a-fork) です。 + +**👋 `UNCHAIN-projects`に`pull request`を送る! ⏩ [UNCHAIN の GitHub](https://github.com/shiftbase-xyz/UNCHAIN-projects) にアクセス!** + +### ⚡️ `Issue`を作成する + +`pull request`送るほどでもないけど、提案を残したい! と思ったら、[こちら](https://github.com/unchain-tech/UNCHAIN-projects/issues) に`Issue`を作成してみましょう。 + +`Issue`の作成方法に関しては、[こちら](https://docs.github.com/ja/issues/tracking-your-work-with-issues/creating-an-issue)を参照してください。 + +`pull request`や`issue`の作成は、実際にチームで開発を行う際に重要な作業になるので、ぜひトライしてみてください。 + +UNCHAINのプロジェクトをみんなでより良いものにしていきましょう ✨ + +### 🙋‍♂️ 質問する + +ここまで何かわからないことがある場合は、Discordの`#thegraph`で質問をしてください。 diff --git "a/docs/TheGraph-ScaffoldEth2/ja/section-0/lesson-2_\345\277\205\350\246\201\346\235\241\344\273\266.md" "b/docs/TheGraph-ScaffoldEth2/ja/section-0/lesson-2_\345\277\205\350\246\201\346\235\241\344\273\266.md" new file mode 100644 index 000000000..fe45953b7 --- /dev/null +++ "b/docs/TheGraph-ScaffoldEth2/ja/section-0/lesson-2_\345\277\205\350\246\201\346\235\241\344\273\266.md" @@ -0,0 +1,11 @@ +## 必要条件 + +### ✅ 必要なもの + +始める前に、以下のツールをインストールする必要があります: + +- [Node.js](https://nodejs.org/en/download/) +- Yarn ([v1](https://classic.yarnpkg.com/en/docs/install/) または [v2+](https://yarnpkg.com/getting-started/install)) +- [Git](https://git-scm.com/downloads) +- [Docker](https://docs.docker.com/get-docker/) + diff --git "a/docs/TheGraph-ScaffoldEth2/ja/section-0/lesson-3_Scaffold-ETH 2\343\201\256\343\202\273\343\203\203\343\203\210\343\202\242\343\203\203\343\203\227.md" "b/docs/TheGraph-ScaffoldEth2/ja/section-0/lesson-3_Scaffold-ETH 2\343\201\256\343\202\273\343\203\203\343\203\210\343\202\242\343\203\203\343\203\227.md" new file mode 100644 index 000000000..f549879b9 --- /dev/null +++ "b/docs/TheGraph-ScaffoldEth2/ja/section-0/lesson-3_Scaffold-ETH 2\343\201\256\343\202\273\343\203\203\343\203\210\343\202\242\343\203\203\343\203\227.md" @@ -0,0 +1,64 @@ +## Scaffold-ETH 2 のセットアップ + +### 🖥️ サブグラフパッケージのセットアップ + +まず、Edge and NodeのSimonが作成したScaffold-ETH 2の特別なビルドを使って始めましょう。ありがとう、Simon! 🫡 + +Scaffold-ETH 2とThe Graphをセットアップするために、合計4つの異なるウィンドウが必要になります。 + +![](/public/images/TheGraph-ScaffoldEth2/section-0/0_3_1.png) + +``` +git clone -b subgraph-package \ + https://github.com/scaffold-eth/scaffold-eth-2.git \ + scaffold-eth-2-subgraph-package +``` + +これをあなたのマシンにチェックアウトしたら、ディレクトリに移動し、yarnを使用してすべての依存関係をインストールします。 + +``` +cd scaffold-eth-2-subgraph-package && \ + yarn install +``` + +![](/public/images/TheGraph-ScaffoldEth2/section-0/0_3_2.png) + +次に、スマートコントラクトをデプロイしてテストするために、ローカルブロックチェーンを起動する必要があります。Scaffold-ETH 2はデフォルトでHardhatを使用しています。チェーンを起動するには、次のyarnコマンドを入力します。 + +``` +yarn chain +``` + +![](/public/images/TheGraph-ScaffoldEth2/section-0/0_3_3.png) + +> このウィンドウを開いたままにしておくと、hardhat コンソールからの出力を確認できます。🖥️ + +次に、フロントエンドアプリケーションを起動します。Scaffold-ETH 2はデフォルトでNextJSを使用しており、単純なyarnコマンドで起動することもできます。新しいコマンドラインを開き、次のコマンドを入力します。 + +``` +yarn start +``` + +![](/public/images/TheGraph-ScaffoldEth2/section-0/0_3_4.png) + +> このウィンドウも常に開いておくと、NextJS に加えたコード変更のデバッグ、パフォーマンスのチェック、またはサーバーが適切に動作しているかを確認できます。 + +次に、スマートコントラクトをデプロイするための第三のウィンドウを開きます。Scaffold-ETHには他にも便利なコマンドがあります。デプロイを行うには、単に以下を実行します… + +``` +yarn deploy +``` + +![](/public/images/TheGraph-ScaffoldEth2/section-0/0_3_5.png) + +> デプロイにかかったガスの量と共に、トランザクションとアドレスが表示されるはずです。⛽ + +http://localhost:3000 にアクセスすると、NextJSアプリケーションが表示されます。Scaffold-ETH 2のメニューや機能を探索してみましょう! 緊急事態ですね、これはすごい! 🔥 + +setGreeting関数にアップデートを送信してテストすることができます。これを行うには、右上のバーナーウォレットアドレスの隣にある現金アイコンをクリックしてガスを入手する必要があります。これにより、フォーセットから1 ETHが送られます。 + +次に、「Debug Contracts」に移動し、setGreetingの下の文字列フィールドをクリックしてお好きな文字を入力し、「SEND」をクリックします。 + +![](/public/images/TheGraph-ScaffoldEth2/section-0/0_3_6.png) + +これが完了すると、成功したことを確認するために展開できるTransaction Receiptが表示されます。 diff --git "a/docs/TheGraph-ScaffoldEth2/ja/section-0/lesson-4_The Graph\343\201\256\343\202\273\343\203\203\343\203\210\343\202\242\343\203\203\343\203\227.md" "b/docs/TheGraph-ScaffoldEth2/ja/section-0/lesson-4_The Graph\343\201\256\343\202\273\343\203\203\343\203\210\343\202\242\343\203\203\343\203\227.md" new file mode 100644 index 000000000..17eb27064 --- /dev/null +++ "b/docs/TheGraph-ScaffoldEth2/ja/section-0/lesson-4_The Graph\343\201\256\343\202\273\343\203\203\343\203\210\343\202\242\343\203\203\343\203\227.md" @@ -0,0 +1,23 @@ +## The Graph のセットアップ(Docker) + +### 🚀 The Graph 統合のセットアップ + +ブロックチェーンを起動し、フロントエンドアプリケーションを始動し、スマートコントラクトをデプロイしたので、次はサブグラフを設定し、The Graphを利用しましょう! + +まず、古いデータをクリアするために以下のコマンドを実行します。すべてをリセットしたい場合にこれを行ってください。 + +``` +yarn clean-node +``` + +> これでグラフノードを起動する準備ができました。以下のコマンドを実行しましょう… 🧑‍🚀 + +``` +yarn run-node +``` + +![](/public/images/TheGraph-ScaffoldEth2/section-0/0_4_1.png) + +これにより、docker-composeを使用してThe Graphのすべてのコンテナが起動します。"Downloading latest blocks from Ethereum..."と表示されたら、完了です。 + +> 前述の通り、Docker からのログ出力を確認するためにこのウィンドウを開いたままにしておいてください。🔎 diff --git "a/docs/TheGraph-ScaffoldEth2/ja/section-0/lesson-5_\343\203\255\343\203\274\343\202\253\343\203\253\343\203\233\343\202\271\343\203\210\343\201\253\343\203\207\343\203\227\343\203\255\343\202\244\343\201\231\343\202\213.md" "b/docs/TheGraph-ScaffoldEth2/ja/section-0/lesson-5_\343\203\255\343\203\274\343\202\253\343\203\253\343\203\233\343\202\271\343\203\210\343\201\253\343\203\207\343\203\227\343\203\255\343\202\244\343\201\231\343\202\213.md" new file mode 100644 index 000000000..54f745fb7 --- /dev/null +++ "b/docs/TheGraph-ScaffoldEth2/ja/section-0/lesson-5_\343\203\255\343\203\274\343\202\253\343\203\253\343\203\233\343\202\271\343\203\210\343\201\253\343\203\207\343\203\227\343\203\255\343\202\244\343\201\231\343\202\213.md" @@ -0,0 +1,52 @@ +## デプロイ + +### ✅ サブグラフの作成と公開 + +これで、The Graphの設定を完了するために、第4のウィンドウを開くことができます。😅 この4番目のウィンドウでは、ローカルサブグラフを作成します! + +> 注意:これは一度だけ行う必要があります。 + +``` +yarn local-create +``` + +![](/public/images/The_Graph-SE2-Subgraph-package/section-0/0_5_1.png) + +> サブグラフが作成されたことを示す出力と、docker内のgraph-nodeでのログ出力が表示されるはずです。 + +次に、サブグラフを公開します! このコマンドを実行すると、サブグラフにバージョンを付ける必要があります(例:0.0.1)。 + +``` +yarn local-ship +``` + +![](/public/images/The_Graph-SE2-Subgraph-package/section-0/0_5_2.png) + +> このコマンドは、以下のことを一度に行います... 🚀🚀🚀 + +- hardhat/deploymentsフォルダからコントラクトのABIをコピーします +- networks.jsonファイルを生成します +- サブグラフスキーマとコントラクトABIからAssemblyScriptタイプを生成します +- マッピング関数をコンパイルしてチェックします +- ...そして、ローカルサブグラフをデプロイします! + +> ts-nodeのエラーが発生した場合は、次のコマンドでインストールできます。 + +``` +npm install -g ts-node +``` + +サブグラフのデプロイが成功すると、以下のようになります: + +![](/public/images/The_Graph-SE2-Subgraph-package/section-0/0_5_3.png) + +ビルドが完了し、サブグラフのエンドポイントアドレスが表示されます。 + +``` +Build completed: QmYdGWsVSUYTd1dJnqn84kJkDggc2GD9RZWK5xLVEMB9iP + +Deployed to http://localhost:8000/subgraphs/name/scaffold-eth/your-contract/graphql + +Subgraph endpoints: +Queries (HTTP): http://localhost:8000/subgraphs/name/scaffold-eth/your-contract +``` \ No newline at end of file diff --git "a/docs/TheGraph-ScaffoldEth2/ja/section-0/lesson-6_\343\203\206\343\202\271\343\203\210.md" "b/docs/TheGraph-ScaffoldEth2/ja/section-0/lesson-6_\343\203\206\343\202\271\343\203\210.md" new file mode 100644 index 000000000..573a18954 --- /dev/null +++ "b/docs/TheGraph-ScaffoldEth2/ja/section-0/lesson-6_\343\203\206\343\202\271\343\203\210.md" @@ -0,0 +1,29 @@ +## テスト + +### ✅ サブグラフのテスト + +サブグラフのエンドポイントに移動し、確認してみましょう! + +> 以下はクエリの例です... + +``` + { + greetings(first: 25, orderBy: createdAt, orderDirection: desc) { + id + greeting + premium + value + createdAt + sender { + address + greetingCount + } + } + } +``` + +![](/public/images/TheGraph-ScaffoldEth2/section-0/0_6_1.png) + +> すべてがうまくいっていて、スマートコントラクトにトランザクションを送信した場合は、同様のデータ出力が表示されるはずです! + +次に、The Graphがどのように機能するかをもう少し詳しく説明します。これにより、スマートコントラクトにイベントを追加する際に、フロントエンドアプリケーションに必要なデータのインデックス作成や解析ができるようになります。 diff --git "a/docs/TheGraph-ScaffoldEth2/ja/section-1/lesson-1_\343\202\244\343\203\231\343\203\263\343\203\210\343\201\256\350\277\275\345\212\240.md" "b/docs/TheGraph-ScaffoldEth2/ja/section-1/lesson-1_\343\202\244\343\203\231\343\203\263\343\203\210\343\201\256\350\277\275\345\212\240.md" new file mode 100644 index 000000000..37d659517 --- /dev/null +++ "b/docs/TheGraph-ScaffoldEth2/ja/section-1/lesson-1_\343\202\244\343\203\231\343\203\263\343\203\210\343\201\256\350\277\275\345\212\240.md" @@ -0,0 +1,41 @@ +## イベントの追加 + +### 🧑🏼‍💻 さらなるイベントの追加・サブグラフの更新 👩🏽‍💻 + +それでは、コントラクトに変更を加えましょう。新しい関数と、その関数のためのイベントを作成します。 + +#### ✅ コントラクトにイベントを追加する + +> packages/hardhat/contracts の YourContract.sol を開きます。 + +以下の新しいコード行を追加します。 + +```solidity + event SendMessage(address _from, address _to, string message); + + function sendMessage(address _to, string calldata message) external { + emit SendMessage(msg.sender, _to, message); + } +``` + +このイベントと関数はコントラクト内のどこにでも追加できますが、ベストプラクティスは、修飾子やコンストラクタの下に配置することです。 + +![](/public/images/TheGraph-ScaffoldEth2/section-1/1_1_1.png) + +コントラクトを保存して、新しい変更をデプロイします。 + +> プロのヒント: --reset フラグを使用すると、ソースの更新に関係なく、常に新しいコントラクトがデプロイされます。 + +``` +yarn deploy --reset +``` + +以下の出力が表示されるはずです: + +![](/public/images/TheGraph-ScaffoldEth2/section-1/1_1_2.png) + +#### ✅ 新しい関数をテストする + +http://localhost:3000/debug に移動し、vitalik.ethにメッセージを送信します。 + +![](/public/images/TheGraph-ScaffoldEth2/section-1/1_1_3.png) diff --git "a/docs/TheGraph-ScaffoldEth2/ja/section-1/lesson-2_\343\202\265\343\203\226\343\202\260\343\203\251\343\203\225\343\201\256\346\233\264\346\226\260.md" "b/docs/TheGraph-ScaffoldEth2/ja/section-1/lesson-2_\343\202\265\343\203\226\343\202\260\343\203\251\343\203\225\343\201\256\346\233\264\346\226\260.md" new file mode 100644 index 000000000..c44d5e492 --- /dev/null +++ "b/docs/TheGraph-ScaffoldEth2/ja/section-1/lesson-2_\343\202\265\343\203\226\343\202\260\343\203\251\343\203\225\343\201\256\346\233\264\346\226\260.md" @@ -0,0 +1,130 @@ +## サブグラフの更新 + +### ✅ GraphQL スキーマの更新 + +スマートコントラクトにイベントを追加した後、まずGraphQLスキーマを更新して、Graphノードに保存したいエンティティを含める必要があります。エンティティについての情報は[こちら](https://thegraph.com/docs/en/developing/creating-a-subgraph/#defining-entities)のドキュメントが参考になります。 + +以下のコードでは、既存のスキーマをイベント名に合わせた新しい命名規則に更新します。 + +> スキーマファイルは、packages/subgraph/src/schema.graphql にあります。 + +``` +// 既存のコード下に追加 +type GreetingChange @entity(immutable: true) { + id: Bytes! + greetingSetter: Bytes! # address + newGreeting: String! # string + premium: Boolean! # bool + value: BigInt! # uint256 + blockNumber: BigInt! + blockTimestamp: BigInt! + transactionHash: Bytes! +} + +type SendMessage @entity(immutable: true) { + id: Bytes! + _from: Bytes! # address + _to: Bytes! # address + message: String! # string + blockNumber: BigInt! + blockTimestamp: BigInt! + transactionHash: Bytes! +} + +``` + +![](/public/images/TheGraph-ScaffoldEth2/section-1/1_2_1.png) + +#### ✅ サブグラフマニフェストの更新 + +これらのエンティティをサブグラフYAML構成に追加し、イベントハンドラも追加する必要があります。 + +> このファイルは、packages/subgraph/subgraph.yaml にあります。 + +``` +entities: + - Greeting + - Sender + - GreetingChange + - SendMessage +``` + +``` + eventHandlers: + - event: GreetingChange(indexed address,string,bool,uint256) + handler: handleGreetingChange + - event: SendMessage(address,address,string) + handler: handleSendMessage +``` + +![](/public/images/TheGraph-ScaffoldEth2/section-1/1_2_2.png) + +ここまでステップ通りに進んでいる場合は、次に新しいabiをコピーしてコードを再生成する必要があります。 + +``` +yarn abi-copy && yarn codegen +``` + +![](/public/images/TheGraph-ScaffoldEth2/section-1/1_2_3.png) + +#### ✅ マッピングスクリプトの更新 + +次に、先ほど編集したファイルのマッピングを更新する必要があります。 + +> このファイルは、packages/subgraph/src/mapping.ts にあります。 + +``` +import { + YourContract, + GreetingChange as GreetingChangeEvent, + SendMessage as SendMessageEvent +} from "../generated/YourContract/YourContract"; +``` + +スキーマも更新します。 + +``` +import { GreetingChange, SendMessage } from "../generated/schema" +``` + +最後に、各イベントのマッピング関数を追加する必要があります。 + +``` +export function handleGreetingChange(event: GreetingChangeEvent): void { + let entity = new GreetingChange( + event.transaction.hash.concatI32(event.logIndex.toI32()) + ) + entity.greetingSetter = event.params.greetingSetter + entity.newGreeting = event.params.newGreeting + entity.premium = event.params.premium + entity.value = event.params.value + + entity.blockNumber = event.block.number + entity.blockTimestamp = event.block.timestamp + entity.transactionHash = event.transaction.hash + + entity.save() +} + +export function handleSendMessage(event: SendMessageEvent): void { + let entity = new SendMessage( + event.transaction.hash.concatI32(event.logIndex.toI32()) + ) + entity._from = event.params._from + entity._to = event.params._to + entity.message = event.params.message + + entity.blockNumber = event.block.number + entity.blockTimestamp = event.block.timestamp + entity.transactionHash = event.transaction.hash + + entity.save() +} + +``` + +この変更により、エディタ内でのリントエラーは消えるでしょう。 + +![](/public/images/TheGraph-ScaffoldEth2/section-1/1_2_4.png) + +これでほぼ完成です... あとは公開するだけ! diff --git "a/docs/TheGraph-ScaffoldEth2/ja/section-1/lesson-3_\343\203\207\343\203\227\343\203\255\343\202\244.md" "b/docs/TheGraph-ScaffoldEth2/ja/section-1/lesson-3_\343\203\207\343\203\227\343\203\255\343\202\244.md" new file mode 100644 index 000000000..5ed20c424 --- /dev/null +++ "b/docs/TheGraph-ScaffoldEth2/ja/section-1/lesson-3_\343\203\207\343\203\227\343\203\255\343\202\244.md" @@ -0,0 +1,13 @@ +## サブグラフのデプロイ + +### ✅ 更新されたサブグラフの公開 + +``` +yarn local-ship +``` + +![](/public/images/TheGraph-ScaffoldEth2/section-1/1_3_1.png) + +サブグラフに新しいバージョン番号を追加してください。これは以前のバージョンよりも高い番号である必要があります。 + +次に、サブグラフをテストして、正しくインデックスされていることを確認します。 diff --git "a/docs/TheGraph-ScaffoldEth2/ja/section-1/lesson-4_\343\203\206\343\202\271\343\203\210.md" "b/docs/TheGraph-ScaffoldEth2/ja/section-1/lesson-4_\343\203\206\343\202\271\343\203\210.md" new file mode 100644 index 000000000..647f6c417 --- /dev/null +++ "b/docs/TheGraph-ScaffoldEth2/ja/section-1/lesson-4_\343\203\206\343\202\271\343\203\210.md" @@ -0,0 +1,21 @@ +## テスト + +### ✅ 新しくデプロイされたサブグラフのテスト + +次に、私たちのデータがThe Graphにあるかどうかを確認しましょう。こちらは最初のメッセージを表示するクエリの例です。 + +``` +{ + sendMessages(first: 1, orderBy: blockTimestamp, orderDirection: desc) { + message + _from + _to + } +} +``` + +このような素晴らしいレスポンスが得られるはずです: + +![](/public/images/TheGraph-ScaffoldEth2/section-1/1_4_1.png) + +データとは素晴らしいものですね? diff --git "a/docs/TheGraph-ScaffoldEth2/ja/section-2/lesson-1_MetaMask\343\201\256\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253.md" "b/docs/TheGraph-ScaffoldEth2/ja/section-2/lesson-1_MetaMask\343\201\256\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253.md" new file mode 100644 index 000000000..6e36565bc --- /dev/null +++ "b/docs/TheGraph-ScaffoldEth2/ja/section-2/lesson-1_MetaMask\343\201\256\343\202\244\343\203\263\343\202\271\343\203\210\343\203\274\343\203\253.md" @@ -0,0 +1,7 @@ +## MetaMaskのインストール + +### MetaMaskのインストール + +スマートコントラクトをブロックチェーンにデプロイしたり、デプロイされたスマートコントラクトとやり取りする際には、ガス代を支払う必要があります。そのためには、MetaMaskのようなweb3ウォレットが必要です。MetaMaskをインストールするには[こちら](https://metamask.io/)をクリックしてください。 + +また、このチュートリアルの後半でコントラクトをテストネットにデプロイするために、テストネット用のETHも入手しておくことをお勧めします。 \ No newline at end of file diff --git "a/docs/TheGraph-ScaffoldEth2/ja/section-2/lesson-2_\343\203\207\343\203\227\343\203\255\343\202\244\343\203\244\343\203\274\343\202\242\343\202\253\343\202\246\343\203\263\343\203\210\343\201\256\344\275\234\346\210\220.md" "b/docs/TheGraph-ScaffoldEth2/ja/section-2/lesson-2_\343\203\207\343\203\227\343\203\255\343\202\244\343\203\244\343\203\274\343\202\242\343\202\253\343\202\246\343\203\263\343\203\210\343\201\256\344\275\234\346\210\220.md" new file mode 100644 index 000000000..92cfb72f4 --- /dev/null +++ "b/docs/TheGraph-ScaffoldEth2/ja/section-2/lesson-2_\343\203\207\343\203\227\343\203\255\343\202\244\343\203\244\343\203\274\343\202\242\343\202\253\343\202\246\343\203\263\343\203\210\343\201\256\344\275\234\346\210\220.md" @@ -0,0 +1,65 @@ +## デプロイヤーアカウント + +### ⛵ テストネットへのデプロイ + +次に、スマートコントラクトをテストネットにデプロイしたいと思います! このワークショップが作成された時点では、The Graphは多くのテストネットをサポートしていますが、この例ではsepoliaを使用します。 + +## テストネット用の資金が必要な場合は、以下のフォーセットを試してみてください: + +[Ethereum Sepolia Faucet - Alchemy](https://sepoliafaucet.com/) + +#### ✅ デプロイヤーアカウントの作成 + +``` +yarn run generate +``` + +![](/public/images/TheGraph-ScaffoldEth2/section-2/2_2_1.png) + +hardhatの環境変数ファイルに以下のように保存されるはずです: + +``` +👛 Generating new Wallet +📄 Private Key saved to packages/hardhat/.env file +``` + +#### ✅ アカウントへの資金の追加 + +``` +yarn account +``` + +![](/public/images/TheGraph-ScaffoldEth2/section-2/2_2_2.png) + +これにより、公開アドレスとファンシーなQRコードが表示されます。そして残高?! 素晴らしいですね! <3 + +``` + + ▄▄▄▄▄▄▄ ▄ ▄ ▄▄▄▄▄▄▄ ▄▄▄▄▄▄▄ + █ ▄▄▄ █ █▀▀▄ █▀█▄ ▄▄█ █ ▄▄▄ █ + █ ███ █ ▄▄██▀▄█ ▀ ███ █ ███ █ + █▄▄▄▄▄█ ▄▀▄▀▄▀▄▀▄ █ ▄ █▄▄▄▄▄█ + ▄ ▄▄▄▄▄▄▀█▄▀▄█▄▄ ▄█▀▄ ▄ ▄▄▄ + ▄▀▀█ █▄██▀▀▀▀▄█▀▀▄█▄██▀▄▄█▀█ + ▀▄▄ ▄█▄▄▄▀ █▀▄▀▀▄▄█ ██▀█ ▄▀ + ▄█▀▀██▄ ▀▄ █ ▀ ▀█ ▀▄▀█▄███ + ▄█▀██ ▄▄▄ ▀ ▄ █▄▀▄▄ ██▄▀▄▀▄█ + █▄ █▄ ▄█▄█▄▀▀▀ ▄█▄█▀▄ █▀▀▄▄▀▄ + ███▄█▀▄ █ ▀▄█▀ █████▄▄█▀█▄▄ + ▄▄▄▄▄▄▄ █▄ █▄ ██▀ █ █ ▄ █ ██ + █ ▄▄▄ █ █ ▀██▄██▀▀▄ █▄▄▄██▄▄ + █ ███ █ ▀▄▀▄ ▀▄▄ ▄█▀▀ ▄▄▄██▄▄ + █▄▄▄▄▄█ ▄█ ▄█ ▄▀▄█ ▄▀ ▄▄▄▀ ▀ +▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀ + +Public address: 0x87f00B2c39F97CD00BC6d09777BC4327aCA39180 + +-- localhost -- 📡 + balance: 0 + nonce: 0 + +``` + +選択したチェーンからテストネットETHを送信してください。sepoliaからテストネットETHを入手するのは比較的簡単なので、sepoliaをお勧めします。以下の出力では、sepoliaの残高があることがわかります。 + +![](/public/images/TheGraph-ScaffoldEth2/section-2/2_2_3.png) diff --git "a/docs/TheGraph-ScaffoldEth2/ja/section-2/lesson-3_\343\203\207\343\203\227\343\203\255\343\202\244\343\201\250\346\244\234\350\250\274.md" "b/docs/TheGraph-ScaffoldEth2/ja/section-2/lesson-3_\343\203\207\343\203\227\343\203\255\343\202\244\343\201\250\346\244\234\350\250\274.md" new file mode 100644 index 000000000..21c2b8e19 --- /dev/null +++ "b/docs/TheGraph-ScaffoldEth2/ja/section-2/lesson-3_\343\203\207\343\203\227\343\203\255\343\202\244\343\201\250\346\244\234\350\250\274.md" @@ -0,0 +1,36 @@ +## デプロイと検証 + +### ✅ デプロイ! + +これで、私たちは選択したテストネットにデプロイできます... この例では、sepoliaにデプロイします。 + +``` +yarn deploy --network sepolia +``` + +![](/public/images/TheGraph-ScaffoldEth2/section-2/2_3_1.png) + +問題がなければ、以下のような成功の出力が表示されるはずです。 + +``` +deploying "YourContract" (tx: 0xf404021d736271a7a0a84d124ed35250c533efe37c1775367b6510a8836bf0bd)...: deployed at 0x541D469C06990B7F0bd5103b57997cE8a39C050c with 605281 gas +📝 Updated TypeScript contract definition file on ../nextjs/generated/deployedContracts.ts +``` + +#### ✅ 検証 + +``` +yarn verify --network sepolia +``` + +![](/public/images/TheGraph-ScaffoldEth2/section-2/2_3_2.png) + +以下のような成功の出力が表示されるはずです... + +``` +verifying YourContract (0x541D469C06990B7F0bd5103b57997cE8a39C050c) ... +waiting for result... + => contract YourContract is now verified +``` + +また、etherscanでコントラクトが正常にデプロイされたことも確認できます。[こちら](https://sepolia.etherscan.io/address/0x541D469C06990B7F0bd5103b57997cE8a39C050c#code)は私がデプロイして検証したものです。 diff --git a/docs/TheGraph-ScaffoldEth2/ja/section-2/lesson-4_Subgraph Studio.md b/docs/TheGraph-ScaffoldEth2/ja/section-2/lesson-4_Subgraph Studio.md new file mode 100644 index 000000000..81d1f8e12 --- /dev/null +++ b/docs/TheGraph-ScaffoldEth2/ja/section-2/lesson-4_Subgraph Studio.md @@ -0,0 +1,25 @@ +## Subgraph studio + +### Studio へのサブグラフの移行 + +さて、スマートコントラクトが公開テストネットにあるので、サブグラフをStudioにプッシュする時が来ました。 + +#### ✅ https://thegraph.com/studio に移動する + +![Studio1](/public/images/TheGraph-ScaffoldEth2/section-2/2_4_1.png) + +#### ✅ ウォレットを接続する + +![Studio2](/public/images/TheGraph-ScaffoldEth2/section-2/2_4_2.png) + +接続したウォレットがあなたのものであることを確認するために、リクエストにサインする必要があるかもしれません。 + +![Studio3](/public/images/TheGraph-ScaffoldEth2/section-2/2_4_3.png) + +#### ✅ Create a Subgraph をクリックする + +![Studio4](/public/images/TheGraph-ScaffoldEth2/section-2/2_4_4.png) + +#### ✅ サブグラフに名前をつける + +![Studio5](/public/images/TheGraph-ScaffoldEth2/section-2/2_4_5.png) diff --git a/docs/TheGraph-ScaffoldEth2/ja/section-2/lesson-5_Graph CLI.md b/docs/TheGraph-ScaffoldEth2/ja/section-2/lesson-5_Graph CLI.md new file mode 100644 index 000000000..9d608f847 --- /dev/null +++ b/docs/TheGraph-ScaffoldEth2/ja/section-2/lesson-5_Graph CLI.md @@ -0,0 +1,104 @@ +## Graph CLI + +### ✅ CLI を使用したサブグラフのデプロイ + +#### ✅ Graph CLI を使ってデプロイを完了する + +![Studio6](/public/images/TheGraph-ScaffoldEth2/section-2/2_5_1.png) + +以下のコマンドを使用して、Graph CLIをグローバルにインストールできます。 + +``` +curl -LS https://cli.thegraph.com/install.sh | sudo sh +``` + +![](/public/images/TheGraph-ScaffoldEth2/section-2/2_5_2.png) + +#### ✅ サブグラフの初期化 + +このコマンドは、yarnパッケージの初期化を行うため、これまで操作してきたプロジェクトフォルダとは別のお好きなフォルダで行うことができます。また、初期化プロセス中に設定を入力する必要があります。スタートブロックは、必要に応じてEtherescanで見つけることができ、以前のブロック全体をインデックスする必要がありません。 + +``` +graph init --studio name_of_your_subgraph +``` + +このようになります... + +![](/public/images/TheGraph-ScaffoldEth2/section-2/2_5_3.png) + +#### ✅ Studio への認証 + +Subgraph StudioのAuth & Deployから認証CLIを取得します。 + +``` +graph auth --studio auth_key_here +``` + +成功するとこのようになります: + +``` +Deploy key set for https://api.studio.thegraph.com/deploy/ +``` + +#### ✅ codegen を実行し、サブグラフをビルドする + +ここまでのステップで作成された、サブグラフのディレクトリに移動する必要があります。 + +``` +cd sendmessage +graph codegen && graph build +``` + +成功すると以下のようになります! + +![](/public/images/TheGraph-ScaffoldEth2/section-2/2_5_4.png) + +#### ✅ デプロイ + +これでStudioにデプロイする準備が整いました。 + +``` +graph deploy --studio name_of_your_subgraph +``` + +バージョンを選択して、実行しましょう! + +![](/public/images/TheGraph-ScaffoldEth2/section-2/2_5_5.png) + +サブグラフがスタジオにデプロイされるまで、5分ほどかかることがあります。デプロイされたら、完全に同期されていてエラーがないことを確認してください。デプロイに成功すると、以下のようになります。 + +![Studio7](/public/images/TheGraph-ScaffoldEth2/section-2/2_5_6.png) + +#### ✅ トランザクションを送信し、Subgraph Playground で確認する + +Etherscanで、Contract -> Write Contractタブから直接コントラクトにトランザクションを送信できます。 + +私たちのクエリ: + +``` +{ + sendMessages(first: 5) { + id + _from + _to + message + } +} +``` + +データオブジェクトのレスポンス: + +``` +{ + "data": { + "sendMessages": [ + { + "id": "0x053e32f85f9f485334119585abfc73e507a4ce86e968130b90410df70eb3a66e71000000", + "_from": "0x142cd5d7ac1ea8919f1644af1870792b9f77d44a", + "_to": "0x007e483cf6df009db5ec571270b454764d954d95", + "message": "I love you" + } + ] + } +} +``` diff --git "a/docs/TheGraph-ScaffoldEth2/ja/section-2/lesson-6_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211.md" "b/docs/TheGraph-ScaffoldEth2/ja/section-2/lesson-6_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211.md" new file mode 100644 index 000000000..15e907376 --- /dev/null +++ "b/docs/TheGraph-ScaffoldEth2/ja/section-2/lesson-6_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211.md" @@ -0,0 +1,174 @@ +## フロントエンド + +### フロントエンドの更新とデプロイ + +スマートコントラクトをテストネットにデプロイし、Subgraph Studioでデータがインデックスされているので、フロントエンドを更新する時が来ました。 + +#### ✅ ステップ 1:Scaffold-ETH の設定を更新する + +以前のステップでデプロイしたテストネットを指すように設定を更新してください。 + +> scaffold.config.ts は packages/nextjs にあります。 + +``` + targetNetwork: chains.sepolia, +``` + +変更すると以下のようになります: + +![](/public/images/TheGraph-ScaffoldEth2/section-2/2_6_1.png) + +この変更を行ったら、scaffold-ETHに戻り、UIをリロードしてください。バーナーウォレットから切断されるので、Metamaskウォレットを使用してテストネットに接続します。 + +"CONNECT WALLET"をクリックしてください... + +![](/public/images/TheGraph-ScaffoldEth2/section-2/2_6_2.png) + +Metamaskを選択してください... + +![](/public/images/TheGraph-ScaffoldEth2/section-2/2_6_3.png) + +ネットワークを切り替えてください... + +![](/public/images/TheGraph-ScaffoldEth2/section-2/2_6_4.png) + +![](/public/images/TheGraph-ScaffoldEth2/section-2/2_6_5.png) + +完了したら、sepoliaネットワーク上のdappに接続されているはずです。 + +![](/public/images/TheGraph-ScaffoldEth2/section-2/2_6_6.png) + +#### ✅ 知り合いにテストメッセージを送ってみよう!(または Vitalik へ) + +デプロイしたスマートコントラクトにイベントを送信したいと思います。フロントエンドが適切に設定されているので、これは比較的簡単に行うことができます。 + +![](/public/images/TheGraph-ScaffoldEth2/section-2/2_6_7.png) + +![](/public/images/TheGraph-ScaffoldEth2/section-2/2_6_8.png) + +次に、Studioでメッセージが正常にインデックスされたかどうかを確認します。GraphiQLエクスプローラは、「Playground」ページにあります。 + +![](/public/images/TheGraph-ScaffoldEth2/section-2/2_6_9.png) + +#### ✅ GraphQL URL を開発用エンドポイントに更新する + +サブグラフの開発エンドポイントは、Subgraph Studioのdetailsタブで見つけることができます。 + +> \_app.tsx を編集します。packages/nextjs/pages にあります。 + +``` + const subgraphUri = "https://api.studio.thegraph.com/query/51078/sendmessage-test/version/latest"; + const apolloClient = new ApolloClient({ + uri: subgraphUri, + cache: new InMemoryCache(), + }); +``` + +変更すると以下のようになります: + +![](/public/images/TheGraph-ScaffoldEth2/section-2/2_6_10.png) + +#### ✅ index.ts ファイルをまっさらな状態から始める + +必要なものをindex.tsファイルにインポートしましょう。また、return内の情報を全てクリアすることもできます。 + +> index.ts は packages/nextjs/pages にあります。 + +以下のようになるはずです... + +``` +import type { NextPage } from "next"; +import { MetaHeader } from "~~/components/MetaHeader"; + +import { gql } from "@apollo/client"; +import { useQuery } from "@apollo/client"; + +const Home: NextPage = () => { + return ( + <> + + + ); +}; + +export default Home; +``` + +変更後、ホームディレクトリは以下のようになります: + +![](/public/images/TheGraph-ScaffoldEth2/section-2/2_6_11.png) + +#### ✅ テーブル形式でメッセージを表示する + +最後に、メッセージを表示するためのテーブルを作ります。 + +``` +

Messages

+ + + + + + + + + + {messages.map((message) => ( + + + + + + ))} + +
FromToMessage
{message._from}{message._to}{message.message}
+``` + +main関数の外側に、GraphQLクエリをconstとして定義します。 + +``` +export const GET_MESSAGES = gql` +{ + sendMessages(first: 5) { + id + _from + _to + message + } +} +`; +``` + +そして、次のようにデータをロードします... + +``` + const { loading, error, data: messagesData } = useQuery(GET_MESSAGES); + + const messages = messagesData?.sendMessages || []; +``` + +![](/public/images/TheGraph-ScaffoldEth2/section-2/2_6_13.png) + +それを少しリファクタリングして、単なるテキストの代わりに`
`コンポーネントを使いましょう。 + +Addressコンポーネントをインポートします。 + +``` +import { Address } from "~~/components/scaffold-eth"; +``` + +そして、メッセージを表示するテーブルを以下のように更新します。 + +``` + +
+
+ {message.message} + +``` + +これにより、長い文字列よりもはるかに見栄えがよくなります! :D + +![](/public/images/TheGraph-ScaffoldEth2/section-2/2_6_14.png) + +> 注:完全なファイルをご覧になりたい場合は、[こちら](https://gist.github.com/kmjones1979/26ef9633b61b17f237e88eb41bb688de)をご覧ください! diff --git "a/docs/TheGraph-ScaffoldEth2/ja/section-2/lesson-7_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\343\201\256\345\205\254\351\226\213.md" "b/docs/TheGraph-ScaffoldEth2/ja/section-2/lesson-7_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\343\201\256\345\205\254\351\226\213.md" new file mode 100644 index 000000000..8dd62be49 --- /dev/null +++ "b/docs/TheGraph-ScaffoldEth2/ja/section-2/lesson-7_\343\203\225\343\203\255\343\203\263\343\203\210\343\202\250\343\203\263\343\203\211\343\201\256\345\205\254\351\226\213.md" @@ -0,0 +1,37 @@ +## 公開 + +### ✅ YOLO Vercel! + +最後のステップは、フロントエンドをvercelにプッシュすることです! これは、次のコマンドで簡単に行うことができます。このコマンドラインスイッチ「vercel --build-env NEXT_PUBLIC_IGNORE_BUILD_ERROR=true」は、基本的にビルドエラーをスキップします。 + +少し時間がかかるかもしれませんので、コーヒーを飲みながら待ちましょう。☕ + +``` +yarn vercel:yolo +``` + +以下のプロンプトが表示されるはずです。 + +``` +Vercel CLI 28.20.0 +? Set up and deploy “~/projects/ethereum/scaffold-eth-2-subgraph-package-workshop/packages/nextjs”? [Y/n] +y +? Which scope do you want to deploy to? myscope +? Link to existing project? [y/N] n +? What’s your project’s name? sendmessage +? In which directory is your code located? ./ +Local settings detected in vercel.json: +Auto-detected Project Settings (Next.js): +- Build Command: next build +- Development Command: next dev --port $PORT +- Install Command: `yarn install`, `pnpm install`, or `npm install` +- Output Directory: Next.js default +? Want to modify these settings? [y/N] n +🔗 Linked to kevin-kevinjonescr/testing (created .vercel) +🔍 Inspect: https://vercel.com/kevin-kevinjonescr/testing/E2rfnyzC4ud5DskrwhybQ4Hiicjx [2s] +✅ 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 +``` + +Scaffold-ETHとThe Graphについて学んでいただき、ありがとうございます。このチュートリアルを楽しんでいただけたか、また、フィードバックがあればぜひお聞かせください。The GraphのDiscordに参加して、web3の旅での質問や問題があれば気軽にご連絡ください! 友達よ、ブロックチェーン開発(BUIDLing)を続けよう! \ No newline at end of file diff --git a/public/images/TheGraph-ScaffoldEth2/section-0/0_1_1.png b/public/images/TheGraph-ScaffoldEth2/section-0/0_1_1.png new file mode 100644 index 000000000..9277e29ab Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-0/0_1_1.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-0/0_1_2.png b/public/images/TheGraph-ScaffoldEth2/section-0/0_1_2.png new file mode 100644 index 000000000..13c8db932 Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-0/0_1_2.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-0/0_1_3.png b/public/images/TheGraph-ScaffoldEth2/section-0/0_1_3.png new file mode 100644 index 000000000..9834013b8 Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-0/0_1_3.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-0/0_1_4.png b/public/images/TheGraph-ScaffoldEth2/section-0/0_1_4.png new file mode 100644 index 000000000..870977119 Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-0/0_1_4.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-0/0_1_5.png b/public/images/TheGraph-ScaffoldEth2/section-0/0_1_5.png new file mode 100644 index 000000000..e8dfb2c0f Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-0/0_1_5.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-0/0_3_1.png b/public/images/TheGraph-ScaffoldEth2/section-0/0_3_1.png new file mode 100644 index 000000000..47318867d Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-0/0_3_1.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-0/0_3_2.png b/public/images/TheGraph-ScaffoldEth2/section-0/0_3_2.png new file mode 100644 index 000000000..d6352b2ca Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-0/0_3_2.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-0/0_3_3.png b/public/images/TheGraph-ScaffoldEth2/section-0/0_3_3.png new file mode 100644 index 000000000..4cf099c8e Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-0/0_3_3.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-0/0_3_4.png b/public/images/TheGraph-ScaffoldEth2/section-0/0_3_4.png new file mode 100644 index 000000000..3b0dc0750 Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-0/0_3_4.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-0/0_3_5.png b/public/images/TheGraph-ScaffoldEth2/section-0/0_3_5.png new file mode 100644 index 000000000..d88cfaaa8 Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-0/0_3_5.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-0/0_3_6.png b/public/images/TheGraph-ScaffoldEth2/section-0/0_3_6.png new file mode 100644 index 000000000..51201ef15 Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-0/0_3_6.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-0/0_4_1.png b/public/images/TheGraph-ScaffoldEth2/section-0/0_4_1.png new file mode 100644 index 000000000..69222597a Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-0/0_4_1.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-0/0_5_1.png b/public/images/TheGraph-ScaffoldEth2/section-0/0_5_1.png new file mode 100644 index 000000000..efb6a9983 Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-0/0_5_1.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-0/0_5_2.png b/public/images/TheGraph-ScaffoldEth2/section-0/0_5_2.png new file mode 100644 index 000000000..eba0bd44e Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-0/0_5_2.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-0/0_5_3.png b/public/images/TheGraph-ScaffoldEth2/section-0/0_5_3.png new file mode 100644 index 000000000..e9239e5c8 Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-0/0_5_3.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-0/0_6_1.png b/public/images/TheGraph-ScaffoldEth2/section-0/0_6_1.png new file mode 100644 index 000000000..bbe108cb7 Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-0/0_6_1.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-1/1_1_1.png b/public/images/TheGraph-ScaffoldEth2/section-1/1_1_1.png new file mode 100644 index 000000000..08ebe8850 Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-1/1_1_1.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-1/1_1_2.png b/public/images/TheGraph-ScaffoldEth2/section-1/1_1_2.png new file mode 100644 index 000000000..4f2d683cc Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-1/1_1_2.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-1/1_1_3.png b/public/images/TheGraph-ScaffoldEth2/section-1/1_1_3.png new file mode 100644 index 000000000..c1acb35c3 Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-1/1_1_3.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-1/1_2_1.png b/public/images/TheGraph-ScaffoldEth2/section-1/1_2_1.png new file mode 100644 index 000000000..0645a291d Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-1/1_2_1.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-1/1_2_2.png b/public/images/TheGraph-ScaffoldEth2/section-1/1_2_2.png new file mode 100644 index 000000000..71367f85c Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-1/1_2_2.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-1/1_2_3.png b/public/images/TheGraph-ScaffoldEth2/section-1/1_2_3.png new file mode 100644 index 000000000..d29e094e3 Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-1/1_2_3.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-1/1_2_4.png b/public/images/TheGraph-ScaffoldEth2/section-1/1_2_4.png new file mode 100644 index 000000000..edf4fbae0 Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-1/1_2_4.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-1/1_3_1.png b/public/images/TheGraph-ScaffoldEth2/section-1/1_3_1.png new file mode 100644 index 000000000..a7c98bf18 Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-1/1_3_1.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-1/1_4_1.png b/public/images/TheGraph-ScaffoldEth2/section-1/1_4_1.png new file mode 100644 index 000000000..441ba7438 Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-1/1_4_1.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-2/2_2_1.png b/public/images/TheGraph-ScaffoldEth2/section-2/2_2_1.png new file mode 100644 index 000000000..4d370f64d Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-2/2_2_1.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-2/2_2_2.png b/public/images/TheGraph-ScaffoldEth2/section-2/2_2_2.png new file mode 100644 index 000000000..d7bdf7e28 Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-2/2_2_2.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-2/2_2_3.png b/public/images/TheGraph-ScaffoldEth2/section-2/2_2_3.png new file mode 100644 index 000000000..ea22a825d Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-2/2_2_3.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-2/2_3_1.png b/public/images/TheGraph-ScaffoldEth2/section-2/2_3_1.png new file mode 100644 index 000000000..aeb8689d5 Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-2/2_3_1.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-2/2_3_2.png b/public/images/TheGraph-ScaffoldEth2/section-2/2_3_2.png new file mode 100644 index 000000000..339559257 Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-2/2_3_2.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-2/2_4_1.png b/public/images/TheGraph-ScaffoldEth2/section-2/2_4_1.png new file mode 100644 index 000000000..13d7ba6dd Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-2/2_4_1.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-2/2_4_2.png b/public/images/TheGraph-ScaffoldEth2/section-2/2_4_2.png new file mode 100644 index 000000000..bf89c2fdf Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-2/2_4_2.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-2/2_4_3.png b/public/images/TheGraph-ScaffoldEth2/section-2/2_4_3.png new file mode 100644 index 000000000..a93199dd7 Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-2/2_4_3.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-2/2_4_4.png b/public/images/TheGraph-ScaffoldEth2/section-2/2_4_4.png new file mode 100644 index 000000000..2981e7eed Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-2/2_4_4.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-2/2_4_5.png b/public/images/TheGraph-ScaffoldEth2/section-2/2_4_5.png new file mode 100644 index 000000000..a9a8af72c Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-2/2_4_5.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-2/2_5_1.png b/public/images/TheGraph-ScaffoldEth2/section-2/2_5_1.png new file mode 100644 index 000000000..6be64e0dd Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-2/2_5_1.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-2/2_5_2.png b/public/images/TheGraph-ScaffoldEth2/section-2/2_5_2.png new file mode 100644 index 000000000..6cee08f37 Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-2/2_5_2.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-2/2_5_3.png b/public/images/TheGraph-ScaffoldEth2/section-2/2_5_3.png new file mode 100644 index 000000000..ba01d77a6 Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-2/2_5_3.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-2/2_5_4.png b/public/images/TheGraph-ScaffoldEth2/section-2/2_5_4.png new file mode 100644 index 000000000..789950eca Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-2/2_5_4.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-2/2_5_5.png b/public/images/TheGraph-ScaffoldEth2/section-2/2_5_5.png new file mode 100644 index 000000000..9d7023bb0 Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-2/2_5_5.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-2/2_5_6.png b/public/images/TheGraph-ScaffoldEth2/section-2/2_5_6.png new file mode 100644 index 000000000..becacb582 Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-2/2_5_6.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-2/2_6_1.png b/public/images/TheGraph-ScaffoldEth2/section-2/2_6_1.png new file mode 100644 index 000000000..1e477350c Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-2/2_6_1.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-2/2_6_10.png b/public/images/TheGraph-ScaffoldEth2/section-2/2_6_10.png new file mode 100644 index 000000000..5b2636797 Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-2/2_6_10.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-2/2_6_11.png b/public/images/TheGraph-ScaffoldEth2/section-2/2_6_11.png new file mode 100644 index 000000000..f35757805 Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-2/2_6_11.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-2/2_6_12.png b/public/images/TheGraph-ScaffoldEth2/section-2/2_6_12.png new file mode 100644 index 000000000..89a086602 Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-2/2_6_12.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-2/2_6_13.png b/public/images/TheGraph-ScaffoldEth2/section-2/2_6_13.png new file mode 100644 index 000000000..8cad59806 Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-2/2_6_13.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-2/2_6_14.png b/public/images/TheGraph-ScaffoldEth2/section-2/2_6_14.png new file mode 100644 index 000000000..e8dfb2c0f Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-2/2_6_14.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-2/2_6_2.png b/public/images/TheGraph-ScaffoldEth2/section-2/2_6_2.png new file mode 100644 index 000000000..d455df38e Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-2/2_6_2.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-2/2_6_3.png b/public/images/TheGraph-ScaffoldEth2/section-2/2_6_3.png new file mode 100644 index 000000000..8acfe0807 Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-2/2_6_3.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-2/2_6_4.png b/public/images/TheGraph-ScaffoldEth2/section-2/2_6_4.png new file mode 100644 index 000000000..f06ac1916 Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-2/2_6_4.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-2/2_6_5.png b/public/images/TheGraph-ScaffoldEth2/section-2/2_6_5.png new file mode 100644 index 000000000..6bd8f55a6 Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-2/2_6_5.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-2/2_6_6.png b/public/images/TheGraph-ScaffoldEth2/section-2/2_6_6.png new file mode 100644 index 000000000..3ee89f150 Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-2/2_6_6.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-2/2_6_7.png b/public/images/TheGraph-ScaffoldEth2/section-2/2_6_7.png new file mode 100644 index 000000000..e65067c97 Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-2/2_6_7.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-2/2_6_8.png b/public/images/TheGraph-ScaffoldEth2/section-2/2_6_8.png new file mode 100644 index 000000000..bdd0bc822 Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-2/2_6_8.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-2/2_6_9.png b/public/images/TheGraph-ScaffoldEth2/section-2/2_6_9.png new file mode 100644 index 000000000..67e4a87cf Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-2/2_6_9.png differ diff --git a/public/images/TheGraph-ScaffoldEth2/section-2/Lesson5-2.png b/public/images/TheGraph-ScaffoldEth2/section-2/Lesson5-2.png new file mode 100644 index 000000000..f2a721cd9 Binary files /dev/null and b/public/images/TheGraph-ScaffoldEth2/section-2/Lesson5-2.png differ diff --git a/public/metadata/TheGraph-ScaffoldEth2/description.json b/public/metadata/TheGraph-ScaffoldEth2/description.json new file mode 100644 index 000000000..fb3b5dce4 --- /dev/null +++ b/public/metadata/TheGraph-ScaffoldEth2/description.json @@ -0,0 +1,9 @@ +{ + "project_id": 901, + "title": "TheGraph ScaffoldETH2", + "difficulty": "advanced", + "chain": "Ethereum", + "description": "👉 ScaffoldETH2とSubgraphを使って、任意のアドレス同士でメッセージを送り合える分散型アプリケーションを構築します。", + "total_sections": 3, + "total_lessons": 17 +} diff --git a/public/metadata/TheGraph-ScaffoldEth2/learn-banner.png b/public/metadata/TheGraph-ScaffoldEth2/learn-banner.png new file mode 100644 index 000000000..054301682 Binary files /dev/null and b/public/metadata/TheGraph-ScaffoldEth2/learn-banner.png differ diff --git a/public/metadata/TheGraph-ScaffoldEth2/square.png b/public/metadata/TheGraph-ScaffoldEth2/square.png new file mode 100644 index 000000000..976f35c10 Binary files /dev/null and b/public/metadata/TheGraph-ScaffoldEth2/square.png differ