1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-13 13:17:13 +01:00
metamask-extension/ui/components/app/alerts/unconnected-account-alert/unconnected-account-alert.js

113 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"
rounded
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;