Skip to content

Latest commit

 

History

History
272 lines (187 loc) · 7.33 KB

first-time.md

File metadata and controls

272 lines (187 loc) · 7.33 KB
Raw
date tags image title subtitle
2023-07-01
Onboarding
Your first time contributing to KodaDot
Is this your first time contributing? Set up your local environment here.

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 >= 20
pnpm

Copy and paste these commands to your terminal: (It will clone your project and install all dependencies.)

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

To start the server, run:

pnpm dev

KodaDot will be available at localhost:9090.

Codespaces

Click on the button below:

Open in GitHub Codespaces

Copy and paste these commands to your terminal: (It will install all dependencies and start the server.)

pnpm i;
pnpm dev

KodaDot will be available at localhost:9090.

If you’re interested in experimenting with KodaDot on the Kusama network and want a comprehensive setup with a Codespaces node, you can follow the Docker instructions provided below. Let’s get started!

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
  • Getting couldn't find .env file error?

In some cases, you may get an error similar to ERROR: Couldn't find env file: /full/path/nft-gallery/.env; This is because docker may be looking for a .env file when there is none. To fix this issue, create an empty .env file then build the docker image again.

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.

Submitting a pull request

To enhance your workflow with our repository, we suggest making use of the GitHub CLI to initiate a pull request. This is particularly beneficial since we offer a selection of predefined templates for your convenience.

To get started ensure that you are authenticated on the GitHub CLI and the remote repository has been set. You can find a quickstart guide here.

  1. To submit a new pull request use the command in your terminal:
gh pr create

  1. You'll be prompted to select a branch. You can select your working branch or skip the step if you have already pushed your branch.

  2. Next you'll be prompted for a title and to choose a template. Please use one of the predefined templates that is relevant to your pull request. You will also be given an option to edit it as required.

Creating pull request for username:example-branch into main in kodadot/nft-gallery

? Title example-branch-title
? Choose a template  [Use arrows to move, type to filter]
> PULL_REQUEST_TEMPLATE.md
  QUICK_PULL_REQUEST_TEMPLATE.md
  Open a blank pull request
  1. Once you have edited the template, submit your pull request. 🚀

Alternatively, if you cannot use GitHub CLI, you can find the templates here and create a pull request on github.

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, {
        onSuccess: () => infoMessage(successMessage || 'Success!'),
        onError: () => 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 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/ /;}'