✨ (signer-eth) [DSDK-652]: Add web3checks support

.changeset/moody-experts-sniff.md

@@ -0,0 +1,5 @@
+---
+"@ledgerhq/device-signer-kit-ethereum": minor
+---
+
+Add web3checks support

.changeset/odd-elephants-hope.md

@@ -0,0 +1,5 @@
+---
+"@ledgerhq/device-management-kit-sample": patch
+---
+
+Add web3checks url configuration

.changeset/six-toys-lay.md

@@ -0,0 +1,5 @@
+---
+"@ledgerhq/context-module": minor
+---
+
+Add web3checks loader

apps/sample/src/components/CalView/Web3ChecksDrawer.tsx

@@ -0,0 +1,56 @@
+import React, { useCallback, useState } from "react";
+import { type ContextModuleWeb3ChecksConfig } from "@ledgerhq/context-module";
+import { Button, Divider, Flex } from "@ledgerhq/react-ui";
+
+import { Block } from "@/components/Block";
+import { CommandForm } from "@/components/CommandsView/CommandForm";
+import { type FieldType } from "@/hooks/useForm";
+import { useWeb3ChecksConfig } from "@/providers/SignerEthProvider";
+
+type Web3ChecksDrawerProps = {
+  onClose: () => void;
+};
+
+export function Web3ChecksDrawer({ onClose }: Web3ChecksDrawerProps) {
+  const { web3ChecksConfig, setWeb3ChecksConfig } = useWeb3ChecksConfig();
+  const [values, setValues] =
+    useState<Record<string, FieldType>>(web3ChecksConfig);
+  const labelSelector: Record<string, string> = {
+    url: "Web3checks provider URL",
+  };
+
+  const onSettingsUpdate = useCallback(() => {
+    const { url } = values;
+
+    console.log("Updating settings", values);
+    if (!url || typeof url !== "string" || !url.startsWith("http")) {
+      console.error("Invalid Web3Checks provider URL", url);
+      return;
+    }
+
+    const newSettings: ContextModuleWeb3ChecksConfig = {
+      url,
+    };
+
+    setWeb3ChecksConfig(newSettings);
+    onClose();
+  }, [onClose, setWeb3ChecksConfig, values]);
+
+  return (
+    <Block>
+      <Flex flexDirection="column" rowGap={3}>
+        <CommandForm
+          initialValues={web3ChecksConfig}
+          onChange={setValues}
+          labelSelector={labelSelector}
+        />
+        <Divider />
+      </Flex>
+      <Flex flexDirection="row" flex={1} columnGap={3}>
+        <Button variant="main" onClick={onSettingsUpdate}>
+          Update settings
+        </Button>
+      </Flex>
+    </Block>
+  );
+}

apps/sample/src/components/CalView/index.tsx

@@ -7,33 +7,34 @@ import { StyledDrawer } from "@/components/StyledDrawer";
 
 import { CalCheckDappDrawer } from "./CalCheckDappDrawer";
 import { CalSettingsDrawer } from "./CalSettingsDrawer";
+import { Web3ChecksDrawer } from "./Web3ChecksDrawer";
 
 export const CalView = () => {
   const [isCheckDappOpen, setIsCheckDappOpen] = useState(false);
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
-  const openCheckDapp = useCallback(() => {
-    setIsCheckDappOpen(true);
-  }, []);
-
-  const openSettings = useCallback(() => {
-    setIsSettingsOpen(true);
-  }, []);
+  const [isWeb3ChecksOpen, setIsWeb3ChecksOpen] = useState(false);
 
   const closeDrawers = useCallback(() => {
     setIsCheckDappOpen(false);
     setIsSettingsOpen(false);
+    setIsWeb3ChecksOpen(false);
   }, []);
 
   const entries = [
     {
       title: "Settings",
       description: "Settings for the Crypto Asset List",
-      onClick: openSettings,
+      onClick: () => setIsSettingsOpen(true),
     },
     {
       title: "Check dApp availability",
       description: "Check dApp availability in Crypto Asset List",
-      onClick: openCheckDapp,
+      onClick: () => setIsCheckDappOpen(true),
+    },
+    {
+      title: "Web3Checks Settings",
+      description: "Settings for the Web3Checks provider",
+      onClick: () => setIsWeb3ChecksOpen(true),
     },
   ];
 
@@ -79,6 +80,15 @@ export const CalView = () => {
       >
         <CalSettingsDrawer onClose={closeDrawers} />
       </StyledDrawer>
+      <StyledDrawer
+        isOpen={isWeb3ChecksOpen}
+        onClose={closeDrawers}
+        big
+        title="Web3Checks Settings"
+        description="Settings for the Web3Checks provider"
+      >
+        <Web3ChecksDrawer onClose={closeDrawers} />
+      </StyledDrawer>
     </PageWithHeader>
   );
 };

