From 79f7aef636bcb5ffa4f6018c28710906751928a9 Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Mon, 10 Jun 2024 17:43:35 -0400 Subject: [PATCH] rename props --- site/docs/pages/swap/swap-amount-input.mdx | 8 +++---- site/docs/pages/swap/types.mdx | 4 ++-- src/swap/components/SwapAmountInput.test.tsx | 22 ++++++++++---------- src/swap/components/SwapAmountInput.tsx | 16 +++++++------- src/swap/types.ts | 4 ++-- 5 files changed, 27 insertions(+), 27 deletions(-) diff --git a/site/docs/pages/swap/swap-amount-input.mdx b/site/docs/pages/swap/swap-amount-input.mdx index 125f83af9a..886c7ddd7e 100644 --- a/site/docs/pages/swap/swap-amount-input.mdx +++ b/site/docs/pages/swap/swap-amount-input.mdx @@ -29,8 +29,8 @@ The `SwapAmountInput` component is a stylized input field designed for users to label="Sell" amount={amount} tokenBalance={tokenBalance} - onAmountChange={setAmount} - onTokenSelectorClick={setToken} + setAmount={setAmount} + setToken={setToken} /> ``` @@ -107,8 +107,8 @@ The `SwapAmountInput` component is a stylized input field designed for users to label="Sell" amount={amount} tokenBalance={tokenBalance} - onAmountChange={setAmount} - onTokenSelectorClick={setToken} + setAmount={setAmount} + setToken={setToken} /> )} diff --git a/site/docs/pages/swap/types.mdx b/site/docs/pages/swap/types.mdx index 13e6b04c36..cb5cab026a 100644 --- a/site/docs/pages/swap/types.mdx +++ b/site/docs/pages/swap/types.mdx @@ -14,8 +14,8 @@ type SwapAmountInputReact = { token?: Token; // Selected token swappableTokens?: Token[]; // Tokens available for swap tokenBalance?: string; // Amount of selected token user owns - onAmountChange: (amount: string) => void; // Callback function when the amount changes - onTokenSelectorClick: () => void; // Callback function when the token selector is clicked + setAmount: (amount: string) => void; // Callback function when the amount changes + setToken: () => void; // Callback function when the token selector is clicked disabled?: boolean; // Whether the input is disabled }; ``` diff --git a/src/swap/components/SwapAmountInput.test.tsx b/src/swap/components/SwapAmountInput.test.tsx index a854d905b2..af7a4a5064 100644 --- a/src/swap/components/SwapAmountInput.test.tsx +++ b/src/swap/components/SwapAmountInput.test.tsx @@ -56,8 +56,8 @@ describe('SwapAmountInput Component', () => { token={token} swappableTokens={swappableTokens} label="Sell" - onAmountChange={setAmountMock} - onTokenSelectorClick={selectTokenClickMock} + setAmount={setAmountMock} + setToken={selectTokenClickMock} amount="1" tokenBalance="100" />, @@ -79,8 +79,8 @@ describe('SwapAmountInput Component', () => { token={token} swappableTokens={swappableTokens} label="Sell" - onAmountChange={setAmountMock} - onTokenSelectorClick={selectTokenClickMock} + setAmount={setAmountMock} + setToken={selectTokenClickMock} />, ); @@ -96,8 +96,8 @@ describe('SwapAmountInput Component', () => { token={token} swappableTokens={swappableTokens} label="Sell" - onAmountChange={setAmountMock} - onTokenSelectorClick={selectTokenClickMock} + setAmount={setAmountMock} + setToken={selectTokenClickMock} amount="1" />, ); @@ -108,15 +108,15 @@ describe('SwapAmountInput Component', () => { expect(input.value).toBe('1'); }); - it('should call onAmountChange with tokenBalance when the max button is clicked', async () => { + it('should call setAmount with tokenBalance when the max button is clicked', async () => { render( , ); @@ -133,8 +133,8 @@ describe('SwapAmountInput Component', () => { swappableTokens={swappableTokens} label="Sell" amount="1" - onAmountChange={setAmountMock} - onTokenSelectorClick={selectTokenClickMock} + setAmount={setAmountMock} + setToken={selectTokenClickMock} disabled />, ); diff --git a/src/swap/components/SwapAmountInput.tsx b/src/swap/components/SwapAmountInput.tsx index 54dc7c74fa..e8c29892f0 100644 --- a/src/swap/components/SwapAmountInput.tsx +++ b/src/swap/components/SwapAmountInput.tsx @@ -10,24 +10,24 @@ export function SwapAmountInput({ label, amount, tokenBalance, - onAmountChange, - onTokenSelectorClick, + setAmount, + setToken, disabled = false, }: SwapAmountInputReact) { const handleAmountChange = useCallback( (event: React.ChangeEvent) => { if (isValidAmount(event.target.value)) { - onAmountChange(event.target.value); + setAmount(event.target.value); } }, - [onAmountChange], + [setAmount], ); const handleMaxButtonClick = useCallback(() => { if (tokenBalance && isValidAmount(tokenBalance)) { - onAmountChange(tokenBalance); + setAmount(tokenBalance); } - }, [tokenBalance, onAmountChange]); + }, [tokenBalance, setAmount]); return (
@@ -38,8 +38,8 @@ export function SwapAmountInput({ )}
- - + +