diff --git a/src/mocks/js_dependencies.cljs b/src/mocks/js_dependencies.cljs index f561006da4..0d02f9a043 100644 --- a/src/mocks/js_dependencies.cljs +++ b/src/mocks/js_dependencies.cljs @@ -42,6 +42,7 @@ :ValueXY (fn []) :View {} :FlatList {} + :ScrollView {} :Text {}} :Easing {:bezier (fn []) :poly (fn []) diff --git a/src/status_im/ui/components/react.cljs b/src/status_im/ui/components/react.cljs index 569bd1615d..8c4f607da1 100644 --- a/src/status_im/ui/components/react.cljs +++ b/src/status_im/ui/components/react.cljs @@ -68,9 +68,15 @@ (def animated-flat-list-class (reagent/adapt-react-class (.-FlatList ^js animated))) +(def animated-scroll-view-class + (reagent/adapt-react-class (.-ScrollView ^js animated))) + (defn animated-view [props & content] (vec (conj content props animated-view-class))) +(defn animated-scroll-view [props & children] + (vec (conj children props animated-scroll-view-class))) + (def dimensions (.-Dimensions react-native)) (def keyboard (.-Keyboard react-native)) (def dismiss-keyboard! #(.dismiss ^js Keyboard)) diff --git a/src/status_im/ui/screens/wallet/account/styles.cljs b/src/status_im/ui/screens/wallet/account/styles.cljs index 52d1bb11bc..cd3bfcc45e 100644 --- a/src/status_im/ui/screens/wallet/account/styles.cljs +++ b/src/status_im/ui/screens/wallet/account/styles.cljs @@ -1,5 +1,6 @@ (ns status-im.ui.screens.wallet.account.styles - (:require [status-im.ui.components.colors :as colors])) + (:require [status-im.ui.components.colors :as colors] + [status-im.ui.components.animation :as animation])) (defn card [window-width color] {:width (- window-width 30) @@ -24,4 +25,20 @@ :shadow-opacity 1 :shadow-color (if (colors/dark?) "rgba(0, 0, 0, 0.75)" - "rgba(0, 9, 26, 0.12)")}) \ No newline at end of file + "rgba(0, 9, 26, 0.12)")}) + +(defn bottom-send-recv-buttons-raise [anim-y] + (animation/timing + anim-y + {:toValue 0 + :duration 200 + :easing (.-ease ^js (animation/easing)) + :useNativeDriver true})) + +(defn bottom-send-recv-buttons-lower [anim-y y] + (animation/timing + anim-y + {:toValue y + :duration 200 + :easing (.-ease ^js (animation/easing)) + :useNativeDriver true})) diff --git a/src/status_im/ui/screens/wallet/account/views.cljs b/src/status_im/ui/screens/wallet/account/views.cljs index 18c4f36b0e..cae8321850 100644 --- a/src/status_im/ui/screens/wallet/account/views.cljs +++ b/src/status_im/ui/screens/wallet/account/views.cljs @@ -15,7 +15,8 @@ [status-im.ui.components.list-item.views :as list-item] [status-im.utils.money :as money] [status-im.wallet.utils :as wallet.utils] - [status-im.ui.components.topbar :as topbar])) + [status-im.ui.components.topbar :as topbar] + [status-im.ui.components.animation :as animation])) (def state (reagent/atom {:tab :assets})) @@ -28,12 +29,14 @@ {:content sheets/account-settings :content-height 60}])}]}]) -(defn button [label icon handler] +(defn button [label icon color handler] [react/touchable-highlight {:on-press handler :style {:flex 1}} [react/view {:flex 1 :align-items :center :justify-content :center} [react/view {:flex-direction :row :align-items :center} - [icons/icon icon {:color colors/white-persist}] - [react/text {:style {:margin-left 8 :color colors/white-persist}} label]]]]) + [icons/icon icon {:color color}] + [react/text {:style {:margin-left 8 :color color}} label]]]]) + +(def button-group-height 52) (views/defview account-card [{:keys [address color type] :as account}] (views/letsubs [currency [:wallet/currency] @@ -57,7 +60,7 @@ [react/touchable-highlight {:on-press #(re-frame/dispatch [:show-popover {:view :share-account :address address}])} [icons/icon :main-icons/share {:color colors/white-persist :accessibility-label :share-wallet-address-icon}]]] - [react/view {:height 52 :background-color colors/black-transparent-20 + [react/view {:height button-group-height :background-color colors/black-transparent-20 :border-bottom-right-radius 8 :border-bottom-left-radius 8 :flex-direction :row} (if (= type :watch) [react/view {:flex 1 :align-items :center :justify-content :center} @@ -66,11 +69,13 @@ [button (i18n/label :t/wallet-send) :main-icons/send + colors/white-persist #(re-frame/dispatch [:wallet/prepare-transaction-from-wallet account])]) [react/view {:style (styles/divider)}] [button (i18n/label :t/receive) :main-icons/receive + colors/white-persist #(re-frame/dispatch [:show-popover {:view :share-account :address address}])]]])) (defn render-collectible [address] @@ -119,13 +124,65 @@ (= tab :history) [transactions address])]))) +(views/defview bottom-send-recv-buttons [{:keys [address type] :as account} anim-y] + [react/animated-view {:style {:background-color colors/white + :bottom 0 + :flex-direction :row + :height button-group-height + :position :absolute + :shadow-offset {:width 0 :height 1} + :shadow-opacity 0.75 + :shadow-radius 1 + :transform [{:translateY anim-y}] + :width "100%"}} + (if (= type :watch) + [react/view {:flex 1 :align-items :center :justify-content :center} + [react/text {:style {:margin-left 8 :color colors/blue-persist}} + (i18n/label :t/watch-only)]] + [button + (i18n/label :t/wallet-send) + :main-icons/send + colors/blue-persist + #(re-frame/dispatch [:wallet/prepare-transaction-from-wallet account])]) + [button + (i18n/label :t/receive) + :main-icons/receive + colors/blue-persist + #(re-frame/dispatch [:show-popover {:view :share-account :address address}])]]) + +(defn anim-listener [anim-y scroll-y] + (let [to-show (atom false)] + (animation/add-listener + scroll-y + (fn [anim] + (let [y-trigger 149] + (cond + (and (>= (.-value anim) y-trigger) (not @to-show)) + (animation/start + (styles/bottom-send-recv-buttons-raise anim-y) + #(reset! to-show true)) + + (and (< (.-value anim) y-trigger) @to-show) + (animation/start + (styles/bottom-send-recv-buttons-lower anim-y button-group-height) + #(reset! to-show false)))))))) + (views/defview account [] (views/letsubs [{:keys [name address] :as account} [:multiaccount/current-account]] - [react/view {:flex 1 :background-color colors/white} - [toolbar-view name] - [react/scroll-view - [react/view {:padding-left 16} - [react/scroll-view {:horizontal true} - [react/view {:flex-direction :row :padding-top 8 :padding-bottom 12} - [account-card account]]]] - [assets-and-collections address]]])) + (let [anim-y (animation/create-value button-group-height) + scroll-y (animation/create-value 0)] + (anim-listener anim-y scroll-y) + [react/view {:flex 1 :background-color colors/white} + [toolbar-view name] + [react/animated-scroll-view + {:contentContainerStyle {:padding-bottom button-group-height} + :on-scroll (animation/event + [{:nativeEvent {:contentOffset {:y scroll-y}}}] + {:useNativeDriver true}) + :scrollEventThrottle 1} + [react/view {:padding-left 16} + [react/scroll-view {:horizontal true} + [react/view {:flex-direction :row :padding-top 8 :padding-bottom 12} + [account-card account]]]] + [assets-and-collections address]] + [bottom-send-recv-buttons account anim-y]])))