joeyzheng1412-daohq-ticker-react 1.0.4 → 1.0.7
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.es.js +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/src/components/Dao.css +2 -1
- package/src/components/Dao.js +1 -1
package/dist/index.es.js
CHANGED
|
@@ -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 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,
|
|
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,w=void 0===C?20:C,E=e.delay,N=void 0===E?0:E,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/w:H/w)};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}.daoImage{height:"auto";width:24px}.daoChange,.daoChart,.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:n.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
|
@@ -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 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(
|
|
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}.daoImage{height:"auto";width:24px}.daoChange,.daoChart,.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:e.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,7 +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
|
+
<img src={dao.image} className="daoImage" alt="logo" />
|
|
12
12
|
<div className="daoName">{dao.name}</div>
|
|
13
13
|
<div className="daoSymbol">{dao.symbol}</div>
|
|
14
14
|
<div className="daoPrice">{dao.price}</div>
|