From 125c117bacebfe7bfdb70be2b2c3d22035019802 Mon Sep 17 00:00:00 2001 From: Omar Basem Date: Wed, 25 Oct 2023 15:45:45 +0400 Subject: [PATCH] wallet: token value drawer (#17730) * wallet: token value drawer --- .../images/icons2/20x20/hide-password@2x.png | Bin 0 -> 615 bytes .../images/icons2/20x20/hide-password@3x.png | Bin 0 -> 930 bytes resources/images/icons2/20x20/hide@2x-1.png | Bin 1100 -> 0 bytes resources/images/icons2/20x20/hide@2x.png | Bin 615 -> 1100 bytes resources/images/icons2/20x20/hide@3x-1.png | Bin 1549 -> 0 bytes resources/images/icons2/20x20/hide@3x.png | Bin 930 -> 1549 bytes src/quo/components/inputs/input/view.cljs | 2 +- .../list_items/token_value/view.cljs | 3 +- .../contexts/wallet/account/tabs/view.cljs | 4 +- .../wallet/common/token_value/view.cljs | 40 ++++++++++++++++++ src/status_im2/contexts/wallet/home/view.cljs | 3 +- translations/en.json | 3 +- 12 files changed, 49 insertions(+), 6 deletions(-) create mode 100644 resources/images/icons2/20x20/hide-password@2x.png create mode 100644 resources/images/icons2/20x20/hide-password@3x.png delete mode 100644 resources/images/icons2/20x20/hide@2x-1.png delete mode 100644 resources/images/icons2/20x20/hide@3x-1.png create mode 100644 src/status_im2/contexts/wallet/common/token_value/view.cljs diff --git a/resources/images/icons2/20x20/hide-password@2x.png b/resources/images/icons2/20x20/hide-password@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..7994cdfce4030b9ca5b654abd05e3031e502a833 GIT binary patch literal 615 zcmV-t0+{`YP)gKcp8O^k@7rjkR9n%Z3NA@aukR=Q2n#CowaE3F6;|xcOx8eyZtT&eTNNE zk|#HIqOGjOn)oSnn(x2cy?)F2q>`WZywCE}sx>0ZX_1aT8QsO%MszHQ#)sDGi>U_wcV$MBCuNm#A))x`U8 zjG!AO+Zn2U=E=>hAUnlZHlnp?-*6xW2sa*UOx;EIX1F%KzUF-|BXbW%0iE&1TA(4; z#D`rkz^Cf=JHs6Ixef_4QJy=&`fSRN!C?3+d;-|{#$&e{jCue7002ovPDHLkV1f=N B2@U`N literal 0 HcmV?d00001 diff --git a/resources/images/icons2/20x20/hide-password@3x.png b/resources/images/icons2/20x20/hide-password@3x.png new file mode 100644 index 0000000000000000000000000000000000000000..f6c8e097833bb0bcc3f6c1a14b00ee813553cf60 GIT binary patch literal 930 zcmV;T16}-yP)kI`q9X;La`J&lRJ& zJmt=N`0fxU5IlMmke6l~25R$CoxM%=73q_dj__Y4-dXHksM9)35VP{pjs{VSw~B*H zb-LEAe=cpJX~?h9`8C@pO>iUj>Ab){hHU8OEZIB_PHIq6BTSI$35br&vvEJn*Wgr> zg7CK>yK)fjlfJ-!cBMv`pn)_&GSajGv=P1Je_T+x#I=u;&XSE;g5W?O!a%8_ySNvD zUdG2|t|fR=RZAMm1h18?(%p$>BEWbR+N1e?hgT zbTWmDepd?ad<{z)0QAse)QZvht5ngX=upTZA8<`;Wj8BsFZ)c%6cq=(bi4e02CJeBk}Grwqb^7 z%o^eKooUE#fuS6x%SC6&8aoQpcmXWQfhANP;?7bH6twdV7#*0pP;F(%Z=@?r6|ltG zVI+2bQK{bt>U0-(zl!JUNy~Y0KpO#>(LSXtrg$C8%mU37sIvyny&Yc*UV|mpq9q_a zG26(=G!Y@i4InJz8OGYJ_v7PqJ%U2B2;iq(L0eb9@VnVY8)9>1wQ_h?mQbN%yL^bz z$RJ*KmlAD04{}sSL_vDxqAU$m z_$k8X-ymaYtziU<7^*DUV4KpTVi=WX7=~dOhGBZ~3wDS%oMRAZ)&Kwi07*qoM6N<$ Ef+5eR761SM literal 0 HcmV?d00001 diff --git a/resources/images/icons2/20x20/hide@2x-1.png b/resources/images/icons2/20x20/hide@2x-1.png deleted file mode 100644 index 6836490c95a16b6014c7366e91df816474777d3a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1100 zcmV-S1he~zP)EH?Cya8o8$P+MhP+_{H0!k`OM+bCth@T=|&X5EJ z%f9Sdl6@AEEh#Xj@He9w>$JD`-ToV3h#>}xT-4%(D6EWfVbz`5DLgk2xp7fY^h}D^ zpJ2c+!V67c7oFeD%AiTIs6{Sj%M8?3@NR%n{w*)JcHPxsZAr52zZTwtva%Dr7(|?t|;xoR~a+fd?$oy8^X1#)TbD98YeVpyf1z10Uq?Vizvx~uRj9rlfM#MhgQw)ioC@_~CY1{Bvz{9tK%ubu# zSgkDFU(xsD^K)FhT28V**H3`T4qBm0S)9A0;5t>X#)9vyHL%5j2`{W~R2)|l+*uq@Ku(Gwk$53+bfSVa@uWB;>Mkb4`IacPTr6uh$< z2k47dfk%(cJE3~X!nb1H2Fv@%mj1}A-M9nD0)cE+l2o2BRCati_81yO??7EKILfEi z@W7IPo3D5BdLvHpB;H;@^NYTgB_=WU&PMn&W%ql0L<1DZ;=dn!Z(Go_o_ikL6uO!c+);GoRV6D)sv26{S7O^BjZJ#$>-{xG@o~_)f>M;W1koA2 zN?KQvIF591GC9S-Ec;6fV|;4A?%e)}Qf_iF?so;wS_zV`8E88N2E~$JI^q+D4B~>K zIOg<@UYWm__E{{!mXLE}Ywd{RVGGzt_o!7pl&u|^d}CvXGNkD^eMkNPWHkfao$v^c3QjOds#y6>v4gb8(#Ve`_6-s#MU4Dy zBzkdP2nyvTafOS;5UP-=qECR!*Nz{>Q;D4wjcQDzT&_O3ogr5V*S z6VyRj>ww#KWdlq(31Ij7~!>{^n27LqL~FsAS~qZ#Y8xA)!t8(@eb z28&$O;)E!yjB;Vso!TipHxRjTQBd?uir1fDz%arKO<)(D-+#@@ph>c*MJ{H`4AfTe zZh%q#Eibp@ln7yoI@B!&OayBtm?u)&5}tx!8j@kTka`;rs2ZTQf641AWI!(NgX`R! zm^^=h2Q1RN0<}2Cg&j^DPi~r_Tq!~gS+uAC$|F2q9^?619pxbfSU-WJmYfi?i@|S< zU6BJu#6I9t41bB9C@_~CY1{Bvz{9tK%ubu#SgkDFU(xsD^K)FhT28V**H3`T4qBm0 zS)9A0;5t>X#)9vyHL%5rlMk|ZL|8==+++W-d ztKGN*$O3_ER+3bnFjRJYI`$YEMDIXdF*wSn*6_fRf19s&@_Hjq@g&|}LGz2gmL(=J z_RdE5G=F9HdwfI#6vyJfAAE0H(6gR<9^B+kUd{DV{6Z8;4S)k*9<8j}g*uxh3&*Nm zAv&(srWx1juvV#>JSy2!z&;1>S*9SR4H`IV*qUw+KI3&y7>XEQYrPb@niAYmbmUbf zD@m#vTHIG++aQfidg|-_HAeAq(7J+Bl(q!X8GpS>T33=dj&yJ`ImN&%`%4RBd}_b$ z-2RACZgMg1cLmN`36ifFXgdW4#gbn-;uD7q;)0?$=JbwUnZK9zSuDYpkaJ^e?TF)H z3)n~Zs8v0btsR+sY7X7fB7~uVC4(&ndwKaSd`4ue^A2v$c*3*J z)PG@=C0*xsS1S`f7+q!)$!;c?C#!hYA?82@(t?Y^YWJ8FKO&L4P`*SD{qE@a|F)Ql zB+Z85K<=+2JITKDAi2Pc$(9Q#n2QXW%cDGR<@n5LRBY;?j)U^=z>CvXGNkD^eMkNP zWHkfao$v^c3QjOds#y6>v4gb8(#Ve`_I?c#DMgI@Z6xV9i3xUy(i8(L`jC(iRlLZ0 z(@VO z^W>8wNp>4BK!gX31~lj3If5)n^%jO0;u+!}A@vqEpnE1U00000NkvXXu0mjfSHJCM delta 541 zcmV+&0^F>7JWGaL3h@>tPjtzmmzy@x$6_8?k8NzAV3Lpc4wP^7!>9NAd6d$5ma{18pZF(y~Y zL9P}jt{p`}r|H&&TVO&-h{y1cMM+q#^wq@sag3lFCEFRQe&)%|tROqZS2m)xXy0%k z1qe4DYfRlm_hz^@zP{#tFC%jgMgg7i#af^t*2IThFTkhj_B+EI_PGuTGf|#9!TM~< fkHKL0D;9hL*!jj|w;GIk00000NkvXXu0mjf8~*%Z diff --git a/resources/images/icons2/20x20/hide@3x-1.png b/resources/images/icons2/20x20/hide@3x-1.png deleted file mode 100644 index bf395a82103a8c7f3f30655035d763cdf47886c6..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1549 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 diff --git a/src/quo/components/inputs/input/view.cljs b/src/quo/components/inputs/input/view.cljs index 50b1100038..8e7fd6bd9f 100644 --- a/src/quo/components/inputs/input/view.cljs +++ b/src/quo/components/inputs/input/view.cljs @@ -150,7 +150,7 @@ :auto-complete :password :secure-text-entry (not @password-shown?) :right-icon {:style-fn style/password-icon - :icon-name (if @password-shown? :i/hide :i/reveal) + :icon-name (if @password-shown? :i/hide-password :i/reveal) :on-press #(swap! password-shown? not)})]))) (defn input-internal diff --git a/src/quo/components/list_items/token_value/view.cljs b/src/quo/components/list_items/token_value/view.cljs index 12b0c0fdb8..bbc639807b 100644 --- a/src/quo/components/list_items/token_value/view.cljs +++ b/src/quo/components/list_items/token_value/view.cljs @@ -14,7 +14,7 @@ (defn- internal-view [] (let [state (reagent/atom :default)] - (fn [{:keys [theme customization-color status token metrics? values on-press]}] + (fn [{:keys [theme customization-color status token metrics? values on-press on-long-press]}] (let [bg-opacity (case @state :active 10 :pressed 5 @@ -28,6 +28,7 @@ (reset! state :active) (js/setTimeout #(reset! state :default) 300) on-press) + :on-long-press on-long-press :accessibility-label :container} [rn/view {:style {:flex-direction :row diff --git a/src/status_im2/contexts/wallet/account/tabs/view.cljs b/src/status_im2/contexts/wallet/account/tabs/view.cljs index c96460911c..a70ba5de1c 100644 --- a/src/status_im2/contexts/wallet/account/tabs/view.cljs +++ b/src/status_im2/contexts/wallet/account/tabs/view.cljs @@ -1,6 +1,5 @@ (ns status-im2.contexts.wallet.account.tabs.view (:require - [quo.core :as quo] [react-native.core :as rn] [status-im2.contexts.wallet.account.tabs.about.view :as about] [status-im2.contexts.wallet.account.tabs.dapps.view :as dapps] @@ -8,13 +7,14 @@ [status-im2.contexts.wallet.common.collectibles-tab.view :as collectibles] [status-im2.contexts.wallet.common.empty-tab.view :as empty-tab] [status-im2.contexts.wallet.common.temp :as temp] + [status-im2.contexts.wallet.common.token-value.view :as token-value] [utils.i18n :as i18n])) (defn view [{:keys [selected-tab]}] (case selected-tab :assets [rn/flat-list - {:render-fn quo/token-value + {:render-fn token-value/view :data temp/tokens :content-container-style {:padding-horizontal 8}}] :collectibles [collectibles/view] diff --git a/src/status_im2/contexts/wallet/common/token_value/view.cljs b/src/status_im2/contexts/wallet/common/token_value/view.cljs new file mode 100644 index 0000000000..ed96c2ade4 --- /dev/null +++ b/src/status_im2/contexts/wallet/common/token_value/view.cljs @@ -0,0 +1,40 @@ +(ns status-im2.contexts.wallet.common.token-value.view + (:require [quo.core :as quo] + [utils.i18n :as i18n] + [utils.re-frame :as rf])) + +(defn token-value-drawer + [] + [:<> + [quo/action-drawer + [[{:icon :i/buy + :accessibility-label :buy + :label (i18n/label :t/buy) + :on-press #(js/alert "to be implemented") + :right-icon :i/external} + {:icon :i/send + :accessibility-label :send + :label (i18n/label :t/send)} + {:icon :i/receive + :accessibility-label :receive + :label (i18n/label :t/receive)} + {:icon :i/bridge + :accessibility-label :bridge + :label (i18n/label :t/bridge)} + {:icon :i/settings + :accessibility-label :settings + :label (i18n/label :t/manage-tokens) + :add-divider? true} + {:icon :i/hide + :accessibility-label :hide + :label (i18n/label :t/hide)}]]]]) + +(defn view + [item] + [quo/token-value + (merge item + {:on-long-press + #(rf/dispatch + [:show-bottom-sheet + {:content token-value-drawer + :selected-item (fn [] [quo/token-value item])}])})]) diff --git a/src/status_im2/contexts/wallet/home/view.cljs b/src/status_im2/contexts/wallet/home/view.cljs index c373a6489a..4bb7705b1a 100644 --- a/src/status_im2/contexts/wallet/home/view.cljs +++ b/src/status_im2/contexts/wallet/home/view.cljs @@ -8,6 +8,7 @@ [status-im2.contexts.wallet.common.activity-tab.view :as activity] [status-im2.contexts.wallet.common.collectibles-tab.view :as collectibles] [status-im2.contexts.wallet.common.temp :as temp] + [status-im2.contexts.wallet.common.token-value.view :as token-value] [status-im2.contexts.wallet.home.style :as style] [utils.i18n :as i18n] [utils.re-frame :as rf])) @@ -74,7 +75,7 @@ :on-change #(reset! selected-tab %)}] (case @selected-tab :assets [rn/flat-list - {:render-fn quo/token-value + {:render-fn token-value/view :data temp/tokens :key :assets-list :content-container-style {:padding-horizontal 8}}] diff --git a/translations/en.json b/translations/en.json index 98d8a15aa4..5ca6a4442b 100644 --- a/translations/en.json +++ b/translations/en.json @@ -2359,5 +2359,6 @@ "account-name-input-placeholder": "Account name", "network-preferences": "Network preferences", "network-preferences-desc": "Select which network this address is happy to receive funds on", - "layer-2": "Layer 2" + "layer-2": "Layer 2", + "manage-tokens": "Manage tokens" }