Feature/fr 190 add view your collection links on gallery (FR-190_FR-1…

…94) (#57) (#61) * FIx: Add two link to view poap collections (#56) * Added poap scan link * Fix copy tooltip * Add collection links on gallery * Change collection links order * Fix vertical-align warning * Add Tally collection link * Change withtally.com tooltip to Tally * Refactor collection links to utilities Co-authored-by: Agustín Vazquez <[email protected]> Co-authored-by: Pablo Peralta <[email protected]> Co-authored-by: Nicolas de Leon <[email protected]> Co-authored-by: Nicolás de León <[email protected]> Co-authored-by: Agustín Vazquez <[email protected]> Co-authored-by: Pablo Peralta <[email protected]> Co-authored-by: Nicolas de Leon <[email protected]>
poap-xyz · Feb 23, 2022 · 9a21056 · 9a21056
1 parent 82563d4
commit 9a21056
Show file tree

Hide file tree

Showing 8 changed files with 94 additions and 12 deletions.
diff --git a/.env.template b/.env.template
@@ -7,3 +7,8 @@ REACT_APP_GOAT_COUNTER=GOAT_COUNTER_URL
 REACT_APP_INTERCOM_APP_ID=
 REACT_APP_POAP_APP_URL=https://app.poap.xyz
 REACT_APP_PRYSM_APP_URL=https://beta.prysm.xyz
+REACT_APP_POAP_EXPLORE_APP_URL=https://explore.poap.xyz
+REACT_APP_RAINBOW_APP_URL=https://rainbow.me
+REACT_APP_MAZURY_APP_URL=https://app.mazury.xyz
+REACT_APP_CYBERCONNECT_APP_URL=https://app.cyberconnect.me
+REACT_APP_WITHTALLY_APP_URL=https://www.withtally.com/
diff --git a/src/assets/images/cyberConnect.svg b/src/assets/images/cyberConnect.svg
diff --git a/src/assets/images/mazury.png b/src/assets/images/mazury.png
diff --git a/src/assets/images/rainbow.png b/src/assets/images/rainbow.png
diff --git a/src/assets/images/tally.png b/src/assets/images/tally.png
diff --git a/src/pages/event.js b/src/pages/event.js
@@ -18,9 +18,9 @@ import { EventCard } from '../components/eventCard';
 import { Foliage } from '../components/foliage';
 import {dateCell, shrinkAddress, utcDateFormatted, utcDateFull} from '../utilities/utilities';
 import { useWindowWidth } from '@react-hook/window-size/throttled';
-import Prysm from '../assets/images/prysm.svg';
-import {POAP_APP_URL, PRYSM_APP_URL} from "../store/api";
 import {Spinner} from "../components/spinner";
+import { collectionlLinks } from '../utilities/utilities';
+import {POAP_APP_URL} from "../store/api";
 
 const GRAPH_LIMIT = 1000;
 const CSV_STATUS = {
@@ -249,7 +249,7 @@ export function Event() {
   )
 }
 
-function ExternalIconCell({url, tooltipText = null, content}) {
+function ExternalIconCell({url, icon, tooltipText = null, content}) {
   const [isHovering, setIsHovering] = useState(false)
   const [isHoveringLink, setIsHoveringLink] = useState(false)
 
@@ -273,8 +273,8 @@ function ExternalIconCell({url, tooltipText = null, content}) {
          style={{position: 'relative', width: 27}}
       >
         <span>
-          <img src={Prysm}
-               style={{'margin': '0 5px', 'vertical-align': 'middle', width: '20px', height: '20px'}}
+          <img src={icon}
+               style={{'margin': '0 5px', 'verticalAlign': 'middle', width: '20px', height: '20px'}}
                alt={'Open external link'} />
         </span>
         <ReactTooltip id='mainTooltip' effect='solid'/>
@@ -338,10 +338,6 @@ function TableContainer({tokens, ensNames, pageCount: pc, loading}) {
   const [data, setData] = useState([]);
   const [mobileData, setMobileData] = useState([]);
 
-  const PrysmScanLink = (token) => {
-    return (`${PRYSM_APP_URL}/profile/${token.owner.id}/achievements`);
-  };
-
   const PoapScanLink = (token) => {
     return (`${POAP_APP_URL}/scan/${token.owner.id}`);
   };
@@ -398,7 +394,7 @@ function TableContainer({tokens, ensNames, pageCount: pc, loading}) {
     for (let i = 0; i < tokens.length; i++) {
       _data.push({
         col1:  (<ExternalLinkCell url={`${POAP_APP_URL}/token/${tokens[i].id}`} content={`#${tokens[i].id}`}/>) ,
-        col2: (<div><ExternalLinkCell url={PoapScanLink(tokens[i])} tooltipText='View Collection in POAP.scan' content={tokens[i].owner.id}/><ExternalIconCell url={PrysmScanLink(tokens[i])} tooltipText='View Collection in Prysm.xyz' content={tokens[i].owner.id}/></div>),
+        col2: (<div><ExternalLinkCell url={PoapScanLink(tokens[i])} tooltipText='View Collection in POAP.scan' content={tokens[i].owner.id}/>{collectionlLinks.map(link => <ExternalIconCell url={link.getUrl(tokens[i])} key={link.id} icon={link.icon} tooltipText={link.tooltipText}/>)}</div>),
         col3: tokens[i].created * 1000,
         col4: tokens[i].transferCount,
         col5: tokens[i].owner.tokensOwned,
@@ -421,7 +417,7 @@ function TableContainer({tokens, ensNames, pageCount: pc, loading}) {
         let validName = ensNames[i]
         if (validName) {
           if (data[i]) {
-            _data[i].col2 = (<div><a href={PoapScanLink(tokens[i])} target="_blank"  rel="noopener noreferrer" data-tip='View Collection in POAP.scan'> <ReactTooltip effect='solid' /> {validName}</a><ExternalIconCell url={PrysmScanLink(tokens[i])} tooltipText='View Collection in Prysm.xyz' content={tokens[i].owner.id}/></div>)
+            _data[i].col2 = (<div><a href={PoapScanLink(tokens[i])} target="_blank"  rel="noopener noreferrer" data-tip='View Collection in POAP.scan'> <ReactTooltip effect='solid' /> {validName}</a>{collectionlLinks.map(link => <ExternalIconCell url={link.getUrl(tokens[i])} key={link.id} icon={link.icon} tooltipText={link.tooltipText}/>)}</div>)
             _mobileData[i].col1 = <MobileRow token={tokens[i]} address={validName} />
           }
         }

diff --git a/src/store/api.js b/src/store/api.js
@@ -3,6 +3,11 @@ export const MAINNET_SUBGRAPH_URL = process.env.REACT_APP_MAINNET_SUBGRAPH_URL;
 export const POAP_API_URL = process.env.REACT_APP_POAP_API_URL;
 export const POAP_APP_URL = process.env.REACT_APP_POAP_APP_URL;
 export const PRYSM_APP_URL = process.env.REACT_APP_PRYSM_APP_URL;
+export const POAP_EXPLORE_APP_URL = process.env.REACT_APP_POAP_EXPLORE_APP_URL;
+export const RAINBOW_APP_URL = process.env.REACT_APP_RAINBOW_APP_URL;
+export const MAZURY_APP_URL = process.env.REACT_APP_MAZURY_APP_URL;
+export const CYBERCONNECT_APP_URL = process.env.REACT_APP_CYBERCONNECT_APP_URL;
+export const WITHTALLY_APP_URL = process.env.REACT_APP_WITHTALLY_APP_URL;
 export const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000';
 export const OrderType = {
   id: {

diff --git a/src/utilities/utilities.js b/src/utilities/utilities.js
@@ -2,6 +2,15 @@ import { ZERO_ADDRESS } from '../store/api';
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import relativeTime from "dayjs/plugin/relativeTime";
+import CyberConnect from '../assets/images/cyberConnect.svg';
+import Mazury from '../assets/images/mazury.png';
+import Poap from '../assets/images/POAP.svg';
+import Prysm from '../assets/images/prysm.svg';
+import Rainbow from '../assets/images/rainbow.png';
+import Tally from '../assets/images/tally.png';
+import {CYBERCONNECT_APP_URL, MAZURY_APP_URL, POAP_EXPLORE_APP_URL,
+   PRYSM_APP_URL, RAINBOW_APP_URL, WITHTALLY_APP_URL} from "../store/api";
+
 dayjs.extend(utc)
 dayjs.extend(relativeTime)
 
@@ -64,4 +73,67 @@ export const toastInfoOptions = {
   style: {
     backgroundColor: '#fff8e0'
   }
-}
+}
+
+const PrysmScanLink = (token) => {
+  return (`${PRYSM_APP_URL}/profile/${token.owner.id}/achievements`);
+};
+
+const PoapExploreLink = (token) => {
+  return (`${POAP_EXPLORE_APP_URL}/${token.owner.id}`);
+};
+
+const RainbowLink = (token) => {
+  return (`${RAINBOW_APP_URL}/${token.owner.id}`);
+};
+
+const MazuryLink = (token) => {
+  return (`${MAZURY_APP_URL}/people/${token.owner.id}`);
+};
+
+const WithTallyLink = (token) => {
+  return (`${WITHTALLY_APP_URL}/voter/${token.owner.id}`)
+}
+
+const CyberconnectLink = (token) => {
+  return (`${CYBERCONNECT_APP_URL}/address/${token.owner.id}`);
+};
+
+export const collectionlLinks = [
+  {
+    id: 'POAP_EXPLORE',
+    getUrl: PoapExploreLink,
+    icon: Poap,
+    tooltipText: 'View Collection in Explore.poap.xyz'
+  },
+  {
+    id: 'PRYSM',
+    getUrl: PrysmScanLink,
+    icon: Prysm,
+    tooltipText: 'View Collection in Prysm.xyz'
+  },
+  {
+    id: 'RAINBOW',
+    getUrl: RainbowLink,
+    icon: Rainbow,
+    tooltipText: 'View Collection in Rainbow.me'
+  },
+  {
+    id: 'MAZURY',
+    getUrl: MazuryLink,
+    icon: Mazury,
+    tooltipText: 'View Collection in Mazury.xyz'
+  },
+  {
+    id: 'WITHTALLY',
+    getUrl: WithTallyLink,
+    icon: Tally,
+    tooltipText: 'View Collection in Tally'
+  },
+  {
+    id: 'CYBERCONNECT',
+    getUrl: CyberconnectLink,
+    icon: CyberConnect,
+    tooltipText: 'View Collection in Cyberconnect.me'
+  },
+]