status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Loading indicator shown when prices loading is in progress 

Signed-off-by: Volodymyr Kozieiev <vkjr.sp@gmail.com>
This commit is contained in:
Volodymyr Kozieiev 2020-03-31 14:37:29 +03:00
parent 49fd306f25
commit 9e5cc74ea9
No known key found for this signature in database
GPG Key ID: 82B04968DF4C0535
7 changed files with 69 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/src/status_im/ui/components/react.cljs
View File

@ -70,6 +70,11 @@
(defn activity-indicator [props] (defn activity-indicator [props]
[activity-indicator-class props]) [activity-indicator-class props])
(defn small-loading-indicator [color]
[activity-indicator {:color (if color color :colors/gray)
:ios {:size :small}
:android {:size :16}}])
(def modal (get-class "Modal")) (def modal (get-class "Modal"))
(def pan-responder (.-PanResponder js-dependencies/react-native)) (def pan-responder (.-PanResponder js-dependencies/react-native))

60
src/status_im/ui/screens/signing/views.cljs
View File

@ -174,32 +174,24 @@
[react/text (or formatted-data "")]]] [react/text (or formatted-data "")]]]
[password-view sign]]])) [password-view sign]]]))
(defn amount-item [prices wallet-currency amount amount-error display-symbol fee-display-symbol] (defn amount-item [prices wallet-currency amount amount-error display-symbol fee-display-symbol prices-loading?]
(let [converted-value (* amount (get-in prices [(keyword display-symbol) (keyword (:code wallet-currency)) :price]))] (let [converted-value (* amount (get-in prices [(keyword display-symbol) (keyword (:code wallet-currency)) :price]))]
[list-item/list-item [list-item/list-item
{:type :small {:type :small
:title :t/send-request-amount :title :t/send-request-amount
:error amount-error :error amount-error
:accessories [[react/nested-text {:style {:color colors/gray}} :accessories [[react/view {:style {:flex-direction :row}}
[{:style {:color colors/black}} (utils/format-decimals amount 6)] [react/nested-text {:style {:color colors/gray}}
" " [{:style {:color colors/black}} (utils/format-decimals amount 6)]
(or display-symbol fee-display-symbol) " "
" • " (or display-symbol fee-display-symbol)
[{:style {:color colors/black}} " • "]
(if converted-value (if prices-loading?
(i18n/format-currency converted-value (:code wallet-currency)) [react/small-loading-indicator]
[react/activity-indicator {:color :colors/gray [react/text {:style {:color colors/black}} (i18n/format-currency converted-value (:code wallet-currency))])
:ios {:size :small} [react/text {:style {:color colors/gray}} (str " " (:code wallet-currency))]]]}]))
:android {:size :16}}])]
" "
(str (:code wallet-currency))]]}]))
(defn loading-indicator [] (views/defview fee-item [prices wallet-currency fee-display-symbol fee gas-error prices-loading?]
[react/activity-indicator {:color :colors/gray
:ios {:size :small}
:android {:size :16}}])
(views/defview fee-item [prices wallet-currency fee-display-symbol fee gas-error]
(views/letsubs [{:keys [gas-price-loading? gas-loading?]} [:signing/edit-fee]] (views/letsubs [{:keys [gas-price-loading? gas-loading?]} [:signing/edit-fee]]
(let [converted-fee-value (* fee (get-in prices [(keyword fee-display-symbol) (keyword (:code wallet-currency)) :price]))] (let [converted-fee-value (* fee (get-in prices [(keyword fee-display-symbol) (keyword (:code wallet-currency)) :price]))]
[list-item/list-item [list-item/list-item
@ -208,16 +200,17 @@
:error (when-not (or gas-price-loading? gas-loading?) gas-error) :error (when-not (or gas-price-loading? gas-loading?) gas-error)
:disabled? (or gas-price-loading? gas-loading?) :disabled? (or gas-price-loading? gas-loading?)
:accessories (if (or gas-price-loading? gas-loading?) :accessories (if (or gas-price-loading? gas-loading?)
[[loading-indicator]] [[react/small-loading-indicator]]
[[react/nested-text {:style {:color colors/gray}} [[react/view {:style {:flex-direction :row}}
[{:style {:color colors/black}} (utils/format-decimals fee 6)] [react/nested-text {:style {:color colors/gray}}
" " [{:style {:color colors/black}} (utils/format-decimals fee 6)]
fee-display-symbol " "
" • " fee-display-symbol
[{:style {:color colors/black}} " • "]
(i18n/format-currency converted-fee-value (:code wallet-currency))] (if prices-loading?
" " [react/small-loading-indicator]
(str (:code wallet-currency))] [react/text {:style {:color colors/black}} (i18n/format-currency converted-fee-value (:code wallet-currency))])
[react/text {:style {:color colors/gray}} (str " " (:code wallet-currency))]]
:chevron]) :chevron])
:on-press #(re-frame/dispatch :on-press #(re-frame/dispatch
[:signing.ui/open-fee-sheet [:signing.ui/open-fee-sheet
@ -239,7 +232,8 @@
keycard-multiaccount? [:keycard-multiaccount?] keycard-multiaccount? [:keycard-multiaccount?]
prices [:prices] prices [:prices]
wallet-currency [:wallet/currency] wallet-currency [:wallet/currency]
mainnet? [:mainnet?]] mainnet? [:mainnet?]
prices-loading? [:prices-loading?]]
(let [display-symbol (wallet.utils/display-symbol token) (let [display-symbol (wallet.utils/display-symbol token)
fee-display-symbol (wallet.utils/display-symbol (tokens/native-currency chain))] fee-display-symbol (wallet.utils/display-symbol (tokens/native-currency chain))]
[react/view (styles/sheet) [react/view (styles/sheet)
@ -258,9 +252,9 @@
[contact-item (i18n/label :t/to) contact] [contact-item (i18n/label :t/to) contact]
[separator] [separator]
[token-item token display-symbol] [token-item token display-symbol]
[amount-item prices wallet-currency amount amount-error display-symbol fee-display-symbol] [amount-item prices wallet-currency amount amount-error display-symbol fee-display-symbol prices-loading?]
[separator] [separator]
[fee-item prices wallet-currency fee-display-symbol fee gas-error] [fee-item prices wallet-currency fee-display-symbol fee gas-error prices-loading?]
[react/view {:align-items :center :margin-top 16 :margin-bottom 40} [react/view {:align-items :center :margin-top 16 :margin-bottom 40}
(if keycard-multiaccount? (if keycard-multiaccount?
[sign-with-keycard-button amount-error gas-error] [sign-with-keycard-button amount-error gas-error]

18
src/status_im/ui/screens/wallet/account/views.cljs
View File

@ -38,14 +38,15 @@
(views/defview account-card [{:keys [address color type] :as account}] (views/defview account-card [{:keys [address color type] :as account}]
(views/letsubs [currency [:wallet/currency] (views/letsubs [currency [:wallet/currency]
portfolio-value [:account-portfolio-value address] portfolio-value [:account-portfolio-value address]
window-width [:dimensions/window-width]] window-width [:dimensions/window-width]
prices-loading? [:prices-loading?]]
[react/view {:style (styles/card window-width color)} [react/view {:style (styles/card window-width color)}
[react/view {:padding 16 :padding-bottom 12 :flex 1 :justify-content :space-between} [react/view {:padding 16 :padding-bottom 12 :flex 1 :justify-content :space-between}
[react/nested-text {:style {:color colors/white-transparent-persist :line-height 38 [react/view {:style {:flex-direction :row}}
:font-weight "600" :font-size 32}} (if prices-loading?
[{:style {:color colors/white-persist}} portfolio-value] [react/small-loading-indicator :colors/white-persist]
" " [react/text {:style {:font-size 32 :color colors/white-persist :font-weight "600"}} portfolio-value])
(:code currency)] [react/text {:style {:font-size 32 :color colors/white-transparent-persist :font-weight "600"}} (str " " (:code currency))]]
[react/text {:number-of-lines 1 :ellipsize-mode :middle [react/text {:number-of-lines 1 :ellipsize-mode :middle
:style {:width (/ window-width 3) :style {:width (/ window-width 3)
:line-height 22 :font-size 13 :line-height 22 :font-size 13
@ -92,7 +93,8 @@
(views/defview assets-and-collections [address] (views/defview assets-and-collections [address]
(views/letsubs [{:keys [tokens nfts]} [:wallet/visible-assets-with-values address] (views/letsubs [{:keys [tokens nfts]} [:wallet/visible-assets-with-values address]
currency [:wallet/currency]] currency [:wallet/currency]
prices-loading? [:prices-loading?]]
(let [{:keys [tab]} @state] (let [{:keys [tab]} @state]
[react/view {:flex 1} [react/view {:flex 1}
[react/view {:flex-direction :row :margin-bottom 8 :padding-horizontal 4} [react/view {:flex-direction :row :margin-bottom 8 :padding-horizontal 4}
@ -104,7 +106,7 @@
[list/flat-list {:data tokens [list/flat-list {:data tokens
:default-separator? false :default-separator? false
:key-fn :name :key-fn :name
:render-fn (accounts/render-asset (:code currency))}] :render-fn (accounts/render-asset (:code currency) prices-loading?)}]
(= tab :nft) (= tab :nft)
(if (seq nfts) (if (seq nfts)
[list/flat-list {:data nfts [list/flat-list {:data nfts

38
src/status_im/ui/screens/wallet/accounts/views.cljs
View File

@ -19,7 +19,8 @@
(views/defview account-card [{:keys [name color address type] :as account}] (views/defview account-card [{:keys [name color address type] :as account}]
(views/letsubs [currency [:wallet/currency] (views/letsubs [currency [:wallet/currency]
portfolio-value [:account-portfolio-value address]] portfolio-value [:account-portfolio-value address]
prices-loading? [:prices-loading?]]
[react/touchable-highlight [react/touchable-highlight
{:on-press #(re-frame/dispatch [:navigate-to :wallet-account account]) {:on-press #(re-frame/dispatch [:navigate-to :wallet-account account])
:on-long-press #(re-frame/dispatch [:bottom-sheet/show-sheet :on-long-press #(re-frame/dispatch [:bottom-sheet/show-sheet
@ -27,11 +28,11 @@
:content-height 130}])} :content-height 130}])}
[react/view {:style (styles/card color)} [react/view {:style (styles/card color)}
[react/view {:flex-direction :row :align-items :center :justify-content :space-between} [react/view {:flex-direction :row :align-items :center :justify-content :space-between}
[react/nested-text {:style {:color colors/white-transparent-persist [react/view {:style {:flex-direction :row}}
:font-weight "500" :flex-shrink 1}} (if prices-loading?
[{:style {:color colors/white-persist}} portfolio-value] [react/small-loading-indicator :colors/white-persist]
" " [react/text {:style {:color colors/white-persist :font-weight "500"}} portfolio-value])
(:code currency)] [react/text {:style {:color colors/white-transparent-persist :font-weight "500"}} (str " " (:code currency))]]
[react/touchable-highlight [react/touchable-highlight
{:on-press #(re-frame/dispatch [:show-popover {:on-press #(re-frame/dispatch [:show-popover
{:view :share-account :address address}])} {:view :share-account :address address}])}
@ -65,14 +66,18 @@
(when active? (when active?
[react/view {:width 24 :height 3 :border-radius 4 :background-color colors/blue}])]) [react/view {:width 24 :height 3 :border-radius 4 :background-color colors/blue}])])
(defn render-asset [currency & [on-press]] (defn render-asset [currency prices-loading? & [on-press]]
(fn [{:keys [icon decimals amount color value] :as token}] (fn [{:keys [icon decimals amount color value] :as token}]
[list-item/list-item [list-item/list-item
(cond-> {:title-prefix (wallet.utils/format-amount amount decimals) (cond-> {:title-prefix (wallet.utils/format-amount amount decimals)
:title (wallet.utils/display-symbol token) :title (wallet.utils/display-symbol token)
:title-color-override colors/gray :title-color-override colors/gray
:accessibility-label (str (:symbol token) "-asset-value") :accessibility-label (str (:symbol token) "-asset-value")
:subtitle (str (if value value 0) " " currency) :subtitle [react/view {:style {:flex-direction :row :line-height 22}}
(if prices-loading?
[react/small-loading-indicator]
[react/text {:style {:color colors/gray}} (if value value 0)])
[react/text {:style {:color colors/gray}} (str " " currency)]]
:icon (if icon :icon (if icon
[list/item-image icon] [list/item-image icon]
[chat-icon/custom-icon-view-list (:name token) color])} [chat-icon/custom-icon-view-list (:name token) color])}
@ -81,20 +86,23 @@
(views/defview assets [] (views/defview assets []
(views/letsubs [{:keys [tokens nfts]} [:wallet/all-visible-assets-with-values] (views/letsubs [{:keys [tokens nfts]} [:wallet/all-visible-assets-with-values]
currency [:wallet/currency]] currency [:wallet/currency]
prices-loading? [:prices-loading?]]
[list/flat-list {:data tokens [list/flat-list {:data tokens
:default-separator? false :default-separator? false
:key-fn :name :key-fn :name
:render-fn (render-asset (:code currency))}])) :render-fn (render-asset (:code currency) prices-loading?)}]))
(views/defview total-value [] (views/defview total-value []
(views/letsubs [currency [:wallet/currency] (views/letsubs [currency [:wallet/currency]
portfolio-value [:portfolio-value]] portfolio-value [:portfolio-value]
prices-loading? [:prices-loading?]]
[react/view {:style {:padding-horizontal 16}} [react/view {:style {:padding-horizontal 16}}
[react/nested-text {:style {:font-size 32 :color colors/gray :font-weight "600"}} [react/view {:style {:flex-direction :row}}
[{:style {:color colors/black}} portfolio-value] (if prices-loading?
" " [react/small-loading-indicator]
(:code currency)] [react/text {:style {:font-size 32 :color colors/black :font-weight "600"}} portfolio-value])
[react/text {:style {:font-size 32 :color colors/gray :font-weight "600"}} (str " " (:code currency))]]
[react/text {:style {:color colors/gray}} (i18n/label :t/wallet-total-value)]])) [react/text {:style {:color colors/gray}} (i18n/label :t/wallet-total-value)]]))
(defn- request-camera-permissions [] (defn- request-camera-permissions []

4
src/status_im/ui/screens/wallet/send/sheets.cljs
View File

@ -11,12 +11,14 @@
(views/defview assets [address] (views/defview assets [address]
(views/letsubs [{:keys [tokens]} [:wallet/visible-assets-with-values address] (views/letsubs [{:keys [tokens]} [:wallet/visible-assets-with-values address]
currency [:wallet/currency]] currency [:wallet/currency]
prices-loading? [:prices-loading?]]
[list/flat-list [list/flat-list
{:data tokens {:data tokens
:key-fn (comp str :symbol) :key-fn (comp str :symbol)
:render-fn (wallet.accounts/render-asset :render-fn (wallet.accounts/render-asset
(:code currency) (:code currency)
prices-loading?
#(re-frame/dispatch [:wallet.send/set-symbol (:symbol %)]))}])) #(re-frame/dispatch [:wallet.send/set-symbol (:symbol %)]))}]))
(defn render-account [field event] (defn render-account [field event]

BIN
test/appium/views/elements_templates/multi_account_color.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

2
test/appium/views/wallet_view.py
View File

@ -221,7 +221,7 @@ class AccountElementButton(BaseButton):
def color_matches(self, expected_color_image_name: str): def color_matches(self, expected_color_image_name: str):
amount_text = BaseText(self.driver) amount_text = BaseText(self.driver)
amount_text.locator = amount_text.Locator.xpath_selector(self.locator.value + "//*[@text='0 USD']") amount_text.locator = amount_text.Locator.xpath_selector(self.locator.value + "//*[@text=' USD']")
return amount_text.is_element_image_equals_template(expected_color_image_name) return amount_text.is_element_image_equals_template(expected_color_image_name)