integrate ens-resolved-address component into memefactory

fix district0x#700

project.clj

@@ -12,10 +12,11 @@
                  [cljsjs/d3 "4.12.0-0"]
                  [cljsjs/filesaverjs "1.3.3-0"]
                  [cljsjs/jquery "3.2.1-0"]
-                 [cljsjs/react "16.4.1-0"]
-                 [cljsjs/react-dom "16.4.1-0"]
+                 [cljsjs/react "16.13.1-0"]
+                 [cljsjs/react-dom "16.13.1-0"]
                  [cljsjs/react-infinite "0.13.0-0"]
                  [com.andrewmcveigh/cljs-time "0.5.2"]
+                 [io.github.cljsjs/ens-resolved-address "0.0.31-0"]
                  [com.taoensso/encore "2.92.0"]
                  [com.taoensso/timbre "4.10.0"]
                  [day8.re-frame/http-fx "0.1.6"]

src/memefactory/styles/component/ens_resolved_address.clj

@@ -0,0 +1,12 @@
+(ns memefactory.styles.component.ens-resolved-address
+  (:require [garden.def :refer [defstyles]]
+            [garden.units :refer [px, em]]
+            [memefactory.styles.base.media :refer [for-media-max]]))
+
+
+(defstyles core
+  [:.cmp-address-wrapper
+   {:display "inline"}
+   [:.address
+    {:text-overflow "ellipsis"
+     :overflow      "hidden"}]])

src/memefactory/styles/core.clj

@@ -11,6 +11,7 @@
             [memefactory.styles.component.main-content :as main-content]
             [memefactory.styles.component.selling-panel :as selling-panel]
             [memefactory.styles.component.spinner :as spinner]
+            [memefactory.styles.component.ens-resolved-address :as ens-resolved-address]
             [memefactory.styles.container.tiles :as tiles]
             [memefactory.styles.pages.about :as page.about]
             [memefactory.styles.pages.dankregistry :as page.dankregistry]
@@ -41,6 +42,7 @@
   page.marketplace/core
   form/core
   spinner/core
+  ens-resolved-address/core
   account-balances/core
   page.memefolio/core
   page.dankregistry/core

src/memefactory/ui/components/app_layout.cljs

@@ -15,6 +15,7 @@
     [memefactory.ui.contract.param-change :as param-change]
     [memefactory.ui.components.general :refer [nav-anchor]]
     [memefactory.ui.subs :as mf-subs]
+    [memefactory.ui.components.ens-resolved-address :as ens-resolved-address]
     [re-frame.core :refer [subscribe dispatch]]
     [reagent.core :as r]
     [taoensso.timbre :as log :refer [spy]]

src/memefactory/ui/components/challenge_list.cljs

@@ -16,6 +16,7 @@
    [memefactory.ui.components.panels :refer [no-items-found]]
    [memefactory.ui.components.spinner :as spinner]
    [memefactory.ui.components.tiles :as tiles :refer [meme-image]]
+   [memefactory.ui.components.ens-resolved-address :as ens-resolved-address]
    [memefactory.shared.utils :as shared-utils]
    [memefactory.ui.utils :as ui-utils]
    [print.foo :refer [look] :include-macros true]
@@ -84,7 +85,7 @@
                  :query {:tab :created}
                  :class (str "address " (when (= (:user/address user) @(subscribe [::accounts-subs/active-account]))
                                           "active-address"))}
-     (-> user :user/address)]]])
+     [ens-resolved-address/ens-resolved-address {:resolvedOnly true :showBlockies false :presetValue (-> user :user/address)}]]]])
 
 
 (defn challenger-info [user]
@@ -102,7 +103,7 @@
                  :query {:tab :curated}
                  :class (str "address " (when (= (:user/address user) @(subscribe [::accounts-subs/active-account]))
                                           "active-address"))}
