Refactor tx.
This commit is contained in:
muzam1l
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user