Skip to content

Commit

Permalink
feat(control center): add page (#17)
Browse files Browse the repository at this point in the history
  • Loading branch information
@quanpt239
quanpt239 authored Sep 27, 2024
1 parent 9ce74dd commit b77cc65
Show file tree
Hide file tree
Showing 12 changed files with 1,036 additions and 0 deletions.
11 changes: 11 additions & 0 deletions src/assets/icons/arrow-right-2.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 10 additions & 0 deletions src/assets/icons/control-center.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/banner-tiktok.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/bg-control-center.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions src/layouts/Sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import { ReactComponent as OrchaiIcon } from 'assets/icons/logo_orchai.svg';
import { ReactComponent as OraiStakingIcon } from 'assets/icons/orai_staking.svg';
import { ReactComponent as OwalletIcon } from 'assets/icons/logo_owallet.svg';
import { ReactComponent as TimeIcon } from 'assets/icons/time.svg';
import { ReactComponent as ControlCenterIcon } from 'assets/icons/control-center.svg';
import classNames from 'classnames';
import ModalDownloadOwallet from 'components/Modals/ModalDownloadOwallet/ModalDownloadOwallet';
import useTheme from 'hooks/useTheme';
Expand Down Expand Up @@ -129,6 +130,7 @@ const Sidebar: React.FC<{}> = React.memo((props) => {
},
<BuyCryptoIcon />
)}
{renderLink('/control-center', 'Control Center', setLink, <ControlCenterIcon />)}
{renderLink('#', 'Co-Harvest', () => {}, <CoHavestIcon />, <TimeIcon />, false, true)}
</div>
</div>
Expand Down
161 changes: 161 additions & 0 deletions src/pages/ControlCenter/components/control-center-articles.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,161 @@
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);

const ControlCenterArticles = () => {
return (
<>
<div className={cx('article-section')}>
<div className={cx('article-section-wrapper-1', 'grid')}>
<div className={cx('article-section-wrapper-2', 'grid')}>
<div>
<span className={cx('sec-title')}>Oraichain Academy</span>
<Link to="https://academy.orai.io/" target="blank">
<img
src="https://academy.orai.io/_next/image?url=https%3A%2F%2Forailabelstudio.storage.googleapis.com%2F2023%2F03%2Foracle_solutions_fix.png&w=3120&q=75"
alt="cover"
style={{
width: '100%',
height: 160,
objectFit: 'contain',
borderRadius: 8
}}
height={160}
width={160}
/>
</Link>
</div>
<div style={{ marginTop: 20 }}>
<span className={cx('sec-title', 'lg:row-span-1')}>Feature dApps</span>
<Link to="https://oraidex.io/" target="blank">
<img
src="https://app.oraidex.io/mascot.png"
alt="cover"
style={{
width: '100%',
height: 160,
objectFit: 'contain',
borderRadius: 8
}}
height={160}
width={160}
/>
</Link>
</div>
</div>
<div className={cx('noti-wrapper')}>
<div className={cx('sec-title')}>Notifications</div>
<div className={cx('noti')}>
<div className={cx('noti-list', 'grid')}>
<div className={cx('noti-card')}>
<img
src="https://i.ibb.co/RNrY547/noti-1.png"
alt="cover"
style={{
width: '100%',
height: 160,
objectFit: 'cover',
borderTopLeftRadius: 8,
borderTopRightRadius: 8
}}
height={160}
width={160}
/>
<div className={cx('noti-content')}>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<p className={cx('noti-title')}>Partnership Announcement: Oraichain X DoraHacks</p>
<p className={cx('noti-text')}>
We are happy to announce Oraichain is partnering with DoraHacks to advance the adoption of its
Layer 1 ecosystem for AI and Data economy. Over the coming ...
</p>
</div>
<Link
to="https://blog.orai.io/partnership-announcement-oraichain-x-dorahacks-1d1bedb30efa"
target="blank"
>
View more
</Link>
</div>
</div>
<div className={cx('noti-card')}>
<img
src="https://i.ibb.co/h9frHD0/noti-2.webp"
alt="cover"
style={{
width: '100%',
height: 160,
objectFit: 'cover',
borderTopLeftRadius: 8,
borderTopRightRadius: 8
}}
height={160}
width={160}
/>
<div className={cx('noti-content')}>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<p className={cx('noti-title')}>PATENT WO/2022/200834 - Oraichain Labs</p>
<p className={cx('noti-text')}>
AI and Blockchain are two of the leading technologies that will reshape plenty of things in our
lifetime. While Oraichain is aspiring to make the most...
</p>
</div>
<Link
to="https://blog.orai.io/introducing-patent-wo-2022-200834-by-oraichain-labs-da390c23bf6"
target="blank"
>
View more
</Link>
</div>
</div>
<div className={cx('noti-card')}>
<img
src="https://i.ibb.co/2FxBbMM/noti-3.webp"
alt="cover"
style={{
width: '100%',
height: 160,
objectFit: 'cover',
borderTopLeftRadius: 8,
borderTopRightRadius: 8
}}
height={160}
width={160}
/>
<div className={cx('noti-content')}>
<div style={{ display: 'flex', flexDirection: 'column' }}>
<p className={cx('noti-title')}>
EUENO by Oraichain Labs - Decentralized Encrypting oracles for Web3
</p>
<p className={cx('noti-text')}>
Web3 needs to scale to big data of many real-world applications that reach beyond the data
storage capacity of Blockchains. ...
</p>
</div>
<Link
to="https://blog.orai.io/eueno-by-oraichain-labs-decentralized-encrypting-oracles-for-web3-4cc3a9729710"
target="blank"
>
View more
</Link>
</div>
</div>
</div>
</div>
</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>
</>
);
};

