Wallet: Buy Tokens drawer (#17654)

* Wallet: buy tokens drawer

src/quo/components/avatars/icon_avatar.cljs

@@ -22,17 +22,21 @@
   (let [{component-size :component icon-size :icon} (get sizes size)
         circle-color                                (colors/resolve-color color theme opacity)
         icon-color                                  (colors/resolve-color color theme)]
-    [rn/view
-     {:style {:width            component-size
-              :height           component-size
-              :border-radius    component-size
-              :border-width     (when border? 1)
-              :border-color     (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
-              :background-color circle-color
-              :justify-content  :center
-              :align-items      :center}}
-     [icons/icon icon
-      {:size  icon-size
-       :color icon-color}]]))
+    (if (keyword? icon)
+      [rn/view
+       {:style {:width            component-size
+                :height           component-size
+                :border-radius    component-size
+                :border-width     (when border? 1)
+                :border-color     (colors/theme-colors colors/neutral-20 colors/neutral-80 theme)
+                :background-color circle-color
+                :justify-content  :center
+                :align-items      :center}}
+       [icons/icon icon
+        {:size  icon-size
+         :color icon-color}]]
+      [rn/image
+       {:source icon
+        :style  {:width 32 :height 32}}])))
 
 (def icon-avatar (quo.theme/with-theme icon-avatar-internal))

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

@@ -12,6 +12,8 @@
 (defn left-sub-container
   [{:keys [tag description]}]
   {:flex-direction :row
+   :flex           1
+   :margin-right   12
    :align-items    (if (or tag description) :flex-start :center)})
 
 (defn sub-container
@@ -20,9 +22,10 @@
    :align-items    (or align-action :center)})
 
 (def left-container
-  {:margin-left     12
-   :height          "100%"
-   :justify-content :flex-start})
+  {:margin-horizontal 12
+   :flex              1
+   :height            "100%"
+   :justify-content   :flex-start})
 
 (defn image-container
   [image tag description]

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

@@ -91,7 +91,7 @@
   [{:keys [action action-props blur? theme]}]
   [rn/view {:style {:margin-left 12}}
    (case action
-     :arrow    [icon/icon :i/chevron-right (style/color blur? theme)]
+     :arrow    [icon/icon (or (:icon action-props) :i/chevron-right) (style/color blur? theme)]
      :button   [button/button
                 (merge action-props
                        {:type :outline

src/react_native/core.cljs

@@ -158,3 +158,7 @@
     (reagent/adapt-react-class
      (.requireNativeComponent ^js react-native "RNSelectableTextInput"))
     view))
+
+(def linking (.-Linking react-native))
+
+(defn open-url [link] (.openURL ^js linking link))

src/status_im2/common/resources.cljs

@@ -127,6 +127,15 @@
                    (js/require "../resources/videos2/generating_keys_02.mp4")
                    (js/require "../resources/videos2/generating_keys_03.mp4")]})
 
+(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_im2/contexts/wallet/account/view.cljs

@@ -40,6 +40,16 @@
      :render-fn (fn [account] [quo/account-item {:account-props account}])
      :style     {:margin-horizontal 8}}]])
 
+(defn buy-drawer
+  []
+  [:<>
+   [quo/drawer-top {:title (i18n/label :t/buy-tokens)}]
+   [rn/flat-list
+    {:data      temp/buy-tokens-list
+     :style     {:padding-horizontal 8
+                 :padding-bottom     8}
+     :render-fn quo/settings-item}]])
+
 (def ^:private networks-list
   [{:source (quo.resources/get-network :ethereum)}
    {:source (quo.resources/get-network :optimism)}
@@ -76,7 +86,9 @@
        [quo/account-overview temp/account-overview-state]
        [quo/wallet-graph {:time-frame :empty}]
        [quo/wallet-ctas
-        {:send-action #(rf/dispatch [:open-modal :wallet-select-address])}]
+        {:send-action #(rf/dispatch [:open-modal :wallet-select-address])
+         :buy-action  #(rf/dispatch [:show-bottom-sheet
+                                     {:content buy-drawer}])}]
        [quo/tabs
         {:style          style/tabs
          :size           32

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

@@ -260,3 +260,41 @@
    (status.resources/get-mock-image :collectible2)
    (status.resources/get-mock-image :collectible3)
    (status.resources/get-mock-image :collectible4)])
+
+(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")}])

translations/en.json

@@ -2350,5 +2350,9 @@
     "remove-account": "Remove account",
     "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"
+    "scan-an-account-qr-code": "Scan an account QR code",
+    "buy-tokens": "Buy Tokens",
+    "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."
 }