-     (-> user :user/address)]]])
+     [ens-resolved-address/ens-resolved-address {:resolvedOnly true :showBlockies false :presetValue (-> user :user/address)}]]]])
 
 
 (defn challenge [{:keys [:entry :include-challenger-info? :action-child]}]

src/memefactory/ui/components/ens_resolved_address.cljs

@@ -0,0 +1,6 @@
+(ns memefactory.ui.components.ens-resolved-address
+  (:require
+    [reagent.core :as r]
+    [cljsjs.ens-resolved-address]))
+
+(def ens-resolved-address (r/adapt-react-class js/EnsResolvedAddress))

src/memefactory/ui/components/tiles.cljs

@@ -15,6 +15,7 @@
             [memefactory.ui.components.general :refer [nav-anchor]]
             [memefactory.ui.contract.meme-auction :as meme-auction]
             [memefactory.ui.utils :as ui-utils :refer [format-price]]
+            [memefactory.ui.components.ens-resolved-address :as ens-resolved-address]
             [re-frame.core :refer [subscribe dispatch]]
             [reagent.core :as r]
             [taoensso.timbre :as log :refer [spy]]))
@@ -150,7 +151,7 @@
                          :params {:address (:user/address (:meme-auction/seller meme-auction))}
                          :query {:tab :selling}
                          :title (str "Go to the Memefolio of " seller-address)}
-             seller-address]]
+             [ens-resolved-address/ens-resolved-address {:resolvedOnly true :showBlockies false :presetValue seller-address}]]]
            [:li [:label "Current Price:"] [:span (format-price price)]]
            [:li [:label "Start Price:"] [:span (format-price (:meme-auction/start-price meme-auction))]]
            [:li [:label "End Price:"] [:span (format-price (:meme-auction/end-price meme-auction))]]
@@ -240,7 +241,7 @@
                      :params {:address creator-address}
                      :query {:tab :created}
                      :title (str "Go to the Memefolio of " creator-address)}
