From 45d1b0786e11f98f57b33e00d6171e37f170d0a4 Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Mon, 10 Jun 2024 11:13:01 -0400 Subject: [PATCH 01/35] add token amount input component --- src/token/components/TokenAmountInput.tsx | 74 +++++++++++++++++++++++ src/token/types.ts | 10 +++ src/token/utils.ts | 11 ++++ 3 files changed, 95 insertions(+) create mode 100644 src/token/components/TokenAmountInput.tsx create mode 100644 src/token/utils.ts diff --git a/src/token/components/TokenAmountInput.tsx b/src/token/components/TokenAmountInput.tsx new file mode 100644 index 0000000000..07e56fdf46 --- /dev/null +++ b/src/token/components/TokenAmountInput.tsx @@ -0,0 +1,74 @@ +import { useCallback, CSSProperties } from 'react'; + +import { TokenAmountInputReact } from '../types'; +import { isValidAmount } from '../utils'; +import { TokenSelector } from '../../token'; + +const styles = { + container: { + display: 'flex', + flexDirection: 'column', + borderRadius: '16px', + background: '#EEF0F3', + padding: '16px', + width: 'fit-content', + boxSizing: 'border-box', + alignItems: 'flex-start', + }, + label: { + fontSize: '0.875rem', + color: '#5B616E', + paddingBottom: '0.25rem', + }, + inputContainer: { + display: 'flex', + flexDirection: 'column', + width: '100%', + boxSizing: 'border-box', + justifyContent: 'space-between', + marginBottom: 'auto', + }, + input: { + fontSize: '2.5rem', + border: 'none', + background: 'none', + outline: 'none', + maxWidth: '18.75rem', + color: 'black', + }, +} as Record; + +export function TokenAmountInput({ + label, + amount, + onAmountChange, + token, + onTokenSelectorClick, + disabled = false, +}: TokenAmountInputReact) { + const handleAmountChange = useCallback( + (event: React.ChangeEvent) => { + if (isValidAmount(event.target.value)) { + onAmountChange(event.target.value); + } + }, + [onAmountChange], + ); + + return ( +
+ +
+ + +
+
+ ); +} diff --git a/src/token/types.ts b/src/token/types.ts index fd42d4fa8a..9ad11e61c1 100644 --- a/src/token/types.ts +++ b/src/token/types.ts @@ -103,3 +103,13 @@ export type TokenSelectorDropdownReact = { options: Token[]; // List of tokens setToken: (token: Token) => void; // Token setter }; + +export type TokenAmountInputReact = { + label: string; + amount?: string; + onAmountChange: (amount: string) => void; + onTokenSelectorClick: () => void; + token?: Token; + estimatedAmountInFiat?: string; + disabled?: boolean; +}; diff --git a/src/token/utils.ts b/src/token/utils.ts new file mode 100644 index 0000000000..6275805179 --- /dev/null +++ b/src/token/utils.ts @@ -0,0 +1,11 @@ +// checks that input is a number +export function isValidAmount(value: string) { + if (value.length > 11) { + return false; + } + if (value === '') { + return true; + } + const regex = /^[0-9]*\.?[0-9]*$/; + return regex.test(value); +} From 2c87bde91b08094d7c3ee51b4e1f327624add431 Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Mon, 10 Jun 2024 11:17:06 -0400 Subject: [PATCH 02/35] adjust style --- src/token/components/TokenAmountInput.tsx | 33 +++++++++-------------- 1 file changed, 12 insertions(+), 21 deletions(-) diff --git a/src/token/components/TokenAmountInput.tsx b/src/token/components/TokenAmountInput.tsx index 07e56fdf46..9da34a48cc 100644 --- a/src/token/components/TokenAmountInput.tsx +++ b/src/token/components/TokenAmountInput.tsx @@ -14,19 +14,12 @@ const styles = { width: 'fit-content', boxSizing: 'border-box', alignItems: 'flex-start', + gap: '11px', }, label: { fontSize: '0.875rem', - color: '#5B616E', - paddingBottom: '0.25rem', - }, - inputContainer: { - display: 'flex', - flexDirection: 'column', - width: '100%', - boxSizing: 'border-box', - justifyContent: 'space-between', - marginBottom: 'auto', + color: '#030712', + fontWeight: '600', }, input: { fontSize: '2.5rem', @@ -58,17 +51,15 @@ export function TokenAmountInput({ return (
-
- - -
+ +
); } From a7b29b3a53abeb8410227bc792defe198a93104b Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Mon, 10 Jun 2024 11:18:50 -0400 Subject: [PATCH 03/35] add component to docs --- site/docs/pages/token/token-amount-input.mdx | 62 ++++++++++++++++++++ site/docs/pages/token/types.mdx | 14 +++++ site/sidebar.ts | 4 ++ src/token/index.ts | 2 + 4 files changed, 82 insertions(+) create mode 100644 site/docs/pages/token/token-amount-input.mdx diff --git a/site/docs/pages/token/token-amount-input.mdx b/site/docs/pages/token/token-amount-input.mdx new file mode 100644 index 0000000000..d1b7cac80e --- /dev/null +++ b/site/docs/pages/token/token-amount-input.mdx @@ -0,0 +1,62 @@ +import App from '../App'; +import { TokenAmountInput } from '../../../../src/token'; + +# `` + +The `TokenAmountInput` component is a stylized input field designed for users to specify the amount of a particular token they wish to swap. This component integrates the `TokenSelector` component to allow users to select different tokens. + +## Usage + +:::code-group + +```tsx [code] + {}} + onTokenSelectorClick={() => {}} +/> +``` + +```html [return html] + +``` + +::: + + + {}} + onTokenSelectorClick={() => {}} + /> + + +## Props + +[`TokenAmountInputReact`](/token/types#TokenAmountInputreact) + +## CSS + +```css + +``` \ No newline at end of file diff --git a/site/docs/pages/token/types.mdx b/site/docs/pages/token/types.mdx index d4c1d96844..ee0aa8c9be 100644 --- a/site/docs/pages/token/types.mdx +++ b/site/docs/pages/token/types.mdx @@ -108,3 +108,17 @@ export type TokenSelectorDropdownReact = { setToken: (token: Token) => void; // Token setter }; ``` + +## `TokenAmountInputReact` + +```ts +type TokenAmountInputReact = { + label: string; // Descriptive label for the input field + amount?: string; // Token amount + onAmountChange: (amount: string) => void; // Callback function when the amount changes + onTokenSelectorClick: () => void; // Callback function when the token selector is clicked + token?: Token; // Selected token + estimatedAmountInFiat?: string; // Estimated amount in fiat currency + disabled?: boolean; // Whether the input is disabled +}; +``` \ No newline at end of file diff --git a/site/sidebar.ts b/site/sidebar.ts index 3b822a1898..0fed9daae5 100644 --- a/site/sidebar.ts +++ b/site/sidebar.ts @@ -173,6 +173,10 @@ export const sidebar = [ text: 'TokenSelector', link: '/token/token-selector', }, + { + text: 'TokenAmountInput', + link: '/token/token-amount-input', + }, ], }, { diff --git a/src/token/index.ts b/src/token/index.ts index 928d9408ff..5bbd8e11e7 100644 --- a/src/token/index.ts +++ b/src/token/index.ts @@ -7,6 +7,7 @@ export { TokenSelector } from './components/TokenSelector'; export { TokenSelectorDropdown } from './components/TokenSelectorDropdown'; export { formatAmount } from './core/formatAmount'; export { getTokens } from './core/getTokens'; +export { TokenAmountInput } from './components/TokenAmountInput'; export type { GetTokensError, GetTokensOptions, @@ -15,4 +16,5 @@ export type { TokenChipReact, TokenRowReact, TokenSelectorReact, + TokenAmountInputReact, } from './types'; From aa8eb46ecfcb349fe00eb8231a2f38efcb115cd1 Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Mon, 10 Jun 2024 14:24:38 -0400 Subject: [PATCH 04/35] update token amount input --- site/docs/pages/token/token-amount-input.mdx | 59 ++++++++++++++++++- src/token/components/TokenAmountInput.css | 23 ++++++++ src/token/components/TokenAmountInput.tsx | 61 +++++++++----------- src/token/types.ts | 7 ++- 4 files changed, 113 insertions(+), 37 deletions(-) create mode 100644 src/token/components/TokenAmountInput.css diff --git a/site/docs/pages/token/token-amount-input.mdx b/site/docs/pages/token/token-amount-input.mdx index d1b7cac80e..91db240c1c 100644 --- a/site/docs/pages/token/token-amount-input.mdx +++ b/site/docs/pages/token/token-amount-input.mdx @@ -20,10 +20,23 @@ The `TokenAmountInput` component is a stylized input field designed for users to name: 'Ethereum', symbol: 'ETH', }} + swappableTokens={[ + { + address: '0x1234', + chainId: 1, + decimals: 18, + image: + 'https://dynamic-assets.coinbase.com/dbb4b4983bde81309ddab83eb598358eb44375b930b94687ebe38bc22e52c3b2125258ffb8477a5ef22e33d6bd72e32a506c391caa13af64c00e46613c3e5806/asset_icons/4113b082d21cc5fab17fc8f2d19fb996165bcce635e6900f7fc2d57c4ef33ae9.png', + name: 'Ethereum', + symbol: 'ETH', + }, + ]} label="Sell" amount="3.75" + tokenBalance="4" onAmountChange={() => {}} onTokenSelectorClick={() => {}} + onSelectTokenToggle={() => {}} /> ``` @@ -44,8 +57,20 @@ The `TokenAmountInput` component is a stylized input field designed for users to name: 'Ethereum', symbol: 'ETH', }} + swappableTokens={[ + { + address: '0x1234', + chainId: 1, + decimals: 18, + image: + 'https://dynamic-assets.coinbase.com/dbb4b4983bde81309ddab83eb598358eb44375b930b94687ebe38bc22e52c3b2125258ffb8477a5ef22e33d6bd72e32a506c391caa13af64c00e46613c3e5806/asset_icons/4113b082d21cc5fab17fc8f2d19fb996165bcce635e6900f7fc2d57c4ef33ae9.png', + name: 'Ethereum', + symbol: 'ETH', + }, + ]} label="Sell" amount="3.75" + tokenBalance="4" onAmountChange={() => {}} onTokenSelectorClick={() => {}} /> @@ -57,6 +82,38 @@ The `TokenAmountInput` component is a stylized input field designed for users to ## CSS +`TokenSelector` + ```css +.ock-tokenselector-container { + @apply relative; +} +.ock-tokenselector-button { + @apply flex w-fit items-center rounded-2xl px-3 py-1; + background: #eef0f3; + gap: 8px; + outline: none; + &:hover { + background: #cacbce; + } + &:active { + background: #bfc1c3; + } +} +.ock-tokenselector-label { + @apply text-base font-medium leading-normal text-[#0a0b0d]; +} +``` -``` \ No newline at end of file +`TokenSelectorDropdown` + +```css +.ock-tokenselectordropdown-container { + @apply absolute z-10 mt-1 flex max-h-80 w-[250px] flex-col overflow-y-hidden rounded-lg; + scrollbar-width: thin; + scrollbar-color: #eef0f3 #ffffff; +} +.ock-tokenselectordropdown-scroll { + @apply overflow-y-auto; +} +``` diff --git a/src/token/components/TokenAmountInput.css b/src/token/components/TokenAmountInput.css new file mode 100644 index 0000000000..277054db89 --- /dev/null +++ b/src/token/components/TokenAmountInput.css @@ -0,0 +1,23 @@ +.ock-tokenamountinput-container { + @apply box-border flex w-fit flex-col items-start gap-[11px] rounded-2xl bg-[#FFF] p-4; +} + +.ock-tokenamountinput-label { + @apply text-sm font-semibold text-[#030712]; +} + +.ock-tokenamountinput-input { + @apply border-[none] bg-transparent text-5xl text-[black]; +} + +.ock-tokenamountinput-row { + @apply flex w-full items-center justify-between; +} + +.ock-tokenamountinput-balance { + @apply text-sm font-normal text-gray-400; +} + +.ock-tokenamountinput-maxbutton { + @apply bg-gray-100 text-base not-italic font-medium leading-6 flex w-[58px] h-8 max-w-[200px] items-center text-gray-500 px-3 py-2 rounded-[40px]; +} \ No newline at end of file diff --git a/src/token/components/TokenAmountInput.tsx b/src/token/components/TokenAmountInput.tsx index 9da34a48cc..5ffe68f126 100644 --- a/src/token/components/TokenAmountInput.tsx +++ b/src/token/components/TokenAmountInput.tsx @@ -1,42 +1,19 @@ -import { useCallback, CSSProperties } from 'react'; +import { useCallback, CSSProperties, useEffect } from 'react'; import { TokenAmountInputReact } from '../types'; import { isValidAmount } from '../utils'; -import { TokenSelector } from '../../token'; - -const styles = { - container: { - display: 'flex', - flexDirection: 'column', - borderRadius: '16px', - background: '#EEF0F3', - padding: '16px', - width: 'fit-content', - boxSizing: 'border-box', - alignItems: 'flex-start', - gap: '11px', - }, - label: { - fontSize: '0.875rem', - color: '#030712', - fontWeight: '600', - }, - input: { - fontSize: '2.5rem', - border: 'none', - background: 'none', - outline: 'none', - maxWidth: '18.75rem', - color: 'black', - }, -} as Record; +import { TokenSelector, TokenSelectorDropdown } from '../../token'; export function TokenAmountInput({ label, amount, - onAmountChange, token, + swappableTokens, + tokenBalance, + onMaxButtonClick, + onAmountChange, onTokenSelectorClick, + onSelectTokenToggle, disabled = false, }: TokenAmountInputReact) { const handleAmountChange = useCallback( @@ -49,11 +26,27 @@ export function TokenAmountInput({ ); return ( -
- - +
+
+ + {tokenBalance && ( + + )} +
+
+ + + + +
void; onAmountChange: (amount: string) => void; onTokenSelectorClick: () => void; - token?: Token; - estimatedAmountInFiat?: string; + onSelectTokenToggle: () => void; disabled?: boolean; }; From 546c3da43aca46d10f4f8119a862588465213234 Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Mon, 10 Jun 2024 14:34:07 -0400 Subject: [PATCH 05/35] move component to swap directory --- site/docs/pages/swap/swap-amount-input.mdx | 119 +++++++++++++++++++++ site/sidebar.ts | 13 ++- src/swap/components/SwapAmountInput.css | 23 ++++ src/swap/components/SwapAmountInput.tsx | 58 ++++++++++ src/swap/index.ts | 2 + src/swap/types.ts | 13 +++ src/swap/utils.ts | 11 ++ 7 files changed, 235 insertions(+), 4 deletions(-) create mode 100644 site/docs/pages/swap/swap-amount-input.mdx create mode 100644 src/swap/components/SwapAmountInput.css create mode 100644 src/swap/components/SwapAmountInput.tsx create mode 100644 src/swap/utils.ts diff --git a/site/docs/pages/swap/swap-amount-input.mdx b/site/docs/pages/swap/swap-amount-input.mdx new file mode 100644 index 0000000000..cbee2f4c1f --- /dev/null +++ b/site/docs/pages/swap/swap-amount-input.mdx @@ -0,0 +1,119 @@ +import App from '../App'; +import { SwapAmountInput } from '../../../../src/swap'; + +# `` + +The `SwapAmountInput` component is a stylized input field designed for users to specify the amount of a particular token they wish to swap. This component integrates the `TokenSelector` component to allow users to select different tokens. + +## Usage + +:::code-group + +```tsx [code] + {}} + onTokenSelectorClick={() => {}} + onSelectTokenToggle={() => {}} +/> +``` + +```html [return html] + +``` + +::: + + + {}} + onTokenSelectorClick={() => {}} + /> + + +## Props + +[`SwapAmountInputReact`](/token/types#SwapAmountInputreact) + +## CSS + +`TokenSelector` + +```css +.ock-tokenselector-container { + @apply relative; +} +.ock-tokenselector-button { + @apply flex w-fit items-center rounded-2xl px-3 py-1; + background: #eef0f3; + gap: 8px; + outline: none; + &:hover { + background: #cacbce; + } + &:active { + background: #bfc1c3; + } +} +.ock-tokenselector-label { + @apply text-base font-medium leading-normal text-[#0a0b0d]; +} +``` + +`TokenSelectorDropdown` + +```css +.ock-tokenselectordropdown-container { + @apply absolute z-10 mt-1 flex max-h-80 w-[250px] flex-col overflow-y-hidden rounded-lg; + scrollbar-width: thin; + scrollbar-color: #eef0f3 #ffffff; +} +.ock-tokenselectordropdown-scroll { + @apply overflow-y-auto; +} +``` diff --git a/site/sidebar.ts b/site/sidebar.ts index 0fed9daae5..a13646638d 100644 --- a/site/sidebar.ts +++ b/site/sidebar.ts @@ -140,6 +140,15 @@ export const sidebar = [ text: 'Swap', items: [ { text: 'Introduction', link: '/swap/introduction' }, + { + text: 'Components', + items: [ + { + text: 'SwapAmountInput', + link: '/swap/swap-amount-input', + }, + ], + }, { text: 'Types', link: '/swap/types', @@ -173,10 +182,6 @@ export const sidebar = [ text: 'TokenSelector', link: '/token/token-selector', }, - { - text: 'TokenAmountInput', - link: '/token/token-amount-input', - }, ], }, { diff --git a/src/swap/components/SwapAmountInput.css b/src/swap/components/SwapAmountInput.css new file mode 100644 index 0000000000..84f8674a06 --- /dev/null +++ b/src/swap/components/SwapAmountInput.css @@ -0,0 +1,23 @@ +.ock-swapamountinput-container { + @apply box-border flex w-fit flex-col items-start gap-[11px] rounded-2xl bg-[#FFF] p-4; +} + +.ock-swapamountinput-label { + @apply text-sm font-semibold text-[#030712]; +} + +.ock-swapamountinput-input { + @apply border-[none] bg-transparent text-5xl text-[black]; +} + +.ock-swapamountinput-row { + @apply flex w-full items-center justify-between; +} + +.ock-swapamountinput-balance { + @apply text-sm font-normal text-gray-400; +} + +.ock-swapamountinput-maxbutton { + @apply flex h-8 w-[58px] max-w-[200px] items-center rounded-[40px] bg-gray-100 px-3 py-2 text-base font-medium not-italic leading-6 text-gray-500; +} diff --git a/src/swap/components/SwapAmountInput.tsx b/src/swap/components/SwapAmountInput.tsx new file mode 100644 index 0000000000..d2c9c7b0a0 --- /dev/null +++ b/src/swap/components/SwapAmountInput.tsx @@ -0,0 +1,58 @@ +import { useCallback, CSSProperties, useEffect } from 'react'; + +import { SwapAmountInputReact } from '../types'; +import { isValidAmount } from '../utils'; +import { TokenSelector, TokenSelectorDropdown } from '../../token'; + +export function SwapAmountInput({ + label, + amount, + token, + swappableTokens, + tokenBalance, + onMaxButtonClick, + onAmountChange, + onTokenSelectorClick, + onSelectTokenToggle, + disabled = false, +}: SwapAmountInputReact) { + const handleAmountChange = useCallback( + (event: React.ChangeEvent) => { + if (isValidAmount(event.target.value)) { + onAmountChange(event.target.value); + } + }, + [onAmountChange], + ); + + return ( +
+
+ + {tokenBalance && ( + + )} +
+
+ + + + +
+ +
+ ); +} diff --git a/src/swap/index.ts b/src/swap/index.ts index e51725e16b..777ef72622 100644 --- a/src/swap/index.ts +++ b/src/swap/index.ts @@ -8,3 +8,5 @@ export type { QuoteWarning, SwapError, } from './types'; + +export { SwapAmountInput } from './components/SwapAmountInput'; diff --git a/src/swap/types.ts b/src/swap/types.ts index 5e73f0365b..77f0da894f 100644 --- a/src/swap/types.ts +++ b/src/swap/types.ts @@ -82,3 +82,16 @@ export type Transaction = { to: string; // The recipient address value: string; // The value of the transaction }; + +export type SwapAmountInputReact = { + label: string; + amount?: string; + token?: Token; + swappableTokens: Token[]; + tokenBalance?: string; + onMaxButtonClick?: () => void; + onAmountChange: (amount: string) => void; + onTokenSelectorClick: () => void; + onSelectTokenToggle: () => void; + disabled?: boolean; +}; diff --git a/src/swap/utils.ts b/src/swap/utils.ts new file mode 100644 index 0000000000..6275805179 --- /dev/null +++ b/src/swap/utils.ts @@ -0,0 +1,11 @@ +// checks that input is a number +export function isValidAmount(value: string) { + if (value.length > 11) { + return false; + } + if (value === '') { + return true; + } + const regex = /^[0-9]*\.?[0-9]*$/; + return regex.test(value); +} From ecfb4199515499454e6c63249163e2108d5b51f7 Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Mon, 10 Jun 2024 14:35:07 -0400 Subject: [PATCH 06/35] remove token amount input --- site/docs/pages/token/token-amount-input.mdx | 119 ------------------- src/token/components/TokenAmountInput.css | 23 ---- src/token/components/TokenAmountInput.tsx | 58 --------- 3 files changed, 200 deletions(-) delete mode 100644 site/docs/pages/token/token-amount-input.mdx delete mode 100644 src/token/components/TokenAmountInput.css delete mode 100644 src/token/components/TokenAmountInput.tsx diff --git a/site/docs/pages/token/token-amount-input.mdx b/site/docs/pages/token/token-amount-input.mdx deleted file mode 100644 index 91db240c1c..0000000000 --- a/site/docs/pages/token/token-amount-input.mdx +++ /dev/null @@ -1,119 +0,0 @@ -import App from '../App'; -import { TokenAmountInput } from '../../../../src/token'; - -# `` - -The `TokenAmountInput` component is a stylized input field designed for users to specify the amount of a particular token they wish to swap. This component integrates the `TokenSelector` component to allow users to select different tokens. - -## Usage - -:::code-group - -```tsx [code] - {}} - onTokenSelectorClick={() => {}} - onSelectTokenToggle={() => {}} -/> -``` - -```html [return html] - -``` - -::: - - - {}} - onTokenSelectorClick={() => {}} - /> - - -## Props - -[`TokenAmountInputReact`](/token/types#TokenAmountInputreact) - -## CSS - -`TokenSelector` - -```css -.ock-tokenselector-container { - @apply relative; -} -.ock-tokenselector-button { - @apply flex w-fit items-center rounded-2xl px-3 py-1; - background: #eef0f3; - gap: 8px; - outline: none; - &:hover { - background: #cacbce; - } - &:active { - background: #bfc1c3; - } -} -.ock-tokenselector-label { - @apply text-base font-medium leading-normal text-[#0a0b0d]; -} -``` - -`TokenSelectorDropdown` - -```css -.ock-tokenselectordropdown-container { - @apply absolute z-10 mt-1 flex max-h-80 w-[250px] flex-col overflow-y-hidden rounded-lg; - scrollbar-width: thin; - scrollbar-color: #eef0f3 #ffffff; -} -.ock-tokenselectordropdown-scroll { - @apply overflow-y-auto; -} -``` diff --git a/src/token/components/TokenAmountInput.css b/src/token/components/TokenAmountInput.css deleted file mode 100644 index 277054db89..0000000000 --- a/src/token/components/TokenAmountInput.css +++ /dev/null @@ -1,23 +0,0 @@ -.ock-tokenamountinput-container { - @apply box-border flex w-fit flex-col items-start gap-[11px] rounded-2xl bg-[#FFF] p-4; -} - -.ock-tokenamountinput-label { - @apply text-sm font-semibold text-[#030712]; -} - -.ock-tokenamountinput-input { - @apply border-[none] bg-transparent text-5xl text-[black]; -} - -.ock-tokenamountinput-row { - @apply flex w-full items-center justify-between; -} - -.ock-tokenamountinput-balance { - @apply text-sm font-normal text-gray-400; -} - -.ock-tokenamountinput-maxbutton { - @apply bg-gray-100 text-base not-italic font-medium leading-6 flex w-[58px] h-8 max-w-[200px] items-center text-gray-500 px-3 py-2 rounded-[40px]; -} \ No newline at end of file diff --git a/src/token/components/TokenAmountInput.tsx b/src/token/components/TokenAmountInput.tsx deleted file mode 100644 index 5ffe68f126..0000000000 --- a/src/token/components/TokenAmountInput.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import { useCallback, CSSProperties, useEffect } from 'react'; - -import { TokenAmountInputReact } from '../types'; -import { isValidAmount } from '../utils'; -import { TokenSelector, TokenSelectorDropdown } from '../../token'; - -export function TokenAmountInput({ - label, - amount, - token, - swappableTokens, - tokenBalance, - onMaxButtonClick, - onAmountChange, - onTokenSelectorClick, - onSelectTokenToggle, - disabled = false, -}: TokenAmountInputReact) { - const handleAmountChange = useCallback( - (event: React.ChangeEvent) => { - if (isValidAmount(event.target.value)) { - onAmountChange(event.target.value); - } - }, - [onAmountChange], - ); - - return ( -
-
- - {tokenBalance && ( - - )} -
-
- - - - -
- -
- ); -} From 5d993971a00752c7cffb99a2bbdc1b561633892e Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Mon, 10 Jun 2024 14:39:27 -0400 Subject: [PATCH 07/35] update types and remove export --- site/docs/pages/swap/swap-amount-input.mdx | 2 +- site/docs/pages/swap/types.mdx | 17 +++++++++++++++++ site/docs/pages/token/types.mdx | 14 -------------- src/token/index.ts | 1 - 4 files changed, 18 insertions(+), 16 deletions(-) diff --git a/site/docs/pages/swap/swap-amount-input.mdx b/site/docs/pages/swap/swap-amount-input.mdx index cbee2f4c1f..7dad038f26 100644 --- a/site/docs/pages/swap/swap-amount-input.mdx +++ b/site/docs/pages/swap/swap-amount-input.mdx @@ -78,7 +78,7 @@ The `SwapAmountInput` component is a stylized input field designed for users to ## Props -[`SwapAmountInputReact`](/token/types#SwapAmountInputreact) +[`SwapAmountInputReact`](/swap/types#SwapAmountInputReact) ## CSS diff --git a/site/docs/pages/swap/types.mdx b/site/docs/pages/swap/types.mdx index 0cf726de84..79e2c8816c 100644 --- a/site/docs/pages/swap/types.mdx +++ b/site/docs/pages/swap/types.mdx @@ -4,3 +4,20 @@ description: Glossary of Types in Swap Kit. --- # Types [Glossary of Types in Swap Kit.] + +## `SwapAmountInputReact` + +```ts +type SwapAmountInputReact = { + label: string; // Descriptive label for the input field + amount?: string; // Token amount + token?: Token; // Selected token + swappableTokens?: Token[]; + tokenBalance?: string; + onMaxButtonClick: () => void; + onAmountChange: (amount: string) => void; // Callback function when the amount changes + onTokenSelectorClick: () => void; // Callback function when the token selector is clicked + onSelectTokenToggle: () => void; + disabled?: boolean; // Whether the input is disabled +}; +``` diff --git a/site/docs/pages/token/types.mdx b/site/docs/pages/token/types.mdx index ee0aa8c9be..2cd6fdfc16 100644 --- a/site/docs/pages/token/types.mdx +++ b/site/docs/pages/token/types.mdx @@ -107,18 +107,4 @@ export type TokenSelectorDropdownReact = { options: Token[]; // List of tokens setToken: (token: Token) => void; // Token setter }; -``` - -## `TokenAmountInputReact` - -```ts -type TokenAmountInputReact = { - label: string; // Descriptive label for the input field - amount?: string; // Token amount - onAmountChange: (amount: string) => void; // Callback function when the amount changes - onTokenSelectorClick: () => void; // Callback function when the token selector is clicked - token?: Token; // Selected token - estimatedAmountInFiat?: string; // Estimated amount in fiat currency - disabled?: boolean; // Whether the input is disabled -}; ``` \ No newline at end of file diff --git a/src/token/index.ts b/src/token/index.ts index 5bbd8e11e7..61c4c525d1 100644 --- a/src/token/index.ts +++ b/src/token/index.ts @@ -7,7 +7,6 @@ export { TokenSelector } from './components/TokenSelector'; export { TokenSelectorDropdown } from './components/TokenSelectorDropdown'; export { formatAmount } from './core/formatAmount'; export { getTokens } from './core/getTokens'; -export { TokenAmountInput } from './components/TokenAmountInput'; export type { GetTokensError, GetTokensOptions, From 28dd4d175b78c907a741cc4002b588008f2b0bd4 Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Mon, 10 Jun 2024 15:18:24 -0400 Subject: [PATCH 08/35] add amount input container --- .../components/SwapAmountInputContainer.tsx | 18 +++ site/docs/pages/swap/swap-amount-input.mdx | 118 +++++++++--------- 2 files changed, 80 insertions(+), 56 deletions(-) create mode 100644 site/docs/components/SwapAmountInputContainer.tsx diff --git a/site/docs/components/SwapAmountInputContainer.tsx b/site/docs/components/SwapAmountInputContainer.tsx new file mode 100644 index 0000000000..88dcc61fdd --- /dev/null +++ b/site/docs/components/SwapAmountInputContainer.tsx @@ -0,0 +1,18 @@ +import { ReactElement, useState } from 'react'; +import type { Token } from '@coinbase/onchainkit/token'; + +type SwapAmountInputContainer = { + children: ( + token: Token, + setToken: (t: Token) => void, + setAmount: (a: string) => void, + amount: string, + ) => ReactElement; +}; + +export default function SwapAmountInputContainer({ children }: SwapAmountInputContainer) { + const [token, setToken] = useState(); + const [amount, setAmount] = useState(''); + + return children(token, setToken, setAmount, amount); +} diff --git a/site/docs/pages/swap/swap-amount-input.mdx b/site/docs/pages/swap/swap-amount-input.mdx index 7dad038f26..b2e03cddbe 100644 --- a/site/docs/pages/swap/swap-amount-input.mdx +++ b/site/docs/pages/swap/swap-amount-input.mdx @@ -1,5 +1,6 @@ import App from '../App'; import { SwapAmountInput } from '../../../../src/swap'; +import SwapAmountInputContainer from '../../components/SwapAmountInputContainer.tsx'; # `` @@ -30,13 +31,10 @@ The `SwapAmountInput` component is a stylized input field designed for users to name: 'Ethereum', symbol: 'ETH', }, + ... ]} label="Sell" - amount="3.75" tokenBalance="4" - onAmountChange={() => {}} - onTokenSelectorClick={() => {}} - onSelectTokenToggle={() => {}} /> ``` @@ -47,33 +45,49 @@ The `SwapAmountInput` component is a stylized input field designed for users to ::: - {}} - onTokenSelectorClick={() => {}} - /> + + {(token, setToken, setAmount, amount) => ( + + )} + ## Props @@ -82,38 +96,30 @@ The `SwapAmountInput` component is a stylized input field designed for users to ## CSS -`TokenSelector` +`SwapAmountInput` ```css -.ock-tokenselector-container { - @apply relative; +.ock-swapamountinput-container { + @apply box-border flex w-fit flex-col items-start gap-[11px] rounded-2xl bg-[#FFF] p-4; } -.ock-tokenselector-button { - @apply flex w-fit items-center rounded-2xl px-3 py-1; - background: #eef0f3; - gap: 8px; - outline: none; - &:hover { - background: #cacbce; - } - &:active { - background: #bfc1c3; - } + +.ock-swapamountinput-label { + @apply text-sm font-semibold text-[#030712]; } -.ock-tokenselector-label { - @apply text-base font-medium leading-normal text-[#0a0b0d]; + +.ock-swapamountinput-input { + @apply border-[none] bg-transparent text-5xl text-[black]; } -``` -`TokenSelectorDropdown` +.ock-swapamountinput-row { + @apply flex w-full items-center justify-between; +} -```css -.ock-tokenselectordropdown-container { - @apply absolute z-10 mt-1 flex max-h-80 w-[250px] flex-col overflow-y-hidden rounded-lg; - scrollbar-width: thin; - scrollbar-color: #eef0f3 #ffffff; +.ock-swapamountinput-balance { + @apply text-sm font-normal text-gray-400; } -.ock-tokenselectordropdown-scroll { - @apply overflow-y-auto; + +.ock-swapamountinput-maxbutton { + @apply flex h-8 w-[58px] max-w-[200px] items-center rounded-[40px] bg-gray-100 px-3 py-2 text-base font-medium not-italic leading-6 text-gray-500; } ``` From d1cfea8872e0ac65b145150bc45ddc366d24c965 Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Mon, 10 Jun 2024 15:21:56 -0400 Subject: [PATCH 09/35] update docs --- site/docs/pages/swap/swap-amount-input.mdx | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/site/docs/pages/swap/swap-amount-input.mdx b/site/docs/pages/swap/swap-amount-input.mdx index b2e03cddbe..647aef340b 100644 --- a/site/docs/pages/swap/swap-amount-input.mdx +++ b/site/docs/pages/swap/swap-amount-input.mdx @@ -12,15 +12,7 @@ The `SwapAmountInput` component is a stylized input field designed for users to ```tsx [code] ``` From 4c82674d206d3b62528648f62599a540ba429650 Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Mon, 10 Jun 2024 15:52:02 -0400 Subject: [PATCH 10/35] remove unused prop --- .../components/SwapAmountInputContainer.tsx | 18 ++++++++++++++++-- site/docs/pages/swap/swap-amount-input.mdx | 9 ++++----- site/docs/pages/swap/types.mdx | 1 - src/swap/components/SwapAmountInput.css | 2 +- src/swap/components/SwapAmountInput.tsx | 13 ++++--------- src/swap/types.ts | 1 - 6 files changed, 25 insertions(+), 19 deletions(-) diff --git a/site/docs/components/SwapAmountInputContainer.tsx b/site/docs/components/SwapAmountInputContainer.tsx index 88dcc61fdd..fbd93973db 100644 --- a/site/docs/components/SwapAmountInputContainer.tsx +++ b/site/docs/components/SwapAmountInputContainer.tsx @@ -7,12 +7,26 @@ type SwapAmountInputContainer = { setToken: (t: Token) => void, setAmount: (a: string) => void, amount: string, + tokenBalance: string, + onMaxButtonClick: (a: string) => void, ) => ReactElement; }; +const TOKEN_BALANCE_MAP: Record = { + ETH: '3.5', + USDC: '2.77', + DAI: '4.9', +}; + export default function SwapAmountInputContainer({ children }: SwapAmountInputContainer) { - const [token, setToken] = useState(); + const [token, setToken] = useState(); const [amount, setAmount] = useState(''); - return children(token, setToken, setAmount, amount); + const tokenBalance = TOKEN_BALANCE_MAP[token?.symbol]; + + const onMaxButtonClick = () => { + setAmount(tokenBalance); + }; + + return children(token, setToken, setAmount, amount, tokenBalance, onMaxButtonClick); } diff --git a/site/docs/pages/swap/swap-amount-input.mdx b/site/docs/pages/swap/swap-amount-input.mdx index 647aef340b..fd12f87f14 100644 --- a/site/docs/pages/swap/swap-amount-input.mdx +++ b/site/docs/pages/swap/swap-amount-input.mdx @@ -30,6 +30,7 @@ The `SwapAmountInput` component is a stylized input field designed for users to tokenBalance={tokenBalance} onAmountChange={setAmount} onTokenSelectorClick={setToken} + onMaxButtonClick={onMaxButtonClick} /> ``` @@ -41,7 +42,7 @@ The `SwapAmountInput` component is a stylized input field designed for users to - {(token, setToken, setAmount, amount) => ( + {(token, setToken, setAmount, amount, tokenBalance, onMaxButtonClick) => ( )} diff --git a/site/docs/pages/swap/types.mdx b/site/docs/pages/swap/types.mdx index 79e2c8816c..a541f4ecff 100644 --- a/site/docs/pages/swap/types.mdx +++ b/site/docs/pages/swap/types.mdx @@ -17,7 +17,6 @@ type SwapAmountInputReact = { onMaxButtonClick: () => void; onAmountChange: (amount: string) => void; // Callback function when the amount changes onTokenSelectorClick: () => void; // Callback function when the token selector is clicked - onSelectTokenToggle: () => void; disabled?: boolean; // Whether the input is disabled }; ``` diff --git a/src/swap/components/SwapAmountInput.css b/src/swap/components/SwapAmountInput.css index 84f8674a06..c360604ff5 100644 --- a/src/swap/components/SwapAmountInput.css +++ b/src/swap/components/SwapAmountInput.css @@ -1,5 +1,5 @@ .ock-swapamountinput-container { - @apply box-border flex w-fit flex-col items-start gap-[11px] rounded-2xl bg-[#FFF] p-4; + @apply box-border flex w-fit flex-col items-start gap-[11px] bg-[#FFF] p-4; } .ock-swapamountinput-label { diff --git a/src/swap/components/SwapAmountInput.tsx b/src/swap/components/SwapAmountInput.tsx index d2c9c7b0a0..3d058500a4 100644 --- a/src/swap/components/SwapAmountInput.tsx +++ b/src/swap/components/SwapAmountInput.tsx @@ -5,15 +5,14 @@ import { isValidAmount } from '../utils'; import { TokenSelector, TokenSelectorDropdown } from '../../token'; export function SwapAmountInput({ - label, - amount, token, swappableTokens, + label, + amount, tokenBalance, - onMaxButtonClick, onAmountChange, onTokenSelectorClick, - onSelectTokenToggle, + onMaxButtonClick, disabled = false, }: SwapAmountInputReact) { const handleAmountChange = useCallback( @@ -35,11 +34,7 @@ export function SwapAmountInput({
- +
); From 1bc718203c2ce697b6655e7e231dabc43ccea645 Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Mon, 10 Jun 2024 15:55:37 -0400 Subject: [PATCH 13/35] add html for swap input --- site/docs/pages/swap/swap-amount-input.mdx | 33 +++++++++++++++++++++- 1 file changed, 32 insertions(+), 1 deletion(-) diff --git a/site/docs/pages/swap/swap-amount-input.mdx b/site/docs/pages/swap/swap-amount-input.mdx index fd12f87f14..13e198df2f 100644 --- a/site/docs/pages/swap/swap-amount-input.mdx +++ b/site/docs/pages/swap/swap-amount-input.mdx @@ -35,7 +35,38 @@ The `SwapAmountInput` component is a stylized input field designed for users to ``` ```html [return html] - +
+
+ +
+
+
+ +
+ +
+ +
``` ::: From 2e55bba4d5d616a275eaf2f6fb9ce35e7d398d01 Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Mon, 10 Jun 2024 16:23:27 -0400 Subject: [PATCH 14/35] address optional param issue --- src/token/components/TokenSelectorDropdown.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/token/components/TokenSelectorDropdown.tsx b/src/token/components/TokenSelectorDropdown.tsx index 1618ec7060..4fadb35fb3 100644 --- a/src/token/components/TokenSelectorDropdown.tsx +++ b/src/token/components/TokenSelectorDropdown.tsx @@ -8,7 +8,7 @@ export function TokenSelectorDropdown({ setToken, options, onToggle }: TokenSele const handleBlur = useCallback((event: MouseEvent) => { /* istanbul ignore next */ if (ref.current && !ref.current.contains(event.target as Node)) { - onToggle(); + onToggle?.(); } }, []); @@ -36,7 +36,7 @@ export function TokenSelectorDropdown({ setToken, options, onToggle }: TokenSele token={token} onClick={() => { setToken(token); - onToggle(); + onToggle?.(); }} /> ))} From 771b4052e740bb7b79d045ee218ab8367b47f001 Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Mon, 10 Jun 2024 16:23:40 -0400 Subject: [PATCH 15/35] add SwapAmountInput tests --- src/swap/components/SwapAmountInput.test.tsx | 152 +++++++++++++++++++ src/swap/components/SwapAmountInput.tsx | 6 +- 2 files changed, 157 insertions(+), 1 deletion(-) create mode 100644 src/swap/components/SwapAmountInput.test.tsx diff --git a/src/swap/components/SwapAmountInput.test.tsx b/src/swap/components/SwapAmountInput.test.tsx new file mode 100644 index 0000000000..30522247f7 --- /dev/null +++ b/src/swap/components/SwapAmountInput.test.tsx @@ -0,0 +1,152 @@ +/** + * @jest-environment jsdom + */ +import React from 'react'; +import '@testing-library/jest-dom'; +import { fireEvent, render, screen, within } from '@testing-library/react'; +import { Address } from 'viem'; +import { SwapAmountInput } from './SwapAmountInput'; +import { Token } from '../../token'; + +const setAmountMock = jest.fn(); +const selectTokenClickMock = jest.fn(); +const onMaxButtonClickMock = jest.fn(); + +const token = { + address: '0x123' as Address, + chainId: 1, + decimals: 2, + image: 'imageURL', + name: 'Ether', + symbol: 'ETH', +}; + +const swappableTokens: Token[] = [ + { + name: 'Ethereum', + address: '', + symbol: 'ETH', + decimals: 18, + image: 'https://wallet-api-production.s3.amazonaws.com/uploads/tokens/eth_288.png', + chainId: 8453, + }, + { + name: 'USDC', + address: '0x833589fcd6edb6e08f4c7c32d4f71b54bda02913', + symbol: 'USDC', + decimals: 6, + image: + 'https://d3r81g40ycuhqg.cloudfront.net/wallet/wais/44/2b/442b80bd16af0c0d9b22e03a16753823fe826e5bfd457292b55fa0ba8c1ba213-ZWUzYjJmZGUtMDYxNy00NDcyLTg0NjQtMWI4OGEwYjBiODE2', + chainId: 8453, + }, + { + name: 'Dai', + address: '0x50c5725949a6f0c72e6c4a641f24049a917db0cb', + symbol: 'DAI', + decimals: 18, + image: + 'https://d3r81g40ycuhqg.cloudfront.net/wallet/wais/d0/d7/d0d7784975771dbbac9a22c8c0c12928cc6f658cbcf2bbbf7c909f0fa2426dec-NmU4ZWViMDItOTQyYy00Yjk5LTkzODUtNGJlZmJiMTUxOTgy', + chainId: 8453, + }, +]; + +describe('SwapAmountInput Component', () => { + beforeEach(() => { + jest.clearAllMocks(); + }); + + it('should render', async () => { + render( + , + ); + + const amountInput = screen.getByTestId('ockSwapAmountInput_Container'); + expect(amountInput).toBeInTheDocument(); + + const labelElement = within(amountInput).getByText('Sell'); + expect(labelElement).toBeInTheDocument(); + + const balanceElement = within(amountInput).getByText('Balance: 100'); + expect(balanceElement).toBeInTheDocument(); + }); + + it('should update the amount if a user enters a number', async () => { + render( + , + ); + + const input = screen.getByTestId('ockSwapAmountInput_Input') as HTMLInputElement; + fireEvent.change(input, { target: { value: '2' } }); + expect(setAmountMock).toHaveBeenCalledWith('2'); + expect(input.value).toBe('2'); + }); + + it('should not update the amount if a user enters a non-number', async () => { + render( + , + ); + + const input = screen.getByTestId('ockSwapAmountInput_Input') as HTMLInputElement; + fireEvent.change(input, { target: { value: 'a' } }); + expect(setAmountMock).not.toHaveBeenCalledWith('a'); + expect(input.value).toBe('1'); + }); + + it('should call onMaxButtonClick when the max button is clicked', async () => { + render( + , + ); + + const maxButton = screen.getByTestId('ockSwapAmountInput_MaxButton'); + fireEvent.click(maxButton); + expect(onMaxButtonClickMock).toHaveBeenCalled(); + }); + + it('should disable the input when disabled prop is true', async () => { + render( + , + ); + + const input = screen.getByTestId('ockSwapAmountInput_Input') as HTMLInputElement; + expect(input).toBeDisabled(); + }); +}); diff --git a/src/swap/components/SwapAmountInput.tsx b/src/swap/components/SwapAmountInput.tsx index 327ca411f9..ffe1b77c66 100644 --- a/src/swap/components/SwapAmountInput.tsx +++ b/src/swap/components/SwapAmountInput.tsx @@ -36,7 +36,11 @@ export function SwapAmountInput({ -
From 4eefeb90bccdd69b5e4cf9008469752024cfc217 Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Mon, 10 Jun 2024 16:29:51 -0400 Subject: [PATCH 16/35] comment out imports --- site/docs/pages/swap/swap-amount-input.mdx | 4 +++- src/swap/index.ts | 2 -- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/site/docs/pages/swap/swap-amount-input.mdx b/site/docs/pages/swap/swap-amount-input.mdx index 13e198df2f..81cd943982 100644 --- a/site/docs/pages/swap/swap-amount-input.mdx +++ b/site/docs/pages/swap/swap-amount-input.mdx @@ -1,5 +1,5 @@ +{/* import { SwapAmountInput } from '../../../../src/swap'; */} import App from '../App'; -import { SwapAmountInput } from '../../../../src/swap'; import SwapAmountInputContainer from '../../components/SwapAmountInputContainer.tsx'; # `` @@ -71,6 +71,7 @@ The `SwapAmountInput` component is a stylized input field designed for users to ::: +{/* {(token, setToken, setAmount, amount, tokenBalance, onMaxButtonClick) => ( @@ -114,6 +115,7 @@ The `SwapAmountInput` component is a stylized input field designed for users to )} +*/} ## Props diff --git a/src/swap/index.ts b/src/swap/index.ts index 777ef72622..e51725e16b 100644 --- a/src/swap/index.ts +++ b/src/swap/index.ts @@ -8,5 +8,3 @@ export type { QuoteWarning, SwapError, } from './types'; - -export { SwapAmountInput } from './components/SwapAmountInput'; From 63fd99f0326f4c1ca716973684087b48db8269e8 Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Mon, 10 Jun 2024 16:35:28 -0400 Subject: [PATCH 17/35] add description to type --- site/docs/pages/swap/types.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/site/docs/pages/swap/types.mdx b/site/docs/pages/swap/types.mdx index a541f4ecff..9b2e6bde60 100644 --- a/site/docs/pages/swap/types.mdx +++ b/site/docs/pages/swap/types.mdx @@ -12,9 +12,9 @@ type SwapAmountInputReact = { label: string; // Descriptive label for the input field amount?: string; // Token amount token?: Token; // Selected token - swappableTokens?: Token[]; - tokenBalance?: string; - onMaxButtonClick: () => void; + swappableTokens?: Token[]; // Tokens available for swap + tokenBalance?: string; // Amount of selected Token user owns + onMaxButtonClick: () => void; // Callback function when max button is clicked onAmountChange: (amount: string) => void; // Callback function when the amount changes onTokenSelectorClick: () => void; // Callback function when the token selector is clicked disabled?: boolean; // Whether the input is disabled From 9ce160533c17e45d4b32b68f8a0d31a807dc0ed1 Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Mon, 10 Jun 2024 16:41:17 -0400 Subject: [PATCH 18/35] format code --- site/docs/pages/swap/swap-amount-input.mdx | 3 +-- site/docs/pages/token/types.mdx | 2 +- src/swap/index.ts | 2 ++ 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/site/docs/pages/swap/swap-amount-input.mdx b/site/docs/pages/swap/swap-amount-input.mdx index 81cd943982..1b43e9699d 100644 --- a/site/docs/pages/swap/swap-amount-input.mdx +++ b/site/docs/pages/swap/swap-amount-input.mdx @@ -1,4 +1,5 @@ {/* import { SwapAmountInput } from '../../../../src/swap'; */} +import { SwapAmountInput } from '../../../../src/swap'; import App from '../App'; import SwapAmountInputContainer from '../../components/SwapAmountInputContainer.tsx'; @@ -71,7 +72,6 @@ The `SwapAmountInput` component is a stylized input field designed for users to ::: -{/* {(token, setToken, setAmount, amount, tokenBalance, onMaxButtonClick) => ( @@ -115,7 +115,6 @@ The `SwapAmountInput` component is a stylized input field designed for users to )} -*/} ## Props diff --git a/site/docs/pages/token/types.mdx b/site/docs/pages/token/types.mdx index 2cd6fdfc16..d4c1d96844 100644 --- a/site/docs/pages/token/types.mdx +++ b/site/docs/pages/token/types.mdx @@ -107,4 +107,4 @@ export type TokenSelectorDropdownReact = { options: Token[]; // List of tokens setToken: (token: Token) => void; // Token setter }; -``` \ No newline at end of file +``` diff --git a/src/swap/index.ts b/src/swap/index.ts index e51725e16b..777ef72622 100644 --- a/src/swap/index.ts +++ b/src/swap/index.ts @@ -8,3 +8,5 @@ export type { QuoteWarning, SwapError, } from './types'; + +export { SwapAmountInput } from './components/SwapAmountInput'; From 2e3b96d7f48ae6f09ab78af1e78a1f9fb77e4f1c Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Mon, 10 Jun 2024 17:01:04 -0400 Subject: [PATCH 19/35] add utils test --- src/swap/utils.test.ts | 39 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 src/swap/utils.test.ts diff --git a/src/swap/utils.test.ts b/src/swap/utils.test.ts new file mode 100644 index 0000000000..5982a45094 --- /dev/null +++ b/src/swap/utils.test.ts @@ -0,0 +1,39 @@ +import { isValidAmount } from './utils'; // Adjust the import path as needed + +describe('isValidAmount', () => { + it('should return true for an empty string', () => { + expect(isValidAmount('')).toBe(true); + }); + + it('should return true for a valid number string with less than 11 characters', () => { + expect(isValidAmount('12345')).toBe(true); + }); + + it('should return false for a number string with more than 11 characters', () => { + expect(isValidAmount('123456789012')).toBe(false); + }); + + it('should return true for a valid number string with a decimal point', () => { + expect(isValidAmount('123.45')).toBe(true); + }); + + it('should return false for a string with multiple decimal points', () => { + expect(isValidAmount('123.45.67')).toBe(false); + }); + + it('should return false for a string with non-numeric characters', () => { + expect(isValidAmount('123a45')).toBe(false); + }); + + it('should return true for a valid number string with no integer part but a decimal point', () => { + expect(isValidAmount('.12345')).toBe(true); + }); + + it('should return true for a valid number string with no decimal part', () => { + expect(isValidAmount('12345.')).toBe(true); + }); + + it('should return false for a string with spaces', () => { + expect(isValidAmount('123 45')).toBe(false); + }); +}); From 09862b22996d6a96d95212670cdd19f503766df8 Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Mon, 10 Jun 2024 17:01:51 -0400 Subject: [PATCH 20/35] remove unused prop --- site/docs/components/SwapAmountInputContainer.tsx | 2 +- site/docs/pages/swap/types.mdx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/site/docs/components/SwapAmountInputContainer.tsx b/site/docs/components/SwapAmountInputContainer.tsx index fbd93973db..939fa1eb2f 100644 --- a/site/docs/components/SwapAmountInputContainer.tsx +++ b/site/docs/components/SwapAmountInputContainer.tsx @@ -8,7 +8,7 @@ type SwapAmountInputContainer = { setAmount: (a: string) => void, amount: string, tokenBalance: string, - onMaxButtonClick: (a: string) => void, + onMaxButtonClick: () => void, ) => ReactElement; }; diff --git a/site/docs/pages/swap/types.mdx b/site/docs/pages/swap/types.mdx index 9b2e6bde60..19c6f607f6 100644 --- a/site/docs/pages/swap/types.mdx +++ b/site/docs/pages/swap/types.mdx @@ -13,7 +13,7 @@ type SwapAmountInputReact = { amount?: string; // Token amount token?: Token; // Selected token swappableTokens?: Token[]; // Tokens available for swap - tokenBalance?: string; // Amount of selected Token user owns + tokenBalance?: string; // Amount of selected token user owns onMaxButtonClick: () => void; // Callback function when max button is clicked onAmountChange: (amount: string) => void; // Callback function when the amount changes onTokenSelectorClick: () => void; // Callback function when the token selector is clicked From 3ce8811ff037544b7c894fdbb8f12dfc904cfeae Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Mon, 10 Jun 2024 17:06:19 -0400 Subject: [PATCH 21/35] remove unused imports --- src/swap/components/SwapAmountInput.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/swap/components/SwapAmountInput.tsx b/src/swap/components/SwapAmountInput.tsx index ffe1b77c66..6f1d555c58 100644 --- a/src/swap/components/SwapAmountInput.tsx +++ b/src/swap/components/SwapAmountInput.tsx @@ -1,4 +1,4 @@ -import { useCallback, CSSProperties, useEffect } from 'react'; +import { useCallback } from 'react'; import { SwapAmountInputReact } from '../types'; import { isValidAmount } from '../utils'; From 1612e689241541a1b8ef888f1a776e761aee0cc9 Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Mon, 10 Jun 2024 17:06:35 -0400 Subject: [PATCH 22/35] remove unnecessary code in test file --- src/swap/components/SwapAmountInput.test.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/swap/components/SwapAmountInput.test.tsx b/src/swap/components/SwapAmountInput.test.tsx index 30522247f7..44e1deaa6f 100644 --- a/src/swap/components/SwapAmountInput.test.tsx +++ b/src/swap/components/SwapAmountInput.test.tsx @@ -51,10 +51,6 @@ const swappableTokens: Token[] = [ ]; describe('SwapAmountInput Component', () => { - beforeEach(() => { - jest.clearAllMocks(); - }); - it('should render', async () => { render( { onAmountChange={setAmountMock} onTokenSelectorClick={selectTokenClickMock} onMaxButtonClick={onMaxButtonClickMock} - disabled={true} + disabled />, ); From 45df7e371605adee07e6f3474bc2661b0d28a840 Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Mon, 10 Jun 2024 17:24:06 -0400 Subject: [PATCH 23/35] remove unused file --- src/token/utils.ts | 11 ----------- 1 file changed, 11 deletions(-) delete mode 100644 src/token/utils.ts diff --git a/src/token/utils.ts b/src/token/utils.ts deleted file mode 100644 index 6275805179..0000000000 --- a/src/token/utils.ts +++ /dev/null @@ -1,11 +0,0 @@ -// checks that input is a number -export function isValidAmount(value: string) { - if (value.length > 11) { - return false; - } - if (value === '') { - return true; - } - const regex = /^[0-9]*\.?[0-9]*$/; - return regex.test(value); -} From 55e3c9e581f9b10e72b787ae62d96bf2e0c83ea0 Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Mon, 10 Jun 2024 17:29:52 -0400 Subject: [PATCH 24/35] remove unused type --- src/token/types.ts | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/src/token/types.ts b/src/token/types.ts index 4aa43595c0..93dff42498 100644 --- a/src/token/types.ts +++ b/src/token/types.ts @@ -103,16 +103,3 @@ export type TokenSelectorDropdownReact = { options: Token[]; // List of tokens setToken: (token: Token) => void; // Token setter }; - -export type TokenAmountInputReact = { - label: string; - amount?: string; - token?: Token; - swappableTokens: Token[]; - tokenBalance?: string; - onMaxButtonClick?: () => void; - onAmountChange: (amount: string) => void; - onTokenSelectorClick: () => void; - onSelectTokenToggle: () => void; - disabled?: boolean; -}; From 2bd86a7cddd222b9b1d55ec89d67ab1161043416 Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Mon, 10 Jun 2024 17:30:31 -0400 Subject: [PATCH 25/35] remove unused code --- src/token/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/token/index.ts b/src/token/index.ts index 61c4c525d1..928d9408ff 100644 --- a/src/token/index.ts +++ b/src/token/index.ts @@ -15,5 +15,4 @@ export type { TokenChipReact, TokenRowReact, TokenSelectorReact, - TokenAmountInputReact, } from './types'; From af68798cd0a51725d2199e63e7c22288c0e37294 Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Mon, 10 Jun 2024 17:41:36 -0400 Subject: [PATCH 26/35] move max button functionality inside SwapAmountInput component --- site/docs/components/SwapAmountInputContainer.tsx | 7 +------ site/docs/pages/swap/swap-amount-input.mdx | 4 +--- site/docs/pages/swap/types.mdx | 1 - src/swap/components/SwapAmountInput.test.tsx | 7 ++----- src/swap/components/SwapAmountInput.tsx | 10 ++++++++-- src/swap/types.ts | 1 - 6 files changed, 12 insertions(+), 18 deletions(-) diff --git a/site/docs/components/SwapAmountInputContainer.tsx b/site/docs/components/SwapAmountInputContainer.tsx index 939fa1eb2f..e67e07aaba 100644 --- a/site/docs/components/SwapAmountInputContainer.tsx +++ b/site/docs/components/SwapAmountInputContainer.tsx @@ -8,7 +8,6 @@ type SwapAmountInputContainer = { setAmount: (a: string) => void, amount: string, tokenBalance: string, - onMaxButtonClick: () => void, ) => ReactElement; }; @@ -24,9 +23,5 @@ export default function SwapAmountInputContainer({ children }: SwapAmountInputCo const tokenBalance = TOKEN_BALANCE_MAP[token?.symbol]; - const onMaxButtonClick = () => { - setAmount(tokenBalance); - }; - - return children(token, setToken, setAmount, amount, tokenBalance, onMaxButtonClick); + return children(token, setToken, setAmount, amount, tokenBalance); } diff --git a/site/docs/pages/swap/swap-amount-input.mdx b/site/docs/pages/swap/swap-amount-input.mdx index 1b43e9699d..125f83af9a 100644 --- a/site/docs/pages/swap/swap-amount-input.mdx +++ b/site/docs/pages/swap/swap-amount-input.mdx @@ -31,7 +31,6 @@ The `SwapAmountInput` component is a stylized input field designed for users to tokenBalance={tokenBalance} onAmountChange={setAmount} onTokenSelectorClick={setToken} - onMaxButtonClick={onMaxButtonClick} /> ``` @@ -74,7 +73,7 @@ The `SwapAmountInput` component is a stylized input field designed for users to - {(token, setToken, setAmount, amount, tokenBalance, onMaxButtonClick) => ( + {(token, setToken, setAmount, amount, tokenBalance) => ( )} diff --git a/site/docs/pages/swap/types.mdx b/site/docs/pages/swap/types.mdx index 19c6f607f6..13e6b04c36 100644 --- a/site/docs/pages/swap/types.mdx +++ b/site/docs/pages/swap/types.mdx @@ -14,7 +14,6 @@ type SwapAmountInputReact = { token?: Token; // Selected token swappableTokens?: Token[]; // Tokens available for swap tokenBalance?: string; // Amount of selected token user owns - onMaxButtonClick: () => void; // Callback function when max button is clicked onAmountChange: (amount: string) => void; // Callback function when the amount changes onTokenSelectorClick: () => 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 44e1deaa6f..a854d905b2 100644 --- a/src/swap/components/SwapAmountInput.test.tsx +++ b/src/swap/components/SwapAmountInput.test.tsx @@ -10,7 +10,6 @@ import { Token } from '../../token'; const setAmountMock = jest.fn(); const selectTokenClickMock = jest.fn(); -const onMaxButtonClickMock = jest.fn(); const token = { address: '0x123' as Address, @@ -109,7 +108,7 @@ describe('SwapAmountInput Component', () => { expect(input.value).toBe('1'); }); - it('should call onMaxButtonClick when the max button is clicked', async () => { + it('should call onAmountChange with tokenBalance when the max button is clicked', async () => { render( { amount="1" onAmountChange={setAmountMock} onTokenSelectorClick={selectTokenClickMock} - onMaxButtonClick={onMaxButtonClickMock} tokenBalance="100" />, ); const maxButton = screen.getByTestId('ockSwapAmountInput_MaxButton'); fireEvent.click(maxButton); - expect(onMaxButtonClickMock).toHaveBeenCalled(); + expect(setAmountMock).toHaveBeenCalledWith('100'); }); it('should disable the input when disabled prop is true', async () => { @@ -137,7 +135,6 @@ describe('SwapAmountInput Component', () => { amount="1" onAmountChange={setAmountMock} onTokenSelectorClick={selectTokenClickMock} - onMaxButtonClick={onMaxButtonClickMock} disabled />, ); diff --git a/src/swap/components/SwapAmountInput.tsx b/src/swap/components/SwapAmountInput.tsx index 6f1d555c58..54dc7c74fa 100644 --- a/src/swap/components/SwapAmountInput.tsx +++ b/src/swap/components/SwapAmountInput.tsx @@ -12,7 +12,6 @@ export function SwapAmountInput({ tokenBalance, onAmountChange, onTokenSelectorClick, - onMaxButtonClick, disabled = false, }: SwapAmountInputReact) { const handleAmountChange = useCallback( @@ -24,6 +23,12 @@ export function SwapAmountInput({ [onAmountChange], ); + const handleMaxButtonClick = useCallback(() => { + if (tokenBalance && isValidAmount(tokenBalance)) { + onAmountChange(tokenBalance); + } + }, [tokenBalance, onAmountChange]); + return (
@@ -39,7 +44,8 @@ export function SwapAmountInput({ diff --git a/src/swap/types.ts b/src/swap/types.ts index 43f686428f..6e34ab8ba9 100644 --- a/src/swap/types.ts +++ b/src/swap/types.ts @@ -89,7 +89,6 @@ export type SwapAmountInputReact = { token?: Token; swappableTokens: Token[]; tokenBalance?: string; - onMaxButtonClick?: () => void; onAmountChange: (amount: string) => void; onTokenSelectorClick: () => void; disabled?: boolean; From 79f7aef636bcb5ffa4f6018c28710906751928a9 Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Mon, 10 Jun 2024 17:43:35 -0400 Subject: [PATCH 27/35] 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({ )}
- - + +
); 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 }; From b9fe0ac72824b8c40c76bcc8aa2bca60bdf9b195 Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Mon, 10 Jun 2024 18:25:04 -0400 Subject: [PATCH 30/35] alphabetize --- site/docs/components/SwapAmountInputContainer.tsx | 8 ++++---- site/docs/pages/swap/swap-amount-input.mdx | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/site/docs/components/SwapAmountInputContainer.tsx b/site/docs/components/SwapAmountInputContainer.tsx index e67e07aaba..3fd1544c35 100644 --- a/site/docs/components/SwapAmountInputContainer.tsx +++ b/site/docs/components/SwapAmountInputContainer.tsx @@ -3,10 +3,10 @@ import type { Token } from '@coinbase/onchainkit/token'; type SwapAmountInputContainer = { children: ( - token: Token, - setToken: (t: Token) => void, - setAmount: (a: string) => void, amount: string, + setAmount: (a: string) => void, + setToken: (t: Token) => void, + token: Token, tokenBalance: string, ) => ReactElement; }; @@ -23,5 +23,5 @@ export default function SwapAmountInputContainer({ children }: SwapAmountInputCo const tokenBalance = TOKEN_BALANCE_MAP[token?.symbol]; - return children(token, setToken, setAmount, amount, tokenBalance); + return children(amount, setAmount, setToken, token, tokenBalance); } diff --git a/site/docs/pages/swap/swap-amount-input.mdx b/site/docs/pages/swap/swap-amount-input.mdx index 846ab68b87..39740d7fa4 100644 --- a/site/docs/pages/swap/swap-amount-input.mdx +++ b/site/docs/pages/swap/swap-amount-input.mdx @@ -73,7 +73,7 @@ The `SwapAmountInput` component is a stylized input field designed for users to - {(token, setToken, setAmount, amount, tokenBalance) => ( + {(amount, setAmount, setToken, token, tokenBalance) => ( Date: Mon, 10 Jun 2024 19:01:54 -0400 Subject: [PATCH 31/35] remove import from docs --- site/docs/pages/swap/swap-amount-input.mdx | 44 ---------------------- 1 file changed, 44 deletions(-) diff --git a/site/docs/pages/swap/swap-amount-input.mdx b/site/docs/pages/swap/swap-amount-input.mdx index 39740d7fa4..31cdf70721 100644 --- a/site/docs/pages/swap/swap-amount-input.mdx +++ b/site/docs/pages/swap/swap-amount-input.mdx @@ -1,5 +1,4 @@ {/* import { SwapAmountInput } from '../../../../src/swap'; */} -import { SwapAmountInput } from '../../../../src/swap'; import App from '../App'; import SwapAmountInputContainer from '../../components/SwapAmountInputContainer.tsx'; @@ -71,49 +70,6 @@ The `SwapAmountInput` component is a stylized input field designed for users to ::: - - - {(amount, setAmount, setToken, token, tokenBalance) => ( - - )} - - - ## Props [`SwapAmountInputReact`](/swap/types#SwapAmountInputReact) From 508b979ced056184905baf4028d9830a2d0c3c51 Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Mon, 10 Jun 2024 19:02:23 -0400 Subject: [PATCH 32/35] remove export --- src/swap/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/swap/index.ts b/src/swap/index.ts index 18b70f612b..e51725e16b 100644 --- a/src/swap/index.ts +++ b/src/swap/index.ts @@ -1,6 +1,5 @@ // 🌲☀️🌲 export { getQuote } from './core/getQuote'; -export { SwapAmountInput } from './components/SwapAmountInput'; export type { Fee, GetQuoteParams, From 4047ea345c55c1df836573843a718a19f6eecb3e Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Mon, 10 Jun 2024 21:37:03 -0400 Subject: [PATCH 33/35] remove css classnames --- site/docs/pages/swap/swap-amount-input.mdx | 30 ---------------------- src/swap/components/SwapAmountInput.css | 23 ----------------- src/swap/components/SwapAmountInput.tsx | 17 +++++++----- 3 files changed, 10 insertions(+), 60 deletions(-) delete mode 100644 src/swap/components/SwapAmountInput.css diff --git a/site/docs/pages/swap/swap-amount-input.mdx b/site/docs/pages/swap/swap-amount-input.mdx index 31cdf70721..642bc828da 100644 --- a/site/docs/pages/swap/swap-amount-input.mdx +++ b/site/docs/pages/swap/swap-amount-input.mdx @@ -73,33 +73,3 @@ The `SwapAmountInput` component is a stylized input field designed for users to ## Props [`SwapAmountInputReact`](/swap/types#SwapAmountInputReact) - -## CSS - -`SwapAmountInput` - -```css -.ock-swapamountinput-container { - @apply box-border flex w-fit flex-col items-start gap-[11px] rounded-2xl bg-[#FFF] p-4; -} - -.ock-swapamountinput-label { - @apply text-sm font-semibold text-[#030712]; -} - -.ock-swapamountinput-input { - @apply border-[none] bg-transparent text-5xl text-[black]; -} - -.ock-swapamountinput-row { - @apply flex w-full items-center justify-between; -} - -.ock-swapamountinput-balance { - @apply text-sm font-normal text-gray-400; -} - -.ock-swapamountinput-maxbutton { - @apply flex h-8 w-[58px] max-w-[200px] items-center rounded-[40px] bg-gray-100 px-3 py-2 text-base font-medium not-italic leading-6 text-gray-500; -} -``` diff --git a/src/swap/components/SwapAmountInput.css b/src/swap/components/SwapAmountInput.css deleted file mode 100644 index c360604ff5..0000000000 --- a/src/swap/components/SwapAmountInput.css +++ /dev/null @@ -1,23 +0,0 @@ -.ock-swapamountinput-container { - @apply box-border flex w-fit flex-col items-start gap-[11px] bg-[#FFF] p-4; -} - -.ock-swapamountinput-label { - @apply text-sm font-semibold text-[#030712]; -} - -.ock-swapamountinput-input { - @apply border-[none] bg-transparent text-5xl text-[black]; -} - -.ock-swapamountinput-row { - @apply flex w-full items-center justify-between; -} - -.ock-swapamountinput-balance { - @apply text-sm font-normal text-gray-400; -} - -.ock-swapamountinput-maxbutton { - @apply flex h-8 w-[58px] max-w-[200px] items-center rounded-[40px] bg-gray-100 px-3 py-2 text-base font-medium not-italic leading-6 text-gray-500; -} diff --git a/src/swap/components/SwapAmountInput.tsx b/src/swap/components/SwapAmountInput.tsx index 79d06ac613..68a0a422e7 100644 --- a/src/swap/components/SwapAmountInput.tsx +++ b/src/swap/components/SwapAmountInput.tsx @@ -30,19 +30,22 @@ export function SwapAmountInput({ }, [tokenBalance, setAmount]); return ( -
-
- +
+
+ {tokenBalance && ( - + )}
-
+
Date: Mon, 10 Jun 2024 21:38:25 -0400 Subject: [PATCH 34/35] remove token changes --- .../components/TokenSelectorDropdown.test.tsx | 20 ------------------- .../components/TokenSelectorDropdown.tsx | 4 ++-- src/token/types.ts | 4 ++-- 3 files changed, 4 insertions(+), 24 deletions(-) diff --git a/src/token/components/TokenSelectorDropdown.test.tsx b/src/token/components/TokenSelectorDropdown.test.tsx index fd5b956437..b81274ae19 100644 --- a/src/token/components/TokenSelectorDropdown.test.tsx +++ b/src/token/components/TokenSelectorDropdown.test.tsx @@ -30,10 +30,6 @@ describe('TokenSelectorDropdown', () => { }, ]; - beforeEach(() => { - jest.clearAllMocks(); - }); - it('renders the TokenSelectorDropdown component', () => { render(); @@ -61,20 +57,4 @@ describe('TokenSelectorDropdown', () => { expect(onToggle).toHaveBeenCalled(); }); }); - - it('does not call onToggle when onToggle is not provided', async () => { - render(); - - await waitFor(() => { - fireEvent.click(screen.getByText(options[0].name)); - - expect(setToken).toHaveBeenCalledWith(options[0]); - expect(onToggle).not.toHaveBeenCalled(); - }); - - await waitFor(() => { - fireEvent.click(document); - expect(onToggle).not.toHaveBeenCalled(); - }); - }); }); diff --git a/src/token/components/TokenSelectorDropdown.tsx b/src/token/components/TokenSelectorDropdown.tsx index 4fadb35fb3..1618ec7060 100644 --- a/src/token/components/TokenSelectorDropdown.tsx +++ b/src/token/components/TokenSelectorDropdown.tsx @@ -8,7 +8,7 @@ export function TokenSelectorDropdown({ setToken, options, onToggle }: TokenSele const handleBlur = useCallback((event: MouseEvent) => { /* istanbul ignore next */ if (ref.current && !ref.current.contains(event.target as Node)) { - onToggle?.(); + onToggle(); } }, []); @@ -36,7 +36,7 @@ export function TokenSelectorDropdown({ setToken, options, onToggle }: TokenSele token={token} onClick={() => { setToken(token); - onToggle?.(); + onToggle(); }} /> ))} diff --git a/src/token/types.ts b/src/token/types.ts index 25e60ea885..fd42d4fa8a 100644 --- a/src/token/types.ts +++ b/src/token/types.ts @@ -90,7 +90,7 @@ export type TokenSearchReact = { * Note: exported as public Type */ export type TokenSelectorReact = { - children: ReactElement<{ onToggle?: () => void }>; + children: ReactElement<{ onToggle: () => void }>; setToken: (token: Token) => void; token?: Token; }; @@ -99,7 +99,7 @@ export type TokenSelectorReact = { * Note: exported as public Type */ export type TokenSelectorDropdownReact = { - onToggle?: () => void; // Injected by TokenSelector + onToggle: () => void; // Injected by TokenSelector options: Token[]; // List of tokens setToken: (token: Token) => void; // Token setter }; From 743398f11869677953b293c67d8a2388a60361f4 Mon Sep 17 00:00:00 2001 From: Alissa Crane Date: Mon, 10 Jun 2024 21:44:26 -0400 Subject: [PATCH 35/35] comment out token selector --- src/swap/components/SwapAmountInput.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/swap/components/SwapAmountInput.tsx b/src/swap/components/SwapAmountInput.tsx index 68a0a422e7..2356630455 100644 --- a/src/swap/components/SwapAmountInput.tsx +++ b/src/swap/components/SwapAmountInput.tsx @@ -1,7 +1,6 @@ import { useCallback } from 'react'; import { isValidAmount } from '../utils'; -import { TokenSelector, TokenSelectorDropdown } from '../../token'; import type { SwapAmountInputReact } from '../types'; export function SwapAmountInput({ @@ -9,9 +8,6 @@ export function SwapAmountInput({ disabled = false, label, setAmount, - setToken, - swappableTokens, - token, tokenBalance, }: SwapAmountInputReact) { const handleAmountChange = useCallback( @@ -41,9 +37,10 @@ export function SwapAmountInput({ )}
- + {/* TODO: add back in when TokenSelector is complete */} + {/* - + */}