TS2339: Property 'balance' does not exist on type 'Account'.

[ltfschoen]

If I fork the latest 'master' branch commit 94565c96e096a65ebdd6bfa28917c85b4132c2ca that was released on 21 Jan 2024, a day after the announcement of the updated testnet version for Vara Arena testing purposes and follow these steps in order to run it locally, when i get up to the final step shown here of running the frontend with the following:

npm i
npm run predeploy

it outputs the following error:

TS2339: Property 'balance' does not exist on type 'Account'.
    4 |
    5 | type Props = {
  > 6 |   balance: Account['balance'];
      |                    ^^^^^^^^^
    7 |   address: string;
    8 |   name: string | undefined;
    9 |   onClick?: () => void;

is the version that is being used in the updated testnet version for testing that was published at https://impulsedao.github.io/Vara-Arena/ on the 20th Jan 2024 for the testnet league live for 7 days from one of the commits in the 'master' branch? if so which commit?

i even went to Deployments at https://github.com/ImpulseDAO/Vara-Arena/deployments where the latest was https://github.com/ImpulseDAO/Vara-Arena/deployments/Production and tried checking out the 'deploy-to-vercel' branch, and running that resulted in the same error as above.

what else could be causing the error?

[tmcgroul]

i guess the latest frontend version can be found here - https://github.com/ImpulseDAO/Vara-Arena/tree/update-frontend
@Rrock-k correct me if i'm wrong

[ltfschoen]

https://github.com/ImpulseDAO/Vara-Arena/tree/update-frontend

when i switch to that branch from the 'master' branch with

git fetch upstream update-frontend:update-frontend
git checkout update-frontend

and then try building it with

cargo build --release

it gives the following error because for some reason it doesn't remove the contracts/mage subdirectory and its .binpath file that doesn't exist in that 'update-frontend' branch, but does in the 'master' branch

error: failed to load manifest for workspace member `/Users/me/code/clones/github/clawbird/Vara-Arena/contracts/mage`

Caused by:
  failed to read `/Users/me/code/clones/github/clawbird/Vara-Arena/contracts/mage/Cargo.toml`

so i manually have to delete that folder.
but when i run the following again

cargo build --release

this test fails

running 1 test
[gear_core_processor::precharge game] Charged for module instantiation and memory pages. Size: WasmPage(17)
[gear_core_processor::executor game] Executing program 0x0100000000000000000000000000000000000000000000000000000000000000
[gear_core_processor::executor game] Executing dispatch IncomingDispatch { kind: Init, message: IncomingMessage { id: 0x17428dfca88d1c82958b337f06033a4b1a76f6b3ca95397b829d4165aff54747, source: 0x0a00000000000000000000000000000000000000000000000000000000000000, payload: 0x0500c817a8040000..0000000000000000, gas_limit: 18446744073709551615, value: 0, details: None }, context: None }
[gear_lazy_pages::signal game] Interrupted, exception info = ExceptionInfo { fault_addr: 0x2800ffe0c, is_write: Some(true) }
[gear_lazy_pages::signal game] Interrupted, exception info = ExceptionInfo { fault_addr: 0x2801023e8, is_write: Some(false) }
[gear_lazy_pages::signal game] Interrupted, exception info = ExceptionInfo { fault_addr: 0x280102a50, is_write: Some(true) }
[gear_lazy_pages::signal game] Interrupted, exception info = ExceptionInfo { fault_addr: 0x28010fff0, is_write: Some(true) }
[DEBUG game] [handle(0x1742..4747)] 0x0100..0000: panic occurred: 'Unable to decode Config: Decode(Error)', /Users/me/code/clones/github/clawbird/Vara-Arena/contracts/mint/src/lib.rs:394:38
[gear_core_processor::executor game] Termination reason: Trap(Panic(LimitedStr("'Unable to decode Config: Decode(Error)', /Users/me/code/clones/github/clawbird/Vara-Arena/contracts/mint/src/lib.rs:394:38")))
[gear_core_processor::executor game] 💥 Trap during execution of 0x0100000000000000000000000000000000000000000000000000000000000000
📔 Explanation: 'Unable to decode Config: Decode(Error)', /Users/luke/code/clones/github/clawbird/Vara-Arena/contracts/mint/src/lib.rs:394:38
[gtest::manager game] [0x17428dfca88d1c82958b337f06033a4b1a76f6b3ca95397b829d4165aff54747] new dispatch#0x970ef07ce1374aab40c55786969471552ccf2970fb4e4bffc7871cd86a05ff8c
[gtest::manager game] [0xfd339dfec3fdf440a0647b6e4a17004db833dc2c88b7f75238add1f3fc7b2eb7] new dispatch#0x749fd81738363e1546241b3549f3dd1727e813a26e8751b261a112fd8e7b02b6
[gear_core_processor::precharge game] Charged for module instantiation and memory pages. Size: WasmPage(17)
[gear_core_processor::executor game] Executing program 0x0200000000000000000000000000000000000000000000000000000000000000
[gear_core_processor::executor game] Executing dispatch IncomingDispatch { kind: Init, message: IncomingMessage { id: 0xa237eadaf3baaa3a78972156abb390b79c1b753bc04999dd7ae7c7f95dc4c6bd, source: 0x0a00000000000000000000000000000000000000000000000000000000000000, payload: 0x0100000000000000..0000000000000000, gas_limit: 18446744073709551615, value: 0, details: None }, context: None }
[gear_lazy_pages::signal game] Interrupted, exception info = ExceptionInfo { fault_addr: 0x2800fff8c, is_write: Some(true) }
[gear_lazy_pages::signal game] Interrupted, exception info = ExceptionInfo { fault_addr: 0x280103008, is_write: Some(false) }
[gear_lazy_pages::signal game] Interrupted, exception info = ExceptionInfo { fault_addr: 0x280103008, is_write: Some(true) }
[gear_core_processor::executor game] Termination reason: Success
[gtest::manager game] [0xa237eadaf3baaa3a78972156abb390b79c1b753bc04999dd7ae7c7f95dc4c6bd] new dispatch#0x824bf5e164d166b9133a5a8786958108ef3f89e0f7685cd9685cca07d7ea19bc
test game ... FAILED

failures:

---- game stdout ----
thread 'game' panicked at /Users/me/.cargo/git/checkouts/gear-bdc2b7d48ef3acbd/d02d306/gtest/src/system.rs:156:55:
Failed to read file "/Users/me/code/clones/github/clawbird/Vara-Arena/target/wasm32-unknown-unknown/release/fire_mage.wasm"
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace


failures:
    game

test result: FAILED. 0 passed; 1 failed; 0 ignored; 0 measured; 0 filtered out; finished in 0.14s

is that expected?

[ltfschoen]

i guess the latest frontend version can be found here - https://github.com/ImpulseDAO/Vara-Arena/tree/update-frontend @Rrock-k correct me if i'm wrong

also when i switch to the 'update-frontend' branch, i noticed a potential discrepency...

in the indexer/.env file, it includes RPC_ENDPOINT=wss://testnet-archive.vara.network

but in the frontend/src/_env.example file, it includes REACT_APP_NODE_ADDRESS=wss://testnet.vara.network

note how one of them uses subdomain testnet-archive but the other uses just testnet

is that intentional?

why is a different endpoint used for the frontend and the indexer?

[ltfschoen]

when i switch to the 'update-frontend' branch, and go into the frontend folder when i run

cp _env.example .env
source .env
npm i
npm run predeploy
npm run dev

it outputs the following

click here to expand and view the terminal log

 ~/code/clones/github/clawbird/Vara-Arena/frontend   update-frontend ±  npm i
npm run predeploy
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated @babel/plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
npm WARN deprecated @babel/plugin-proposal-numeric-separator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-numeric-separator instead.
npm WARN deprecated @babel/plugin-proposal-nullish-coalescing-operator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.
npm WARN deprecated @babel/plugin-proposal-private-methods@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-methods instead.
npm WARN deprecated rollup-plugin-terser@7.0.2: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser
npm WARN deprecated @babel/plugin-proposal-optional-chaining@7.21.0: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
npm WARN deprecated domexception@2.0.1: Use your platform's native DOMException instead
npm WARN deprecated w3c-hr-time@1.0.2: Use your platform's native performance.now() and performance.timeOrigin.
npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
npm WARN deprecated workbox-cacheable-response@6.6.0: workbox-background-sync@6.6.0
npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated @babel/plugin-proposal-object-rest-spread@7.20.7: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-object-rest-spread instead.

added 2050 packages, and audited 2051 packages in 15s

302 packages are looking for funding
  run `npm fund` for details

9 vulnerabilities (3 moderate, 6 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

> dapp@0.1.1 predeploy
> npm run build


> dapp@0.1.1 prebuild
> graphql-codegen

✔ Parse Configuration
✔ Generate outputs

> dapp@0.1.1 build
> react-app-rewired build

Creating an optimized production build...
One of your dependencies, babel-preset-react-app, is importing the
"@babel/plugin-proposal-private-property-in-object" package without
declaring it in its dependencies. This is currently working because
"@babel/plugin-proposal-private-property-in-object" is already in your
node_modules folder for unrelated reasons, but it may break at any time.

babel-preset-react-app is part of the create-react-app project, which
is not maintianed anymore. It is thus unlikely that this bug will
ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
your devDependencies to work around this error. This will make this message
go away.

=============

WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree.

You may find that it works just fine, or you may not.

SUPPORTED TYPESCRIPT VERSIONS: >=3.3.1 <4.8.0

YOUR TYPESCRIPT VERSION: 4.9.5

Please only submit bug reports when using the officially supported version.

=============
Compiled with warnings.

[eslint]
src/layouts/Header/Header.tsx
  Line 9:10:  'Anchor' is defined but never used             @typescript-eslint/no-unused-vars
  Line 9:18:  'Box' is defined but never used                @typescript-eslint/no-unused-vars
  Line 40:9:  'navigate' is assigned a value but never used  @typescript-eslint/no-unused-vars

src/pages/Battle/Battle.tsx
  Line 10:10:  'getTypeAttack' is defined but never used  @typescript-eslint/no-unused-vars

src/pages/StartFight/StartFight.tsx
  Line 51:9:  'arenaMetaWasmData' is assigned a value but never used  @typescript-eslint/no-unused-vars

src/pages/StartFight/components/StartFightView.tsx
  Line 23:11:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

File sizes after gzip:

  3.31 MB   build/static/js/main.06d0545b.js
  34.49 kB  build/static/css/main.6a0bdb6d.css
  32.32 kB  build/static/js/11.7a9cca54.chunk.js
  28.16 kB  build/static/js/449.5a2e8f29.chunk.js
  18.46 kB  build/static/js/859.ba4ef3ba.chunk.js
  15.95 kB  build/static/js/702.4ec2f45e.chunk.js
  15.93 kB  build/static/js/310.6840833c.chunk.js
  15.11 kB  build/static/js/273.fab8028b.chunk.js
  14.61 kB  build/static/js/720.5609e35f.chunk.js
  13.3 kB   build/static/js/353.be741276.chunk.js
  13.28 kB  build/static/js/737.e6e8d88f.chunk.js
  12.02 kB  build/static/js/16.1b0e5d05.chunk.js
  10.93 kB  build/static/js/529.e11e3074.chunk.js
  8.99 kB   build/static/js/662.8ab0e286.chunk.js
  4.61 kB   build/static/js/619.712f4249.chunk.js
  4.54 kB   build/static/js/836.5b3029b2.chunk.js
  4.43 kB   build/static/js/863.deeda2d1.chunk.js
  3.36 kB   build/static/js/225.f3a7b94e.chunk.js
  2.86 kB   build/static/js/267.b0b0f902.chunk.js
  2.7 kB    build/static/js/417.c88338be.chunk.js
  2.61 kB   build/static/js/188.584920e9.chunk.js
  1.87 kB   build/static/css/11.4d5e7ba5.chunk.css
  1.72 kB   build/static/css/310.b61ce0dc.chunk.css
  1.56 kB   build/static/css/267.1882e23c.chunk.css
  1.44 kB   build/static/js/850.d9a049a3.chunk.js
  1.04 kB   build/static/css/213.61d1f15d.chunk.css
  1.04 kB   build/static/css/697.61d1f15d.chunk.css
  934 B     build/static/css/417.ee990f16.chunk.css
  784 B     build/static/css/662.fb5714b5.chunk.css
  744 B     build/static/js/256.1c718ca5.chunk.js
  668 B     build/static/css/225.4e888591.chunk.css
  601 B     build/static/css/836.2e6baa2a.chunk.css
  531 B     build/static/js/400.a131a313.chunk.js
  528 B     build/static/css/529.f4c0bdc4.chunk.css
  461 B     build/static/css/400.b78bbe7b.chunk.css
  169 B     build/static/js/697.baca5e18.chunk.js

The bundle size is significantly larger than recommended.
Consider reducing it with code splitting: https://goo.gl/9VhYWB
You can also analyze the project dependencies: https://goo.gl/LeUzfb

The project was built assuming it is hosted at /Vara-Arena/.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.

Find out more about deployment here:

  https://cra.link/deployment

 ~/code/clones/github/clawbird/Vara-Arena/frontend   update-frontend ±  npm run dev

> dapp@0.1.1 dev
> concurrently "npm run codegen" "npm run start"

[1]
[1] > dapp@0.1.1 start
[1] > react-app-rewired start
[1]
[0]
[0] > dapp@0.1.1 codegen
[0] > graphql-codegen --watch
[0]
[0] [STARTED] Parse Configuration
[0] [SUCCESS] Parse Configuration
[0] [STARTED] Generate outputs
[0] [STARTED] Generate to ./src/gql/
[0] [STARTED] Load GraphQL schemas
[0] [SUCCESS] Load GraphQL schemas
[0] [STARTED] Load GraphQL documents
[1] (node:9478) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
[1] (Use `node --trace-deprecation ...` to show where the warning was created)
[1] (node:9478) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
[0] [SUCCESS] Load GraphQL documents
[0] [STARTED] Generate
[0] [SUCCESS] Generate
[0] [SUCCESS] Generate to ./src/gql/
[0] [SUCCESS] Generate outputs
[0]   ℹ Watching for changes in /Users/luke/code/clones/github/clawbird/Vara-Arena/frontend...
[1] Starting the development server...
[1]
[1] One of your dependencies, babel-preset-react-app, is importing the
[1] "@babel/plugin-proposal-private-property-in-object" package without
[1] declaring it in its dependencies. This is currently working because
[1] "@babel/plugin-proposal-private-property-in-object" is already in your
[1] node_modules folder for unrelated reasons, but it may break at any time.
[1]
[1] babel-preset-react-app is part of the create-react-app project, which
[1] is not maintianed anymore. It is thus unlikely that this bug will
[1] ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
[1] your devDependencies to work around this error. This will make this message
[1] go away.
[1]
[1] Compiled with warnings.
[1]
[1] [eslint]
[1] src/layouts/Header/Header.tsx
[1]   Line 9:10:  'Anchor' is defined but never used             @typescript-eslint/no-unused-vars
[1]   Line 9:18:  'Box' is defined but never used                @typescript-eslint/no-unused-vars
[1]   Line 40:9:  'navigate' is assigned a value but never used  @typescript-eslint/no-unused-vars
[1]
[1] src/pages/Battle/Battle.tsx
[1]   Line 10:10:  'getTypeAttack' is defined but never used  @typescript-eslint/no-unused-vars
[1]
[1] src/pages/StartFight/StartFight.tsx
[1]   Line 51:9:  'arenaMetaWasmData' is assigned a value but never used  @typescript-eslint/no-unused-vars
[1]
[1] src/pages/StartFight/components/StartFightView.tsx
[1]   Line 23:11:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text
[1]
[1] Search for the keywords to learn more about each warning.
[1] To ignore, add // eslint-disable-next-line to the line before.
[1]
[1] WARNING in [eslint]
[1] src/layouts/Header/Header.tsx
[1]   Line 9:10:  'Anchor' is defined but never used             @typescript-eslint/no-unused-vars
[1]   Line 9:18:  'Box' is defined but never used                @typescript-eslint/no-unused-vars
[1]   Line 40:9:  'navigate' is assigned a value but never used  @typescript-eslint/no-unused-vars
[1]
[1] src/pages/Battle/Battle.tsx
[1]   Line 10:10:  'getTypeAttack' is defined but never used  @typescript-eslint/no-unused-vars
[1]
[1] src/pages/StartFight/StartFight.tsx
[1]   Line 51:9:  'arenaMetaWasmData' is assigned a value but never used  @typescript-eslint/no-unused-vars
[1]
[1] src/pages/StartFight/components/StartFightView.tsx
[1]   Line 23:11:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text
[1]
[1] webpack compiled with 1 warning
[1] No issues found.

and it automatically opens this link in my browser http://localhost:3000/Vara-Arena

but no other logs appear, and nothing loads in the browser, it just returns ERR_CONNECTION_TIMED_OUT

i know it must be running on port 3000, because if i try to run a duplicate frontend it says that port is in use, and when i kill that port with kill -9 $(lsof -ti:3000) and restart it that port is in use again

[ltfschoen]

when i switch to the 'update-frontend' branch, and go into the frontend folder when i run

cp _env.example .env
source .env
npm i
npm run predeploy
npm run dev

it outputs the following

click here to expand and view the terminal log
and it automatically opens this link in my browser http://localhost:3000/Vara-Arena

but no other logs appear, and nothing loads in the browser, it just returns ERR_CONNECTION_TIMED_OUT

i know it must be running on port 3000, because if i try to run a duplicate frontend it says that port is in use, and when i kill that port with kill -9 $(lsof -ti:3000) and restart it that port is in use again

so i realised i was likely using the wrong script commands in development environment,
i changed to using the following instead:

cd frontend
rm -rf build/
npm i
npm run prebuild
npm run build
npm run dev

that outputs similar in the terminal, but now it also says:

...
[1]   Local:            http://localhost:3000/Vara-Arena
[1]   On Your Network:  http://X.X.X.X:3000/Vara-Arena
...
[1] webpack compiled successfully
[1] No issues found.

where X.X.X.X is my public IP address

it automatically opens http://localhost:3000/Vara-Arena, but that timed out,
but if i go to http://X.X.X.X:3000/Vara-Arena, then it appears to start loading, but in the browser console logs it says

bootstrap:27 Uncaught Error: REACT_APP_IS_TESTNET env variable is not set
    at ./src/consts.ts (consts.ts:3:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/utils/index.ts (index.ts:2:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/components/accounts/Accounts.tsx (index.ts:3:1)
    at options.factory (react refresh:6:1)

the reason for that error is because in the _env.example file here https://github.com/ImpulseDAO/Vara-Arena/blob/update-frontend/frontend/_env.example#L2 it has IS_TESTNET=true instead of REACT_APP_IS_TESTNET=true,
so if i change that, and run

cp _env.example .env
source .env

and then run the following again:

npm i
npm run prebuild
npm run build
npm run dev

and then go to http://X.X.X.X:3000/Vara-Arena, it successfully runs the game 💯

but i'm still not sure why it only loads the game using my public IP address at http://X.X.X.X:3000/Vara-Arena but doesn't load the game at http://localhost:3000/Vara-Arena

[0xKube]

should we close the issue?