diff --git a/i18n/en/docusaurus-plugin-content-docs/current/Avalanche/AVAX-AMM/index.md b/i18n/en/docusaurus-plugin-content-docs/current/Avalanche/AVAX-AMM/index.md new file mode 100644 index 000000000..6168fe50b --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/Avalanche/AVAX-AMM/index.md @@ -0,0 +1,4 @@ +# AVAX-AMM + +![](/metadata/AVAX-AMM/learn-banner.png) + diff --git a/i18n/en/docusaurus-plugin-content-docs/current/Avalanche/AVAX-AMM/section-0/lesson-1.md b/i18n/en/docusaurus-plugin-content-docs/current/Avalanche/AVAX-AMM/section-1/lesson-0.md similarity index 65% rename from i18n/en/docusaurus-plugin-content-docs/current/Avalanche/AVAX-AMM/section-0/lesson-1.md rename to i18n/en/docusaurus-plugin-content-docs/current/Avalanche/AVAX-AMM/section-1/lesson-0.md index a02a5eeae..f474f4f94 100644 --- a/i18n/en/docusaurus-plugin-content-docs/current/Avalanche/AVAX-AMM/section-0/lesson-1.md +++ b/i18n/en/docusaurus-plugin-content-docs/current/Avalanche/AVAX-AMM/section-1/lesson-0.md @@ -16,7 +16,7 @@ The following technologies are required for this project: You don’t need to fully understand everything right now. If you encounter something you don’t know, feel free to search the internet or ask questions in the community as you move forward with the project! -If you're new to development on `Avalanche` or have no experience writing smart contract tests with `hardhat`, [AVAX-Messenger](/Avalanche/AVAX-Messenger/section-0/lesson-1) offers a more detailed explanation, so starting there may help things go more smoothly. +If you're new to development on `Avalanche` or have no experience writing smart contract tests with `hardhat`, [AVAX-Messenger](/Avalanche/AVAX-Messenger/section-1/lesson-0) offers a more detailed explanation, so starting there may help things go more smoothly. ### 🛠 What Will We Build? @@ -77,45 +77,3 @@ Accessibility - The low cost of transactions on Avalanche means that smaller tra Low slippage - The slow speed of the Ethereum blockchain often leads to significant slippage and failed transactions when conducting on-chain trades. The faster transaction rate and higher throughput of the Avalanche network opens the door to minimal price slippage and instant trades, bringing the experience of trading on DEXs closer to that of their centralized counterparts. ### 🌍 Upgrade the Project - -Projects on [UNCHAIN](https://unchain.tech/) are maintained under the [UNCHAIN License](https://github.com/unchain-tech/UNCHAIN-projects/blob/main/LICENSE). - -If you're participating in the project and think, “This could be clearer!” or “This is incorrect!” -Feel free to send a `pull request`. - -To edit the code directly on GitHub and send a `pull request`, refer to [this guide](https://docs.github.com/en/repositories/working-with-files/managing-files/editing-files). - -All kinds of requests are welcome 🎉 - -You can also `Fork` the project to your own GitHub account, edit it there, and send a `pull request`. - -* To `Fork` a project, see [this guide](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/fork-a-repo) -* To create a `pull request` from a `Fork`, see [this guide](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`! ⏩ Access [UNCHAIN’s GitHub](https://github.com/unchain-tech/UNCHAIN-projects)!** - -### ⚡️ Create an `Issue` - -If it’s not quite worth a `pull request` but you still want to leave a suggestion, -create an `Issue` [here](https://github.com/unchain-tech/UNCHAIN-projects/issues). - -For how to create an `Issue`, refer to [this guide](https://docs.github.com/en/issues/tracking-your-work-with-issues/using-issues/creating-an-issue). - -Creating `pull requests` or `issues` is a key part of real-world team development, so be sure to give it a try! - -Let’s work together to make UNCHAIN’s projects even better ✨ - -> For Windows users -> If you're using Windows, we recommend downloading [Git for Windows](https://gitforwindows.org/) and using the included Git Bash. -> This guide supports UNIX-specific commands. -> [Windows Subsystem for Linux (WSL)](https://docs.microsoft.com/en-us/windows/wsl/install) is also an option. - ---- - -Let’s move on to the next lesson and set up your programming environment 🎉 - ---- - -Documentation created by [ryojiroakiyama](https://github.com/ryojiroakiyama)（UNCHAIN Discord ID: rakiyama#8051） - ---- diff --git a/i18n/en/docusaurus-plugin-content-docs/current/Polygon/Polygon-Whitelist-NFT/index.md b/i18n/en/docusaurus-plugin-content-docs/current/Polygon/Polygon-Whitelist-NFT/index.md new file mode 100644 index 000000000..d10ef6acb --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/Polygon/Polygon-Whitelist-NFT/index.md @@ -0,0 +1,4 @@ +# Polygon-Whitelist-NFT + +![](/metadata/Polygon-Whitelist-NFT/learn-banner.png) + diff --git a/i18n/en/docusaurus-plugin-content-docs/current/Polygon/Polygon-Whitelist-NFT/section-0/lesson-2.md b/i18n/en/docusaurus-plugin-content-docs/current/Polygon/Polygon-Whitelist-NFT/section-0/lesson-2.md deleted file mode 100644 index 00c0a6680..000000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/Polygon/Polygon-Whitelist-NFT/section-0/lesson-2.md +++ /dev/null @@ -1,50 +0,0 @@ ---- -title: Setup MetaMask ---- -## Preparation - -### 🛠 Setup MetaMask wallet - -#### 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/) - -#### Add Polygon Amoy to MetaMask - -Polygon is a decentralized Ethereum Layer 2 blockchain that enables developers to build scalable, user-friendly dApps with low transaction fees without sacrificing security. Major NFT platforms such as Opensea and Rarible also support the Polygon Amoy testnet, so we choose Amoy to deploy our smart contract. - -Open [ChainIDE](https://chainide.com/), and click the "Try Now" button on the front page as shown in the figure below. - -![image-20230816160925822](/images/Polygon-Whitelist-NFT/section-0/0_2_1.png) - -Next, you will select your preferred login method. The login prompt offers two options: "Sign in with GitHub" and "Continue as Guest". For the purposes of this tutorial, we will select "Sign in with GitHub" because the Sandbox feature is not available in Guest mode. - -![image-20230816161111357](/images/Polygon-Whitelist-NFT/section-0/0_2_2.png) - -To create a new Polygon project, click the 'New Project' button and choose 'Polygon' on the left side of the screen. Next, on the right side, select ”Blank Template“. - -![image-20230816161348702](/images/Polygon-Whitelist-NFT/section-0/0_2_3.png) - -Click "Connect wallet" on the right side of the screen, select "Injected web3 Provider," and then click on MetaMask to connect the wallet（Polygon Mainnet is the main network, while Amoy is the testnet - we choose to Connect to Amoy）. - -![image-20230114120433122](/images/Polygon-Whitelist-NFT/section-0/0_2_4.png) - -#### Claim testnet tokens - -Once Amoy is added to MetaMask, click on [Polygon Faucet](https://faucet.polygon.technology/) to receive testnet tokens. On the faucet page, we choose Amoy as the network and MATIC as the token and then paste your MetaMask wallet address. Next, click submit, and the faucet will send you some test MATIC within a minute. - -![image-2023011412043342](/images/Polygon-Whitelist-NFT/section-0/0_2_5.png) - -### 🙋‍♂️ Asking Questions - -If you have any uncertainties or issues with the work done so far, please ask in the `#polygon` channel on Discord. - -To streamline the assistance process, kindly include the following 4 points in your error report ✨: - -``` -1. Section and lesson number related to the question -2. What you were trying to do -3. Copy & paste the error message -4. Screenshot of the error screen -``` - diff --git a/i18n/en/docusaurus-plugin-content-docs/current/Polygon/Polygon-Whitelist-NFT/section-0/lesson-1.md b/i18n/en/docusaurus-plugin-content-docs/current/Polygon/Polygon-Whitelist-NFT/section-1/lesson-0.md similarity index 55% rename from i18n/en/docusaurus-plugin-content-docs/current/Polygon/Polygon-Whitelist-NFT/section-0/lesson-1.md rename to i18n/en/docusaurus-plugin-content-docs/current/Polygon/Polygon-Whitelist-NFT/section-1/lesson-0.md index d06ecac95..1ae221a0c 100644 --- a/i18n/en/docusaurus-plugin-content-docs/current/Polygon/Polygon-Whitelist-NFT/section-0/lesson-1.md +++ b/i18n/en/docusaurus-plugin-content-docs/current/Polygon/Polygon-Whitelist-NFT/section-1/lesson-0.md @@ -48,13 +48,56 @@ You can also `Fork` the project to your own GitHub account, edit the contents, a 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`. +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 ✨. +### 🧰 Preparation + +#### 🛠 Setup MetaMask wallet + +##### 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/) + +##### Add Polygon Amoy to MetaMask + +Polygon is a decentralized Ethereum Layer 2 blockchain that enables developers to build scalable, user-friendly dApps with low transaction fees without sacrificing security. Major NFT platforms such as Opensea and Rarible also support the Polygon Amoy testnet, so we choose Amoy to deploy our smart contract. + +Open [ChainIDE](https://chainide.com/), and click the "Try Now" button on the front page as shown in the figure below. + +![image-20230816160925822](/images/Polygon-Whitelist-NFT/section-0/0_2_1.png) + +Next, you will select your preferred login method. The login prompt offers two options: "Sign in with GitHub" and "Continue as Guest". For the purposes of this tutorial, we will select "Sign in with GitHub" because the Sandbox feature is not available in Guest mode. + +![image-20230816161111357](/images/Polygon-Whitelist-NFT/section-0/0_2_2.png) + +To create a new Polygon project, click the 'New Project' button and choose 'Polygon' on the left side of the screen. Next, on the right side, select ”Blank Template“. + +![image-20230816161348702](/images/Polygon-Whitelist-NFT/section-0/0_2_3.png) + +Click "Connect wallet" on the right side of the screen, select "Injected web3 Provider," and then click on MetaMask to connect the wallet（Polygon Mainnet is the main network, while Amoy is the testnet - we choose to Connect to Amoy）. + +![image-20230114120433122](/images/Polygon-Whitelist-NFT/section-0/0_2_4.png) + +##### Claim testnet tokens + +Once Amoy is added to MetaMask, click on [Polygon Faucet](https://faucet.polygon.technology/) to receive testnet tokens. On the faucet page, we choose Amoy as the network and MATIC as the token and then paste your MetaMask wallet address. Next, click submit, and the faucet will send you some test MATIC within a minute. + +![image-2023011412043342](/images/Polygon-Whitelist-NFT/section-0/0_2_5.png) + ### 🙋‍♂️ Asking Questions -If you have any questions or uncertainties up to this point, please ask in the `#polygon` channel on Discord. +If you have any uncertainties or issues with the work done so far, please ask in the `#polygon` channel on Discord. + +To streamline the assistance process, kindly include the following 4 points in your error report ✨: + +``` +1. Section and lesson number related to the question +2. What you were trying to do +3. Copy & paste the error message +4. Screenshot of the error screen +``` diff --git a/i18n/en/docusaurus-plugin-content-docs/current/TheGraph/TheGraph-ScaffoldEth2/index.md b/i18n/en/docusaurus-plugin-content-docs/current/TheGraph/TheGraph-ScaffoldEth2/index.md new file mode 100644 index 000000000..ce46fa240 --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/TheGraph/TheGraph-ScaffoldEth2/index.md @@ -0,0 +1,4 @@ +# TheGraph-ScaffoldEth2 + +![](/metadata/TheGraph-ScaffoldEth2/learn-banner.png) + diff --git a/i18n/en/docusaurus-plugin-content-docs/current/TheGraph/TheGraph-ScaffoldEth2/section-0/lesson-1.md b/i18n/en/docusaurus-plugin-content-docs/current/TheGraph/TheGraph-ScaffoldEth2/section-0/lesson-1.md deleted file mode 100644 index 1adb546d1..000000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/TheGraph/TheGraph-ScaffoldEth2/section-0/lesson-1.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Course Introduction ---- -## 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スマートコントラクト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. - -![](/images/TheGraph-ScaffoldEth2/section-0/0_1_1.png) - -![](/images/TheGraph-ScaffoldEth2/section-0/0_1_2.png) - -![](/images/TheGraph-ScaffoldEth2/section-0/0_1_3.png) - -![](/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 - -![](/images/TheGraph-ScaffoldEth2/section-0/0_1_5.png) - -### 🌍 Upgrading this project - -This learning content is operated under[UNCHAIN License](https://github.com/unchain-tech/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/i18n/en/docusaurus-plugin-content-docs/current/TheGraph/TheGraph-ScaffoldEth2/section-0/lesson-2.md b/i18n/en/docusaurus-plugin-content-docs/current/TheGraph/TheGraph-ScaffoldEth2/section-0/lesson-2.md deleted file mode 100644 index 9bfe39783..000000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/TheGraph/TheGraph-ScaffoldEth2/section-0/lesson-2.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -title: Requirements ---- -## 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/i18n/en/docusaurus-plugin-content-docs/current/TheGraph/TheGraph-ScaffoldEth2/section-0/lesson-3.md b/i18n/en/docusaurus-plugin-content-docs/current/TheGraph/TheGraph-ScaffoldEth2/section-0/lesson-3.md deleted file mode 100644 index 887e53b82..000000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/TheGraph/TheGraph-ScaffoldEth2/section-0/lesson-3.md +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Setup Scaffold-ETH 2 ---- -## 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. - -![](/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 -``` - -![](/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スマートコントラクト. Scaffold-ETH 2 comes with Hardhat by default. To spin up the chain just type the following yarn command… - -``` -yarn chain -``` - -![](/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 -``` - -![](/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 -``` - -![](/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" - -![](/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/i18n/en/docusaurus-plugin-content-docs/current/TheGraph/TheGraph-ScaffoldEth2/section-0/lesson-4.md b/i18n/en/docusaurus-plugin-content-docs/current/TheGraph/TheGraph-ScaffoldEth2/section-0/lesson-4.md deleted file mode 100644 index f1d09823d..000000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/TheGraph/TheGraph-ScaffoldEth2/section-0/lesson-4.md +++ /dev/null @@ -1,26 +0,0 @@ ---- -title: Setup The Graph ---- -## 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 -``` - -![](/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/i18n/en/docusaurus-plugin-content-docs/current/TheGraph/TheGraph-ScaffoldEth2/section-0/lesson-5.md b/i18n/en/docusaurus-plugin-content-docs/current/TheGraph/TheGraph-ScaffoldEth2/section-0/lesson-5.md deleted file mode 100644 index d41a8baaf..000000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/TheGraph/TheGraph-ScaffoldEth2/section-0/lesson-5.md +++ /dev/null @@ -1,55 +0,0 @@ ---- -title: Deploy to localhost ---- -## 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 -``` - -![](/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 -``` - -![](/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: - -![](/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/i18n/en/docusaurus-plugin-content-docs/current/TheGraph/TheGraph-ScaffoldEth2/section-0/lesson-6.md b/i18n/en/docusaurus-plugin-content-docs/current/TheGraph/TheGraph-ScaffoldEth2/section-0/lesson-6.md deleted file mode 100644 index 42af84bfe..000000000 --- a/i18n/en/docusaurus-plugin-content-docs/current/TheGraph/TheGraph-ScaffoldEth2/section-0/lesson-6.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Test ---- -## 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 - } - } - } -``` - -![](/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/i18n/en/docusaurus-plugin-content-docs/current/TheGraph/TheGraph-ScaffoldEth2/section-1/lesson-0.md b/i18n/en/docusaurus-plugin-content-docs/current/TheGraph/TheGraph-ScaffoldEth2/section-1/lesson-0.md new file mode 100644 index 000000000..7e642b31d --- /dev/null +++ b/i18n/en/docusaurus-plugin-content-docs/current/TheGraph/TheGraph-ScaffoldEth2/section-1/lesson-0.md @@ -0,0 +1,265 @@ +--- +title: Course Introduction +--- +## 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スマートコントラクト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. + +![](/images/TheGraph-ScaffoldEth2/section-0/0_1_1.png) + +![](/images/TheGraph-ScaffoldEth2/section-0/0_1_2.png) + +![](/images/TheGraph-ScaffoldEth2/section-0/0_1_3.png) + +![](/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 + +![](/images/TheGraph-ScaffoldEth2/section-0/0_1_5.png) + +### 🌍 Upgrading this project + +This learning content is operated under[UNCHAIN License](https://github.com/unchain-tech/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. + +## 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/) + +## 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. + +![](/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 +``` + +![](/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スマートコントラクト. Scaffold-ETH 2 comes with Hardhat by default. To spin up the chain just type the following yarn command… + +``` +yarn chain +``` + +![](/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 +``` + +![](/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 +``` + +![](/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" + +![](/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. + +## 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 +``` + +![](/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. 🔎 + +## 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 +``` + +![](/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 +``` + +![](/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: + +![](/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 +``` + +## 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 + } + } + } +``` + +![](/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.