Transaction amount UI.

2023-03-17 16:49:00 +05:30
parent e1f34c4beb
commit 52e4f219f7
5 changed files with 196 additions and 49 deletions
--- a/components/Transaction/ui.tsx
+++ b/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,111 @@ export const TxUI: FC<UIProps> = ({
          let _value = txFields[field]

          let value: string | undefined
-          if (typeof _value === 'object') {
-            if (_value.$type === 'json' && typeof _value.$value === 'object') {
+          if (typeIs(_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
+                        type="text"
+                        value={tokenAmount.currency}
+                        placeholder="Currency"
+                        onChange={e => {
+                          setRawField(field, 'amount.token', {
+                            ...tokenAmount,
+                            currency: e.target.value
+                          })
+                        }}
+                      />
+                      <Input
+                        type="text"
+                        value={tokenAmount.value}
+                        placeholder="Value"
+                        onChange={e => {
+                          setRawField(field, 'amount.token', {
+                            ...tokenAmount,
+                            value: e.target.value
+                          })
+                        }}
+                      />
+                    </Flex>
+                  ) : (
+                    <Input
+                      css={{ flex: 'inherit' }}
+                      type="text"
+                      value={value}
+                      onChange={e => handleSetField(field, e.target.value)}
+                      onKeyPress={e => {
+                        if (e.key === '.' || e.key === ',') {
+                          e.preventDefault()
+                        }
+                      }}
+                    />
+                  )}
+                  <Box
+                    css={{
+                      ml: '$1',
+                      width: '200px'
+                    }}
+                  >
+                    <Select
+                      instanceId="currency"
+                      placeholder="Select currency"
+                      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}
--- a/content/transactions.json
+++ b/content/transactions.json
@@ -28,7 +28,7 @@
    "TransactionType": "CheckCash",
    "Amount": {
      "$value": "100",
-      "$type": "xrp"
+      "$type": "amount.xrp"
    },
    "CheckID": "838766BA2B995C00744175F69A1B11E32C3DBC40E64801A4056FCBD657F57334",
    "Fee": "12"
@@ -63,7 +63,7 @@
    "TransactionType": "EscrowCreate",
    "Amount": {
      "$value": "100",
-      "$type": "xrp"
+      "$type": "amount.xrp"
    },
    "Destination": "rsA2LpzuawewSBQXkiju3YQTMzW13pAAdW",
    "CancelAfter": 533257958,
@@ -120,7 +120,7 @@
    "NFTokenID": "000100001E962F495F07A990F4ED55ACCFEEF365DBAA76B6A048C0A200000007",
    "Amount": {
      "$value": "100",
-      "$type": "xrp"
+      "$type": "amount.xrp"
    },
    "Flags": "1",
    "Destination": "",
@@ -145,7 +145,7 @@
    "TakerGets": "6000000",
    "Amount": {
      "$value": "100",
-      "$type": "xrp"
+      "$type": "amount.xrp"
    }
  },
  {
@@ -154,7 +154,7 @@
    "Destination": "ra5nK24KXen9AHvsdFTKHSANinZseWnPcX",
    "Amount": {
      "$value": "100",
-      "$type": "xrp"
+      "$type": "amount.xrp"
    },
    "Fee": "12",
    "Flags": "2147483648",
@@ -165,7 +165,7 @@
    "TransactionType": "PaymentChannelCreate",
    "Amount": {
      "$value": "100",
-      "$type": "xrp"
+      "$type": "amount.xrp"
    },
    "Destination": "rsA2LpzuawewSBQXkiju3YQTMzW13pAAdW",
    "SettleDelay": 86400,
@@ -181,7 +181,7 @@
    "Channel": "C1AE6DDDEEC05CF2978C0BAD6FE302948E9533691DC749DCDD3B9E5992CA6198",
    "Amount": {
      "$value": "200",
-      "$type": "xrp"
+      "$type": "amount.xrp"
    },
    "Expiration": 543171558,
    "Fee": "10"
@@ -237,7 +237,7 @@
    "Flags": "262144",
    "LastLedgerSequence": 8007750,
    "LimitAmount": {
-      "$type": "json",
+      "$type": "amount.token",
      "$value": {
        "currency": "USD",
        "issuer": "rsP3mgGb2tcYUrxiLFiHJiQXhsziegtwBc",
--- a/state/transactions.ts
+++ b/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 (_value && typeof _value === 'object' && _value.$type === 'xrp') {
-      if (+_value.$value) {
+    if (!typeIs(_value, 'object')) return
+    // amount.xrp
+    if (_value.$type === 'amount.xrp') {
+      if (_value.$value) {
        options[field] = (+_value.$value * 1000000 + '') as any
      } else {
-        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
-        }
+        options[field] = undefined
      }
    }

-    // 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' &&
-      schemaVal &&
-      typeof schemaVal === 'object' &&
-      schemaVal.$type === 'xrp'
-    if (isXrp) {
+
+    const isAmount = schemaVal &&
+      typeIs(schemaVal, "object") &&
+      schemaVal.$type.startsWith('amount.');
+
+    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',
--- a/utils/helpers.ts
+++ b/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;
+}
--- a/utils/schema.ts
+++ b/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) =>
-      arg instanceof Array ? 'array' : arg === null ? 'undefined' : typeof arg
-
-    const value = typeOf(val) === 'object' && '$type' in val && '$value' in val ? val?.$value : val
+    const value = typeIs(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 {