Buy assets drawer - one-time & recurrent tabs (#20063)

src/status_im/contexts/wallet/events.cljs

@@ -511,9 +511,11 @@
 (rf/reg-event-fx
  :wallet/get-crypto-on-ramps-success
  (fn [{:keys [db]} [data]]
-   {:db (assoc-in db
-         [:wallet :crypto-on-ramps]
-         (cske/transform-keys transforms/->kebab-case-keyword data))}))
+   (let [crypto-on-ramps (cske/transform-keys transforms/->kebab-case-keyword data)]
+     {:db (assoc-in db
+           [:wallet :crypto-on-ramps]
+           {:one-time  (remove #(string/blank? (:site-url %)) crypto-on-ramps)
+            :recurrent (remove #(string/blank? (:recurrent-site-url %)) crypto-on-ramps)})})))
 
 (rf/reg-event-fx
  :wallet/get-crypto-on-ramps

src/status_im/contexts/wallet/sheets/buy_token/style.cljs

@@ -1,5 +1,12 @@
 (ns status-im.contexts.wallet.sheets.buy-token.style)
 
-(def list-container
+(defn list-container
+  [min-height]
   {:padding-horizontal 8
+   :min-height         min-height
    :padding-bottom     8})
+
+(def tabs
+  {:margin-horizontal 20
+   :margin-top        8
+   :margin-bottom     12})

src/status_im/contexts/wallet/sheets/buy_token/view.cljs

@@ -1,34 +1,63 @@
 (ns status-im.contexts.wallet.sheets.buy-token.view
-  (:require [quo.core :as quo]
+  (:require [oops.core :as oops]
+            [quo.core :as quo]
             [react-native.core :as rn]
             [status-im.contexts.wallet.sheets.buy-token.style :as style]
+            [status-im.feature-flags :as ff]
             [utils.i18n :as i18n]
             [utils.re-frame :as rf]))
 
 (defn- crypto-on-ramp-item
-  [{:keys [name description fees logo-url site-url]}]
-  [quo/settings-item
-   {:title             name
-    :description       :text
-    :description-props {:text description}
-    :tag               :context
-    :tag-props         {:icon    :i/fees
-                        :context fees}
-    :action            :arrow
-    :action-props      {:alignment :flex-start
-                        :icon      :i/external}
-    :image             :icon-avatar
-    :image-props       {:icon logo-url}
-    :on-press          #(rn/open-url site-url)}])
+  [{:keys [name description fees logo-url site-url recurrent-site-url]} _ _ {:keys [tab]}]
+  (let [open-url (rn/use-callback (fn []
+                                    (rn/open-url (if (= tab :recurrent) recurrent-site-url site-url)))
+                                  [site-url recurrent-site-url tab])]
+    [quo/settings-item
+     {:title             name
+      :description       :text
+      :description-props {:text description}
+      :tag               :context
+      :tag-props         {:icon    :i/fees
+                          :context fees}
+      :action            :arrow
+      :action-props      {:alignment :flex-start
+                          :icon      :i/external}
+      :image             :icon-avatar
+      :image-props       {:icon logo-url}
+      :on-press          open-url}]))
+
+(def ^:private tabs
+  [{:id    :one-time
+    :label (i18n/label :t/one-time)}
+   {:id    :recurrent
+    :label (i18n/label :t/recurrent)}])
+
+(def ^:private initial-tab (:id (first tabs)))
 
 (defn view
   []
   (rn/use-mount (fn []
                   (rf/dispatch [:wallet/get-crypto-on-ramps])))
-  (let [crypto-on-ramps (rf/sub [:wallet/crypto-on-ramps])]
+  (let [crypto-on-ramps                 (rf/sub [:wallet/crypto-on-ramps])
+        [selected-tab set-selected-tab] (rn/use-state initial-tab)
+        [min-height set-min-height]     (rn/use-state 0)
+        on-layout                       (rn/use-callback
+                                         #(set-min-height
+                                           (oops/oget % :nativeEvent :layout :height)))]
     [:<>
      [quo/drawer-top {:title (i18n/label :t/buy-assets)}]
+     (when (ff/enabled? ::ff/wallet.buy-recurrent-assets)
+       [quo/segmented-control
+        {:size            32
+         :container-style style/tabs
+         :default-active  initial-tab
+         :on-change       set-selected-tab
+         :data            tabs}])
      [rn/flat-list
-      {:data      crypto-on-ramps
-       :style     style/list-container
-       :render-fn crypto-on-ramp-item}]]))
+      {:data        (if (and (ff/enabled? ::ff/wallet.buy-recurrent-assets) (= selected-tab :recurrent))
+                      (:recurrent crypto-on-ramps)
+                      (:one-time crypto-on-ramps))
+       :on-layout   on-layout
+       :style       (style/list-container min-height)
+       :render-data {:tab selected-tab}
+       :render-fn   crypto-on-ramp-item}]]))

src/status_im/feature_flags.cljs

@@ -22,6 +22,7 @@
    ::wallet.assets-modal-hide           (enabled-in-env? :FLAG_ASSETS_MODAL_HIDE)
    ::wallet.assets-modal-manage-tokens  (enabled-in-env? :FLAG_ASSETS_MODAL_MANAGE_TOKENS)
    ::wallet.bridge-token                (enabled-in-env? :FLAG_BRIDGE_TOKEN_ENABLED)
+   ::wallet.buy-recurrent-assets        (enabled-in-env? :FLAG_BUY_RECURRENT_ASSETS)
    ::wallet.contacts                    (enabled-in-env? :FLAG_CONTACTS_ENABLED)
    ::wallet.edit-derivation-path        (enabled-in-env? :FLAG_EDIT_DERIVATION_PATH)
    ::wallet.graph                       (enabled-in-env? :FLAG_GRAPH_ENABLED)

translations/en.json

@@ -2483,6 +2483,8 @@
     "oops-this-qr-does-not-contain-an-address": "Oops! This QR does not contain an address",
     "scan-an-account-qr-code": "Scan an account QR code",
     "buy-assets": "Buy assets",
+    "one-time": "One time",
+    "recurrent": "Recurrent",
     "account-info": "Account info",
     "network-preferences": "Network preferences",
     "network-preferences-desc-1": "Select which networks this address is happy to receive funds on",