fix(profile)_: Truncate profile name in settings screen (#20483)

After migrating from v1 to v2, some user names may be too long to fit in some
devices in the "Settings > Edit Profile > Name" setting. The solution was to
truncate in the UI the name to the max valid length in v2, which is 20
characters.

Other small improvements:

- Don't use entire Clojure maps as the :key in React. This is known to be slow
  because it's expensive for Clojure to generally transform a data structure
  into its string representation.
- Don't find the last item of a list using last and an equality between two
  maps. This will force each iteration to call last, which in turn will iterate
  over the entire list of items (we can think of the Clojure lazy seq as a
  linked list). Instead, we now cache the index outside the loop and do a number
  comparison.
- Don't pass entire props to style functions when not needed because
  destructuring has a cost. I wouldn't personally worry about this 99% of the
  time, but when there's only argument like in this PR where we were passing a
  single blur? argument, it's preferable to not use a map.

src/quo/components/settings/category/settings/view.cljs

@@ -7,20 +7,23 @@
     [react-native.core :as rn]))
 
 (defn settings-category
-  [{:keys [label data container-style] :as props}]
+  [{:keys [label data blur? container-style]}]
   (let [theme          (quo.theme/use-theme)
-        settings-item (filter identity data)]
+        settings-items (remove nil? data)
+        last-index     (dec (count settings-items))]
     [rn/view {:style (merge (style/container label) container-style)}
      (when label
        [text/text
         {:weight :medium
          :size   :paragraph-2
-         :style  (style/label props theme)}
+         :style  (style/label blur? theme)}
         label])
-     [rn/view {:style (style/settings-items props theme)}
-      (for [item settings-item]
-        ^{:key item}
+     [rn/view {:style (style/settings-items blur? theme)}
+      (map-indexed
+       (fn [index item]
+         ^{:key (str label (:title item))}
          [:<>
           [settings-item/view item]
-         (when-not (= item (last settings-item))
-           [rn/view {:style (style/settings-separator props theme)}])])]]))
+          (when-not (= last-index index)
+            [rn/view {:style (style/settings-separator blur? theme)}])])
+       settings-items)]]))

src/quo/components/settings/category/style.cljs

@@ -11,7 +11,7 @@
    :padding-bottom     8})
 
 (defn settings-items
-  [{:keys [blur?]} theme]
+  [blur? theme]
   {:border-radius    16
    :background-color (if blur?
                        colors/white-opa-5
@@ -22,7 +22,7 @@
                        (colors/theme-colors colors/neutral-10 colors/neutral-80 theme))})
 
 (defn label
-  [{:keys [blur?]} theme]
+  [blur? theme]
   {:margin-bottom 12
    :color         (if blur?
                     colors/white-opa-40
@@ -32,7 +32,7 @@
   {:margin-top 12})
 
 (defn settings-separator
-  [{:keys [blur?]} theme]
+  [blur? theme]
   {:height           1
    :background-color (if blur?
                        colors/white-opa-5

src/quo/components/settings/settings_item/view.cljs

@@ -116,7 +116,8 @@
     [rn/view {:style (style/left-container (:image props))}
      [text/text
       {:weight :medium
-       :style  {:color (when blur? colors/white)}} title]
+       :style  {:color (when blur? colors/white)}}
+      title]
      [description-component props]
      [tag-component props]]]
    [rn/view {:style (style/sub-container (:alignment action-props))}

src/status_im/contexts/profile/edit/list_items.cljs

@@ -3,6 +3,7 @@
             [quo.foundations.colors :as colors]
             [status-im.common.not-implemented :as not-implemented]
             [status-im.config :as config]
+            [status-im.constants :as constants]
             [status-im.contexts.profile.edit.style :as style]
             [status-im.contexts.profile.utils :as profile.utils]
             [utils.i18n :as i18n]
@@ -19,7 +20,7 @@
                :on-press        #(rf/dispatch [:open-modal :edit-name])
                :blur?           true
                :label           :text
-               :label-props     full-name
+               :label-props     (utils/truncate-str full-name constants/profile-name-max-length)
                :action          :arrow
                :container-style style/item-container}
               {:title           (i18n/label :t/bio)