Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

frontend: refactor transaction.tsx #2776

Merged

Conversation

NicolaLS
Copy link
Contributor

@NicolaLS NicolaLS commented Jun 22, 2024

Refactor the transaction.tsx component to be more concise and easier to understand, also fix some minor nits like using template literals for element class names.

The PR implements all suggestions from #2549 and does not do anything else. The commits can be reviewed own their own. But the first and the third could be skipped because the changed code is moved in other commits.

The last commit moves, and changes the transaction dialog to its own component which is why everything editing something in Dialog prior to that commit can also be reviewed later in the last commit.

Please note that the many additions are caused by the license and other overhead from extracting sub-components. I think the refactor is almost addition/deletion neutral without those.

Copy link
Collaborator

@thisconnect thisconnect left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

partly reviewed

frontends/web/src/api/account.ts Outdated Show resolved Hide resolved
Comment on lines 17 to 18
import { CopyableInput } from '../../copy/Copy';
import transactionStyle from '../transactions.module.css';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With #2781 merged, we should start using absolute imports for imports that are ../ or higher ('../../ etc..). Thanks 👍

@NicolaLS NicolaLS force-pushed the transaction-refactor-continue branch 2 times, most recently from c193a1b to 127baba Compare July 2, 2024 16:46
@NicolaLS NicolaLS requested a review from thisconnect July 2, 2024 16:47
@NicolaLS NicolaLS force-pushed the transaction-refactor-continue branch from 127baba to a545ce5 Compare July 2, 2024 16:52
@NicolaLS
Copy link
Contributor Author

NicolaLS commented Jul 2, 2024

@thisconnect rebased and applied all suggestions. the commit messages should change too for some commits now, but I'll do that after everything is reviewed.

@NicolaLS NicolaLS force-pushed the transaction-refactor-continue branch 2 times, most recently from e591e9d to fff08b9 Compare July 8, 2024 15:22
Copy link
Collaborator

@shonsirsha shonsirsha left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have some suggestions but generally looks good!

