[#8236] [Wallet] Custom token details and remove

Signed-off-by: Andrey Shovkoplyas <motor4ik@gmail.com>

src/status_im/events.cljs

@@ -2111,5 +2111,13 @@
  :wallet.custom-token.ui/add-pressed
  (fn [cofx _]
    (fx/merge cofx
-             (custom-tokens/add-pressed)
+             (custom-tokens/add-custom-token)
              (navigation/navigate-back))))
+
+(handlers/register-handler-fx
+ :wallet.custom-token.ui/remove-pressed
+ (fn [cofx [_ token navigate-back?]]
+   (fx/merge cofx
+             (custom-tokens/remove-custom-token token)
+             (when navigate-back?
+               (navigation/navigate-back)))))

src/status_im/ui/components/bottom_sheet/db.cljs

@@ -2,5 +2,5 @@
   (:require  [cljs.spec.alpha :as spec]))
 
 (spec/def :bottom-sheet/show? (spec/nilable boolean?))
-(spec/def :bottom-sheet/view (spec/nilable keyword?))
+(spec/def :bottom-sheet/view (spec/nilable any?))
 (spec/def :bottom-sheet/options (spec/nilable map?))

src/status_im/ui/components/list/views.cljs

@@ -93,8 +93,10 @@
   (into [react/view {:style styles/item-content-view}] (keep identity children)))
 
 (defn list-item-with-checkbox
-  [{:keys [on-value-change style checked?] :as props} item]
+  [{:keys [on-value-change style checked? on-long-press] :as props} item]
-  [react/touchable-highlight {:on-press #(on-value-change (not checked?))}
+  [react/touchable-highlight (merge {:on-press #(on-value-change (not checked?))}
+                                    (when on-long-press
+                                      {:on-long-press on-long-press}))
    (conj item
          [react/view {:style (merge style styles/item-checkbox)}
           [checkbox/checkbox props]])])

src/status_im/ui/screens/routing/screens.cljs

@@ -145,6 +145,7 @@
    :selection-modal-screen           [:modal screens.extensions/selection-modal-screen]
    :wallet-settings-assets           wallet-settings/manage-assets
    :wallet-add-custom-token          custom-tokens/add-custom-token
+   :wallet-custom-token-details      custom-tokens/custom-token-details
    :wallet-transactions-filter       [:modal wallet-transactions/filter-history]
    :my-profile                       profile.user/my-profile
    :my-profile-ext-settings          profile.user/extensions-settings

src/status_im/ui/screens/routing/wallet_stack.cljs

@@ -26,5 +26,6 @@
              :wallet-settings-hook
              :extension-screen-holder
              :wallet-settings-assets
-             :wallet-add-custom-token]
+             :wallet-add-custom-token
+             :wallet-custom-token-details]
    :config  {:initialRouteName :wallet}})

src/status_im/ui/screens/views.cljs

@@ -24,6 +24,9 @@
     (let [opts (cond-> {:show?     show?
                         :on-cancel #(re-frame/dispatch [:bottom-sheet/hide])}
 
+                 (map? view)
+                 (merge view)
+
                  (= view :mobile-network)
                  (merge mobile-network-settings/settings-sheet)
 

src/status_im/ui/screens/wallet/custom_tokens/views.cljs

@@ -9,7 +9,8 @@
             [status-im.ui.components.common.common :as components.common]
             [clojure.string :as string]
             [status-im.ui.screens.wallet.utils :as wallet.utils]
-            [status-im.i18n :as i18n]))
+            [status-im.i18n :as i18n]
+            [status-im.ui.components.action-button.action-button :as action-button]))
 
 (def debounce-timers (atom {}))
 
@@ -98,4 +99,48 @@
                         error error-name error-symbol
                         (string/blank? contract) (string/blank? name)
                         (string/blank? symbol) (string/blank? decimals)))
