Skip to content

Commit

Permalink
address pr comments - alphabetize and reorder imports
Browse files Browse the repository at this point in the history
  • Loading branch information
abcrane123 committed Jun 11, 2024
1 parent 37cafa2 commit 9fd7391
Show file tree
Hide file tree
Showing 5 changed files with 38 additions and 39 deletions.
20 changes: 10 additions & 10 deletions site/docs/pages/swap/swap-amount-input.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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}
/>
```

Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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>
Expand Down
10 changes: 5 additions & 5 deletions site/docs/pages/swap/types.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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
};
```
28 changes: 14 additions & 14 deletions src/swap/components/SwapAmountInput.tsx
Original file line number Diff line number Diff line change
@@ -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>) => {
Expand All @@ -30,33 +30,33 @@ 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 && (
<label className="ock-swapamountinput-balance">{`Balance: ${tokenBalance}`}</label>
)}
</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>
);
Expand Down
3 changes: 1 addition & 2 deletions src/swap/index.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
// 🌲☀️🌲
export { getQuote } from './core/getQuote';
export { SwapAmountInput } from './components/SwapAmountInput';
export type {
Fee,
GetQuoteParams,
Expand All @@ -8,5 +9,3 @@ export type {
QuoteWarning,
SwapError,
} from './types';

export { SwapAmountInput } from './components/SwapAmountInput';
16 changes: 8 additions & 8 deletions src/swap/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
};

0 comments on commit 9fd7391

Please sign in to comment.