Compare commits
1
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 J.M.N
|
e988795bce |
Binary file not shown.
|
After Width: | Height: | Size: 618 B |
Binary file not shown.
|
After Width: | Height: | Size: 618 B |
Binary file not shown.
|
After Width: | Height: | Size: 521 B |
Binary file not shown.
|
After Width: | Height: | Size: 673 B |
Binary file not shown.
|
After Width: | Height: | Size: 213 B |
Binary file not shown.
|
After Width: | Height: | Size: 257 B |
Binary file not shown.
|
After Width: | Height: | Size: 633 B |
Binary file not shown.
|
After Width: | Height: | Size: 633 B |
Binary file not shown.
|
After Width: | Height: | Size: 543 B |
Binary file not shown.
|
After Width: | Height: | Size: 734 B |
@@ -0,0 +1,32 @@
|
||||
(ns quo2.components.base-tag
|
||||
(:require
|
||||
[quo.react-native :as rn]))
|
||||
|
||||
(defn style-container [size disabled border-color border-width background-color label type]
|
||||
(merge {:height size
|
||||
:border-color border-color
|
||||
:background-color background-color
|
||||
:border-width border-width
|
||||
:border-radius size
|
||||
:align-items :center
|
||||
:justify-content :center}
|
||||
(when disabled
|
||||
{:opacity 0.3})
|
||||
(when (and (or (= type :icon) (= type :emoji)) (not label))
|
||||
{:width size})))
|
||||
|
||||
(defn base-tag
|
||||
"opts
|
||||
{:type :icon/:emoji/:label/:token/:permission
|
||||
:size 32/24}
|
||||
:labelled true"
|
||||
[_]
|
||||
(fn [{:keys [id size disabled border-color border-width background-color on-press
|
||||
accessibility-label label type] :or {size 32}} children]
|
||||
[rn/touchable-without-feedback (merge {:disabled disabled
|
||||
:accessibility-label accessibility-label}
|
||||
(when on-press
|
||||
{:on-press #(on-press id)}))
|
||||
[rn/view {:style (merge (style-container size disabled border-color border-width
|
||||
background-color label type))}
|
||||
children]]))
|
||||
@@ -0,0 +1,131 @@
|
||||
(ns quo2.components.permission-tag
|
||||
(:require [status-im.ui.components.react :as react]
|
||||
[quo2.components.text :as text]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[quo2.components.icon :as icons]
|
||||
[quo2.components.base-tag :as base-tag]
|
||||
[status-im.i18n.i18n :as i18n]))
|
||||
|
||||
(defn outer-resource-container [size background-color]
|
||||
{:background-color background-color
|
||||
:border-radius size
|
||||
:width size
|
||||
:height size
|
||||
:margin-left (case size 32 -12 24 -8)
|
||||
:align-items :center
|
||||
:justify-content :center})
|
||||
|
||||
(defn extra-count-styles [size]
|
||||
{:background-color (colors/theme-colors
|
||||
colors/neutral-20
|
||||
colors/neutral-70)
|
||||
:height (case size 32 28 24 20)
|
||||
:width (case size 32 28 24 20)
|
||||
:border-radius size
|
||||
:justify-content :center
|
||||
:align-items :center})
|
||||
|
||||
(defn tag-extra-count [total-group-count selected-count size background-color]
|
||||
(let [extra-group-count (- total-group-count selected-count)]
|
||||
(when (> extra-group-count 0)
|
||||
[react/view (outer-resource-container size background-color)
|
||||
[react/view (extra-count-styles size)
|
||||
(if (< extra-group-count 4)
|
||||
[text/text {:size :label
|
||||
:style {:align-items :center
|
||||
:color (colors/theme-colors
|
||||
colors/neutral-50
|
||||
colors/neutral-40)}}
|
||||
(str "+" extra-group-count)]
|
||||
[icons/icon :main-icons2/pending-default {:container-style {:align-items :center
|
||||
:justify-content :center}
|
||||
:color (colors/theme-colors
|
||||
colors/neutral-50
|
||||
colors/neutral-40)
|
||||
:size 12}])]])))
|
||||
|
||||
(defn tag-or-text [size]
|
||||
[react/view {:align-items :center}
|
||||
[text/text {:weight :medium
|
||||
:size (case size 32 :paragraph-2 24 :label)
|
||||
:style {:color (colors/theme-colors
|
||||
colors/neutral-50
|
||||
colors/neutral-40)
|
||||
:padding-left 4
|
||||
:text-transform :lowercase
|
||||
:padding-right (case size 32 16 24 12)}}
|
||||
(i18n/label :t/or)]])
|
||||
|
||||
(defn selected-token-count [group]
|
||||
(cond
|
||||
(= (count group) 3) 3
|
||||
|
||||
(> (count group) 3) 2
|
||||
|
||||
:else
|
||||
(count group)))
|
||||
|
||||
(defn token-group []
|
||||
(fn [{:keys [group size last-group background-color]
|
||||
:or {size 24}}]
|
||||
(let [tokens-count (count group)
|
||||
selected-tokens (take (selected-token-count group) group)]
|
||||
[react/view {:flex-direction :row
|
||||
:align-items :center}
|
||||
(for [{:keys [token-icon]} selected-tokens]
|
||||
^{:key token-icon}
|
||||
[react/view {:flex-direction :row}
|
||||
[react/view (outer-resource-container size background-color)
|
||||
[react/image {:source token-icon
|
||||
:style {:height (case size 32 28 24 20)
|
||||
:width (case size 32 28 24 20)
|
||||
:border-radius size}}]]])
|
||||
|
||||
[tag-extra-count tokens-count (count selected-tokens) size]
|
||||
(when-not last-group
|
||||
[tag-or-text size])])))
|
||||
|
||||
(defn selected-group-count [token-groups]
|
||||
(cond
|
||||
(> (count token-groups) 3) 3
|
||||
|
||||
:else
|
||||
(count token-groups)))
|
||||
|
||||
(defn tokens []
|
||||
(fn [{:keys [token-groups size background-color]
|
||||
:or {size 24}}]
|
||||
(let [selected-groups (take (selected-group-count token-groups) token-groups)
|
||||
last-group-id ((last selected-groups) :id)]
|
||||
[react/view {:flex-direction :row
|
||||
:align-items :center}
|
||||
(for [{:keys [id group]} selected-groups]
|
||||
^{:key id}
|
||||
[token-group {:group group
|
||||
:size size
|
||||
:last-group (if (= id last-group-id) true false)
|
||||
:selected-groups selected-groups
|
||||
:background-color background-color}])])))
|
||||
|
||||
(defn tag
|
||||
[_ _]
|
||||
(fn [{:keys [locked? token-groups size background-color]
|
||||
:or {size 24}}]
|
||||
[base-tag/base-tag {:background-color background-color
|
||||
:size size
|
||||
:type :permission}
|
||||
[react/view {:flex-direction :row
|
||||
:align-items :center
|
||||
:justify-content :flex-end}
|
||||
[react/view {:padding-left 8
|
||||
:padding-right (case size 32 16 24 12)}
|
||||
[icons/icon (if locked? :main-icons2/locked
|
||||
:main-icons2/unlocked)
|
||||
{:resize-mode :center
|
||||
:size (case size 32 20 24 16)
|
||||
:color (colors/theme-colors
|
||||
colors/neutral-50
|
||||
colors/neutral-40)}]]
|
||||
[tokens {:token-groups token-groups
|
||||
:size size
|
||||
:background-color background-color}]]]))
|
||||
@@ -15,6 +15,7 @@
|
||||
[quo2.screens.info-message :as info-message]
|
||||
[quo2.screens.information-box :as information-box]
|
||||
[quo.components.safe-area :as safe-area]
|
||||
[quo2.screens.permission-tag :as permission-tag]
|
||||
[quo.core :as quo]))
|
||||
|
||||
(def screens [{:name :quo2-texts
|
||||
@@ -49,7 +50,10 @@
|
||||
:component info-message/preview-info-message}
|
||||
{:name :information-box
|
||||
:insets {:top false}
|
||||
:component information-box/preview-information-box}])
|
||||
:component information-box/preview-information-box}
|
||||
{:name :quo2-permission-tag
|
||||
:insets {:top false}
|
||||
:component permission-tag/preview-permission-tag}])
|
||||
|
||||
(defn theme-switcher []
|
||||
[rn/view {:style {:flex-direction :row
|
||||
|
||||
@@ -0,0 +1,168 @@
|
||||
(ns quo2.screens.permission-tag
|
||||
(:require [quo.react-native :as rn]
|
||||
[quo.previews.preview :as preview]
|
||||
[quo2.components.permission-tag :as permission-tag]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[status-im.react-native.resources :as resources]
|
||||
[reagent.core :as reagent]))
|
||||
|
||||
(def descriptor [{:label "Size:"
|
||||
:key :size
|
||||
:type :select
|
||||
:options [{:key 32
|
||||
:value "32"}
|
||||
{:key 24
|
||||
:value "24"}]}
|
||||
{:label "Locked:"
|
||||
:key :locked?
|
||||
:type :boolean}])
|
||||
|
||||
(def community-tokens
|
||||
[{:token-groups [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:token-groups [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:token-groups [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 3 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:token-groups [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 3 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:token-groups [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:token-groups [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 1 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:token-groups [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 3 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:token-groups [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 3 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 4 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:token-groups [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:token-groups [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 3 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:token-groups [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 3 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 4 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:token-groups [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 3 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 3 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:token-groups [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 3 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 3 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 4 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:token-groups [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 3 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 4 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 3 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 4 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:token-groups [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 3 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 4 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 5 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 6 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:token-groups [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 1 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 3 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 4 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 5 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 6 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:token-groups [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 3 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 3 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 4 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 5 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 6 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:token-groups [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 3 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 4 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 3 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 4 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 5 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 6 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:token-groups [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 3 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:token-groups [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 3 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 3 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 4 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 5 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 6 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:token-groups [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 3 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}]}
|
||||
{:token-groups [{:id 1 :group [{:id 1 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 2 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}]}
|
||||
{:id 3 :group [{:id 1 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 2 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 3 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 4 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 5 :token-icon (resources/get-image :status-logo)}
|
||||
{:id 6 :token-icon (resources/get-image :status-logo)}]}]}])
|
||||
|
||||
(defn cool-preview []
|
||||
(let [state (reagent/atom {:size 32})]
|
||||
(fn []
|
||||
[rn/view {:margin-bottom 50
|
||||
:padding 16}
|
||||
[rn/view {:flex 1}
|
||||
[preview/customizer state descriptor]]
|
||||
[rn/view {:padding-vertical 60
|
||||
:justify-content :center}
|
||||
(when @state
|
||||
(for [{:keys [token-groups]} community-tokens]
|
||||
^{:key token-groups}
|
||||
[rn/view {:margin-top 20
|
||||
:align-self :flex-end}
|
||||
[permission-tag/tag (merge @state
|
||||
{:token-groups token-groups
|
||||
:background-color (colors/theme-colors
|
||||
colors/neutral-10
|
||||
colors/neutral-80)})]]))]])))
|
||||
|
||||
(defn preview-permission-tag []
|
||||
[rn/view {:background-color (colors/theme-colors
|
||||
colors/neutral-5
|
||||
colors/neutral-95)
|
||||
:flex 1}
|
||||
[rn/flat-list {:flex 1
|
||||
:keyboardShouldPersistTaps :always
|
||||
:header [cool-preview]
|
||||
:key-fn str}]])
|
||||
@@ -58,10 +58,10 @@
|
||||
native-status
|
||||
json)))
|
||||
:multiAccountDeriveAddresses (fn [json callback]
|
||||
(callback
|
||||
(.multiAccountDeriveAddresses
|
||||
native-status
|
||||
json)))
|
||||
(callback
|
||||
(.multiAccountDeriveAddresses
|
||||
native-status
|
||||
json)))
|
||||
:initKeystore (fn [key-uid callback]
|
||||
(callback
|
||||
(.initKeystore
|
||||
|
||||
Reference in New Issue
Block a user