onflow/kitty-items

Kitty Items: CryptoKitties Sample App

👋 Welcome! This demo app is designed to help you learn to build on Flow.

• Kitty Items: CryptoKitties Sample App is a complete NFT marketplace built with Cadence, Flow's resource-oriented smart contract programming language.
• Learn how to deploy contracts, mint NFTs, and integrate user wallets with the Flow Client Library (FCL).

🎬 Live Demo

Check out the live demo of Kitty Items, deployed on the Flow Testnet. The demo features 4 main views: homepage, marketplace, profile page, & admin view to mint your very own Kitty Items.

✨ Getting Started

Looking for a step by step guide? Follow the Kitty Items tutorial in the Flow documentation.

1. Install Dependencies

🛠 This project requires NodeJS v16.x or above. See: Node installation instructions
🛠 This project requires flow-cli v0.39.1 or above. See: Flow CLI installation instructions
🛠 This project requires Python v3.6 or above. See: Python installation instructions

2. Clone the project

git clone --depth=1 https://github.com/onflow/kitty-items.git

3. Install packages

• Run npm install in the root of the project.

⚠️ NOTE for Mac M1 users:
You'll need to run the following command in the web project:
From the ./web directory run npm install -D @next/swc-darwin-arm64

Local development

Run this command to start Kitty Items with the Flow local development suite:

npm run dev:emulator

Note: This script launches the Flow Emulator and FCL Development Wallet to simulate the blockchain and an FCL-compatible wallet using the initialization code in this repository

Testnet development

Run npm run dev:testnet and follow the prompt to begin developing on testnet.

If this is your first time interacting with KI or Flow, you will need to create a wallet account (Blocto) using an email. If you created a wallet (Blocto) account before July 7th, the user should create a new account with Blocto. This is because the account storage paths have changed, and the older accounts may result in conflicting paths during minting/purchasing.

---

Cypress tests

There are 3 ways tests can be run:

1. dev environment - start the server with npm run dev:emulator and run cypress npx cypress run --headed --browser chrome
2. Github actions locally - requires the use of https://github.com/nektos/act
   • On Apple M1 - act -j cypress --container-architecture linux/arm64
   • On Intel/AMD - act -j cypress --container-architecture linux/amd64
3. Github actions - executed automatically when merged to master. Add your branch name to integration-local.yml after line 10 to trigger workflows for every push into your remote branch.

Project Overview

🔎 Legend

Above is a basic diagram of the parts of this project contained in each folder, and how each part interacts with the others.

1. Web App (Static website) | kitty-items/web

A true dapp, client-only web app. This is a complete web application built with React that demonstrates how to build a static website that can be deployed to an environment like IPFS and connects directly to the Flow blockchain using @onflow/fcl. No servers required. @onflow/fcl handles authentication and authorization of Flow accounts, signing transactions, and querying data using using Cadence scripts.

2. Look Ma, a Web Server! | kitty-items/api

We love decentralization, but servers are still very useful, and this one's no exception. The code in this project demonstrates how to connect to Flow using Flow JavaScript SDK from a Node JS backend. It's also chalk-full of handy patterns you'll probably want to use for more complex and feature-rich blockchain applications, like storing and querying events using a SQL database (Postgres). The API demonstrates how to send transactions to the Flow blockchain, specifically for minting Kitty Items (non-fungible tokens).

3. Cadence Code | kitty-items/cadence

Cadence smart contracts, scripts & transactions for your viewing pleasure. This folder contains all of the blockchain logic for the marketplace application. Here you will find examples of fungible token and non-fungible token (NFT) smart contract implementations, as well as the scripts and transactions that interact with them. It also contains examples of how to test your Cadence code.

😺 What are Kitty Items?

Items are hats for your cats, but under the hood they're non-fungible tokens (NFTs) stored on the Flow blockchain.

Items can be purchased from the marketplace with fungible tokens. In the future you'll be able to add them to Ethereum CryptoKitties with ownership validated by an oracle.

❓ More Questions?

• Chat with the team on the Flow Discord server
• Ask questions on the Flow community forum

Troubleshooting

Non-Intel issues

You'll need to run the following command in the web project:
From the ./web directory run npm install -D @next/swc-darwin-arm64
If you're running on another non-intel based system, the issue and troubleshooting steps are detailed here: vercel/next.js#30468

Rebuild dependencies

• The api and web projects depend on sqlite3. If you change node versions on your system, you'll need to cd into the web and api directory and run npm rebuild to rebuild you dependencies for the new version.

Finding the logs

