From 423ee18e6a63585a3945930558f96b2e796c3638 Mon Sep 17 00:00:00 2001
From: muzam1l <muzamilsofi@outlook.com>
Date: Thu, 2 Mar 2023 15:11:44 +0530
Subject: [PATCH 01/31] Add Invoke HookOn option.

---
 utils/hookOnCalculator.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/utils/hookOnCalculator.ts b/utils/hookOnCalculator.ts
index 7baad7c..4856fbf 100644
--- a/utils/hookOnCalculator.ts
+++ b/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

From b50b3003071e0c974f3f8a8a3094a67e05b718ff Mon Sep 17 00:00:00 2001
From: muzam1l <muzamilsofi@outlook.com>
Date: Fri, 3 Mar 2023 16:00:43 +0530
Subject: [PATCH 02/31] Refactor tx.

---
 components/Select.tsx         |   3 +-
 components/Transaction/ui.tsx | 250 ++++++++++++++--------------------
 state/transactions.ts         |   8 +-
 3 files changed, 112 insertions(+), 149 deletions(-)

diff --git a/components/Select.tsx b/components/Select.tsx
index 8c5e975..3822e18 100644
--- a/components/Select.tsx
+++ b/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 => ({
diff --git a/components/Transaction/ui.tsx b/components/Transaction/ui.tsx
index 59e2d64..f4e1321 100644
--- a/components/Transaction/ui.tsx
+++ b/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,93 +200,104 @@ 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>
-                {isJson ? (
-                  <Textarea
-                    rows={rows}
-                    value={value}
-                    spellCheck={false}
-                    onChange={switchToJson}
-                    css={{
-                      width: '70%',
-                      flex: 'inherit',
-                      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
+            <TxField key={field} label={field + (isXrp ? ' (XRP)' : '')}>
+              {isJson ? (
+                <Textarea
+                  rows={rows}
+                  value={value}
+                  spellCheck={false}
+                  onChange={switchToJson}
+                  css={{
+                    flex: 'inherit',
+                    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)
                     }
-                    css={{
-                      width: '70%',
-                      flex: 'inherit',
-                      '-moz-appearance': 'textfield',
-                      '&::-webkit-outer-spin-button': {
-                        '-webkit-appearance': 'none',
-                        margin: 0
-                      },
-                      '&::-webkit-inner-spin-button ': {
-                        '-webkit-appearance': 'none',
-                        margin: 0
-                      }
-                    }}
-                  />
-                )}
-                {isFee && (
-                  <Button
-                    size="xs"
-                    variant="primary"
-                    outline
-                    disabled={txState.txIsDisabled}
-                    isDisabled={txState.txIsDisabled}
-                    isLoading={feeLoading}
-                    css={{
-                      position: 'absolute',
-                      right: '$2',
-                      fontSize: '$xs',
-                      cursor: 'pointer',
-                      alignContent: 'center',
-                      display: 'flex'
-                    }}
-                    onClick={() => handleEstimateFee()}
-                  >
-                    Suggest
-                  </Button>
-                )}
-              </Flex>
-            </Flex>
+                  }}
+                  onKeyPress={
+                    isFee
+                      ? e => {
+                          if (e.key === '.' || e.key === ',') {
+                            e.preventDefault()
+                          }
+                        }
+                      : undefined
+                  }
+                  css={{
+                    flex: 'inherit',
+                    '-moz-appearance': 'textfield',
+                    '&::-webkit-outer-spin-button': {
+                      '-webkit-appearance': 'none',
+                      margin: 0
+                    },
+                    '&::-webkit-inner-spin-button ': {
+                      '-webkit-appearance': 'none',
+                      margin: 0
+                    }
+                  }}
+                />
+              )}
+              {isFee && (
+                <Button
+                  size="xs"
+                  variant="primary"
+                  outline
+                  disabled={txState.txIsDisabled}
+                  isDisabled={txState.txIsDisabled}
+                  isLoading={feeLoading}
+                  css={{
+                    position: 'absolute',
+                    right: '$2',
+                    fontSize: '$xs',
+                    cursor: 'pointer',
+                    alignContent: 'center',
+                    display: 'flex'
+                  }}
+                  onClick={() => handleEstimateFee()}
+                >
+                  Suggest
+                </Button>
+              )}
+            </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>
+  )
+}
diff --git a/state/transactions.ts b/state/transactions.ts
index f7b0f31..849f5f7 100644
--- a/state/transactions.ts
+++ b/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,

From 39699a1cb9131544474fff2556c920f550c96fd1 Mon Sep 17 00:00:00 2001
From: muzam1l <muzamilsofi@outlook.com>
Date: Fri, 3 Mar 2023 18:32:03 +0530
Subject: [PATCH 03/31] HookParameters UI for transactions.

---
 components/Transaction/index.tsx  | 19 +++++++-
 components/Transaction/ui.tsx     | 80 +++++++++++++++++++++++++++----
 state/actions/deployHook.tsx      |  9 +---
 state/actions/sendTransaction.tsx |  4 ++
 state/transactions.ts             | 17 ++++++-
 utils/setHook.ts                  | 16 +++++++
 6 files changed, 125 insertions(+), 20 deletions(-)

diff --git a/components/Transaction/index.tsx b/components/Transaction/index.tsx
index 22a2ccc..0e73b04 100644
--- a/components/Transaction/index.tsx
+++ b/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 } =
-        state
+      const {
+        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,
diff --git a/components/Transaction/ui.tsx b/components/Transaction/ui.tsx
index f4e1321..df7ba33 100644
--- a/components/Transaction/ui.tsx
+++ b/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 } =
-    txState
+  const {
+    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>
diff --git a/state/actions/deployHook.tsx b/state/actions/deployHook.tsx
index ed33d06..e7dd322 100644
--- a/state/actions/deployHook.tsx
+++ b/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) {
diff --git a/state/actions/sendTransaction.tsx b/state/actions/sendTransaction.tsx
index 46a6ab4..64a426c 100644
--- a/state/actions/sendTransaction.tsx
+++ b/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)
diff --git a/state/transactions.ts b/state/transactions.ts
index 849f5f7..095f62d 100644
--- a/state/transactions.ts
+++ b/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) {
diff --git a/utils/setHook.ts b/utils/setHook.ts
index d6eb188..0d9e327 100644
--- a/utils/setHook.ts
+++ b/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
+}
\ No newline at end of file

From 825af0db894c35ae71c2375e8a89801ce0ce14e6 Mon Sep 17 00:00:00 2001
From: muzam1l <muzamilsofi@outlook.com>
Date: Mon, 6 Mar 2023 21:14:14 +0530
Subject: [PATCH 04/31] Add memos field in transactions.

---
 components/Transaction/index.tsx | 13 +++++-
 components/Transaction/ui.tsx    | 72 +++++++++++++++++++++++++++++++-
 state/transactions.ts            | 20 ++++++++-
 utils/setHook.ts                 |  7 ++++
 4 files changed, 107 insertions(+), 5 deletions(-)

diff --git a/components/Transaction/index.tsx b/components/Transaction/index.tsx
index 0e73b04..a177806 100644
--- a/components/Transaction/index.tsx
+++ b/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]
diff --git a/components/Transaction/ui.tsx b/components/Transaction/ui.tsx
index df7ba33..77b9385 100644
--- a/components/Transaction/ui.tsx
+++ b/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,73 @@ 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' }}>
+                <Input
+                  placeholder="Memo type"
+                  value={memo.type}
+                  onChange={e => {
+                    setState({
+                      memos: {
+                        ...memos,
+                        [id]: { ...memo, type: e.target.value }
+                      }
+                    })
+                  }}
+                />
+                <Input
+                  placeholder="Memo data"
+                  value={memo.data}
+                  onChange={e => {
+                    setState({
+                      memos: {
+                        ...memos,
+                        [id]: { ...memo, data: e.target.value }
+                      }
+                    })
+                  }}
+                />
+                <Input
+                  placeholder="Memo format"
+                  value={memo.format}
+                  onChange={e => {
+                    setState({
+                      memos: {
+                        ...memos,
+                        [id]: { ...memo, format: e.target.value }
+                      }
+                    })
+                  }}
+                />
+                <Button
+                  onClick={() => {
+                    const { [id]: _, ...rest } = memos
+                    setState({ memos: rest })
+                  }}
+                  variant="destroy"
+                >
+                  <Trash weight="regular" size="16px" />
+                </Button>
+              </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>
   )
diff --git a/state/transactions.ts b/state/transactions.ts
index 095f62d..4d270e4 100644
--- a/state/transactions.ts
+++ b/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) {
diff --git a/utils/setHook.ts b/utils/setHook.ts
index 0d9e327..720a398 100644
--- a/utils/setHook.ts
+++ b/utils/setHook.ts
@@ -20,6 +20,13 @@ export type SetHookData = {
     }
     $metaData?: any
   }[]
+  Memos?: {
+    Memo: {
+      MemoType: string,
+      MemoData: string
+      MemoFormat: string
+    }
+  }[]
   // HookGrants: {
   //   HookGrant: {
   //     Authorize: string;

From 03b768db4eadc7860a74b590c3e42957597b492a Mon Sep 17 00:00:00 2001
From: muzam1l <muzamilsofi@outlook.com>
Date: Tue, 7 Mar 2023 16:03:47 +0530
Subject: [PATCH 05/31] UI for memos fields.

---
 components/Transaction/ui.tsx | 96 +++++++++++++++++++----------------
 1 file changed, 53 insertions(+), 43 deletions(-)

