blockchain · mperdomo-bc · Dec 12, 2023 · Dec 11, 2023
@@ -83,7 +83,9 @@
         "useNewPaymentProviders": true,
         "useVgsProvider": true,
         "walletConnect": true,
-        "walletDebitCardEnabled": true
+        "walletDebitCardEnabled": true,
+        "proveEnabled": true,
+        "fiatTransformAlertEnabled": true
       }
     }
   },

@@ -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) =>

@@ -101,6 +101,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
@@ -119,6 +121,7 @@ export type UserDataType = {
   state: UserActivationStateType
   tags: TagsType
   tiers: Tiers
+  userLegalEntity: UserLegalEntities
   userName?: string
   walletAddresses: {}
   walletGuid: string

@@ -14,8 +14,6 @@ import { PriceChange } from '../../model'
 import { getData } from './selectors'
 
 class UserPortfolioPositionChange extends PureComponent<Props> {
-  state = {}
-
   componentDidMount() {
     this.props.miscActions.fetchPriceChange(
       this.props.coin,

@@ -8,8 +8,10 @@ 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,
   CoinType,
   ExtractSuccess,
   FiatType,
@@ -22,16 +24,34 @@ 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'
 
 import { getData } from './selectors'
 import Loading from './template.loading'
 import UserPortfolioPositionChange from './UserPortfolioPositionChange'
 
 const Wrapper = styled.div`
+  width: 320px;
+  min-width: 320px;
+  z-index: 2;
+  margin-right: 30px;
+
+  ${media.laptopL`
+    width: auto;
+    margin-right: 0px;
+  `}
+`
+
+const FiatNoticeWrapper = styled(Wrapper)`
+  width: 335px;
   display: flex;
   flex-direction: column;
-  align-content: flex-start;
+  justify-content: space-evenly;
+  padding: 1rem;
+  background-color: ${(props) => props.theme.grey000};
+  border-radius: 0.5rem;
 `
 
 const DisplayContainer = styled.div<{ isItem?: boolean }>`
@@ -276,7 +296,7 @@ class WalletBalanceDropdown extends Component<Props> {
     return (
       <DisplayContainer>
         <AccountContainer>
-          {children && children.length && children[1]}
+          {children?.length > 0 && children[1]}
           <Text weight={500} color='grey400'>
             {account} <FormattedMessage id='copy.balance' defaultMessage='Balance' />
           </Text>
@@ -343,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 />,
@@ -353,28 +393,51 @@ class WalletBalanceDropdown extends Component<Props> {
         const options = addressData.data
 
         return (
-          <Wrapper>
-            <Field
-              component={CoinSelect}
-              elements={options}
-              grouped
-              hideIndicator={!this.hasBalanceOrAccounts(options)}
-              openMenuOnClick={this.hasBalanceOrAccounts(options)}
-              options={options}
-              name='source'
-              searchEnabled={false}
-              templateDisplay={this.renderDisplay}
-              templateItem={this.renderItem}
-            />
-          </Wrapper>
+          <>
+            <Wrapper>
+              <Field
+                component={CoinSelect}
+                elements={options}
+                grouped
+                hideIndicator={!this.hasBalanceOrAccounts(options)}
+                openMenuOnClick={this.hasBalanceOrAccounts(options)}
+                options={options}
+                name='source'
+                searchEnabled={false}
+                templateDisplay={this.renderDisplay}
+                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>
+            )}
+          </>
         )
       }
     })
   }
 }
 
 const mapStateToProps = (state, ownProps) => ({
-  data: getData(state, ownProps)
+  data: getData(state, ownProps),
+  fiatTransformAlertEnabled: getFiatTransformAlertEnabled(state),
+  userLegalEntity: getUserLegalEntity(state)
 })
 
 const mapDispatchToProps = (dispatch: Dispatch) => ({

@@ -3,8 +3,6 @@ import styled from 'styled-components'
 
 import { SkeletonRectangle } from 'blockchain-info-components'
 
-type Props = {}
-
 const Wrapper = styled.div`
   height: 120px;
   width: 320px;
@@ -32,7 +30,7 @@ export const Skeletons = () => {
   )
 }
 
-const Loading: React.FC<Props> = () => {
+const Loading: React.FC = () => {
   return (
     <Wrapper>
       <Skeletons />

@@ -3,7 +3,7 @@ import { FormattedMessage } from 'react-intl'
 import { connect, ConnectedProps } from 'react-redux'
 import { RouteComponentProps } from 'react-router'
 import { NavLink } from 'react-router-dom'
-import { isEmpty, path, toLower } from 'ramda'
+import { path, toLower } from 'ramda'
 import { bindActionCreators, compose, Dispatch } from 'redux'
 import { reduxForm } from 'redux-form'
 import styled from 'styled-components'
@@ -75,32 +75,17 @@ const ExplainerWrapper = styled.div`
 `
 const StatsContainer = styled.div`
   display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  width: 100%;
   height: 120px;
   max-height: 120px;
   margin: 24px 0;
 
-  & > :first-child {
-    width: 320px;
-    min-width: 320px;
-    z-index: 2;
-    margin-right: 30px;
-  }
-
   ${media.laptop`
     height: auto;
     max-height: initial;
     flex-direction: column;
     margin: 12px 0;
 
-    & > :first-child {
-      width: auto;
-      margin-right: 0px;
-    }
-
-    & > :last-child {
+    & > :not(:first-child) {
       margin-top: 12px;
     }
   `}
@@ -172,12 +157,10 @@ class TransactionsContainer extends React.PureComponent<Props> {
     } = this.props
     const { coin } = computedMatch.params
     const { coinfig } = window.coins[coin]
-    const interestEligibleCoin =
-      !isEmpty(interestEligible) && interestEligible[coin] && interestEligible[coin]?.eligible
-    const stakingEligibleCoin =
-      !isEmpty(stakingEligible) && stakingEligible[coin] && stakingEligible[coin]?.eligible
+    const interestEligibleCoin = interestEligible?.[coin]?.eligible
+    const stakingEligibleCoin = stakingEligible?.[coin]?.eligible
     const isEarnButtonEnabled = isGoldTier && (interestEligibleCoin || stakingEligibleCoin)
-    const isEarnSourceType = sourceType && (sourceType === 'INTEREST' || sourceType === 'STAKING')
+    const isEarnSourceType = sourceType === 'INTEREST' || sourceType === 'STAKING'
 
     return (
       <SceneWrapper>
@@ -359,8 +342,7 @@ const mapDispatchToProps = (dispatch: Dispatch, ownProps: OwnProps) => {
     buySellActions: bindActionCreators(actions.components.buySell, dispatch),
     interestActions: bindActionCreators(actions.components.interest, dispatch),
     miscActions: bindActionCreators(actions.core.data.misc, dispatch),
-    recurringBuyActions: bindActionCreators(actions.components.recurringBuy, dispatch),
-    withdrawActions: bindActionCreators(actions.components.withdraw, dispatch)
+    recurringBuyActions: bindActionCreators(actions.components.recurringBuy, dispatch)
   }
   if (selectors.core.data.coins.getErc20Coins().includes(coin)) {
     return {

@@ -226,3 +226,6 @@ export const getImportedAddressSweep = (state: RootState) =>
 // prove
 export const getProveEnabled = (state: RootState) =>
   getWebOptions(state).map(path(['featureFlags', 'proveEnabled']))
+
+export const getFiatTransformAlertEnabled = (state: RootState) =>
+  getWebOptions(state).map(path(['featureFlags', 'fiatTransformAlertEnabled']))