.gitpod.yml
.prettierrc.json
README.md
__test__
    avalanche.test.ts
    polygon.test.ts
    secret.test.ts
    solana.test.ts
components
    protocols
        avalanche
            components
                index.ts
            lib
                index.ts
        celo
            components
                index.ts
            lib
                index.ts
        ceramic
            lib
                figmentLearnSchema.json
                figmentLearnSchemaCompact.json
                identityStore
                    LocalStorage.ts
                    index.ts
                index.ts
            types
                index.ts
        near
            components
                index.ts
            lib
                index.ts
        polkadot
            components
                index.ts
            lib
                index.ts
        polygon
            challenges
                balance.ts
                connect.ts
                deploy.ts
                getter.ts
                index.ts
                query.ts
                restore.ts
                setter.ts
                transfer.ts
            components
                index.ts
            lib
                index.ts
        pyth
            components
                index.ts
            lib
                index.ts
                swap.ts
        secret
            components
                index.ts
            lib
                index.ts
        solana
            components
                index.ts
            lib
                index.ts
        tezos
            components
                index.ts
            lib
                index.ts
        the_graph
            graphql
                query.ts
        the_graph_near
            graphql
                query.ts
    shared
        Button.styles.ts
        CustomMarkdown
            Markdown.styles.ts
            VideoPlayer
                VideoPlayer.styles.ts
            utils
                markdown-utils.ts
                string-utils.ts
        ProtocolNav
            ProtocolNav.styles.ts
contracts
    celo
        HelloWorld.json
    near
        Cargo.toml
        README.md
        compile.js
        src
            lib.rs
    polygon
        SimpleStorage
            README.md
            SimpleStorage.json
            migrations
                1_initial_migration.js
                2_deploy_contracts.js
            package-lock.json
            package.json
            truffle-config.js
    solana
        program
            Cargo.toml
            Xargo.toml
            src
                lib.rs
            tests
                lib.rs
    tezos
        counter.js
    the_graph
        CryptopunksData.abi.json
docker
    docker-compose-near.yml
    docker-compose.yml
hooks
    index.ts
    useColors.ts
    useLocalStorage.ts
    useSteps.ts
jest.config.js
lib
    constants.ts
markdown
    PREFACE.md
    avalanche
        CHAIN_CONNECTION.md
        CREATE_KEYPAIR.md
        EXPORT_TOKEN.md
        FINAL.md
        GET_BALANCE.md
        IMPORT_TOKEN.md
        PROJECT_SETUP.md
        TRANSFER_TOKEN.md
    celo
        CHAIN_CONNECTION.md
        CREATE_ACCOUNT.md
        DEPLOY_CONTRACT.md
        FINAL.md
        GET_BALANCE.md
        GET_CONTRACT_VALUE.md
        PROJECT_SETUP.md
        SET_CONTRACT_VALUE.md
        SWAP_TOKEN.md
        TRANSFER_TOKEN.md
    ceramic
        BASIC_PROFILE.md
        CHAIN_CONNECTION.md
        CUSTOM_DEFINITION.md
        FINAL.md
        LOGIN.md
        PROJECT_SETUP.md
    near
        CHAIN_CONNECTION.md
        CREATE_ACCOUNT.md
        CREATE_KEYPAIR.md
        DEPLOY_CONTRACT.md
        FINAL.md
        GET_BALANCE.md
        GET_CONTRACT_VALUE.md
        PROJECT_SETUP.md
        SET_CONTRACT_VALUE.md
        TRANSFER_TOKEN.md
    polkadot
        CHAIN_CONNECTION.md
        CREATE_ACCOUNT.md
        ESTIMATE_DEPOSIT.md
        ESTIMATE_FEES.md
        FINAL.md
        GET_BALANCE.md
        PROJECT_SETUP.md
        RESTORE_ACCOUNT.md
        TRANSFER_TOKEN.md
    polygon
        CHAIN_CONNECTION.md
        DEPLOY_CONTRACT.md
        FINAL.md
        GET_BALANCE.md
        GET_CONTRACT_VALUE.md
        PROJECT_SETUP.md
        QUERY_CHAIN.md
        RESTORE_ACCOUNT.md
        SET_CONTRACT_VALUE.md
        TRANSFER_TOKEN.md
    pyth
        FINAL.md
        PROJECT_SETUP.md
        PYTH_CONNECT.md
        PYTH_EXCHANGE.md
        PYTH_LIQUIDATE.md
        PYTH_SOLANA_WALLET.md
        PYTH_VISUALIZE_DATA.md
    secret
        CHAIN_CONNECTION.md
        CREATE_ACCOUNT.md
        DEPLOY_CONTRACT.md
        FINAL.md
        GET_BALANCE.md
        GET_CONTRACT_VALUE.md
        PROJECT_SETUP.md
        SET_CONTRACT_VALUE.md
        TRANSFER_TOKEN.md
    solana
        CHAIN_CONNECTION.md
        CREATE_ACCOUNT.md
        DEPLOY_CONTRACT.md
        FINAL.md
        FUND_ACCOUNT.md
        GET_BALANCE.md
        GET_CONTRACT_VALUE.md
        PROJECT_SETUP.md
        SET_CONTRACT_VALUE.md
        SOLANA_CREATE_GREETER.md
        TRANSFER_TOKEN.md
    tezos
        CHAIN_CONNECTION.md
        CREATE_ACCOUNT.md
        DEPLOY_CONTRACT.md
        FINAL.md
        GET_BALANCE.md
        GET_CONTRACT_VALUE.md
        PROJECT_SETUP.md
        SET_CONTRACT_VALUE.md
        TRANSFER_TOKEN.md
    the_graph
        FINAL.md
        GRAPH_NODE.md
        PROJECT_SETUP.md
        SUBGRAPH_MANIFEST.md
        SUBGRAPH_MAPPINGS.md
        SUBGRAPH_QUERY.md
        SUBGRAPH_SCAFFOLD.md
        SUBGRAPH_SCHEMA.md
    the_graph_near
        FINAL.md
        GRAPH_NODE.md
        PROJECT_SETUP.md
        SUBGRAPH_MANIFEST.md
        SUBGRAPH_MAPPINGS.md
        SUBGRAPH_QUERY.md
        SUBGRAPH_SCAFFOLD.md
        SUBGRAPH_SCHEMA.md
                |     
