Sign-in with updated ledger app is broken #719

sophoah · 2025-02-06T04:42:24Z

Problem Description

After updating to the new Ledger app (generated from https://github.com/LedgerHQ/app-ethereum/ with the harmony chainid), the project's functionality for signing broken. We disabled the ledger sign-in feature for now.

Desired Behavior

The project should allow users to sign in using the ledger nano hardware using the updated Ethereum Ledger app fork.

polymorpher · 2025-02-06T11:46:18Z

Rather than modifying existing code for Ledger integration, the new implementation should modify frontend/src/components/common/TmSessionExisting.vue to provide sign-in using WalletConnect. Users are expected to use WalletConnect to interact with their Ledger devices via Ledger Live. The new implementation should follow existing code for MetaMask integration, to allow staking delegation and undelegation operations via WalletConnect by calling smart contracts. The preferred library for working with WalletConnect is @wagmi/vue, viem and @reown/appkit-cli. See https://docs.reown.com/appkit/vue/core/installation for example of a WalletConect integration.

fegloff · 2025-02-06T21:01:38Z

Found a build-time compatibility issue while implementing WalletConnect integration:

Current errors:

Build fails due to optional chaining (?.) syntax in @wagmi/core and viem packages
Multiple modules affected: sendTransaction.js, deployContract.js, weierstrass.js
Error pattern: "Module parse failed: Unexpected token"

Root cause:

Project's webpack/babel configuration doesn't support modern JavaScript features
Both @wagmi/core and viem heavily use optional chaining in their codebase

Proposed solution:

Remove @wagmi/core and viem dependencies
Use simplified WalletConnect integration with @reown/appkit only
This maintains WalletConnect functionality while avoiding syntax compatibility issues

 error  in ./node_modules/@wagmi/core/dist/esm/actions/sendTransaction.js

Module parse failed: Unexpected token (8:47)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     const { account, chainId, connector, ...rest } = parameters;
|     let client;
>     if (typeof account === 'object' && account?.type === 'local')
|         client = config.getClient({ chainId });
|     else

 @ ./node_modules/@wagmi/core/dist/esm/exports/index.js 61:0-65 61:0-65
 @ ./src/scripts/walletconnect-utils/index.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/common/TmSessionWalletConnect.vue?vue&type=script&lang=js&
 @ ./src/components/common/TmSessionWalletConnect.vue?vue&type=script&lang=js&
 @ ./src/components/common/TmSessionWalletConnect.vue
 @ ./src/routes.js
 @ ./src/router.js
 @ ./src/initializeApp.js
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://192.168.1.6:9080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

 error  in ./node_modules/@wagmi/core/dist/esm/actions/deployContract.js

Module parse failed: Unexpected token (8:47)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     const { account, chainId, connector, ...rest } = parameters;
|     let client;
>     if (typeof account === 'object' && account?.type === 'local')
|         client = config.getClient({ chainId });
|     else

 @ ./node_modules/@wagmi/core/dist/esm/exports/index.js 7:0-63 7:0-63
 @ ./src/scripts/walletconnect-utils/index.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/common/TmSessionWalletConnect.vue?vue&type=script&lang=js&
 @ ./src/components/common/TmSessionWalletConnect.vue?vue&type=script&lang=js&
 @ ./src/components/common/TmSessionWalletConnect.vue
 @ ./src/routes.js
 @ ./src/router.js
 @ ./src/initializeApp.js
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://192.168.1.6:9080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

 error  in ./node_modules/viem/node_modules/@noble/curves/abstract/weierstrass.js

Module parse failed: Unexpected token (921:61)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         const u1 = modN(h * is); // u1 = hs^-1 mod n
|         const u2 = modN(r * is); // u2 = rs^-1 mod n
>         const R = Point.BASE.multiplyAndAddUnsafe(P, u1, u2)?.toAffine(); // R = u1⋅G + u2⋅P
|         if (!R)
|             return false;

 @ ./node_modules/viem/node_modules/@noble/curves/secp256k1.js 8:25-61
 @ ./node_modules/viem/_esm/utils/signature/recoverPublicKey.js
 @ ./node_modules/viem/_esm/utils/index.js
 @ ./node_modules/viem/_esm/actions/public/verifyMessage.js
 @ ./node_modules/viem/_esm/actions/index.js
 @ ./node_modules/@wagmi/core/dist/esm/actions/call.js
 @ ./node_modules/@wagmi/core/dist/esm/exports/index.js
 @ ./src/scripts/walletconnect-utils/index.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/common/TmSessionWalletConnect.vue?vue&type=script&lang=js&
 @ ./src/components/common/TmSessionWalletConnect.vue?vue&type=script&lang=js&
 @ ./src/components/common/TmSessionWalletConnect.vue
 @ ./src/routes.js
 @ ./src/router.js
 @ ./src/initializeApp.js
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://192.168.1.6:9080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

fegloff · 2025-02-08T18:42:12Z

I've tested the changes pushed to devin/1738967760-add-optional-chaining-support on branch devin/1738830151-fix-ledger-signing and documented the following findings from our dependency update attempts.

Test 1: Core Dependencies Update

Changes Implemented:

Updated core-js to version 3.37.0
Updated Node.js to version 18.19.0
Modified babel.config.js:

module.exports = {
  presets: [
    [
      "@vue/cli-plugin-babel/preset",
      {
        useBuiltIns: "usage",
        corejs: "3.37.0",
        targets: {
          node: "18.19.0",
          browsers: [
            "last 2 Chrome versions",
            "last 2 Firefox versions",
            "last 2 Safari versions",
            "last 2 Edge versions"
          ]
        }
      }
    ]
  ],
  plugins: [["@babel/transform-runtime"]]
}

Required Dependency Updates:

"@babel/polyfill": "^7.12.1"
"@babel/plugin-transform-runtime": "^7.24.0"
"@vue/cli-plugin-babel": "~4.5.19"
"@babel/core": "^7.24.0"

Error Encountered:

warning [email protected]: The engine "bun" appears to be invalid.
warning [email protected]: The engine "deno" appears to be invalid.
warning @ecies/[email protected]: The engine "bun" appears to be invalid.
warning @ecies/[email protected]: The engine "deno" appears to be invalid.
error @achrinza/[email protected]: The engine "node" is incompatible with this module. Expected version "8 || 10 || 12 || 14 || 16 || 17". Got "18.19.0"
error Found incompatible module.

Test 2: Package Resolutions Implementation

Changes Implemented:
Added resolutions to package.json:

"resolutions": {
  "braces": ">=2.3.1",
  "simsala/axios": "^0.24.0",
  "glob": "^10.3.10",
  "@ecies/ciphers": "^0.2.2"
}

Command Run:

yarn install --ignore-engines

Error Encountered:

error  in ./node_modules/viem/_esm/utils/filters/createFilterRequestScope.js

Module parse failed: Unexpected token (9:36)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     const requestMap = {};
|     if (client.transport.type === 'fallback')
>         client.transport.onResponse?.(({ method: method_, response: id, status, transport, }) => {

Available Options for Resolution

Dependency Downgrade (Medium Impact):
- Downgrade viem/wagmi packages to versions without modern JavaScript features
Custom Webpack Configuration (Low Impact):
- Add specific webpack/babel configuration to handle modern JavaScript features

devin-ai-integration bot mentioned this issue Feb 6, 2025

feat: add WalletConnect integration for Ledger devices polymorpher/staking-dashboard#1

Closed

3 tasks

polymorpher linked a pull request Feb 6, 2025 that will close this issue

feat: add WalletConnect integration for Ledger devices #720

Open

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Sign-in with updated ledger app is broken #719

Sign-in with updated ledger app is broken #719

sophoah commented Feb 6, 2025

polymorpher commented Feb 6, 2025

fegloff commented Feb 6, 2025

fegloff commented Feb 8, 2025

Sign-in with updated ledger app is broken #719

Sign-in with updated ledger app is broken #719

Comments

sophoah commented Feb 6, 2025

Problem Description

Desired Behavior

polymorpher commented Feb 6, 2025

fegloff commented Feb 6, 2025

fegloff commented Feb 8, 2025

Test 1: Core Dependencies Update

Test 2: Package Resolutions Implementation

Available Options for Resolution