Added component desciription

src/quo2/components/avatars/group_avatar/view.cljs

@@ -1,6 +1,6 @@
 (ns quo2.components.avatars.group-avatar.view
   (:require [quo2.components.icon :as icon]
-            [quo2.theme :as theme]
+            [quo2.theme :as quo.theme]
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
             [react-native.fast-image :as fast-image]
@@ -20,10 +20,11 @@
 
 (defn- view-internal
   [_]
-  (fn [{:keys [size theme customization-color picture]
+  (fn [{:keys [size theme customization-color picture icon-name]
         :or   {size                :x-small
                customization-color :blue
-               picture             nil}}]
+               picture             nil
+               icon-name           :i/group}}]
     (let [container-size (get-in sizes [:container size])
           icon-size      (get-in sizes [:icon size])]
       [rn/view
@@ -35,8 +36,8 @@
           {:source picture
            :style  {:width  container-size
                     :height container-size}}]
-         [icon/icon :i/members
+         [icon/icon icon-name
           {:size  icon-size
            :color colors/white-opa-70}])])))
 
-(def view (theme/with-theme view-internal))
+(def view (quo.theme/with-theme view-internal))

src/quo2/components/avatars/user_avatar/style.cljs

@@ -17,6 +17,11 @@
             :status-indicator        12
             :status-indicator-border 2
             :font-size               :paragraph-2}
+   28      {:outer                   28
+            :inner                   28
+            :status-indicator        0
+            :status-indicator-border 0
+            :font-size               :paragraph-2}
    :xs     {:outer                   24
             :inner                   24
             :status-indicator        0

src/quo2/components/list_items/preview_list.cljs

@@ -21,6 +21,12 @@
        :hole-size     26
        :hole-x        19
        :hole-y        -1}