• You can see what processes have been started, and if they are online using pm2 list
• You can tail logs for individual processes using pm2 logs [process name]. eg., pm2 logs api or pm2 logs web
• You can tail all logs in the same terminal using pm2 logs

Starting over

• In the event of problems, you may want to start over. To reset the project, perform these steps:
  • Run pm2 delete all to stop and delete all processes
  • Delete database files in ./api. (kitty-items-db-*.sqlite)

Unblock ports

• Kitty Items uses the following ports. Make sure they are not in use by another process
  • 8080 : Flow emulator
  • 3569 : Flow emulator
  • 3000 : Kitty Items API
  • 3001 : Kitty Items web app
  • 8701 : FCL dev-wallet

Understanding the Marketplace

• The Kitty Items Marketplace on testnet is universal. Every instance of Kitty Items deployed on Testnet points to the same marketplace (NFTStorefrontV2) contract. So, you may see other listing s showing up in your Kitty items instance, but you will not see items in your marketplace page that were added before you deployed your instance of Kitty Items.

---

🚀 Happy Hacking!

kitty-items's Issues

Add additional context to README

The current README provides a good overview of the application, but it should provide more information about the core concepts of Flow.

For example:

• How does the Flow account model work?
• What is Cadence and what is it for?
• What is the Flow emulator and how does it fit into the development workflow?
• What is the Flow Testnet and how can it be accessed?

Invalid import FLOW_ADDRESS and FLOW_PRIVATE_KEY

tsnd --respawn src/index.ts

[INFO] 01:47:07 ts-node-dev ver. 1.1.1 (using ts-node ver. 9.1.1, typescript ver. 4.1.2)

No Flow account configured.

Did you export FLOW_ADDRESS and FLOW_PRIVATE_KEY?

.env file location - not specific enough - after clone of repo - no .env found - where is it?

Sorry - I little of a flow/kitty items newbie here - but in following the instructions - got stuck in VSCode - not knowing where the .env file was. Do I need to create this file? Please fix the doc so that the user knows specifically what to do here on this step.

I believe we are to take .env.example and create a .env from this example placing our values for flow_address and flow_private_key into the file and save .env back to the api folder where .env.example is located - is that correct? If so - pls update the doc, if different- pls update the doc, instructions, etc.

Fix Doc / Clarify readme to "export" or "set" environment variables for flow project deploy step

c:\Users\david\kitty-items>flow project deploy --network=testnet

Deploying 3 contracts for accounts: testnet-account

