status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

[#17965] Create token component (#18018) 

* Create token component

* Replace token images by new token component

The new component is being used in the following components:
 - token-input
 - network-amount
 - token-tag
 - summary-tag
 - context-tag
 - token-value
 - token-network
 - preview-list

* Rename token image file: eth-token -> eth

* Remove resources/get-token function
This commit is contained in:
Ulises Manuel 2023-12-08 14:13:11 -06:00 committed by GitHub
parent 8b919f4058
commit 0ba057ae9d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
39 changed files with 257 additions and 368 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
resources/images/tokens/mainnet/ETH-token@2x.png → resources/images/tokens/mainnet/ETH@2x.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

0
resources/images/tokens/mainnet/ETH-token@3x.png → resources/images/tokens/mainnet/ETH@3x.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

54
src/quo/components/community/token_gating.cljs
View File

@ -10,40 +10,36 @@
(defn token-requirement-list-row
[tokens padding?]
[rn/view
{:style (style/token-row padding?)}
(doall
(map-indexed (fn [token-index token]
(let [{:keys [img-src amount sufficient? purchasable?]} token]
^{:key token-index}
[rn/view {:style style/token-tag-spacing}
[token-tag/view
{:token-symbol (:symbol token)
:token-value amount
:size :size-24
:options (cond
sufficient? :hold
purchasable? :add)
:token-img-src img-src}]]))
tokens))])
[rn/view {:style (style/token-row padding?)}
(map-indexed (fn [token-index token]
(let [{:keys [amount sufficient? purchasable?]} token]
^{:key token-index}
[rn/view {:style style/token-tag-spacing}
[token-tag/view
{:token-symbol (:symbol token)
:token-value amount
:size :size-24
:options (cond
sufficient? :hold
purchasable? :add)}]]))
tokens)])
(defn- internal-view
[{:keys [tokens padding? theme]}]
[:<>
(if (> (count tokens) 1)
(doall
(map-indexed
(fn [token-requirement-index tokens]
^{:key token-requirement-index}
[rn/view {:margin-bottom 12}
(when-not (= token-requirement-index 0)
[rn/view {:style (style/token-row-or-border theme)}])
(when-not (= token-requirement-index 0)
[text/text
{:style (style/token-row-or-text padding? theme)
:size :label} (string/lower-case (i18n/label :t/or))])
[token-requirement-list-row tokens padding?]])
tokens))
(map-indexed
(fn [token-requirement-index tokens]
^{:key token-requirement-index}
[rn/view {:margin-bottom 12}
(when-not (= token-requirement-index 0)
[rn/view {:style (style/token-row-or-border theme)}])
(when-not (= token-requirement-index 0)
[text/text
{:style (style/token-row-or-text padding? theme)
:size :label} (string/lower-case (i18n/label :t/or))])
[token-requirement-list-row tokens padding?]])
tokens)
[token-requirement-list-row (first tokens) padding?])])
(def token-requirement-list (quo.theme/with-theme internal-view))

11
src/quo/components/icon.cljs
View File

