mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
112 lines
3.6 KiB
JavaScript
112 lines
3.6 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { useDispatch, useSelector } from 'react-redux';
|
|
|
|
import { ALERT_STATE } from '../../../../ducks/alerts';
|
|
import {
|
|
connectAccount,
|
|
dismissAlert,
|
|
dismissAndDisableAlert,
|
|
getAlertState,
|
|
switchToAccount,
|
|
} from '../../../../ducks/alerts/unconnected-account';
|
|
import {
|
|
getOriginOfCurrentTab,
|
|
getOrderedConnectedAccountsForActiveTab,
|
|
getSelectedAddress,
|
|
getSelectedIdentity,
|
|
} from '../../../../selectors';
|
|
import { isExtensionUrl, getURLHost } from '../../../../helpers/utils/util';
|
|
import Popover from '../../../ui/popover';
|
|
import Button from '../../../ui/button';
|
|
import Checkbox from '../../../ui/check-box';
|
|
import Tooltip from '../../../ui/tooltip';
|
|
import ConnectedAccountsList from '../../connected-accounts-list';
|
|
import { useI18nContext } from '../../../../hooks/useI18nContext';
|
|
|
|
const { ERROR, LOADING } = ALERT_STATE;
|
|
|
|
const UnconnectedAccountAlert = () => {
|
|
const t = useI18nContext();
|
|
const dispatch = useDispatch();
|
|
const alertState = useSelector(getAlertState);
|
|
const connectedAccounts = useSelector(
|
|
getOrderedConnectedAccountsForActiveTab,
|
|
);
|
|
const origin = useSelector(getOriginOfCurrentTab);
|
|
const selectedIdentity = useSelector(getSelectedIdentity);
|
|
const selectedAddress = useSelector(getSelectedAddress);
|
|
const [dontShowThisAgain, setDontShowThisAgain] = useState(false);
|
|
|
|
const onClose = async () => {
|
|
return dontShowThisAgain
|
|
? await dispatch(dismissAndDisableAlert())
|
|
: dispatch(dismissAlert());
|
|
};
|
|
|
|
const footer = (
|
|
<>
|
|
{alertState === ERROR ? (
|
|
<div className="unconnected-account-alert__error">
|
|
{t('failureMessage')}
|
|
</div>
|
|
) : null}
|
|
<div className="unconnected-account-alert__footer-row">
|
|
<div className="unconnected-account-alert__checkbox-wrapper">
|
|
<Checkbox
|
|
id="unconnectedAccount_dontShowThisAgain"
|
|
checked={dontShowThisAgain}
|
|
className="unconnected-account-alert__checkbox"
|
|
onClick={() => setDontShowThisAgain((checked) => !checked)}
|
|
/>
|
|
<label
|
|
className="unconnected-account-alert__checkbox-label"
|
|
htmlFor="unconnectedAccount_dontShowThisAgain"
|
|
>
|
|
{t('dontShowThisAgain')}
|
|
<Tooltip
|
|
position="top"
|
|
title={t('alertDisableTooltip')}
|
|
wrapperClassName="unconnected-account-alert__checkbox-label-tooltip"
|
|
>
|
|
<i className="fa fa-info-circle" />
|
|
</Tooltip>
|
|
</label>
|
|
</div>
|
|
<Button
|
|
disabled={alertState === LOADING}
|
|
onClick={onClose}
|
|
type="primary"
|
|
className="unconnected-account-alert__dismiss-button"
|
|
>
|
|
{t('dismiss')}
|
|
</Button>
|
|
</div>
|
|
</>
|
|
);
|
|
|
|
return (
|
|
<Popover
|
|
title={
|
|
isExtensionUrl(origin) ? t('currentExtension') : getURLHost(origin)
|
|
}
|
|
subtitle={t('currentAccountNotConnected')}
|
|
onClose={onClose}
|
|
className="unconnected-account-alert"
|
|
contentClassName="unconnected-account-alert__content"
|
|
footerClassName="unconnected-account-alert__footer"
|
|
footer={footer}
|
|
>
|
|
<ConnectedAccountsList
|
|
accountToConnect={selectedIdentity}
|
|
connectAccount={() => dispatch(connectAccount(selectedAddress))}
|
|
connectedAccounts={connectedAccounts}
|
|
selectedAddress={selectedAddress}
|
|
setSelectedAddress={(address) => dispatch(switchToAccount(address))}
|
|
shouldRenderListOptions={false}
|
|
/>
|
|
</Popover>
|
|
);
|
|
};
|
|
|
|
export default UnconnectedAccountAlert;
|