diff --git a/components/Transaction/ui.tsx b/components/Transaction/ui.tsx
index 77b9385..20a60b8 100644
--- a/components/Transaction/ui.tsx
+++ b/components/Transaction/ui.tsx
@@ -338,51 +338,61 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, resetState, estima
           <Flex column fluid>
             {Object.entries(memos).map(([id, memo]) => (
               <Flex column key={id} css={{ mb: '$2' }}>
-                <Input
-                  placeholder="Memo type"
-                  value={memo.type}
-                  onChange={e => {
-                    setState({
-                      memos: {
-                        ...memos,
-                        [id]: { ...memo, type: e.target.value }
-                      }
-                    })
+                <Flex
+                  row
+                  css={{
+                    flexWrap: 'wrap',
+                    width: '100%',
                   }}
-                />
-                <Input
-                  placeholder="Memo data"
-                  value={memo.data}
-                  onChange={e => {
-                    setState({
-                      memos: {
-                        ...memos,
-                        [id]: { ...memo, data: e.target.value }
-                      }
-                    })
-                  }}
-                />
-                <Input
-                  placeholder="Memo format"
-                  value={memo.format}
-                  onChange={e => {
-                    setState({
-                      memos: {
-                        ...memos,
-                        [id]: { ...memo, format: e.target.value }
-                      }
-                    })
-                  }}
-                />
-                <Button
-                  onClick={() => {
-                    const { [id]: _, ...rest } = memos
-                    setState({ memos: rest })
-                  }}
-                  variant="destroy"
                 >
-                  <Trash weight="regular" size="16px" />
-                </Button>
+                  <Input
+                    placeholder="Memo type"
+                    value={memo.type}
+                    onChange={e => {
+                      setState({
+                        memos: {
+                          ...memos,
+                          [id]: { ...memo, type: e.target.value }
+                        }
+                      })
+                    }}
+                  />
+                  <Input
+                    placeholder="Memo data"
+                    css={{ mx: '$2' }}
+                    value={memo.data}
+                    onChange={e => {
+                      setState({
+                        memos: {
+                          ...memos,
+                          [id]: { ...memo, data: e.target.value }
+                        }
+                      })
+                    }}
+                  />
+                  <Input
+                    placeholder="Memo 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

From 9001c64fedffa253df38e2d2a37056d49f26985b Mon Sep 17 00:00:00 2001
From: muzam1l <muzamilsofi@outlook.com>
Date: Tue, 7 Mar 2023 16:58:32 +0530
Subject: [PATCH 06/31] minor label changes.

---
 components/Transaction/ui.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/Transaction/ui.tsx b/components/Transaction/ui.tsx
index 20a60b8..34cc3aa 100644
--- a/components/Transaction/ui.tsx
+++ b/components/Transaction/ui.tsx
@@ -358,7 +358,7 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, resetState, estima
                     }}
                   />
                   <Input
-                    placeholder="Memo data"
+                    placeholder="Data"
                     css={{ mx: '$2' }}
                     value={memo.data}
                     onChange={e => {
@@ -371,7 +371,7 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, resetState, estima
                     }}
                   />
                   <Input
-                    placeholder="Memo format"
+                    placeholder="Format"
                     value={memo.format}
                     onChange={e => {
                       setState({

From 38f064c6d8adbcf1f927e207558939281b060475 Mon Sep 17 00:00:00 2001
From: muzam1l <muzamilsofi@outlook.com>
Date: Wed, 8 Mar 2023 17:13:36 +0530
Subject: [PATCH 07/31] Fix json saving and discarding.

---
 components/Transaction/index.tsx | 14 ++++++++++++--
 components/Transaction/json.tsx  | 16 +++-------------
 components/Transaction/ui.tsx    | 11 ++++++++---
 3 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/components/Transaction/index.tsx b/components/Transaction/index.tsx
index a177806..95079f5 100644
--- a/components/Transaction/index.tsx
+++ b/components/Transaction/index.tsx
@@ -201,6 +201,15 @@ 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' ? (
@@ -213,6 +222,7 @@ const Transaction: FC<TransactionProps> = ({ header, state: txState, ...props })
         />
       ) : (
         <TxUI
+          switchToJson={switchToJson}
           state={txState}
           resetState={resetState}
           setState={setState}
@@ -233,8 +243,8 @@ const Transaction: FC<TransactionProps> = ({ header, state: txState, ...props })
         <Button
           onClick={() => {
             if (viewType === 'ui') {
-              setState({ viewType: 'json' })
-            } else setState({ viewType: 'ui' })
+              switchToJson()
+            } else switchToUI()
           }}
           outline
         >
diff --git a/components/Transaction/json.tsx b/components/Transaction/json.tsx
index c4aa2d9..479f2f3 100644
--- a/components/Transaction/json.tsx
+++ b/components/Transaction/json.tsx
@@ -11,7 +11,7 @@ import Monaco from '../Monaco'
 import type monaco from 'monaco-editor'
 
 interface JsonProps {
-  getJsonString?: (state?: Partial<TransactionState>) => string
+  getJsonString: (state?: Partial<TransactionState>) => string
   header?: string
   setState: (pTx?: Partial<TransactionState> | undefined) => void
   state: TransactionState
@@ -25,13 +25,6 @@ export const TxJson: FC<JsonProps> = ({ getJsonString, state: txState, header, s
     txState.selectedTransaction?.value
   )
 
-  useEffect(() => {
-    setState({
-      editorValue: getJsonString?.()
-    })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
   useEffect(() => {
     const parsed = parseJSON(editorValue)
     if (!parsed) return
@@ -48,9 +41,6 @@ export const TxJson: FC<JsonProps> = ({ getJsonString, state: txState, header, s
     const tx = prepareState(value, transactionType)
     if (tx) {
       setState(tx)
-      setState({
-        editorValue: getJsonString?.(tx)
-      })
     }
   }
 
@@ -59,7 +49,7 @@ export const TxJson: FC<JsonProps> = ({ getJsonString, state: txState, header, s
       body: 'Are you sure to discard these changes?',
       confirmText: 'Yes',
       onCancel: () => {},
-      onConfirm: () => setState({ editorValue: getJsonString?.() })
+      onConfirm: () => setState({ editorValue: getJsonString() })
     })
   }
 
@@ -163,7 +153,7 @@ export const TxJson: FC<JsonProps> = ({ getJsonString, state: txState, header, s
     })
   }, [getSchemas, monacoInst])
 
-  const hasUnsaved = useMemo(() => editorValue !== getJsonString?.(), [editorValue, getJsonString])
+  const hasUnsaved = useMemo(() => editorValue !== getJsonString(), [editorValue, getJsonString])
 
   return (
     <Monaco
diff --git a/components/Transaction/ui.tsx b/components/Transaction/ui.tsx
index 34cc3aa..fffa7ad 100644
--- a/components/Transaction/ui.tsx
+++ b/components/Transaction/ui.tsx
@@ -25,9 +25,16 @@ interface UIProps {
   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,
@@ -102,8 +109,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

From 4528e5a16ed9a47fc6d7b6fa072d71babf15876a Mon Sep 17 00:00:00 2001
From: muzam1l <muzamilsofi@outlook.com>
Date: Wed, 8 Mar 2023 20:33:23 +0530
Subject: [PATCH 08/31] Actually fix Json 'save'.

---
 components/Transaction/index.tsx | 34 +++++++++++++++++++++-----------
 components/Transaction/json.tsx  | 34 +++++++++++++++-----------------
 state/transactions.ts            |  3 +++
 3 files changed, 41 insertions(+), 30 deletions(-)

diff --git a/components/Transaction/index.tsx b/components/Transaction/index.tsx
index 95079f5..da10c1e 100644
--- a/components/Transaction/index.tsx
+++ b/components/Transaction/index.tsx
@@ -93,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
-      const pst = prepareState(editorValue || '', tt)
-      if (!pst) return
-
-      st = setState(pst)
+      st = saveEditorState(editorValue, tt)
+      if (!st) return
     }
 
     const account = accounts.find(acc => acc.address === selectedAccount?.value)
@@ -132,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)
@@ -215,6 +224,7 @@ const Transaction: FC<TransactionProps> = ({ header, state: txState, ...props })
       {viewType === 'json' ? (
         <TxJson
           getJsonString={getJsonString}
+          saveEditorState={saveEditorState}
           header={header}
           state={txState}
           setState={setState}
diff --git a/components/Transaction/json.tsx b/components/Transaction/json.tsx
index 479f2f3..4e78be2 100644
--- a/components/Transaction/json.tsx
+++ b/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,16 +11,23 @@ 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
   )
@@ -37,13 +44,6 @@ 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)
-    }
-  }
-
   const discardChanges = () => {
     showAlert('Confirm', {
       body: 'Are you sure to discard these changes?',
@@ -56,7 +56,7 @@ export const TxJson: FC<JsonProps> = ({ getJsonString, state: txState, header, s
   const onExit = (value: string) => {
     const options = parseJSON(value)
     if (options) {
-      saveState(value, currTxType)
+      saveEditorState(value, currTxType)
       return
     }
     showAlert('Error!', {
@@ -153,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={{
@@ -164,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 },
@@ -180,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}>
diff --git a/state/transactions.ts b/state/transactions.ts
index 4d270e4..57c3afe 100644
--- a/state/transactions.ts
+++ b/state/transactions.ts
@@ -36,6 +36,7 @@ export interface TransactionState {
   txFields: TxFields
   viewType: 'json' | 'ui'
   editorValue?: string
+  editorIsSaved: boolean
   estimatedFee?: string
 }
 
@@ -53,6 +54,7 @@ export const defaultTransaction: TransactionState = {
   selectedFlags: null,
   hookParameters: {},
   memos: {},
+  editorIsSaved: true,
   txIsLoading: false,
   txIsDisabled: false,
   txFields: {},
@@ -271,6 +273,7 @@ export const prepareState = (value: string, transactionType?: string) => {
   })
 
   tx.txFields = rest
+  tx.editorIsSaved = true;
 
   return tx
 }

From 55c68c580ad758fc4a75ab9acdcc888ebb77adc8 Mon Sep 17 00:00:00 2001
From: muzam1l <muzamilsofi@outlook.com>
Date: Fri, 10 Mar 2023 16:02:32 +0530
Subject: [PATCH 09/31] Account Sequence UI.

---
 components/Sequence.tsx       | 71 +++++++++++++++++++++++++++++++++++
 components/SetHookDialog.tsx  |  5 +++
 components/Transaction/ui.tsx |  6 ++-
 utils/accountInfo.ts          | 31 +++++++++++++++
 4 files changed, 112 insertions(+), 1 deletion(-)
 create mode 100644 components/Sequence.tsx
 create mode 100644 utils/accountInfo.ts

diff --git a/components/Sequence.tsx b/components/Sequence.tsx
new file mode 100644
index 0000000..0d0b189
--- /dev/null
+++ b/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
diff --git a/components/SetHookDialog.tsx b/components/SetHookDialog.tsx
index 28c85a0..b10d524 100644
--- a/components/SetHookDialog.tsx
+++ b/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
diff --git a/components/Transaction/ui.tsx b/components/Transaction/ui.tsx
index fffa7ad..48773fd 100644
--- a/components/Transaction/ui.tsx
+++ b/components/Transaction/ui.tsx
@@ -19,6 +19,7 @@ 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
@@ -161,6 +162,9 @@ export const TxUI: FC<UIProps> = ({
             onChange={(acc: any) => handleSetAccount(acc)} // TODO make react-select have correct types for acc
           />
         </TxField>
+        <TxField label="Sequence">
+          <AccountSequence address={selectedAccount?.value} />
+        </TxField>
         {richFields.includes('Destination') && (
           <TxField label="Destination account">
             <Select
@@ -347,7 +351,7 @@ export const TxUI: FC<UIProps> = ({
                   row
                   css={{
                     flexWrap: 'wrap',
-                    width: '100%',
+                    width: '100%'
                   }}
                 >
                   <Input
diff --git a/utils/accountInfo.ts b/utils/accountInfo.ts
new file mode 100644
index 0000000..8854346
--- /dev/null
+++ b/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

From 0fce9af77ccc860d6d37a87c6480b01cf33abafa Mon Sep 17 00:00:00 2001
From: muzam1l <muzamilsofi@outlook.com>
Date: Fri, 10 Mar 2023 16:18:35 +0530
Subject: [PATCH 10/31] Fetch sequence on account creation.

---
 state/actions/addFaucetAccount.ts | 58 +++++++++++++++----------------
 1 file changed, 28 insertions(+), 30 deletions(-)

diff --git a/state/actions/addFaucetAccount.ts b/state/actions/addFaucetAccount.ts
index 08413c2..4830ed1 100644
--- a/state/actions/addFaucetAccount.ts
+++ b/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) {
-      return toast.error(json.error, { id: toastId })
-    } else {
-      return
-    }
-  } else {
-    if (showToast) {
-      toast.success('New account created', { id: toastId })
-    }
-    const currNames = state.accounts.map(acc => acc.name)
-    state.accounts.push({
-      name: name || names.filter(name => !currNames.includes(name))[0],
-      xrp: (json.xrp || 0 * 1000000).toString(),
-      address: json.address,
-      secret: json.secret,
-      sequence: 1,
-      hooks: [],
-      isLoading: false,
-      version: '2'
-    })
+    if (!showToast) return;
+    return toast.error(json.error, { id: toastId })
+  }
+  const currNames = state.accounts.map(acc => acc.name)
+  const info = await fetchAccountInfo(json.address, { silent: true })
+  state.accounts.push({
+    name: name || names.filter(name => !currNames.includes(name))[0],
+    xrp: (json.xrp || 0 * 1000000).toString(),
+    address: json.address,
+    secret: json.secret,
+    sequence: info?.Sequence || 1,
+    hooks: [],
+    isLoading: false,
+    version: '2'
+  })
+  if (showToast) {
+    toast.success('New account created', { id: toastId })
   }
 }
 
-// fetch initial faucets
-;(async function fetchFaucets() {
-  if (typeof window !== 'undefined') {
-    if (state.accounts.length === 0) {
-      await addFaucetAccount()
-      // setTimeout(() => {
-      //   addFaucetAccount();
-      // }, 10000);
+  // fetch initial faucets
+  ; (async function fetchFaucets() {
+    if (typeof window !== 'undefined') {
+      if (state.accounts.length === 0) {
+        await addFaucetAccount()
+        // setTimeout(() => {
+        //   addFaucetAccount();
+        // }, 10000);
+      }
     }
-  }
-})()
+  })()
 
 export const addFunds = async (address: string) => {
   const toastId = toast.loading('Requesting funds')

From 54a89c969e9ab684c6ad5a77fbc1f8b5c4410e72 Mon Sep 17 00:00:00 2001
From: muzam1l <muzamilsofi@outlook.com>
Date: Tue, 14 Mar 2023 15:38:09 +0530
Subject: [PATCH 11/31] Fix account sequence reset.

---
 components/Sequence.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Sequence.tsx b/components/Sequence.tsx
index 0d0b189..b407e7b 100644
--- a/components/Sequence.tsx
+++ b/components/Sequence.tsx
@@ -38,7 +38,7 @@ const AccountSequence: FC<AccountSequenceProps> = ({ address }) => {
     <Flex row align="center" fluid>
       <Input
         placeholder="Account sequence"
-        value={account?.sequence}
+        value={account?.sequence || ""}
         disabled={!account}
         type="number"
         readOnly={true}

From 52e4f219f7839d28cb165459595ba18e00e0e0a7 Mon Sep 17 00:00:00 2001
From: muzam1l <muzamilsofi@outlook.com>
Date: Fri, 17 Mar 2023 16:49:00 +0530
Subject: [PATCH 12/31] Transaction amount UI.

---
 components/Transaction/ui.tsx | 127 ++++++++++++++++++++++++++++++++--
 content/transactions.json     |  16 ++---
 state/transactions.ts         |  73 +++++++++++--------
 utils/helpers.ts              |  14 ++++
 utils/schema.ts               |  15 ++--
 5 files changed, 196 insertions(+), 49 deletions(-)

diff --git a/components/Transaction/ui.tsx b/components/Transaction/ui.tsx
index 48773fd..71eb44e 100644
--- a/components/Transaction/ui.tsx
+++ b/components/Transaction/ui.tsx
@@ -15,11 +15,12 @@ import {
 import { useSnapshot } from 'valtio'
 import state from '../../state'
 import { streamState } from '../DebugStream'
-import { Button } from '..'
+import { Box, Button } from '..'
 import Textarea from '../Textarea'
 import { getFlags } from '../../state/constants/flags'
 import { Plus, Trash } from 'phosphor-react'
 import AccountSequence from '../Sequence'
+import { typeIs } from '../../utils/helpers'
 
 interface UIProps {
   setState: (pTx?: Partial<TransactionState> | undefined) => TransactionState | undefined
@@ -87,6 +88,22 @@ export const TxUI: FC<UIProps> = ({
     [setState, txFields]
   )
 
+  const setRawField = useCallback(
+    (field: keyof TxFields, type: string, value: any) => {
+      // TODO $type should be a narrowed type
+      setState({
+        txFields: {
+          ...txFields,
+          [field]: {
+            $type: type,
+            $value: value
+          }
+        }
+      })
+    },
+    [setState, txFields]
+  )
+
   const handleEstimateFee = useCallback(
     async (state?: TransactionState, silent?: boolean) => {
       setFeeLoading(true)
@@ -134,6 +151,16 @@ export const TxUI: FC<UIProps> = ({
   }
 
   const otherFields = Object.keys(txFields).filter(k => !richFields.includes(k)) as [keyof TxFields]
+  const amountOptions = [
+    { label: 'XRP', value: 'xrp' },
+    { label: 'Token', value: 'token' }
+  ] as const
+
+  const defaultTokenAmount = {
+    value: '0',
+    currency: '',
+    issuer: ''
+  }
   return (
     <Container
       css={{
@@ -198,23 +225,111 @@ export const TxUI: FC<UIProps> = ({
           let _value = txFields[field]
 
           let value: string | undefined
-          if (typeof _value === 'object') {
-            if (_value.$type === 'json' && typeof _value.$value === 'object') {
+          if (typeIs(_value, 'object')) {
+            if (_value.$type === 'json' && typeIs(_value.$value, ['object', 'array'])) {
               value = JSON.stringify(_value.$value, null, 2)
             } else {
-              value = _value.$value.toString()
+              value = _value.$value?.toString()
             }
           } else {
             value = _value?.toString()
           }
 
-          const isXrp = typeof _value === 'object' && _value.$type === 'xrp'
+          const isXrpAmount = typeIs(_value, 'object') && _value.$type === 'amount.xrp'
+          const isTokenAmount = typeIs(_value, 'object') && _value.$type === 'amount.token'
           const isJson = typeof _value === 'object' && _value.$type === 'json'
           const isFee = field === 'Fee'
           let rows = isJson ? (value?.match(/\n/gm)?.length || 0) + 1 : undefined
           if (rows && rows > 5) rows = 5
+          let tokenAmount = defaultTokenAmount
+          if (isTokenAmount && typeIs(_value, 'object') && typeIs(_value.$value, 'object')) {
+            tokenAmount = {
+              value: _value.$value.value,
+              currency: _value.$value.currency,
+              issuer: _value.$value.issuer
+            }
+          }
+
+          if (isXrpAmount || isTokenAmount) {
+            return (
+              <TxField key={field} label={field}>
+                <Flex fluid css={{ alignItems: 'center' }}>
+                  {isTokenAmount ? (
+                    <Flex fluid row align="center" justify="space-between">
+                      <Input
+                        type="text"
+                        placeholder="Issuer"
+                        value={tokenAmount.issuer}
+                        onChange={e =>
+                          setRawField(field, 'amount.token', {
+                            ...tokenAmount,
+                            issuer: e.target.value
+                          })
+                        }
+                      />
+                      <Input
+                        type="text"
+                        value={tokenAmount.currency}
+                        placeholder="Currency"
+                        onChange={e => {
+                          setRawField(field, 'amount.token', {
+                            ...tokenAmount,
+                            currency: e.target.value
+                          })
+                        }}
+                      />
+                      <Input
+                        type="text"
+                        value={tokenAmount.value}
+                        placeholder="Value"
+                        onChange={e => {
+                          setRawField(field, 'amount.token', {
+                            ...tokenAmount,
+                            value: e.target.value
+                          })
+                        }}
+                      />
+                    </Flex>
+                  ) : (
+                    <Input
+                      css={{ flex: 'inherit' }}
+                      type="text"
+                      value={value}
+                      onChange={e => handleSetField(field, e.target.value)}
+                      onKeyPress={e => {
+                        if (e.key === '.' || e.key === ',') {
+                          e.preventDefault()
+                        }
+                      }}
+                    />
+                  )}
+                  <Box
+                    css={{
+                      ml: '$1',
+                      width: '200px'
+                    }}
+                  >
+                    <Select
+                      instanceId="currency"
+                      placeholder="Select currency"
+                      options={amountOptions}
+                      value={isXrpAmount ? amountOptions['0'] : amountOptions['1']}
+                      onChange={(e: any) => {
+                        const opt = e as typeof amountOptions[number]
+                        if (opt.value === 'xrp') {
+                          setRawField(field, 'amount.xrp', '0')
+                        } else {
+                          setRawField(field, 'amount.token', defaultTokenAmount)
+                        }
+                      }}
+                    />
+                  </Box>
+                </Flex>
+              </TxField>
+            )
+          }
           return (
-            <TxField key={field} label={field + (isXrp ? ' (XRP)' : '')}>
+            <TxField key={field} label={field}>
               {isJson ? (
                 <Textarea
                   rows={rows}
diff --git a/content/transactions.json b/content/transactions.json
index 230c4e4..433ace9 100644
--- a/content/transactions.json
+++ b/content/transactions.json
@@ -28,7 +28,7 @@
     "TransactionType": "CheckCash",
     "Amount": {
       "$value": "100",
-      "$type": "xrp"
+      "$type": "amount.xrp"
     },
     "CheckID": "838766BA2B995C00744175F69A1B11E32C3DBC40E64801A4056FCBD657F57334",
     "Fee": "12"
@@ -63,7 +63,7 @@
     "TransactionType": "EscrowCreate",
     "Amount": {
       "$value": "100",
-      "$type": "xrp"
+      "$type": "amount.xrp"
     },
     "Destination": "rsA2LpzuawewSBQXkiju3YQTMzW13pAAdW",
     "CancelAfter": 533257958,
@@ -120,7 +120,7 @@
     "NFTokenID": "000100001E962F495F07A990F4ED55ACCFEEF365DBAA76B6A048C0A200000007",
     "Amount": {
       "$value": "100",
-      "$type": "xrp"
+      "$type": "amount.xrp"
     },
     "Flags": "1",
     "Destination": "",
@@ -145,7 +145,7 @@
     "TakerGets": "6000000",
     "Amount": {
       "$value": "100",
-      "$type": "xrp"
+      "$type": "amount.xrp"
     }
   },
   {
@@ -154,7 +154,7 @@
     "Destination": "ra5nK24KXen9AHvsdFTKHSANinZseWnPcX",
     "Amount": {
       "$value": "100",
-      "$type": "xrp"
+      "$type": "amount.xrp"
     },
     "Fee": "12",
     "Flags": "2147483648",
@@ -165,7 +165,7 @@
     "TransactionType": "PaymentChannelCreate",
     "Amount": {
       "$value": "100",
-      "$type": "xrp"
+      "$type": "amount.xrp"
     },
     "Destination": "rsA2LpzuawewSBQXkiju3YQTMzW13pAAdW",
     "SettleDelay": 86400,
@@ -181,7 +181,7 @@
     "Channel": "C1AE6DDDEEC05CF2978C0BAD6FE302948E9533691DC749DCDD3B9E5992CA6198",
     "Amount": {
       "$value": "200",
-      "$type": "xrp"
+      "$type": "amount.xrp"
     },
     "Expiration": 543171558,
     "Fee": "10"
@@ -237,7 +237,7 @@
     "Flags": "262144",
     "LastLedgerSequence": 8007750,
     "LimitAmount": {
-      "$type": "json",
+      "$type": "amount.token",
       "$value": {
         "currency": "USD",
         "issuer": "rsP3mgGb2tcYUrxiLFiHJiQXhsziegtwBc",
diff --git a/state/transactions.ts b/state/transactions.ts
index 57c3afe..ad44ea2 100644
--- a/state/transactions.ts
+++ b/state/transactions.ts
@@ -6,6 +6,7 @@ import { showAlert } from '../state/actions/showAlert'
 import { parseJSON } from '../utils/json'
 import { extractFlags, getFlags } from './constants/flags'
 import { fromHex } from '../utils/setHook'
+import { typeIs } from '../utils/helpers'
 
 export type SelectOption = {
   value: string
@@ -136,31 +137,43 @@ export const prepareTransaction = (data: any) => {
 
   Object.keys(options).forEach(field => {
     let _value = options[field]
-    // convert xrp
-    if (_value && typeof _value === 'object' && _value.$type === 'xrp') {
-      if (+_value.$value) {
+    if (!typeIs(_value, 'object')) return
+    // amount.xrp
+    if (_value.$type === 'amount.xrp') {
+      if (_value.$value) {
         options[field] = (+_value.$value * 1000000 + '') as any
       } else {
-        options[field] = undefined // 👇 💀
-      }
-    }
-    // handle type: `json`
-    if (_value && typeof _value === 'object' && _value.$type === 'json') {
-      if (typeof _value.$value === 'object') {
-        options[field] = _value.$value
-      } else {
-        try {
-          options[field] = JSON.parse(_value.$value)
-        } catch (error) {
-          const message = `Input error for json field '${field}': ${error instanceof Error ? error.message : ''
-            }`
-          console.error(message)
-          options[field] = _value.$value
-        }
+        options[field] = undefined
       }
     }
 
-    // delete unnecessary fields
+    // amount.token
+    if (_value.$type === 'amount.token') {
+      if (typeIs(_value.$value, 'string')) {
+        options[field] = parseJSON(_value.$value)
+      } else if (typeIs(_value.$value, 'object')) {
+        options[field] = _value.$value
+      } else {
+        options[field] = undefined
+      }
+    }
+
+    // json
+    if (_value.$type === 'json') {
+      const val = _value.$value;
+      let res: any = val;
+      if (typeIs(val, ["object", "array"])) {
+        options[field] = res
+      } else if (typeIs(val, "string") && (res = parseJSON(val))) {
+        options[field] = res;
+      } else {
+        options[field] = res;
+      }
+    }
+  })
+
+  // delete unnecessary fields
+  Object.keys(options).forEach(field => {
     if (!options[field]) {
       delete options[field]
     }
@@ -254,16 +267,22 @@ export const prepareState = (value: string, transactionType?: string) => {
   Object.keys(rest).forEach(field => {
     const value = rest[field]
     const schemaVal = schema[field as keyof TxFields]
-    const isXrp =
-      typeof value !== 'object' &&
-      schemaVal &&
-      typeof schemaVal === 'object' &&
-      schemaVal.$type === 'xrp'
-    if (isXrp) {
+
+    const isAmount = schemaVal &&
+      typeIs(schemaVal, "object") &&
+      schemaVal.$type.startsWith('amount.');
+
+    if (isAmount && ["number", "string"].includes(typeof value)) {
       rest[field] = {
-        $type: 'xrp',
+        $type: 'amount.xrp', // Maybe have $type map or something
         $value: +value / 1000000 // ! maybe use bigint?
       }
+    }
+    else if (isAmount && typeof value === 'object') {
+      rest[field] = {
+        $type: 'amount.token',
+        $value: value
+      }
     } else if (typeof value === 'object') {
       rest[field] = {
         $type: 'json',
diff --git a/utils/helpers.ts b/utils/helpers.ts
index f711beb..d9d75ab 100644
--- a/utils/helpers.ts
+++ b/utils/helpers.ts
@@ -19,3 +19,17 @@ export const getFileExtention = (filename?: string): string | undefined => {
   const ext = (filename.includes('.') && filename.split('.').pop()) || undefined
   return ext
 }
+
+type Type = "array" | "undefined" | "object" | "string" | "number" | "bigint" | "boolean" | "symbol" | "function"
+type obj = Record<string | number | symbol, unknown>
+type arr = unknown[]
+
+export const typeIs = <T extends Type>(arg: any, t: T | T[]): arg is unknown & (T extends "array" ? arr : T extends "undefined" ? undefined | null : T extends "object" ? obj : T extends "string" ? string : T extends "number" ? number : T extends "bigint" ? bigint : T extends "boolean" ? boolean : T extends "symbol" ? symbol : T extends "function" ? Function : never) => {
+  const types = Array.isArray(t) ? t : [t]
+  return types.includes(typeOf(arg) as T);
+}
+
+export const typeOf = (arg: any): Type => {
+  const type = arg instanceof Array ? 'array' : arg === null ? 'undefined' : typeof arg
+  return type;
+}
\ No newline at end of file
diff --git a/utils/schema.ts b/utils/schema.ts
index a24274e..cdbfaf8 100644
--- a/utils/schema.ts
+++ b/utils/schema.ts
@@ -1,9 +1,8 @@
+import { typeIs, typeOf } from './helpers'
+
 export const extractSchemaProps = <O extends object>(obj: O) =>
   Object.entries(obj).reduce((prev, [key, val]) => {
-    const typeOf = <T>(arg: T) =>
-      arg instanceof Array ? 'array' : arg === null ? 'undefined' : typeof arg
-
-    const value = typeOf(val) === 'object' && '$type' in val && '$value' in val ? val?.$value : val
+    const value = typeIs(val, "object") && '$type' in val && '$value' in val ? val?.$value : val
     const type = typeOf(value)
 
     let schema: any = {
@@ -12,19 +11,19 @@ export const extractSchemaProps = <O extends object>(obj: O) =>
       default: value
     }
 
-    if (typeOf(value) === 'array') {
+    if (typeIs(value, "array")) {
       const item = value[0] // TODO merge other item schema's into one
-      if (typeOf(item) !== 'object') {
+      if (typeIs(item, "object")) {
         schema.items = {
           type: 'object',
           properties: extractSchemaProps(item),
           default: item
         }
       }
-      // TODO support primitive-value arrays
+      // TODO primitive-value arrays
     }
 
-    if (typeOf(value) === 'object') {
+    if (typeIs(value, "object")) {
       schema.properties = extractSchemaProps(value)
     }
     return {

From 21a69ac8eafdf8bcaa2b818728b8f091210ff62f Mon Sep 17 00:00:00 2001
From: muzam1l <muzamilsofi@outlook.com>
Date: Fri, 17 Mar 2023 16:59:12 +0530
Subject: [PATCH 13/31] minor type fix.

---
 state/transactions.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/state/transactions.ts b/state/transactions.ts
index ad44ea2..411e6c3 100644
--- a/state/transactions.ts
+++ b/state/transactions.ts
@@ -141,7 +141,7 @@ export const prepareTransaction = (data: any) => {
     // amount.xrp
     if (_value.$type === 'amount.xrp') {
       if (_value.$value) {
-        options[field] = (+_value.$value * 1000000 + '') as any
+        options[field] = (+(_value as any).$value * 1000000 + '')
       } else {
         options[field] = undefined
       }

From e4936c03ef5d97d3d46aabc92b9a4dae90b6bb07 Mon Sep 17 00:00:00 2001
From: muzam1l <muzamilsofi@outlook.com>
Date: Fri, 17 Mar 2023 17:17:29 +0530
Subject: [PATCH 14/31] Css changes.

---
 components/Select.tsx         |  5 +++--
 components/Transaction/ui.tsx | 10 +++++-----
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/components/Select.tsx b/components/Select.tsx
index 3822e18..0b55e5b 100644
--- a/components/Select.tsx
+++ b/components/Select.tsx
@@ -39,7 +39,7 @@ const Select = forwardRef<any, Props>((props, ref) => {
           return {
             ...provided,
             position: 'relative',
-            width: '100%'
+            width: '100%',
           }
         },
         singleValue: provided => ({
@@ -108,9 +108,10 @@ const Select = forwardRef<any, Props>((props, ref) => {
         dropdownIndicator: (provided, state) => {
           return {
             ...provided,
+            padding: 6,
             color: state.isFocused ? colors.border : colors.secondary,
             ':hover': {
-              color: colors.border
+              color: colors.border,
             }
           }
         }
diff --git a/components/Transaction/ui.tsx b/components/Transaction/ui.tsx
index 71eb44e..a042ae4 100644
--- a/components/Transaction/ui.tsx
+++ b/components/Transaction/ui.tsx
@@ -268,6 +268,7 @@ export const TxUI: FC<UIProps> = ({
                         }
                       />
                       <Input
+                        css={{ mx: '$1' }}
                         type="text"
                         value={tokenAmount.currency}
                         placeholder="Currency"
@@ -305,13 +306,12 @@ export const TxUI: FC<UIProps> = ({
                   )}
                   <Box
                     css={{
-                      ml: '$1',
-                      width: '200px'
+                      ml: '$2',
+                      width: '150px'
                     }}
                   >
                     <Select
-                      instanceId="currency"
-                      placeholder="Select currency"
+                      instanceId="currency-type"
                       options={amountOptions}
                       value={isXrpAmount ? amountOptions['0'] : amountOptions['1']}
                       onChange={(e: any) => {
@@ -553,7 +553,7 @@ export const TxField: FC<{ label: string; children: ReactNode; multiLine?: boole
         justifyContent: 'flex-end',
         alignItems: multiLine ? 'flex-start' : 'center',
         position: 'relative',
-        mb: '$3',
+        mb: '$2',
         mt: '1px',
         pr: '1px'
       }}

From e08b07cbebf62b29eaaa7186fd554328c849a030 Mon Sep 17 00:00:00 2001
From: muzam1l <muzamilsofi@outlook.com>
Date: Fri, 17 Mar 2023 18:03:37 +0530
Subject: [PATCH 15/31] Update tx OfferCreate.

---
 content/transactions.json | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/content/transactions.json b/content/transactions.json
index 433ace9..8d4f369 100644
--- a/content/transactions.json
+++ b/content/transactions.json
@@ -142,10 +142,17 @@
     "Flags": "0",
     "LastLedgerSequence": 7108682,
     "Sequence": 8,
-    "TakerGets": "6000000",
-    "Amount": {
-      "$value": "100",
-      "$type": "amount.xrp"
+    "TakerGets": {
+      "$type": "amount.xrp",
+      "$value": "6000000"
+    },
+    "TakerPays": {
+      "$type": "amount.token",
+      "$value": {
+        "currency": "GKO",
+        "issuer": "ruazs5h1qEsqpke88pcqnaseXdm6od2xc",
+        "value": "2"
+      }
     }
   },
   {

From e27a71d713af84331c9ec6b01bc8604c1134218d Mon Sep 17 00:00:00 2001
From: muzam1l <muzamilsofi@outlook.com>
Date: Fri, 17 Mar 2023 18:57:03 +0530
Subject: [PATCH 16/31] Estimate fee correct error message and amount input
 type.

---
 components/Transaction/ui.tsx | 9 ++-------
 utils/estimateFee.ts          | 3 ++-
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/components/Transaction/ui.tsx b/components/Transaction/ui.tsx
index a042ae4..eec1d62 100644
--- a/components/Transaction/ui.tsx
+++ b/components/Transaction/ui.tsx
@@ -280,7 +280,7 @@ export const TxUI: FC<UIProps> = ({
                         }}
                       />
                       <Input
-                        type="text"
+                        type="number"
                         value={tokenAmount.value}
                         placeholder="Value"
                         onChange={e => {
@@ -294,14 +294,9 @@ export const TxUI: FC<UIProps> = ({
                   ) : (
                     <Input
                       css={{ flex: 'inherit' }}
-                      type="text"
+                      type="number"
                       value={value}
                       onChange={e => handleSetField(field, e.target.value)}
-                      onKeyPress={e => {
-                        if (e.key === '.' || e.key === ',') {
-                          e.preventDefault()
-                        }
-                      }}
                     />
                   )}
                   <Box
diff --git a/utils/estimateFee.ts b/utils/estimateFee.ts
index b4de7d1..4ba96d4 100644
--- a/utils/estimateFee.ts
+++ b/utils/estimateFee.ts
@@ -31,7 +31,8 @@ const estimateFee = async (
   } catch (err) {
     if (!opts.silent) {
       console.error(err)
-      toast.error('Cannot estimate fee.') // ? Some better msg
+      const msg = err instanceof Error ? err.message : 'Error estimating fee!';
+      toast.error(msg);
     }
     return null
   }

From 5d8d142bc4692310c5ed05da72eff36a8ada0f5b Mon Sep 17 00:00:00 2001
From: muzam1l <muzamilsofi@outlook.com>
Date: Fri, 17 Mar 2023 19:01:32 +0530
Subject: [PATCH 17/31] Catch all estimate fee errors.

---
 utils/estimateFee.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/utils/estimateFee.ts b/utils/estimateFee.ts
index 4ba96d4..0f3bde8 100644
--- a/utils/estimateFee.ts
+++ b/utils/estimateFee.ts
@@ -24,6 +24,9 @@ const estimateFee = async (
     const { signedTransaction } = sign(copyTx, keypair)
 
     const res = await xrplSend({ command: 'fee', tx_blob: signedTransaction })
+    if (res.error) {
+      throw new Error(`[${res.error}] ${res.error_exception}`);
+    }
     if (res && res.drops) {
       return res.drops
     }

From c4af3df017a67063360d1afeac09435b64bed887 Mon Sep 17 00:00:00 2001
From: muzam1l <muzamilsofi@outlook.com>
Date: Fri, 17 Mar 2023 20:10:57 +0530
Subject: [PATCH 18/31] Add DeliverMin field to tx CheckCash.

---
 content/transactions.json | 4 ++++
 utils/estimateFee.ts      | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/content/transactions.json b/content/transactions.json
index 8d4f369..930ea34 100644
--- a/content/transactions.json
+++ b/content/transactions.json
@@ -30,6 +30,10 @@
       "$value": "100",
       "$type": "amount.xrp"
     },
+    "DeliverMin": {
+      "$value": "",
+      "$type": "amount.xrp"
+    },
     "CheckID": "838766BA2B995C00744175F69A1B11E32C3DBC40E64801A4056FCBD657F57334",
     "Fee": "12"
   },
diff --git a/utils/estimateFee.ts b/utils/estimateFee.ts
index 0f3bde8..e8e90f1 100644
--- a/utils/estimateFee.ts
+++ b/utils/estimateFee.ts
@@ -25,7 +25,7 @@ const estimateFee = async (
 
     const res = await xrplSend({ command: 'fee', tx_blob: signedTransaction })
     if (res.error) {
-      throw new Error(`[${res.error}] ${res.error_exception}`);
+      throw new Error(`[${res.error}] ${res.error_exception}.`);
     }
     if (res && res.drops) {
       return res.drops

From 7aafca21df61e3e0b7415a326d9ec1a2c5f6e9f1 Mon Sep 17 00:00:00 2001
From: muzam1l <muzamilsofi@outlook.com>
Date: Thu, 23 Mar 2023 15:49:17 +0530
Subject: [PATCH 19/31] Remove Destination as special field.

---
 components/Transaction/index.tsx | 14 -----------
 components/Transaction/ui.tsx    | 20 ----------------
 content/transactions.json        | 40 +++++++++++++++++++++++++-------
 state/transactions.ts            | 23 ++----------------
 4 files changed, 34 insertions(+), 63 deletions(-)

diff --git a/components/Transaction/index.tsx b/components/Transaction/index.tsx
index da10c1e..1d48349 100644
--- a/components/Transaction/index.tsx
+++ b/components/Transaction/index.tsx
@@ -52,7 +52,6 @@ const Transaction: FC<TransactionProps> = ({ header, state: txState, ...props })
       } = 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<
@@ -75,7 +74,6 @@ const Transaction: FC<TransactionProps> = ({ header, state: txState, ...props })
         HookParameters,
         Flags,
         TransactionType,
-        Destination,
         Account,
         Memos
       })
@@ -129,11 +127,6 @@ const Transaction: FC<TransactionProps> = ({ header, state: txState, ...props })
       }
       const options = prepareOptions(st)
 
-      const fields = getTxFields(options.TransactionType)
-      if (fields.Destination && !options.Destination) {
-        throw Error('Destination account is required!')
-      }
-
       await sendTransaction(account, options, { logPrefix })
     } catch (error) {
       console.error(error)
@@ -167,13 +160,6 @@ const Transaction: FC<TransactionProps> = ({ header, state: txState, ...props })
         selectedTransaction: transactionType
       }
 
-      if (fields.Destination !== undefined) {
-        nwState.selectedDestAccount = null
-        fields.Destination = ''
-      } else {
-        fields.Destination = undefined
-      }
-
       if (transactionType?.value && transactionFlags[transactionType?.value] && fields.Flags) {
         nwState.selectedFlags = extractFlags(transactionType.value, fields.Flags)
         fields.Flags = undefined
diff --git a/components/Transaction/ui.tsx b/components/Transaction/ui.tsx
index eec1d62..9cddf97 100644
--- a/components/Transaction/ui.tsx
+++ b/components/Transaction/ui.tsx
@@ -136,15 +136,7 @@ export const TxUI: FC<UIProps> = ({
     }
   }, [handleChangeTxType, selectedTransaction?.value])
 
-  const fields = useMemo(
-    () => getTxFields(selectedTransaction?.value),
-    [selectedTransaction?.value]
-  )
-
   const richFields = ['TransactionType', 'Account', 'HookParameters', 'Memos']
-  if (fields.Destination !== undefined) {
-    richFields.push('Destination')
-  }
 
   if (flagsOptions.length) {
     richFields.push('Flags')
@@ -192,18 +184,6 @@ export const TxUI: FC<UIProps> = ({
         <TxField label="Sequence">
           <AccountSequence address={selectedAccount?.value} />
         </TxField>
-        {richFields.includes('Destination') && (
-          <TxField label="Destination account">
-            <Select
-              instanceId="to-account"
-              placeholder="Select the destination account"
-              options={destAccountOptions}
-              value={selectedDestAccount}
-              isClearable
-              onChange={(acc: any) => setState({ selectedDestAccount: acc })}
-            />
-          </TxField>
-        )}
         {richFields.includes('Flags') && (
           <TxField label="Flags">
             <Select
diff --git a/content/transactions.json b/content/transactions.json
index 930ea34..e1982ae 100644
--- a/content/transactions.json
+++ b/content/transactions.json
@@ -2,7 +2,10 @@
   {
     "TransactionType": "AccountDelete",
     "Account": "rWYkbWkCeg8dP6rXALnjgZSjjLyih5NXm",
-    "Destination": "rPT1Sjq2YGrBMTttX4GZHjKu9dyfzbpAYe",
+    "Destination": {
+      "$type": "account",
+      "$value": "rPT1Sjq2YGrBMTttX4GZHjKu9dyfzbpAYe"
+    },
     "DestinationTag": 13,
     "Fee": "2000000",
     "Sequence": 2470665,
@@ -40,7 +43,10 @@
   {
     "TransactionType": "CheckCreate",
     "Account": "rUn84CUYbNjRoTQ6mSW7BVJPSVJNLb1QLo",
-    "Destination": "rfkE1aSy9G8Upk4JssnwBxhEv5p4mn2KTy",
+    "Destination": {
+      "$type": "account",
+      "$value": "rfkE1aSy9G8Upk4JssnwBxhEv5p4mn2KTy"
+    },
     "SendMax": "100000000",
     "Expiration": 570113521,
     "InvoiceID": "6F1DFD1D0FE8A32E40E1F2C05CF1C15545BAB56B617F9C6C2D63A6B704BEF59B",
@@ -58,7 +64,10 @@
   {
     "Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
     "TransactionType": "EscrowCancel",
-    "Owner": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
+    "Owner": {
+      "$type": "account",
+      "$value": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn"
+    },
     "OfferSequence": 7,
     "Fee": "10"
   },
@@ -69,7 +78,10 @@
       "$value": "100",
       "$type": "amount.xrp"
     },
-    "Destination": "rsA2LpzuawewSBQXkiju3YQTMzW13pAAdW",
+    "Destination": {
+      "$type": "account",
+      "$value": "rsA2LpzuawewSBQXkiju3YQTMzW13pAAdW"
+    },
     "CancelAfter": 533257958,
     "FinishAfter": 533171558,
     "Condition": "A0258020E3B0C44298FC1C149AFBF4C8996FB92427AE41E4649B934CA495991B7852B855810100",
@@ -80,7 +92,10 @@
   {
     "Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
     "TransactionType": "EscrowFinish",
-    "Owner": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
+    "Owner": {
+      "$type": "account",
+      "$value": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn"
+    },
     "OfferSequence": 7,
     "Condition": "A0258020E3B0C44298FC1C149AFBF4C8996FB92427AE41E4649B934CA495991B7852B855810100",
     "Fulfillment": "A0028000",
@@ -127,7 +142,10 @@
       "$type": "amount.xrp"
     },
     "Flags": "1",
-    "Destination": "",
+    "Destination": {
+      "$type": "account",
+      "$value": ""
+    },
     "Fee": "10"
   },
   {
@@ -162,7 +180,10 @@
   {
     "TransactionType": "Payment",
     "Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
-    "Destination": "ra5nK24KXen9AHvsdFTKHSANinZseWnPcX",
+    "Destination": {
+      "$type": "account",
+      "$value": "ra5nK24KXen9AHvsdFTKHSANinZseWnPcX"
+    },
     "Amount": {
       "$value": "100",
       "$type": "amount.xrp"
@@ -178,7 +199,10 @@
       "$value": "100",
       "$type": "amount.xrp"
     },
-    "Destination": "rsA2LpzuawewSBQXkiju3YQTMzW13pAAdW",
+    "Destination": {
+      "$type": "account",
+      "$value": "rsA2LpzuawewSBQXkiju3YQTMzW13pAAdW"
+    },
     "SettleDelay": 86400,
     "PublicKey": "32D2471DB72B27E3310F355BB33E339BF26F8392D5A93D3BC0FC3B566612DA0F0A",
     "CancelAfter": 533171558,
diff --git a/state/transactions.ts b/state/transactions.ts
index 411e6c3..10f0970 100644
--- a/state/transactions.ts
+++ b/state/transactions.ts
@@ -28,7 +28,6 @@ export type Memos = {
 export interface TransactionState {
   selectedTransaction: SelectOption | null
   selectedAccount: SelectOption | null
-  selectedDestAccount: SelectOption | null
   selectedFlags: SelectOption[] | null
   hookParameters: HookParameters
   memos: Memos
@@ -192,7 +191,7 @@ export const prepareState = (value: string, transactionType?: string) => {
     return
   }
 
-  const { Account, TransactionType, Destination, HookParameters, Memos, ...rest } = options
+  const { Account, TransactionType, HookParameters, Memos, ...rest } = options
   let tx: Partial<TransactionState> = {}
   const schema = getTxFields(transactionType)
 
@@ -238,24 +237,6 @@ export const prepareState = (value: string, transactionType?: string) => {
     }, {})
   }
 
-  if (schema.Destination !== undefined) {
-    const dest = state.accounts.find(acc => acc.address === Destination)
-    if (dest) {
-      tx.selectedDestAccount = {
-        label: dest.name,
-        value: dest.address
-      }
-    } else if (Destination) {
-      tx.selectedDestAccount = {
-        label: Destination,
-        value: Destination
-      }
-    } else {
-      tx.selectedDestAccount = null
-    }
-  } else if (Destination) {
-    rest.Destination = Destination
-  }
 
   if (getFlags(TransactionType) && rest.Flags) {
     const flags = extractFlags(TransactionType, rest.Flags)
@@ -274,7 +255,7 @@ export const prepareState = (value: string, transactionType?: string) => {
 
     if (isAmount && ["number", "string"].includes(typeof value)) {
       rest[field] = {
-        $type: 'amount.xrp', // Maybe have $type map or something
+        $type: 'amount.xrp', // TODO narrow typed $type.
         $value: +value / 1000000 // ! maybe use bigint?
       }
     }

From 62d521b2cc77b3697123741beb6db53a2a9f32b4 Mon Sep 17 00:00:00 2001
From: muzam1l <muzamilsofi@outlook.com>
Date: Thu, 23 Mar 2023 15:51:36 +0530
Subject: [PATCH 20/31] Add owner field to NFTokenCreateOffer.

---
 content/transactions.json | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/content/transactions.json b/content/transactions.json
index e1982ae..91d4de1 100644
--- a/content/transactions.json
+++ b/content/transactions.json
@@ -146,6 +146,10 @@
       "$type": "account",
       "$value": ""
     },
+    "Owner": {
+      "$type": "account",
+      "$value": ""
+    },
     "Fee": "10"
   },
   {

From 025eff6cf2e28c3ca10ec02c825910167ca4f90d Mon Sep 17 00:00:00 2001
From: muzam1l <muzamilsofi@outlook.com>
Date: Thu, 23 Mar 2023 16:12:35 +0530
Subject: [PATCH 21/31] Add Select UI for account.

---
 components/Transaction/ui.tsx     | 36 +++++++++++++++++--------------
 state/actions/sendTransaction.tsx |  1 -
 state/transactions.ts             | 22 +++++++++++++------
 3 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/components/Transaction/ui.tsx b/components/Transaction/ui.tsx
index 9cddf97..aaac1f6 100644
--- a/components/Transaction/ui.tsx
+++ b/components/Transaction/ui.tsx
@@ -38,28 +38,14 @@ export const TxUI: FC<UIProps> = ({
   switchToJson
 }) => {
   const { accounts } = useSnapshot(state)
-  const {
-    selectedAccount,
-    selectedDestAccount,
-    selectedTransaction,
-    txFields,
-    selectedFlags,
-    hookParameters,
-    memos
-  } = txState
+  const { selectedAccount, selectedTransaction, txFields, selectedFlags, hookParameters, memos } =
+    txState
 
   const accountOptions: SelectOption[] = accounts.map(acc => ({
     label: acc.name,
     value: acc.address
   }))
 
-  const destAccountOptions: SelectOption[] = accounts
-    .map(acc => ({
-      label: acc.name,
-      value: acc.address
-    }))
-    .filter(acc => acc.value !== selectedAccount?.value)
-
   const flagsOptions: SelectOption[] = Object.entries(
     getFlags(selectedTransaction?.value) || {}
   ).map(([label, value]) => ({
@@ -215,6 +201,7 @@ export const TxUI: FC<UIProps> = ({
             value = _value?.toString()
           }
 
+          const isAccount = typeIs(_value, 'object') && _value.$type === 'account'
           const isXrpAmount = typeIs(_value, 'object') && _value.$type === 'amount.xrp'
           const isTokenAmount = typeIs(_value, 'object') && _value.$type === 'amount.token'
           const isJson = typeof _value === 'object' && _value.$type === 'json'
@@ -303,6 +290,23 @@ export const TxUI: FC<UIProps> = ({
               </TxField>
             )
           }
+          if (isAccount) {
+            const label = accountOptions.find(a => a.value === value)?.label || value
+            return (
+              <TxField key={field} label={field}>
+                <Select
+                  instanceId={field}
+                  placeholder={`Select ${field} account`}
+                  options={accountOptions}
+                  value={{
+                    value,
+                    label
+                  }}
+                  onChange={(acc: any) => handleSetField(field, acc.value)}
+                />
+              </TxField>
+            )
+          }
           return (
             <TxField key={field} label={field}>
               {isJson ? (
diff --git a/state/actions/sendTransaction.tsx b/state/actions/sendTransaction.tsx
index 64a426c..f58741b 100644
--- a/state/actions/sendTransaction.tsx
+++ b/state/actions/sendTransaction.tsx
@@ -10,7 +10,6 @@ interface TransactionOptions {
   TransactionType: string
   Account?: string
   Fee?: string
-  Destination?: string
   [index: string]: any
 }
 interface OtherOptions {
diff --git a/state/transactions.ts b/state/transactions.ts
index 10f0970..4221a82 100644
--- a/state/transactions.ts
+++ b/state/transactions.ts
@@ -130,7 +130,6 @@ export const modifyTxState = (
   return tx.state
 }
 
-// state to tx options
 export const prepareTransaction = (data: any) => {
   let options = { ...data }
 
@@ -145,7 +144,6 @@ export const prepareTransaction = (data: any) => {
         options[field] = undefined
       }
     }
-
     // amount.token
     if (_value.$type === 'amount.token') {
       if (typeIs(_value.$value, 'string')) {
@@ -156,7 +154,10 @@ export const prepareTransaction = (data: any) => {
         options[field] = undefined
       }
     }
-
+    // account
+    if (_value.$type === 'account') {
+      options[field] = _value.$value?.toString();
+    }
     // json
     if (_value.$type === 'json') {
       const val = _value.$value;
@@ -181,7 +182,6 @@ export const prepareTransaction = (data: any) => {
   return options
 }
 
-// editor value to state
 export const prepareState = (value: string, transactionType?: string) => {
   const options = parseJSON(value)
   if (!options) {
@@ -252,19 +252,27 @@ export const prepareState = (value: string, transactionType?: string) => {
     const isAmount = schemaVal &&
       typeIs(schemaVal, "object") &&
       schemaVal.$type.startsWith('amount.');
+    const isAccount = schemaVal &&
+      typeIs(schemaVal, "object") &&
+      schemaVal.$type.startsWith("account");
 
     if (isAmount && ["number", "string"].includes(typeof value)) {
       rest[field] = {
         $type: 'amount.xrp', // TODO narrow typed $type.
         $value: +value / 1000000 // ! maybe use bigint?
       }
-    }
-    else if (isAmount && typeof value === 'object') {
+    } else if (isAmount && typeof value === 'object') {
       rest[field] = {
         $type: 'amount.token',
         $value: value
       }
-    } else if (typeof value === 'object') {
+    } else if (isAccount) {
+      rest[field] = {
+        $type: "account",
+        $value: value?.toString()
+      }
+    }
+    else if (typeof value === 'object') {
       rest[field] = {
         $type: 'json',
         $value: value

From 8a5b83d57f67373294687b24b295c94efc30f0d1 Mon Sep 17 00:00:00 2001
From: muzam1l <muzamilsofi@outlook.com>
Date: Thu, 23 Mar 2023 16:26:29 +0530
Subject: [PATCH 22/31] Fix: Don't remove fields in JSON mode if empty.

---
 components/Transaction/index.tsx |  7 ++++++-
 components/Transaction/ui.tsx    |  6 +++---
 state/transactions.ts            | 13 +++----------
 3 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/components/Transaction/index.tsx b/components/Transaction/index.tsx
index 1d48349..1d5038e 100644
--- a/components/Transaction/index.tsx
+++ b/components/Transaction/index.tsx
@@ -43,7 +43,6 @@ const Transaction: FC<TransactionProps> = ({ header, state: txState, ...props })
     (state: Partial<TransactionState> = txState) => {
       const {
         selectedTransaction,
-        selectedDestAccount,
         selectedAccount,
         txFields,
         selectedFlags,
@@ -126,6 +125,12 @@ const Transaction: FC<TransactionProps> = ({ header, state: txState, ...props })
         throw Error('Account must be selected from imported accounts!')
       }
       const options = prepareOptions(st)
+      // delete unnecessary fields
+      Object.keys(options).forEach(field => {
+        if (!options[field]) {
+          delete options[field]
+        }
+      })
 
       await sendTransaction(account, options, { logPrefix })
     } catch (error) {
diff --git a/components/Transaction/ui.tsx b/components/Transaction/ui.tsx
index aaac1f6..106512b 100644
--- a/components/Transaction/ui.tsx
+++ b/components/Transaction/ui.tsx
@@ -1,4 +1,4 @@
-import { FC, ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
+import { FC, ReactNode, useCallback, useEffect, useState } from 'react'
 import Container from '../Container'
 import Flex from '../Flex'
 import Input from '../Input'
@@ -9,7 +9,6 @@ import {
   TransactionState,
   transactionsOptions,
   TxFields,
-  getTxFields,
   defaultTransactionType
 } from '../../state/transactions'
 import { useSnapshot } from 'valtio'
@@ -295,6 +294,7 @@ export const TxUI: FC<UIProps> = ({
             return (
               <TxField key={field} label={field}>
                 <Select
+                  isClearable
                   instanceId={field}
                   placeholder={`Select ${field} account`}
                   options={accountOptions}
@@ -302,7 +302,7 @@ export const TxUI: FC<UIProps> = ({
                     value,
                     label
                   }}
-                  onChange={(acc: any) => handleSetField(field, acc.value)}
+                  onChange={(acc: any) => handleSetField(field, acc?.value)}
                 />
               </TxField>
             )
diff --git a/state/transactions.ts b/state/transactions.ts
index 4221a82..c8b8c9b 100644
--- a/state/transactions.ts
+++ b/state/transactions.ts
@@ -141,7 +141,7 @@ export const prepareTransaction = (data: any) => {
       if (_value.$value) {
         options[field] = (+(_value as any).$value * 1000000 + '')
       } else {
-        options[field] = undefined
+        options[field] = ""
       }
     }
     // amount.token
@@ -156,7 +156,7 @@ export const prepareTransaction = (data: any) => {
     }
     // account
     if (_value.$type === 'account') {
-      options[field] = _value.$value?.toString();
+      options[field] = _value.$value?.toString() || ""
     }
     // json
     if (_value.$type === 'json') {
@@ -172,13 +172,6 @@ export const prepareTransaction = (data: any) => {
     }
   })
 
-  // delete unnecessary fields
-  Object.keys(options).forEach(field => {
-    if (!options[field]) {
-      delete options[field]
-    }
-  })
-
   return options
 }
 
@@ -269,7 +262,7 @@ export const prepareState = (value: string, transactionType?: string) => {
     } else if (isAccount) {
       rest[field] = {
         $type: "account",
-        $value: value?.toString()
+        $value: value?.toString() || ""
       }
     }
     else if (typeof value === 'object') {

From da28e0a7d171615d71127fb5338b426f6e37deba Mon Sep 17 00:00:00 2001
From: muzam1l <muzamilsofi@outlook.com>
Date: Thu, 23 Mar 2023 16:45:24 +0530
Subject: [PATCH 23/31] Use "creatable  select" for accounts.

---
 components/Select.tsx         | 202 +++++++++++++++++++---------------
 components/Transaction/ui.tsx |   4 +-
 2 files changed, 117 insertions(+), 89 deletions(-)

diff --git a/components/Select.tsx b/components/Select.tsx
index 0b55e5b..989cf35 100644
--- a/components/Select.tsx
+++ b/components/Select.tsx
@@ -3,13 +3,11 @@ import { mauve, mauveDark, purple, purpleDark } from '@radix-ui/colors'
 import { useTheme } from 'next-themes'
 import { styled } from '../stitches.config'
 import dynamic from 'next/dynamic'
-import type { Props } from 'react-select'
+import type { Props, StylesConfig } from 'react-select'
 const SelectInput = dynamic(() => import('react-select'), { ssr: false })
+const CreatableSelectInput = dynamic(() => import('react-select/creatable'), { ssr: false })
 
-// eslint-disable-next-line react/display-name
-const Select = forwardRef<any, Props>((props, ref) => {
-  const { theme } = useTheme()
-  const isDark = theme === 'dark'
+const getColors = (isDark: boolean) => {
   const colors: any = {
     // primary: pink.pink9,
     active: isDark ? purpleDark.purple9 : purple.purple9,
@@ -30,92 +28,122 @@ const Select = forwardRef<any, Props>((props, ref) => {
   }
   colors.outline = colors.background
   colors.selected = colors.secondary
+  return colors
+}
+
+const getStyles = (isDark: boolean) => {
+  const colors = getColors(isDark)
+  const styles: StylesConfig = {
+    container: provided => {
+      return {
+        ...provided,
+        position: 'relative',
+        width: '100%'
+      }
+    },
+    singleValue: provided => ({
+      ...provided,
+      color: colors.mauve12
+    }),
+    menu: provided => ({
+      ...provided,
+      backgroundColor: colors.dropDownBg
+    }),
+    control: (provided, state) => {
+      return {
+        ...provided,
+        minHeight: 0,
+        border: '0px',
+        backgroundColor: colors.mauve4,
+        boxShadow: `0 0 0 1px ${state.isFocused ? colors.border : colors.secondary}`
+      }
+    },
+    input: provided => {
+      return {
+        ...provided,
+        color: '$text'
+      }
+    },
+    multiValue: provided => {
+      return {
+        ...provided,
+        backgroundColor: colors.mauve8
+      }
+    },
+    multiValueLabel: provided => {
+      return {
+        ...provided,
+        color: colors.mauve12
+      }
+    },
+    multiValueRemove: provided => {
+      return {
+        ...provided,
+        ':hover': {
+          background: colors.mauve9
+        }
+      }
+    },
+    option: (provided, state) => {
+      return {
+        ...provided,
+        color: colors.searchText,
+        backgroundColor: state.isFocused ? colors.activeLight : colors.dropDownBg,
+        ':hover': {
+          backgroundColor: colors.active,
+          color: '#ffffff'
+        },
+        ':selected': {
+          backgroundColor: 'red'
+        }
+      }
+    },
+    indicatorSeparator: provided => {
+      return {
+        ...provided,
+        backgroundColor: colors.secondary
+      }
+    },
+    dropdownIndicator: (provided, state) => {
+      return {
+        ...provided,
+        padding: 6,
+        color: state.isFocused ? colors.border : colors.secondary,
+        ':hover': {
+          color: colors.border
+        }
+      }
+    }
+  }
+  return styles
+}
+
+// eslint-disable-next-line react/display-name
+const Select = forwardRef<any, Props>((props, ref) => {
+  const { theme } = useTheme()
+  const isDark = theme === 'dark'
+  const styles = getStyles(isDark)
   return (
     <SelectInput
       ref={ref}
       menuPosition={props.menuPosition || 'fixed'}
-      styles={{
-        container: provided => {
-          return {
-            ...provided,
-            position: 'relative',
-            width: '100%',
-          }
-        },
-        singleValue: provided => ({
-          ...provided,
-          color: colors.mauve12
-        }),
-        menu: provided => ({
-          ...provided,
-          backgroundColor: colors.dropDownBg
-        }),
-        control: (provided, state) => {
-          return {
-            ...provided,
-            minHeight: 0,
-            border: '0px',
-            backgroundColor: colors.mauve4,
-            boxShadow: `0 0 0 1px ${state.isFocused ? colors.border : colors.secondary}`
-          }
-        },
-        input: provided => {
-          return {
-            ...provided,
-            color: '$text'
-          }
-        },
-        multiValue: provided => {
-          return {
-            ...provided,
-            backgroundColor: colors.mauve8
-          }
-        },
-        multiValueLabel: provided => {
-          return {
-            ...provided,
-            color: colors.mauve12
-          }
-        },
-        multiValueRemove: provided => {
-          return {
-            ...provided,
-            ':hover': {
-              background: colors.mauve9
-            }
-          }
-        },
-        option: (provided, state) => {
-          return {
-            ...provided,
-            color: colors.searchText,
-            backgroundColor: state.isFocused ? colors.activeLight : colors.dropDownBg,
-            ':hover': {
-              backgroundColor: colors.active,
-              color: '#ffffff'
-            },
-            ':selected': {
-              backgroundColor: 'red'
-            }
-          }
-        },
-        indicatorSeparator: provided => {
-          return {
-            ...provided,
-            backgroundColor: colors.secondary
-          }
-        },
-        dropdownIndicator: (provided, state) => {
-          return {
-            ...provided,
-            padding: 6,
-            color: state.isFocused ? colors.border : colors.secondary,
-            ':hover': {
-              color: colors.border,
-            }
-          }
-        }
-      }}
+      styles={styles}
+      {...props}
+    />
+  )
+})
+
+// eslint-disable-next-line react/display-name
+export const CreatableSelect = forwardRef<any, Props>((props, ref) => {
+  const { theme } = useTheme()
+  const isDark = theme === 'dark'
+  const styles = getStyles(isDark)
+  return (
+    <CreatableSelectInput
+      ref={ref}
+      formatCreateLabel={label => `Enter "${label}"`}
+      menuPosition={props.menuPosition || 'fixed'}
+      styles={styles}
       {...props}
     />
   )
diff --git a/components/Transaction/ui.tsx b/components/Transaction/ui.tsx
index 106512b..d99091a 100644
--- a/components/Transaction/ui.tsx
+++ b/components/Transaction/ui.tsx
@@ -2,7 +2,7 @@ import { FC, ReactNode, useCallback, useEffect, useState } from 'react'
 import Container from '../Container'
 import Flex from '../Flex'
 import Input from '../Input'
-import Select from '../Select'
+import Select, { CreatableSelect } from '../Select'
 import Text from '../Text'
 import {
   SelectOption,
@@ -293,7 +293,7 @@ export const TxUI: FC<UIProps> = ({
             const label = accountOptions.find(a => a.value === value)?.label || value
             return (
               <TxField key={field} label={field}>
-                <Select
+                <CreatableSelect
                   isClearable
                   instanceId={field}
                   placeholder={`Select ${field} account`}

From b653d9a9cb9e530e151f2ed6916d416ecd9049ad Mon Sep 17 00:00:00 2001
From: muzam1l <muzamilsofi@outlook.com>
Date: Thu, 23 Mar 2023 16:47:25 +0530
Subject: [PATCH 24/31] Fix: Remove last traces of custom Destination handling!

---
 state/actions/deleteAccount.ts | 7 -------
 state/transactions.ts          | 1 -
 2 files changed, 8 deletions(-)

diff --git a/state/actions/deleteAccount.ts b/state/actions/deleteAccount.ts
index b806d8a..5c41b4a 100644
--- a/state/actions/deleteAccount.ts
+++ b/state/actions/deleteAccount.ts
@@ -14,11 +14,4 @@ export const deleteAccount = (addr?: string) => {
       if (!acc) return
       acc.label = acc.value
     })
-  transactionsState.transactions
-    .filter(t => t.state.selectedDestAccount?.value === addr)
-    .forEach(t => {
-      const acc = t.state.selectedDestAccount
-      if (!acc) return
-      acc.label = acc.value
-    })
 }
diff --git a/state/transactions.ts b/state/transactions.ts
index c8b8c9b..9463094 100644
--- a/state/transactions.ts
+++ b/state/transactions.ts
@@ -50,7 +50,6 @@ export type TxFields = Omit<
 export const defaultTransaction: TransactionState = {
   selectedTransaction: null,
   selectedAccount: null,
-  selectedDestAccount: null,
   selectedFlags: null,
   hookParameters: {},
   memos: {},

From b9edfcd63b43f020f10fc7d3c6fb6dd04d515f65 Mon Sep 17 00:00:00 2001
From: muzam1l <muzamilsofi@outlook.com>
Date: Thu, 23 Mar 2023 16:55:32 +0530
Subject: [PATCH 25/31] Fix: nextjs build.

---
 state/transactions.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/state/transactions.ts b/state/transactions.ts
index 9463094..687e7b9 100644
--- a/state/transactions.ts
+++ b/state/transactions.ts
@@ -155,7 +155,7 @@ export const prepareTransaction = (data: any) => {
     }
     // account
     if (_value.$type === 'account') {
-      options[field] = _value.$value?.toString() || ""
+      options[field] = (_value.$value as any)?.toString() || ""
     }
     // json
     if (_value.$type === 'json') {

From 6d1ef110b7a756bbceeeca98c06c560b7ad4b806 Mon Sep 17 00:00:00 2001
From: muzam1l <muzamilsofi@outlook.com>
Date: Thu, 23 Mar 2023 17:52:17 +0530
Subject: [PATCH 26/31] Token Issuer account UI.

---
 components/Select.tsx         | 13 ++++++-
 components/Transaction/ui.tsx | 66 ++++++++++++++++++++++++++---------
 2 files changed, 62 insertions(+), 17 deletions(-)

diff --git a/components/Select.tsx b/components/Select.tsx
index 989cf35..9ad7d9c 100644
--- a/components/Select.tsx
+++ b/components/Select.tsx
@@ -113,6 +113,16 @@ const getStyles = (isDark: boolean) => {
           color: colors.border
         }
       }
+    },
+    clearIndicator: provided => {
+      return {
+        ...provided,
+        padding: 6,
+        color: colors.secondary,
+        ':hover': {
+          color: colors.border
+        }
+      }
     }
   }
   return styles
@@ -134,7 +144,7 @@ const Select = forwardRef<any, Props>((props, ref) => {
 })
 
 // eslint-disable-next-line react/display-name
-export const CreatableSelect = forwardRef<any, Props>((props, ref) => {
+const Creatable = forwardRef<any, Props>((props, ref) => {
   const { theme } = useTheme()
   const isDark = theme === 'dark'
   const styles = getStyles(isDark)
@@ -150,3 +160,4 @@ export const CreatableSelect = forwardRef<any, Props>((props, ref) => {
 })
 
 export default styled(Select, {})
+export const CreatableSelect = styled(Creatable, {})
diff --git a/components/Transaction/ui.tsx b/components/Transaction/ui.tsx
index d99091a..80c78d4 100644
--- a/components/Transaction/ui.tsx
+++ b/components/Transaction/ui.tsx
@@ -221,8 +221,14 @@ export const TxUI: FC<UIProps> = ({
               <TxField key={field} label={field}>
                 <Flex fluid css={{ alignItems: 'center' }}>
                   {isTokenAmount ? (
-                    <Flex fluid row align="center" justify="space-between">
-                      <Input
+                    <Flex
+                      fluid
+                      row
+                      align="center"
+                      justify="space-between"
+                      css={{ position: 'relative' }}
+                    >
+                      {/*  <Input
                         type="text"
                         placeholder="Issuer"
                         value={tokenAmount.issuer}
@@ -232,9 +238,8 @@ export const TxUI: FC<UIProps> = ({
                             issuer: e.target.value
                           })
                         }
-                      />
+                      /> */}
                       <Input
-                        css={{ mx: '$1' }}
                         type="text"
                         value={tokenAmount.currency}
                         placeholder="Currency"
@@ -246,6 +251,7 @@ export const TxUI: FC<UIProps> = ({
                         }}
                       />
                       <Input
+                        css={{ mx: '$1' }}
                         type="number"
                         value={tokenAmount.value}
                         placeholder="Value"
@@ -256,6 +262,18 @@ export const TxUI: FC<UIProps> = ({
                           })
                         }}
                       />
+                      <Box css={{ width: '50%' }}>
+                        <CreatableAccount
+                          value={tokenAmount.issuer}
+                          field={'Issuer' as any}
+                          setField={(_, value = "") => {
+                            setRawField(field, 'amount.token', {
+                              ...tokenAmount,
+                              issuer: value
+                            })
+                          }}
+                        />
+                      </Box>
                     </Flex>
                   ) : (
                     <Input
@@ -290,20 +308,9 @@ export const TxUI: FC<UIProps> = ({
             )
           }
           if (isAccount) {
-            const label = accountOptions.find(a => a.value === value)?.label || value
             return (
               <TxField key={field} label={field}>
-                <CreatableSelect
-                  isClearable
-                  instanceId={field}
-                  placeholder={`Select ${field} account`}
-                  options={accountOptions}
-                  value={{
-                    value,
-                    label
-                  }}
-                  onChange={(acc: any) => handleSetField(field, acc?.value)}
-                />
+                <CreatableAccount value={value} field={field} setField={handleSetField} />
               </TxField>
             )
           }
@@ -519,6 +526,33 @@ export const TxUI: FC<UIProps> = ({
   )
 }
 
+export const CreatableAccount: FC<{
+  value: string | undefined
+  field: keyof TxFields
+  setField: (field: keyof TxFields, value: string, opFields?: TxFields) => void
+}> = ({ value, field, setField }) => {
+  const { accounts } = useSnapshot(state)
+  const accountOptions: SelectOption[] = accounts.map(acc => ({
+    label: acc.name,
+    value: acc.address
+  }))
+  const label = accountOptions.find(a => a.value === value)?.label || value
+  const val = {
+    value,
+    label
+  }
+  return (
+    <CreatableSelect
+      isClearable
+      instanceId={field}
+      placeholder={field}
+      options={accountOptions}
+      value={value ? val : undefined}
+      onChange={(acc: any) => setField(field, acc?.value)}
+    />
+  )
+}
+
 export const TxField: FC<{ label: string; children: ReactNode; multiLine?: boolean }> = ({
   label,
   children,

From 9ecf5478e6509884e632e8a67ccce301b0edbc17 Mon Sep 17 00:00:00 2001
From: muzam1l <muzamilsofi@outlook.com>
Date: Thu, 23 Mar 2023 19:39:56 +0530
Subject: [PATCH 27/31] Remove tx `Destination` default values.

---
 components/Transaction/ui.tsx | 11 +++++++----
 content/transactions.json     | 14 +++++++-------
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/components/Transaction/ui.tsx b/components/Transaction/ui.tsx
index 80c78d4..b69fccd 100644
--- a/components/Transaction/ui.tsx
+++ b/components/Transaction/ui.tsx
@@ -19,7 +19,7 @@ import Textarea from '../Textarea'
 import { getFlags } from '../../state/constants/flags'
 import { Plus, Trash } from 'phosphor-react'
 import AccountSequence from '../Sequence'
-import { typeIs } from '../../utils/helpers'
+import { capitalize, typeIs } from '../../utils/helpers'
 
 interface UIProps {
   setState: (pTx?: Partial<TransactionState> | undefined) => TransactionState | undefined
@@ -266,7 +266,8 @@ export const TxUI: FC<UIProps> = ({
                         <CreatableAccount
                           value={tokenAmount.issuer}
                           field={'Issuer' as any}
-                          setField={(_, value = "") => {
+                          placeholder="Issuer"
+                          setField={(_, value = '') => {
                             setRawField(field, 'amount.token', {
                               ...tokenAmount,
                               issuer: value
@@ -529,8 +530,9 @@ export const TxUI: FC<UIProps> = ({
 export const CreatableAccount: FC<{
   value: string | undefined
   field: keyof TxFields
+  placeholder?: string
   setField: (field: keyof TxFields, value: string, opFields?: TxFields) => void
-}> = ({ value, field, setField }) => {
+}> = ({ value, field, setField, placeholder }) => {
   const { accounts } = useSnapshot(state)
   const accountOptions: SelectOption[] = accounts.map(acc => ({
     label: acc.name,
@@ -541,11 +543,12 @@ export const CreatableAccount: FC<{
     value,
     label
   }
+  placeholder = placeholder || `${capitalize(field)} account`
   return (
     <CreatableSelect
       isClearable
       instanceId={field}
-      placeholder={field}
+      placeholder={placeholder}
       options={accountOptions}
       value={value ? val : undefined}
       onChange={(acc: any) => setField(field, acc?.value)}
diff --git a/content/transactions.json b/content/transactions.json
index 91d4de1..355ac09 100644
--- a/content/transactions.json
+++ b/content/transactions.json
@@ -4,7 +4,7 @@
     "Account": "rWYkbWkCeg8dP6rXALnjgZSjjLyih5NXm",
     "Destination": {
       "$type": "account",
-      "$value": "rPT1Sjq2YGrBMTttX4GZHjKu9dyfzbpAYe"
+      "$value": ""
     },
     "DestinationTag": 13,
     "Fee": "2000000",
@@ -45,7 +45,7 @@
     "Account": "rUn84CUYbNjRoTQ6mSW7BVJPSVJNLb1QLo",
     "Destination": {
       "$type": "account",
-      "$value": "rfkE1aSy9G8Upk4JssnwBxhEv5p4mn2KTy"
+      "$value": ""
     },
     "SendMax": "100000000",
     "Expiration": 570113521,
@@ -66,7 +66,7 @@
     "TransactionType": "EscrowCancel",
     "Owner": {
       "$type": "account",
-      "$value": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn"
+      "$value": ""
     },
     "OfferSequence": 7,
     "Fee": "10"
@@ -80,7 +80,7 @@
     },
     "Destination": {
       "$type": "account",
-      "$value": "rsA2LpzuawewSBQXkiju3YQTMzW13pAAdW"
+      "$value": ""
     },
     "CancelAfter": 533257958,
     "FinishAfter": 533171558,
@@ -94,7 +94,7 @@
     "TransactionType": "EscrowFinish",
     "Owner": {
       "$type": "account",
-      "$value": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn"
+      "$value": ""
     },
     "OfferSequence": 7,
     "Condition": "A0258020E3B0C44298FC1C149AFBF4C8996FB92427AE41E4649B934CA495991B7852B855810100",
@@ -186,7 +186,7 @@
     "Account": "rf1BiGeXwwQoi8Z2ueFYTEXSwuJYfV2Jpn",
     "Destination": {
       "$type": "account",
-      "$value": "ra5nK24KXen9AHvsdFTKHSANinZseWnPcX"
+      "$value": ""
     },
     "Amount": {
       "$value": "100",
@@ -205,7 +205,7 @@
     },
     "Destination": {
       "$type": "account",
-      "$value": "rsA2LpzuawewSBQXkiju3YQTMzW13pAAdW"
+      "$value": ""
     },
     "SettleDelay": 86400,
     "PublicKey": "32D2471DB72B27E3310F355BB33E339BF26F8392D5A93D3BC0FC3B566612DA0F0A",

From 2cf18ef61c4c830e66ccccc95305789407112374 Mon Sep 17 00:00:00 2001
From: muzam1l <muzamilsofi@outlook.com>
Date: Mon, 27 Mar 2023 15:32:25 +0530
Subject: [PATCH 28/31] Add `Destination` field to Invoke transaction.

---
 content/transactions.json | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/content/transactions.json b/content/transactions.json
index 355ac09..4a42ef2 100644
--- a/content/transactions.json
+++ b/content/transactions.json
@@ -287,6 +287,10 @@
   },
   {
     "TransactionType": "Invoke",
+    "Destination": {
+      "$type": "account",
+      "$value": ""
+    },
     "Fee": "12"
   },
   {

From 801d9778cbd91d21cf63fd58c45ddca63c6f4891 Mon Sep 17 00:00:00 2001
From: muzam1l <muzamilsofi@outlook.com>
Date: Mon, 27 Mar 2023 19:21:14 +0530
Subject: [PATCH 29/31] Fix hex logic.

---
 utils/setHook.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/utils/setHook.ts b/utils/setHook.ts
index 720a398..f664fb7 100644
--- a/utils/setHook.ts
+++ b/utils/setHook.ts
@@ -85,7 +85,8 @@ export const getInvokeOptions = (content?: string) => {
 export function toHex(str: string) {
   var result = ''
   for (var i = 0; i < str.length; i++) {
-    result += str.charCodeAt(i).toString(16)
+    const hex = str.charCodeAt(i).toString(16)
+    result += hex.padStart(2, '0')
   }
   return result.toUpperCase()
 }

From 2c3cfebe3a33f30d720dd59a1e1525661896389f Mon Sep 17 00:00:00 2001
From: muzam1l <muzamilsofi@outlook.com>
Date: Tue, 28 Mar 2023 15:14:43 +0530
Subject: [PATCH 30/31]  Fix HookOn initial value.

---
 utils/hookOnCalculator.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/utils/hookOnCalculator.ts b/utils/hookOnCalculator.ts
index 4856fbf..755cc9b 100644
--- a/utils/hookOnCalculator.ts
+++ b/utils/hookOnCalculator.ts
@@ -30,7 +30,7 @@ export const tts = {
 export type TTS = typeof tts
 
 const calculateHookOn = (arr: (keyof TTS)[]) => {
-  let s = '0x3e3ff5bf'
+  let s = '0xffffffffffffffffffffffffffffffffffffffffffffffffffffffffffbfffff'
   arr.forEach(n => {
     let v = BigInt(s)
     v ^= BigInt(1) << BigInt(tts[n])

From dc37b1911a63724ccc9e478a7c1d118c85fcc0f2 Mon Sep 17 00:00:00 2001
From: muzam1l <muzamilsofi@outlook.com>
Date: Wed, 29 Mar 2023 15:04:14 +0530
Subject: [PATCH 31/31] Take tx memo data and parameter value as hex.

---
 components/Transaction/index.tsx | 4 ++--
 components/Transaction/ui.tsx    | 4 ++--
 state/transactions.ts            | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/components/Transaction/index.tsx b/components/Transaction/index.tsx
index 1d5038e..a4ef341 100644
--- a/components/Transaction/index.tsx
+++ b/components/Transaction/index.tsx
@@ -57,13 +57,13 @@ const Transaction: FC<TransactionProps> = ({ header, state: txState, ...props })
         SetHookData['HookParameters']
       >((acc, [_, { label, value }]) => {
         return acc.concat({
-          HookParameter: { HookParameterName: toHex(label), HookParameterValue: toHex(value) }
+          HookParameter: { HookParameterName: toHex(label), HookParameterValue: 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) }
+              Memo: { MemoData: data, MemoFormat: toHex(format), MemoType: toHex(type) }
             })
           }, [])
         : undefined
diff --git a/components/Transaction/ui.tsx b/components/Transaction/ui.tsx
index b69fccd..818c361 100644
--- a/components/Transaction/ui.tsx
+++ b/components/Transaction/ui.tsx
@@ -406,7 +406,7 @@ export const TxUI: FC<UIProps> = ({
                   />
                   <Input
                     css={{ mx: '$2' }}
-                    placeholder="Value"
+                    placeholder="Value (hex-quoted)"
                     value={value}
                     onChange={e => {
                       setState({
@@ -469,7 +469,7 @@ export const TxUI: FC<UIProps> = ({
                     }}
                   />
                   <Input
-                    placeholder="Data"
+                    placeholder="Data (hex-quoted)"
                     css={{ mx: '$2' }}
                     value={memo.data}
                     onChange={e => {
diff --git a/state/transactions.ts b/state/transactions.ts
index 687e7b9..2a4d8a5 100644
--- a/state/transactions.ts
+++ b/state/transactions.ts
@@ -215,7 +215,7 @@ export const prepareState = (value: string, transactionType?: string) => {
 
   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 || "") }
+      const param = { label: fromHex(cur.HookParameter?.HookParameterName || ""), value: cur.HookParameter?.HookParameterValue || "" }
       acc[idx] = param;
       return acc;
     }, {})
@@ -223,7 +223,7 @@ 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 || "") }
+      const memo = { data: cur.Memo?.MemoData || "", type: fromHex(cur.Memo?.MemoType || ""), format: fromHex(cur.Memo?.MemoFormat || "") }
       acc[idx] = memo;
       return acc;
     }, {})