From 9e5cc74ea960f1fd2b06e5e4485263816e5b3e83 Mon Sep 17 00:00:00 2001 From: Volodymyr Kozieiev Date: Tue, 31 Mar 2020 14:37:29 +0300 Subject: [PATCH] Loading indicator shown when prices loading is in progress Signed-off-by: Volodymyr Kozieiev --- .../src/status_im/ui/components/react.cljs | 5 ++ src/status_im/ui/screens/signing/views.cljs | 60 ++++++++---------- .../ui/screens/wallet/account/views.cljs | 18 +++--- .../ui/screens/wallet/accounts/views.cljs | 38 ++++++----- .../ui/screens/wallet/send/sheets.cljs | 4 +- .../multi_account_color.png | Bin 2128 -> 1543 bytes test/appium/views/wallet_view.py | 2 +- 7 files changed, 69 insertions(+), 58 deletions(-) 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 71b1f93d90668941fd01f57fc70b11c1d1b57655..b88423ded720dee1c1cfa4dc2d607b4e92d858c6 100644 GIT binary patch literal 1543 zcmV+i2Kf1jP)~>P8nanipw4KRJU#*YP=jdfRbvtdRowU=&jT2k4 z&enkhPa+7CIQ9Y(1XdDE*-E4fd{>KGi+e5n*b94MQ^N0l`_q7wD-rKHf%{AZUB#?@eKq^iG@~n=_kA8_(egMG8Y_t37k28I5Y3&yjD@y>3 ztsXnyeR-{~k}06iuaYm;Q8EQ2Ng)UVe9vYwK4o}%Lf6zXL1xu3+S~EX&!uy*+05*3_%o;MHN|5 z$!T*`>+AH}yENZ?jemvU_d=Zd(o?Dnk1qxS@Vp7GGe!_4WF?0vN&sZC8jaP@Io$p` z=IQaZb9%0W^M9*CloVt|MU=wJ7DNfX_91G%!ok+xaGlYV|DB6d)EiXm7s8B(U5uj_ zQx`5t87lQhRO=rhN(!PRQ(yiB^TqYz*yGbHOJ5WvG<}I`Z5_2x0YEKOSX%ozdmDcu z2>c7*Te!aWqCB@2)(&8gP4+gPU0M;IXJZ_F%hB#vaCX3wQHvBS%Quea`yQvAJ$7FH zfqr`@8qaBS)2o+zAWl{-M)vUZ_{!QpXV5#uG7TJigkz6Tl>B?eKHB{!mT5$vE46im zv+{*|P*w;R_eYeJ1jmrQjc2zSzIFHwAAIx$2p}t2%GDKm#&(#`twwqWT-%E5qTV1^ znEOHFk4%H{s2_dK7weII=i&@{Zz5Zi6dtbsn#GmReo&Dnqh4fZvlnH4=VjGtZjje% zXnNSZiIR*yzlJ`)hCMME54%{V!Jv15=i1*(4$fp4*^;70_MM9ZaIp1PYK@;zsXdB% z5D0skOje^*eaOP{Cs<~ip7EMN@92J@-~(3$ZwH?u|GAj&0F;^PCpXQ8Ib7@&oc(jeN0&Bxgb= z0g9C+L`h+P^Ut>uH@;fqt;D?&CyrxVbX%|Kwq7HM66NX&a|=&UvIPJNr8@fD8ol=R zd&kOTwaAXYLd?8d1;NE{e}XXkCMSq7-{9STKMZ`2p0UmDt7o{*I2u2Hh`%q{oF3Ws zco5k$ublW!A!l+k2ab2Ko;#UNN-aezA@F^MgOkL$TxWzeXi=&@4D(QC&*M7s#d`RB zJHr|@BYS3X##R?tJxfZZs5joaYvc-5GO@t%W(z>m8`K&f1EDyZ&wr2SC2!a9_Wo_Y zvv3|Cz;(v-yZh1Snd{@UyFayhYD-TO@0=*fEG&N-?F51E)9>s~`HW)kHG(KIxA-J6 z2Q^=z5bI#$C2&&&L8P(zIk`eL8tXPUrw-C)UOB$!&^~@iefcR6KEytF`~|I}7o2wX zrhK*X18R+r$>z!zfsL(87h{g*8otm1sbbAV`2GIT*rbSEICQZPJPep zAJaVe&y{nY?EjmG>%T&hvmijJx)_i+0km*%+fR(`zqFYJlQ{Nj(JyC}&Dl3c#z8~8q*<_5;mi)-f_ zTV3`y|H9(RXQ+Ao>_S43A2p&UvRk zr*ra(LHB@Cbp@@oh@8nI%Nanx^K4vu#Bk80-`Sn%xiGf6?0okn1Z^LkpA=1_1yW9#eF6fCxKL) t1X6JlNX1DY6(@mIoCH#F5=g~K;D5pMC8)chJ1GDF002ovPDHLkV1l-p^tJ#1 literal 2128 zcmV-W2(R~vP)MG1(IC^tI%cHsYow$Lr2Ep&@$3*92xLbr&v&@G}Zbc<*U-6GmTw}`gT zEkbVe;^oudq5tS*{Gonq4j+|rfm}My?8Hs(4Zp?e@{{N8w0Gbr}N8#lkAt)u$vAUTx%iD=5RM+Vl&dy3s?Ci*bcn&@uW|FeU-RhW zw;MM6BI)QlN-#2nBrBG30T3kzvg*L)?Zh8GM11BBnU(pb`w&DCS+pZ7b{y^wf{{U1 zmZpf$-l4k5KhGkx%M;i~JmiiW<&s_eYA+oMlxi|brZe9PaF(qQhu5kXVKf&SZK$29> zUHLI{6aOKfU3yMg_7;ynN-$CvxsXkgn7?lkQIb>wkpY5{!-$fCD9J>6Pm;OcSm;t= zb<^-BiV|*r55e#tc2@uZyDLCX>@3rx@1yJ0dfhc6(sP2?OJ6ZwJiPs9KK%QyEOBSz z!Mpt9?KjZ05&#ZYkXOI>{bsb-S9~3@T6_RXg$&c9*Eft*O)HU@f580INAT=`Shaib z1bUn9uUgeuU7lw0;Wbv4CXI53yTdxGFbRG5HKs?eGd6OSv5~7R#~e zf?&KCL-bFp{j+Dhc2T^dL$KPac1;C;ggdk$HJ30u*vdOJ(yGyb)_V zA%IdLy=w>elX59Xa&e5=i4S=^a+QVYTb5Yr@<#A?Z2z5if@-UWVew`lxbJA6Lh^EY6M~DC$)lTs;fU=xYDZ{sl)_RkFHZG*YnI;0^Kb(hu^Tx z15kuo=t!q#jKa>oSGQ~|8as>4;WM5S^ADPG#+>nG)v@ExnUk(oDO%py>|WfyZrr|Z zT%OKt+p3iF|aeeWDZrbV#ni;Zu=RBD~M|P5`}d+#O;sLJ8<6klO%Q9HqBe)wey?Z5RSfV*p+gD zm1O*m6XPl1yjs z=ZuW5SF5ZnPg&~ZP3H`PDALh&WJ@3H&Hygc&TTh&Mi4}z{bz8v>idyo{ITUy!4UfC zlaHBr@UHRV=&5gU?#ho)RF_fKf8-Kh{^l={WE)Vs<+%O9@0)h4s+Cz{$GE}B!YL|Ff`U4Q5h z7hnH5q3)M9{W1W>!Yaep-sIC;e`;7~rvy8P2z4E^tUotHuU1)(kCK?bZ#ht3kKGxd z>%b}OPXD%jSIR|}79NmX9NX}2yF0`6RJ97p#5jq$dz<>VLFhG(pZy;FM=s$H#Zc{@ z+U0C!k-3Rs?hU_XIq2Rkit5B0Jb>HVg{(S}Wfc(6v=Wt4o@_eK%JNiGanu()fZN}L z&EZ9s?TDg8wW?9o%9M(kTANFgmL;Bu3>ep<6^-=oZlyx<#~wZV_#vTSQyv7SR^EMYM%(5&r`M{`N0lRA(gs0000