One-time & recurrent tabs

src/status_im/contexts/wallet/common/temp.cljs

@@ -41,3 +41,17 @@
     :image             :icon-avatar
     :image-props       {:icon (status.resources/get-service-image :latamex)}
     :on-press          #(rn/open-url "https://latamex.com")}])
+
+(def buy-tokens-list-recurrent
+  [{:title             "Ramp"
+    :description       :text
+    :description-props {:text (i18n/label :t/ramp-description)}
+    :tag               :context
+    :tag-props         {:icon    :i/fees
+                        :context "0.49% - 2.9%"}
+    :action            :arrow
+    :action-props      {:alignment :flex-start
+                        :icon      :i/external}
+    :image             :icon-avatar
+    :image-props       {:icon (status.resources/get-service-image :ramp)}
+    :on-press          #(rn/open-url "https://ramp.com")}])

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

@@ -7,9 +7,22 @@
 
 (defn view
   []
-  [:<>
-   [quo/drawer-top {:title (i18n/label :t/buy-assets)}]
-   [rn/flat-list
-    {:data      temp/buy-tokens-list
-     :style     style/list-container
-     :render-fn quo/settings-item}]])
+  (let [[selected-tab set-selected-tab] (rn/use-state :one-time)]
+    [:<>
+     [quo/drawer-top {:title (i18n/label :t/buy-assets)}]
+     [quo/segmented-control
+      {:size            32
+       :container-style {:margin-horizontal 20
+                         :margin-top        8
+                         :margin-bottom     12}
+       :default-active  :one-time
+       :on-change       set-selected-tab
+       :data            [{:id    :one-time
+                          :label "One time"}
+                         {:id    :recurrent
+                          :label "Recurrent"}]}]
+     (print selected-tab)
+     [rn/flat-list
+      {:data      (if (= selected-tab :one-time) temp/buy-tokens-list temp/buy-tokens-list-recurrent)
+       :style     style/list-container
+       :render-fn quo/settings-item}]]))