n : |
next-env.d.ts
next.config.js
package.json
pages
    api
        avalanche
            account.ts
            balance.ts
            connect.ts
            export.ts
            import.ts
            transfer.ts
        celo
            account.ts
            balance.ts
            connect.ts
            deploy.ts
            getter.ts
            setter.ts
            swap.ts
            transfer.ts
        near
            balance.ts
            check-account.ts
            connect.ts
            create-account.ts
            deploy.ts
            getter.ts
            keypair.ts
            setter.ts
            transfer.ts
        polkadot
            account.ts
            balance.ts
            connect.ts
            deposit.ts
            estimate.ts
            restore.ts
            transfer.ts
        pyth
            connect.ts
        secret
            account.ts
            balance.ts
            connect.ts
            deploy.ts
            getter.ts
            setter.ts
            transfer.ts
        solana
            balance.ts
            connect.ts
            deploy.ts
            fund.ts
            getter.ts
            greeter.ts
            keypair.ts
            setter.ts
            transfer.ts
        tezos
            account.ts
            balance.ts
            connect.ts
            deploy.ts
            getter.ts
            setter.ts
            transfer.ts
        the-graph-near
            entity.ts
            manifest.ts
            scaffold.ts
        the-graph
            entity.ts
            manifest.ts
            mapping.ts
            node.ts
            scaffold.ts
public
    discord.svg
    figment-learn-compact.svg
    vercel.svg
theme
    colors.ts
    index.ts
    media.ts
tsconfig.json
types
    index.ts
utils
    colors.ts
    context.ts
    datahub.ts
    markdown.ts
    networks.ts
    pages.ts
    string-utils.ts
    tracking-utils.ts

Based on:

MetaCoin tutorial from Truffle docs https://www.trufflesuite.com/docs/truffle/quickstart
SimpleStorage example contract from Solidity docs https://docs.soliditylang.org/en/v0.4.24/introduction-to-smart-contracts.html#storage

