1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 15:35:46 +01:00
metamask-extension/ui/components/app/signature-request-siwe/signature-request-siwe-header/signature-request-siwe-header.js
Sam Gbafa 512b9bdf76
Sign-in With Ethereum Design Update (#16019)
* header warning changes

* updated warning message

* Updated button color

* add rounded corners

* text + style changes

* cleanup

* linter fixes

* remove console.log

* break out components

* remove unused css

* use icon name var

* improve icon styling

* remove unused styles

* Update ui/components/app/signature-request-siwe/signature-request-siwe-tag/index.js

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>

* Update ui/components/app/signature-request-siwe/signature-request-siwe-tag/index.js

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>

* use design system fonts

* remove unused fonts

* moved tooltip to parent component

* remove domain call

* updated stories

* classname cleanup

* fix locales

* remove unused locales

* Update ui/components/app/signature-request-siwe/signature-request-siwe-tag/index.js

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>

Co-authored-by: George Marshall <georgewrmarshall@gmail.com>
2022-10-04 18:33:51 -03:00

77 lines
2.2 KiB
JavaScript

import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import AccountListItem from '../../account-list-item';
import { I18nContext } from '../../../../contexts/i18n';
import PermissionsConnectHeader from '../../permissions-connect-header';
import SignatureRequestSIWEIcon from '../signature-request-siwe-icon';
import SignatureRequestSIWETag from '../signature-request-siwe-tag';
import Tooltip from '../../../ui/tooltip';
export default function SignatureRequestSIWEHeader({
fromAccount,
domain,
isSIWEDomainValid,
subjectMetadata,
}) {
const t = useContext(I18nContext);
return (
<div className="signature-request-siwe-header">
<PermissionsConnectHeader
iconUrl={subjectMetadata.iconUrl}
iconName={subjectMetadata.name}
headerTitle={t('SIWESiteRequestTitle')}
headerText={t('SIWESiteRequestSubtitle')}
siteOrigin={domain}
className={isSIWEDomainValid ? '' : 'bad-domain'}
leftIcon={
!isSIWEDomainValid && (
<Tooltip
position="bottom"
html={<p>{t('SIWEDomainWarningBody', [domain])}</p>}
>
<SignatureRequestSIWEIcon />
</Tooltip>
)
}
rightIcon={
!isSIWEDomainValid && (
<Tooltip
position="bottom"
html={<p>{t('SIWEDomainWarningBody', [domain])}</p>}
>
<SignatureRequestSIWETag text={t('SIWEDomainWarningLabel')} />
</Tooltip>
)
}
/>
{fromAccount && (
<AccountListItem
account={fromAccount}
className="signature-request-siwe-header__account-list-item"
/>
)}
</div>
);
}
SignatureRequestSIWEHeader.propTypes = {
/**
* The account that is requesting permissions
*/
fromAccount: PropTypes.object,
/**
* The domain that the request is for
*/
domain: PropTypes.string,
/**
* Whether the domain is valid
*/
isSIWEDomainValid: PropTypes.bool,
/**
* The metadata for the subject. This is used to display the icon and name
* and is selected from the domain in the SIWE request.
*/
subjectMetadata: PropTypes.object,
};