apps/sample/src/providers/SignerEthProvider/index.tsx

@@ -10,6 +10,7 @@ import React, {
 import {
   ContextModuleBuilder,
   type ContextModuleCalConfig,
+  type ContextModuleWeb3ChecksConfig,
 } from "@ledgerhq/context-module";
 import {
   type SignerEth,
@@ -22,7 +23,9 @@ import { useDeviceSessionsContext } from "@/providers/DeviceSessionsProvider";
 type SignerEthContextType = {
   signer: SignerEth | null;
   calConfig: ContextModuleCalConfig;
+  web3ChecksConfig: ContextModuleWeb3ChecksConfig;
   setCalConfig: (cal: ContextModuleCalConfig) => void;
+  setWeb3ChecksConfig: (web3Checks: ContextModuleWeb3ChecksConfig) => void;
 };
 
 const initialState: SignerEthContextType = {
@@ -32,7 +35,11 @@ const initialState: SignerEthContextType = {
     mode: "prod",
     branch: "main",
   },
+  web3ChecksConfig: {
+    url: "https://web3checks-backend.api.aws.prd.ldg-tech.com/v3",
+  },
   setCalConfig: () => {},
+  setWeb3ChecksConfig: () => {},
 };
 
 const SignerEthContext = createContext<SignerEthContextType>(initialState);
@@ -49,6 +56,8 @@ export const SignerEthProvider: React.FC<PropsWithChildren> = ({
   const [calConfig, setCalConfig] = useState<ContextModuleCalConfig>(
     initialState.calConfig,
   );
+  const [web3ChecksConfig, setWeb3ChecksConfig] =
+    useState<ContextModuleWeb3ChecksConfig>(initialState.web3ChecksConfig);
 
   useEffect(() => {
     if (!sessionId || !dmk) {
@@ -58,15 +67,24 @@ export const SignerEthProvider: React.FC<PropsWithChildren> = ({
 
     const contextModule = new ContextModuleBuilder()
       .addCalConfig(calConfig)
+      .addWeb3ChecksConfig(web3ChecksConfig)
       .build();
     const newSigner = new SignerEthBuilder({ dmk, sessionId })
       .withContextModule(contextModule)
       .build();
     setSigner(newSigner);
-  }, [calConfig, dmk, sessionId]);
+  }, [calConfig, dmk, sessionId, web3ChecksConfig]);
 
   return (
-    <SignerEthContext.Provider value={{ signer, calConfig, setCalConfig }}>
+    <SignerEthContext.Provider
+      value={{
+        signer,
+        calConfig,
+        setCalConfig,
+        web3ChecksConfig,
+        setWeb3ChecksConfig,
+      }}
+    >
       {children}
     </SignerEthContext.Provider>
   );
@@ -80,3 +98,9 @@ export const useCalConfig = () => {
   const { calConfig, setCalConfig } = useContext(SignerEthContext);
   return { calConfig, setCalConfig };
 };
+
+export const useWeb3ChecksConfig = () => {
+  const { web3ChecksConfig, setWeb3ChecksConfig } =
+    useContext(SignerEthContext);
+  return { web3ChecksConfig, setWeb3ChecksConfig };
+};

packages/signer/context-module/src/ContextModule.ts

@@ -6,11 +6,15 @@ import {
 } from "./shared/model/TransactionContext";
 import { type TypedDataClearSignContext } from "./shared/model/TypedDataClearSignContext";
 import { type TypedDataContext } from "./shared/model/TypedDataContext";
+import { type Web3CheckContext } from "./web3-check/domain/web3CheckTypes";
 
 export interface ContextModule {
   getContext(field: TransactionFieldContext): Promise<ClearSignContext>;
   getContexts(transaction: TransactionContext): Promise<ClearSignContext[]>;
   getTypedDataFilters(
     typedData: TypedDataContext,
   ): Promise<TypedDataClearSignContext>;
+  getWeb3Checks(
+    transactionContext: Web3CheckContext,
+  ): Promise<ClearSignContext | null>;
 }

packages/signer/context-module/src/ContextModuleBuilder.test.ts

@@ -1,13 +1,22 @@
-import { type ContextModuleCalConfig } from "./config/model/ContextModuleConfig";
+import { type Container } from "inversify";
+
+import { configTypes } from "./config/di/configTypes";
+import {
+  type ContextModuleCalConfig,
+  type ContextModuleConfig,
+} from "./config/model/ContextModuleConfig";
 import { ContextModuleBuilder } from "./ContextModuleBuilder";
 import { DefaultContextModule } from "./DefaultContextModule";
 
 describe("ContextModuleBuilder", () => {
   const defaultCalConfig: ContextModuleCalConfig = {
-    url: "https://crypto-assets-service.api.ledger.com/v1",
+    url: "https://cal/v1",
     mode: "prod",
     branch: "main",
   };
+  const defaultWeb3ChecksConfig = {
+    url: "https://web3checks/v1",
+  };
   it("should return a default context module", () => {
     const contextModuleBuilder = new ContextModuleBuilder();
 
@@ -38,13 +47,38 @@ describe("ContextModuleBuilder", () => {
       .build();
 
     expect(res).toBeInstanceOf(DefaultContextModule);
+    // @ts-expect-error _typedDataLoader is private
+    expect(res["_typedDataLoader"]).toBe(customLoader);
   });
 
   it("should return a custom context module with a custom config", () => {
     const contextModuleBuilder = new ContextModuleBuilder();
 
-    const res = contextModuleBuilder.addCalConfig(defaultCalConfig).build();
+    const res = contextModuleBuilder
+      .addCalConfig(defaultCalConfig)
+      .addWeb3ChecksConfig(defaultWeb3ChecksConfig)
+      .build();
+    // @ts-expect-error _container is private
+    const config = (res["_container"] as Container).get<ContextModuleConfig>(
+      configTypes.Config,
+    );
+
+    expect(res).toBeInstanceOf(DefaultContextModule);
+    expect(config.cal).toEqual(defaultCalConfig);
+    expect(config.web3checks).toEqual(defaultWeb3ChecksConfig);
+  });
+
+  it("should return a custom context module with a custom custom web3checks loader", () => {
+    const contextModuleBuilder = new ContextModuleBuilder();
+    const customLoader = { load: vi.fn() };
+
+    const res = contextModuleBuilder
+      .removeDefaultLoaders()
+      .addWeb3CheckLoader(customLoader)
+      .build();
 
     expect(res).toBeInstanceOf(DefaultContextModule);
+    // @ts-expect-error _web3CheckLoader is private
+    expect(res["_web3CheckLoader"]).toBe(customLoader);
   });
 });

packages/signer/context-module/src/ContextModuleBuilder.ts

@@ -1,20 +1,27 @@
 import {
   type ContextModuleCalConfig,
   type ContextModuleConfig,
+  type ContextModuleWeb3ChecksConfig,
 } from "./config/model/ContextModuleConfig";
 import { type ContextLoader } from "./shared/domain/ContextLoader";
 import { type TypedDataContextLoader } from "./typed-data/domain/TypedDataContextLoader";
+import { type Web3CheckContextLoader } from "./web3-check/domain/Web3CheckContextLoader";
 import { type ContextModule } from "./ContextModule";
 import { DefaultContextModule } from "./DefaultContextModule";
 
 const DEFAULT_CAL_URL = "https://crypto-assets-service.api.ledger.com/v1";
+const DEFAULT_WEB3_CHECKS_URL =
+  "https://web3checks-backend.api.aws.prd.ldg-tech.com/v3";
 
 export const DEFAULT_CONFIG: ContextModuleConfig = {
   cal: {
     url: DEFAULT_CAL_URL,
     mode: "prod",
     branch: "main",
   },
+  web3checks: {
+    url: DEFAULT_WEB3_CHECKS_URL,
+  },
   defaultLoaders: true,
   customLoaders: [],
   customTypedDataLoader: undefined,
@@ -57,6 +64,17 @@ export class ContextModuleBuilder {
     return this;
   }
 
+  /**
+   * Replace the default loader for web3 checks
+   *
+   * @param loader loader to use for web3 checks
+   * @returns this
+   */
+  addWeb3CheckLoader(loader: Web3CheckContextLoader) {
+    this.config.customWeb3CheckLoader = loader;
+    return this;
+  }
+
   /**
    * Add a custom CAL configuration
    *
@@ -68,6 +86,20 @@ export class ContextModuleBuilder {
     return this;
   }
 
+  /**
+   * Add a custom web3 checks configuration
+   *
+   * @param web3ChecksConfig
+   * @returns this
+   */
+  addWeb3ChecksConfig(web3ChecksConfig: ContextModuleWeb3ChecksConfig) {
+    this.config.web3checks = {
+      ...DEFAULT_CONFIG.web3checks,
+      ...web3ChecksConfig,
+    };
+    return this;
+  }
+
   /**
    * Build the context module
    *