ARCHIVE/xrpl-hooks-ide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor tx.

Browse Source
This commit is contained in:
muzam1l
2023-03-03 16:00:43 +05:30
parent 82c06cbb12
commit b50b300307
3 changed files with 112 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
components/Select.tsx
View File

@@ -38,7 +38,8 @@ const Select = forwardRef<any, Props>((props, ref) => {
container: provided => { container: provided => {
return { return {
...provided, ...provided,
position: 'relative' position: 'relative',
width: '100%'
} }
}, },
singleValue: provided => ({ singleValue: provided => ({

250
components/Transaction/ui.tsx
View File

@@ -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 Container from '../Container'
import Flex from '../Flex' import Flex from '../Flex'
import Input from '../Input' import Input from '../Input'
@@ -18,6 +18,7 @@ import { streamState } from '../DebugStream'
import { Button } from '..' import { Button } from '..'
import Textarea from '../Textarea' import Textarea from '../Textarea'
import { getFlags } from '../../state/constants/flags' import { getFlags } from '../../state/constants/flags'
import { Plus, Trash } from 'phosphor-react'
interface UIProps { interface UIProps {
setState: (pTx?: Partial<TransactionState> | undefined) => TransactionState | undefined 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 otherFields = Object.keys(txFields).filter(k => !richFields.includes(k)) as [keyof TxFields]
const hookParams = [{ id: 1 }]
return ( return (
<Container <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 column fluid css={{ height: '100%', overflowY: 'auto', pr: '$1' }}>
<Flex <TxField label="Transaction type">
row
fluid
css={{
justifyContent: 'flex-end',
alignItems: 'center',
mb: '$3',
mt: '1px',
pr: '1px'
}}
>
<Text muted css={{ mr: '$3' }}>
Transaction type:{' '}
</Text>
<Select <Select
instanceId="transactionsType" instanceId="transactionsType"
placeholder="Select transaction type" placeholder="Select transaction type"
options={transactionsOptions} options={transactionsOptions}
hideSelectedOptions hideSelectedOptions
css={{ width: '70%' }}
value={selectedTransaction} value={selectedTransaction}
onChange={(tt: any) => handleChangeTxType(tt)} onChange={(tt: any) => handleChangeTxType(tt)}
/> />
</Flex> </TxField>
<Flex <TxField label="Account">
row
fluid
css={{
justifyContent: 'flex-end',
alignItems: 'center',
mb: '$3',
pr: '1px'
}}
>
<Text muted css={{ mr: '$3' }}>
Account:{' '}
</Text>
<Select <Select
instanceId="from-account" instanceId="from-account"
placeholder="Select your account" placeholder="Select your account"
css={{ width: '70%' }}
options={accountOptions} options={accountOptions}
value={selectedAccount} value={selectedAccount}
onChange={(acc: any) => handleSetAccount(acc)} // TODO make react-select have correct types for acc onChange={(acc: any) => handleSetAccount(acc)} // TODO make react-select have correct types for acc
/> />
</Flex> </TxField>
{richFields.includes('Destination') && ( {richFields.includes('Destination') && (
<Flex <TxField label="Destination account">
row
fluid
css={{
justifyContent: 'flex-end',
alignItems: 'center',
mb: '$3',
pr: '1px'
}}
>
<Text muted css={{ mr: '$3', textAlign: 'end' }}>
Destination account:{' '}
</Text>
<Select <Select
instanceId="to-account" instanceId="to-account"
placeholder="Select the destination account" placeholder="Select the destination account"
css={{ width: '70%' }}
options={destAccountOptions} options={destAccountOptions}
value={selectedDestAccount} value={selectedDestAccount}
isClearable isClearable
onChange={(acc: any) => setState({ selectedDestAccount: acc })} onChange={(acc: any) => setState({ selectedDestAccount: acc })}
/> />
</Flex> </TxField>
)} )}
{richFields.includes('Flags') && ( {richFields.includes('Flags') && (
<Flex <TxField label="Flags">
row
fluid
css={{
justifyContent: 'flex-end',
alignItems: 'center',
mb: '$3',
pr: '1px'
}}
>
<Text muted css={{ mr: '$3' }}>
Flags:{' '}
</Text>
<Select <Select
isClearable isClearable
css={{ width: '70%' }}
instanceId="flags" instanceId="flags"
placeholder="Select flags to apply" placeholder="Select flags to apply"
menuPosition="fixed" menuPosition="fixed"
@@ -229,7 +178,7 @@ export const TxUI: FC<UIProps> = ({ state: txState, setState, resetState, estima
selectedFlags ? selectedFlags.length >= flagsOptions.length - 1 : false selectedFlags ? selectedFlags.length >= flagsOptions.length - 1 : false
} }
/> />
</Flex> </TxField>
)} )}
{otherFields.map(field => { {otherFields.map(field => {
let _value = txFields[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 let rows = isJson ? (value?.match(/\n/gm)?.length || 0) + 1 : undefined
if (rows && rows > 5) rows = 5 if (rows && rows > 5) rows = 5
return ( return (
<Flex column key={field} css={{ mb: '$2', pr: '1px' }}> <TxField key={field} label={field + (isXrp ? ' (XRP)' : '')}>
<Flex {isJson ? (
row <Textarea
fluid rows={rows}
css={{ value={value}
justifyContent: 'flex-end', spellCheck={false}
alignItems: 'center', onChange={switchToJson}
position: 'relative' css={{
}} flex: 'inherit',
> resize: 'vertical'
<Text muted css={{ mr: '$3' }}> }}
{field + (isXrp ? ' (XRP)' : '')}:{' '} />
</Text> ) : (
{isJson ? ( <Input
<Textarea type={isFee ? 'number' : 'text'}
rows={rows} value={value}
value={value} onChange={e => {
spellCheck={false} if (isFee) {
onChange={switchToJson} const val = e.target.value.replaceAll('.', '').replaceAll(',', '')
css={{ handleSetField(field, val)
width: '70%', } else {
flex: 'inherit', handleSetField(field, e.target.value)
resize: 'vertical'
}}
/>
) : (
<Input
type={isFee ? 'number' : 'text'}
value={value}
onChange={e => {
if (isFee) {
const val = e.target.value.replaceAll('.', '').replaceAll(',', '')
handleSetField(field, val)
} else {
handleSetField(field, e.target.value)
}
}}
onKeyPress={
isFee
? e => {
if (e.key === '.' || e.key === ',') {
e.preventDefault()
}
}
: undefined
} }
css={{ }}
width: '70%', onKeyPress={
flex: 'inherit', isFee
'-moz-appearance': 'textfield', ? e => {
'&::-webkit-outer-spin-button': { if (e.key === '.' || e.key === ',') {
'-webkit-appearance': 'none', e.preventDefault()
margin: 0 }
}, }
'&::-webkit-inner-spin-button ': { : undefined
'-webkit-appearance': 'none', }
margin: 0 css={{
} flex: 'inherit',
}} '-moz-appearance': 'textfield',
/> '&::-webkit-outer-spin-button': {
)} '-webkit-appearance': 'none',
{isFee && ( margin: 0
<Button },
size="xs" '&::-webkit-inner-spin-button ': {
variant="primary" '-webkit-appearance': 'none',
outline margin: 0
disabled={txState.txIsDisabled} }
isDisabled={txState.txIsDisabled} }}
isLoading={feeLoading} />
css={{ )}
position: 'absolute', {isFee && (
right: '$2', <Button
fontSize: '$xs', size="xs"
cursor: 'pointer', variant="primary"
alignContent: 'center', outline
display: 'flex' disabled={txState.txIsDisabled}
}} isDisabled={txState.txIsDisabled}
onClick={() => handleEstimateFee()} isLoading={feeLoading}
> css={{
Suggest position: 'absolute',
</Button> right: '$2',
)} fontSize: '$xs',
</Flex> cursor: 'pointer',
</Flex> alignContent: 'center',
display: 'flex'
}}
onClick={() => handleEstimateFee()}
>
Suggest
</Button>
)}
</TxField>
) )
})} })}
</Flex> </Flex>
</Container> </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>
)
}

8
state/transactions.ts
View File

@@ -24,9 +24,11 @@ export interface TransactionState {
estimatedFee?: string estimatedFee?: string
} }
const commonFields = ['TransactionType', 'Account', 'Sequence', "HookParameters"] as const;
export type TxFields = Omit< export type TxFields = Omit<
Partial<typeof transactionsData[0]>, Partial<typeof transactionsData[0]>,
'Account' | 'Sequence' | 'TransactionType' typeof commonFields[number]
> >
export const defaultTransaction: TransactionState = { export const defaultTransaction: TransactionState = {
@@ -246,12 +248,12 @@ export const getTxFields = (tt?: string) => {
if (!txFields) return {} if (!txFields) return {}
let _txFields = Object.keys(txFields) 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), {}) .reduce<TxFields>((tf, key) => ((tf[key as keyof TxFields] = (txFields as any)[key]), tf), {})
return _txFields return _txFields
} }
export { transactionsData } export { transactionsData, commonFields }
export const transactionsOptions = transactionsData.map(tx => ({ export const transactionsOptions = transactionsData.map(tx => ({
value: tx.TransactionType, value: tx.TransactionType,