-        :on-press  #(re-frame/dispatch [:wallet.custom-token.ui/add-pressed])}]]]))
+        :on-press  #(re-frame/dispatch [:wallet.custom-token.ui/add-pressed])}]]]))
+
+(defview custom-token-details []
+  (letsubs [{:keys [address name symbol decimals custom?] :as token}
+            [:get-screen-params]]
+    [react/keyboard-avoiding-view {:flex 1 :background-color :white}
+     [status-bar/status-bar]
+     [toolbar/toolbar nil
+      toolbar/default-nav-back
+      [toolbar/content-title name]]
+     [react/scroll-view {:keyboard-should-persist-taps :handled
+                         :style {:flex 1 :margin-top 8}}
+      [react/view {:padding-horizontal 16}
+       [text-input/text-input-with-label
+        {:label          (i18n/label :t/contract-address)
+         :default-value  address
+         :multiline      true
+         :height         78
+         :editable       false}]
+       [react/view {:height 16}]
+       [text-input/text-input-with-label
+        {:label          (i18n/label :t/name)
+         :default-value  name
+         :editable       false}]
+       [react/view {:height 16}]
+       [react/view {:style {:flex-direction :row}}
+        [react/view {:flex 1}
+         [text-input/text-input-with-label
+          {:label          (i18n/label :t/symbol)
+           :editable       false
+           :default-value  symbol}]]
+        [react/view {:flex 1 :margin-left 33}
+         [text-input/text-input-with-label
+          {:label          (i18n/label :t/decimals)
+           :default-value  (str decimals)
+           :editable       false}]]]]
+      [react/view {:height 24}]
+      (when custom?
+        [action-button/action-button
+         {:label        (i18n/label :t/remove-token)
+          :icon         :main-icons/delete
+          :icon-opts    {:color colors/red}
+          :label-style  {:color colors/red}
+          :cyrcle-color (colors/alpha colors/red 0.1)
+          :on-press     #(re-frame/dispatch [:wallet.custom-token.ui/remove-pressed token true])}])]]))

src/status_im/ui/screens/wallet/settings/models.cljs

@@ -28,6 +28,13 @@
         new-settings (assoc-in settings [:wallet :custom-tokens chain address] token)]
     (accounts.update/update-settings cofx new-settings {})))
 
+(fx/defn remove-custom-token [{{:account/keys [account]} :db :as cofx} {:keys [symbol address]}]
+  (let [network      (get (:networks account) (:network account))
+        chain        (ethereum/network->chain-keyword network)
+        settings     (update-toggle-in-settings cofx symbol false)
+        new-settings (update-in settings [:wallet :custom-tokens chain] dissoc address)]
+    (accounts.update/update-settings cofx new-settings {})))
+
 (fx/defn configure-token-balance-and-visibility [cofx symbol balance]
   (fx/merge cofx
             (toggle-visible-token symbol true)

src/status_im/ui/screens/wallet/settings/views.cljs

@@ -23,9 +23,30 @@
    [toolbar/content-title
     (i18n/label :t/wallet-assets)]])
 
-(defn- render-token [{:keys [symbol name icon color]} visible-tokens]
+(defn hide-sheet-and-dispatch [event]
+  (re-frame/dispatch [:bottom-sheet/hide-sheet])
+  (re-frame/dispatch event))
+
+(defn custom-token-actions-view [{:keys [custom?] :as token}]
+  (fn []
+    [react/view
+     [action-button/action-button {:label     (i18n/label :t/token-details)
+                                   :icon      :main-icons/warning
+                                   :icon-opts {:color :blue}
+                                   :on-press  #(hide-sheet-and-dispatch [:navigate-to :wallet-custom-token-details token])}]
+     (when custom?
+       [action-button/action-button {:label        (i18n/label :t/remove-token)
+                                     :icon         :main-icons/delete
+                                     :icon-opts    {:color colors/red}
+                                     :label-style  {:color colors/red}
+                                     :cyrcle-color (colors/alpha colors/red 0.1)
+                                     :on-press     #(hide-sheet-and-dispatch [:wallet.custom-token.ui/remove-pressed token])}])]))
+
+(defn- render-token [{:keys [symbol name icon color custom?] :as token} visible-tokens]
   [list/list-item-with-checkbox
    {:checked?        (contains? visible-tokens (keyword symbol))
+    :on-long-press   #(re-frame/dispatch [:bottom-sheet/show-sheet {:content        (custom-token-actions-view token)
+                                                                    :content-height (if custom? 128 68)}])
     :on-value-change #(re-frame/dispatch [:wallet.settings/toggle-visible-token (keyword symbol) %])}
    [list/item
     (if icon
@@ -44,13 +65,14 @@
       [react/view (merge components.styles/flex {:background-color :white})
        [status-bar/status-bar]
        [toolbar]
-       [react/view {:style {:flex 1 :padding-top 16}}
+       [react/view {:style components.styles/flex}
-        [action-button/action-button {:label     (i18n/label :t/add-custom-token)
-                                      :icon      :main-icons/add
-                                      :icon-opts {:color :blue}
-                                      :on-press  #(re-frame/dispatch [:navigate-to :wallet-add-custom-token])}]
         [list/section-list
-         {:sections                    (concat
+         {:header                      [react/view {:margin-top 16}
+                                        [action-button/action-button {:label     (i18n/label :t/add-custom-token)
+                                                                      :icon      :main-icons/add
+                                                                      :icon-opts {:color :blue}
+                                                                      :on-press  #(re-frame/dispatch [:navigate-to :wallet-add-custom-token])}]]
+          :sections                    (concat
                                         (when (seq custom-tokens)
                                           [{:title (i18n/label :t/custom)
                                             :data  custom-tokens}])

src/status_im/wallet/custom_tokens/core.cljs

@@ -104,7 +104,7 @@
      :wallet.custom-token/get-name contract}
     {:db (update db :wallet/custom-token-screen merge {:in-progress? nil :error (i18n/label :t/wrong-contract)})}))
 
-(fx/defn add-pressed [{:keys [db] :as cofx}]
+(fx/defn add-custom-token [{:keys [db] :as cofx}]
   (let [{:keys [contract name symbol decimals]} (get db :wallet/custom-token-screen)
         chain-key (ethereum/get-chain-keyword db)
         symbol    (keyword symbol)
@@ -113,6 +113,11 @@
     (fx/merge (assoc-in cofx [:db :wallet/all-tokens chain-key contract] new-token)
               (models/add-custom-token new-token))))
 
+(fx/defn remove-custom-token [{:keys [db] :as cofx} {:keys [address] :as token}]
+  (let [chain-key (ethereum/get-chain-keyword db)]
+    (fx/merge (update-in cofx [:db :wallet/all-tokens chain-key] dissoc address)
+              (models/remove-custom-token token))))
+
 (fx/defn field-is-edited [{:keys [db] :as cofx} field-key value]
   (case field-key
     :contract (contract-address-is-changed cofx value)

translations/en.json

@@ -1046,5 +1046,7 @@
     "wrong-contract" :"Wrong contract",
     "already-have-asset" : "You already have this asset",
     "wrong-address" : "Wrong address",
-    "default" : "Default"
+    "default" : "Default",
+    "token-details" : "Token details",
+    "remove-token" : "Remove token"
 }