feat(recurring buy): performance improvements and adding making share…

…d flyout components

packages/blockchain-info-components/index.d.ts

@@ -11,13 +11,15 @@ import { ImageType } from './src/Images/Images'
 import { CoinType, WalletCurrencyType } from 'core/types'
 import { SwapBaseCounterTypes } from 'data/types'
 import { Props as FlyoutHeaderPropsType } from './src/Flyouts/Header' 
+import { Props as FlyoutFooterPropsType } from './src/Flyouts/' 
 
 type AllCoinsType = WalletCurrencyType | 'STX'
 
 export const Badge: FunctionComponent<any>
 export const Banner: FunctionComponent<any>
 export const Box: FunctionComponent<any>
 export const FlyoutHeader: FunctionComponent<FlyoutHeaderPropsType>
+export const FlyoutFooter: FunctionComponent<FlyoutFooterPropsType>
 export const BlockchainLoader: FunctionComponent<{
   width?: string
   height?: string

packages/blockchain-info-components/src/Flyouts/Footer.tsx

@@ -0,0 +1,22 @@
+import React, { memo } from 'react'
+import styled from 'styled-components'
+
+const Footer = styled.div`
+  width: 100%;
+  box-sizing: border-box;
+  padding: 40px;
+
+  @media (max-width: 767px) {
+    padding: 20px;
+  }
+`
+
+const FlyoutFooter = (props: Props) => {
+  return <Footer>{props.children}</Footer>
+}
+
+export type Props = {
+  children?: React.ReactNode
+}
+
+export default React.memo(FlyoutFooter)

packages/blockchain-info-components/src/Flyouts/Header.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { memo } from 'react'
 import styled, { css } from 'styled-components'
 
 import { Icon } from '../Icons'
@@ -9,6 +9,10 @@ const Header = styled.div`
   box-sizing: border-box;
   padding: 40px;
   border-bottom: ${(p) => p.theme.grey000};
+
+  @media (max-width: 767px) {
+    padding: 20px;
+  }
 `
 
 const TopText = styled(Text)`
@@ -20,27 +24,27 @@ const TopText = styled(Text)`
 const LeftTopCol = styled.div`
   display: flex;
   align-items: center;
-`    
+`
 
 const FlyoutHeader = (props: Props) => {
   return (
     <Header>
       <TopText color='grey800' size='20px' weight={600}>
-          <LeftTopCol>
-            {props.mode === 'back' && (
-              <Icon
-                cursor
-                data-e2e={props['data-e2e']}
-                name='arrow-back'
-                size='20px'
-                color='grey600'
-                role='button'
-                style={{ marginRight: '8px' }}
-                onClick={props.onClick}
-              />
-            )}
-            {props.children}
-          </LeftTopCol>
+        <LeftTopCol>
+          {props.mode === 'back' && (
+            <Icon
+              cursor
+              data-e2e={props['data-e2e']}
+              name='arrow-back'
+              size='20px'
+              color='grey600'
+              role='button'
+              style={{ marginRight: '8px' }}
+              onClick={props.onClick}
+            />
+          )}
+          {props.children}
+        </LeftTopCol>
         {props.mode === 'close' && (
           <Icon
             cursor
@@ -58,10 +62,10 @@ const FlyoutHeader = (props: Props) => {
 }
 
 export type Props = {
-  children?: React.ReactNode,
+  children?: React.ReactNode
+  'data-e2e': string
   mode: 'close' | 'back'
-  'data-e2e': string,
-  onClick: () => void,
+  onClick: () => void
 }
 
-export default FlyoutHeader
+export default memo(FlyoutHeader, () => true)

packages/blockchain-info-components/src/index.js

@@ -1,11 +1,12 @@
 export { Badge } from './Badges'
 export { Banner } from './Banners'
 export { default as Box } from './Box'
-export { default as FlyoutHeader } from './Flyouts/Header'
 export { Button, ButtonGroup, IconButton } from './Buttons'
 export { Carousel } from './Carousels'
 export { Color, Palette } from './Colors/index.ts'
 export { ComponentDropdown, SimpleDropdown } from './Dropdowns'
+export { default as FlyoutFooter } from './Flyouts/Footer'
+export { default as FlyoutHeader } from './Flyouts/Header'
 export { FontGlobalStyles, IconGlobalStyles } from './Fonts'
 export {
   AutosizeTextInput,

packages/blockchain-info-components/stories/chapters/buttons.stories.js

@@ -1,13 +1,9 @@
-import { withInfo } from '@storybook/addon-info'
-import { addDecorator } from '@storybook/react'
 import React from 'react'
 import styled from 'styled-components'
 
 import { Button, ButtonGroup, IconButton } from '../../src'
 import Layout from '../components/layout'
 
-addDecorator(withInfo)
-
 const ButtonWrapper = styled.div`
   display: flex;
   flex-direction: row;
@@ -86,8 +82,7 @@ export default {
   title: 'Buttons',
   parameters: {
     info: { text: 'Documentation', inline: true }
-  },
-  decorators: [(story) => <Layout>{story()}</Layout>]
+  }
 }
 
 export const AllButtons = () => (

packages/blockchain-info-components/stories/chapters/flyoutFooter.stories.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import { FlyoutFooter, Button } from '../../src'
+
+export default {
+  title: 'Flyouts/Footer',
+  component: FlyoutFooter,
+}
+
+export const ButtonFooter = (args) => {
+  return (
+    <FlyoutFooter {...args}>
+      <Button nature='primary' fullwidth>Continue</Button>
+    </FlyoutFooter>
+  )
+}

packages/blockchain-info-components/stories/chapters/flyoutHeader.stories.tsx

@@ -9,6 +9,12 @@ export default {
     'data-e2e': 'foooo',
     onClick: () => {},
     mode: 'back'
+  },
+  argTypes: {
+    mode: {
+      type: 'select',
+      options: ['close', 'back']
+    }
   }
 }
 

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

