update text

oraichain · May 23, 2024 · 5424c58 · 5424c58
1 parent 974daad
commit 5424c58
Show file tree

Hide file tree

Showing 14 changed files with 83 additions and 38 deletions.
diff --git a/.env.example b/.env.example
@@ -1,5 +1,5 @@
 REACT_APP_SITE_TITLE=Homebase
-REACT_APP_SITE_DESC="Homebase"
+REACT_APP_SITE_DESC="Building your AI-powered home base for Web3"
 
 REACT_APP_BASE_API_URL=https://api.oraidex.io
 

diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/index.html b/public/index.html
@@ -2,17 +2,20 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.svg" />
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-8T22XRLHXY"></script>
+    <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
+
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-DJZX8REJ1L"></script>
     <script>
       window.dataLayer = window.dataLayer || [];
       function gtag() {
         dataLayer.push(arguments);
       }
       gtag('js', new Date());
-      gtag('config', 'G-8T22XRLHXY');
+
+      gtag('config', 'G-DJZX8REJ1L');
     </script>
+
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
     <title>%REACT_APP_SITE_TITLE%</title>
     <meta name="theme-color" content="#000000" />

diff --git a/public/thumbnail_oraidex_final.png b/public/thumbnail_oraidex_final.png
diff --git a/src/helper/timer.ts b/src/helper/timer.ts
@@ -8,7 +8,8 @@ export const TIMER = {
 
   MILLISECOND_OF_DAY: 1000 * 60 * 60 * 24,
   HOUR_OF_MONTH: 24 * 30,
-  MILLISECOND_PER_HOUR: 1000 * 60 * 60
+  MILLISECOND_PER_HOUR: 1000 * 60 * 60,
+  SECOND_PER_MONTH: 30 * 24 * 60 * 60
 };
 
 export const MONTHS_ARR = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

diff --git a/src/layouts/Sidebar.tsx b/src/layouts/Sidebar.tsx
@@ -176,10 +176,10 @@ const Sidebar: React.FC<{}> = React.memo((props) => {
           </div>
 
           <div className={styles.social}>
-            <a href="https://t.me/oraidex" target="_blank" rel="noopener noreferrer">
+            <a href="https://t.me/oraichain" target="_blank" rel="noopener noreferrer">
               <TeleIcon />
             </a>
-            <a href="https://twitter.com/oraidex" target="_blank" rel="noopener noreferrer">
+            <a href="https://twitter.com/oraichain" target="_blank" rel="noopener noreferrer">
               <TwisterIcon />
             </a>
             <a href="https://discord.gg/3CnQAGtX" target="_blank" rel="noopener noreferrer">

diff --git a/src/pages/GpuStaking/components/GpuSummary/index.module.scss b/src/pages/GpuStaking/components/GpuSummary/index.module.scss
@@ -54,6 +54,14 @@
           font-weight: 400;
           line-height: 150%; /* 21px */
         }
+
+        .value {
+          a {
+            &:hover {
+              text-decoration: underline;
+            }
+          }
+        }
       }
     }
 

diff --git a/src/pages/GpuStaking/components/GpuSummary/index.tsx b/src/pages/GpuStaking/components/GpuSummary/index.tsx
@@ -5,9 +5,9 @@ import { useGetStakeInfo } from 'pages/GpuStaking/hooks';
 import styles from './index.module.scss';
 import { TIMER } from 'helper/timer';
 import useGetGpuInfo from 'pages/GpuStaking/hooks/useGetGpuInfo';
-import { useEffect, useState } from 'react';
+import { FC, useEffect, useState } from 'react';
 
