validate transactions with nano x

src/components/modals/Send/steps/03-step-verification.js

@@ -9,6 +9,7 @@ import TrackPage from 'analytics/TrackPage'
 import Box from 'components/base/Box'
 import WarnBox from 'components/WarnBox'
 import DeviceConfirm from 'components/DeviceConfirm'
+import { i } from 'helpers/staticPath'
 
 import type { StepProps } from '../index'
 
@@ -17,6 +18,12 @@ const Info = styled(Box).attrs({ ff: 'Open Sans|SemiBold', color: 'dark', mt: 6,
   text-align: center;
 `
 
+const NanoXConfirm = () => (
+  <Box>
+    <img src={i('validation-nano-x.svg')} alt="nano x verification" />
+  </Box>
+)
+
 export default class StepVerification extends PureComponent<StepProps<*>> {
   componentDidMount() {
     this.signTransaction()
@@ -30,13 +37,13 @@ export default class StepVerification extends PureComponent<StepProps<*>> {
   }
 
   render() {
-    const { t } = this.props
+    const { t, device } = this.props
     return (
       <Container>
         <TrackPage category="Send Flow" name="Step 3" />
         <WarnBox>{multiline(t('send.steps.verification.warning'))}</WarnBox>
         <Info>{t('send.steps.verification.body')}</Info>
-        <DeviceConfirm />
+        {device && device.modelId === 'nanoX' ? <NanoXConfirm /> : <DeviceConfirm />}
       </Container>
     )
   }

static/images/validation-nano-x.svg

@@ -0,0 +1,51 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="374" height="87" viewBox="0 0 374 87">
+    <defs>
+        <linearGradient id="a" x1="50%" x2="50%" y1="0%" y2="100%">
+            <stop offset="0%" stop-color="#4F87FF" stop-opacity="0"/>
+            <stop offset="100%" stop-color="#4B84FF"/>
+        </linearGradient>
+        <path id="b" d="M13.62 2.608l-8.22 8.22-3.02-3.02a.375.375 0 0 0-.53 0l-.884.884a.375.375 0 0 0 0 .53l4.169 4.17a.375.375 0 0 0 .53 0l9.37-9.37a.375.375 0 0 0 0-.53l-.884-.884a.375.375 0 0 0-.53 0z"/>
+        <linearGradient id="d" x1="50%" x2="50%" y1="98.633%" y2="0%">
+            <stop offset="0%" stop-color="#FFF"/>
+            <stop offset="100%" stop-color="#142533"/>
+        </linearGradient>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <g transform="translate(100 45)">
+            <rect width="271.606" height="39.606" x="1.197" y="1.197" fill="#6490F1" fill-opacity=".12" stroke="#142533" stroke-width="2.394" rx="6.227"/>
+            <path fill="#FFF" stroke="#142533" stroke-width="2.394" d="M135 1.197c-10.937 0-19.803 8.866-19.803 19.803 0 10.937 8.866 19.803 19.803 19.803h135A2.803 2.803 0 0 0 272.803 38V4A2.803 2.803 0 0 0 270 1.197H135z"/>
+            <circle cx="135" cy="21" r="10.5" stroke="#142533" stroke-linejoin="square"/>
+            <circle cx="135" cy="21" r="11.5" stroke="#D8D8D8"/>
+            <g>
+                <circle cx="25" cy="21" r="10.5" stroke="#142533" stroke-linejoin="square"/>
+                <circle cx="25" cy="21" r="11.5" stroke="#6490F1" stroke-opacity=".2"/>
+            </g>
+        </g>
+        <g transform="translate(120)">
+            <circle cx="5" cy="66" r="5.265" fill="#4B84FF" fill-opacity=".2" stroke="#4B84FF" stroke-opacity=".6" stroke-width=".531"/>
+            <circle cx="5" cy="66" r="2" fill="#4B84FF" stroke="#4B84FF" stroke-width=".8"/>
+            <path fill="url(#a)" fill-rule="nonzero" d="M5.5 64h-1V0h1z"/>
+        </g>
+        <g transform="translate(230)">
+            <circle cx="5" cy="66" r="5.265" fill="#4B84FF" fill-opacity=".2" stroke="#4B84FF" stroke-opacity=".6" stroke-width=".531"/>
+            <circle cx="5" cy="66" r="2" fill="#4B84FF" stroke="#4B84FF" stroke-width=".8"/>
+            <path fill="url(#a)" fill-rule="nonzero" d="M5.5 64h-1V0h1z"/>
+        </g>
+        <g transform="translate(142 51)">
+            <rect width="65" height="29" x=".5" y=".5" fill="#FFF" fill-opacity=".8" stroke="#6490F1" stroke-opacity=".2" rx="2"/>
+            <g transform="translate(25 7)">
+                <mask id="c" fill="#fff">
+                    <use xlink:href="#b"/>
+                </mask>
+                <use fill="#142533" xlink:href="#b"/>
+                <g fill="#66BE54" mask="url(#c)">
+                    <path d="M0 0h16v16H0z"/>
+                </g>
+            </g>
+        </g>
+        <g stroke-width="2">
+            <path stroke="url(#d)" d="M10 53h.778L10 52.222V52l-.111.111L9.778 52v.222L9 53h.778v48H9l.778.778V102l.11-.111L10 102v-.222l.778-.778H10V53zm6.222 0H17l-.778-.778V52l-.11.111L16 52v.222l-.778.778H16v48h-.778l.778.778V102l.111-.111.111.111v-.222L17 101h-.778V53z" transform="matrix(0 -1 -1 0 102 79)"/>
+            <path stroke="#142533" d="M63 71H49.2a.2.2 0 0 1-.2-.2v-9.6c0-.11.09-.2.2-.2H63v10zM101 76.6a1.4 1.4 0 0 1-1.4 1.4H69.2a6.2 6.2 0 0 1-6.2-6.2V60.2a6.2 6.2 0 0 1 6.2-6.2h30.4a1.4 1.4 0 0 1 1.4 1.4v21.2z"/>
+        </g>
+    </g>
+</svg>