Skip to content

Latest commit

 

History

History
286 lines (204 loc) · 7.16 KB

FIRST_TIME.md

File metadata and controls

286 lines (204 loc) · 7.16 KB

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 >=16.14.0
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.

⚠️ Notice for contributors before 15/01/2022 ⚠️

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

Ref

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

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

<script lang="ts">
  import { Component, mixins } from 'nuxt-property-decorator'
  import { ApiFactory } from '@kodadot1/sub-api'
  import ApiUrlMixin from '@/utils/mixins/apiUrlMixin'

  @Component({})
  export default class GalleryItem extends mixins(ApiUrlMixin) {
    id = '0'
    collectionId = '0'

    async fetch() {
      const api = await ApiFactory.useApiInstance(this.apiUrl)
      const nft = await api.query.uniques.asset(this.collectionId, this.id)
      console.log('nft', nft)
    }
  }
</script>

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

4. 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 UseApiMixin from '@/utils/mixins/useApiMixin'

  @Component({})
  export default class GalleryItem extends mixins(MetaTransactionMixin, UseApiMixin) {
    async submit() {
      const api = await this.useApi()
      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>

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

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:

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