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.
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.
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.
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.
- Build the docker image
# Make sure you are logged into docker.
docker-compose up --build
- To check if the container is up:
docker ps
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.
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.
Do you want to add more networks? Open a PR on vuex-options
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:
Show all problems
pnpm lint
Show only errors
pnpm lint:quiet
Fix errors
pnpm lint:fix
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/ /;}'