From 9af8aea5fe117a88eacf886b55d717ca1600f36c Mon Sep 17 00:00:00 2001
From: jdabbech-ledger <jalil.dabbech@ledger.com>
Date: Fri, 10 Jan 2025 17:11:14 +0100
Subject: [PATCH] :construction: --wip-- [skip ci]]

---
 .../DeviceActionsView/DeviceActionTester.tsx  | 28 ++++++--
 .../src/components/SignerBtcView/index.tsx    | 65 ++++++++++++++++---
 apps/sample/src/styles/globalstyles.tsx       |  2 +-
 3 files changed, 80 insertions(+), 15 deletions(-)

diff --git a/apps/sample/src/components/DeviceActionsView/DeviceActionTester.tsx b/apps/sample/src/components/DeviceActionsView/DeviceActionTester.tsx
index ea78a83d7..f2037a7b1 100644
--- a/apps/sample/src/components/DeviceActionsView/DeviceActionTester.tsx
+++ b/apps/sample/src/components/DeviceActionsView/DeviceActionTester.tsx
@@ -45,6 +45,12 @@ export type DeviceActionProps<
     debug?: boolean,
   ) => ExecuteDeviceActionReturnType<Output, Error, IntermediateValue>;
   initialValues: Input;
+  InputValuesComponent?: React.FC<{
+    initialValues: Input;
+    onChange: (values: Input) => void;
+    valueSelector?: ValueSelector<FieldType>;
+    disabled?: boolean;
+  }>;
   validateValues?: (args: Input) => boolean;
   valueSelector?: ValueSelector<FieldType>;
   deviceModelId: DeviceModelId;
@@ -94,6 +100,7 @@ export function DeviceActionTester<
     executeDeviceAction,
     valueSelector,
     validateValues,
+    InputValuesComponent,
   } = props;
 
   const nonce = useRef(-1);
@@ -204,12 +211,21 @@ export function DeviceActionTester<
           rowGap={3}
           pointerEvents={loading ? "none" : "auto"}
         >
-          <CommandForm
-            initialValues={values}
-            onChange={setValues}
-            valueSelector={valueSelector}
-            disabled={loading}
-          />
+          {InputValuesComponent ? (
+            <InputValuesComponent
+              initialValues={values}
+              onChange={setValues}
+              valueSelector={valueSelector}
+              disabled={loading}
+            />
+          ) : (
+            <CommandForm
+              initialValues={values}
+              onChange={setValues}
+              valueSelector={valueSelector}
+              disabled={loading}
+            />
+          )}
           <Divider />
           <Switch
             checked={inspect}
diff --git a/apps/sample/src/components/SignerBtcView/index.tsx b/apps/sample/src/components/SignerBtcView/index.tsx
index 32c94ae0f..860a9a399 100644
--- a/apps/sample/src/components/SignerBtcView/index.tsx
+++ b/apps/sample/src/components/SignerBtcView/index.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo } from "react";
 import {
   DefaultDescriptorTemplate,
   DefaultWallet,
@@ -13,13 +13,62 @@ import {
   type SignPsbtDAIntermediateValue,
   type SignPsbtDAOutput,
 } from "@ledgerhq/device-signer-kit-bitcoin";
+import { Flex, Input, SelectInput } from "@ledgerhq/react-ui";
 
 import { DeviceActionsList } from "@/components/DeviceActionsView/DeviceActionsList";
 import { type DeviceActionProps } from "@/components/DeviceActionsView/DeviceActionTester";
+import { useForm } from "@/hooks/useForm";
 import { useDmk } from "@/providers/DeviceManagementKitProvider";
 
 const DEFAULT_DERIVATION_PATH = "84'/0'/0'";
 
+type SignPsbtInputValuesType = {
+  psbt: string;
+  path: string;
+  descriptorTemplate: DefaultDescriptorTemplate;
+};
+
+const SignPsbtDAInputValues: React.FC<{
+  initialValues: SignPsbtInputValuesType;
+  onChange: (values: SignPsbtInputValuesType) => void;
+  disabled?: boolean;
+}> = ({ initialValues, onChange, disabled }) => {
+  const { formValues, setFormValue } = useForm(initialValues);
+
+  useEffect(() => {
+    onChange(formValues);
+  }, [formValues, onChange]);
+
+  return (
+    <Flex flexDirection="column" flexWrap="wrap" rowGap={5} columnGap={5}>
+      <Flex
+        flexDirection="column"
+        alignItems="flex-start"
+        rowGap={3}
+        columnGap={3}
+      >
+        <Input
+          id="psbt"
+          value={formValues.psbt}
+          placeholder="psbt"
+          onChange={(newVal) => setFormValue("psbt", newVal)}
+          disabled={disabled}
+          data-testid={`input-text_psbt`}
+        />
+        <SelectInput
+          options={Object.entries(DefaultDescriptorTemplate).map(
+            ([key, value]) => ({
+              label: key,
+              value,
+            }),
+          )}
+        />
+        <Input />
+      </Flex>
+    </Flex>
+  );
+};
+
 export const SignerBtcView: React.FC<{ sessionId: string }> = ({
   sessionId,
 }) => {
@@ -87,29 +136,29 @@ export const SignerBtcView: React.FC<{ sessionId: string }> = ({
         title: "Sign psbt",
         description:
           "Perform all the actions necessary to sign a PSBT with the device",
-        executeDeviceAction: ({ derivationPath, psbt }) => {
+        executeDeviceAction: ({ descriptorTemplate, psbt, path }) => {
           if (!signer) {
             throw new Error("Signer not initialized");
           }
 
           return signer.signPsbt(
-            new DefaultWallet(
-              derivationPath,
-              DefaultDescriptorTemplate.NATIVE_SEGWIT,
-            ),
+            new DefaultWallet(path, descriptorTemplate),
             psbt,
           );
         },
+        InputValuesComponent: SignPsbtDAInputValues,
         initialValues: {
-          derivationPath: DEFAULT_DERIVATION_PATH,
+          descriptorTemplate: DefaultDescriptorTemplate.NATIVE_SEGWIT,
           psbt: "",
+          path: DEFAULT_DERIVATION_PATH,
         },
         deviceModelId,
       } satisfies DeviceActionProps<
         SignPsbtDAOutput,
         {
           psbt: string;
-          derivationPath: string;
+          path: string;
+          descriptorTemplate: DefaultDescriptorTemplate;
         },
         SignPsbtDAError,
         SignPsbtDAIntermediateValue
diff --git a/apps/sample/src/styles/globalstyles.tsx b/apps/sample/src/styles/globalstyles.tsx
index d7db8e5e7..89341ef5a 100644
--- a/apps/sample/src/styles/globalstyles.tsx
+++ b/apps/sample/src/styles/globalstyles.tsx
@@ -12,7 +12,7 @@ export const GlobalStyle = createGlobalStyle`
     background-color: #000000;
   }
   body {
-    user-select: none;
+    user-select: text;
   }
   .no-scrollbar {
       &::-webkit-scrollbar {