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

If you want to know how KodaDot works, go to the DOCS.

Hyper start 🚀 ​

Prerequisites 🎒 ​

node >=18
pnpm

Copy and paste these commands to your terminal:

git clone https://github.com/kodadot/nft-gallery.git nft-gallery
cd nft-gallery;
pnpm i;

It will clone your project and install all dependencies.

to start the server, run:

pnpm dev

KodaDot will be available at localhost:9090.

Starting dev server with the pinning functionality 📦 ​

If you want to use the pinning functionality, you must create a .env file in your project root.

echo 'NUXT_ENV_KEYRING=true
      PINATA_API_KEY=
      PINATA_SECRET_API_KEY=
      PINATA_MASTER=' > .env

Functions are located in src-functions/

You can obtain Master Pinata Keys here

you need to install the netlify-cli:

npm install netlify-cli -g

to start the server, run:

netlify dev

App will start on localhost:9000.

Docker 🐳 ​

If you just want to try out our KodaDot on Kusama and have a complete local set up 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 the container is up:

docker ps

From next time ​

Run:

docker-compose up

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

Dev hacks (FAQ) 🦇 ​

0. How can I resolve conflict on pnpm-lock.yaml?

CONFLICT (content): Merge conflict in pnpm-lock.yaml

When you see conflict on pnpm-lock.yaml and you are on your pull-request branch, merge upstream branch and run pnpm install, unless you have conflict on package.json, that requires manual resolve.

git fetch --all
git merge origin/main
pnpm install

1. How can I read some data from the GraphQL?

Every .graphql file is located in the queries/.

query nftByIdMinimal($id: String!) {
  nft: nftEntityById(id: $id) {
    id
    currentOwner
    price
    events(limit: 10) {
      id
      caller
      interaction
    }
  }
}

Then we can use it like this:

<script lang="ts" setup>
const { $consola } = useNuxtApp()
const route = useRoute()
const { data: nft } = useGraphql({
  queryName: 'nftById',
  variables: { id: route.params.id },
})

$consola.log(nft)
</script>

2. How can I read on-chain data from the RPC node?

<script lang="ts" setup>
const { $consola } = useNuxtApp()
const { apiInstance } = useApi()

const collectionId = ref('0')
const id = ref('0')
const api = await apiInstance.value
const nft = await api.query.uniques.asset(collectionId, id)

$consola.log(nft)
</script>

3. How can I make an on-chain transaction?

<script lang="ts" setup>
async function submit() {
  const { accountId } = useAuth()
  const { howAboutToExecute, isLoading, status, initTransactionLoader } =
    useMetaTransaction()

  const executeTransaction = ({ cb, arg, successMessage, errorMessage }) => {
    initTransactionLoader()
    howAboutToExecute(
      accountId.value,
      cb,
      arg,
      () => infoMessage(successMessage || 'Success!'),
      () => warningMessage(errorMessage || 'Failed!')
    )
  }

  executeTransaction({
    cb: api.tx.system.remark,
    arg: ['args']
  })
}
</script>

4. How can I test Kodadot without spending KSM?

For Basilisk (Rococo): You can obtain some KSM & BSX

You can change the network in the navbar. Currently supported networks are Basilisk, Basilisk-Rococo and Kusama. EVM chains such as MoonBeam and MoonRiver are in read-only mode.

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
  • Basilisk: snek
  • Kusama: rubick
  • MoonRiver: click

MISC 🏞 ​

Linting code ​

Show all problems

pnpm lint

Show only errors

pnpm lint:quiet

Fix errors

pnpm lint:fix

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