feat(coinview): add notice about funds conversion (#6247)

config/mocks/wallet-options-v4.json

@@ -86,7 +86,8 @@
         "useVgsProvider": true,
         "walletConnect": true,
         "walletDebitCardEnabled": true,
-        "proveEnabled": true
+        "proveEnabled": true,
+        "fiatTransformAlertEnabled": true
       }
     }
   },

packages/blockchain-wallet-v4-frontend/src/data/modules/profile/selectors.ts

@@ -87,6 +87,8 @@ export const getKycDocResubmissionStatus = compose(
   lift(path(['resubmission', 'reason'])),
   getUserData
 )
+export const getUserLegalEntity = (state: RootState) =>
+  state.profile.userData.map((e) => e.userLegalEntity).getOrElse(undefined)
 
 export const getTiers = path(['profile', 'userTiers'])
 export const getTier = curry((state, tierIndex) =>

packages/blockchain-wallet-v4-frontend/src/data/modules/profile/types.ts

@@ -102,6 +102,8 @@ export type UserTradingCurrencies = {
   userFiatCurrencies: WalletFiatType[]
 }
 
+type UserLegalEntities = 'BC_BVI_2' | 'BC_INT' | 'BC_LT' | 'BC_LT_2' | 'BC_NG' | 'BC_US'
+
 export type UserDataType = {
   address?: NabuAddressType
   currencies: UserTradingCurrencies
@@ -120,6 +122,7 @@ export type UserDataType = {
   state: UserActivationStateType
   tags: TagsType
   tiers: Tiers
+  userLegalEntity: UserLegalEntities
   userName?: string
   walletAddresses: {}
   walletGuid: string

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

@@ -8,6 +8,7 @@ import { Field } from 'redux-form'
 import styled from 'styled-components'
 
 import { coinToString, fiatToString } from '@core/exchange/utils'
+import { getFiatTransformAlertEnabled } from '@core/redux/walletOptions/selectors'
 import {
   AddressTypesType,
   CoinfigType,
@@ -23,6 +24,7 @@ import FiatDisplay from 'components/Display/FiatDisplay'
 import SelectBox from 'components/Form/SelectBox'
 import { actions } from 'data'
 import { convertBaseToStandard } from 'data/components/exchange/services'
+import { getUserLegalEntity } from 'data/modules/profile/selectors'
 import { ModalName } from 'data/types'
 import { media } from 'services/styles'
 
@@ -36,7 +38,7 @@ const Wrapper = styled.div`
   z-index: 2;
   margin-right: 30px;
 
-  ${media.laptop`
+  ${media.laptopL`
     width: auto;
     margin-right: 0px;
   `}
@@ -50,11 +52,6 @@ const FiatNoticeWrapper = styled(Wrapper)`
   padding: 1rem;
   background-color: ${(props) => props.theme.grey000};
   border-radius: 0.5rem;
-
-  ${media.laptop`
-    width: auto;
-    margin-right: 0px;
-  `}
 `
 
 const DisplayContainer = styled.div<{ isItem?: boolean }>`
@@ -366,8 +363,28 @@ class WalletBalanceDropdown extends Component<Props> {
     )
   }
 
+  showFiatTransformAlert = ({ userLegalEntity, ...rest }, coinfig: CoinfigType) => {
+    const balance = this.coinBalance(rest) || 0
+    // If not FIAT nor has balance, do not show
+    if (coinfig.type.name !== 'FIAT' || balance <= 0) return false
+
+    // Non BC_US with USD balance
+    const NON_BC_US_WITH_USD = userLegalEntity !== 'BC_US' && coinfig.displaySymbol === 'USD'
+    // Non BC_LT/BC_LT_2 with EUR/GBP balance
+    const ANY_BC_LT_WITH_EUR_GBP =
+      !userLegalEntity?.includes('BC_LT') && ['EUR', 'GBP'].includes(coinfig.displaySymbol)
+
+    return NON_BC_US_WITH_USD || ANY_BC_LT_WITH_EUR_GBP
+  }
+
   render() {
-    return this.props.data.cata({
+    const { coin, data, fiatTransformAlertEnabled } = this.props
+    const { coinfig } = window.coins[coin]
+
+    const showChangeAlert =
+      fiatTransformAlertEnabled && this.showFiatTransformAlert(this.props, coinfig)
+
+    return data.cata({
       Failure: (e) => <Text>{typeof e === 'string' ? e : 'Unknown Error'}</Text>,
       Loading: () => <Loading />,
       NotAsked: () => <Loading />,
@@ -391,6 +408,25 @@ class WalletBalanceDropdown extends Component<Props> {
                 templateItem={this.renderItem}
               />
             </Wrapper>
+
+            {showChangeAlert && (
+              <FiatNoticeWrapper>
+                <Text
+                  weight={600}
+                  size='14px'
+                  lineHeight='21px'
+                  style={{ marginBottom: '8px' }}
+                  color='grey900'
+                >
+                  Changes to {coin} Balances
+                </Text>
+                <Text size='12px' color='grey900'>
+                  Your {coinfig.name} ({coin}) balance will be converted to USDC daily at 12:00 am
+                  UTC. To avoid any inconvenience, buy crypto or initiate a withdrawal before the
+                  specified time.
+                </Text>
+              </FiatNoticeWrapper>
+            )}
           </>
         )
       }
@@ -399,7 +435,9 @@ class WalletBalanceDropdown extends Component<Props> {
 }
 
 const mapStateToProps = (state, ownProps) => ({
-  data: getData(state, ownProps)
+  data: getData(state, ownProps),
+  fiatTransformAlertEnabled: getFiatTransformAlertEnabled(state),
+  userLegalEntity: getUserLegalEntity(state)
 })
 
 const mapDispatchToProps = (dispatch: Dispatch) => ({

packages/blockchain-wallet-v4/src/redux/walletOptions/selectors.ts

@@ -232,6 +232,8 @@ export const getImportedAddressSweep = (state: RootState) =>
 export const getProveEnabled = (state: RootState) =>
   getWebOptions(state).map(path(['featureFlags', 'proveEnabled']))
 
+export const getFiatTransformAlertEnabled = (state: RootState) =>
+  getWebOptions(state).map(path(['featureFlags', 'fiatTransformAlertEnabled']))
 // sofi
 // sofi associate before email verification
 export const getAssociateSofiBeforeEmailVerification = (state: RootState) =>