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

   bash

   docker-compose up --build

2. Check if the container is up:

   bash

   docker ps

3. Run:

   bash

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