diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index b1621ed39..1b537468e 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -2669,6 +2669,10 @@
"settings": {
"message": "Settings"
},
+ "shorthandVersion": {
+ "message": "v$1",
+ "description": "$1 is replaced by a version string (e.g. 1.2.3)"
+ },
"show": {
"message": "Show"
},
diff --git a/ui/components/app/flask/snap-settings-card/snap-settings-card.js b/ui/components/app/flask/snap-settings-card/snap-settings-card.js
index 95afbc810..51f594a5a 100644
--- a/ui/components/app/flask/snap-settings-card/snap-settings-card.js
+++ b/ui/components/app/flask/snap-settings-card/snap-settings-card.js
@@ -180,7 +180,7 @@ const SnapSettingsCard = ({
tag="span"
className="snap-settings-card__version"
>
- v {version}
+ {t('shorthandVersion', [version])}
>
)}
diff --git a/ui/components/app/permissions-connect-header/permissions-connect-header.component.js b/ui/components/app/permissions-connect-header/permissions-connect-header.component.js
index 33dc5f3b8..c5ddf0110 100644
--- a/ui/components/app/permissions-connect-header/permissions-connect-header.component.js
+++ b/ui/components/app/permissions-connect-header/permissions-connect-header.component.js
@@ -5,12 +5,24 @@ import Box from '../../ui/box';
import {
FLEX_DIRECTION,
JUSTIFY_CONTENT,
+ ///: BEGIN:ONLY_INCLUDE_IN(flask)
+ COLORS,
+ TYPOGRAPHY,
+ TEXT_ALIGN,
+ ///: END:ONLY_INCLUDE_IN
} from '../../../helpers/constants/design-system';
///: BEGIN:ONLY_INCLUDE_IN(flask)
import SnapsAuthorshipPill from '../flask/snaps-authorship-pill';
+import Typography from '../../ui/typography';
///: END:ONLY_INCLUDE_IN
export default class PermissionsConnectHeader extends Component {
+ ///: BEGIN:ONLY_INCLUDE_IN(flask)
+ static contextTypes = {
+ t: PropTypes.func,
+ };
+ ///: END:ONLY_INCLUDE_IN
+
static propTypes = {
iconUrl: PropTypes.string,
iconName: PropTypes.string.isRequired,
@@ -20,6 +32,7 @@ export default class PermissionsConnectHeader extends Component {
headerText: PropTypes.string,
///: BEGIN:ONLY_INCLUDE_IN(flask)
npmPackageName: PropTypes.string,
+ snapVersion: PropTypes.string,
///: END:ONLY_INCLUDE_IN
};
@@ -47,10 +60,12 @@ export default class PermissionsConnectHeader extends Component {
headerText,
///: BEGIN:ONLY_INCLUDE_IN(flask)
npmPackageName,
+ snapVersion,
///: END:ONLY_INCLUDE_IN
} = this.props;
///: BEGIN:ONLY_INCLUDE_IN(flask)
const npmPackageUrl = `https://www.npmjs.com/package/${npmPackageName}`;
+ const { t } = this.context;
///: END:ONLY_INCLUDE_IN
return (
+ {t('shorthandVersion', [snapVersion])}
+
+ )
+ ///: END:ONLY_INCLUDE_IN
+ }
{headerText}
);
diff --git a/ui/pages/permissions-connect/flask/snap-install/index.scss b/ui/pages/permissions-connect/flask/snap-install/index.scss
index 5d692bb06..b15fe2aa6 100644
--- a/ui/pages/permissions-connect/flask/snap-install/index.scss
+++ b/ui/pages/permissions-connect/flask/snap-install/index.scss
@@ -22,6 +22,10 @@
}
}
+ .version {
+ font-family: monospace;
+ }
+
.page-container__footer {
width: 100%;
}
diff --git a/ui/pages/permissions-connect/flask/snap-install/snap-install.js b/ui/pages/permissions-connect/flask/snap-install/snap-install.js
index 950f8d317..497ca45af 100644
--- a/ui/pages/permissions-connect/flask/snap-install/snap-install.js
+++ b/ui/pages/permissions-connect/flask/snap-install/snap-install.js
@@ -75,16 +75,18 @@ export default function SnapInstall({
headerText={null} // TODO(ritave): Add header text when snaps support description
siteOrigin={targetSubjectMetadata.origin}
npmPackageName={npmId}
+ snapVersion={targetSubjectMetadata.version}
boxProps={{ alignItems: ALIGN_ITEMS.CENTER }}
/>
-
-
- {t('snapRequestsPermission')}
-
+ {t('snapRequestsPermission')}
+
@@ -149,5 +151,6 @@ SnapInstall.propTypes = {
name: PropTypes.string,
origin: PropTypes.string.isRequired,
sourceCode: PropTypes.string,
+ version: PropTypes.string,
}).isRequired,
};