2021-02-04 19:15:23 +01:00
|
|
|
import React, { PureComponent } from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
2022-08-11 19:33:33 +02:00
|
|
|
|
2021-02-04 19:15:23 +01:00
|
|
|
import Button from '../../../components/ui/button';
|
2022-01-06 01:55:20 +01:00
|
|
|
import {
|
|
|
|
SUPPORT_LINK,
|
|
|
|
SUPPORT_REQUEST_LINK,
|
|
|
|
} from '../../../helpers/constants/common';
|
2021-09-08 22:08:23 +02:00
|
|
|
import { isBeta } from '../../../helpers/utils/build-types';
|
2022-02-22 21:58:21 +01:00
|
|
|
import {
|
2022-04-06 22:27:08 +02:00
|
|
|
getNumberOfSettingsInSection,
|
2022-02-22 21:58:21 +01:00
|
|
|
handleSettingsRefs,
|
|
|
|
} from '../../../helpers/utils/settings-search';
|
2022-08-11 19:33:33 +02:00
|
|
|
import {
|
|
|
|
EVENT,
|
|
|
|
EVENT_NAMES,
|
|
|
|
CONTEXT_PROPS,
|
|
|
|
} from '../../../../shared/constants/metametrics';
|
2018-09-12 02:32:37 +02:00
|
|
|
|
|
|
|
export default class InfoTab extends PureComponent {
|
|
|
|
state = {
|
|
|
|
version: global.platform.getVersion(),
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
2018-09-12 02:32:37 +02:00
|
|
|
|
|
|
|
static contextTypes = {
|
|
|
|
t: PropTypes.func,
|
2022-08-11 19:33:33 +02:00
|
|
|
trackEvent: PropTypes.func,
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
2018-09-12 02:32:37 +02:00
|
|
|
|
2022-02-22 21:58:21 +01:00
|
|
|
settingsRefs = Array(
|
2022-04-06 22:27:08 +02:00
|
|
|
getNumberOfSettingsInSection(this.context.t, this.context.t('about')),
|
2022-02-22 21:58:21 +01:00
|
|
|
)
|
|
|
|
.fill(undefined)
|
|
|
|
.map(() => {
|
|
|
|
return React.createRef();
|
|
|
|
});
|
|
|
|
|
|
|
|
componentDidUpdate() {
|
|
|
|
const { t } = this.context;
|
|
|
|
handleSettingsRefs(t, t('about'), this.settingsRefs);
|
|
|
|
}
|
|
|
|
|
|
|
|
componentDidMount() {
|
|
|
|
const { t } = this.context;
|
|
|
|
handleSettingsRefs(t, t('about'), this.settingsRefs);
|
|
|
|
}
|
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
renderInfoLinks() {
|
2021-02-04 19:15:23 +01:00
|
|
|
const { t } = this.context;
|
2018-09-12 02:32:37 +02:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="settings-page__content-item settings-page__content-item--without-height">
|
2022-02-22 21:58:21 +01:00
|
|
|
<div ref={this.settingsRefs[1]} className="info-tab__link-header">
|
|
|
|
{t('links')}
|
|
|
|
</div>
|
|
|
|
<div ref={this.settingsRefs[2]} className="info-tab__link-item">
|
2020-08-19 18:41:56 +02:00
|
|
|
<Button
|
|
|
|
type="link"
|
2018-09-12 02:32:37 +02:00
|
|
|
href="https://metamask.io/privacy.html"
|
|
|
|
target="_blank"
|
|
|
|
rel="noopener noreferrer"
|
2020-08-19 18:41:56 +02:00
|
|
|
className="info-tab__link-text"
|
2018-09-12 02:32:37 +02:00
|
|
|
>
|
2020-11-03 00:41:28 +01:00
|
|
|
{t('privacyMsg')}
|
2020-08-19 18:41:56 +02:00
|
|
|
</Button>
|
2018-09-12 02:32:37 +02:00
|
|
|
</div>
|
2022-02-22 21:58:21 +01:00
|
|
|
<div ref={this.settingsRefs[3]} className="info-tab__link-item">
|
2020-08-19 18:41:56 +02:00
|
|
|
<Button
|
|
|
|
type="link"
|
2018-09-12 02:32:37 +02:00
|
|
|
href="https://metamask.io/terms.html"
|
|
|
|
target="_blank"
|
|
|
|
rel="noopener noreferrer"
|
2020-08-19 18:41:56 +02:00
|
|
|
className="info-tab__link-text"
|
2018-09-12 02:32:37 +02:00
|
|
|
>
|
2020-11-03 00:41:28 +01:00
|
|
|
{t('terms')}
|
2020-08-19 18:41:56 +02:00
|
|
|
</Button>
|
2018-09-12 02:32:37 +02:00
|
|
|
</div>
|
2022-02-22 21:58:21 +01:00
|
|
|
<div ref={this.settingsRefs[4]} className="info-tab__link-item">
|
2020-08-19 18:41:56 +02:00
|
|
|
<Button
|
|
|
|
type="link"
|
2018-09-12 02:32:37 +02:00
|
|
|
href="https://metamask.io/attributions.html"
|
|
|
|
target="_blank"
|
|
|
|
rel="noopener noreferrer"
|
2020-08-19 18:41:56 +02:00
|
|
|
className="info-tab__link-text"
|
2018-09-12 02:32:37 +02:00
|
|
|
>
|
2020-11-03 00:41:28 +01:00
|
|
|
{t('attributions')}
|
2020-08-19 18:41:56 +02:00
|
|
|
</Button>
|
2018-09-12 02:32:37 +02:00
|
|
|
</div>
|
|
|
|
<hr className="info-tab__separator" />
|
2022-02-22 21:58:21 +01:00
|
|
|
<div ref={this.settingsRefs[5]} className="info-tab__link-item">
|
2020-08-19 18:41:56 +02:00
|
|
|
<Button
|
|
|
|
type="link"
|
2022-01-06 01:55:20 +01:00
|
|
|
href={SUPPORT_LINK}
|
2018-09-12 02:32:37 +02:00
|
|
|
target="_blank"
|
|
|
|
rel="noopener noreferrer"
|
2020-08-19 18:41:56 +02:00
|
|
|
className="info-tab__link-text"
|
2022-08-11 19:33:33 +02:00
|
|
|
onClick={() => {
|
|
|
|
this.context.trackEvent(
|
|
|
|
{
|
|
|
|
category: EVENT.CATEGORIES.SETTINGS,
|
|
|
|
event: EVENT_NAMES.SUPPORT_LINK_CLICKED,
|
|
|
|
properties: {
|
|
|
|
url: SUPPORT_LINK,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
contextPropsIntoEventProperties: [CONTEXT_PROPS.PAGE_TITLE],
|
|
|
|
},
|
|
|
|
);
|
|
|
|
}}
|
2018-09-12 02:32:37 +02:00
|
|
|
>
|
2020-11-03 00:41:28 +01:00
|
|
|
{t('supportCenter')}
|
2020-08-19 18:41:56 +02:00
|
|
|
</Button>
|
2018-09-12 02:32:37 +02:00
|
|
|
</div>
|
2022-02-22 21:58:21 +01:00
|
|
|
<div ref={this.settingsRefs[6]} className="info-tab__link-item">
|
2020-08-19 18:41:56 +02:00
|
|
|
<Button
|
|
|
|
type="link"
|
2018-09-12 02:32:37 +02:00
|
|
|
href="https://metamask.io/"
|
|
|
|
target="_blank"
|
|
|
|
rel="noopener noreferrer"
|
2020-08-19 18:41:56 +02:00
|
|
|
className="info-tab__link-text"
|
2018-09-12 02:32:37 +02:00
|
|
|
>
|
2020-11-03 00:41:28 +01:00
|
|
|
{t('visitWebSite')}
|
2020-08-19 18:41:56 +02:00
|
|
|
</Button>
|
2018-09-12 02:32:37 +02:00
|
|
|
</div>
|
2022-02-22 21:58:21 +01:00
|
|
|
<div ref={this.settingsRefs[7]} className="info-tab__link-item">
|
2020-08-19 18:41:56 +02:00
|
|
|
<Button
|
|
|
|
type="link"
|
2022-01-06 01:55:20 +01:00
|
|
|
href={SUPPORT_REQUEST_LINK}
|
2018-09-12 02:32:37 +02:00
|
|
|
target="_blank"
|
|
|
|
rel="noopener noreferrer"
|
2020-08-19 18:41:56 +02:00
|
|
|
className="info-tab__link-text"
|
2022-08-11 19:33:33 +02:00
|
|
|
onClick={() => {
|
|
|
|
this.context.trackEvent(
|
|
|
|
{
|
|
|
|
category: EVENT.CATEGORIES.SETTINGS,
|
|
|
|
event: EVENT_NAMES.SUPPORT_LINK_CLICKED,
|
|
|
|
properties: {
|
|
|
|
url: SUPPORT_REQUEST_LINK,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
contextPropsIntoEventProperties: [CONTEXT_PROPS.PAGE_TITLE],
|
|
|
|
},
|
|
|
|
);
|
|
|
|
}}
|
2018-09-12 02:32:37 +02:00
|
|
|
>
|
2020-11-03 00:41:28 +01:00
|
|
|
{t('contactUs')}
|
2020-08-19 18:41:56 +02:00
|
|
|
</Button>
|
2018-09-12 02:32:37 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2018-09-12 02:32:37 +02:00
|
|
|
}
|
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
render() {
|
2021-02-04 19:15:23 +01:00
|
|
|
const { t } = this.context;
|
2018-09-12 02:32:37 +02:00
|
|
|
|
|
|
|
return (
|
2019-03-25 17:13:23 +01:00
|
|
|
<div className="settings-page__body">
|
2018-09-12 02:32:37 +02:00
|
|
|
<div className="settings-page__content-row">
|
|
|
|
<div className="settings-page__content-item settings-page__content-item--without-height">
|
|
|
|
<div className="info-tab__item">
|
2022-02-22 21:58:21 +01:00
|
|
|
<div
|
|
|
|
ref={this.settingsRefs[0]}
|
|
|
|
className="info-tab__version-header"
|
|
|
|
>
|
2021-09-08 22:08:23 +02:00
|
|
|
{isBeta() ? t('betaMetamaskVersion') : t('metamaskVersion')}
|
2018-09-12 02:32:37 +02:00
|
|
|
</div>
|
|
|
|
<div className="info-tab__version-number">
|
2020-11-03 00:41:28 +01:00
|
|
|
{this.state.version}
|
2018-09-12 02:32:37 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="info-tab__item">
|
2021-06-14 18:37:21 +02:00
|
|
|
<div className="info-tab__about">{t('builtAroundTheWorld')}</div>
|
2018-09-12 02:32:37 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
2020-11-03 00:41:28 +01:00
|
|
|
{this.renderInfoLinks()}
|
2018-09-12 02:32:37 +02:00
|
|
|
</div>
|
2021-01-14 14:20:44 +01:00
|
|
|
<div className="info-tab__logo-wrapper">
|
2022-04-01 16:00:33 +02:00
|
|
|
<img
|
|
|
|
src="./images/logo/metamask-fox.svg"
|
|
|
|
className="info-tab__logo"
|
|
|
|
alt="MetaMask Logo"
|
|
|
|
/>
|
2021-01-14 14:20:44 +01:00
|
|
|
</div>
|
2018-09-12 02:32:37 +02:00
|
|
|
</div>
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2018-09-12 02:32:37 +02:00
|
|
|
}
|
|
|
|
}
|