diff --git a/resources/images/tokens/mainnet/AGLD@2x.png b/resources/images/tokens/mainnet/AGLD@2x.png new file mode 100644 index 0000000000..2c24edcdba Binary files /dev/null and b/resources/images/tokens/mainnet/AGLD@2x.png differ diff --git a/resources/images/tokens/mainnet/AGLD@3x.png b/resources/images/tokens/mainnet/AGLD@3x.png new file mode 100644 index 0000000000..f25ed10db1 Binary files /dev/null and b/resources/images/tokens/mainnet/AGLD@3x.png differ diff --git a/resources/images/tokens/mainnet/CRV@2x.png b/resources/images/tokens/mainnet/CRV@2x.png new file mode 100644 index 0000000000..4afeaad374 Binary files /dev/null and b/resources/images/tokens/mainnet/CRV@2x.png differ diff --git a/resources/images/tokens/mainnet/CRV@3x.png b/resources/images/tokens/mainnet/CRV@3x.png new file mode 100644 index 0000000000..a1a3f17fdb Binary files /dev/null and b/resources/images/tokens/mainnet/CRV@3x.png differ diff --git a/src/mocks/js_dependencies.cljs b/src/mocks/js_dependencies.cljs index e4e809e981..9de2676312 100644 --- a/src/mocks/js_dependencies.cljs +++ b/src/mocks/js_dependencies.cljs @@ -49,6 +49,7 @@ :Text {} :StatusBar {} :ScrollView {} + :SafeAreaView {} :KeyboardAvoidingView {} :TextInput {} :Image {} diff --git a/src/quo/components/avatars/wallet_user_avatar/style.cljs b/src/quo/components/avatars/wallet_user_avatar/style.cljs index a1d9ef5b88..cea3b73e8c 100644 --- a/src/quo/components/avatars/wallet_user_avatar/style.cljs +++ b/src/quo/components/avatars/wallet_user_avatar/style.cljs @@ -2,26 +2,30 @@ (:require [quo.foundations.colors :as colors])) (defn- circle-color - [customization-color] - (colors/custom-color customization-color 50 20)) + [customization-color neutral? theme] + (if neutral? + (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme) + (colors/custom-color customization-color 50 20))) (defn- text-color - [customization-color theme] - (colors/theme-colors - (colors/custom-color customization-color 50) - (colors/custom-color customization-color 60) - theme)) + [customization-color neutral? theme] + (if neutral? + (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme) + (colors/theme-colors + (colors/custom-color customization-color 50) + (colors/custom-color customization-color 60) + theme))) (defn container - [circle-size customization-color] + [circle-size customization-color neutral? theme] {:width circle-size :height circle-size :border-radius circle-size :text-align :center :justify-content :center :align-items :center - :background-color (circle-color customization-color)}) + :background-color (circle-color customization-color neutral? theme)}) (defn text - [customization-color theme] - {:color (text-color customization-color theme)}) + [customization-color neutral? theme] + {:color (text-color customization-color neutral? theme)}) diff --git a/src/quo/components/avatars/wallet_user_avatar/view.cljs b/src/quo/components/avatars/wallet_user_avatar/view.cljs index c3ea309576..d78aa51b08 100644 --- a/src/quo/components/avatars/wallet_user_avatar/view.cljs +++ b/src/quo/components/avatars/wallet_user_avatar/view.cljs @@ -1,5 +1,6 @@ (ns quo.components.avatars.wallet-user-avatar.view - (:require [quo.components.avatars.wallet-user-avatar.style :as style] + (:require [clojure.string :as string] + [quo.components.avatars.wallet-user-avatar.style :as style] [quo.components.markdown.text :as text] [quo.theme :as quo.theme] [react-native.core :as rn] @@ -40,18 +41,21 @@ :customization-color - keyword (default: nil) - color of the avatar :size - keyword (default: last element of properties object) - size of the avatar - :monospace? - boolean (default: false) - use monospace font" - [{:keys [full-name customization-color size theme monospace?] + :monospace? - boolean (default: false) - use monospace font + :lowercase? - boolean (default: false) - lowercase text + :neutral? - boolean (default: false) - use neutral colors variant" + [{:keys [full-name customization-color size theme monospace? lowercase? neutral?] :or {size biggest-possible}}] (let [circle-size (:size (size properties)) - small? (check-if-size-small size)] + small? (check-if-size-small size) + initials (utils.string/get-initials full-name (if small? 1 2))] [rn/view - {:style (style/container circle-size customization-color)} + {:style (style/container circle-size customization-color neutral? theme)} [text/text {:accessibility-label :wallet-user-avatar :size (:font-size (size properties)) :weight (if monospace? :monospace (:font-weight (size properties))) - :style (style/text customization-color theme)} - (utils.string/get-initials full-name (if small? 1 2))]])) + :style (style/text customization-color neutral? theme)} + (if lowercase? (string/lower-case initials) initials)]])) (def wallet-user-avatar (quo.theme/with-theme view-internal)) diff --git a/src/quo/components/list_items/address/view.cljs b/src/quo/components/list_items/address/view.cljs index b457143d11..a536eeef18 100644 --- a/src/quo/components/list_items/address/view.cljs +++ b/src/quo/components/list_items/address/view.cljs @@ -13,11 +13,11 @@ [{:keys [theme address networks blur?]}] [rn/view {:style style/left-container} [wallet-user-avatar/wallet-user-avatar - {:size :medium - :f-name "0" - :l-name "x" + {:size :size-32 + :full-name "0 x" :monospace? true - :uppercase? false}] + :lowercase? true + :neutral? true}] [rn/view {:style style/account-container} [text/text {:size :paragraph-1} (map (fn [network] @@ -25,8 +25,8 @@ [text/text {:size :paragraph-1 :weight :semi-bold - :style {:color (colors/resolve-color network theme)}} - (str (subs (name network) 0 3) ":")]) + :style {:color (colors/resolve-color (:network-name network) theme)}} + (str (:short-name network) ":")]) networks) [text/text {:size :paragraph-1 diff --git a/src/quo/components/list_items/saved_address/view.cljs b/src/quo/components/list_items/saved_address/view.cljs index df9c91ad52..4f4a2a0aaf 100644 --- a/src/quo/components/list_items/saved_address/view.cljs +++ b/src/quo/components/list_items/saved_address/view.cljs @@ -1,6 +1,5 @@ (ns quo.components.list-items.saved-address.view (:require - [clojure.string :as string] [quo.components.avatars.wallet-user-avatar.view :as wallet-user-avatar] [quo.components.icon :as icon] [quo.components.list-items.saved-address.style :as style] @@ -13,27 +12,23 @@ (defn- left-container [{:keys [blur? theme name ens address customization-color]}] - (let [names (remove string/blank? (string/split name " ")) - first-name (if (> (count names) 0) (first names) "") - last-name (if (> (count names) 1) (last names) "")] - [rn/view {:style style/left-container} - [wallet-user-avatar/wallet-user-avatar - {:size :medium - :f-name first-name - :l-name last-name - :customization-color customization-color}] - [rn/view {:style style/account-container} - [text/text - {:weight :semi-bold - :size :paragraph-1 - :style style/name-text} - name] - [text/text {:size :paragraph-2} - [text/text - {:size :paragraph-2 - :weight :monospace - :style (style/account-address blur? theme)} - (or ens (address/get-shortened-key address))]]]])) + [rn/view {:style style/left-container} + [wallet-user-avatar/wallet-user-avatar + {:size :size-32 + :full-name name + :customization-color customization-color}] + [rn/view {:style style/account-container} + [text/text + {:weight :semi-bold + :size :paragraph-1 + :style style/name-text} + name] + [text/text {:size :paragraph-2} + [text/text + {:size :paragraph-2 + :weight :monospace + :style (style/account-address blur? theme)} + (or ens (address/get-shortened-key address))]]]]) (defn- internal-view [] diff --git a/src/quo/components/list_items/token_network/style.cljs b/src/quo/components/list_items/token_network/style.cljs index e53ea390dc..721858609a 100644 --- a/src/quo/components/list_items/token_network/style.cljs +++ b/src/quo/components/list_items/token_network/style.cljs @@ -26,21 +26,25 @@ (def info {:flex-direction :row - :align-items :center}) + :align-items :center + :width "70%"}) (def token-info - {:height 40}) + {:height 40 + :flex 1}) (def token-image - {:width 32 - :height 32 - :border-width 1 - :border-radius 16 - :border-color colors/neutral-80-opa-5 - :margin-right 8}) + {:width 32 + :height 32 + :border-width 1 + :border-radius 16 + :border-color colors/neutral-80-opa-5 + :margin-right 8 + :background-color colors/neutral-80-opa-5}) (def values-container - {:align-items :flex-end}) + {:align-items :flex-end + :max-width "30%"}) (defn fiat-value [theme] diff --git a/src/quo/components/list_items/token_network/view.cljs b/src/quo/components/list_items/token_network/view.cljs index 1aad33f33b..b2b6c4f62f 100644 --- a/src/quo/components/list_items/token_network/view.cljs +++ b/src/quo/components/list_items/token_network/view.cljs @@ -15,11 +15,14 @@ {:source (or (:source token) token) :style style/token-image}] [rn/view {:style style/token-info} - [text/text {:weight :semi-bold} label] + [text/text + {:weight :semi-bold + :number-of-lines 1} + (if-not (empty? label) label "-")] [preview-list/view {:type :network :size :size-14 - :number 3} + :number (count networks)} networks]]]) (defn- values @@ -30,12 +33,14 @@ :accessibility-label :check-icon}] [rn/view {:style style/values-container} [text/text - {:weight :medium - :size :paragraph-2} + {:weight :medium + :size :paragraph-2 + :number-of-lines 1} token-value] [text/text - {:style (style/fiat-value theme) - :size :paragraph-2} + {:style (style/fiat-value theme) + :size :paragraph-2 + :number-of-lines 1} fiat-value]])) (defn- view-internal diff --git a/src/quo/foundations/resources.cljs b/src/quo/foundations/resources.cljs index fef4dc933e..9c601bcf17 100644 --- a/src/quo/foundations/resources.cljs +++ b/src/quo/foundations/resources.cljs @@ -33,14 +33,191 @@ (get dapps k)) (def tokens - {:eth (js/require "../resources/images/tokens/mainnet/ETH-token.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")}) + {:0-native (js/require "../resources/images/tokens/mainnet/0-native.png") + :0xbtc (js/require "../resources/images/tokens/mainnet/0XBTC.png") + :1st (js/require "../resources/images/tokens/mainnet/1ST.png") + :abt (js/require "../resources/images/tokens/mainnet/ABT.png") + :abyss (js/require "../resources/images/tokens/mainnet/ABYSS.png") + :ae (js/require "../resources/images/tokens/mainnet/AE.png") + :agld (js/require "../resources/images/tokens/mainnet/AGLD.png") + :akro (js/require "../resources/images/tokens/mainnet/AKRO.png") + :amb (js/require "../resources/images/tokens/mainnet/AMB.png") + :ampl (js/require "../resources/images/tokens/mainnet/AMPL.png") + :ant (js/require "../resources/images/tokens/mainnet/ANT.png") + :appc (js/require "../resources/images/tokens/mainnet/APPC.png") + :ast (js/require "../resources/images/tokens/mainnet/AST.png") + :atmchain (js/require "../resources/images/tokens/mainnet/ATMChain.png") + :ausdc (js/require "../resources/images/tokens/mainnet/aUSDC.png") + :bal (js/require "../resources/images/tokens/mainnet/BAL.png") + :bam (js/require "../resources/images/tokens/mainnet/BAM.png") + :band (js/require "../resources/images/tokens/mainnet/BAND.png") + :bat (js/require "../resources/images/tokens/mainnet/BAT.png") + :blt (js/require "../resources/images/tokens/mainnet/BLT.png") + :blz (js/require "../resources/images/tokens/mainnet/BLZ.png") + :bnb (js/require "../resources/images/tokens/mainnet/BNB.png") + :bnt (js/require "../resources/images/tokens/mainnet/BNT.png") + :brln (js/require "../resources/images/tokens/mainnet/BRLN.png") + :btm (js/require "../resources/images/tokens/mainnet/BTM.png") + :btu (js/require "../resources/images/tokens/mainnet/BTU.png") + :cdai (js/require "../resources/images/tokens/mainnet/cDAI.png") + :cdt (js/require "../resources/images/tokens/mainnet/CDT.png") + :centra (js/require "../resources/images/tokens/mainnet/Centra.png") + :cfi (js/require "../resources/images/tokens/mainnet/CFI.png") + :ck (js/require "../resources/images/tokens/mainnet/CK.png") + :cnd (js/require "../resources/images/tokens/mainnet/CND.png") + :cob (js/require "../resources/images/tokens/mainnet/COB.png") + :comp (js/require "../resources/images/tokens/mainnet/COMP.png") + :crv (js/require "../resources/images/tokens/mainnet/CRV.png") + :cvc (js/require "../resources/images/tokens/mainnet/CVC.png") + :dai (js/require "../resources/images/tokens/mainnet/DAI.png") + :dat (js/require "../resources/images/tokens/mainnet/DAT.png") + :data (js/require "../resources/images/tokens/mainnet/DATA.png") + :dcn (js/require "../resources/images/tokens/mainnet/DCN.png") + :dgd (js/require "../resources/images/tokens/mainnet/DGD.png") + :dgx (js/require "../resources/images/tokens/mainnet/DGX.png") + :dlt (js/require "../resources/images/tokens/mainnet/DLT.png") + :dnt (js/require "../resources/images/tokens/mainnet/DNT.png") + :dpy (js/require "../resources/images/tokens/mainnet/DPY.png") + :drt (js/require "../resources/images/tokens/mainnet/DRT.png") + :dta (js/require "../resources/images/tokens/mainnet/DTA.png") + :edg (js/require "../resources/images/tokens/mainnet/EDG.png") + :edo (js/require "../resources/images/tokens/mainnet/EDO.png") + :ekg (js/require "../resources/images/tokens/mainnet/EKG.png") + :eko (js/require "../resources/images/tokens/mainnet/EKO.png") + :elf (js/require "../resources/images/tokens/mainnet/ELF.png") + :emona (js/require "../resources/images/tokens/mainnet/EMONA.png") + :eng (js/require "../resources/images/tokens/mainnet/ENG.png") + :enj (js/require "../resources/images/tokens/mainnet/ENJ.png") + :ens (js/require "../resources/images/tokens/mainnet/ENS.png") + :eos (js/require "../resources/images/tokens/mainnet/EOS.png") + :equad (js/require "../resources/images/tokens/mainnet/EQUAD.png") + :eth (js/require "../resources/images/tokens/mainnet/ETH-token.png") + :eth2x-fli (js/require "../resources/images/tokens/mainnet/ETH2x-FLI.png") + :ethos (js/require "../resources/images/tokens/mainnet/ETHOS.png") + :evx (js/require "../resources/images/tokens/mainnet/EVX.png") + :fuel (js/require "../resources/images/tokens/mainnet/FUEL.png") + :fun (js/require "../resources/images/tokens/mainnet/FUN.png") + :fxc (js/require "../resources/images/tokens/mainnet/FXC.png") + :gdc (js/require "../resources/images/tokens/mainnet/GDC.png") + :gen (js/require "../resources/images/tokens/mainnet/GEN.png") + :glm (js/require "../resources/images/tokens/mainnet/GLM.png") + :gno (js/require "../resources/images/tokens/mainnet/GNO.png") + :gnt (js/require "../resources/images/tokens/mainnet/GNT.png") + :grid (js/require "../resources/images/tokens/mainnet/GRID.png") + :grt (js/require "../resources/images/tokens/mainnet/GRT.png") + :hez (js/require "../resources/images/tokens/mainnet/HEZ.png") + :hst (js/require "../resources/images/tokens/mainnet/HST.png") + :ht (js/require "../resources/images/tokens/mainnet/HT.png") + :icn (js/require "../resources/images/tokens/mainnet/ICN.png") + :icos (js/require "../resources/images/tokens/mainnet/ICOS.png") + :iost (js/require "../resources/images/tokens/mainnet/IOST.png") + :kdo (js/require "../resources/images/tokens/mainnet/KDO.png") + :kin (js/require "../resources/images/tokens/mainnet/KIN.png") + :knc (js/require "../resources/images/tokens/mainnet/KNC.png") + :kudos (js/require "../resources/images/tokens/mainnet/Kudos.png") + :lend (js/require "../resources/images/tokens/mainnet/LEND.png") + :link (js/require "../resources/images/tokens/mainnet/LINK.png") + :lisk (js/require "../resources/images/tokens/mainnet/LISK.png") + :loom (js/require "../resources/images/tokens/mainnet/LOOM.png") + :lpt (js/require "../resources/images/tokens/mainnet/LPT.png") + :lrc (js/require "../resources/images/tokens/mainnet/LRC.png") + :mana (js/require "../resources/images/tokens/mainnet/MANA.png") + :mco (js/require "../resources/images/tokens/mainnet/MCO.png") + :mda (js/require "../resources/images/tokens/mainnet/MDA.png") + :met (js/require "../resources/images/tokens/mainnet/MET.png") + :mfg (js/require "../resources/images/tokens/mainnet/MFG.png") + :mgo (js/require "../resources/images/tokens/mainnet/MGO.png") + :mkr (js/require "../resources/images/tokens/mainnet/MKR.png") + :mln (js/require "../resources/images/tokens/mainnet/MLN.png") + :moc (js/require "../resources/images/tokens/mainnet/MOC.png") + :mod (js/require "../resources/images/tokens/mainnet/MOD.png") + :mth (js/require "../resources/images/tokens/mainnet/MTH.png") + :mtl (js/require "../resources/images/tokens/mainnet/MTL.png") + :myb (js/require "../resources/images/tokens/mainnet/MYB.png") + :nexo (js/require "../resources/images/tokens/mainnet/NEXO.png") + :nexxo (js/require "../resources/images/tokens/mainnet/NEXXO.png") + :nmr (js/require "../resources/images/tokens/mainnet/NMR.png") + :npxs (js/require "../resources/images/tokens/mainnet/NPXS.png") + :ogn (js/require "../resources/images/tokens/mainnet/OGN.png") + :omg (js/require "../resources/images/tokens/mainnet/OMG.png") + :otn (js/require "../resources/images/tokens/mainnet/OTN.png") + :oxt (js/require "../resources/images/tokens/mainnet/OXT.png") + :pax (js/require "../resources/images/tokens/mainnet/PAX.png") + :paxg (js/require "../resources/images/tokens/mainnet/PAXG.png") + :pay (js/require "../resources/images/tokens/mainnet/PAY.png") + :pbtc (js/require "../resources/images/tokens/mainnet/PBTC.png") + :plr (js/require "../resources/images/tokens/mainnet/PLR.png") + :poe (js/require "../resources/images/tokens/mainnet/POE.png") + :poly (js/require "../resources/images/tokens/mainnet/POLY.png") + :powr (js/require "../resources/images/tokens/mainnet/POWR.png") + :ppp (js/require "../resources/images/tokens/mainnet/PPP.png") + :ppt (js/require "../resources/images/tokens/mainnet/PPT.png") + :pt (js/require "../resources/images/tokens/mainnet/PT.png") + :qkc (js/require "../resources/images/tokens/mainnet/QKC.png") + :qrl (js/require "../resources/images/tokens/mainnet/QRL.png") + :qsp (js/require "../resources/images/tokens/mainnet/QSP.png") + :r (js/require "../resources/images/tokens/mainnet/R.png") + :rae (js/require "../resources/images/tokens/mainnet/RAE.png") + :rare (js/require "../resources/images/tokens/mainnet/RARE.png") + :rcn (js/require "../resources/images/tokens/mainnet/RCN.png") + :rdn (js/require "../resources/images/tokens/mainnet/RDN.png") + :ren (js/require "../resources/images/tokens/mainnet/REN.png") + :rep (js/require "../resources/images/tokens/mainnet/REP.png") + :req (js/require "../resources/images/tokens/mainnet/REQ.png") + :rhoc (js/require "../resources/images/tokens/mainnet/RHOC.png") + :rlc (js/require "../resources/images/tokens/mainnet/RLC.png") + :rol (js/require "../resources/images/tokens/mainnet/ROL.png") + :sai (js/require "../resources/images/tokens/mainnet/SAI.png") + :salt (js/require "../resources/images/tokens/mainnet/SALT.png") + :san (js/require "../resources/images/tokens/mainnet/SAN.png") + :sngls (js/require "../resources/images/tokens/mainnet/SNGLS.png") + :snm (js/require "../resources/images/tokens/mainnet/SNM.png") + :snt (js/require "../resources/images/tokens/mainnet/SNT.png") + :snx (js/require "../resources/images/tokens/mainnet/SNX.png") + :socks (js/require "../resources/images/tokens/mainnet/SOCKS.png") + :spank (js/require "../resources/images/tokens/mainnet/SPANK.png") + :spike (js/require "../resources/images/tokens/mainnet/SPIKE.png") + :spn (js/require "../resources/images/tokens/mainnet/SPN.png") + :st (js/require "../resources/images/tokens/mainnet/ST.png") + :storj (js/require "../resources/images/tokens/mainnet/STORJ.png") + :storm (js/require "../resources/images/tokens/mainnet/STORM.png") + :strk (js/require "../resources/images/tokens/mainnet/STRK.png") + :stx (js/require "../resources/images/tokens/mainnet/STX.png") + :sub (js/require "../resources/images/tokens/mainnet/SUB.png") + :supr (js/require "../resources/images/tokens/mainnet/SUPR.png") + :susd (js/require "../resources/images/tokens/mainnet/sUSD.png") + :taas (js/require "../resources/images/tokens/mainnet/TAAS.png") + :taud (js/require "../resources/images/tokens/mainnet/TAUD.png") + :tcad (js/require "../resources/images/tokens/mainnet/TCAD.png") + :tgbp (js/require "../resources/images/tokens/mainnet/TGBP.png") + :tkn (js/require "../resources/images/tokens/mainnet/TKN.png") + :tkx (js/require "../resources/images/tokens/mainnet/TKX.png") + :tnt (js/require "../resources/images/tokens/mainnet/TNT.png") + :trst (js/require "../resources/images/tokens/mainnet/TRST.png") + :trx (js/require "../resources/images/tokens/mainnet/TRX.png") + :tusd (js/require "../resources/images/tokens/mainnet/TUSD.png") + :ubi (js/require "../resources/images/tokens/mainnet/UBI.png") + :ubt (js/require "../resources/images/tokens/mainnet/UBT.png") + :ukg (js/require "../resources/images/tokens/mainnet/UKG.png") + :uni (js/require "../resources/images/tokens/mainnet/UNI.png") + :upp (js/require "../resources/images/tokens/mainnet/UPP.png") + :usdc (js/require "../resources/images/tokens/mainnet/USDC.png") + :usds (js/require "../resources/images/tokens/mainnet/USDS.png") + :usdt (js/require "../resources/images/tokens/mainnet/USDT.png") + :veri (js/require "../resources/images/tokens/mainnet/VERI.png") + :vgx (js/require "../resources/images/tokens/mainnet/VGX.png") + :vib (js/require "../resources/images/tokens/mainnet/VIB.png") + :wabi (js/require "../resources/images/tokens/mainnet/WaBi.png") + :wbtc (js/require "../resources/images/tokens/mainnet/WBTC.png") + :weth (js/require "../resources/images/tokens/mainnet/WETH.png") + :wings (js/require "../resources/images/tokens/mainnet/WINGS.png") + :wtc (js/require "../resources/images/tokens/mainnet/WTC.png") + :xaur (js/require "../resources/images/tokens/mainnet/XAUR.png") + :xpa (js/require "../resources/images/tokens/mainnet/XPA.png") + :xrl (js/require "../resources/images/tokens/mainnet/XRL.png") + :xuc (js/require "../resources/images/tokens/mainnet/XUC.png") + :zrx (js/require "../resources/images/tokens/mainnet/ZRX.png") + :zsc (js/require "../resources/images/tokens/mainnet/ZSC.png")}) (defn get-token [k] diff --git a/src/react_native/core.cljs b/src/react_native/core.cljs index 55bb246f32..fee337520e 100644 --- a/src/react_native/core.cljs +++ b/src/react_native/core.cljs @@ -17,6 +17,7 @@ (def view (reagent/adapt-react-class (.-View ^js react-native))) (def scroll-view (reagent/adapt-react-class (.-ScrollView ^js react-native))) +(def safe-area-view (reagent/adapt-react-class (.-SafeAreaView ^js react-native))) (def ^:private image-native (reagent/adapt-react-class (.-Image ^js react-native))) diff --git a/src/status_im2/constants.cljs b/src/status_im2/constants.cljs index aebf9b9f20..cf315771f6 100644 --- a/src/status_im2/constants.cljs +++ b/src/status_im2/constants.cljs @@ -193,7 +193,7 @@ (def regx-address #"^0x[a-fA-F0-9]{40}$") (def regx-address-contains #"(?i)0x[a-fA-F0-9]{40}") (def regx-starts-with-uuid #"^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}") -(def regx-address-fragment #"^0x[a-fA-F0-9]{1,40}$") +(def regx-full-or-partial-address #"^0x[a-fA-F0-9]{1,40}$") (def ^:const dapp-permission-contact-code "contact-code") (def ^:const dapp-permission-web3 "web3") diff --git a/src/status_im2/contexts/wallet/common/utils.cljs b/src/status_im2/contexts/wallet/common/utils.cljs index 9f403f5909..70abc3104c 100644 --- a/src/status_im2/contexts/wallet/common/utils.cljs +++ b/src/status_im2/contexts/wallet/common/utils.cljs @@ -29,7 +29,7 @@ (/ n (Math/pow 10 (utils.number/parse-int decimals))) 0)) -(defn- total-token-value-in-all-chains +(defn total-token-value-in-all-chains [{:keys [balances-per-chain decimals]}] (->> balances-per-chain (vals) @@ -43,3 +43,12 @@ (* (total-token-value-in-all-chains token) (-> token :market-values-per-currency :usd :price)))) (reduce +))) + +(defn network-list + [{:keys [balances-per-chain]} networks] + (into #{} + (mapv (fn [chain-id] + (first (filter #(or (= (:chain-id %) chain-id) + (= (:related-chain-id %) chain-id)) + networks))) + (keys balances-per-chain)))) diff --git a/src/status_im2/contexts/wallet/send/select_address/view.cljs b/src/status_im2/contexts/wallet/send/select_address/view.cljs index ce80379c68..cade62a074 100644 --- a/src/status_im2/contexts/wallet/send/select_address/view.cljs +++ b/src/status_im2/contexts/wallet/send/select_address/view.cljs @@ -50,7 +50,10 @@ send-address (rf/sub [:wallet/send-address]) valid-ens-or-address? (rf/sub [:wallet/valid-ens-or-address?])] [quo/address-input - {:on-focus #(reset! input-focused? true) + {:on-focus (fn [] + (when (empty? @input-value) + (rf/dispatch [:wallet/clean-local-suggestions])) + (reset! input-focused? true)) :on-blur #(reset! input-focused? false) :on-scan (fn [] (rn/dismiss-keyboard!) @@ -66,7 +69,7 @@ 300) :on-change-text (fn [text] (let [starts-like-eth-address (re-matches - constants/regx-address-fragment + constants/regx-full-or-partial-address text)] (when-not (= scanned-address text) (rf/dispatch [:wallet/clean-scanned-address])) @@ -86,8 +89,8 @@ ^{:key (str network)} [quo/text {:size :paragraph-2 - :style {:color (colors/resolve-color network theme)}} - (str (subs (name network) 0 3) ":")]) + :style {:color (colors/resolve-color (:network-name network) theme)}} + (str (:short-name network) ":")]) networks) [quo/text {:size :paragraph-2 @@ -130,16 +133,15 @@ [] (let [margin-top (safe-area/get-top) selected-tab (reagent/atom (:id (first tabs-data))) - on-close #(rf/dispatch [:navigate-back]) + on-close (fn [] + (rf/dispatch [:wallet/clean-scanned-address]) + (rf/dispatch [:wallet/clean-local-suggestions]) + (rf/dispatch [:navigate-back])) on-change-tab #(reset! selected-tab %) input-value (reagent/atom "") input-focused? (reagent/atom false)] (fn [] (let [valid-ens-or-address? (boolean (rf/sub [:wallet/valid-ens-or-address?]))] - (rn/use-effect (fn [] - (fn [] - (rf/dispatch [:wallet/clean-scanned-address]) - (rf/dispatch [:wallet/clean-local-suggestions])))) [rn/scroll-view {:content-container-style (style/container margin-top) :keyboard-should-persist-taps :handled @@ -173,7 +175,10 @@ :type :primary :disabled? (not valid-ens-or-address?) :container-style style/button - :on-press #(js/alert "Not implemented yet")} + :on-press (fn [] + (rf/dispatch [:wallet/select-send-address @input-value]) + (rf/dispatch [:navigate-to-within-stack + [:wallet-select-asset :wallet-select-address]]))} (i18n/label :t/continue)])] [:<> [quo/tabs diff --git a/src/status_im2/contexts/wallet/send/select_asset/style.cljs b/src/status_im2/contexts/wallet/send/select_asset/style.cljs new file mode 100644 index 0000000000..a1fa91402a --- /dev/null +++ b/src/status_im2/contexts/wallet/send/select_asset/style.cljs @@ -0,0 +1,21 @@ +(ns status-im2.contexts.wallet.send.select-asset.style + (:require [react-native.navigation :as navigation] + [react-native.platform :as platform])) + +(def container + {:flex 1 + :padding-top (when platform/android? (navigation/status-bar-height))}) + +(def title-container + {:margin-horizontal 20 + :margin-vertical 12}) + +(defn empty-container-style + [margin-bottom] + {:justify-content :center + :flex 1 + :margin-bottom margin-bottom}) + +(def search-input-container + {:padding-horizontal 20 + :padding-vertical 8}) diff --git a/src/status_im2/contexts/wallet/send/select_asset/view.cljs b/src/status_im2/contexts/wallet/send/select_asset/view.cljs new file mode 100644 index 0000000000..984dda3338 --- /dev/null +++ b/src/status_im2/contexts/wallet/send/select_asset/view.cljs @@ -0,0 +1,108 @@ +(ns status-im2.contexts.wallet.send.select-asset.view + (:require + [clojure.string :as string] + [quo.core :as quo] + [quo.foundations.resources :as quo.resources] + [quo.theme :as quo.theme] + [react-native.core :as rn] + [react-native.safe-area :as safe-area] + [reagent.core :as reagent] + [status-im2.contexts.wallet.send.select-asset.style :as style] + [utils.i18n :as i18n] + [utils.re-frame :as rf])) + +(def tabs-data + [{:id :tab/assets :label (i18n/label :t/assets) :accessibility-label :assets-tab} + {:id :tab/collectibles :label (i18n/label :t/collectibles) :accessibility-label :collectibles-tab}]) + +(defn- asset-component + [] + (fn [token _ _ _] + (let [on-press #(js/alert "Not implemented yet") + total-balance-formatted (.toFixed (:total-balance token) 2) + balance-fiat-formatted (.toFixed (:total-balance-fiat token) 2) + currency-symbol "$"] + [quo/token-network + {:token (quo.resources/get-token (keyword (string/lower-case (:symbol token)))) + :label (:name token) + :token-value (str total-balance-formatted " " (:symbol token)) + :fiat-value (str currency-symbol balance-fiat-formatted) + :networks (:networks token) + :on-press on-press}]))) + +(defn- asset-list + [search-text] + (let [filtered-tokens (rf/sub [:wallet/tokens-filtered search-text])] + [rn/flat-list + {:data filtered-tokens + :style {:flex 1} + :content-container-style {:padding-horizontal 8} + :keyboard-should-persist-taps :handled + :key-fn :id + :on-scroll-to-index-failed identity + :render-fn asset-component}])) + +(defn- tab-view + [search-text selected-tab] + (case selected-tab + :tab/assets [asset-list search-text] + :tab/collectibles [quo/empty-state + {:title (i18n/label :t/no-collectibles) + :description (i18n/label :t/no-collectibles-description) + :placeholder? true + :container-style (style/empty-container-style (safe-area/get-top))}])) + +(defn- search-input + [search-text] + (let [on-change-text #(reset! search-text %)] + (fn [] + [rn/view {:style style/search-input-container} + [quo/input + {:small? true + :placeholder (i18n/label :t/search-assets) + :icon-name :i/search + :value @search-text + :on-change-text on-change-text}]]))) + +(defn- f-view-internal + [] + (let [selected-tab (reagent/atom (:id (first tabs-data))) + search-text (reagent/atom "") + on-close #(rf/dispatch [:navigate-back-within-stack + :wallet-select-asset])] + (fn [] + [rn/safe-area-view {:style style/container} + [rn/scroll-view + {:content-container-style {:flex 1} + :keyboard-should-persist-taps :handled + :scroll-enabled false} + [quo/page-nav + {:icon-name :i/arrow-left + :on-press on-close + :accessibility-label :top-bar + :right-side :account-switcher + :account-switcher {:customization-color :purple + :on-press #(js/alert "Not implemented yet") + :state :default + :emoji "🍑"}}] + [quo/text-combinations + {:title (i18n/label :t/select-asset) + :container-style style/title-container + :title-accessibility-label :title-label}] + [quo/segmented-control + {:size 32 + :blur? false + :symbol false + :default-active :tab/assets + :container-style {:margin-horizontal 20 + :margin-vertical 8} + :data tabs-data + :on-change #(reset! selected-tab %)}] + [search-input search-text] + [tab-view @search-text @selected-tab]]]))) + +(defn- view-internal + [] + [:f> f-view-internal]) + +(def view (quo.theme/with-theme view-internal)) diff --git a/src/status_im2/contexts/wallet/temp.cljs b/src/status_im2/contexts/wallet/temp.cljs index 85f223eca9..7262e2b106 100644 --- a/src/status_im2/contexts/wallet/temp.cljs +++ b/src/status_im2/contexts/wallet/temp.cljs @@ -4,17 +4,24 @@ [status-im2.contexts.wallet.item-types :as types])) (def ens-local-suggestion-saved-address-mock - {:type types/saved-address - :name "Pedro" - :ens "pedro.eth" - :address "0x4732894732894738294783294723894723984" - :networks [:ethereum :optimism]}) + {:type types/saved-address + :name "Pedro" + :ens "pedro.eth" + :address "0x4732894732894738294783294723894723984" + :customization-color :purple + :networks [{:network-name :ethereum + :short-name "eth"} + {:network-name :optimism + :short-name "opt"}]}) (def ens-local-suggestion-mock {:type types/address :ens "pedro.eth" :address "0x4732894732894738294783294723894723984" - :networks [:ethereum :optimism]}) + :networks [{:network-name :ethereum + :short-name "eth"} + {:network-name :optimism + :short-name "opt"}]}) (def address-local-suggestion-saved-contact-address-mock {:type types/saved-contact-address @@ -32,12 +39,18 @@ :name "Peter Lamborginski" :address "0x12FaBc34De56Ef78A9B0Cd12Ef3456AbC7D8E9F0" :customization-color :magenta - :networks [:ethereum :optimism]}) + :networks [{:network-name :ethereum + :short-name "eth"} + {:network-name :optimism + :short-name "opt"}]}) (def address-local-suggestion-mock {:type types/address :address "0x1233cD34De56Ef78A9B0Cd12Ef3456AbC7123dee" - :networks [:ethereum :optimism]}) + :networks [{:network-name :ethereum + :short-name "eth"} + {:network-name :optimism + :short-name "opt"}]}) (defn find-matching-addresses [substring] diff --git a/src/status_im2/navigation/screens.cljs b/src/status_im2/navigation/screens.cljs index f8b221334b..a1a6b54dc3 100644 --- a/src/status_im2/navigation/screens.cljs +++ b/src/status_im2/navigation/screens.cljs @@ -50,6 +50,7 @@ [status-im2.contexts.wallet.saved-addresses.view :as wallet-saved-addresses] [status-im2.contexts.wallet.scan-account.view :as scan-address] [status-im2.contexts.wallet.send.select-address.view :as wallet-select-address] + [status-im2.contexts.wallet.send.select-asset.view :as wallet-select-asset] [status-im2.navigation.options :as options] [status-im2.navigation.transitions :as transitions])) @@ -291,6 +292,10 @@ :options {:modalPresentationStyle :overCurrentContext} :component wallet-select-address/view} + {:name :wallet-select-asset + :options {:insets {:top? true}} + :component wallet-select-asset/view} + {:name :scan-address :options (merge options/dark-screen diff --git a/src/status_im2/subs/wallet/wallet.cljs b/src/status_im2/subs/wallet/wallet.cljs index 9cd8bd0731..302fce349c 100644 --- a/src/status_im2/subs/wallet/wallet.cljs +++ b/src/status_im2/subs/wallet/wallet.cljs @@ -1,5 +1,6 @@ (ns status-im2.subs.wallet.wallet - (:require [re-frame.core :as rf] + (:require [clojure.string :as string] + [re-frame.core :as rf] [status-im2.contexts.wallet.common.utils :as utils] [utils.number])) @@ -59,3 +60,26 @@ (-> wallet (get-in [:accounts current-viewing-account-address]) (assoc :balance (get balances current-viewing-account-address))))) + +(rf/reg-sub + :wallet/tokens-filtered + :<- [:wallet/current-viewing-account] + :<- [:wallet/network-details] + (fn [[account networks] [_ query]] + (let [tokens (map (fn [token] + (assoc token + :networks (utils/network-list token networks) + :total-balance (utils/total-token-value-in-all-chains token) + :total-balance-fiat (utils/calculate-balance token))) + (:tokens account)) + + sorted-tokens + (sort-by :name compare tokens) + filtered-tokens + (filter #(or (string/starts-with? (string/lower-case (:name %)) + (string/lower-case query)) + (string/starts-with? (string/lower-case (:symbol %)) + (string/lower-case query))) + sorted-tokens)] + (println filtered-tokens "3421342342432") + filtered-tokens))) diff --git a/translations/en.json b/translations/en.json index ba3c01ee17..43f88f4e11 100644 --- a/translations/en.json +++ b/translations/en.json @@ -2390,6 +2390,7 @@ "invalid-address": "It’s not Ethereum address or ENS name", "address-already-in-use": "Address already being used", "address-copied": "Address copied", - "no-dapps-description": "We want dApps!" + "no-dapps-description": "We want dApps!", + "select-asset": "Select asset" }