Fix/control center (#19)

* fix(control center): remote tiktok banner * fix(control center): change action of btn download owallet * fix(control center): change action of swap button
oraichain · Oct 2, 2024 · 13b0aea · 13b0aea
1 parent 3a62bad
commit 13b0aea
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 65 deletions.
diff --git a/src/assets/images/banner-tiktok.jpg b/src/assets/images/banner-tiktok.jpg
diff --git a/src/pages/ControlCenter/components/control-center-articles.tsx b/src/pages/ControlCenter/components/control-center-articles.tsx
@@ -1,7 +1,6 @@
 import cn from 'classnames/bind';
 import { Link } from 'react-router-dom';
 
-import TiktokBanner from 'assets/images/banner-tiktok.jpg';
 import styles from '../index.module.scss';
 
 const cx = cn.bind(styles);
@@ -139,12 +138,6 @@ const ControlCenterArticles = () => {
           </div>
         </div>
       </div>
-      <Link
-        to="https://blog.orai.io/introducing-oraichains-official-tiktok-and-kickoff-campaign-9cb3e4f397d?source=collection_home---4------0-----------------------"
-        target="blank"
-      >
-        <img src={TiktokBanner} alt="cover" className={cx('large-banner')} width={826} height={280} />
-      </Link>
     </>
   );
 };

diff --git a/src/pages/ControlCenter/index.module.scss b/src/pages/ControlCenter/index.module.scss
@@ -509,14 +509,6 @@
   }
 }
 
