Fix confirm address on device (for BTC-like cryptos)

relatable: https://ledgerhq.atlassian.net/secure/RapidBoard.jspa?rapidView=17&modal=detail&selectedIssue=LIVE-113

src/components/CurrentAddressForAccount.js

@@ -0,0 +1,22 @@
+// @flow
+
+import React from 'react'
+import type { Account } from '@ledgerhq/live-common/lib/types'
+
+import CurrentAddress from 'components/CurrentAddress'
+
+type Props = {
+  account: Account,
+}
+
+export default function CurrentAddressForAccount(props: Props) {
+  const { account, ...p } = props
+
+  // TODO: handle other cryptos than BTC-like
+  let freshAddress = account.addresses[0]
+  if (!freshAddress) {
+    freshAddress = { str: '', path: '' }
+  }
+
+  return <CurrentAddress accountName={account.name} address={freshAddress.str} {...p} />
+}

src/components/DeviceCheckAddress.js

@@ -27,35 +27,34 @@ class CheckAddress extends PureComponent<Props, State> {
     this.verifyAddress({ device, account })
   }
 
-  componentDidUnmount() {
-    if (this.sub) this.sub.unsubscribe()
-  }
+  verifyAddress = async ({ device, account }: { device: Device, account: Account }) => {
+    try {
+      // TODO: this will work only for BTC-like accounts
+      const freshAddress = account.addresses[0]
+      if (!freshAddress) {
+        throw new Error('Account doesnt have fresh addresses')
+      }
+
+      const { address } = await getAddress
+        .send({
+          currencyId: account.currency.id,
+          devicePath: device.path,
+          path: freshAddress.path,
+          segwit: account.isSegwit,
+          verify: true,
+        })
+        .toPromise()
 
-  sub: *
+      if (address !== freshAddress.str) {
+        throw new Error('Confirmed address is different')
+      }
 
-  verifyAddress = ({ device, account }: { device: Device, account: Account }) => {
-    this.sub = getAddress
-      .send({
-        currencyId: account.currency.id,
-        devicePath: device.path,
-        path: account.path,
-        segwit: account.isSegwit,
-        verify: true,
-      })
-      .subscribe({
-        next: () => {
-          this.setState({
-            isVerified: true,
-          })
-          this.props.onCheck(true)
-        },
-        error: () => {
-          this.setState({
-            isVerified: false,
-          })
-          this.props.onCheck(false)
-        },
-      })
+      this.setState({ isVerified: true })
+      this.props.onCheck(true)
+    } catch (err) {
+      this.setState({ isVerified: false })
+      this.props.onCheck(false)
+    }
   }
 
   render() {

src/components/modals/Receive/03-step-confirm-address.js

@@ -7,7 +7,7 @@ import type { Account } from '@ledgerhq/live-common/lib/types'
 import type { Device, T } from 'types/common'
 
 import Box from 'components/base/Box'
-import CurrentAddress from 'components/CurrentAddress'
+import CurrentAddressForAccount from 'components/CurrentAddressForAccount'
 import DeviceConfirm from 'components/DeviceConfirm'
 import DeviceCheckAddress from 'components/DeviceCheckAddress'
 
@@ -50,7 +50,7 @@ export default (props: Props) => (
       <Fragment>
         <Title>{props.t('receive:steps.confirmAddress.action')}</Title>
         <Text>{props.t('receive:steps.confirmAddress.text')}</Text>
-        {props.account && <CurrentAddress address={props.account.address} />}
+        {props.account && <CurrentAddressForAccount account={props.account} />}
         {props.device &&
           props.account && (
             <Box mb={2} mt={-1}>

src/components/modals/Receive/04-step-receive-funds.js

@@ -6,7 +6,7 @@ import type { Account } from '@ledgerhq/live-common/lib/types'
 import type { T } from 'types/common'
 
 import Box from 'components/base/Box'
-import CurrentAddress from 'components/CurrentAddress'
+import CurrentAddressForAccount from 'components/CurrentAddressForAccount'
 import Label from 'components/base/Label'
 import RequestAmount from 'components/RequestAmount'
 
@@ -30,16 +30,17 @@ export default (props: Props) => (
         withMax={false}
       />
     </Box>
-    <CurrentAddress
-      accountName={props.account && props.account.name}
-      address={props.account && props.account.address}
-      addressVerified={props.addressVerified}
-      amount={props.amount}
-      onVerify={props.onVerify}
-      withBadge
-      withFooter
-      withQRCode
-      withVerify={props.addressVerified === false}
-    />
+    {props.account && (
+      <CurrentAddressForAccount
+        account={props.account}
+        addressVerified={props.addressVerified}
+        amount={props.amount}
+        onVerify={props.onVerify}
+        withBadge
+        withFooter
+        withQRCode
+        withVerify={props.addressVerified === false}
+      />
+    )}
   </Box>
 )