Retain form values and fix unlock feature bug

src/modules/pos/validator/components/RegisterValidatorForm/index.js

@@ -25,21 +25,22 @@ const getTooltips = (field, t) => {
 // eslint-disable-next-line max-statements
 const RegisterValidatorForm = ({ nextStep, prevState }) => {
   const { t } = useTranslation();
-  const [name, setName] = useValidatorName(prevState?.rawTx?.params.name);
+  const { params } = prevState?.transactionJSON || {};
+  const [name, setName] = useValidatorName(params?.name);
   const [generatorKey, setGenKey] = useValidatorKey(
     'generatorKey',
     t('Please enter a valid generator key value'),
-    prevState?.rawTx?.params.generatorKey
+    params?.generatorKey
   );
   const [blsKey, setBlsKey] = useValidatorKey(
     'blsKey',
     t('Please enter a valid bls key value'),
-    prevState?.rawTx?.params.blsKey
+    params?.blsKey
   );
   const [proofOfPossession, setPop] = useValidatorKey(
     'proofOfPossession',
     t('Please enter a valid proof of possession value'),
-    prevState?.rawTx?.params.proofOfPossession
+    params?.proofOfPossession
   );
 
   const { data: posConstants, isLoading: isGettingPosConstants } = usePosConstants();

src/modules/pos/validator/components/SentStakes/SentStakes.js

@@ -5,7 +5,7 @@ import DialogLink from 'src/theme/dialog/link';
 import Box from 'src/theme/box';
 import { PrimaryButton } from 'src/theme/buttons';
 import BoxContent from 'src/theme/box/content';
-import { QueryTable } from 'src/theme/QueryTable';
+import Table from 'src/theme/table';
 import BoxHeader from 'src/theme/box/header';
 import { selectSearchParamValue } from 'src/utils/searchParams';
 import { useCurrentAccount } from '@account/hooks';
@@ -38,7 +38,7 @@ const SentStakes = ({ history }) => {
   });
   const dposToken = useMemo(() => tokens?.data?.[0] || {}, [tokens]);
 
-  const { data } = useSentStakes(queryParam);
+  const { data, isLoading } = useSentStakes(queryParam);
   const stakingAvailable = useMemo(() => 10 - data?.meta?.total || 0, [address]);
 
   return (
@@ -60,10 +60,10 @@ const SentStakes = ({ history }) => {
         </Heading>
       </BoxHeader>
       <BoxContent>
-        <QueryTable
+        <Table
           showHeader
-          queryHook={useSentStakes}
-          transformResponse={(resp) => resp?.stakes || []}
+          data={data?.data?.stakes || []}
+          isLoading={isLoading}
           queryConfig={queryParam}
           row={SentStakesRow}
           header={header(t)}

src/modules/token/fungible/components/SendForm/SendForm.js

@@ -79,15 +79,15 @@ const SendForm = (props) => {
   const [maxAmount, setMaxAmount] = useState({ value: 0, error: false });
 
   const [reference, setReference] = useMessageField(
-    getInitialData(props.prevState?.rawTx, props.initialValue?.reference)
+    getInitialData(props.prevState?.formProps, props.initialValue?.reference)
   );
   const [amount, setAmountField] = useAmountField(
-    getInitialAmount(props.prevState?.rawTx, props.initialValue?.amount),
+    getInitialAmount(props.prevState?.formProps, props.initialValue?.amount),
     account.summary?.balance,
     token?.symbol
   );
   const [recipient, setRecipientField] = useRecipientField(
-    getInitialRecipient(props.prevState?.rawTx, props.initialValue?.recipient)
+    getInitialRecipient(props.prevState?.formProps, props.initialValue?.recipient)
   );
 
   const onComposed = useCallback((status) => {

src/modules/token/fungible/components/SendForm/form.test.js

@@ -115,7 +115,7 @@ describe('Form', () => {
 
   it('should render properly with data from prevState', () => {
     const { address } = accounts.genesis.summary;
-    const rawTx = {
+    const formProps = {
       params: {
         recipient: {
           address,
@@ -131,11 +131,11 @@ describe('Form', () => {
 
     const wrapper = mountWithQueryClient(Form, {
       ...props,
-      prevState: { rawTx },
+      prevState: { formProps },
     });
     expect(wrapper.find('input.recipient')).toHaveValue(address);
-    expect(wrapper.find('.amount input')).toHaveValue(fromRawLsk(rawTx.params.amount));
-    expect(wrapper.find('textarea[name="reference"]')).toHaveValue(rawTx.params.data);
+    expect(wrapper.find('.amount input')).toHaveValue(fromRawLsk(formProps.params.amount));
+    expect(wrapper.find('textarea[name="reference"]')).toHaveValue(formProps.params.data);
   });
 
   it('should go to next step when submit button is clicked', async () => {

src/modules/token/fungible/components/SendSummary/summary.test.js

@@ -41,17 +41,6 @@ describe('Summary', () => {
         sendingChain: mockBlockchainApplications[0],
         recipientChain: mockBlockchainApplications[1],
       },
-      rawTx: {
-        params: {
-          recipient: { address: wallets.genesis.summary.address },
-          amount: 112300000,
-          data: 'message',
-          token: mockAppTokens[0],
-        },
-        moduleCommand: 'token:transfer',
-        sendingChain: mockBlockchainApplications[0],
-        recipientChain: mockBlockchainApplications[1],
-      },
       t: i18n.t,
       selectedPriority: { title: 'Normal', value: 1 },
       fees: {
@@ -71,6 +60,7 @@ describe('Summary', () => {
           amount: 112300000,
           data: 'transfer message',
           token: { tokenID: '00000000' },
+          recipient: { address: wallets.genesis.summary.address },
         },
         fields: {
           sendingChain: mockBlockchainApplications[0],
@@ -113,12 +103,12 @@ describe('Summary', () => {
       <Summary
         {...{
           ...props,
-          rawTx: {
-            ...props.rawTx,
+          formProps: {
+            ...props.formProps,
             params: {
-              ...props.rawTx.params,
+              ...props.formProps.params,
               recipient: {
-                ...props.rawTx.params.recipient,
+                ...props.formProps.params.recipient,
                 title,
               },
             },

src/modules/wallet/components/AllTokens/AllTokens.js

@@ -75,7 +75,6 @@ const AllTokens = ({ history }) => {
           row={TokenRow}
           header={header(t)}
           headerClassName={styles.tableHeader}
-          additionalRowProps={{ address }}
         />
       </BoxContent>
     </Box>

src/modules/wallet/components/AllTokens/AllTokens.test.js

@@ -47,9 +47,6 @@ describe('AllTokens', () => {
     expect(screen.getByText('Request')).toBeTruthy();
     expect(screen.getByText('Send')).toBeTruthy();
     expect(screen.getByText('All tokens')).toBeTruthy();
-    expect(screen.getAllByAltText('arrowRightInactive')).toHaveLength(
-      mockTokensBalance.data.length
-    );
 
     tableHeaderMap(jest.fn((t) => t)).forEach(({ title }) => {
       expect(screen.getByText(title)).toBeTruthy();

src/modules/wallet/components/AllTokens/tableHeaderMap.js

@@ -14,11 +14,11 @@ export default (t) => [
     classList: `${grid['col-xs-2']}`,
   },
   {
-    title: t('Fiat balance'),
+    title: t('Locked balance'),
     classList: `${grid['col-xs-2']}`,
   },
   {
-    title: t('Locked balance'),
+    title: t('Fiat balance'),
     classList: `${grid['col-xs-3']}`,
   },
 ];

src/modules/wallet/components/RegisterMultisigForm/MemberField.js

@@ -37,6 +37,7 @@ const MemberField = ({
           onChange={changeIdentifier}
           placeholder={t('Public Key')}
           size="m"
+          value={publicKey}
         />
         <CategorySwitch changeCategory={changeCategory} isMandatory={isMandatory} index={index} />
       </div>

src/modules/wallet/components/RegisterMultisigForm/index.js

@@ -20,13 +20,14 @@ const placeholderMember = {
 };
 
 const getInitialMembersState = (prevState) => {
-  if (prevState.rawTx) {
+  if (prevState.transactionJSON && prevState.transactionJSON.params) {
+    const { mandatoryKeys, optionalKeys } = prevState.transactionJSON.params;
     return [
-      ...prevState.rawTx.params.mandatoryKeys.map((item) => ({
+      ...mandatoryKeys.map((item) => ({
         isMandatory: true,
         publicKey: item,
       })),
-      ...prevState.rawTx.params.optionalKeys.map((item) => ({
+      ...optionalKeys.map((item) => ({
         isMandatory: false,
         publicKey: item,
       })),
@@ -35,7 +36,7 @@ const getInitialMembersState = (prevState) => {
 
   return [];
 };
-const getInitialSignaturesState = (prevState) => prevState.numberOfSignatures ?? 2;
+const getInitialSignaturesState = (prevState) => prevState.transactionJSON?.params?.numberOfSignatures ?? 2;
 
 export const validateState = ({ mandatoryKeys, optionalKeys, numberOfSignatures, t }) => {
   const messages = validators

src/modules/wallet/components/RegisterMultisigForm/index.test.js

@@ -66,11 +66,11 @@ describe('Multisignature editor component', () => {
     wrapper = mountWithQueryClient(Form, {
       ...props,
       prevState: {
-        numberOfSignatures: 3,
-        rawTx: {
+        transactionJSON: {
           params: {
             mandatoryKeys: [{}, {}],
             optionalKeys: [{}, {}, {}],
+            numberOfSignatures: 3,
           },
         },
       },
@@ -128,7 +128,7 @@ describe('Multisignature editor component', () => {
     const propsWithPrev = {
       ...props,
       prevState: {
-        rawTx: {
+        transactionJSON: {
           params: {
             numberOfSignatures: 2,
             optionalKeys: [wallets.genesis.summary.publicKey],

src/modules/wallet/components/TokenRow/TokenRow.css

@@ -26,33 +26,6 @@
   }
 }
 
-.lockedBalance {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-
-  & > p:first-child {
-    flex: 1;
-    height: 100%;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-  }
-
-  & img {
-    width: 10px;
-  }
-
-  & > p ~ div {
-    display: flex;
-    margin-left: 10px;
-    padding: 10px;
-    cursor: pointer;
-  }
-}
-
 .token {
   padding: 20px 22px 20px 0px;
   display: flex;

src/modules/wallet/components/TokenRow/TokenRow.js

@@ -2,9 +2,9 @@ import React, { useMemo } from 'react';
 import { fromRawLsk } from 'src/modules/token/fungible/utils/lsk';
 import Converter from 'src/modules/common/components/converter';
 import styles from './TokenRow.css';
-import { Token, Balance, LockedBalance } from './components';
+import { Token, Balance } from './components';
 
-const TokenRow = ({ data: token, address }) => {
+const TokenRow = ({ data: token }) => {
   const {
     symbol: tokenSymbol,
     chainUrl,
@@ -24,8 +24,8 @@ const TokenRow = ({ data: token, address }) => {
         <Token chainName={chainName} chainLogo={chainUrl} tokenSymbol={tokenSymbol} />
         <Balance amount={fromRawLsk(+availableBalance + totalLockedBalance)} />
         <Balance amount={fromRawLsk(availableBalance)} />
+        <Balance amount={fromRawLsk(totalLockedBalance)} />
         <Balance amount={<Converter value={fromRawLsk(availableBalance)} />} />
-        <LockedBalance amount={fromRawLsk(totalLockedBalance)} address={address} />
       </div>
     </div>
   );

src/modules/wallet/components/TokenRow/TokenRow.test.js

@@ -20,6 +20,5 @@ describe('TokenRow', () => {
     expect(screen.queryByText(`${fromRawLsk(+availableBalance + lockedBalance)}`));
     expect( screen.getByText(/~10\.00/g)).toBeTruthy();
     expect(screen.getByAltText(symbol)).toBeTruthy();
-    expect(screen.getByAltText('arrowRightInactive')).toBeTruthy();
   });
 });

src/modules/wallet/components/TokenRow/components.js

@@ -1,7 +1,5 @@
 import React from 'react';
 import grid from 'flexboxgrid/dist/flexboxgrid.css';
-import Icon from 'src/theme/Icon';
-import DialogLink from 'src/theme/dialog/link';
 import DiscreetMode from '@common/components/discreetMode';
 import styles from './TokenRow.css';
 import chainImage from '../../../../../setup/react/assets/images/LISK.png';
@@ -21,14 +19,3 @@ export const Balance = ({ amount, Wrapper = DiscreetMode }) => (
     {amount}
   </Wrapper>
 );
-
-export const LockedBalance = ({ amount, address }) => (
-  <div className={`${styles.lockedBalance} ${grid['col-xs-3']}`}>
-    <p className={styles.balance}>
-      <DiscreetMode>{amount}</DiscreetMode>
-    </p>
-    <DialogLink component="lockedBalance" data={{ address }}>
-      <Icon name="arrowRightInactive" />
-    </DialogLink>
-  </div>
-);