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

feat: add token tag component (#13599) (#13644)

This commit is contained in:
Jamie Caprani 2022-08-25 14:48:29 +01:00 committed by GitHub
parent 976f58606c
commit 47a31ae0aa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 179 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
resources/images/icons/purchasable12@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 629 B

BIN
resources/images/icons/purchasable12@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 806 B

BIN
resources/images/icons/required_checkmark12@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 262 B

BIN
resources/images/icons/required_checkmark12@3x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 336 B

51
src/quo2/components/tag.cljs Normal file
View File

@ -0,0 +1,51 @@
(ns quo2.components.tag
(:require [quo.react-native :as rn]
[quo2.foundations.colors :as colors]
[quo.theme :as theme]
[quo2.components.text :as text]))
(def themes {:light {:background-color colors/neutral-20}
:dark {:background-color colors/neutral-80}})
(defn get-value-from-size [size big-option small-option]
(if (= size :big) big-option small-option))
(defn tag-container [size]
{:height (get-value-from-size size 32 24)
:align-items :center
:flex-direction :row
:border-radius 20})
(defn tag "[tag opts \"label\"]]
opts
{
:size :small/:big
:token-img-src :token-img-src
:token-img-style {}
:border-color :color
:overlay child-elements
}"
[_ _]
(fn [{:keys [size token-img-src token-img-style border-color overlay]
:or {size :small}} label]
[rn/view
{:style (when border-color
{:border-color border-color
:border-radius 20
:border-width 1})}
[rn/view
{:style (merge (tag-container size) (get themes (theme/get-theme)))}
[rn/image
{:source token-img-src
:style (merge
{:height (get-value-from-size size 28 20)
:width (get-value-from-size size 28 20)
:margin-left 2
:margin-right (get-value-from-size size 8 6)} token-img-style)}]
[text/text
{:weight :medium
:number-of-lines 1
:style
{:margin-right (get-value-from-size size 12 11)}
:size (get-value-from-size size :paragraph-2 :label)} label]
overlay]]))

55
src/quo2/components/token_tag.cljs Normal file
View File

@ -0,0 +1,55 @@
(ns quo2.components.token-tag
(:require [quo2.foundations.colors :as colors]
[quo.react-native :as rn]
[quo.theme :as theme]
[status-im.ui.components.icons.icons :as icons]
[quo2.components.tag :as tag]))
(defn get-value-from-size [size big-option small-option]
(if (= size :big) big-option small-option))
(def icon-container-styles
{:display :flex
:align-items :center
:justify-content :center
:position :absolute
:border-radius 20
:margin-left 2})
(defn token-tag
"[token-tag opts]
opts
{
:token string
:value string
:size :small/:big
:token-img-src :token-img-src
:border-color :color
:is-required true/false
:is-purchasable true/false
}"
[_ _]
(fn [{:keys [token value size token-img-src border-color is-required is-purchasable]
:or
{size :small border-color (if (= (theme/get-theme) :dark) colors/purple-60 colors/purple-50)}}]
[tag/tag {:size size
:token-img-src token-img-src
:border-color (when is-required border-color)
:overlay
(when (or is-required is-purchasable)
[rn/view
{:style (merge icon-container-styles
{:width 15.5
:height 15.5
:background-color border-color
:border-color (if (= (theme/get-theme) :dark) colors/black colors/white)
:border-width 1
:right (get-value-from-size size -3.75 -5.75)
:bottom (get-value-from-size size (- 32 7.75 4) (- 24 7.75 2)) ; (- height (icon-height/2) spacing)
})}
[icons/icon (if is-required :main-icons2/required-checkmark12 :main-icons2/purchasable12)
{:no-color true
:width 13.5
:height 13.5}]])}
(str value " " token)]))

4
src/quo2/screens/main.cljs
View File

@ -11,6 +11,7 @@
[quo2.screens.context-tags :as context-tags]
[quo2.screens.group-avatar :as group-avatar]
[quo2.screens.activity-logs :as activity-logs]
[quo2.screens.token-tag :as token-tag]
[quo2.screens.counter :as counter]
[quo2.screens.segmented :as segmented]
[quo2.screens.info-message :as info-message]
@ -42,6 +43,9 @@
{:name :quo2-tabs
:insets {:top false}
:component tabs/preview-tabs}
{:name :quo2-token-tag
:insets {:top false}
:component token-tag/preview-token-tag}
{:name :quo2-segmented
:insets {:top false}
:component segmented/preview-segmented}

69
src/quo2/screens/token_tag.cljs Normal file
View File

@ -0,0 +1,69 @@
(ns quo2.screens.token-tag
(:require [quo.react-native :as rn]
[quo.previews.preview :as preview]
[reagent.core :as reagent]
[quo2.components.token-tag :as quo2]
[quo.design-system.colors :as colors]))
(def descriptor [{:label "Size:"
:key :size
:type :select
:options [{:key :big
:value "big"}
{:key :small
:value "small"}]}
{:label "Value:"
:key :value
:type :select
:options [{:key 0
:value "0"}
{:key 10
:value "10"}
{:key 100
:value "100"}
{:key 1000
:value "1000"}
{:key 10000
:value "10000"}]}
{:label "Community Color:"
:key :border-color
:type :select
:options [{:key "#00a191"
:value "green"}
{:key "red"
:value "red"}]}
{:label "Is Required:"
:key :is-required
:type :boolean}
{:label "Is Purchasable:"
:key :is-purchasable
:type :boolean}
{:label "Token:"
:key :token
:type :select
:options [{:key "ETH"
:value "ETH"}
{:key "SNT"
:value "SNT"}]}])
(def eth-token (js/require "../resources/images/tokens/mainnet/ETH.png"))
(def snt-token (js/require "../resources/images/tokens/mainnet/SNT.png"))
(defn cool-preview []
(let [state (reagent/atom {:size :big :value 10 :token "ETH" :is-required true :is-purchasable false})]
(fn []
[rn/view {:margin-bottom 50
:padding 16}
[preview/customizer state descriptor]
[rn/view {:padding-vertical 60
:align-items :center}
[quo2/token-tag (merge @state {:token-img-src (if (= (get-in @state [:token]) "ETH") eth-token snt-token)})]]])))
(defn preview-token-tag []
[rn/view {:background-color (:ui-background @colors/theme)
:flex 1}
[rn/flat-list {:flex 1
:keyboardShouldPersistTaps :always
:header [cool-preview]
:key-fn str}]])