Contributing as a Developer

Getting Started

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

Prerequisites

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

1. Fork our Repository
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.

Using KodaDot on Kusama

If you want to try out our KodaDot on Kusama, you must have Docker (install here) and docker-compose (install here) 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.

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

Running local Polkadot and Subquery nodes

To run the complete local environment, we recommend running a Polkadot/Kusama node. In case you are using Apple M1, we have a tutorial for that 🍏

Current Indexers we have/use:

• SubSquid
  • RMRK: rubick
• SubQuery
  • RMRK: magick
  • Statemine (Unique NFT pallet): unique

Checking your code

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

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 upstream branch and run yarn, unless you have conflict on package.json, that requires manual resolve.

git fetch --all 
git merge origin/main
yarn

How can I read some data from the 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)

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

Notice for contributors before January 15, 2022

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

There's two ways you can work around this:

1. Re-forking
2. Syncing your fork

Learn more about these issues here:

• Issue 1845
• Issue 1844

Contributing Guidelines

Before submitting your pull request, read up on our documentation and make sure it follows:

• Code of Conduct
• Contribution Guidelines
• Style Guide

Failure to do so can lead to your PR being rejected

We reward 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.

Meta-Hours

We have bi-weekly meetings with contributors of KodaDot to share each other's progress as well as future goals in our Discord sever. Before speaking, please make sure you're prepared as a speaker.

Is this your first time joining? Feel free to catch up on our past Meta_Hours!

Refeferences

• This is original posting from our Meta_Hours 2, bi-weekly digests on progress and development
• Github Repository KodaDot/NFT-gallery