Refactor tx.

components/Select.tsx

@@ -38,7 +38,8 @@ const Select = forwardRef<any, Props>((props, ref) => {
         container: provided => {
           return {
             ...provided,
-            position: 'relative'
+            position: 'relative',
+            width: '100%'
           }
         },
         singleValue: provided => ({

components/Transaction/ui.tsx

@@ -1,4 +1,4 @@
-import { FC, useCallback, useEffect, useMemo, useState } from 'react'
+import { FC, ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
 import Container from '../Container'
 import Flex from '../Flex'
 import Input from '../Input'
@@ -18,6 +18,7 @@ import { streamState } from '../DebugStream'
 import { Button } from '..'
 import Textarea from '../Textarea'
 import { getFlags } from '../../state/constants/flags'
+import { Plus, Trash } from 'phosphor-react'
 
 interface UIProps {
   setState: (pTx?: Partial<TransactionState> | undefined) => TransactionState | undefined
@@ -120,6 +121,7 @@ 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
@@ -130,94 +132,41 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, resetState, estima
       }}
     >
       <Flex column fluid css={{ height: '100%', overflowY: 'auto', pr: '$1' }}>
-        <Flex
-          row
-          fluid
-          css={{
-            justifyContent: 'flex-end',
-            alignItems: 'center',
-            mb: '$3',
-            mt: '1px',
-            pr: '1px'
-          }}
-        >
-          <Text muted css={{ mr: '$3' }}>
-            Transaction type:{' '}
-          </Text>
+        <TxField label="Transaction type">
           <Select
             instanceId="transactionsType"
             placeholder="Select transaction type"
             options={transactionsOptions}
             hideSelectedOptions
-            css={{ width: '70%' }}
             value={selectedTransaction}
             onChange={(tt: any) => handleChangeTxType(tt)}
           />
-        </Flex>
-        <Flex
-          row
-          fluid
-          css={{
-            justifyContent: 'flex-end',
-            alignItems: 'center',
-            mb: '$3',
-            pr: '1px'
-          }}
-        >
-          <Text muted css={{ mr: '$3' }}>
-            Account:{' '}
-          </Text>
+        </TxField>
+        <TxField label="Account">
           <Select
             instanceId="from-account"
             placeholder="Select your account"
-            css={{ width: '70%' }}
             options={accountOptions}
             value={selectedAccount}
             onChange={(acc: any) => handleSetAccount(acc)} // TODO make react-select have correct types for acc
           />
-        </Flex>
+        </TxField>
         {richFields.includes('Destination') && (
-          <Flex
-            row
-            fluid
-            css={{
-              justifyContent: 'flex-end',
-              alignItems: 'center',
-              mb: '$3',
-              pr: '1px'
-            }}
-          >
-            <Text muted css={{ mr: '$3', textAlign: 'end' }}>
-              Destination account:{' '}
-            </Text>
+          <TxField label="Destination account">
             <Select
               instanceId="to-account"
               placeholder="Select the destination account"
-              css={{ width: '70%' }}
               options={destAccountOptions}
               value={selectedDestAccount}
               isClearable
               onChange={(acc: any) => setState({ selectedDestAccount: acc })}
             />
-          </Flex>
+          </TxField>
         )}
         {richFields.includes('Flags') && (
-          <Flex
-            row
-            fluid
-            css={{
-              justifyContent: 'flex-end',
-              alignItems: 'center',
-              mb: '$3',
-              pr: '1px'
-            }}
-          >
-            <Text muted css={{ mr: '$3' }}>
-              Flags:{' '}
-            </Text>
+          <TxField label="Flags">
             <Select
               isClearable
-              css={{ width: '70%' }}
               instanceId="flags"
               placeholder="Select flags to apply"
               menuPosition="fixed"
@@ -229,7 +178,7 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, resetState, estima
                 selectedFlags ? selectedFlags.length >= flagsOptions.length - 1 : false
               }
             />
-          </Flex>
+          </TxField>
         )}
         {otherFields.map(field => {
           let _value = txFields[field]
@@ -251,19 +200,7 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, resetState, estima
           let rows = isJson ? (value?.match(/\n/gm)?.length || 0) + 1 : undefined
           if (rows && rows > 5) rows = 5
           return (
-            <Flex column key={field} css={{ mb: '$2', pr: '1px' }}>
-              <Flex
-                row
-                fluid
-                css={{
-                  justifyContent: 'flex-end',
-                  alignItems: 'center',
-                  position: 'relative'
-                }}
-              >
-                <Text muted css={{ mr: '$3' }}>
-                  {field + (isXrp ? ' (XRP)' : '')}:{' '}
-                </Text>
+            <TxField key={field} label={field + (isXrp ? ' (XRP)' : '')}>
               {isJson ? (
                 <Textarea
                   rows={rows}
@@ -271,7 +208,6 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, resetState, estima
                   spellCheck={false}
                   onChange={switchToJson}
                   css={{
-                      width: '70%',
                     flex: 'inherit',
                     resize: 'vertical'
                   }}
@@ -298,7 +234,6 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, resetState, estima
                       : undefined
                   }
                   css={{
-                      width: '70%',
                     flex: 'inherit',
                     '-moz-appearance': 'textfield',
                     '&::-webkit-outer-spin-button': {
@@ -333,11 +268,36 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, resetState, estima
                   Suggest
                 </Button>
               )}
-              </Flex>
-            </Flex>
+            </TxField>
           )
         })}
       </Flex>
     </Container>
   )
 }
+
+export const TxField: FC<{ label: string; children: ReactNode; isMulti?: boolean }> = ({
+  label,
+  children,
+  isMulti = false
+}) => {
+  return (
+    <Flex
+      row
+      fluid
+      css={{
+        justifyContent: 'flex-end',
+        alignItems: isMulti ? 'flex-start' : 'center',
+        position: 'relative',
+        mb: '$3',
+        mt: '1px',
+        pr: '1px'
+      }}
+    >
+      <Text muted css={{ mr: '$3', mt: isMulti ? '$2' : 0 }}>
+        {label}:{' '}
+      </Text>
+      <Flex css={{ width: '70%', alignItems: 'center' }}>{children}</Flex>
+    </Flex>
+  )
+}

state/transactions.ts

@@ -24,9 +24,11 @@ export interface TransactionState {
   estimatedFee?: string
 }
 
+const commonFields = ['TransactionType', 'Account', 'Sequence', "HookParameters"] as const;
+
 export type TxFields = Omit<
   Partial<typeof transactionsData[0]>,
-  'Account' | 'Sequence' | 'TransactionType'
+  typeof commonFields[number]
 >
 
 export const defaultTransaction: TransactionState = {
@@ -246,12 +248,12 @@ export const getTxFields = (tt?: string) => {
   if (!txFields) return {}
 
   let _txFields = Object.keys(txFields)
-    .filter(key => !['TransactionType', 'Account', 'Sequence'].includes(key))
+    .filter(key => !commonFields.includes(key as any))
     .reduce<TxFields>((tf, key) => ((tf[key as keyof TxFields] = (txFields as any)[key]), tf), {})
   return _txFields
 }
 
-export { transactionsData }
+export { transactionsData, commonFields }
 
 export const transactionsOptions = transactionsData.map(tx => ({
   value: tx.TransactionType,