### Start Local Development Server

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/ETH-NFT-Maker/ja/section-3/lesson-1_スマコンを呼び出そう.md

Instructions to start the local development server for the web application. This command typically launches the client-side application for testing and development purposes.

```bash
yarn client start
```

--------------------------------

### Start Frontend Development Server for NFT Minting

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/Polygon-Whitelist-NFT/en/section-4/lesson-3_Mint and Manage Collection.md

Instructions to install project dependencies and launch the local development server for the NFT minting application. This step is essential for accessing the frontend interface to interact with the smart contract and perform minting operations.

```bash
yarn install
yarn dev
```

--------------------------------

### Install Polkadot.js API Contract Library

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/ASTAR-SocialFi/ja/section-2/lesson-1_コントラクトの関数を呼び出せるようにしよう.md

Instructions to install the necessary `@polkadot/api-contract` library using Yarn, a prerequisite for interacting with Polkadot/Astar smart contracts.

```bash
yarn add @polkadot/api-contract
```

--------------------------------

### Launch Frontend Development Server

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/Polygon-Whitelist-NFT/en/section-5/lesson-1_Monorepo configration.md

Starts the development server for the `client` frontend application, typically used to test the integrated monorepo setup and interact with the compiled smart contracts.

```bash
yarn client dev
```

--------------------------------

### Install Polkadot API and Extension Libraries

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/ASTAR-SocialFi/ja/section-2/lesson-1_コントラクトの関数を呼び出せるようにしよう.md

This shell command installs the necessary `@polkadot/api`, `@polkadot/extension-inject`, and `@polkadot/extension-dapp` packages required for interacting with Polkadot blockchain and browser extensions in a JavaScript/TypeScript project.

```shell
yarn add @polkadot/api @polkadot/extension-inject @polkadot/extension-dapp
```

--------------------------------

### Initialize a New Subgraph Project

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/TheGraph-ScaffoldEth2/en/section-2/lesson-5_Graph CLI.md

Initializes a new subgraph project in a chosen directory. This command prompts for required configuration details, including the subgraph name and an optional start block for indexing efficiency.

```Shell
graph init --studio name_of_your_subgraph
```

--------------------------------

### Navigate to Client Directory and Install Dependencies

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/Polygon-Whitelist-NFT/en/section-4/lesson-2_Build Frontend.md

Change into the newly created 'client' directory and install necessary frontend packages like `@metamask/providers` and `ethers` using yarn.

```bash
cd client
yarn add @metamask/providers@^13.0.0 ethers@^5
```

--------------------------------

### Install and Manage Node.js with 'n'

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/Polygon-Whitelist-NFT/en/section-4/lesson-2_Build Frontend.md

Commands to install 'n' for Node.js version management and activate the stable Node.js version, followed by a version confirmation.

```bash
npm install -g n

n stable

node -v
```

--------------------------------

### Install The Graph CLI

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/TheGraph-ScaffoldEth2/en/section-2/lesson-5_Graph CLI.md

Installs The Graph Command Line Interface globally on your system using a curl script, enabling interaction with The Graph network.

```Shell
curl -LS https://cli.thegraph.com/install.sh | sudo sh
```

--------------------------------

### Start Web Application Development Server

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/NEAR-Hotel-Booking-dApp/ja/section-3/lesson-2_画面遷移を実装しよう.md

Provides the command to initiate the local development server for the web application. This command (`yarn dev`) is typically executed in the terminal to compile and serve the application, allowing developers to view and interact with it in a browser.

```bash
yarn dev
```

--------------------------------

### Connect to MetaMask Wallet

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/Polygon-Whitelist-NFT/en/section-4/lesson-2_Build Frontend.md

Asynchronously connects the DApp to the user's MetaMask wallet. It requests Ethereum accounts, handles potential errors during the connection process, and attempts to switch to the Mumbai testnet. The `connectStatus` state is updated based on the outcome, guiding the user if MetaMask is not installed.

```JavaScript
const connect = async () => {
    if (typeof window.ethereum !== "undefined") {
      try {
        await window.ethereum.request({
          method: "eth_requestAccounts",
        });
      } catch (error) {
        console.log(error);
      }
      await switchToMumbai();
      setConnectStatus("connected");
    } else {
      setConnectStatus("Please install MetaMask");
    }
  };
```

--------------------------------

### Start Webpack Development Server

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/ICP-Basic-DEX/ja/section-3/lesson-3_ユーザーボードを作成しよう.md

This shell command is used to start the webpack development server. It enables hot-reloading and dynamic reflection of front-end changes, which is highly recommended for an efficient development workflow.

```Shell
npm start
```

--------------------------------

