feat: select asset screen ui (#17780)
feat: select asset screen ui Signed-off-by: Brian Sztamfater <brian@status.im>
This commit is contained in:
Brian Sztamfater
GitHub
parent
f82d28c6c9
commit
1385e27cf4
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
|
|
@ -49,6 +49,7 @@
|
|||
:Text {}
|
||||
:StatusBar {}
|
||||
:ScrollView {}
|
||||
:SafeAreaView {}
|
||||
:KeyboardAvoidingView {}
|
||||
:TextInput {}
|
||||
:Image {}
|
||||
|
|
|
|||
|
|
@ -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)})
|
||||
|
|
|
|||
|
|
@ -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))
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
[]
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -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)))
|
||||
|
|
|
|||
|
|
@ -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")
|
||||
|
|
|
|||
|
|
@ -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))))
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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})
|
||||
|
|
@ -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))
|
||||
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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)))
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue