diff --git a/project.clj b/project.clj index 9343a2c5..d7152181 100644 --- a/project.clj +++ b/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"] diff --git a/src/memefactory/styles/component/ens_resolved_address.clj b/src/memefactory/styles/component/ens_resolved_address.clj new file mode 100644 index 00000000..1af365a6 --- /dev/null +++ b/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"}]]) diff --git a/src/memefactory/styles/core.clj b/src/memefactory/styles/core.clj index 4c43ac06..ea8abadc 100644 --- a/src/memefactory/styles/core.clj +++ b/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 diff --git a/src/memefactory/ui/components/app_layout.cljs b/src/memefactory/ui/components/app_layout.cljs index 7110db2b..2d01a573 100644 --- a/src/memefactory/ui/components/app_layout.cljs +++ b/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]] diff --git a/src/memefactory/ui/components/challenge_list.cljs b/src/memefactory/ui/components/challenge_list.cljs index 995fc3fc..dd38ec1f 100644 --- a/src/memefactory/ui/components/challenge_list.cljs +++ b/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]}] diff --git a/src/memefactory/ui/components/ens_resolved_address.cljs b/src/memefactory/ui/components/ens_resolved_address.cljs new file mode 100644 index 00000000..acc25a48 --- /dev/null +++ b/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)) diff --git a/src/memefactory/ui/components/tiles.cljs b/src/memefactory/ui/components/tiles.cljs index b840707d..ff8ac626 100644 --- a/src/memefactory/ui/components/tiles.cljs +++ b/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) diff --git a/src/memefactory/ui/leaderboard/collectors_page.cljs b/src/memefactory/ui/leaderboard/collectors_page.cljs index dc54a148..b7166331 100644 --- a/src/memefactory/ui/leaderboard/collectors_page.cljs +++ b/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 diff --git a/src/memefactory/ui/leaderboard/creators_page.cljs b/src/memefactory/ui/leaderboard/creators_page.cljs index 6144641b..598ced5e 100644 --- a/src/memefactory/ui/leaderboard/creators_page.cljs +++ b/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%%)" diff --git a/src/memefactory/ui/leaderboard/curators_page.cljs b/src/memefactory/ui/leaderboard/curators_page.cljs index a82b99ef..5f44d4b5 100644 --- a/src/memefactory/ui/leaderboard/curators_page.cljs +++ b/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: " diff --git a/src/memefactory/ui/meme_detail/page.cljs b/src/memefactory/ui/meme_detail/page.cljs index c3874543..70a2422f 100644 --- a/src/memefactory/ui/meme_detail/page.cljs +++ b/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] diff --git a/src/memefactory/ui/memefolio/page.cljs b/src/memefactory/ui/memefolio/page.cljs index 3631a80b..3f863450 100644 --- a/src/memefactory/ui/memefolio/page.cljs +++ b/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