Add market page

package.json

@@ -35,6 +35,7 @@
     "react-router-dom": "^6.3.0",
     "react-scripts": "4.0.1",
     "react-select": "^5.3.2",
+    "react-swipeable-list": "^1.7.0",
     "react-tooltip": "^4.2.21",
     "redux": "^4.2.0",
     "redux-saga": "^1.1.3",

src/assets/fontIcon/opex-icon/config.json

@@ -905,6 +905,36 @@
       "search": [
         "grid"
       ]
+    },
+    {
+      "uid": "fbed8311a5af2a8e5599246d9939a475",
+      "css": "up-micro",
+      "code": 518,
+      "src": "websymbols"
+    },
+    {
+      "uid": "35674c31693db324f2fd6a48f1079263",
+      "css": "down-micro",
+      "code": 519,
+      "src": "websymbols"
+    },
+    {
+      "uid": "8ax1xqcbzz1hobyd4i7f0unwib1bztip",
+      "css": "down-dir",
+      "code": 520,
+      "src": "modernpics"
+    },
+    {
+      "uid": "6ipws8y9gej6vbloufvhi5qux7rluf64",
+      "css": "up-dir",
+      "code": 521,
+      "src": "modernpics"
+    },
+    {
+      "uid": "3e290a111c0f3ee3acbf7b5f17ccc04a",
+      "css": "play",
+      "code": 528,
+      "src": "typicons"
     }
   ]
 }

src/assets/fontIcon/opex-icon/css/opex-icon-codes.css

@@ -104,4 +104,9 @@
 .icon-right-open-1:before { content: '\0203'; } /* 'ȃ' */
 .icon-row:before { content: '\0204'; } /* 'Ȅ' */
 .icon-grid:before { content: '\0205'; } /* 'ȅ' */
+.icon-up-micro:before { content: '\0206'; } /* 'Ȇ' */
+.icon-down-micro:before { content: '\0207'; } /* 'ȇ' */
+.icon-down-dir:before { content: '\0208'; } /* 'Ȉ' */
+.icon-up-dir:before { content: '\0209'; } /* 'ȉ' */
+.icon-play:before { content: '\0210'; } /* 'Ȑ' */
 .icon-cancel-circled2:before { content: '\e801'; } /* '' */

src/assets/fontIcon/opex-icon/css/opex-icon-ie7-codes.css

@@ -104,4 +104,9 @@
 .icon-right-open-1 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = 'ȃ '); }
 .icon-row { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = 'Ȅ '); }
 .icon-grid { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = 'ȅ '); }
+.icon-up-micro { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = 'Ȇ '); }
+.icon-down-micro { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = 'ȇ '); }
+.icon-down-dir { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = 'Ȉ '); }
+.icon-up-dir { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = 'ȉ '); }
+.icon-play { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = 'Ȑ '); }
 .icon-cancel-circled2 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

src/assets/fontIcon/opex-icon/css/opex-icon-ie7.css

@@ -115,4 +115,9 @@
 .icon-right-open-1 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = 'ȃ '); }
 .icon-row { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = 'Ȅ '); }
 .icon-grid { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = 'ȅ '); }
+.icon-up-micro { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = 'Ȇ '); }
+.icon-down-micro { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = 'ȇ '); }
+.icon-down-dir { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = 'Ȉ '); }
+.icon-up-dir { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = 'ȉ '); }
+.icon-play { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = 'Ȑ '); }
 .icon-cancel-circled2 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

src/assets/fontIcon/opex-icon/css/opex-icon.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: 'opex-icon';
-  src: url('../font/opex-icon.eot?5214088');
-  src: url('../font/opex-icon.eot?5214088#iefix') format('embedded-opentype'),
-       url('../font/opex-icon.woff2?5214088') format('woff2'),
-       url('../font/opex-icon.woff?5214088') format('woff'),
-       url('../font/opex-icon.ttf?5214088') format('truetype'),
-       url('../font/opex-icon.svg?5214088#opex-icon') format('svg');
+  src: url('../font/opex-icon.eot?42850643');
+  src: url('../font/opex-icon.eot?42850643#iefix') format('embedded-opentype'),
+       url('../font/opex-icon.woff2?42850643') format('woff2'),
+       url('../font/opex-icon.woff?42850643') format('woff'),
+       url('../font/opex-icon.ttf?42850643') format('truetype'),
+       url('../font/opex-icon.svg?42850643#opex-icon') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -15,7 +15,7 @@
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   @font-face {
     font-family: 'opex-icon';
-    src: url('../font/opex-icon.svg?5214088#opex-icon') format('svg');
+    src: url('../font/opex-icon.svg?42850643#opex-icon') format('svg');
   }
 }
 */
