Release/v4.54

.storybook/main.js

@@ -1,19 +1,10 @@
 module.exports = {
-  stories: ['../packages/blockchain-wallet-v4-frontend/src/components/**/*.stories.@(tsx)'],
+  stories: ['../packages/blockchain-wallet-v4-frontend/src/components/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     'storybook-dark-mode'
   ],
-  typescript: {
-    reactDocgen: 'react-docgen-typescript',
-    reactDocgenTypescriptOptions: {
-      compilerOptions: {
-        allowSyntheticDefaultImports: false,
-        esModuleInterop: false,
-      },
-    }
-  },
   refs: {
     'new-core': {
       title: 'New Core Components',

.storybook/preview.js

@@ -31,3 +31,13 @@ const withIconsAndFonts = () => (story) => {
 }
 addDecorator(withTheme())
 addDecorator(withIconsAndFonts())
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

config/mocks/wallet-options-v4.json

@@ -23,7 +23,8 @@
         "legacyMagicEmailLink": true,
         "legacyMobilePairing": false,
         "legacyWalletRecovery": false,
-        "recurringBuys": true
+        "recurringBuys": true,
+        "signupCountry": false
       }
     }
   },

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

@@ -1232,11 +1232,11 @@ type MessagesType = {
   'modals.recurringbuys.notification.page_2.title': 'The strategy is pretty simple'
   'modals.recurringbuys.notification.page_2.description': 'Invest the same amount every week'
 
-  'modals.recurringbuys.notification.page_3.title': 'When the price goes down,'
-  'modals.recurringbuys.notification.page_3.description': 'You’ll buy more crypto.'
+  'modals.recurringbuys.notification.page_3.title': 'When the price goes down'
+  'modals.recurringbuys.notification.page_3.description': 'You’ll buy more crypto'
 
-  'modals.recurringbuys.notification.page_4.title': 'When the price goes up,'
-  'modals.recurringbuys.notification.page_4.description': 'You’ll buy less.'
+  'modals.recurringbuys.notification.page_4.title': 'When the price goes up'
+  'modals.recurringbuys.notification.page_4.description': 'You’ll buy less'
 
   'modals.recurringbuys.notification.page_5.title': 'But does it work?'
   'modals.recurringbuys.notification.page_5.description': 'Over the past 5 years, buying Bitcoin every week performed better than timing the market'

packages/blockchain-wallet-v4-frontend/src/components/Flyout/FrequencyScreen.tsx

@@ -12,9 +12,7 @@ import { getPeriodSubTitleText, getPeriodTitleText } from './model'
 
 const FrequencyScreen = ({ children, headerAction, headerMode, setPeriod }: Props) => {
   // ONE_TIME is not a recurring buy option so take it out before displaying
-  const periods = Object.values(RecurringBuyPeriods).filter(
-    (p) => p !== RecurringBuyPeriods.ONE_TIME
-  )
+  const periods = Object.values(RecurringBuyPeriods)
   const setPeriodCallback = useCallback(
     (period: RecurringBuyPeriods) => {
       return () => {

packages/blockchain-wallet-v4-frontend/src/components/Flyout/RecurringBuy/GettingStarted.tsx

@@ -69,7 +69,7 @@ const GettingStarted = ({ amount, close, nextStep, outputCurrency }: Props) => {
                 size='14px'
                 weight={500}
                 target='_blank'
-                href='https://support.blockchain.com/hc/en-us/'
+                href='https://support.blockchain.com/hc/en-us/sections/4405090131860-Recurring-Buys-'
               >
                 <FormattedMessage id='buttons.learn_more_arrow' defaultMessage='Learn more ->' />
               </Link>

packages/blockchain-wallet-v4-frontend/src/components/Flyout/RecurringBuyDetails.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { IntlProvider } from 'react-intl'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
 
 import { SBPaymentTypes } from '../../../../blockchain-wallet-v4/src/network/api/simpleBuy/types'
 import { RecurringBuyPeriods } from '../../data/types'
@@ -33,6 +34,10 @@ export default {
     )
   ],
   title: 'Flyouts/RecurringBuyDetails'
-}
+} as ComponentMeta<typeof RecurringBuyDetails>
 
-export const Default = (args) => <RecurringBuyDetails {...args} />
+export const Template: ComponentStory<typeof RecurringBuyDetails> = (args) => (
+  <RecurringBuyDetails {...args} />
+)
+
+export const Default = Template.bind({})

packages/blockchain-wallet-v4-frontend/src/components/Flyout/RecurringBuyDetails.tsx

@@ -32,6 +32,9 @@ const RecurringBuyDetails = ({
   removeClick,
   standardAmount
 }: Props) => {
+  const closeClickCallback = useCallback(() => {
+    closeClick()
+  }, [closeClick])
   const removeClickCallback = useCallback(() => {
     removeClick(id)
   }, [removeClick, id])
@@ -46,7 +49,7 @@ const RecurringBuyDetails = ({
   const amountString = `${Exchange.getSymbol(currency)}${standardAmount}`
   return (
     <Container>
-      <Header data-e2e='recurringBuyDetailsClose' mode='close' onClick={closeClick}>
+      <Header data-e2e='recurringBuyDetailsClose' mode='close' onClick={closeClickCallback}>
         <FormattedMessage id='copy.recurring_buy' defaultMessage='Recurring Buy' />
       </Header>
       <Content mode='top'>

packages/blockchain-wallet-v4-frontend/src/components/Flyout/RecurringBuyRemoveConfirm.tsx

@@ -16,6 +16,9 @@ const RecurringBuyRemoveConfirm = memo(
       setSubmitting(true)
       removeClick(id)
     }, [setSubmitting, removeClick, id])
+    const closeCallback = useCallback(() => {
+      close()
+    }, [close])
 
     return (
       <Container>
@@ -62,7 +65,7 @@ const RecurringBuyRemoveConfirm = memo(
                 data-e2e='removeRecurringBuyKeepButton'
                 nature='light'
                 fullwidth
-                onClick={close}
+                onClick={closeCallback}
                 disabled={submitting}
               >
                 <FormattedMessage id='buttons.keep' defaultMessage='Keep' />

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

@@ -311,7 +311,10 @@ export default ({ api, coreSagas, networks }) => {
       yield put(actions.components.swap.fetchTrades())
       // check/update btc account names
       yield call(coreSagas.wallet.checkAndUpdateWalletNames)
-      if (firstLogin) {
+      const signupCountryEnabled = (yield select(
+        selectors.core.walletOptions.getFeatureSignupCountry
+      )).getOrElse(false)
+      if (firstLogin && signupCountryEnabled) {
         // create nabu user
         yield call(createUser)
         // store initial address in case of US state we add prefix
@@ -586,6 +589,7 @@ export default ({ api, coreSagas, networks }) => {
       const email = (yield select(selectors.core.settings.getEmail)).getOrElse(undefined)
       const sessionToken = yield select(selectors.session.getSession, guid, email)
       yield call(api.deauthorizeBrowser, sessionToken)
+      yield put(actions.cache.removedStoredLogin())
       yield put(actions.alerts.displaySuccess(C.DEAUTHORIZE_BROWSER_SUCCESS))
       yield put(actions.cache.disconnectChannelPhone())
     } catch (e) {

packages/blockchain-wallet-v4-frontend/src/data/cache/reducers.js

@@ -34,6 +34,7 @@ const cache = (state = INITIAL_STATE, action) => {
         ...state,
         guidStored: undefined,
         lastEmail: undefined,
+        lastGuid: undefined,
         mobileConnected: undefined
       }
     }

packages/blockchain-wallet-v4-frontend/src/data/components/recurringBuy/selectors.ts

@@ -1,5 +1,6 @@
 import { createSelector } from '@reduxjs/toolkit'
 
+import { SBPaymentMethodsType, SBPaymentMethodType } from 'core/types'
 import { RootState } from 'data/rootReducer'
 
 import { RecurringBuyPeriods } from './types'
@@ -10,10 +11,12 @@ export const getMethods = (state: RootState) => state.components.recurringBuy.me
 export const getPeriod = (state: RootState) => state.components.recurringBuy.period
 export const getRegisteredList = (state: RootState) => state.components.recurringBuy.registeredList
 
-export const isAvailableMethod = (method) =>
+export const isAvailableMethod = (method?: SBPaymentMethodType) =>
   createSelector(
     getMethods,
-    (methodsR) => methodsR.getOrElse([]).filter((m) => m === method.type).length > 0
+    (methodsR) =>
+      methodsR.getOrElse([]).filter((m) => m === (method?.type as unknown as RecurringBuyPeriods))
+        .length > 0
   )
 
 export const getRegisteredListByCoin = (coin) =>

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

@@ -52,13 +52,15 @@ export type RecurringBuyRegisteredList = {
   userId: string
 }
 
+/* eslint-disable */
 export enum RecurringBuyPeriods {
-  BI_WEEKLY = 'BI_WEEKLY',
-  DAILY = 'DAILY',
-  MONTHLY = 'MONTHLY',
   ONE_TIME = 'ONE_TIME',
-  WEEKLY = 'WEEKLY'
+  DAILY = 'DAILY',
+  WEEKLY = 'WEEKLY',
+  BI_WEEKLY = 'BI_WEEKLY',
+  MONTHLY = 'MONTHLY'
 }
+/* eslint-enable */
 
 export enum RecurringBuyFailureReasons {
   FAILED_BAD_FILL = 'FAILED_BAD_FILL',

packages/blockchain-wallet-v4-frontend/src/data/session/slice.ts

@@ -10,10 +10,10 @@ const sessionSlice = createSlice({
   name: 'session',
   reducers: {
     removeSession: (state, action: PayloadAction<string>) => {
-      state = dissoc(action.payload, state.sessions)
+      return dissoc(action.payload, state)
     },
     saveSession: (state, action: PayloadAction<{ [key: string]: string }>) => {
-      state = mergeRight(state, action.payload)
+      return mergeRight(state, action.payload)
     }
   }
 })

packages/blockchain-wallet-v4-frontend/src/modals/RecurringBuys/Details/index.tsx

@@ -13,21 +13,13 @@ const Success = ({ activeDetails, close: closeClick, removeClick }: Props) => {
   if (!activeDetails) return null
   const { id, nextPayment, paymentMethod, period } = activeDetails
   const detailProps = {
-    // for future use
     closeClick,
-
     complete: false,
-
     crypto: activeDetails.destinationCurrency,
-
     currency: activeDetails.inputCurrency,
-
     id,
-
     nextPayment,
-
     paymentMethod,
-
     period,
     removeClick,
     standardAmount: convertBaseToStandard(activeDetails.inputCurrency, activeDetails.inputValue)

packages/blockchain-wallet-v4-frontend/src/modals/RecurringBuys/Notifications/index.tsx

@@ -36,6 +36,7 @@ const SlideStart = styled(Slide)`
 
 const SlideContent = styled.div`
   padding: 0 40px;
+  text-align: center;
 `
 
 const SyncIconWrapper = styled.div`
@@ -94,13 +95,13 @@ class Notifications extends PureComponent<Props, State> {
           <AnimatedCarousel stepChange={this.stepChange}>
             <Slide>
               <SlideContent>
-                <Text size='32px' weight={600} color='grey900' style={{ marginBottom: '40px' }}>
+                <Text size='24px' weight={600} color='grey900'>
                   <FormattedMessage
                     id='modals.recurringbuys.notification.page_1.title'
                     defaultMessage='Instead of timing the market, many smart investors use'
                   />
                 </Text>
-                <Text size='32px' weight={600} color='blue600' lineHeight='40px'>
+                <Text size='24px' weight={600} color='blue600' lineHeight='40px'>
                   <FormattedMessage
                     id='modals.recurringbuys.notification.page_1.description'
                     defaultMessage='Dollar cost averaging'
@@ -110,13 +111,13 @@ class Notifications extends PureComponent<Props, State> {
             </Slide>
             <SlideStart>
               <SlideContent>
-                <Text size='32px' weight={600} color='grey900' style={{ marginBottom: '40px' }}>
+                <Text size='24px' weight={600} color='grey900'>
                   <FormattedMessage
                     id='modals.recurringbuys.notification.page_2.title'
                     defaultMessage='The strategy is pretty simple'
                   />
                 </Text>
-                <Text size='32px' weight={600} color='blue600' lineHeight='40px'>
+                <Text size='24px' weight={600} color='blue600' lineHeight='40px'>
                   <FormattedMessage
                     id='modals.recurringbuys.notification.page_2.description'
                     defaultMessage='Invest the same amount every week'
@@ -126,51 +127,51 @@ class Notifications extends PureComponent<Props, State> {
             </SlideStart>
             <SlideStart>
               <SlideContent>
-                <Text size='32px' weight={600} color='grey900' style={{ marginBottom: '40px' }}>
+                <Text size='24px' weight={600} color='grey900'>
                   <FormattedMessage
                     id='modals.recurringbuys.notification.page_3.title'
-                    defaultMessage='When the price goes down,'
+                    defaultMessage='When the price goes down'
                   />
                 </Text>
-                <Text size='32px' weight={600} color='blue600' lineHeight='40px'>
+                <Text size='24px' weight={600} color='blue600' lineHeight='40px'>
                   <FormattedMessage
                     id='modals.recurringbuys.notification.page_3.description'
-                    defaultMessage='You’ll buy more crypto.'
+                    defaultMessage='You’ll buy more crypto'
                   />
                 </Text>
               </SlideContent>
             </SlideStart>
             <SlideStart>
               <SlideContent>
-                <Text size='32px' weight={600} color='grey900' style={{ marginBottom: '40px' }}>
+                <Text size='24px' weight={600} color='grey900'>
                   <FormattedMessage
                     id='modals.recurringbuys.notification.page_4.title'
-                    defaultMessage='When the price goes up,'
+                    defaultMessage='When the price goes up'
                   />
                 </Text>
-                <Text size='32px' weight={600} color='blue600' lineHeight='40px'>
+                <Text size='24px' weight={600} color='blue600' lineHeight='40px'>
                   <FormattedMessage
                     id='modals.recurringbuys.notification.page_4.description'
-                    defaultMessage='You’ll buy less.'
+                    defaultMessage='You’ll buy less'
                   />
                 </Text>
               </SlideContent>
             </SlideStart>
             <Slide>
               <SlideContent>
-                <Text size='32px' weight={600} color='grey900' style={{ marginBottom: '40px' }}>
+                <Text size='24px' weight={600} color='grey900' style={{ marginBottom: '40px' }}>
                   <FormattedMessage
                     id='modals.recurringbuys.notification.page_5.title'
                     defaultMessage='But does it work?'
                   />
                 </Text>
-                <Text size='32px' weight={600} color='grey900' lineHeight='40px'>
+                <Text size='24px' weight={600} color='grey900' lineHeight='40px'>
                   <FormattedMessage
                     id='modals.recurringbuys.notification.page_5.description'
                     defaultMessage='Over the past 5 years, buying Bitcoin every week performed better than timing the market'
                   />
                 </Text>
-                <Text size='32px' weight={600} color='blue600' lineHeight='40px'>
+                <Text size='24px' weight={600} color='blue600' lineHeight='40px'>
                   <FormattedMessage
                     id='modals.recurringbuys.notification.page_5.disclaimer'
                     defaultMessage='82% of the time.'

packages/blockchain-wallet-v4-frontend/src/modals/RecurringBuys/Scheduler/index.tsx

@@ -20,7 +20,7 @@ const SchedulerContainer = (props: Props) => {
   return null
 }
 
-const mapStateToProps = (state, ownProps) => ({
+const mapStateToProps = (state, ownProps: OwnProps) => ({
   availableMethods: selectors.components.recurringBuy.isAvailableMethod(ownProps.method)(state)
 })
 

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

@@ -40,12 +40,11 @@ class OrderSummary extends PureComponent<Props> {
   }
 
   okButtonHandler = () => {
-    // first time buyers have 1 tx at this point so and RB is set to one time buy so send them to RB walkthrough flow
-    // FIXME: The logic on the line below is hacked to be wrong so I can test.
+    // first time buyers have 1 tx at this point and RB is set to one time buy so send them to RB walkthrough flow
     if (
       this.props.isRecurringBuy &&
-      this.props.orders.length > 1 &&
-      this.props.order.period !== RecurringBuyPeriods.ONE_TIME &&
+      this.props.orders.length <= 1 &&
+      this.props.order.period === RecurringBuyPeriods.ONE_TIME &&
       this.props.hasQuote
     ) {
       this.props.recurringBuyActions.showModal({ origin: 'SimpleBuyOrderSummary' })