From 9fd739110e3cda379fb39cca779ed5f9d6805428 Mon Sep 17 00:00:00 2001
From: Alissa Crane <alissacranespam@gmail.com>
Date: Mon, 10 Jun 2024 18:21:48 -0400
Subject: [PATCH] address pr comments - alphabetize and reorder imports

---
 site/docs/pages/swap/swap-amount-input.mdx | 20 ++++++++--------
 site/docs/pages/swap/types.mdx             | 10 ++++----
 src/swap/components/SwapAmountInput.tsx    | 28 +++++++++++-----------
 src/swap/index.ts                          |  3 +--
 src/swap/types.ts                          | 16 ++++++-------
 5 files changed, 38 insertions(+), 39 deletions(-)

diff --git a/site/docs/pages/swap/swap-amount-input.mdx b/site/docs/pages/swap/swap-amount-input.mdx
index 886c7ddd7e..846ab68b87 100644
--- a/site/docs/pages/swap/swap-amount-input.mdx
+++ b/site/docs/pages/swap/swap-amount-input.mdx
@@ -13,7 +13,10 @@ The `SwapAmountInput` component is a stylized input field designed for users to
 
 ```tsx [code]
 <SwapAmountInput
-  token={token}
+  amount={amount}
+  label="Sell"
+  setAmount={setAmount}
+  setToken={setToken}
   swappableTokens={[
     {
       address: '0x1234',
@@ -26,11 +29,8 @@ The `SwapAmountInput` component is a stylized input field designed for users to
     },
     ...
   ]}
-  label="Sell"
-  amount={amount}
+  token={token}
   tokenBalance={tokenBalance}
-  setAmount={setAmount}
-  setToken={setToken}
 />
 ```
 
@@ -75,7 +75,10 @@ The `SwapAmountInput` component is a stylized input field designed for users to
   <SwapAmountInputContainer>
     {(token, setToken, setAmount, amount, tokenBalance) => (
       <SwapAmountInput
-        token={token}
+        amount={amount}
+        label="Sell"
+        setAmount={setAmount}
+        setToken={setToken}
         swappableTokens={[
           {
             name: 'Ethereum',
@@ -104,11 +107,8 @@ The `SwapAmountInput` component is a stylized input field designed for users to
             chainId: 8453,
           },
         ]}
-        label="Sell"
-        amount={amount}
+        token={token}
         tokenBalance={tokenBalance}
-        setAmount={setAmount}
-        setToken={setToken}
       />
     )}
   </SwapAmountInputContainer>
diff --git a/site/docs/pages/swap/types.mdx b/site/docs/pages/swap/types.mdx
index cb5cab026a..8e77b70884 100644
--- a/site/docs/pages/swap/types.mdx
+++ b/site/docs/pages/swap/types.mdx
@@ -9,13 +9,13 @@ description: Glossary of Types in Swap Kit.
 
 ```ts
 type SwapAmountInputReact = {
-  label: string; // Descriptive label for the input field
   amount?: string; // Token amount
-  token?: Token; // Selected token
-  swappableTokens?: Token[]; // Tokens available for swap
-  tokenBalance?: string; // Amount of selected token user owns
+  disabled?: boolean; // Whether the input is disabled
+  label: string; // Descriptive label for the input field
   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
+  swappableTokens: Token[]; // Tokens available for swap
+  token?: Token; // Selected token
+  tokenBalance?: string; // Amount of selected token user owns
 };
 ```
diff --git a/src/swap/components/SwapAmountInput.tsx b/src/swap/components/SwapAmountInput.tsx
index e8c29892f0..79d06ac613 100644
--- a/src/swap/components/SwapAmountInput.tsx
+++ b/src/swap/components/SwapAmountInput.tsx
@@ -1,18 +1,18 @@
 import { useCallback } from 'react';
 
-import { SwapAmountInputReact } from '../types';
 import { isValidAmount } from '../utils';
 import { TokenSelector, TokenSelectorDropdown } from '../../token';
+import type { SwapAmountInputReact } from '../types';
 
 export function SwapAmountInput({
-  token,
-  swappableTokens,
-  label,
   amount,
-  tokenBalance,
+  disabled = false,
+  label,
   setAmount,
   setToken,
-  disabled = false,
+  swappableTokens,
+  token,
+  tokenBalance,
 }: SwapAmountInputReact) {
   const handleAmountChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -30,7 +30,7 @@ export function SwapAmountInput({
   }, [tokenBalance, setAmount]);
 
   return (
-    <div data-testid="ockSwapAmountInput_Container" className="ock-swapamountinput-container">
+    <div className="ock-swapamountinput-container" data-testid="ockSwapAmountInput_Container">
       <div className="ock-swapamountinput-row">
         <label className="ock-swapamountinput-label">{label}</label>
         {tokenBalance && (
@@ -38,25 +38,25 @@ export function SwapAmountInput({
         )}
       </div>
       <div className="ock-swapamountinput-row">
-        <TokenSelector token={token} setToken={setToken}>
-          <TokenSelectorDropdown setToken={setToken} options={swappableTokens} />
+        <TokenSelector setToken={setToken} token={token}>
+          <TokenSelectorDropdown options={swappableTokens} setToken={setToken} />
         </TokenSelector>
         <button
-          data-testid="ockSwapAmountInput_MaxButton"
           className="ock-swapamountinput-maxbutton"
-          onClick={handleMaxButtonClick}
+          data-testid="ockSwapAmountInput_MaxButton"
           disabled={tokenBalance === undefined}
+          onClick={handleMaxButtonClick}
         >
           Max
         </button>
       </div>
       <input
         className="ock-swapamountinput-input"
-        value={amount}
+        data-testid="ockSwapAmountInput_Input"
+        disabled={disabled}
         onChange={handleAmountChange}
         placeholder="0"
-        disabled={disabled}
-        data-testid="ockSwapAmountInput_Input"
+        value={amount}
       />
     </div>
   );
diff --git a/src/swap/index.ts b/src/swap/index.ts
index 777ef72622..18b70f612b 100644
--- a/src/swap/index.ts
+++ b/src/swap/index.ts
@@ -1,5 +1,6 @@
 // 🌲☀️🌲
 export { getQuote } from './core/getQuote';
+export { SwapAmountInput } from './components/SwapAmountInput';
 export type {
   Fee,
   GetQuoteParams,
@@ -8,5 +9,3 @@ export type {
   QuoteWarning,
   SwapError,
 } from './types';
-
-export { SwapAmountInput } from './components/SwapAmountInput';
diff --git a/src/swap/types.ts b/src/swap/types.ts
index 9171649a2d..684ba8cb30 100644
--- a/src/swap/types.ts
+++ b/src/swap/types.ts
@@ -84,12 +84,12 @@ export type Transaction = {
 };
 
 export type SwapAmountInputReact = {
-  label: string;
-  amount?: string;
-  token?: Token;
-  swappableTokens: Token[];
-  tokenBalance?: string;
-  setAmount: (amount: string) => void;
-  setToken: () => void;
-  disabled?: boolean;
+  amount?: string; // Token amount
+  disabled?: boolean; // Whether the input is disabled
+  label: string; // Descriptive label for the input field
+  setAmount: (amount: string) => void; // Callback function when the amount changes
+  setToken: () => void; // Callback function when the token selector is clicked
+  swappableTokens: Token[]; // Tokens available for swap
+  token?: Token; // Selected token
+  tokenBalance?: string; // Amount of selected token user owns
 };