From ab1fd43f28f39dfb2690dbf0e924c3752911fab1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ulises=20Manuel=20C=C3=A1rdenas?=
 <90291778+ulisesmac@users.noreply.github.com>
Date: Wed, 18 Jan 2023 12:00:47 -0600
Subject: [PATCH] Add Collectible ui component (#14803)

---
 resources/images/mock/collectible.png         | Bin 0 -> 14231 bytes
 .../components/profile/collectible/style.cljs |  68 ++++++++++++
 .../components/profile/collectible/view.cljs  |  97 ++++++++++++++++++
 src/status_im2/contexts/quo_preview/main.cljs |   6 +-
 .../quo_preview/profile/collectible.cljs      |  47 +++++++++
 5 files changed, 217 insertions(+), 1 deletion(-)
 create mode 100644 resources/images/mock/collectible.png
 create mode 100644 src/quo2/components/profile/collectible/style.cljs
 create mode 100644 src/quo2/components/profile/collectible/view.cljs
 create mode 100644 src/status_im2/contexts/quo_preview/profile/collectible.cljs

diff --git a/resources/images/mock/collectible.png b/resources/images/mock/collectible.png
new file mode 100644
index 0000000000000000000000000000000000000000..c22b21c6b25f3b6c1fe2b63c81a3dc1bc7357fe6
GIT binary patch
literal 14231
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

literal 0
HcmV?d00001

diff --git a/src/quo2/components/profile/collectible/style.cljs b/src/quo2/components/profile/collectible/style.cljs
new file mode 100644
index 0000000000..cb20f0b7fe
--- /dev/null
+++ b/src/quo2/components/profile/collectible/style.cljs
@@ -0,0 +1,68 @@
+(ns quo2.components.profile.collectible.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def tile-style-by-size
+  {:xl {:width         160
+        :height        160
+        :border-radius 12}
+   :lg {:width         104
+        :height        104
+        :border-radius 10}
+   :md {:width         76
+        :height        76
+        :border-radius 10}
+   :sm {:width         48
+        :height        48
+        :border-radius 8}
+   :xs {:width         36
+        :height        36
+        :border-radius 8}})
+
+(def tile-outer-container
+  {:width   176
+   :height  176
+   :padding 8})
+
+(def tile-inner-container
+  {:position :relative
+   :flex     1})
+
+(def tile-sub-container
+  {:position :absolute
+   :width    76
+   :height   76
+   :bottom   0
+   :right    0})
+
+(def top-left
+  {:position :absolute
+   :top      0
+   :left     0})
+
+(def top-right
+  {:position :absolute
+   :top      0
+   :right    0})
+
+(def bottom-left
+  {:position :absolute
+   :bottom   0
+   :left     0})
+
+(def bottom-right
+  {:position :absolute
+   :bottom   0
+   :right    0})
+
+(defn remaining-tiles
+  []
+  (let [bg-color  (colors/theme-colors colors/neutral-20 colors/neutral-80)
+        tile-size (tile-style-by-size :xs)]
+    (assoc tile-size
+           :justify-content  :center
+           :align-items      :center
+           :background-color bg-color)))
+
+(defn remaining-tiles-text
+  []
+  {:color (colors/theme-colors colors/neutral-60 colors/neutral-40)})
diff --git a/src/quo2/components/profile/collectible/view.cljs b/src/quo2/components/profile/collectible/view.cljs
new file mode 100644
index 0000000000..219e4afe80
--- /dev/null
+++ b/src/quo2/components/profile/collectible/view.cljs
@@ -0,0 +1,97 @@
+(ns quo2.components.profile.collectible.view
+  (:require [quo2.components.markdown.text :as text]
+            [quo2.components.profile.collectible.style :as style]
+            [react-native.core :as rn]))
+
+(defn remaining-tiles
+  [amount]
+  [rn/view {:style (merge style/bottom-right (style/remaining-tiles))}
+   [text/text
+    {:style  (style/remaining-tiles-text)
+     :size   :paragraph-2
+     :weight :medium}
+    (str "+" amount)]])
+
+(defn tile
+  [{:keys [style resource size]}]
+  (let [source (if (string? resource) {:uri resource} resource)]
+    [rn/view {:style style}
+     [rn/image
+      {:style  (style/tile-style-by-size size)
+       :source source}]]))
+
+(defn two-tiles
+  [{:keys [images size]}]
+  [:<>
+   [tile
+    {:style    style/top-left
+     :size     size
+     :resource (first images)}]
+   [tile
+    {:style    style/bottom-right
+     :size     size
+     :resource (second images)}]])
+
+(defn three-tiles
+  [{:keys [tiles size]}]
+  (let [[image-1 image-2 image-3 & _] tiles]
+    [:<>
+     [tile
+      {:style    style/top-left
+       :size     size
+       :resource image-1}]
+     [tile
+      {:style    style/top-right
+       :size     size
+       :resource image-2}]
+     [tile
+      {:style    style/bottom-left
+       :size     size
+       :resource image-3}]]))
+
+(defn tile-container
+  [{:keys [images]}]
+  (let [num-images (count images)]
+    (case num-images
+      1 [tile
+         {:resource (first images)
+          :size     :xl}]
+      2 [two-tiles
+         {:images images
+          :size   :lg}]
+      3 [three-tiles
+         {:tiles images
+          :size  :md}]
+      (let [[first-three-images remaining-images] (split-at 3 images)]
+        [:<>
+         [three-tiles {:tiles first-three-images :size :md}]
+         [rn/view {:style style/tile-sub-container}
+          (case num-images
+            4 [tile
+               {:resource (nth images 3 nil)
+                :size     :md}]
+            5 [two-tiles
+               {:images (take 2 remaining-images)
+                :size   :sm}]
+            6 [three-tiles
+               {:tiles (take 3 remaining-images)
+                :size  :xs}]
+            7 [:<>
+               [three-tiles
+                {:tiles (take 3 remaining-images)
+                 :size  :xs}]
+               [tile
+                {:style    style/bottom-right
+                 :size     :xs
+                 :resource (nth remaining-images 3 nil)}]]
+            [:<>
+             [three-tiles
+              {:tiles (take 3 remaining-images)
+               :size  :xs}]
+             [remaining-tiles (- (count remaining-images) 3)]])]]))))
+
+(defn collectible
+  [{:keys [images]}]
+  [rn/view {:style style/tile-outer-container}
+   [rn/view {:style style/tile-inner-container}
+    [tile-container {:images images}]]])
diff --git a/src/status_im2/contexts/quo_preview/main.cljs b/src/status_im2/contexts/quo_preview/main.cljs
index 42fe1368bc..63b1eae795 100644
--- a/src/status_im2/contexts/quo_preview/main.cljs
+++ b/src/status_im2/contexts/quo_preview/main.cljs
@@ -45,6 +45,7 @@
    [status-im2.contexts.quo-preview.notifications.activity-logs :as activity-logs]
    [status-im2.contexts.quo-preview.notifications.toast :as toast]
    [status-im2.contexts.quo-preview.posts-and-attachments.messages-skeleton :as messages-skeleton]
+   [status-im2.contexts.quo-preview.profile.collectible :as collectible]
    [status-im2.contexts.quo-preview.profile.profile-card :as profile-card]
    [status-im2.contexts.quo-preview.reactions.react :as react]
    [status-im2.contexts.quo-preview.record-audio.record-audio :as record-audio]
@@ -178,7 +179,10 @@
                             :component messages-skeleton/preview-messages-skeleton}]
    :profile               [{:name      :profile-card
                             :insets    {:top false}
-                            :component profile-card/preview-profile-card}]
+                            :component profile-card/preview-profile-card}
+                           {:name      :collectible
+                            :insets    {:top false}
+                            :component collectible/preview-collectible}]
    :reactions             [{:name      :react
                             :insets    {:top false}
                             :component react/preview-react}]
diff --git a/src/status_im2/contexts/quo_preview/profile/collectible.cljs b/src/status_im2/contexts/quo_preview/profile/collectible.cljs
new file mode 100644
index 0000000000..1b9dd4de5d
--- /dev/null
+++ b/src/status_im2/contexts/quo_preview/profile/collectible.cljs
@@ -0,0 +1,47 @@
+(ns status-im2.contexts.quo-preview.profile.collectible
+  (:require
+   [quo2.components.profile.collectible.view :as quo]
+   [react-native.core :as rn]
+   [reagent.core :as reagent]
+   [status-im2.contexts.quo-preview.preview :as preview]))
+
+(defonce test-image (js/require "../resources/images/mock/collectible.png"))
+(def test-images (repeat 10 test-image))
+
+(def descriptor
+  [{:label   "Number of images"
+    :key     :num-images
+    :type    :select
+    :options (map (fn [n]
+                    {:key n :value (str n " images")})
+                  (range 1 (inc (count test-images))))}
+   {:label "Random order of images"
+    :key   :shuffle-images
+    :type  :boolean}])
+
+(defn cool-preview
+  []
+  (let [state (reagent/atom {:num-images 1 :shuffle-images false})]
+    (fn []
+      (let [images-to-show (cond->> test-images
+                                    (:shuffle-images @state)
+                                    (shuffle)
+                                    :always
+                                    (take (:num-images @state)))]
+        [rn/view
+         {:margin-bottom 50
+          :padding       16}
+         [preview/customizer state descriptor]
+         [rn/view
+          {:padding-vertical 100
+           :align-items      :center}
+          [quo/collectible {:images images-to-show}]]]))))
+
+(defn preview-collectible
+  []
+  [rn/view {:style {:flex 1}}
+   [rn/flat-list
+    {:flex                         1
+     :keyboard-should-persist-taps :always
+     :header                       [cool-preview]
+     :key-fn                       str}]])