fix(particle): rank presence and usability

src/components/Rank/QuestionBtn/QuestionBtn.module.scss

@@ -8,4 +8,8 @@
   justify-content: center;
   width: 16px;
   height: 16px;
+
+  &:hover {
+    opacity: 0.8;
+  }
 }

src/components/Rank/rank.tsx

@@ -1,115 +1,47 @@
-import { Pane, Text } from '@cybercongress/gravity';
-import { Copy } from '../ui/copy';
-import Tooltip from '../tooltip/tooltip';
-import { LinkWindow } from '../link/link';
-import { trimString, exponentialToDecimal } from '../../utils/utils';
-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 (
-    // <Pane paddingX={15} paddingY={15}>
-    //   <Pane marginBottom={12}>
-    //     <Text color="#ffff">
-    //       Answer rank for{' '}
-    //       {hash && (
-    //         <Pane display="inline-flex" alignItems="center">
-    //           {trimString(hash, 5, 5)} <Copy text={hash} />
-    //         </Pane>
-    //       )}{' '}
-    //       is {rank}
-    //     </Text>
-    //   </Pane>
-    //   <Pane display="flex" marginBottom={12}>
-    //     <Text color="#ffff">
-    //       Answers between &nbsp;
-    //       {exponentialToDecimal(parseFloat(grade.from).toPrecision(3))}
-    //       &nbsp; and &nbsp;
-    //       {exponentialToDecimal(parseFloat(grade.to).toPrecision(3))}
-    //       &nbsp; recieve grade
-    //       <Pane
-    //         className={styles.rank}
-    //         style={{ display: 'inline-flex' }}
-    //         marginLeft="5px"
-    //         backgroundColor={color}
-    //       >
-    //         {grade.value}
-    //       </Pane>
-    //     </Text>
-    // </Pane>
-    <Pane>
-      <Text color="#ffff">
-        More about{' '}
-        {/* <LinkWindow to="https://ipfs.io/ipfs/QmceNpj6HfS81PcCaQXrFMQf7LR5FTLkdG9sbSRNy3UXoZ">
-        </LinkWindow> */}
-        <Link
-          to={routes.oracle.ask.getLink(
-            'QmWQyWPCHE2hfEaJy8sTVQtKgW4EAaCLGMc33sMkodmRZ3'
-          )}
-        >
-          cyber~Rank
-        </Link>
-      </Text>
-    </Pane>
-    // </Pane>
-  );
-}
-
-const gradeColorRank = (rank) => {
-  let rankGradeColor = '#546e7a';
+// const gradeColorRank = (rank) => {
+//   let rankGradeColor = '#546e7a';
 
-  switch (rank) {
-    case 1:
-      rankGradeColor = '#ff3d00';
-      break;
-    case 2:
-      rankGradeColor = '#ff9100';
-      break;
-    case 3:
-      rankGradeColor = '#ffea00';
-      break;
-    case 4:
-      rankGradeColor = '#64dd17';
-      break;
-    case 5:
-      rankGradeColor = '#00b0ff';
-      break;
-    case 6:
-      rankGradeColor = '#304ffe';
-      break;
-    case 7:
-      rankGradeColor = '#d500f9';
-      break;
-    default:
-      rankGradeColor = '#546e7a';
-      break;
-  }
+//   switch (rank) {
+//     case 1:
+//       rankGradeColor = '#ff3d00';
+//       break;
+//     case 2:
+//       rankGradeColor = '#ff9100';
+//       break;
+//     case 3:
+//       rankGradeColor = '#ffea00';
+//       break;
+//     case 4:
+//       rankGradeColor = '#64dd17';
+//       break;
+//     case 5:
+//       rankGradeColor = '#00b0ff';
+//       break;
+//     case 6:
+//       rankGradeColor = '#304ffe';
+//       break;
+//     case 7:
+//       rankGradeColor = '#d500f9';
+//       break;
+//     default:
+//       rankGradeColor = '#546e7a';
+//       break;
+//   }
 
-  return rankGradeColor;
-};
+//   return rankGradeColor;
+// };
 
 function Rank({ rank, hash, ...props }) {
-  const gradeValue = getRankGrade(rank);
-  const color = gradeColorRank(gradeValue.value);
+  // const gradeValue = getRankGrade(rank);
+  // const color = gradeColorRank(gradeValue.value);
 
   return (
-    <Tooltip
-      placement="bottom"
-      strategy="fixed"
-      tooltip={
-        <GradeTooltipContent
-          grade={gradeValue}
-          hash={hash}
-          color={color}
-          rank={rank}
-        />
-      }
-    >
+    <Link to="https://docs.cyb.ai/#/page/cyberank" replace target="_blank">
       <QuestionBtn {...props} />
-    </Tooltip>
+    </Link>
   );
 }
 

