Add DeliverMin field to tx CheckCash.

components/Select.tsx

@@ -39,7 +39,7 @@ const Select = forwardRef<any, Props>((props, ref) => {
           return {
             ...provided,
             position: 'relative',
-            width: '100%'
+            width: '100%',
           }
         },
         singleValue: provided => ({
@@ -108,9 +108,10 @@ const Select = forwardRef<any, Props>((props, ref) => {
         dropdownIndicator: (provided, state) => {
           return {
             ...provided,
+            padding: 6,
             color: state.isFocused ? colors.border : colors.secondary,
             ':hover': {
-              color: colors.border
+              color: colors.border,
             }
           }
         }

components/Transaction/ui.tsx

@@ -15,11 +15,12 @@ import {
 import { useSnapshot } from 'valtio'
 import state from '../../state'
 import { streamState } from '../DebugStream'
-import { Button } from '..'
+import { Box, Button } from '..'
 import Textarea from '../Textarea'
 import { getFlags } from '../../state/constants/flags'
 import { Plus, Trash } from 'phosphor-react'
 import AccountSequence from '../Sequence'
+import { typeIs } from '../../utils/helpers'
 
 interface UIProps {
   setState: (pTx?: Partial<TransactionState> | undefined) => TransactionState | undefined
@@ -87,6 +88,22 @@ export const TxUI: FC<UIProps> = ({
     [setState, txFields]
   )
 
+  const setRawField = useCallback(
+    (field: keyof TxFields, type: string, value: any) => {
+      // TODO $type should be a narrowed type
+      setState({
+        txFields: {
+          ...txFields,
+          [field]: {
+            $type: type,
+            $value: value
+          }
+        }
+      })
+    },
+    [setState, txFields]
+  )
+
   const handleEstimateFee = useCallback(
     async (state?: TransactionState, silent?: boolean) => {
       setFeeLoading(true)
@@ -134,6 +151,16 @@ export const TxUI: FC<UIProps> = ({
   }
 
   const otherFields = Object.keys(txFields).filter(k => !richFields.includes(k)) as [keyof TxFields]
+  const amountOptions = [
+    { label: 'XRP', value: 'xrp' },
+    { label: 'Token', value: 'token' }
+  ] as const
+
+  const defaultTokenAmount = {
+    value: '0',
+    currency: '',
+    issuer: ''
+  }
   return (
     <Container
       css={{
@@ -198,23 +225,106 @@ export const TxUI: FC<UIProps> = ({
           let _value = txFields[field]
 
           let value: string | undefined
-          if (typeof _value === 'object') {
+          if (typeIs(_value, 'object')) {
-            if (_value.$type === 'json' && typeof _value.$value === 'object') {
+            if (_value.$type === 'json' && typeIs(_value.$value, ['object', 'array'])) {
               value = JSON.stringify(_value.$value, null, 2)
             } else {
-              value = _value.$value.toString()
+              value = _value.$value?.toString()
             }
           } else {
             value = _value?.toString()
           }
 
-          const isXrp = typeof _value === 'object' && _value.$type === 'xrp'
+          const isXrpAmount = typeIs(_value, 'object') && _value.$type === 'amount.xrp'
+          const isTokenAmount = typeIs(_value, 'object') && _value.$type === 'amount.token'
           const isJson = typeof _value === 'object' && _value.$type === 'json'
           const isFee = field === 'Fee'
           let rows = isJson ? (value?.match(/\n/gm)?.length || 0) + 1 : undefined
           if (rows && rows > 5) rows = 5
+          let tokenAmount = defaultTokenAmount
+          if (isTokenAmount && typeIs(_value, 'object') && typeIs(_value.$value, 'object')) {
+            tokenAmount = {
+              value: _value.$value.value,
+              currency: _value.$value.currency,
+              issuer: _value.$value.issuer
+            }
+          }
+
+          if (isXrpAmount || isTokenAmount) {
+            return (
+              <TxField key={field} label={field}>
+                <Flex fluid css={{ alignItems: 'center' }}>
+                  {isTokenAmount ? (
+                    <Flex fluid row align="center" justify="space-between">
+                      <Input
+                        type="text"
+                        placeholder="Issuer"
+                        value={tokenAmount.issuer}
+                        onChange={e =>
+                          setRawField(field, 'amount.token', {
+                            ...tokenAmount,
+                            issuer: e.target.value
+                          })
+                        }
+                      />
+                      <Input
+                        css={{ mx: '$1' }}
+                        type="text"
+                        value={tokenAmount.currency}
+                        placeholder="Currency"
+                        onChange={e => {
+                          setRawField(field, 'amount.token', {
+                            ...tokenAmount,
+                            currency: e.target.value
+                          })
+                        }}
+                      />
+                      <Input
+                        type="number"
+                        value={tokenAmount.value}
+                        placeholder="Value"
+                        onChange={e => {
+                          setRawField(field, 'amount.token', {
+                            ...tokenAmount,
+                            value: e.target.value
+                          })
+                        }}
+                      />
+                    </Flex>
+                  ) : (
+                    <Input
+                      css={{ flex: 'inherit' }}
+                      type="number"
+                      value={value}
+                      onChange={e => handleSetField(field, e.target.value)}
+                    />
+                  )}
+                  <Box
+                    css={{
+                      ml: '$2',
+                      width: '150px'
+                    }}
+                  >
+                    <Select
+                      instanceId="currency-type"
+                      options={amountOptions}
+                      value={isXrpAmount ? amountOptions['0'] : amountOptions['1']}
+                      onChange={(e: any) => {
+                        const opt = e as typeof amountOptions[number]
+                        if (opt.value === 'xrp') {
+                          setRawField(field, 'amount.xrp', '0')
+                        } else {
+                          setRawField(field, 'amount.token', defaultTokenAmount)
+                        }
+                      }}
+                    />
+                  </Box>
+                </Flex>
+              </TxField>
+            )
+          }
           return (
-            <TxField key={field} label={field + (isXrp ? ' (XRP)' : '')}>
+            <TxField key={field} label={field}>
               {isJson ? (
                 <Textarea
                   rows={rows}
@@ -438,7 +548,7 @@ export const TxField: FC<{ label: string; children: ReactNode; multiLine?: boole
         justifyContent: 'flex-end',
         alignItems: multiLine ? 'flex-start' : 'center',
         position: 'relative',
-        mb: '$3',
+        mb: '$2',
         mt: '1px',
         pr: '1px'
       }}

content/transactions.json

@@ -28,7 +28,11 @@
     "TransactionType": "CheckCash",
     "Amount": {
       "$value": "100",
-      "$type": "xrp"
+      "$type": "amount.xrp"
+    },
+    "DeliverMin": {
+      "$value": "",
+      "$type": "amount.xrp"
     },
     "CheckID": "838766BA2B995C00744175F69A1B11E32C3DBC40E64801A4056FCBD657F57334",
     "Fee": "12"
@@ -63,7 +67,7 @@
     "TransactionType": "EscrowCreate",
     "Amount": {
       "$value": "100",
-      "$type": "xrp"
+      "$type": "amount.xrp"
     },
     "Destination": "rsA2LpzuawewSBQXkiju3YQTMzW13pAAdW",
     "CancelAfter": 533257958,
@@ -120,12 +124,11 @@
     "NFTokenID": "000100001E962F495F07A990F4ED55ACCFEEF365DBAA76B6A048C0A200000007",
     "Amount": {
       "$value": "100",
-      "$type": "xrp"
+      "$type": "amount.xrp"
     },
     "Flags": "1",
     "Destination": "",
-    "Fee": "10",
+    "Fee": "10"
-    "Owner": ""
   },
   {
     "TransactionType": "OfferCancel",
@@ -143,10 +146,17 @@
     "Flags": "0",
     "LastLedgerSequence": 7108682,
     "Sequence": 8,
-    "TakerGets": "6000000",
+    "TakerGets": {
-    "Amount": {
+      "$type": "amount.xrp",
-      "$value": "100",
+      "$value": "6000000"
-      "$type": "xrp"
+    },
+    "TakerPays": {
+      "$type": "amount.token",
+      "$value": {
+        "currency": "GKO",
+        "issuer": "ruazs5h1qEsqpke88pcqnaseXdm6od2xc",
+        "value": "2"
+      }
     }
   },
   {
@@ -155,7 +165,7 @@
     "Destination": "ra5nK24KXen9AHvsdFTKHSANinZseWnPcX",
     "Amount": {
       "$value": "100",
-      "$type": "xrp"
+      "$type": "amount.xrp"
     },
     "Fee": "12",
     "Flags": "2147483648",
@@ -166,7 +176,7 @@
     "TransactionType": "PaymentChannelCreate",
     "Amount": {
       "$value": "100",
-      "$type": "xrp"
+      "$type": "amount.xrp"
     },
     "Destination": "rsA2LpzuawewSBQXkiju3YQTMzW13pAAdW",
     "SettleDelay": 86400,
@@ -182,7 +192,7 @@
     "Channel": "C1AE6DDDEEC05CF2978C0BAD6FE302948E9533691DC749DCDD3B9E5992CA6198",
     "Amount": {
       "$value": "200",
-      "$type": "xrp"
+      "$type": "amount.xrp"
     },
     "Expiration": 543171558,
     "Fee": "10"
@@ -238,7 +248,7 @@
     "Flags": "262144",
     "LastLedgerSequence": 8007750,
     "LimitAmount": {
-      "$type": "json",
+      "$type": "amount.token",
       "$value": {
         "currency": "USD",
         "issuer": "rsP3mgGb2tcYUrxiLFiHJiQXhsziegtwBc",

state/transactions.ts

@@ -6,6 +6,7 @@ import { showAlert } from '../state/actions/showAlert'
 import { parseJSON } from '../utils/json'
 import { extractFlags, getFlags } from './constants/flags'
 import { fromHex } from '../utils/setHook'
+import { typeIs } from '../utils/helpers'
 
 export type SelectOption = {
   value: string
@@ -136,31 +137,43 @@ export const prepareTransaction = (data: any) => {
 
   Object.keys(options).forEach(field => {
     let _value = options[field]
-    // convert xrp
+    if (!typeIs(_value, 'object')) return
-    if (_value && typeof _value === 'object' && _value.$type === 'xrp') {
+    // amount.xrp
-      if (+_value.$value) {
+    if (_value.$type === 'amount.xrp') {
-        options[field] = (+_value.$value * 1000000 + '') as any
+      if (_value.$value) {
+        options[field] = (+(_value as any).$value * 1000000 + '')
       } else {
-        options[field] = undefined // 👇 💀
+        options[field] = undefined
-      }
-    }
-    // handle type: `json`
-    if (_value && typeof _value === 'object' && _value.$type === 'json') {
-      if (typeof _value.$value === 'object') {
-        options[field] = _value.$value
-      } else {
-        try {
-          options[field] = JSON.parse(_value.$value)
-        } catch (error) {
-          const message = `Input error for json field '${field}': ${error instanceof Error ? error.message : ''
-            }`
-          console.error(message)
-          options[field] = _value.$value
-        }
       }
     }
 
-    // delete unnecessary fields
+    // amount.token
+    if (_value.$type === 'amount.token') {
+      if (typeIs(_value.$value, 'string')) {
+        options[field] = parseJSON(_value.$value)
+      } else if (typeIs(_value.$value, 'object')) {
+        options[field] = _value.$value
+      } else {
+        options[field] = undefined
+      }
+    }
+
+    // json
+    if (_value.$type === 'json') {
+      const val = _value.$value;
+      let res: any = val;
+      if (typeIs(val, ["object", "array"])) {
+        options[field] = res
+      } else if (typeIs(val, "string") && (res = parseJSON(val))) {
+        options[field] = res;
+      } else {
+        options[field] = res;
+      }
+    }
+  })
+
+  // delete unnecessary fields
+  Object.keys(options).forEach(field => {
     if (!options[field]) {
       delete options[field]
     }
@@ -254,16 +267,22 @@ export const prepareState = (value: string, transactionType?: string) => {
   Object.keys(rest).forEach(field => {
     const value = rest[field]
     const schemaVal = schema[field as keyof TxFields]
-    const isXrp =
+
-      typeof value !== 'object' &&
+    const isAmount = schemaVal &&
-      schemaVal &&
+      typeIs(schemaVal, "object") &&
-      typeof schemaVal === 'object' &&
+      schemaVal.$type.startsWith('amount.');
-      schemaVal.$type === 'xrp'
+
-    if (isXrp) {
+    if (isAmount && ["number", "string"].includes(typeof value)) {
       rest[field] = {
-        $type: 'xrp',
+        $type: 'amount.xrp', // Maybe have $type map or something
         $value: +value / 1000000 // ! maybe use bigint?
       }
+    }
+    else if (isAmount && typeof value === 'object') {
+      rest[field] = {
+        $type: 'amount.token',
+        $value: value
+      }
     } else if (typeof value === 'object') {
       rest[field] = {
         $type: 'json',

utils/estimateFee.ts

@@ -24,6 +24,9 @@ const estimateFee = async (
     const { signedTransaction } = sign(copyTx, keypair)
 
     const res = await xrplSend({ command: 'fee', tx_blob: signedTransaction })
+    if (res.error) {
+      throw new Error(`[${res.error}] ${res.error_exception}.`);
+    }
     if (res && res.drops) {
       return res.drops
     }
@@ -31,7 +34,8 @@ const estimateFee = async (
   } catch (err) {
     if (!opts.silent) {
       console.error(err)
-      toast.error('Cannot estimate fee.') // ? Some better msg
+      const msg = err instanceof Error ? err.message : 'Error estimating fee!';
+      toast.error(msg);
     }
     return null
   }

utils/helpers.ts

@@ -19,3 +19,17 @@ export const getFileExtention = (filename?: string): string | undefined => {
   const ext = (filename.includes('.') && filename.split('.').pop()) || undefined
   return ext
 }
+
+type Type = "array" | "undefined" | "object" | "string" | "number" | "bigint" | "boolean" | "symbol" | "function"
+type obj = Record<string | number | symbol, unknown>
+type arr = unknown[]
+
+export const typeIs = <T extends Type>(arg: any, t: T | T[]): arg is unknown & (T extends "array" ? arr : T extends "undefined" ? undefined | null : T extends "object" ? obj : T extends "string" ? string : T extends "number" ? number : T extends "bigint" ? bigint : T extends "boolean" ? boolean : T extends "symbol" ? symbol : T extends "function" ? Function : never) => {
+  const types = Array.isArray(t) ? t : [t]
+  return types.includes(typeOf(arg) as T);
+}
+
+export const typeOf = (arg: any): Type => {
+  const type = arg instanceof Array ? 'array' : arg === null ? 'undefined' : typeof arg
+  return type;
+}

utils/schema.ts

@@ -1,9 +1,8 @@
+import { typeIs, typeOf } from './helpers'
+
 export const extractSchemaProps = <O extends object>(obj: O) =>
   Object.entries(obj).reduce((prev, [key, val]) => {
-    const typeOf = <T>(arg: T) =>
+    const value = typeIs(val, "object") && '$type' in val && '$value' in val ? val?.$value : val
-      arg instanceof Array ? 'array' : arg === null ? 'undefined' : typeof arg
-
-    const value = typeOf(val) === 'object' && '$type' in val && '$value' in val ? val?.$value : val
     const type = typeOf(value)
 
     let schema: any = {
@@ -12,19 +11,19 @@ export const extractSchemaProps = <O extends object>(obj: O) =>
       default: value
     }
 
-    if (typeOf(value) === 'array') {
+    if (typeIs(value, "array")) {
       const item = value[0] // TODO merge other item schema's into one
-      if (typeOf(item) !== 'object') {
+      if (typeIs(item, "object")) {
         schema.items = {
           type: 'object',
           properties: extractSchemaProps(item),
           default: item
         }
       }
-      // TODO support primitive-value arrays
+      // TODO primitive-value arrays
     }
 
-    if (typeOf(value) === 'object') {
+    if (typeIs(value, "object")) {
       schema.properties = extractSchemaProps(value)
     }
     return {