1. Install truffle (https://www.trufflesuite.com/docs/truffle/getting-started/installation)
   `npm install -g truffle`

2. Navigate to this directory (/contracts/polygon/SimpleStorage)

3. Install dependencies
   `yarn`

4. Test contract
   `truffle test ./test/TestSimpleStorage.sol`

   **Possible issue:** "Something went wrong while attempting to connect to the network. Check your network configuration. Could not connect to your Ethereum client with the following parameters:"

   **Solution:** run `truffle develop` and make sure port matches the one in truffle-config.js under development and test networks

5. Run locally via `truffle develop`
   $ truffle develop

   ```
   migrate

   let instance = await SimpleStorage.deployed();

   let storedDataBefore = await instance.get();

   storedDataBefore.toNumber() // Should print 0

   instance.set(50);

   let storedDataAfter = await instance.get();

   storedDataAfter.toNumber() // Should print 50
   ```

6. Create Polygon testnet account

   - Install MetaMask (https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn?hl=en)
   - Add a custom network with the following params:
     Network Name: "Polygon Mumbai"
     RPC URL: https://rpc-mumbai.maticvigil.com/
     Chain ID: 80001
     Currency Symbol: MATIC
     Block Explorer URL: https://mumbai.polygonscan.com

7. Fund your account from the Matic Faucet
   https://faucet.matic.network
   Select MATIC Token, Mumbai Network
   Enter your account address from MetaMask
   Wait until time limit is up, requests tokens 3-4 times so you have enough to deploy your contract

8. Add a `.secret` file in this directory with your account's seed phrase or mnemonic (you should be required to write this down or store it securely when creating your account in MetaMask). In `truffle-config.js`, uncomment the three constant declarations at the top, along with the matic section of the networks section of the configuration object.

9. Deploy contract
   `truffle migrate --network matic`

10. Interact via web3.js

    ```js
    const {ethers} = require('ethers');
    const fs = require('fs');
    const mnemonic = fs.readFileSync('.secret').toString().trim();
    const signer = new ethers.Wallet.fromMnemonic(mnemonic);
    const provider = new ethers.providers.JsonRpcProvider(
      'https://matic-mumbai.chainstacklabs.com',
    );
    const json = JSON.parse(
      fs.readFileSync('build/contracts/SimpleStorage.json').toString(),
    );
    const contract = new ethers.Contract(
      json.networks['80001'].address,
      json.abi,
      signer.connect(provider),
    );

    contract.get().then((val) => console.log(val.toNumber()));
    // should log 0

    contract.set(50).then((receipt) => console.log(receipt));

    contract.get().then((val) => console.log(val.toNumber()));
    // should log 50
    ```
# Pathway Smart Contract

A [smart contract] written in [Rust] for [figment pathway]

# Quick Start

Before you compile this code, you will need to install Rust with [correct target]

# Exploring The Code

1. The main smart contract code lives in `src/lib.rs`. You can compile it with
   the `./compile` script.
2. Tests: You can run smart contract tests with the `./test` script. This runs
   standard Rust tests using [cargo] with a `--nocapture` flag so that you
   can see any debug info you print to the console.

[smart contract]: https://docs.near.org/docs/develop/contracts/overview
[rust]: https://www.rust-lang.org/
[correct target]: https://github.com/near/near-sdk-rs#pre-requisites
[cargo]: https://doc.rust-lang.org/book/ch01-03-hello-cargo.html
# 👋🏼 What is `learn-web3-dapp`?

We made this decentralized application (dApp) to help developers learn about Web 3 protocols.

It's a Next.js app that uses React, TypeScript and various smart contract languages (mostly Solidity and Rust).

We will guide you through using the various blockchain JavaScript SDKs to interact with their networks. Each protocol is slightly different, but we have attempted to standardize the workflow so that you can quickly get up to speed on networks like Solana, NEAR, Polygon and more!

- ✅ Solana
- ✅ Polygon
- ✅ Avalanche
- ✅ NEAR
- ✅ Tezos
- ✅ Secret
- ✅ Polkadot
- ✅ Celo
- ✅ The Graph
- ✅ The Graph for NEAR
- ✅ Pyth
- 🔜 Ceramic
- 🔜 Arweave
- 🔜 Chainlink

- [Let us know which one you'd like us to cover](https://github.com/figment-networks/learn-web3-dapp/issues)

<img width="1024" alt="Screen Shot 1" src="https://raw.githubusercontent.com/figment-networks/learn-web3-dapp/main/markdown/__images__/readme_01.png">

<img width="1024" alt="Screen Shot 2" src="https://raw.githubusercontent.com/figment-networks/learn-web3-dapp/main/markdown/__images__/readme-02.png">

<img width="1024" alt="Screen Shot 3" src="https://raw.githubusercontent.com/figment-networks/learn-web3-dapp/main/markdown/__images__/readme-03.png">

# 🧑‍💻 Get started

## 🤖 Using Gitpod (Recommended)

The best way to go through those courses is using [Gitpod](https://gitpod.io). Gitpod provides prebuilt developer environments in your browser, powered by VS Code. Just sign in using GitHub and you'll be up and running in seconds without having to do any manual setup 🔥

[**Open this repo on Gitpod**](https://gitpod.io/#https://github.com/figment-networks/learn-web3-dapp)

## 🐑 Clone locally

Make sure you have installed [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git), [Node.js](https://nodejs.org/en/) (Please install **v14.17.0**, we recommend using [nvm](https://github.com/nvm-sh/nvm)) and [yarn](https://yarnpkg.com/getting-started/install).

Then clone the repo, install dependencies and start the server by running all these commands:

```text
git clone https://github.com/figment-networks/learn-web3-dapp.git
cd learn-web3-dapp
yarn
yarn dev
```

# 🤝 Feedback and contributing

If you encounter any errors during this process, please join our [Discord](https://figment.io/devchat) for help.

Feel free to also open an Issue or a Pull Request on the repo itself.

We hope you enjoy our Web 3 education dApps 🚀

-- ❤️ The Figment Learn Team
