Loading indicator shown when prices loading is in progress
Signed-off-by: Volodymyr Kozieiev <vkjr.sp@gmail.com>
This commit is contained in:
parent
49fd306f25
commit
9e5cc74ea9
|
@ -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))
|
||||
|
|
|
@ -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]
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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 []
|
||||
|
|
|
@ -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]
|
||||
|
|
Binary file not shown.
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 1.5 KiB |
|
@ -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)
|
||||
|
||||
|
||||
|
|
Loading…
Reference in New Issue