Skip to content

Commit

Permalink
Refactor tag preview screens to new api (#17549)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ajayesivan @yevh-berdnyk
ajayesivan authored and yevh-berdnyk committed Dec 8, 2023
1 parent 2192774 commit bbc7592
Show file tree
Hide file tree
Showing 15 changed files with 322 additions and 435 deletions.
20 changes: 10 additions & 10 deletions src/quo/components/community/token_gating.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
[clojure.string :as string]
[quo.components.community.style :as style]
[quo.components.markdown.text :as text]
[quo.components.tags.token-tag :as token-tag]
[quo.components.tags.token-tag.view :as token-tag]
[quo.theme :as quo.theme]
[react-native.core :as rn]
[utils.i18n :as i18n]))
Expand All @@ -14,17 +14,17 @@
{:style (style/token-row padding?)}
(doall
(map-indexed (fn [token-index token]
(let [{:keys [img-src amount sufficient? purchasable? loading?]} token]
(let [{:keys [img-src amount sufficient? purchasable?]} token]
^{:key token-index}
[rn/view {:style style/token-tag-spacing}
[token-tag/token-tag
{:symbol (:symbol token)
:value amount
:size 24
:sufficient? sufficient?
:purchasable purchasable?
:loading? loading?
:img-src img-src}]]))
[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))])

(defn- internal-view
Expand Down
124 changes: 0 additions & 124 deletions src/quo/components/tags/token_tag.cljs
View file

This file was deleted.

49 changes: 49 additions & 0 deletions src/quo/components/tags/token_tag/style.cljs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
(ns quo.components.tags.token-tag.style
(:require [quo.foundations.colors :as colors]))

(defn container
[size options blur? theme]
(let [hold? (= options :hold)]
(merge {:background-color (if blur?
(colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 theme)
(colors/theme-colors colors/neutral-10 colors/neutral-90 theme))
:flex-direction :row
:align-items :center
:padding-left 2
:border-width (if hold? 1 0)
:border-radius 20
:border-color (colors/theme-colors colors/success-50 colors/success-60 theme)}
(condp = size
:size-24 {:height (if hold? 26 24)
:padding-right 10
:border-radius (if hold? 13 12)}
:size-32 {:height (if hold? 34 32)
:padding-right 12
:border-radius (if hold? 17 16)}))))

(defn options-icon
[size]
(assoc
(condp = size
:size-24 {:right -8
:top -8}
:size-32 {:right -6
:top -6})
:position
:absolute))

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

(defn label
[theme]
{:color (colors/theme-colors colors/neutral-100 colors/white theme)})
57 changes: 57 additions & 0 deletions src/quo/components/tags/token_tag/view.cljs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
(ns quo.components.tags.token-tag.view
(:require
[oops.core :refer [oget]]
[quo.components.icon :as icons]
[quo.components.markdown.text :as text]
[quo.components.tags.token-tag.style :as style]
[quo.theme :as quo.theme]
[react-native.core :as rn]
[react-native.hole-view :as hole-view]
[reagent.core :as reagent]))

(defn- view-internal
"Options:
- :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
- :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]
:or {size :size-24}}]
[rn/view
{:on-layout #(reset! container-width
(oget % :nativeEvent :layout :width))}
[hole-view/hole-view
{:holes (if options
[{:x (- @container-width
(condp = size
:size-24 10
:size-32 12))
:y (condp = size
:size-24 -6
:size-32 -4)
: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}]
[text/text
{:size :paragraph-2
:weight :medium
:style (style/label theme)}
(str token-value " " token-symbol)]]]
(when options
[rn/view {:style (style/options-icon size)}
[icons/icon (if (= options :hold) :i/hold :i/add-token)
{:size 20
:no-color true}]])])))

(def view (quo.theme/with-theme view-internal))
4 changes: 2 additions & 2 deletions src/quo/core.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@
quo.components.tags.tag
quo.components.tags.tags
quo.components.tags.tiny-tag.view
quo.components.tags.token-tag
quo.components.tags.token-tag.view
quo.components.text-combinations.view
quo.components.wallet.account-card.view
quo.components.wallet.account-origin.view
Expand Down Expand Up @@ -360,7 +360,7 @@
(def tag quo.components.tags.tag/tag)
(def tags quo.components.tags.tags/tags)
(def tiny-tag quo.components.tags.tiny-tag.view/view)
(def token-tag quo.components.tags.token-tag/tag)
(def token-tag quo.components.tags.token-tag.view/view)

;;;; Text combinations
(def text-combinations quo.components.text-combinations.view/view)
Expand Down
6 changes: 4 additions & 2 deletions src/status_im2/contexts/quo_preview/drawers/permission_drawers.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,10 @@
[:<>
[quo/text {:style {:margin-right 4}} "Hold"]
[quo/token-tag
{:size :small
:token-img-src (quo.resources/get-token :eth)} "ETH"]
{:size :size-24
:token-img-src (quo.resources/get-token :eth)
:token-value 5
:token-symbol "ETH"}]
[quo/text {:style {:margin-left 4}} "To post"]])

(defn example-3
Expand Down
17 changes: 10 additions & 7 deletions src/status_im2/contexts/quo_preview/main.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,6 +151,7 @@
[status-im2.contexts.quo-preview.tags.number-tag :as number-tag]
[status-im2.contexts.quo-preview.tags.permission-tag :as permission-tag]
[status-im2.contexts.quo-preview.tags.status-tags :as status-tags]
[status-im2.contexts.quo-preview.tags.tag :as tag]
[status-im2.contexts.quo-preview.tags.tags :as tags]
[status-im2.contexts.quo-preview.tags.tiny-tag :as tiny-tag]
[status-im2.contexts.quo-preview.tags.token-tag :as token-tag]
Expand Down Expand Up @@ -416,21 +417,23 @@
{:name :account-selector
:component account-selector/view}]
:tags [{:name :context-tags
:component context-tags/preview-context-tags}
:component context-tags/view}
{:name :network-tags
:component network-tags/preview}
:component network-tags/view}
{:name :number-tag
:component number-tag/preview}
:component number-tag/view}
{:name :permission-tag
:component permission-tag/preview-permission-tag}
:component permission-tag/view}
{:name :status-tags
:component status-tags/preview-status-tags}
:component status-tags/view}
{:name :tag
:component tag/view}
{:name :tags
:component tags/preview-tags}
:component tags/view}
{:name :tiny-tag
:component tiny-tag/preview-tiny-tag}
{:name :token-tag
:component token-tag/preview-token-tag}]
:component token-tag/view}]
:text-combinations [{:name :text-combinations
:component text-combinations/view}]
:wallet [{:name :account-card :component account-card/preview-account-card}
Expand Down
Loading

0 comments on commit bbc7592

Please sign in to comment.