Merge pull request #6354 from blockchain/feat/GROWUX-3484-fin-prom-message

feat(finproms): added info for investment risk

Author: milan-bc

lang/en.json

@@ -35,6 +35,8 @@
   "buttons.manage": "Manage",
   "buttons.next": "Next",
   "buttons.ok": "OK",
+  "buttons.read_more": "Read more",
+  "buttons.read_less": "Read less",
   "buttons.preview_swap": "Preview Swap",
   "buttons.receive": "Receive",
   "buttons.remove": "Remove",
@@ -1532,6 +1534,7 @@
   "scenes.borrow.warning.safe": "Your collateralization ratio is <span class=\"green600\">{currentRatio}</span>, no action needed at this time.",
   "scenes.borrow.warning.unsafe": "Your collateralization ratio is below {unsafeRatio}. Your loan is in danger of being liquidated.",
   "scenes.buysell.exchangecheckout.rate": "The rate offered by your region's exchange partner. May include fees.",
+  "scenes.coin.investement_risk.title": "Investment risk",
   "scenes.exchange.blockchain": "Exchange",
   "scenes.exchange.changeinput": "Change Input",
   "scenes.exchange.confirm.oopsheader": "Oops! Something went wrong.",

packages/blockchain-wallet-v4-frontend/src/scenes/CoinPage/components/CoinPage/CoinPage.tsx

@@ -36,7 +36,6 @@ export const CoinPage: CoinPageComponent = ({
 
             <ChartWrapper>{chart}</ChartWrapper>
           </Flex>
-
           {about}
           {activity}
         </Flex>

packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/RiskInvestment/Lines.styles.ts

@@ -0,0 +1,10 @@
+import styled from 'styled-components'
+
+export const ListContainer = styled.div<{
+  $isCollapsed: boolean
+}>`
+  overflow: hidden;
+  transition: max-height 0.3s ease;
+
+  max-height: ${(props) => (props.$isCollapsed ? '40px' : '200px')};
+`

packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/RiskInvestment/Lines.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from 'react'
+import { FormattedMessage } from 'react-intl'
+import { Button as ConstellationButton } from '@blockchain-com/constellation'
+
+import { Text } from 'blockchain-info-components'
+
+import { ListContainer } from './Lines.styles'
+
+type Props = {
+  lines: string[]
+}
+
+export const Lines = ({ lines }: Props) => {
+  const [isCollapsed, setIsCollapsed] = useState(true)
+
+  const toggleCollapse = () => {
+    setIsCollapsed(!isCollapsed)
+  }
+
+  return (
+    <div>
+      <ListContainer $isCollapsed={isCollapsed}>
+        <ul>
+          {lines.map((line) => (
+            <li key={line}>
+              <Text size='14px' weight={500} color='grey900' lineHeight='150%'>
+                {line}
+              </Text>
+            </li>
+          ))}
+        </ul>
+      </ListContainer>
+      <ConstellationButton
+        type='button'
+        variant='minimal'
+        onClick={toggleCollapse}
+        data-e2e='toggle-button'
+        size='small'
+        text={
+          isCollapsed ? (
+            <FormattedMessage defaultMessage='Read more' id='buttons.read_more' />
+          ) : (
+            <FormattedMessage defaultMessage='Read less' id='buttons.read_less' />
+          )
+        }
+      />
+    </div>
+  )
+}

packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/RiskInvestment/RiskInvestment.styles.ts

@@ -0,0 +1,39 @@
+import styled from 'styled-components'
+
+export const MainWrapper = styled.div<{
+  expanded: boolean
+}>`
+  margin: 20px 0 30px 0;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid ${(props) => props.theme.grey100};
+  border-radius: 16px;
+
+  overflow: hidden;
+  transition: max-height 0.3s ease;
+  max-height: ${({ expanded }) => (expanded ? '800px' : '50px')};
+`
+
+export const ContentWrapper = styled.div`
+  display: flex;
+  padding: 16px;
+  flex-direction: column;
+  gap: 8px;
+  border-bottom: 1px solid ${(props) => props.theme.grey100};
+
+  &:last-child {
+    border-bottom: none;
+  }
+`
+
+export const Title = styled.div`
+  padding: 16px;
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid ${(props) => props.theme.grey100};
+`
+
+export const Arrow = styled.div`
+  cursor: pointer;
+  transition: transform 0.3s ease;
+`

packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/RiskInvestment/data.json

@@ -0,0 +1,58 @@
+import React, { useState } from 'react'
+import { FormattedMessage } from 'react-intl'
+import { IconChevronDownV2, IconChevronUpV2 } from '@blockchain-com/constellation'
+
+import { AllCoinsType, Text } from 'blockchain-info-components'
+
+import data from './data.json'
+import { Lines } from './Lines'
+import { Arrow, ContentWrapper, MainWrapper, Title } from './RiskInvestment.styles'
+
+type Props = {
+  coin: AllCoinsType
+}
+
+export const RiskInvestment = ({ coin }: Props) => {
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  const toggleExpanded = () => {
+    setIsExpanded((prevExpanded) => !prevExpanded)
+  }
+
+  const coinData = data.find((d) => d.coin === coin)
+
+  if (!coinData) {
+    return null
+  }
+
+  return (
+    <MainWrapper expanded={isExpanded}>
+      <Title>
+        <Text size='16px' weight={600} color='grey900'>
+          <FormattedMessage
+            defaultMessage='Investment risk'
+            id='scenes.coin.investement_risk.title'
+          />
+        </Text>
+        <Arrow onClick={toggleExpanded}>
+          {isExpanded ? (
+            <IconChevronUpV2 label='up' size='small' />
+          ) : (
+            <IconChevronDownV2 label='down' size='small' />
+          )}
+        </Arrow>
+      </Title>
+      {coinData.sections.map((section) => (
+        <ContentWrapper key={coin + section.title}>
+          <Text size='14px' weight={600} color='grey900'>
+            {section.title}
+          </Text>
+          <Text size='14px' weight={500} color='grey900'>
+            {section.description}
+          </Text>
+          <Lines lines={section.lines} />
+        </ContentWrapper>
+      ))}
+    </MainWrapper>
+  )
+}

packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/RiskInvestment/index.tsx

@@ -28,6 +28,7 @@ import { media } from 'services/styles'
 import CoinIntroduction from './CoinIntroduction'
 import CoinPerformance from './CoinPerformance'
 import RecurringBuys from './RecurringBuys'
+import { RiskInvestment } from './RiskInvestment'
 import { getData } from './selectors'
 import TransactionFilters from './TransactionFilters'
 import TransactionList from './TransactionList'
@@ -152,6 +153,7 @@ class TransactionsContainer extends React.PureComponent<Props> {
       isSearchEntered,
       loadMoreTxs,
       pages,
+      showRiskInvestments,
       sourceType,
       stakingEligible
     } = this.props
@@ -319,6 +321,7 @@ class TransactionsContainer extends React.PureComponent<Props> {
                 sourceType={sourceType}
               />
             ))}
