joeyzheng1412-daohq-ticker-react 1.0.1 → 1.0.4
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.es.js +2 -2
- package/dist/index.js +2 -2
- package/package.json +1 -1
- package/src/components/Dao.css +4 -0
- package/src/components/Dao.js +1 -0
- package/src/components/Ticker.js +125 -80
package/dist/index.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import e from"react";var
|
|
1
|
+
import e,{useState as n,useEffect as t}from"react";var a={};Object.defineProperty(a,"__esModule",{value:!0});var i=e;function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=o(i),l=function(){return l=Object.assign||function(e){for(var n,t=1,a=arguments.length;t<a;t++)for(var i in n=arguments[t])Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i]);return e},l.apply(this,arguments)};
|
|
2
2
|
/*! *****************************************************************************
|
|
3
3
|
Copyright (c) Microsoft Corporation.
|
|
4
4
|
|
|
@@ -12,4 +12,4 @@ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
|
12
12
|
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
13
13
|
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
14
14
|
PERFORMANCE OF THIS SOFTWARE.
|
|
15
|
-
***************************************************************************** */!function(e){if(!e||"undefined"==typeof window)return;const n=document.createElement("style");n.setAttribute("type","text/css"),n.innerHTML=e,document.head.appendChild(n)}('.marquee-container {\n overflow-x: hidden !important;\n display: flex !important;\n flex-direction: row !important;\n position: relative;\n width: 100%;\n}\n.marquee-container:hover div {\n animation-play-state: var(--pause-on-hover);\n}\n.marquee-container:active div {\n animation-play-state: var(--pause-on-click);\n}\n\n.overlay {\n position: absolute;\n width: 100%;\n height: 100%;\n}\n.overlay::before, .overlay::after {\n background: linear-gradient(to right, var(--gradient-color));\n content: "";\n height: 100%;\n position: absolute;\n width: var(--gradient-width);\n z-index: 2;\n}\n.overlay::after {\n right: 0;\n top: 0;\n transform: rotateZ(180deg);\n}\n.overlay::before {\n left: 0;\n top: 0;\n}\n\n.marquee {\n flex: 0 0 auto;\n min-width: 100%;\n z-index: 1;\n display: flex;\n flex-direction: row;\n align-items: center;\n animation: scroll var(--duration) linear var(--delay) var(--iteration-count);\n animation-play-state: var(--play);\n animation-delay: var(--delay);\n animation-direction: var(--direction);\n}\n@keyframes scroll {\n 0% {\n transform: translateX(0%);\n }\n 100% {\n transform: translateX(-100%);\n }\n}');var
|
|
15
|
+
***************************************************************************** */!function(e){if(!e||"undefined"==typeof window)return;const n=document.createElement("style");n.setAttribute("type","text/css"),n.innerHTML=e,document.head.appendChild(n)}('.marquee-container {\n overflow-x: hidden !important;\n display: flex !important;\n flex-direction: row !important;\n position: relative;\n width: 100%;\n}\n.marquee-container:hover div {\n animation-play-state: var(--pause-on-hover);\n}\n.marquee-container:active div {\n animation-play-state: var(--pause-on-click);\n}\n\n.overlay {\n position: absolute;\n width: 100%;\n height: 100%;\n}\n.overlay::before, .overlay::after {\n background: linear-gradient(to right, var(--gradient-color));\n content: "";\n height: 100%;\n position: absolute;\n width: var(--gradient-width);\n z-index: 2;\n}\n.overlay::after {\n right: 0;\n top: 0;\n transform: rotateZ(180deg);\n}\n.overlay::before {\n left: 0;\n top: 0;\n}\n\n.marquee {\n flex: 0 0 auto;\n min-width: 100%;\n z-index: 1;\n display: flex;\n flex-direction: row;\n align-items: center;\n animation: scroll var(--duration) linear var(--delay) var(--iteration-count);\n animation-play-state: var(--play);\n animation-delay: var(--delay);\n animation-direction: var(--direction);\n}\n@keyframes scroll {\n 0% {\n transform: translateX(0%);\n }\n 100% {\n transform: translateX(-100%);\n }\n}');var d=a.default=function(e){var n,t,a,o,d=e.style,c=void 0===d?{}:d,s=e.className,m=void 0===s?"":s,u=e.play,p=void 0===u||u,f=e.pauseOnHover,v=void 0!==f&&f,h=e.pauseOnClick,y=void 0!==h&&h,g=e.direction,x=void 0===g?"left":g,C=e.speed,E=void 0===C?20:C,w=e.delay,N=void 0===w?0:w,b=e.loop,k=void 0===b?0:b,q=e.gradient,A=void 0===q||q,S=e.gradientColor,O=void 0===S?[255,255,255]:S,F=e.gradientWidth,j=void 0===F?200:F,T=e.onFinish,D=e.onCycleComplete,P=e.children,z=i.useState(0),B=z[0],I=z[1],R=i.useState(0),H=R[0],L=R[1],M=i.useState(0),X=M[0],_=M[1],W=i.useState(!1),Z=W[0],$=W[1],G=i.useRef(null),J=i.useRef(null),K=function(){J.current&&G.current&&(I(G.current.getBoundingClientRect().width),L(J.current.getBoundingClientRect().width)),_(H<B?B/E:H/E)};i.useEffect((function(){return K(),window.addEventListener("resize",K),function(){window.removeEventListener("resize",K)}})),i.useEffect((function(){$(!0)}),[]);var Q="rgba("+O[0]+", "+O[1]+", "+O[2];return r.default.createElement(i.Fragment,null,Z?r.default.createElement("div",{ref:G,style:l(l({},c),(n={},n["--pause-on-hover"]=v?"paused":"running",n["--pause-on-click"]=y?"paused":"running",n)),className:m+" marquee-container"},A&&r.default.createElement("div",{style:(t={},t["--gradient-color"]=Q+", 1), "+Q+", 0)",t["--gradient-width"]="number"==typeof j?j+"px":j,t),className:"overlay"}),r.default.createElement("div",{ref:J,style:(a={},a["--play"]=p?"running":"paused",a["--direction"]="left"===x?"normal":"reverse",a["--duration"]=X+"s",a["--delay"]=N+"s",a["--iteration-count"]=k?""+k:"infinite",a),className:"marquee",onAnimationIteration:D,onAnimationEnd:T},P),r.default.createElement("div",{style:(o={},o["--play"]=p?"running":"paused",o["--direction"]="left"===x?"normal":"reverse",o["--duration"]=X+"s",o["--delay"]=N+"s",o["--iteration-count"]=k?""+k:"infinite",o),className:"marquee"},P)):null)};function c(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===t&&a.firstChild?a.insertBefore(i,a.firstChild):a.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}c(".daoContainer{background:#000;border:2px solid gray;display:flex;flex-direction:column;height:60px;padding:8px;width:200px}.bottomContent,.topContent{display:flex;flex-direction:row}.daoChange,.daoChart,.daoImage,.daoName,.daoPrice,.daoSymbol{color:#fff}");const s=({dao:n})=>e.createElement("div",{className:"daoContainer",onClick:()=>{console.log(n.name)}},e.createElement("div",{className:"topContent"},e.createElement("img",{src:image,className:"daoImage",alt:"logo"}),e.createElement("div",{className:"daoName"},n.name),e.createElement("div",{className:"daoSymbol"},n.symbol),e.createElement("div",{className:"daoPrice"},n.price)),e.createElement("div",{className:"bottomContent"},e.createElement("div",{className:"daoChange"},n.change),e.createElement("div",{className:"daoChart"},n.chart)));c(".TickerContainer{display:flex;flex-direction:row;overflow-x:hidden;padding:6px;width:100%}");const m=()=>{const[a,i]=n([]);t((()=>{o()}),[]);const o=async()=>{const e=await fetch("https://daohq-ticker-ick3pj1ry-daohq.vercel.app/api/ticker").then((e=>e.json()));r(e)},r=e=>{console.log(e),i(e.map((e=>({name:e.historicalFinancials.Dao.name||"name N/A",image:e.historicalFinancials.Dao.daoImage||"img N/A",symbol:e.historicalFinancials.Dao.tokenSymbol||"symbol N/A",price:Math.round(1e3*e.historicalFinancials.Dao.tokenPrice)/1e3||"$-.--",change24hr:e.historicalFinancials.Dao.percentChange24hr||"change N/A",chart:"N/A"}))))};return e.createElement("div",{className:"TickerContainer"},e.createElement(d,{speed:20,pauseOnHover:!1,pauseOnClick:!0,gradient:!1},a.map((n=>e.createElement(s,{key:n.name,dao:n})))))};export{m as default};
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";var e=require("react");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=n(e),a={};Object.defineProperty(a,"__esModule",{value:!0});var i=t.default;function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=o(i),l=function(){return l=Object.assign||function(e){for(var n,t=1,a=arguments.length;t<a;t++)for(var i in n=arguments[t])Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i]);return e},l.apply(this,arguments)};
|
|
2
2
|
/*! *****************************************************************************
|
|
3
3
|
Copyright (c) Microsoft Corporation.
|
|
4
4
|
|
|
@@ -12,4 +12,4 @@ INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
|
12
12
|
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
13
13
|
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
14
14
|
PERFORMANCE OF THIS SOFTWARE.
|
|
15
|
-
***************************************************************************** */!function(e){if(!e||"undefined"==typeof window)return;const n=document.createElement("style");n.setAttribute("type","text/css"),n.innerHTML=e,document.head.appendChild(n)}('.marquee-container {\n overflow-x: hidden !important;\n display: flex !important;\n flex-direction: row !important;\n position: relative;\n width: 100%;\n}\n.marquee-container:hover div {\n animation-play-state: var(--pause-on-hover);\n}\n.marquee-container:active div {\n animation-play-state: var(--pause-on-click);\n}\n\n.overlay {\n position: absolute;\n width: 100%;\n height: 100%;\n}\n.overlay::before, .overlay::after {\n background: linear-gradient(to right, var(--gradient-color));\n content: "";\n height: 100%;\n position: absolute;\n width: var(--gradient-width);\n z-index: 2;\n}\n.overlay::after {\n right: 0;\n top: 0;\n transform: rotateZ(180deg);\n}\n.overlay::before {\n left: 0;\n top: 0;\n}\n\n.marquee {\n flex: 0 0 auto;\n min-width: 100%;\n z-index: 1;\n display: flex;\n flex-direction: row;\n align-items: center;\n animation: scroll var(--duration) linear var(--delay) var(--iteration-count);\n animation-play-state: var(--play);\n animation-delay: var(--delay);\n animation-direction: var(--direction);\n}\n@keyframes scroll {\n 0% {\n transform: translateX(0%);\n }\n 100% {\n transform: translateX(-100%);\n }\n}');var
|
|
15
|
+
***************************************************************************** */!function(e){if(!e||"undefined"==typeof window)return;const n=document.createElement("style");n.setAttribute("type","text/css"),n.innerHTML=e,document.head.appendChild(n)}('.marquee-container {\n overflow-x: hidden !important;\n display: flex !important;\n flex-direction: row !important;\n position: relative;\n width: 100%;\n}\n.marquee-container:hover div {\n animation-play-state: var(--pause-on-hover);\n}\n.marquee-container:active div {\n animation-play-state: var(--pause-on-click);\n}\n\n.overlay {\n position: absolute;\n width: 100%;\n height: 100%;\n}\n.overlay::before, .overlay::after {\n background: linear-gradient(to right, var(--gradient-color));\n content: "";\n height: 100%;\n position: absolute;\n width: var(--gradient-width);\n z-index: 2;\n}\n.overlay::after {\n right: 0;\n top: 0;\n transform: rotateZ(180deg);\n}\n.overlay::before {\n left: 0;\n top: 0;\n}\n\n.marquee {\n flex: 0 0 auto;\n min-width: 100%;\n z-index: 1;\n display: flex;\n flex-direction: row;\n align-items: center;\n animation: scroll var(--duration) linear var(--delay) var(--iteration-count);\n animation-play-state: var(--play);\n animation-delay: var(--delay);\n animation-direction: var(--direction);\n}\n@keyframes scroll {\n 0% {\n transform: translateX(0%);\n }\n 100% {\n transform: translateX(-100%);\n }\n}');var d=a.default=function(e){var n,t,a,o,d=e.style,c=void 0===d?{}:d,s=e.className,u=void 0===s?"":s,m=e.play,f=void 0===m||m,p=e.pauseOnHover,v=void 0!==p&&p,h=e.pauseOnClick,y=void 0!==h&&h,g=e.direction,x=void 0===g?"left":g,C=e.speed,E=void 0===C?20:C,w=e.delay,N=void 0===w?0:w,b=e.loop,k=void 0===b?0:b,q=e.gradient,S=void 0===q||q,A=e.gradientColor,O=void 0===A?[255,255,255]:A,j=e.gradientWidth,F=void 0===j?200:j,T=e.onFinish,D=e.onCycleComplete,P=e.children,z=i.useState(0),B=z[0],I=z[1],R=i.useState(0),H=R[0],L=R[1],M=i.useState(0),X=M[0],_=M[1],W=i.useState(!1),Z=W[0],$=W[1],G=i.useRef(null),J=i.useRef(null),K=function(){J.current&&G.current&&(I(G.current.getBoundingClientRect().width),L(J.current.getBoundingClientRect().width)),_(H<B?B/E:H/E)};i.useEffect((function(){return K(),window.addEventListener("resize",K),function(){window.removeEventListener("resize",K)}})),i.useEffect((function(){$(!0)}),[]);var Q="rgba("+O[0]+", "+O[1]+", "+O[2];return r.default.createElement(i.Fragment,null,Z?r.default.createElement("div",{ref:G,style:l(l({},c),(n={},n["--pause-on-hover"]=v?"paused":"running",n["--pause-on-click"]=y?"paused":"running",n)),className:u+" marquee-container"},S&&r.default.createElement("div",{style:(t={},t["--gradient-color"]=Q+", 1), "+Q+", 0)",t["--gradient-width"]="number"==typeof F?F+"px":F,t),className:"overlay"}),r.default.createElement("div",{ref:J,style:(a={},a["--play"]=f?"running":"paused",a["--direction"]="left"===x?"normal":"reverse",a["--duration"]=X+"s",a["--delay"]=N+"s",a["--iteration-count"]=k?""+k:"infinite",a),className:"marquee",onAnimationIteration:D,onAnimationEnd:T},P),r.default.createElement("div",{style:(o={},o["--play"]=f?"running":"paused",o["--direction"]="left"===x?"normal":"reverse",o["--duration"]=X+"s",o["--delay"]=N+"s",o["--iteration-count"]=k?""+k:"infinite",o),className:"marquee"},P)):null)};function c(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===t&&a.firstChild?a.insertBefore(i,a.firstChild):a.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}c(".daoContainer{background:#000;border:2px solid gray;display:flex;flex-direction:column;height:60px;padding:8px;width:200px}.bottomContent,.topContent{display:flex;flex-direction:row}.daoChange,.daoChart,.daoImage,.daoName,.daoPrice,.daoSymbol{color:#fff}");const s=({dao:e})=>t.default.createElement("div",{className:"daoContainer",onClick:()=>{console.log(e.name)}},t.default.createElement("div",{className:"topContent"},t.default.createElement("img",{src:image,className:"daoImage",alt:"logo"}),t.default.createElement("div",{className:"daoName"},e.name),t.default.createElement("div",{className:"daoSymbol"},e.symbol),t.default.createElement("div",{className:"daoPrice"},e.price)),t.default.createElement("div",{className:"bottomContent"},t.default.createElement("div",{className:"daoChange"},e.change),t.default.createElement("div",{className:"daoChart"},e.chart)));c(".TickerContainer{display:flex;flex-direction:row;overflow-x:hidden;padding:6px;width:100%}");module.exports=()=>{const[n,a]=e.useState([]);e.useEffect((()=>{i()}),[]);const i=async()=>{const e=await fetch("https://daohq-ticker-ick3pj1ry-daohq.vercel.app/api/ticker").then((e=>e.json()));o(e)},o=e=>{console.log(e),a(e.map((e=>({name:e.historicalFinancials.Dao.name||"name N/A",image:e.historicalFinancials.Dao.daoImage||"img N/A",symbol:e.historicalFinancials.Dao.tokenSymbol||"symbol N/A",price:Math.round(1e3*e.historicalFinancials.Dao.tokenPrice)/1e3||"$-.--",change24hr:e.historicalFinancials.Dao.percentChange24hr||"change N/A",chart:"N/A"}))))};return t.default.createElement("div",{className:"TickerContainer"},t.default.createElement(d,{speed:20,pauseOnHover:!1,pauseOnClick:!0,gradient:!1},n.map((e=>t.default.createElement(s,{key:e.name,dao:e})))))};
|
package/package.json
CHANGED
package/src/components/Dao.css
CHANGED
package/src/components/Dao.js
CHANGED
|
@@ -8,6 +8,7 @@ const Dao = ({ dao }) => {
|
|
|
8
8
|
return (
|
|
9
9
|
<div className="daoContainer" onClick={DaoClick}>
|
|
10
10
|
<div className="topContent">
|
|
11
|
+
<img src={image} className="daoImage" alt="logo" />
|
|
11
12
|
<div className="daoName">{dao.name}</div>
|
|
12
13
|
<div className="daoSymbol">{dao.symbol}</div>
|
|
13
14
|
<div className="daoPrice">{dao.price}</div>
|
package/src/components/Ticker.js
CHANGED
|
@@ -1,88 +1,133 @@
|
|
|
1
|
-
import React from "react";
|
|
1
|
+
import React, { useState, useEffect } from "react";
|
|
2
2
|
import Marquee from "react-fast-marquee";
|
|
3
3
|
import Dao from "./Dao";
|
|
4
4
|
import "./Ticker.css";
|
|
5
5
|
|
|
6
|
-
const Ticker = (
|
|
7
|
-
const
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
},
|
|
50
|
-
{
|
|
51
|
-
name: "Ape Coin6",
|
|
52
|
-
symbol: "$APE6*",
|
|
53
|
-
price: "$23.02",
|
|
54
|
-
change: "+0.85%",
|
|
55
|
-
chart: "chart",
|
|
56
|
-
},
|
|
57
|
-
{
|
|
58
|
-
name: "Ape Coin7",
|
|
59
|
-
symbol: "$APE7*",
|
|
60
|
-
price: "$23.02",
|
|
61
|
-
change: "+0.85%",
|
|
62
|
-
chart: "chart",
|
|
63
|
-
},
|
|
64
|
-
];
|
|
65
|
-
if (format === "wide") {
|
|
66
|
-
return (
|
|
67
|
-
<div className="TickerContainer">
|
|
68
|
-
<Dao key={data[0].symbol} dao={data[0]} />
|
|
69
|
-
<Marquee
|
|
70
|
-
speed={20}
|
|
71
|
-
pauseOnHover={false}
|
|
72
|
-
pauseOnClick
|
|
73
|
-
gradient={false}
|
|
74
|
-
>
|
|
75
|
-
{data.slice(1).map((dao) => {
|
|
76
|
-
return <Dao key={dao.symbol} dao={dao} />;
|
|
77
|
-
})}
|
|
78
|
-
</Marquee>
|
|
79
|
-
</div>
|
|
6
|
+
const Ticker = () => {
|
|
7
|
+
const API_URL =
|
|
8
|
+
"https://daohq-ticker-ick3pj1ry-daohq.vercel.app/api/ticker";
|
|
9
|
+
|
|
10
|
+
const [daos, setDaos] = useState([]);
|
|
11
|
+
|
|
12
|
+
useEffect(() => {
|
|
13
|
+
// const interval = setInterval(() => {
|
|
14
|
+
// console.log("Logs every 5s");
|
|
15
|
+
// }, 5000);
|
|
16
|
+
|
|
17
|
+
getApiData();
|
|
18
|
+
|
|
19
|
+
// return () => clearInterval(interval);
|
|
20
|
+
}, []);
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* retrieves from api endpoint asynchonously
|
|
24
|
+
*/
|
|
25
|
+
const getApiData = async () => {
|
|
26
|
+
const response = await fetch(API_URL).then((res) => res.json());
|
|
27
|
+
getDaos(response);
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
/**
|
|
31
|
+
* set state to relevent daos data
|
|
32
|
+
*/
|
|
33
|
+
const getDaos = (response) => {
|
|
34
|
+
console.log(response);
|
|
35
|
+
setDaos(
|
|
36
|
+
response.map((dao) => ({
|
|
37
|
+
name: dao.historicalFinancials.Dao.name || "name N/A",
|
|
38
|
+
image: dao.historicalFinancials.Dao.daoImage || "img N/A",
|
|
39
|
+
symbol:
|
|
40
|
+
dao.historicalFinancials.Dao.tokenSymbol || "symbol N/A",
|
|
41
|
+
price:
|
|
42
|
+
Math.round(1000 * dao.historicalFinancials.Dao.tokenPrice) /
|
|
43
|
+
1000 || "$-.--",
|
|
44
|
+
change24hr:
|
|
45
|
+
dao.historicalFinancials.Dao.percentChange24hr ||
|
|
46
|
+
"change N/A",
|
|
47
|
+
chart: "N/A",
|
|
48
|
+
}))
|
|
80
49
|
);
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
// const data = [
|
|
53
|
+
// {
|
|
54
|
+
// name: "DAOHQIndex",
|
|
55
|
+
// symbol: "$DAOHQIDX*",
|
|
56
|
+
// price: "$9.99",
|
|
57
|
+
// change: "+0.99",
|
|
58
|
+
// chart: "chart",
|
|
59
|
+
// },
|
|
60
|
+
// {
|
|
61
|
+
// name: "Ape Coin1",
|
|
62
|
+
// symbol: "$APE1*",
|
|
63
|
+
// price: "$23.02",
|
|
64
|
+
// change: "+0.85%",
|
|
65
|
+
// chart: "chart",
|
|
66
|
+
// },
|
|
67
|
+
// {
|
|
68
|
+
// name: "Ape Coin2",
|
|
69
|
+
// symbol: "$APE2*",
|
|
70
|
+
// price: "$23.02",
|
|
71
|
+
// change: "+0.85%",
|
|
72
|
+
// chart: "chart",
|
|
73
|
+
// },
|
|
74
|
+
// {
|
|
75
|
+
// name: "Ape Coin3",
|
|
76
|
+
// symbol: "$APE3*",
|
|
77
|
+
// price: "$23.02",
|
|
78
|
+
// change: "+0.85%",
|
|
79
|
+
// chart: "chart",
|
|
80
|
+
// },
|
|
81
|
+
// {
|
|
82
|
+
// name: "Ape Coin4",
|
|
83
|
+
// symbol: "$APE4*",
|
|
84
|
+
// price: "$23.02",
|
|
85
|
+
// change: "+0.85%",
|
|
86
|
+
// chart: "chart",
|
|
87
|
+
// },
|
|
88
|
+
// {
|
|
89
|
+
// name: "Ape Coin5",
|
|
90
|
+
// symbol: "$APE5*",
|
|
91
|
+
// price: "$23.02",
|
|
92
|
+
// change: "+0.85%",
|
|
93
|
+
// chart: "chart",
|
|
94
|
+
// },
|
|
95
|
+
// {
|
|
96
|
+
// name: "Ape Coin6",
|
|
97
|
+
// symbol: "$APE6*",
|
|
98
|
+
// price: "$23.02",
|
|
99
|
+
// change: "+0.85%",
|
|
100
|
+
// chart: "chart",
|
|
101
|
+
// },
|
|
102
|
+
// {
|
|
103
|
+
// name: "Ape Coin7",
|
|
104
|
+
// symbol: "$APE7*",
|
|
105
|
+
// price: "$23.02",
|
|
106
|
+
// change: "+0.85%",
|
|
107
|
+
// chart: "chart",
|
|
108
|
+
// },
|
|
109
|
+
// ];
|
|
110
|
+
// if (format === "wide") {
|
|
111
|
+
return (
|
|
112
|
+
<div className="TickerContainer">
|
|
113
|
+
{/* <Dao key={data[0].symbol} dao={data[0]} /> */}
|
|
114
|
+
<Marquee
|
|
115
|
+
speed={20}
|
|
116
|
+
pauseOnHover={false}
|
|
117
|
+
pauseOnClick
|
|
118
|
+
gradient={false}
|
|
119
|
+
>
|
|
120
|
+
{daos.map((dao) => {
|
|
121
|
+
return <Dao key={dao.name} dao={dao} />;
|
|
122
|
+
})}
|
|
123
|
+
</Marquee>
|
|
124
|
+
</div>
|
|
125
|
+
);
|
|
126
|
+
// } else if (format === "card") {
|
|
127
|
+
// return <div>Card Format Here</div>;
|
|
128
|
+
// } else {
|
|
129
|
+
// return <div>Invalid format input</div>;
|
|
130
|
+
// }
|
|
86
131
|
};
|
|
87
132
|
|
|
88
133
|
export default Ticker;
|