README.md
components
    protocols
        avalanche
            components
                steps
                    index.ts
            context
                index.ts
            hooks
                index.ts
            lib
                index.ts
            types
                index.ts
        celo
            components
                steps
                    index.ts
            context
                index.ts
            hooks
                index.ts
            lib
                index.ts
            types
                index.ts
        near
            components
                Steps
                    index.ts
            context
                index.ts
            hooks
                index.ts
            lib
                index.ts
            types
                index.ts
        polkadot
            components
                steps
                    index.ts
            context
                index.ts
            hooks
                index.ts
            lib
                index.ts
            types
                index.ts
        secret
            components
                steps
                    index.ts
            context
                index.ts
            hooks
                index.ts
            lib
                index.ts
            types
                index.ts
        solana
            components
                steps
                    index.ts
            context
                index.ts
            hooks
                index.ts
            lib
                index.ts
            types
                index.ts
        tezos
            components
                steps
                    index.ts
            context
                index.ts
            hooks
                index.ts
            lib
                index.ts
            types
                index.ts
contracts
    celo
        HelloWorld.json
    near
        Cargo.toml
        README.md
        compile.js
        src
            lib.rs
    polygon
        SimpleStorage
            README.md
            build
                contracts
                    Migrations.json
                    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
hooks
    steps-hooks.ts
lib
    constants.ts
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
            stacking.ts
            transfer.ts
        polygon
            query.ts
        secret
            account.ts
            balance.ts
            connect.ts
            deploy.ts
            getter.ts
            setter.ts
            transfer.ts
        solana
            balance.ts
            callGreetings.ts
            checkProgram.ts
            connect.ts
            fund.ts
            getGreetings.ts
            greeter.ts
            keypair.ts
            transfer.ts
        tezos
            account.ts
            balance.ts
            connect.ts
            deploy.ts
            getter.ts
            setter.ts
            transfer.ts
public
    figment-learn-compact.svg
    vercel.svg
solana-wallet
    keypair.json
tsconfig.json
types
    polygon-types.ts
    types.ts
utils
    avalanche-utils.ts
    colors-utils.ts
    datahub-utils.ts
    polygon-utils.ts

# 🤔 What is `learn-web3-dapp`?

We made this decentralized application (dApp) to help developers learn about Web 3 protocols. It uses TypeScript, React, and various smart contract languages.

Following along with the [Figment Learn Pathways](https://learn.figment.io/pathways/), you will build up a simple web client using various JavaScript APIs to interact with different blockchain 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, Secret and Polygon! 

Learn more about [Figment](https://figment.io/).

# 🧑‍💻 How to use this repo

Clone the repo and install the dependencies with `yarn`:

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

If you encounter any errors during this process, please join our [Discord]() for help.

# 🧩 DataHub API keys

To make use of the Pathway content, you will require a DataHub account and a valid API key for the protocol you wish to access via DataHub's infrastructure.
[Sign up for a DataHub account](https://auth.figment.io/sign_up) and verify your email address, then visit the [DataHub Services Dashboard](https://datahub.figment.io/) and select the protocol you want to access. You will then be able to copy your personal API key. 

You will need to create a new file in the project root directory `~/learn-web3-dapp/.env.local`, copying the contents of the existing `.env.example` file.
Your API key needs to be pasted into `.env.local` so that you can authenticate your connections with DataHub.

# 💻 Running the development server

Start the Next.js development server on the default port 3000 with:

```
yarn dev
```

If your setup requires a specific port to allow inbound requests, or if you already have a service running on port 3000 - you can also specify a port with the `--port` flag:

```
yarn dev --port 3001
```

Once the server is running, you should see similar output:

```
yarn run v1.22.10
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from ~/learn-web3-dapp/.env.local
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
event - compiled successfully
```

You can now view the running application at [http://localhost:3000](http://localhost:3000) (or whichever port you specified)!

We sincerely hope you enjoy the Pathway content and thank you for using `learn-web3-dapp` to learn about blockchain protocols 🚀

 -- The Figment Learn Team
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`

8. 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