+          {showRiskInvestments && <RiskInvestment coin={coin} />}
         </LazyLoadContainer>
       </SceneWrapper>
     )
@@ -338,6 +341,8 @@ const mapDispatchToProps = (dispatch: Dispatch, ownProps: OwnProps) => {
     miscActions: bindActionCreators(actions.core.data.misc, dispatch),
     recurringBuyActions: bindActionCreators(actions.components.recurringBuy, dispatch)
   }
+  const isCustodialCoin = selectors.core.data.coins.getCustodialCoins().includes(coin)
+
   if (selectors.core.data.coins.getErc20Coins().includes(coin)) {
     return {
       ...baseActions,
@@ -346,10 +351,7 @@ const mapDispatchToProps = (dispatch: Dispatch, ownProps: OwnProps) => {
       loadMoreTxs: () => dispatch(actions.components.ethTransactions.loadMoreErc20(coin))
     }
   }
-  if (
-    selectors.core.data.coins.getCustodialCoins().includes(coin) ||
-    selectors.core.data.coins.getDynamicSelfCustodyCoins().includes(coin)
-  ) {
+  if (isCustodialCoin || selectors.core.data.coins.getDynamicSelfCustodyCoins().includes(coin)) {
     return {
       ...baseActions,
       fetchData: () => {},

packages/blockchain-wallet-v4-frontend/src/scenes/Transactions/index.tsx

@@ -114,6 +114,8 @@ export const getData = (state: RootState, ownProps: OwnProps) => {
   const userData = selectors.modules.profile.getUserData(state)
   const current = userData?.data?.tiers?.current || 0
   const isGoldTier = current >= 2
+  const signupCountry = selectors.signup.getSignupCountry(state)
+  const loginMetadata = selectors.auth.getProductAuthMetadata(state)
 
   return createSelector(
     [
@@ -136,6 +138,11 @@ export const getData = (state: RootState, ownProps: OwnProps) => {
             )
           : []
 
+      const ipCountry = loginMetadata?.ipCountry
+      const country = userData.data?.address?.country
+      const userCountry = country !== undefined ? country : ipCountry
+      const showRiskInvestments = userCountry === 'GB' || signupCountry === 'GB'
+
       return {
         coin,
         currency: currencyR.getOrElse(''),
@@ -148,6 +155,7 @@ export const getData = (state: RootState, ownProps: OwnProps) => {
         // @ts-ignore
         isSearchEntered: search.length > 0 || status !== '',
         pages: filteredPages,
+        showRiskInvestments,
         sourceType,
         stakingEligible: stakingEligibleR.getOrElse({})
       }