feat(neuron-ui): calculate transaction fee with user-specified price

Author: Keith-CY

packages/neuron-ui/src/components/PasswordRequest/index.tsx

@@ -3,10 +3,11 @@ import { useTranslation } from 'react-i18next'
 import { Stack, Text, Label, Modal, TextField, PrimaryButton, DefaultButton } from 'office-ui-fabric-react'
 import { StateWithDispatch, AppActions } from 'states/stateProvider/reducer'
 import actionCreators from 'states/stateProvider/actionCreators'
+import { priceToFee } from 'utils/formatters'
 
 const PasswordRequest = ({
   app: {
-    send: { txID, outputs, description },
+    send: { txID, outputs, description, price, cycles },
     passwordRequest: { walletID = '', actionType = null, password = '' },
   },
   settings: { wallets = [] },
@@ -33,14 +34,16 @@ const PasswordRequest = ({
         break
       }
       case 'send': {
-        dispatch(actionCreators.submitTransaction(txID, walletID, outputs, description, password))
+        dispatch(
+          actionCreators.submitTransaction(txID, walletID, outputs, description, password, priceToFee(price, cycles))
+        )
         break
       }
       default: {
         break
       }
     }
-  }, [dispatch, walletID, password, actionType, txID, description, outputs])
+  }, [dispatch, walletID, password, actionType, txID, description, outputs, cycles, price])
 
   const onChange = useCallback(
     (_e, value?: string) => {

packages/neuron-ui/src/components/Send/index.tsx

@@ -22,7 +22,7 @@ import { StateWithDispatch } from 'states/stateProvider/reducer'
 import appState from 'states/initStates/app'
 
 import { PlaceHolders, CapacityUnit } from 'utils/const'
-import { shannonToCKBFormatter } from 'utils/formatters'
+import { shannonToCKBFormatter, priceToFee } from 'utils/formatters'
 
 import { useInitialize } from './hooks'
 
@@ -160,7 +160,12 @@ const Send = ({
         </Stack>
       </Stack>
 
-      <TransactionFeePanel fee="10" cycles="10" price={send.price} onPriceChange={updateTransactionPrice} />
+      <TransactionFeePanel
+        fee={shannonToCKBFormatter(priceToFee(send.price, send.cycles))}
+        cycles={send.cycles}
+        price={send.price}
+        onPriceChange={updateTransactionPrice}
+      />
 
       <Stack horizontal verticalAlign="center" tokens={{ childrenGap: 20 }}>
         <Stack.Item styles={{ root: { width: labelWidth } }}>

packages/neuron-ui/src/components/TransactionFeePanel/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Stack, Label, TextField, Dropdown, Toggle, Icon } from 'office-ui-fabric-react'
+import { Stack, Label, TextField, Dropdown, Toggle, Icon, IDropdownOption } from 'office-ui-fabric-react'
 import { Down } from 'grommet-icons'
 import { useTranslation } from 'react-i18next'
 
@@ -18,6 +18,16 @@ registerIcons({
   },
 })
 
+const calculateSpeed = (price: number) => {
+  if (price >= 160) {
+    return '180'
+  }
+  if (price >= 40) {
+    return '60'
+  }
+  return '0'
+}
+
 const TransactionFee: React.FunctionComponent<TransactionFee> = ({
   cycles,
   price,
@@ -34,6 +44,8 @@ const TransactionFee: React.FunctionComponent<TransactionFee> = ({
     </Stack.Item>
   )
 
+  const selectedSpeed = calculateSpeed(+price)
+
   return (
     <Stack tokens={{ childrenGap: 15 }}>
       <Stack horizontal verticalAlign="end" horizontalAlign="space-between">
@@ -85,7 +97,7 @@ const TransactionFee: React.FunctionComponent<TransactionFee> = ({
           <Stack.Item>
             <Dropdown
               dropdownWidth={140}
-              defaultSelectedKey="0"
+              selectedKey={selectedSpeed}
               options={[
                 { key: '0', text: 'immediately' },
                 { key: '30', text: '~ 30s' },
@@ -95,6 +107,11 @@ const TransactionFee: React.FunctionComponent<TransactionFee> = ({
               onRenderCaretDown={() => {
                 return <Icon iconName="ArrowDown" />
               }}
+              onChange={(e: any, item?: IDropdownOption) => {
+                if (item) {
+                  onPriceChange(e, item.key)
+                }
+              }}
             />
           </Stack.Item>
         </Stack>

packages/neuron-ui/src/states/initStates/app.ts

@@ -15,6 +15,7 @@ const appState: State.App = {
       },
     ],
     price: '0',
+    cycles: '0',
     description: '',
     loading: false,
   },

packages/neuron-ui/src/states/stateProvider/actionCreators/send.ts

@@ -11,7 +11,8 @@ export default {
     walletID: string = '',
     items: TransactionOutput[] = [],
     description: string = '',
-    password: string = ''
+    password: string = '',
+    fee: string = '0'
   ) => {
     walletsCall.sendCapacity({
       id,
@@ -21,7 +22,7 @@ export default {
         capacity: CKBToShannonFormatter(item.amount, item.unit),
       })),
       password,
-      fee: '0',
+      fee,
       description,
     })
     return {

packages/neuron-ui/src/stories/TransactionFeePanel.stories.tsx

@@ -5,8 +5,8 @@ import TransactionFeePanel from 'components/TransactionFeePanel'
 
 const states = {
   default: {
-    cycles: '0',
-    price: '0',
+    cycles: '180',
+    price: '10',
     fee: '0',
     onPriceChange: (args: any) => action(args),
   },

packages/neuron-ui/src/types/App/index.d.ts

@@ -55,6 +55,7 @@ declare namespace State {
     txID: string
     outputs: Output[]
     price: string
+    cycles: string
     description: string
     loading: boolean
   }

packages/neuron-ui/src/utils/formatters.ts

@@ -110,11 +110,16 @@ export const uniformTimeFormatter = (time: string | number | Date) => {
   return timeFormatter.format(+time).replace(/\//g, '-')
 }
 
+export const priceToFee = (price: string, cycles: string) => {
+  return (BigInt(price) * BigInt(cycles)).toString()
+}
+
 export default {
   queryFormatter,
   currencyFormatter,
   CKBToShannonFormatter,
   shannonToCKBFormatter,
   localNumberFormatter,
   uniformTimeFormatter,
+  priceToFee,
 }