Skip to content

Commit

Permalink
withdrawal modal ui!
Browse files Browse the repository at this point in the history
  • Loading branch information
yogurtandjam committed Oct 17, 2024
1 parent 76a7484 commit 3e09292
Show file tree
Hide file tree
Showing 15 changed files with 279 additions and 291 deletions.
32 changes: 32 additions & 0 deletions src/components/ArrowIcon.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import styled, { css } from 'styled-components';

import { Icon, IconName } from './Icon';

export const ArrowIcon = (props: { direction: 'up' | 'down'; color: string }) => {
return <$ArrowIcon {...props} iconName={IconName.Arrow} />;
};

const $ArrowIcon = styled(Icon)<{ direction: 'up' | 'down'; color: 'green' | 'red' | string }>`
position: absolute;
${({ direction }) =>
({
up: css`
transform: rotate(-90deg);
`,
down: css`
transform: rotate(90deg);
`,
})[direction]}
${({ color }) =>
({
green: css`
color: var(--color-green);
`,
red: css`
color: var(--color-red);
`,
})[color] ??
css`
color: var(${color});
`};
`;
51 changes: 39 additions & 12 deletions src/components/ComboboxMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import { popoverMixins } from '@/styles/popoverMixins';

import { Tag } from '@/components/Tag';

import { SearchInput } from './SearchInput';

type ElementProps<MenuItemValue extends string | number, MenuGroupValue extends string | number> = {
items: MenuConfig<MenuItemValue, MenuGroupValue>;
onItemSelected?: () => void;
Expand All @@ -18,6 +20,7 @@ type ElementProps<MenuItemValue extends string | number, MenuGroupValue extends
inputPlaceholder?: string;
slotEmpty?: ReactNode;
withSearch?: boolean;
useSearchInputComponent?: boolean;
};

type StyleProps = {
Expand All @@ -42,6 +45,7 @@ export const ComboboxMenu = <
inputPlaceholder = 'Search…',
slotEmpty = 'No items found.',
withSearch = true,
useSearchInputComponent,

className,
withItemBorders,
Expand All @@ -64,17 +68,27 @@ export const ComboboxMenu = <
>
{withSearch && (
<$Header $withStickyLayout={withStickyLayout}>
<$Input
/**
* Mobile Issue: Search Input will always trigger mobile keyboard drawer. There is no fix.
* https://github.com/pacocoursey/cmdk/issues/127
*/
autoFocus
value={searchValue}
onValueChange={setSearchValue}
placeholder={inputPlaceholder}
data-hj-allow
/>
{useSearchInputComponent ? (
<$SearchInput
autoFocus
value={searchValue}
onChange={setSearchValue}
placeholder={inputPlaceholder}
data-hj-allow
/>
) : (
<$Input
/**
* Mobile Issue: Search Input will always trigger mobile keyboard drawer. There is no fix.
* https://github.com/pacocoursey/cmdk/issues/127
*/
autoFocus
value={searchValue}
onValueChange={setSearchValue}
placeholder={inputPlaceholder}
data-hj-allow
/>
)}
</$Header>
)}

Expand Down Expand Up @@ -192,6 +206,7 @@ const $Command = styled(Command)<{ $withStickyLayout?: boolean }>`
--comboboxMenu-item-gap: 0.5rem;
--comboboxMenu-item-padding: 0.5em 1em;
box-shadow: none;
display: grid;
align-content: start;
Expand All @@ -214,6 +229,14 @@ const $Command = styled(Command)<{ $withStickyLayout?: boolean }>`
overflow-y: auto;
}
`}
/*
Layout mixins withInnerHorizontalBorders forces all children components to have box shadow
This creates a border-like effect that we don't want for this dropdown component
*/
&& > * {
box-shadow: none;
}
`;