@@ -18,7 +18,7 @@ import * as onboarding from './onboarding/actionTypes'
 import * as priceChart from './priceChart/actionTypes'
 import * as priceTicker from './priceTicker/actionTypes'
 import * as recoveryPhrase from './recoveryPhrase/actionTypes'
-import * as recurringBuys from './recurringBuys/actionTypes'
+import { actions as recurringBuy } from './recurringBuy/slice'
 import * as refresh from './refresh/actionTypes'
 import * as request from './request/actionTypes'
 import * as resetWallet2fa from './resetWallet2fa/actionTypes'
@@ -58,7 +58,7 @@ export {
   priceChart,
   priceTicker,
   recoveryPhrase,
-  recurringBuys,
+  recurringBuy,
   refresh,
   request,
   resetWallet2fa,

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

@@ -18,7 +18,7 @@ import * as onboarding from './onboarding/actions'
 import * as priceChart from './priceChart/actions'
 import * as priceTicker from './priceTicker/actions'
 import * as recoveryPhrase from './recoveryPhrase/actions'
-import * as recurringBuys from './recurringBuys/actions'
+import { actions as recurringBuy } from './recurringBuy/slice'
 import * as refresh from './refresh/actions'
 import * as request from './request/actions'
 import * as resetWallet2fa from './resetWallet2fa/actions'
@@ -58,7 +58,7 @@ export {
   priceChart,
   priceTicker,
   recoveryPhrase,
-  recurringBuys,
+  recurringBuy,
   refresh,
   request,
   resetWallet2fa,

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

@@ -19,7 +19,7 @@ import {
   YodleeAccountType
 } from './types'
 
-const INITIAL_STATE: BrokerageState = {
+const initialState: BrokerageState = {
   account: undefined,
   addBankStep: AddBankStepType.ADD_BANK,
   addNew: false,
@@ -35,7 +35,7 @@ const INITIAL_STATE: BrokerageState = {
 }
 
 const brokerageSlice = createSlice({
-  initialState: INITIAL_STATE,
+  initialState,
   name: 'brokerage',
   reducers: {
     createFiatDeposit: () => {},

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

@@ -0,0 +1,12 @@
+import { takeLatest } from 'redux-saga/effects'
+
+import sagas from './sagas'
+import { actions } from './slice'
+
+export default () => {
+  const recurringBuySagas = sagas()
+
+  return function* recurringBuySaga() {
+    yield takeLatest(actions.showModal, recurringBuySagas.showModal)
+  }
+}

packages/blockchain-wallet-v4-frontend/src/data/components/recurringBuys/sagas.ts → packages/blockchain-wallet-v4-frontend/src/data/components/recurringBuy/sagas.ts

@@ -2,8 +2,8 @@ import { put } from 'redux-saga/effects'
 
 import { actions } from 'data'
 
-import * as A from './actions'
-import { RecurringBuysStepType } from './types'
+import { actions as A } from './slice'
+import { RecurringBuyStepType } from './types'
 
 export default () => {
   const showModal = function* ({ payload }: ReturnType<typeof A.showModal>) {
@@ -16,7 +16,7 @@ export default () => {
 
     yield put(
       A.setStep({
-        step: RecurringBuysStepType.INIT_PAGE
+        step: RecurringBuyStepType.INIT_PAGE
       })
     )
   }

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

@@ -1,5 +1,5 @@
 import { RootState } from 'data/rootReducer'
 
-export const getStep = (state: RootState) => state.components.recurringBuys.step
+export const getStep = (state: RootState) => state.components.recurringBuy.step
 
 export default getStep

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

@@ -0,0 +1,24 @@
+/* eslint-disable no-param-reassign */
+import { createSlice, PayloadAction } from '@reduxjs/toolkit'
+
+import { ModalNamesType, ModalOriginType } from 'data/modals/types'
+
+import { RecurringBuyState, RecurringBuyStepPayload, RecurringBuyStepType } from './types'
+
+const initialState: RecurringBuyState = {
+  step: RecurringBuyStepType.INIT_PAGE
+}
+
+const recurringBuySlice = createSlice({
+  initialState,
+  name: 'recurringBuy',
+  reducers: {
+    setStep: (state, action: PayloadAction<RecurringBuyStepPayload>) => {
+      state.step = action.payload.step
+    },
+    showModal: (state, action: PayloadAction<{ origin: ModalOriginType }>) => {}
+  }
+})
+
+const { actions, reducer } = recurringBuySlice
+export { actions, reducer }

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

@@ -0,0 +1,16 @@
+export enum RecurringBuyStepType {
+  'INIT_PAGE',
+  'GET_STARTED',
+  'FREQUENCY',
+  'CHECKOUT_CONFIRM',
+  'SUMMARY'
+}
+
+// state
+export type RecurringBuyState = {
+  step: RecurringBuyStepType
+}
+
+export type RecurringBuyStepPayload = {
+  step: RecurringBuyStepType
+}