### Start Client Development Server

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/ETH-NFT-Maker/ja/section-3/lesson-2_webアプリケーションからNFTをmintしよう.md

Starts the local development server for the client application using Yarn to test the implemented changes.

```shell
yarn client start
```

--------------------------------

### Check Node.js Version

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/Polygon-Whitelist-NFT/en/section-4/lesson-2_Build Frontend.md

Verify the currently installed Node.js version to ensure it meets the project requirements (18.17.0 or newer).

```bash
node -v
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/Polygon-Whitelist-NFT/en/section-5/lesson-1_Monorepo configration.md

Runs `yarn install` at the root of the project to ensure all dependencies across all workspaces in the monorepo are correctly installed and linked.

```bash
yarn install
```

--------------------------------

### Install ethers.js Library

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/ETH-NFT-Maker/ja/section-3/lesson-2_webアプリケーションからNFTをmintしよう.md

Installs the `ethers` library version 5.7.2 into the client workspace using Yarn, which is necessary for frontend-contract interaction.

```shell
yarn workspace client add ethers@5.7.2
```

--------------------------------

### Initialize `Web3Storage` Client and Get Image Target

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/ETH-NFT-Maker/ja/section-3/lesson-2_webアプリケーションからNFTをmintしよう.md

Explains the initial part of the `imageToNFT` function, showing how a `Web3Storage` client is instantiated with an API key and how the image target from the event object `e` is accessed. This setup is crucial for preparing the image for IPFS upload.

```JavaScript
// NftUploader.jsx
const imageToNFT = async (e) => {
        const client = new Web3Storage({ token: API_KEY })
        const image = e.target
        console.log(image)

```

--------------------------------

### Install IndexedDB Library

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/ICP-Encrypted-Notes/ja/section-2/lesson-4_公開鍵・秘密鍵を生成しよう.md

This command installs the `idb` library, a lightweight wrapper for IndexedDB, which is used for client-side data storage in web browsers.

```bash
npm install idb
```

--------------------------------

### Create a New Local Subgraph Instance

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/TheGraph-ScaffoldEth2/en/section-0/lesson-5_Deploy to localhost.md

This command initializes a new local Subgraph environment. It is a one-time setup step required before deploying your Subgraph for the first time.

```Shell
yarn local-create
```

--------------------------------

### NEAR API Utility Functions in utils.js

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/NEAR-BikeShare/ja/section-2/lesson-4_フロントとコントラクトを接続しよう.md

Shows the initial setup of `utils.js`, demonstrating the import of `near-api-js` modules and `getConfig`. It outlines the purpose of `initContract` for contract initialization and mentions the subsequent implementation of contract API functions.

```javascript
// utils.js

import { connect, Contract, keyStores, WalletConnection } from "near-api-js";
import getConfig from "./config";

const nearConfig = getConfig(process.env.NODE_ENV || "development");

// コントラクトの初期化とグローバル変数windowのセット
export async function initContract() {
  // ...
}

// コントラクトAPI の実装 ...
```

--------------------------------

### Install `web3.storage` Library

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/ETH-NFT-Maker/ja/section-3/lesson-2_webアプリケーションからNFTをmintしよう.md

Installs the `web3.storage` library as a dependency for the client application using `yarn workspace`. This library provides functionalities for interacting with IPFS, enabling decentralized storage of NFT assets.

```Shell
yarn workspace client add web3.storage@^4.5.4
```

--------------------------------

### Install Hardhat and OpenZeppelin Contract Dependencies

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/Polygon-Whitelist-NFT/en/section-5/lesson-1_Monorepo configration.md

Installs a comprehensive set of development dependencies required for Hardhat, including testing utilities, network helpers, Ethers.js integrations, Typechain, and OpenZeppelin contracts for secure smart contract development.

```bash
yarn workspace contract add @openzeppelin/contracts@^5.0.0 && yarn workspace contract add --dev @nomicfoundation/hardhat-chai-matchers@^1.0.0 @nomicfoundation/hardhat-network-helpers@^1.0.8 @nomicfoundation/hardhat-toolbox@^2.0.1 @nomiclabs/hardhat-ethers@^2.0.0 @nomiclabs/hardhat-etherscan@^3.0.0 @typechain/ethers-v5@^10.1.0 @typechain/hardhat@^6.1.2 @types/chai@^4.2.0 @types/mocha@^9.1.0 chai@^4.3.7 hardhat-gas-reporter@^1.0.8 solidity-coverage@^0.8.1 ts-node@^8.0.0 typechain@^8.1.0 typescript@^4.5.0
```

--------------------------------

### Setup Whitelist Contract Test Fixture

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/Polygon-Whitelist-NFT/en/section-5/lesson-2_Automated contract testing.md

This fixture defines the setup for Whitelist contract tests, deploying the contract and assigning signers (owner, alice, bob) for consistent test execution. It uses Hardhat's `loadFixture` to snapshot the state, ensuring a clean slate for each test.

```typescript
describe('Whitelist', function () {
  // We define a fixture to reuse the same setup in every test.
  // We use loadFixture to run this setup once, snapshot that state,
  // and reset Hardhat Network to that snapshot in every test.
  async function deployWhitelistFixture() {
    // Contracts are deployed using the first signer/account by default.
    const [owner, alice, bob] = await ethers.getSigners();

    const whitelistFactory = await ethers.getContractFactory('Whitelist');
    const whitelist = await whitelistFactory.deploy([
      owner.address,
      alice.address,
    ]);

    return { whitelist, owner, alice, bob };
  }

  // Test case
  describe('addToWhitelist', function () {
    context('when user is not owner', function () {
      it('reverts', async function () {
        // Setup
        const { whitelist, alice, bob } = await loadFixture(
          deployWhitelistFixture,
        );

        ...
```

--------------------------------

### Run The Graph Node with Docker Compose

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/TheGraph-ScaffoldEth2/en/section-0/lesson-4_Setup The Graph.md

Initiates The Graph node by spinning up all necessary containers using docker-compose via a yarn command. This command should be kept running to monitor log output and ensure the node is operational.

```Shell
yarn run-node
```

--------------------------------

### Initialize User Data and Profile on Component Mount

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/ASTAR-SocialFi/ja/section-2/lesson-3_それぞれの画面を作成しよう.md

This code block, typically found within a React `useEffect` hook, handles the initial setup and data fetching when the component mounts. It checks for application setup status, retrieves the user's profile and friend list, fetches the account balance, and manages the creation and verification of the user's profile both in the frontend state and on the contract.

```typescript
setActingAccount: setActingAccount!,
      setIsSetup: setIsSetup,
    });
    if (!isSetup) return;

    // get profile
    getProfileForMessage({
      api: api,
      userId: actingAccount?.address,
      setImgUrl: setImgUrl,
      setMyImgUrl: setMyImgUrl,
      setFriendList: setFriendList,
      setProfile: setProfile,
    });
    // create message member list UI
    createMessageMemberList();

    balanceOf({
      api: api,
      actingAccount: actingAccount!,
      setBalance: setBalance,
    });

    // check if already created profile in frontend
    if (isCreatedFnRun) return;

    // check if already created profile in contract
    checkCreatedInfo({
      api: api,
      userId: actingAccount?.address,
      setIsCreatedProfile: setIsCreatedProfile,
    });
    if (isCreatedProfile) return;
    // create profile
    createProfile({ api: api, actingAccount: actingAccount! });
    setIsCreatedFnRun(true);
  });
```

--------------------------------

### Updated package.json with Hardhat and OpenZeppelin Dependencies

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/Polygon-Whitelist-NFT/en/section-5/lesson-1_Monorepo configration.md

Displays the `package.json` file after all necessary Hardhat and OpenZeppelin contract dependencies have been installed, showing both `devDependencies` and `dependencies` sections.

```json
{
  "name": "contract",
  "version": "1.0.0",
  "private": true,
  "devDependencies": {
    "@nomicfoundation/hardhat-chai-matchers": "^1.0.0",
    "@nomicfoundation/hardhat-network-helpers": "^1.0.8",
    "@nomicfoundation/hardhat-toolbox": "^2.0.1",
    "@nomiclabs/hardhat-ethers": "^2.0.0",
    "@nomiclabs/hardhat-etherscan": "^3.0.0",
    "@typechain/ethers-v5": "^10.1.0",
    "@typechain/hardhat": "^6.1.2",
    "@types/chai": "^4.2.0",
    "@types/mocha": "^9.1.0",
    "chai": "^4.3.7",
    "hardhat": "^2.14.0",
    "hardhat-gas-reporter": "^1.0.8",
    "solidity-coverage": "^0.8.1",
    "ts-node": "^8.0.0",
    "typechain": "^8.1.0",
    "typescript": "^4.5.0"
  },
  "dependencies": {
    "@openzeppelin/contracts": "^4.8.2"
  }
}
```

--------------------------------

### Example Output of Successful Subgraph Deployment

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/TheGraph-ScaffoldEth2/en/section-0/lesson-5_Deploy to localhost.md

This snippet shows the expected console output upon a successful Subgraph deployment. It includes the unique build ID and the local GraphQL endpoint where your Subgraph can be queried.

```Shell
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
```

--------------------------------

### Log in to NEAR CLI

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/NEAR-Election-dApp/ja/section-1/lesson-4_NFTの情報を確認できるようにしよう.md

This shell command initiates the NEAR CLI login process, which authenticates the user's account and allows them to perform operations like deploying contracts and calling contract methods.

```Shell
near login
```

--------------------------------

### Open `Web3Mint.json` in Client `utils` Directory

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/ETH-NFT-Maker/ja/section-3/lesson-2_webアプリケーションからNFTをmintしよう.md

Opens the newly created `Web3Mint.json` file in the `client/src/utils/` directory using VS Code. This step prepares the file for pasting the ABI content, making it ready for use by the client application.

```Shell
code client/src/utils/Web3Mint.json
```

--------------------------------

### Example GraphQL Data Response

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/TheGraph-ScaffoldEth2/en/section-2/lesson-5_Graph CLI.md

An example of the JSON data structure returned by the GraphQL query, illustrating a single 'sendMessage' entry with its associated fields: id, _from, _to, and message.

```JSON
{
  "data": {
    "sendMessages": [
      {
        "id": "0x053e32f85f9f485334119585abfc73e507a4ce86e968130b90410df70eb3a66e71000000",
        "_from": "0x142cd5d7ac1ea8919f1644af1870792b9f77d44a",
        "_to": "0x007e483cf6df009db5ec571270b454764d954d95",
        "message": "I love you"
      }
    ]
  }
}
```

--------------------------------

### Example GraphQL Query for Subgraph Data

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/TheGraph-ScaffoldEth2/en/section-2/lesson-5_Graph CLI.md

A GraphQL query example designed to retrieve the first 5 'sendMessages' entries from the deployed subgraph. It fetches the unique identifier, sender, recipient, and message content.

```GraphQL
{
  sendMessages(first: 5) {
    id
    _from
    _to
    message
  }
}
```

--------------------------------

### Create Next.js Application

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/Polygon-Whitelist-NFT/en/section-4/lesson-2_Build Frontend.md

Initialize a new Next.js project using yarn, which will prompt for project configuration details.

```bash
yarn create next-app
```

--------------------------------

### Clean The Graph Node Data

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/TheGraph-ScaffoldEth2/en/section-0/lesson-4_Setup The Graph.md

Executes a yarn command to clean up any old data associated with The Graph node. This is useful for resetting the environment or starting fresh.

```Shell
yarn clean-node
```

--------------------------------

### Integrate Components into Main App

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/ICP-Static-Site/ja/section-2/lesson-4_Webサイトを完成させよう.md

Shows the modifications to `App.svelte` to import and include the newly created `Home`, `About`, and `Portfolio` components, making them visible and functional in the main application layout.

```diff
<script>
  import Nav from './lib/Nav.svelte';
+ import Home from './lib/Home.svelte';
+ import About from './lib/About.svelte';
+ import Portfolio from './lib/Portfolio.svelte';
  import Footer from './lib/Footer.svelte';
</script>

<main>
  <div>
    <Nav />
+   <Home />
+   <About />
+   <Portfolio />
    <Footer />
  </div>
</main>
```

--------------------------------

### Fungible Token (FT) Contract Interaction Setup

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/ASTAR-SocialFi/ja/section-2/lesson-1_コントラクトの関数を呼び出せるようにしよう.md

Partial code from `FT.tsx` demonstrating imports, type definitions (`PropsBO`, `PropsTF`, `PropsDRL`), and the `contractAddress` for Fungible Token contract interactions. It sets up the basic structure for FT-related functions like `balanceOf`.

```typescript
import { ApiPromise } from "@polkadot/api";
import { ContractPromise } from "@polkadot/api-contract";
import { InjectedAccountWithMeta } from "@polkadot/extension-inject/types";
import { Dispatch } from "react";

import abi from "../metadata.json";

type PropsBO = {
  api: ApiPromise | undefined;
  actingAccount: InjectedAccountWithMeta;
  setBalance: Dispatch<React.SetStateAction<string>>;
};

type PropsTF = {
  api: ApiPromise | undefined;
  actingAccount: InjectedAccountWithMeta;
  amount: number;
};

type PropsDRL = {
  api: ApiPromise | undefined;
  actingAccount: InjectedAccountWithMeta;
};

const contractAddress: string = process.env
  .NEXT_PUBLIC_CONTRACT_ADDRESS as string;

export const balanceOf = async (props: PropsBO) => {
```

--------------------------------

### Display Registration Requirement UI (React)

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/NEAR-BikeShare/ja/section-2/lesson-4_フロントとコントラクトを接続しよう.md

This component renders a user interface indicating that registration in an FT contract is required before using the bike application. It includes a sign-out button and a button to initiate a storage deposit, guiding the user through the initial setup process.

```javascript
const requireRegistration = () => {
    return (
      <div>
        {signOutButton()}
        <div style={{ textAlign: "center" }}>
          <h5>
            Registration in ft contract is required before using the bike app
          </h5>
        </div>
        <main>
          <p style={{ textAlign: "center", marginTop: "2.5em" }}>
            <button>storage deposit</button>
          </p>
        </main>
      </div>
    );
  };
```

--------------------------------

### Svelte Each Block for Project Iteration

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/ICP-Static-Site/ja/section-2/lesson-4_Webサイトを完成させよう.md

Demonstrates how to use Svelte's `{#each}` block to iterate over the `projects` array, dynamically rendering each project as a clickable link within the portfolio section.

```js
<!-- `each`ブロックでループ処理を行う -->
{#each projects as project}
  <div class="p-2 md:w-1/3 w-full">
    <div
      class="bg-gray-400 text-white hover:bg-gray-800 cursor-pointer rounded p-4 text-center "
    >
      <a href={project.url}>{project.name}</a>
    </div>
  </div>
{/each}
```

--------------------------------

### Create Svelte Component Files

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/ICP-Static-Site/ja/section-2/lesson-4_Webサイトを完成させよう.md

This shell command creates new empty Svelte component files for the Home, About, and Portfolio sections of the website within the `src/lib/` directory.

```bash
touch ./src/lib/Home.svelte ./src/lib/About.svelte ./src/lib/Portfolio.svelte
```

--------------------------------

### Asynchronously Check Phantom Wallet Connection

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/Solana-NFT-Drop/ja/section-1/lesson-3_webサイトにウォレット連携ボタンを実装しよう.md

This asynchronous function checks for the presence of a Phantom wallet in the browser's window object. If found, it attempts to connect silently (onlyIfTrusted) and stores the public key. If the Solana object is not found, it alerts the user to install a Phantom Wallet.

```typescript
const checkIfWalletIsConnected = async () => {
  try {
    const { solana } = window;

    if (solana && solana.isPhantom) {
      console.log("Phantom wallet found!");

      const response = await solana.connect({ onlyIfTrusted: true });
      console.log("Connected with Public Key:", response.publicKey.toString());

      /*
       * ユーザーの公開鍵を後から使える状態にします。
       */
      setWalletAddress(response.publicKey.toString());
    } else {
      alert("Solana object not found! Get a Phantom Wallet 👻");
    }
  } catch (error) {
    console.error(error);
  }
};
```

--------------------------------

### Create `Web3Mint.json` File in `utils` Directory

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/ETH-NFT-Maker/ja/section-3/lesson-2_webアプリケーションからNFTをmintしよう.md

Creates an empty `Web3Mint.json` file within the `client/src/utils/` directory. This file serves as a placeholder and will later be populated with the copied ABI content from the contract artifacts.

```Shell
touch src/utils/Web3Mint.json
```

--------------------------------

### Create utils Directory and token.js File

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/ICP-Basic-DEX/ja/section-3/lesson-3_ユーザーボードを作成しよう.md

Creates a new 'utils' directory and an empty 'token.js' file inside it, intended for storing utility functions and token-related data for the frontend.

```Bash
mkdir ./src/icp_basic_dex_frontend/src/utils && touch ./src/icp_basic_dex_frontend/src/utils/token.js
```

--------------------------------

### Example Deployed Contract Address

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/ETH-NFT-Maker/ja/section-3/lesson-2_webアプリケーションからNFTをmintしよう.md

An example of a deployed smart contract address obtained after deployment, which should be used to replace the placeholder in `CONTRACT_ADDRESS`.

```plaintext
Contract deployed to: 0x88a0e9c2F3939598c402eccb7Ae1612e45448C04
```

--------------------------------

### Configure Next.js Project Creation

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/Polygon-Whitelist-NFT/en/section-4/lesson-2_Build Frontend.md

Interactive prompts and selected options for creating the Next.js 'client' project, configuring it with TypeScript and ESLint, while opting out of Tailwind CSS, `src/` directory, App Router, and custom import aliases.

```bash
✔ What is your project named? … client
✔ Would you like to use TypeScript? … [Yes]
✔ Would you like to use ESLint? … [Yes]
✔ Would you like to use Tailwind CSS? … [No]
✔ Would you like to use `src/` directory? … [No]
✔ Would you like to use App Router? (recommended) … [No]
✔ Would you like to customize the default import alias? … [No]
```

--------------------------------

### Deploy Contract to Sepolia Testnet

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/TheGraph-ScaffoldEth2/en/section-2/lesson-3_Deploy and verify.md

Deploys the smart contract to the Sepolia testnet. This command initiates the deployment process, compiling and sending the contract to the specified network.

```bash
yarn deploy --network sepolia
```

--------------------------------

### Initialize Web3 Client and Contract Model

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/NEAR-MulPay/ja/section-2/lesson-1_UIの基礎を実装しよう.md

Initializes the `ContractModel` and sets up the `Web3Client` for interacting with the Aurora testnet. It uses environment variables for the Infura key and an HTTP client for network requests.

```Dart
  ContractModel() {
    init();
  }

  Future<void> init() async {
    var httpClient = Client();

    auroraClient =
        Web3Client(dotenv.env["AURORA_TESTNET_INFURA_KEY"]!, httpClient);
  }
```

--------------------------------

### Create UserBoard.jsx File

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/ICP-Basic-DEX/ja/section-3/lesson-3_ユーザーボードを作成しよう.md

Creates the UserBoard.jsx file within the components directory, which will house the user board's UI and logic.

```Bash
touch ./src/icp_basic_dex_frontend/src/components/UserBoard.jsx
```

--------------------------------

### Install ts-node Globally for Subgraph Development

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/TheGraph-ScaffoldEth2/en/section-0/lesson-5_Deploy to localhost.md

If you encounter `ts-node` related errors during Subgraph deployment or compilation, this command can be used to install `ts-node` globally via npm, resolving potential dependency issues.

```Shell
npm install -g ts-node
```

--------------------------------

### Updated Frontend Directory Structure

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/ICP-Basic-DEX/ja/section-3/lesson-3_ユーザーボードを作成しよう.md

Shows the updated directory structure of the frontend application after creating UserBoard.jsx and utils/token.js, highlighting the new additions.

```Diff
 src/
 ├── App.css
 ├── App.jsx
 ├── components/
 │   ├── Header.jsx
+│   └── UserBoard.jsx
+├── utils/
+│   └── token.js
 ├── index.html
 └── index.js
```

--------------------------------

### Update Home Module CSS Styles

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/Polygon-Whitelist-NFT/en/section-4/lesson-2_Build Frontend.md

CSS rules for a container, labels, input fields, and buttons, defining their sizing, spacing, and basic styling within the Home module.

```css
.container {
  width: 100%;
  max-width: 500px;
}

.container label {
  font-size: 1.5rem;
  margin-right: 0.5rem;
}

.container input {
  width: 70%;
  font-size: 1.25rem;
  padding: 10px;
  border-radius: 5px;
}

.container button {
  width: 100%;
  font-size: 1.25rem;
  padding: 12px 20px;
  margin-right: 0.5rem;
  border-radius: 5px;
}

.container button:hover {
  background-color: #ddd;
}
```

--------------------------------

### React Home Component Initialization

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/Polygon-Whitelist-NFT/en/section-4/lesson-2_Build Frontend.md

Defines the main React functional component for the DApp. It initializes two state variables using the `useState` hook: `amount` for a default transaction value and `connectStatus` to track the MetaMask connection state.

```JavaScript
export default function Home() {
  const [amount] = useState("0.01");
  const [connectStatus, setConnectStatus] = useState("connect");
```

--------------------------------

### Mapping Type Method: get (APIDOC)

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/ASTAR-SocialFi/ja/section-1/lesson-2_投稿機能とフォロー機能を実装しよう.md

The `get` method, available on `Mapping` types, takes a key as an argument and returns the corresponding value. If the key does not exist, it typically returns `None` or an equivalent empty option.

```APIDOC
Mapping.get(key: K) -> Option<V>
```

--------------------------------

### Example ERC20 approve Call

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/AVAX-AMM/ja/section-1/lesson-3_流動性の提供を実装しよう.md

Demonstrates a practical example of how account A approves account B to spend 30 units of TokenX. This call must be made by the token owner (Account A) to authorize the spender (Account B) to later use `transferFrom`.

```APIDOC
TokenX.approve(B_address, 30);
```

--------------------------------

### Example NFT Metadata for Bored Ape Yacht Club

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/Polygon-Whitelist-NFT/en/section-3/lesson-1_Metadata and IPFS Introduction.md

An example of NFT metadata for a specific Bored Ape Yacht Club NFT, demonstrating how additional features like 'attributes' (trait_type and value pairs) can be included beyond the basic ERC721 schema to describe unique characteristics.

```json
{
  "image": "ipfs://QmRRPWG96cmgTn2qSzjwr2qvfNEuhunv6FNeMFGa9bx6mQ",
  "attributes": [
    {
      "trait_type": "Earring",
      "value": "Silver Hoop"
    },
    {
      "trait_type": "Background",
      "value": "Orange"
    },
    {
      "trait_type": "Fur",
      "value": "Robot"
    },
    {
      "trait_type": "Clothes",
      "value": "Striped Tee"
    },
    {
      "trait_type": "Mouth",
      "value": "Discomfort"
    },
    {
      "trait_type": "Eyes",
      "value": "X Eyes"
    }
  ]
}
```

--------------------------------

### Connect DApp to MetaMask and Update Status

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/Polygon-Whitelist-NFT/en/section-4/lesson-2_Build Frontend.md

This function handles the connection process to MetaMask. It checks if MetaMask is installed, requests user accounts, and then calls `switchToMumbai` to ensure the correct network is selected. It updates a React state variable (`connectStatus`) to reflect the connection status, such as 'connected' or 'Please install MetaMask'.

```TypeScript
    const [connectStatus, setConnectStatus] = useState('connect');

    const connect = async () => {
        if (typeof window.ethereum !== 'undefined') {
            try {
                await window.ethereum.request({
                    method: 'eth_requestAccounts',
                });
            } catch (error) {
                console.log(error);
            }
            await switchToMumbai();
            setConnectStatus('connected');
        } else {
            setConnectStatus('Please install MetaMask');
        }
    };
```

--------------------------------

### Example NFT Metadata JSON Structures

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/Polygon-Whitelist-NFT/en/section-3/lesson-2_Setup Metadata.md

These JSON snippets illustrate the structure for NFT metadata, specifically for different shield NFTs (Bronze, Silver, Gold, Platinum). Each example includes a unique name, description, an IPFS URI pointing to the associated image, and an 'attributes' array detailing properties like rarity. The 'image' field's value is an IPFS CID, which should be updated with the actual CID of the uploaded image.

```json
{
  "name": "Bronze Shield",
  "description": "As a token of appreciation, ChainIDE is gifting its users with this rare Bronze Shield.",
  "image": "ipfs://bafybeid25fu5kqfwhy67hryylwiuerobvutztmm24g2yimkpezhf2i76vq",
  "attributes": [
    {
      "trait_type": "Rarity",
      "value": "Rare"
    }
  ]
}
```

```json
{
  "name": "Silver Shield",
  "description": "To show our gratitude to ChainIDE users, we're offering this mythical Silver Shield as a gift.",
  "image": "ipfs://bafybeigpqjtc6dg2aw7up7b6k6lou2rn5vmqnce3sslhgukq4jexwjpuha",
  "attributes": [
    {
      "trait_type": "Rarity",
      "value": "Mythical"
    }
  ]
}
```

```json
{
  "name": "Gold Shield",
  "description": "As a gesture of thanks, ChainIDE is presenting its users with this legendary Gold Shield.",
  "image": "ipfs://bafybeifj4zvhyegddyerjwwhmzrepa5ogsuo2r73sor2utwjjdkilcdw24",
  "attributes": [
    {
      "trait_type": "Rarity",
      "value": "Legendary"
    }
  ]
}
```

```json
{
  "name": "Platinum Shield",
  "description": "ChainIDE is honored to gift its users with this immortal Platinum Shield as a symbol of our appreciation.",
  "image": "ipfs://bafybeifmjxhldqtvpy2dd26l7syfbhafiqyyylovupvljnqgcmfin2mzsm",
  "attributes": [
    {
      "trait_type": "Rarity",
      "value": "Immortal"
    }
  ]
}
```

--------------------------------

### Initialize Hardhat Project

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/Polygon-Whitelist-NFT/en/section-5/lesson-1_Monorepo configration.md

Executes the Hardhat initialization command within the 'packages/contract' directory to set up a new Hardhat project, typically prompting for project type and configuration options.

```bash
npx hardhat init
```

--------------------------------

### Implement Portfolio Page Svelte Component

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/ICP-Static-Site/ja/section-2/lesson-4_Webサイトを完成させよう.md

Defines the `Portfolio.svelte` component, which displays a list of projects. It initializes a `projects` array and uses Svelte's `{#each}` block to dynamically render each project. An `id='portfolio'` attribute is used for navigation.

```js
<script>
  let projects = [
    { name: 'ETH dApp', url: 'YOUR_PROJECT_URL' },
    { name: 'ETH NFT Collection', url: 'YOUR_PROJECT_URL' },
    { name: 'ETH NFT Maker', url: 'YOUR_PROJECT_URL' },
    { name: 'ETH NFT Game', url: 'YOUR_PROJECT_URL' },
  ];
</script>

<!-- Nav.svelteの`href="#portfolio"`と紐づく`id`を指定する -->
<section id="portfolio">
  <div class="container mx-auto">
    <div class="py-32">
      <h1 class="text-center mb-10 font-medium text-3xl">PORTFOLIO</h1>
      <div class="flex flex-wrap lg:w-4/5 sm:mx-auto">
        <!-- `each`ブロックでループ処理を行う -->
        {#each projects as project}
          <div class="p-2 md:w-1/3 w-full">
            <div
              class="bg-gray-400 text-white hover:bg-gray-800 cursor-pointer rounded p-4 text-center "
            >
              <a href={project.url}>{project.name}</a>
            </div>
          </div>
        {/each}
      </div>
    </div>
  </div>
</section>
```

--------------------------------

### Add Hardhat as Development Dependency

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/Polygon-Whitelist-NFT/en/section-5/lesson-1_Monorepo configration.md

Installs the Hardhat framework as a development dependency specifically for the 'contract' workspace using Yarn's workspace functionality.

```bash
yarn workspace contract add --dev hardhat@^2.14.0
```

--------------------------------

### JavaScript: Initialize NFT.Storage Client

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/XRPL-NFT-Maker/ja/section-3/lesson-2_webアプリケーションからNFTをmintしよう.md

This JavaScript snippet initializes the `NFTStorage` client, providing it with an API token. This client instance is used throughout the application to facilitate the secure and efficient upload of NFT images and metadata to the IPFS network, a prerequisite for minting.

```javascript
const nftStorage = new NFTStorage({ token: "api-key" });
```

--------------------------------

### Motoko `addUser` - Handling New Users

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/ICP-Basic-DEX/ja/section-1/lesson-2_Faucet機能を実装しよう.md

This part of the `addUser` function handles the scenario where a user is receiving a token for the first time. It creates a new array for the token and stores it in `faucet_book` associated with the user.

```motoko
case null {
  let new_data = Array.make<Token>(token);
  faucet_book.put(user, new_data);
};
```

--------------------------------

### Deploy Subgraph to Studio

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/TheGraph-ScaffoldEth2/en/section-2/lesson-5_Graph CLI.md

Deploys the built subgraph to The Graph Studio. This command will prompt for a version number, allowing for version control of your deployed subgraphs.

```Shell
graph deploy --studio name_of_your_subgraph
```

--------------------------------

### Verify Graph CLI Authentication Success

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/TheGraph-ScaffoldEth2/en/section-2/lesson-5_Graph CLI.md

This snippet shows the expected success message displayed in the terminal after a successful authentication of the Graph CLI with Subgraph Studio.

```Shell
Deploy key set for https://api.studio.thegraph.com/deploy/
```

--------------------------------

### Create NFT Metadata JSON Files

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/Polygon-Whitelist-NFT/en/section-3/lesson-2_Setup Metadata.md

Example JSON structures for NFT metadata, including name, description, image placeholder, and attributes. These files are prepared for different rarity levels of 'Shield' NFTs, with image links to be completed after IPFS upload.

```json
{
  "name": "Bronze Shield",
  "description": "As a token of appreciation, ChainIDE is gifting its users with this rare Bronze Shield.",
  "image": "ipfs://",
  "attributes": [
    {
      "trait_type": "Rarity",
      "value": "Rare"
    }
  ]
}
```

```json
{
  "name": "Silver Shield",
  "description": "To show our gratitude to ChainIDE users, we're offering this mythical Silver Shield as a gift.",
  "image": "ipfs://",
  "attributes": [
    {
      "trait_type": "Rarity",
      "value": "Mythical"
    }
  ]
}
```

```json
{
  "name": "Gold Shield",
  "description": "As a gesture of thanks, ChainIDE is presenting its users with this legendary Gold Shield.",
  "image": "ipfs://",
  "attributes": [
    {
      "trait_type": "Rarity",
      "value": "Legendary"
    }
  ]
}
```

```json
{
  "name": "Platinum Shield",
  "description": "ChainIDE is honored to gift its users with this immortal Platinum Shield as a symbol of our appreciation.",
  "image": "ipfs://",
  "attributes": [
    {
      "trait_type": "Rarity",
      "value": "Immortal"
    }
  ]
}
```

--------------------------------

### Import GenerateWallet Component into Home

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/Solana-Wallet/ja/section-1/lesson-1_ウォレットを作成しよう.md

This JavaScript snippet imports the `GenerateWallet` component from its relative path into the `pages/index.js` file, making it available for use within the `Home` component.

```js
import GenerateWallet from "../components/GenerateWallet";
```

--------------------------------

### Get Booking Information for Guest (JavaScript)

Source: https://github.com/unchain-tech/unchain-projects/blob/main/docs/NEAR-Hotel-Booking-dApp/ja/section-3/lesson-1_フロントエンドの基礎を実装しよう.md

Fetches all booking information for a specific guest from the smart contract. It requires a `guest_id` and returns details about rooms booked by that guest.

```js
export async function get_booking_info_for_guest(guest_id) {
  const guestBookedRooms = await window.contract.get_booking_info_for_guest({
    guest_id,
  });
  return guestBookedRooms;
}
```