Skip to content

Commit

Permalink
address qa comments
Browse files Browse the repository at this point in the history
  • Loading branch information
alissacrane-cb committed Dec 18, 2024
1 parent 727bb99 commit 1090562
Show file tree
Hide file tree
Showing 7 changed files with 43 additions and 9 deletions.
2 changes: 1 addition & 1 deletion src/buy/components/Buy.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ function BuyContent({ className }: { className?: string }) {
ref={buyContainerRef}
className={cn('relative flex flex-col gap-2', componentTheme, className)}
>
<div className={cn('flex items-center gap-4', className)}>
<div className={cn('flex items-center gap-4')}>
<BuyAmountInput />
<BuyButton />
{isDropdownOpen && <BuyDropdown />}
Expand Down
2 changes: 2 additions & 0 deletions src/buy/components/BuyAmountInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ export function BuyAmountInput() {
className={cn(
'mr-2 w-full border-[none] font-display',
'leading-none outline-none',
'disabled:cursor-not-allowed',
background.default,
color.foreground,
)}
Expand All @@ -37,6 +38,7 @@ export function BuyAmountInput() {
<TokenChip
className={cn(color.foreground, 'rounded-md')}
token={to.token}
isPressable={false}
/>
</div>
);
Expand Down
11 changes: 11 additions & 0 deletions src/buy/components/BuyDropdown.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -110,4 +110,15 @@ describe('BuyDropdown', () => {
}),
);
});

it('closes the dropdown when Escape key is pressed', () => {
render(<BuyDropdown />);

const { setIsDropdownOpen } = mockContextValue;

act(() => {
fireEvent.keyDown(document, { key: 'Escape' });
});
expect(setIsDropdownOpen).toHaveBeenCalledWith(false);
});
});
20 changes: 17 additions & 3 deletions src/buy/components/BuyDropdown.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useOnchainKit } from '@/core-react/useOnchainKit';
import { openPopup } from '@/ui-react/internal/utils/openPopup';
import { useCallback, useMemo } from 'react';
import { useCallback, useEffect, useMemo } from 'react';
import { useAccount } from 'wagmi';
import { getRoundedAmount } from '../../core/utils/getRoundedAmount';
import { ONRAMP_BUY_URL } from '../../fund/constants';
Expand All @@ -13,7 +13,8 @@ import { BuyTokenItem } from './BuyTokenItem';

export function BuyDropdown() {
const { projectId } = useOnchainKit();
const { to, fromETH, fromUSDC, from, startPopupMonitor } = useBuyContext();
const { to, fromETH, fromUSDC, from, startPopupMonitor, setIsDropdownOpen } =
useBuyContext();
const { address } = useAccount();

const handleOnrampClick = useCallback(
Expand Down Expand Up @@ -60,12 +61,25 @@ export function BuyDropdown() {
from?.token?.symbol !== 'ETH' &&
from?.token?.symbol !== 'USDC';

useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
setIsDropdownOpen(false);
}
};

document.addEventListener('keydown', handleKeyDown);
return () => {
document.removeEventListener('keydown', handleKeyDown);
};
}, [setIsDropdownOpen]);

return (
<div
className={cn(
color.foreground,
background.default,
'absolute right-0 bottom-0 flex translate-y-[105%] flex-col gap-2',
'absolute right-0 bottom-0 flex translate-y-[102%] flex-col gap-2',
'min-w-80 rounded rounded-lg border p-2',
)}
>
Expand Down
2 changes: 1 addition & 1 deletion src/buy/components/BuyTokenItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export function BuyTokenItem({ swapUnit }: { swapUnit?: SwapUnit }) {
}, [swapUnit.amount]);

const roundedBalance = useMemo(() => {
return getRoundedAmount(swapUnit.balance || '0', 10);
return getRoundedAmount(swapUnit.balance || '0', 3);
}, [swapUnit.balance]);

return (
Expand Down
14 changes: 10 additions & 4 deletions src/token/components/TokenChip.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { useTheme } from '../../core-react/internal/hooks/useTheme';
import { cn, pressable, text } from '../../styles/theme';
import { background, cn, pressable, text } from '../../styles/theme';
import type { TokenChipReact } from '../types';
import { TokenImage } from './TokenImage';

Expand All @@ -9,7 +9,12 @@ import { TokenImage } from './TokenImage';
* WARNING: This component is under development and
* may change in the next few weeks.
*/
export function TokenChip({ token, onClick, className }: TokenChipReact) {
export function TokenChip({
token,
onClick,
className,
isPressable = true,
}: TokenChipReact) {
const componentTheme = useTheme();

return (
Expand All @@ -18,8 +23,9 @@ export function TokenChip({ token, onClick, className }: TokenChipReact) {
data-testid="ockTokenChip_Button"
className={cn(
componentTheme,
pressable.secondary,
pressable.shadow,
isPressable
? [pressable.secondary, pressable.shadow]
: [background.secondary, 'cursor-default'],
'flex w-fit shrink-0 items-center gap-2 rounded-lg py-1 pr-3 pl-1 ',
className,
)}
Expand Down
1 change: 1 addition & 0 deletions src/token/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ export type TokenChipReact = {
token: Token; // Rendered token
onClick?: (token: Token) => void;
className?: string;
isPressable?: boolean;
};

/**
Expand Down

0 comments on commit 1090562

Please sign in to comment.