From cf11743f87dae4ba4954b86107d8fbc18414e816 Mon Sep 17 00:00:00 2001 From: Omar Basem Date: Mon, 31 Jul 2023 14:53:27 +0400 Subject: [PATCH] Quo2: Network Amount (#16764) * feat: network amount component --- resources/images/tokens/mainnet/ETH@2X.png | Bin 0 -> 915 bytes resources/images/tokens/mainnet/ETH@2x.png | Bin 2119 -> 0 bytes resources/images/tokens/mainnet/ETH@3x.png | Bin 3129 -> 1399 bytes resources/images/ui2/div@2x.png | Bin 0 -> 140 bytes resources/images/ui2/div@3x.png | Bin 0 -> 143 bytes src/quo2/components/wallet/lowest_price.cljs | 77 ----------- .../components/wallet/network_amount.cljs | 53 -------- .../wallet/network_amount/component_spec.cljs | 10 ++ .../wallet/network_amount/style.cljs | 17 +++ .../wallet/network_amount/view.cljs | 24 ++++ .../components/wallet/network_breakdown.cljs | 52 ------- .../components/wallet/token_overview.cljs | 127 ------------------ src/quo2/core.cljs | 8 +- src/quo2/core_spec.cljs | 3 +- src/quo2/foundations/resources.cljs | 14 ++ src/status_im2/common/resources.cljs | 14 -- .../quo_preview/community/token_gating.cljs | 11 +- .../drawers/permission_drawers.cljs | 3 +- src/status_im2/contexts/quo_preview/main.cljs | 18 +-- .../quo_preview/settings/reorder_item.cljs | 3 +- .../contexts/quo_preview/tags/token_tag.cljs | 4 +- .../quo_preview/wallet/lowest_price.cljs | 60 --------- .../quo_preview/wallet/network_amount.cljs | 83 ++++-------- .../quo_preview/wallet/network_breakdown.cljs | 75 ----------- .../quo_preview/wallet/token_overview.cljs | 74 ---------- 25 files changed, 112 insertions(+), 618 deletions(-) create mode 100644 resources/images/tokens/mainnet/ETH@2X.png delete mode 100644 resources/images/tokens/mainnet/ETH@2x.png create mode 100644 resources/images/ui2/div@2x.png create mode 100644 resources/images/ui2/div@3x.png delete mode 100644 src/quo2/components/wallet/lowest_price.cljs delete mode 100644 src/quo2/components/wallet/network_amount.cljs create mode 100644 src/quo2/components/wallet/network_amount/component_spec.cljs create mode 100644 src/quo2/components/wallet/network_amount/style.cljs create mode 100644 src/quo2/components/wallet/network_amount/view.cljs delete mode 100644 src/quo2/components/wallet/network_breakdown.cljs delete mode 100644 src/quo2/components/wallet/token_overview.cljs delete mode 100644 src/status_im2/contexts/quo_preview/wallet/lowest_price.cljs delete mode 100644 src/status_im2/contexts/quo_preview/wallet/network_breakdown.cljs delete mode 100644 src/status_im2/contexts/quo_preview/wallet/token_overview.cljs diff --git a/resources/images/tokens/mainnet/ETH@2X.png b/resources/images/tokens/mainnet/ETH@2X.png new file mode 100644 index 0000000000000000000000000000000000000000..a0c05d6e1a13c32543aaa16ad58c952d76bf0790 GIT binary patch literal 915 zcmV;E18n?>P)qvJg?Fq2!dvjecqr^6f{t1 zCTWCGN*FW{O3nYT=l^}~XSdH4Me&`ZF1Xx#_ugmiz1KPW2pDkFPDZ9Yr;;SfiBKYd z?aEFNLqbqHe7v_pR^2l@+Nt9Zxr~)|vLs8{T97z}6+j3iEMZmWO0*=wmH6;=0v>Ul z5v&elKE&-r&F0#LM!E1O79Xx6&@&x*q);M1Pv{avB(wBX+JZ_-<@Xfw;uxpBc1wIxu!3t*Fd;nF>>o+SrPd z>z3FL?ajj)OPH2I@(f8K2XEk>{g6mT7oyX*d_M11H_gDI}oWi^JAUeMK<69w$^wd@?z zF5y$XE}*N=#g`vxRGu$FIg>TDrZG9?;TX@w>7xbc=yfrY)annPuXAyU?|kVyNkbL5 z6N_N?PAjPXGY^`wjgEV$Z%n}iUwWl7VMoXK(*CFmQc^vCH-S{z=Z)u0{Iotnl1L+-;xoE#Rskl5xUPE z?Zhg;sgnY9>qSlR>&5mQxMcU22w&Q~=pt6e{+2brGbhVpmjNn~M7Tl_oh1@wTw$@Y ptLaw*N*>ku;hC2SyL3#)@gG(aR&CyJ&8PqX002ovPDHLkV1hupsK)>R literal 0 HcmV?d00001 diff --git a/resources/images/tokens/mainnet/ETH@2x.png b/resources/images/tokens/mainnet/ETH@2x.png deleted file mode 100644 index d391ba331ff30d860ea0ba5a96efff097da7b3c4..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2119 zcmV-N2)Or&P)og#@I01nBBrKlvWJo+Mv@y+AC`G3!yVfiJ8VcrZ+-#6#nbMATfy=j75T9w6= z{i3WxnYU)}JsRefWqgnSDoZPyTHE%&fP$S?mQ*&QEL$VvzJ}NK-HHuJOxdWiIn++H zLT1ElXy^$8kP|J+GrO^VIH+stLAWp>2hae-QQNW2mPghdp0Y92uW&&dMID88AL=Vy zOEvzVyWtRyb%SU;;es{@2YAXR(YT@oZ4!bZ?V-LCMWr?a0TDfHOz}iS^suqTvnrwo z2ja!!@$B*A$2WwC;t8X*wKY34Gm{-09L(Feu*=Xp@# z;pEAaZ~%{apxB$X7I{6c>@NsI;cni%sega`_%ZhH-;YGMDF3&?TLgD}MsM-&wA?Afz$fLRQn2?{6*h3oI{N2MG-d{~FG19Dzy z1f;6n5N33A6xDL>+&MTPhP7m}#kWBeCXSAd>U$J>_wIF(P$=F}{$d0a4c|%=M-+|{ zN*8|^0gpnEN)tyEjuOi6{6PWfjvj=lHgQDZAfb55S}CAtvvh2147PBPP>xc-7=&Qr zC^d9B-@SeNHtyfQkGF5%mh?9c5=uLp32_K`A%)|7mo2L(mX?cltfsw{OR`ZQCOE(ca#UM~@!i+qZ8JV3q>1DD+^NWHK2!-!;NL zccTA<%WE_jPx#uhZYZ ze~*_hU*<$A6^cyTw{M^JxZS&V=e^GQk_n~U{Z@e2gw<6_Rz;-O_{Tm9M-Sm+F*ptu zgC0jQX$JNSuUxqT%Vey3pg(cYBj|CZ2v-gii^l!a^C%=mWr2O?&K+1pdterppm2BZ z-o@w7pYiP3GdA zdOCMd6oljAjvYJl%8n>X5s==^eKNbRtgPs56pm-_OyO+_Eg<_^R;F?kZEg z#Lv;9v$In#W%Gyir%#`BSex;YnU&!hY*Fz8q0oHvhdu@8*e5_n+22iTPm&0nakm9K z(qU~adSO>r*SfH#=M@T9KSB)zLrPhXIjNL}5IsFTd3BnB<0DHBHeJnFNkNQw=ETv} zt5-wCqtFapLG)5Gv%HPf?jOopU>SYc;0ktOB7ey9k=B~6 zVVDN2nWdO3mDr)-Ic5iNiaU-fU{VpkVqEnOv*h~q>si%6aCOys5;cH*Lh(!f)if?U zH#esRR4ptQ;^lXLBPe#oI$@)Mu_JnOLym`B(J(PFk?YC`l2P^>YMcW+Y~J>yYCLS- zc&BPSY~K2*YCLS-e5@uoDRF9SJO;7k7)Bh8djrPWU-45R9#&U3G>Uj*sM9<9#<6)5 z+M19+eF-^-h})LbGalS~WJ3xU2B(23$ce`BIED>~`7(kOYX4;fNjUg2f+o0y2g}v5 xF|2+ihKHZmF9(Il_#SCIpJ~1lL$vYh=Rb%c29rhaA94Ty002ovPDHLkV1o7q(PaPt diff --git a/resources/images/tokens/mainnet/ETH@3x.png b/resources/images/tokens/mainnet/ETH@3x.png index 63e38d31bc49ab05e0a756508ad6bf5f3f09d44f..e119d42465289db89dd91a0204808ec8e4cb72be 100644 GIT binary patch delta 1366 zcmV-c1*!VE821VxiBL{Q4GJ0x0000DNk~Le0000a0000a2nGNE0O0_bn2{kge+3Ll zL_t(|0kv3LY*bYgUFY6A(0{cVJx5?A^E!_` zYxZ4t?R|zp5qnMFJwc9Q#_$LPe{uzoO2Zk}9D^93=MFH@$z$wPlHoZ2shQTU5T0U4 zqV!!~3DdAk2yBG{7+8Z4;*+C?yw!5+=Ruj-yOjb~5Rvt`J+umrx2oRv9>@P7wBH;| z9TCxk5Mn>>ASlb_y36?Rvp3U+6V4|ZeAOIW8s_0+G@XmPgJ!4ZcqWm)e^_ENk<;{c z6(o_7sv{KU81)OtgS9v{qi`lEZTg2j9}Rej%=ao}EEE^G@%Tm;)F4)cMdVnq+2p(> zp=cmx(#vWnU}d%go7W~GGebw#VjW5#+wcf)c|t<3yyGiU6|hETwEOv#$_4XB-AOyxqaEU1f95x+Lr=S`;^S zp)mk*;z`t94x+6y3Keh-Sz0t2$y3?1XrYGZ^4;^Uv$W)LstH`9f1<4ko$XNBl%JD~ z#cA;x2}cEjp?FhVxIiO4DGHoA2#pkVzwG*SkB+>}QwHd#KIE^C2rm8>M8h8;Ty2kF zJTOIU4GBCgMP5vde955KY}pMjJne>?e)-TCM|W=&J^it``R=}${jf5)BvXfnF7Ia2 z+Yj{tsrXiJWzbW)f6U@7Ym%^hiGjxE5Jt!OoNIdrWA-CCi6Q%5!*+8klM=`(- zj!RcUaJ%G%8X#T$*%ro#UwR7+5>g-K$~)h}Yh4j^c1LZYu3h1P3`QuE!(#%ROLqYS zBx(%Fth5AOw9Sp?Yhj!?=eM=qi2BQfh--{pGu|z4EP3OGG74>-lZ`vet{&uz2HYL z1%LV36ue#Lp~?=Nsr93&ErMav*gt(73#h>6=eY0~RsI-h|4OTrm~H6LPO=g@){sNq zklmC?=|51Ke+o~EWnrK!1#zmzk1;>DeP`7&huwl$f<99hnD>sH4z9(P*|*H@gTC`B z$D5h8EJ`KoT!SA;(@I4H-H|QV<+H<>XgKm-W{z#6R208}0xpp&*Ze$Xb_QKK*EBn5 z>x?LovA{V#wq9*Q)*+5siQiQM96vh_U;k{e2EziEf3Jq21cuhCLz!Pr60*k_djkpx z1O<+q7@aj<*BFeeXENYS9GG}NN$7KPaSes3fC5_S(tP*hlnq;%`MX!{7N3A%;&8Q@ z`OPds_N3-8spQr}0Viw5$;G1>ClhRHRnrZjc`VuS!SsPyg{j26v6Pym)8ydNXR~yV zh6uT{f6_sbu@=svh1F(O`<#R(Npa&V%Gnm&4bWBKjK4IKjD>{VleN$Y=>>wZ!??qs zQd=>~`tlNyu`q8hvCHh)rVCa{kyhX~VA+ab*mu3I!06 z8qQEzWzPM-kTRhuVqN#exU+zc(L4U@$3?aPEK9!`t&dsl3`0GYqDDH_d|hpNyH(=< Y3**8Mk+x)EKmY&$07*qoM6N<$f|?A6Q~&?~ delta 3109 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 ". " - (repeat (if few-of-dots? - 16 - 48)) - string/join - (str " "))] - dots-text)) - -(defn dots-comp - "Returns the dots adding their styles" - [few-of-dots?] - [rn/view - {:style {:align-items :center - :bottom 5}} - [rn/text line-dots-props (dots few-of-dots?)]]) - -(defn lowest-price-value-comp - "Component responsible for the top and bottom values" - [top-value top-value-bg-color top-value-text-color] - [rn/view (border-alignment top-value-bg-color) - [rn/text - {:style {:color top-value-text-color - :text-align :center}} top-value]]) - -(defn lowest-price-styles - [margin-top] - {:style {:flex-direction :column - :width "100%" - :overflow :hidden - :margin-top (int margin-top) - :justify-content :center}}) - -(defn lowest-price - "Shows the lowest price component" - [{:keys [top-value - bottom-value - margin-top - top-value-text-color - top-value-bg-color - bottom-value-bg-color - bottom-value-text-color]}] - [rn/view (lowest-price-styles margin-top) - [rn/view centrify - [dots-comp true] - [lowest-price-value-comp top-value top-value-bg-color top-value-text-color] - [dots-comp false]] - [rn/view centrify - [dots-comp false] - [lowest-price-value-comp bottom-value bottom-value-bg-color bottom-value-text-color] - [dots-comp true]]]) diff --git a/src/quo2/components/wallet/network_amount.cljs b/src/quo2/components/wallet/network_amount.cljs deleted file mode 100644 index 9b87f604ec..0000000000 --- a/src/quo2/components/wallet/network_amount.cljs +++ /dev/null @@ -1,53 +0,0 @@ -(ns quo2.components.wallet.network-amount - (:require [quo2.components.icon :as icon] - [quo2.components.markdown.text :as text] - [quo2.foundations.colors :as colors] - [react-native.core :as rn])) - -(defn network-amount - "[network-amount opts] - opts - {:style style ;; extra styles for the container (takes precedence) - :network-name \"Mainnet\" ;; shown network name - :icon :i/ethereum ;; key of icon belonging to the network - :eth-value 1.2345678 ;; shown ETH value}" - [{:keys [show-right-border? style network-name icon eth-value labels] :as _opts}] - [rn/view - (merge {:accessibility-label :network-amount - :background-color (colors/theme-colors colors/white colors/neutral-95) - :border-radius 16 - :padding 6} - style) - [rn/view - {:style {:flex-direction :row - :align-items :center}} - [rn/view - {:flex-direction :column - :align-self :flex-start - :padding-top 3 - :padding-right 4} - [icon/icon icon - {:size 40 - :no-color true - :container-style {:width 12 - :height 12}}]] - [rn/view - [rn/view - {:style {:flex-direction :row - :align-items :center}} - [text/text - {:weight :medium - :size :paragraph-2 - :style {:color (colors/theme-colors colors/neutral-100 colors/white)}} - eth-value \space (:eth labels)] - [rn/view - {:style {:border-right-width (when show-right-border? 1) - :border-right-color (colors/theme-colors colors/neutral-40 colors/neutral-50) - :padding-left 8 - :align-self :center - :height 8}}]] - [text/text - {:weight :medium - :size :label - :style {:color colors/neutral-50}} - (:on labels) \space network-name]]]]) diff --git a/src/quo2/components/wallet/network_amount/component_spec.cljs b/src/quo2/components/wallet/network_amount/component_spec.cljs new file mode 100644 index 0000000000..1ace6829cf --- /dev/null +++ b/src/quo2/components/wallet/network_amount/component_spec.cljs @@ -0,0 +1,10 @@ +(ns quo2.components.wallet.network-amount.component-spec + (:require [test-helpers.component :as h] + [quo2.components.wallet.network-amount.view :as network-amount])) + +(h/describe "Wallet: Network Amount" + (h/test "Amount renders" + (h/render [network-amount/view + {:amount "5.123" + :token :eth}]) + (h/is-truthy (h/get-by-text "5.123 ETH")))) diff --git a/src/quo2/components/wallet/network_amount/style.cljs b/src/quo2/components/wallet/network_amount/style.cljs new file mode 100644 index 0000000000..8bd06cc2ae --- /dev/null +++ b/src/quo2/components/wallet/network_amount/style.cljs @@ -0,0 +1,17 @@ +(ns quo2.components.wallet.network-amount.style + (:require [quo2.foundations.colors :as colors])) + +(def container + {:flex-direction :row + :align-items :center + :height 18}) + +(def text + {:margin-left 4 + :margin-right 8}) + +(defn divider + [theme] + {:width 1 + :height 8 + :background-color (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)}) diff --git a/src/quo2/components/wallet/network_amount/view.cljs b/src/quo2/components/wallet/network_amount/view.cljs new file mode 100644 index 0000000000..c1898dd956 --- /dev/null +++ b/src/quo2/components/wallet/network_amount/view.cljs @@ -0,0 +1,24 @@ +(ns quo2.components.wallet.network-amount.view + (:require + [clojure.string :as string] + [quo2.components.markdown.text :as text] + [quo2.theme :as quo.theme] + [react-native.core :as rn] + [quo2.components.wallet.network-amount.style :as style] + [quo2.foundations.resources :as resources])) + +(defn- view-internal + [{:keys [amount token theme]}] + [rn/view {:style style/container} + [rn/image + {:source (resources/tokens token) + :style {:width 12 :height 12}}] + [text/text + {:weight :medium + :size :paragraph-2 + :style style/text} + (str amount " " (string/upper-case (clj->js token)))] + [rn/view + {:style (style/divider theme)}]]) + +(def view (quo.theme/with-theme view-internal)) diff --git a/src/quo2/components/wallet/network_breakdown.cljs b/src/quo2/components/wallet/network_breakdown.cljs deleted file mode 100644 index 324c45a14d..0000000000 --- a/src/quo2/components/wallet/network_breakdown.cljs +++ /dev/null @@ -1,52 +0,0 @@ -(ns quo2.components.wallet.network-breakdown - (:require [quo2.components.markdown.text :as text] - [quo2.components.wallet.network-amount :refer [network-amount]] - [quo2.foundations.colors :as colors] - [react-native.core :as rn])) - -(defn network-breakdown - [{:keys [top-value network-conversions labels]}] - [rn/view - {:style {:background-color (colors/theme-colors - colors/white - colors/neutral-95) - :padding-horizontal 40 - :padding-top 24 - :border-radius 16 - :height 126 - :width 390 - :overflow :hidden}} - [rn/view - {:style {:border-bottom-width 1 - :border-bottom-color (colors/theme-colors - colors/neutral-20 - colors/neutral-70) - :padding-vertical 6}} - [text/text - {:weight :medium - :style {:color (colors/theme-colors - colors/neutral-100 - colors/white) - :font-size 19}} - (str top-value)]] - [rn/scroll-view - {:horizontal true - :style {:text-align :center - :margin-top 6 - :width 340}} - (let [last-item-idx (-> network-conversions - count - dec)] - (map-indexed - (fn [idx {:keys [conversion network icon]}] - [rn/view - {:style (cond-> {:flex-direction :row} - (not= idx 0) (assoc :margin-left -4)) - :key idx} - [network-amount - {:show-right-border? (not= idx last-item-idx) - :icon icon - :network-name network - :eth-value conversion - :labels labels}]]) - network-conversions))]]) diff --git a/src/quo2/components/wallet/token_overview.cljs b/src/quo2/components/wallet/token_overview.cljs deleted file mode 100644 index ba8ea3b9a0..0000000000 --- a/src/quo2/components/wallet/token_overview.cljs +++ /dev/null @@ -1,127 +0,0 @@ -(ns quo2.components.wallet.token-overview - (:require [clojure.string :as string] - [quo2.components.icon :as icons] - [quo2.components.markdown.text :as text] - [quo2.foundations.colors :as colors] - [react-native.core :as rn])) - -(def container-style - {:display :flex :width "100%" :padding-left 20 :padding-right 20 :padding-top 12 :padding-bottom 12}) - -(defn price-direction - [price-change increase decrease neutral] - (cond - (pos? price-change) increase - (neg? price-change) decrease - :else neutral)) - -(defn price-color - [direction] - (price-direction direction colors/success-50 colors/danger-50 colors/neutral-50)) - -(defn divider - [direction] - [rn/view - {:style {:height 10 - :margin-left 4 - :margin-right 4 - :width 1 - :background-color (price-direction direction - colors/success-50-opa-40 - colors/danger-50-opa-40 - colors/divider-light)}}]) - -(defn get-direction - [percentage-change] - (if (zero? (js/parseInt percentage-change)) - 0 - (/ (js/parseInt percentage-change) (js/Math.abs (js/parseInt percentage-change))))) - -(defn trim-minus - [percentage-change] - (if (= (first percentage-change) "-") (string/join (rest percentage-change)) percentage-change)) - -(defn token-price - "[token-price opts \"label\"] - opts - { - :currency :currency-key - :price :string - :percentage-change :string - }" - [] - (fn - [{:keys [currency price percentage-change label] :or {price "0.00" percentage-change "0.0"}}] - (let [direction (get-direction percentage-change)] - [rn/view {:style container-style} - [text/text - {:number-of-lines 1 - :size :paragraph-2} label] - [text/text - {:style {:margin-top 4} - :weight :semi-bold - :number-of-lines 1 - :size :heading-2} (str currency price)] - - [rn/view {:style {:display :flex :flex-direction :row :margin-top 6 :align-items :center}} - (when (not (zero? direction)) - [icons/icon (if (>= direction 0) :i/price-increase12 :i/price-decrease12) - {:no-color true - :width 14 - :height 14 - :container-style {:margin-right 4}}]) - [text/text - {:number-of-lines 1 - :weight :medium - :size :paragraph-2 - :style {:color (price-color direction)}} - (str (trim-minus percentage-change) "%")]]]))) - -(defn token-balance - "[token-balance opts \"label\"] - opts - { - :token string - :token-img-src :token-img-src - :currency :currency-key - :account-balance :string - :price :string - :percentage-change :string - }" - [] - (fn [{:keys [token token-img-src currency account-balance price percentage-change] - :or {account-balance "0.00" price "0.00" percentage-change "0.0"}}] - (let [direction (get-direction percentage-change)] - [rn/view {:style container-style} - [text/text - {:weight :regular - :number-of-lines 1 - :size :paragraph-1} (str "Account " token " Balance")] - [rn/view {:style {:display :flex :flex-direction :row :flex 1 :justify-content :space-between}} - [text/text - {:number-of-lines 1 - :weight :semi-bold - :size :heading-1} (str currency account-balance)] - [rn/image - {:source token-img-src - :style {:height 32 - :width 32}}]] - [rn/view {:style {:display :flex :flex-direction :row :margin-top 6 :align-items :center}} - (when (not (zero? direction)) - [icons/icon (if (pos? direction) :i/price-increase :i/price-decrease) - {:no-color true - :size 12 - :container-style {:margin-right 4}}]) - [text/text - {:number-of-lines 1 - :weight :medium - :size :paragraph-2 - :style {:color (price-color direction)}} (str currency price)] - [divider direction] - [text/text - {:number-of-lines 1 - :weight :medium - :size :paragraph-2 - :style {:color (price-color direction)}} - (str (trim-minus percentage-change) "%")]]]))) - diff --git a/src/quo2/core.cljs b/src/quo2/core.cljs index a0c8a1b578..c5c513ab5a 100644 --- a/src/quo2/core.cljs +++ b/src/quo2/core.cljs @@ -100,7 +100,8 @@ quo2.components.tags.tag quo2.components.tags.tags quo2.components.tags.token-tag - quo2.components.text-combinations.title.view)) + quo2.components.text-combinations.title.view + quo2.components.wallet.network-amount.view)) (def separator quo2.components.common.separator.view/separator) @@ -283,5 +284,10 @@ (def url-preview-list quo2.components.links.url-preview-list.view/view) (def link-preview quo2.components.links.link-preview.view/view) + ;;;; GRADIENT (def gradient-cover quo2.components.gradient.gradient-cover.view/view) + +;;;; WALLET +(def network-amount quo2.components.wallet.network-amount.view/view) + diff --git a/src/quo2/core_spec.cljs b/src/quo2/core_spec.cljs index d0c516862a..d3854aa063 100644 --- a/src/quo2/core_spec.cljs +++ b/src/quo2/core_spec.cljs @@ -45,4 +45,5 @@ [quo2.components.settings.settings-list.component-spec] [quo2.components.settings.category.component-spec] [quo2.components.share.share-qr-code.component-spec] - [quo2.components.tags.status-tags-component-spec])) + [quo2.components.tags.status-tags-component-spec] + [quo2.components.wallet.network-amount.component-spec])) diff --git a/src/quo2/foundations/resources.cljs b/src/quo2/foundations/resources.cljs index b897bc5bd5..85f5e8a3cf 100644 --- a/src/quo2/foundations/resources.cljs +++ b/src/quo2/foundations/resources.cljs @@ -9,3 +9,17 @@ (defn get-image [k] (get ui k)) + +(def tokens + {:eth (js/require "../resources/images/tokens/mainnet/ETH.png") + :knc (js/require "../resources/images/tokens/mainnet/KNC.png") + :mana (js/require "../resources/images/tokens/mainnet/MANA.png") + :rare (js/require "../resources/images/tokens/mainnet/RARE.png") + :dai (js/require "../resources/images/tokens/mainnet/DAI.png") + :fxc (js/require "../resources/images/tokens/mainnet/FXC.png") + :usdt (js/require "../resources/images/tokens/mainnet/USDT.png") + :snt (js/require "../resources/images/tokens/mainnet/SNT.png")}) + +(defn get-token + [k] + (get tokens k)) diff --git a/src/status_im2/common/resources.cljs b/src/status_im2/common/resources.cljs index b54627dc02..278160081c 100644 --- a/src/status_im2/common/resources.cljs +++ b/src/status_im2/common/resources.cljs @@ -77,16 +77,6 @@ :user-picture-male4 (js/require "../resources/images/mock2/user_picture_male4.png") :user-picture-male5 (js/require "../resources/images/mock2/user_picture_male5.png")}) -(def tokens - {:eth (js/require "../resources/images/tokens/mainnet/ETH.png") - :knc (js/require "../resources/images/tokens/mainnet/KNC.png") - :mana (js/require "../resources/images/tokens/mainnet/MANA.png") - :rare (js/require "../resources/images/tokens/mainnet/RARE.png") - :dai (js/require "../resources/images/tokens/mainnet/DAI.png") - :fxc (js/require "../resources/images/tokens/mainnet/FXC.png") - :usdt (js/require "../resources/images/tokens/mainnet/USDT.png") - :snt (js/require "../resources/images/tokens/mainnet/SNT.png")}) - (def parallax-video {:biometrics [(js/require "../resources/videos2/biometrics_01.mp4") (js/require "../resources/videos2/biometrics_02.mp4") @@ -107,7 +97,3 @@ (defn get-themed-image [k k2] (get ui (if (colors/dark?) k k2))) - -(defn get-token - [k] - (get tokens k)) diff --git a/src/status_im2/contexts/quo_preview/community/token_gating.cljs b/src/status_im2/contexts/quo_preview/community/token_gating.cljs index 6e6cde3d7f..ccbc7d0f8e 100644 --- a/src/status_im2/contexts/quo_preview/community/token_gating.cljs +++ b/src/status_im2/contexts/quo_preview/community/token_gating.cljs @@ -1,9 +1,10 @@ (ns status-im2.contexts.quo-preview.community.token-gating - (:require [reagent.core :as reagent] - [status-im2.common.resources :as resources] - [react-native.core :as rn] - [status-im2.contexts.quo-preview.preview :as preview] - [quo2.core :as quo])) + (:require + [quo2.foundations.resources :as resources] + [reagent.core :as reagent] + [react-native.core :as rn] + [status-im2.contexts.quo-preview.preview :as preview] + [quo2.core :as quo])) (def descriptor [{:label "Tokens sufficient" diff --git a/src/status_im2/contexts/quo_preview/drawers/permission_drawers.cljs b/src/status_im2/contexts/quo_preview/drawers/permission_drawers.cljs index 7b49d2fc90..1af8ca17fa 100644 --- a/src/status_im2/contexts/quo_preview/drawers/permission_drawers.cljs +++ b/src/status_im2/contexts/quo_preview/drawers/permission_drawers.cljs @@ -1,6 +1,7 @@ (ns status-im2.contexts.quo-preview.drawers.permission-drawers (:require [quo2.core :as quo] [quo2.foundations.colors :as colors] + [quo2.foundations.resources :as quo.resources] [react-native.core :as rn] [status-im2.common.resources :as resources])) @@ -43,7 +44,7 @@ [quo/text {:style {:margin-right 4}} "Hold"] [quo/token-tag {:size :small - :token-img-src (resources/get-token :eth)} "ETH"] + :token-img-src (quo.resources/get-token :eth)} "ETH"] [quo/text {:style {:margin-left 4}} "To post"]]) (defn example-3 diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs index add590e808..5690ce44b0 100644 --- a/src/status_im2/contexts/quo_preview/main.cljs +++ b/src/status_im2/contexts/quo_preview/main.cljs @@ -97,14 +97,11 @@ [status-im2.contexts.quo-preview.tags.tags :as tags] [status-im2.contexts.quo-preview.tags.token-tag :as token-tag] [status-im2.contexts.quo-preview.title.title :as title] - [status-im2.contexts.quo-preview.wallet.lowest-price :as lowest-price] - [status-im2.contexts.quo-preview.wallet.network-amount :as network-amount] - [status-im2.contexts.quo-preview.wallet.network-breakdown :as network-breakdown] - [status-im2.contexts.quo-preview.wallet.token-overview :as token-overview] [status-im2.contexts.quo-preview.keycard.keycard :as keycard] [status-im2.contexts.quo-preview.loaders.skeleton :as skeleton] [status-im2.contexts.quo-preview.community.channel-actions :as channel-actions] - [status-im2.contexts.quo-preview.gradient.gradient-cover :as gradient-cover])) + [status-im2.contexts.quo-preview.gradient.gradient-cover :as gradient-cover] + [status-im2.contexts.quo-preview.wallet.network-amount :as network-amount])) (def screens-categories {:foundations [{:name :shadows @@ -392,16 +389,7 @@ :text-combinations [{:name :title :options {:topBar {:visible true}} :component title/preview-title}] - :wallet [{:name :lowest-price - :options {:topBar {:visible true}} - :component lowest-price/preview-lowest-price} - {:name :token-overview - :options {:topBar {:visible true}} - :component token-overview/preview-token-overview} - {:name :network-breakdown - :options {:topBar {:visible true}} - :component network-breakdown/preview-network-breakdown} - {:name :network-amount + :wallet [{:name :network-amount :options {:topBar {:visible true}} :component network-amount/preview}] :keycard [{:name :keycard-component diff --git a/src/status_im2/contexts/quo_preview/settings/reorder_item.cljs b/src/status_im2/contexts/quo_preview/settings/reorder_item.cljs index 801c91ef41..7dae7a25fb 100644 --- a/src/status_im2/contexts/quo_preview/settings/reorder_item.cljs +++ b/src/status_im2/contexts/quo_preview/settings/reorder_item.cljs @@ -3,6 +3,7 @@ [quo2.core :as quo] [react-native.core :as rn] [status-im2.common.resources :as resources] + [quo2.foundations.resources :as quo2.resources] [quo2.foundations.colors :as colors] [quo2.components.settings.reorder-item.types :as types])) @@ -22,7 +23,7 @@ :title "Status"}} {:id 3 :type types/item - :data {:image (resources/tokens :eth) + :data {:image (quo2.resources/tokens :eth) :image-size 21 :right-icon :i/world :title "Ethereum"}} diff --git a/src/status_im2/contexts/quo_preview/tags/token_tag.cljs b/src/status_im2/contexts/quo_preview/tags/token_tag.cljs index 586b3b11ce..dc8be22cd7 100644 --- a/src/status_im2/contexts/quo_preview/tags/token_tag.cljs +++ b/src/status_im2/contexts/quo_preview/tags/token_tag.cljs @@ -1,10 +1,10 @@ (ns status-im2.contexts.quo-preview.tags.token-tag (:require [quo2.components.tags.token-tag :as quo2] [quo2.foundations.colors :as colors] + [quo2.foundations.resources :as resources] [react-native.core :as rn] [reagent.core :as reagent] - [status-im2.contexts.quo-preview.preview :as preview] - [status-im2.common.resources :as resources])) + [status-im2.contexts.quo-preview.preview :as preview])) (def descriptor [{:label "Size:" diff --git a/src/status_im2/contexts/quo_preview/wallet/lowest_price.cljs b/src/status_im2/contexts/quo_preview/wallet/lowest_price.cljs deleted file mode 100644 index 550576edbf..0000000000 --- a/src/status_im2/contexts/quo_preview/wallet/lowest_price.cljs +++ /dev/null @@ -1,60 +0,0 @@ -(ns status-im2.contexts.quo-preview.wallet.lowest-price - (:require [quo2.components.wallet.lowest-price :as quo2] - [quo2.foundations.colors :as colors] - [react-native.core :as rn] - [reagent.core :as reagent] - [status-im2.contexts.quo-preview.preview :as preview])) - -(def descriptor - [{:label "Top value" - :key :top-value - :type :text} - {:label "Top value background color" - :key :top-value-bg-color - :type :text} - {:label "Top value text color" - :key :top-value-text-color - :type :text} - {:label "Bottom value" - :key :bottom-value - :type :text} - {:label "Bottom value background color" - :key :bottom-value-bg-color - :type :text} - {:label "Bottom value text color" - :key :bottom-value-text-color - :type :text} - {:label "Margin top" - :key :margin-top - :type :text}]) - -(defn cool-preview - [] - (let [state (reagent/atom {:top-value 20 - :bottom-value 20 - :top-value-bg-color colors/neutral-100 - :top-value-text-color colors/white - :bottom-value-bg-color colors/neutral-100 - :bottom-value-text-color colors/white})] - (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:padding-bottom 150} - [rn/view {:flex 1} - [preview/customizer state descriptor]] - [rn/view - {:padding-vertical 60 - :flex-direction :row - :justify-content :center} - [quo2/lowest-price @state]]]]))) - -(defn preview-lowest-price - [] - [rn/view - {:background-color (colors/theme-colors colors/white - colors/neutral-90) - :flex 1} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/wallet/network_amount.cljs b/src/status_im2/contexts/quo_preview/wallet/network_amount.cljs index dce630fb6e..cf82561baf 100644 --- a/src/status_im2/contexts/quo_preview/wallet/network_amount.cljs +++ b/src/status_im2/contexts/quo_preview/wallet/network_amount.cljs @@ -1,68 +1,31 @@ (ns status-im2.contexts.quo-preview.wallet.network-amount - (:require [clojure.string :as string] - [quo2.components.wallet.network-amount :refer [network-amount]] - [quo2.foundations.colors :as colors] - [react-native.core :as rn] - [reagent.core :as reagent] - [utils.i18n :as i18n] - [status-im2.contexts.quo-preview.preview :as preview])) + (:require + [quo2.core :as quo] + [react-native.core :as rn] + [reagent.core :as reagent] + [status-im2.contexts.quo-preview.preview :as preview])) -(def ^:private networks - [{:icon :i/ethereum :name "Mainnet"} - {:icon :i/arbitrum :name "Arbitrum"} - {:icon :i/optimism :name "Optimism"} - {:icon :i/zksync :name "zkSync"}]) -(defn- networks->options - [networks] - (for [{:keys [name] - :as network} - networks] - {:key network - :value name})) - -(def ^:private descriptors - [{:label "ETH Value" - :key :eth-value +(def descriptor + [{:label "Amount:" + :key :amount :type :text} - {:label "Network" - :key :network + {:label "Token:" + :key :token :type :select - :options (networks->options networks)}]) - -(def ^:private default-network - (first networks)) - -(defn- state->opts - [{:keys [eth-value network show-right-border?] - :or {eth-value 5.123456 - show-right-border? true}}] - {:network-name (:name (or network default-network)) - :icon (:icon (or network default-network)) - :eth-value eth-value - :show-right-border? show-right-border?}) - -(defn- cool-preview - [] - (let [state (reagent/atom {:labels {:eth (i18n/label :t/eth) - :on (string/lower-case (i18n/label :t/on))}})] - (fn [] - [rn/view - {:margin-bottom 50 - :padding 16} - [preview/customizer state descriptors] - [rn/view - {:padding-vertical 60 - :align-items :center} - [network-amount (state->opts @state)]]]))) + :options [{:key :eth + :value "ETH"} + {:key :snt + :value "SNT"}]}]) (defn preview [] - [rn/view - {:background-color (colors/theme-colors colors/white colors/neutral-90) - :flex 1} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]) + (let [state (reagent/atom {:amount "5.123456" + :token :eth})] + (fn [] + [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} + [rn/view + {:style {:flex 1 + :padding-horizontal 20}} + [rn/view {:style {:min-height 150}} [preview/customizer state descriptor]] + [quo/network-amount @state]]]))) diff --git a/src/status_im2/contexts/quo_preview/wallet/network_breakdown.cljs b/src/status_im2/contexts/quo_preview/wallet/network_breakdown.cljs deleted file mode 100644 index fea572356b..0000000000 --- a/src/status_im2/contexts/quo_preview/wallet/network_breakdown.cljs +++ /dev/null @@ -1,75 +0,0 @@ -(ns status-im2.contexts.quo-preview.wallet.network-breakdown - (:require [clojure.string :as string] - [quo2.components.wallet.network-breakdown :as quo2] - [quo2.foundations.colors :as colors] - [react-native.core :as rn] - [reagent.core :as reagent] - [utils.i18n :as i18n] - [status-im2.contexts.quo-preview.preview :as preview])) - -(def descriptor - [{:label "Ethereum Value" - :key :top-value - :type :text} - {:label "Conversion" - :key :conversion - :type :text} - {:label "Network" - :key :network - :type :text} - {:label "Icon" - :key :icon - :type :select - :options [{:key :main-icons/arbitrum - :value "Arbitrum"} - {:key :main-icons/optimism - :value "Optimism"} - {:key :main-icons/zksync - :value "ZK Sync"} - {:key :main-icons/arbitrum - :value "Arbitrum"} - {:key :main-icons/ethereum - :value "Ethereum"}]}]) - -(defn cool-preview - [] - (let [state (reagent/atom {:icon :main-icons/arbitrum - :network "Mainnet" - :conversion "5.1234" - :top-value "10 ETH" - :labels {:eth (i18n/label :t/eth) - :on (string/lower-case (i18n/label :t/on))}})] - (fn [] - [rn/view - {:margin-bottom 50 - :padding 16} - [rn/view {:flex 1} - [preview/customizer state descriptor]] - [rn/view - {:padding-vertical 60 - :flex-direction :row - :justify-content :center} - [quo2/network-breakdown @state]] - [rn/touchable-opacity - {:style {:background-color colors/neutral-100 - :width 100} - :on-press (fn [] - (swap! state update-in - [:network-conversions] - conj - {:conversion (:conversion @state) - :icon (:icon @state) - :network (:network @state)}))} - [rn/text {:style {:color colors/white}} "Add current conversion"]]]))) - -(defn preview-network-breakdown - [] - [rn/view - {:background-color (colors/theme-colors colors/white - colors/neutral-90) - :flex 1} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]]) diff --git a/src/status_im2/contexts/quo_preview/wallet/token_overview.cljs b/src/status_im2/contexts/quo_preview/wallet/token_overview.cljs deleted file mode 100644 index eb263f2e61..0000000000 --- a/src/status_im2/contexts/quo_preview/wallet/token_overview.cljs +++ /dev/null @@ -1,74 +0,0 @@ -(ns status-im2.contexts.quo-preview.wallet.token-overview - (:require [quo2.components.wallet.token-overview :as quo2] - [quo2.foundations.colors :as colors] - [react-native.core :as rn] - [reagent.core :as reagent] - [utils.i18n :as i18n] - [status-im.utils.currency :as currencies] - [status-im2.contexts.quo-preview.preview :as preview] - [status-im2.common.resources :as resources])) - -(def descriptor - [{:label "Token:" - :key :token - :type :select - :options [{:key "SNT" - :value "SNT"} - {:key "ETH" - :value "ETH"}]} - - {:label "Account Balance:" - :key :account-balance - :type :text} - {:label "Price:" - :key :price - :type :text} - {:label "Percentage-Increase:" - :key :percentage-change - :type :text} - {:label "Currency:" - :key :currency - :type :select - :options [{:key :usd - :value "$"} - {:key :eur - :value "€"}]}]) - -(def eth-token (resources/get-token :eth)) -(def snt-token (resources/get-token :snt)) - -(defn cool-preview - [] - (let [state (reagent/atom {:token "ETH" - :account-balance "3.00" - :price "1.00" - :percentage-change "-3.0" - :currency (get-in currencies/currencies [:usd :symbol])})] - (fn [] - [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!} - [rn/view {:padding-bottom 150} - [preview/customizer state descriptor] - [rn/view - {:border :black - :border-width 1 - :align-items :center} - [quo2/token-balance - (assoc @state :token-img-src (if (= (:token @state) "ETH") eth-token snt-token))] - [rn/view - {:padding-vertical 25 - :align-items :center}] - [quo2/token-price - (assoc @state - :token-img-src (if (= (:token @state) "ETH") eth-token snt-token) - :label (i18n/label :token-price))]]]]))) - -(defn preview-token-overview - [] - [rn/view - {:background-color (colors/theme-colors colors/white colors/neutral-90) - :flex 1} - [rn/flat-list - {:flex 1 - :keyboard-should-persist-taps :always - :header [cool-preview] - :key-fn str}]])