+   20 {:border-radius {:circular 11 :rounded 8}
+       :hole-radius   {:circular 10 :rounded 9}
+       :margin-left   -4
+       :hole-size     22
+       :hole-x        15
+       :hole-y        -1}
    16 {:border-radius {:circular 8 :rounded 8}
        :hole-radius   {:circular 9 :rounded 9}
        :margin-left   -4
@@ -38,6 +44,7 @@
                                    :size              (case size
                                                         32 :small
                                                         24 :xs
+                                                        20 :xxs
                                                         16 :xxxs)}
                                   item)]
     (:photo :collectible) [fast-image/fast-image
@@ -47,11 +54,10 @@
                                      :border-radius border-radius}}]))
 
 (defn list-item
-  [index type size item list-size margin-left
-   hole-size hole-radius hole-x hole-y border-radius]
-  (let [last-item? (= index (- list-size 1))]
+  [index type size item list-size margin-left hole-size hole-radius hole-x hole-y border-radius]
+  (let [last-item? (= index (dec list-size))]
     [hole-view/hole-view
-     {:style {:margin-left (if (= index 0) 0 margin-left)}
+     {:style {:margin-left (if (zero? index) 0 margin-left)}
       :holes (if last-item?
                []
                [{:x            hole-x
@@ -122,8 +128,7 @@
    items           preview list items (only 4 items is required for preview)
   "
   [{:keys [type size list-size transparent? theme more-than-99-label]} items]
-  (let [items-arr     (into [] items)
-        list-size     (or list-size (count items))
+  (let [list-size     (or list-size (count items))
         margin-left   (get-in params [size :margin-left])
         hole-size     (get-in params [size :hole-size])
         border-radius (get-in params [size :border-radius (border-type type)])
@@ -133,7 +138,7 @@
     [rn/view {:style {:flex-direction :row}}
      (for [index (range (if (> list-size 4) 3 list-size))]
        ^{:key (str index list-size)}
-       [list-item index type size (get items-arr index) list-size
+       [list-item index type size (get (vec items) index) list-size
         margin-left hole-size hole-radius hole-x hole-y border-radius])
      (when (> list-size 4)
        [overflow-label

src/quo2/components/markdown/list/view.cljs

@@ -1,12 +1,12 @@
 (ns quo2.components.markdown.list.view
-  (:require [react-native.core :as rn]
-            [quo2.components.markdown.text :as text]
-            [quo2.components.counter.step.view :as step]
-            [quo2.components.markdown.list.style :as style]
+  (:require [quo2.components.counter.step.view :as step]
             [quo2.components.icon :as icon]
+            [quo2.components.markdown.list.style :as style]
+            [quo2.components.markdown.text :as text]
+            [quo2.components.tags.context-tag.view :as context-tag]
             [quo2.foundations.colors :as colors]
             [quo2.theme :as theme]
-            [quo2.components.tags.context-tag.view :as context-tag]))
+            [react-native.core :as rn]))
 
 (defn get-colors
   [theme blur?]
@@ -27,7 +27,11 @@
        :size                :paragraph-2}
       description]
      [rn/view {:style {:margin-left 4}}
-      [context-tag/context-tag {:blur? blur?} tag-picture tag-name]]
+      [context-tag/view
+       {:blur?           blur?
+        :size            24
+        :profile-picture tag-picture
+        :full-name       tag-name}]]
      [text/text
       {:style               {:margin-left 4}
        :accessibility-label :list-item-description-after-tag

src/quo2/components/tags/context_tag/style.cljs

@@ -1,31 +1,11 @@
 (ns quo2.components.tags.context-tag.style
   (:require [quo2.foundations.colors :as colors]))
 
-(defn base-tag
-  [override-theme blur?]
-  {:border-radius    100
-   :padding-vertical 3
-   :flex-direction   :row
-   :padding-right    8
-   :padding-left     8
-   :background-color (if blur?
-                       (colors/theme-colors colors/neutral-80-opa-5 colors/white-opa-5 override-theme)
-                       (colors/theme-colors colors/neutral-10 colors/neutral-90 override-theme))})
-
 (defn context-tag-icon-color
-  [blur?]
+  [theme blur?]
   (if blur?
-    (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40)
-    (colors/theme-colors colors/neutral-50 colors/neutral-40)))
-
-(def context-tag-text-container
-  {:align-items    :center
-   :margin-left    4
-   :flex-direction :row})
-
-(def audio-tag-container
-  {:padding-left     2
-   :padding-vertical 2})
+    (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
+    (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))
 
 (def audio-tag-icon-container
   {:width            20
@@ -37,21 +17,91 @@
 
 (def audio-tag-icon-color colors/white)
 
-(defn audio-tag-text-color
-  [override-theme]
-  (colors/theme-colors colors/neutral-100 colors/white override-theme))
+(defn container
+  [{:keys [theme type size state blur? customization-color]}]
+  (let [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))
+        border-radius    (cond
+                           (not (#{:account :collectible} type)) 16
+                           (= size 24)                           8
+                           :else                                 10)
+        border-color     (colors/theme-colors
+                          (colors/custom-color customization-color 50)
+                          (colors/custom-color customization-color 60)
+                          theme)]
+    (cond-> {:padding          2
+             :flex-direction   :row
+             :align-items      :center
+             :height           size
+             :background-color background-color
+             :border-radius    border-radius}
+      (= state :selected) (assoc :height       (+ size 2)
+                                 :border-color border-color
+                                 :border-width 1))))
 
-(def community-tag
-  {:padding-vertical 2
-   :padding-left     2})
-
-(def community-tag-text-container
-  {:margin-left    4
-   :flex           1
+(defn tag-container
+  [size]
+  {:margin-right   (if (= size 24) 6 10)
    :flex-direction :row
    :align-items    :center})
 
-(defn community-tag-text
-  [override-theme]
-  {:margin-left 2
-   :color       (colors/theme-colors colors/neutral-100 colors/white override-theme)})
+(defn tag-spacing
+  [size]
+  {:margin-left (if (= size 24) 4 8)})
+
+(defn text
+  [theme]
+  {:color (colors/theme-colors colors/neutral-100 colors/white theme)})
+
+(defn circle-logo
+  [size]
+  (if (= size 24)
+    {:width 20 :height 20 :border-radius 10}
+    {:width 28 :height 28 :border-radius 14}))
+
+(defn rounded-logo
+  [size]
+  (if (= size 24)
+    {:width         20
+     :height        20
+     :border-radius 6}
+    {:width         28
+     :height        28
+     :border-radius 8}))
+
+(defn address
+  [size]
+  (if (= size 24)
+    {:margin-horizontal 6
+     :margin-vertical   1
+     :flex-direction    :row
+     :align-items       :center}
+    {:margin-horizontal 10
+     :margin-vertical   3
+     :flex-direction    :row
+     :align-items       :center}))
+
+(defn icon
+  [size]
+  (if (= size 24)
+    {:margin-horizontal 6
+     :margin-vertical   1
+     :flex-direction    :row
+     :align-items       :center}
+    {:margin-left     8
+     :margin-right    10
+     :margin-vertical 3
+     :flex-direction  :row
+     :align-items     :center}))
+
+(defn icon-spacing
+  [size]
+  (if (= size 24)
+    {:margin-left 4}
+    {:margin-left 2}))
+
+(def audio
+  {:margin-right   6
+   :flex-direction :row
+   :align-items    :center})

src/quo2/components/tags/context_tag/view.cljs

@@ -1,105 +1,212 @@
 (ns quo2.components.tags.context-tag.view
-  (:require [quo2.components.avatars.group-avatar.view :as group-avatar]
-            [quo2.components.avatars.user-avatar.style :as user-avatar-style]
+  (:require [quo2.components.avatars.account-avatar.view :as account-avatar]
+            [quo2.components.avatars.group-avatar.view :as group-avatar]
             [quo2.components.avatars.user-avatar.view :as user-avatar]
             [quo2.components.icon :as icons]
+            [quo2.components.list-items.preview-list :as preview-list]
             [quo2.components.markdown.text :as text]
             [quo2.components.tags.context-tag.style :as style]
+            [quo2.foundations.colors :as colors]
+            [quo2.theme :as quo.theme]
             [react-native.core :as rn]))
 
-(defn trim-public-key
+(defn- tag-skeleton
+  [{:keys [theme size text] :or {size 24}} logo-component]
+  [rn/view {:style (style/tag-container size)}
+   logo-component
+   [rn/view {:style (style/tag-spacing size)}
+    [text/text
+     {:style  (style/text theme)
+      :weight :medium
+      :size   (if (= size 24) :paragraph-2 :paragraph-1)}
+     text]]])
+
+(defn- communities-tag
+  [{:keys [theme size community-logo community-name blur? channel? channel-name]}]
+  (let [text-size (if (= size 24) :paragraph-2 :paragraph-1)
+        icon-size (if (= size 24) 16 20)]
+    [rn/view {:style (style/tag-container size)}
+     [rn/image {:style (style/circle-logo size) :source community-logo}]
+     [rn/view {:style (style/tag-spacing size)}
+      [text/text
+       {:style  (style/text theme)
+        :weight :medium
+        :size   text-size}
+       community-name]]
+     (when channel?
+       [:<>
+        [icons/icon :i/chevron-right
+         {:color (style/context-tag-icon-color theme blur?)
+          :size  icon-size}]
+        [text/text
+         {:style  (style/text theme)
+          :weight :medium
+          :size   text-size}
+         (str "# " channel-name)]])]))
+
+(defn- trim-public-key
   [pk]
-  (str (subs pk 0 6) "..." (subs pk (- (count pk) 3))))
+  (str (subs pk 0 5) "..." (subs pk (- (count pk) 3))))
 
-(defn base-tag
-  [{:keys [override-theme style blur?]} & children]
-  (into
-   [rn/view {:style (merge (style/base-tag override-theme blur?) style)}]
-   children))
-
-(defn group-avatar-tag
-  [label opts]
-  [base-tag
-   (-> opts
-       (select-keys [:override-theme :style :blur?])
-       (assoc-in [:style :padding-left] 3)
-       (assoc-in [:style :padding-vertical] 2))
-   [group-avatar/view opts]
+(defn- address-tag
+  [{:keys [theme size address]}]
+  [rn/view {:style (style/address size)}
    [text/text
-    {:weight :medium
-     :size   :paragraph-2
-     :style  (:text-style opts)}
-    (str " " label)]])
+    {:style  (style/text theme)
+     :weight :monospace ;; TODO: fix this style (issue #17009)
+     :size   (if (= size 24) :paragraph-2 :paragraph-1)}
+    (trim-public-key address)]])
 
-(defn public-key-tag
-  [params public-key]
-  [base-tag params
-   [text/text
-    {:weight :monospace
-     :size   :paragraph-2}
-    (trim-public-key public-key)]])
+(defn- icon-tag
+  [{:keys [theme size icon blur? context]}]
+  [rn/view {:style (style/icon size)}
+   [icons/icon icon
+    {:color (style/context-tag-icon-color theme blur?)
+     :size  (if (= size 24) 12 20)}]
+   [rn/view {:style (style/icon-spacing size)}
+    [text/text
+     {:style  (style/text theme)
+      :weight :medium
+      :size   (if (= size 24) :paragraph-2 :paragraph-1)}
+     context]]])
 
-(defn context-tag
-  [{:keys [text-style blur? no-avatar-placeholder? text-container-style ellipsize-text?]
-    :as   props}
-   photo
-   name
-   channel-name]
-  (let [text-props        {:weight          :medium
-                           :size            :paragraph-2
-                           :style           (assoc text-style :justify-content :center)
-                           :number-of-lines 1
-                           :ellipsize-mode  :tail}
-        empty-photo?      (nil? photo)
-        avatar-size       :xxs
-        avatar-outer-size (get-in user-avatar-style/sizes [avatar-size :outer])]
-    [base-tag (update-in props [:style :padding-left] #(or % 3))
-     (if (and empty-photo? no-avatar-placeholder?)
-       [rn/view {:style {:width avatar-outer-size}}]
-       [user-avatar/user-avatar
-        {:full-name         name
-         :profile-picture   photo
-         :size              avatar-size
-         :status-indicator? false}])
-     [rn/view {:style (or text-container-style style/context-tag-text-container)}
-      (if ellipsize-text?
-        [rn/view {:style {:flex 1}}
-         [text/text text-props name]]
-        [text/text text-props (str " " name)])
-      (when channel-name
-        [:<>
-         [icons/icon
-          :i/chevron-right
-          {:color (style/context-tag-icon-color blur?)
-           :size  16}]
-         [text/text text-props (str "# " channel-name)]])]]))
+(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
+           account-name emoji collectible collectible-name collectible-number duration]
+    :or   {customization-color :blue
+           type                :default
+           state               :default}
+    :as   props}]
+  [rn/view
+   {:style (style/container {:theme               theme
+                             :type                type
+                             :size                size
+                             :state               state
+                             :blur?               blur?
+                             :customization-color customization-color})}
+   (case type
+     :default
+     [tag-skeleton {:theme theme :size size :text full-name}
+      [user-avatar/user-avatar
+       {:full-name         full-name
+        :profile-picture   profile-picture
+        :size              (if (= size 24) :xxs 28)
+        :status-indicator? false}]]
 
-(defn user-avatar-tag
-  [params username photo]
-  [context-tag params photo username])
+     :multiuser
+     [preview-list/preview-list {:type :user :size 20}
+      users]
 
-(defn audio-tag
-  [duration params]
-  [base-tag (merge {:style style/audio-tag-container} params)
-   [rn/view {:style style/audio-tag-icon-container}
-    [icons/icon
-     :i/play
-     {:color style/audio-tag-icon-color
-      :size  12}]]
-   [text/text
-    {:weight :medium
-     :size   :paragraph-2
-     :style  {:margin-left 4
-              :color       (style/audio-tag-text-color (:override-theme params))}}
-    duration]])
+     :multinetwork ;; TODO: use multinetwork preview-list type when available (issue #17008)
+     [preview-list/preview-list {:type :user :size 20}
+      (map #(hash-map :profile-picture %) networks)]
 
-(defn community-tag
-  [avatar community-name {:keys [override-theme] :as params}]
-  [context-tag
-   (merge {:style                style/community-tag
-           :text-style           (style/community-tag-text override-theme)
-           :text-container-style style/community-tag-text-container
-           :ellipsize-text?      true}
-          params)
-   avatar
-   community-name])
+     :audio
+     [tag-skeleton {:theme theme :text (str duration)}
+      [rn/view {:style style/audio-tag-icon-container}
+       [icons/icon :i/play {:color style/audio-tag-icon-color :size 12}]]]
+
+     :group
+     [tag-skeleton {:theme theme :size size :text group-name}
+      [group-avatar/view
+       {:icon-name           :i/members
+        :size                (if (= size 24) :x-small :small)
+        :customization-color (colors/custom-color :purple 50)}]]
+
+     (:channel :community)
+     [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}]]
+
+     :network
+     [tag-skeleton {:theme theme :size size :text network-name}
+      [rn/image {:style (style/circle-logo size) :source network-logo}]]
+
+     :collectible
+     [tag-skeleton
+      {:theme theme
+       :size  size
+       :text  (str collectible-name " #" collectible-number)}
+      [rn/image {:style (style/rounded-logo size) :source collectible}]]
+
+     :account
+     [tag-skeleton {:theme theme :size size :text account-name}
+      [account-avatar/view {:emoji emoji :size (if (= size 24) 20 28)}]]
+
+     :address
+     [address-tag props]
+
+     :icon
+     [icon-tag props]
+
+     nil)])
+
+(def view
+  "Properties:
+  type, state, blur? & customization-color
+
+  Depending on the `type` selected, different properties are accepted:
+  - `:default` or `nil`:
+    - size
+    - profile-picture
+    - full-name
+
+  - `:multiuser`:
+    - users (vector of {:profile-picture pic, :full-name \"a name\"})
+
+  - `:group`
+    - size
+    - group-name
+
+  - `:community`
+      - size
+      - community-logo (valid rn/image :source value)
+      - community-name
+
+  - `:channel`
+    - size
+    - community-logo (valid rn/image :source value)
+    - community-name
+    - channel-name
+
+  - `:token`
+    - size
+    - token-logo (valid rn/image :source value)
+    - amount
+    - token-name
+
+  - `:network`
+    - size
+    - network-logo (valid rn/image :source value)
+    - network-name
+
+  - `:multinetworks`
+    - networks (vector of {:network-logo pic, :network-name \"a name\"})
+
+  - `:account`
+    - size
+    - account-name
+    - emoji (string containing an emoji)
+
+  - `:collectible`
+    - size
+    - collectible (valid rn/image :source value)
+    - collectible-name
+    - collectible-number
+
+  - `:address`
+    - size
+    - address (string)
+
+  - `:icon`
+    - size
+    - icon
+    - context (string)
+
+  - `:audio`
+    - duration (string)
+  "
+  (quo.theme/with-theme view-internal))

src/quo2/components/wallet/wallet_activity/component_spec.cljs

@@ -0,0 +1,19 @@
+(ns quo2.components.wallet.wallet-activity.component-spec
+  (:require [quo2.components.wallet.wallet-activity.view :as wallet-activity]
+            [test-helpers.component :as h]))
+
+(def props
+  {})
+
+(h/describe "Wallet activity"
+  (h/test "default render"
+    (h/render [wallet-activity/view props])
+    (h/is-truthy (h/query-by-label-text :wallet-activity)))
+
+  (h/test "Should call :on-press"
+    (let [on-press (h/mock-fn)]
+      (h/render [wallet-activity/view
+                 (assoc props :on-press on-press)])
+      (h/is-truthy (h/query-by-label-text :wallet-activity))
+      (h/fire-event :press (h/query-by-label-text :wallet-activity))
+      (h/was-called on-press))))

src/quo2/components/wallet/wallet_activity/style.cljs

@@ -0,0 +1,83 @@
+(ns quo2.components.wallet.wallet-activity.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn wallet-activity-container
+  [{:keys [pressed?
+           theme
+           blur?]}]
+  (merge
+   {:border-radius  16
+    :padding-top    8
+    :padding-left   12
+    :padding-right  12
+    :padding-bottom 12}
+   (when pressed?
+     {:background-color (if blur?
+                          colors/white-opa-5
+                          (colors/theme-colors colors/neutral-5 colors/neutral-90 theme))})))
+
+(def transaction-header-container
+  {:flex-direction :row
+   :align-items    :center})
+
+(defn transaction-header
+  [theme]
+  {:color        (colors/theme-colors colors/neutral-100 colors/white theme)
+   :margin-right 4})
+
+(defn transaction-counter
+  [theme]
+  {:color (colors/theme-colors colors/neutral-100 colors/white theme)})
+
+(defn transaction-counter-container
+  [theme blur?]
+  {:border-width       1
+   :border-radius      6
+   :margin-right       8
+   :padding-horizontal 2
+   :border-color       (if-not blur?
+                         (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
+                         colors/white-opa-10)})
+
+(defn timestamp
+  [theme blur?]
+  {:color (if-not blur?
+            (colors/theme-colors colors/neutral-40 colors/neutral-50 theme)
+            colors/white-opa-40)})
+
+(defn prop-text
+  [theme]
+  {:margin-right 4
+   :color        (colors/theme-colors colors/neutral-100 colors/white theme)})
+
+(def icon-container
+  {:width      32
+   :height     32
+
+   :margin-top 8})
+
+(def content-container
+  {:margin-left 8})
+
+(def content-line
+  {:flex-direction :row :margin-top 2 :align-items :center})
+
+(defn icon-hole-view
+  [theme blur?]
+  {:width           32
+   :height          32
+   :border-width    1
+   :border-color    (if-not blur?
+                      (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
+                      colors/white-opa-5)
+   :border-radius   16
+   :align-items     :center
+   :justify-content :center})
+
+(defn icon-color
+  [theme]
+  (colors/theme-colors colors/neutral-100 colors/white theme))
+
+(def icon-status-container
+  {:position :absolute :bottom 0 :right 0})
+

src/quo2/components/wallet/wallet_activity/view.cljs

@@ -0,0 +1,169 @@
+(ns quo2.components.wallet.wallet-activity.view
+  (:require [quo2.theme :as quo.theme]
+            [quo2.components.wallet.wallet-activity.style :as style]
+            [react-native.core :as rn]
+            [quo2.components.markdown.text :as text]
+            [quo2.components.icon :as icon]
+            [quo2.components.tags.context-tag.view :as context-tag]
+            [react-native.hole-view :as hole-view]
+            [utils.i18n :as i18n]
+            [reagent.core :as reagent]))
+
+(def transaction-translation
+  {:receive [i18n/label :t/receive]
+   :send    [i18n/label :t/send]
+   :swap    [i18n/label :t/swap]
+   :bridge  [i18n/label :t/bridge]
+   :buy     [i18n/label :t/buy]
+   :destroy [i18n/label :t/destroy]
+   :mint    [i18n/label :t/mint]})
+
+(def transaction-icon
+  {:receive :i/receive
+   :send    :i/send
+   :swap    :i/swap
+   :bridge  :i/bridge
+   :buy     :i/buy
+   :destroy :i/destroy
+   :mint    :i/mint})
+
+(def status-icon
+  {:pending   :i/pending-state
+   :confirmed :i/positive-state
+   :finalised :i/diamond-blue
+   :failed    :i/negative-state})
+
+(defn transaction-header
+  [{:keys [transaction
+           timestamp
+           counter
+           theme
+           blur?]
+    :or   {transaction :receive
+           counter     1}}]
+
+  [rn/view
+   {:style style/transaction-header-container}
+   [text/text
+    {:weight :semi-bold
+     :size   :paragraph-1
+     :style  (style/transaction-header theme)}
+    (transaction transaction-translation)]
+   (when (> counter 1)
+     [rn/view (style/transaction-counter-container theme blur?)
+      [text/text
+       {:weight :medium
+        :size   :label
+        :style  (style/transaction-counter theme)}
+       (str "x" counter "")]])
+   [rn/view
+    [text/text
+     {:weight :regular
+      :size   :label
+      :style  (style/timestamp theme blur?)}
+     timestamp]]])
+
+(defn transaction-icon-view
+  [{:keys [theme blur? transaction status]
+    :or   {transaction :receive
+           status      :pending}}]
+  [rn/view {:style style/icon-container}
+   [hole-view/hole-view
+    {:style (style/icon-hole-view theme blur?)
+     :holes [{:x            20
+              :y            20
+              :right        0
+              :width        12
+              :height       12
+              :borderRadius 6}]}
+    [icon/icon (transaction-icon transaction)
+     {:color (style/icon-color theme)}]]
+   [rn/view {:style style/icon-status-container}
+    [icon/icon (status-icon status)
+     {:size     12
+      :no-color :true}]]])
+
+(defn prop-text
+  [label theme]
+  [text/text
+   {:weight :regular
+    :size   :paragraph-2
+    :style  (style/prop-text theme)}
+   [i18n/label label]])
+
+(defn prop-tag
+  [props]
+  [rn/view {:style {:margin-right 4}}
+   [context-tag/view (merge {:size 24} props)]])
+
+(defn- view-internal
+  [_]
+  (let [pressed? (reagent/atom false)]
+    (fn
+      [{:keys [state theme blur?
+               on-press
+               first second third fourth
+               second-prefix third-prefix fourth-prefix]
+        :as   props}]
+      [rn/pressable
+       {:style               (style/wallet-activity-container {:pressed? @pressed?
+                                                               :theme    theme
+                                                               :blur?    blur?})
+        :accessibility-label :wallet-activity
+        :disabled            (= state :disabled)
+        :on-press            on-press
+        :on-press-in         (fn [] (reset! pressed? true))
+        :on-press-out        (fn [] (reset! pressed? false))}
+
+       [rn/view
+        {:style {:flex-direction :row}}
+        [transaction-icon-view props]
+        [rn/view ;content
+         {:style style/content-container}
+
+         [transaction-header props]
+
+         [rn/view {:style style/content-line}
+          (when first [prop-tag first])
+          (when second-prefix [prop-text second-prefix theme])
+          (when second [prop-tag second])]
+
+         [rn/view {:style style/content-line}
+          (when third-prefix [prop-text third-prefix theme])
+          (when third [prop-tag third])
+          (when fourth-prefix [prop-text fourth-prefix theme])
+          (when fourth [prop-tag fourth])]]]])))
+
+(def view
+  "Properties:
+      - :transaction - type of transaction`. Possible values:
+        - :receive
+        - :send
+        - :swap
+        - :bridge
+        - :buy
+        - :destroy
+        - :mint
+   
+      - :status - transaction status. Possible values:
+        - :pending
+        - :confirmed
+        - :finalised
+        - :failed
+   
+      - :counter - amount of transactions shown by instance of the component
+   
+      - :timestamp - when transaction occured (string)
+      - :blur?
+      
+      - :first - props for context tag component that will be first on the first line
+      - :second - props for context tag component that will be second on the first line
+      - :third - props for context tag component that will be first on the second line
+      - :fourth - props for context tag component that will be second on the second line
+   
+      - :second-prefix - translation keyword to be used with label before second context tag
+      - :third-prefix - translation keyword to be used with label before third context tag
+      - :fourth-prefix - translation keyword to be used with label before fourth context tag
+   
+  "
+  (quo.theme/with-theme view-internal))

src/quo2/core.cljs

@@ -114,7 +114,8 @@
     quo2.components.wallet.progress-bar.view
     quo2.components.wallet.summary-info.view
     quo2.components.wallet.token-input.view
-    quo2.components.wallet.wallet-overview.view))
+    quo2.components.wallet.wallet-overview.view
+    quo2.components.wallet.wallet-activity.view))
 
 (def separator quo2.components.common.separator.view/separator)
 
@@ -301,11 +302,8 @@
 (def permission-tag quo2.components.tags.permission-tag/tag)
 (def status-tag quo2.components.tags.status-tags/status-tag)
 (def token-tag quo2.components.tags.token-tag/tag)
-(def user-avatar-tag quo2.components.tags.context-tag.view/user-avatar-tag)
-(def context-tag quo2.components.tags.context-tag.view/context-tag)
-(def group-avatar-tag quo2.components.tags.context-tag.view/group-avatar-tag)
-(def audio-tag quo2.components.tags.context-tag.view/audio-tag)
-(def community-tag quo2.components.tags.context-tag.view/community-tag)
+
+(def context-tag quo2.components.tags.context-tag.view/view)
 
 ;;;; Title
 (def title quo2.components.text-combinations.title.view/title)
@@ -319,3 +317,4 @@
 (def summary-info quo2.components.wallet.summary-info.view/view)
 (def token-input quo2.components.wallet.token-input.view/view)
 (def wallet-overview quo2.components.wallet.wallet-overview.view/view)
+(def wallet-activity quo2.components.wallet.wallet-activity.view/view)

src/quo2/core_spec.cljs

@@ -59,4 +59,5 @@
     [quo2.components.wallet.progress-bar.component-spec]
     [quo2.components.wallet.summary-info.component-spec]
     [quo2.components.wallet.token-input.component-spec]
-    [quo2.components.wallet.wallet-overview.component-spec]))
+    [quo2.components.wallet.wallet-overview.component-spec]
+    [quo2.components.wallet.wallet-activity.component-spec]))

src/quo2/foundations/resources.cljs

@@ -28,3 +28,7 @@
   {:ethereum (js/require "../resources/images/tokens/mainnet/ETH-network.png")
    :optimism (js/require "../resources/images/tokens/mainnet/OP.png")
    :arbitrum (js/require "../resources/images/tokens/mainnet/ARB.png")})
+
+(defn get-network
+  [n]
+  (get networks n))

src/status_im/ui/screens/signing/views.cljs

@@ -101,7 +101,7 @@
       [react/nested-text
        {:style           {:color colors/gray}
         :ellipsize-mode  :middle
-        :number-of-lines 1} (i18n/label :t/to) " "
+        :number-of-lines 1} (i18n/label :t/To) " "
        [{:style {:color colors/black}} (displayed-name contact)]]
       [react/text {:style {:margin-top 6 :color colors/gray}}
        (str fee " " fee-display-symbol " " (string/lower-case (i18n/label :t/network-fee)))])]
@@ -497,9 +497,9 @@
             [react/view
              [network-item]
              [separator]])
-          [contact-item (i18n/label :t/from) from]
+          [contact-item (i18n/label :t/From) from]
           [separator]
-          [contact-item (i18n/label :t/to) contact]
+          [contact-item (i18n/label :t/To) contact]
           (when-not cancel?
             [separator])
           (when-not cancel?

src/status_im/ui/screens/wallet/send/views.cljs

@@ -138,7 +138,7 @@
      :align-items        :center
      :margin-vertical    16}]
    [quo/list-header
-    (i18n/label :t/from)]
+    (i18n/label :t/From)]
    [react/view {:flex-direction :row :flex 1 :align-items :center}
     [react/view {:flex 1}
      [render-account from nil ::commands/set-selected-account]]]
@@ -204,7 +204,7 @@
         [fiat-value amount-text token prices wallet-currency]
         [components/separator]
         [quo/list-header
-         (i18n/label :t/to)]
+         (i18n/label :t/To)]
         [react/view {:flex-direction :row :flex 1 :align-items :center}
          [react/view {:flex 1}
           [render-account from token :wallet.request/set-field]]]]]
@@ -280,12 +280,12 @@
           (when-not (or request? from-chat?)
             [set-max token])
           [components/separator]
-          [quo/list-header (i18n/label :t/from)]
+          [quo/list-header (i18n/label :t/From)]
           [react/view {:flex-direction :row :flex 1 :align-items :center}
            [react/view {:flex 1}
             [render-account from token :wallet.send/set-field]]]
           [quo/list-header
-           (i18n/label :t/to)]
+           (i18n/label :t/To)]
           [react/view {:flex-direction :row :flex 1 :align-items :center}
            [react/view {:flex 1}
             [render-contact to from-chat?]]]]]

src/status_im/ui/screens/wallet/transactions/views.cljs

@@ -245,13 +245,13 @@
   [react/view {:style styles/details-block}
    [details-list-row :t/block block]
    [details-list-row :t/hash hash]
-   [details-list-row :t/from
+   [details-list-row :t/From
     [{:accessibility-label (if from-wallet :sender-name-text :sender-address-text)}
      (or from-wallet from-contact from)]
     (when (or from-wallet from-contact)
       [{:accessibility-label :sender-address-text}
        from])]
-   [details-list-row :t/to
+   [details-list-row :t/To
     [{:accessibility-label (if to-wallet :recipient-name-text :recipient-address-text)}
      (or to-wallet to-contact to)]
     (when (or to-wallet to-contact)

src/status_im2/common/password_authentication/view.cljs

@@ -16,11 +16,11 @@
         [rn/view {:padding-horizontal 20}
          [quo/text {:size :heading-1 :weight :semi-bold}
           (i18n/label :t/enter-password)]
-         [quo/user-avatar-tag
-          {:size  :small
-           :style {:margin-top 8 :margin-bottom 20}}
-          (multiaccounts/displayed-name account)
-          (multiaccounts/displayed-photo account)]
+         [rn/view {:style {:margin-top 8 :margin-bottom 20}}
+          [quo/context-tag
+           {:size            24
+            :profile-picture (multiaccounts/displayed-photo account)
+            :full-name       (multiaccounts/displayed-name account)}]]
          [quo/input
           {:type           :password
            :label          (i18n/label :t/profile-password)

src/status_im2/contexts/communities/actions/generic_menu/style.cljs

@@ -12,6 +12,6 @@
    :align-items     :center
    :justify-content :space-between})
 
-(def context-tag
+(def community-tag
   {:margin-right :auto
    :margin-top   8})

src/status_im2/contexts/communities/actions/generic_menu/view.cljs

@@ -14,7 +14,10 @@
         :weight              :semi-bold
         :size                :heading-1}
        title]]
-     [quo/context-tag
-      {:style style/context-tag}
-      (:thumbnail images) name]
+     [rn/view {:style style/community-tag}
+      [quo/context-tag
+       {:type           :community
+        :size           24
+        :community-logo (:thumbnail images)
+        :community-name name}]]
      children]))

src/status_im2/contexts/communities/actions/request_to_join/view.cljs

@@ -37,11 +37,12 @@
               :weight              :semi-bold
               :size                :heading-1}
              (request-to-join-text open?)]]
-           [quo/context-tag
-            {:style
-             {:margin-right :auto
-              :margin-top   8}}
-            (:thumbnail images) name]
+           [rn/view {:style {:margin-right :auto :margin-top 8}}
+            [quo/context-tag
+             {:type           :community
+              :size           24
+              :community-logo (:thumbnail images)
+              :community-name name}]]
            [quo/text
             {:style               {:margin-top 24}
              :accessibility-label :communities-rules-title

src/status_im2/contexts/quo_preview/inputs/search_input.cljs

@@ -25,15 +25,21 @@
 
 (defn example-tags
   [blur?]
-  [[quo/context-tag {:blur? [blur?]}
-    (resources/get-mock-image :user-picture-male5)
-    "alisher.eth"]
-   [quo/context-tag {:blur? [blur?]}
-    (resources/get-mock-image :user-picture-male4)
-    "Pedro"]
-   [quo/context-tag {:blur? [blur?]}
-    (resources/get-mock-image :user-picture-female2)
-    "Freya Odinson"]])
+  [[quo/context-tag
+    {:blur?           blur?
+     :size            24
+     :profile-picture (resources/get-mock-image :user-picture-male5)
+     :full-name       "alisher.eth"}]
+   [quo/context-tag
+    {:blur?           blur?
+     :size            24
+     :profile-picture (resources/get-mock-image :user-picture-male4)
+     :full-name       "Pedro"}]
+   [quo/context-tag
+    {:blur?           blur?
+     :size            24
+     :profile-picture (resources/get-mock-image :user-picture-female2)
+     :full-name       "Freya Odinson"}]])
 
 (defn cool-preview
   []

src/status_im2/contexts/quo_preview/main.cljs

@@ -116,6 +116,7 @@
     [status-im2.contexts.quo-preview.wallet.summary-info :as summary-info]
     [status-im2.contexts.quo-preview.wallet.token-input :as token-input]
     [status-im2.contexts.quo-preview.wallet.wallet-overview :as wallet-overview]
+    [status-im2.contexts.quo-preview.wallet.wallet-activity :as wallet-activity]
     [utils.re-frame :as rf]))
 
 (def screens-categories
@@ -450,7 +451,10 @@
                         :component token-input/preview}
                        {:name      :wallet-overview
                         :options   {:topBar {:visible true}}
-                        :component wallet-overview/preview-wallet-overview}]
+                        :component wallet-overview/preview-wallet-overview}
+                       {:name      :wallet-activity
+                        :options   {:topBar {:visible true}}
+                        :component wallet-activity/preview-wallet-activity}]
    :keycard           [{:name      :keycard-component
                         :options   {:topBar {:visible true}}
                         :component keycard/preview-keycard}]})

src/status_im2/contexts/quo_preview/notifications/activity_logs.cljs

@@ -1,6 +1,7 @@
 (ns status-im2.contexts.quo-preview.notifications.activity-logs
-  (:require [quo2.core :as quo2]
+  (:require [quo2.core :as quo]
             [quo2.foundations.colors :as colors]
+            [quo2.theme :as quo.theme]
             [react-native.core :as rn]
             [reagent.core :as reagent]
             [status-im2.contexts.quo-preview.preview :as preview]
@@ -67,27 +68,20 @@
    status-tags/status-tags-options])
 
 (def basic-user-action
-  [[quo2/user-avatar-tag
-    {:color          :purple
-     :override-theme :dark
-     :size           :small
-     :style          {:background-color colors/white-opa-10}
-     :text-style     {:color colors/white}}
-    "Name"]
+  [[quo/context-tag
+    {:size      24
+     :full-name "Name"
+     :blur?     true}]
    "did something here."])
 
 (def complex-user-action
-  (let [tag-props {:color      :purple
-                   :size       :small
-                   :style      {:background-color colors/white-opa-10}
-                   :text-style {:color colors/white}}]
-    [[quo2/user-avatar-tag tag-props "Alice"]
-     "from"
-     [quo2/user-avatar-tag tag-props "Mainnet"]
-     "to"
-     [quo2/user-avatar-tag tag-props "Optimism"]
-     "on"
-     [quo2/user-avatar-tag tag-props "My savings"]]))
+  [[quo/context-tag {:size 24 :full-name "Alice" :blur? true}]
+   "from"
+   [quo/context-tag {:size 24 :full-name "Mainnet" :blur? true}]
+   "to"
+   [quo/context-tag {:size 24 :full-name "Optimism" :blur? true}]
+   "on"
+   [quo/context-tag {:size 24 :full-name "My savings" :blur? true}]])
 
 (def message-with-mention
   (let [common-text-style {:style {:color colors/white}
@@ -95,8 +89,8 @@
     {:body [rn/view
             {:flex           1
              :flex-direction :row}
-            [quo2/text common-text-style "Hello"]
-            [quo2/text
+            [quo/text common-text-style "Hello"]
+            [quo/text
              {:style {:background-color   colors/primary-50-opa-10
                       :border-radius      6
                       :color              colors/primary-50
@@ -104,7 +98,7 @@
                       :padding-horizontal 3
                       :size               :paragraph-1}}
              "@name"]
-            [quo2/text common-text-style "! How are you feeling?"]]}))
+            [quo/text common-text-style "! How are you feeling?"]]}))
 
 (def message-with-title
   {:body  "Your favorite color is Turquoise."
@@ -176,12 +170,13 @@
           {:flex    1
            :padding 16}
           [preview/customizer state descriptor]]
-         [rn/view
-          {:background-color colors/neutral-90
-           :flex-direction   :row
-           :justify-content  :center
-           :padding-vertical 60}
-          [quo2/activity-log props]]]))))
+         [quo.theme/provider {:theme :dark}
+          [rn/view
+           {:background-color colors/neutral-90
+            :flex-direction   :row
+            :justify-content  :center
+            :padding-vertical 60}
+           [quo/activity-log props]]]]))))
 
 (defn preview-activity-logs
   []

src/status_im2/contexts/quo_preview/tags/context_tags.cljs

@@ -1,173 +1,267 @@
 (ns status-im2.contexts.quo-preview.tags.context-tags
-  (:require [quo2.components.tags.context-tag.view :as quo2]
+  (:require [quo2.core :as quo]
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
             [reagent.core :as reagent]
-            [status-im.multiaccounts.core :as multiaccounts]
             [status-im2.common.resources :as resources]
             [status-im2.contexts.quo-preview.preview :as preview]))
 
-(def group-avatar-default-params
-  {:size  :small
-   :color :purple})
-
 (def example-pk
   "0x04fcf40c526b09ff9fb22f4a5dbd08490ef9b64af700870f8a0ba2133f4251d5607ed83cd9047b8c2796576bc83fa0de23a13a4dced07654b8ff137fe744047917")
-(def example-pk2
-  "0x04c178513eb741e8c4e50326b22baefa7d60a2f4eb81e328c4bbe0b441f87b2a014a5907a419f5897fc3c0493a0ff9db689a1999d6ca7fdc63119dd1981d0c7ccf")
-(def example-photo
-  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII")
-(def example-photo2
-  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAApgAAAKYB3X3/OAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAANCSURBVEiJtZZPbBtFFMZ/M7ubXdtdb1xSFyeilBapySVU8h8OoFaooFSqiihIVIpQBKci6KEg9Q6H9kovIHoCIVQJJCKE1ENFjnAgcaSGC6rEnxBwA04Tx43t2FnvDAfjkNibxgHxnWb2e/u992bee7tCa00YFsffekFY+nUzFtjW0LrvjRXrCDIAaPLlW0nHL0SsZtVoaF98mLrx3pdhOqLtYPHChahZcYYO7KvPFxvRl5XPp1sN3adWiD1ZAqD6XYK1b/dvE5IWryTt2udLFedwc1+9kLp+vbbpoDh+6TklxBeAi9TL0taeWpdmZzQDry0AcO+jQ12RyohqqoYoo8RDwJrU+qXkjWtfi8Xxt58BdQuwQs9qC/afLwCw8tnQbqYAPsgxE1S6F3EAIXux2oQFKm0ihMsOF71dHYx+f3NND68ghCu1YIoePPQN1pGRABkJ6Bus96CutRZMydTl+TvuiRW1m3n0eDl0vRPcEysqdXn+jsQPsrHMquGeXEaY4Yk4wxWcY5V/9scqOMOVUFthatyTy8QyqwZ+kDURKoMWxNKr2EeqVKcTNOajqKoBgOE28U4tdQl5p5bwCw7BWquaZSzAPlwjlithJtp3pTImSqQRrb2Z8PHGigD4RZuNX6JYj6wj7O4TFLbCO/Mn/m8R+h6rYSUb3ekokRY6f/YukArN979jcW+V/S8g0eT/N3VN3kTqWbQ428m9/8k0P/1aIhF36PccEl6EhOcAUCrXKZXXWS3XKd2vc/TRBG9O5ELC17MmWubD2nKhUKZa26Ba2+D3P+4/MNCFwg59oWVeYhkzgN/JDR8deKBoD7Y+ljEjGZ0sosXVTvbc6RHirr2reNy1OXd6pJsQ+gqjk8VWFYmHrwBzW/n+uMPFiRwHB2I7ih8ciHFxIkd/3Omk5tCDV1t+2nNu5sxxpDFNx+huNhVT3/zMDz8usXC3ddaHBj1GHj/As08fwTS7Kt1HBTmyN29vdwAw+/wbwLVOJ3uAD1wi/dUH7Qei66PfyuRj4Ik9is+hglfbkbfR3cnZm7chlUWLdwmprtCohX4HUtlOcQjLYCu+fzGJH2QRKvP3UNz8bWk1qMxjGTOMThZ3kvgLI5AzFfo379UAAAAASUVORK5CYII=")
 
-(def coinbase-community-image (resources/get-mock-image :coinbase))
+(def avatar-options
+  [{:key   nil
+    :value "Default avatar"}
+   {:key   (resources/mock-images :user-picture-male5)
+    :value "User pic male 5"}
+   {:key   (resources/mock-images :user-picture-male4)
+    :value "User pic male 4"}
+   {:key   (resources/mock-images :user-picture-female2)
+    :value "User pic female 2"}])
+
+(def size-descriptor
+  {:label   "Size"
+   :key     :size
+   :type    :select
+   :options [{:key   24
+              :value "24"}
+             {:key   32
+              :value "32"}]})
 
 (def main-descriptor
   [{:label   "Type"
     :key     :type
     :type    :select
-    :options [{:key   :public-key
-               :value "Public key"}
-              {:key   :avatar
-               :value "Avatar"}
-              {:key   :group-avatar
-               :value "Group avatar"}
-              {:key   :context-tag
-               :value "Context tag"}
-              {:key   :audio
-               :value "Audio"}
+    :options [{:key   :default
+               :value "Default"}
+              {:key   :multiuser
+               :value "Multiuser"}
+              {:key   :group
+               :value "Group"}
+              {:key   :channel
+               :value "Channel"}
               {:key   :community
-               :value "Community"}]}
-   {:label "Blur"
+               :value "Community"}
+              {:key   :token
+               :value "Token"}
+              {:key   :network
+               :value "Network"}
+              {:key   :multinetwork
+               :value "Multinetwork"}
+              {:key   :account
+               :value "Account"}
+              {:key   :collectible
+               :value "Collectible"}
+              {:key   :address
+               :value "Address"}
+              {:key   :icon
+               :value "Icon"}
+              {:key   :audio
+               :value "Audio"}]}
+   {:label "Blur?"
     :key   :blur?
-    :type  :boolean}])
-
-(def context-tag-descriptor
-  [{:label "Show avatar"
-    :key   :show-avatar?
     :type  :boolean}
-   {:label "Label"
-    :key   :label
+   {:label   "State"
+    :key     :state
+    :type    :select
+    :options [{:key   :default
+               :value "Default"}
+              {:key   :selected
+               :value "selected"}]}
+   {:label   "Customization color:"
+    :key     :customization-color
+    :type    :select
+    :options (map (fn [[color-kw _]]
+                    {:key   color-kw
+                     :value (name color-kw)})
+                  colors/customization)}])
+
+(def default-descriptor
+  [size-descriptor
+   {:label   "Profile picture"
+    :key     :profile-picture
+    :type    :select
+    :options avatar-options}
+   {:label "Full name"
+    :key   :full-name
+    :type  :text}])
+
+(def multiuser-descriptor
+  (let [users [(resources/mock-images :user-picture-male5)
+               (resources/mock-images :user-picture-male4)
+               nil
+               (resources/mock-images :user-picture-female2)
+               nil]]
+    [{:label   "users"
+      :key     :users
+      :type    :select
+      :options (map (fn [idx]
+                      {:key   (mapv (fn [picture idx-name]
+                                      {:profile-picture picture
+                                       :full-name       (str (inc idx-name))})
+                                    (take idx (cycle users))
+                                    (range))
+                       :value (str idx)})
+                    (range 1 10))}]))
+
+(def group-descriptor
+  [size-descriptor
+   {:label "Group"
+    :key   :group-name
+    :type  :text}])
+
+(def channel-descriptor
+  [size-descriptor
+   {:label "Community name"
+    :key   :community-name
     :type  :text}
    {:label "Channel name"
     :key   :channel-name
+    :type  :text}])
+
+(def community-descriptor
+  [size-descriptor
+   {:label "Community name"
+    :key   :community-name
+    :type  :text}])
+
+(def token-descriptor
+  [size-descriptor
+   {:label "Amount"
+    :key   :amount
     :type  :text}
-   {:label "Avatar placeholder"
-    :key   :no-avatar-placeholder?
-    :type  :boolean}])
+   {:label "Token name"
+    :key   :token-name
+    :type  :text}])
+
+(def network-descriptor
+  [size-descriptor
+   {:label "Network name"
+    :key   :network-name
+    :type  :text}])
+
+(def multinetwork-descriptor
+  (let [networks (cycle [(resources/mock-images :monkey) (resources/mock-images :diamond)])]
+    [{:label   "Networks"
+      :key     :networks
+      :type    :select
+      :options (map (fn [size]
+                      {:key   (take size networks)
+                       :value (str size)})
+                    (range 1 10))}]))
+
+(def account-descriptor
+  [size-descriptor
+   {:label "Account name"
+    :key   :account-name
+    :type  :text}
+   {:label   "Emoji"
+    :key     :emoji
+    :type    :select
+    :options [{:key "🐷" :value "🐷"}
+              {:key "🍇" :value "🍇"}
+              {:key "🐱" :value "🐱"}]}])
+
+(def collectible-descriptor
+  [size-descriptor
+   {:label "Collectible name"
+    :key   :collectible-name
+    :type  :text}
+   {:label "Collectible number"
+    :key   :collectible-number
+    :type  :text}])
+
+(def address-descriptor
+  [size-descriptor])
+
+(def icon-descriptor
+  [size-descriptor
+   {:label "Context"
+    :key   :context
+    :type  :text}
+   {:label   "Icon"
+    :key     :icon
+    :type    :select
+    :options [{:key :i/placeholder :value "Placeholder"}
+              {:key :i/add :value "Add"}
+              {:key :i/alert :value "Alert"}]}])
+
+(def audio-descriptor
+  [{:label "Duration"
+    :key   :duration
+    :type  :text}])
 
 (defn cool-preview
   []
-  (let [state (reagent/atom {:label                  "Name"
-                             :channel-name           "Channel"
-                             :type                   :group-avatar
-                             :duration               "00:32"
-                             :show-avatar?           true
-                             :no-avatar-placeholder? false})]
+  (let [state
+        (reagent/atom
+         {:label               "Name"
+          :size                32
+          :type                :group
+          :blur?               false
+          :state               :selected
+          :customization-color :army
+          :profile-picture     nil
+          :full-name           "Full Name"
+          :users               [{:profile-picture (resources/mock-images :user-picture-male5)
+                                 :full-name       "1"}
+                                {:profile-picture nil
+                                 :full-name       "3"}
+                                {:profile-picture (resources/mock-images :user-picture-male5)
+                                 :full-name       "2"}]
+          :group-name          "Group"
+          :community-logo      (resources/mock-images :coinbase)
+          :community-name      "Community"
+          :channel-name        "my channel"
+          :token-logo          (resources/mock-images :diamond)
+          :token-name          "ETH"
+          :amount              "10"
+          :network-logo        (resources/mock-images :monkey)
+          :network-name        "Network"
+          :networks            [(resources/mock-images :monkey)
+                                (resources/mock-images :diamond)]
+          :account-name        "Account name"
+          :emoji               "😝"
+          :collectible         (resources/mock-images :collectible)
+          :collectible-name    "Collectible"
+          :collectible-number  "123"
+          :address             example-pk
+          :icon                :i/placeholder
+          :context             "Context"
+          :duration            "00:32"})]
     (fn []
-      (let [contacts             {example-pk  {:public-key   example-pk
-                                               :primary-name "Automatic incompatible Coati"
-                                               :photo        example-photo}
-                                  example-pk2 {:public-key   example-pk2
-                                               :primary-name "Clearcut Flickering Rattlesnake"
-                                               :photo        example-photo2}}
-            contacts-public-keys (map (fn [{:keys [public-key]}]
-                                        {:key   public-key
-                                         :value (get-in contacts [public-key :primary-name])})
-                                      (vals contacts))
-            current-username     (if (seq (:contact @state))
-                                   (->> @state
-                                        :contact
-                                        contacts
-                                        multiaccounts/displayed-name)
-                                   "Please select a user")
-            descriptor           (cond
-                                   (= (:type @state) :context-tag)
-                                   (into main-descriptor context-tag-descriptor)
-
-                                   (= (:type @state) :group-avatar)
-                                   (conj main-descriptor
-                                         {:label "Label"
-                                          :key   :label
-                                          :type  :text})
-
-                                   (= (:type @state) :avatar)
-                                   (let [photo (-> @state :contact contacts :photo)]
-                                     (when-not (contains? @state :contacts)
-                                       (swap! state assoc :contacts contacts-public-keys))
-                                     (when-not (= (:photo @state)
-                                                  photo)
-                                       (swap! state assoc :photo photo))
-                                     (conj main-descriptor
-                                           {:label   "Contacts"
-                                            :key     :contact
-                                            :type    :select
-                                            :options contacts-public-keys}))
-
-                                   (= (:type @state) :community)
-                                   (conj main-descriptor
-                                         {:label "Community name"
-                                          :key   :label
-                                          :type  :text})
-
-                                   (= (:type @state) :audio)
-                                   (conj main-descriptor
-                                         {:label "Duration"
-                                          :key   :duration
-                                          :type  :text})
-
-                                   :else
-                                   main-descriptor)]
-        [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
-         [rn/view {:style {:padding-bottom 150}}
-          [rn/view {:style {:flex 1}}
-           [preview/customizer state descriptor]]
-          [rn/view {:style {:padding-vertical 60}}
-           [preview/blur-view
-            {:style                 {:flex              1
-                                     :margin-vertical   20
-                                     :margin-horizontal 40}
-             :show-blur-background? (:blur? @state)}
-            (case (:type @state)
-              :context-tag  [quo2/context-tag
-                             {:blur?                  (:blur? @state)
-                              :size                   :small
-                              :color                  :purple
-                              :no-avatar-placeholder? (:no-avatar-placeholder? @state)}
-                             (when (:show-avatar? @state)
-                               example-photo2)
-                             (:label @state)
-                             (:channel-name @state)]
-
-              :group-avatar [quo2/group-avatar-tag (:label @state)
-                             {:blur?               (:blur? @state)
-                              :size                :x-small
-                              :customization-color :purple}]
-
-              :public-key   [quo2/public-key-tag
-                             {:blur? (:blur? @state)
-                              :size  :small
-                              :color :purple}
-                             example-pk]
-
-              :avatar       [quo2/user-avatar-tag
-                             {:blur? (:blur? @state)
-                              :size  :small
-                              :color :purple}
-                             current-username (:photo @state)]
-
-              :audio        [quo2/audio-tag (:duration @state) {:blur? (:blur? @state)}]
-
-              :community    [quo2/community-tag
-                             coinbase-community-image
-                             (:label @state)
-                             {:blur? (:blur? @state)}])]]]]))))
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:style {:padding-bottom 150}}
+        [rn/view {:style {:flex 1}}
+         [preview/customizer state
+          (concat main-descriptor
+                  (case (:type @state)
+                    :default      default-descriptor
+                    :multiuser    multiuser-descriptor
+                    :group        group-descriptor
+                    :channel      channel-descriptor
+                    :community    community-descriptor
+                    :token        token-descriptor
+                    :network      network-descriptor
+                    :multinetwork multinetwork-descriptor
+                    :account      account-descriptor
+                    :collectible  collectible-descriptor
+                    :address      address-descriptor
+                    :icon         icon-descriptor
+                    :audio        audio-descriptor
+                    default-descriptor))]]
+        [rn/view {:style {:padding-vertical 60}}
+         [preview/blur-view
+          {:style                 {:flex              1
+                                   :margin-vertical   20
+                                   :margin-horizontal 40}
+           :show-blur-background? (:blur? @state)}
+          [quo/context-tag @state]]]]])))
 
 (defn preview-context-tags
   []
   [rn/view
-   {:style {:background-color (colors/theme-colors colors/white
-                                                   colors/neutral-95)
+   {:style {:background-color (colors/theme-colors colors/white colors/neutral-95)
             :flex             1}}
    [rn/flat-list
     {:style                        {:flex 1}

src/status_im2/contexts/quo_preview/wallet/wallet_activity.cljs

@@ -0,0 +1,241 @@
+(ns status-im2.contexts.quo-preview.wallet.wallet-activity
+  (:require [quo2.core :as quo]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
+            [reagent.core :as reagent]
+            [status-im2.common.resources :as resources]
+            [status-im2.contexts.quo-preview.preview :as preview]
+            [quo2.foundations.resources :as quo.resources]))
+
+(def asset-snt
+  {:size       24
+   :type       :token
+   :token-name "SNT"
+   :amount     1500
+   :token-logo (quo.resources/get-token :snt)})
+
+(def asset-dai
+  {:size       24
+   :type       :token
+   :token-name "DAI"
+   :amount     2400
+   :token-logo (quo.resources/get-token :dai)})
+
+(def asset-collectible
+  {:size               24
+   :type               :collectible
+   :collectible        (resources/mock-images :collectible)
+   :collectible-name   "Collectible"
+   :collectible-number "123"})
+
+(def trip-to-vegas
+  {:size         24
+   :type         :account
+   :account-name "Trip to Vegas"
+   :emoji        "🤑"})
+
+(def piggy-bank
+  {:size         24
+   :type         :account
+   :account-name "Piggy bank"
+   :emoji        "🐷"})
+
+(def aretha-gosling
+  {:size            24
+   :type            :default
+   :full-name       "Aretha Gosling"
+   :profile-picture (resources/mock-images :user-picture-female2)})
+
+(def james-bond
+  {:size            24
+   :type            :default
+   :full-name       "James Bond"
+   :profile-picture (resources/mock-images :user-picture-male4)})
+
+(def mainnet
+  {:size         24
+   :type         :network
+   :network-logo (quo.resources/get-network :ethereum)
+   :network-name "Mainnet"})
+
+(def optimism
+  {:size         24
+   :type         :network
+   :network-logo (quo.resources/get-network :optimism)
+   :network-name "Optimism"})
+
+(def arbitrum
+  {:size         24
+   :type         :network
+   :network-logo (quo.resources/get-network :arbitrum)
+   :network-name "Arbitrum"})
+
+(def multinetwork
+  {:size     24
+   :type     :multinetwork
+   :networks [(quo.resources/get-network :ethereum)
+              (quo.resources/get-network :arbitrum)
+              (quo.resources/get-network :optimism)]})
+
+(def moonpay
+  {:size         24
+   :type         :network
+   :network-logo (quo.resources/get-network :ethereum)
+   :network-name "Moonpay"})
+
+(def binance
+  {:size         24
+   :type         :network
+   :network-logo (quo.resources/get-network :ethereum)
+   :network-name "Binance"})
+
+(def context-tags
+  [{:key   asset-snt
+    :value "SNT"}
+   {:key   asset-dai
+    :value "UNK"}
+   {:key   asset-collectible
+    :value "Collectible"}
+   {:key   trip-to-vegas
+    :value "Account: Trip to Vegas"}
+   {:key   piggy-bank
+    :value "Account: Piggy bank"}
+   {:key   aretha-gosling
+    :value "Person: Aretha Gosling"}
+   {:key   james-bond
+    :value "Person: James Bond"}
+   {:key   mainnet
+    :value "Network: Mainnet"}
+   {:key   optimism
+    :value "Network: Optimism"}
+   {:key   arbitrum
+    :value "Network: Arbitrum"}
+   {:key   multinetwork
+    :value "Network: Multinetwork"}
+   {:key   moonpay
+    :value "Market: Moonpay"}
+   {:key   binance
+    :value "Market: Binance"}])
+
+(def prefixes
+  [{:key   :t/to
+    :value "To"}
+   {:key   :t/in
+    :value "In"}
+   {:key   :t/via
+    :value "Via"}
+   {:key   :t/from
+    :value "From"}
+   {:key   :t/on
+    :value "On"}
+   {:key   :t/at
+    :value "At"}])
+
+(def descriptor
+
+  (concat
+   [{:label   "Transaction"
+     :key     :transaction
+     :type    :select
+     :options [{:key   :receive
+                :value "Receive"}
+               {:key   :send
+                :value "Send"}
+               {:key   :swap
+                :value "Swap"}
+               {:key   :bridge
+                :value "Bridge"}
+               {:key   :buy
+                :value "Buy"}
+               {:key   :destroy
+                :value "Destroy"}
+               {:key   :mint
+                :value "Mint"}]}
+    {:label   "Status"
+     :key     :status
+     :type    :select
+     :options [{:key   :pending
+                :value "Pending"}
+               {:key   :confirmed
+                :value "Confirmed"}
+               {:key   :finalised
+                :value "Finalised"}
+               {:key   :failed
+                :value "Failed"}]}
+    {:label "Timestamp"
+     :key   :timestamp
+     :type  :text}
+    {:label   "Counter"
+     :key     :counter
+     :type    :select
+     :options [{:key   1
+                :value 1}
+               {:key   2
+                :value 2}
+               {:key   3
+                :value 3}]}
+
+    {:label   "Slot 1"
+     :key     :first
+     :type    :select
+     :options context-tags}
+    {:label   "Slot 2 prefix"
+     :key     :second-prefix
+     :type    :select
+     :options prefixes}
+    {:label   "Slot 2"
+     :key     :second
+     :type    :select
+     :options context-tags}
+    {:label   "Slot 3 prefix"
+     :key     :third-prefix
+     :type    :select
+     :options prefixes}
+    {:label   "Slot 3"
+     :key     :third
+     :type    :select
+     :options context-tags}
+    {:label   "Slot 4 prefix"
+     :key     :fourth-prefix
+     :type    :select
+     :options prefixes}
+    {:label   "Slot 4"
+     :key     :fourth
+     :type    :select
+     :options context-tags}]))
+
+(defn cool-preview
+  []
+  (let [state (reagent/atom {:transaction   :send
+                             :timestamp     "Today 22:20"
+                             :status        :pending
+                             :counter       1
+                             :first         asset-snt
+                             :second-prefix :t/from
+                             :second        piggy-bank
+                             :third-prefix  :t/to
+                             :third         aretha-gosling
+                             :fourth-prefix :t/via
+                             :fourth        mainnet})]
+    (fn []
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:padding-bottom 150}
+        [rn/view {:flex 1}
+         [preview/customizer state descriptor]]
+        [rn/view
+         {:padding-vertical 60
+          :flex-direction   :row
+          :justify-content  :center}
+         [quo/wallet-activity @state]]]])))
+
+(defn preview-wallet-activity
+  []
+  [rn/view
+   {:background-color (colors/theme-colors colors/white
+                                           colors/neutral-95)
+    :flex             1}
+   [rn/flat-list
+    {:flex                         1
+     :keyboard-should-persist-taps :always
+     :header                       [cool-preview]
+     :key-fn                       str}]])

src/status_im2/contexts/shell/activity_center/notification/admin/view.cljs

@@ -69,8 +69,11 @@
        :context             [[common/user-avatar-tag author]
                              (i18n/label :t/wants-to-join)
                              [quo/context-tag
-                              common/tag-params
-                              community-image community-name]]
+                              {:type           :community
+                               :size           24
+                               :blur?          true
+                               :community-logo community-image
+                               :community-name community-name}]]
        :items               (case membership-status
                               constants/activity-center-membership-status-accepted
                               [{:type    :status

src/status_im2/contexts/shell/activity_center/notification/common/view.cljs

@@ -1,30 +1,21 @@
 (ns status-im2.contexts.shell.activity-center.notification.common.view
   (:require [quo2.core :as quo]
+            [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
             [react-native.gesture :as gesture]
-            [quo2.foundations.colors :as colors]
             [status-im.multiaccounts.core :as multiaccounts]
             [status-im2.contexts.shell.activity-center.notification.common.style :as style]
             [utils.i18n :as i18n]
             [utils.re-frame :as rf]))
 
-(def tag-params
-  {:size                   :small
-   :customization-color    :blue
-   :style                  style/user-avatar-tag
-   :text-style             style/user-avatar-tag-text
-   :no-avatar-placeholder? true})
-
 (defn user-avatar-tag
   [user-id]
   (let [{:keys [primary-name] :as contact} (rf/sub [:contacts/contact-by-identity user-id])]
-    [quo/user-avatar-tag
-     {:color      :purple
-      :size       :small
-      :style      style/user-avatar-tag
-      :text-style style/user-avatar-tag-text}
-     primary-name
-     (multiaccounts/displayed-photo contact)]))
+    [quo/context-tag
+     {:blur?           true
+      :size            24
+      :full-name       primary-name
+      :profile-picture (multiaccounts/displayed-photo contact)}]))
 
 (defn- render-swipe-action
   [{:keys [active-swipeable

src/status_im2/contexts/shell/activity_center/notification/community_kicked/view.cljs

@@ -34,5 +34,9 @@
        :unread?             (not read)
        :context             [[quo/text {:style common-style/user-avatar-tag-text}
                               (i18n/label :t/community-kicked-body)]
-                             [quo/context-tag common/tag-params community-image
-                              community-name]]}]]))
+                             [quo/context-tag
+                              {:type           :community
+                               :size           24
+                               :blur?          true
+                               :community-logo community-image
+                               :community-name community-name}]]}]]))

src/status_im2/contexts/shell/activity_center/notification/community_request/view.cljs

@@ -22,8 +22,12 @@
   [community membership-status]
   (let [community-name        (:name community)
         community-image       (get-in community [:images :thumbnail :uri])
-        community-context-tag [quo/context-tag common/tag-params community-image
-                               community-name]]
+        community-context-tag [quo/context-tag
+                               {:type           :community
+                                :size           24
+                                :blur?          true
+                                :community-logo community-image
+                                :community-name community-name}]]
     (cond
       (= membership-status constants/activity-center-membership-status-idle)
       {:header-text (i18n/label :t/community-request-not-accepted)

src/status_im2/contexts/shell/activity_center/notification/membership/view.cljs

@@ -66,9 +66,11 @@
         :unread?             (not read)
         :context             [[common/user-avatar-tag author]
                               (i18n/label :t/added-you-to)
-                              [quo/group-avatar-tag chat-name
-                               {:size                :x-small
-                                :customization-color :purple}]]
+                              [quo/context-tag
+                               {:type       :group
+                                :blur?      true
+                                :size       24
+                                :group-name chat-name}]]
         :items               (when-not (or accepted dismissed)
                                [{:type                :button
                                  :subtype             :positive

src/status_im2/contexts/shell/activity_center/notification/mentions/view.cljs

@@ -59,9 +59,19 @@
         :timestamp           (datetime/timestamp->relative timestamp)
         :unread?             (not read)
         :context             [[common/user-avatar-tag author]
-                              [quo/text {:style style/tag-text} (string/lower-case (i18n/label :t/on))]
+                              [quo/text {:style style/tag-text}
+                               (string/lower-case (i18n/label :t/on))]
                               (if community-chat?
-                                [quo/context-tag common/tag-params community-image community-name
-                                 chat-name]
-                                [quo/group-avatar-tag chat-name common/tag-params])]
+                                [quo/context-tag
+                                 {:type           :channel
+                                  :blur?          true
+                                  :size           24
+                                  :community-logo community-image
+                                  :community-name community-name
+                                  :channel-name   chat-name}]
+                                [quo/context-tag
+                                 {:type       :group
+                                  :group-name chat-name
+                                  :blur?      true
+                                  :size       24}])]
         :message             {:body (message-body message)}}]]]))

src/status_im2/contexts/shell/activity_center/notification/reply/view.cljs

@@ -74,9 +74,18 @@
         :context             [[common/user-avatar-tag author]
                               [quo/text {:style style/lowercase-text} (i18n/label :t/on)]
                               (if community-chat?
-                                [quo/context-tag common/tag-params community-image community-name
-                                 chat-name]
-                                [quo/group-avatar-tag chat-name common/tag-params])]
+                                [quo/context-tag
+                                 {:type           :channel
+                                  :blur?          true
+                                  :size           24
+                                  :community-logo community-image
+                                  :community-name community-name
+                                  :channel-name   chat-name}]
+                                [quo/context-tag
+                                 {:type       :group
+                                  :group-name chat-name
+                                  :blur?      true
+                                  :size       24}])]
         :message             {:body-number-of-lines 1
                               :attachment           (cond
                                                       (= (:content-type message)

src/status_im2/contexts/shell/jump_to/components/switcher_cards/view.cljs

@@ -1,17 +1,17 @@
 (ns status-im2.contexts.shell.jump-to.components.switcher-cards.view
   (:require [clojure.string :as string]
-            [utils.i18n :as i18n]
             [quo2.core :as quo]
-            [utils.re-frame :as rf]
-            [status-im2.config :as config]
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
             [react-native.fast-image :as fast-image]
+            [status-im2.config :as config]
             [status-im2.constants :as constants]
+            [status-im2.contexts.chat.messages.resolver.message-resolver :as resolver]
             [status-im2.contexts.shell.jump-to.animation :as animation]
-            [status-im2.contexts.shell.jump-to.constants :as shell.constants]
             [status-im2.contexts.shell.jump-to.components.switcher-cards.style :as style]
-            [status-im2.contexts.chat.messages.resolver.message-resolver :as resolver]))
+            [status-im2.contexts.shell.jump-to.constants :as shell.constants]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
 
 (defn- channel-card
   [{:keys [emoji channel-name customization-color]}]
@@ -82,13 +82,14 @@
          :style  style/gif}]
 
        constants/content-type-audio
-       [quo/audio-tag data {:override-theme :dark}]
+       [quo/context-tag {:type :audio :duration data}]
 
        constants/content-type-community
-       [quo/community-tag
-        (:avatar data)
-        (:community-name data)
-        {:override-theme :dark}]
+       [quo/context-tag
+        {:type           :community
+         :size           24
+         :community-logo (:avatar data)
+         :community-name (:community-name data)}]
 
        (constants/content-type-link) ;; Components not available
        ;; Code snippet content type is not supported yet

src/status_im2/contexts/syncing/syncing_instructions/view.cljs

@@ -1,6 +1,5 @@
 (ns status-im2.contexts.syncing.syncing-instructions.view
   (:require [quo2.core :as quo]
-            [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
             [react-native.gesture :as gesture]
             [reagent.core :as reagent]
@@ -15,7 +14,8 @@
     [quo/text
      {:size            :paragraph-2
       :weight          :regular
-      :container-style style/list-text} (i18n/label value)]
+      :container-style style/list-text}
+     (i18n/label value)]
 
     :button-primary
     [quo/button
@@ -42,10 +42,10 @@
 
     :context-tag
     [quo/context-tag
-     {:override-theme :dark
-      :text-style     {:color colors/white}}
-     (resources/get-mock-image (:source value))
-     (i18n/label (:label value))]))
+     {:blur?           true
+      :size            24
+      :profile-picture (resources/get-mock-image (:source value))
+      :full-name       (i18n/label (:label value))}]))
 
 (defn- render-item
   [i list-item]

src/status_im2/subs/wallet/transactions.cljs

@@ -70,11 +70,11 @@
              (assoc acc
                     hash
                     (enrich-transaction transaction contacts native-currency))) ;;TODO this doesn't
-                                                                                ;;look good for
-                                                                                ;;performance, we
-                                                                                ;;need to calculate
-                                                                                ;;this only once for
-                                                                                ;;each transaction
+           ;;look good for
+           ;;performance, we
+           ;;need to calculate
+           ;;this only once for
+           ;;each transaction
            {}
            transactions)))
 
@@ -125,13 +125,13 @@
      (case type
        :inbound
        (assoc transaction
-              :label                       (i18n/label :t/from)
+              :label                       (i18n/label :t/From)
               :contact-accessibility-label :sender-text
               :address-accessibility-label :sender-address-text
               :contact                     from-contact
               :address                     from)
        (assoc transaction
-              :label                       (i18n/label :t/to)
+              :label                       (i18n/label :t/To)
               :contact-accessibility-label :recipient-name-text
               :address-accessibility-label :recipient-address-text
               :contact                     to-contact

translations/en.json

@@ -626,7 +626,8 @@
     "follow-your-interests": "Jump into a public chat and meet new people",
     "follow": "Follow",
     "free": "↓ Free",
-    "from": "From",
+    "From": "From",
+    "from": "from",
     "gas-limit": "Gas limit",
     "gas-price": "Gas price",
     "gas-used": "Gas used",
@@ -688,6 +689,7 @@
     "profile-pic-take": "Take photo",
     "profile-pic-pick": "Select from gallery",
     "profile-pic-remove": "Remove photo",
+    "in": "in",
     "in-contacts": "In contacts",
     "incoming": "Incoming",
     "incoming-transaction": "Incoming transaction",
@@ -1331,7 +1333,8 @@
     "this-will-take-few-seconds": "This will take a few seconds",
     "three-words-description": "You should see these 3 words before signing each transaction",
     "three-words-description-2": "If you see a different combination, cancel the transaction and sign out",
-    "to": "To",
+    "to": "to",
+    "To": "To",
     "to-block": "Block",
     "to-encrypt-enter-password": "To encrypt the account please enter your password",
     "to-see-this-message": "To see this message,",
@@ -2279,5 +2282,10 @@
     "collectibles": "Collectibles",
     "no-collectibles-description": "Don't be a bored ape",
     "no-activity": "No activity",
-    "no-activity-description": "C'mon do something..."
+    "no-activity-description": "C'mon do something...",
+    "bridge": "Bridge",
+    "buy": "Buy",
+    "destroy": "Destroy",
+    "mint": "Mint",
+    "via": "via"
 }