diff --git a/components/src/status_im/ui/components/react.cljs b/components/src/status_im/ui/components/react.cljs index 90c769ac1b..eaca8b82e0 100644 --- a/components/src/status_im/ui/components/react.cljs +++ b/components/src/status_im/ui/components/react.cljs @@ -70,6 +70,11 @@ (defn activity-indicator [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 pan-responder (.-PanResponder js-dependencies/react-native)) diff --git a/src/status_im/ui/screens/signing/views.cljs b/src/status_im/ui/screens/signing/views.cljs index 9133fc4030..d2fff83f2b 100644 --- a/src/status_im/ui/screens/signing/views.cljs +++ b/src/status_im/ui/screens/signing/views.cljs @@ -174,32 +174,24 @@ [react/text (or formatted-data "")]]] [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]))] [list-item/list-item {:type :small :title :t/send-request-amount :error amount-error - :accessories [[react/nested-text {:style {:color colors/gray}} - [{:style {:color colors/black}} (utils/format-decimals amount 6)] - " " - (or display-symbol fee-display-symbol) - " • " - [{:style {:color colors/black}} - (if converted-value - (i18n/format-currency converted-value (:code wallet-currency)) - [react/activity-indicator {:color :colors/gray - :ios {:size :small} - :android {:size :16}}])] - " " - (str (:code wallet-currency))]]}])) + :accessories [[react/view {:style {:flex-direction :row}} + [react/nested-text {:style {:color colors/gray}} + [{:style {:color colors/black}} (utils/format-decimals amount 6)] + " " + (or display-symbol fee-display-symbol) + " • "] + (if prices-loading? + [react/small-loading-indicator] + [react/text {:style {:color colors/black}} (i18n/format-currency converted-value (:code wallet-currency))]) + [react/text {:style {:color colors/gray}} (str " " (:code wallet-currency))]]]}])) -(defn loading-indicator [] - [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/defview fee-item [prices wallet-currency fee-display-symbol fee gas-error prices-loading?] (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]))] [list-item/list-item @@ -208,16 +200,17 @@ :error (when-not (or gas-price-loading? gas-loading?) gas-error) :disabled? (or gas-price-loading? gas-loading?) :accessories (if (or gas-price-loading? gas-loading?) - [[loading-indicator]] - [[react/nested-text {:style {:color colors/gray}} - [{:style {:color colors/black}} (utils/format-decimals fee 6)] - " " - fee-display-symbol - " • " - [{:style {:color colors/black}} - (i18n/format-currency converted-fee-value (:code wallet-currency))] - " " - (str (:code wallet-currency))] + [[react/small-loading-indicator]] + [[react/view {:style {:flex-direction :row}} + [react/nested-text {:style {:color colors/gray}} + [{:style {:color colors/black}} (utils/format-decimals fee 6)] + " " + fee-display-symbol + " • "] + (if prices-loading? + [react/small-loading-indicator] + [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]) :on-press #(re-frame/dispatch [:signing.ui/open-fee-sheet @@ -239,7 +232,8 @@ keycard-multiaccount? [:keycard-multiaccount?] prices [:prices] wallet-currency [:wallet/currency] - mainnet? [:mainnet?]] + mainnet? [:mainnet?] + prices-loading? [:prices-loading?]] (let [display-symbol (wallet.utils/display-symbol token) fee-display-symbol (wallet.utils/display-symbol (tokens/native-currency chain))] [react/view (styles/sheet) @@ -258,9 +252,9 @@ [contact-item (i18n/label :t/to) contact] [separator] [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] - [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} (if keycard-multiaccount? [sign-with-keycard-button amount-error gas-error] diff --git a/src/status_im/ui/screens/wallet/account/views.cljs b/src/status_im/ui/screens/wallet/account/views.cljs index c034fa1863..18c4f36b0e 100644 --- a/src/status_im/ui/screens/wallet/account/views.cljs +++ b/src/status_im/ui/screens/wallet/account/views.cljs @@ -38,14 +38,15 @@ (views/defview account-card [{:keys [address color type] :as account}] (views/letsubs [currency [:wallet/currency] 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 {:padding 16 :padding-bottom 12 :flex 1 :justify-content :space-between} - [react/nested-text {:style {:color colors/white-transparent-persist :line-height 38 - :font-weight "600" :font-size 32}} - [{:style {:color colors/white-persist}} portfolio-value] - " " - (:code currency)] + [react/view {:style {:flex-direction :row}} + (if prices-loading? + [react/small-loading-indicator :colors/white-persist] + [react/text {:style {:font-size 32 :color colors/white-persist :font-weight "600"}} portfolio-value]) + [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 :style {:width (/ window-width 3) :line-height 22 :font-size 13 @@ -92,7 +93,8 @@ (views/defview assets-and-collections [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] [react/view {:flex 1} [react/view {:flex-direction :row :margin-bottom 8 :padding-horizontal 4} @@ -104,7 +106,7 @@ [list/flat-list {:data tokens :default-separator? false :key-fn :name - :render-fn (accounts/render-asset (:code currency))}] + :render-fn (accounts/render-asset (:code currency) prices-loading?)}] (= tab :nft) (if (seq nfts) [list/flat-list {:data nfts diff --git a/src/status_im/ui/screens/wallet/accounts/views.cljs b/src/status_im/ui/screens/wallet/accounts/views.cljs index f4f39e4163..511eafca05 100644 --- a/src/status_im/ui/screens/wallet/accounts/views.cljs +++ b/src/status_im/ui/screens/wallet/accounts/views.cljs @@ -19,7 +19,8 @@ (views/defview account-card [{:keys [name color address type] :as account}] (views/letsubs [currency [:wallet/currency] - portfolio-value [:account-portfolio-value address]] + portfolio-value [:account-portfolio-value address] + prices-loading? [:prices-loading?]] [react/touchable-highlight {:on-press #(re-frame/dispatch [:navigate-to :wallet-account account]) :on-long-press #(re-frame/dispatch [:bottom-sheet/show-sheet @@ -27,11 +28,11 @@ :content-height 130}])} [react/view {:style (styles/card color)} [react/view {:flex-direction :row :align-items :center :justify-content :space-between} - [react/nested-text {:style {:color colors/white-transparent-persist - :font-weight "500" :flex-shrink 1}} - [{:style {:color colors/white-persist}} portfolio-value] - " " - (:code currency)] + [react/view {:style {:flex-direction :row}} + (if prices-loading? + [react/small-loading-indicator :colors/white-persist] + [react/text {:style {:color colors/white-persist :font-weight "500"}} portfolio-value]) + [react/text {:style {:color colors/white-transparent-persist :font-weight "500"}} (str " " (:code currency))]] [react/touchable-highlight {:on-press #(re-frame/dispatch [:show-popover {:view :share-account :address address}])} @@ -65,14 +66,18 @@ (when active? [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}] [list-item/list-item (cond-> {:title-prefix (wallet.utils/format-amount amount decimals) :title (wallet.utils/display-symbol token) :title-color-override colors/gray :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 [list/item-image icon] [chat-icon/custom-icon-view-list (:name token) color])} @@ -81,20 +86,23 @@ (views/defview assets [] (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 :default-separator? false :key-fn :name - :render-fn (render-asset (:code currency))}])) + :render-fn (render-asset (:code currency) prices-loading?)}])) (views/defview total-value [] (views/letsubs [currency [:wallet/currency] - portfolio-value [:portfolio-value]] + portfolio-value [:portfolio-value] + prices-loading? [:prices-loading?]] [react/view {:style {:padding-horizontal 16}} - [react/nested-text {:style {:font-size 32 :color colors/gray :font-weight "600"}} - [{:style {:color colors/black}} portfolio-value] - " " - (:code currency)] + [react/view {:style {:flex-direction :row}} + (if prices-loading? + [react/small-loading-indicator] + [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)]])) (defn- request-camera-permissions [] diff --git a/src/status_im/ui/screens/wallet/send/sheets.cljs b/src/status_im/ui/screens/wallet/send/sheets.cljs index 398cd78cfc..82383eb184 100644 --- a/src/status_im/ui/screens/wallet/send/sheets.cljs +++ b/src/status_im/ui/screens/wallet/send/sheets.cljs @@ -11,12 +11,14 @@ (views/defview assets [address] (views/letsubs [{:keys [tokens]} [:wallet/visible-assets-with-values address] - currency [:wallet/currency]] + currency [:wallet/currency] + prices-loading? [:prices-loading?]] [list/flat-list {:data tokens :key-fn (comp str :symbol) :render-fn (wallet.accounts/render-asset (:code currency) + prices-loading? #(re-frame/dispatch [:wallet.send/set-symbol (:symbol %)]))}])) (defn render-account [field event] diff --git a/test/appium/views/elements_templates/multi_account_color.png b/test/appium/views/elements_templates/multi_account_color.png index 71b1f93d90..b88423ded7 100644 Binary files a/test/appium/views/elements_templates/multi_account_color.png and b/test/appium/views/elements_templates/multi_account_color.png differ diff --git a/test/appium/views/wallet_view.py b/test/appium/views/wallet_view.py index be82ed486d..7c5383f6f8 100644 --- a/test/appium/views/wallet_view.py +++ b/test/appium/views/wallet_view.py @@ -221,7 +221,7 @@ class AccountElementButton(BaseButton): def color_matches(self, expected_color_image_name: str): 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)