-.large-banner {
-  margin-top: 32px;
-  width: 100%;
-  height: auto;
-  object-fit: 'cover';
-  border-radius: 8px;
-}
-
 @include mobile {
   .control-center {
     margin: 76px 0 60px;

diff --git a/src/pages/ControlCenter/index.tsx b/src/pages/ControlCenter/index.tsx
@@ -1,9 +1,12 @@
 import cn from 'classnames/bind';
 import { useState, useEffect } from 'react';
+import { isMobile } from '@walletconnect/browser-utils';
+import { Link } from 'react-router-dom';
 
 import Background from 'assets/images/bg-control-center.jpg';
 import { ReactComponent as ArrowRight } from 'assets/icons/arrow-right-2.svg';
 import { Button } from 'components/Button';
+import ModalDownloadOwallet from 'components/Modals/ModalDownloadOwallet/ModalDownloadOwallet';
 import ControlCenterArticles from './components/control-center-articles';
 import { GeneralInfoItem, PriceItem, ProposalItem, TokenActionItem } from './components/control-center-item';
 import { prices, tokenAction } from './constant';
@@ -17,6 +20,8 @@ const ControlCenter = () => {
   const [data, setData] = useState<any>([]);
   const [mainnetData, setMainnetData] = useState<any>([]);
   const [loading, setLoading] = useState(true);
+  const [isOpenQrCodeOwallet, setIsOpenQrCodeOwallet] = useState(false);
+  const mobileMode = isMobile();
 
   useEffect(() => {
     fetch(API_URL)
@@ -32,68 +37,72 @@ const ControlCenter = () => {
   }, []);
 
   return (
-    <div className={cx('control-center')}>
-      <div className={cx('hero')}>
-        <div className={cx('content')}>
-          <h3 className={cx('big-title')}>Oraichain Control Center</h3>
-          <div className={cx('hero-grid')}>
-            {loading ? (
-              <div className={cx('lds-dual-ring')} />
-            ) : (
-              <div className={cx('hero-grid-content', 'grid')}>
-                {mainnetData.length > 0 &&
-                  mainnetData.map((item: any, index: any) => <GeneralInfoItem item={item} key={index} />)}
+    <>
+      <div className={cx('control-center')}>
+        <div className={cx('hero')}>
+          <div className={cx('content')}>
+            <h3 className={cx('big-title')}>Oraichain Control Center</h3>
+            <div className={cx('hero-grid')}>
+              {loading ? (
+                <div className={cx('lds-dual-ring')} />
+              ) : (
+                <div className={cx('hero-grid-content', 'grid')}>
+                  {mainnetData.length > 0 &&
+                    mainnetData.map((item: any, index: any) => <GeneralInfoItem item={item} key={index} />)}
+                </div>
+              )}
+            </div>
+            {!mobileMode && (
+              <div style={{ marginTop: 24 }}>
+                <Button
+                  type="primary"
+                  onClick={() => {
+                    // window.location.href = 'https://orai.io/ecosystem';
+                    setIsOpenQrCodeOwallet(true);
+                  }}
+                  style={{ paddingRight: 20, paddingLeft: 20 }}
+                >
+                  Download OWallet <ArrowRight style={{ marginLeft: 8 }} />
+                </Button>
               </div>
             )}
           </div>
-          <div style={{ marginTop: 24 }}>
-            <Button
-              type="primary"
-              onClick={() => {
-                window.location.href = 'https://orai.io/ecosystem';
-              }}
-              style={{ paddingRight: 20, paddingLeft: 20 }}
-            >
-              Download OWallet <ArrowRight style={{ marginLeft: 8 }} />
-            </Button>
-          </div>
-        </div>
-        <img className={cx('hero-bg')} src={Background} alt="control center background" height={600} />
-      </div>
-      <div className={cx('token-action-section')}>
-        <div className={cx('token-action-wrapper', 'grid')}>
-          {tokenAction.map((item: any, index: any) => (
-            <TokenActionItem item={item} key={index} />
-          ))}
+          <img className={cx('hero-bg')} src={Background} alt="control center background" height={600} />
         </div>
-      </div>
-      <div className={cx('container-info')}>
-        <div className={cx('proposal-section')}>
-          <span className={cx('sec-title')}>Governance proposals</span>
-          <div className={cx('proposals-list', 'grid')}>
-            {data?.proposal?.map((item: any, index: any) => (
-              <ProposalItem item={item} key={index} />
+        <div className={cx('token-action-section')}>
+          <div className={cx('token-action-wrapper', 'grid')}>
+            {tokenAction.map((item: any, index: any) => (
+              <TokenActionItem item={item} key={index} />
             ))}
           </div>
         </div>
-        <div className={cx('price-section')}>
-          <span className={cx('sec-title')}>Token Price</span>
-          <div className={cx('tokens-list', 'grid')}>
-            {prices.map((item: any, index: any) => (
-              <PriceItem item={item} key={index} priceData={data?.price} />
-            ))}
-            <div className={cx('tokens-wrapper')}>
-              <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: '100%' }}>
-                <a href="https://app.oraidex.io/universalswap" target="blank" style={{ color: '#B798EA' }}>
-                  Swap
-                </a>
+        <div className={cx('container-info')}>
+          <div className={cx('proposal-section')}>
+            <span className={cx('sec-title')}>Governance proposals</span>
+            <div className={cx('proposals-list', 'grid')}>
+              {data?.proposal?.map((item: any, index: any) => (
+                <ProposalItem item={item} key={index} />
+              ))}
+            </div>
+          </div>
+          <div className={cx('price-section')}>
+            <span className={cx('sec-title')}>Token Price</span>
+            <div className={cx('tokens-list', 'grid')}>
+              {prices.map((item: any, index: any) => (
+                <PriceItem item={item} key={index} priceData={data?.price} />
+              ))}
+              <div className={cx('tokens-wrapper')}>
+                <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: '100%' }}>
+                  <Link to="/" style={{ color: '#B798EA' }}>Swap</Link>
+                </div>
               </div>
             </div>
           </div>
+          <ControlCenterArticles />
         </div>
-        <ControlCenterArticles />
       </div>
-    </div>
+      {isOpenQrCodeOwallet && <ModalDownloadOwallet close={() => setIsOpenQrCodeOwallet(false)} />}
+    </>
   );
 };