export default ControlCenterArticles;
75 changes: 75 additions & 0 deletions src/pages/ControlCenter/components/control-center-item.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
import cn from 'classnames/bind';
import { Link } from 'react-router-dom';

import ArrowRight from 'assets/icons/arrow-right-2.svg';
import styles from '../index.module.scss';

const cx = cn.bind(styles);

export const GeneralInfoItem = ({ item }: { item: any }) => {
return (
<div className={cx('general-wrapper')}>
<span className={cx('g-title')}>{item.label}</span>
<span className={cx('g-content')}>{item.value}</span>
</div>
);
};

export const TokenActionItem = ({ item }: { item: any }) => {
return (
<div className={cx('token-action-item-wrapper')}>
<span className={cx('tac-title')}>{item.title}</span>
<Link to={item.link} className={cx('tac-link')} target="_blank">
<span>Learn more</span>
<img className="direct-icon" src={ArrowRight} alt="" width={20} height={18} />
</Link>
</div>
);
};

export const PriceItem = ({ item, priceData }: { item: any; priceData: any }) => {
return (
<div className={cx('tokens-wrapper')}>
<img className={cx('image')} src={item.icon} alt="token icon" width={24} height={24} />
<div className={cx('tokens-text')}>
<span className={cx('tk-title')}>{item.token}</span>
<span className={cx('tk-price')}>{'$' + Number(priceData?.[item.label].usd.toFixed(4))}</span>
</div>
</div>
);
};

export const ProposalItem = ({ item }: { item: any }) => {
var optionsDate: any = {
year: 'numeric',
month: 'long',
day: 'numeric'
};
const startDate = new Date(item.voting_start_time);
const endDate = new Date(item.voting_end_time);

return (
<div className={cx('proposal-wrapper')}>
<span className={cx('p-id')}>#{item.proposal_id}</span>
<span className={cx('p-title')}>{item.title}</span>
<span className={cx('p-time')}>
<span className={cx('p-tag')}>Start time: </span>
{item.voting_start_time === '0001-01-01T00:00:00Z' ? '-' : startDate.toLocaleDateString('en-US', optionsDate)}
</span>
<span className={cx('p-time')}>
<span className={cx('p-tag')}>End time: </span>
{item.voting_end_time === '0001-01-01T00:00:00Z' ? '-' : endDate.toLocaleDateString('en-US', optionsDate)}
</span>
<span className={cx('p-proposer')}>
<span className={cx('p-tag')}>Proposer: </span>
<Link to={`https://scan.orai.io/account/${item.proposer}`} target="blank">
{item.proposer.slice(0, 6) + ' ... ' + item.proposer.slice(item.proposer.length - 6, item.proposer.length)}
</Link>
</span>
<span className={cx('p-percent')}>
<span className={cx('p-tag')}>Percentage: </span>
{item.yes_percentage}%
</span>
</div>
);
};
67 changes: 67 additions & 0 deletions src/pages/ControlCenter/constant.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import LogoTokenOrai from 'assets/icons/oraichain.svg';
import LogoTokenAiri from 'assets/icons/airi.svg';
import LogoTokenAtom from 'assets/icons/atom_cosmos.svg';
import LogoTokenScOrai from 'assets/icons/orchai.svg';
import LogoTokenTron from 'assets/icons/tron.svg';

export const tokenAction = [
{
title: 'Buy ORAI with Alchemy Pay',
link: 'https://payment.orai.io/'
},
{
title: 'Buy ORAI on CEX',
link: 'https://www.kucoin.com/trade/ORAI-USDT'
},
{
title: 'Delegate & Claim rewards',
link: 'https://scan.orai.io/validators'
},
{
title: 'Swap tokens with OraiDEX',
link: 'https://oraidex.io/bridge'
}
];

export const prices = [
{
label: 'oraichain-token',
token: 'ORAI',
icon: LogoTokenOrai
},
{
label: 'airight',
token: 'AIRI',
icon: LogoTokenAiri
},
{
label: 'cosmos',
token: 'ATOM',
icon: LogoTokenAtom
},
{
label: 'scorai',
token: 'SCORAI',
icon: LogoTokenScOrai
},
{
label: 'tron',
token: 'TRON',
icon: LogoTokenTron
}
// {
// label: "kawaii-islands",
// token: "KWT",
// icon: "/images/subpage/tokens/kwt.png",
// },
// {
// label: "milky-token",
// token: "MILKY",
// icon: "/images/subpage/tokens/milky.png",
// },
// {
// label: "usd-coin",
// token: "USDT",
// icon: "/images/subpage/tokens/usd.png",
// }
];
Loading

0 comments on commit b77cc65

Please sign in to comment.