Unable to login to Kitty-Items Localhost

What I did:

  1. Installed as per GitHub - onflow/kitty-items: Kitty Items: CryptoKitties Sample App
  2. Start up the project locally
  3. Opened up web app http://0.0.0.0:3001
  4. Clicked Login or Sign up

And then I was met with an empty gray screen :point_down:

Any idea why? Thanks so much.

  1. Start up the project locally

Just some clarification before going forward - did you run the project and the emulator?

Yes I did both these steps

  1. Run npm run start:dev
  2. Run flow project deploy --network emulator

~/code/crypto/flow/kitty-items master* ❯ npm run start:dev 09:31:15 AM

kitty-items@1.0.0 start:dev
docker-compose --env-file .env.dev --profile dev up -d --build

WARNING: The FUSD_ADDRESS variable is not set. Defaulting to a blank string.
Building api
[+] Building 9.8s (11/11) FINISHED
=> [internal] load build definition from Dockerfile.dev 0.0s
=> => transferring dockerfile: 172B 0.0s
=> [internal] load .dockerignore 0.0s
=> => transferring context: 2B 0.0s
=> [internal] load metadata for Docker 2.7s
=> [auth] library/node:pull token for registry-1.docker.io 0.0s
=> [internal] load build context 7.0s
=> => transferring context: 187.25MB 6.7s
=> [1/5] FROM Docker 0.0s
=> CACHED [2/5] WORKDIR /api 0.0s
=> CACHED [3/5] RUN npm install typescript 0.0s
=> CACHED [4/5] COPY ./api . 0.0s
=> CACHED [5/5] COPY ./cadence /cadence 0.0s
=> exporting to image 0.0s
=> => exporting layers 0.0s
=> => writing image sha256:5993593111a1fef844820bfa7ecba5a808db1ba2cae03e1ff39d8a34041839fe 0.0s
=> => naming to Docker 0.0s

Use ‘docker scan’ to run Snyk tests against images to find vulnerabilities and learn how to fix them
Building web
[+] Building 9.8s (9/9) FINISHED
=> [internal] load build definition from Dockerfile.dev 0.0s
=> => transferring dockerfile: 131B 0.0s
=> [internal] load .dockerignore 0.0s
=> => transferring context: 2B 0.0s
=> [internal] load metadata for Docker 1.2s
=> [1/4] FROM Docker 0.0s
=> [internal] load build context 8.4s
=> => transferring context: 212.69MB 8.3s
=> CACHED [2/4] WORKDIR /web 0.0s
=> CACHED [3/4] COPY ./web . 0.0s
=> CACHED [4/4] RUN npm i 0.0s
=> exporting to image 0.0s
=> => exporting layers 0.0s
=> => writing image sha256:1fb4c3d4f14fe8fbf0c57e04637b6fc60803bb45d93366645fa2ac6725df9e10 0.0s
=> => naming to Docker 0.0s

Use ‘docker scan’ to run Snyk tests against images to find vulnerabilities and learn how to fix them
Starting kitty-items_db_1 … done
Starting kitty-items_emulator_1 … done
Starting kitty-items_api_1 … done
Starting kitty-items_dev-wallet_1 … done
Starting kitty-items_web_1 … done

~/code/crypto/flow/kitty-items master* ❯ flow project deploy --network emulator 25s 09:31:47 AM

Deploying 5 contracts for accounts: emulator-account

FUSD → 0xf8d6e0586b0a20c7 (e3c23ddddda6b0425d41449b79a49ca96bcff8183148cc07d79b7a5e7fa84240)

Kibble → 0xf8d6e0586b0a20c7 (7af2c22ee057f0a9445ca1946861714d361da74da306ed8df2c197e06250013e)

NonFungibleToken → 0xf8d6e0586b0a20c7 (dfbcf287e8be5ad2c6798a11b5b01b3cf2ab9b4da60a23b76830aa3b00f00c5c)

KittyItems → 0xf8d6e0586b0a20c7 (ae69069f014419e9f41f9d1f1e7bec617f077be009feab90a1e5dbb22b1665b2)

NFTStorefront → 0xf8d6e0586b0a20c7 (f7c3072a29fa134b0ae8011a92e53db237d571f359d57bd26b218e5458268824)

:sparkles: All contracts deployed successfully

Thanks for flagging this. @Mackenzie is currently looking into it :+1:

You’ll need to start the fcl-dev-wallet which is another service that provides a wallet for your application when in development.

Currently you can check-out and run this project: GitHub - onflow/fcl-dev-wallet: A FCL Dev Wallet to be used with the Flow Emulator
(Ensure it’s running on port 8701)

We’re going to create a Docker image for this project (fcl-dev-wallet), so it can be run directly from Kitty-Items, this week, but for now you’ll need to run this project, as well as the flow emulator, alongside Kitty Items.

Hi Mackenzie,

1/ First, I ran kitty-items and the Flow emulator that came with its docker setup. I ran npm run start:dev and then flow project deploy --network emulator on GitHub - onflow/kitty-items: Kitty Items: CryptoKitties Sample App. Both commands were successful.

2/ Then, I stopped the kitty-items_dev-wallet-1 container as it was on port 8701.

3/ Then, I checked out and ran the fcl-dev-wallet project separately, ensuring I use port 8701 by changing the dev script to "dev": "next dev -- -p 8701", in package.json. I ran with npm run dev

4/ I opened localhost:8701 and saw

5/ I opened localhost:3001, clicked Login and saw an error in the fcl-dev-wallet logs

TX:ERROR Error
    at Object.onEnd (/Users/eric/code/crypto/flow/fcl-dev-wallet/node_modules/@onflow/sdk/dist/sdk.js:1:8818)
    at /Users/eric/code/crypto/flow/fcl-dev-wallet/node_modules/@improbable-eng/grpc-web/dist/grpc-web-client.js:1:24140
    at /Users/eric/code/crypto/flow/fcl-dev-wallet/node_modules/@improbable-eng/grpc-web/dist/grpc-web-client.js:1:11457
    at Array.forEach (<anonymous>)
    at e.rawOnError (/Users/eric/code/crypto/flow/fcl-dev-wallet/node_modules/@improbable-eng/grpc-web/dist/grpc-web-client.js:1:11419)
    at e.onTransportHeaders (/Users/eric/code/crypto/flow/fcl-dev-wallet/node_modules/@improbable-eng/grpc-web/dist/grpc-web-client.js:1:8996)
    at NodeHttp.responseCallback (/Users/eric/code/crypto/flow/fcl-dev-wallet/node_modules/@improbable-eng/grpc-web-node-http-transport/lib/index.js:31:22)
    at Object.onceWrapper (node:events:485:26)
    at ClientRequest.emit (node:events:378:20)
    at HTTPParser.parserOnIncomingClient (node:_http_client:636:27)

6/ I then checked kitty-items_api logs, and saw it’s running
api

Do the logs help at all in identifying what’s wrong?