-const GpuSummary = () => {
+const GpuSummary: FC<{ epochRev: number }> = ({ epochRev }) => {
   const [list, setList] = useState(listDetail);
   const [allGpuRev, setAllGpuRev] = useState({
     mid: 0,
@@ -78,16 +78,25 @@ const GpuSummary = () => {
             </span>
           </div>
           <div className={styles.info}>
-            <h2>Est. GPU-Usage Revenue (30 days)</h2>
+            <h2>Last epoch rev.</h2>
             <span className={styles.value}>
               {/* {formatDisplayUsdt(allGpuRev.min)} - {formatDisplayUsdt(allGpuRev.max)} */}
-              {formatDisplayUsdt(calcGpuRev(allGpuRev.mid))}
+              {/* {formatDisplayUsdt(calcGpuRev(allGpuRev.mid))} */}
+              {formatDisplayUsdt(epochRev || 0)}
+            </span>
+          </div>
+          <div className={styles.info}>
+            <h2>Register GPU Credit</h2>
+            <span className={styles.value}>
+              <a href="https://forms.gle/MkAj3Cu8ZeG7pT6eA" target="_blank" rel="noopener noreferrer">
+                Click here
+              </a>
             </span>
           </div>
         </div>
         <div className={styles.divider}></div>
 
-        <h1>Last Hour Usage</h1>
+        <h1>Active usage</h1>
         <div className={styles.details}>
           {list.map((e, key) => {
             const progress = e.value;
@@ -102,6 +111,7 @@ const GpuSummary = () => {
                 <div className={styles.progress} title={`${progress}%`}>
                   <div className={styles.percent} style={{ width: `${progress}%` }}>
                     {progress >= 9 ? `${progress.toFixed(2)}%` : null}
+                    {/* {progress > 0 ? `${progress.toFixed(2)}%` : null} */}
                     {/* {`${e.progress}%`} */}
                     {/* RANDOM_RANGE_PERCENT */}
                   </div>

diff --git a/src/pages/GpuStaking/helpers/index.ts b/src/pages/GpuStaking/helpers/index.ts
@@ -52,3 +52,8 @@ export const calcYearlyReward = (amount: number, apr: number, prices: CoinGeckoP
   if (!prices[SCORAI_TOKEN_INFO.coinGeckoId]) return 0;
   return ((amount * apr) / 100) * prices[SCORAI_TOKEN_INFO.coinGeckoId];
 };
+
+export const calcMonthlyReward = (rewardPerSec: string, prices: CoinGeckoPrices<string>) => {
+  const rewardPerSecUsd = getUsd(rewardPerSec, USDC_TOKEN_INFO, prices);
+  return rewardPerSecUsd * TIMER.SECOND_PER_MONTH;
+};
diff --git a/src/pages/GpuStaking/index.tsx b/src/pages/GpuStaking/index.tsx
@@ -23,7 +23,7 @@ import { RootState } from 'store/configure';
 import GpuSummary from './components/GpuSummary';
 import StakingForm from './components/StakingForm';
 import { SCORAI_TOKEN_INFO, USDC_TOKEN_INFO } from './constants';
-import { calcAPY } from './helpers';
+import { calcAPY, calcMonthlyReward } from './helpers';
 import { useGetLockInfo, useGetMyStakeRewardInfo, useGetRewardPerSecInfo, useGetStakeInfo } from './hooks';
 import styles from './index.module.scss';
 
@@ -69,6 +69,8 @@ const GpuStaking: React.FC<{}> = () => {
 
   const apy = calcAPY(rewardPerSecInfo.amount, stakeInfo?.total_bond_amount || '0', prices);
 
+  const epochRev = calcMonthlyReward(rewardPerSecInfo.amount, prices);
+
   const handleClaim = async () => {
     setLoading(true);
     displayToast(TToastType.TX_BROADCASTING);
@@ -163,7 +165,7 @@ const GpuStaking: React.FC<{}> = () => {
           {/* </div> */}
         </div>
 
-        <GpuSummary />
+        <GpuSummary epochRev={epochRev} />
       </div>
 
       {openBuy && (

diff --git a/src/pages/UniversalSwap/Swap/components/SelectChain/SelectChain.tsx b/src/pages/UniversalSwap/Swap/components/SelectChain/SelectChain.tsx
@@ -1,19 +1,14 @@
-import { CoinIcon, TokenItemType, CustomChainInfo } from '@oraichain/oraidex-common';
-import { TokenInfo } from 'types/token';
-import styles from './SelectChain.module.scss';
-import SearchInput from 'components/SearchInput';
-import cn from 'classnames/bind';
-import { chainIcons } from 'config/chainInfos';
-import { ReactComponent as OraiIcon } from 'assets/icons/oraichain.svg';
 import { ReactComponent as IconoirCancel } from 'assets/icons/iconoir_cancel.svg';
-import { networks } from 'helper';
 import NetworkImg from 'assets/icons/network.svg';
-import CheckImg from 'assets/icons/check.svg';
-import { getTotalUsd } from 'libs/utils';
+import cn from 'classnames/bind';
 import { tokenMap } from 'config/bridgeTokens';
-import { CoinGeckoPrices } from 'hooks/useCoingecko';
+import { chainIcons } from 'config/chainInfos';
 import { Themes } from 'context/theme-context';
+import { networks } from 'helper';
 import { formatDisplayUsdt } from 'helper/helpers';
+import { CoinGeckoPrices } from 'hooks/useCoingecko';
+import { getTotalUsd } from 'libs/utils';
+import styles from './SelectChain.module.scss';
 
 const cx = cn.bind(styles);
 interface InputSwapProps {
@@ -24,6 +19,7 @@ interface InputSwapProps {
   amounts: AmountDetails;
   theme: Themes;
   prices: CoinGeckoPrices<string>;
+  filterChainId?: string[];
 }
 
 export default function SelectChain({
@@ -32,7 +28,8 @@ export default function SelectChain({
   setSelectChain,
   amounts,
   prices,
-  theme
+  theme,
+  filterChainId = []
 }: InputSwapProps) {
   // const isAllowChainId = (chainId) => ['kawaii_6886-1', 'bitcoin', 'noble-1', 'Neutaro-1'].includes(chainId);
   const isAllowChainId = (chainId) => ['kawaii_6886-1', 'bitcoin'].includes(chainId);
@@ -69,19 +66,27 @@ export default function SelectChain({
 
         <div className={styles.selectChainList}>
           <div className={styles.selectChainItems}>
-            {networks
-              .filter((net) => !isAllowChainId(net.chainId))
+            {[...networks]
+              .filter(
+                (net) => !isAllowChainId(net.chainId) && (!filterChainId.length || filterChainId.includes(net.chainId))
+              )
+              .map((n) => {
+                const subAmounts = Object.fromEntries(
+                  Object.entries(amounts).filter(([denom]) => tokenMap[denom] && tokenMap[denom].chainId === n.chainId)
+                );
+                const totalUsd = getTotalUsd(subAmounts, prices);
+
+                return {
+                  ...n,
+                  totalUsd
+                };
+              })
+              .sort((a, b) => Number(b.totalUsd || 0) - Number(a.totalUsd || 0))
               .map((item) => {
                 const networkIcon = chainIcons.find((chainIcon) => chainIcon.chainId === item.chainId);
                 const key = item.chainId.toString();
                 const title = item.chainName;
-                const subAmounts = Object.fromEntries(
-                  Object.entries(amounts).filter(
-                    ([denom]) => tokenMap[denom] && tokenMap[denom].chainId === item.chainId
-                  )
-                );
-                const totalUsd = getTotalUsd(subAmounts, prices);
-                const balance = '$' + (totalUsd > 0 ? totalUsd.toFixed(2) : '0');
+                const balance = '$' + (item.totalUsd > 0 ? item.totalUsd.toFixed(2) : '0');
                 return (
                   <div
                     key={key}

diff --git a/src/pages/UniversalSwap/Swap/components/SendModal/InputSwap/InputSwap.tsx b/src/pages/UniversalSwap/Swap/components/SendModal/InputSwap/InputSwap.tsx
@@ -7,6 +7,7 @@ import { TokenInfo } from 'types/token';
 import styles from './InputSwap.module.scss';
 import { chainInfosWithIcon } from 'config/chainInfos';
 import { Themes } from 'context/theme-context';
+import { numberWithCommas } from 'helper/helpers';
 
 const cx = cn.bind(styles);
 
@@ -112,7 +113,7 @@ export default function InputSwapV4({
               }}
             />
           </div>
-          <div className={cx('usd')}>≈ ${amount ? Number(usdPrice) || 0 : 0}</div>
+          <div className={cx('usd')}>≈ ${amount ? numberWithCommas(Number(usdPrice) || 0) : 0}</div>
         </div>
       </div>
       {!!tokenFee && (

diff --git a/src/pages/UniversalSwap/Swap/components/SendModal/SendModal.tsx b/src/pages/UniversalSwap/Swap/components/SendModal/SendModal.tsx
@@ -8,6 +8,7 @@ import Loader from 'components/Loader';
 import Modal from 'components/Modal';
 import { TToastType, displayToast } from 'components/Toasts/Toast';
 import { getTransactionUrl, handleErrorTransaction } from 'helper';
+import { useCoinGeckoPrices } from 'hooks/useCoingecko';
 import useConfigReducer from 'hooks/useConfigReducer';
 import { useCopyClipboard } from 'hooks/useCopyClipboard';
 import { calcMaxAmount, getTokenIcon } from 'pages/UniversalSwap/helpers';
@@ -31,6 +32,9 @@ export const SendModal: FC<{
   const [coe, setCoe] = useState(0);
   const FromIcon = getTokenIcon(tokenInfo, theme);
   const { handleReadClipboard } = useCopyClipboard();
+  const { data: prices } = useCoinGeckoPrices();
+
+  const usdPrice = (prices?.[tokenInfo?.coinGeckoId] * amount).toFixed(6);
 
   return (
     <Modal isOpen={isOpen} close={close} open={open} isCloseBtn={false} className={`${styles.sendModal}`}>
@@ -86,7 +90,7 @@ export const SendModal: FC<{
                 // throw new Error('Function not implemented.');
               }}
               tokenFee={0}
-              usdPrice={''}
+              usdPrice={usdPrice}
             />
           </div>
           <div className={styles.sendModalContainerHeaderInputRecipient}>

diff --git a/src/pages/UniversalSwap/Swap/hooks/useSwapFee.ts b/src/pages/UniversalSwap/Swap/hooks/useSwapFee.ts
@@ -36,6 +36,12 @@ export const useSwapFee = ({ fromToken, toToken }) => {
       return;
     }
 
+    // bridge
+    if (fromChainId !== toChainId && toName === fromName) {
+      setFee(() => 0);
+      return;
+    }
+
     // swap to oraichain and bridge
     if (
       fromChainId !== toChainId &&