Enhance the dapp-avatar component (#20392)

src/quo/components/avatars/dapp_avatar/style.cljs

@@ -1,23 +1,59 @@
 (ns quo.components.avatars.dapp-avatar.style)
 
-(def ^:const size 32)
+(defn- size->int
+  [size]
+  (case size
+    :size-32 32
+    :size-64 64
+    32))
 
-(def container
-  {:height size
-   :width  size})
+(defn container
+  [size]
+  (let [container-size (size->int size)]
+    {:height container-size
+     :width  container-size}))
 
-(def hole-view
-  {:width  size
-   :height size})
+(defn hole-view
+  [size]
+  (let [container-size (size->int size)]
+    {:width  container-size
+     :height container-size}))
 
-(def context
-  {:width         16
-   :height        16
-   :border-radius 8
-   :position      :absolute
-   :right         -4
-   :bottom        -4})
+(defn context
+  [size]
+  (let [context-size (case size
+                       :size-32 16
+                       :size-64 20
+                       20)
+        offset       (case size
+                       :size-32 -4
+                       :size-64 0
+                       -4)]
+    {:width         context-size
+     :height        context-size
+     :border-radius (/ context-size 2)
+     :position      :absolute
+     :right         offset
+     :bottom        offset}))
 
-(def image
-  {:width  size
-   :height size})
+(defn context-hole
+  [size]
+  (let [context-hole-size (case size
+                            :size-32 18
+                            :size-64 24
+                            18)
+        offset            (case size
+                            :size-32 19
+                            :size-64 42
+                            19)]
+    {:x            offset
+     :y            offset
+     :width        context-hole-size
+     :height       context-hole-size
+     :borderRadius (/ context-hole-size 2)}))
+
+(defn image
+  [size]
+  (let [container-size (size->int size)]
+    {:width  container-size
+     :height container-size}))

src/quo/components/avatars/dapp_avatar/view.cljs

@@ -11,32 +11,30 @@
     [:props
      [:map {:closed true}
       [:context? {:optional true} [:maybe :boolean]]
+      [:size {:optional true} [:maybe [:enum :size-32 :size-64]]]
       [:image :schema.common/image-source]
       [:network-image {:optional true} [:maybe :schema.common/image-source]]
       [:container-style {:optional true} [:maybe :map]]]]]
    :any])
 
 (defn- view-internal
-  [{:keys [context? image network-image container-style]}]
+  [{:keys [context? size image network-image container-style]}]
   [rn/view
-   {:style               (merge style/container container-style)
+   {:style               (-> (style/container size)
+                             (merge container-style))
     :accessibility-label :dapp-avatar}
    [hole-view/hole-view
     (cond-> {:holes (if context?
-                      [{:x            19
-                        :y            19
-                        :width        18
-                        :height       18
-                        :borderRadius 9}]
+                      [(style/context-hole size)]
                       [])
-             :style style/hole-view}
+             :style (style/hole-view size)}
       platform/android? (assoc :key context?))
     [rn/image
      {:source image
-      :style  style/image}]]
+      :style  (style/image size)}]]
    (when context?
      [rn/image
       {:source network-image
-       :style  style/context}])])
+       :style  (style/context size)}])])
 
 (def view (schema/instrument #'view-internal ?schema))

src/status_im/contexts/preview/quo/avatars/dapp_avatar.cljs

@@ -7,11 +7,16 @@
 
 (def descriptor
   [{:type :boolean
-    :key  :context?}])
+    :key  :context?}
+   {:type    :select
+    :key     :size
+    :options [{:key :size-32}
+              {:key :size-64}]}])
 
 (defn view
   []
-  (let [[state set-state] (rn/use-state {:context? false})]
+  (let [[state set-state] (rn/use-state {:context? false
+                                         :size     :size-32})]
     [preview/preview-container
      {:state      state
       :set-state  set-state