chore(merge): merge dev

packages/blockchain-wallet-v4-frontend/src/assets/locales/en.json

@@ -514,8 +514,8 @@
   "layouts.wallet.menuleft.navigation.borrow": "Borrow",
   "layouts.wallet.menuleft.navigation.earninterest": "Earn Interest",
   "layouts.wallet.menuleft.navigation.hardware": "Hardware",
-  "layouts.wallet.menutop.balance.walletbalance.showcrypto": "Show Crypto",
-  "layouts.wallet.menutop.balance.walletbalance.showfiat": "Show {currency}",
+  "layouts.wallet.menutop.balance.walletbalance.show.in.crypto": "Show in Crypto",
+  "layouts.wallet.menutop.balance.walletbalance.show.in.fiat": "Show in {currency}",
   "loader.message.gettingready": "Getting Ready...",
   "lockbox.service.messages.appalreadyinstalled": "App already installed",
   "lockbox.service.messages.btcrequired": "Unable to remove BTC app as it is required by others.",

packages/blockchain-wallet-v4-frontend/src/assets/locales/index.d.ts

@@ -616,8 +616,8 @@ type MessagesType = {
   'layouts.wallet.menuleft.navigation.swap': 'Swap'
   'layouts.wallet.menutop.balance.walletbalance.hardware': 'Hardware'
   'layouts.wallet.menutop.balance.walletbalance.nonspendable': 'Non-Spendable'
-  'layouts.wallet.menutop.balance.walletbalance.showcrypto': 'Show Crypto'
-  'layouts.wallet.menutop.balance.walletbalance.showfiat': 'Show {currency}'
+  'layouts.wallet.menutop.balance.walletbalance.show.in.crypto': 'Show in Crypto'
+  'layouts.wallet.menutop.balance.walletbalance.show.in.fiat': 'Show in {currency}'
   'layouts.wallet.menutop.balance.walletbalance.wallet': 'Wallet'
   'layouts.wallet.menutop.request': 'Request'
   'layouts.wallet.menutop.send': 'Send'

packages/blockchain-wallet-v4-frontend/src/data/components/brokerage/sagas.ts

@@ -98,8 +98,10 @@ export default ({
       if (typeof account === 'string' && bankCredentials) {
         // Yapily
         const domainsR = yield select(selectors.core.walletOptions.getDomains)
-        const { yapilyCallbackUrl } = domainsR.getOrElse({})
-        const callback = yapilyCallbackUrl || undefined
+        const { yapilyCallbackUrl } = domainsR.getOrElse({
+          yapilyCallbackUrl: 'https://www.blockchain.com/brokerage-link-success'
+        })
+        const callback = yapilyCallbackUrl
         bankId = bankCredentials.id
         attributes = { institutionId: account, callback }
       } else if (typeof account === 'object' && fastLink) {
@@ -325,7 +327,9 @@ export default ({
       selectors.components.brokerage.getAccount
     )
     const domainsR = yield select(selectors.core.walletOptions.getDomains)
-    const { yapilyCallbackUrl } = domainsR.getOrElse({})
+    const { yapilyCallbackUrl } = domainsR.getOrElse({
+      yapilyCallbackUrl: 'https://www.blockchain.com/brokerage-link-success'
+    })
     const callback = partner === 'YAPILY' ? yapilyCallbackUrl : undefined
     try {
       const data = yield call(

packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/reducers.ts

@@ -410,6 +410,7 @@ export function simpleBuyReducer(
             step: action.payload.step,
             sellOrder: action.payload.sellOrder
           }
+        case 'LOADING':
         default: {
           return {
             ...state,

packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/sagas.ts

@@ -428,9 +428,7 @@ export default ({
       orderId
     )
 
-    if (order.attributes?.authorisationUrl) {
-      return order
-    } else if (order.state === 'FAILED') {
+    if (order.attributes?.authorisationUrl || order.state === 'FAILED') {
       return order
     } else {
       throw new Error('retrying to fetch for AuthUrl')
@@ -442,9 +440,12 @@ export default ({
       api.getSBOrder,
       orderId
     )
-    if (order.state === 'FINISHED') {
-      return order
-    } else if (order.state === 'FAILED') {
+
+    if (
+      order.state === 'FINISHED' ||
+      order.state === 'FAILED' ||
+      order.state === 'CANCELED'
+    ) {
       return order
     } else {
       throw new Error('retrying to fetch for FINISHED order')
@@ -461,7 +462,8 @@ export default ({
       const account = selectors.components.brokerage.getAccount(yield select())
       const domainsR = selectors.core.walletOptions.getDomains(yield select())
       const domains = domainsR.getOrElse({
-        walletHelper: 'https://wallet-helper.blockchain.com'
+        walletHelper: 'https://wallet-helper.blockchain.com',
+        yapilyCallbackUrl: 'https://www.blockchain.com/brokerage-link-success'
       } as WalletOptionsType['domains'])
 
       let attributes
@@ -478,7 +480,7 @@ export default ({
               }
             : undefined
       } else if (account?.partner === 'YAPILY') {
-        attributes = { callback: domains.yapilyCallbackUrl || undefined }
+        attributes = { callback: domains.yapilyCallbackUrl }
       }
 
       let confirmedOrder: SBOrderType = yield call(
@@ -491,6 +493,7 @@ export default ({
       if (account?.partner === 'YAPILY') {
         // for OB the authorisationUrl isn't in the initial response to confirm
         // order. We need to poll the order for it.
+        yield put(A.setStep({ step: 'LOADING' }))
         const order = yield retry(
           RETRY_AMOUNT,
           SECONDS * 1000,

packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/types.ts

@@ -74,6 +74,7 @@ export enum SimpleBuyStepType {
   'ENTER_AMOUNT',
   'KYC_REQUIRED',
   'LINKED_PAYMENT_ACCOUNTS',
+  'LOADING',
   'OPEN_BANKING_CONNECT',
   'PAYMENT_METHODS',
   'PREVIEW_SELL',
@@ -435,6 +436,7 @@ export type StepActionsPayload =
         | 'CC_BILLING_ADDRESS'
         | 'KYC_REQUIRED'
         | 'UPGRADE_TO_GOLD'
+        | 'LOADING'
     }
 
 interface SetStepAction {

packages/blockchain-wallet-v4-frontend/src/layouts/Wallet/MenuLeft/Balances/CurrencySwitch/index.tsx

@@ -0,0 +1,80 @@
+import React from 'react'
+import { FormattedMessage } from 'react-intl'
+import { connect, ConnectedProps } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import styled from 'styled-components'
+
+import { Button, Text } from 'blockchain-info-components'
+import { actions, selectors } from 'data'
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  justify-content: center;
+  margin: 12px 0 20px;
+`
+
+const SwitchButton = styled(Button)`
+  width: 200px;
+  height: 30px;
+  padding: 0;
+
+  &:hover {
+    border: 1px solid ${props => props.theme.blue600};
+    background-color: transparent;
+  }
+`
+const ButtonText = styled(Text)`
+  color: ${props => props.theme.blue600};
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 150%;
+`
+
+const CurrencySwitchContainer = ({
+  coinDisplayed,
+  preferencesActions,
+  settings
+}: Props) => {
+  const { currency } = settings.getOrElse({})
+
+  return (
+    <Wrapper>
+      <SwitchButton
+        onClick={preferencesActions.toggleCoinDisplayed}
+        data-e2e='balanceDropdown-currency-switch'
+      >
+        <ButtonText>
+          {coinDisplayed ? (
+            <FormattedMessage
+              id='layouts.wallet.menutop.balance.walletbalance.show.in.fiat'
+              defaultMessage='Show in {currency}'
+              values={{ currency: currency }}
+            />
+          ) : (
+            <FormattedMessage
+              id='layouts.wallet.menutop.balance.walletbalance.show.in.crypto'
+              defaultMessage='Show in Crypto'
+            />
+          )}
+        </ButtonText>
+      </SwitchButton>
+    </Wrapper>
+  )
+}
+
+const mapStateToProps = state => ({
+  settings: selectors.core.settings.getSettings(state),
+  coinDisplayed: selectors.preferences.getCoinDisplayed(state)
+})
+
+const mapDispatchToProps = dispatch => ({
+  preferencesActions: bindActionCreators(actions.preferences, dispatch)
+})
+
+const connector = connect(mapStateToProps, mapDispatchToProps)
+
+type Props = ConnectedProps<typeof connector>
+
+export default connector(CurrencySwitchContainer)

packages/blockchain-wallet-v4-frontend/src/modals/Brokerage/Banks/Deposit/DepositStatus/template.success.tsx

@@ -64,7 +64,7 @@ const DescriptionText = styled(Text)`
 type Props = OwnProps & SuccessStateType
 
 const Success = props => {
-  const coin = props.fiatCurrency || 'USD'
+  const coin = props.formValues?.currency || 'USD'
   const amount = props.formValues?.amount || 0
   const unit = (props.formValues?.currency as FiatType) || 'USD'
 

packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/Authorize/index.tsx

@@ -324,10 +324,6 @@ const Authorize = (props: Props) => {
               order.paymentMethodId as string,
               order
             )
-            simpleBuyActions.setStep({
-              step: 'OPEN_BANKING_CONNECT',
-              order: order
-            })
           }}
         >
           <FormattedMessage id='copy.approve' defaultMessage='Approve' />

packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/CheckoutConfirm/template.success.tsx

@@ -255,7 +255,7 @@ const Success: React.FC<InjectedFormProps<{}, Props> & Props> = props => {
           {props.submitting ? (
             <HeartbeatLoader height='16px' width='16px' color='white' />
           ) : paymentPartner === 'YAPILY' ? (
-            <FormattedMessage id='copy.approve' defaultMessage='Approve' />
+            <FormattedMessage id='copy.next' defaultMessage='Next' />
           ) : (
             `${
               orderType === 'BUY' ? 'Buy' : 'Sell'

packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/OrderSummary/template.success.tsx

@@ -3,7 +3,7 @@ import { FormattedHTMLMessage, FormattedMessage } from 'react-intl'
 import moment from 'moment'
 import styled from 'styled-components'
 
-import { Button, Icon, Text } from 'blockchain-info-components'
+import { Button, Icon, Link, Text } from 'blockchain-info-components'
 import { FlyoutWrapper } from 'components/Flyout'
 import {
   getBaseAmount,
@@ -115,6 +115,10 @@ const Success: React.FC<Props> = props => {
                   color='green400'
                 />
               </IconBackground>
+            ) : props.order.state === 'FAILED' ? (
+              <IconBackground color='white'>
+                <Icon name='close-circle' size='32px' color='orange500' />
+              </IconBackground>
             ) : (
               <IconBackground color='grey600'>
                 <Icon name='pending' size='32px' color='white' />
@@ -142,6 +146,11 @@ const Success: React.FC<Props> = props => {
                   id='modals.simplebuy.summary.pending_buy'
                   defaultMessage='Pending Buy'
                 />
+              ) : props.order.state === 'FAILED' ? (
+                <FormattedMessage
+                  id='copy.bank_linked_error_title_connectionrejected'
+                  defaultMessage='Connection Rejected'
+                />
               ) : (
                 <FormattedMessage
                   id='modals.simplebuy.summary.purchased'
@@ -169,6 +178,26 @@ const Success: React.FC<Props> = props => {
                   }}
                 />
               )}
+              {props.order.state === 'FAILED' && (
+                <>
+                  <FormattedMessage
+                    id='copy.bank_linked_error'
+                    defaultMessage='Please try linking your bank again. If this keeps happening, please'
+                  />{' '}
+                  <Link
+                    size='14px'
+                    weight={500}
+                    target='_blank'
+                    href='https://support.blockchain.com/hc/en-us/'
+                  >
+                    <FormattedMessage
+                      id='buttons.contact_support'
+                      defaultMessage='Contact Support'
+                    />
+                  </Link>
+                  {'.'}
+                </>
+              )}
               {props.order.state === 'PENDING_DEPOSIT' ||
                 (props.order.state === 'PENDING_CONFIRMATION' && (
                   <FormattedMessage
@@ -244,6 +273,7 @@ const Success: React.FC<Props> = props => {
             )}
           {orderType === 'BUY' &&
             props.order.paymentType === 'BANK_TRANSFER' &&
+            props.order.state !== 'FAILED' &&
             !isPendingAch && (
               <BottomInfo>
                 <Text color='grey600' size='14px' weight={500}>
@@ -270,6 +300,7 @@ const Success: React.FC<Props> = props => {
         </Content>
       </ContentWrapper>
       {orderType === 'BUY' &&
+        props.order.state !== 'FAILED' &&
         (props.order.paymentType === 'PAYMENT_CARD' ||
           props.order.paymentType === 'USER_CARD' ||
           props.order.paymentType === 'BANK_TRANSFER' ||