refactor: vite

[Justkant]

📝 Description

WIP Still some improvements to do:

• [x] Update app/index props for accounts and other wallet-api data (@Justkant on it)
• [x] Add ApplicationDisabled support again (@Justkant on it)
• [x] react-i18next needs to be setup (@Wozacosta on it commit: https://github.com/LedgerHQ/wallet-connect-live-app/pull/144/commits/e4b8bfcde71cc4f05637f80fe7f40e1d2cf42b7e and https://github.com/LedgerHQ/wallet-connect-live-app/pull/144/commits/31ec443c3bd8b69499440421468588b784eb8346)
• [x] Cleanup unused code (at the end)
• [x] Make sure we don't have any ts and eslint issues (looks like import.meta works now)

More details here

## import.meta.env tsconfig `module` option set to `ESNext` https://www.totaltypescript.com/tsconfig-cheat-sheet https://github.com/LedgerHQ/wallet-connect-live-app/pull/144/commits/4fb6825fb2d262581929e03de553d6c312327de2 ## Startup props errors Those errors were due to the fact that we used a `TransitionGroup` element which children were not Transitions, this components tried to pass transition-specifics props to non-transition components. Commit : https://github.com/LedgerHQ/wallet-connect-live-app/pull/144/commits/af9927a062bf6a3773292a10947aa40ced6cc430 ## search tabs error ``` src/components/screens/Home.tsx:133:9 - error TS2322: Type 'import("/Users/samy.rabah-montarou/Code/wallet-connect-live-app/src/shared/navigation").TabsIndexes | undefined' is not assignable to type 'number'. Type 'undefined' is not assignable to type 'number'. 133 activeTabIndex={search.tab} ~~~~~~~~~~~~~~ ``` fixed in commit : https://github.com/LedgerHQ/wallet-connect-live-app/pull/144/commits/a712b959eaed3f25086da062cb3d977cf9304b8a

• [x] Setup sentry (@Wozacosta on it commit: https://github.com/LedgerHQ/wallet-connect-live-app/pull/144/commits/ba53fdf63ebb5b19a43984f5dd822f48fe717968)
• [x] Make analytics work (@Wozacosta on it commit: https://github.com/LedgerHQ/wallet-connect-live-app/pull/144/commits/ba53fdf63ebb5b19a43984f5dd822f48fe717968)
• [x] Check env vars for dev and prod

More details here

``` VITE_WALLETCONNECT_PROJECT_ID VITE_SENTRY_DNS VITE_PUBLIC_SENTRY_DSN VITE_APP_VERSION VITE_PUBLIC_SEGMENT_API_KEY_DESKTOP VITE_PUBLIC_SEGMENT_API_KEY_MOBILE ```

• [x] Update deployment conf
• [x] Check CI
• [x] Update tests to work with new setup (maybe migrate to vitest at the same time) (@Wozacosta on it)
• [ ] There might be some opportunity to improve the RTL setup/usage in tests (https://testing-library.com/docs/react-testing-library/setup#custom-render and https://testing-library.com/docs/user-event/setup)
• [ ] Check styles and theme
• [x] We could simplify a bit the stores using jotai and removing unneeded stores (@Justkant on it)
• [x] useProposal could be reworked (reworked partially at the moment)
• [ ] find or build an alternative to the current qr code component
• [ ] Check all errors handling
• [x] Use suspense with react-query and wallet-api (we need to migrate our hooks first in wallet-api)
• [ ] Explore writing 1 or 2 big e2e or integration test doing a full user flow (connexion to transaction or message for example)
• [ ] react-ui uses an old version of styled-components, should we look into other solutions for styling or try to bump version in LL monorepo ?
• [ ] Add wallet-api simulator (add some issue regarding process usage and minimatch) [see https://www.npmjs.com/package/picomatch-browser]
• [ ] Follow wc best practices (https://docs.walletconnect.com/web3wallet/best_practises)
• [ ] Handle pairing look above for some infos
• [ ] Handle connection/disconnection on wc
• [ ] Allow to reset error boundaries (https://tanstack.com/query/latest/docs/framework/react/guides/suspense#resetting-error-boundaries)
• [x] use Navigate component instead of a useEffect to redirect
• [x] add vercel rewrites for SPA
• [x] fix: not being able to go back home when no session but a proposal
• [x] Prefetch pending proposals and sessions before going to proposal and session detail pages to avoid issue if no useQuery is in the tree
• [x] Simplify expire event handling with just the cache invalidation and no navigation by refactoring the proposal screen to use the query instead of the web3wallet store get directly

❓ Context

• Linked resource(s): LIVE-11005

📸 Demo

🚀 Expectations to reach

Pull Requests must pass the CI and be internally validated in order to be merged.

[Wozacosta]

Sentry errors are correctly sent, tested using this branch https://github.com/LedgerHQ/wallet-connect-live-app/pull/149 which has a button that throws an unhandled error.

Error ended up here: https://ledger.sentry.io/releases/27afd3f447d22054760e309e828aa820a6fefe2b/?project=4505556204257280

[Wozacosta]

New bug noticed, on LLD:

• Click on "Scan QR Code"
• Don't do anything with it
• Try to input the connection string instead

Nothing will happen when you press enter

[Wozacosta]

New bug noticed, on LLD:

• Click on "Scan QR Code"
• Don't do anything with it
• Try to input the connection string instead

Nothing will happen when you press enter

Well I hard a hard time reproducing it until I figured out what happens. The link (that's input in the connection string) was expired, when it is, it closes the QR code video feed and reset the input with no error, but that's it. With a proper connection string it works fine.

[mcayuelas-ledger]

Nice Job Guys ! 🚀