Merge branch 'feat/homebase' into develop

src/components/ConnectWallet/Connected/index.tsx

@@ -8,7 +8,7 @@ import { getTotalUsd } from 'libs/utils';
 import { RootState } from 'store/configure';
 import styles from './index.module.scss';
 import { isMobile } from '@walletconnect/browser-utils';
-import { formatDisplayUsdt } from 'pages/Pools/helpers';
+import { formatDisplayUsdt } from 'helper/helpers';
 
 const cx = cn.bind(styles);
 

src/components/Table/Table.module.scss

@@ -19,19 +19,20 @@
 
     tr {
       @include theme() {
-        color: theme-get('neutral-text-body');
-        border-bottom: 1px solid theme-get('neutral-border-border-default');
+        color: #f7f7f7;
+        border-bottom: 1px solid #242627;
       }
 
       display: flex;
       align-items: center;
       border-radius: 4px 4px 0 0;
       padding: 24px 0;
-      font-weight: 500;
-      line-height: 18px;
-      font-size: 14px;
+
+      font-size: 12px;
       font-style: normal;
-      line-height: 150%;
+      font-weight: 400;
+      line-height: 150%; /* 18px */
+      letter-spacing: 0.012px;
 
       th:first-child {
         padding-left: 10px;
@@ -41,6 +42,10 @@
         padding-right: 10px;
       }
     }
+
+    th {
+      font-weight: 400;
+    }
   }
 
   &_header_sorter {

src/components/WalletManagement/Connected/index.tsx

@@ -6,7 +6,7 @@ import { useCoinGeckoPrices } from 'hooks/useCoingecko';
 import useConfigReducer from 'hooks/useConfigReducer';
 import useWalletReducer from 'hooks/useWalletReducer';
 import { getTotalUsd } from 'libs/utils';
-import { formatDisplayUsdt } from 'pages/Pools/helpers';
+import { formatDisplayUsdt } from 'helper/helpers';
 import { useSelector } from 'react-redux';
 import { RootState } from 'store/configure';
 import styles from './index.module.scss';

src/components/WalletManagement/ConnectedMobile/ConnectedMobile.tsx

@@ -8,7 +8,7 @@ import { getTotalUsd } from 'libs/utils';
 import { RootState } from 'store/configure';
 import styles from './ConnectedMobile.module.scss';
 import { isMobile } from '@walletconnect/browser-utils';
-import { formatDisplayUsdt } from 'pages/Pools/helpers';
+import { formatDisplayUsdt } from 'helper/helpers';
 
 const cx = cn.bind(styles);
 

src/components/WalletManagement/MyWallet/MyWallet.tsx

@@ -26,7 +26,7 @@ import { useCopyClipboard } from 'hooks/useCopyClipboard';
 import useOnClickOutside from 'hooks/useOnClickOutside';
 import useWalletReducer from 'hooks/useWalletReducer';
 import { getTotalUsd, reduceString } from 'libs/utils';
-import { formatDisplayUsdt } from 'pages/Pools/helpers';
+import { formatDisplayUsdt } from 'helper/helpers';
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import type { RootState } from 'store/configure';

src/components/WalletManagement/MyWalletMobile/MyWalletMobile.tsx

@@ -13,7 +13,7 @@ import { useCoinGeckoPrices } from 'hooks/useCoingecko';
 import useConfigReducer from 'hooks/useConfigReducer';
 import useOnClickOutside from 'hooks/useOnClickOutside';
 import { getTotalUsd, reduceString } from 'libs/utils';
-import { formatDisplayUsdt } from 'pages/Pools/helpers';
+import { formatDisplayUsdt } from 'helper/helpers';
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';
 import type { RootState } from 'store/configure';

src/pages/Pools/helpers.ts → src/helper/helpers.ts

@@ -218,3 +218,18 @@ export const formatTimeDataChart = (
       return formatDate(fmtTime) + ' - ' + formatDate(endOfMonth(date));
   }
 };