const $Header = styled.header<{ $withStickyLayout?: boolean }>`
Expand Down Expand Up @@ -279,7 +302,6 @@ const $List = styled(Command.List)<{ $withStickyLayout?: boolean }>`
> [cmdk-list-sizer] {
display: grid;
${layoutMixins.withOuterAndInnerBorders}
}
@media (prefers-reduced-motion: no-preference) {
Expand Down Expand Up @@ -342,3 +364,8 @@ const $ItemLabel = styled.div`
min-width: 0;
`;

const $SearchInput = styled(SearchInput)`
margin-top: 0.75em;
margin-bottom: 0.5em;
`;
40 changes: 33 additions & 7 deletions src/components/FormInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { WithLabel } from '@/components/WithLabel';

type StyleProps = {
className?: string;
backgroundColorOverride?: string;
};

type ElementProps = {
Expand All @@ -28,15 +29,33 @@ type ElementProps = {
export type FormInputProps = ElementProps & StyleProps & InputProps;

export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
({ id, label, slotRight, className, validationConfig, ...otherProps }, ref) => (
(
{ id, label, slotRight, className, validationConfig, backgroundColorOverride, ...otherProps },
ref
) => (
<$FormInputContainer className={className} isValidationAttached={validationConfig?.attached}>
<$InputContainer hasLabel={!!label} hasSlotRight={!!slotRight}>
{label ? (
<$WithLabel label={label} inputID={id} disabled={otherProps?.disabled}>
<Input ref={ref} id={id} {...otherProps} />
<$WithLabel
label={label}
inputID={id}
disabled={otherProps?.disabled}
backgroundColorOverride={backgroundColorOverride}
>
<Input
ref={ref}
id={id}
{...otherProps}
backgroundColorOverride={backgroundColorOverride}
/>
</$WithLabel>
) : (
<Input ref={ref} id={id} {...otherProps} />
<Input
ref={ref}
id={id}
{...otherProps}
backgroundColorOverride={backgroundColorOverride}
/>
)}
{slotRight}
</$InputContainer>
Expand Down Expand Up @@ -65,9 +84,11 @@ const $FormInputContainer = styled.div<{ isValidationAttached?: boolean }>`
`}
`;

const $InputContainer = styled.div<{ hasLabel?: boolean; hasSlotRight?: boolean }>`
const $InputContainer = styled.div<{
hasLabel?: boolean;
hasSlotRight?: boolean;
}>`
${formMixins.inputContainer}
input {
${({ hasLabel }) =>
!hasLabel &&
Expand All @@ -89,8 +110,13 @@ const $InputContainer = styled.div<{ hasLabel?: boolean; hasSlotRight?: boolean
`}
`;

const $WithLabel = styled(WithLabel)<{ disabled?: boolean }>`
const $WithLabel = styled(WithLabel)<{ disabled?: boolean; backgroundColorOverride?: string }>`
${formMixins.inputLabel}
${({ backgroundColorOverride }) =>
backgroundColorOverride &&
css`
background-color: ${backgroundColorOverride};
`}
label {
${({ disabled }) => !disabled && 'cursor: text;'}
Expand Down
3 changes: 3 additions & 0 deletions src/components/Icon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,7 @@ import {
} from '@/icons';
import { ChaosLabsIcon } from '@/icons/chaos-labs';
import { LogoShortIcon } from '@/icons/logo-short';
import UsdcIcon from '@/icons/usdc.svg';

export enum IconName {
AddressConnector = 'AddressConnector',
Expand Down Expand Up @@ -188,6 +189,7 @@ export enum IconName {
Translate = 'Translate',
Triangle = 'Triangle',
TryAgain = 'TryAgain',
Usdc = 'Usdc',
Warning = 'Warning',
Website = 'Website',
Whitepaper = 'Whitepaper',
Expand Down Expand Up @@ -284,6 +286,7 @@ const icons = {
[IconName.Translate]: TranslateIcon,
[IconName.Triangle]: TriangleIcon,
[IconName.TryAgain]: TryAgainIcon,
[IconName.Usdc]: UsdcIcon,
[IconName.Warning]: WarningIcon,
[IconName.Website]: WebsiteIcon,
[IconName.Whitepaper]: WhitepaperIcon,
Expand Down
18 changes: 16 additions & 2 deletions src/components/Input.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export enum InputType {

type StyleProps = {
className?: string;
backgroundColorOverride?: string;
};

type ElementProps = {
Expand Down Expand Up @@ -81,6 +82,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
onFocus,
onInput,
type = InputType.Number,
backgroundColorOverride,
...otherProps
},
ref
Expand Down Expand Up @@ -126,6 +128,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
<$InputContainer className={className}>
{type === InputType.Text || type === InputType.Search ? (
<$Input
backgroundColorOverride={backgroundColorOverride}
// React
ref={ref}
id={id}
Expand All @@ -145,6 +148,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
/>
) : (
<$NumericFormat
backgroundColorOverride={backgroundColorOverride}
// React
getInputRef={ref}
id={id}
Expand Down Expand Up @@ -234,11 +238,21 @@ const InputStyle = css`
}
`;

const $NumericFormat = styled(NumericFormat)`
const $NumericFormat = styled(NumericFormat)<{ backgroundColorOverride?: string }>`
${InputStyle}
font-feature-settings: var(--fontFeature-monoNumbers);
${({ backgroundColorOverride }) =>
backgroundColorOverride &&
css`
background-color: ${backgroundColorOverride};
`}
`;

const $Input = styled.input`
const $Input = styled.input<{ backgroundColorOverride?: string }>`
${InputStyle}
${({ backgroundColorOverride }) =>
backgroundColorOverride &&
css`
background-color: ${backgroundColorOverride};
`}
`;
4 changes: 2 additions & 2 deletions src/components/SearchInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,8 @@ export const SearchInput = ({ placeholder, onTextChange, className }: SearchInpu
const $Search = styled.div`
${layoutMixins.row}
width: auto;
height: 2rem;
background-color: var(--color-layer-3);
height: 2.5rem;
background-color: var(--color-layer-5);
color: ${({ theme }) => theme.textTertiary};
border-radius: 2.5rem;
border: solid var(--border-width) var(--color-layer-6);
Expand Down
7 changes: 6 additions & 1 deletion src/components/SearchSelectMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@ type ElementProps = {
items: MenuConfig<string, string>;
withSearch?: boolean;
withReceiptItems?: DetailsItem[];
useSearchInputComponent?: boolean;
inputPlaceholder?: string;
};

type StyleProps = {
Expand All @@ -45,6 +47,8 @@ export const SearchSelectMenu = ({
items,
withSearch = true,
withReceiptItems,
useSearchInputComponent,
inputPlaceholder,
}: SearchSelectMenuProps) => {
const [open, setOpen] = useState(false);
const searchSelectMenuRef = useRef<HTMLDivElement & HTMLButtonElement>(null);
Expand Down Expand Up @@ -83,6 +87,8 @@ export const SearchSelectMenu = ({
onItemSelected={() => setOpen(false)}
withStickyLayout
$withSearch={withSearch}
inputPlaceholder={inputPlaceholder}
useSearchInputComponent={useSearchInputComponent}
/>
</$Popover>
</$WithDetailsReceipt>
Expand Down Expand Up @@ -123,7 +129,6 @@ const $Popover = styled(Popover)`
border: var(--border-width) solid var(--color-layer-6);
border-radius: 0.5rem;
z-index: 2;
box-shadow: none;
`;

type ComboboxMenuStyleProps = { $withSearch?: boolean };
Expand Down
11 changes: 11 additions & 0 deletions src/icons/usdc.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions src/lib/testFlags.ts
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,10 @@ class TestFlags {
get uiRefresh() {
return !!this.queryParams.uirefresh || isDev;
}

get onboardingRewrite() {
return !!this.queryParams.onboarding_rewrite;
}
}

export const testFlags = new TestFlags();
2 changes: 1 addition & 1 deletion src/views/dialogs/DisplaySettingsDialog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -207,7 +207,7 @@ const $Item = styled(Item)`
--border-color: var(--color-accent);
}
border: solid var(--border-width) var(--border-color);
/* border: solid var(--border-width) var(--border-color); */
border-radius: 0.875rem;
padding: var(--item-padding);
Expand Down
Loading

0 comments on commit 3e09292

Please sign in to comment.