HookParameters UI for transactions.

components/Transaction/index.tsx

@@ -20,6 +20,7 @@ import { TxUI } from './ui'
 import { default as _estimateFee } from '../../utils/estimateFee'
 import toast from 'react-hot-toast'
 import { combineFlags, extractFlags, transactionFlags } from '../../state/constants/flags'
+import { SetHookData, toHex } from '../../utils/setHook'
 
 export interface TransactionProps {
   header: string
@@ -40,16 +41,30 @@ const Transaction: FC<TransactionProps> = ({ header, state: txState, ...props })
 
   const prepareOptions = useCallback(
     (state: Partial<TransactionState> = txState) => {
-      const { selectedTransaction, selectedDestAccount, selectedAccount, txFields, selectedFlags } =
+      const {
-        state
+        selectedTransaction,
+        selectedDestAccount,
+        selectedAccount,
+        txFields,
+        selectedFlags,
+        hookParameters
+      } = state
 
       const TransactionType = selectedTransaction?.value || null
       const Destination = selectedDestAccount?.value || txFields?.Destination
       const Account = selectedAccount?.value || null
       const Flags = combineFlags(selectedFlags?.map(flag => flag.value)) || txFields?.Flags
+      const HookParameters = Object.entries(hookParameters || {}).reduce<
+        SetHookData['HookParameters']
+      >((acc, [_, { label, value }]) => {
+        return acc.concat({
+          HookParameter: { HookParameterName: toHex(label), HookParameterValue: toHex(value) }
+        })
+      }, [])
 
       return prepareTransaction({
         ...txFields,
+        HookParameters,
         Flags,
         TransactionType,
         Destination,

components/Transaction/ui.tsx

@@ -29,8 +29,14 @@ interface UIProps {
 
 export const TxUI: FC<UIProps> = ({ state: txState, setState, resetState, estimateFee }) => {
   const { accounts } = useSnapshot(state)
-  const { selectedAccount, selectedDestAccount, selectedTransaction, txFields, selectedFlags } =
+  const {
-    txState
+    selectedAccount,
+    selectedDestAccount,
+    selectedTransaction,
+    txFields,
+    selectedFlags,
+    hookParameters
+  } = txState
 
   const accountOptions: SelectOption[] = accounts.map(acc => ({
     label: acc.name,
@@ -111,7 +117,7 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, resetState, estima
     [selectedTransaction?.value]
   )
 
-  const richFields = ['TransactionType', 'Account']
+  const richFields = ['TransactionType', 'Account', 'HookParameters']
   if (fields.Destination !== undefined) {
     richFields.push('Destination')
   }
@@ -121,8 +127,6 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, resetState, estima
   }
 
   const otherFields = Object.keys(txFields).filter(k => !richFields.includes(k)) as [keyof TxFields]
-  const hookParams = [{ id: 1 }]
-
   return (
     <Container
       css={{
@@ -271,15 +275,73 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, resetState, estima
             </TxField>
           )
         })}
+        <TxField multiLine label="Hook parameters">
+          <Flex column fluid>
+            {Object.entries(hookParameters).map(([id, { label, value }]) => (
+              <Flex column key={id} css={{ mb: '$2' }}>
+                <Flex row>
+                  <Input
+                    placeholder="Parameter name"
+                    value={label}
+                    onChange={e => {
+                      setState({
+                        hookParameters: {
+                          ...hookParameters,
+                          [id]: { label: e.target.value, value }
+                        }
+                      })
+                    }}
+                  />
+                  <Input
+                    css={{ mx: '$2' }}
+                    placeholder="Value"
+                    value={value}
+                    onChange={e => {
+                      setState({
+                        hookParameters: {
+                          ...hookParameters,
+                          [id]: { label, value: e.target.value }
+                        }
+                      })
+                    }}
+                  />
+                  <Button
+                    onClick={() => {
+                      const { [id]: _, ...rest } = hookParameters
+                      setState({ hookParameters: rest })
+                    }}
+                    variant="destroy"
+                  >
+                    <Trash weight="regular" size="16px" />
+                  </Button>
+                </Flex>
+              </Flex>
+            ))}
+            <Button
+              outline
+              fullWidth
+              type="button"
+              onClick={() => {
+                const id = Object.keys(hookParameters).length
+                setState({
+                  hookParameters: { ...hookParameters, [id]: { label: '', value: '' } }
+                })
+              }}
+            >
+              <Plus size="16px" />
+              Add Hook Parameter
+            </Button>
+          </Flex>
+        </TxField>
       </Flex>
     </Container>
   )
 }
 
-export const TxField: FC<{ label: string; children: ReactNode; isMulti?: boolean }> = ({
+export const TxField: FC<{ label: string; children: ReactNode; multiLine?: boolean }> = ({
   label,
   children,
-  isMulti = false
+  multiLine = false
 }) => {
   return (
     <Flex
@@ -287,14 +349,14 @@ export const TxField: FC<{ label: string; children: ReactNode; isMulti?: boolean
       fluid
       css={{
         justifyContent: 'flex-end',
-        alignItems: isMulti ? 'flex-start' : 'center',
+        alignItems: multiLine ? 'flex-start' : 'center',
         position: 'relative',
         mb: '$3',
         mt: '1px',
         pr: '1px'
       }}
     >
-      <Text muted css={{ mr: '$3', mt: isMulti ? '$2' : 0 }}>
+      <Text muted css={{ mr: '$3', mt: multiLine ? '$2' : 0 }}>
         {label}:{' '}
       </Text>
       <Flex css={{ width: '70%', alignItems: 'center' }}>{children}</Flex>

state/actions/deployHook.tsx

@@ -6,7 +6,7 @@ import calculateHookOn, { TTS } from '../../utils/hookOnCalculator'
 import { Link } from '../../components'
 import { ref } from 'valtio'
 import estimateFee from '../../utils/estimateFee'
-import { SetHookData } from '../../utils/setHook'
+import { SetHookData, toHex } from '../../utils/setHook'
 import ResultLink from '../../components/ResultLink'
 import { xrplSend } from './xrpl-client'
 
@@ -18,13 +18,6 @@ export const sha256 = async (string: string) => {
   return hashHex
 }
 
-function toHex(str: string) {
-  var result = ''
-  for (var i = 0; i < str.length; i++) {
-    result += str.charCodeAt(i).toString(16)
-  }
-  return result.toUpperCase()
-}
 
 function arrayBufferToHex(arrayBuffer?: ArrayBuffer | null) {
   if (!arrayBuffer) {

state/actions/sendTransaction.tsx

@@ -31,6 +31,10 @@ export const sendTransaction = async (
     ...opts
   }
   const { logPrefix = '' } = options || {}
+  state.transactionLogs.push({
+    type: 'log',
+    message: `${logPrefix}${JSON.stringify(tx, null, 2)}`
+  })
   try {
     const signedAccount = derive.familySeed(account.secret)
     const { signedTransaction } = sign(tx, signedAccount)

state/transactions.ts

@@ -5,17 +5,23 @@ import state from '.'
 import { showAlert } from '../state/actions/showAlert'
 import { parseJSON } from '../utils/json'
 import { extractFlags, getFlags } from './constants/flags'
+import { fromHex } from '../utils/setHook'
 
 export type SelectOption = {
   value: string
   label: string
 }
 
+export type HookParameters = {
+  [key: string]: SelectOption
+}
+
 export interface TransactionState {
   selectedTransaction: SelectOption | null
   selectedAccount: SelectOption | null
   selectedDestAccount: SelectOption | null
   selectedFlags: SelectOption[] | null
+  hookParameters: HookParameters
   txIsLoading: boolean
   txIsDisabled: boolean
   txFields: TxFields
@@ -36,6 +42,7 @@ export const defaultTransaction: TransactionState = {
   selectedAccount: null,
   selectedDestAccount: null,
   selectedFlags: null,
+  hookParameters: {},
   txIsLoading: false,
   txIsDisabled: false,
   txFields: {},
@@ -160,7 +167,7 @@ export const prepareState = (value: string, transactionType?: string) => {
     return
   }
 
-  const { Account, TransactionType, Destination, ...rest } = options
+  const { Account, TransactionType, Destination, HookParameters, ...rest } = options
   let tx: Partial<TransactionState> = {}
   const schema = getTxFields(transactionType)
 
@@ -190,6 +197,14 @@ export const prepareState = (value: string, transactionType?: string) => {
     tx.selectedTransaction = null
   }
 
+  if (HookParameters && HookParameters instanceof Array) {
+    tx.hookParameters = HookParameters.reduce<TransactionState["hookParameters"]>((acc, cur, idx) => {
+      const param = { label: fromHex(cur.HookParameter?.HookParameterName || ""), value: fromHex(cur.HookParameter?.HookParameterValue || "") }
+      acc[idx] = param;
+      return acc;
+    }, {})
+  }
+
   if (schema.Destination !== undefined) {
     const dest = state.accounts.find(acc => acc.address === Destination)
     if (dest) {

utils/setHook.ts

@@ -74,3 +74,19 @@ export const getInvokeOptions = (content?: string) => {
 
   return invokeOptions
 }
+
+export function toHex(str: string) {
+  var result = ''
+  for (var i = 0; i < str.length; i++) {
+    result += str.charCodeAt(i).toString(16)
+  }
+  return result.toUpperCase()
+}
+
+export function fromHex(hex: string) {
+  var str = ''
+  for (var i = 0; i < hex.length; i += 2) {
+    str += String.fromCharCode(parseInt(hex.substring(i, i + 2), 16))
+  }
+  return str
+}