+
+export const formatNumberKMB = (num: number) => {
+  if (num >= 1e9) {
+    return '$' + (num / 1e9).toFixed(2) + 'B';
+  }
+
+  if (num >= 1e6) {
+    return '$' + (num / 1e6).toFixed(2) + 'M';
+  }
+
+  if (num >= 1e3) {
+    return '$' + (num / 1e3).toFixed(2) + 'K';
+  }
+  return formatDisplayUsdt(num, 2);
+};

src/index.scss

@@ -109,33 +109,61 @@ button[disabled] {
 }
 
 @font-face {
-  font-family: $font-family;
+  font-family: $font-family-IBM;
   src: url('./assets/fonts/IBMPlexSans-Bold.ttf');
   font-weight: 700;
   font-display: swap;
 }
 
 @font-face {
-  font-family: $font-family;
+  font-family: $font-family-IBM;
   src: url('./assets/fonts/IBMPlexSans-SemiBold.ttf');
   font-weight: 600;
   font-display: swap;
 }
 
 @font-face {
-  font-family: $font-family;
+  font-family: $font-family-IBM;
   src: url('./assets/fonts/IBMPlexSans-Medium.ttf');
   font-weight: 500;
   font-display: swap;
 }
 
 @font-face {
-  font-family: $font-family;
+  font-family: $font-family-IBM;
   src: url('./assets/fonts/IBMPlexSans-Regular.ttf');
   font-weight: 400;
   font-display: swap;
 }
 
+@font-face {
+  font-family: $font-family;
+  src: url('./assets/fonts/Barlow/Barlow-Bold.ttf');
+  font-weight: 700;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: $font-family;
+  src: url('./assets/fonts/Barlow/Barlow-SemiBold.ttf');
+  font-weight: 600;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: $font-family;
+  src: url('./assets/fonts/Barlow/Barlow-Medium.ttf');
+  font-weight: 500;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: $font-family;
+  src: url('./assets/fonts/Barlow/Barlow-Regular.ttf');
+  font-weight: 400;
+  font-display: swap;
+}
+
 /* width */
 ::-webkit-scrollbar {
   width: 5px;

src/layouts/Menu.tsx

@@ -86,7 +86,7 @@ const Menu: React.FC = () => {
         }}
         className={classNames(
           styles.menu_item,
-          { [styles.active]: !otherActive && (link.includes(to) || (link === '/' && to === '/universalswap')) },
+          { [styles.active]: !otherActive && (link.includes(to) || (link === '/' && to === '/homebase')) },
           styles[theme],
           styles.spin
         )}
