feat(TokenEnterAmount): Add new Enter Amount component and useEnterAmount hook #6242

sviderock · 2024-11-18T15:39:06Z

Description

1/5 PR for new Enter Amount component. This PR implements a new component but doesn't use it anywhere. The tests are absent as this component will be covered with its usages in the follow-up PRs.

This is only done to reduce amount of lines to review per PR as at the end this whole feature is about 1k new lines and -1k of removed lines.

Test plan

Omit tests for now but in the follow-up PRs the following test files will be testing this component:

EnterAmount.test.tsx
EarnEnterAmount.test.tsx
SwapScreen.test.tsx

There will also be some test files that are gonna be fixed alongside. Please, see the follow-up PRs for more details.

Related issues

Relates to RET-1208

Backwards compatibility

Yes

Network scalability

If a new NetworkId and/or Network are added in the future, the changes in this PR will:

Continue to work without code changes, OR trigger a compilation error (guaranteeing we find it when a new network is added)

codecov · 2024-11-19T08:01:25Z

Codecov Report

Attention: Patch coverage is 92.41379% with 11 lines in your changes missing coverage. Please review.

Project coverage is 88.97%. Comparing base (3516a13) to head (2e0adc1).
Report is 1 commits behind head on main.

Files with missing lines	Patch %	Lines
src/components/TokenEnterAmount.tsx	92.41%	11 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #6242      +/-   ##
==========================================
+ Coverage   88.94%   88.97%   +0.02%     
==========================================
  Files         738      739       +1     
  Lines       31498    31643     +145     
  Branches     5838     5890      +52     
==========================================
+ Hits        28016    28153     +137     
- Misses       3282     3290       +8     
  Partials      200      200

Files with missing lines	Coverage Δ
src/components/TokenEnterAmount.tsx	`92.41% <92.41%> (ø)`

... and 1 file with indirect coverage changes

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 3516a13...2e0adc1. Read the comment docs.

sviderock · 2024-11-19T09:00:32Z

src/components/TokenEnterAmount.tsx

+  const formattedInputValue = useMemo(() => {
+    const number = groupNumber(inputValue)
+      .replaceAll('.', decimalSeparator)
+      .replaceAll('group', groupingSeparator)
+    if (amountType === 'token') return number
+    return number !== '' ? `${localCurrencySymbol}${number}` : ''
+  }, [inputValue, amountType, localCurrencySymbol])


I figured its easier to add currency sign before whatever is typed in the amount field rather than trying to parse it while having that sign and manage all the use-cases when it whether includes the sign (when typing in fiat) or not (when typing in crypto).

sviderock · 2024-11-19T09:01:20Z

src/components/TokenEnterAmount.tsx

+    }
+  }
+
+  return (


Kudos to @kathaypacific for implementing 95% of this component 🚀

kathaypacific

💥 looking great!! i had just a few small questions and suggestions for tests :)

kathaypacific · 2024-11-22T12:19:45Z

src/components/TokenEnterAmount.test.tsx

+    inputValue: '1',
+    tokenAmount: '1',
+    localAmount: '$0.1',
+    amountType: 'token' as AmountEnteredIn,


Suggested change

amountType: 'token' as AmountEnteredIn,

amountType: 'token' as const,

@kathaypacific considering this is more for the intellisense purpose I would keep it as is!

i'm not sure i understand - explicit casting like this is generally dangerous because 'blah' as AmountEnteredIn will not produce any errors whereas 'blah' as const will

@kathaypacific but calling intellisense on the empty string will provide you available options of token and local

i see, so we are prioritising the experience of writing this value. my concern comes down to as SomeType is a way to ignore all the static type checking functionality that Typescript gives us, so I try to avoid it. if the allowed values of AmountEnteredIn changes then this test will not be flagged, but i guess at runtime the tests will fail (slower time to uncover the problem). we've been quite inconsistent with casting using the type or const though so it's also fine by me to keep it like this

kathaypacific · 2024-11-22T12:20:58Z

