update ui homebase (icon, tab)

src/layouts/Sidebar.tsx

@@ -85,7 +85,7 @@ const Sidebar: React.FC<{}> = React.memo((props) => {
         <div className={classNames(styles.sidebar_menu)}>
           <div className={classNames(styles.menu_items)}>
             {renderLink('/homebase', 'Homebase', setLink, <HomeBaseIcon />)}
-            {renderLink('/homebase', 'GPU Staking', setLink, <GpuStakingIcon />)}
+            {renderLink('/gpu-staking', 'GPU Staking', setLink, <GpuStakingIcon />)}
             {renderLink('/homebase', 'ORAI Staking', setLink, <OraiStakingIcon />, <JumpIcon />)}
             {renderLink('/homebase', 'Governance', setLink, <GovernanceIcon />, <JumpIcon />)}
             {renderLink('/homebase', 'Buy Crypto', setLink, <BuyCryptoIcon />)}

src/pages/GpuStaking/components/InputBalance/index.module.scss

@@ -0,0 +1,176 @@
+@import 'src/styles/mixins';
+@import 'src/styles/variables';
+@import 'src/styles/themes';
+
+.inputBalance {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  border-radius: 12px;
+  @include theme {
+    background: theme-get('neutral-6');
+  }
+
+  .title {
+    @include theme {
+      color: theme-get('neutral-9');
+    }
+
+    font-size: 14px;
+    font-weight: 400;
+
+    letter-spacing: 0.1px;
+
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 8px;
+
+    .text {
+      @include theme {
+        color: theme-get('neutral-text-text-dropdown');
+      }
+      font-size: 16px;
+      font-weight: 500;
+
+      @include small-mobile {
+        font-size: 14px;
+      }
+    }
+
+    .balance {
+      text-align: right;
+
+      @include small-mobile {
+        font-size: 12px;
+      }
+    }
+  }
+
+  .inputWrapper {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .input {
+      display: flex;
+      height: 56px;
+      padding: 12px 16px;
+      justify-content: space-between;
+      align-items: center;
+      gap: 8px;
+      flex: 1;
+
+      font-size: 20px;
+      font-weight: 600;
+      line-height: 150%;
+      border-radius: 99px;
+
+      @include theme {
+        color: theme-get('neutral-text-text-dropdown');
+        background: theme-get('neutral-surface-bg-section-4');
+      }
+
+      input {
+        flex: 1;
+        width: 70%;
+      }
+
+      .symbol {
+        display: flex;
+        align-items: center;
+
+        svg {
+          width: 18px;
+          height: 18px;
+        }
+      }
+
+      .usd {
+        @include theme {
+          color: theme-get('neutral-9');
+        }
+        font-size: 14px;
+        font-weight: 400;
+        letter-spacing: 0.1px;
+      }
+    }
+  }
+
+  .stakeBtn {
+    button {
+      white-space: nowrap;
+
+      @include small-mobile {
+        width: 100%;
+        // max-width: 100px;
+        font-size: 14px;
+      }
+    }
+
+    &.inDesktop {
+      @include small-mobile {
+        display: none;
+      }
+    }
+
+    &.inMobile {
+      display: none;
+
+      @include small-mobile {
+        display: block;
+      }
+    }
+  }
+
+  .coeff {
+    display: flex;
+    align-items: flex-start;
+    gap: 8px;
+
+    @include theme() {
+      color: theme-get('text-color');
+    }
+    text-align: center;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 150%;
+
+    .button {
+      display: flex;
+      height: 34px;
+      padding: 0px 12px 0px 20px;
+      justify-content: center;
+      align-items: center;
+      flex: 1 0 0;
+      border-radius: 99px;
+
+      @include theme() {
+        color: theme-get('neutral-text-text-dropdown');
+        background-color: theme-get('neutral-surface-bg-section-3');
+      }
+
+      @include small-mobile {
+        padding: 0px 12px 0px 12px;
+      }
+
+      &:hover {
+        @include theme() {
+          background-color: theme-get('neutral-surface-bg-section-hover');
+          opacity: 1;
+        }
+      }
+
+      &.active {
+        @include theme() {
+          color: theme-get('sea-stone-800');
+          border: 1px solid theme-get('sea-stone-800');
+          background-color: theme-get('neutral-surface-bg-section-active');
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,126 @@
+import { isMobile } from '@walletconnect/browser-utils';
+import { useState } from 'react';
+import NumberFormat from 'react-number-format';
+import styles from './index.module.scss';
+
+import { toAmount, toDisplay } from '@oraichain/oraidex-common';
+import { ReactComponent as OraiXIcon } from 'assets/icons/oraix.svg';
+import { ReactComponent as OraiXLightIcon } from 'assets/icons/oraix_light.svg';
+import { Button } from 'components/Button';
+import Loader from 'components/Loader';
+import { useCoinGeckoPrices } from 'hooks/useCoingecko';
+import useConfigReducer from 'hooks/useConfigReducer';
+import { getUsd } from 'libs/utils';
+import { ORAIX_DECIMAL } from 'pages/CoHarvest/constants';
+import { formatDisplayUsdt, numberWithCommas } from 'helper/helpers';
+import { ORAIX_TOKEN_INFO, STAKE_TAB } from 'pages/Staking/constants';
+
+export type InputBalanceType = {
+  showLoading?: boolean;
+  balance: string;
+  type?: STAKE_TAB;
+  label?: string;
+  amount: number;
+  setAmount: React.Dispatch<React.SetStateAction<number>>;
+  onSubmit: () => void;
+  loading: boolean;
+};
+
+const InputBalance = ({
+  showLoading = true,
+  onSubmit,
+  balance,
+  type = STAKE_TAB.Stake,
+  label = 'Balance',
+  amount,
+  setAmount,
+  loading
+}: InputBalanceType) => {
+  const [theme] = useConfigReducer('theme');
+  const [coeff, setCoeff] = useState(0);
+  const { data: prices } = useCoinGeckoPrices();
+  const amountUSD = getUsd(toAmount(amount), ORAIX_TOKEN_INFO, prices);
+
+  const isInsufficient = amount && amount > toDisplay(balance);
+  const disabled = loading || !amount || amount <= 0 || isInsufficient;
+
+  const isMobileMode = isMobile();
+
+  return (
+    <div className={styles.inputBalance}>
+      <div className={styles.title}>
+        <span className={styles.text}>
+          ORAIX Amount
+          {/* You {type.toLowerCase()} */}
+        </span>
+        <span className={styles.balance}>
+          {label}: <span className={styles.token}>{numberWithCommas(toDisplay(balance))} ORAIX</span>
+        </span>
+      </div>
+      <div className={styles.inputWrapper}>
+        <div className={styles.input}>
+          <div className={styles.symbol}>{theme === 'light' ? <OraiXLightIcon /> : <OraiXIcon />}</div>
+          <NumberFormat
+            placeholder="0"
+            thousandSeparator
+            className={styles.amount}
+            decimalScale={6}
+            disabled={false}
+            type="text"
+            value={amount}
+            onChange={() => {
+              setCoeff(0);
+            }}
+            isAllowed={(values) => {
+              const { floatValue } = values;
+              // allow !floatValue to let user can clear their input
+              return !floatValue || (floatValue >= 0 && floatValue <= 1e14);
+            }}
+            onValueChange={({ floatValue }) => {
+              setAmount(floatValue);
+            }}
+          />
+          <span className={styles.usd}>{formatDisplayUsdt(amountUSD)}</span>
+        </div>
+
+        <div className={`${styles.stakeBtn} ${styles.inDesktop}`}>
+          <Button type="primary" onClick={() => onSubmit()} disabled={disabled}>
+            {loading && <Loader width={22} height={22} />}&nbsp;
+            {isInsufficient ? 'Insufficient' : type === STAKE_TAB.Stake ? 'Stake' : 'Unstake'}
+          </Button>
+        </div>
+      </div>
+      <div className={styles.coeff}>
+        {[0.25, 0.5, 0.75, 1].map((e) => {
+          return (
+            <button
+              key={e}
+              className={`${styles.button} ${coeff === e ? styles.active : ''}`}
+              onClick={(event) => {
+                event.stopPropagation();
+                if (coeff === e) {
+                  setCoeff(0);
+                  setAmount(0);
+                  return;
+                }
+
+                setAmount(toDisplay(balance, ORAIX_DECIMAL) * e);
+                setCoeff(e);
+              }}
+            >
+              {e * 100}%
+            </button>
+          );
+        })}
+      </div>
+      <div className={`${styles.stakeBtn} ${styles.inMobile}`}>
+        <Button type="primary" onClick={() => onSubmit()} disabled={disabled}>
+          {showLoading && loading && <Loader width={22} height={22} />}&nbsp;
+          {isInsufficient ? 'Insufficient' : type === STAKE_TAB.Stake ? 'Stake' : 'Unstake'}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default InputBalance;