# Contributing as a Developer

## Getting Started <a href="#getting-started" id="getting-started"></a>

We are using a `pnpm` workspace, installing things via npm **will result in broken dependencies.**

### Prerequisites <a href="#prerequisites" id="prerequisites"></a>

You're using a version of node that's on/after version 16.13.2

* Install node by visiting <https://nodejs.org/en/download/>

You have pnpm installed.

* You can install pnpm by running in your terminal

```
npm install -g pnpm
```

### Installation <a href="#installation" id="installation"></a>

1. Fork our [Repository](https://github.com/kodadot/nft-gallery)
2. Go to the forked repo and click the green "Code" button
3. Copy the HTTPS link (i.e <https://github.com/your-username/nft-gallery.git>)
4. Go to your IDE and open the terminal
5. Type in the terminal "git clone your-HTTPS-link".

For example,

```
git clone https://github.com/your-username/nft-gallery.git

```

6. Then paste these two commands in the terminal

```
cd nft-gallery;
pnpm i;
```

If you come across ERR\_PNPM\_UNSUPPORTED\_ENGINE  Unsupported environment (bad pnpm and/or Node.js version), run

```
nvm use 16
```

7. Lastly, start the server by running

```
pnpm dev
```

**KodaDot will be available at** [**localhost:9090**](http://localhost:9090/)**.**

## Using KodaDot on Kusama <a href="#using-kodadot-on-kusama" id="using-kodadot-on-kusama"></a>

If you want to try out our KodaDot on Kusama, you must have Docker ([install here](https://docs.docker.com/get-docker/)) and docker-compose ([install here](https://docs.docker.com/compose/install/)) installed to have a local setup and node.

### **Installation**

1. Build the docker image

   ```
   docker-compose up --build
   ```
2. Check if the container is up:

   ```
   docker ps
   ```
3. Run:

   ```
   docker-compose up
   ```

KodaDot will be available at [localhost:9090](http://localhost:9090/).

KodaDot supports Hot Module Replacement on Docker; any changes made will take effect immediately.

### Running local Polkadot and Subquery nodes <a href="#running-local-polkadot-and-subquery-nodes" id="running-local-polkadot-and-subquery-nodes"></a>

To run the complete local environment, we recommend running a [Polkadot/Kusama node](https://github.com/paritytech/polkadot). In case you are using Apple M1, we have a [tutorial for that 🍏 ](https://vikiival.medium.com/run-substrate-on-apple-m1-a2699743fae8)

Current Indexers, we have/use:

* SubSquid
  * RMRK: [rubick](https://github.com/kodadot/rubick)
* SubQuery
  * RMRK: [magick](https://github.com/vikiival/magick)
  * Statemine (Unique NFT pallet): [unique](https://github.com/kodadot/unique)

## Checking your code <a href="#checking-your-code" id="checking-your-code"></a>

### **Linting code**

**Show all problems**

```
yarn lint
```

**Show only errors**

```
yarn lint --quiet
```

**Fix errors**

```
yarn lint --fix
```

### **Generating changelog**

To generate a changelog, use GitHub CLI List only merged

If you need a limit, use `-L`

```
gh pr list -s merged --json mergedAt,baseRefName,number,title,headRefName -B main -L 37 | jq -r '.[] | .number, .title' | sed '/^[0-9]/{N; s/\n/ /;}'
```

### Troubleshooting <a href="#troubleshooting" id="troubleshooting"></a>

**How can I resolve conflict on yarn.lock?**

> CONFLICT (content): Merge conflict in yarn.lock

When you see conflict on `yarn.lock` and you are on your pull-request branch, merge the upstream branch and run `yarn`, unless you have a conflict on `package.json`, which requires manual resolution.

```
git fetch --all 
git merge origin/main
yarn
```

### **How can I read some data from GraphQL?**

Every `.graphql` file is located in the `src/queries/`.

```
query nftByIdMinimal($id: String!) {
  nFTEntity(id: $id) {
    id
    currentOwner
    price
  }
}
```

To use it inside the `.vue` file, we can import it like a regular module: For specific purposes, we also need to import the `PrefixMixin`. Thanks to that app, know which indexer is using.

> PrefixMixin is only applicable to the SubQuery indexers. To use SubSquid, please use client: 'subsquid' in the query call.

Then we can use it like this:

```
<script lang="ts">
  import { Component, mixins } from "nuxt-property-decorator"

  import nftByIdMinimal from "@/queries/nftByIdMinimal.graphql"
  import PrefixMixin from "~/utils/mixins/prefixMixin"

  @Component({})
  export default class GalleryItem extends mixins(PrefixMixin) {
    id: string = ""
    nft: NFT = emptyObject<NFT>()

    async fetch() {
      const { data } = await this.$apollo.query({
        client: this.urlPrefix,
        query: nftByIdMinimal,
        variables: { id: this.id },
      })

      this.nft = data.nFTEntity
      console.log("nft", this.nft)
    }
  }
</script>
```

### **How can I read on-chain data from the RPC node?**

```
<script lang="ts">
  import { Component, Vue } from "nuxt-property-decorator"
  import Connector from "@kodadot1/sub-api"

  @Component({})
  export default class GalleryItem extends Vue {
    id = "0"
    collectionId = "0"

    async fetch() {
      const { api } = Connector.getInstance()
      const nft = await api.query.uniques.asset(this.collectionId, this.id)
      console.log("nft", nft)
    }
  }
</script>
```

### **Is it possible to subscribe to the on-chain data from the RPC node?**

```
<script lang="ts">
  import { Component, mixins } from "nuxt-property-decorator"
  import SubscribeMixin from "@/utils/mixins/subscribeMixin"

  @Component({})
  export default class GalleryItem extends mixins(SubscribeMixin) {
    id = "0"
    collectionId = "0"

    async created() {
      this.subscribe(
        api.query.uniques.asset,
        [this.collectionId, this.id],
        (nft: any) => console.log(nft) // callback which returns the data
      )
    }
  }
</script>
```

### **How can I make an on-chain transaction?**

```
<script lang="ts">
  import { Component, mixins } from "nuxt-property-decorator"
  import MetaTransactionMixin from "@/utils/mixins/metaMixin"
  // import AuthMixin from '~/utils/mixins/authMixin' // get currently logged in account

  import Connector from "@kodadot1/sub-api"

  @Component({})
  export default class GalleryItem extends mixins(MetaTransactionMixin) {
    async submit() {
      const cb = api.tx.system.remark
      const args = "Hello World"

      await this.howAboutToExecute(
        this.accountId, // sender can be obtained from the AuthMixin
        cb,
        [args],
        (blockNumber) =>
          console.log(`Remark ${args} saved in block ${blockNumber}`)
      )
    }
  }
</script>
```

### **How can I test Kodadot without spending KSM?**

[You can obtain some Westend (WND)](https://matrix.to/#/#westend_faucet:matrix.org)

You can change the network in the navbar. Currently supported networks are `Kusama, Westend, statemine, westmint`. Do you want to add more networks? [Open a PR on vuex-options](https://github.com/kodadot/packages)

### Notice for contributors before January 15, 2022 <a href="#notice-for-contributors-before-january-15-2022" id="notice-for-contributors-before-january-15-2022"></a>

If you've forked nft-gallery before **January 15, 2022**, you have an older fork that doesn't include our newest additions.

There are two ways you can work around this:

1. [Re-forking](https://docs.github.com/en/repositories/creating-and-managing-repositories/deleting-a-repository)
2. [Syncing your fork](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/syncing-a-fork)

Learn more about these issues here:

* [Issue 1845](https://github.com/kodadot/nft-gallery/issues/1845)
* [Issue 1844](https://github.com/kodadot/nft-gallery/issues/1844)

## Contributing Guidelines <a href="#contributing-guidelines" id="contributing-guidelines"></a>

Before submitting your pull request, read up on our [documentation](https://docs.kodadot.xyz/) and make sure it follows:

* [Code of Conduct](https://github.com/kodadot/nft-gallery/blob/main/CODE_OF_CONDUCT.md)
* [Contribution Guidelines](https://github.com/kodadot/nft-gallery/blob/main/CONTRIBUTING.md)
* [Style Guide](https://github.com/kodadot/nft-gallery/blob/main/STYLE_GUIDE.md)

### **Failure to do so can lead to your PR being rejected**

We [reward](https://github.com/kodadot/nft-gallery/blob/main/REWARDS.md) our contributors in $KSM for their time and effort with every issue they solve. If you're finding yourself to be more involved with KodaDot, we are always [hiring](https://github.com/kodadot/nft-gallery/blob/main/HIRING.md).

### Meta-Hours <a href="#meta-hours" id="meta-hours"></a>

We have bi-weekly meetings with contributors of KodaDot to share each other's progress as well as future goals in our [Discord server](https://discord.gg/kodadot). Before speaking, please make sure you're prepared as a [speaker](https://docs.kodadot.xyz/meta-hours.html).

Is this your first time joining? Feel free to catch up on our [past Meta\_Hour](https://github.com/kodadot/nft-gallery/discussions/categories/meta-hours)!

## References <a href="#refeferences" id="refeferences"></a>

* This is the original posting from our [Meta\_Hours 2](https://github.com/kodadot/nft-gallery/discussions/1699) bi-weekly digests on progress and development
* [Github Repository KodaDot/NFT-gallery](https://github.com/kodadot/nft-gallery/issues/)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://hello.kodadot.xyz/be-part-of-kodadot/join-as-a-developer/contributing-as-a-developer.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.