From e223b0a9fa4d9821237dfcbc707f943b25a33a7c Mon Sep 17 00:00:00 2001 From: kyranjamie Date: Tue, 16 Jan 2024 16:21:05 -0300 Subject: [PATCH 1/4] feat(ui): adds input element, ref #4810 --- package.json | 3 +- src/app/common/hooks/use-event-listener.ts | 14 +- .../mnemonic-key/mnemonic-input-field.tsx | 5 +- src/app/features/add-network/add-network.tsx | 89 ++--- .../components/edit-nonce-field.tsx | 20 +- src/app/pages/home/home.tsx | 1 - src/app/ui/components/input.tsx | 19 -- src/app/ui/components/input/input.stories.tsx | 51 +++ src/app/ui/components/input/input.tsx | 163 +++++++++ src/app/ui/utils/style-context.tsx | 70 ++++ yarn.lock | 316 +++++++++++------- 11 files changed, 545 insertions(+), 206 deletions(-) delete mode 100644 src/app/ui/components/input.tsx create mode 100644 src/app/ui/components/input/input.stories.tsx create mode 100644 src/app/ui/components/input/input.tsx create mode 100644 src/app/ui/utils/style-context.tsx diff --git a/package.json b/package.json index 742d2d76b83..c5c841649a7 100644 --- a/package.json +++ b/package.json @@ -241,8 +241,9 @@ "@actions/core": "1.10.1", "@btckit/types": "0.0.19", "@leather-wallet/prettier-config": "0.0.1", + "@leather-wallet/tokens": "0.0.5", "@ls-lint/ls-lint": "2.2.2", - "@pandacss/dev": "0.26.2", + "@pandacss/dev": "0.27.1", "@playwright/test": "1.40.1", "@pmmmwh/react-refresh-webpack-plugin": "0.5.11", "@redux-devtools/cli": "4.0.0", diff --git a/src/app/common/hooks/use-event-listener.ts b/src/app/common/hooks/use-event-listener.ts index d7a1c1bd48d..b50275a17c4 100644 --- a/src/app/common/hooks/use-event-listener.ts +++ b/src/app/common/hooks/use-event-listener.ts @@ -43,32 +43,32 @@ const isBrowser = checkIsBrowser(); * * @param event the event name * @param handler the event handler function to execute - * @param doc the dom environment to execute against (defaults to `document`) + * @param element the dom environment to execute against (defaults to `document`) * @param options the event listener options */ export function useEventListener( event: keyof WindowEventMap, handler: (event: any) => void, - doc: Document | null = isBrowser ? document : null, + element: Document | null = isBrowser ? document : null, options?: AddEventListener[2] ) { const savedHandler = useLatestRef(handler); useEffect(() => { - if (!doc) return; + if (!element) return; const listener = (event: any) => { savedHandler.current(event); }; - doc.addEventListener(event, listener, options); + element.addEventListener(event, listener, options); return () => { - doc.removeEventListener(event, listener, options); + element.removeEventListener(event, listener, options); }; - }, [event, doc, options, savedHandler]); + }, [event, element, options, savedHandler]); return () => { - doc?.removeEventListener(event, savedHandler.current, options); + element?.removeEventListener(event, savedHandler.current, options); }; } diff --git a/src/app/components/secret-key/mnemonic-key/mnemonic-input-field.tsx b/src/app/components/secret-key/mnemonic-key/mnemonic-input-field.tsx index b1cf126aa3d..19810f8b0ef 100644 --- a/src/app/components/secret-key/mnemonic-key/mnemonic-input-field.tsx +++ b/src/app/components/secret-key/mnemonic-key/mnemonic-input-field.tsx @@ -52,10 +52,7 @@ export function InputField({ dataTestId, name, onPaste, onChange, value }: Input }, }, '&[data-state=error]': { - _before: { - ...psuedoBorderStyles, - border: 'error', - }, + _before: { ...psuedoBorderStyles, border: 'error' }, }, /** * Focus styling: diff --git a/src/app/features/add-network/add-network.tsx b/src/app/features/add-network/add-network.tsx index 06fbb497d29..339faa38c97 100644 --- a/src/app/features/add-network/add-network.tsx +++ b/src/app/features/add-network/add-network.tsx @@ -22,7 +22,7 @@ import { useNetworksActions, } from '@app/store/networks/networks.hooks'; import { Button } from '@app/ui/components/button/button'; -import { Input } from '@app/ui/components/input'; +import { Input } from '@app/ui/components/input/input'; import { Title } from '@app/ui/components/typography/title'; /** @@ -70,14 +70,14 @@ export function AddNetwork() { const setStacksUrl = useCallback( (value: string) => { - setFieldValue('stacksUrl', value); + void setFieldValue('stacksUrl', value); }, [setFieldValue] ); const setBitcoinUrl = useCallback( (value: string) => { - setFieldValue('bitcoinUrl', value); + void setFieldValue('bitcoinUrl', value); }, [setFieldValue] ); @@ -224,17 +224,17 @@ export function AddNetwork() { . Make sure you review and trust the host before you add it. - + + Name + + Bitcoin API {/* TODO: Replace with new Select */} @@ -269,37 +269,38 @@ export function AddNetwork() { Stacks API URL - + + Name + + Bitcoin API URL - - + + Bitcoin API URL + + + + Network key + + {error ? ( {error} ) : null} diff --git a/src/app/features/edit-nonce-drawer/components/edit-nonce-field.tsx b/src/app/features/edit-nonce-drawer/components/edit-nonce-field.tsx index ee8825535f0..de37a000648 100644 --- a/src/app/features/edit-nonce-drawer/components/edit-nonce-field.tsx +++ b/src/app/features/edit-nonce-drawer/components/edit-nonce-field.tsx @@ -4,7 +4,7 @@ import { useField } from 'formik'; import { Stack, StackProps } from 'leather-styles/jsx'; import { ErrorLabel } from '@app/components/error-label'; -import { Input } from '@app/ui/components/input'; +import { Input } from '@app/ui/components/input/input'; interface EditNonceFieldProps extends StackProps { onBlur(): void; @@ -15,14 +15,16 @@ export const EditNonceField = memo((props: EditNonceFieldProps) => { return ( - ) => { - await helpers.setValue(evt.currentTarget.value); - }} - placeholder="Enter a custom nonce" - value={field.value} - /> + + Custom nonce + ) => { + await helpers.setValue(evt.currentTarget.value); + }} + /> + {meta.error && {meta.error}} ); diff --git a/src/app/pages/home/home.tsx b/src/app/pages/home/home.tsx index d26ce2eda1d..d6187512d63 100644 --- a/src/app/pages/home/home.tsx +++ b/src/app/pages/home/home.tsx @@ -42,7 +42,6 @@ export function Home() { }> {homePageModalRoutes} - {homePageModalRoutes} diff --git a/src/app/ui/components/input.tsx b/src/app/ui/components/input.tsx deleted file mode 100644 index 09ec6190015..00000000000 --- a/src/app/ui/components/input.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { HTMLStyledProps, styled } from 'leather-styles/jsx'; - -type InputProps = HTMLStyledProps<'input'>; - -export function Input(props: InputProps) { - return ( - - ); -} diff --git a/src/app/ui/components/input/input.stories.tsx b/src/app/ui/components/input/input.stories.tsx new file mode 100644 index 00000000000..2c5b304b0ce --- /dev/null +++ b/src/app/ui/components/input/input.stories.tsx @@ -0,0 +1,51 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { Input } from './input'; + +const meta: Meta = { + component: Input.Root, + tags: ['autodocs'], + title: 'Input', +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => ( + + Label + + + ), +}; + +export const Error: Story = { + render: () => ( + + Error field + + + ), +}; + +export const DefaultValue: Story = { + render: () => ( + + Description + + + ), +}; + +/** + * When using a placeholder, the label *must* come after the `Input.Field`. + */ +export const WithPlaceholder: Story = { + render: () => ( + + + Error field + + ), +}; diff --git a/src/app/ui/components/input/input.tsx b/src/app/ui/components/input/input.tsx new file mode 100644 index 00000000000..7913408d99d --- /dev/null +++ b/src/app/ui/components/input/input.tsx @@ -0,0 +1,163 @@ +import { + type ComponentProps, + createContext, + forwardRef, + useContext, + useImperativeHandle, + useRef, + useState, +} from 'react'; + +import { sva } from 'leather-styles/css'; +import { SystemStyleObject } from 'leather-styles/types'; + +import { useOnMount } from '@app/common/hooks/use-on-mount'; +import { createStyleContext } from '@app/ui/utils/style-context'; + +const hackyDelayOneMs = 1; + +const transformedLabelStyles: SystemStyleObject = { + textStyle: 'label.03', + transform: 'translateY(-12px)', + fontWeight: 500, +}; + +const input = sva({ + slots: ['root', 'label', 'input'], + base: { + root: { + display: 'block', + pos: 'relative', + minHeight: '64px', + p: 'space.04', + ring: 'none', + textStyle: 'body.02', + minW: '220px', + zIndex: 4, + color: 'accent.text-subdued', + _before: { + content: '""', + // TODO: outdated design system file + rounded: '2px', + pos: 'absolute', + top: 0, + left: 0, + right: 0, + bottom: 0, + border: 'default', + borderColor: 'accent.border-hover', + }, + '&[data-has-error]': { + color: 'error.label', + _before: { + borderColor: 'error.label', + borderWidth: '2px', + }, + }, + // Move the input's label to the top when the input has a value + '&[data-has-value="true"] label': transformedLabelStyles, + _focusWithin: { + '& label': { color: 'accent.text-primary', ...transformedLabelStyles }, + _before: { + border: 'action', + borderWidth: '2px', + }, + }, + }, + input: { + background: 'transparent', + appearance: 'none', + pos: 'absolute', + pt: '22px', + pb: '4px', + px: 'space.04', + top: 0, + left: 0, + right: 0, + bottom: 0, + zIndex: 5, + textStyle: 'body.01', + color: 'accent.text-primary', + _disabled: { + bg: 'accent.background-secondary', + cursor: 'not-allowed', + }, + _focus: { ring: 'none' }, + '&:placeholder-shown + label': transformedLabelStyles, + }, + label: { + pointerEvents: 'none', + pos: 'absolute', + top: '36%', + left: 'space.04', + zIndex: 9, + color: 'inherit', + textStyle: 'body.02', + transition: 'all 100ms ease-in-out', + }, + }, +}); + +const { withProvider, withContext } = createStyleContext(input); + +const InputContext = createContext( + null +); + +function useInputContext() { + const context = useContext(InputContext); + if (!context) throw new Error('useInputContext must be used within an Input.Root'); + return context; +} + +const RootBase = withProvider('div', 'root'); + +function Root(props: ComponentProps<'div'>) { + const [hasValue, setHasValue] = useState(false); + return ( + + + + ); +} + +const FieldBase = withContext('input', 'input'); + +const Field = forwardRef((props: ComponentProps<'input'>, ref) => { + const { setHasValue } = useInputContext(); + const innerRef = useRef(null); + + useImperativeHandle(ref, () => innerRef.current); + + // We need to determine whether the input has a value on it's initial + // render. In many places we use Formik to apply default form values. + // Formik sets these values after the initial render, so we need to wait + // before doing this check to see if there's a value. + useOnMount( + () => + void setTimeout(() => { + if (innerRef.current?.value !== '') setHasValue(true); + }, hackyDelayOneMs) + ); + + return ( + { + // Note: this logic to determine if the field is empty may have to be + // made dynamic to `input=type`, and potentially made configurable with + // a callback passed to `Input.Root` e.g. + // ``` + // typeof value === 'number' && value <= 0} /> + // ``` + if (e.target instanceof HTMLInputElement) setHasValue(e.target.value !== ''); + props.onInput?.(e); + }} + /> + ); +}); + +const Label = withContext('label', 'label'); + +export const Input = { Root, Field, Label }; diff --git a/src/app/ui/utils/style-context.tsx b/src/app/ui/utils/style-context.tsx new file mode 100644 index 00000000000..8cba84f2665 --- /dev/null +++ b/src/app/ui/utils/style-context.tsx @@ -0,0 +1,70 @@ +import { + ComponentProps, + ElementType, + JSX, + createContext, + createElement, + forwardRef, + useContext, +} from 'react'; + +// Copied from Panda docs. This logic is needed when composing together sva +// components, so they can share style state between slots. +// https://panda-css.com/docs/concepts/slot-recipes#styling-jsx-compound-components +type GenericProps = Record; +interface StyleRecipe { + (props?: GenericProps): Record; + splitVariantProps(props: GenericProps): any; +} +type StyleSlot = keyof ReturnType; +type StyleSlotRecipe = Record, string>; +type StyleVariantProps = Parameters[0]; +type CombineProps = Omit & U; + +const cx = (...args: (string | undefined)[]) => args.filter(Boolean).join(' '); + +interface ComponentVariants { + (props: CombineProps, StyleVariantProps>): JSX.Element; +} + +export const createStyleContext = (recipe: R) => { + const StyleContext = createContext | null>(null); + + const withProvider = ( + Component: T, + slot?: StyleSlot + ): ComponentVariants => { + const StyledComponent = forwardRef((props: ComponentProps, ref) => { + const [variantProps, otherProps] = recipe.splitVariantProps(props); + const slotStyles = recipe(variantProps) as StyleSlotRecipe; + return ( + + + + ); + }); + return StyledComponent as unknown as ComponentVariants; + }; + + const withContext = (Component: T, slot?: StyleSlot): T => { + if (!slot) return Component; + const StyledComponent = forwardRef((props: ComponentProps, ref) => { + const slotStyles = useContext(StyleContext); + return createElement(Component, { + ...props, + className: cx(slotStyles?.[slot ?? ''], props.className), + ref, + }); + }); + return StyledComponent as unknown as T; + }; + + return { + withProvider, + withContext, + }; +}; diff --git a/yarn.lock b/yarn.lock index f80eb53952f..175a983a6e1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2674,37 +2674,38 @@ dependencies: "@octokit/openapi-types" "^19.1.0" -"@pandacss/config@0.26.2", "@pandacss/config@^0.26.2": - version "0.26.2" - resolved "https://registry.yarnpkg.com/@pandacss/config/-/config-0.26.2.tgz#b235dd1847404670a6183d4da6766c70b41ca5cc" - integrity sha512-KG2UsDkspikdLDvDXDA6ieBm5ux4OOtQxMfrt2UM2DQUCxLijfqAcqdu0PnL7cCwironDWOZ/R/oRbzaRdbhAQ== - dependencies: - "@pandacss/error" "0.26.2" - "@pandacss/logger" "0.26.2" - "@pandacss/preset-base" "0.26.2" - "@pandacss/preset-panda" "0.26.2" - "@pandacss/shared" "0.26.2" - "@pandacss/types" "0.26.2" +"@pandacss/config@0.27.1", "@pandacss/config@^0.27.1": + version "0.27.1" + resolved "https://registry.yarnpkg.com/@pandacss/config/-/config-0.27.1.tgz#48376a8ab342d0e6f91fcd65d9df788c4ae06064" + integrity sha512-Q6I/kmVYHuYrJ7FmMtz0pAVn2GpRvR5i/RXahgxyvyYg+VsnazD+sxdGKC3JVX1x3SAHPzsB/iYi8DMuUfnqzQ== + dependencies: + "@pandacss/error" "0.27.1" + "@pandacss/logger" "0.27.1" + "@pandacss/preset-base" "0.27.1" + "@pandacss/preset-panda" "0.27.1" + "@pandacss/shared" "0.27.1" + "@pandacss/types" "0.27.1" bundle-n-require "^1.0.1" escalade "3.1.1" - jiti "^1.19.1" merge-anything "^5.1.7" microdiff "^1.3.2" typescript "^5.3.3" -"@pandacss/core@0.26.2", "@pandacss/core@^0.26.2": - version "0.26.2" - resolved "https://registry.yarnpkg.com/@pandacss/core/-/core-0.26.2.tgz#15e73ee09585391cbc5fcb5b447c42886d65465e" - integrity sha512-b9t8iNaX1zO90rikwLTr5hQxF5Z7U2AUIpzmCu2BaIV/C5ne5i9V+1bPghI2ox6+DYnBHH4wRLfB6toBsIxtVw== - dependencies: - "@pandacss/error" "0.26.2" - "@pandacss/is-valid-prop" "^0.26.2" - "@pandacss/logger" "0.26.2" - "@pandacss/shared" "0.26.2" - "@pandacss/token-dictionary" "0.26.2" - "@pandacss/types" "0.26.2" +"@pandacss/core@0.27.1", "@pandacss/core@^0.27.1": + version "0.27.1" + resolved "https://registry.yarnpkg.com/@pandacss/core/-/core-0.27.1.tgz#b5799085fd1547e51e6fe43bb3582dc8e2ba4ad9" + integrity sha512-+LEseOVWuB0rD37CuJNcAXcyONs2aBgyO2DRwsShwfmUk0fA4yhYHd+Cm+v7q9fMAoExt2RSVcK0cSJ6AymrjA== + dependencies: + "@pandacss/error" "0.27.1" + "@pandacss/is-valid-prop" "^0.27.1" + "@pandacss/logger" "0.27.1" + "@pandacss/shared" "0.27.1" + "@pandacss/token-dictionary" "0.27.1" + "@pandacss/types" "0.27.1" autoprefixer "10.4.15" + browserslist "^4.22.2" hookable "5.5.3" + lightningcss "^1.22.1" lodash.merge "4.6.2" outdent " ^0.8.0" postcss "^8.4.31" @@ -2717,82 +2718,83 @@ postcss-selector-parser "^6.0.13" ts-pattern "5.0.5" -"@pandacss/dev@0.26.2": - version "0.26.2" - resolved "https://registry.yarnpkg.com/@pandacss/dev/-/dev-0.26.2.tgz#2b6ddb1f9486463f82ce0c1ffd9757a3087ef3b9" - integrity sha512-g6ndBd4AgikOMDS8eUrPqmvXPlxpAaD8BQyLGeFJojWsYlcQ0C4DwjzmEDUvij2jr22kAtm5gs9iUEpuCmZ6Tw== +"@pandacss/dev@0.27.1": + version "0.27.1" + resolved "https://registry.yarnpkg.com/@pandacss/dev/-/dev-0.27.1.tgz#1650cbd96a5ddd2864a4c861ba9f0be1d6bc4b26" + integrity sha512-Nd75L1RtVLafLCHq/USmcvUCynEhwuStRTxzW0bJUg8bOtr1lLQxCTuu4SCUNUzPmxtuviF5LCq2LxVmqw2H0w== dependencies: "@clack/prompts" "^0.6.3" - "@pandacss/config" "0.26.2" - "@pandacss/error" "0.26.2" - "@pandacss/logger" "0.26.2" - "@pandacss/node" "0.26.2" - "@pandacss/postcss" "0.26.2" - "@pandacss/preset-panda" "0.26.2" - "@pandacss/shared" "0.26.2" - "@pandacss/token-dictionary" "0.26.2" - "@pandacss/types" "0.26.2" + "@pandacss/config" "0.27.1" + "@pandacss/error" "0.27.1" + "@pandacss/logger" "0.27.1" + "@pandacss/node" "0.27.1" + "@pandacss/postcss" "0.27.1" + "@pandacss/preset-panda" "0.27.1" + "@pandacss/shared" "0.27.1" + "@pandacss/token-dictionary" "0.27.1" + "@pandacss/types" "0.27.1" cac "6.7.14" - pathe "1.1.1" + pathe "1.1.2" -"@pandacss/error@0.26.2": - version "0.26.2" - resolved "https://registry.yarnpkg.com/@pandacss/error/-/error-0.26.2.tgz#d5c302741aff2d302fde307b42bc6b7313e7e471" - integrity sha512-tDRU9nuIFWzOIw78O3f+7yb0ulWwbLhgL3OyL0fE74EoD6bgiyV8NQWoVHC1Xw5TyT+81+3ir/ZCLmksJwvnjg== +"@pandacss/error@0.27.1": + version "0.27.1" + resolved "https://registry.yarnpkg.com/@pandacss/error/-/error-0.27.1.tgz#886bbcd7c4efc552d42744ac17f2e70f7cd1ab4d" + integrity sha512-oNO7Ydy3fy/PINznK9+WfrCqQbWKu9nhJUguOKBBfw9tkOG3vhnWsGHjBLRE1lP7IfM80d0usJ0tX3KYjaSdAg== -"@pandacss/extractor@0.26.2": - version "0.26.2" - resolved "https://registry.yarnpkg.com/@pandacss/extractor/-/extractor-0.26.2.tgz#093f7c7901df96622620f262e913f6d31a593e19" - integrity sha512-UOlZK3wb1p0fh5Do7RcQiCLfPkijXzWH6v7h9Evm7fWWEgLy95EIQjeTwc3C6sZvYeRUmmimb11oWccI9kzRiw== +"@pandacss/extractor@0.27.1": + version "0.27.1" + resolved "https://registry.yarnpkg.com/@pandacss/extractor/-/extractor-0.27.1.tgz#c80a9d6b0f60595a776c9750e56d388542c3164b" + integrity sha512-Qh/tPrjqoJ/RUgV+urPbHwKWgkYsdIzyZvTQSWUkihXCF7Q97LWEOQrKSg0tmckF12Ixgk8Ew3I+8LfmWSH/Ug== dependencies: ts-evaluator "^1.1.0" ts-morph "19.0.0" -"@pandacss/generator@0.26.2": - version "0.26.2" - resolved "https://registry.yarnpkg.com/@pandacss/generator/-/generator-0.26.2.tgz#0007450ee88b1d4f8ede214bd299223d6197aed0" - integrity sha512-g9iBhM85Cj4aoooH4D+qx2Gx4tGmQfKRE5ArE/9KcG1qzFofOqd7rnnDkwiiB4aAMibNl30Lsgdu49r9UQLglw== - dependencies: - "@pandacss/core" "0.26.2" - "@pandacss/is-valid-prop" "^0.26.2" - "@pandacss/logger" "0.26.2" - "@pandacss/shared" "0.26.2" - "@pandacss/token-dictionary" "0.26.2" - "@pandacss/types" "0.26.2" +"@pandacss/generator@0.27.1": + version "0.27.1" + resolved "https://registry.yarnpkg.com/@pandacss/generator/-/generator-0.27.1.tgz#af5010bfb5adcff26419cbc2b21e4b884461a3cd" + integrity sha512-Xf0f3vbtbN60tvhXHi7cyVZEilZLdIZpM7zzIZtbKoeEn4owCk2z1Y/cATyMYyRaBBmBEjfwL49/cwnxNsGFXQ== + dependencies: + "@pandacss/core" "0.27.1" + "@pandacss/is-valid-prop" "^0.27.1" + "@pandacss/logger" "0.27.1" + "@pandacss/shared" "0.27.1" + "@pandacss/token-dictionary" "0.27.1" + "@pandacss/types" "0.27.1" javascript-stringify "2.1.0" outdent " ^0.8.0" pluralize "8.0.0" postcss "^8.4.31" ts-pattern "5.0.5" -"@pandacss/is-valid-prop@^0.26.2": - version "0.26.2" - resolved "https://registry.yarnpkg.com/@pandacss/is-valid-prop/-/is-valid-prop-0.26.2.tgz#d4d97e54272754fa6f7ca7a656fbdcf4e7ea8f65" - integrity sha512-W0OEs7jyN7EHeeczJMnVC0pNvjyQvyELGVeWlP98byred4eiXDZM9390FVyok4MUxPyEGe+Mi6mSLZPwVZT/kQ== +"@pandacss/is-valid-prop@^0.27.1": + version "0.27.1" + resolved "https://registry.yarnpkg.com/@pandacss/is-valid-prop/-/is-valid-prop-0.27.1.tgz#a39bc21815f6ffcac02a94fd424eb47a81f8454e" + integrity sha512-jPtBBqsKxUCGOYIOZCgVHu2CzTexSYl5FDLgl52fIYYYiWJ4smYbYaqYpgkKLs+1XMjiYXK79XZnL8gNb+baPQ== -"@pandacss/logger@0.26.2": - version "0.26.2" - resolved "https://registry.yarnpkg.com/@pandacss/logger/-/logger-0.26.2.tgz#6b9215d0c18cf00c48f6d80e9a94b7f11199c417" - integrity sha512-VXp/zjCymsVLO8rOy8MAuaj91tw481NaJxNaSTxtuy4GCSAgybWybLbcQDL1VctTZV26kL9hPwpRmvT0hJv1cw== +"@pandacss/logger@0.27.1": + version "0.27.1" + resolved "https://registry.yarnpkg.com/@pandacss/logger/-/logger-0.27.1.tgz#f53b79fd826154b05f408f6acfc76ca5c6e79518" + integrity sha512-+dX+k8YAGTXQVu7WGI8JwV+7w7lo8MDzNSsESK/HoDQelqXNauZJ/xJqDKIdIrbqIrUY8tYpWEB8xAAXQ9SIrg== dependencies: kleur "^4.1.5" lil-fp "1.4.5" -"@pandacss/node@0.26.2": - version "0.26.2" - resolved "https://registry.yarnpkg.com/@pandacss/node/-/node-0.26.2.tgz#0de887d36d1e629093fe6b47bd450065d7620a4c" - integrity sha512-07cbfT5vq155ThjVuThXBJRPZgOXXDg+ka5b9ZHzmX/fmQlf5C5r16ytps9G6vp9g/A5ihvB3F+pVdvt4RuyIw== - dependencies: - "@pandacss/config" "0.26.2" - "@pandacss/core" "0.26.2" - "@pandacss/error" "0.26.2" - "@pandacss/extractor" "0.26.2" - "@pandacss/generator" "0.26.2" - "@pandacss/logger" "0.26.2" - "@pandacss/parser" "0.26.2" - "@pandacss/shared" "0.26.2" - "@pandacss/token-dictionary" "0.26.2" - "@pandacss/types" "0.26.2" +"@pandacss/node@0.27.1": + version "0.27.1" + resolved "https://registry.yarnpkg.com/@pandacss/node/-/node-0.27.1.tgz#79a93993f4fa89e3898539b167959f83723eb726" + integrity sha512-DRGKnGqg5JcBvzN8z/Cv+jwiSMm+UTfRD10ReH+rYUX4niRI16iQx4QP2fpPqTkP7auoZjBhPpKdmBOTpDiBRw== + dependencies: + "@pandacss/config" "0.27.1" + "@pandacss/core" "0.27.1" + "@pandacss/error" "0.27.1" + "@pandacss/extractor" "0.27.1" + "@pandacss/generator" "0.27.1" + "@pandacss/logger" "0.27.1" + "@pandacss/parser" "0.27.1" + "@pandacss/shared" "0.27.1" + "@pandacss/token-dictionary" "0.27.1" + "@pandacss/types" "0.27.1" + browserslist "^4.22.2" chokidar "^3.5.3" fast-glob "^3.3.1" file-size "^1.0.0" @@ -2815,62 +2817,62 @@ ts-pattern "5.0.5" tsconfck "^2.1.2" -"@pandacss/parser@0.26.2": - version "0.26.2" - resolved "https://registry.yarnpkg.com/@pandacss/parser/-/parser-0.26.2.tgz#b289e51ff0e2bf6d1d539851228f4488e5184267" - integrity sha512-jzZV/yVFlYMpwIQWnAurgHLAIdUADC1saPSVls/Q8AenIouJdiKEwnoBjr5RcDLuely0Fez8Xbax3NkDcg2uMg== - dependencies: - "@pandacss/config" "^0.26.2" - "@pandacss/core" "^0.26.2" - "@pandacss/extractor" "0.26.2" - "@pandacss/logger" "0.26.2" - "@pandacss/shared" "0.26.2" - "@pandacss/types" "0.26.2" +"@pandacss/parser@0.27.1": + version "0.27.1" + resolved "https://registry.yarnpkg.com/@pandacss/parser/-/parser-0.27.1.tgz#ad686c4da52cb288d0eff685fbc10cae3179cbba" + integrity sha512-BgXVQl01dCeNu16bZTZ3xRutQoeMeeV2CL8slPYzCkRsdgtvsWXA8SW9omjH5frdd4VNMuzdS2twy76YTGyh6w== + dependencies: + "@pandacss/config" "^0.27.1" + "@pandacss/core" "^0.27.1" + "@pandacss/extractor" "0.27.1" + "@pandacss/logger" "0.27.1" + "@pandacss/shared" "0.27.1" + "@pandacss/types" "0.27.1" "@vue/compiler-sfc" "3.3.4" magic-string "0.30.5" ts-morph "19.0.0" ts-pattern "5.0.5" -"@pandacss/postcss@0.26.2": - version "0.26.2" - resolved "https://registry.yarnpkg.com/@pandacss/postcss/-/postcss-0.26.2.tgz#1e25256e5ba12db13f017e3a0012e7e3007ea408" - integrity sha512-DSyHxvu+ILCytleib9a2+0nKNd6KvOA4f02qH96B/GNl4PmzNWzh7QrKRaUPiGuIN5J4xXWgHTz5Q5hsnjQ+bg== +"@pandacss/postcss@0.27.1": + version "0.27.1" + resolved "https://registry.yarnpkg.com/@pandacss/postcss/-/postcss-0.27.1.tgz#429fac1d2974f421d10af9e6e20a6c290ec9d416" + integrity sha512-C+k7VJvNmhGmhPTAvlTzJrN01i7gBTk9WP0MfamYbLCKXQEZSlffnlxDrFxfVs+f2RcT/cpTF5VlwDHPEvqnvQ== dependencies: - "@pandacss/node" "0.26.2" + "@pandacss/node" "0.27.1" postcss "^8.4.31" -"@pandacss/preset-base@0.26.2": - version "0.26.2" - resolved "https://registry.yarnpkg.com/@pandacss/preset-base/-/preset-base-0.26.2.tgz#6bdaffd6ac0604169207ab43a09569a1c65979a7" - integrity sha512-icasgvx/N2sAF8U4MS/YxzQAwVjlr7/u4tM0W1nD2kWlhzTUuW3wGtz2hMeh8xmPZnAzy748kCASmTKgEXLmuA== +"@pandacss/preset-base@0.27.1": + version "0.27.1" + resolved "https://registry.yarnpkg.com/@pandacss/preset-base/-/preset-base-0.27.1.tgz#b7c0af468c04efacfbe03efc928de9b775b46866" + integrity sha512-NsjqmXFhp6iohoj/QxvW19T/7gspJvpDtwNvGta9QGEm0qcjmI4+ju0Opxe0lI1a8xhdBgufnSaBaaJSIyiUSg== dependencies: - "@pandacss/types" "0.26.2" + "@pandacss/types" "0.27.1" -"@pandacss/preset-panda@0.26.2": - version "0.26.2" - resolved "https://registry.yarnpkg.com/@pandacss/preset-panda/-/preset-panda-0.26.2.tgz#e7f77a616831edf3135618688fa699314c65e3cc" - integrity sha512-l+V9zTw2JfHy95qLIZLiz/sWb+ftBGGM5jg/sKIbC4BvK4uHglqpRbLiY9K4d39BIS+gBA9sWB021n3pSwdi9Q== +"@pandacss/preset-panda@0.27.1": + version "0.27.1" + resolved "https://registry.yarnpkg.com/@pandacss/preset-panda/-/preset-panda-0.27.1.tgz#f9d4fa8a9bd54fa6818dc20dccdf2e74c5d7da4a" + integrity sha512-KBRTj6Z799UpP4j5IV1K3fQINa+DQcnFZUhAWiPPMT7rY7cBQKdvN7EYi903NTq9jJ8p9qf3ziOxa+eOY8zVrQ== dependencies: - "@pandacss/types" "0.26.2" + "@pandacss/types" "0.27.1" -"@pandacss/shared@0.26.2": - version "0.26.2" - resolved "https://registry.yarnpkg.com/@pandacss/shared/-/shared-0.26.2.tgz#5bd34ccca3134ce34091ef5ee1fda0cda3891c8a" - integrity sha512-pYmAIR2HHaRDpRQIeD5kgH72BVbgb0AYYpURZdGCf2d9WfJEJViGZlU3nB5pO1j8FG0FNpHdDEIFPHAcPk62qA== +"@pandacss/shared@0.27.1": + version "0.27.1" + resolved "https://registry.yarnpkg.com/@pandacss/shared/-/shared-0.27.1.tgz#8ec2cb6f71f8860174b6043bc2d3fc86a1055e47" + integrity sha512-hopFUhgq4tGca/08cyZqjEUyUZQcVYHIhRctpX9cV0792yipMO1jPXqbMxTDqJrwCjzOnE0RQNbetsHgXpp0bQ== -"@pandacss/token-dictionary@0.26.2": - version "0.26.2" - resolved "https://registry.yarnpkg.com/@pandacss/token-dictionary/-/token-dictionary-0.26.2.tgz#3246ba2651485de6cbdbfd06f87c42b34eee5b8b" - integrity sha512-5UNdG/KYtpQlFM/0MJv6Jc9ugTyboh8Fa6Ss7ReFZJr7MrvU5dAoLM5IzBktu1hcrhyos2UJFW3g6LBV4XRw/Q== +"@pandacss/token-dictionary@0.27.1": + version "0.27.1" + resolved "https://registry.yarnpkg.com/@pandacss/token-dictionary/-/token-dictionary-0.27.1.tgz#66b2d8b662dc32f86f24f34615b297fd914baf80" + integrity sha512-0oZ3dMraTBp3Qq/BM0Z8ddfeu4xj2z+8NJ042y3ENLfYceBJiQEI+8sQI4neh31YpoAeyNf1Kl+IL9RwDt3gNA== dependencies: - "@pandacss/shared" "0.26.2" - "@pandacss/types" "0.26.2" + "@pandacss/shared" "0.27.1" + "@pandacss/types" "0.27.1" ts-pattern "5.0.5" -"@pandacss/types@0.26.2": - version "0.26.2" - resolved "https://registry.yarnpkg.com/@pandacss/types/-/types-0.26.2.tgz#40f001ff16ac350f256038ad487d3595dae7f20e" - integrity sha512-jLDeTOt3QsHeC3qPod5a0HMGOlLlVzxGIw/uWuwBlVOPFyJ5FAPYYX0+J4ryyy9CObw0YtP6TS5WbvSsxKfZwQ== +"@pandacss/types@0.27.1": + version "0.27.1" + resolved "https://registry.yarnpkg.com/@pandacss/types/-/types-0.27.1.tgz#a10c62f6dd4a85c9ec9bc08b3e7cc190bf901538" + integrity sha512-7PGSvxOwFrKtqHJ9K4JPRk081xnjnW/lE9TIHZm3tHZmdKl7oOtJQs7j9syf1cksl0w66YwEIxeYTcaFJ9KdBw== "@pkgjs/parseargs@^0.11.0": version "0.11.0" @@ -11014,6 +11016,11 @@ detect-indent@^6.1.0: resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-6.1.0.tgz#592485ebbbf6b3b1ab2be175c8393d04ca0d57e6" integrity sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA== +detect-libc@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b" + integrity sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg== + detect-libc@^2.0.0: version "2.0.2" resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.2.tgz#8ccf2ba9315350e1241b88d0ac3b0e1fbd99605d" @@ -14252,7 +14259,7 @@ jest-worker@^29.7.0: merge-stream "^2.0.0" supports-color "^8.0.0" -jiti@^1.19.1, jiti@^1.20.0: +jiti@^1.20.0: version "1.21.0" resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.0.tgz#7c97f8fe045724e136a397f7340475244156105d" integrity sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q== @@ -14707,6 +14714,68 @@ lighthouse-logger@^1.0.0: debug "^2.6.9" marky "^1.2.2" +lightningcss-darwin-arm64@1.23.0: + version "1.23.0" + resolved "https://registry.yarnpkg.com/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.23.0.tgz#11780f37158a458cead5e89202f74cd99b926e36" + integrity sha512-kl4Pk3Q2lnE6AJ7Qaij47KNEfY2/UXRZBT/zqGA24B8qwkgllr/j7rclKOf1axcslNXvvUdztjo4Xqh39Yq1aA== + +lightningcss-darwin-x64@1.23.0: + version "1.23.0" + resolved "https://registry.yarnpkg.com/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.23.0.tgz#8394edaa04f0984b971eab42b6f68edb1258b3ed" + integrity sha512-KeRFCNoYfDdcolcFXvokVw+PXCapd2yHS1Diko1z1BhRz/nQuD5XyZmxjWdhmhN/zj5sH8YvWsp0/lPLVzqKpg== + +lightningcss-freebsd-x64@1.23.0: + version "1.23.0" + resolved "https://registry.yarnpkg.com/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.23.0.tgz#d3f6faddc424f17ed046e8be9ca97868a5f804ed" + integrity sha512-xhnhf0bWPuZxcqknvMDRFFo2TInrmQRWZGB0f6YoAsZX8Y+epfjHeeOIGCfAmgF0DgZxHwYc8mIR5tQU9/+ROA== + +lightningcss-linux-arm-gnueabihf@1.23.0: + version "1.23.0" + resolved "https://registry.yarnpkg.com/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.23.0.tgz#040e9718c9a9dc088322da33983a894564ffcb10" + integrity sha512-fBamf/bULvmWft9uuX+bZske236pUZEoUlaHNBjnueaCTJ/xd8eXgb0cEc7S5o0Nn6kxlauMBnqJpF70Bgq3zg== + +lightningcss-linux-arm64-gnu@1.23.0: + version "1.23.0" + resolved "https://registry.yarnpkg.com/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.23.0.tgz#05cfcfa2cf47a042ca11cfce520ae9f91e4efcdb" + integrity sha512-RS7sY77yVLOmZD6xW2uEHByYHhQi5JYWmgVumYY85BfNoVI3DupXSlzbw+b45A9NnVKq45+oXkiN6ouMMtTwfg== + +lightningcss-linux-arm64-musl@1.23.0: + version "1.23.0" + resolved "https://registry.yarnpkg.com/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.23.0.tgz#3212a10dff37c70808113fbcf7cbd1b63c6cbc6f" + integrity sha512-cU00LGb6GUXCwof6ACgSMKo3q7XYbsyTj0WsKHLi1nw7pV0NCq8nFTn6ZRBYLoKiV8t+jWl0Hv8KkgymmK5L5g== + +lightningcss-linux-x64-gnu@1.23.0: + version "1.23.0" + resolved "https://registry.yarnpkg.com/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.23.0.tgz#3b27da32889285b1c5de3f26094ee234054634fc" + integrity sha512-q4jdx5+5NfB0/qMbXbOmuC6oo7caPnFghJbIAV90cXZqgV8Am3miZhC4p+sQVdacqxfd+3nrle4C8icR3p1AYw== + +lightningcss-linux-x64-musl@1.23.0: + version "1.23.0" + resolved "https://registry.yarnpkg.com/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.23.0.tgz#ad65b5a944f10d966cc10070bf20f81ddadd4240" + integrity sha512-G9Ri3qpmF4qef2CV/80dADHKXRAQeQXpQTLx7AiQrBYQHqBjB75oxqj06FCIe5g4hNCqLPnM9fsO4CyiT1sFSQ== + +lightningcss-win32-x64-msvc@1.23.0: + version "1.23.0" + resolved "https://registry.yarnpkg.com/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.23.0.tgz#62f3f619a7bb44f8713973103fbe1bcbd9d455f9" + integrity sha512-1rcBDJLU+obPPJM6qR5fgBUiCdZwZLafZM5f9kwjFLkb/UBNIzmae39uCSmh71nzPCTXZqHbvwu23OWnWEz+eg== + +lightningcss@^1.22.1: + version "1.23.0" + resolved "https://registry.yarnpkg.com/lightningcss/-/lightningcss-1.23.0.tgz#58c94a533d02d8416d4f2ec9ab87641f61943c78" + integrity sha512-SEArWKMHhqn/0QzOtclIwH5pXIYQOUEkF8DgICd/105O+GCgd7jxjNod/QPnBCSWvpRHQBGVz5fQ9uScby03zA== + dependencies: + detect-libc "^1.0.3" + optionalDependencies: + lightningcss-darwin-arm64 "1.23.0" + lightningcss-darwin-x64 "1.23.0" + lightningcss-freebsd-x64 "1.23.0" + lightningcss-linux-arm-gnueabihf "1.23.0" + lightningcss-linux-arm64-gnu "1.23.0" + lightningcss-linux-arm64-musl "1.23.0" + lightningcss-linux-x64-gnu "1.23.0" + lightningcss-linux-x64-musl "1.23.0" + lightningcss-win32-x64-msvc "1.23.0" + lil-fp@1.4.5: version "1.4.5" resolved "https://registry.yarnpkg.com/lil-fp/-/lil-fp-1.4.5.tgz#4a188d41f92ebec7f0d1a43fd3eaa542593edd0b" @@ -16299,7 +16368,12 @@ path-type@^4.0.0: resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b" integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw== -pathe@1.1.1, pathe@^1.1.0, pathe@^1.1.1: +pathe@1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/pathe/-/pathe-1.1.2.tgz#6c4cb47a945692e48a1ddd6e4094d170516437ec" + integrity sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ== + +pathe@^1.1.0, pathe@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/pathe/-/pathe-1.1.1.tgz#1dd31d382b974ba69809adc9a7a347e65d84829a" integrity sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q== From f6bad6af32342b764aca85f18f609e4c8b1986a0 Mon Sep 17 00:00:00 2001 From: kyranjamie Date: Thu, 18 Jan 2024 13:49:45 -0300 Subject: [PATCH 2/4] chore: improve styles, try mnemonic --- package.json | 3 +- src/app/common/utils.ts | 5 + .../mnemonic-key/mnemonic-input-field.tsx | 101 ------ .../mnemonic-key/mnemonic-word-input.tsx | 63 ++-- .../components/password-field.tsx | 44 ++- src/app/ui/components/input/input.stories.tsx | 23 +- src/app/ui/components/input/input.tsx | 110 ++++-- src/shared/utils.ts | 4 + yarn.lock | 316 +++++++----------- 9 files changed, 293 insertions(+), 376 deletions(-) delete mode 100644 src/app/components/secret-key/mnemonic-key/mnemonic-input-field.tsx diff --git a/package.json b/package.json index c5c841649a7..742d2d76b83 100644 --- a/package.json +++ b/package.json @@ -241,9 +241,8 @@ "@actions/core": "1.10.1", "@btckit/types": "0.0.19", "@leather-wallet/prettier-config": "0.0.1", - "@leather-wallet/tokens": "0.0.5", "@ls-lint/ls-lint": "2.2.2", - "@pandacss/dev": "0.27.1", + "@pandacss/dev": "0.26.2", "@playwright/test": "1.40.1", "@pmmmwh/react-refresh-webpack-plugin": "0.5.11", "@redux-devtools/cli": "4.0.0", diff --git a/src/app/common/utils.ts b/src/app/common/utils.ts index 51ff3d352e1..8f7e1235e56 100644 --- a/src/app/common/utils.ts +++ b/src/app/common/utils.ts @@ -8,6 +8,7 @@ import { import { toUnicode } from 'punycode'; import { BitcoinChainConfig, BitcoinNetworkModes, KEBAB_REGEX } from '@shared/constants'; +import { isBoolean } from '@shared/utils'; export function createNullArrayOfLength(length: number) { return new Array(length).fill(null); @@ -314,3 +315,7 @@ export function removeTrailingNullCharacters(s: string) { export function removeMinusSign(value: string) { return value.replace('-', ''); } + +export function propIfDefined(prop: string, value: any) { + return isBoolean(value) ? { [prop]: value } : {}; +} diff --git a/src/app/components/secret-key/mnemonic-key/mnemonic-input-field.tsx b/src/app/components/secret-key/mnemonic-key/mnemonic-input-field.tsx deleted file mode 100644 index 19810f8b0ef..00000000000 --- a/src/app/components/secret-key/mnemonic-key/mnemonic-input-field.tsx +++ /dev/null @@ -1,101 +0,0 @@ -import { useState } from 'react'; - -import { TextField } from '@radix-ui/themes'; -import { useField } from 'formik'; -import { css } from 'leather-styles/css'; -import { FlexProps, styled } from 'leather-styles/jsx'; - -import { useIsFieldDirty } from '@app/common/form-utils'; - -interface InputFieldProps extends FlexProps { - dataTestId?: string; - name: string; - value: string; - onPaste(e: React.ClipboardEvent): void; - onUpdateWord(word: string): void; - hasError?: boolean; - wordlist: string[]; -} - -const psuedoBorderStyles = { - content: '""', - zIndex: 1, - top: 0, - right: 0, - bottom: 0, - left: 0, - background: 'transparent', - position: 'absolute', - border: '1px solid', - borderRadius: 'sm', -}; - -export function InputField({ dataTestId, name, onPaste, onChange, value }: InputFieldProps) { - const [field, meta] = useField(name); - const [isFocused, setIsFocused] = useState(false); - const isDirty = useIsFieldDirty(name); - return ( - - - {`${name}.`} - - setIsFocused(!isFocused)} - {...field} - value={value || field.value || ''} - // using onChangeCapture + onBlurCapture to keep Formik validation - onChangeCapture={onChange} - onBlurCapture={() => setIsFocused(!isFocused)} - onPaste={onPaste} - /> - - ); -} diff --git a/src/app/components/secret-key/mnemonic-key/mnemonic-word-input.tsx b/src/app/components/secret-key/mnemonic-key/mnemonic-word-input.tsx index f06ec9fa1d5..257d8a38bc4 100644 --- a/src/app/components/secret-key/mnemonic-key/mnemonic-word-input.tsx +++ b/src/app/components/secret-key/mnemonic-key/mnemonic-word-input.tsx @@ -1,8 +1,10 @@ -import { wordlist } from '@scure/bip39/wordlists/english'; +import { useState } from 'react'; -import { extractPhraseFromString } from '@app/common/utils'; +import { useField } from 'formik'; -import { InputField } from './mnemonic-input-field'; +import { useIsFieldDirty } from '@app/common/form-utils'; +import { extractPhraseFromString } from '@app/common/utils'; +import { Input } from '@app/ui/components/input/input'; interface MnemonicWordInputProps { fieldNumber: number; @@ -16,28 +18,41 @@ export function MnemonicWordInput({ onUpdateWord, onPasteEntireKey, }: MnemonicWordInputProps) { + const name = `${fieldNumber}`; + const [field, meta] = useField(name); + const [isFocused, setIsFocused] = useState(false); + const isDirty = useIsFieldDirty(name); return ( - { - const pasteValue = extractPhraseFromString(e.clipboardData.getData('text')); - if (pasteValue.includes(' ')) { + + setIsFocused(!isFocused)} + {...field} + value={value || field.value || ''} + // using onChangeCapture + onBlurCapture to keep Formik validation + onChangeCapture={(e: any) => { e.preventDefault(); - //assume its a full key - onPasteEntireKey(pasteValue); - } - }} - onChange={(e: any) => { - e.preventDefault(); - onUpdateWord(e.target.value); - }} - wordlist={wordlist} - value={value} - height="3rem" - /> + onUpdateWord(e.target.value); + }} + onBlurCapture={() => setIsFocused(!isFocused)} + onPaste={e => { + const pasteValue = extractPhraseFromString(e.clipboardData.getData('text')); + if (pasteValue.includes(' ')) { + e.preventDefault(); + //assume its a full key + onPasteEntireKey(pasteValue); + } + }} + /> + Word {fieldNumber} + ); } diff --git a/src/app/pages/onboarding/set-password/components/password-field.tsx b/src/app/pages/onboarding/set-password/components/password-field.tsx index ffdb59c97fb..bd7e0cef06c 100644 --- a/src/app/pages/onboarding/set-password/components/password-field.tsx +++ b/src/app/pages/onboarding/set-password/components/password-field.tsx @@ -7,6 +7,7 @@ import { Box, Flex, styled } from 'leather-styles/jsx'; import { ValidatedPassword } from '@app/common/validation/validate-password'; import { EyeIcon } from '@app/ui/components/icons/eye-icon'; import { EyeSlashIcon } from '@app/ui/components/icons/eye-slash-icon'; +import { Input } from '@app/ui/components/input/input'; import { Caption } from '@app/ui/components/typography/caption'; import { getIndicatorsOfPasswordStrength } from './password-field.utils'; @@ -28,38 +29,33 @@ export function PasswordField({ strengthResult, isDisabled }: PasswordFieldProps return ( <> - + + Password + + setShowPassword(!showPassword)} position="absolute" right="space.04" - top="20px" - transform="matrix(-1, 0, 0, 1, 0, 0)" + top="22px" type="button" width="20px" + zIndex={10} > {showPassword ? : } diff --git a/src/app/ui/components/input/input.stories.tsx b/src/app/ui/components/input/input.stories.tsx index 2c5b304b0ce..199aef5db32 100644 --- a/src/app/ui/components/input/input.stories.tsx +++ b/src/app/ui/components/input/input.stories.tsx @@ -29,11 +29,32 @@ export const Error: Story = { ), }; +export const Disabled: Story = { + render: () => ( + + Field is disabled + + + ), +}; + export const DefaultValue: Story = { render: () => ( Description - + + + ), +}; + +/** + * Layout needs to be adjusted in case where there's no label provided + * An example of this is our Secret Key input form + */ +export const InputNoLabel: Story = { + render: () => ( + + ), }; diff --git a/src/app/ui/components/input/input.tsx b/src/app/ui/components/input/input.tsx index 7913408d99d..90afff1870a 100644 --- a/src/app/ui/components/input/input.tsx +++ b/src/app/ui/components/input/input.tsx @@ -1,5 +1,6 @@ import { type ComponentProps, + LegacyRef, createContext, forwardRef, useContext, @@ -12,6 +13,7 @@ import { sva } from 'leather-styles/css'; import { SystemStyleObject } from 'leather-styles/types'; import { useOnMount } from '@app/common/hooks/use-on-mount'; +import { propIfDefined } from '@app/common/utils'; import { createStyleContext } from '@app/ui/utils/style-context'; const hackyDelayOneMs = 1; @@ -32,34 +34,31 @@ const input = sva({ p: 'space.04', ring: 'none', textStyle: 'body.02', - minW: '220px', zIndex: 4, color: 'accent.text-subdued', _before: { content: '""', - // TODO: outdated design system file - rounded: '2px', + rounded: 'xs', pos: 'absolute', - top: 0, - left: 0, - right: 0, - bottom: 0, - border: 'default', - borderColor: 'accent.border-hover', + top: '-1px', + left: '-1px', + right: '-1px', + bottom: '-1px', + border: '3px solid transparent', + zIndex: 9, + pointerEvents: 'none', }, - '&[data-has-error]': { - color: 'error.label', + _focusWithin: { + '& label': { color: 'accent.text-primary', ...transformedLabelStyles }, _before: { - borderColor: 'error.label', + border: 'action', borderWidth: '2px', }, }, - // Move the input's label to the top when the input has a value - '&[data-has-value="true"] label': transformedLabelStyles, - _focusWithin: { - '& label': { color: 'accent.text-primary', ...transformedLabelStyles }, + '&[data-has-error="true"]': { + color: 'error.label', _before: { - border: 'action', + borderColor: 'error.label', borderWidth: '2px', }, }, @@ -67,9 +66,8 @@ const input = sva({ input: { background: 'transparent', appearance: 'none', + rounded: 'xs', pos: 'absolute', - pt: '22px', - pb: '4px', px: 'space.04', top: 0, left: 0, @@ -78,12 +76,20 @@ const input = sva({ zIndex: 5, textStyle: 'body.01', color: 'accent.text-primary', + border: '1px solid', + borderColor: 'accent.border-hover', _disabled: { - bg: 'accent.background-secondary', + bg: 'accent.component-background-default', + borderColor: 'accent.non-interactive', cursor: 'not-allowed', }, _focus: { ring: 'none' }, + _placeholder: { color: 'accent.text-subdued' }, '&:placeholder-shown + label': transformedLabelStyles, + '[data-has-label="true"] &': { + pt: '22px', + pb: '4px', + }, }, label: { pointerEvents: 'none', @@ -93,16 +99,26 @@ const input = sva({ zIndex: 9, color: 'inherit', textStyle: 'body.02', - transition: 'all 100ms ease-in-out', + transition: 'font-size 100ms ease-in-out, transform 100ms ease-in-out', + // Move the input's label to the top when the input has a value + '[data-has-value="true"] &': transformedLabelStyles, + '[data-shrink="true"] &': transformedLabelStyles, }, }, }); +type InputChldren = 'root' | 'label' | 'input'; + const { withProvider, withContext } = createStyleContext(input); -const InputContext = createContext( - null -); +interface InputContextProps { + hasValue: boolean; + setHasValue(hasValue: boolean): void; + registerChild(child: string): void; + children: InputChldren[]; +} + +const InputContext = createContext(null); function useInputContext() { const context = useContext(InputContext); @@ -112,18 +128,39 @@ function useInputContext() { const RootBase = withProvider('div', 'root'); -function Root(props: ComponentProps<'div'>) { +interface RootProps extends ComponentProps<'div'> { + hasError?: boolean; + /** + * Display the label in a top fixed position. Often necessary when + * programmatically updating inputs, similar to issues described here + * https://mui.com/material-ui/react-text-field/#limitations + */ + shrink?: boolean; +} +function Root({ hasError, shrink, ...props }: RootProps) { const [hasValue, setHasValue] = useState(false); + const [children, setChildren] = useState(['root']); + + function registerChild(child: InputChldren) { + setChildren(children => [...children, child]); + } + + const dataAttrs = { + ...propIfDefined('data-has-error', hasError), + ...propIfDefined('data-shrink', shrink), + 'data-has-label': children.includes('label'), + }; + return ( - - + + ); } const FieldBase = withContext('input', 'input'); -const Field = forwardRef((props: ComponentProps<'input'>, ref) => { +const Field = forwardRef(({ type, ...props }: ComponentProps<'input'>, ref) => { const { setHasValue } = useInputContext(); const innerRef = useRef(null); @@ -140,9 +177,18 @@ const Field = forwardRef((props: ComponentProps<'input'>, ref) => { }, hackyDelayOneMs) ); + // `type=number` is bad UX, instead we follow guidance here + // https://mui.com/material-ui/react-text-field/#type-quot-number-quot + // https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/ + const inputTypeProps = + type === 'number' + ? ({ type: 'text', inputMode: 'numeric', pattern: '[0-9]*' } as const) + : { type }; + return ( { // Note: this logic to determine if the field is empty may have to be @@ -158,6 +204,12 @@ const Field = forwardRef((props: ComponentProps<'input'>, ref) => { ); }); -const Label = withContext('label', 'label'); +const LabelBase = withContext('label', 'label'); + +const Label = forwardRef((props: ComponentProps<'label'>, ref: LegacyRef) => { + const { registerChild } = useInputContext(); + useOnMount(() => registerChild('label')); + return ; +}); export const Input = { Root, Field, Label }; diff --git a/src/shared/utils.ts b/src/shared/utils.ts index 125843d74df..34e35814db7 100644 --- a/src/shared/utils.ts +++ b/src/shared/utils.ts @@ -21,6 +21,10 @@ export function isFunction(value: unknown): value is () => void { return typeof value === 'function'; } +export function isBoolean(value: unknown): value is boolean { + return typeof value === 'boolean'; +} + export function isObject(value: unknown): value is object { return typeof value === 'object'; } diff --git a/yarn.lock b/yarn.lock index 175a983a6e1..f80eb53952f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2674,38 +2674,37 @@ dependencies: "@octokit/openapi-types" "^19.1.0" -"@pandacss/config@0.27.1", "@pandacss/config@^0.27.1": - version "0.27.1" - resolved "https://registry.yarnpkg.com/@pandacss/config/-/config-0.27.1.tgz#48376a8ab342d0e6f91fcd65d9df788c4ae06064" - integrity sha512-Q6I/kmVYHuYrJ7FmMtz0pAVn2GpRvR5i/RXahgxyvyYg+VsnazD+sxdGKC3JVX1x3SAHPzsB/iYi8DMuUfnqzQ== - dependencies: - "@pandacss/error" "0.27.1" - "@pandacss/logger" "0.27.1" - "@pandacss/preset-base" "0.27.1" - "@pandacss/preset-panda" "0.27.1" - "@pandacss/shared" "0.27.1" - "@pandacss/types" "0.27.1" +"@pandacss/config@0.26.2", "@pandacss/config@^0.26.2": + version "0.26.2" + resolved "https://registry.yarnpkg.com/@pandacss/config/-/config-0.26.2.tgz#b235dd1847404670a6183d4da6766c70b41ca5cc" + integrity sha512-KG2UsDkspikdLDvDXDA6ieBm5ux4OOtQxMfrt2UM2DQUCxLijfqAcqdu0PnL7cCwironDWOZ/R/oRbzaRdbhAQ== + dependencies: + "@pandacss/error" "0.26.2" + "@pandacss/logger" "0.26.2" + "@pandacss/preset-base" "0.26.2" + "@pandacss/preset-panda" "0.26.2" + "@pandacss/shared" "0.26.2" + "@pandacss/types" "0.26.2" bundle-n-require "^1.0.1" escalade "3.1.1" + jiti "^1.19.1" merge-anything "^5.1.7" microdiff "^1.3.2" typescript "^5.3.3" -"@pandacss/core@0.27.1", "@pandacss/core@^0.27.1": - version "0.27.1" - resolved "https://registry.yarnpkg.com/@pandacss/core/-/core-0.27.1.tgz#b5799085fd1547e51e6fe43bb3582dc8e2ba4ad9" - integrity sha512-+LEseOVWuB0rD37CuJNcAXcyONs2aBgyO2DRwsShwfmUk0fA4yhYHd+Cm+v7q9fMAoExt2RSVcK0cSJ6AymrjA== - dependencies: - "@pandacss/error" "0.27.1" - "@pandacss/is-valid-prop" "^0.27.1" - "@pandacss/logger" "0.27.1" - "@pandacss/shared" "0.27.1" - "@pandacss/token-dictionary" "0.27.1" - "@pandacss/types" "0.27.1" +"@pandacss/core@0.26.2", "@pandacss/core@^0.26.2": + version "0.26.2" + resolved "https://registry.yarnpkg.com/@pandacss/core/-/core-0.26.2.tgz#15e73ee09585391cbc5fcb5b447c42886d65465e" + integrity sha512-b9t8iNaX1zO90rikwLTr5hQxF5Z7U2AUIpzmCu2BaIV/C5ne5i9V+1bPghI2ox6+DYnBHH4wRLfB6toBsIxtVw== + dependencies: + "@pandacss/error" "0.26.2" + "@pandacss/is-valid-prop" "^0.26.2" + "@pandacss/logger" "0.26.2" + "@pandacss/shared" "0.26.2" + "@pandacss/token-dictionary" "0.26.2" + "@pandacss/types" "0.26.2" autoprefixer "10.4.15" - browserslist "^4.22.2" hookable "5.5.3" - lightningcss "^1.22.1" lodash.merge "4.6.2" outdent " ^0.8.0" postcss "^8.4.31" @@ -2718,83 +2717,82 @@ postcss-selector-parser "^6.0.13" ts-pattern "5.0.5" -"@pandacss/dev@0.27.1": - version "0.27.1" - resolved "https://registry.yarnpkg.com/@pandacss/dev/-/dev-0.27.1.tgz#1650cbd96a5ddd2864a4c861ba9f0be1d6bc4b26" - integrity sha512-Nd75L1RtVLafLCHq/USmcvUCynEhwuStRTxzW0bJUg8bOtr1lLQxCTuu4SCUNUzPmxtuviF5LCq2LxVmqw2H0w== +"@pandacss/dev@0.26.2": + version "0.26.2" + resolved "https://registry.yarnpkg.com/@pandacss/dev/-/dev-0.26.2.tgz#2b6ddb1f9486463f82ce0c1ffd9757a3087ef3b9" + integrity sha512-g6ndBd4AgikOMDS8eUrPqmvXPlxpAaD8BQyLGeFJojWsYlcQ0C4DwjzmEDUvij2jr22kAtm5gs9iUEpuCmZ6Tw== dependencies: "@clack/prompts" "^0.6.3" - "@pandacss/config" "0.27.1" - "@pandacss/error" "0.27.1" - "@pandacss/logger" "0.27.1" - "@pandacss/node" "0.27.1" - "@pandacss/postcss" "0.27.1" - "@pandacss/preset-panda" "0.27.1" - "@pandacss/shared" "0.27.1" - "@pandacss/token-dictionary" "0.27.1" - "@pandacss/types" "0.27.1" + "@pandacss/config" "0.26.2" + "@pandacss/error" "0.26.2" + "@pandacss/logger" "0.26.2" + "@pandacss/node" "0.26.2" + "@pandacss/postcss" "0.26.2" + "@pandacss/preset-panda" "0.26.2" + "@pandacss/shared" "0.26.2" + "@pandacss/token-dictionary" "0.26.2" + "@pandacss/types" "0.26.2" cac "6.7.14" - pathe "1.1.2" + pathe "1.1.1" -"@pandacss/error@0.27.1": - version "0.27.1" - resolved "https://registry.yarnpkg.com/@pandacss/error/-/error-0.27.1.tgz#886bbcd7c4efc552d42744ac17f2e70f7cd1ab4d" - integrity sha512-oNO7Ydy3fy/PINznK9+WfrCqQbWKu9nhJUguOKBBfw9tkOG3vhnWsGHjBLRE1lP7IfM80d0usJ0tX3KYjaSdAg== +"@pandacss/error@0.26.2": + version "0.26.2" + resolved "https://registry.yarnpkg.com/@pandacss/error/-/error-0.26.2.tgz#d5c302741aff2d302fde307b42bc6b7313e7e471" + integrity sha512-tDRU9nuIFWzOIw78O3f+7yb0ulWwbLhgL3OyL0fE74EoD6bgiyV8NQWoVHC1Xw5TyT+81+3ir/ZCLmksJwvnjg== -"@pandacss/extractor@0.27.1": - version "0.27.1" - resolved "https://registry.yarnpkg.com/@pandacss/extractor/-/extractor-0.27.1.tgz#c80a9d6b0f60595a776c9750e56d388542c3164b" - integrity sha512-Qh/tPrjqoJ/RUgV+urPbHwKWgkYsdIzyZvTQSWUkihXCF7Q97LWEOQrKSg0tmckF12Ixgk8Ew3I+8LfmWSH/Ug== +"@pandacss/extractor@0.26.2": + version "0.26.2" + resolved "https://registry.yarnpkg.com/@pandacss/extractor/-/extractor-0.26.2.tgz#093f7c7901df96622620f262e913f6d31a593e19" + integrity sha512-UOlZK3wb1p0fh5Do7RcQiCLfPkijXzWH6v7h9Evm7fWWEgLy95EIQjeTwc3C6sZvYeRUmmimb11oWccI9kzRiw== dependencies: ts-evaluator "^1.1.0" ts-morph "19.0.0" -"@pandacss/generator@0.27.1": - version "0.27.1" - resolved "https://registry.yarnpkg.com/@pandacss/generator/-/generator-0.27.1.tgz#af5010bfb5adcff26419cbc2b21e4b884461a3cd" - integrity sha512-Xf0f3vbtbN60tvhXHi7cyVZEilZLdIZpM7zzIZtbKoeEn4owCk2z1Y/cATyMYyRaBBmBEjfwL49/cwnxNsGFXQ== - dependencies: - "@pandacss/core" "0.27.1" - "@pandacss/is-valid-prop" "^0.27.1" - "@pandacss/logger" "0.27.1" - "@pandacss/shared" "0.27.1" - "@pandacss/token-dictionary" "0.27.1" - "@pandacss/types" "0.27.1" +"@pandacss/generator@0.26.2": + version "0.26.2" + resolved "https://registry.yarnpkg.com/@pandacss/generator/-/generator-0.26.2.tgz#0007450ee88b1d4f8ede214bd299223d6197aed0" + integrity sha512-g9iBhM85Cj4aoooH4D+qx2Gx4tGmQfKRE5ArE/9KcG1qzFofOqd7rnnDkwiiB4aAMibNl30Lsgdu49r9UQLglw== + dependencies: + "@pandacss/core" "0.26.2" + "@pandacss/is-valid-prop" "^0.26.2" + "@pandacss/logger" "0.26.2" + "@pandacss/shared" "0.26.2" + "@pandacss/token-dictionary" "0.26.2" + "@pandacss/types" "0.26.2" javascript-stringify "2.1.0" outdent " ^0.8.0" pluralize "8.0.0" postcss "^8.4.31" ts-pattern "5.0.5" -"@pandacss/is-valid-prop@^0.27.1": - version "0.27.1" - resolved "https://registry.yarnpkg.com/@pandacss/is-valid-prop/-/is-valid-prop-0.27.1.tgz#a39bc21815f6ffcac02a94fd424eb47a81f8454e" - integrity sha512-jPtBBqsKxUCGOYIOZCgVHu2CzTexSYl5FDLgl52fIYYYiWJ4smYbYaqYpgkKLs+1XMjiYXK79XZnL8gNb+baPQ== +"@pandacss/is-valid-prop@^0.26.2": + version "0.26.2" + resolved "https://registry.yarnpkg.com/@pandacss/is-valid-prop/-/is-valid-prop-0.26.2.tgz#d4d97e54272754fa6f7ca7a656fbdcf4e7ea8f65" + integrity sha512-W0OEs7jyN7EHeeczJMnVC0pNvjyQvyELGVeWlP98byred4eiXDZM9390FVyok4MUxPyEGe+Mi6mSLZPwVZT/kQ== -"@pandacss/logger@0.27.1": - version "0.27.1" - resolved "https://registry.yarnpkg.com/@pandacss/logger/-/logger-0.27.1.tgz#f53b79fd826154b05f408f6acfc76ca5c6e79518" - integrity sha512-+dX+k8YAGTXQVu7WGI8JwV+7w7lo8MDzNSsESK/HoDQelqXNauZJ/xJqDKIdIrbqIrUY8tYpWEB8xAAXQ9SIrg== +"@pandacss/logger@0.26.2": + version "0.26.2" + resolved "https://registry.yarnpkg.com/@pandacss/logger/-/logger-0.26.2.tgz#6b9215d0c18cf00c48f6d80e9a94b7f11199c417" + integrity sha512-VXp/zjCymsVLO8rOy8MAuaj91tw481NaJxNaSTxtuy4GCSAgybWybLbcQDL1VctTZV26kL9hPwpRmvT0hJv1cw== dependencies: kleur "^4.1.5" lil-fp "1.4.5" -"@pandacss/node@0.27.1": - version "0.27.1" - resolved "https://registry.yarnpkg.com/@pandacss/node/-/node-0.27.1.tgz#79a93993f4fa89e3898539b167959f83723eb726" - integrity sha512-DRGKnGqg5JcBvzN8z/Cv+jwiSMm+UTfRD10ReH+rYUX4niRI16iQx4QP2fpPqTkP7auoZjBhPpKdmBOTpDiBRw== - dependencies: - "@pandacss/config" "0.27.1" - "@pandacss/core" "0.27.1" - "@pandacss/error" "0.27.1" - "@pandacss/extractor" "0.27.1" - "@pandacss/generator" "0.27.1" - "@pandacss/logger" "0.27.1" - "@pandacss/parser" "0.27.1" - "@pandacss/shared" "0.27.1" - "@pandacss/token-dictionary" "0.27.1" - "@pandacss/types" "0.27.1" - browserslist "^4.22.2" +"@pandacss/node@0.26.2": + version "0.26.2" + resolved "https://registry.yarnpkg.com/@pandacss/node/-/node-0.26.2.tgz#0de887d36d1e629093fe6b47bd450065d7620a4c" + integrity sha512-07cbfT5vq155ThjVuThXBJRPZgOXXDg+ka5b9ZHzmX/fmQlf5C5r16ytps9G6vp9g/A5ihvB3F+pVdvt4RuyIw== + dependencies: + "@pandacss/config" "0.26.2" + "@pandacss/core" "0.26.2" + "@pandacss/error" "0.26.2" + "@pandacss/extractor" "0.26.2" + "@pandacss/generator" "0.26.2" + "@pandacss/logger" "0.26.2" + "@pandacss/parser" "0.26.2" + "@pandacss/shared" "0.26.2" + "@pandacss/token-dictionary" "0.26.2" + "@pandacss/types" "0.26.2" chokidar "^3.5.3" fast-glob "^3.3.1" file-size "^1.0.0" @@ -2817,62 +2815,62 @@ ts-pattern "5.0.5" tsconfck "^2.1.2" -"@pandacss/parser@0.27.1": - version "0.27.1" - resolved "https://registry.yarnpkg.com/@pandacss/parser/-/parser-0.27.1.tgz#ad686c4da52cb288d0eff685fbc10cae3179cbba" - integrity sha512-BgXVQl01dCeNu16bZTZ3xRutQoeMeeV2CL8slPYzCkRsdgtvsWXA8SW9omjH5frdd4VNMuzdS2twy76YTGyh6w== - dependencies: - "@pandacss/config" "^0.27.1" - "@pandacss/core" "^0.27.1" - "@pandacss/extractor" "0.27.1" - "@pandacss/logger" "0.27.1" - "@pandacss/shared" "0.27.1" - "@pandacss/types" "0.27.1" +"@pandacss/parser@0.26.2": + version "0.26.2" + resolved "https://registry.yarnpkg.com/@pandacss/parser/-/parser-0.26.2.tgz#b289e51ff0e2bf6d1d539851228f4488e5184267" + integrity sha512-jzZV/yVFlYMpwIQWnAurgHLAIdUADC1saPSVls/Q8AenIouJdiKEwnoBjr5RcDLuely0Fez8Xbax3NkDcg2uMg== + dependencies: + "@pandacss/config" "^0.26.2" + "@pandacss/core" "^0.26.2" + "@pandacss/extractor" "0.26.2" + "@pandacss/logger" "0.26.2" + "@pandacss/shared" "0.26.2" + "@pandacss/types" "0.26.2" "@vue/compiler-sfc" "3.3.4" magic-string "0.30.5" ts-morph "19.0.0" ts-pattern "5.0.5" -"@pandacss/postcss@0.27.1": - version "0.27.1" - resolved "https://registry.yarnpkg.com/@pandacss/postcss/-/postcss-0.27.1.tgz#429fac1d2974f421d10af9e6e20a6c290ec9d416" - integrity sha512-C+k7VJvNmhGmhPTAvlTzJrN01i7gBTk9WP0MfamYbLCKXQEZSlffnlxDrFxfVs+f2RcT/cpTF5VlwDHPEvqnvQ== +"@pandacss/postcss@0.26.2": + version "0.26.2" + resolved "https://registry.yarnpkg.com/@pandacss/postcss/-/postcss-0.26.2.tgz#1e25256e5ba12db13f017e3a0012e7e3007ea408" + integrity sha512-DSyHxvu+ILCytleib9a2+0nKNd6KvOA4f02qH96B/GNl4PmzNWzh7QrKRaUPiGuIN5J4xXWgHTz5Q5hsnjQ+bg== dependencies: - "@pandacss/node" "0.27.1" + "@pandacss/node" "0.26.2" postcss "^8.4.31" -"@pandacss/preset-base@0.27.1": - version "0.27.1" - resolved "https://registry.yarnpkg.com/@pandacss/preset-base/-/preset-base-0.27.1.tgz#b7c0af468c04efacfbe03efc928de9b775b46866" - integrity sha512-NsjqmXFhp6iohoj/QxvW19T/7gspJvpDtwNvGta9QGEm0qcjmI4+ju0Opxe0lI1a8xhdBgufnSaBaaJSIyiUSg== +"@pandacss/preset-base@0.26.2": + version "0.26.2" + resolved "https://registry.yarnpkg.com/@pandacss/preset-base/-/preset-base-0.26.2.tgz#6bdaffd6ac0604169207ab43a09569a1c65979a7" + integrity sha512-icasgvx/N2sAF8U4MS/YxzQAwVjlr7/u4tM0W1nD2kWlhzTUuW3wGtz2hMeh8xmPZnAzy748kCASmTKgEXLmuA== dependencies: - "@pandacss/types" "0.27.1" + "@pandacss/types" "0.26.2" -"@pandacss/preset-panda@0.27.1": - version "0.27.1" - resolved "https://registry.yarnpkg.com/@pandacss/preset-panda/-/preset-panda-0.27.1.tgz#f9d4fa8a9bd54fa6818dc20dccdf2e74c5d7da4a" - integrity sha512-KBRTj6Z799UpP4j5IV1K3fQINa+DQcnFZUhAWiPPMT7rY7cBQKdvN7EYi903NTq9jJ8p9qf3ziOxa+eOY8zVrQ== +"@pandacss/preset-panda@0.26.2": + version "0.26.2" + resolved "https://registry.yarnpkg.com/@pandacss/preset-panda/-/preset-panda-0.26.2.tgz#e7f77a616831edf3135618688fa699314c65e3cc" + integrity sha512-l+V9zTw2JfHy95qLIZLiz/sWb+ftBGGM5jg/sKIbC4BvK4uHglqpRbLiY9K4d39BIS+gBA9sWB021n3pSwdi9Q== dependencies: - "@pandacss/types" "0.27.1" + "@pandacss/types" "0.26.2" -"@pandacss/shared@0.27.1": - version "0.27.1" - resolved "https://registry.yarnpkg.com/@pandacss/shared/-/shared-0.27.1.tgz#8ec2cb6f71f8860174b6043bc2d3fc86a1055e47" - integrity sha512-hopFUhgq4tGca/08cyZqjEUyUZQcVYHIhRctpX9cV0792yipMO1jPXqbMxTDqJrwCjzOnE0RQNbetsHgXpp0bQ== +"@pandacss/shared@0.26.2": + version "0.26.2" + resolved "https://registry.yarnpkg.com/@pandacss/shared/-/shared-0.26.2.tgz#5bd34ccca3134ce34091ef5ee1fda0cda3891c8a" + integrity sha512-pYmAIR2HHaRDpRQIeD5kgH72BVbgb0AYYpURZdGCf2d9WfJEJViGZlU3nB5pO1j8FG0FNpHdDEIFPHAcPk62qA== -"@pandacss/token-dictionary@0.27.1": - version "0.27.1" - resolved "https://registry.yarnpkg.com/@pandacss/token-dictionary/-/token-dictionary-0.27.1.tgz#66b2d8b662dc32f86f24f34615b297fd914baf80" - integrity sha512-0oZ3dMraTBp3Qq/BM0Z8ddfeu4xj2z+8NJ042y3ENLfYceBJiQEI+8sQI4neh31YpoAeyNf1Kl+IL9RwDt3gNA== +"@pandacss/token-dictionary@0.26.2": + version "0.26.2" + resolved "https://registry.yarnpkg.com/@pandacss/token-dictionary/-/token-dictionary-0.26.2.tgz#3246ba2651485de6cbdbfd06f87c42b34eee5b8b" + integrity sha512-5UNdG/KYtpQlFM/0MJv6Jc9ugTyboh8Fa6Ss7ReFZJr7MrvU5dAoLM5IzBktu1hcrhyos2UJFW3g6LBV4XRw/Q== dependencies: - "@pandacss/shared" "0.27.1" - "@pandacss/types" "0.27.1" + "@pandacss/shared" "0.26.2" + "@pandacss/types" "0.26.2" ts-pattern "5.0.5" -"@pandacss/types@0.27.1": - version "0.27.1" - resolved "https://registry.yarnpkg.com/@pandacss/types/-/types-0.27.1.tgz#a10c62f6dd4a85c9ec9bc08b3e7cc190bf901538" - integrity sha512-7PGSvxOwFrKtqHJ9K4JPRk081xnjnW/lE9TIHZm3tHZmdKl7oOtJQs7j9syf1cksl0w66YwEIxeYTcaFJ9KdBw== +"@pandacss/types@0.26.2": + version "0.26.2" + resolved "https://registry.yarnpkg.com/@pandacss/types/-/types-0.26.2.tgz#40f001ff16ac350f256038ad487d3595dae7f20e" + integrity sha512-jLDeTOt3QsHeC3qPod5a0HMGOlLlVzxGIw/uWuwBlVOPFyJ5FAPYYX0+J4ryyy9CObw0YtP6TS5WbvSsxKfZwQ== "@pkgjs/parseargs@^0.11.0": version "0.11.0" @@ -11016,11 +11014,6 @@ detect-indent@^6.1.0: resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-6.1.0.tgz#592485ebbbf6b3b1ab2be175c8393d04ca0d57e6" integrity sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA== -detect-libc@^1.0.3: - version "1.0.3" - resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b" - integrity sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg== - detect-libc@^2.0.0: version "2.0.2" resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-2.0.2.tgz#8ccf2ba9315350e1241b88d0ac3b0e1fbd99605d" @@ -14259,7 +14252,7 @@ jest-worker@^29.7.0: merge-stream "^2.0.0" supports-color "^8.0.0" -jiti@^1.20.0: +jiti@^1.19.1, jiti@^1.20.0: version "1.21.0" resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.0.tgz#7c97f8fe045724e136a397f7340475244156105d" integrity sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q== @@ -14714,68 +14707,6 @@ lighthouse-logger@^1.0.0: debug "^2.6.9" marky "^1.2.2" -lightningcss-darwin-arm64@1.23.0: - version "1.23.0" - resolved "https://registry.yarnpkg.com/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.23.0.tgz#11780f37158a458cead5e89202f74cd99b926e36" - integrity sha512-kl4Pk3Q2lnE6AJ7Qaij47KNEfY2/UXRZBT/zqGA24B8qwkgllr/j7rclKOf1axcslNXvvUdztjo4Xqh39Yq1aA== - -lightningcss-darwin-x64@1.23.0: - version "1.23.0" - resolved "https://registry.yarnpkg.com/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.23.0.tgz#8394edaa04f0984b971eab42b6f68edb1258b3ed" - integrity sha512-KeRFCNoYfDdcolcFXvokVw+PXCapd2yHS1Diko1z1BhRz/nQuD5XyZmxjWdhmhN/zj5sH8YvWsp0/lPLVzqKpg== - -lightningcss-freebsd-x64@1.23.0: - version "1.23.0" - resolved "https://registry.yarnpkg.com/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.23.0.tgz#d3f6faddc424f17ed046e8be9ca97868a5f804ed" - integrity sha512-xhnhf0bWPuZxcqknvMDRFFo2TInrmQRWZGB0f6YoAsZX8Y+epfjHeeOIGCfAmgF0DgZxHwYc8mIR5tQU9/+ROA== - -lightningcss-linux-arm-gnueabihf@1.23.0: - version "1.23.0" - resolved "https://registry.yarnpkg.com/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.23.0.tgz#040e9718c9a9dc088322da33983a894564ffcb10" - integrity sha512-fBamf/bULvmWft9uuX+bZske236pUZEoUlaHNBjnueaCTJ/xd8eXgb0cEc7S5o0Nn6kxlauMBnqJpF70Bgq3zg== - -lightningcss-linux-arm64-gnu@1.23.0: - version "1.23.0" - resolved "https://registry.yarnpkg.com/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.23.0.tgz#05cfcfa2cf47a042ca11cfce520ae9f91e4efcdb" - integrity sha512-RS7sY77yVLOmZD6xW2uEHByYHhQi5JYWmgVumYY85BfNoVI3DupXSlzbw+b45A9NnVKq45+oXkiN6ouMMtTwfg== - -lightningcss-linux-arm64-musl@1.23.0: - version "1.23.0" - resolved "https://registry.yarnpkg.com/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.23.0.tgz#3212a10dff37c70808113fbcf7cbd1b63c6cbc6f" - integrity sha512-cU00LGb6GUXCwof6ACgSMKo3q7XYbsyTj0WsKHLi1nw7pV0NCq8nFTn6ZRBYLoKiV8t+jWl0Hv8KkgymmK5L5g== - -lightningcss-linux-x64-gnu@1.23.0: - version "1.23.0" - resolved "https://registry.yarnpkg.com/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.23.0.tgz#3b27da32889285b1c5de3f26094ee234054634fc" - integrity sha512-q4jdx5+5NfB0/qMbXbOmuC6oo7caPnFghJbIAV90cXZqgV8Am3miZhC4p+sQVdacqxfd+3nrle4C8icR3p1AYw== - -lightningcss-linux-x64-musl@1.23.0: - version "1.23.0" - resolved "https://registry.yarnpkg.com/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.23.0.tgz#ad65b5a944f10d966cc10070bf20f81ddadd4240" - integrity sha512-G9Ri3qpmF4qef2CV/80dADHKXRAQeQXpQTLx7AiQrBYQHqBjB75oxqj06FCIe5g4hNCqLPnM9fsO4CyiT1sFSQ== - -lightningcss-win32-x64-msvc@1.23.0: - version "1.23.0" - resolved "https://registry.yarnpkg.com/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.23.0.tgz#62f3f619a7bb44f8713973103fbe1bcbd9d455f9" - integrity sha512-1rcBDJLU+obPPJM6qR5fgBUiCdZwZLafZM5f9kwjFLkb/UBNIzmae39uCSmh71nzPCTXZqHbvwu23OWnWEz+eg== - -lightningcss@^1.22.1: - version "1.23.0" - resolved "https://registry.yarnpkg.com/lightningcss/-/lightningcss-1.23.0.tgz#58c94a533d02d8416d4f2ec9ab87641f61943c78" - integrity sha512-SEArWKMHhqn/0QzOtclIwH5pXIYQOUEkF8DgICd/105O+GCgd7jxjNod/QPnBCSWvpRHQBGVz5fQ9uScby03zA== - dependencies: - detect-libc "^1.0.3" - optionalDependencies: - lightningcss-darwin-arm64 "1.23.0" - lightningcss-darwin-x64 "1.23.0" - lightningcss-freebsd-x64 "1.23.0" - lightningcss-linux-arm-gnueabihf "1.23.0" - lightningcss-linux-arm64-gnu "1.23.0" - lightningcss-linux-arm64-musl "1.23.0" - lightningcss-linux-x64-gnu "1.23.0" - lightningcss-linux-x64-musl "1.23.0" - lightningcss-win32-x64-msvc "1.23.0" - lil-fp@1.4.5: version "1.4.5" resolved "https://registry.yarnpkg.com/lil-fp/-/lil-fp-1.4.5.tgz#4a188d41f92ebec7f0d1a43fd3eaa542593edd0b" @@ -16368,12 +16299,7 @@ path-type@^4.0.0: resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b" integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw== -pathe@1.1.2: - version "1.1.2" - resolved "https://registry.yarnpkg.com/pathe/-/pathe-1.1.2.tgz#6c4cb47a945692e48a1ddd6e4094d170516437ec" - integrity sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ== - -pathe@^1.1.0, pathe@^1.1.1: +pathe@1.1.1, pathe@^1.1.0, pathe@^1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/pathe/-/pathe-1.1.1.tgz#1dd31d382b974ba69809adc9a7a347e65d84829a" integrity sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q== From b05f731e0e339c2b02b5059bb2417c184a21e243 Mon Sep 17 00:00:00 2001 From: kyranjamie Date: Wed, 24 Jan 2024 14:19:05 -0300 Subject: [PATCH 3/4] chore: remove dupe imports, lint --- .eslintrc.js | 1 + .../account-restoration/legacy-gaia-config-lookup.ts | 8 ++++++-- src/app/common/hooks/use-bitcoin-contracts.ts | 3 +-- src/app/common/transactions/bitcoin/utils.ts | 6 ++++-- src/app/common/utils.spec.ts | 3 +-- src/app/components/app-version.tsx | 3 +-- .../crypto-currency-asset-item.layout.tsx | 3 +-- .../components/fees-row/components/fees-row.layout.tsx | 3 +-- .../features/bitcoin-choose-fee/bitcoin-choose-fee.tsx | 3 +-- src/app/features/container/container.tsx | 3 +-- .../leather-intro-dialog/leather-intro-steps.tsx | 3 +-- src/app/features/ledger/utils/stacks-ledger-utils.ts | 2 +- .../features/message-signer/message-preview-box.tsx | 3 +-- .../post-conditions/no-post-conditions.tsx | 3 +-- .../bitcoin-contract-list/bitcoin-contract-list.tsx | 6 ++++-- .../bitcoin-contract-request.tsx | 6 ++++-- .../bitcoin-contract-emergency-refund-time.tsx | 3 +-- .../components/network-list-item.layout.tsx | 3 +-- .../components/collectible-asset.tsx | 3 +-- .../send-crypto-asset-form/components/amount-field.tsx | 3 +-- .../send-crypto-asset-form/components/form-footer.tsx | 3 +-- .../components/selected-asset-field.tsx | 3 +-- .../form/brc-20/brc-20-choose-fee.tsx | 3 +-- src/app/query/common/market-data/market-data.hooks.ts | 9 +++++---- .../store/accounts/blockchain/bitcoin/bitcoin.hooks.ts | 10 ++++++---- src/background/background.ts | 3 +-- .../messaging/rpc-methods/accept-bitcoin-contract.ts | 6 ++++-- src/shared/crypto/bitcoin/bitcoin.utils.ts | 3 +-- 28 files changed, 54 insertions(+), 57 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 0b931dfd2ed..30248d7375c 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -30,6 +30,7 @@ module.exports = { // methods, such as implicit use of signed transactions 'deprecation/deprecation': 'warn', 'no-console': ['error'], + 'no-duplicate-imports': ['error'], 'prefer-const': [ 'error', { diff --git a/src/app/common/account-restoration/legacy-gaia-config-lookup.ts b/src/app/common/account-restoration/legacy-gaia-config-lookup.ts index 0736769f574..cd905ce1730 100644 --- a/src/app/common/account-restoration/legacy-gaia-config-lookup.ts +++ b/src/app/common/account-restoration/legacy-gaia-config-lookup.ts @@ -1,5 +1,9 @@ -import { fetchWalletConfig, generateWallet } from '@stacks/wallet-sdk'; -import { connectToGaiaHubWithConfig, getHubInfo } from '@stacks/wallet-sdk'; +import { + connectToGaiaHubWithConfig, + fetchWalletConfig, + generateWallet, + getHubInfo, +} from '@stacks/wallet-sdk'; import { gaiaUrl as gaiaHubUrl } from '@shared/constants'; diff --git a/src/app/common/hooks/use-bitcoin-contracts.ts b/src/app/common/hooks/use-bitcoin-contracts.ts index 88355b05eb5..8bec3e13ca6 100644 --- a/src/app/common/hooks/use-bitcoin-contracts.ts +++ b/src/app/common/hooks/use-bitcoin-contracts.ts @@ -11,8 +11,7 @@ import { import { Money, createMoneyFromDecimal } from '@shared/models/money.model'; import { RouteUrls } from '@shared/route-urls'; import { BitcoinContractResponseStatus } from '@shared/rpc/methods/accept-bitcoin-contract'; -import { makeRpcSuccessResponse } from '@shared/rpc/rpc-methods'; -import { makeRpcErrorResponse } from '@shared/rpc/rpc-methods'; +import { makeRpcErrorResponse, makeRpcSuccessResponse } from '@shared/rpc/rpc-methods'; import { sendAcceptedBitcoinContractOfferToProtocolWallet } from '@app/query/bitcoin/contract/send-accepted-bitcoin-contract-offer'; import { diff --git a/src/app/common/transactions/bitcoin/utils.ts b/src/app/common/transactions/bitcoin/utils.ts index 54f57cf4a77..b4df0aab8f2 100644 --- a/src/app/common/transactions/bitcoin/utils.ts +++ b/src/app/common/transactions/bitcoin/utils.ts @@ -2,8 +2,10 @@ import BigNumber from 'bignumber.js'; import { getAddressInfo, validate } from 'bitcoin-address-validation'; import { BTC_P2WPKH_DUST_AMOUNT } from '@shared/constants'; -import { BitcoinTransactionVectorOutput } from '@shared/models/transactions/bitcoin-transaction.model'; -import { BitcoinTx } from '@shared/models/transactions/bitcoin-transaction.model'; +import { + BitcoinTransactionVectorOutput, + BitcoinTx, +} from '@shared/models/transactions/bitcoin-transaction.model'; import { sumNumbers } from '@app/common/math/helpers'; import { satToBtc } from '@app/common/money/unit-conversion'; diff --git a/src/app/common/utils.spec.ts b/src/app/common/utils.spec.ts index 95c25e720f8..91c033e7105 100644 --- a/src/app/common/utils.spec.ts +++ b/src/app/common/utils.spec.ts @@ -1,5 +1,4 @@ -import { getTicker } from '@app/common/utils'; -import { extractPhraseFromString } from '@app/common/utils'; +import { extractPhraseFromString, getTicker } from '@app/common/utils'; import { countDecimals } from './math/helpers'; diff --git a/src/app/components/app-version.tsx b/src/app/components/app-version.tsx index 442e4b24a35..c67990f8ffe 100644 --- a/src/app/components/app-version.tsx +++ b/src/app/components/app-version.tsx @@ -1,5 +1,4 @@ -import { useMemo } from 'react'; -import { forwardRef } from 'react'; +import { forwardRef, useMemo } from 'react'; import { HTMLStyledProps, styled } from 'leather-styles/jsx'; diff --git a/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx b/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx index ff8086c2ff0..e864ae23d1c 100644 --- a/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx +++ b/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx @@ -1,6 +1,5 @@ import { CryptoAssetSelectors } from '@tests/selectors/crypto-asset.selectors'; -import { Flex } from 'leather-styles/jsx'; -import { styled } from 'leather-styles/jsx'; +import { Flex, styled } from 'leather-styles/jsx'; import { CryptoCurrencies } from '@shared/models/currencies.model'; import { Money } from '@shared/models/money.model'; diff --git a/src/app/components/fees-row/components/fees-row.layout.tsx b/src/app/components/fees-row/components/fees-row.layout.tsx index 9c60f48c63a..0a63fb8ccf5 100644 --- a/src/app/components/fees-row/components/fees-row.layout.tsx +++ b/src/app/components/fees-row/components/fees-row.layout.tsx @@ -1,6 +1,5 @@ import { useField } from 'formik'; -import { HstackProps, styled } from 'leather-styles/jsx'; -import { HStack } from 'leather-styles/jsx'; +import { HStack, HstackProps, styled } from 'leather-styles/jsx'; import { openInNewTab } from '@app/common/utils/open-in-new-tab'; import { SponsoredLabel } from '@app/components/sponsored-label'; diff --git a/src/app/features/bitcoin-choose-fee/bitcoin-choose-fee.tsx b/src/app/features/bitcoin-choose-fee/bitcoin-choose-fee.tsx index 99e3f3472bc..bfdc9ebb901 100644 --- a/src/app/features/bitcoin-choose-fee/bitcoin-choose-fee.tsx +++ b/src/app/features/bitcoin-choose-fee/bitcoin-choose-fee.tsx @@ -1,7 +1,6 @@ import { useState } from 'react'; -import { Box, FlexProps, Stack } from 'leather-styles/jsx'; -import { styled } from 'leather-styles/jsx'; +import { Box, FlexProps, Stack, styled } from 'leather-styles/jsx'; import { BtcFeeType } from '@shared/models/fees/bitcoin-fees.model'; import { Money } from '@shared/models/money.model'; diff --git a/src/app/features/container/container.tsx b/src/app/features/container/container.tsx index 76d8367fcaf..55d4ea9e5c8 100644 --- a/src/app/features/container/container.tsx +++ b/src/app/features/container/container.tsx @@ -4,8 +4,7 @@ import { Outlet, useLocation } from 'react-router-dom'; import { closeWindow } from '@shared/utils'; -import { useInitalizeAnalytics } from '@app/common/hooks/analytics/use-analytics'; -import { useAnalytics } from '@app/common/hooks/analytics/use-analytics'; +import { useAnalytics, useInitalizeAnalytics } from '@app/common/hooks/analytics/use-analytics'; import { LoadingSpinner } from '@app/components/loading-spinner'; import { useOnSignOut } from '@app/routes/hooks/use-on-sign-out'; import { useOnWalletLock } from '@app/routes/hooks/use-on-wallet-lock'; diff --git a/src/app/features/leather-intro-dialog/leather-intro-steps.tsx b/src/app/features/leather-intro-dialog/leather-intro-steps.tsx index 766d3b8c5bd..29b62738bfc 100644 --- a/src/app/features/leather-intro-dialog/leather-intro-steps.tsx +++ b/src/app/features/leather-intro-dialog/leather-intro-steps.tsx @@ -1,8 +1,7 @@ import { useLayoutEffect, useRef, useState } from 'react'; import Confetti from 'react-dom-confetti'; -import { Dialog } from '@radix-ui/themes'; -import { Inset } from '@radix-ui/themes'; +import { Dialog, Inset } from '@radix-ui/themes'; import { css } from 'leather-styles/css'; import { Box, Flex, Stack, styled } from 'leather-styles/jsx'; diff --git a/src/app/features/ledger/utils/stacks-ledger-utils.ts b/src/app/features/ledger/utils/stacks-ledger-utils.ts index 71edcb5a606..63899a1895f 100644 --- a/src/app/features/ledger/utils/stacks-ledger-utils.ts +++ b/src/app/features/ledger/utils/stacks-ledger-utils.ts @@ -19,8 +19,8 @@ import { SemVerObject, prepareLedgerDeviceForAppFn, promptOpenAppOnDevice, + versionObjectToVersionString, } from './generic-ledger-utils'; -import { versionObjectToVersionString } from './generic-ledger-utils'; export function requestPublicKeyForStxAccount(app: StacksApp) { return async (index: number) => diff --git a/src/app/features/message-signer/message-preview-box.tsx b/src/app/features/message-signer/message-preview-box.tsx index 6eb65039d44..ba45782363c 100644 --- a/src/app/features/message-signer/message-preview-box.tsx +++ b/src/app/features/message-signer/message-preview-box.tsx @@ -1,5 +1,4 @@ -import { Stack } from 'leather-styles/jsx'; -import { styled } from 'leather-styles/jsx'; +import { Stack, styled } from 'leather-styles/jsx'; import { HashDrawer } from './hash-drawer'; diff --git a/src/app/features/stacks-transaction-request/post-conditions/no-post-conditions.tsx b/src/app/features/stacks-transaction-request/post-conditions/no-post-conditions.tsx index 6b680558c91..6023981e5de 100644 --- a/src/app/features/stacks-transaction-request/post-conditions/no-post-conditions.tsx +++ b/src/app/features/stacks-transaction-request/post-conditions/no-post-conditions.tsx @@ -1,5 +1,4 @@ -import { Box, Circle, HStack } from 'leather-styles/jsx'; -import { styled } from 'leather-styles/jsx'; +import { Box, Circle, HStack, styled } from 'leather-styles/jsx'; import { LockIcon } from '@app/ui/components/icons/lock-icon'; diff --git a/src/app/pages/bitcoin-contract-list/bitcoin-contract-list.tsx b/src/app/pages/bitcoin-contract-list/bitcoin-contract-list.tsx index 5f8766e5a95..ba8eb71cd97 100644 --- a/src/app/pages/bitcoin-contract-list/bitcoin-contract-list.tsx +++ b/src/app/pages/bitcoin-contract-list/bitcoin-contract-list.tsx @@ -2,8 +2,10 @@ import { useState } from 'react'; import { Flex, styled } from 'leather-styles/jsx'; -import { useBitcoinContracts } from '@app/common/hooks/use-bitcoin-contracts'; -import { BitcoinContractListItem } from '@app/common/hooks/use-bitcoin-contracts'; +import { + BitcoinContractListItem, + useBitcoinContracts, +} from '@app/common/hooks/use-bitcoin-contracts'; import { useOnMount } from '@app/common/hooks/use-on-mount'; import { FullPageLoadingSpinner } from '@app/components/loading-spinner'; import { truncateMiddle } from '@app/ui/utils/truncate-middle'; diff --git a/src/app/pages/bitcoin-contract-request/bitcoin-contract-request.tsx b/src/app/pages/bitcoin-contract-request/bitcoin-contract-request.tsx index cbed6c93363..46150148e84 100644 --- a/src/app/pages/bitcoin-contract-request/bitcoin-contract-request.tsx +++ b/src/app/pages/bitcoin-contract-request/bitcoin-contract-request.tsx @@ -6,8 +6,10 @@ import { Stack } from 'leather-styles/jsx'; import { RouteUrls } from '@shared/route-urls'; import { BitcoinContractResponseStatus } from '@shared/rpc/methods/accept-bitcoin-contract'; -import { useBitcoinContracts } from '@app/common/hooks/use-bitcoin-contracts'; -import { BitcoinContractOfferDetails } from '@app/common/hooks/use-bitcoin-contracts'; +import { + BitcoinContractOfferDetails, + useBitcoinContracts, +} from '@app/common/hooks/use-bitcoin-contracts'; import { useOnMount } from '@app/common/hooks/use-on-mount'; import { initialSearchParams } from '@app/common/initial-search-params'; import { useCurrentAccountNativeSegwitSigner } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks'; diff --git a/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-offer/bitcoin-contract-emergency-refund-time.tsx b/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-offer/bitcoin-contract-emergency-refund-time.tsx index 2e71ab32ec4..9c92c47ff8b 100644 --- a/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-offer/bitcoin-contract-emergency-refund-time.tsx +++ b/src/app/pages/bitcoin-contract-request/components/bitcoin-contract-offer/bitcoin-contract-emergency-refund-time.tsx @@ -1,6 +1,5 @@ import { BitcoinContractRequestSelectors } from '@tests/selectors/bitcoin-contract-request.selectors'; -import { Flex } from 'leather-styles/jsx'; -import { styled } from 'leather-styles/jsx'; +import { Flex, styled } from 'leather-styles/jsx'; interface BitcoinContractEmergencyRefundTimeProps { emergencyRefundTime: string; diff --git a/src/app/pages/select-network/components/network-list-item.layout.tsx b/src/app/pages/select-network/components/network-list-item.layout.tsx index d6d6ba0ee8e..8e2de838d7c 100644 --- a/src/app/pages/select-network/components/network-list-item.layout.tsx +++ b/src/app/pages/select-network/components/network-list-item.layout.tsx @@ -1,6 +1,5 @@ import { SettingsSelectors } from '@tests/selectors/settings.selectors'; -import { Box, Flex, Stack } from 'leather-styles/jsx'; -import { styled } from 'leather-styles/jsx'; +import { Box, Flex, Stack, styled } from 'leather-styles/jsx'; import { NetworkConfiguration } from '@shared/constants'; diff --git a/src/app/pages/send/ordinal-inscription/components/collectible-asset.tsx b/src/app/pages/send/ordinal-inscription/components/collectible-asset.tsx index e769cdfd4f5..adf6c33f02f 100644 --- a/src/app/pages/send/ordinal-inscription/components/collectible-asset.tsx +++ b/src/app/pages/send/ordinal-inscription/components/collectible-asset.tsx @@ -1,5 +1,4 @@ -import { Flex } from 'leather-styles/jsx'; -import { HStack, styled } from 'leather-styles/jsx'; +import { Flex, HStack, styled } from 'leather-styles/jsx'; interface CollectibleAssetProps { icon: React.JSX.Element; diff --git a/src/app/pages/send/send-crypto-asset-form/components/amount-field.tsx b/src/app/pages/send/send-crypto-asset-form/components/amount-field.tsx index 2225aa24356..03d182f6c19 100644 --- a/src/app/pages/send/send-crypto-asset-form/components/amount-field.tsx +++ b/src/app/pages/send/send-crypto-asset-form/components/amount-field.tsx @@ -1,5 +1,4 @@ -import type { ChangeEvent } from 'react'; -import { useCallback, useEffect, useRef, useState } from 'react'; +import { type ChangeEvent, useCallback, useEffect, useRef, useState } from 'react'; import { SendCryptoAssetSelectors } from '@tests/selectors/send.selectors'; import { useField } from 'formik'; diff --git a/src/app/pages/send/send-crypto-asset-form/components/form-footer.tsx b/src/app/pages/send/send-crypto-asset-form/components/form-footer.tsx index 2993596e33b..9a5157f55e9 100644 --- a/src/app/pages/send/send-crypto-asset-form/components/form-footer.tsx +++ b/src/app/pages/send/send-crypto-asset-form/components/form-footer.tsx @@ -1,5 +1,4 @@ -import { Box } from 'leather-styles/jsx'; -import { Flex } from 'leather-styles/jsx'; +import { Box, Flex } from 'leather-styles/jsx'; import { Money } from '@shared/models/money.model'; diff --git a/src/app/pages/send/send-crypto-asset-form/components/selected-asset-field.tsx b/src/app/pages/send/send-crypto-asset-form/components/selected-asset-field.tsx index d6bf49a7869..63981ffa383 100644 --- a/src/app/pages/send/send-crypto-asset-form/components/selected-asset-field.tsx +++ b/src/app/pages/send/send-crypto-asset-form/components/selected-asset-field.tsx @@ -1,6 +1,5 @@ import { Field, useField } from 'formik'; -import { Flex } from 'leather-styles/jsx'; -import { styled } from 'leather-styles/jsx'; +import { Flex, styled } from 'leather-styles/jsx'; import { useOnMount } from '@app/common/hooks/use-on-mount'; import { Flag } from '@app/components/layout/flag'; diff --git a/src/app/pages/send/send-crypto-asset-form/form/brc-20/brc-20-choose-fee.tsx b/src/app/pages/send/send-crypto-asset-form/form/brc-20/brc-20-choose-fee.tsx index 763821f9d6e..22eb0020c78 100644 --- a/src/app/pages/send/send-crypto-asset-form/form/brc-20/brc-20-choose-fee.tsx +++ b/src/app/pages/send/send-crypto-asset-form/form/brc-20/brc-20-choose-fee.tsx @@ -1,7 +1,6 @@ import { useState } from 'react'; import { toast } from 'react-hot-toast'; -import { Outlet } from 'react-router-dom'; -import { useLocation, useNavigate } from 'react-router-dom'; +import { Outlet, useLocation, useNavigate } from 'react-router-dom'; import { Stack } from 'leather-styles/jsx'; import get from 'lodash.get'; diff --git a/src/app/query/common/market-data/market-data.hooks.ts b/src/app/query/common/market-data/market-data.hooks.ts index 506bc916320..499fd612837 100644 --- a/src/app/query/common/market-data/market-data.hooks.ts +++ b/src/app/query/common/market-data/market-data.hooks.ts @@ -1,5 +1,4 @@ -import { useMemo } from 'react'; -import { useCallback } from 'react'; +import { useCallback, useMemo } from 'react'; import BigNumber from 'bignumber.js'; @@ -8,8 +7,10 @@ import { MarketData, createMarketData, createMarketPair } from '@shared/models/m import { Money, createMoney, currencyDecimalsMap } from '@shared/models/money.model'; import { calculateMeanAverage } from '@app/common/math/calculate-averages'; -import { convertAmountToFractionalUnit } from '@app/common/money/calculate-money'; -import { baseCurrencyAmountInQuote } from '@app/common/money/calculate-money'; +import { + baseCurrencyAmountInQuote, + convertAmountToFractionalUnit, +} from '@app/common/money/calculate-money'; import { selectBinanceUsdPrice, diff --git a/src/app/store/accounts/blockchain/bitcoin/bitcoin.hooks.ts b/src/app/store/accounts/blockchain/bitcoin/bitcoin.hooks.ts index 1076321a929..9d6b056de0c 100644 --- a/src/app/store/accounts/blockchain/bitcoin/bitcoin.hooks.ts +++ b/src/app/store/accounts/blockchain/bitcoin/bitcoin.hooks.ts @@ -7,9 +7,9 @@ import AppClient from 'ledger-bitcoin'; import { getBitcoinJsLibNetworkConfigByMode } from '@shared/crypto/bitcoin/bitcoin.network'; import { extractAddressIndexFromPath, + getInputPaymentType, getTaprootAddress, } from '@shared/crypto/bitcoin/bitcoin.utils'; -import { getInputPaymentType } from '@shared/crypto/bitcoin/bitcoin.utils'; import { getTaprootAccountDerivationPath } from '@shared/crypto/bitcoin/p2tr-address-gen'; import { getNativeSegwitAccountDerivationPath } from '@shared/crypto/bitcoin/p2wpkh-address-gen'; import { @@ -40,10 +40,12 @@ import { useCurrentAccountNativeSegwitSigner, useCurrentNativeSegwitAccount, useUpdateLedgerSpecificNativeSegwitBip32DerivationForAdddressIndexZero, + useUpdateLedgerSpecificNativeSegwitUtxoHexForAdddressIndexZero, } from './native-segwit-account.hooks'; -import { useUpdateLedgerSpecificNativeSegwitUtxoHexForAdddressIndexZero } from './native-segwit-account.hooks'; -import { useCurrentTaprootAccount } from './taproot-account.hooks'; -import { useUpdateLedgerSpecificTaprootInputPropsForAdddressIndexZero } from './taproot-account.hooks'; +import { + useCurrentTaprootAccount, + useUpdateLedgerSpecificTaprootInputPropsForAdddressIndexZero, +} from './taproot-account.hooks'; // Checks for both TR and NativeSegwit hooks export function useHasCurrentBitcoinAccount() { diff --git a/src/background/background.ts b/src/background/background.ts index 52a7be9dd0f..d2a78af40bd 100755 --- a/src/background/background.ts +++ b/src/background/background.ts @@ -2,8 +2,7 @@ // This file is the entrypoint to the extension's background script // https://developer.chrome.com/docs/extensions/mv3/architecture-overview/#background_script import { logger } from '@shared/logger'; -import { CONTENT_SCRIPT_PORT } from '@shared/message-types'; -import type { LegacyMessageFromContentScript } from '@shared/message-types'; +import { CONTENT_SCRIPT_PORT, type LegacyMessageFromContentScript } from '@shared/message-types'; import { RouteUrls } from '@shared/route-urls'; import { WalletRequests } from '@shared/rpc/rpc-methods'; import { warnUsersAboutDevToolsDangers } from '@shared/utils/dev-tools-warning-log'; diff --git a/src/background/messaging/rpc-methods/accept-bitcoin-contract.ts b/src/background/messaging/rpc-methods/accept-bitcoin-contract.ts index ecbdee03111..bafaf0d2d3f 100644 --- a/src/background/messaging/rpc-methods/accept-bitcoin-contract.ts +++ b/src/background/messaging/rpc-methods/accept-bitcoin-contract.ts @@ -1,8 +1,10 @@ import { RpcErrorCode } from '@btckit/types'; import { RouteUrls } from '@shared/route-urls'; -import { BitcoinContractRequest } from '@shared/rpc/methods/accept-bitcoin-contract'; -import { BitcoinContractResponseStatus } from '@shared/rpc/methods/accept-bitcoin-contract'; +import { + BitcoinContractRequest, + BitcoinContractResponseStatus, +} from '@shared/rpc/methods/accept-bitcoin-contract'; import { makeRpcErrorResponse } from '@shared/rpc/rpc-methods'; import { diff --git a/src/shared/crypto/bitcoin/bitcoin.utils.ts b/src/shared/crypto/bitcoin/bitcoin.utils.ts index 0197364e3cd..9160b3a94e4 100644 --- a/src/shared/crypto/bitcoin/bitcoin.utils.ts +++ b/src/shared/crypto/bitcoin/bitcoin.utils.ts @@ -5,8 +5,7 @@ import * as btc from '@scure/btc-signer'; import { BitcoinNetworkModes, NetworkModes } from '@shared/constants'; import { logger } from '@shared/logger'; -import { defaultWalletKeyId } from '@shared/utils'; -import { isDefined, whenNetwork } from '@shared/utils'; +import { defaultWalletKeyId, isDefined, whenNetwork } from '@shared/utils'; import { DerivationPathDepth } from '../derivation-path.utils'; import { BtcSignerNetwork, getBtcSignerLibNetworkConfigByMode } from './bitcoin.network'; From 988e23f0d6e57796983912d337451eed5cc193a3 Mon Sep 17 00:00:00 2001 From: kyranjamie Date: Tue, 23 Jan 2024 09:28:35 -0300 Subject: [PATCH 4/4] fix: update psbt warning copy --- .../components/psbt-request-sighash-warning-label.tsx | 10 ++++++---- src/app/features/psbt-signer/psbt-signer.tsx | 2 +- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/app/features/psbt-signer/components/psbt-request-sighash-warning-label.tsx b/src/app/features/psbt-signer/components/psbt-request-sighash-warning-label.tsx index b69c18efd57..9eb16180a6a 100644 --- a/src/app/features/psbt-signer/components/psbt-request-sighash-warning-label.tsx +++ b/src/app/features/psbt-signer/components/psbt-request-sighash-warning-label.tsx @@ -1,11 +1,13 @@ import { WarningLabel } from '@app/components/warning-label'; -export function PsbtRequestSighashWarningLabel() { +interface PsbtRequestSighashWarningLabelProps { + origin: string; +} +export function PsbtRequestSighashWarningLabel({ origin }: PsbtRequestSighashWarningLabelProps) { return ( - The details you see here are not guaranteed. Be sure to fully trust your counterparty, who can - later modify this transaction to send or receive other assets from your account, and possibly - even drain it. + The details of this transaction are not guaranteed and could be modified later. Continue only + if you trust {origin} ); } diff --git a/src/app/features/psbt-signer/psbt-signer.tsx b/src/app/features/psbt-signer/psbt-signer.tsx index d1d53249425..0b59788e404 100644 --- a/src/app/features/psbt-signer/psbt-signer.tsx +++ b/src/app/features/psbt-signer/psbt-signer.tsx @@ -98,7 +98,7 @@ export function PsbtSigner(props: PsbtSignerProps) { - {isPsbtMutable ? : null} + {isPsbtMutable ? : null}