Compare commits
	
		
			18 Commits
		
	
	
		
			feat/bundl
			...
			fix/tx
		
	
	| Author | SHA1 | Date | |
|---|---|---|---|
| 
						 | 
					0fce9af77c | ||
| 
						 | 
					55c68c580a | ||
| 
						 | 
					832a7997d1 | ||
| 
						 | 
					4528e5a16e | ||
| 
						 | 
					38f064c6d8 | ||
| 
						 | 
					fbf4565dbc | ||
| 
						 | 
					9001c64fed | ||
| 
						 | 
					03b768db4e | ||
| 
						 | 
					825af0db89 | ||
| 
						 | 
					31043f33ab | ||
| 
						 | 
					39699a1cb9 | ||
| 
						 | 
					b50b300307 | ||
| 
						 | 
					82c06cbb12 | ||
| 
						 | 
					423ee18e6a | ||
| 
						 | 
					3bb26d0c9b | ||
| 
						 | 
					43c83d0de6 | ||
| 
						 | 
					6bb407cb0f | ||
| 
						 | 
					d7b29ba809 | 
@@ -15,7 +15,7 @@ const contentShow = keyframes({
 | 
			
		||||
  '100%': { opacity: 1 }
 | 
			
		||||
})
 | 
			
		||||
const StyledOverlay = styled(DialogPrimitive.Overlay, {
 | 
			
		||||
  zIndex: 10000,
 | 
			
		||||
  zIndex: 3000,
 | 
			
		||||
  backgroundColor: blackA.blackA9,
 | 
			
		||||
  position: 'fixed',
 | 
			
		||||
  inset: 0,
 | 
			
		||||
 
 | 
			
		||||
@@ -31,7 +31,7 @@ const generateHtmlTemplate = async (code: string, data?: Record<string, any>) =>
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  processString = JSON.stringify(process)
 | 
			
		||||
  
 | 
			
		||||
 | 
			
		||||
  const libs = (await import("xrpl-accountlib/dist/browser.hook-bundle.js")).default;
 | 
			
		||||
  return `
 | 
			
		||||
  <html>
 | 
			
		||||
@@ -135,14 +135,28 @@ const RunScript: React.FC<{ file: IFile }> = ({ file: { content, name } }) => {
 | 
			
		||||
  const runScript = useCallback(async () => {
 | 
			
		||||
    setIsLoading(true);
 | 
			
		||||
    try {
 | 
			
		||||
      // Show loading toast only after 1 second, otherwise skip it.
 | 
			
		||||
      let loaded = false
 | 
			
		||||
      let toastId: string | undefined;
 | 
			
		||||
      setTimeout(() => {
 | 
			
		||||
        if (!loaded) {
 | 
			
		||||
          toastId = toast.loading('Loading packages, may take a few seconds...', {
 | 
			
		||||
            position: 'bottom-center',
 | 
			
		||||
          })
 | 
			
		||||
        }
 | 
			
		||||
      }, 1000)
 | 
			
		||||
 | 
			
		||||
      let data: any = {}
 | 
			
		||||
      Object.keys(fields).forEach(key => {
 | 
			
		||||
        data[key] = fields[key].value
 | 
			
		||||
      })
 | 
			
		||||
      const template = await generateHtmlTemplate(content, data)
 | 
			
		||||
 | 
			
		||||
      setIframeCode(template)
 | 
			
		||||
 | 
			
		||||
      loaded = true
 | 
			
		||||
      if (toastId) {
 | 
			
		||||
        toast.dismiss(toastId)
 | 
			
		||||
      }
 | 
			
		||||
      state.scriptLogs = [{ type: 'success', message: 'Started running...' }]
 | 
			
		||||
    } catch (err) {
 | 
			
		||||
      state.scriptLogs = [
 | 
			
		||||
@@ -181,11 +195,11 @@ const RunScript: React.FC<{ file: IFile }> = ({ file: { content, name } }) => {
 | 
			
		||||
 | 
			
		||||
  const isDisabled = Object.values(fields).some(field => field.required && !field.value)
 | 
			
		||||
 | 
			
		||||
  const handleRun = useCallback(() => {
 | 
			
		||||
  const handleRun = useCallback(async () => {
 | 
			
		||||
    if (isDisabled) return toast.error('Please fill in all the required fields.')
 | 
			
		||||
 | 
			
		||||
    state.scriptLogs = []
 | 
			
		||||
    runScript()
 | 
			
		||||
    await runScript();
 | 
			
		||||
    setIsDialogOpen(false)
 | 
			
		||||
  }, [isDisabled, runScript])
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
@@ -38,7 +38,8 @@ const Select = forwardRef<any, Props>((props, ref) => {
 | 
			
		||||
        container: provided => {
 | 
			
		||||
          return {
 | 
			
		||||
            ...provided,
 | 
			
		||||
            position: 'relative'
 | 
			
		||||
            position: 'relative',
 | 
			
		||||
            width: '100%'
 | 
			
		||||
          }
 | 
			
		||||
        },
 | 
			
		||||
        singleValue: provided => ({
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										71
									
								
								components/Sequence.tsx
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										71
									
								
								components/Sequence.tsx
									
									
									
									
									
										Normal file
									
								
							@@ -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
 | 
			
		||||
@@ -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
 | 
			
		||||
 
 | 
			
		||||
@@ -20,6 +20,7 @@ import { TxUI } from './ui'
 | 
			
		||||
import { default as _estimateFee } from '../../utils/estimateFee'
 | 
			
		||||
import toast from 'react-hot-toast'
 | 
			
		||||
import { combineFlags, extractFlags, transactionFlags } from '../../state/constants/flags'
 | 
			
		||||
import { SetHookData, toHex } from '../../utils/setHook'
 | 
			
		||||
 | 
			
		||||
export interface TransactionProps {
 | 
			
		||||
  header: string
 | 
			
		||||
@@ -40,20 +41,43 @@ const Transaction: FC<TransactionProps> = ({ header, state: txState, ...props })
 | 
			
		||||
 | 
			
		||||
  const prepareOptions = useCallback(
 | 
			
		||||
    (state: Partial<TransactionState> = txState) => {
 | 
			
		||||
      const { selectedTransaction, selectedDestAccount, selectedAccount, txFields, selectedFlags } =
 | 
			
		||||
        state
 | 
			
		||||
      const {
 | 
			
		||||
        selectedTransaction,
 | 
			
		||||
        selectedDestAccount,
 | 
			
		||||
        selectedAccount,
 | 
			
		||||
        txFields,
 | 
			
		||||
        selectedFlags,
 | 
			
		||||
        hookParameters,
 | 
			
		||||
        memos
 | 
			
		||||
      } = state
 | 
			
		||||
 | 
			
		||||
      const TransactionType = selectedTransaction?.value || null
 | 
			
		||||
      const Destination = selectedDestAccount?.value || txFields?.Destination
 | 
			
		||||
      const Account = selectedAccount?.value || null
 | 
			
		||||
      const Flags = combineFlags(selectedFlags?.map(flag => flag.value)) || txFields?.Flags
 | 
			
		||||
      const HookParameters = Object.entries(hookParameters || {}).reduce<
 | 
			
		||||
        SetHookData['HookParameters']
 | 
			
		||||
      >((acc, [_, { label, value }]) => {
 | 
			
		||||
        return acc.concat({
 | 
			
		||||
          HookParameter: { HookParameterName: toHex(label), HookParameterValue: toHex(value) }
 | 
			
		||||
        })
 | 
			
		||||
      }, [])
 | 
			
		||||
      const Memos = memos
 | 
			
		||||
        ? Object.entries(memos).reduce<SetHookData['Memos']>((acc, [_, { format, data, type }]) => {
 | 
			
		||||
            return acc?.concat({
 | 
			
		||||
              Memo: { MemoData: toHex(data), MemoFormat: toHex(format), MemoType: toHex(type) }
 | 
			
		||||
            })
 | 
			
		||||
          }, [])
 | 
			
		||||
        : undefined
 | 
			
		||||
 | 
			
		||||
      return prepareTransaction({
 | 
			
		||||
        ...txFields,
 | 
			
		||||
        HookParameters,
 | 
			
		||||
        Flags,
 | 
			
		||||
        TransactionType,
 | 
			
		||||
        Destination,
 | 
			
		||||
        Account
 | 
			
		||||
        Account,
 | 
			
		||||
        Memos
 | 
			
		||||
      })
 | 
			
		||||
    },
 | 
			
		||||
    [txState]
 | 
			
		||||
@@ -69,15 +93,29 @@ const Transaction: FC<TransactionProps> = ({ header, state: txState, ...props })
 | 
			
		||||
    }
 | 
			
		||||
  }, [selectedAccount?.value, selectedTransaction?.value, setState, txIsLoading])
 | 
			
		||||
 | 
			
		||||
  const getJsonString = useCallback(
 | 
			
		||||
    (state?: Partial<TransactionState>) =>
 | 
			
		||||
      JSON.stringify(prepareOptions?.(state) || {}, null, editorSettings.tabSize),
 | 
			
		||||
    [editorSettings.tabSize, prepareOptions]
 | 
			
		||||
  )
 | 
			
		||||
 | 
			
		||||
  const saveEditorState = useCallback(
 | 
			
		||||
    (value: string = '', transactionType?: string) => {
 | 
			
		||||
      const pTx = prepareState(value, transactionType)
 | 
			
		||||
      if (pTx) {
 | 
			
		||||
        pTx.editorValue = getJsonString(pTx)
 | 
			
		||||
        return setState(pTx)
 | 
			
		||||
      }
 | 
			
		||||
    },
 | 
			
		||||
    [getJsonString, setState]
 | 
			
		||||
  )
 | 
			
		||||
 | 
			
		||||
  const submitTest = useCallback(async () => {
 | 
			
		||||
    let st: TransactionState | undefined
 | 
			
		||||
    const tt = txState.selectedTransaction?.value
 | 
			
		||||
    if (viewType === 'json') {
 | 
			
		||||
      // save the editor state first
 | 
			
		||||
      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)
 | 
			
		||||
@@ -108,23 +146,18 @@ const Transaction: FC<TransactionProps> = ({ header, state: txState, ...props })
 | 
			
		||||
    }
 | 
			
		||||
    setState({ txIsLoading: false })
 | 
			
		||||
  }, [
 | 
			
		||||
    txState.selectedTransaction?.value,
 | 
			
		||||
    viewType,
 | 
			
		||||
    accounts,
 | 
			
		||||
    txIsDisabled,
 | 
			
		||||
    setState,
 | 
			
		||||
    header,
 | 
			
		||||
    saveEditorState,
 | 
			
		||||
    editorValue,
 | 
			
		||||
    txState,
 | 
			
		||||
    selectedAccount?.value,
 | 
			
		||||
    prepareOptions
 | 
			
		||||
  ])
 | 
			
		||||
 | 
			
		||||
  const getJsonString = useCallback(
 | 
			
		||||
    (state?: Partial<TransactionState>) =>
 | 
			
		||||
      JSON.stringify(prepareOptions?.(state) || {}, null, editorSettings.tabSize),
 | 
			
		||||
    [editorSettings.tabSize, prepareOptions]
 | 
			
		||||
  )
 | 
			
		||||
 | 
			
		||||
  const resetState = useCallback(
 | 
			
		||||
    (transactionType: SelectOption | undefined = defaultTransactionType) => {
 | 
			
		||||
      const fields = getTxFields(transactionType?.value)
 | 
			
		||||
@@ -177,11 +210,21 @@ const Transaction: FC<TransactionProps> = ({ header, state: txState, ...props })
 | 
			
		||||
    [accounts, prepareOptions, setState, txState]
 | 
			
		||||
  )
 | 
			
		||||
 | 
			
		||||
  const switchToJson = useCallback(() => {
 | 
			
		||||
    const editorValue = getJsonString()
 | 
			
		||||
    setState({ viewType: 'json', editorValue })
 | 
			
		||||
  }, [getJsonString, setState])
 | 
			
		||||
 | 
			
		||||
  const switchToUI = useCallback(() => {
 | 
			
		||||
    setState({ viewType: 'ui' })
 | 
			
		||||
  }, [setState])
 | 
			
		||||
 | 
			
		||||
  return (
 | 
			
		||||
    <Box css={{ position: 'relative', height: 'calc(100% - 28px)' }} {...props}>
 | 
			
		||||
      {viewType === 'json' ? (
 | 
			
		||||
        <TxJson
 | 
			
		||||
          getJsonString={getJsonString}
 | 
			
		||||
          saveEditorState={saveEditorState}
 | 
			
		||||
          header={header}
 | 
			
		||||
          state={txState}
 | 
			
		||||
          setState={setState}
 | 
			
		||||
@@ -189,6 +232,7 @@ const Transaction: FC<TransactionProps> = ({ header, state: txState, ...props })
 | 
			
		||||
        />
 | 
			
		||||
      ) : (
 | 
			
		||||
        <TxUI
 | 
			
		||||
          switchToJson={switchToJson}
 | 
			
		||||
          state={txState}
 | 
			
		||||
          resetState={resetState}
 | 
			
		||||
          setState={setState}
 | 
			
		||||
@@ -209,8 +253,8 @@ const Transaction: FC<TransactionProps> = ({ header, state: txState, ...props })
 | 
			
		||||
        <Button
 | 
			
		||||
          onClick={() => {
 | 
			
		||||
            if (viewType === 'ui') {
 | 
			
		||||
              setState({ viewType: 'json' })
 | 
			
		||||
            } else setState({ viewType: 'ui' })
 | 
			
		||||
              switchToJson()
 | 
			
		||||
            } else switchToUI()
 | 
			
		||||
          }}
 | 
			
		||||
          outline
 | 
			
		||||
        >
 | 
			
		||||
 
 | 
			
		||||
@@ -1,6 +1,6 @@
 | 
			
		||||
import { FC, useCallback, useEffect, useMemo, useState } from 'react'
 | 
			
		||||
import { FC, useCallback, useEffect, useState } from 'react'
 | 
			
		||||
import { useSnapshot } from 'valtio'
 | 
			
		||||
import state, { prepareState, transactionsData, TransactionState } from '../../state'
 | 
			
		||||
import state, { transactionsData, TransactionState } from '../../state'
 | 
			
		||||
import Text from '../Text'
 | 
			
		||||
import { Flex, Link } from '..'
 | 
			
		||||
import { showAlert } from '../../state/actions/showAlert'
 | 
			
		||||
@@ -11,27 +11,27 @@ import Monaco from '../Monaco'
 | 
			
		||||
import type monaco from 'monaco-editor'
 | 
			
		||||
 | 
			
		||||
interface JsonProps {
 | 
			
		||||
  getJsonString?: (state?: Partial<TransactionState>) => string
 | 
			
		||||
  getJsonString: (st?: Partial<TransactionState>) => string
 | 
			
		||||
  saveEditorState: (val?: string, tt?: string) => TransactionState | undefined
 | 
			
		||||
  header?: string
 | 
			
		||||
  setState: (pTx?: Partial<TransactionState> | undefined) => void
 | 
			
		||||
  state: TransactionState
 | 
			
		||||
  estimateFee?: () => Promise<string | undefined>
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export const TxJson: FC<JsonProps> = ({ getJsonString, state: txState, header, setState }) => {
 | 
			
		||||
export const TxJson: FC<JsonProps> = ({
 | 
			
		||||
  getJsonString,
 | 
			
		||||
  state: txState,
 | 
			
		||||
  header,
 | 
			
		||||
  setState,
 | 
			
		||||
  saveEditorState
 | 
			
		||||
}) => {
 | 
			
		||||
  const { editorSettings, accounts } = useSnapshot(state)
 | 
			
		||||
  const { editorValue, estimatedFee } = txState
 | 
			
		||||
  const { editorValue, estimatedFee, editorIsSaved } = txState
 | 
			
		||||
  const [currTxType, setCurrTxType] = useState<string | undefined>(
 | 
			
		||||
    txState.selectedTransaction?.value
 | 
			
		||||
  )
 | 
			
		||||
 | 
			
		||||
  useEffect(() => {
 | 
			
		||||
    setState({
 | 
			
		||||
      editorValue: getJsonString?.()
 | 
			
		||||
    })
 | 
			
		||||
    // eslint-disable-next-line react-hooks/exhaustive-deps
 | 
			
		||||
  }, [])
 | 
			
		||||
 | 
			
		||||
  useEffect(() => {
 | 
			
		||||
    const parsed = parseJSON(editorValue)
 | 
			
		||||
    if (!parsed) return
 | 
			
		||||
@@ -44,29 +44,19 @@ export const TxJson: FC<JsonProps> = ({ getJsonString, state: txState, header, s
 | 
			
		||||
    }
 | 
			
		||||
  }, [editorValue])
 | 
			
		||||
 | 
			
		||||
  const saveState = (value: string, transactionType?: string) => {
 | 
			
		||||
    const tx = prepareState(value, transactionType)
 | 
			
		||||
    if (tx) {
 | 
			
		||||
      setState(tx)
 | 
			
		||||
      setState({
 | 
			
		||||
        editorValue: getJsonString?.(tx)
 | 
			
		||||
      })
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  const discardChanges = () => {
 | 
			
		||||
    showAlert('Confirm', {
 | 
			
		||||
      body: 'Are you sure to discard these changes?',
 | 
			
		||||
      confirmText: 'Yes',
 | 
			
		||||
      onCancel: () => {},
 | 
			
		||||
      onConfirm: () => setState({ editorValue: getJsonString?.() })
 | 
			
		||||
      onConfirm: () => setState({ editorValue: getJsonString() })
 | 
			
		||||
    })
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  const onExit = (value: string) => {
 | 
			
		||||
    const options = parseJSON(value)
 | 
			
		||||
    if (options) {
 | 
			
		||||
      saveState(value, currTxType)
 | 
			
		||||
      saveEditorState(value, currTxType)
 | 
			
		||||
      return
 | 
			
		||||
    }
 | 
			
		||||
    showAlert('Error!', {
 | 
			
		||||
@@ -163,8 +153,6 @@ export const TxJson: FC<JsonProps> = ({ getJsonString, state: txState, header, s
 | 
			
		||||
    })
 | 
			
		||||
  }, [getSchemas, monacoInst])
 | 
			
		||||
 | 
			
		||||
  const hasUnsaved = useMemo(() => editorValue !== getJsonString?.(), [editorValue, getJsonString])
 | 
			
		||||
 | 
			
		||||
  return (
 | 
			
		||||
    <Monaco
 | 
			
		||||
      rootProps={{
 | 
			
		||||
@@ -174,7 +162,7 @@ export const TxJson: FC<JsonProps> = ({ getJsonString, state: txState, header, s
 | 
			
		||||
      id={header}
 | 
			
		||||
      height="100%"
 | 
			
		||||
      value={editorValue}
 | 
			
		||||
      onChange={val => setState({ editorValue: val })}
 | 
			
		||||
      onChange={val => setState({ editorValue: val, editorIsSaved: false })}
 | 
			
		||||
      onMount={(editor, monaco) => {
 | 
			
		||||
        editor.updateOptions({
 | 
			
		||||
          minimap: { enabled: false },
 | 
			
		||||
@@ -190,12 +178,12 @@ export const TxJson: FC<JsonProps> = ({ getJsonString, state: txState, header, s
 | 
			
		||||
        model?.onWillDispose(() => onExit(model.getValue()))
 | 
			
		||||
      }}
 | 
			
		||||
      overlay={
 | 
			
		||||
        hasUnsaved ? (
 | 
			
		||||
        !editorIsSaved ? (
 | 
			
		||||
          <Flex row align="center" css={{ fontSize: '$xs', color: '$textMuted', ml: 'auto' }}>
 | 
			
		||||
            <Text muted small>
 | 
			
		||||
              This file has unsaved changes.
 | 
			
		||||
            </Text>
 | 
			
		||||
            <Link css={{ ml: '$1' }} onClick={() => saveState(editorValue || '', currTxType)}>
 | 
			
		||||
            <Link css={{ ml: '$1' }} onClick={() => saveEditorState(editorValue, currTxType)}>
 | 
			
		||||
              save
 | 
			
		||||
            </Link>
 | 
			
		||||
            <Link css={{ ml: '$1' }} onClick={discardChanges}>
 | 
			
		||||
 
 | 
			
		||||
@@ -1,4 +1,4 @@
 | 
			
		||||
import { FC, useCallback, useEffect, useMemo, useState } from 'react'
 | 
			
		||||
import { FC, ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
 | 
			
		||||
import Container from '../Container'
 | 
			
		||||
import Flex from '../Flex'
 | 
			
		||||
import Input from '../Input'
 | 
			
		||||
@@ -18,18 +18,34 @@ import { streamState } from '../DebugStream'
 | 
			
		||||
import { Button } from '..'
 | 
			
		||||
import Textarea from '../Textarea'
 | 
			
		||||
import { getFlags } from '../../state/constants/flags'
 | 
			
		||||
import { Plus, Trash } from 'phosphor-react'
 | 
			
		||||
import AccountSequence from '../Sequence'
 | 
			
		||||
 | 
			
		||||
interface UIProps {
 | 
			
		||||
  setState: (pTx?: Partial<TransactionState> | undefined) => TransactionState | undefined
 | 
			
		||||
  resetState: (tt?: SelectOption) => TransactionState | undefined
 | 
			
		||||
  state: TransactionState
 | 
			
		||||
  estimateFee?: (...arg: any) => Promise<string | undefined>
 | 
			
		||||
  switchToJson: () => void
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export const TxUI: FC<UIProps> = ({ state: txState, setState, resetState, estimateFee }) => {
 | 
			
		||||
export const TxUI: FC<UIProps> = ({
 | 
			
		||||
  state: txState,
 | 
			
		||||
  setState,
 | 
			
		||||
  resetState,
 | 
			
		||||
  estimateFee,
 | 
			
		||||
  switchToJson
 | 
			
		||||
}) => {
 | 
			
		||||
  const { accounts } = useSnapshot(state)
 | 
			
		||||
  const { selectedAccount, selectedDestAccount, selectedTransaction, txFields, selectedFlags } =
 | 
			
		||||
    txState
 | 
			
		||||
  const {
 | 
			
		||||
    selectedAccount,
 | 
			
		||||
    selectedDestAccount,
 | 
			
		||||
    selectedTransaction,
 | 
			
		||||
    txFields,
 | 
			
		||||
    selectedFlags,
 | 
			
		||||
    hookParameters,
 | 
			
		||||
    memos
 | 
			
		||||
  } = txState
 | 
			
		||||
 | 
			
		||||
  const accountOptions: SelectOption[] = accounts.map(acc => ({
 | 
			
		||||
    label: acc.name,
 | 
			
		||||
@@ -94,8 +110,6 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, resetState, estima
 | 
			
		||||
    [handleEstimateFee, resetState, setState]
 | 
			
		||||
  )
 | 
			
		||||
 | 
			
		||||
  const switchToJson = () => setState({ viewType: 'json' })
 | 
			
		||||
 | 
			
		||||
  // default tx
 | 
			
		||||
  useEffect(() => {
 | 
			
		||||
    if (selectedTransaction?.value) return
 | 
			
		||||
@@ -110,7 +124,7 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, resetState, estima
 | 
			
		||||
    [selectedTransaction?.value]
 | 
			
		||||
  )
 | 
			
		||||
 | 
			
		||||
  const richFields = ['TransactionType', 'Account']
 | 
			
		||||
  const richFields = ['TransactionType', 'Account', 'HookParameters', 'Memos']
 | 
			
		||||
  if (fields.Destination !== undefined) {
 | 
			
		||||
    richFields.push('Destination')
 | 
			
		||||
  }
 | 
			
		||||
@@ -120,7 +134,6 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, resetState, estima
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  const otherFields = Object.keys(txFields).filter(k => !richFields.includes(k)) as [keyof TxFields]
 | 
			
		||||
 | 
			
		||||
  return (
 | 
			
		||||
    <Container
 | 
			
		||||
      css={{
 | 
			
		||||
@@ -130,94 +143,44 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, resetState, estima
 | 
			
		||||
      }}
 | 
			
		||||
    >
 | 
			
		||||
      <Flex column fluid css={{ height: '100%', overflowY: 'auto', pr: '$1' }}>
 | 
			
		||||
        <Flex
 | 
			
		||||
          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>
 | 
			
		||||
        <TxField label="Sequence">
 | 
			
		||||
          <AccountSequence address={selectedAccount?.value} />
 | 
			
		||||
        </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 +192,7 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, resetState, estima
 | 
			
		||||
                selectedFlags ? selectedFlags.length >= flagsOptions.length - 1 : false
 | 
			
		||||
              }
 | 
			
		||||
            />
 | 
			
		||||
          </Flex>
 | 
			
		||||
          </TxField>
 | 
			
		||||
        )}
 | 
			
		||||
        {otherFields.map(field => {
 | 
			
		||||
          let _value = txFields[field]
 | 
			
		||||
@@ -251,93 +214,239 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, resetState, estima
 | 
			
		||||
          let rows = isJson ? (value?.match(/\n/gm)?.length || 0) + 1 : undefined
 | 
			
		||||
          if (rows && rows > 5) rows = 5
 | 
			
		||||
          return (
 | 
			
		||||
            <Flex column key={field} css={{ mb: '$2', pr: '1px' }}>
 | 
			
		||||
              <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>
 | 
			
		||||
          )
 | 
			
		||||
        })}
 | 
			
		||||
        <TxField multiLine label="Hook parameters">
 | 
			
		||||
          <Flex column fluid>
 | 
			
		||||
            {Object.entries(hookParameters).map(([id, { label, value }]) => (
 | 
			
		||||
              <Flex column key={id} css={{ mb: '$2' }}>
 | 
			
		||||
                <Flex row>
 | 
			
		||||
                  <Input
 | 
			
		||||
                    placeholder="Parameter name"
 | 
			
		||||
                    value={label}
 | 
			
		||||
                    onChange={e => {
 | 
			
		||||
                      setState({
 | 
			
		||||
                        hookParameters: {
 | 
			
		||||
                          ...hookParameters,
 | 
			
		||||
                          [id]: { label: e.target.value, value }
 | 
			
		||||
                        }
 | 
			
		||||
                      })
 | 
			
		||||
                    }}
 | 
			
		||||
                  />
 | 
			
		||||
                  <Input
 | 
			
		||||
                    css={{ mx: '$2' }}
 | 
			
		||||
                    placeholder="Value"
 | 
			
		||||
                    value={value}
 | 
			
		||||
                    onChange={e => {
 | 
			
		||||
                      setState({
 | 
			
		||||
                        hookParameters: {
 | 
			
		||||
                          ...hookParameters,
 | 
			
		||||
                          [id]: { label, value: e.target.value }
 | 
			
		||||
                        }
 | 
			
		||||
                      })
 | 
			
		||||
                    }}
 | 
			
		||||
                  />
 | 
			
		||||
                  <Button
 | 
			
		||||
                    onClick={() => {
 | 
			
		||||
                      const { [id]: _, ...rest } = hookParameters
 | 
			
		||||
                      setState({ hookParameters: rest })
 | 
			
		||||
                    }}
 | 
			
		||||
                    variant="destroy"
 | 
			
		||||
                  >
 | 
			
		||||
                    <Trash weight="regular" size="16px" />
 | 
			
		||||
                  </Button>
 | 
			
		||||
                </Flex>
 | 
			
		||||
              </Flex>
 | 
			
		||||
            ))}
 | 
			
		||||
            <Button
 | 
			
		||||
              outline
 | 
			
		||||
              fullWidth
 | 
			
		||||
              type="button"
 | 
			
		||||
              onClick={() => {
 | 
			
		||||
                const id = Object.keys(hookParameters).length
 | 
			
		||||
                setState({
 | 
			
		||||
                  hookParameters: { ...hookParameters, [id]: { label: '', value: '' } }
 | 
			
		||||
                })
 | 
			
		||||
              }}
 | 
			
		||||
            >
 | 
			
		||||
              <Plus size="16px" />
 | 
			
		||||
              Add Hook Parameter
 | 
			
		||||
            </Button>
 | 
			
		||||
          </Flex>
 | 
			
		||||
        </TxField>
 | 
			
		||||
        <TxField multiLine label="Memos">
 | 
			
		||||
          <Flex column fluid>
 | 
			
		||||
            {Object.entries(memos).map(([id, memo]) => (
 | 
			
		||||
              <Flex column key={id} css={{ mb: '$2' }}>
 | 
			
		||||
                <Flex
 | 
			
		||||
                  row
 | 
			
		||||
                  css={{
 | 
			
		||||
                    flexWrap: 'wrap',
 | 
			
		||||
                    width: '100%'
 | 
			
		||||
                  }}
 | 
			
		||||
                >
 | 
			
		||||
                  <Input
 | 
			
		||||
                    placeholder="Memo type"
 | 
			
		||||
                    value={memo.type}
 | 
			
		||||
                    onChange={e => {
 | 
			
		||||
                      setState({
 | 
			
		||||
                        memos: {
 | 
			
		||||
                          ...memos,
 | 
			
		||||
                          [id]: { ...memo, type: e.target.value }
 | 
			
		||||
                        }
 | 
			
		||||
                      })
 | 
			
		||||
                    }}
 | 
			
		||||
                  />
 | 
			
		||||
                  <Input
 | 
			
		||||
                    placeholder="Data"
 | 
			
		||||
                    css={{ mx: '$2' }}
 | 
			
		||||
                    value={memo.data}
 | 
			
		||||
                    onChange={e => {
 | 
			
		||||
                      setState({
 | 
			
		||||
                        memos: {
 | 
			
		||||
                          ...memos,
 | 
			
		||||
                          [id]: { ...memo, data: e.target.value }
 | 
			
		||||
                        }
 | 
			
		||||
                      })
 | 
			
		||||
                    }}
 | 
			
		||||
                  />
 | 
			
		||||
                  <Input
 | 
			
		||||
                    placeholder="Format"
 | 
			
		||||
                    value={memo.format}
 | 
			
		||||
                    onChange={e => {
 | 
			
		||||
                      setState({
 | 
			
		||||
                        memos: {
 | 
			
		||||
                          ...memos,
 | 
			
		||||
                          [id]: { ...memo, format: e.target.value }
 | 
			
		||||
                        }
 | 
			
		||||
                      })
 | 
			
		||||
                    }}
 | 
			
		||||
                  />
 | 
			
		||||
                  <Button
 | 
			
		||||
                    css={{ ml: '$2' }}
 | 
			
		||||
                    onClick={() => {
 | 
			
		||||
                      const { [id]: _, ...rest } = memos
 | 
			
		||||
                      setState({ memos: rest })
 | 
			
		||||
                    }}
 | 
			
		||||
                    variant="destroy"
 | 
			
		||||
                  >
 | 
			
		||||
                    <Trash weight="regular" size="16px" />
 | 
			
		||||
                  </Button>
 | 
			
		||||
                </Flex>
 | 
			
		||||
              </Flex>
 | 
			
		||||
            ))}
 | 
			
		||||
            <Button
 | 
			
		||||
              outline
 | 
			
		||||
              fullWidth
 | 
			
		||||
              type="button"
 | 
			
		||||
              onClick={() => {
 | 
			
		||||
                const id = Object.keys(memos).length
 | 
			
		||||
                setState({
 | 
			
		||||
                  memos: { ...memos, [id]: { data: '', format: '', type: '' } }
 | 
			
		||||
                })
 | 
			
		||||
              }}
 | 
			
		||||
            >
 | 
			
		||||
              <Plus size="16px" />
 | 
			
		||||
              Add Memo
 | 
			
		||||
            </Button>
 | 
			
		||||
          </Flex>
 | 
			
		||||
        </TxField>
 | 
			
		||||
      </Flex>
 | 
			
		||||
    </Container>
 | 
			
		||||
  )
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export const TxField: FC<{ label: string; children: ReactNode; multiLine?: boolean }> = ({
 | 
			
		||||
  label,
 | 
			
		||||
  children,
 | 
			
		||||
  multiLine = false
 | 
			
		||||
}) => {
 | 
			
		||||
  return (
 | 
			
		||||
    <Flex
 | 
			
		||||
      row
 | 
			
		||||
      fluid
 | 
			
		||||
      css={{
 | 
			
		||||
        justifyContent: 'flex-end',
 | 
			
		||||
        alignItems: multiLine ? 'flex-start' : 'center',
 | 
			
		||||
        position: 'relative',
 | 
			
		||||
        mb: '$3',
 | 
			
		||||
        mt: '1px',
 | 
			
		||||
        pr: '1px'
 | 
			
		||||
      }}
 | 
			
		||||
    >
 | 
			
		||||
      <Text muted css={{ mr: '$3', mt: multiLine ? '$2' : 0 }}>
 | 
			
		||||
        {label}:{' '}
 | 
			
		||||
      </Text>
 | 
			
		||||
      <Flex css={{ width: '70%', alignItems: 'center' }}>{children}</Flex>
 | 
			
		||||
    </Flex>
 | 
			
		||||
  )
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
@@ -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')
 | 
			
		||||
 
 | 
			
		||||
@@ -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) {
 | 
			
		||||
@@ -85,13 +78,13 @@ export const prepareDeployHookTx = async (
 | 
			
		||||
  //     }
 | 
			
		||||
  //   }
 | 
			
		||||
  // });
 | 
			
		||||
  if (typeof window === 'undefined') return;
 | 
			
		||||
  if (typeof window === 'undefined') return
 | 
			
		||||
  const tx = {
 | 
			
		||||
    Account: account.address,
 | 
			
		||||
    TransactionType: 'SetHook',
 | 
			
		||||
    Sequence: account.sequence,
 | 
			
		||||
    Fee: data.Fee,
 | 
			
		||||
    NetworkID: process.env.NEXT_PUBLIC_NETWORK_ID || state.client.getState().server.networkId,
 | 
			
		||||
    NetworkID: process.env.NEXT_PUBLIC_NETWORK_ID,
 | 
			
		||||
    Hooks: [
 | 
			
		||||
      {
 | 
			
		||||
        Hook: {
 | 
			
		||||
@@ -111,86 +104,84 @@ export const prepareDeployHookTx = async (
 | 
			
		||||
  return tx
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/* deployHook function turns the wasm binary into
 | 
			
		||||
 * hex string, signs the transaction and deploys it to
 | 
			
		||||
 * Hooks testnet.
 | 
			
		||||
/*
 | 
			
		||||
 * Turns the wasm binary into hex string, signs the transaction and deploys it to Hooks testnet.
 | 
			
		||||
 */
 | 
			
		||||
export const deployHook = async (account: IAccount & { name?: string }, data: SetHookData) => {
 | 
			
		||||
  if (typeof window !== 'undefined') {
 | 
			
		||||
    const activeFile = state.files[state.active]?.compiledContent
 | 
			
		||||
      ? state.files[state.active]
 | 
			
		||||
      : state.files.filter(file => file.compiledContent)[0]
 | 
			
		||||
    state.deployValues[activeFile.name] = data
 | 
			
		||||
    const tx = await prepareDeployHookTx(account, data)
 | 
			
		||||
    if (!tx) {
 | 
			
		||||
      return
 | 
			
		||||
    }
 | 
			
		||||
    const keypair = derive.familySeed(account.secret)
 | 
			
		||||
  const activeFile = state.files[state.active]?.compiledContent
 | 
			
		||||
    ? state.files[state.active]
 | 
			
		||||
    : state.files.filter(file => file.compiledContent)[0]
 | 
			
		||||
  state.deployValues[activeFile.name] = data
 | 
			
		||||
 | 
			
		||||
    const { signedTransaction } = sign(tx, keypair)
 | 
			
		||||
    const currentAccount = state.accounts.find(acc => acc.address === account.address)
 | 
			
		||||
    if (currentAccount) {
 | 
			
		||||
      currentAccount.isLoading = true
 | 
			
		||||
    }
 | 
			
		||||
    let submitRes
 | 
			
		||||
  const tx = await prepareDeployHookTx(account, data)
 | 
			
		||||
  if (!tx) {
 | 
			
		||||
    return
 | 
			
		||||
  }
 | 
			
		||||
  const keypair = derive.familySeed(account.secret)
 | 
			
		||||
  const { signedTransaction } = sign(tx, keypair)
 | 
			
		||||
 | 
			
		||||
    try {
 | 
			
		||||
      submitRes = await xrplSend({
 | 
			
		||||
        command: 'submit',
 | 
			
		||||
        tx_blob: signedTransaction
 | 
			
		||||
  const currentAccount = state.accounts.find(acc => acc.address === account.address)
 | 
			
		||||
  if (currentAccount) {
 | 
			
		||||
    currentAccount.isLoading = true
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  let submitRes
 | 
			
		||||
  try {
 | 
			
		||||
    submitRes = await xrplSend({
 | 
			
		||||
      command: 'submit',
 | 
			
		||||
      tx_blob: signedTransaction
 | 
			
		||||
    })
 | 
			
		||||
 | 
			
		||||
    const txHash = submitRes.tx_json?.hash
 | 
			
		||||
    const resultMsg = ref(
 | 
			
		||||
      <>
 | 
			
		||||
        [<ResultLink result={submitRes.engine_result} />] {submitRes.engine_result_message}{' '}
 | 
			
		||||
        {txHash && (
 | 
			
		||||
          <>
 | 
			
		||||
            Transaction hash:{' '}
 | 
			
		||||
            <Link
 | 
			
		||||
              as="a"
 | 
			
		||||
              href={`https://${process.env.NEXT_PUBLIC_EXPLORER_URL}/${txHash}`}
 | 
			
		||||
              target="_blank"
 | 
			
		||||
              rel="noopener noreferrer"
 | 
			
		||||
            >
 | 
			
		||||
              {txHash}
 | 
			
		||||
            </Link>
 | 
			
		||||
          </>
 | 
			
		||||
        )}
 | 
			
		||||
      </>
 | 
			
		||||
    )
 | 
			
		||||
    if (submitRes.engine_result === 'tesSUCCESS') {
 | 
			
		||||
      state.deployLogs.push({
 | 
			
		||||
        type: 'success',
 | 
			
		||||
        message: 'Hook deployed successfully ✅'
 | 
			
		||||
      })
 | 
			
		||||
 | 
			
		||||
      const txHash = submitRes.tx_json?.hash
 | 
			
		||||
      const resultMsg = ref(
 | 
			
		||||
        <>
 | 
			
		||||
          [<ResultLink result={submitRes.engine_result} />] {submitRes.engine_result_message}{' '}
 | 
			
		||||
          {txHash && (
 | 
			
		||||
            <>
 | 
			
		||||
              Transaction hash:{' '}
 | 
			
		||||
              <Link
 | 
			
		||||
                as="a"
 | 
			
		||||
                href={`https://${process.env.NEXT_PUBLIC_EXPLORER_URL}/${txHash}`}
 | 
			
		||||
                target="_blank"
 | 
			
		||||
                rel="noopener noreferrer"
 | 
			
		||||
              >
 | 
			
		||||
                {txHash}
 | 
			
		||||
              </Link>
 | 
			
		||||
            </>
 | 
			
		||||
          )}
 | 
			
		||||
        </>
 | 
			
		||||
      )
 | 
			
		||||
      if (submitRes.engine_result === 'tesSUCCESS') {
 | 
			
		||||
        state.deployLogs.push({
 | 
			
		||||
          type: 'success',
 | 
			
		||||
          message: 'Hook deployed successfully ✅'
 | 
			
		||||
        })
 | 
			
		||||
        state.deployLogs.push({
 | 
			
		||||
          type: 'success',
 | 
			
		||||
          message: resultMsg
 | 
			
		||||
        })
 | 
			
		||||
      } else if (submitRes.engine_result) {
 | 
			
		||||
        state.deployLogs.push({
 | 
			
		||||
          type: 'error',
 | 
			
		||||
          message: resultMsg
 | 
			
		||||
        })
 | 
			
		||||
      } else {
 | 
			
		||||
        state.deployLogs.push({
 | 
			
		||||
          type: 'error',
 | 
			
		||||
          message: `[${submitRes.error}] ${submitRes.error_exception}`
 | 
			
		||||
        })
 | 
			
		||||
      }
 | 
			
		||||
    } catch (err) {
 | 
			
		||||
      console.log(err)
 | 
			
		||||
      state.deployLogs.push({
 | 
			
		||||
        type: 'success',
 | 
			
		||||
        message: resultMsg
 | 
			
		||||
      })
 | 
			
		||||
    } else if (submitRes.engine_result) {
 | 
			
		||||
      state.deployLogs.push({
 | 
			
		||||
        type: 'error',
 | 
			
		||||
        message: 'Error occurred while deploying'
 | 
			
		||||
        message: resultMsg
 | 
			
		||||
      })
 | 
			
		||||
    } else {
 | 
			
		||||
      state.deployLogs.push({
 | 
			
		||||
        type: 'error',
 | 
			
		||||
        message: `[${submitRes.error}] ${submitRes.error_exception}`
 | 
			
		||||
      })
 | 
			
		||||
    }
 | 
			
		||||
    if (currentAccount) {
 | 
			
		||||
      currentAccount.isLoading = false
 | 
			
		||||
    }
 | 
			
		||||
    return submitRes
 | 
			
		||||
  } catch (err) {
 | 
			
		||||
    console.error(err)
 | 
			
		||||
    state.deployLogs.push({
 | 
			
		||||
      type: 'error',
 | 
			
		||||
      message: 'Error occurred while deploying'
 | 
			
		||||
    })
 | 
			
		||||
  }
 | 
			
		||||
  if (currentAccount) {
 | 
			
		||||
    currentAccount.isLoading = false
 | 
			
		||||
  }
 | 
			
		||||
  return submitRes
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export const deleteHook = async (account: IAccount & { name?: string }) => {
 | 
			
		||||
@@ -198,77 +189,73 @@ export const deleteHook = async (account: IAccount & { name?: string }) => {
 | 
			
		||||
  if (currentAccount?.isLoading || !currentAccount?.hooks.length) {
 | 
			
		||||
    return
 | 
			
		||||
  }
 | 
			
		||||
  if (typeof window !== 'undefined') {
 | 
			
		||||
    const tx = {
 | 
			
		||||
      Account: account.address,
 | 
			
		||||
      TransactionType: 'SetHook',
 | 
			
		||||
      Sequence: account.sequence,
 | 
			
		||||
      Fee: '100000',
 | 
			
		||||
      Hooks: [
 | 
			
		||||
        {
 | 
			
		||||
          Hook: {
 | 
			
		||||
            CreateCode: '',
 | 
			
		||||
            Flags: 1
 | 
			
		||||
          }
 | 
			
		||||
  const tx = {
 | 
			
		||||
    Account: account.address,
 | 
			
		||||
    TransactionType: 'SetHook',
 | 
			
		||||
    Sequence: account.sequence,
 | 
			
		||||
    Fee: '100000',
 | 
			
		||||
    NetworkID: process.env.NEXT_PUBLIC_NETWORK_ID,
 | 
			
		||||
    Hooks: [
 | 
			
		||||
      {
 | 
			
		||||
        Hook: {
 | 
			
		||||
          CreateCode: '',
 | 
			
		||||
          Flags: 1
 | 
			
		||||
        }
 | 
			
		||||
      ]
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    const keypair = derive.familySeed(account.secret)
 | 
			
		||||
    try {
 | 
			
		||||
      // Update tx Fee value with network estimation
 | 
			
		||||
      const res = await estimateFee(tx, account)
 | 
			
		||||
      tx['Fee'] = res?.base_fee ? res?.base_fee : '1000'
 | 
			
		||||
    } catch (err) {
 | 
			
		||||
      // use default value what you defined earlier
 | 
			
		||||
      console.log(err)
 | 
			
		||||
    }
 | 
			
		||||
    const { signedTransaction } = sign(tx, keypair)
 | 
			
		||||
 | 
			
		||||
    if (currentAccount) {
 | 
			
		||||
      currentAccount.isLoading = true
 | 
			
		||||
    }
 | 
			
		||||
    let submitRes
 | 
			
		||||
    const toastId = toast.loading('Deleting hook...')
 | 
			
		||||
    try {
 | 
			
		||||
      submitRes = await xrplSend({
 | 
			
		||||
        command: 'submit',
 | 
			
		||||
        tx_blob: signedTransaction
 | 
			
		||||
      })
 | 
			
		||||
 | 
			
		||||
      if (submitRes.engine_result === 'tesSUCCESS') {
 | 
			
		||||
        toast.success('Hook deleted successfully ✅', { id: toastId })
 | 
			
		||||
        state.deployLogs.push({
 | 
			
		||||
          type: 'success',
 | 
			
		||||
          message: 'Hook deleted successfully ✅'
 | 
			
		||||
        })
 | 
			
		||||
        state.deployLogs.push({
 | 
			
		||||
          type: 'success',
 | 
			
		||||
          message: `[${submitRes.engine_result}] ${submitRes.engine_result_message} Validated ledger index: ${submitRes.validated_ledger_index}`
 | 
			
		||||
        })
 | 
			
		||||
        currentAccount.hooks = []
 | 
			
		||||
      } else {
 | 
			
		||||
        toast.error(`${submitRes.engine_result_message || submitRes.error_exception}`, {
 | 
			
		||||
          id: toastId
 | 
			
		||||
        })
 | 
			
		||||
        state.deployLogs.push({
 | 
			
		||||
          type: 'error',
 | 
			
		||||
          message: `[${submitRes.engine_result || submitRes.error}] ${
 | 
			
		||||
            submitRes.engine_result_message || submitRes.error_exception
 | 
			
		||||
          }`
 | 
			
		||||
        })
 | 
			
		||||
      }
 | 
			
		||||
    } catch (err) {
 | 
			
		||||
      console.log(err)
 | 
			
		||||
      toast.error('Error occurred while deleting hook', { id: toastId })
 | 
			
		||||
    ]
 | 
			
		||||
  }
 | 
			
		||||
  const keypair = derive.familySeed(account.secret)
 | 
			
		||||
  try {
 | 
			
		||||
    // Update tx Fee value with network estimation
 | 
			
		||||
    const res = await estimateFee(tx, account)
 | 
			
		||||
    tx['Fee'] = res?.base_fee || '1000'
 | 
			
		||||
  } catch (err) {
 | 
			
		||||
    console.error(err)
 | 
			
		||||
  }
 | 
			
		||||
  const { signedTransaction } = sign(tx, keypair)
 | 
			
		||||
  if (currentAccount) {
 | 
			
		||||
    currentAccount.isLoading = true
 | 
			
		||||
  }
 | 
			
		||||
  let submitRes
 | 
			
		||||
  const toastId = toast.loading('Deleting hook...')
 | 
			
		||||
  try {
 | 
			
		||||
    submitRes = await xrplSend({
 | 
			
		||||
      command: 'submit',
 | 
			
		||||
      tx_blob: signedTransaction
 | 
			
		||||
    })
 | 
			
		||||
 | 
			
		||||
    if (submitRes.engine_result === 'tesSUCCESS') {
 | 
			
		||||
      toast.success('Hook deleted successfully ✅', { id: toastId })
 | 
			
		||||
      state.deployLogs.push({
 | 
			
		||||
        type: 'success',
 | 
			
		||||
        message: 'Hook deleted successfully ✅'
 | 
			
		||||
      })
 | 
			
		||||
      state.deployLogs.push({
 | 
			
		||||
        type: 'success',
 | 
			
		||||
        message: `[${submitRes.engine_result}] ${submitRes.engine_result_message} Validated ledger index: ${submitRes.validated_ledger_index}`
 | 
			
		||||
      })
 | 
			
		||||
      currentAccount.hooks = []
 | 
			
		||||
    } else {
 | 
			
		||||
      toast.error(`${submitRes.engine_result_message || submitRes.error_exception}`, {
 | 
			
		||||
        id: toastId
 | 
			
		||||
      })
 | 
			
		||||
      state.deployLogs.push({
 | 
			
		||||
        type: 'error',
 | 
			
		||||
        message: 'Error occurred while deleting hook'
 | 
			
		||||
        message: `[${submitRes.engine_result || submitRes.error}] ${
 | 
			
		||||
          submitRes.engine_result_message || submitRes.error_exception
 | 
			
		||||
        }`
 | 
			
		||||
      })
 | 
			
		||||
    }
 | 
			
		||||
    if (currentAccount) {
 | 
			
		||||
      currentAccount.isLoading = false
 | 
			
		||||
    }
 | 
			
		||||
    return submitRes
 | 
			
		||||
  } catch (err) {
 | 
			
		||||
    console.log(err)
 | 
			
		||||
    toast.error('Error occurred while deleting hook', { id: toastId })
 | 
			
		||||
    state.deployLogs.push({
 | 
			
		||||
      type: 'error',
 | 
			
		||||
      message: 'Error occurred while deleting hook'
 | 
			
		||||
    })
 | 
			
		||||
  }
 | 
			
		||||
  if (currentAccount) {
 | 
			
		||||
    currentAccount.isLoading = false
 | 
			
		||||
  }
 | 
			
		||||
  return submitRes
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
@@ -27,10 +27,14 @@ export const sendTransaction = async (
 | 
			
		||||
    Account: account.address,
 | 
			
		||||
    Sequence: account.sequence,
 | 
			
		||||
    Fee,
 | 
			
		||||
    NetworkID: process.env.NEXT_PUBLIC_NETWORK_ID || state.client.getState().server.networkId,
 | 
			
		||||
    NetworkID: process.env.NEXT_PUBLIC_NETWORK_ID,
 | 
			
		||||
    ...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)
 | 
			
		||||
 
 | 
			
		||||
@@ -5,28 +5,46 @@ import state from '.'
 | 
			
		||||
import { showAlert } from '../state/actions/showAlert'
 | 
			
		||||
import { parseJSON } from '../utils/json'
 | 
			
		||||
import { extractFlags, getFlags } from './constants/flags'
 | 
			
		||||
import { fromHex } from '../utils/setHook'
 | 
			
		||||
 | 
			
		||||
export type SelectOption = {
 | 
			
		||||
  value: string
 | 
			
		||||
  label: string
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export type HookParameters = {
 | 
			
		||||
  [key: string]: SelectOption
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export type Memos = {
 | 
			
		||||
  [key: string]: {
 | 
			
		||||
    type: string
 | 
			
		||||
    format: string
 | 
			
		||||
    data: string
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export interface TransactionState {
 | 
			
		||||
  selectedTransaction: SelectOption | null
 | 
			
		||||
  selectedAccount: SelectOption | null
 | 
			
		||||
  selectedDestAccount: SelectOption | null
 | 
			
		||||
  selectedFlags: SelectOption[] | null
 | 
			
		||||
  hookParameters: HookParameters
 | 
			
		||||
  memos: Memos
 | 
			
		||||
  txIsLoading: boolean
 | 
			
		||||
  txIsDisabled: boolean
 | 
			
		||||
  txFields: TxFields
 | 
			
		||||
  viewType: 'json' | 'ui'
 | 
			
		||||
  editorValue?: string
 | 
			
		||||
  editorIsSaved: boolean
 | 
			
		||||
  estimatedFee?: string
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
const commonFields = ['TransactionType', 'Account', 'Sequence', "HookParameters"] as const;
 | 
			
		||||
 | 
			
		||||
export type TxFields = Omit<
 | 
			
		||||
  Partial<typeof transactionsData[0]>,
 | 
			
		||||
  'Account' | 'Sequence' | 'TransactionType'
 | 
			
		||||
  typeof commonFields[number]
 | 
			
		||||
>
 | 
			
		||||
 | 
			
		||||
export const defaultTransaction: TransactionState = {
 | 
			
		||||
@@ -34,6 +52,9 @@ export const defaultTransaction: TransactionState = {
 | 
			
		||||
  selectedAccount: null,
 | 
			
		||||
  selectedDestAccount: null,
 | 
			
		||||
  selectedFlags: null,
 | 
			
		||||
  hookParameters: {},
 | 
			
		||||
  memos: {},
 | 
			
		||||
  editorIsSaved: true,
 | 
			
		||||
  txIsLoading: false,
 | 
			
		||||
  txIsDisabled: false,
 | 
			
		||||
  txFields: {},
 | 
			
		||||
@@ -158,7 +179,7 @@ export const prepareState = (value: string, transactionType?: string) => {
 | 
			
		||||
    return
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  const { Account, TransactionType, Destination, ...rest } = options
 | 
			
		||||
  const { Account, TransactionType, Destination, HookParameters, Memos, ...rest } = options
 | 
			
		||||
  let tx: Partial<TransactionState> = {}
 | 
			
		||||
  const schema = getTxFields(transactionType)
 | 
			
		||||
 | 
			
		||||
@@ -188,6 +209,22 @@ export const prepareState = (value: string, transactionType?: string) => {
 | 
			
		||||
    tx.selectedTransaction = null
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  if (HookParameters && HookParameters instanceof Array) {
 | 
			
		||||
    tx.hookParameters = HookParameters.reduce<TransactionState["hookParameters"]>((acc, cur, idx) => {
 | 
			
		||||
      const param = { label: fromHex(cur.HookParameter?.HookParameterName || ""), value: fromHex(cur.HookParameter?.HookParameterValue || "") }
 | 
			
		||||
      acc[idx] = param;
 | 
			
		||||
      return acc;
 | 
			
		||||
    }, {})
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  if (Memos && Memos instanceof Array) {
 | 
			
		||||
    tx.memos = Memos.reduce<TransactionState["memos"]>((acc, cur, idx) => {
 | 
			
		||||
      const memo = { data: fromHex(cur.Memo?.MemoData || ""), type: fromHex(cur.Memo?.MemoType || ""), format: fromHex(cur.Memo?.MemoFormat || "") }
 | 
			
		||||
      acc[idx] = memo;
 | 
			
		||||
      return acc;
 | 
			
		||||
    }, {})
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  if (schema.Destination !== undefined) {
 | 
			
		||||
    const dest = state.accounts.find(acc => acc.address === Destination)
 | 
			
		||||
    if (dest) {
 | 
			
		||||
@@ -236,6 +273,7 @@ export const prepareState = (value: string, transactionType?: string) => {
 | 
			
		||||
  })
 | 
			
		||||
 | 
			
		||||
  tx.txFields = rest
 | 
			
		||||
  tx.editorIsSaved = true;
 | 
			
		||||
 | 
			
		||||
  return tx
 | 
			
		||||
}
 | 
			
		||||
@@ -246,12 +284,12 @@ export const getTxFields = (tt?: string) => {
 | 
			
		||||
  if (!txFields) return {}
 | 
			
		||||
 | 
			
		||||
  let _txFields = Object.keys(txFields)
 | 
			
		||||
    .filter(key => !['TransactionType', 'Account', 'Sequence'].includes(key))
 | 
			
		||||
    .filter(key => !commonFields.includes(key as any))
 | 
			
		||||
    .reduce<TxFields>((tf, key) => ((tf[key as keyof TxFields] = (txFields as any)[key]), tf), {})
 | 
			
		||||
  return _txFields
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export { transactionsData }
 | 
			
		||||
export { transactionsData, commonFields }
 | 
			
		||||
 | 
			
		||||
export const transactionsOptions = transactionsData.map(tx => ({
 | 
			
		||||
  value: tx.TransactionType,
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										31
									
								
								utils/accountInfo.ts
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										31
									
								
								utils/accountInfo.ts
									
									
									
									
									
										Normal file
									
								
							@@ -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
 | 
			
		||||
@@ -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
 | 
			
		||||
 
 | 
			
		||||
@@ -20,6 +20,13 @@ export type SetHookData = {
 | 
			
		||||
    }
 | 
			
		||||
    $metaData?: any
 | 
			
		||||
  }[]
 | 
			
		||||
  Memos?: {
 | 
			
		||||
    Memo: {
 | 
			
		||||
      MemoType: string,
 | 
			
		||||
      MemoData: string
 | 
			
		||||
      MemoFormat: string
 | 
			
		||||
    }
 | 
			
		||||
  }[]
 | 
			
		||||
  // HookGrants: {
 | 
			
		||||
  //   HookGrant: {
 | 
			
		||||
  //     Authorize: string;
 | 
			
		||||
@@ -74,3 +81,19 @@ export const getInvokeOptions = (content?: string) => {
 | 
			
		||||
 | 
			
		||||
  return invokeOptions
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export function toHex(str: string) {
 | 
			
		||||
  var result = ''
 | 
			
		||||
  for (var i = 0; i < str.length; i++) {
 | 
			
		||||
    result += str.charCodeAt(i).toString(16)
 | 
			
		||||
  }
 | 
			
		||||
  return result.toUpperCase()
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
export function fromHex(hex: string) {
 | 
			
		||||
  var str = ''
 | 
			
		||||
  for (var i = 0; i < hex.length; i += 2) {
 | 
			
		||||
    str += String.fromCharCode(parseInt(hex.substring(i, i + 2), 16))
 | 
			
		||||
  }
 | 
			
		||||
  return str
 | 
			
		||||
}
 | 
			
		||||
		Reference in New Issue
	
	Block a user