diff --git a/.env.example b/.env.example index e70ce693b..892f721d0 100644 --- a/.env.example +++ b/.env.example @@ -1,5 +1,5 @@ -REACT_APP_SITE_TITLE=OraiDEX -REACT_APP_SITE_DESC="OraiDEX is an IBC and CosmWasm-based decentralized exchange platform with multichain interoperability, optimal speed, and a lot of liquidity options for users." +REACT_APP_SITE_TITLE=Homebase +REACT_APP_SITE_DESC="Homebase" REACT_APP_BASE_API_URL=https://api.oraidex.io diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index aa5edabda..41b94da0f 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,12 +1,12 @@ # Contributing -When contributing to this repository, please first discuss the change you wish to make via Github issue. +When contributing to this repository, please first discuss the change you wish to make via Github issue. Please note we have a code of conduct, please follow it in all your interactions with the project. ## Preparing PR changes -1. [Fork the repository](https://github.com/oraichain/oraiswap-frontend). +1. [Fork the repository](https://github.com/oraichain/homebase). 2. [Add an upstream](https://docs.github.com/en/github/collaborating-with-pull-requests/working-with-forks/syncing-a-fork) so that you can update your fork. 3. Clone your fork to your computer. 4. Create a branch and name it appropriately. @@ -17,16 +17,16 @@ Please note we have a code of conduct, please follow it in all your interactions ## Pull Request Process -1. Ensure any install or build dependencies are removed before the end of the layer when doing a +1. Ensure any install or build dependencies are removed before the end of the layer when doing a build. 2. Your commits need to have verified GPG signatures before getting merged. For more information about GPG keys, [please visit here](https://docs.github.com/en/authentication/managing-commit-signature-verification/generating-a-new-gpg-key) -3. Update the README.md with details of changes to the interface, this includes new environment +3. Update the README.md with details of changes to the interface, this includes new environment variables, exposed ports, useful file locations and container parameters. 4. Increase the version numbers in any examples files and the README.md to the new version that this Pull Request would represent. The versioning scheme we use is [SemVer](http://semver.org/). -5. You may merge the Pull Request in once you have the sign-off of one other developer, or if you +5. You may merge the Pull Request in once you have the sign-off of one other developer, or if you do not have permission to do that, you may request the reviewer to merge it for you. - + ## Code of Conduct ### Our Pledge @@ -43,21 +43,21 @@ orientation. Examples of behavior that contributes to creating a positive environment include: -* Using welcoming and inclusive language -* Being respectful of differing viewpoints and experiences -* Gracefully accepting constructive criticism -* Focusing on what is best for the community -* Showing empathy towards other community members +- Using welcoming and inclusive language +- Being respectful of differing viewpoints and experiences +- Gracefully accepting constructive criticism +- Focusing on what is best for the community +- Showing empathy towards other community members Examples of unacceptable behavior by participants include: -* The use of sexualized language or imagery and unwelcome sexual attention or -advances -* Trolling, insulting/derogatory comments, and personal or political attacks -* Public or private harassment -* Publishing others' private information, such as a physical or electronic +- The use of sexualized language or imagery and unwelcome sexual attention or + advances +- Trolling, insulting/derogatory comments, and personal or political attacks +- Public or private harassment +- Publishing others' private information, such as a physical or electronic address, without explicit permission -* Other conduct which could reasonably be considered inappropriate in a +- Other conduct which could reasonably be considered inappropriate in a professional setting ### Our Responsibilities @@ -84,7 +84,7 @@ further defined and clarified by project maintainers. ### Enforcement Instances of abusive, harassing, or otherwise unacceptable behavior may be -reported by contacting the project team at ```support@orai.io``` . All +reported by contacting the project team at `support@orai.io` . All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. @@ -100,4 +100,4 @@ This Code of Conduct is adapted from the [Contributor Covenant][homepage], versi available at [http://contributor-covenant.org/version/1/4][version] [homepage]: http://contributor-covenant.org -[version]: http://contributor-covenant.org/version/1/4/ \ No newline at end of file +[version]: http://contributor-covenant.org/version/1/4/ diff --git a/README.md b/README.md index 7faa47428..a887b2b56 100644 --- a/README.md +++ b/README.md @@ -1,10 +1,10 @@

- Oraidex's Frontend + Homebase's Frontend

