chore(live-wallet): introduce WalletSyncSDK (#7107)

chore: bootstrap a walletsync sdk

apps/web-tools/package.json

@@ -29,11 +29,13 @@
     "@ledgerhq/live-common": "workspace:^",
     "@ledgerhq/live-config": "workspace:^",
     "@ledgerhq/live-env": "workspace:^",
+    "@ledgerhq/live-wallet": "workspace:^",
     "@ledgerhq/logs": "workspace:^",
     "@ledgerhq/trustchain": "workspace:^",
     "@ledgerhq/types-cryptoassets": "workspace:^",
     "@ledgerhq/types-live": "workspace:^",
     "bignumber.js": "^9.1.2",
+    "brace": "^0.11.1",
     "bufferutil": "^4.0.7",
     "encoding": "^0.1.13",
     "eslint-config-next": "13.5.6",

apps/web-tools/trustchain/components/App.tsx

@@ -8,7 +8,7 @@ import Expand from "./Expand";
 import { getSdk } from "@ledgerhq/trustchain";
 import { DisplayName, IdentityManager } from "./IdentityManager";
 import { AppQRCodeCandidate } from "./AppQRCodeCandidate";
-import { SDKContext, defaultContext } from "../context";
+import { TrustchainSDKContext, defaultContext } from "../context";
 import { AppQRCodeHost } from "./AppQRCodeHost";
 import { AppMemberRow } from "./AppMemberRow";
 import { AppDecryptUserData } from "./AppDecryptUserData";
@@ -22,6 +22,8 @@ import { AppInitLiveCredentials } from "./AppInitLiveCredentials";
 import { AppMockEnv } from "./AppMockEnv";
 import { AppSetTrustchainAPIEnv } from "./AppSetTrustchainAPIEnv";
 import { AppRestoreTrustchain } from "./AppRestoreTrustchain";
+import { AppWalletSync } from "./AppWalletSync";
+import { AppSetCloudSyncAPIEnv } from "./AppSetCloudSyncAPIEnv";
 
 const Container = styled.div`
   padding: 0 10px;
@@ -64,9 +66,18 @@ const App = () => {
 
   const mockEnv = useEnv("MOCK");
   const sdk = useMemo(() => getSdk(!!mockEnv, context), [mockEnv, context]);
+  const envTrustchainApiIsStg = useEnv("TRUSTCHAIN_API").includes("stg");
+  const envWalletSyncApiIsStg = useEnv("WALLET_SYNC_API").includes("stg");
+  const envSummary = mockEnv
+    ? "MOCK"
+    : envTrustchainApiIsStg && envWalletSyncApiIsStg
+      ? "STG"
+      : !envTrustchainApiIsStg && !envWalletSyncApiIsStg
+        ? "PROD"
+        : "MIXED";
 
   return (
-    <SDKContext.Provider value={sdk}>
+    <TrustchainSDKContext.Provider value={sdk}>
       <Container>
         <h2>Wallet Sync Trustchain Playground</h2>
 
@@ -93,12 +104,42 @@ const App = () => {
           />
         </Expand>
 
-        <Expand title="Environment">
+        <Expand
+          title={
+            <>
+              <span>Environment</span>{" "}
+              <code
+                style={{
+                  borderRadius: "4px",
+                  padding: "3px 6px",
+                  background: "#ddd",
+                  color: "#000",
+                }}
+              >
+                {envSummary}
+              </code>
+            </>
+          }
+        >
           <AppSetTrustchainAPIEnv />
+          <AppSetCloudSyncAPIEnv />
           <AppMockEnv />
         </Expand>
 
-        <Expand title="Trustchain SDK" expanded>
+        <Expand
+          title={
+            <>
+              <span>Trustchain SDK</span>{" "}
+              {trustchain ? (
+                <code style={{ fontWeight: "normal" }}>
+                  {trustchain.rootId.slice(0, 6)}..{trustchain.rootId.slice(-6)} at{" "}
+                  {trustchain.applicationPath}
+                </code>
+              ) : null}
+            </>
+          }
+          expanded={!trustchain}
+        >
           <AppInitLiveCredentials
             memberCredentials={memberCredentials}
             setMemberCredentials={setMemberCredentials}
@@ -160,19 +201,30 @@ const App = () => {
             setDeviceJWT={setDeviceJWT}
             jwt={jwt}
           />
-        </Expand>
 
-        <Expand title="QR Code Host">
-          <AppQRCodeHost trustchain={trustchain} memberCredentials={memberCredentials} />
+          <Expand title="QR Code Host">
+            <AppQRCodeHost trustchain={trustchain} memberCredentials={memberCredentials} />
+          </Expand>
+
+          <Expand title="QR Code Candidate">
+            <AppQRCodeCandidate
+              memberCredentials={memberCredentials}
+              setTrustchain={setTrustchain}
+            />
+          </Expand>
         </Expand>
 
-        <Expand title="QR Code Candidate">
-          <AppQRCodeCandidate memberCredentials={memberCredentials} setTrustchain={setTrustchain} />
+        <Expand title="Wallet Sync" expanded={!!trustchain}>
+          {trustchain && memberCredentials ? (
+            <AppWalletSync trustchain={trustchain} memberCredentials={memberCredentials} />
+          ) : (
+            "Please create a trustchain first"
+          )}
         </Expand>
 
         <Tooltip id="tooltip" />
       </Container>
-    </SDKContext.Provider>
+    </TrustchainSDKContext.Provider>
   );
 };
 

apps/web-tools/trustchain/components/AppAuthenticate.tsx

@@ -1,8 +1,7 @@
 import React, { useCallback } from "react";
-
 import { JWT, MemberCredentials, Trustchain } from "@ledgerhq/trustchain/types";
 import { Actionable } from "./Actionable";
-import { useSDK } from "../context";
+import { useTrustchainSDK } from "../context";
 
 export function AppAuthenticate({
   jwt,
@@ -17,7 +16,7 @@ export function AppAuthenticate({
   trustchain: Trustchain | null;
   deviceJWT: JWT | null;
 }) {
-  const sdk = useSDK();
+  const sdk = useTrustchainSDK();
 
   const action = useCallback(
     (trustchain: Trustchain, memberCredentials: MemberCredentials) =>

apps/web-tools/trustchain/components/AppDecryptUserData.tsx

@@ -1,33 +1,24 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
-import { createQRCodeHostInstance } from "@ledgerhq/trustchain/qrcode/index";
+import React, { useCallback, useState } from "react";
 import { crypto } from "@ledgerhq/hw-trustchain";
-import { InvalidDigitsError } from "@ledgerhq/trustchain/errors";
-import styled from "styled-components";
-import { Tooltip } from "react-tooltip";
-import { JWT, MemberCredentials, Trustchain, TrustchainMember } from "@ledgerhq/trustchain/types";
-import { getInitialStore } from "@ledgerhq/trustchain/store";
-import { Actionable, RenderActionable } from "./Actionable";
-import QRCode from "./QRCode";
-import useEnv from "../useEnv";
-import Expand from "./Expand";
-import { getSdk } from "@ledgerhq/trustchain";
-import { DisplayName, IdentityManager } from "./IdentityManager";
-import { AppQRCodeCandidate } from "./AppQRCodeCandidate";
+import { JWT, Trustchain } from "@ledgerhq/trustchain/types";
+import { Actionable } from "./Actionable";
 import { Input } from "./Input";
-import { SDKContext, defaultContext, useSDK } from "../context";
+import { useTrustchainSDK } from "../context";
 
 export function AppDecryptUserData({ trustchain }: { trustchain: Trustchain | null }) {
   const [input, setInput] = useState<string | null>(null);
-  const [output, setOutput] = useState<{ input: string } | null>(null);
-  const sdk = useSDK();
+  const [output, setOutput] = useState<string | null>(null);
+  const sdk = useTrustchainSDK();
 
   const action = useCallback(
     (trustchain: Trustchain, input: string) =>
-      sdk.decryptUserData(trustchain, crypto.from_hex(input)).then(obj => obj as { input: string }),
+      sdk
+        .decryptUserData(trustchain, crypto.from_hex(input))
+        .then(array => new TextDecoder().decode(array)),
     [sdk],
   );
 
-  const valueDisplay = useCallback((output: { input: string }) => <code>{output.input}</code>, []);
+  const valueDisplay = useCallback((output: string) => <code>{output}</code>, []);
 
   return (
     <Actionable

apps/web-tools/trustchain/components/AppDestroyTrustchain.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from "react";
 import { JWT, Trustchain } from "@ledgerhq/trustchain/types";
 import { Actionable } from "./Actionable";
-import { useSDK } from "../context";
+import { useTrustchainSDK } from "../context";
 
 export function AppDestroyTrustchain({
   trustchain,
@@ -16,7 +16,7 @@ export function AppDestroyTrustchain({
   setJWT: (jwt: JWT | null) => void;
   setDeviceJWT: (deviceJWT: JWT | null) => void;
 }) {
-  const sdk = useSDK();
+  const sdk = useTrustchainSDK();
   const action = useCallback(
     (trustchain: Trustchain, jwt: JWT) =>
       sdk.destroyTrustchain(trustchain, jwt).then(() => {

apps/web-tools/trustchain/components/AppDeviceAuthenticate.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from "react";
 import { Actionable } from "./Actionable";
-import { useSDK } from "../context";
+import { useTrustchainSDK } from "../context";
 import { runWithDevice } from "../device";
 
 export function AppDeviceAuthenticate({
@@ -10,7 +10,7 @@ export function AppDeviceAuthenticate({
   deviceJWT: { accessToken: string } | null;
   setDeviceJWT: (deviceJWT: { accessToken: string } | null) => void;
 }) {
-  const sdk = useSDK();
+  const sdk = useTrustchainSDK();
 
   const action = useCallback(
     () => runWithDevice(transport => sdk.authWithDevice(transport)),

apps/web-tools/trustchain/components/AppEncryptUserData.tsx

@@ -3,15 +3,16 @@ import { crypto } from "@ledgerhq/hw-trustchain";
 import { Trustchain } from "@ledgerhq/trustchain/types";
 import { Actionable } from "./Actionable";
 import { Input } from "./Input";
-import { useSDK } from "../context";
+import { useTrustchainSDK } from "../context";
 
 export function AppEncryptUserData({ trustchain }: { trustchain: Trustchain | null }) {
   const [input, setInput] = useState<string | null>(null);
   const [output, setOutput] = useState<Uint8Array | null>(null);
-  const sdk = useSDK();
+  const sdk = useTrustchainSDK();
 
   const action = useCallback(
-    (trustchain: Trustchain, input: string) => sdk.encryptUserData(trustchain, { input }),
+    (trustchain: Trustchain, input: string) =>
+      sdk.encryptUserData(trustchain, new TextEncoder().encode(input)),
     [sdk],
   );
 

apps/web-tools/trustchain/components/AppGetMembers.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from "react";
 import { JWT, Trustchain, TrustchainMember } from "@ledgerhq/trustchain/types";
 import { Actionable } from "./Actionable";
-import { useSDK } from "../context";
+import { useTrustchainSDK } from "../context";
 
 export function AppGetMembers({
   jwt,
@@ -14,7 +14,7 @@ export function AppGetMembers({
   members: TrustchainMember[] | null;
   setMembers: (members: TrustchainMember[] | null) => void;
 }) {
-  const sdk = useSDK();
+  const sdk = useTrustchainSDK();
 
   const action = useCallback(
     (jwt: JWT, trustchain: Trustchain) => sdk.getMembers(jwt, trustchain),

apps/web-tools/trustchain/components/AppGetOrCreateTrustchain.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from "react";
 import { JWT, MemberCredentials, Trustchain } from "@ledgerhq/trustchain/types";
 import { Actionable } from "./Actionable";
-import { useSDK } from "../context";
+import { useTrustchainSDK } from "../context";
 import { runWithDevice } from "../device";
 
 export function AppGetOrCreateTrustchain({
@@ -17,7 +17,7 @@ export function AppGetOrCreateTrustchain({
   setTrustchain: (trustchain: Trustchain | null) => void;
   setDeviceJWT: (deviceJWT: JWT | null) => void;
 }) {
-  const sdk = useSDK();
+  const sdk = useTrustchainSDK();
 
   const action = useCallback(
     (deviceJWT: JWT, memberCredentials: MemberCredentials) =>

apps/web-tools/trustchain/components/AppInitLiveCredentials.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from "react";
 import { MemberCredentials } from "@ledgerhq/trustchain/types";
 import { Actionable } from "./Actionable";
-import { useSDK } from "../context";
+import { useTrustchainSDK } from "../context";
 
 export function AppInitLiveCredentials({
   memberCredentials,
@@ -10,7 +10,7 @@ export function AppInitLiveCredentials({
   memberCredentials: MemberCredentials | null;
   setMemberCredentials: (memberCredentials: MemberCredentials | null) => void;
 }) {
-  const sdk = useSDK();
+  const sdk = useTrustchainSDK();
   const action = useCallback(() => sdk.initMemberCredentials(), [sdk]);
 
   const valueDisplay = useCallback(

apps/web-tools/trustchain/components/AppMemberRow.tsx

@@ -2,7 +2,7 @@ import React, { useCallback } from "react";
 import { JWT, MemberCredentials, Trustchain, TrustchainMember } from "@ledgerhq/trustchain/types";
 import { Actionable } from "./Actionable";
 import { DisplayName } from "./IdentityManager";
-import { useSDK } from "../context";
+import { useTrustchainSDK } from "../context";
 import { runWithDevice } from "../device";
 
 export function AppMemberRow({
@@ -22,7 +22,7 @@ export function AppMemberRow({
   setDeviceJWT: (deviceJWT: JWT | null) => void;
   setMembers: (members: TrustchainMember[] | null) => void;
 }) {
-  const sdk = useSDK();
+  const sdk = useTrustchainSDK();
 
   const action = useCallback(
     (deviceJWT: JWT, trustchain: Trustchain, memberCredentials: MemberCredentials) =>

apps/web-tools/trustchain/components/AppQRCodeHost.tsx

@@ -4,7 +4,7 @@ import { InvalidDigitsError } from "@ledgerhq/trustchain/errors";
 import { MemberCredentials, Trustchain } from "@ledgerhq/trustchain/types";
 import { RenderActionable } from "./Actionable";
 import QRCode from "./QRCode";
-import { useSDK } from "../context";
+import { useTrustchainSDK } from "../context";
 
 export function AppQRCodeHost({
   trustchain,
@@ -13,7 +13,7 @@ export function AppQRCodeHost({
   trustchain: Trustchain | null;
   memberCredentials: MemberCredentials | null;
 }) {
-  const sdk = useSDK();
+  const sdk = useTrustchainSDK();
   const [error, setError] = useState<Error | null>(null);
   const [url, setUrl] = useState<string | null>(null);
   const [digits, setDigits] = useState<string | null>(null);

apps/web-tools/trustchain/components/AppRestoreTrustchain.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from "react";
 import { JWT, MemberCredentials, Trustchain } from "@ledgerhq/trustchain/types";
 import { Actionable } from "./Actionable";
-import { useSDK } from "../context";
+import { useTrustchainSDK } from "../context";
 
 export function AppRestoreTrustchain({
   jwt,
@@ -14,7 +14,7 @@ export function AppRestoreTrustchain({
   trustchain: Trustchain | null;
   setTrustchain: (trustchain: Trustchain | null) => void;
 }) {
-  const sdk = useSDK();
+  const sdk = useTrustchainSDK();
   const action = useCallback(
     (jwt: JWT, trustchainId: string, memberCredentials: MemberCredentials) =>
       sdk.restoreTrustchain(jwt, trustchainId, memberCredentials),

apps/web-tools/trustchain/components/AppSetCloudSyncAPIEnv.tsx

@@ -0,0 +1,23 @@
+import React, { useCallback, useState } from "react";
+import { setEnv, getEnvDefault } from "@ledgerhq/live-env";
+import { Actionable } from "./Actionable";
+import useEnv from "../useEnv";
+import { Input } from "./Input";
+
+export function AppSetCloudSyncAPIEnv() {
+  const env = useEnv("WALLET_SYNC_API");
+  const [localValue, setLocalValue] = useState(env);
+  const action = useCallback(() => Promise.resolve(localValue), [localValue]);
+  return (
+    <Actionable
+      buttonTitle="Set Cloud Sync API"
+      inputs={[]}
+      action={action}
+      value={env}
+      setValue={v => setEnv("WALLET_SYNC_API", v || getEnvDefault("WALLET_SYNC_API"))}
+      valueDisplay={() => (
+        <Input type="text" value={localValue} onChange={e => setLocalValue(e.target.value)} />
+      )}
+    />
+  );
+}