←[32;1mKibble←[0m -> 0xae7561b4bab9bc61
←[32;1mKittyItems←[0m -> 0xae7561b4bab9bc61
←[32;1mKittyItemsMarket←[0m -> 0xae7561b4bab9bc61

✨ All contracts deployed successfully

JS/Web apps port conflict - auth broken

Hi There,

Thanks for the vast collection of learning resources and tutorials on Flow. Making my way though.

It seems that the node backend and the react web app are started on the same port. The web app runs fine on 3001, but Dapper staging auth is broken because of it.

I've been able authenticate and purchase an item by starting the node backend on 3001 and the web on 3000, but eventually ran into a CORS issue trying to list the same item. Perhaps that is a different issue, not sure.

Thanks

Command Error: missing configuration, initialize it: flow init on "virgin" windows 10 system

On a clean Windows 10 "instance" / following the Kitty-Items install procedure / after successful steps 1 thru 3 - fails on step 4

4. Deploy the contracts
   flow project deploy --network=testnet

Command Error: missing configuration, initialize it: flow init

Please resolve or change the documentation so windows users can have a successful deployment or at least point them to where an addition step(s) should be for this to complete successfully

Data member mismatch

Hi there,

I ran the current code and encountered the error:

---

Error: failed to execute the script on the execution node: rpc error: code = Internal desc = failed to execute script: failed to execute script at block (8b8117acdc3f29c123531ecd493a5248ad911977256c55fec16b60eb5ae785bb): Execution failed:
error: incorrect argument label
--> c8bea33ade24cd3394b73ba9dc7656c10e059d6f4b97358b1aa24c33a35df9c5:20:50
|
20 | if let item = collection.borrowSaleItem(itemID: id) {
| ^^^^^^ expected saleItemID, got itemID

error: value of type &KittyItemsMarket.SaleOffer{KittyItemsMarket.SaleOfferPublicView} has no member typeID
--> c8bea33ade24cd3394b73ba9dc7656c10e059d6f4b97358b1aa24c33a35df9c5:21:53
|
21 | return SaleItem(itemID: id, typeID: item.typeID, owner: address, price: item.price)
| ^^^^^^ unknown member

error: value of type &KittyItemsMarket.SaleOffer{KittyItemsMarket.SaleOfferPublicView} has no member price
--> c8bea33ade24cd3394b73ba9dc7656c10e059d6f4b97358b1aa24c33a35df9c5:21:89
|
21 | return SaleItem(itemID: id, typeID: item.typeID, owner: address, price: item.price)
| ^^^^^ unknown member
onEnd
src/send/unary.js:11
8 | grpc.unary(method, {
9 | request: request,
10 | host: host,

11 | onEnd: ({status, statusMessage, message}) => {
| ^ 12 | if (status === grpc.Code.OK) {
13 | resolve(message)
14 | } else {
View compiled
▶ 4 stack frames were collapsed.
NodeHttp.responseCallback
src/index.ts:36
33 | _this.options.debug && console.log("NodeHttp.data", chunk);
34 | _this.options.onChunk(toArrayBuffer(chunk));
35 | });
36 | response.on("end", function () {
| ^ 37 | _this.options.debug && console.log("NodeHttp.end");
38 | _this.options.onEnd();
39 | });
View compiled
▶ 3 stack frames were collapsed.

---

Can you kindly advise how to fix the issue?

Thanks so much and have a good day!

Mio

Create instructions for how to develop locally

@srinjoyc commented on Wed May 05 2021

Instructions

Currently there are no instructions on how to develop locally on kitty-items. Since most devs will at some point need to run locally, we should provide easy setup instructions to start. Eventually, we should automate and couple parts together to make it more seamless and integrated into the CLI.

Issue To Be Solved

The following questions should be answered in the local instructions:

1. What other processes need to be running? IE. Emulator, Dev Wallet. How do these processes work, what do they do, and where can you learn more?
2. What configs need to change to run locally?

Solution

Directly add the instructions on the main README in a section called 'Running Locally'.

Notes

The dev wallet repo will need some updates and fixes to its documentation prior to doing this.

Add FUSD to Kitty Items

Is your feature request related to a problem? Please describe.

Developers want to start using FUSD in their applications, but lack a concrete example demonstrating how to do so.

Describe the solution you'd like

Ideally Kitty Items can be updated with the following:

• Merge in generic storefront contract, which can support multiple fungible tokens out of the box (unlike KittyItemsMarket, which is hard-coded to Kibble) (issue: #9)
• We would keep the Kibble contract and minting functionality in the API
• When building the frontend, developers can use a flag to build for FUSD or Kibble
• The built UI will change based on the token option selected
• FUSD is highlighted as the default, but developers can opt to run the Kibble version if they are interested in creating their own fungible token.

Cannot see items from "Items Shop" after click "List for 10 KIBBLE"

When I clicked "List for 10 KIBBLE"，the status of the item changed to "Unlist", but the item didn't show up in the "Items Shop". Any help is appreciated. Thanks.

Cannot find module '@onflow/sdk-resolve'

cd api/
npm install
npm run start:dev

[ERROR] 18:12:36 Error: Cannot find module '@onflow/sdk-resolve'

Automate marketplace setup

Currently user has to run curl commands 1 at a time to bootstrap contracts, and int items and kibble.

There is some value for newcomers in learning how to bootstrap the marketplace stepwise.
We should provide stepwise instructions, but make the project 'bootstrappable' using a single npm command, as well.

Kitty Items does not work - Initialize Account

Kitty Items demo page does not work (http://kitty-items-flow-testnet.herokuapp.com)

Just create a new account with Blocto and click "Initialize Account".

Yesterday the service timed out after clicking "Initialize Account" and today I got rejected. I used Chrome on Mac and Android.

[Testing] Add basic tests to demonstrate JS testing library

Why

Currently, we don't have any usage of our JS testing library in this keystone example to demonstrate how the integration works.

What (Definition of Done)

Add the following basic tests:

1. Account creation: Multiple accounts can be created
2. Contract deploy: Deploys all contracts one by one in the cadence folders.
3. Transaction to mint kibble.
4. Transaction to mint kitty-item
5. Transaction to transfer kitty-item

Add documentation to the README explaining the testing and link out to remaining testing docs on the testing repo. https://github.com/onflow/flow-js-testing

Cadence tests throws error

I have clean repository and I am trying to run command go test like this: kitty-items\cadence\lib\go\test> go test

But it throws this error:

{"level":"debug","address":"f8d6e0586b0a20c7","contract":"FlowServiceAccount","contract_len":5100,"time":"2021-03-23T08:56:54+02:00","message":"a contract returned for f8d6e0586b0a20c7.FlowServiceAccount"}
{"level":"debug","address":"f8d6e0586b0a20c7","contract":"FlowStorageFees","contract_len":4689,"time":"2021-03-23T08:56:54+02:00","message":"a contract returned for f8d6e0586b0a20c7.FlowStorageFees"}--- FAIL: TestKibbleDeployment (0.09s)
panic: open ../../../cadence/kibble/contracts/Kibble.cdc: The system cannot find the path specified. [recovered]
        panic: open ../../../cadence/kibble/contracts/Kibble.cdc: The system cannot find the path specified.

goroutine 50 [running]:
testing.tRunner.func1.2(0x15b4d20, 0xc0002f7e90)
        C:/Program Files/Go/src/testing/testing.go:1144 +0x345
testing.tRunner.func1(0xc000055500)
        C:/Program Files/Go/src/testing/testing.go:1147 +0x4b6
panic(0x15b4d20, 0xc0002f7e90)
        C:/Program Files/Go/src/runtime/panic.go:965 +0x1c7
github.com/onflow/kitty-items/lib/go/test.readFile(0x16db0b5, 0x2c, 0x0, 0x0, 0x0)
        C:/Work/Rox/kitty-items/cadence/lib/go/test/test.go:101 +0x8d
github.com/onflow/kitty-items/lib/go/test.loadKibble(0x5054712f2f0ecf01, 0xc000209400, 0x18dc9c0, 0xc0001e5bc0)
        C:/Work/Rox/kitty-items/cadence/lib/go/test/kibble_test.go:273 +0x4f
github.com/onflow/kitty-items/lib/go/test.KibbleDeployContracts(0xc0002b01a0, 0xc000055500, 0x0, 0x0, 0x0, 0x0)
        C:/Work/Rox/kitty-items/cadence/lib/go/test/kibble_test.go:51 +0x23a
github.com/onflow/kitty-items/lib/go/test.TestKibbleDeployment(0xc000055500)
        C:/Work/Rox/kitty-items/cadence/lib/go/test/kibble_test.go:116 +0x70
testing.tRunner(0xc000055500, 0x181f448)
        C:/Program Files/Go/src/testing/testing.go:1194 +0xef
created by testing.(*T).Run
        C:/Program Files/Go/src/testing/testing.go:1239 +0x2b3
exit status 2
FAIL    github.com/onflow/kitty-items/lib/go/test       0.470s

Any suggestions how to fix it?

Use CLI project functionality in Kitty Items

Once the new flow project command is merged and released, we should update this repository to make use of the new flow.json structure, including the automated contract deployment feature.

Here's what that should include:

• flow.json file committed to this repository
• flow.json file includes paths to contracts in kitty-items-cadence
• flow.json file includes configuration for the Flow Emulator
• flow project deploy works with the configured emulator
• kitty-items-deployer is removed (no longer needed)

TypeError: Cannot read property 'padStart' of null

Attempting Step 6 of in the kitty-items api.

In the terminal, after executing the command ./setup-minter.sh, this is displayed repeatedly (six times):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>TypeError: Cannot read property &#39;padStart&#39; of null<br> &nbsp; &nbsp;at /Users/mac-user/Documents/kitty-items/api/node_modules/@onflow/sdk/src/send/send-get-account.js:8:19<br> &nbsp; &nbsp;at runMicrotasks (&lt;anonymous&gt;)<br> &nbsp; &nbsp;at processTicksAndRejections (internal/process/task_queues.js:93:5)</pre>
</body>
</html>

In the terminal window connected to flow testnet, the error is:

TypeError: Cannot read property 'padStart' of null
    at /Users/mac-user/Documents/kitty-items/api/node_modules/@onflow/sdk/src/send/send-get-account.js:8:19
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
fromBlock=32442851 toBlock=32442853 latestBlock=32442853

If there are any more details that can help I'm happy to add in the comments -- thank you

When login, rpc error: code = Internal desc = failed to execute script

Hello,

I have followed the tutorial and I am currently on the frontend part. When I try to login on the app I get this;
I am trying to figure out but I'm really stuck:

Thanks for any help provided !

Import transactions/scripts into JS rather than inlining them

In web/src/flow, all the transactions/scripts are inlined as strings. I think a better option is to save them as cdc files in the cadence/scripts cadence/transactions directories and then import them into the JS. The way I achieved this in the project I'm working on (which I forked off of kitty-items) is via https://github.com/pveyes/raw.macro.

So instead of:

const CODE = fcl.cdc`
  import FungibleToken from 0xFungibleToken
  ...
`

You'd have:

import raw from "raw.macro";;
const script = raw("../../../cadence/scripts/is_account_initialized.cdc");
const CODE = fcl.cdc`${script}`

The primary benefits are 1) testability (you can test your scripts/transactions in go) and 2) readability (the transactions/scripts are easier to read in cdc files than just long strings in JS files).

If the Flow team likes this idea and is willing to accept outside contributions to this repo, I'd be happy to put together a PR making this change.

Repository license?

I couldn't find a license file for this repository. What is its license?

Consider using foreman

Given there are multiple processes in this application, it might make sense to create a Procfile and use Forman.

A simple Procfile.dev would be:

web: cd web && npm run start:dev
worker: cd api && npm run start:dev

Then users could start the application (after having set up the necessary dependencies) by running nf start -j Procfile.dev from the root of the repository.

I'd be happy to put out a PR making this change if the Flow team supports this idea.

Marketplace contract updates

We've iterated on the design of the marketplace contract. We should update the Kitty Items example to reflect those changes.

"Items Shop" loading forever after listing items from "My Items"

Hi there,

Thanks for the excellent example!

After listing the items from "Items Shop", are these items supposed to go back and show up under the "Items Shop" tab?

If so, the page has been loading forever ( a spinning circle by ID), although the items in "My Items" tab have been updated.

Thanks so much and have a good day!

Error in KittyItemsMarket Contract

When running the Kitty Deployer, I keep getting the error below, which keeps the KittyItemsMarket contract from being created. Am I doing something wrong here? Have unsuccessfully tried a couple of things to make this work.

add contract name: KittyItemsMarket
error Execution failed:
error: cannot deploy invalid contract
 --> d2b04695922cc6c53d535932b0dafcf61835596fb531669702cad72b0d723676:7:12
  |
7 |             self.signer.contracts.add(
  |             ^

error: unexpected token: identifier
 --> 3e9a346a9ab99a73.KittyItemsMarket:1:22
  |
1 | import Kibble from 0x0x3e9a346a9ab99a73
  |                       ^
 undefined
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start:dev: `tsnd src/index.ts`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start:dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.`

Shared marketplace for all users

The current application only displays sale items for one account at a time. This allows users to purchase items from other users, but it is impossible to find items that are for sale without knowing an existing user's address.

The application should have a tab that shows a list of all items that are listed for sale.

setup minter srcipt error

Hello !

I am currently following the tutorial for the installation of Kitty Items API I have not encountered any particular problem to launch my database or to launch the API server however when I execute the script Setup minter i get some error like this

it seems however that one of the commands seems to work

If you could help me to solve this problem ? I modified the setup minter file in order to take into account the flow address but still have the same error ...

Thank you in advance :)

flow project deploy --network=testnet FAILS on Powershell 7.2 (792)

After setting the flow environmental variables in a vscode project directory on windows 10

$env:FLOW_ADDRESS='0xae7561b4bab9bc61'

flow project deploy --network=testnet

generates the following error

Config Error: invalid project configuration: encoding/hex: invalid byte: U+0078 'x'

Error deploying contract

I'm getting this error when I run flow project deploy --network=testnet. Any suggestions on how to deploy?

gRPC requires HTTP/2

After following the step 5. Start the Flow emulator

I get the running results of gRPC and HTTP on following ports 3569, 8080.

But when I try to hit the http url I get following error gRPC requires HTTP/2

REQUEST: add Svelte front-end

Should be helpful having Svelte or Sveltekit front-end example other then React, new generation front-end devs won't use React anymore

Contract deploy error

When i use "flow project deploy --network=testnet" i get
Deploying 3 contracts for accounts: emulator-account,testnet-account
Kibble error
KittyItems error
KittyItemsMarket error

❌ Failed to deploy all contracts

Spotted an inaccuracy in "./kitty-items-deployer/README.md"

There is an error in the README.md file in "./kitty-items-deployer". It instructs devs to install dependencies using "npm install", but the author forgot to mention first to cd into "./kitty-items-deployer" before doing so. People who are unfamiliar with npm commands and the package.json file will most likely get stuck here.

EDIT: On a related note, it might also be useful to describe in further detail how the .env file should be formatted. I made the mistake of first doing this: ACCOUNT_ADDRESS={0x6adc3ecc434e6afe}. Then, I changed it to this: ACCOUNT_ADDRESS={6adc3ecc434e6afe}. Finally, I figured out that it was this: ACCOUNT_ADDRESS=6adc3ecc434e6afe. In my opinion, it's ok to add lots and lots of detail to a readme, even if, for most devs, that detail is superfluous. A bit of hand-holding never hurt anybody, after all.

Minter script error

The script ./setup-minter.sh results in cadence errors. Env vars are passed and values were verified.
Server is running and postgres instance/container is running.

Output

david@ttglt001 MINGW64 ~/kitty-items/api (master)
$ ./setup-minter.sh
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100    73  100    73    0     0      7      0  0:00:10  0:00:09  0:00:01    17{"transaction":{"status":4,"statusCode":0,"errorMessage":"","events":[]}}
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100    73  100    73    0     0      7      0  0:00:10  0:00:09  0:00:01    17{"transaction":{"status":4,"statusCode":0,"errorMessage":"","events":[]}}
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100    75  100    75    0     0      7      0  0:00:10  0:00:09  0:00:01    17{"transactionId":{"status":4,"statusCode":0,"errorMessage":"","events":[]}}
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   547  100   502  100    45     67      6  0:00:07  0:00:07 --:--:--   158<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>[Error Code: 1101] cadence runtime error Execution failed:<br>error: invalid argument at index 0: decodeing argument failed: [Error Code: 1052] transaction arguments are invalid: (argument is not json decodable: failed to decode value: runtime error: slice bounds out of range [:2] with length 0)<br>--&gt; 56f938211cac921dccf4830a949510b19cab90521e610b8ad087351da91edd44<br></pre>
</body>
</html>

  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   544  100   502  100    42     78      6  0:00:07  0:00:06  0:00:01   119<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>[Error Code: 1101] cadence runtime error Execution failed:<br>error: invalid argument at index 0: decodeing argument failed: [Error Code: 1052] transaction arguments are invalid: (argument is not json decodable: failed to decode value: runtime error: slice bounds out of range [:2] with length 0)<br>--&gt; f15bae6de32c274dac7cfef583a8bfc84ed0212cad616981dfa2849c058525b4<br></pre>
</body>
</html>

  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   834  100   795  100    39    123      6  0:00:06  0:00:06 --:--:--   247<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>[Error Code: 1101] cadence runtime error Execution failed:<br>error: unexpectedly found nil while forcing an Optional value<br> &nbsp;--&gt; c9248a39fe523324959c2f346f067ffad37cc8d8e8befc6575367f436c8aa646:34:83<br> &nbsp; |<br>34 | &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br> &nbsp; | &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;^<br></pre>
</body>
</html>

Live demo: CORS problems

Hello

The live demo app from the readme in this repo is broken in most major browsers as far as I can tell, this includes:

• Firefox
• Safari
• Edge

The first argument must be one of type string, Buffer, ArrayBuffer, Array, or Array-like Object. Received type object

hi
i try to request a api server. but it return error.

TypeError [ERR_INVALID_ARG_TYPE]: The first argument must be one of type string, Buffer, ArrayBuffer, Array, or Array-like Object. Received type object
at Function.from (buffer.js:206:11)
at /srv/blockchain/kitty-items/api/node_modules/@onflow/send/src/send-transaction.js:8:39
at process._tickCallback (internal/process/next_tick.js:68:7)
code.
TypeError [ERR_INVALID_ARG_TYPE]: The first argument must be one of type string, Buffer, ArrayBuffer, Array, or Array-like Object. Received type object
at Function.from (buffer.js:206:11)
at /srv/blockchain/kitty-items/api/node_modules/@onflow/send/src/send-transaction.js:8:39

this is the command what i used.

curl --request POST
--url http://localhost:3000/v1/kibbles/setup
--header 'Content-Type: application/json'

Running ./setup-minter.sh return error

When I run the script ./setup-minter.sh, I get this error:

TypeError [ERR_INVALID_ARG_TYPE]: The first argument must be one of type string, Buffer, ArrayBuffer, Array, or Array-like Object. Received type object
    at Function.from (buffer.js:207:11)
    at /Users/benjamincherion/Desktop/kitty-items/api/node_modules/@onflow/send/src/send-transaction.js:8:39
    at process._tickCallback (internal/process/next_tick.js:68:7)

It sounds it is related to Buffer.from (and according to my quick researches the argument that is passed must be stringified)

Add context to FE demo application

The current Kitty Items FE application (viewable here) contains all of the desired functionality but is still hard to understand without looking at the underlying code and contracts.

What minimal updates can we make to the application UI to better illustrate the logic of Kitty Items and the core concepts of Flow?

dapper integration

Hi guys,

any forecast for integration with dapper?
I'm doing some tests and using the blocto, what would be the difference using the dapper?

Readme git clone command fix

It might be better to change git clone command in the readme to use HTTPS as it doesn't require ssh keys and in some cases, users might not have one generated.
From

git clone [email protected]:onflow/kitty-items.git

To

git clone https://github.com/onflow/kitty-items.git

Read more: https://docs.github.com/en/github/using-git/which-remote-url-should-i-use

Is metamask required for this step to work in the browser? If so please update the doc.

Minter setup script
Run this script to set up the minter account and mint an initial supply of Kibble and Kitty Items:

./setup-minter.sh
Try it out!
✨ The API should now be available at http://localhost:3000.

Clarify "minter" account - IS IT a new ACCOUNT or not? or are we using an existing account we just created?

6. Set up the minter account
   Before you can mint Kibbles and Kitty Items, you'll need to initialize your account with the following:

An empty Kibble vault
An empty KittyItems collection
An empty KittyItemsMarket collection
💡 Learn more about Vault and Collection resources in this tutorial.

Minter setup script
Run this script to set up the minter account and mint an initial supply of Kibble and Kitty Items:

Password authentication failed for user "kittyuser"

Hi there,

Thanks so much for the excellent framework!

After deploying the contracts and following the API steps here:

https://github.com/onflow/kitty-items/tree/master/api#readme

There seems be an error with regard to password authentication failed for user "kittyuser". Please see the error below:

---

npm run start:dev

[email protected] start:dev
tsnd --respawn src/index.ts

[INFO] 20:09:41 ts-nhttps://github.com/onflow/kitty-items/tree/master/api#readmeode-dev ver. 1.1.1 (using ts-node ver. 9.1.1, typescript ver. 4.1.2)
error: password authentication failed for user "kittyuser"
at Parser.parseErrorMessage (kitty-items/api/node_modules/pg-protocol/src/parser.ts:357:11)
at Parser.handlePacket (kitty-items/api/node_modules/pg-protocol/src/parser.ts:186:21)
at Parser.parse (kitty-items/api/node_modules/pg-protocol/src/parser.ts:101:30)
at Socket. (kitty-items/api/node_modules/pg-protocol/src/index.ts:7:48)
at Socket.emit (node:events:378:20)
at addChunk (node:internal/streams/readable:313:12)
at readableAddChunk (node:internal/streams/readable:288:9)
at Socket.Readable.push (node:internal/streams/readable:227:10)
at TCP.onStreamRead (node:internal/stream_base_commons:190:23) {
length: 105,
severity: 'FATAL',
code: '28P01',
detail: undefined,
hint: undefined,
position: undefined,
internalPosition: undefined,
internalQuery: undefined,
where: undefined,
schema: undefined,
table: undefined,
column: undefined,
dataType: undefined,
constraint: undefined,
file: 'auth.c',
line: '329',
routine: 'auth_failed'
}

---

Can you kindly advise how to fix it?

Thanks!

npm run start:testnet failed

[email protected] start:testnet /home/vaibhav/kitty-items
./scripts/run-testnet.sh

sh: 1: ./scripts/run-testnet.sh: Permission denied
npm ERR! code ELIFECYCLE
npm ERR! errno 126
npm ERR! [email protected] start:testnet: ./scripts/run-testnet.sh
npm ERR! Exit status 126
npm ERR!
npm ERR! Failed at the [email protected] start:testnet script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /home/vaibhav/.npm/_logs/2021-06-28T21_59_33_962Z-debug.log

Remove hardcoded Cadence logic

Can Cadence source be separated out as files vs being hardcoded?

For example:
https://github.com/onflow/kitty-items/blob/master/web/src/flow/buy-market-item.tx.js

@psiemens

Deploy the contracts but don't get any contracts

Hi there,
today I follow the step and deploy the contracts,
but I don't get any contracts

Is it correct or I miss some steps?

Install does not work when hash algo is SHA2_256

When using the SHA2_256 hash algo on the faucet to create a Flow account, the config described in the readme does not work.

flow project deploy --network=testnet

❌  Kibble error: [Error Code: 1006] invalid proposal key: public key 0 on account e5c068f5a1155a3b does not have a valid signature: [Error Code: 1009] invalid envelope key: public key 0 on account e5c068f5a1155a3b does not have a valid signature: signature is not valid
❌  KittyItems error: [Error Code: 1006] invalid proposal key: public key 0 on account e5c068f5a1155a3b does not have a valid signature: [Error Code: 1009] invalid envelope key: public key 0 on account e5c068f5a1155a3b does not have a valid signature: signature is not valid
❌  KittyItemsMarket error: [Error Code: 1006] invalid proposal key: public key 0 on account e5c068f5a1155a3b does not have a valid signature: [Error Code: 1009] invalid envelope key: public key 0 on account e5c068f5a1155a3b does not have a valid signature: signature is not valid

✨  All contracts deployed successfully

TODO:

• update readme to state that hash algo should be SHA3_256
• provide config to use SHA2_256

Kitty items can make a batch-mint. Can it?

In contract KittyItems , Is impssible mint the nft with given quantity?

pub fun mintNFT(recipient: &{NonFungibleToken.CollectionPublic}, typeID: UInt64) {
           emit Minted(id: KittyItems.totalSupply, typeID: typeID)

			deposit it in the recipient's account using their reference
          
			recipient.deposit(token: <-create KittyItems.NFT(initID: KittyItems.totalSupply, initTypeID: typeID))
                    
KittyItems.totalSupply = KittyItems.totalSupply + (1 as UInt64)

Error: Response closed without headers

Following the getting started step by step, after I run npm run start:dev, I receive this console output

> [email protected] start:dev /home/some/Projects/Personal/kitty-items/api
> tsnd --respawn src/index.ts --dev

[INFO] 18:39:54 ts-node-dev ver. 1.1.1 (using ts-node ver. 9.1.1, typescript ver. 4.1.2)
fetching latest block height
Listening on port 3000!
(node:18058) UnhandledPromiseRejectionWarning: Error: Response closed without headers
    at Object.onEnd (/home/some/Projects/Personal/kitty-items/api/node_modules/@onflow/sdk/src/send/unary.js:15:18)
    at /home/some/Projects/Personal/kitty-items/api/node_modules/@onflow/sdk/node_modules/@improbable-eng/grpc-web/dist/grpc-web-client.js:1:24140
    at /home/some/Projects/Personal/kitty-items/api/node_modules/@onflow/sdk/node_modules/@improbable-eng/grpc-web/dist/grpc-web-client.js:1:11457
    at Array.forEach (<anonymous>)
    at e.rawOnError (/home/some/Projects/Personal/kitty-items/api/node_modules/@onflow/sdk/node_modules/@improbable-eng/grpc-web/dist/grpc-web-client.js:1:11419)
    at e.onTransportEnd (/home/some/Projects/Personal/kitty-items/api/node_modules/@onflow/sdk/node_modules/@improbable-eng/grpc-web/dist/grpc-web-client.js:1:10289)
    at ClientRequest.<anonymous> (/home/some/Projects/Personal/kitty-items/api/node_modules/@onflow/sdk/node_modules/@improbable-eng/grpc-web-node-http-transport/src/index.ts:70:20)
    at ClientRequest.emit (events.js:315:20)
    at Socket.socketErrorListener (_http_client.js:469:9)
    at Socket.emit (events.js:315:20)
(Use `node --trace-warnings ...` to show where the warning was created)
(node:18058) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:18058) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Only thing I did differently was running npm audit fix after npm install.
Possibly related to onflow/fcl-js#271

Deploy new Kitty Items demo API and events worker to Heroku

Context

PR #27 merges in updates that require the events worker to always been running.

The current Heroku deployment does not include a dyno for the events worker.

Suggest a Solution

Create a Procfile with the following entries (inspired by this comment):

web:    node api/dist/index.js
worker: node api/dist/index.js --worker

This requires a change to the api project to make the worker to be runnable as a separate process.

Definition of Done

• kitty-items/api is updated to allow for separate API and worker processes
• Procfile is created with web and worker entries
• Demo Heroku deployment has been updated with the new Procfile

Buy button throws an error

Describe the bug
When I try to buy an item via button "Buy" it fails with some error in console.

To Reproduce
Steps to reproduce the behavior:
Login to shop on testnet with Blockto wallet.
Init account.
Mint.
Buy an item at Item Marketplace screen.

Expected behavior
Item should be acquired by me.

Screenshots/Logs/Output

Environment (Optional - Version, OS, Browser, etc.)
Chrome, Version 93.0.4542.2 (Official Build) dev (64-bit)
Manjaro Linux

Error in console:

tx.js:5 TX[64ec98ec8f325688c9619a733e44e67bb6523aa057f396d19e52a42387efd942]: https://flow-view-source.com/testnet/tx/64ec98ec8f325688c9619a733e44e67bb6523aa057f396d19e52a42387efd942 [Error Code: 1101] cadence runtime error Execution failed:
error: unexpectedly found nil while forcing an Optional value
  --> 64ec98ec8f325688c9619a733e44e67bb6523aa057f396d19e52a42387efd942:17:74
   |
17 |           let price = self.marketCollection.borrowSaleItem(itemID: itemID)!.price
   |                                                                           ^