fix(hfr): improves (#1053)

cybercongress · Dec 12, 2023 · a554904 · a554904
1 parent 07f261c
commit a554904
Show file tree

Hide file tree

Showing 7 changed files with 50 additions and 40 deletions.
diff --git a/src/components/Rank/QuestionBtn/QuestionBtn.module.scss b/src/components/Rank/QuestionBtn/QuestionBtn.module.scss
@@ -0,0 +1,11 @@
+.questionBtn {
+  border: 1px solid var(--primary-color);
+  color: var(--primary-color) !important;
+  text-shadow: 0 0 5px var(--primary-color);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+}
diff --git a/src/components/Rank/QuestionBtn/QuestionBtn.tsx b/src/components/Rank/QuestionBtn/QuestionBtn.tsx
@@ -0,0 +1,12 @@
+import styles from './QuestionBtn.module.scss';
+
+// temp, need split to icon I think
+function QuestionBtn({ ...props }) {
+  return (
+    <button type="button" className={styles.questionBtn} {...props}>
+      ?
+    </button>
+  );
+}
+
+export default QuestionBtn;
diff --git a/src/components/Rank/Rank.module.scss b/src/components/Rank/Rank.module.scss
@@ -12,19 +12,3 @@
   font-weight: 800;
   display: flex;
 }
-
-.rank2 {
-  border: 1px solid var(--primary-color);
-  color: var(--primary-color) !important;
-  text-shadow: 0 0 5px var(--primary-color);
-  // font-size: 14px;
-  // font-size: 100;
-  border-radius: 50%;
-  // padding-bottom: 2px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  // padding: 0px;
-  width: 16px;
-  height: 16px;
-}
diff --git a/src/components/Rank/rank.tsx b/src/components/Rank/rank.tsx
@@ -7,6 +7,7 @@ import { getRankGrade } from 'src/utils/search/utils';
 import styles from './Rank.module.scss';
 import { routes } from 'src/routes';
 import { Link } from 'react-router-dom';
+import QuestionBtn from './QuestionBtn/QuestionBtn';
 
 function GradeTooltipContent({ grade, hash, color, rank }) {
   return (
@@ -107,18 +108,7 @@ function Rank({ rank, hash, ...props }) {
         />
       }
     >
-      <button
-        type="button"
-        className={styles.rank2}
-        style={
-          {
-            // backgroundColor: color,
-          }
-        }
-        {...props}
-      >
-        ?{/* {gradeValue.value} */}
-      </button>
+      <QuestionBtn {...props} />
     </Tooltip>
   );
 }

diff --git a/src/components/tooltip/Tooltip.module.scss b/src/components/tooltip/Tooltip.module.scss
@@ -6,6 +6,7 @@
   box-shadow: 0px 0px 4px 1px #38d6ae;
   z-index: 4;
   padding: 10px 12px;
+  max-width: 300px;
 
   &BorderNone {
     box-shadow: none;

diff --git a/src/containers/mint/eRatio.jsx b/src/containers/mint/eRatio.jsx
@@ -1,4 +1,4 @@
-import { Icon, Pane } from '@cybercongress/gravity';
+import QuestionBtn from 'src/components/Rank/QuestionBtn/QuestionBtn';
 import { Tooltip } from '../../components';
 
 function ERatio({ eRatio }) {
@@ -13,15 +13,20 @@ function ERatio({ eRatio }) {
           alignItems: 'center',
         }}
       >
-        E-Ratio{' '}
-        <Pane marginLeft={5}>
+        E-Ratio
+        <div
+          style={{
+            marginLeft: 5,
+            marginTop: 3,
+          }}
+        >
           <Tooltip
             placement="top"
             tooltip="Efficiency ratio show how much of your energy is not utilzed. Investmint H into A or V to improve your E-Ratio. The lower E-Ratio the more benefit you miss"
           >
-            <Icon icon="info-sign" color="#3ab793d4" />
+            <QuestionBtn />
           </Tooltip>
-        </Pane>
+        </div>
       </div>
       <div className="svg_wrap">
         <svg viewBox="0 0 40 40">

diff --git a/src/containers/mint/index.jsx → src/containers/mint/index.tsx b/src/containers/mint/index.jsx → src/containers/mint/index.tsx
@@ -39,6 +39,11 @@ const returnColorDot = (marks) => {
   };
 };
 
+enum SelectedState {
+  millivolt = 'millivolt',
+  milliampere = 'milliampere',
+}
+
 function Mint({ defaultAccount }) {
   const queryClient = useQueryClient();
   const { traseDenom } = useIbcDenom();
@@ -47,7 +52,9 @@ function Mint({ defaultAccount }) {
   // const { balance } = useGetBalance(addressActive, updateAddress);
   const { slotsData, vested, loadingAuthAccounts, originalVesting } =
     useGetSlots(addressActive, updateAddress);
-  const [selected, setSelected] = useState('millivolt');
+  const [selected, setSelected] = useState<SelectedState>(
+    SelectedState.milliampere
+  );
   const [value, setValue] = useState(0);
   const [valueDays, setValueDays] = useState(1);
   const [max, setMax] = useState(0);
@@ -274,16 +281,16 @@ function Mint({ defaultAccount }) {
           gridGap="8px"
           justifyContent="center"
         >
-          <Btn
-            text={<ValueImg justifyContent="center" text="millivolt" />}
-            checkedSwitch={selected === 'millivolt'}
-            onSelect={() => setSelected('millivolt')}
-          />
           <Btn
             text={<ValueImg justifyContent="center" text="milliampere" />}
             checkedSwitch={selected === 'milliampere'}
             onSelect={() => setSelected('milliampere')}
           />
+          <Btn
+            text={<ValueImg justifyContent="center" text="millivolt" />}
+            checkedSwitch={selected === 'millivolt'}
+            onSelect={() => setSelected('millivolt')}
+          />
         </Tablist>
         <div style={grid}>
           <div
@@ -387,7 +394,7 @@ function Mint({ defaultAccount }) {
               will release {resourceToken} <ValueImg text={selected} /> for you.
               At the end of the period, {selected} becomes liquid automatically,
               but you can use it to boost ranking during the freeze. You can
-              have only 8 slots for investmint at a time.
+              have only 16 slots for investmint at a time.
             </div>
           )}
         </div>