feat(keys): add legacy keys

blockchain · Apr 24, 2020 · 0c1f7aa · 0c1f7aa
1 parent bee10df
commit 0c1f7aa
Show file tree

Hide file tree

Showing 3 changed files with 132 additions and 58 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Settings/Addresses/Eth/index.js b/packages/blockchain-wallet-v4-frontend/src/scenes/Settings/Addresses/Eth/index.js
@@ -28,8 +28,8 @@ class ShowEthPrivateKeyContainer extends Component {
   render () {
     return (
       <ShowEthPrivateKeyTemplate
-        {...this.props}
-        privateKey={this.props.priv}
+        addressInfo={this.props.addressInfo}
+        legacyAddressInfo={this.props.legacyAddressInfo}
         showQrCode={this.state.showQrCode}
         toggleQrCode={this.toggleQrCode}
       />

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Settings/Addresses/Eth/selectors.js b/packages/blockchain-wallet-v4-frontend/src/scenes/Settings/Addresses/Eth/selectors.js
@@ -7,17 +7,27 @@ export const getData = (state, props) => {
     .getLegacyAccountAddress(state)
     .getOrElse('')
 
+  const legacyAddressInfo = {
+    addr: legacyEthAddr,
+    balance: selectors.core.data.eth.getLegacyBalance(state).getOrElse(0),
+    priv: state.securityCenter.shownEthPrivKey
+  }
+
+  const addressInfo = {
+    addr: ethKvStoreSelectors.getContext(state).getOrElse(''),
+    balance: getEthBalance(state).getOrElse(0),
+    priv: state.securityCenter.shownEthPrivKey
+  }
+
   return legacyEthAddr
     ? {
-        addr: legacyEthAddr,
-        isLegacy: true,
-        balance: selectors.core.data.eth.getLegacyBalance(state).getOrElse(0),
-        priv: state.securityCenter.shownEthPrivKey
+        legacyAddressInfo: legacyAddressInfo,
+        addressInfo: addressInfo,
+        isLegacy: true
       }
     : {
-        addr: ethKvStoreSelectors.getContext(state).getOrElse(''),
-        isLegacy: false,
-        balance: getEthBalance(state).getOrElse(0),
-        priv: state.securityCenter.shownEthPrivKey
+        legacyAddressInfo: null,
+        addressInfo: addressInfo,
+        isLegacy: false
       }
 }
diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Settings/Addresses/Eth/template.js b/packages/blockchain-wallet-v4-frontend/src/scenes/Settings/Addresses/Eth/template.js
@@ -1,4 +1,5 @@
 import { FormattedMessage } from 'react-intl'
+import { prop } from 'ramda'
 import { Text } from 'blockchain-info-components'
 import CoinDisplay from 'components/Display/CoinDisplay'
 import media from 'services/ResponsiveService'
@@ -24,6 +25,11 @@ const KeyWrapper = styled.div`
   padding-right: 1.5rem;
 `
 
+const DualWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
 const DetailTable = styled.div`
   margin-top: 1.5rem;
 
@@ -54,61 +60,119 @@ const CodeWrapper = styled(Wrapper)`
 `
 
 const EthAddresses = ({
-  addr,
-  balance,
-  privateKey,
+  addressInfo,
+  legacyAddressInfo,
   showQrCode,
   toggleQrCode
 }) => (
   <Wrapper color='grey000' showQrCode={showQrCode}>
     <ViewKeys showQrCode={showQrCode} toggleQrCode={toggleQrCode} />
     {showQrCode && (
-      <KeyWrapper>
-        <CodeWrapper>
-          <QRCodeWrapper value={privateKey} size={230} />
-        </CodeWrapper>
-        <DetailTable>
-          <DetailColumn>
-            <DetailRowText color='grey600' size='12px' weight={500}>
-              <FormattedMessage id='copy.balance' defaultMessage='Balance' />
-            </DetailRowText>
-            <CoinDisplay coin='ETH' size='14px' weight={600}>
-              {balance}
-            </CoinDisplay>
-          </DetailColumn>
-
-          <DetailColumn>
-            <DetailRowText color='grey600' size='12px' weight={500}>
-              <FormattedMessage id='copy.address' defaultMessage='Address' />
-            </DetailRowText>
-
-            <DataRowText
-              size='14px'
-              weight={600}
-              data-e2e='xlmPrivateKeyAddress'
-            >
-              {addr}
-            </DataRowText>
-          </DetailColumn>
-
-          <DetailColumn>
-            <DetailRowText color='grey600' size='12px' weight={500}>
-              <FormattedMessage
-                id='copy.private_key'
-                defaultMessage='Private Key'
+      <DualWrapper>
+        {legacyAddressInfo && (
+          <KeyWrapper>
+            <CodeWrapper>
+              <QRCodeWrapper
+                value={prop('priv', legacyAddressInfo)}
+                size={230}
               />
-            </DetailRowText>
-
-            <DataRowText
-              size='14px'
-              weight={600}
-              data-e2e='xlmPrivateKeyPrivKey'
-            >
-              {privateKey}
-            </DataRowText>
-          </DetailColumn>
-        </DetailTable>
-      </KeyWrapper>
+            </CodeWrapper>
+            <DetailTable>
+              <DetailColumn>
+                <DetailRowText color='grey600' size='12px' weight={500}>
+                  <FormattedMessage
+                    id='copy.balance'
+                    defaultMessage='Balance'
+                  />
+                </DetailRowText>
+                <CoinDisplay coin='ETH' size='14px' weight={600}>
+                  {prop('balance', legacyAddressInfo)}
+                </CoinDisplay>
+              </DetailColumn>
+
+              <DetailColumn>
+                <DetailRowText color='grey600' size='12px' weight={500}>
+                  <FormattedMessage
+                    id='copy.address'
+                    defaultMessage='Address'
+                  />
+                </DetailRowText>
+
+                <DataRowText
+                  size='14px'
+                  weight={600}
+                  data-e2e='xlmPrivateKeyAddress'
+                >
+                  {prop('addr', legacyAddressInfo)}
+                </DataRowText>
+              </DetailColumn>
+
+              <DetailColumn>
+                <DetailRowText color='grey600' size='12px' weight={500}>
+                  <FormattedMessage
+                    id='copy.private_key'
+                    defaultMessage='Private Key'
+                  />
+                </DetailRowText>
+
+                <DataRowText
+                  size='14px'
+                  weight={600}
+                  data-e2e='xlmPrivateKeyPrivKey'
+                >
+                  {prop('priv', legacyAddressInfo)}
+                </DataRowText>
+              </DetailColumn>
+            </DetailTable>
+          </KeyWrapper>
+        )}
+        <KeyWrapper>
+          <CodeWrapper>
+            <QRCodeWrapper value={prop('priv', addressInfo)} size={230} />
+          </CodeWrapper>
+          <DetailTable>
+            <DetailColumn>
+              <DetailRowText color='grey600' size='12px' weight={500}>
+                <FormattedMessage id='copy.balance' defaultMessage='Balance' />
+              </DetailRowText>
+              <CoinDisplay coin='ETH' size='14px' weight={600}>
+                {prop('balance', addressInfo)}
+              </CoinDisplay>
+            </DetailColumn>
+
+            <DetailColumn>
+              <DetailRowText color='grey600' size='12px' weight={500}>
+                <FormattedMessage id='copy.address' defaultMessage='Address' />
+              </DetailRowText>
+
+              <DataRowText
+                size='14px'
+                weight={600}
+                data-e2e='xlmPrivateKeyAddress'
+              >
+                {prop('addr', addressInfo)}
+              </DataRowText>
+            </DetailColumn>
+
+            <DetailColumn>
+              <DetailRowText color='grey600' size='12px' weight={500}>
+                <FormattedMessage
+                  id='copy.private_key'
+                  defaultMessage='Private Key'
+                />
+              </DetailRowText>
+
+              <DataRowText
+                size='14px'
+                weight={600}
+                data-e2e='xlmPrivateKeyPrivKey'
+              >
+                {prop('priv', addressInfo)}
+              </DataRowText>
+            </DetailColumn>
+          </DetailTable>
+        </KeyWrapper>
+      </DualWrapper>
     )}
   </Wrapper>
 )