feat(borrow): get transition working, needs work

blockchain · Feb 13, 2020 · c467edd · c467edd
1 parent 47c3977
commit c467edd
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 12 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/package.json b/packages/blockchain-wallet-v4-frontend/package.json
@@ -122,6 +122,7 @@
     "qs": "6.7.0",
     "ramda": "0.26.1",
     "react": "16.8.6",
+    "react-addons-css-transition-group": "15.6.2",
     "react-animations": "1.0.0",
     "react-copy-to-clipboard": "5.0.1",
     "react-csv": "1.1.1",

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/borrow/reducers.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/borrow/reducers.ts
@@ -96,7 +96,10 @@ export function borrowReducer (
           }
         }
         default: {
-          return state
+          return {
+            ...state,
+            step: action.payload.step
+          }
         }
       }
     default:

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/borrow/types.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/borrow/types.ts
@@ -83,7 +83,7 @@ export type PaymentType = {
   value: () => PaymentType
 }
 
-export type BorrowStepsType = 'CHECKOUT' | 'DETAILS'
+export type BorrowStepsType = 'CHECKOUT' | 'DETAILS' | 'ADD_COLLATERAL'
 
 // State
 export interface BorrowState {
@@ -94,7 +94,7 @@ export interface BorrowState {
   offer?: OfferType
   offers: RemoteDataType<NabuApiErrorType, Array<OfferType>>
   payment: RemoteDataType<string | Error, PaymentType>
-  step: 'CHECKOUT' | 'DETAILS'
+  step: BorrowStepsType
 }
 
 // Actions
@@ -180,6 +180,9 @@ interface SetStepAction {
         loan?: LoanType
         step: 'DETAILS'
       }
+    | {
+        step: 'ADD_COLLATERAL'
+      }
   type: typeof AT.SET_STEP
 }
 

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Borrow/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Borrow/index.tsx
@@ -9,6 +9,8 @@ import BorrowForm from './BorrowForm'
 import Flyout, { duration } from 'components/Flyout'
 import modalEnhancer from 'providers/ModalEnhancer'
 import React, { PureComponent } from 'react'
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
+import styled from 'styled-components'
 
 type LinkStatePropsType = {
   loan?: LoanType
@@ -26,6 +28,37 @@ type OwnProps = {
   userClickedOutside: boolean
 }
 
+const Foo = styled.div`
+  width: 100%;
+  height: 100%;
+
+  .example-enter {
+    top: 0;
+    left: 99%;
+    opacity: 0.01;
+    position: absolute;
+  }
+
+  .example-enter.example-enter-active {
+    opacity: 1;
+    left: 0;
+    transition: opacity 500ms ease-in, left 500ms;
+  }
+
+  .example-leave {
+    position: absolute;
+    opacity: 1;
+    left: 0;
+    top: 0;
+  }
+
+  .example-leave.example-leave-active {
+    left: -99%;
+    opacity: 0.01;
+    transition: opacity 500ms ease-in, left 500ms;
+  }
+`
+
 type Props = OwnProps & LinkDispatchPropsType & LinkStatePropsType
 
 class Borrow extends PureComponent<Props> {
@@ -53,12 +86,21 @@ class Borrow extends PureComponent<Props> {
         data-e2e='borrowModal'
         total={total}
       >
-        {this.props.step === 'CHECKOUT' && this.props.offer && (
-          <BorrowForm offer={this.props.offer} />
-        )}
-        {this.props.step === 'DETAILS' && this.props.loan && (
-          <BorrowDetails loan={this.props.loan} />
-        )}
+        <Foo>
+          <ReactCSSTransitionGroup
+            transitionName='example'
+            transitionEnterTimeout={500}
+            transitionLeaveTimeout={500}
+          >
+            {this.props.step === 'CHECKOUT' && this.props.offer && (
+              <BorrowForm offer={this.props.offer} />
+            )}
+            {this.props.step === 'DETAILS' && this.props.loan && (
+              <BorrowDetails loan={this.props.loan} />
+            )}
+            {this.props.step === 'ADD_COLLATERAL' && <h1>here</h1>}
+          </ReactCSSTransitionGroup>
+        </Foo>
       </Flyout>
     )
   }

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Borrow/InitBorrowForm/Amount/index.tsx b/packages/blockchain-wallet-v4-frontend/src/scenes/Borrow/InitBorrowForm/Amount/index.tsx
@@ -14,7 +14,7 @@ type OwnProps = {
 
 type LinkStatePropsType = {
   data: RemoteDataType<
-    string,
+    Error | string,
     {
       balance: number
       max: number
@@ -53,7 +53,9 @@ export class Amount extends Component<Props> {
               {val.max}
             </FiatDisplay>
           ),
-          Failure: e => <Text weight={600}>{e}</Text>,
+          Failure: e => (
+            <Text weight={600}>{typeof e === 'object' ? e.message : e}</Text>
+          ),
           NotAsked: () => <Content>...</Content>,
           Loading: () => <Content>...</Content>
         })}

diff --git a/yarn.lock b/yarn.lock
@@ -6348,6 +6348,11 @@ chai@^4.1.2:
     pathval "^1.1.0"
     type-detect "^4.0.5"
 
+chain-function@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/chain-function/-/chain-function-1.0.1.tgz#c63045e5b4b663fb86f1c6e186adaf1de402a1cc"
+  integrity sha512-SxltgMwL9uCko5/ZCLiyG2B7R9fY4pDZUw7hJ4MhirdjBLosoDqkWABi3XMucddHdLiFJMb7PD2MZifZriuMTg==
+
 chalk@2.4.1, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.3.2, chalk@^2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.1.tgz#18c49ab16a037b6eb0152cc83e3471338215b66e"
@@ -7938,6 +7943,13 @@ dom-focus-lock@^1.0.4:
   dependencies:
     focus-lock "^0.6.2"
 
+dom-helpers@^3.2.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
+  integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
+  dependencies:
+    "@babel/runtime" "^7.1.2"
+
 dom-helpers@^3.3.1:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6"
@@ -15412,7 +15424,7 @@ prop-types-exact@^1.2.0:
     object.assign "^4.1.0"
     reflect.ownkeys "^0.2.0"
 
-prop-types@15.7.2, prop-types@^15.7.2:
+prop-types@15.7.2, prop-types@^15.5.6, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -15729,6 +15741,13 @@ react-addons-create-fragment@^15.5.3:
     loose-envify "^1.3.1"
     object-assign "^4.1.0"
 
+react-addons-css-transition-group@15.6.2:
+  version "15.6.2"
+  resolved "https://registry.yarnpkg.com/react-addons-css-transition-group/-/react-addons-css-transition-group-15.6.2.tgz#9e4376bcf40b5217d14ec68553081cee4b08a6d6"
+  integrity sha1-nkN2vPQLUhfRTsaFUwgc7ksIptY=
+  dependencies:
+    react-transition-group "^1.2.0"
+
 react-animations@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/react-animations/-/react-animations-1.0.0.tgz#d96222920dfeabec8984d9b2ef2c5a5aadb40f06"
@@ -16156,6 +16175,17 @@ react-transition-group@2.5.3:
     prop-types "^15.6.2"
     react-lifecycles-compat "^3.0.4"
 
+react-transition-group@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-1.2.1.tgz#e11f72b257f921b213229a774df46612346c7ca6"
+  integrity sha512-CWaL3laCmgAFdxdKbhhps+c0HRGF4c+hdM4H23+FI1QBNUyx/AMeIJGWorehPNSaKnQNOAxL7PQmqMu78CDj3Q==
+  dependencies:
+    chain-function "^1.0.0"
+    dom-helpers "^3.2.0"
+    loose-envify "^1.3.1"
+    prop-types "^15.5.6"
+    warning "^3.0.0"
+
 react-transition-group@^2.0.0, react-transition-group@^2.2.1:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.5.0.tgz#70bca0e3546102c4dc5cf3f5f57f73447cce6874"