diff --git a/resources/images/icons2/12x12/fees@2x.png b/resources/images/icons2/12x12/fees@2x.png new file mode 100644 index 0000000000..0fbc6a0693 Binary files /dev/null and b/resources/images/icons2/12x12/fees@2x.png differ diff --git a/resources/images/icons2/12x12/fees@3x.png b/resources/images/icons2/12x12/fees@3x.png new file mode 100644 index 0000000000..b617a6357e Binary files /dev/null and b/resources/images/icons2/12x12/fees@3x.png differ diff --git a/resources/images/services/Latamex@2x.png b/resources/images/services/Latamex@2x.png new file mode 100644 index 0000000000..f1c5b04485 Binary files /dev/null and b/resources/images/services/Latamex@2x.png differ diff --git a/resources/images/services/Latamex@3x.png b/resources/images/services/Latamex@3x.png new file mode 100644 index 0000000000..13ebdfe971 Binary files /dev/null and b/resources/images/services/Latamex@3x.png differ diff --git a/resources/images/services/Moonpay@2x.png b/resources/images/services/Moonpay@2x.png new file mode 100644 index 0000000000..96d9037e58 Binary files /dev/null and b/resources/images/services/Moonpay@2x.png differ diff --git a/resources/images/services/Moonpay@3x.png b/resources/images/services/Moonpay@3x.png new file mode 100644 index 0000000000..ad7b5e2b9c Binary files /dev/null and b/resources/images/services/Moonpay@3x.png differ diff --git a/resources/images/services/Ramp@2x.png b/resources/images/services/Ramp@2x.png new file mode 100644 index 0000000000..c13b29e7c0 Binary files /dev/null and b/resources/images/services/Ramp@2x.png differ diff --git a/resources/images/services/Ramp@3x.png b/resources/images/services/Ramp@3x.png new file mode 100644 index 0000000000..98e98b2d57 Binary files /dev/null and b/resources/images/services/Ramp@3x.png differ diff --git a/src/quo/components/avatars/icon_avatar.cljs b/src/quo/components/avatars/icon_avatar.cljs index 124e020def..1473ebeb0f 100644 --- a/src/quo/components/avatars/icon_avatar.cljs +++ b/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)) diff --git a/src/quo/components/settings/settings_item/style.cljs b/src/quo/components/settings/settings_item/style.cljs index 9452254af8..f61864949c 100644 --- a/src/quo/components/settings/settings_item/style.cljs +++ b/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] diff --git a/src/quo/components/settings/settings_item/view.cljs b/src/quo/components/settings/settings_item/view.cljs index c622991bec..2d65079974 100644 --- a/src/quo/components/settings/settings_item/view.cljs +++ b/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 diff --git a/src/react_native/core.cljs b/src/react_native/core.cljs index ef0046192d..55bb246f32 100644 --- a/src/react_native/core.cljs +++ b/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)) diff --git a/src/status_im2/common/resources.cljs b/src/status_im2/common/resources.cljs index f5aee0a35a..6c5364b455 100644 --- a/src/status_im2/common/resources.cljs +++ b/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)) diff --git a/src/status_im2/contexts/wallet/account/view.cljs b/src/status_im2/contexts/wallet/account/view.cljs index deacd21333..6d7ced1046 100644 --- a/src/status_im2/contexts/wallet/account/view.cljs +++ b/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 diff --git a/src/status_im2/contexts/wallet/common/temp.cljs b/src/status_im2/contexts/wallet/common/temp.cljs index 0eca7d2392..c4d2a04480 100644 --- a/src/status_im2/contexts/wallet/common/temp.cljs +++ b/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")}]) diff --git a/translations/en.json b/translations/en.json index 720539d496..e3bcbed843 100644 --- a/translations/en.json +++ b/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." }