feat(swap): show and link to provider terms and conditions (#21311)

Signed-off-by: Brian Sztamfater <brian@status.im>

src/status_im/constants.cljs

@@ -595,7 +595,7 @@
 (def ^:const max-slippage-decimal-places 2)
 (def ^:const swap-provider-paraswap
   {:name                     :paraswap
-   :full-name                "Paraswap"
+   :full-name                "ParaSwap"
    :color                    :blue
    :contract-address         "0xdef171fe48cf0115b1d80b88dc8eab59176fee57"
    :terms-and-conditions-url "https://files.paraswap.io/tos_v4.pdf"})

src/status_im/contexts/wallet/swap/set_spending_cap/style.cljs

@@ -10,6 +10,9 @@
    :height           36
    :background-color :transparent})
 
+(def scroll-view-container
+  {:padding-bottom 150})
+
 (def content-container
   {:padding-top        12
    :padding-horizontal 20
@@ -38,3 +41,20 @@
   [theme]
   {:margin-bottom 8
    :color         (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)})
+
+(def providers-container
+  {:align-items :center
+   :margin-top  12})
+
+(defn swaps-powered-by
+  [theme]
+  {:color (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-70 theme)})
+
+(defn terms-and-conditions
+  [theme]
+  {:color (colors/theme-colors colors/neutral-100 colors/white theme)})
+
+(defn footer-container
+  [theme]
+  {:margin-bottom    -10
+   :background-color (colors/theme-colors colors/white colors/neutral-100 theme)})

src/status_im/contexts/wallet/swap/set_spending_cap/view.cljs

@@ -228,9 +228,25 @@
 
 (defn- footer
   []
-  [rn/view {:style {:margin-bottom -10}}
-   [transaction-details]
-   [slide-button]])
+  (let [provider (rf/sub [:wallet/swap-proposal-provider])
+        theme    (quo.theme/use-theme)
+        on-press (rn/use-callback #(when provider
+                                     (rf/dispatch [:open-url (:terms-and-conditions-url provider)]))
+                                  [provider])]
+    [rn/view {:style (style/footer-container theme)}
+     [transaction-details]
+     [slide-button]
+     [rn/view {:style style/providers-container}
+      [quo/text
+       {:size  :paragraph-2
+        :style (style/swaps-powered-by theme)}
+       (i18n/label :t/swaps-powered-by
+                   {:provider (if provider (:full-name provider) (i18n/label :t/unknown))})]
+      [quo/text
+       {:size     :paragraph-2
+        :style    (style/terms-and-conditions theme)
+        :on-press on-press}
+       (i18n/label :t/terms-and-conditions)]]]))
 
 (defn view
   []
@@ -247,7 +263,7 @@
        :footer                   [footer]
        :gradient-cover?          true
        :customization-color      (:color account)}
-      [:<>
+      [rn/scroll-view {:style style/scroll-view-container}
        [swap-title]
        [spending-cap-section]
        [account-section]

src/status_im/contexts/wallet/swap/swap_confirmation/style.cljs

@@ -41,3 +41,7 @@
 (defn swaps-powered-by
   [theme]
   {:color (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-70 theme)})
+
+(defn terms-and-conditions
+  [theme]
+  {:color (colors/theme-colors colors/neutral-100 colors/white theme)})

src/status_im/contexts/wallet/swap/swap_confirmation/view.cljs

@@ -177,7 +177,10 @@
 (defn footer
   []
   (let [provider (rf/sub [:wallet/swap-proposal-provider])
-        theme    (quo.theme/use-theme)]
+        theme    (quo.theme/use-theme)
+        on-press (rn/use-callback #(when provider
+                                     (rf/dispatch [:open-url (:terms-and-conditions-url provider)]))
+                                  [provider])]
     [:<>
      [transaction-details]
      [slide-button]
@@ -186,7 +189,12 @@
        {:size  :paragraph-2
         :style (style/swaps-powered-by theme)}
        (i18n/label :t/swaps-powered-by
-                   {:provider (if provider (:full-name provider) (i18n/label :t/unknown))})]]]))
+                   {:provider (if provider (:full-name provider) (i18n/label :t/unknown))})]
+      [quo/text
+       {:size     :paragraph-2
+        :style    (style/terms-and-conditions theme)
+        :on-press on-press}
+       (i18n/label :t/terms-and-conditions)]]]))
 
 (defn view
   []

translations/en.json

@@ -2403,7 +2403,7 @@
   "swap-failed": "Swap failed",
   "swapped-to": "Swapped {{pay-amount}} {{pay-token-symbol}} to {{receive-amount}} {{receive-token-symbol}}",
   "swapping-to": "Swapping {{pay-amount}} {{pay-token-symbol}} to {{receive-amount}} {{receive-token-symbol}}",
-  "swaps-powered-by": "Swaps powered by {{provider}}",
+  "swaps-powered-by": "Powered by {{provider}}",
   "switch-to-simple-interface": "Switch to simple interface",
   "symbol": "Symbol",
   "sync-all-devices": "Sync all devices",
@@ -2436,6 +2436,7 @@
   "tap": "Tap",
   "tap-card-again": "Tap the card to the back of your phone again",
   "tap-on": "Tap on",
+  "terms-and-conditions": "Terms and Conditions",
   "terms-of-service": "Terms of Use",
   "testnet-mode": "Testnet mode",
   "testnet-mode-disable-description": "Are you sure you want to turn off Testnet mode? All future transactions will be performed on live networks with real funds.",