Fetch sequence on account creation.

Fix tx json saving and discarding.

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/Sequence.tsx

@@ -0,0 +1,71 @@
+import { FC, useCallback, useState } from 'react'
+import state from '../state'
+import { Flex, Input, Button } from '.'
+import fetchAccountInfo from '../utils/accountInfo'
+import { useSnapshot } from 'valtio'
+
+interface AccountSequenceProps {
+  address?: string
+}
+const AccountSequence: FC<AccountSequenceProps> = ({ address }) => {
+  const { accounts } = useSnapshot(state)
+  const account = accounts.find(acc => acc.address === address)
+  const [isLoading, setIsLoading] = useState(false)
+  const setSequence = useCallback(
+    (sequence: number) => {
+      const acc = state.accounts.find(acc => acc.address == address)
+      if (!acc) return
+      acc.sequence = sequence
+    },
+    [address]
+  )
+  const handleUpdateSequence = useCallback(
+    async (silent?: boolean) => {
+      if (!account) return
+      setIsLoading(true)
+
+      const info = await fetchAccountInfo(account.address, { silent })
+      if (info) {
+        setSequence(info.Sequence)
+      }
+
+      setIsLoading(false)
+    },
+    [account, setSequence]
+  )
+  const disabled = !account
+  return (
+    <Flex row align="center" fluid>
+      <Input
+        placeholder="Account sequence"
+        value={account?.sequence}
+        disabled={!account}
+        type="number"
+        readOnly={true}
+      />
+      <Button
+        size="xs"
+        variant="primary"
+        type="button"
+        outline
+        disabled={disabled}
+        isDisabled={disabled}
+        isLoading={isLoading}
+        css={{
+          background: '$backgroundAlt',
+          position: 'absolute',
+          right: '$2',
+          fontSize: '$xs',
+          cursor: 'pointer',
+          alignContent: 'center',
+          display: 'flex'
+        }}
+        onClick={() => handleUpdateSequence()}
+      >
+        Update
+      </Button>
+    </Flex>
+  )
+}
+
+export default AccountSequence

components/SetHookDialog.tsx

@@ -21,6 +21,7 @@ import { prepareDeployHookTx, sha256 } from '../state/actions/deployHook'
 import estimateFee from '../utils/estimateFee'
 import { getParameters, getInvokeOptions, transactionOptions, SetHookData } from '../utils/setHook'
 import { capitalize } from '../utils/helpers'
+import AccountSequence from './Sequence'
 
 export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
   ({ accountAddress }) => {
@@ -190,6 +191,10 @@ export const SetHookDialog: React.FC<{ accountAddress: string }> = React.memo(
                     onChange={(acc: any) => setSelectedAccount(acc)}
                   />
                 </Box>
+                <Box css={{ width: '100%', position: 'relative' }}>
+                  <Label>Sequence</Label>
+                  <AccountSequence address={selectedAccount?.value} />
+                </Box>
                 <Box css={{ width: '100%' }}>
                   <Label>Invoke on transactions</Label>
                   <Controller

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,20 +41,43 @@ 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,
+        memos
+      } = 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) }
+        })
+      }, [])
+      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,
+        HookParameters,
         Flags,
         TransactionType,
         Destination,
-        Account
+        Account,
+        Memos
       })
     },
     [txState]
@@ -69,15 +93,29 @@ const Transaction: FC<TransactionProps> = ({ header, state: txState, ...props })
     }
   }, [selectedAccount?.value, selectedTransaction?.value, setState, txIsLoading])
 
+  const getJsonString = useCallback(
+    (state?: Partial<TransactionState>) =>
+      JSON.stringify(prepareOptions?.(state) || {}, null, editorSettings.tabSize),
+    [editorSettings.tabSize, prepareOptions]
+  )
+
+  const saveEditorState = useCallback(
+    (value: string = '', transactionType?: string) => {
+      const pTx = prepareState(value, transactionType)
+      if (pTx) {
+        pTx.editorValue = getJsonString(pTx)
+        return setState(pTx)
+      }
+    },
+    [getJsonString, setState]
+  )
+
   const submitTest = useCallback(async () => {
     let st: TransactionState | undefined
     const tt = txState.selectedTransaction?.value
     if (viewType === 'json') {
-      // save the editor state first
+      st = saveEditorState(editorValue, tt)
-      const pst = prepareState(editorValue || '', tt)
+      if (!st) return
-      if (!pst) return
-
-      st = setState(pst)
     }
 
     const account = accounts.find(acc => acc.address === selectedAccount?.value)
@@ -108,23 +146,18 @@ const Transaction: FC<TransactionProps> = ({ header, state: txState, ...props })
     }
     setState({ txIsLoading: false })
   }, [
+    txState.selectedTransaction?.value,
     viewType,
     accounts,
     txIsDisabled,
     setState,
     header,
+    saveEditorState,
     editorValue,
-    txState,
     selectedAccount?.value,
     prepareOptions
   ])
 
