rename props

coinbase · Jun 11, 2024 · 79f7aef · 79f7aef
1 parent af68798
commit 79f7aef
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 27 deletions.
diff --git 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}
       />
     )}
   </SwapAmountInputContainer>

diff --git 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
@@ -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(
       <SwapAmountInput
         token={token}
         swappableTokens={swappableTokens}
         label="Sell"
         amount="1"
-        onAmountChange={setAmountMock}
-        onTokenSelectorClick={selectTokenClickMock}
+        setAmount={setAmountMock}
+        setToken={selectTokenClickMock}
         tokenBalance="100"
       />,
     );
@@ -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
@@ -10,24 +10,24 @@ export function SwapAmountInput({
   label,
   amount,
   tokenBalance,
-  onAmountChange,
-  onTokenSelectorClick,
+  setAmount,
+  setToken,
   disabled = false,
 }: SwapAmountInputReact) {
   const handleAmountChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
       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 (
     <div data-testid="ockSwapAmountInput_Container" className="ock-swapamountinput-container">
@@ -38,8 +38,8 @@ export function SwapAmountInput({
         )}
       </div>
       <div className="ock-swapamountinput-row">
-        <TokenSelector token={token} setToken={onTokenSelectorClick}>
-          <TokenSelectorDropdown setToken={onTokenSelectorClick} options={swappableTokens} />
+        <TokenSelector token={token} setToken={setToken}>
+          <TokenSelectorDropdown setToken={setToken} options={swappableTokens} />
         </TokenSelector>
         <button
           data-testid="ockSwapAmountInput_MaxButton"

diff --git a/src/swap/types.ts b/src/swap/types.ts
@@ -89,7 +89,7 @@ export type SwapAmountInputReact = {
   token?: Token;
   swappableTokens: Token[];
   tokenBalance?: string;
-  onAmountChange: (amount: string) => void;
-  onTokenSelectorClick: () => void;
+  setAmount: (amount: string) => void;
+  setToken: () => void;
   disabled?: boolean;
 };