## Overview -This repository provides frontend code for Oraidex of [Oraichain](https://orai.io). +This repository provides frontend code for Homebase of [Oraichain](https://orai.io). ## Prerequisite diff --git a/config-overrides.js b/config-overrides.js index ebb867349..2d089dc38 100644 --- a/config-overrides.js +++ b/config-overrides.js @@ -99,7 +99,7 @@ module.exports = { config.plugins.push( sentryWebpackPlugin({ org: 'oraichain', - project: 'oraidex', + project: 'homebase', authToken: process.env.SENTRY_AUTH_TOKEN }) ); diff --git a/src/assets/icons/wallet-v3.svg b/src/assets/icons/wallet-v3.svg index ec58fc5c8..e4bb18a4e 100644 --- a/src/assets/icons/wallet-v3.svg +++ b/src/assets/icons/wallet-v3.svg @@ -1,5 +1,6 @@ - - - - + + + + + diff --git a/src/assets/images/homeBase_full.svg b/src/assets/images/homeBase_full.svg new file mode 100644 index 000000000..d67162e97 --- /dev/null +++ b/src/assets/images/homeBase_full.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss index e3e24da08..4022215f9 100644 --- a/src/components/Button/Button.module.scss +++ b/src/components/Button/Button.module.scss @@ -8,11 +8,13 @@ display: inline-flex; align-items: center; justify-content: center; + gap: 4px; .icon { margin-right: 5px; width: 20px; height: 20px; + color: $text-btn-surface-default; } &:disabled { @@ -50,6 +52,15 @@ } } +.primary-surface { + background-color: $primary-surface-btn; + font-weight: 400; + color: $text-btn-surface-default; + border: 1px; + padding: 4px 16px; + border-radius: 8px; +} + .secondary-sm { border: 1px solid; padding: 8px 16px; diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 5f353ae95..85843c182 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -8,6 +8,7 @@ type ButtonType = | 'primary' | 'secondary' | 'primary-sm' + | 'primary-surface' | 'secondary-sm' | 'disable-sm' | 'third' diff --git a/src/components/WalletManagement/WalletManagement.module.scss b/src/components/WalletManagement/WalletManagement.module.scss index 63cfc7ce6..6e0dccfa3 100644 --- a/src/components/WalletManagement/WalletManagement.module.scss +++ b/src/components/WalletManagement/WalletManagement.module.scss @@ -1,10 +1,9 @@ @import 'src/styles/mixins'; .connect-wallet-container { - @include theme() { - button { - padding: 10px; - } + @include theme() { + button { + padding: 14px; } - -} \ No newline at end of file + } +} diff --git a/src/components/WalletManagement/WalletManagement.tsx b/src/components/WalletManagement/WalletManagement.tsx index 594f130b8..6d3330ba9 100644 --- a/src/components/WalletManagement/WalletManagement.tsx +++ b/src/components/WalletManagement/WalletManagement.tsx @@ -16,6 +16,7 @@ import { MyWallet } from './MyWallet'; import { MyWalletMobile } from './MyWalletMobile'; import styles from './WalletManagement.module.scss'; import { WalletProvider, walletProvider } from './walletConfig'; +import { ReactComponent as WalletIcon } from 'assets/icons/wallet-v3.svg'; const cx = cn.bind(styles); export const WalletManagement: FC<{}> = () => { @@ -118,10 +119,11 @@ export const WalletManagement: FC<{}> = () => {
{!isAnyWalletConnected && !mobileMode ? ( diff --git a/src/layouts/Menu.module.scss b/src/layouts/Menu.module.scss index 9f64ae8d4..a554eb1ec 100644 --- a/src/layouts/Menu.module.scss +++ b/src/layouts/Menu.module.scss @@ -4,21 +4,18 @@ .menu { display: flex; justify-content: space-between; - padding: 20px 64px 20px 40px; position: fixed; width: 100%; top: 0; z-index: 999; height: $menu-height; - .logo { display: flex; } - @include theme() { - background-color: theme-get('neutral-surface-bg'); - border-bottom: 1px solid theme-get('neutral-border-border-default'); + background-color: theme-get('neutral-surface-background'); + border-bottom: 1px solid theme-get('neutral-border-default'); } } @@ -167,15 +164,20 @@ .menuLeft { display: flex; align-items: center; - + justify-content: center; + width: 255px; + @include theme() { + background-color: theme-get('neutral-surface-background'); + border-right: 1px solid theme-get('neutral-border-default'); + } .logoWrapper { display: flex; align-items: center; } .divider { - @include theme() { - border: 1px solid theme-get('neutral-border-border-bold'); - } + // @include theme() { + // border: 1px solid theme-get('neutral-border-border-bold'); + // } width: 1px; margin-left: 24px; @@ -188,6 +190,7 @@ align-items: center; gap: 16px; font-weight: 500; + padding-right: 20px; @include medium-desktop { gap: 10px; @@ -209,7 +212,6 @@ .menu_list_right { display: flex; align-items: center; - .menu_item { display: flex; align-items: center; diff --git a/src/layouts/Menu.tsx b/src/layouts/Menu.tsx index 21e53e3dc..504bcc1a4 100644 --- a/src/layouts/Menu.tsx +++ b/src/layouts/Menu.tsx @@ -6,10 +6,8 @@ import { ReactComponent as BridgeIcon } from 'assets/icons/ic_bridge.svg'; import { ReactComponent as BtcDashboardIcon } from 'assets/icons/ic_btc_dashboard.svg'; import { ReactComponent as CohavestIcon } from 'assets/icons/ic_cohavest.svg'; import { ReactComponent as ExternalLinkIcon } from 'assets/icons/ic_external_link.svg'; -import { ReactComponent as FuturesIcon } from 'assets/icons/ic_futures.svg'; import { ReactComponent as HelpIcon } from 'assets/icons/ic_help.svg'; import { ReactComponent as KadoIcon } from 'assets/icons/ic_kado.svg'; -import { ReactComponent as OrderbookIcon } from 'assets/icons/ic_orderbook.svg'; import { ReactComponent as PoolIcon } from 'assets/icons/ic_pools.svg'; import { ReactComponent as StakingIcon } from 'assets/icons/ic_staking.svg'; import { ReactComponent as SupportIcon } from 'assets/icons/ic_support.svg'; @@ -17,8 +15,8 @@ import { ReactComponent as TelegramIcon } from 'assets/icons/ic_telegram.svg'; import { ReactComponent as TwitterIcon } from 'assets/icons/ic_twitter.svg'; import { ReactComponent as UniversalSwapIcon } from 'assets/icons/ic_universalswap.svg'; import { ReactComponent as MenuIcon } from 'assets/icons/menu.svg'; -import LogoFullImgDark from 'assets/images/OraiDEX_full_dark.svg'; -import LogoFullImgLight from 'assets/images/OraiDEX_full_light.svg'; +import LogoFullImgDark from 'assets/images/homeBase_full.svg'; +import LogoFullImgLight from 'assets/images/homeBase_full.svg'; import classNames from 'classnames'; import TooltipContainer from 'components/ConnectWallet/TooltipContainer'; import { WalletManagement } from 'components/WalletManagement/WalletManagement'; @@ -105,15 +103,6 @@ const Menu: React.FC = () => { const ToggleIcon = open ? CloseIcon : MenuIcon; const darkTheme = theme === 'dark'; - const menuList = ( -
-
- {renderLink('https://orderbook.oraidex.io', 'Order Book', () => {}, true, )} - {renderLink('https://futures.oraidex.io', 'Futures Trading', () => {}, true, )} -
-
- ); - const menuListMobile = (
{renderLink('/universalswap', 'Swap', setLink, false, )} @@ -124,9 +113,6 @@ const Menu: React.FC = () => { {renderLink('/bitcoin-dashboard', 'BTC Dashboard', setLink, false, )} {renderLink('https://beta.oraidex.io', 'OraiDEX Beta', setLink, true, )}
- {renderLink('https://orderbook.oraidex.io', 'Order Book', () => {}, true, )} - {renderLink('https://futures.oraidex.io', 'Futures Trading', () => {}, true, )} -
{ setIsOpenSubMenuMobile(!isOpenSubMenuMobile); @@ -183,60 +169,9 @@ const Menu: React.FC = () => { setLink('/')} className={styles.logo}> logo -
- {menuList}
-
-
{ - setOtherActive(!otherActive); - }} - className={classNames(styles.menu_item, { [styles.active]: otherActive }, styles[theme], styles.spin)} - > - - - {'Help'} - - -
- - setOtherActive(!otherActive)} - content={ -
- {renderLink('https://t.me/oraidex', 'Join our Community', () => {}, true, , false)} - {renderLink('https://twitter.com/oraidex', 'Twitter', () => {}, true, , false)} - {renderLink('https://t.me/SamORAI_bot', 'Contact us', () => {}, true, , false)} -
- } - /> - {renderLink( - '#', - 'Buy ORAI', - () => { - setOpenBuy(true); - }, - false, - - )} -
- - {openBuy && ( - { - setOpenBuy(false); - setIsLoadedIframe(false); - }} - onAfterLoad={() => setIsLoadedIframe(true)} - isLoadedIframe={isLoadedIframe} - /> - )} -
diff --git a/src/layouts/Sidebar.module.scss b/src/layouts/Sidebar.module.scss index 9e98066c4..e481f1e4a 100644 --- a/src/layouts/Sidebar.module.scss +++ b/src/layouts/Sidebar.module.scss @@ -5,7 +5,7 @@ display: flex; flex-direction: column; justify-content: space-between; - padding: 20px; + padding: 0 12px; width: $sidebar-width; min-width: $sidebar-width; position: fixed; @@ -25,26 +25,26 @@ } @include theme() { - background-color: theme-get('neutral-surface-bg-section'); + background-color: theme-get('neutral-surface-background'); + border-right: 1px solid theme-get('neutral-border-default'); } } .menu_items { display: flex; flex-direction: column; - margin-top: 24px; + margin-top: 16px; } .menu_item { display: flex; align-items: center; - padding: 12px 16px; - margin-bottom: 10px; + padding: 8px 12px; cursor: pointer; - border-radius: 99px; + border-radius: 8px; background-color: transparent; - @include theme() { + border: 1px solid theme-get('neutral-border-light'); &:hover { background-color: theme-get('neutral-border-border-bold'); } @@ -59,14 +59,14 @@ } &.active { - @include theme() { - background-color: theme-get('neutral-border-border-bold'); - } + // @include theme() { + // background-color: theme-get('neutral-border-border-bold'); + // } } &_text { font-weight: 500; - font-size: 14px; + font-size: 16px; line-height: 100%; margin-left: 16px; diff --git a/src/styles/_themes.scss b/src/styles/_themes.scss index fc2a7b1de..84c5de3a3 100644 --- a/src/styles/_themes.scss +++ b/src/styles/_themes.scss @@ -16,8 +16,10 @@ $primary-text-link: #78ca11; $yellow-brown-color: #ad9c00; $primary-surface-default-light: #e5f7d6; $primary-bg-btn: #aee67f; +$primary-surface-btn: #7332e7; $error-bg-btn: #a81100; $text-btn-default: #1e300a; +$text-btn-surface-default: #fff; $text-placeholder: #505665; $neutral-gray: #686a66; $warning-surface-default: #e6cf00; @@ -162,7 +164,10 @@ $themes: ( 'bg-linear-highlight': linear-gradient(180deg, #152703 0%, #181a17 298px), 'bg-linear-section': linear-gradient(180deg, #232521 0%, #181a17 100%), 'neutral-surface-btn-default': #152703, - 'neutral-text-btn-default': #152703 + 'neutral-text-btn-default': #152703, + 'neutral-surface-background': #141416, + 'neutral-border-default': #383b40, + 'neutral-border-light': #242627 ), light: ( 'colors-neutral-text-text-token-name': #181a17, @@ -276,6 +281,9 @@ $themes: ( 'bg-linear-section': linear-gradient(180deg, #f5f5f5 0%, rgba(251, 251, 251, 0) 100%), 'neutral-surface-btn-default': #eef9e5, 'neutral-text-btn-default': #232521, - 'bg-overlay-section': rgba(255, 255, 255, 0.5) + 'bg-overlay-section': rgba(255, 255, 255, 0.5), + 'neutral-surface-background': #141416, + 'neutral-border-default': #383b40, + 'neutral-border-light': #242627 ) ); diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index a154604af..e461b280c 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -84,5 +84,5 @@ $transition-duration: 0.2s; /* Z-indexes */ $zindex-sticky: 1020; -$menu-height: 68px; -$sidebar-width: 218px; +$menu-height: 76px; +$sidebar-width: 255px;