Add Select UI for account.
This commit is contained in:
		@@ -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 ? (
 | 
			
		||||
 
 | 
			
		||||
@@ -10,7 +10,6 @@ interface TransactionOptions {
 | 
			
		||||
  TransactionType: string
 | 
			
		||||
  Account?: string
 | 
			
		||||
  Fee?: string
 | 
			
		||||
  Destination?: string
 | 
			
		||||
  [index: string]: any
 | 
			
		||||
}
 | 
			
		||||
interface OtherOptions {
 | 
			
		||||
 
 | 
			
		||||
@@ -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
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user