@@ -159,4 +159,9 @@
 .icon-right-open-1:before { content: '\0203'; } /* 'ȃ' */
 .icon-row:before { content: '\0204'; } /* 'Ȅ' */
 .icon-grid:before { content: '\0205'; } /* 'ȅ' */
+.icon-up-micro:before { content: '\0206'; } /* 'Ȇ' */
+.icon-down-micro:before { content: '\0207'; } /* 'ȇ' */
+.icon-down-dir:before { content: '\0208'; } /* 'Ȉ' */
+.icon-up-dir:before { content: '\0209'; } /* 'ȉ' */
+.icon-play:before { content: '\0210'; } /* 'Ȑ' */
 .icon-cancel-circled2:before { content: '\e801'; } /* '' */

src/assets/fontIcon/opex-icon/demo.html

@@ -146,11 +146,11 @@
     }
     @font-face {
       font-family: 'opex-icon';
-      src: url('./font/opex-icon.eot?58960368');
-      src: url('./font/opex-icon.eot?58960368#iefix') format('embedded-opentype'),
-           url('./font/opex-icon.woff?58960368') format('woff'),
-           url('./font/opex-icon.ttf?58960368') format('truetype'),
-           url('./font/opex-icon.svg?58960368#opex-icon') format('svg');
+      src: url('./font/opex-icon.eot?12809373');
+      src: url('./font/opex-icon.eot?12809373#iefix') format('embedded-opentype'),
+           url('./font/opex-icon.woff?12809373') format('woff'),
+           url('./font/opex-icon.ttf?12809373') format('truetype'),
+           url('./font/opex-icon.svg?12809373#opex-icon') format('svg');
       font-weight: normal;
       font-style: normal;
     }
@@ -203,13 +203,13 @@
     </script>
   </head>
   <body>
-    <div class="width-100 header">
+    <div class="container header">
       <h1>opex-icon <small>font demo</small></h1>
       <label class="switch">
         <input type="checkbox" onclick="toggleCodes(this.checked)">show codes
       </label>
     </div>
-    <div class="width-100" id="icons">
+    <div class="container" id="icons">
       <div class="row">
         <div class="span3" title="Code: 0x0100">
           <i class="demo-icon icon-down-open">&#x0100;</i> <span class="i-name">icon-down-open</span><span class="i-code">0x0100</span>
@@ -578,6 +578,23 @@ <h1>opex-icon <small>font demo</small></h1>
         <div class="span3" title="Code: 0x0205">
           <i class="demo-icon icon-grid">&#x0205;</i> <span class="i-name">icon-grid</span><span class="i-code">0x0205</span>
         </div>
+        <div class="span3" title="Code: 0x0206">
+          <i class="demo-icon icon-up-micro">&#x0206;</i> <span class="i-name">icon-up-micro</span><span class="i-code">0x0206</span>
+        </div>
+        <div class="span3" title="Code: 0x0207">
+          <i class="demo-icon icon-down-micro">&#x0207;</i> <span class="i-name">icon-down-micro</span><span class="i-code">0x0207</span>
+        </div>
+        <div class="span3" title="Code: 0x0208">
+          <i class="demo-icon icon-down-dir">&#x0208;</i> <span class="i-name">icon-down-dir</span><span class="i-code">0x0208</span>
+        </div>
+      </div>
+      <div class="row">
+        <div class="span3" title="Code: 0x0209">
+          <i class="demo-icon icon-up-dir">&#x0209;</i> <span class="i-name">icon-up-dir</span><span class="i-code">0x0209</span>
+        </div>
+        <div class="span3" title="Code: 0x0210">
+          <i class="demo-icon icon-play">&#x0210;</i> <span class="i-name">icon-play</span><span class="i-code">0x0210</span>
+        </div>
         <div class="span3" title="Code: 0xe801">
           <i class="demo-icon icon-cancel-circled2">&#xe801;</i> <span class="i-name">icon-cancel-circled2</span><span class="i-code">0xe801</span>
         </div>

src/index.css

@@ -293,6 +293,9 @@ html, body {
     text-decoration: underline;
 }
 
