⚡️ [FEAT] : WalletSync - Synchronize with LLD 🔄

[mcayuelas-ledger]

✅ Checklist

• npx changeset was attached.
• Covered by automatic tests.
• Impact of the changes:
  • ...

📝 Description

Synchronize Flow

• QRCode Screen ✅
• PinCode Screen ✅

Screen.Recording.2024-06-06.at.17.05.44.mov

❓ Context

• JIRA or GitHub link: LIVE-12299 LIVE-12302

---

🧐 Checklist for the PR Reviewers

• The code aligns with the requirements described in the linked JIRA or GitHub issue.
• The PR description clearly documents the changes made and explains any technical trade-offs or design decisions.
• There are no undocumented trade-offs, technical debt, or maintainability issues.
• The PR has been tested thoroughly, and any potential edge cases have been considered and handled.
• Any new dependencies have been justified and documented.
• Performance considerations have been taken into account. (changes have been profiled or benchmarked if necessary)

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

5 Ignored Deployments

Name	Status	Preview	Comments	Updated (UTC)
ledger-live-docs	⬜️ Ignored (Inspect)	Visit Preview		Jun 7, 2024 1:15pm
ledger-live-github-bot	⬜️ Ignored (Inspect)	Visit Preview		Jun 7, 2024 1:15pm
native-ui-storybook	⬜️ Ignored (Inspect)	Visit Preview		Jun 7, 2024 1:15pm
react-ui-storybook	⬜️ Ignored (Inspect)	Visit Preview		Jun 7, 2024 1:15pm
web-tools	⬜️ Ignored (Inspect)	Visit Preview		Jun 7, 2024 1:15pm

[KVNLS]

Could we add a debug cta to start a specific flow in developer settings please? Because here we can't test the activation flow without changing the code.

[LucasWerey]

LGTM !

[gre]

notes to anticipate a bit the integration:

this code may just disappear because we need to be able to "control" the steps, it's not the step that will do a call so some api and do something based on this because we will have a global function to call at the beginning and we will just hook to the various events.

so i think we don't need to have the "displayPinCode" injected as a prop neither, it's going to be a switch of step from the parent directly.

see the usage here for instance: https://github.com/LedgerHQ/ledger-live/blob/live-12627/apps/web-tools/trustchain/components/App.tsx#L468-L479 (generally speaking, this App.tsx file will act as general/canonical examples for all trustchain integrations)

createQRCodeHostInstance({
      onDisplayQRCode: url => {
        setUrl(url);
      },
      onDisplayDigits: digits => {
        setDigits(digits);
      },
      addMember: async member => {
        // this sdk will be somehow available as a react context when we do the trustchain integration
        const jwt = await sdk.liveAuthenticate(trustchain, liveCredentials);
        await sdk.addMember(jwt, trustchain, liveCredentials, member);
      },
    })
      .catch(e => {
        if (e instanceof InvalidDigitsError) {
          return; // in this case, we could display an error of invalid digital error (it can also be handled by the generic component)
        }
        setError(e); // in this case, we render the generic error (we have a generic component for handling of errors) , typically it can be Networking error, but there could be also protocol errors
      })
      .then(() => {
        // everything is finished. the other member was added ✅ 
      });

[mcayuelas-ledger]

Yeah nice, I just putted that to simulate a behavior to develop UI but I'll make another PR right now to start the job on this part :)

[mcayuelas-ledger]

We are currently able to control which step we want to display :)

[gre]

some notes to anticipate the integration, i let you decide if we fix this in a future PR, but the integration will have to modify a bunch of code (and not just the block of // INTEGRATION that you have defined) specifically for the qr code flow that needs to be one function call for the whole thing (since it's managing a websocket channel)