transactionInfo.current.fee && transactionInfo.current.fee.amount ? (
<TxDetail
label={t('transaction.fee')}
title={feeRatePerKb.amount ? feeRatePerKb.amount + ' ' + feeRatePerKb.unit + '/Kb' : ''}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Might as well since we're here: for consistency, let's use template literal instead of string concat here (and in other places).

Comment on lines 22 to 29
const parseTimeShort = (time: string, lang: string) => {
const options = {
year: 'numeric',
month: 'numeric',
day: 'numeric',
} as Intl.DateTimeFormatOptions;
return new Date(Date.parse(time)).toLocaleString(lang, options);
};
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we put this in a utils file?

<div className={`${parentStyle.detail} ${parentStyle.addresses}`}>
<label>{label}</label>
<div className={parentStyle.detailAddresses}>
{values.map((addr_or_txid) => (
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Again, for consistency, let's use camelCase here e.g addrOrTxId instead of snake_case.

import { TxDateDetail } from './date';
import { TxStatusDetail } from './status';
import { TxAddressOrTxID } from './address-or-txid';
import parentStyle from '../transaction.module.css';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's use absolute import here :)

@NicolaLS NicolaLS force-pushed the transaction-refactor-continue branch 2 times, most recently from 3ff44ca to 00156a5 Compare July 9, 2024 16:36
@NicolaLS NicolaLS requested a review from shonsirsha July 9, 2024 16:42
@NicolaLS
Copy link
Contributor Author

NicolaLS commented Jul 9, 2024

@shonsirsha thanks! rebased/applied chagnes, PTAL

@NicolaLS NicolaLS force-pushed the transaction-refactor-continue branch 2 times, most recently from ed32a83 to 78c5f5b Compare July 10, 2024 03:55
@NicolaLS
Copy link
Contributor Author

@shonsirsha I added one commit to fix the problem that all transactions are fetched immediately instead of when the details dialog opens, this can be in the create DetailsDialog though so we can squash it but I thought it'd be better to do it in another commit for now.

Copy link
Collaborator

@shonsirsha shonsirsha left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code LGTM (some nits). I'll test in a bit

}: TProps) => {
const { t } = useTranslation();

const [transactionInfo, setTransactionInfo] = useState<ITransaction | null>();
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

transactionInfo here has the (implicit) type of ITransaction | null | undefined.

nit: Should we just do the following:

Suggested change
const [transactionInfo, setTransactionInfo] = useState<ITransaction | null>();
const [transactionInfo, setTransactionInfo] = useState<ITransaction | null>(null);

? 🤔

Since getTransaction returns either ITransaction | null anyway (not undefined), at least from its type.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes definitely

borderLess
flexibleHeight
className={parentStyle.detailAddress}
value={addrOrTxID} />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit:

Suggested change
value={addrOrTxID} />
value={addrOrTxID}
/>

😄

Copy link
Collaborator

@shonsirsha shonsirsha left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM tested. 👍

I don't have that many transactions, feel free if you'd like to test as well @thisconnect

@NicolaLS NicolaLS force-pushed the transaction-refactor-continue branch from 78c5f5b to 8380b96 Compare July 10, 2024 15:45
@NicolaLS
Copy link
Contributor Author

(addressed nits)

Copy link
Collaborator

@thisconnect thisconnect left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please also take a look at the commits, it looks to me that all "extract" commits should be squashed into 1 commit.

and the 2 last commits into 1 commit I made a comment

frontends/web/src/components/transactions/transaction.tsx Outdated Show resolved Hide resolved
frontends/web/src/utils/date.ts Outdated Show resolved Hide resolved
transactionInfo.fee && transactionInfo.fee.amount ? (
<TxDetail
label={t('transaction.fee')}
title={feeRatePerKb.amount ? feeRatePerKb.amount + ' ' + feeRatePerKb.unit + '/Kb' : ''}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I can't see any title here.

Tried master, mainnet/ testnet and looked at send, receive and send to self tx's but I could never see feeRatePerKb.amount in this title attribute.

I guess this was a bit a hidden feature for debuggin purpose which broke at some point. Backend sends empy string.

I think we can just remove this title, but one day we should show fee/vbyte if available.

Screenshot 2024-07-15 at 11 22 46

addresses,
txid,
}: TPropsAddressOrTxID) => {
const values = addresses ? addresses : [txid];
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about naming this component: <TxDetailCopyableValues values={[]} />

and make values mandatory array instead of optional addresses and txid.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh yes, makes sense now after splitting up into TxAddress and TxAddressOrTxID

@NicolaLS NicolaLS force-pushed the transaction-refactor-continue branch 7 times, most recently from 49d487c to a97f4ca Compare July 15, 2024 14:21
@NicolaLS
Copy link
Contributor Author

@thisconnect thanks :) addressed everything, PTAL

@NicolaLS NicolaLS force-pushed the transaction-refactor-continue branch from a97f4ca to ebfa671 Compare July 15, 2024 14:24
2 Outdated
day: 'numeric',
} as Intl.DateTimeFormatOptions;
return new Date(Date.parse(time)).toLocaleString(lang, options);
};
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove? :)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have no idea how this happened, sorry.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

no problem, maybe quickly check your own PR after pushing, then you'd see such accidental commits.

Rename sDate to shortDate in the transaction component, for a more
descriptive, easier to understand name.
Use template literals for JSX element classes instead of joining a list
for a more concice and cleaner style in the transaction.tsx component.
Define the parseTimeShort helper function outside of the
transaction.tsx component so that it is not re-defined on every render.
This improves performance and makes the component cleaner.
Create TxDetail component in transactions/components that provides the
default html structure/layout which is used by most details in the
transaction details dialog. This makes the dialog more concise and
easier to understand.
@NicolaLS NicolaLS force-pushed the transaction-refactor-continue branch from ebfa671 to d905e5c Compare July 16, 2024 17:00
Extract reusable sub-components from the transaction.tsx component to
make the transaction component cleaner and easier to understand.

Extracted subcomponents:
- tx. direction arrow
- tx. date
- tx. status
- tx. show details button
- tx. address and copyable values
Extract the transactions details dialog in transactions.tsx into its own
component to make the transaction component itself more concice and
easier to understand.
@NicolaLS NicolaLS force-pushed the transaction-refactor-continue branch from d905e5c to cbbc794 Compare July 16, 2024 17:04
Copy link
Collaborator

@thisconnect thisconnect left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM thanks

@thisconnect thisconnect merged commit f736614 into BitBoxSwiss:master Jul 17, 2024
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants