joeyzheng1412-daohq-ticker-react 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +1 -0
- package/dist/index.es.js +15 -0
- package/dist/index.js +15 -0
- package/package.json +43 -0
- package/rollup.config.js +38 -0
- package/src/components/Dao.css +40 -0
- package/src/components/Dao.js +23 -0
- package/src/components/Ticker.css +7 -0
- package/src/components/Ticker.js +82 -0
- package/src/index.js +3 -0
package/README.md
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
# DAOHQ-Ticker-react
|
package/dist/index.es.js
ADDED
@@ -0,0 +1,15 @@
|
|
1
|
+
import e from"react";var n={};Object.defineProperty(n,"__esModule",{value:!0});var t=e;function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=a(t),i=function(){return i=Object.assign||function(e){for(var n,t=1,a=arguments.length;t<a;t++)for(var r in n=arguments[t])Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);return e},i.apply(this,arguments)};
|
2
|
+
/*! *****************************************************************************
|
3
|
+
Copyright (c) Microsoft Corporation.
|
4
|
+
|
5
|
+
Permission to use, copy, modify, and/or distribute this software for any
|
6
|
+
purpose with or without fee is hereby granted.
|
7
|
+
|
8
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
9
|
+
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
10
|
+
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
11
|
+
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
12
|
+
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
13
|
+
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
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 o=n.default=function(e){var n,a,o,l,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,h=void 0!==f&&f,v=e.pauseOnClick,y=void 0!==v&&v,g=e.direction,C=void 0===g?"left":g,E=e.speed,b=void 0===E?20:E,x=e.delay,w=void 0===x?0:x,A=e.loop,N=void 0===A?0:A,$=e.gradient,k=void 0===$||$,P=e.gradientColor,O=void 0===P?[255,255,255]:P,S=e.gradientWidth,q=void 0===S?200:S,T=e.onFinish,H=e.onCycleComplete,j=e.children,z=t.useState(0),B=z[0],R=z[1],D=t.useState(0),I=D[0],L=D[1],X=t.useState(0),F=X[0],M=X[1],Q=t.useState(!1),_=Q[0],W=Q[1],Z=t.useRef(null),G=t.useRef(null),J=function(){G.current&&Z.current&&(R(Z.current.getBoundingClientRect().width),L(G.current.getBoundingClientRect().width)),M(I<B?B/b:I/b)};t.useEffect((function(){return J(),window.addEventListener("resize",J),function(){window.removeEventListener("resize",J)}})),t.useEffect((function(){W(!0)}),[]);var K="rgba("+O[0]+", "+O[1]+", "+O[2];return r.default.createElement(t.Fragment,null,_?r.default.createElement("div",{ref:Z,style:i(i({},c),(n={},n["--pause-on-hover"]=h?"paused":"running",n["--pause-on-click"]=y?"paused":"running",n)),className:m+" marquee-container"},k&&r.default.createElement("div",{style:(a={},a["--gradient-color"]=K+", 1), "+K+", 0)",a["--gradient-width"]="number"==typeof q?q+"px":q,a),className:"overlay"}),r.default.createElement("div",{ref:G,style:(o={},o["--play"]=p?"running":"paused",o["--direction"]="left"===C?"normal":"reverse",o["--duration"]=F+"s",o["--delay"]=w+"s",o["--iteration-count"]=N?""+N:"infinite",o),className:"marquee",onAnimationIteration:H,onAnimationEnd:T},j),r.default.createElement("div",{style:(l={},l["--play"]=p?"running":"paused",l["--direction"]="left"===C?"normal":"reverse",l["--duration"]=F+"s",l["--delay"]=w+"s",l["--iteration-count"]=N?""+N:"infinite",l),className:"marquee"},j)):null)};function l(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&a.firstChild?a.insertBefore(r,a.firstChild):a.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}l(".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,.daoName,.daoPrice,.daoSymbol{color:#fff}");const d=({dao:n})=>e.createElement("div",{className:"daoContainer",onClick:()=>{console.log(n.name)}},e.createElement("div",{className:"topContent"},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)));l(".TickerContainer{display:flex;flex-direction:row;overflow-x:hidden;padding:6px;width:100%}");const c=()=>{const n=[{name:"DAOHQIndex",symbol:"$DAOHQIDX*",price:"$9.99",change:"+0.99",chart:"chart"},{name:"Ape Coin1",symbol:"$APE1*",price:"$23.02",change:"+0.85%",chart:"chart"},{name:"Ape Coin2",symbol:"$APE2*",price:"$23.02",change:"+0.85%",chart:"chart"},{name:"Ape Coin3",symbol:"$APE3*",price:"$23.02",change:"+0.85%",chart:"chart"},{name:"Ape Coin4",symbol:"$APE4*",price:"$23.02",change:"+0.85%",chart:"chart"},{name:"Ape Coin5",symbol:"$APE5*",price:"$23.02",change:"+0.85%",chart:"chart"},{name:"Ape Coin6",symbol:"$APE6*",price:"$23.02",change:"+0.85%",chart:"chart"},{name:"Ape Coin7",symbol:"$APE7*",price:"$23.02",change:"+0.85%",chart:"chart"}];return e.createElement("div",{className:"TickerContainer"},e.createElement(d,{key:n[0].symbol,dao:n[0]}),e.createElement(o,{speed:20,pauseOnHover:!1,pauseOnClick:!0,gradient:!1},n.slice(1).map((n=>e.createElement(d,{key:n.symbol,dao:n})))))};export{c as default};
|
package/dist/index.js
ADDED
@@ -0,0 +1,15 @@
|
|
1
|
+
"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=e(require("react")),t={};Object.defineProperty(t,"__esModule",{value:!0});var a=n.default;function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=r(a),o=function(){return o=Object.assign||function(e){for(var n,t=1,a=arguments.length;t<a;t++)for(var r in n=arguments[t])Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);return e},o.apply(this,arguments)};
|
2
|
+
/*! *****************************************************************************
|
3
|
+
Copyright (c) Microsoft Corporation.
|
4
|
+
|
5
|
+
Permission to use, copy, modify, and/or distribute this software for any
|
6
|
+
purpose with or without fee is hereby granted.
|
7
|
+
|
8
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
9
|
+
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
10
|
+
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
11
|
+
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
12
|
+
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
13
|
+
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
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 l=t.default=function(e){var n,t,r,l,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,h=void 0!==p&&p,v=e.pauseOnClick,y=void 0!==v&&v,g=e.direction,C=void 0===g?"left":g,E=e.speed,b=void 0===E?20:E,x=e.delay,w=void 0===x?0:x,A=e.loop,N=void 0===A?0:A,$=e.gradient,k=void 0===$||$,P=e.gradientColor,O=void 0===P?[255,255,255]:P,q=e.gradientWidth,S=void 0===q?200:q,T=e.onFinish,j=e.onCycleComplete,H=e.children,z=a.useState(0),B=z[0],R=z[1],D=a.useState(0),I=D[0],L=D[1],X=a.useState(0),F=X[0],M=X[1],Q=a.useState(!1),_=Q[0],W=Q[1],Z=a.useRef(null),G=a.useRef(null),J=function(){G.current&&Z.current&&(R(Z.current.getBoundingClientRect().width),L(G.current.getBoundingClientRect().width)),M(I<B?B/b:I/b)};a.useEffect((function(){return J(),window.addEventListener("resize",J),function(){window.removeEventListener("resize",J)}})),a.useEffect((function(){W(!0)}),[]);var K="rgba("+O[0]+", "+O[1]+", "+O[2];return i.default.createElement(a.Fragment,null,_?i.default.createElement("div",{ref:Z,style:o(o({},c),(n={},n["--pause-on-hover"]=h?"paused":"running",n["--pause-on-click"]=y?"paused":"running",n)),className:u+" marquee-container"},k&&i.default.createElement("div",{style:(t={},t["--gradient-color"]=K+", 1), "+K+", 0)",t["--gradient-width"]="number"==typeof S?S+"px":S,t),className:"overlay"}),i.default.createElement("div",{ref:G,style:(r={},r["--play"]=f?"running":"paused",r["--direction"]="left"===C?"normal":"reverse",r["--duration"]=F+"s",r["--delay"]=w+"s",r["--iteration-count"]=N?""+N:"infinite",r),className:"marquee",onAnimationIteration:j,onAnimationEnd:T},H),i.default.createElement("div",{style:(l={},l["--play"]=f?"running":"paused",l["--direction"]="left"===C?"normal":"reverse",l["--duration"]=F+"s",l["--delay"]=w+"s",l["--iteration-count"]=N?""+N:"infinite",l),className:"marquee"},H)):null)};function d(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&a.firstChild?a.insertBefore(r,a.firstChild):a.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}d(".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,.daoName,.daoPrice,.daoSymbol{color:#fff}");const c=({dao:e})=>n.default.createElement("div",{className:"daoContainer",onClick:()=>{console.log(e.name)}},n.default.createElement("div",{className:"topContent"},n.default.createElement("div",{className:"daoName"},e.name),n.default.createElement("div",{className:"daoSymbol"},e.symbol),n.default.createElement("div",{className:"daoPrice"},e.price)),n.default.createElement("div",{className:"bottomContent"},n.default.createElement("div",{className:"daoChange"},e.change),n.default.createElement("div",{className:"daoChart"},e.chart)));d(".TickerContainer{display:flex;flex-direction:row;overflow-x:hidden;padding:6px;width:100%}");module.exports=()=>{const e=[{name:"DAOHQIndex",symbol:"$DAOHQIDX*",price:"$9.99",change:"+0.99",chart:"chart"},{name:"Ape Coin1",symbol:"$APE1*",price:"$23.02",change:"+0.85%",chart:"chart"},{name:"Ape Coin2",symbol:"$APE2*",price:"$23.02",change:"+0.85%",chart:"chart"},{name:"Ape Coin3",symbol:"$APE3*",price:"$23.02",change:"+0.85%",chart:"chart"},{name:"Ape Coin4",symbol:"$APE4*",price:"$23.02",change:"+0.85%",chart:"chart"},{name:"Ape Coin5",symbol:"$APE5*",price:"$23.02",change:"+0.85%",chart:"chart"},{name:"Ape Coin6",symbol:"$APE6*",price:"$23.02",change:"+0.85%",chart:"chart"},{name:"Ape Coin7",symbol:"$APE7*",price:"$23.02",change:"+0.85%",chart:"chart"}];return n.default.createElement("div",{className:"TickerContainer"},n.default.createElement(c,{key:e[0].symbol,dao:e[0]}),n.default.createElement(l,{speed:20,pauseOnHover:!1,pauseOnClick:!0,gradient:!1},e.slice(1).map((e=>n.default.createElement(c,{key:e.symbol,dao:e})))))};
|
package/package.json
ADDED
@@ -0,0 +1,43 @@
|
|
1
|
+
{
|
2
|
+
"name": "joeyzheng1412-daohq-ticker-react",
|
3
|
+
"version": "1.0.0",
|
4
|
+
"description": "",
|
5
|
+
"main": "dist/index.js",
|
6
|
+
"scripts": {
|
7
|
+
"build": "rollup -c",
|
8
|
+
"start": "rollup -c -w",
|
9
|
+
"test": "react-scripts test",
|
10
|
+
"eject": "react-scripts eject"
|
11
|
+
},
|
12
|
+
"repository": {
|
13
|
+
"type": "git",
|
14
|
+
"url": "git+https://github.com/DAO-HQ/DAOHQ-Ticker-react.git"
|
15
|
+
},
|
16
|
+
"author": "DAOHQ",
|
17
|
+
"license": "ISC",
|
18
|
+
"bugs": {
|
19
|
+
"url": "https://github.com/DAO-HQ/DAOHQ-Ticker-react/issues"
|
20
|
+
},
|
21
|
+
"homepage": "https://github.com/DAO-HQ/DAOHQ-Ticker-react#readme",
|
22
|
+
"devDependencies": {
|
23
|
+
"@babel/core": "^7.18.5",
|
24
|
+
"@babel/preset-react": "^7.17.12",
|
25
|
+
"@rollup/plugin-babel": "^5.3.1",
|
26
|
+
"@rollup/plugin-commonjs": "^22.0.0",
|
27
|
+
"@rollup/plugin-node-resolve": "^13.3.0",
|
28
|
+
"babel-loader": "^8.2.5",
|
29
|
+
"react": "^18.2.0",
|
30
|
+
"react-dom": "^18.2.0",
|
31
|
+
"rollup": "^2.75.7",
|
32
|
+
"rollup-plugin-peer-deps-external": "^2.2.4",
|
33
|
+
"rollup-plugin-postcss": "^4.0.2",
|
34
|
+
"rollup-plugin-terser": "^7.0.2"
|
35
|
+
},
|
36
|
+
"peerDependencies": {
|
37
|
+
"react": "^18.2.0",
|
38
|
+
"react-dom": "^18.2.0"
|
39
|
+
},
|
40
|
+
"dependencies": {
|
41
|
+
"react-fast-marquee": "^1.3.2"
|
42
|
+
}
|
43
|
+
}
|
package/rollup.config.js
ADDED
@@ -0,0 +1,38 @@
|
|
1
|
+
import babel from "@rollup/plugin-babel";
|
2
|
+
import resolve from "@rollup/plugin-node-resolve";
|
3
|
+
import external from "rollup-plugin-peer-deps-external";
|
4
|
+
import postcss from "rollup-plugin-postcss";
|
5
|
+
import commonjs from "@rollup/plugin-commonjs";
|
6
|
+
|
7
|
+
import { terser } from "rollup-plugin-terser";
|
8
|
+
|
9
|
+
export default [
|
10
|
+
{
|
11
|
+
input: "./src/index.js",
|
12
|
+
output: [
|
13
|
+
{
|
14
|
+
file: "dist/index.js",
|
15
|
+
format: "cjs",
|
16
|
+
},
|
17
|
+
{
|
18
|
+
file: "dist/index.es.js",
|
19
|
+
format: "es",
|
20
|
+
exports: "named",
|
21
|
+
},
|
22
|
+
],
|
23
|
+
plugins: [
|
24
|
+
postcss({
|
25
|
+
plugins: [],
|
26
|
+
minimize: true,
|
27
|
+
}),
|
28
|
+
babel({
|
29
|
+
exclude: "node_modules/**",
|
30
|
+
presets: ["@babel/preset-react"],
|
31
|
+
}),
|
32
|
+
external(),
|
33
|
+
resolve(),
|
34
|
+
terser(),
|
35
|
+
commonjs(),
|
36
|
+
],
|
37
|
+
},
|
38
|
+
];
|
@@ -0,0 +1,40 @@
|
|
1
|
+
.daoContainer {
|
2
|
+
height: 60px;
|
3
|
+
width: 200px;
|
4
|
+
|
5
|
+
background: black;
|
6
|
+
display: flex;
|
7
|
+
flex-direction: column;
|
8
|
+
border: 2px solid gray;
|
9
|
+
padding: 8px;
|
10
|
+
}
|
11
|
+
|
12
|
+
.topContent {
|
13
|
+
display: flex;
|
14
|
+
flex-direction: row;
|
15
|
+
}
|
16
|
+
|
17
|
+
.bottomContent {
|
18
|
+
display: flex;
|
19
|
+
flex-direction: row;
|
20
|
+
}
|
21
|
+
|
22
|
+
.daoName {
|
23
|
+
color: white;
|
24
|
+
}
|
25
|
+
|
26
|
+
.daoSymbol {
|
27
|
+
color: white;
|
28
|
+
}
|
29
|
+
|
30
|
+
.daoPrice {
|
31
|
+
color: white;
|
32
|
+
}
|
33
|
+
|
34
|
+
.daoChange {
|
35
|
+
color: white;
|
36
|
+
}
|
37
|
+
|
38
|
+
.daoChart {
|
39
|
+
color: white;
|
40
|
+
}
|
@@ -0,0 +1,23 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import "./Dao.css";
|
3
|
+
|
4
|
+
const Dao = ({ dao }) => {
|
5
|
+
const DaoClick = () => {
|
6
|
+
console.log(dao.name);
|
7
|
+
};
|
8
|
+
return (
|
9
|
+
<div className="daoContainer" onClick={DaoClick}>
|
10
|
+
<div className="topContent">
|
11
|
+
<div className="daoName">{dao.name}</div>
|
12
|
+
<div className="daoSymbol">{dao.symbol}</div>
|
13
|
+
<div className="daoPrice">{dao.price}</div>
|
14
|
+
</div>
|
15
|
+
<div className="bottomContent">
|
16
|
+
<div className="daoChange">{dao.change}</div>
|
17
|
+
<div className="daoChart">{dao.chart}</div>
|
18
|
+
</div>
|
19
|
+
</div>
|
20
|
+
);
|
21
|
+
};
|
22
|
+
|
23
|
+
export default Dao;
|
@@ -0,0 +1,82 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import Marquee from "react-fast-marquee";
|
3
|
+
import Dao from "./Dao";
|
4
|
+
import "./Ticker.css";
|
5
|
+
|
6
|
+
const Ticker = () => {
|
7
|
+
const data = [
|
8
|
+
{
|
9
|
+
name: "DAOHQIndex",
|
10
|
+
symbol: "$DAOHQIDX*",
|
11
|
+
price: "$9.99",
|
12
|
+
change: "+0.99",
|
13
|
+
chart: "chart",
|
14
|
+
},
|
15
|
+
{
|
16
|
+
name: "Ape Coin1",
|
17
|
+
symbol: "$APE1*",
|
18
|
+
price: "$23.02",
|
19
|
+
change: "+0.85%",
|
20
|
+
chart: "chart",
|
21
|
+
},
|
22
|
+
{
|
23
|
+
name: "Ape Coin2",
|
24
|
+
symbol: "$APE2*",
|
25
|
+
price: "$23.02",
|
26
|
+
change: "+0.85%",
|
27
|
+
chart: "chart",
|
28
|
+
},
|
29
|
+
{
|
30
|
+
name: "Ape Coin3",
|
31
|
+
symbol: "$APE3*",
|
32
|
+
price: "$23.02",
|
33
|
+
change: "+0.85%",
|
34
|
+
chart: "chart",
|
35
|
+
},
|
36
|
+
{
|
37
|
+
name: "Ape Coin4",
|
38
|
+
symbol: "$APE4*",
|
39
|
+
price: "$23.02",
|
40
|
+
change: "+0.85%",
|
41
|
+
chart: "chart",
|
42
|
+
},
|
43
|
+
{
|
44
|
+
name: "Ape Coin5",
|
45
|
+
symbol: "$APE5*",
|
46
|
+
price: "$23.02",
|
47
|
+
change: "+0.85%",
|
48
|
+
chart: "chart",
|
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
|
+
return (
|
66
|
+
<div className="TickerContainer">
|
67
|
+
<Dao key={data[0].symbol} dao={data[0]} />
|
68
|
+
<Marquee
|
69
|
+
speed={20}
|
70
|
+
pauseOnHover={false}
|
71
|
+
pauseOnClick
|
72
|
+
gradient={false}
|
73
|
+
>
|
74
|
+
{data.slice(1).map((dao) => {
|
75
|
+
return <Dao key={dao.symbol} dao={dao} />;
|
76
|
+
})}
|
77
|
+
</Marquee>
|
78
|
+
</div>
|
79
|
+
);
|
80
|
+
};
|
81
|
+
|
82
|
+
export default Ticker;
|
package/src/index.js
ADDED