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/styles/pages/mymemefolio.clj b/src/memefactory/styles/pages/mymemefolio.clj index 5c2e260d..575df958 100644 --- a/src/memefactory/styles/pages/mymemefolio.clj +++ b/src/memefactory/styles/pages/mymemefolio.clj @@ -53,7 +53,7 @@ :color :mymemefolio-green :icon "/assets/icons/portfolio2.svg"}) [:div.search-form - [:h2 {:max-width (em 13.5) + [:h2 {:max-width "70%" :position :unset :text-overflow :ellipsis :margin-left :auto diff --git a/src/memefactory/ui/components/app_layout.cljs b/src/memefactory/ui/components/app_layout.cljs index 7110db2b..80e38c6c 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]] @@ -116,12 +117,16 @@ (let [open? (r/atom nil) my-addresses (r/atom nil) accounts (subscribe [::accounts-subs/accounts]) + active-account (subscribe [:district.ui.web3-accounts.subs/active-account]) search-term (r/atom {}) tx-log-open? (subscribe [::tx-log-subs/open?])] (fn [] [:div.app-bar [:div.account-section - [active-account]] + [:div.active-account + [:span.single-account + [ens-resolved-address/ens-resolved-address + {:resolvedOnly false :showBlockies false :presetValue (str @active-account)}]]]] [:div.tracker-section {:on-click (fn [] (if (empty? @my-addresses) diff --git a/src/memefactory/ui/components/challenge_list.cljs b/src/memefactory/ui/components/challenge_list.cljs index 995fc3fc..73d42a61 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 false :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 false :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..61efa329 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 false :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..ad363d80 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])))] @@ -920,7 +921,7 @@ [:div.tabbed-pane [:section.search-form [search/search-tools (merge {:title (if url-address? - [:span (str "Memefolio " user-address)] + [:span (str "Memefolio of ") [ens-resolved-address/ens-resolved-address {:resolvedOnly true :showBlockies false :presetValue user-address} ]] [:span "My Memefolio" (let [loc-str (str (.-location js/window)) loc (if-let [qidx (str/index-of loc-str "?")] (subs loc-str 0 qidx)