From 039ad8d162ab6802f006b623888624457843a91d Mon Sep 17 00:00:00 2001 From: Ajay Sivan Date: Fri, 31 May 2024 18:09:18 +0530 Subject: [PATCH] Buy assets drawer - one-time & recurrent tabs (#20063) --- src/status_im/contexts/wallet/events.cljs | 8 ++- .../wallet/sheets/buy_token/style.cljs | 9 ++- .../wallet/sheets/buy_token/view.cljs | 67 +++++++++++++------ src/status_im/feature_flags.cljs | 1 + translations/en.json | 2 + 5 files changed, 64 insertions(+), 23 deletions(-) diff --git a/src/status_im/contexts/wallet/events.cljs b/src/status_im/contexts/wallet/events.cljs index cb72a38070..6daf9fe2bf 100644 --- a/src/status_im/contexts/wallet/events.cljs +++ b/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 diff --git a/src/status_im/contexts/wallet/sheets/buy_token/style.cljs b/src/status_im/contexts/wallet/sheets/buy_token/style.cljs index 913ae28bc3..966f59af0e 100644 --- a/src/status_im/contexts/wallet/sheets/buy_token/style.cljs +++ b/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}) diff --git a/src/status_im/contexts/wallet/sheets/buy_token/view.cljs b/src/status_im/contexts/wallet/sheets/buy_token/view.cljs index f77591c340..a1235c294b 100644 --- a/src/status_im/contexts/wallet/sheets/buy_token/view.cljs +++ b/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}]])) diff --git a/src/status_im/feature_flags.cljs b/src/status_im/feature_flags.cljs index 71d293caa9..5612e8f106 100644 --- a/src/status_im/feature_flags.cljs +++ b/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) diff --git a/translations/en.json b/translations/en.json index 2e698dbdf4..a0ac7ae660 100644 --- a/translations/en.json +++ b/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",