-  const getJsonString = useCallback(
-    (state?: Partial<TransactionState>) =>
-      JSON.stringify(prepareOptions?.(state) || {}, null, editorSettings.tabSize),
-    [editorSettings.tabSize, prepareOptions]
-  )
-
   const resetState = useCallback(
     (transactionType: SelectOption | undefined = defaultTransactionType) => {
       const fields = getTxFields(transactionType?.value)
@@ -177,11 +210,21 @@ const Transaction: FC<TransactionProps> = ({ header, state: txState, ...props })
     [accounts, prepareOptions, setState, txState]
   )
 
+  const switchToJson = useCallback(() => {
+    const editorValue = getJsonString()
+    setState({ viewType: 'json', editorValue })
+  }, [getJsonString, setState])
+
+  const switchToUI = useCallback(() => {
+    setState({ viewType: 'ui' })
+  }, [setState])
+
   return (
     <Box css={{ position: 'relative', height: 'calc(100% - 28px)' }} {...props}>
       {viewType === 'json' ? (
         <TxJson
           getJsonString={getJsonString}
+          saveEditorState={saveEditorState}
           header={header}
           state={txState}
           setState={setState}
@@ -189,6 +232,7 @@ const Transaction: FC<TransactionProps> = ({ header, state: txState, ...props })
         />
       ) : (
         <TxUI
+          switchToJson={switchToJson}
           state={txState}
           resetState={resetState}
           setState={setState}
@@ -209,8 +253,8 @@ const Transaction: FC<TransactionProps> = ({ header, state: txState, ...props })
         <Button
           onClick={() => {
             if (viewType === 'ui') {
-              setState({ viewType: 'json' })
+              switchToJson()
-            } else setState({ viewType: 'ui' })
+            } else switchToUI()
           }}
           outline
         >

components/Transaction/json.tsx

@@ -1,6 +1,6 @@
-import { FC, useCallback, useEffect, useMemo, useState } from 'react'
+import { FC, useCallback, useEffect, useState } from 'react'
 import { useSnapshot } from 'valtio'
-import state, { prepareState, transactionsData, TransactionState } from '../../state'
+import state, { transactionsData, TransactionState } from '../../state'
 import Text from '../Text'
 import { Flex, Link } from '..'
 import { showAlert } from '../../state/actions/showAlert'
@@ -11,27 +11,27 @@ import Monaco from '../Monaco'
 import type monaco from 'monaco-editor'
 
 interface JsonProps {
-  getJsonString?: (state?: Partial<TransactionState>) => string
+  getJsonString: (st?: Partial<TransactionState>) => string
+  saveEditorState: (val?: string, tt?: string) => TransactionState | undefined
   header?: string
   setState: (pTx?: Partial<TransactionState> | undefined) => void
   state: TransactionState
   estimateFee?: () => Promise<string | undefined>
 }
 
-export const TxJson: FC<JsonProps> = ({ getJsonString, state: txState, header, setState }) => {
+export const TxJson: FC<JsonProps> = ({
+  getJsonString,
+  state: txState,
+  header,
+  setState,
+  saveEditorState
+}) => {
   const { editorSettings, accounts } = useSnapshot(state)
-  const { editorValue, estimatedFee } = txState
+  const { editorValue, estimatedFee, editorIsSaved } = txState
   const [currTxType, setCurrTxType] = useState<string | undefined>(
     txState.selectedTransaction?.value
   )
 
-  useEffect(() => {
-    setState({
-      editorValue: getJsonString?.()
-    })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
   useEffect(() => {
     const parsed = parseJSON(editorValue)
     if (!parsed) return
@@ -44,29 +44,19 @@ export const TxJson: FC<JsonProps> = ({ getJsonString, state: txState, header, s
     }
   }, [editorValue])
 
-  const saveState = (value: string, transactionType?: string) => {
-    const tx = prepareState(value, transactionType)
-    if (tx) {
-      setState(tx)
-      setState({
-        editorValue: getJsonString?.(tx)
-      })
-    }
-  }
-
   const discardChanges = () => {
     showAlert('Confirm', {
       body: 'Are you sure to discard these changes?',
       confirmText: 'Yes',
       onCancel: () => {},
-      onConfirm: () => setState({ editorValue: getJsonString?.() })
+      onConfirm: () => setState({ editorValue: getJsonString() })
     })
   }
 
   const onExit = (value: string) => {
     const options = parseJSON(value)
     if (options) {
-      saveState(value, currTxType)
+      saveEditorState(value, currTxType)
       return
     }
     showAlert('Error!', {
@@ -163,8 +153,6 @@ export const TxJson: FC<JsonProps> = ({ getJsonString, state: txState, header, s
     })
   }, [getSchemas, monacoInst])
 
-  const hasUnsaved = useMemo(() => editorValue !== getJsonString?.(), [editorValue, getJsonString])
-
   return (
     <Monaco
       rootProps={{
@@ -174,7 +162,7 @@ export const TxJson: FC<JsonProps> = ({ getJsonString, state: txState, header, s
       id={header}
       height="100%"
       value={editorValue}
-      onChange={val => setState({ editorValue: val })}
+      onChange={val => setState({ editorValue: val, editorIsSaved: false })}
       onMount={(editor, monaco) => {
         editor.updateOptions({
           minimap: { enabled: false },
@@ -190,12 +178,12 @@ export const TxJson: FC<JsonProps> = ({ getJsonString, state: txState, header, s
         model?.onWillDispose(() => onExit(model.getValue()))
       }}
       overlay={
-        hasUnsaved ? (
+        !editorIsSaved ? (
           <Flex row align="center" css={{ fontSize: '$xs', color: '$textMuted', ml: 'auto' }}>
             <Text muted small>
               This file has unsaved changes.
             </Text>
-            <Link css={{ ml: '$1' }} onClick={() => saveState(editorValue || '', currTxType)}>
+            <Link css={{ ml: '$1' }} onClick={() => saveEditorState(editorValue, currTxType)}>
               save
             </Link>
             <Link css={{ ml: '$1' }} onClick={discardChanges}>

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,18 +18,34 @@ import { streamState } from '../DebugStream'
 import { Button } from '..'
 import Textarea from '../Textarea'
 import { getFlags } from '../../state/constants/flags'
+import { Plus, Trash } from 'phosphor-react'
+import AccountSequence from '../Sequence'
 
 interface UIProps {
   setState: (pTx?: Partial<TransactionState> | undefined) => TransactionState | undefined
   resetState: (tt?: SelectOption) => TransactionState | undefined
   state: TransactionState
   estimateFee?: (...arg: any) => Promise<string | undefined>
+  switchToJson: () => void
 }
 
-export const TxUI: FC<UIProps> = ({ state: txState, setState, resetState, estimateFee }) => {
+export const TxUI: FC<UIProps> = ({
+  state: txState,
+  setState,
+  resetState,
+  estimateFee,
+  switchToJson
+}) => {
   const { accounts } = useSnapshot(state)
-  const { selectedAccount, selectedDestAccount, selectedTransaction, txFields, selectedFlags } =
+  const {
-    txState
+    selectedAccount,
+    selectedDestAccount,
+    selectedTransaction,
+    txFields,
+    selectedFlags,
+    hookParameters,
+    memos
+  } = txState
 
   const accountOptions: SelectOption[] = accounts.map(acc => ({
     label: acc.name,
@@ -94,8 +110,6 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, resetState, estima
     [handleEstimateFee, resetState, setState]
   )
 
-  const switchToJson = () => setState({ viewType: 'json' })
-
   // default tx
   useEffect(() => {
     if (selectedTransaction?.value) return
@@ -110,7 +124,7 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, resetState, estima
     [selectedTransaction?.value]
   )
 
-  const richFields = ['TransactionType', 'Account']
+  const richFields = ['TransactionType', 'Account', 'HookParameters', 'Memos']
   if (fields.Destination !== undefined) {
     richFields.push('Destination')
   }
@@ -120,7 +134,6 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, resetState, estima
   }
 
   const otherFields = Object.keys(txFields).filter(k => !richFields.includes(k)) as [keyof TxFields]
-
   return (
     <Container
       css={{
@@ -130,94 +143,44 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, resetState, estima
       }}
     >
       <Flex column fluid css={{ height: '100%', overflowY: 'auto', pr: '$1' }}>
-        <Flex
+        <TxField label="Transaction type">
-          row
-          fluid
-          css={{
-            justifyContent: 'flex-end',
-            alignItems: 'center',
-            mb: '$3',
-            mt: '1px',
-            pr: '1px'
-          }}
-        >
-          <Text muted css={{ mr: '$3' }}>
-            Transaction type:{' '}
-          </Text>
           <Select
             instanceId="transactionsType"
             placeholder="Select transaction type"
             options={transactionsOptions}
             hideSelectedOptions
-            css={{ width: '70%' }}
             value={selectedTransaction}
             onChange={(tt: any) => handleChangeTxType(tt)}
           />
-        </Flex>
+        </TxField>
-        <Flex
+        <TxField label="Account">
-          row
-          fluid
-          css={{
-            justifyContent: 'flex-end',
-            alignItems: 'center',
-            mb: '$3',
-            pr: '1px'
-          }}
-        >
-          <Text muted css={{ mr: '$3' }}>
-            Account:{' '}
-          </Text>
           <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>
+        <TxField label="Sequence">
+          <AccountSequence address={selectedAccount?.value} />
+        </TxField>
         {richFields.includes('Destination') && (
-          <Flex
+          <TxField label="Destination account">
-            row
-            fluid
-            css={{
-              justifyContent: 'flex-end',
-              alignItems: 'center',
-              mb: '$3',
-              pr: '1px'
-            }}
-          >
-            <Text muted css={{ mr: '$3', textAlign: 'end' }}>
-              Destination account:{' '}
-            </Text>
             <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
+          <TxField label="Flags">
-            row
-            fluid
-            css={{
-              justifyContent: 'flex-end',
-              alignItems: 'center',
-              mb: '$3',
-              pr: '1px'
-            }}
-          >
-            <Text muted css={{ mr: '$3' }}>
-              Flags:{' '}
-            </Text>
             <Select
               isClearable
-              css={{ width: '70%' }}
               instanceId="flags"
               placeholder="Select flags to apply"
               menuPosition="fixed"
@@ -229,7 +192,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,93 +214,239 @@ 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' }}>
+            <TxField key={field} label={field + (isXrp ? ' (XRP)' : '')}>
-              <Flex
+              {isJson ? (
-                row
+                <Textarea
-                fluid
+                  rows={rows}
-                css={{
+                  value={value}
-                  justifyContent: 'flex-end',
+                  spellCheck={false}
-                  alignItems: 'center',
+                  onChange={switchToJson}
-                  position: 'relative'
+                  css={{
-                }}
+                    flex: 'inherit',
-              >
+                    resize: 'vertical'
-                <Text muted css={{ mr: '$3' }}>
+                  }}
-                  {field + (isXrp ? ' (XRP)' : '')}:{' '}
+                />
-                </Text>
+              ) : (
-                {isJson ? (
+                <Input
-                  <Textarea
+                  type={isFee ? 'number' : 'text'}
-                    rows={rows}
+                  value={value}
-                    value={value}
+                  onChange={e => {
-                    spellCheck={false}
+                    if (isFee) {
-                    onChange={switchToJson}
+                      const val = e.target.value.replaceAll('.', '').replaceAll(',', '')
-                    css={{
+                      handleSetField(field, val)
-                      width: '70%',
+                    } else {
-                      flex: 'inherit',
+                      handleSetField(field, e.target.value)
-                      resize: 'vertical'
-                    }}
-                  />
-                ) : (
-                  <Input
-                    type={isFee ? 'number' : 'text'}
-                    value={value}
-                    onChange={e => {
-                      if (isFee) {
-                        const val = e.target.value.replaceAll('.', '').replaceAll(',', '')
-                        handleSetField(field, val)
-                      } else {
-                        handleSetField(field, e.target.value)
-                      }
-                    }}
-                    onKeyPress={
-                      isFee
-                        ? e => {
-                            if (e.key === '.' || e.key === ',') {
-                              e.preventDefault()
-                            }
-                          }
-                        : undefined
                     }
-                    css={{
+                  }}
-                      width: '70%',
+                  onKeyPress={
-                      flex: 'inherit',
+                    isFee
-                      '-moz-appearance': 'textfield',
+                      ? e => {
-                      '&::-webkit-outer-spin-button': {
+                          if (e.key === '.' || e.key === ',') {
-                        '-webkit-appearance': 'none',
+                            e.preventDefault()
-                        margin: 0
+                          }
-                      },
+                        }
-                      '&::-webkit-inner-spin-button ': {
+                      : undefined
-                        '-webkit-appearance': 'none',
+                  }
-                        margin: 0
+                  css={{
-                      }
+                    flex: 'inherit',
-                    }}
+                    '-moz-appearance': 'textfield',
-                  />
+                    '&::-webkit-outer-spin-button': {
-                )}
+                      '-webkit-appearance': 'none',
-                {isFee && (
+                      margin: 0
-                  <Button
+                    },
-                    size="xs"
+                    '&::-webkit-inner-spin-button ': {
-                    variant="primary"
+                      '-webkit-appearance': 'none',
-                    outline
+                      margin: 0
-                    disabled={txState.txIsDisabled}
+                    }
-                    isDisabled={txState.txIsDisabled}
+                  }}
-                    isLoading={feeLoading}
+                />
-                    css={{
+              )}
-                      position: 'absolute',
+              {isFee && (
-                      right: '$2',
+                <Button
-                      fontSize: '$xs',
+                  size="xs"
-                      cursor: 'pointer',
+                  variant="primary"
-                      alignContent: 'center',
+                  outline
-                      display: 'flex'
+                  disabled={txState.txIsDisabled}
-                    }}
+                  isDisabled={txState.txIsDisabled}
-                    onClick={() => handleEstimateFee()}
+                  isLoading={feeLoading}
-                  >
+                  css={{
-                    Suggest
+                    position: 'absolute',
-                  </Button>
+                    right: '$2',
-                )}
+                    fontSize: '$xs',
-              </Flex>
+                    cursor: 'pointer',
-            </Flex>
+                    alignContent: 'center',
+                    display: 'flex'
+                  }}
+                  onClick={() => handleEstimateFee()}
+                >
+                  Suggest
+                </Button>
+              )}
+            </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>
+        <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>
   )
 }
+
+export const TxField: FC<{ label: string; children: ReactNode; multiLine?: boolean }> = ({
+  label,
+  children,
+  multiLine = false
+}) => {
+  return (
+    <Flex
+      row
+      fluid
+      css={{
+        justifyContent: 'flex-end',
+        alignItems: multiLine ? 'flex-start' : 'center',
+        position: 'relative',
+        mb: '$3',
+        mt: '1px',
+        pr: '1px'
+      }}
+    >
+      <Text muted css={{ mr: '$3', mt: multiLine ? '$2' : 0 }}>
+        {label}:{' '}
+      </Text>
+      <Flex css={{ width: '70%', alignItems: 'center' }}>{children}</Flex>
+    </Flex>
+  )
+}

state/actions/addFaucetAccount.ts

@@ -1,5 +1,6 @@
 import toast from 'react-hot-toast'
 import state, { FaucetAccountRes } from '../index'
+import fetchAccountInfo from '../../utils/accountInfo';
 
 export const names = [
   'Alice',
@@ -35,40 +36,37 @@ export const addFaucetAccount = async (name?: string, showToast: boolean = false
   })
   const json: FaucetAccountRes | { error: string } = await res.json()
   if ('error' in json) {
-    if (showToast) {
+    if (!showToast) return;
-      return toast.error(json.error, { id: toastId })
+    return toast.error(json.error, { id: toastId })
-    } else {
+  }
-      return
+  const currNames = state.accounts.map(acc => acc.name)
-    }
+  const info = await fetchAccountInfo(json.address, { silent: true })
-  } else {
+  state.accounts.push({
-    if (showToast) {
+    name: name || names.filter(name => !currNames.includes(name))[0],
-      toast.success('New account created', { id: toastId })
+    xrp: (json.xrp || 0 * 1000000).toString(),
-    }
+    address: json.address,
-    const currNames = state.accounts.map(acc => acc.name)
+    secret: json.secret,
-    state.accounts.push({
+    sequence: info?.Sequence || 1,
-      name: name || names.filter(name => !currNames.includes(name))[0],
+    hooks: [],
-      xrp: (json.xrp || 0 * 1000000).toString(),
+    isLoading: false,
-      address: json.address,
+    version: '2'
-      secret: json.secret,
+  })
-      sequence: 1,
+  if (showToast) {
-      hooks: [],
+    toast.success('New account created', { id: toastId })
-      isLoading: false,
-      version: '2'
-    })
   }
 }
 
-// fetch initial faucets
+  // fetch initial faucets
-;(async function fetchFaucets() {
+  ; (async function fetchFaucets() {
-  if (typeof window !== 'undefined') {
+    if (typeof window !== 'undefined') {
-    if (state.accounts.length === 0) {
+      if (state.accounts.length === 0) {
-      await addFaucetAccount()
+        await addFaucetAccount()
-      // setTimeout(() => {
+        // setTimeout(() => {
-      //   addFaucetAccount();
+        //   addFaucetAccount();
-      // }, 10000);
+        // }, 10000);
+      }
     }
-  }
+  })()
-})()
 
 export const addFunds = async (address: string) => {
   const toastId = toast.loading('Requesting funds')

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,28 +5,46 @@ 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 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
   viewType: 'json' | 'ui'
   editorValue?: string
+  editorIsSaved: boolean
   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 = {
@@ -34,6 +52,9 @@ export const defaultTransaction: TransactionState = {
   selectedAccount: null,
   selectedDestAccount: null,
   selectedFlags: null,
+  hookParameters: {},
+  memos: {},
+  editorIsSaved: true,
   txIsLoading: false,
   txIsDisabled: false,
   txFields: {},
@@ -158,7 +179,7 @@ export const prepareState = (value: string, transactionType?: string) => {
     return
   }
 
-  const { Account, TransactionType, Destination, ...rest } = options
+  const { Account, TransactionType, Destination, HookParameters, Memos, ...rest } = options
   let tx: Partial<TransactionState> = {}
   const schema = getTxFields(transactionType)
 
@@ -188,6 +209,22 @@ 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 (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) {
@@ -236,6 +273,7 @@ export const prepareState = (value: string, transactionType?: string) => {
   })
 
   tx.txFields = rest
+  tx.editorIsSaved = true;
 
   return tx
 }
@@ -246,12 +284,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,

utils/accountInfo.ts

@@ -0,0 +1,31 @@
+import toast from 'react-hot-toast'
+
+import { xrplSend } from '../state/actions/xrpl-client'
+
+interface AccountInfo {
+    Account: string,
+    Sequence: number,
+    Flags: number,
+    Balance?: string,
+}
+
+const fetchAccountInfo = async (
+    address: string,
+    opts: { silent?: boolean } = {}
+): Promise<AccountInfo | undefined> => {
+    try {
+        const res = await xrplSend({
+            id: `hooks-builder-req-info-${address}`,
+            command: 'account_info',
+            account: address
+        })
+        return res.account_data;
+    } catch (err) {
+        if (!opts.silent) {
+            console.error(err)
+            toast.error('Could not fetch account info!')
+        }
+    }
+}
+
+export default fetchAccountInfo

utils/hookOnCalculator.ts

@@ -23,7 +23,8 @@ export const tts = {
   ttNFTOKEN_BURN: 26,
   ttNFTOKEN_CREATE_OFFER: 27,
   ttNFTOKEN_CANCEL_OFFER: 28,
-  ttNFTOKEN_ACCEPT_OFFER: 29
+  ttNFTOKEN_ACCEPT_OFFER: 29,
+  ttINVOKE: 99,
 }
 
 export type TTS = typeof tts

utils/setHook.ts

@@ -20,6 +20,13 @@ export type SetHookData = {
     }
     $metaData?: any
   }[]
+  Memos?: {
+    Memo: {
+      MemoType: string,
+      MemoData: string
+      MemoFormat: string
+    }
+  }[]
   // HookGrants: {
   //   HookGrant: {
   //     Authorize: string;
@@ -74,3 +81,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
+}