fix(interest): move legal discalimer to tooltip

blockchain · Jun 1, 2020 · a9dc7af · a9dc7af
1 parent 411d7a0
commit a9dc7af
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 26 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts b/packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts
@@ -1530,6 +1530,7 @@ type MessagesType = {
   'scenes.interest.history.header': 'History'
   'scenes.interest.history.type': 'Type'
   'scenes.interest.interestaccount': 'Interest Account'
+  'scenes.interest.legaldiscalimer': 'Legal disclaimer'
   'scenes.interest.legal.one': 'Digital/virtual currencies are not bank deposits, are not legal tender, are not backed by the government, and accounts and value balances are not subject to US Federal Deposit Insurance Corporation or Securities Investor Protection Corporation or any other non-US governmental or government-backed protections.'
   'scenes.interest.legal.two': 'Legislative and regulatory changes or actions at the US State, Federal, or international level may adversely affect the use, transfer, exchange, and value of digital/virtual currencies.'
   'scenes.interest.userblocked': 'Blockchain Interest Account is currently not available in your country or region.'

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Tooltips/index.js b/packages/blockchain-wallet-v4-frontend/src/components/Tooltips/index.js
@@ -156,6 +156,22 @@ class Tooltips extends React.PureComponent {
             defaultMessage='When you send bitcoin, your Blockchain wallet automatically selects addresses to spend from. That is why the current balance of an address can be different from the total received value.'
           />
         </Tooltip>
+        <Tooltip id='scenes.interest.legaldisclaimer'>
+          <TextGroup block style={{ paddingTop: '8px' }}>
+            <Text size='12px' weight={500} color='white'>
+              <FormattedMessage
+                id='scenes.interest.legal.one'
+                defaultMessage='Digital/virtual currencies are not bank deposits, are not legal tender, are not backed by the government, and accounts and value balances are not subject to US Federal Deposit Insurance Corporation or Securities Investor Protection Corporation or any other non-US governmental or government-backed protections.'
+              />
+            </Text>
+            <Text size='12px' weight={500} color='white'>
+              <FormattedMessage
+                id='scenes.interest.legal.two'
+                defaultMessage='Legislative and regulatory changes or actions at the US State, Federal, or international level may adversely affect the use, transfer, exchange, and value of digital/virtual currencies.'
+              />
+            </Text>
+          </TextGroup>
+        </Tooltip>
         <Tooltip id='sendbtc.firststep.sharetooltip'>
           <FormattedMessage
             id='modals.sendbtc.firststep.sharetooltip'

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Interest/TransactionList/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Interest/TransactionList/index.tsx
@@ -18,7 +18,6 @@ import { RatesType } from 'data/components/borrow/types'
 import TransactionList from './template.success'
 
 const History = styled.div`
-  margin-top: 48px;
   max-width: 1200px;
 `
 

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Interest/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Interest/index.tsx
@@ -12,7 +12,13 @@ import {
   SupportedCoinsType
 } from 'core/types'
 import { Container } from 'components/Box'
-import { Icon, Link, SkeletonRectangle, Text } from 'blockchain-info-components'
+import {
+  Icon,
+  Link,
+  SkeletonRectangle,
+  Text,
+  TooltipHost
+} from 'blockchain-info-components'
 import {
   IconBackground,
   SceneHeader,
@@ -45,35 +51,31 @@ const LearnMoreText = styled(Text)`
   font-weight: 500;
   color: ${props => props.theme.blue600};
 `
-const LegalTextWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  max-width: 250px;
-  margin-top: 8px;
-`
 const LegalText = styled(Text)`
-  font-size: 11px;
-  line-height: 14px;
-  margin-bottom: 10px;
-  font-weight: 400;
-  color: ${props => props.theme['grey500']};
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  max-width: 1200px;
+  margin-top: 50px;
 `
 const Legal = () => {
   return (
-    <LegalTextWrapper>
-      <LegalText>
-        <FormattedMessage
-          id='scenes.interest.legal.one'
-          defaultMessage='Digital/virtual currencies are not bank deposits, are not legal tender, are not backed by the government, and accounts and value balances are not subject to US Federal Deposit Insurance Corporation or Securities Investor Protection Corporation or any other non-US governmental or government-backed protections.'
-        />
-      </LegalText>
-      <LegalText>
+    <LegalText>
+      <TooltipHost id='scenes.interest.legaldisclaimer'>
+        <Icon name='info' size='12px' color='blue600' />
+      </TooltipHost>
+      <Text
+        size='12px'
+        color='blue600'
+        weight={500}
+        style={{ marginLeft: '5px' }}
+      >
         <FormattedMessage
-          id='scenes.interest.legal.two'
-          defaultMessage='Legislative and regulatory changes or actions at the US State, Federal, or international level may adversely affect the use, transfer, exchange, and value of digital/virtual currencies.'
+          id='scenes.interest.legaldiscalimer'
+          defaultMessage='Legal disclaimer'
         />
-      </LegalText>
-    </LegalTextWrapper>
+      </Text>
+    </LegalText>
   )
 }
 
@@ -159,8 +161,8 @@ class Interest extends React.PureComponent<Props, StateType> {
                     isGoldTier={isGoldTier}
                   />
                 )}
-                <Legal />
               </Container>
+              <Legal />
               <TransactionList />
             </LazyLoadWrapper>
           ),