From 4b7c906df27fd3bdf90dd80048cff5f87b139514 Mon Sep 17 00:00:00 2001 From: Brian Sztamfater Date: Mon, 22 Jul 2024 08:50:29 -0300 Subject: [PATCH] feat(swap): set spending cap screen (#20727) Signed-off-by: Brian Sztamfater --- resources/images/networks/Paraswap@2x.png | Bin 0 -> 3192 bytes resources/images/networks/Paraswap@3x.png | Bin 0 -> 5229 bytes .../approval_info/component_spec.cljs | 1 + .../list_items/approval_info/view.cljs | 2 +- src/quo/foundations/resources.cljs | 1 + src/status_im/constants.cljs | 5 +- .../wallet/swap/set_spending_cap/style.cljs | 40 +++ .../wallet/swap/set_spending_cap/view.cljs | 253 ++++++++++++++++++ .../wallet/swap/swap_proposal/view.cljs | 5 +- src/status_im/navigation/screens.cljs | 5 + translations/en.json | 5 + 11 files changed, 314 insertions(+), 3 deletions(-) create mode 100644 resources/images/networks/Paraswap@2x.png create mode 100644 resources/images/networks/Paraswap@3x.png create mode 100644 src/status_im/contexts/wallet/swap/set_spending_cap/style.cljs create mode 100644 src/status_im/contexts/wallet/swap/set_spending_cap/view.cljs diff --git a/resources/images/networks/Paraswap@2x.png b/resources/images/networks/Paraswap@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..d37384748a98d34da4a507ed99d34189449bd040 GIT binary patch literal 3192 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 eA{AoegZ~57qYc!!;1OE@00004yNBY2$I4 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 + [data-item + {:title (i18n/label :t/network) + :subtitle (:full-name network) + :network-image (:source network)}] + [data-item + {:title (i18n/label :t/est-time) + :subtitle (i18n/label :t/time-in-mins {:minutes (str estimated-time-min)})}] + [data-item + {:title (i18n/label :t/max-fees) + :subtitle max-fees + :loading? loading-fees? + :size :small}]]]) + +(defn footer + [{:keys [estimated-time-min native-currency-symbol network theme account-color loading-fees?]}] + (let [native-token (when native-currency-symbol + (rf/sub [:wallet/token-by-symbol + native-currency-symbol])) + fee-formatted (rf/sub [:wallet/wallet-send-fee-fiat-formatted + native-token]) + on-auth-success (rn/use-callback #(js/alert "Not implemented yet"))] + [rn/view {:style {:margin-bottom -10}} + [transaction-details + {:estimated-time-min estimated-time-min + :max-fees fee-formatted + :network network + :loading-fees? loading-fees? + :theme theme}] + [standard-auth/slide-button + {:size :size-48 + :track-text (i18n/label :t/slide-to-swap) + :container-style {:z-index 2} + :customization-color account-color + :disabled? loading-fees? + :on-auth-success on-auth-success + :auth-button-label (i18n/label :t/confirm)}]])) + +(defn view + [] + (let [theme (quo.theme/use-theme) + swap-transaction-data (rf/sub [:wallet/swap]) + {:keys [asset-to-pay network pay-amount + providers swap-proposal + loading-fees?]} swap-transaction-data + estimated-time-min (:estimated-time swap-proposal) + pay-token-symbol (:symbol asset-to-pay) + pay-token-address (:address asset-to-pay) + native-currency-symbol (get-in swap-proposal [:from :native-currency-symbol]) + account (rf/sub [:wallet/current-viewing-account]) + account-color (:color account) + provider (first providers)] + [rn/view {:style style/container} + [floating-button-page/view + {:footer-container-padding 0 + :header [quo/page-nav + {:icon-name :i/close + :on-press navigation/navigate-back + :margin-top 8 + :background :blur + :accessibility-label :top-bar}] + :footer [footer + {:estimated-time-min estimated-time-min + :native-currency-symbol native-currency-symbol + :network network + :account-color account-color + :provider provider + :loading-fees? loading-fees? + :theme theme}] + :gradient-cover? true + :customization-color account-color} + [:<> + [swap-title + {:pay-token-symbol pay-token-symbol + :pay-amount pay-amount + :account account + :provider provider}] + [spending-cap-section + {:token-symbol pay-token-symbol + :amount pay-amount + :theme theme}] + [account-section + {:account account + :pay-token-symbol pay-token-symbol + :pay-token-amount pay-amount + :theme theme}] + [token-section + {:token-symbol pay-token-symbol + :token-address pay-token-address + :network-chain-id (:chain-id network) + :theme theme}] + [spender-contract-section + {:provider provider + :network-chain-id (:chain-id network) + :theme theme}]]]])) diff --git a/src/status_im/contexts/wallet/swap/swap_proposal/view.cljs b/src/status_im/contexts/wallet/swap/swap_proposal/view.cljs index 0354c63709..c0fab70cac 100644 --- a/src/status_im/contexts/wallet/swap/swap_proposal/view.cljs +++ b/src/status_im/contexts/wallet/swap/swap_proposal/view.cljs @@ -16,4 +16,7 @@ [quo/button {:on-press #(rf/dispatch [:navigate-to-within-stack [:screen/wallet.swap-confirmation :screen/wallet.swap-propasal]])} - "Swap confirmation"]])) + "Swap confirmation"] + [quo/button + {:on-press #(rf/dispatch [:open-modal :screen/wallet.swap-set-spending-cap])} + "Set spending cap"]])) diff --git a/src/status_im/navigation/screens.cljs b/src/status_im/navigation/screens.cljs index c0ab4609a9..a0c97cf949 100644 --- a/src/status_im/navigation/screens.cljs +++ b/src/status_im/navigation/screens.cljs @@ -118,6 +118,7 @@ [status-im.contexts.wallet.send.transaction-confirmation.view :as wallet-transaction-confirmation] [status-im.contexts.wallet.send.transaction-progress.view :as wallet-transaction-progress] [status-im.contexts.wallet.swap.select-asset-to-pay.view :as wallet-swap-select-asset-to-pay] + [status-im.contexts.wallet.swap.set-spending-cap.view :as wallet-swap-set-spending-cap] [status-im.contexts.wallet.swap.swap-confirmation.view :as wallet-swap-confirmation] [status-im.contexts.wallet.swap.swap-proposal.view :as wallet-swap-propasal] [status-im.contexts.wallet.wallet-connect.modals.send-transaction.view :as @@ -526,6 +527,10 @@ :options {:modalPresentationStyle :overCurrentContext} :component wallet-swap-confirmation/view} + {:name :screen/wallet.swap-set-spending-cap + :options {:sheet? true} + :component wallet-swap-set-spending-cap/view} + {:name :scan-profile-qr-code :options (merge options/dark-screen diff --git a/translations/en.json b/translations/en.json index 32cd4ae561..cf047a9325 100644 --- a/translations/en.json +++ b/translations/en.json @@ -18,6 +18,7 @@ "accepted": "Accepted", "access-existing-keys": "Access existing keys", "access-key": "Access key", + "account": "Account", "account-added": "Account added", "account-color": "Account color", "account-content": "You can compare accounts in Status to bank accounts. Like a bank account, an account typically has an address and a balance; You use this account to transact on Ethereum. You can have multiple accounts in your wallet. All accessed by unlocking Status.", @@ -1016,6 +1017,7 @@ "fleet-settings": "Fleet settings", "follow": "Follow", "follow-your-interests": "Jump into a public chat and meet new people", + "for": "for", "for-airdrops": "For airdrops", "forgot-password": "Forgot password?", "forgot-your-password-info-create-new-password": "Create a new password", @@ -2189,6 +2191,7 @@ "set-dapp-access-permissions": "Set DApp access permissions", "set-max": "Set max", "set-nickname-toast": "You have renamed {{primary-name}} as {{nickname}}", + "set-spending-cap-of": "Set spending cap of", "set-up-sync": "Set up sync", "settings": "Settings", "setup-group-chat": "Setup group chat", @@ -2285,6 +2288,8 @@ "specify-network-id": "Specify network id", "specify-server-public-key": "Enter server public key", "specify-symbol": "Specify a symbol", + "spender-contract": "Spender contract", + "spending-cap": "Spending cap", "start-chat": "Start chat", "start-conversation": "Start conversation", "start-group-chat": "Start group chat",