@ -9,9 +9,10 @@
(defn- valid-color?
[color]
(or (keyword? color)
(and (string? color)
(not (string/blank? color)))))
(and color
(or (keyword? color)
(and (string? color)
(not (string/blank? color))))))
(defn- image-icon-style
[{:keys [color no-color size container-style theme]}]
@ -37,8 +38,8 @@
(cond-> {:size size
:accessibility-label accessibility-label
:style container-style}
(and color (valid-color? color)) (assoc :color color)
(and color-2 (valid-color? color-2)) (assoc :color-2 color-2))]
(valid-color? color) (assoc :color color)
(valid-color? color-2) (assoc :color-2 color-2))]
[rn/image
{:style (image-icon-style (assoc props :size size))
:accessibility-label accessibility-label

8
src/quo/components/list_items/preview_list/view.cljs
View File

@ -4,6 +4,7 @@
[quo.components.avatars.user-avatar.view :as user-avatar]
[quo.components.list-items.preview-list.properties :as properties]
[quo.components.tags.number-tag.view :as number-tag]
[quo.components.utilities.token.view :as token]
[quo.theme :as quo.theme]
[react-native.core :as rn]
[react-native.fast-image :as fast-image]
@ -31,7 +32,12 @@
:height size
:border-radius border-radius}}]
(:tokens :network :dapps) [fast-image/fast-image
:tokens [token/view
{:token item
:size size
:style {:border-radius border-radius}}]
(:network :dapps) [fast-image/fast-image
{:source (or (:source item) item)
:style {:width size
:height size

2
src/quo/components/list_items/token_network/component_spec.cljs
View File

@ -5,7 +5,7 @@
[test-helpers.component :as h]))
(def props
{:token (resources/get-token :snt)
{:token :snt
:state :default
:label "Status"
:networks [(resources/get-network :ethereum)]

4
src/quo/components/list_items/token_network/style.cljs
View File

@ -34,9 +34,7 @@
:flex 1})
(def token-image
{:width 32
:height 32
:border-width 1
{:border-width 1
:border-radius 16
:border-color colors/neutral-80-opa-5
:margin-right 8

9
src/quo/components/list_items/token_network/view.cljs
View File

@ -4,6 +4,7 @@
[quo.components.list-items.preview-list.view :as preview-list]
[quo.components.list-items.token-network.style :as style]
[quo.components.markdown.text :as text]
[quo.components.utilities.token.view :as token]
[quo.theme :as quo.theme]
[react-native.core :as rn]
[reagent.core :as reagent]))
@ -11,9 +12,11 @@
(defn- info
[{:keys [token label networks]}]
[rn/view {:style style/info}
[rn/image
{:source (or (:source token) token)
:style style/token-image}]
(when token
[token/view
{:style style/token-image
:size :size-32
:token token}])
[rn/view {:style style/token-info}
[text/text
{:weight :semi-bold

7
src/quo/components/list_items/token_value/view.cljs
View File

@ -4,9 +4,9 @@
[quo.components.icon :as icon]
[quo.components.list-items.token-value.style :as style]
[quo.components.markdown.text :as text]
[quo.components.utilities.token.view :as token]
[quo.foundations.colors :as colors]
[quo.foundations.common :as common]
[quo.foundations.resources :as resources]
[quo.theme :as quo.theme]
[react-native.core :as rn]
[reagent.core :as reagent]))
@ -34,10 +34,7 @@
{:style {:flex-direction :row
:align-items :center
:flex 1}}
[rn/image
{:source (resources/get-token token)
:style {:width 32
:height 32}}]
[token/view {:token token :size :size-32}]
[rn/view {:style {:margin-left 8}}
[text/text {:weight :semi-bold} (common/token-label token)]
[text/text

4
src/quo/components/tags/context_tag/style.cljs
View File

@ -59,6 +59,10 @@
[theme]
{:color (colors/theme-colors colors/neutral-100 colors/white theme)})
(defn token-logo
[size]
{:border-radius (if (= size 24) 10 14)})
(defn circle-logo
[size]
(if (= size 24)

13
src/quo/components/tags/context_tag/view.cljs
View File

@ -7,6 +7,7 @@
[quo.components.list-items.preview-list.view :as preview-list]
[quo.components.markdown.text :as text]
[quo.components.tags.context-tag.style :as style]
[quo.components.utilities.token.view :as token]
[quo.foundations.colors :as colors]
[quo.theme :as quo.theme]
[react-native.core :as rn]))
@ -73,7 +74,7 @@
(defn- view-internal
[{:keys [theme type size state blur? customization-color profile-picture full-name users
group-name token-logo amount token-name network-logo network-name networks
group-name amount token network-logo network-name networks
account-name emoji collectible collectible-name collectible-number duration container-style]
:or {customization-color :blue
type :default
@ -123,8 +124,11 @@
[communities-tag (assoc props :channel? (= type :channel))]
:token
[tag-skeleton {:theme theme :size size :text (str amount " " token-name)}
[rn/image {:style (style/circle-logo size) :source token-logo}]]
[tag-skeleton {:theme theme :size size :text (str amount " " token)}
[token/view
{:style (style/token-logo size)
:token token
:size (if (= size 24) :size-20 :size-28)}]]
:network
[tag-skeleton {:theme theme :size size :text network-name}
@ -182,9 +186,8 @@
- `:token`
- size
- token-logo (valid rn/image :source value)
- amount
- token-name
- token
- `:network`
- size

6
src/quo/components/tags/summary_tag/component_spec.cljs
View File

@ -47,7 +47,7 @@
(h/test "Token view render"
(h/render [summary-tag/view
{:type :token
:label "1,000 SNT"
:image-source "path/to/token-image.png"}])
{:type :token
:label "1,000 SNT"
:token :eth}])
(h/is-truthy (h/get-by-text "1,000 SNT"))))

4
src/quo/components/tags/summary_tag/style.cljs
View File

@ -24,6 +24,4 @@
:border-radius 10})
(def token-image
{:width 24
:height 24
:border-radius 12})
{:border-radius 12})

15
src/quo/components/tags/summary_tag/view.cljs
View File

@ -5,12 +5,13 @@
[quo.components.avatars.wallet-user-avatar.view :as wallet-user-avatar]
[quo.components.markdown.text :as text]
[quo.components.tags.summary-tag.style :as style]
[quo.components.utilities.token.view :as token]
[quo.foundations.colors :as colors]
[quo.theme :as quo.theme]
[react-native.core :as rn]))
(defn- left-view
[{:keys [label type customization-color emoji image-source]}]
[{:keys [label type customization-color emoji image-source token]}]
(case type
:account
[account-avatar/view
@ -38,9 +39,10 @@
:profile-picture image-source
:customization-color customization-color}]
:token
[rn/image
{:source image-source
:style style/token-image}]
[token/view
{:token token
:size :size-24
:style style/token-image}]
nil))
(defn- view-internal
@ -50,7 +52,7 @@
should vary based on a custom color.
- :type - :token / :user / :collectible / :saved-address / :network / :account
- :emoji - string - emoji used for displaying account avatar
- :image-source - resource - image to display on :network, :collectible :user and :token
- :image-source - resource - image to display on :network, :collectible and :user
- :theme - :light / :dark"
[{:keys [label customization-color type theme]
:as props
@ -62,6 +64,7 @@
[text/text
{:style (style/label type theme)
:weight :semi-bold
:size :heading-1} label]])
:size :heading-1}
label]])
(def view (quo.theme/with-theme view-internal))

10
src/quo/components/tags/token_tag/style.cljs
View File

@ -34,14 +34,10 @@
(defn token-img
[size]
(condp = size
:size-24 {:width 20
:height 20
:margin-right 6
(case size
:size-24 {:margin-right 6
:border-radius 10}
:size-32 {:width 28
:height 28
:margin-right 8
:size-32 {:margin-right 8
:border-radius 14}))
(defn label

28
src/quo/components/tags/token_tag/view.cljs
View File

@ -4,6 +4,7 @@
[quo.components.icon :as icons]
[quo.components.markdown.text :as text]
[quo.components.tags.token-tag.style :as style]
[quo.components.utilities.token.view :as token]
[quo.theme :as quo.theme]
[react-native.core :as rn]
[react-native.hole-view :as hole-view]
@ -14,13 +15,12 @@
- :options - false / :add / :hold (default false)
- :size - :size-24 / :size-32 (default :size-24)
- :blur? - boolean (default false)
- :theme - :light / :dark
- :token-img-src - token image source
- :theme - :light / :dark
- :token-value - string - token value
- :token-symbol - string"
[]
(let [container-width (reagent/atom 0)]
(fn [{:keys [options size blur? theme token-img-src token-value token-symbol]
(fn [{:keys [options size blur? theme token-value token-symbol]
:or {size :size-24}}]
[rn/view
{:on-layout #(reset! container-width
@ -28,21 +28,25 @@
[hole-view/hole-view
{:holes (if options
[{:x (- @container-width
(condp = size
(case size
:size-24 10
:size-32 12))
:y (condp = size
:size-32 12
nil))
:y (case size
:size-24 -6
:size-32 -4)
:size-32 -4
nil)
:width 16
:height 16
:borderRadius 8}]
[])}
[rn/view
{:style (style/container size options blur? theme)}
[rn/image
{:style (style/token-img size)
:source token-img-src}]
[rn/view {:style (style/container size options blur? theme)}
[token/view
{:style (style/token-img size)
:token token-symbol
:size (case size
:size-24 :size-20
:size-32 :size-28)}]
[text/text
{:size :paragraph-2
:weight :medium

34
src/quo/components/utilities/token/loader.clj Normal file
View File

@ -0,0 +1,34 @@
(ns quo.components.utilities.token.loader
(:require [clojure.java.io :as io]
[clojure.string :as string]))
(def ^:private token-path "./resources/images/tokens/mainnet/")
(defn- clean-filename
"Return a (string) filename without the .png extension and @<number>x suffix."
[file]
(first (string/split (str file) #"@|\.png")))
(defn- get-js-require
[filename]
(let [require-path (str "." filename ".png")]
`(js/require ~require-path)))
(defn- get-file-key
[filename]
(-> filename
(string/split #"\/")
(peek)
(string/lower-case)))
(defn get-tokens
[]
(let [files (file-seq (io/file token-path))
png-filenames (keep (fn [file]
(when (string/ends-with? file "png")
(clean-filename file)))
files)]
(zipmap (map get-file-key png-filenames)
(map get-js-require png-filenames))))
(defmacro resolve-tokens [] (get-tokens))

14
src/quo/components/utilities/token/loader.cljs Normal file
View File

@ -0,0 +1,14 @@
(ns quo.components.utilities.token.loader
(:require-macros [quo.components.utilities.token.loader :as loader])
(:require [clojure.string :as string]))
(def ^:private tokens (loader/resolve-tokens))
(defn- get-token-image*
[token]
(let [token-symbol (cond-> token
(keyword? token) name
:always string/lower-case)]
(get tokens token-symbol)))
(def get-token-image (memoize get-token-image*))

58
src/quo/components/utilities/token/view.cljs Normal file
View File

@ -0,0 +1,58 @@
(ns quo.components.utilities.token.view
(:require [quo.components.utilities.token.loader :as token-loader]
[react-native.core :as rn]
[schema.core :as schema]
[utils.number]))
(def ?schema
[:=>
[:cat
[:map {:closed true}
[:size {:optional true :default 32} [:or keyword? pos-int?]]
[:token {:optional true} [:or keyword? string?]]
[:style {:optional true} map?]
;; Ignores `token` and uses this as parameter to `rn/image`'s source.
[:image-source {:optional true} [:or string? map?]]
;; If true, adds `data:image/png;base64,` as prefix to the string passed as `image-source`
[:add-b64-prefix? {:optional true} boolean?]]]
:any])
(defn- size->number
"Remove `size-` prefix in size keywords and returns a number useful for styling."
[size]
(-> size name (subs 5) utils.number/parse-int))
(defn- token-style
[style size]
(let [size-number (if (keyword? size)
(size->number size)
size)]
(assoc style
:width size-number
:height size-number)))
(def ^:private b64-png-image-prefix "data:image/png;base64,")
(defn view-internal
"Render a token image.
Props:
- style: extra styles to apply to the `rn/image` component.
- size: `:size-nn` or just `nn`, being `nn` any number. Defaults to 32.
- token: string or keyword, it can contain upper case letters or not.
E.g. all of these are valid and resolve to the same:
:token/snt | :snt | :SNT | \"SNT\" | \"snt\".
- image-source: Ignores `token` and uses this as parameter to `rn/image`'s source.
- add-b64-prefix?: If true, adds `data:image/png;base64,` as prefix to the string
passed as `image-source`.
"
[{:keys [token size style image-source add-b64-prefix?]
:or {size 32}}]
(let [b64-string (if (and image-source add-b64-prefix?)
(str b64-png-image-prefix image-source)
image-source)
source (or b64-string (token-loader/get-token-image token))]
[rn/image
{:style (token-style style size)
:source source}]))
(def view (schema/instrument #'view-internal ?schema))

6
src/quo/components/wallet/network_amount/view.cljs
View File

@ -2,17 +2,15 @@
(:require
[clojure.string :as string]
[quo.components.markdown.text :as text]
[quo.components.utilities.token.view :as token]
[quo.components.wallet.network-amount.style :as style]
[quo.foundations.resources :as resources]
[quo.theme :as quo.theme]
[react-native.core :as rn]))
(defn- view-internal
[{:keys [amount token theme]}]
[rn/view {:style style/container}
[rn/image
{:source (resources/get-token token)
:style {:width 12 :height 12}}]
[token/view {:token token :size :size-12}]
[text/text
{:weight :medium
:size :paragraph-2

4
src/quo/components/wallet/token_input/style.cljs
View File

@ -16,10 +16,6 @@
:flex-direction :row
:justify-content :space-between})
(def token
{:width 32
:height 32})
(defn text-input
[theme]
(merge typography/heading-1

6
src/quo/components/wallet/token_input/view.cljs
View File

@ -5,10 +5,10 @@
[quo.components.dividers.divider-line.view :as divider-line]
[quo.components.markdown.text :as text]
[quo.components.tags.network-tags.view :as network-tag]
[quo.components.utilities.token.view :as token]
[quo.components.wallet.token-input.style :as style]
[quo.foundations.colors :as colors]
[quo.foundations.common :as common]
[quo.foundations.resources :as resources]
[quo.theme :as quo.theme]
[react-native.core :as rn]
[reagent.core :as reagent]))
@ -41,9 +41,7 @@
:style {:flex-direction :row
:flex-grow 1
:align-items :flex-end}}
[rn/image
{:style style/token
:source (resources/get-token token)}]
[token/view {:token token :size :size-32}]
[rn/text-input
(cond-> {:auto-focus true
:ref #(reset! input-ref %)

8
src/quo/components/wallet/transaction_summary/component_spec.cljs
View File

@ -19,10 +19,10 @@
(h/test "Context tag rendered"
(h/render [transaction-summary/view
{:transaction :send
:first-tag {:size 24
:type :token
:token-name "SNT"
:amount 1500}}])
:first-tag {:size 24
:type :token
:token "SNT"
:amount 1500}}])
(h/is-truthy (h/query-by-label-text :context-tag))))

4
src/quo/core.cljs
View File

@ -143,6 +143,7 @@
quo.components.text-combinations.standard-title.view
quo.components.text-combinations.username.view
quo.components.text-combinations.view
quo.components.utilities.token.view
quo.components.wallet.account-card.view
quo.components.wallet.account-origin.view
quo.components.wallet.account-overview.view
@ -388,6 +389,9 @@
(def text-combinations quo.components.text-combinations.view/view)
(def username quo.components.text-combinations.username.view/view)
;;;; Utilities - Outside of design system
(def token quo.components.utilities.token.view/view)
;;;; Wallet
(def account-card quo.components.wallet.account-card.view/view)
(def account-origin quo.components.wallet.account-origin.view/view)

191
src/quo/foundations/resources.cljs
View File

@ -32,197 +32,6 @@
[k]
(get dapps k))
(def tokens
{: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]
(get tokens k))
(def ^:private networks
{:arbitrum (js/require "../resources/images/networks/Arbitrum.png")
:ethereum (js/require "../resources/images/networks/Ethereum.png")

8
src/status_im2/contexts/quo_preview/community/token_gating.cljs
View File

@ -1,7 +1,6 @@
(ns status-im2.contexts.quo-preview.community.token-gating
(:require
[quo.core :as quo]
[quo.foundations.resources :as resources]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))
@ -22,29 +21,24 @@
[sufficient? many-tokens? loading?]
(into
[{:symbol "KNC"
:img-src (resources/get-token :knc)
:amount 200
:sufficient? true
:loading? loading?}
{:symbol "MANA"
:img-src (resources/get-token :mana)
:amount 10
:sufficient? sufficient?
:purchasable? true
:loading? loading?}
{:symbol "RARE"
:img-src (resources/get-token :rare)
:amount 10
:sufficient? sufficient?
:loading? loading?}]
(when many-tokens?
[{:symbol "FXC"
:img-src (resources/get-token :fxc)
:amount 20
:sufficient? true
:loading? loading?}
{:symbol "SNT"
:img-src (resources/get-token :snt)
:amount 10000
:sufficient? sufficient?
:loading? loading?}])))
@ -58,11 +52,9 @@
many-tokens?
loading?)
[{:symbol "FXC"
:img-src (resources/get-token :fxc)
:amount 20
:sufficient? true}
{:symbol "USDT"
:img-src (resources/get-token :usdt)
:amount 20
:sufficient? false}]]
[(join-gate-options-base sufficient?

8
src/status_im2/contexts/quo_preview/drawers/permission_drawers.cljs
View File

@ -2,7 +2,6 @@
(:require
[quo.core :as quo]
[quo.foundations.colors :as colors]
[quo.foundations.resources :as quo.resources]
[react-native.core :as rn]
[status-im2.common.resources :as resources]))
@ -42,10 +41,9 @@
[:<>
[quo/text {:style {:margin-right 4}} "Hold"]
[quo/token-tag
{:size :size-24
:token-img-src (quo.resources/get-token :eth)
:token-value 5
:token-symbol "ETH"}]
{:size :size-24
:token-value 5
:token-symbol "ETH"}]
[quo/text {:style {:margin-left 4}} "To post"]])
(defn example-3

7
src/status_im2/contexts/quo_preview/list_items/preview_lists.cljs
View File

@ -66,12 +66,7 @@
:emoji "🍓"
:type :default}])
(def tokens-list
[{:source (quo.resources/get-token :snt)}
{:source (quo.resources/get-token :eth)}
{:source (quo.resources/get-token :knc)}
{:source (quo.resources/get-token :mana)}
{:source (quo.resources/get-token :rare)}])
(def tokens-list [:snt :eth :knc :mana :rare])
(def communities-list
[{:source (resources/get-mock-image :coinbase)}

11
src/status_im2/contexts/quo_preview/list_items/token_network.cljs
View File

@ -20,12 +20,9 @@
{:key :selected}]}
{:key :token
:type :select
:options [{:value :eth
:key (quo.resources/get-token :eth)}
{:value :snt
:key (quo.resources/get-token :snt)}
{:value :dai
:key (quo.resources/get-token :dai)}]}
:options [{:key :eth}
{:key :snt}
{:key :dai}]}
{:key :label
:type :text}
{:key :token-value
@ -38,7 +35,7 @@
(defn view
[]
(let [state (reagent/atom {:token (quo.resources/get-token :snt)
(let [state (reagent/atom {:token :snt
:label "Status"
:token-value "0.00 SNT"
:fiat-value "€0.00"

5
src/status_im2/contexts/quo_preview/settings/category.cljs
View File

@ -21,7 +21,10 @@
[{:key :blur? :type :boolean}
{:key :list-type
:type :select
:options [{:key :settings :value :settings} {:key :reorder :value :reorder}]}])
:options [{:key :settings
:value :settings}
{:key :reorder
:value :reorder}]}])
(defn view
[]

5
src/status_im2/contexts/quo_preview/settings/reorder_item.cljs
View File

@ -2,7 +2,6 @@
(:require
[quo.components.settings.reorder-item.types :as types]
[quo.core :as quo]
[quo.foundations.resources :as quo.resources]
[status-im2.common.resources :as resources]
[status-im2.contexts.quo-preview.preview :as preview]))
@ -22,10 +21,10 @@
:title "Status"}}
{:id 3
:type types/item
:data {:image (quo.resources/get-token :eth)
:data {:image (resources/get-mock-image :status-logo)
:image-size 21
:right-icon :i/world
:title "Ethereum"}}
:title "Status"}}
{:id 4
:type types/item
:data {:image (resources/get-mock-image :monkey)

10
src/status_im2/contexts/quo_preview/tags/context_tags.cljs
View File

@ -97,8 +97,11 @@
[size-descriptor
{:key :amount
:type :text}
{:key :token-name
:type :text}])
{:key :token
:type :select
:options [{:key "ETH"}
{:key "SNT"}
{:key "DAI"}]}])
(def network-descriptor
[size-descriptor
@ -202,8 +205,7 @@
:community-logo (resources/mock-images :coinbase)
:community-name "Community"
:channel-name "my channel"
:token-logo (resources/mock-images :diamond)
:token-name "ETH"
:token "ETH"
:amount "10"
:network-logo (resources/mock-images :monkey)
:network-name "Network"

2
src/status_im2/contexts/quo_preview/tags/summary_tag.cljs
View File

@ -13,7 +13,7 @@
:token
{:customization-color "#9999991A"
:label "150 ETH"
:image-source (quo.resources/get-token :eth)}
:token :eth}
:address
{:label "0x39c...Bd2"}
:user

9
src/status_im2/contexts/quo_preview/tags/token_tag.cljs
View File

@ -1,7 +1,6 @@
(ns status-im2.contexts.quo-preview.tags.token-tag
(:require
[quo.core :as quo]
[quo.foundations.resources :as resources]
[react-native.core :as rn]
[reagent.core :as reagent]
[status-im2.contexts.quo-preview.preview :as preview]))
@ -42,9 +41,6 @@
{:key "SNT"
:value "SNT"}]}])
(def eth-token (resources/get-token :eth))
(def snt-token (resources/get-token :snt))
(defn view
[]
(let [state (reagent/atom {:size :size-24
@ -59,7 +55,4 @@
:show-blur-background? true
:descriptor descriptor}
[rn/view {:style {:align-items :center}}
[quo/token-tag
(assoc @state
:token-img-src
(if (= (get-in @state [:token-symbol]) "ETH") eth-token snt-token))]]])))
[quo/token-tag @state]]])))

28
src/status_im2/contexts/quo_preview/wallet/transaction_summary.cljs
View File

@ -7,25 +7,22 @@
[status-im2.contexts.quo-preview.preview :as preview]))
(def asset-snt
{:size 24
:type :token
:token-name "SNT"
:amount 1500
:token-logo (quo.resources/get-token :snt)})
{:size 24
:type :token
:token "SNT"
:amount 1500})
(def asset-eth
{:size 24
:type :token
:token-name "ETH"
:amount 75
:token-logo (quo.resources/get-token :eth)})
{:size 24
:type :token
:token "ETH"
:amount 75})
(def asset-dai
{:size 24
:type :token
:token-name "DAI"
:amount 2400
:token-logo (quo.resources/get-token :dai)})
{:size 24
:type :token
:token "DAI"
:amount 2400})
(def asset-collectible
{:size 24
@ -157,7 +154,6 @@
:value "At"}])
(def descriptor
(concat
[{:key :transaction
:type :select

18
src/status_im2/contexts/quo_preview/wallet/wallet_activity.cljs
View File

@ -8,18 +8,16 @@
[status-im2.contexts.quo-preview.preview :as preview]))
(def asset-snt
{:size 24
:type :token
:token-name "SNT"
:amount 1500
:token-logo (quo.resources/get-token :snt)})
{:size 24
:type :token
:token "SNT"
:amount 1500})
(def asset-dai
{:size 24
:type :token
:token-name "DAI"
:amount 2400
:token-logo (quo.resources/get-token :dai)})
{:size 24
:type :token
:token "DAI"
:amount 2400})
(def asset-collectible
{:size 24

7
src/status_im2/contexts/wallet/common/temp.cljs
View File

@ -1,6 +1,5 @@
(ns status-im2.contexts.wallet.common.temp
(:require
[quo.foundations.resources :as quo.resources]
[react-native.core :as rn]
[status-im2.common.resources :as status.resources]
[utils.i18n :as i18n]))
@ -86,21 +85,21 @@
(defn bridge-token-list
[networks-list]
[{:token (quo.resources/get-token :snt)
[{:token :snt
:label "Status"
:token-value "0.00 SNT"
:fiat-value "€0.00"
:networks networks-list
:state :default
:customization-color :blue}
{:token (quo.resources/get-token :eth)
{:token :eth
:label "Ethereum"
:token-value "0.00 ETH"
:fiat-value "€0.00"
:networks networks-list
:state :default
:customization-color :blue}
{:token (quo.resources/get-token :dai)
{:token :dai
:label "Dai"
:token-value "0.00 DAI"
:fiat-value "€0.00"

4
src/status_im2/contexts/wallet/send/select_asset/view.cljs
View File

@ -1,8 +1,6 @@
(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]
@ -24,7 +22,7 @@
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))))
{:token (:symbol token)
:label (:name token)
:token-value (str total-balance-formatted " " (:symbol token))
:fiat-value (str currency-symbol balance-fiat-formatted)

3
src/status_im2/contexts/wallet/send/transaction_confirmation/view.cljs
View File

@ -1,7 +1,6 @@
(ns status-im2.contexts.wallet.send.transaction-confirmation.view
(:require
[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]
@ -24,7 +23,7 @@
[quo/summary-tag
{:label "150 ETH"
:type :token
:image-source (quo.resources/get-token :eth)}]]
:image-source :eth}]]
[rn/view
{:style {:flex-direction :row
:margin-top 4}}