From 9ce31749252e9ed983f268240d022e7dbf396cac Mon Sep 17 00:00:00 2001 From: Keith Date: Thu, 25 Jul 2019 13:22:30 +0800 Subject: [PATCH 1/2] feat(neuron-ui): calculate transaction fee with user-specified price --- .../src/components/PasswordRequest/index.tsx | 9 +++++--- .../neuron-ui/src/components/Send/index.tsx | 9 ++++++-- .../components/TransactionFeePanel/index.tsx | 21 +++++++++++++++++-- .../neuron-ui/src/states/initStates/app.ts | 1 + .../stateProvider/actionCreators/send.ts | 5 +++-- .../stories/TransactionFeePanel.stories.tsx | 4 ++-- packages/neuron-ui/src/types/App/index.d.ts | 1 + packages/neuron-ui/src/utils/formatters.ts | 5 +++++ 8 files changed, 44 insertions(+), 11 deletions(-) diff --git a/packages/neuron-ui/src/components/PasswordRequest/index.tsx b/packages/neuron-ui/src/components/PasswordRequest/index.tsx index cd782252ff..c2db0839ac 100644 --- a/packages/neuron-ui/src/components/PasswordRequest/index.tsx +++ b/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) => { diff --git a/packages/neuron-ui/src/components/Send/index.tsx b/packages/neuron-ui/src/components/Send/index.tsx index 32c564fe2a..d905190856 100644 --- a/packages/neuron-ui/src/components/Send/index.tsx +++ b/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 = ({ - + diff --git a/packages/neuron-ui/src/components/TransactionFeePanel/index.tsx b/packages/neuron-ui/src/components/TransactionFeePanel/index.tsx index ef4c43d267..5aa088b033 100644 --- a/packages/neuron-ui/src/components/TransactionFeePanel/index.tsx +++ b/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 = ({ cycles, price, @@ -34,6 +44,8 @@ const TransactionFee: React.FunctionComponent = ({ ) + const selectedSpeed = calculateSpeed(+price) + return ( @@ -85,7 +97,7 @@ const TransactionFee: React.FunctionComponent = ({ = ({ onRenderCaretDown={() => { return }} + onChange={(e: any, item?: IDropdownOption) => { + if (item) { + onPriceChange(e, item.key) + } + }} /> diff --git a/packages/neuron-ui/src/states/initStates/app.ts b/packages/neuron-ui/src/states/initStates/app.ts index a6c65d49a4..ef1d188b69 100644 --- a/packages/neuron-ui/src/states/initStates/app.ts +++ b/packages/neuron-ui/src/states/initStates/app.ts @@ -15,6 +15,7 @@ const appState: State.App = { }, ], price: '0', + cycles: '0', description: '', loading: false, }, diff --git a/packages/neuron-ui/src/states/stateProvider/actionCreators/send.ts b/packages/neuron-ui/src/states/stateProvider/actionCreators/send.ts index 747c4e9fc7..848e10f36b 100644 --- a/packages/neuron-ui/src/states/stateProvider/actionCreators/send.ts +++ b/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 { diff --git a/packages/neuron-ui/src/stories/TransactionFeePanel.stories.tsx b/packages/neuron-ui/src/stories/TransactionFeePanel.stories.tsx index ae494586aa..6267861ea8 100644 --- a/packages/neuron-ui/src/stories/TransactionFeePanel.stories.tsx +++ b/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), }, diff --git a/packages/neuron-ui/src/types/App/index.d.ts b/packages/neuron-ui/src/types/App/index.d.ts index d40513aabf..691ade8b74 100644 --- a/packages/neuron-ui/src/types/App/index.d.ts +++ b/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 } diff --git a/packages/neuron-ui/src/utils/formatters.ts b/packages/neuron-ui/src/utils/formatters.ts index be6d9c277c..a4fed50a2d 100644 --- a/packages/neuron-ui/src/utils/formatters.ts +++ b/packages/neuron-ui/src/utils/formatters.ts @@ -110,6 +110,10 @@ 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, @@ -117,4 +121,5 @@ export default { shannonToCKBFormatter, localNumberFormatter, uniformTimeFormatter, + priceToFee, } From e6107e581ac59006bcd0a3f4a15d7c6f4da488f2 Mon Sep 17 00:00:00 2001 From: Keith Date: Thu, 25 Jul 2019 13:30:20 +0800 Subject: [PATCH 2/2] feat(neuron-ui): add CKB unit in the transaction fee field --- packages/neuron-ui/src/components/TransactionFeePanel/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/neuron-ui/src/components/TransactionFeePanel/index.tsx b/packages/neuron-ui/src/components/TransactionFeePanel/index.tsx index 5aa088b033..a87ed13d11 100644 --- a/packages/neuron-ui/src/components/TransactionFeePanel/index.tsx +++ b/packages/neuron-ui/src/components/TransactionFeePanel/index.tsx @@ -54,7 +54,7 @@ const TransactionFee: React.FunctionComponent = ({ - + {actionSpacer}