minor label changes.

HookParameters UI for transactions.

components/Transaction/index.tsx

@@ -47,7 +47,8 @@ const Transaction: FC<TransactionProps> = ({ header, state: txState, ...props })
         selectedAccount,
         txFields,
         selectedFlags,
-        hookParameters
+        hookParameters,
+        memos
       } = state
 
       const TransactionType = selectedTransaction?.value || null
@@ -61,6 +62,13 @@ const Transaction: FC<TransactionProps> = ({ header, state: txState, ...props })
           HookParameter: { HookParameterName: toHex(label), HookParameterValue: toHex(value) }
         })
       }, [])
+      const Memos = memos
+        ? Object.entries(memos).reduce<SetHookData['Memos']>((acc, [_, { format, data, type }]) => {
+            return acc?.concat({
+              Memo: { MemoData: toHex(data), MemoFormat: toHex(format), MemoType: toHex(type) }
+            })
+          }, [])
+        : undefined
 
       return prepareTransaction({
         ...txFields,
@@ -68,7 +76,8 @@ const Transaction: FC<TransactionProps> = ({ header, state: txState, ...props })
         Flags,
         TransactionType,
         Destination,
-        Account
+        Account,
+        Memos
       })
     },
     [txState]

components/Transaction/ui.tsx

@@ -35,7 +35,8 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, resetState, estima
     selectedTransaction,
     txFields,
     selectedFlags,
-    hookParameters
+    hookParameters,
+    memos
   } = txState
 
   const accountOptions: SelectOption[] = accounts.map(acc => ({
@@ -117,7 +118,7 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, resetState, estima
     [selectedTransaction?.value]
   )
 
-  const richFields = ['TransactionType', 'Account', 'HookParameters']
+  const richFields = ['TransactionType', 'Account', 'HookParameters', 'Memos']
   if (fields.Destination !== undefined) {
     richFields.push('Destination')
   }
@@ -333,6 +334,83 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, resetState, estima
             </Button>
           </Flex>
         </TxField>
+        <TxField multiLine label="Memos">
+          <Flex column fluid>
+            {Object.entries(memos).map(([id, memo]) => (
+              <Flex column key={id} css={{ mb: '$2' }}>
+                <Flex
+                  row
+                  css={{
+                    flexWrap: 'wrap',
+                    width: '100%',
+                  }}
+                >
+                  <Input
+                    placeholder="Memo type"
+                    value={memo.type}
+                    onChange={e => {
+                      setState({
+                        memos: {
+                          ...memos,
+                          [id]: { ...memo, type: e.target.value }
+                        }
+                      })
+                    }}
+                  />
+                  <Input
+                    placeholder="Data"
+                    css={{ mx: '$2' }}
+                    value={memo.data}
+                    onChange={e => {
+                      setState({
+                        memos: {
+                          ...memos,
+                          [id]: { ...memo, data: e.target.value }
+                        }
+                      })
+                    }}
+                  />
+                  <Input
+                    placeholder="Format"
+                    value={memo.format}
+                    onChange={e => {
+                      setState({
+                        memos: {
+                          ...memos,
+                          [id]: { ...memo, format: e.target.value }
+                        }
+                      })
+                    }}
+                  />
+                  <Button
+                    css={{ ml: '$2' }}
+                    onClick={() => {
+                      const { [id]: _, ...rest } = memos
+                      setState({ memos: rest })
+                    }}
+                    variant="destroy"
+                  >
+                    <Trash weight="regular" size="16px" />
+                  </Button>
+                </Flex>
+              </Flex>
+            ))}
+            <Button
+              outline
+              fullWidth
+              type="button"
+              onClick={() => {
+                const id = Object.keys(memos).length
+                setState({
+                  memos: { ...memos, [id]: { data: '', format: '', type: '' } }
+                })
+              }}
+            >
+              <Plus size="16px" />
+              Add Memo
+            </Button>
+          </Flex>
+        </TxField>
       </Flex>
     </Container>
   )

state/transactions.ts

@@ -16,12 +16,21 @@ export type HookParameters = {
   [key: string]: SelectOption
 }
 
+export type Memos = {
+  [key: string]: {
+    type: string
+    format: string
+    data: string
+  }
+}
+
 export interface TransactionState {
   selectedTransaction: SelectOption | null
   selectedAccount: SelectOption | null
   selectedDestAccount: SelectOption | null
   selectedFlags: SelectOption[] | null
   hookParameters: HookParameters
+  memos: Memos
   txIsLoading: boolean
   txIsDisabled: boolean
   txFields: TxFields
@@ -43,6 +52,7 @@ export const defaultTransaction: TransactionState = {
   selectedDestAccount: null,
   selectedFlags: null,
   hookParameters: {},
+  memos: {},
   txIsLoading: false,
   txIsDisabled: false,
   txFields: {},
@@ -167,7 +177,7 @@ export const prepareState = (value: string, transactionType?: string) => {
     return
   }
 
-  const { Account, TransactionType, Destination, HookParameters, ...rest } = options
+  const { Account, TransactionType, Destination, HookParameters, Memos, ...rest } = options
   let tx: Partial<TransactionState> = {}
   const schema = getTxFields(transactionType)
 
@@ -205,6 +215,14 @@ export const prepareState = (value: string, transactionType?: string) => {
     }, {})
   }
 
+  if (Memos && Memos instanceof Array) {
+    tx.memos = Memos.reduce<TransactionState["memos"]>((acc, cur, idx) => {
+      const memo = { data: fromHex(cur.Memo?.MemoData || ""), type: fromHex(cur.Memo?.MemoType || ""), format: fromHex(cur.Memo?.MemoFormat || "") }
+      acc[idx] = memo;
+      return acc;
+    }, {})
+  }
+
   if (schema.Destination !== undefined) {
     const dest = state.accounts.find(acc => acc.address === Destination)
     if (dest) {

utils/setHook.ts

@@ -20,6 +20,13 @@ export type SetHookData = {
     }
     $metaData?: any
   }[]
+  Memos?: {
+    Memo: {
+      MemoType: string,
+      MemoData: string
+      MemoFormat: string
+    }
+  }[]
   // HookGrants: {
   //   HookGrant: {
   //     Authorize: string;