src/components/TokenEnterAmount.test.tsx

+    toggleAmountType: mockToggleAmountType,
+    onOpenTokenPicker: mockOnOpenTokenPicker,
+    editable: true,
+    testID: 'tokenEnterAmount',


super nit: i think the pattern is to use TitleCase for test id's

Suggested change

testID: 'tokenEnterAmount',

testID: 'TokenEnterAmount',

@kathaypacific Sorry, this was the part generated by Chat GPT so I just kept it unchanged 🤦
Will change!

kathaypacific · 2024-11-22T12:22:10Z

src/components/TokenEnterAmount.test.tsx

+    testID: 'tokenEnterAmount',
+  }
+
+  it('renders without crashing', () => {


nit: i think that this test is unnecessary, the scenario is already covered by the following tests (since the input to the render method is the same, and asserting on elements already ensures that the component has successfully rendered without errors)

kathaypacific · 2024-11-22T12:24:07Z

src/components/TokenEnterAmount.test.tsx

+        <TokenEnterAmount {...defaultProps} />
+      </Provider>
+    )
+    expect(getByTestId('tokenEnterAmount/TokenName')).toBeTruthy()


Suggested change

expect(getByTestId('tokenEnterAmount/TokenName')).toBeTruthy()

expect(getByTestId('tokenEnterAmount/TokenName')).toHaveTextContent('CELO on Celo Alfajores')

kathaypacific · 2024-11-22T12:30:11Z

src/components/TokenEnterAmount.test.tsx

+    expect(getByTestId('tokenEnterAmount/TokenSelect')).toBeTruthy()
+    expect(getByTestId('tokenEnterAmount/TokenBalance')).toBeTruthy()
+    expect(getByTestId('tokenEnterAmount/TokenBalance').props.children.props.i18nKey).toBe(
+      'tokenEnterAmount.availableBalance'


if it's possible we should avoid digging into props since then we test implementation details rather than user outcomes...could instead consider doing something like

expect(getByTestId('tokenEnterAmount/TokenBalance')).toHaveTextContent( 'tokenEnterAmount.availableBalance' ) expect(getByTestId('tokenEnterAmount/TokenBalance')).toHaveTextContent('5.00 CELO')

?

@kathaypacific This makes sense! I've tried initially with getByText but for some reason for this particular test it couldn't find an element with that text (probably, cause it was including multiple nested Text tags so it wasn't able to match it). But your suggestion might work! Will try it out.

kathaypacific · 2024-11-22T12:37:01Z

src/components/TokenEnterAmount.test.tsx

+    const input = getByTestId('tokenEnterAmount/TokenAmountInput')
+    const converted = getByTestId('tokenEnterAmount/ExchangeAmount')
+    expect(input.props.value).toBe('1')
+    expect(converted.props.children).toBe(`${APPROX_SYMBOL} $0.1`)


Suggested change

expect(converted.props.children).toBe(`${APPROX_SYMBOL} $0.1`)

expect(converted).toHaveTextContent(`${APPROX_SYMBOL} $0.1`)

kathaypacific · 2024-11-22T12:39:11Z

src/components/TokenEnterAmount.test.tsx

+    )
+    const input = getByTestId('tokenEnterAmount/TokenAmountInput')
+
+    expect(input.props.editable).toBe(false)


Suggested change

expect(input.props.editable).toBe(false)

expect(input).toBeDisabled()

kathaypacific · 2024-11-22T12:39:47Z

src/components/TokenEnterAmount.test.tsx

+      </Provider>
+    )
+    const exchangeAmount = getByTestId('tokenEnterAmount/ExchangeAmount')
+    expect(exchangeAmount.props.children).toBe(`${APPROX_SYMBOL} $0.1`)


Suggested change

expect(exchangeAmount.props.children).toBe(`${APPROX_SYMBOL} $0.1`)

expect(exchangeAmount).toHaveTextContent(`${APPROX_SYMBOL} $0.1`)

kathaypacific · 2024-11-22T12:47:01Z

src/components/TokenEnterAmount.tsx

+const BORDER_RADIUS = 12
+
+function groupNumber(value: string) {
+  return value.replace(/\B(?=(\d{3})+(?!\d))(?<!\.\d*)/g, 'group')


can we please add a comment about what this regex does? 🙈 i would definitely benefit from this, i don't speak regex fluently

@kathaypacific I've refactored this function a bit in the next PR and added comments explaining how it works!

oh, i wish i hadn't spent time trying to understand this implementation then....😅 going forward it'd be helpful to consider not including changes that will be undone in subsequent PRs or adding a note about it :)

@kathaypacific I'm sorry, definitely my bad! I should've put this component and the new useEnterAmount hook into a single PR. Sorry!

kathaypacific · 2024-11-22T14:20:16Z

src/components/TokenEnterAmount.tsx

+  const formattedInputValue = useMemo(() => {
+    const number = groupNumber(inputValue)
+      .replaceAll('.', decimalSeparator)
+      .replaceAll('group', groupingSeparator)


could we add a couple of tests around the expected outcome of this formatting function? i think i may be missing something, but i'm surprised that we can freely use '.' here - if the inputValue is 1.234.567,888, would this function still work? (unsure if this is a real scenario and if consumers of this component will pass in formatted values, but this formatting convention is real)

@kathaypacific you're right! It was a bug that I've revealed once I was working on a useEnterAmount hook in the next PR. I've refactored this part as well so it should be resolved there!

In order to not keep these issues in the codebase - I would wait for the next PR to also get approved and will merge them both in a batch!

kathaypacific

✨🚀

kathaypacific · 2024-11-25T12:54:34Z

src/components/TokenEnterAmount.test.tsx

+    expect(getByText('CELO on Celo Alfajores')).toBeTruthy()
+    expect(getByTestId('TokenEnterAmount/SwitchTokens')).toBeTruthy()
+    expect(getByTestId('TokenEnterAmount/TokenSelect')).toBeTruthy()
+    expect(getByTestId('TokenEnterAmount/TokenBalance')).toBeTruthy()


nit: you can remove this line, since we are asserting on it toHaveTextContent next. there might be other places where you can omit the toBeTruthy() check too

### Description 2/5 PR for new Enter Amount component. This PR introduces `useEnterAmount` hook that uses the very same logic `EnterAmount.tsx` and `EarnEnterAmount.tsx` uses for handling: - text input management (regex check, onChange, setting the right value for the right type etc.) - whenever data changes - creates a derived state with all the necessary data for any processing currently present (can be extended in the future) This change is supposed to reduce a lot of boilerplate once it is used in the corresponding flows (please, check the follow-up PRs). ### Test plan No tests for now. Tests will be present starting the next (3/5) PR which is related to applying this hook and new component to the Send flow. ### Related issues - Relates to RET-1208 - ### Backwards compatibility Yes ### Network scalability If a new NetworkId and/or Network are added in the future, the changes in this PR will: - [x] Continue to work without code changes, OR trigger a compilation error (guaranteeing we find it when a new network is added)

sviderock added 4 commits November 18, 2024 16:44

add new TokenEnterAmount component

e5ab0a5

fix exports

2fbc1b2

Merge branch 'main' into slava/add-new-enter-amount-component

b12d50f

remove unnecessary changes

b7e5107

Merge branch 'main' into slava/add-new-enter-amount-component

6ca6f92

sviderock marked this pull request as ready for review November 19, 2024 08:24

sviderock commented Nov 19, 2024

View reviewed changes

sviderock added 3 commits November 20, 2024 15:39

add tests

b3f3c67

clear up console logs

8ce68a4

Merge branch 'main' into slava/add-new-enter-amount-component

112e5f9

kathaypacific reviewed Nov 22, 2024

View reviewed changes

fix as per the review

0d64a5b

kathaypacific approved these changes Nov 25, 2024

View reviewed changes

sviderock added this pull request to the merge queue Nov 25, 2024

sviderock removed this pull request from the merge queue due to a manual request Nov 25, 2024

sviderock added 4 commits November 25, 2024 15:27

fix as per the review comments

2031bbc

Merge branch 'main' into slava/add-new-enter-amount-component

d7b5f0a

Merge branch 'main' into slava/add-new-enter-amount-component

1a0c2bc

sviderock changed the title ~~feat(TokenEnterAmount): Add new Enter Amount component~~ feat(TokenEnterAmount): Add new Enter Amount component and useEnterAmount hook Nov 26, 2024

sviderock added this pull request to the merge queue Nov 26, 2024

Merged via the queue into main with commit 8aa9921 Nov 26, 2024
16 checks passed

sviderock deleted the slava/add-new-enter-amount-component branch November 26, 2024 14:21

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(TokenEnterAmount): Add new Enter Amount component and useEnterAmount hook #6242

feat(TokenEnterAmount): Add new Enter Amount component and useEnterAmount hook #6242

sviderock commented Nov 18, 2024 •

edited

Loading

codecov bot commented Nov 19, 2024 •

edited

Loading

sviderock Nov 19, 2024

sviderock Nov 19, 2024

kathaypacific left a comment

kathaypacific Nov 22, 2024

sviderock Nov 22, 2024

kathaypacific Nov 25, 2024

sviderock Nov 25, 2024

kathaypacific Nov 25, 2024

kathaypacific Nov 22, 2024

sviderock Nov 22, 2024

kathaypacific Nov 22, 2024 •

edited

Loading

kathaypacific Nov 22, 2024 •

edited

Loading

kathaypacific Nov 22, 2024

sviderock Nov 22, 2024 •

edited

Loading

sviderock Nov 22, 2024

kathaypacific Nov 22, 2024

kathaypacific Nov 22, 2024

kathaypacific Nov 22, 2024

kathaypacific Nov 22, 2024

sviderock Nov 22, 2024

kathaypacific Nov 25, 2024

sviderock Nov 25, 2024

kathaypacific Nov 22, 2024 •

edited

Loading

sviderock Nov 22, 2024

kathaypacific left a comment

kathaypacific Nov 25, 2024

	amountType: 'token' as AmountEnteredIn,
	amountType: 'token' as const,

	expect(getByTestId('tokenEnterAmount/TokenName')).toBeTruthy()
	expect(getByTestId('tokenEnterAmount/TokenName')).toHaveTextContent('CELO on Celo Alfajores')

	expect(converted.props.children).toBe(`${APPROX_SYMBOL} $0.1`)
	expect(converted).toHaveTextContent(`${APPROX_SYMBOL} $0.1`)

	expect(input.props.editable).toBe(false)
	expect(input).toBeDisabled()

	expect(exchangeAmount.props.children).toBe(`${APPROX_SYMBOL} $0.1`)
	expect(exchangeAmount).toHaveTextContent(`${APPROX_SYMBOL} $0.1`)

feat(TokenEnterAmount): Add new Enter Amount component and useEnterAmount hook #6242

feat(TokenEnterAmount): Add new Enter Amount component and useEnterAmount hook #6242

Conversation

sviderock commented Nov 18, 2024 • edited Loading

Description

Test plan

Related issues

Backwards compatibility

Network scalability

codecov bot commented Nov 19, 2024 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kathaypacific left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kathaypacific Nov 22, 2024 • edited Loading

Choose a reason for hiding this comment

kathaypacific Nov 22, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sviderock Nov 22, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kathaypacific Nov 22, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kathaypacific left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sviderock commented Nov 18, 2024 •

edited

Loading

codecov bot commented Nov 19, 2024 •

edited

Loading

kathaypacific Nov 22, 2024 •

edited

Loading

kathaypacific Nov 22, 2024 •

edited

Loading

sviderock Nov 22, 2024 •

edited

Loading

kathaypacific Nov 22, 2024 •

edited

Loading