src/containers/ipfs/components/AdviserMeta/AdviserMeta.module.scss

@@ -5,7 +5,7 @@
   display: grid;
   grid-template-columns: repeat(3, 1fr);
 
-  @media (max-width: 768px) {
+  @media (width <= 768px) {
     display: block;
     text-align: center;
 
@@ -22,20 +22,18 @@
   .left {
     display: flex;
     gap: 7px;
-    align-items: center;
+    align-items: baseline;
 
     span:first-of-type {
-      color: rgba(255, 255, 255, 0.5);
+      color: rgb(255 255 255 / 50%);
       font-size: 14px;
     }
 
     .rank {
       display: flex;
       align-items: center;
       gap: 5px;
-
-      color: rgba(221, 255, 255, 0.38);
-
+      color: rgb(221 255 255 / 38%);
       font-size: 14px;
 
       .number {
@@ -61,8 +59,10 @@
     justify-content: flex-end;
     gap: 14px;
 
-    button {
-      opacity: 0.35;
+    a {
+      &:hover {
+        opacity: 0.8;
+      }
     }
   }
 }

src/containers/ipfs/components/AdviserMeta/AdviserMeta.tsx

@@ -1,9 +1,11 @@
 import { Rank, Account } from 'src/components';
 import { timeSince, formatCurrency } from 'src/utils/utils';
+import useRank from 'src/features/cyberlinks/rank/useRank';
+import { Link } from 'react-router-dom';
+import { routes } from 'src/routes';
 import useGetCreator from '../../hooks/useGetCreator';
 import { PREFIXES } from '../metaInfo';
 import styles from './AdviserMeta.module.scss';
-import useRank from 'src/features/cyberlinks/rank/useRank';
 
 type Props = {
   cid: string;
@@ -22,7 +24,6 @@ function AdviserMeta({ cid, type, size }: Props) {
 
         {!!rank && (
           <div className={styles.rank}>
-            <span>with rank</span>
             <span className={styles.number}>
               {rank.toLocaleString().replaceAll(',', ' ')}
             </span>
@@ -42,7 +43,7 @@ function AdviserMeta({ cid, type, size }: Props) {
         <span>
           🟥 {size ? formatCurrency(size, 'B', 0, PREFIXES) : 'unknown'}
         </span>
-        <button disabled>🌓</button>
+        <Link to={routes.robot.routes.soul.path}>🌓</Link>
       </div>
     </div>
   );

src/containers/ipfs/hooks/useGetDiscussion.ts

@@ -26,8 +26,6 @@ function useGetLinks(
     where.neuron = { _eq: neuron };
   }
 
-  console.log('search neuron:', neuron);
-
   // always no next page when skip
   const [hasNextPage, setHasNextPage] = useState(!skip);
   const [isInitialLoading, setIsInitialLoading] = useState(true);

src/features/cyberlinks/rank/useRank.ts

@@ -1,26 +1,11 @@
-import { useEffect, useState } from 'react';
-import { useQueryClient } from 'src/contexts/queryClient';
+import useQueryClientMethod from 'src/hooks/useQueryClientMethod';
 
 function useRank(cid: string) {
-  const [rank, setRank] = useState<number>();
+  const { data } = useQueryClientMethod('rank', [cid]);
 
-  const queryClient = useQueryClient();
+  const rank = data?.rank;
 
-  useEffect(() => {
-    (async () => {
-      if (!queryClient) {
-        return;
-      }
-
-      return;
-
-      const response = await queryClient.rank(cid);
-
-      setRank(Number(response.rank));
-    })();
-  }, [cid, queryClient]);
-
-  return rank;
+  return rank ? Number(rank) : undefined;
 }
 
 export default useRank;

src/hooks/useQueryClientMethod.ts

@@ -19,7 +19,7 @@ function useQueryClientMethod<T extends keyof CyberClient>(
   >(
     ['queryClientMethod', methodName, memoParams],
     () => {
-      const func = queryClient![methodName];
+      const func = queryClient![methodName].bind(queryClient);
 
       // refactor
       if (memoParams) {

src/routes.ts

@@ -48,6 +48,9 @@ export const routes = {
       brain: {
         path: '/robot/brain',
       },
+      soul: {
+        path: '/robot/soul',
+      },
     },
   },
   robotPassport: {