@@ -105,7 +105,7 @@ const Menu: React.FC = () => {
 
   const menuListMobile = (
     <div className={classNames(styles.menu_list)}>
-      {renderLink('/universalswap', 'Swap', setLink, false, <UniversalSwapIcon />)}
+      {renderLink('/homebase', 'Swap', setLink, false, <UniversalSwapIcon />)}
       {renderLink('/bridge', 'Bridge', setLink, false, <BridgeIcon />)}
       {renderLink('/pools', 'Pools', setLink, false, <PoolIcon />)}
       {renderLink('/staking', 'Staking', setLink, false, <StakingIcon />)}

src/layouts/Sidebar.tsx

@@ -52,7 +52,7 @@ const Sidebar: React.FC<{}> = React.memo((props) => {
         }}
         className={classNames(
           styles.menu_item,
-          { [styles.active]: link.includes(to) || (link === '/' && to === '/universalswap') },
+          { [styles.active]: link.includes(to) || (link === '/' && to === '/homebase') },
           styles[theme]
         )}
       >
@@ -69,7 +69,7 @@ const Sidebar: React.FC<{}> = React.memo((props) => {
       <div className={classNames(styles.sidebar, { [styles.open]: open })}>
         <div>
           <div className={classNames(styles.menu_items)}>
-            {renderLink('/universalswap', 'Swap', setLink, <UniversalSwapIcon />)}
+            {renderLink('/homebase', 'Swap', setLink, <UniversalSwapIcon />)}
             {renderLink('/bridge', 'Bridge', setLink, <BridgeIcon />)}
             {renderLink('/pools', 'Pools', setLink, <PoolIcon />)}
             {renderLink('/staking', 'Staking', setLink, <StakingIcon />)}

src/pages/CoHarvest/components/AllBidding/index.tsx

@@ -5,7 +5,7 @@ import useConfigReducer from 'hooks/useConfigReducer';
 import { getUsd, reduceString } from 'libs/utils';
 import { TIMER } from 'pages/CoHarvest/constants';
 import { dateFormat } from 'pages/CoHarvest/helpers';
-import { formatDisplayUsdt, numberWithCommas } from 'pages/Pools/helpers';
+import { formatDisplayUsdt, numberWithCommas } from 'helper/helpers';
 import styles from './index.module.scss';
 
 const AllBidding = ({ list, isLoading }) => {

src/pages/CoHarvest/components/Bidding/index.tsx

@@ -21,7 +21,7 @@ import {
   useGetHistoryBid,
   useGetPotentialReturn
 } from 'pages/CoHarvest/hooks/useGetBidRound';
-import { formatDisplayUsdt, numberWithCommas } from 'pages/Pools/helpers';
+import { formatDisplayUsdt, numberWithCommas } from 'helper/helpers';
 import { useSimulate } from 'pages/UniversalSwap/Swap/hooks';
 import { memo, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';

src/pages/CoHarvest/components/BiddingChart/index.tsx

@@ -3,7 +3,7 @@ import { useCoinGeckoPrices } from 'hooks/useCoingecko';
 import useConfigReducer from 'hooks/useConfigReducer';
 import { getUsd } from 'libs/utils';
 import { useGetAllBidPoolInRound } from 'pages/CoHarvest/hooks/useGetBidRound';
-import { formatDisplayUsdt, numberWithCommas } from 'pages/Pools/helpers';
+import { formatDisplayUsdt, numberWithCommas } from 'helper/helpers';
 import { memo, useState } from 'react';
 import ChartColumn from '../ChartColumn';
 import { TooltipIconBtn } from '../Tooltip';

src/pages/CoHarvest/components/ChartColumn/index.tsx

@@ -1,24 +1,24 @@
-import { formatDisplayUsdt } from 'pages/Pools/helpers';
+import { formatDisplayUsdt } from 'helper/helpers';
 import styles from './index.module.scss';
 
 export type ChartColumnType = {
-    percent: number | string;
-    volume: number | string;
-    interest: number | string;
+  percent: number | string;
+  volume: number | string;
+  interest: number | string;
 };
 
 const ChartColumn = ({ data }: { data: ChartColumnType }) => {
-    const { percent, volume, interest } = data;
-    return (
-        <div className={styles.chartColumn}>
-            <div className={styles.volume}>{volume}</div>
-            <div className={styles.percentWrapper}>
-                <div className={styles.percent} style={{ height: `${percent}%` }}></div>
-            </div>
+  const { percent, volume, interest } = data;
+  return (
+    <div className={styles.chartColumn}>
+      <div className={styles.volume}>{volume}</div>
+      <div className={styles.percentWrapper}>
+        <div className={styles.percent} style={{ height: `${percent}%` }}></div>
+      </div>
 
-            <div className={styles.interest}>{interest}%</div>
-        </div>
-    );
+      <div className={styles.interest}>{interest}%</div>
+    </div>
+  );
 };
 
 export default ChartColumn;

src/pages/CoHarvest/components/HarvestInfo/index.tsx

@@ -4,7 +4,7 @@ import { ReactComponent as UsdcIcon } from 'assets/icons/usd_coin.svg';
 import { useCoinGeckoPrices } from 'hooks/useCoingecko';
 import useConfigReducer from 'hooks/useConfigReducer';
 import { getUsd } from 'libs/utils';
-import { formatDisplayUsdt, numberWithCommas } from 'pages/Pools/helpers';
+import { formatDisplayUsdt, numberWithCommas } from 'helper/helpers';
 import { memo, useState } from 'react';
 import CountDownTime from '../CountDownTime';
 import { TooltipIconBtn } from '../Tooltip';

src/pages/CoHarvest/components/InputBalance/index.tsx

@@ -5,7 +5,7 @@ import styles from './index.module.scss';
 
 import { toAmount, toDisplay } from '@oraichain/oraidex-common';
 import { ORAIX_DECIMAL } from 'pages/CoHarvest/constants';
-import { numberWithCommas } from 'pages/Pools/helpers';
+import { numberWithCommas } from 'helper/helpers';
 
 export type InputBalanceType = {
   amount: string | number;

src/pages/CoHarvest/components/ListHistory/index.tsx

@@ -9,7 +9,7 @@ import { ReactComponent as UsdcIcon } from 'assets/icons/usd_coin.svg';
 import useConfigReducer from 'hooks/useConfigReducer';
 import { BID_ROUND_STATUS, LIMIT_PAGE } from 'pages/CoHarvest/constants';
 import { useGetListBiddingRoundInfo } from 'pages/CoHarvest/hooks/useGetBidRound';
-import { numberWithCommas } from 'pages/Pools/helpers';
+import { numberWithCommas } from 'helper/helpers';
 import { useState } from 'react';
 import styles from './index.module.scss';
 

src/pages/CoHarvest/components/MyBidding/index.tsx

@@ -10,7 +10,7 @@ import { ReactComponent as NoData } from 'assets/images/nodata-bid.svg';
 import useConfigReducer from 'hooks/useConfigReducer';
 import { getUsd } from 'libs/utils';
 import { BidStatus } from 'pages/CoHarvest/constants';
-import { formatDisplayUsdt, numberWithCommas } from 'pages/Pools/helpers';
+import { formatDisplayUsdt, numberWithCommas } from 'helper/helpers';
 import styles from './index.module.scss';
 
 const MyBidding = ({ list, isLoading }) => {

src/pages/CoHarvest/helpers/index.ts

@@ -1,4 +1,4 @@
-import { formatDisplayUsdt } from 'pages/Pools/helpers';
+import { formatDisplayUsdt } from 'helper/helpers';
 import { MONTHS_ARR, TIMER } from '../constants';
 
 export const formatCountdownTime = (milliseconds: number) => {

src/pages/Pools/NewTokenModal/NewTokenModal.tsx

@@ -19,7 +19,7 @@ import { checkRegex, validateAddressCosmos } from 'libs/utils';
 import sumBy from 'lodash/sumBy';
 import { FC, useRef, useState } from 'react';
 import NumberFormat from 'react-number-format';
-import { generateMsgFrontierAddToken, getInfoLiquidityPool } from '../helpers';
+import { generateMsgFrontierAddToken, getInfoLiquidityPool } from '../../../helper/helpers';
 import { InitBalancesItems, RewardItems } from './ItemsComponent';
 import { ModalDelete, ModalListToken } from './ModalComponent';
 import styles from './NewTokenModal.module.scss';

src/pages/Pools/components/AddLiquidityModal/AddLiquidityModal.tsx

@@ -13,7 +13,7 @@ import { useCoinGeckoPrices } from 'hooks/useCoingecko';
 import useConfigReducer from 'hooks/useConfigReducer';
 import CosmJs from 'libs/cosmjs';
 import { getUsd, toSumDisplay } from 'libs/utils';
-import { estimateShare } from 'pages/Pools/helpers';
+import { estimateShare } from 'helper/helpers';
 import { useGetPairInfo } from 'pages/Pools/hooks/useGetPairInfo';
 import { useTokenAllowance } from 'pages/Pools/hooks/useTokenAllowance';
 import { useGetPoolDetail } from 'pages/Pools/hooks';

src/pages/Pools/components/ItemPoolMobile/ItemPoolMobile.tsx

@@ -4,7 +4,7 @@ import { ReactComponent as BoostIconLight } from 'assets/icons/boost-icon.svg';
 import { Button } from 'components/Button';
 import useConfigReducer from 'hooks/useConfigReducer';
 import { PoolTableData } from 'pages/Pools';
-import { formatDisplayUsdt, parseAssetOnlyDenom } from 'pages/Pools/helpers';
+import { formatDisplayUsdt, parseAssetOnlyDenom } from 'helper/helpers';
 import { useNavigate } from 'react-router-dom';
 import styles from './ItemPoolMobile.module.scss';
 

src/pages/Pools/components/LiquidityChart/index.tsx

@@ -2,7 +2,7 @@ import useConfigReducer from 'hooks/useConfigReducer';
 import { ChartOptions, ColorType, DeepPartial, LineStyle, TickMarkType, Time, createChart } from 'lightweight-charts';
 import { TIMER } from 'pages/CoHarvest/constants';
 import { formatDateChart, formatNumberKMB } from 'pages/CoHarvest/helpers';
-import { formatDisplayUsdt, formatTimeDataChart } from 'pages/Pools/helpers';
+import { formatDisplayUsdt, formatTimeDataChart } from 'helper/helpers';
 import { useLiquidityEventChart } from 'pages/Pools/hooks/useLiquidityEventChart';
 import { useEffect, useRef } from 'react';
 import { FILTER_DAY } from 'reducer/type';

src/pages/Pools/components/ListPool/ListPool.tsx

@@ -6,7 +6,7 @@ import { FallbackEmptyData } from 'components/FallbackEmptyData';
 import { Table, TableHeaderProps } from 'components/Table';
 import useConfigReducer from 'hooks/useConfigReducer';
 import { PoolTableData } from 'pages/Pools';
-import { formatDisplayClaimable, formatDisplayUsdt, parseAssetOnlyDenom } from 'pages/Pools/helpers';
+import { formatDisplayClaimable, formatDisplayUsdt, parseAssetOnlyDenom } from 'helper/helpers';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { PoolInfoResponse } from 'types/pool';

src/pages/Pools/components/OverviewPool/OverviewPool.tsx

@@ -3,7 +3,7 @@ import { ReactComponent as DefaultIcon } from 'assets/icons/tokens.svg';
 import classNames from 'classnames';
 import TokenBalance from 'components/TokenBalance';
 import useTheme from 'hooks/useTheme';
-import { toFixedIfNecessary } from 'pages/Pools/helpers';
+import { toFixedIfNecessary } from 'helper/helpers';
 import { useGetPairInfo } from 'pages/Pools/hooks/useGetPairInfo';
 import { useState } from 'react';
 import { PoolDetail } from 'types/pool';

src/pages/Pools/components/StakeLPModal/StakeLPModal.tsx

@@ -9,7 +9,7 @@ import { network } from 'config/networks';
 import { handleCheckAddress, handleErrorTransaction } from 'helper';
 import useConfigReducer from 'hooks/useConfigReducer';
 import CosmJs from 'libs/cosmjs';
-import { toFixedIfNecessary } from 'pages/Pools/helpers';
+import { toFixedIfNecessary } from 'helper/helpers';
 import { useGetPoolDetail, useGetRewardInfoDetail } from 'pages/Pools/hooks';
 import { useGetPairInfo } from 'pages/Pools/hooks/useGetPairInfo';
 import { FC, useEffect, useState } from 'react';

src/pages/Pools/components/TransactionHistory/index.tsx

@@ -11,7 +11,7 @@ import { useCoinGeckoPrices } from 'hooks/useCoingecko';
 import useConfigReducer from 'hooks/useConfigReducer';
 import { getUsd, reduceString } from 'libs/utils';
 import { formatDateV2, formatTime } from 'pages/CoHarvest/helpers';
-import { formatDisplayUsdt, numberWithCommas } from 'pages/Pools/helpers';
+import { formatDisplayUsdt, numberWithCommas } from 'helper/helpers';
 import { useTransactionHistory } from 'pages/Pools/hooks/useTransactionHistory';
 import styles from './index.module.scss';
 

src/pages/Pools/components/UnstakeLPModal/UnstakeLPModal.tsx

@@ -9,7 +9,7 @@ import { network } from 'config/networks';
 import { handleCheckAddress, handleErrorTransaction } from 'helper';
 import useConfigReducer from 'hooks/useConfigReducer';
 import CosmJs from 'libs/cosmjs';
-import { toFixedIfNecessary } from 'pages/Pools/helpers';
+import { toFixedIfNecessary } from 'helper/helpers';
 import { useGetPoolDetail, useGetRewardInfoDetail } from 'pages/Pools/hooks';
 import { useGetPairInfo } from 'pages/Pools/hooks/useGetPairInfo';
 import { FC, useEffect, useState } from 'react';