-         creator-address]]
+         [ens-resolved-address/ens-resolved-address {:resolvedOnly true :showBlockies false :presetValue creator-address}]]]
        [:li [:label "Created:"]
         (let [formated-time (-> (time/time-remaining (t/date-time (gql-utils/gql-date->date created-on)) (t/now))
                                 (dissoc :seconds)

src/memefactory/ui/leaderboard/collectors_page.cljs

@@ -10,6 +10,7 @@
    [memefactory.ui.components.infinite-scroll :refer [infinite-scroll]]
    [memefactory.ui.components.panels :refer [no-items-found]]
    [memefactory.ui.components.spinner :as spinner]
+   [memefactory.ui.components.ens-resolved-address :as ens-resolved-address]
    [memefactory.ui.utils :refer [format-price format-dank]]
    [re-frame.core :refer [subscribe dispatch]]
    [reagent.core :as r]
@@ -52,7 +53,7 @@
                   :params {:address address}
                   :query {:tab :collected}
                   :class "user-address"}
-      address]
+        [ens-resolved-address/ens-resolved-address {:resolvedOnly true :showBlockies false :presetValue address}]]
      [:ul ;; TODO complete these after Matus comments
       [:li "Unique Memes: " [:span.unique (gstring/format "%d/%d (%d%%)"
                                                           total-collected-memes

src/memefactory/ui/leaderboard/creators_page.cljs

@@ -11,6 +11,7 @@
    [memefactory.ui.components.infinite-scroll :refer [infinite-scroll]]
    [memefactory.ui.components.panels :refer [no-items-found]]
    [memefactory.ui.components.spinner :as spinner]
+   [memefactory.ui.components.ens-resolved-address :as ens-resolved-address]
    [memefactory.ui.utils :refer [format-price format-dank]]
    [re-frame.core :refer [subscribe dispatch]]
    [reagent.core :as r]
@@ -53,7 +54,7 @@
                   :params {:address address}
                   :query {:tab :created}
                   :class "user-address"}
-      address]
+        [ens-resolved-address/ens-resolved-address {:resolvedOnly true :showBlockies false :presetValue address}]]
      [:ul
       [:li "Earned: " [:span.earned (format-price creator-total-earned)]]
       [:li "Success Rate: " [:span.success-rate (gstring/format "%d/%d (%d%%)"

src/memefactory/ui/leaderboard/curators_page.cljs

@@ -11,6 +11,7 @@
    [memefactory.ui.components.infinite-scroll :refer [infinite-scroll]]
    [memefactory.ui.components.panels :refer [no-items-found]]
    [memefactory.ui.components.spinner :as spinner]
+   [memefactory.ui.components.ens-resolved-address :as ens-resolved-address]
    [memefactory.ui.utils :as ui-utils]
    [re-frame.core :refer [subscribe dispatch]]
    [reagent.core :as r]
@@ -100,7 +101,7 @@
                                         :params {:address (:user/address curator)}
                                         :query {:tab :curated}}
                             [:h3.address
-                             (:user/address curator)]]
+                              [ens-resolved-address/ens-resolved-address {:resolvedOnly true :showBlockies false :presetValue (:user/address curator)}]]]
 
                            [:h4.challenges "CHALLENGES"]
                            [:p "Success rate: "

src/memefactory/ui/meme_detail/page.cljs

@@ -26,6 +26,7 @@
             [memefactory.ui.components.search :as search]
             [memefactory.ui.components.spinner :as spinner]
             [memefactory.ui.components.tiles :as tiles]
+            [memefactory.ui.components.ens-resolved-address :as ens-resolved-address]
             [memefactory.ui.contract.registry-entry :as registry-entry]
             [memefactory.ui.dank-registry.vote-page :as vote-page]
             [memefactory.ui.events :as memefactory-events]
@@ -110,7 +111,7 @@
                    :query {:tab :created}
                    :class (str "address " (when (= address @(subscribe [::accounts-subs/active-account]))
                                             "active-address"))}
-       address]]]))
+       [ens-resolved-address/ens-resolved-address {:resolvedOnly true :showBlockies false :presetValue address}]]]]))
 
 
 (defn related-memes-container [address tags]

src/memefactory/ui/memefolio/page.cljs

@@ -26,6 +26,7 @@
     [memefactory.ui.components.search :as search]
     [memefactory.ui.components.spinner :as spinner]
     [memefactory.ui.components.tiles :as tiles]
+    [memefactory.ui.components.ens-resolved-address :as ens-resolved-address]
     [memefactory.ui.contract.meme :as meme]
     [memefactory.ui.contract.meme-token :as meme-token]
     [memefactory.shared.utils :as shared-utils]
@@ -708,7 +709,7 @@
                                                  [nav-anchor {:route :route.memefolio/index
                                                               :params {:address (:user/address (:meme-auction/buyer meme-auction))}
                                                               :query {:tab :collected}}
-                                                  (:user/address (:meme-auction/buyer meme-auction))]]
+                                                    [ens-resolved-address/ens-resolved-address {:resolvedOnly true :showBlockies false :presetValue (:user/address (:meme-auction/buyer meme-auction))}]]]
                                                 [:li [:label "Price:"] [:span (ui-utils/format-price (:meme-auction/bought-for meme-auction))]]
                                                 [:li [:label "Bought:"] [:span (let [time-ago (format/time-ago (gql-utils/gql-date->date (:meme-auction/bought-on meme-auction))
                                                                                                                (t/date-time @(subscribe [::now-subs/now])))]
@@ -944,7 +945,7 @@
                                    :selected-tags-id :search-tags
                                    :search-id :term
                                    :sub-title (if url-address?
-                                                (str "User stats and current holdings for account " user-address)
+                                                [:div [ens-resolved-address/ens-resolved-address {:resolvedOnly true :showBlockies false :presetValue user-address}]]
                                                 "A personal history of all memes bought, sold, created, and owned")
                                    :select-options (cond
                                                      (#{:collected :created} tab) collected-created-order