Merge pull request #39 from Ryun1/fix-signdata

Author: stackchain

src/components/cards/signDataCard.js

@@ -3,11 +3,19 @@ import ApiCardWithModal from './apiCardWithModal'
 import {Buffer} from 'buffer'
 import {CommonStyles, ModalWindowContent} from '../ui-constants'
 import {getBech32AddressFromHex} from '../../utils/cslTools'
+import SelectWithLabel from '../selectWithLabel'
 
 const SignDataCard = ({api, onRawResponse, onResponse, onWaiting}) => {
   const [message, setMessage] = useState('')
+  const [address, setAddress] = useState('')
+  const [encodingType, setEncodingType] = useState('hex')
 
   const getAddress = async () => {
+    // If user provided an address, use it directly
+    if (address.trim()) {
+      return address.trim()
+    }
+    // Otherwise, use the reward address as default
     try {
       const rewardHexAddress = (await api?.getRewardAddresses())[0]
       return getBech32AddressFromHex(rewardHexAddress)
@@ -16,17 +24,24 @@ const SignDataCard = ({api, onRawResponse, onResponse, onWaiting}) => {
     }
   }
 
-  const getPayloadHex = (payload) => {
-    if (payload.startsWith('0x')) {
-      const reg = /^[0-9A-Fa-f]*$/g
-      const remainingPart = payload.substring(2)
-      if (reg.test(remainingPart)) {
-        return Buffer.from(remainingPart, 'hex').toString('hex')
+  const getPayloadHex = (payload, encoding) => {
+    if (encoding === 'hex') {
+      // Remove '0x' prefix if present
+      const hexString = payload.startsWith('0x') ? payload.substring(2) : payload
+      const reg = /^[0-9A-Fa-f]+$/i
+      if (reg.test(hexString)) {
+        // Validate hex string length is even (required for proper byte conversion)
+        if (hexString.length % 2 !== 0) {
+          throw new Error(`!!!ERROR!!!\nHex string must have even length: "${payload}"`)
+        }
+        // Return the hex string directly (without 0x prefix) as wallet expects hex string
+        return hexString.toLowerCase()
       } else {
-        throw new Error(`!!!ERROR!!!\nIt is not a suitable payload: "${payload}"`)
+        throw new Error(`!!!ERROR!!!\nIt is not a valid hex string: "${payload}"`)
       }
     }
 
+    // Convert UTF-8 string to hex string
     return Buffer.from(payload, 'utf8').toString('hex')
   }
 
@@ -35,9 +50,25 @@ const SignDataCard = ({api, onRawResponse, onResponse, onWaiting}) => {
 
     try {
       const address = await getAddress()
-      const payloadHex = getPayloadHex(message)
+      const payloadHex = getPayloadHex(message, encodingType)
+      
+      // Log the inputs for debugging
+      console.log('SignData inputs:', { address, payloadHex, originalMessage: message, encodingType })
+      
       const signDataResponse = await api?.signData(address, payloadHex)
-      onRawResponse('')
+      
+      // Show raw response with inputs for debugging
+      const debugInfo = {
+        inputs: {
+          address,
+          payloadHex,
+          originalMessage: message,
+          encodingType
+        },
+        response: signDataResponse
+      }
+      const rawResponseString = JSON.stringify(debugInfo, null, 2)
+      onRawResponse(rawResponseString)
       onResponse(signDataResponse)
     } catch (error) {
       onRawResponse('')
@@ -57,20 +88,46 @@ const SignDataCard = ({api, onRawResponse, onResponse, onWaiting}) => {
     clickFunction: signDataClick,
   }
 
+  const encodingOptions = [
+    {label: 'UTF-8', value: 'utf8'},
+    {label: 'Hex', value: 'hex'},
+  ]
+
   return (
     <ApiCardWithModal {...apiProps}>
       <div className={ModalWindowContent.contentPadding}>
-        <label htmlFor="signMessage" className={ModalWindowContent.contentLabelStyle}>
-          Sign Data
-        </label>
-        <input
-          type="text"
-          id="signMessage"
-          className={CommonStyles.inputStyles}
-          placeholder=""
-          value={message}
-          onChange={(event) => setMessage(event.target.value)}
+        <div>
+          <label htmlFor="signAddress" className={ModalWindowContent.contentLabelStyle}>
+            Address (optional - defaults to reward address)
+          </label>
+          <input
+            type="text"
+            id="signAddress"
+            className={CommonStyles.inputStyles}
+            placeholder=""
+            value={address}
+            onChange={(event) => setAddress(event.target.value)}
+          />
+        </div>
+        <SelectWithLabel
+          selectName="Message Encoding"
+          selectArray={encodingOptions}
+          onChangeFunction={(event) => setEncodingType(event.target.value)}
+          defaultValue={encodingType}
         />
+        <div className="mt-3">
+          <label htmlFor="signMessage" className={ModalWindowContent.contentLabelStyle}>
+            Message to sign
+          </label>
+          <input
+            type="text"
+            id="signMessage"
+            className={CommonStyles.inputStyles}
+            placeholder={encodingType === 'hex' ? 'e.g., 0x48656c6c6f or 48656c6c6f' : 'e.g., Hello'}
+            value={message}
+            onChange={(event) => setMessage(event.target.value)}
+          />
+        </div>
       </div>
     </ApiCardWithModal>
   )

src/components/selectWithLabel.js

@@ -2,7 +2,7 @@ import React from 'react'
 import {ModalWindowContent} from './ui-constants'
 
 const SelectWithLabel = (props) => {
-  const {selectName, selectArray, onChangeFunction} = props
+  const {selectName, selectArray, onChangeFunction, defaultValue} = props
   const selectID = selectName.split(' ').join('')
 
   return (
@@ -15,6 +15,7 @@ const SelectWithLabel = (props) => {
         onChange={onChangeFunction}
         name={selectID}
         id={selectID}
+        defaultValue={defaultValue}
       >
         {selectArray.map((arrayItem) => (
           <option className="border text-white" key={arrayItem.label + 'Key'} value={arrayItem.value}>