nervosnetwork · devchenyan · Jul 18, 2023 · Jul 8, 2023 · Jul 8, 2023 · Jul 9, 2023
diff --git a/packages/neuron-ui/src/components/MultisigAddress/index.tsx b/packages/neuron-ui/src/components/MultisigAddress/index.tsx
@@ -119,12 +119,11 @@ const MultisigAddress = () => {
   )
   const listNoBalanceActionOptions = useMemo(
     () =>
-      tableActions.map(item => ({
+      listActionOptions.map(item => ({
         ...item,
-        label: t(`multisig-address.table.actions.${item.key}`),
-        disabled: item.key === 'send',
+        disabled: item.disabled || item.key === 'send',
       })),
-    [t]
+    [listActionOptions]
   )
 
   const { keywords, onChange, onBlur } = useSearch(clearSelected, onFilterConfig)

diff --git a/packages/neuron-ui/src/components/OfflineSignDialog/index.tsx b/packages/neuron-ui/src/components/OfflineSignDialog/index.tsx
@@ -16,7 +16,7 @@ import {
 } from 'states'
 import { OfflineSignJSON, signAndExportTransaction, OfflineSignType } from 'services/remote'
 import { PasswordIncorrectException } from 'exceptions'
-import styles from '../PasswordRequest/passwordRequest.module.scss'
+import styles from './offlineSignDialog.module.scss'
 
 interface SignDialogProps {
   isBroadcast: boolean
@@ -199,7 +199,15 @@ const OfflineSignDialog = ({ isBroadcast, wallet, offlineSignJSON, onDismiss }:
   }
 
   return (
-    <Dialog show title={title} onCancel={onDismiss} onConfirm={onSubmit} disabled={disabled} isLoading={isSigning}>
+    <Dialog
+      show
+      title={title}
+      onCancel={onDismiss}
+      onConfirm={onSubmit}
+      disabled={disabled}
+      isLoading={isSigning}
+      contentClassName={styles.content}
+    >
       <TextField
         label={t('password-request.password')}
         value={password}

diff --git a/packages/neuron-ui/src/components/OfflineSignDialog/offlineSignDialog.module.scss b/packages/neuron-ui/src/components/OfflineSignDialog/offlineSignDialog.module.scss
@@ -0,0 +1,10 @@
+@import '../../styles/mixin.scss';
+
+.content {
+  width: 648px;
+  padding: 16px 16px 0;
+}
+
+.passwordInput {
+  margin-top: 16px;
+}
diff --git a/packages/neuron-ui/src/components/PricePanel/index.tsx b/packages/neuron-ui/src/components/PricePanel/index.tsx
@@ -3,20 +3,21 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { localNumberFormatter, shannonToCKBFormatter } from 'utils'
 import RingProgressBar from 'widgets/RingProgressBar'
 import TextField from 'widgets/TextField'
-import { Transfer } from 'widgets/Icons/icon'
+import { ReactComponent as Change } from 'widgets/Icons/Change.svg'
 import DropdownWithCustomRender from 'widgets/DropdownWithCustomRender'
 import useGetCountDownAndFeeRateStats from 'utils/hooks/useGetCountDownAndFeeRateStats'
 import { useTranslation } from 'react-i18next'
 import { appState, useState as useGlobalState } from 'states'
-
 import { FeeRateValueArrayItemType, useGetBatchGeneratedTx } from 'components/Send/hooks'
+import { batchGenerateExperimental } from 'components/SUDTSend/hooks'
 
 import styles from './pricePanel.module.scss'
 
 interface PricePanelProps {
   field: string
   price: string
   onPriceChange: (value: string) => void
+  isExperimental?: boolean
 }
 enum PriceTypeEnum {
   Custom = 'custom',
@@ -25,7 +26,12 @@ enum PriceTypeEnum {
 const DEFAULT_PRICE_ARRAY = ['1000', '2000', '3000']
 const DEFAULT_COUNT_DOWN = 30
 
-const PricePanel: React.FunctionComponent<PricePanelProps> = ({ price, field, onPriceChange }: PricePanelProps) => {
+const PricePanel: React.FunctionComponent<PricePanelProps> = ({
+  price,
+  field,
+  onPriceChange,
+  isExperimental,
+}: PricePanelProps) => {
   const [t] = useTranslation()
   const [type, setType] = useState<PriceTypeEnum>(PriceTypeEnum.Standard)
   const [feeRateValueArray, setFeeRateValueArray] = useState<FeeRateValueArrayItemType[]>([])
@@ -35,7 +41,9 @@ const PricePanel: React.FunctionComponent<PricePanelProps> = ({ price, field, on
   const {
     app: { send = appState.send },
     wallet: { id: walletID = '' },
+    experimental,
   } = useGlobalState()
+
   const { countDown, suggestFeeRate } = useGetCountDownAndFeeRateStats({ seconds: DEFAULT_COUNT_DOWN })
 
   const isStandard = type === PriceTypeEnum.Standard
@@ -108,10 +116,16 @@ const PricePanel: React.FunctionComponent<PricePanelProps> = ({ price, field, on
   )
 
   useEffect(() => {
-    useGetBatchGeneratedTx({ walletID, items: send.outputs, priceArray }).then(res => {
-      setFeeRateValueArray(res)
-    })
-  }, [send.outputs, priceArray])
+    if (isExperimental && experimental) {
+      batchGenerateExperimental(experimental, priceArray).then(res => {
+        setFeeRateValueArray(res)
+      })
+    } else {
+      useGetBatchGeneratedTx({ walletID, items: send.outputs, priceArray }).then(res => {
+        setFeeRateValueArray(res)
+      })
+    }
+  }, [send.outputs, priceArray, isExperimental, experimental, batchGenerateExperimental, setFeeRateValueArray])
 
   useEffect(() => {
     if (suggestFeeRate === 0) {
@@ -141,7 +155,7 @@ const PricePanel: React.FunctionComponent<PricePanelProps> = ({ price, field, on
             onKeyDown={() => {}}
             type="button"
           >
-            <Transfer />
+            <Change />
           </button>
         </div>
         {isStandard ? (

diff --git a/packages/neuron-ui/src/components/SUDTSend/hooks.ts b/packages/neuron-ui/src/components/SUDTSend/hooks.ts
@@ -4,15 +4,8 @@ import { SUDTAccount } from 'components/SUDTAccountList'
 import { DEFAULT_SUDT_FIELDS } from 'utils/const'
 import { generateChequeTransaction, generateSUDTTransaction, getHoldSUDTCellCapacity } from 'services/remote'
 import { AppActions, useDispatch } from 'states'
-
-export enum SendType {
-  secp256Cheque = 'cheque',
-  secp256NewCell = 'secp256NewCell',
-  acpExistCell = 'acpExistCell',
-  acpNewCell = 'acpNewCell',
-  unknowNewCell = 'unknowNewCell',
-  sendCKB = 'sendCKB',
-}
+import { ControllerResponse } from 'services/remote/remoteApiWrapper'
+import { SendType } from 'utils/enums'
 
 export enum AddressLockType {
   secp256 = 'secp256',
@@ -152,6 +145,29 @@ export function getGenerator(sendType?: SendType) {
   return generateSUDTTransaction
 }
 
+export async function batchGenerateExperimental(experimental: State.Experimental, priceArray: string[]) {
+  if (experimental?.params) {
+    const { params } = experimental
+    const generator = getGenerator(params.sendType)
+    const requestArray = priceArray.map(itemPrice => generator({ ...params, feeRate: itemPrice }))
+    const allPromiseResult = await Promise.allSettled(requestArray)
+    const resList = allPromiseResult.map(
+      (batchItem: PromiseSettledResult<ControllerResponse<{ fee: string }>>, index: number) => ({
+        feeRateValue: priceArray[index],
+        feeValue:
+          batchItem.status === 'fulfilled' && isSuccessResponse(batchItem.value) && batchItem.value.result
+            ? batchItem.value.result.fee
+            : '0',
+      })
+    )
+    return resList
+  }
+  return priceArray.map((_, index: number) => ({
+    feeRateValue: priceArray[index],
+    feeValue: '0',
+  }))
+}
+
 export function useOnSubmit({
   isSubmittable,
   accountType,

diff --git a/packages/neuron-ui/src/components/SUDTSend/index.tsx b/packages/neuron-ui/src/components/SUDTSend/index.tsx
@@ -31,17 +31,10 @@ import {
   validateAmountRange,
   CONSTANTS,
 } from 'utils'
+import { SendType } from 'utils/enums'
 import { AmountNotEnoughException, isErrorWithI18n } from 'exceptions'
 import { getDisplayName, getDisplaySymbol } from 'components/UANDisplay'
-import {
-  AddressLockType,
-  SendType,
-  getGenerator,
-  useAddressLockType,
-  useOnSubmit,
-  useOptions,
-  useSendType,
-} from './hooks'
+import { AddressLockType, getGenerator, useAddressLockType, useOnSubmit, useOptions, useSendType } from './hooks'
 import styles from './sUDTSend.module.scss'
 
 const { INIT_SEND_PRICE, DEFAULT_SUDT_FIELDS, HIDE_BALANCE } = CONSTANTS
@@ -162,9 +155,9 @@ const SUDTSend = () => {
     { label: t('s-udt.send.title'), link: RoutePath.SUDTSend },
   ]
 
-  const fields: { key: Fields.Address | Fields.Amount; label: string }[] = [
-    { key: Fields.Address, label: t('s-udt.send.address') },
-    { key: Fields.Amount, label: t('s-udt.send.amount') },
+  const fields: { key: Fields.Address | Fields.Amount; label: string; placeholder: string }[] = [
+    { key: Fields.Address, label: t('s-udt.send.address'), placeholder: t('s-udt.send.address-placeholder') },
+    { key: Fields.Amount, label: t('s-udt.send.amount'), placeholder: t('s-udt.send.amount-placeholder') },
   ]
 
   const errors: { [Fields.Address]: string; [Fields.Amount]: string } = useMemo(() => {
@@ -247,7 +240,10 @@ const SUDTSend = () => {
       generator(params)
         .then(res => {
           if (isSuccessResponse(res)) {
-            globalDispatch({ type: AppActions.UpdateExperimentalParams, payload: { tx: res.result } })
+            globalDispatch({
+              type: AppActions.UpdateExperimentalParams,
+              payload: { tx: res.result, params: { ...params, sendType } },
+            })
             return
           }
           throw new Error(typeof res.message === 'string' ? res.message : res.message.content)
@@ -298,6 +294,16 @@ const SUDTSend = () => {
     [dispatch, setRemoteError]
   )
 
+  const handleCheckbox = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (options && options.length) {
+        const { checked } = e.target
+        onChangeSendType(checked ? options[0].key : undefined)
+      }
+    },
+    [onChangeSendType, options]
+  )
+
   const onToggleSendingAll = useCallback(() => {
     dispatch({ type: Fields.SendAll, payload: !sendState.sendAll })
   }, [dispatch, sendState.sendAll])
@@ -361,7 +367,7 @@ const SUDTSend = () => {
             <div className={styles.sendContainer}>
               {fields.map(field => {
                 return (
-                  <>
+                  <div key={field.key}>
                     <TextField
                       label={field.key === Fields.Amount ? `${field.label} (${displaySymbol})` : field.label}
                       value={
@@ -370,7 +376,7 @@ const SUDTSend = () => {
                       key={field.label}
                       field={field.key}
                       onChange={onInput}
-                      rows={field.key === Fields.Address ? 2 : 1}
+                      rows={field.key === Fields.Address && sendState.address ? 2 : 1}
                       suffix={
                         field.key === Fields.Amount ? (
                           <Button
@@ -386,41 +392,48 @@ const SUDTSend = () => {
                       disabled={sendState.sendAll}
                       error={errors[field.key]}
                       className={styles[field.key]}
+                      placeholder={field.placeholder}
                     />
 
                     {field.key === Fields.Address && options?.length ? (
                       <>
-                        <RadioGroup
-                          defaultValue={sendType}
-                          onChange={onChangeSendType}
-                          itemClassName={styles.optionItem}
-                          options={options.map(item => ({
-                            value: item.key,
-                            label: t(`s-udt.send.${item.label}`, item?.params),
-                            suffix: item.tooltip ? (
-                              <div className={styles.tipItem}>
-                                <Tooltip
-                                  tip={
-                                    <p className={styles.tooltip}>{t(`s-udt.send.${item.tooltip}`, item?.params)}</p>
-                                  }
-                                  showTriangle
-                                >
-                                  <AttentionOutline className={styles.attention} />
-                                </Tooltip>
-                              </div>
-                            ) : null,
-                            tip:
-                              item.key === SendType.secp256Cheque && !isMainnet ? (
-                                <div className={styles.selectError}>{t('messages.light-client-cheque-warning')}</div>
+                        {options.length > 1 ? (
+                          <RadioGroup
+                            onChange={onChangeSendType}
+                            itemClassName={styles.optionItem}
+                            options={options.map(item => ({
+                              value: item.key,
+                              label: t(`s-udt.send.${item.label}`, item?.params),
+                              suffix: item.tooltip ? (
+                                <div className={styles.tipItem}>
+                                  <Tooltip
+                                    tip={
+                                      <p className={styles.tooltip}>{t(`s-udt.send.${item.tooltip}`, item?.params)}</p>
+                                    }
+                                    showTriangle
+                                  >
+                                    <AttentionOutline className={styles.attention} />
+                                  </Tooltip>
+                                </div>
                               ) : null,
-                          }))}
-                        />
+                              tip:
+                                item.key === SendType.secp256Cheque && !isMainnet ? (
+                                  <div className={styles.selectError}>{t('messages.light-client-cheque-warning')}</div>
+                                ) : null,
+                            }))}
+                          />
+                        ) : (
+                          <label htmlFor="sendType">
+                            <input type="checkbox" id="sendType" onChange={handleCheckbox} checked={!!sendType} />
+                            <span>{t(`s-udt.send.${options[0].label}`, options[0]?.params)}</span>
+                          </label>
+                        )}
                         {!isOptionCorrect ? (
                           <div className={styles.selectError}>{t('s-udt.send.select-option')}</div>
                         ) : null}
                       </>
                     ) : null}
-                  </>
+                  </div>
                 )
               })}
             </div>
@@ -434,10 +447,11 @@ const SUDTSend = () => {
                   field={Fields.Description}
                   onChange={onInput}
                   error={remoteError}
+                  placeholder={t('s-udt.send.description-placeholder')}
                 />
               </div>
               <div className={styles.fee}>
-                <TransactionFeePanel fee={fee} price={sendState.price} onPriceChange={onPriceChange} />
+                <TransactionFeePanel fee={fee} price={sendState.price} onPriceChange={onPriceChange} isExperimental />
               </div>
             </div>
             <div className={styles.rightFooter}>

diff --git a/packages/neuron-ui/src/components/SUDTSend/sUDTSend.module.scss b/packages/neuron-ui/src/components/SUDTSend/sUDTSend.module.scss
@@ -72,6 +72,7 @@ $bottomHeight: 186px;
       margin-top: 16px;
       padding: 20px 16px 16px;
       @include card;
+      @include checkbox;
       .address {
         font-family: 'JetBrains Mono';
       }

diff --git a/packages/neuron-ui/src/components/SendFromMultisigDialog/sendFromMultisigDialog.module.scss b/packages/neuron-ui/src/components/SendFromMultisigDialog/sendFromMultisigDialog.module.scss
@@ -104,6 +104,7 @@
 
 .sendItem {
   & > div {
+    width: 228px;
     input {
       width: 125px !important;
       height: 56px !important;

diff --git a/packages/neuron-ui/src/components/TransactionFeePanel/index.tsx b/packages/neuron-ui/src/components/TransactionFeePanel/index.tsx
@@ -7,19 +7,21 @@ interface TransactionFeeProps {
   fee: string
   price: string
   onPriceChange: (value: string) => void
+  isExperimental?: boolean
 }
 
 const TransactionFeePanel: React.FunctionComponent<TransactionFeeProps> = ({
   price,
   fee,
   onPriceChange,
+  isExperimental,
 }: TransactionFeeProps) => {
   const [t] = useTranslation()
 
   return (
     <div>
       <TextField label={t('send.fee')} field="fee" value={`${fee} CKB`} readOnly disabled width="100%" />
-      <PricePanel field="price" price={price} onPriceChange={onPriceChange} />
+      <PricePanel field="price" price={price} onPriceChange={onPriceChange} isExperimental={isExperimental} />
     </div>
   )
 }

diff --git a/packages/neuron-ui/src/locales/en.json b/packages/neuron-ui/src/locales/en.json
@@ -950,8 +950,11 @@
       "send": {
         "title": "Send",
         "address": "Send to",
+        "address-placeholder": "Please input address",
         "amount": "Amount",
+        "amount-placeholder": "Please input amount",
         "description": "Description",
+        "description-placeholder": "Please input description, optional",
         "submit": "Submit",
         "click-to-edit": "Click to edit",
         "cheque-address-hint": {