Use data from API to populate the buy assets sheet (#20078)

Remove unused code & resources

src/status_im/common/resources.cljs

@@ -128,15 +128,6 @@
    :user-picture-male4    (js/require "../resources/images/mock2/user_picture_male4.png")
    :user-picture-male5    (js/require "../resources/images/mock2/user_picture_male5.png")})
 
-(def services
-  {:latamex (js/require "../resources/images/services/Latamex.png")
-   :moonpay (js/require "../resources/images/services/Moonpay.png")
-   :ramp    (js/require "../resources/images/services/Ramp.png")})
-
-(defn get-service-image
-  [k]
-  (get services k))
-
 (defn get-mock-image
   [k]
   (get mock-images k))

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

@@ -1,43 +0,0 @@
-(ns status-im.contexts.wallet.common.temp
-  (:require
-    [react-native.core :as rn]
-    [status-im.common.resources :as status.resources]
-    [utils.i18n :as i18n]))
-
-(def buy-tokens-list
-  [{: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")}
-   {:title             "MoonPay"
-    :description       :text
-    :description-props {:text (i18n/label :t/moonpay-description)}
-    :tag               :context
-    :tag-props         {:icon    :i/fees
-                        :context "1% - 4.5%"}
-    :action            :arrow
-    :action-props      {:alignment :flex-start
-                        :icon      :i/external}
-    :image             :icon-avatar
-    :image-props       {:icon (status.resources/get-service-image :moonpay)}
-    :on-press          #(rn/open-url "https://moonpay.com")}
-   {:title             "Latamex"
-    :description       :text
-    :description-props {:text (i18n/label :t/latamex-description)}
-    :tag               :context
-    :tag-props         {:icon    :i/fees
-                        :context "1% - 1.7%"}
-    :action            :arrow
-    :action-props      {:alignment :flex-start
-                        :icon      :i/external}
-    :image             :icon-avatar
-    :image-props       {:icon (status.resources/get-service-image :latamex)}
-    :on-press          #(rn/open-url "https://latamex.com")}])

src/status_im/contexts/wallet/events.cljs

@@ -521,3 +521,20 @@
          activities           (cske/transform-keys transforms/->kebab-case-keyword activities)
          sorted-activities    (sort :timestamp activities)]
      {:db (assoc-in db [:wallet :activities] sorted-activities)})))
+
+(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))}))
+
+(rf/reg-event-fx
+ :wallet/get-crypto-on-ramps
+ (fn [_]
+   {:fx [[:json-rpc/call
+          [{:method     "wallet_getCryptoOnRamps"
+            :on-success [:wallet/get-crypto-on-ramps-success]
+            :on-error   #(log/info "failed to fetch crypto on ramps"
+                                   {:error %
+                                    :event :wallet/get-crypto-on-ramps})}]]]}))

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

@@ -1,15 +1,34 @@
 (ns status-im.contexts.wallet.sheets.buy-token.view
   (:require [quo.core :as quo]
             [react-native.core :as rn]
-            [status-im.contexts.wallet.common.temp :as temp]
             [status-im.contexts.wallet.sheets.buy-token.style :as style]
-            [utils.i18n :as i18n]))
+            [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)}])
 
 (defn view
   []
-  [:<>
+  (rn/use-mount (fn []
-   [quo/drawer-top {:title (i18n/label :t/buy-tokens)}]
+                  (rf/dispatch [:wallet/get-crypto-on-ramps])))
-   [rn/flat-list
+  (let [crypto-on-ramps (rf/sub [:wallet/crypto-on-ramps])]
-    {:data      temp/buy-tokens-list
+    [:<>
-     :style     style/list-container
+     [quo/drawer-top {:title (i18n/label :t/buy-assets)}]
-     :render-fn quo/settings-item}]])
+     [rn/flat-list
+      {:data      crypto-on-ramps
+       :style     style/list-container
+       :render-fn crypto-on-ramp-item}]]))

src/status_im/subs/root.cljs

@@ -16,6 +16,7 @@
     status-im.subs.settings
     status-im.subs.shell
     status-im.subs.wallet.activities
+    status-im.subs.wallet.buy
     status-im.subs.wallet.collectibles
     status-im.subs.wallet.networks
     status-im.subs.wallet.saved-addresses

src/status_im/subs/wallet/buy.cljs

@@ -0,0 +1,7 @@
+(ns status-im.subs.wallet.buy
+  (:require [re-frame.core :as rf]))
+
+(rf/reg-sub
+ :wallet/crypto-on-ramps
+ :<- [:wallet]
+ :-> :crypto-on-ramps)

translations/en.json

@@ -2466,10 +2466,7 @@
     "select-another-account": "Select another account",
     "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-tokens": "Buy Tokens",
+    "buy-assets": "Buy assets",
-    "ramp-description": "Global crypto to fiat flow.",
-    "moonpay-description": "The new standard for fiat to crypto, supports Apple Pay.",
-    "latamex-description": "Easily buy crypto in Argentina, Mexico and Brazil.",
     "account-info": "Account info",
     "network-preferences": "Network preferences",
     "network-preferences-desc-1": "Select which networks this address is happy to receive funds on",