NFT Explorer for Kusama & Polkadot ecosystem

🧫 Culture - where you can read our recent updates

• Discord
• Telegram
• Twitter
• r/KodaDot

📚 Writings by KodaDot team members

• Client-first NFT gallery: Technical examination
• How to Embed your NFT on Kusama through KodaDot
• Traverse to the prime show
• The First Multilingual NFT Gallery in Polkadot ecosystem running live on Kusama
• Read our story, how we started.

Working version ▶️

• Explore and Mint NFTs

Development 🏗

Contribution is welcome!

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

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Matej Nemček 💻	Viki Val 🔬	Jarek Krupiński 💻	Mikhail Krasnoselskii 🌍	jimmy-tudeski 🌍	Harry 🌍	Jiri Rozinek 🌍
Summer2040 🌍	achrafchi 🌍	lunacek 🌍	razi429 🌍	Snyk bot 🛡️	joaopscastro 🌍	anindyabaidya 🌍
Onuwa Nnachi Isaac 💻	Ferhat Sirin 🌍	hernanvqt 🌍	Martin Tonhauzer 🌍	katongo11 🌍	kzyxyz 🌍	yacare555 💻
Ryan Gordon 💻	Takamasa Arakawa 💻	dependabot[bot] 🛡️	allcontributors[bot] 📢

Made with contributors-img.

🕹 Play

git clone git@github.com:kodadot/nft-gallery.git
yarn
yarn serve
open http://localhost:9090/

🙋‍♀️ I want to contribute

Sure, your contribution is welcome. Please follow code of conduct and contribution guidelines

Support the project ⭐

If you feel awesome and want to support us in a small way, please consider starring and sharing the repo! This helps us getting known and grow the community. 🙏

🐳 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. We have are building images from develop and master branch

docker-compose pull && docker-compose up

If you want to run just KodaDot

docker-compose up kodadot

Build docker image of KodaDot

docker build -t hello/kodadot .

Run it locally and then visit localhost:9090

docker run -it -p 8080:8080 --rm --name hellokodadot hello/kodadot

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>

🏃‍♀️ Quick Setup

Here is a quick setup guide for the project.

git clone https://github.com/kodadot/nft-gallery.git
touch .env.local

in .env.local add following properties:

VUE_APP_KEYRING=true
VUE_APP_I18N_LOCALE=en
VUE_APP_I18N_FALLBACK_LOCALE=en
VUE_APP_SUBQUERY_URL=https://api.subquery.network/sq/vikiival/magick-west

You can obtain some Westend (WND)

If you want to access Kusama's GraphQL API, remove -west from VUE_APP_SUBQUERY_URL

to run UI

yarn
yarn start

in a second terminal window: this will run lambda functions

yarn lambda

Caveats:

Netlify functions are unable to read .env.local. Therefore, you need to manually update pinata keys in each function. Functions are located in src-functions/

You can obtain Master Pinata Keys here

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

Moreover please add this to your .env.local

VUE_APP_SUBQUERY_URL=http://localhost:3000

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 👀