m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Merge branch 'develop' into feature/17670-cancel-speedup-popover

Browse Source
This commit is contained in:
Garrett Bear 2023-06-01 10:07:25 -07:00 committed by GitHub
commit e8074f058a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 27 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
ui/components/component-library/form-text-field/README.mdx
View File

@ -87,7 +87,7 @@ An example of a form using the `FormTextField` component.
```jsx
import React, { useState, useEffect } from 'react';
import {
DISPLAY,
Display,
TextColor,
AlignItems,
TextVariant,
@ -225,7 +225,7 @@ return (
error={Boolean(submitted === FORM_STATE.ERROR && errors.chainId)}
helpText={submitted === FORM_STATE.ERROR ? errors.chainId : null}
/>
<Box display={DISPLAY.FLEX} alignItems={AlignItems.center} gap={1}>
<Box display={Display.Flex} alignItems={AlignItems.center} gap={1}>
<ButtonPrimary type="submit">Submit</ButtonPrimary>
</Box>
</Box>
@ -256,7 +256,7 @@ There will be times when you will want to use a custom `Label` or `HelpText`. Th
```jsx
import {
Size,
DISPLAY,
Display,
IconColor,
AlignItems,
JustifyContent,
@ -279,11 +279,11 @@ import {
FormTextField component
</Text>
<Box
display={DISPLAY.FLEX}
display={Display.Flex}
justifyContent={JustifyContent.spaceBetween}
alignItems={AlignItems.flexEnd}
>
<Box display={DISPLAY.FLEX} alignItems={AlignItems.center}>
<Box display={Display.Flex} alignItems={AlignItems.center}>
{/**
* If you need a custom label
* or require adding some form of customization
@ -314,7 +314,7 @@ import {
type={TEXT_FIELD_TYPES.NUMBER}
/>
<Box
display={DISPLAY.FLEX}
display={Display.Flex}
alignItems={AlignItems.flexStart}
justifyContent={JustifyContent.spaceBetween}
marginTop={1}

12
ui/components/component-library/form-text-field/form-text-field.js
View File

@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
import classnames from 'classnames';
import {
DISPLAY,
FLEX_DIRECTION,
SEVERITIES,
Display,
FlexDirection,
Severity,
Size,
} from '../../../helpers/constants/design-system';
@ -52,8 +52,8 @@ export const FormTextField = ({
{ 'mm-form-text-field--disabled': disabled },
className,
)}
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.COLUMN}
display={Display.Flex}
flexDirection={FlexDirection.Column}
{...props}
>
{label && (
@ -102,7 +102,7 @@ export const FormTextField = ({
/>
{helpText && (
<HelpText
severity={error && SEVERITIES.DANGER}
severity={error && Severity.Danger}
marginTop={1}
{...helpTextProps}
className={classnames(

10
ui/components/component-library/form-text-field/form-text-field.stories.js
View File

@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
import { useArgs } from '@storybook/client-api';
import {
DISPLAY,
Display,
AlignItems,
TextVariant,
JustifyContent,
@ -369,7 +369,7 @@ export const FormExample = () => {
error={Boolean(submitted === FORM_STATE.ERROR && errors.chainId)}
helpText={submitted === FORM_STATE.ERROR ? errors.chainId : null}
/>
<Box display={DISPLAY.FLEX} alignItems={AlignItems.center} gap={1}>
<Box display={Display.Flex} alignItems={AlignItems.center} gap={1}>
<ButtonPrimary type="submit">Submit</ButtonPrimary>
</Box>
</Box>
@ -396,11 +396,11 @@ export const CustomLabelOrHelpText = () => (
FormTextField component
</Text>
<Box
display={DISPLAY.FLEX}
display={Display.Flex}
justifyContent={JustifyContent.spaceBetween}
alignItems={AlignItems.flexEnd}
>
<Box display={DISPLAY.FLEX} alignItems={AlignItems.center}>
<Box display={Display.Flex} alignItems={AlignItems.center}>
{/* If you need a custom label
or require adding some form of customization
import the Label component separately */}
@ -427,7 +427,7 @@ export const CustomLabelOrHelpText = () => (
type={TEXT_FIELD_TYPES.NUMBER}
/>
<Box
display={DISPLAY.FLEX}
display={Display.Flex}
alignItems={AlignItems.flexStart}
justifyContent={JustifyContent.spaceBetween}
>

8
ui/components/ui/site-icon/site-icon.js
View File

@ -3,6 +3,14 @@ import PropTypes from 'prop-types';
import IconBorder from '../icon-border';
import IconWithFallback from '../icon-with-fallback';
/**
* @deprecated `<SiteIcon />` has been deprecated in favor of the new `<AvatarFavicon>` component from the component-library.
* Please update your code to use the new <AvatarFavicon> component instead, which can be found at ./ui/components/component-library/avatar-favicon.js.
* You can find documentation for the new AvatarFavicon component in the MetaMask Storybook:
* {@link https://metamask.github.io/metamask-storybook/?path=/story/components-componentlibrary-avatarfavicon--default-story}
* Help to replace `SiteIcon` with `AvatarFavicon` by submitting a PR
*/
export default function SiteIcon({ icon = null, name = '', size, className }) {
const iconSize = Math.floor(size * 0.75);
return (

9
ui/pages/confirm-transaction/confirm-transaction.component.js
View File

@ -31,7 +31,6 @@ import {
import { isTokenMethodAction } from '../../helpers/utils/transactions.util';
import { usePrevious } from '../../hooks/usePrevious';
import {
getUnapprovedTransactions,
unconfirmedTransactionsListSelector,
unconfirmedTransactionsHashSelector,
} from '../../selectors';
@ -56,21 +55,18 @@ const ConfirmTransaction = () => {
const mostRecentOverviewPage = useSelector(getMostRecentOverviewPage);
const sendTo = useSelector(getSendTo);
const unapprovedTxs = useSelector(getUnapprovedTransactions);
const unconfirmedTxsSorted = useSelector(unconfirmedTransactionsListSelector);
const unconfirmedTxs = useSelector(unconfirmedTransactionsHashSelector);
const totalUnapproved = unconfirmedTxsSorted.length || 0;
const getTransaction = useCallback(() => {
return totalUnapproved
? unapprovedTxs[paramsTransactionId] ||
unconfirmedTxs[paramsTransactionId] ||
unconfirmedTxsSorted[0]
? unconfirmedTxs[paramsTransactionId] || unconfirmedTxsSorted[0]
: {};
}, [
paramsTransactionId,
totalUnapproved,
unapprovedTxs,
unconfirmedTxs,
unconfirmedTxsSorted,
]);
@ -87,7 +83,6 @@ const ConfirmTransaction = () => {
getTransaction,
paramsTransactionId,
totalUnapproved,
unapprovedTxs,
unconfirmedTxs,
unconfirmedTxsSorted,
]);