FIRST_TIME.md

We are using yarn workspace, as installing things via npm will result in broken dependencies.

Quick Setup- 🏃‍♀️

Here is a quick setup guide for the project.

git clone https://github.com/kodadot/nft-gallery.git nft-gallery
cd nft-gallery;
echo 'NUXT_ENV_KEYRING=true
      PINATA_API_KEY=
      PINATA_SECRET_API_KEY=
      PINATA_MASTER=
      SUBSQUID_ENDPOINT=https://app.gc.subsquid.io/beta/rubick/004/graphql' > .env
yarn;yarn dev

Open http://localhost:9090

Notice for contributors before 15/01/2022 ⚠️

If you've had contributed before 15/01/2022 and have older fork of nft-gallery there are currently two strategies to be up-to-date

• Easiest - Delete your fork and fork it as as new.
• Harder - Sync your fork

Ref

• kodadot#1845
• kodadot#1844

Docker-🐳

If you just want to try out our KodaDot on Kusama and have a full local setup with a local node, we assume you have docker and docker-compose installed.

• First time setup

  • Build the docker image

    # Make sure you are logged into docker.
    
    docker-compose up --build

  • To check if container is up:

    docker ps

• From next time

  Simply run:

  docker-compose up

Voila! KodaDot will be available at localhost:9090. KodaDot supports Hot Module Replacement on docker as well, any changes made will take effect immediately.

Dev hints

In order to execute some transaction you can use exec located in src/utils/transactionExecutor.ts Usage:

import exec from "@/utils/transactionExecutor"

// arguments: from which account, password for account, which action, array of parameters
this.tx = await exec(this.account, this.password, api.tx.democracy.vote, [
  referendumId,
  { aye, conviction },
])

Using reactive properties

Some of the properties on the component needs to be automatically updated (currentBlock)

Usage:

<template>
  <div>{{ currentBlock }}</div>
</template>

<script lang="ts">
  // Skipping imports
  export default class Summary extends Vue {
    private currentBlock: any = {}
    private subs: any[] = []

    public async mounted() {
      this.subs.push(
        await api.derive.chain.bestNumber(
          (value) => (this.currentBlock = value)
        )
      )
    }

    // Unsubscribe before destroying component
    public beforeDestroy() {
      this.subs.forEach((sub) => sub())
    }
  }
</script>

You can obtain some Westend (WND)

To change the network go to the /settings and change the prefix. Currently supported networks are kusama, westend, statemine, westmint. Wanna add more networks? Open an PR on vue-settings

Install netlify CLI

npm install -g netlify-cli

Install dependencies

yarn

Run the development server

netlify dev

The whole stack will be running on localhost:9000. app is running on localhost:9090.

Running local Polkadot and subquery nodes

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

To run also a subquery indexing node please check this repo

Linting code

Show all problems

yarn lint

Show only errors

yarn lint --quiet

Fix errors

yarn lint --fix

Dev hints

In order to execute some transaction you can use exec located in src/utils/transactionExecutor.ts Usage:

import exec from "@/utils/transactionExecutor"

// arguments: from which account, password for account, which action, array of parameters
this.tx = await exec(this.account, this.password, api.tx.democracy.vote, [
  referendumId,
  { aye, conviction },
])

Using reactive properties

Some of the properties on the component needs to be automatically updated (currentBlock)

Usage:

<template>
  <div>{{ currentBlock }}</div>
</template>

<script lang="ts">
  // Skipping imports
  export default class Summary extends Vue {
    private currentBlock: any = {}
    private subs: any[] = []

    public async mounted() {
      this.subs.push(
        await api.derive.chain.bestNumber(
          (value) => (this.currentBlock = value)
        )
      )
    }

    // Unsubscribe before destroying component
    public beforeDestroy() {
      this.subs.forEach((sub) => sub())
    }
  }
</script>

Customize configuration

See Configuration Reference.

Generating changelog

To generate 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/ /;}'

Love PermaFrost 👀