+.overflow-hidden {
+    overflow: hidden;
+}
 .card-bg {
     background-color: var(--cardBody);
     -webkit-transition: background-color 0.7s, background-color 0.4s;

src/main/Mobile/Pages/AllMarket/Sections/AllMarketContent/AllMarketContent.js

@@ -3,21 +3,17 @@ import classes from './AllMarketContent.module.css'
 import ScrollBar from "../../../../../../components/ScrollBar";
 import Footer from "../../../../../../components/Footer/Footer";
 import Swing from "./components/Swing/Swing";
+import MarketStats from "./components/MarketStats/MarketStats";
+import AllMarketInfo from "./components/AllMarketInfo/AllMarketInfo";
 
 const AllMarketContent = () => {
     return (
         <div className={`${classes.container} width-100 column`}>
             <ScrollBar>
-
-
-
-                <Swing/>
-
+               {/* <Swing/>*/}
+                <MarketStats/>
+                <AllMarketInfo/>
                 <Footer/>
-
-
-
-
             </ScrollBar>
         </div>
     );

src/main/Mobile/Pages/AllMarket/Sections/AllMarketContent/components/AllMarketInfo/AllMarketInfo.js

@@ -0,0 +1,61 @@
+import React, {useState} from 'react';
+import {useTranslation} from "react-i18next";
+import classes from "./AllMarketInfo.module.css"
+import {useDispatch, useSelector} from "react-redux";
+import {useGetQuoteCurrencies, useOverview} from "../../../../../../../../queries";
+import AllMarketInfoTable from "./components/AllMarketInfoTable/AllMarketInfoTable";
+import Icon from "../../../../../../../../components/Icon/Icon";
+import Loading from "../../../../../../../../components/Loading/Loading";
+import Error from "../../../../../../../../components/Error/Error";
+import {setMarketInterval} from "../../../../../../../../store/actions";
+
+const AllMarketInfo = () => {
+
+    const {t} = useTranslation();
+    const dispatch = useDispatch();
+
+    const [card, setCard] = useState(false)
+    const [activeCurrency, setActiveCurrency] = useState("")
+
+    const interval = useSelector((state) => state.global.marketInterval)
+    const quote = activeCurrency === "" ? null : activeCurrency
+
+    const {data: overview, isLoading, error} = useOverview(null, interval, quote)
+    const {data: currencies} = useGetQuoteCurrencies()
+
+    const content = () => {
+        if (isLoading) return <div style={{height: "40vh"}}><Loading/></div>
+        if (error) return <div style={{height: "40vh"}}><Error/></div>
+        else return <>
+            {card ?
+                <AllMarketInfoTable data={overview} activeCurrency={activeCurrency}/>
+                :
+                <AllMarketInfoTable data={overview} activeCurrency={activeCurrency}/>
+            }
+        </>
+    }
+
+    return (
+        <div className={`${classes.container} card-bg card-border width-90`}>
+            <div className={`${classes.header} card-header-bg row jc-between ai-center px-3 py-2`}>
+
+                <div className={`row jc-center ai-baseline mr-05 ml-1 cursor-pointer hover-text`} onClick={()=>setActiveCurrency("")}>
+                    <h2 className={`ml-05`}>{t("market.title")}</h2>
+                    <span className={`fs-0-8 mr-1`}>( {t("marketInterval." + interval)} )</span>
+                </div>
+
+                <div className={`row jc-center ai-center mr-1 fs-0-8`}>
+                    {currencies?.map((currency) =>
+                        <span className={`px-2 py-1 rounded-5 cursor-pointer hover-text ${classes.title} ${activeCurrency === currency && classes.active}`} onClick={() => setActiveCurrency(currency)} key={currency}>{t("currency." + currency)}</span>
+                    )}
+                </div>
+
+            </div>
+            <div className={`${classes.content} overflow-hidden`}>
+                {content()}
+            </div>
+        </div>
+    );
+};
+
+export default AllMarketInfo;

src/main/Mobile/Pages/AllMarket/Sections/AllMarketContent/components/AllMarketInfo/AllMarketInfo.module.css

@@ -0,0 +1,16 @@
+.header {
+    /*height: 10vh;*/
+}
+.container {
+    margin: 0 auto 2vh auto;
+
+
+}
+/*.title {
+    background-color: var(--cardBodyAlpha);
+}*/
+
+.active {
+    background-color: var(--activeTitle);
+    color: var(--activeTab);
+}