Feat/hub (#1154)

Co-authored-by: dasein <[email protected]>

src/components/Dot/Dot.module.scss

@@ -0,0 +1,70 @@
+$animation-time: 2.3s;
+
+.dot {
+  --size: 4px;
+
+  display: inline-block;
+  border-radius: 50%;
+  opacity: 1;
+  position: relative;
+
+  width: var(--size);
+  height: var(--size);
+
+  --color-r: 0;
+  --color-b: 0;
+  --color-g: 0;
+
+  &.color_ {
+    &blue {
+      --color-r: 31;
+      --color-b: 203;
+      --color-g: 225;
+    }
+
+    &red {
+      --color-r: 255;
+      --color-b: 92;
+      --color-g: 0;
+    }
+
+    &green {
+      --color-r: 122;
+      --color-b: 250;
+      --color-g: 161;
+    }
+
+    &purple {
+      --color-r: 246;
+      --color-b: 43;
+      --color-g: 253;
+    }
+
+    &yellow {
+      --color-r: 255;
+      --color-g: 0;
+      --color-b: 217;
+    }
+  }
+
+  background-color: rgb(var(--color-r), var(--color-b), var(--color-g));
+}
+
+.animation {
+  transition: all 1s;
+
+  animation: pulse $animation-time infinite alternate;
+}
+
+@keyframes pulse {
+  0% {
+    box-shadow: 0px 0px 0px 0px rgb(var(--color-r),
+        var(--color-b),
+        var(--color-g));
+    opacity: 0.2;
+  }
+
+  100% {
+    box-shadow: 0px 0px 10px 2px rgb(var(--color-r), var(--color-b), var(--color-g));
+  }
+}

src/components/Dot/Dot.stories.tsx

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Dot from './Dot';
+
+const meta: Meta<typeof Dot> = {
+  component: Dot,
+  title: 'atoms/Dot',
+  parameters: {
+    design: {
+      type: 'figma',
+      url: '',
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof Dot>;
+
+export const Main: Story = {
+  args: {
+    color: 'green',
+    animation: true,
+  },
+};

src/components/Dot/Dot.tsx

@@ -0,0 +1,39 @@
+import cx from 'classnames';
+import { useEffect, useRef } from 'react';
+import styles from './Dot.module.scss';
+
+export enum DotColors {
+  blue = 'blue',
+  green = 'green',
+  red = 'red',
+  purple = 'purple',
+  yellow = 'yellow',
+}
+
+type Props = {
+  color: DotColors | keyof typeof DotColors;
+  className?: string;
+  animation?: boolean;
+  size?: number;
+};
+
+function Dot({ color, className, animation, size = 4 }: Props) {
+  const ref = useRef<HTMLLabelElement | null>(null);
+
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.style.setProperty('--size', `${size}px`);
+    }
+  }, [ref, size]);
+
+  return (
+    <span
+      ref={ref}
+      className={cx(styles.dot, styles[`color_${color}`], className, {
+        [styles.animation]: animation,
+      })}
+    />
+  );
+}
+
+export default Dot;

src/components/Row/Row.module.scss

@@ -1,15 +1,16 @@
 .container {
   display: grid;
   grid-template-columns: 240px 1fr;
-  align-items: center;
+  align-items: baseline;
   line-height: 20px;
   font-size: 16px;
 
   .value {
     text-transform: none !important;
     display: flex;
-    align-items: center;
-    justify-content: flex-start;
+    justify-content: center;
+    align-items: flex-start;
+    flex-direction: column;
   }
 }
 

src/components/actionBar/index.tsx

@@ -62,7 +62,7 @@ function ActionBar({ children, text, onClickBack, button }: Props) {
   const noPassport = CHAIN_ID === Networks.BOSTROM && !passport;
 
   const exception =
-    (location.pathname !== routes.keys.path &&
+    (!location.pathname.includes('/keys') &&
       !location.pathname.includes('/drive') &&
       // !location.pathname.includes('/oracle') &&
       location.pathname !== '/') ||

src/components/index.js

@@ -55,6 +55,10 @@ import Slider from './Slider/Slider';
 import CreatedAt from './CreatedAt/CreatedAt';
 import Tabs from './Tabs/Tabs';
 import Row, { RowsContainer } from './Row/Row';
+import Display from './containerGradient/Display/Display';
+import DisplayTitle from './containerGradient/DisplayTitle/DisplayTitle';
+import { Color } from './LinearGradientContainer/LinearGradientContainer';
+import Dot from './Dot/Dot';
 
 const BtnGrd = Button;
 
@@ -108,6 +112,10 @@ export {
   Tabs,
   Row,
   RowsContainer,
+  Display,
+  DisplayTitle,
+  Color,
+  Dot,
 };
 
 export { Dots } from './ui/Dots';

src/components/search/Spark/LeftMeta/Creator/Creator.tsx

@@ -6,7 +6,7 @@ import Account from 'src/components/account/account';
 import { timeSince } from 'src/utils/utils';
 import styles from './Creator.module.scss';
 
-function Creator({ cid }: { cid: string }) {
+function Creator({ cid, onlyTime }: { cid: string; onlyTime?: boolean }) {
   const { creator } = useGetCreator(cid);
 
   if (!creator) {
@@ -24,7 +24,7 @@ function Creator({ cid }: { cid: string }) {
         </span>
       </Tooltip>
 
-      <Account address={creator.address} avatar />
+      {!onlyTime && <Account address={creator.address} avatar />}
     </>
   );
 }

src/components/search/Spark/Spark.tsx

@@ -14,10 +14,11 @@ import RankButton from './LeftMeta/RankButton/RankButton';
 type Props = {
   cid: string;
   handleContentType: (type: IpfsContentType) => void;
-  handleRankClick: (cid: string) => void;
+  handleRankClick?: (cid: string) => void;
   itemData: {};
   query: string;
   linkType: LinksType;
+  selfLinks?: boolean;
 };
 
 function Spark({
@@ -28,6 +29,7 @@ function Spark({
   rankSelected,
   handleContentType,
   handleRankClick,
+  selfLinks,
 }: Props) {
   const { isMobile } = useDevice();
   const [ref, hovering] = useHover();
@@ -37,12 +39,14 @@ function Spark({
       {!isMobile && hovering && (
         <>
           <div className={styles.left}>
-            <Creator cid={cid} />
-            <RankButton
-              cid={cid}
-              rankSelected={rankSelected}
-              handleRankClick={handleRankClick}
-            />
+            <Creator cid={cid} onlyTime={selfLinks} />
+            {handleRankClick && (
+              <RankButton
+                cid={cid}
+                rankSelected={rankSelected}
+                handleRankClick={handleRankClick}
+              />
+            )}
           </div>
 
           {/* TODO: refact. meta should be moved inside contentItem and exclude fetchParticle from that  */}

src/components/valueImg/imgDenom.tsx

@@ -101,9 +101,9 @@ function ImgDenom({
         setTooltipText(path);
       }
     } else {
-      setImgDenom(defaultImg);
+      setImgDenom(getNativeImg(coinDenom));
     }
-  }, [coinDenom, infoDenom, fetchWithDetails]);
+  }, [coinDenom, infoDenom, fetchWithDetails, getImgFromIpfsByCid]);
 
   const img = (
     <img

src/constants/config.ts

@@ -44,4 +44,6 @@ export const DIVISOR_CYBER_G = 10 ** 9;
 
 export const DEFAULT_GAS_LIMITS = 200000;
 
+export const COIN_DECIMALS_RESOURCE = 3;
+
 export const { MEMO_KEPLR } = defaultNetworks[DEFAULT_CHAIN_ID];

src/constants/hubContracts.ts

@@ -9,3 +9,9 @@ export const HUB_CHANNELS =
 
 export const HUB_PROTOCOLS =
   'bostrom12yqsxh82qy3dz6alnmjhupyk85skgeqznzxv92q99hqtyu7vvdsqgwjgv';
+
+export const HUB_CONTRACTS = {
+  HUB_TOKENS,
+  HUB_NETWORKS,
+  HUB_CHANNELS,
+};

src/containers/Validators/components/ui.jsx → src/containers/Validators/components/ui.tsx

@@ -1,6 +1,7 @@
-import { Pane, Pill, Text } from '@cybercongress/gravity';
+import { Pane, Text } from '@cybercongress/gravity';
 import { Link } from 'react-router-dom';
-import { Tooltip } from '../../../components';
+import { Tooltip } from 'src/components';
+import Dot, { DotColors } from 'src/components/Dot/Dot';
 
 const statusHeroes = {
   BOND_STATUS_UNSPECIFIED: 0,
@@ -19,54 +20,54 @@ export function TextTable({ children, fontSize, color, display, ...props }) {
       color={`${color || '#fff'}`}
       display={`${display || 'inline-flex'}`}
       alignItems="center"
+      gap={10}
       {...props}
     >
       {children}
     </Text>
   );
 }
 
-export function StatusTooltip({ status }) {
-  let statusColor;
+export function StatusTooltip({
+  status,
+  size,
+  animation,
+}: {
+  status: keyof typeof statusHeroes | number;
+  size?: number;
+  animation?: boolean;
+}) {
+  let statusColor: DotColors;
+  let textTooltip: string;
 
-  switch (statusHeroes[status]) {
+  const switchValue =
+    typeof status === 'number' ? status : statusHeroes[status];
+
+  switch (switchValue) {
     case 1:
-      statusColor = 'red';
+      statusColor = DotColors.red;
+      textTooltip = 'UNBONDED';
       break;
     case 2:
-      statusColor = 'yellow';
+      statusColor = DotColors.yellow;
+      textTooltip = 'UNBONDING';
+
       break;
     case 3:
-      statusColor = 'green';
+      statusColor = DotColors.green;
+      textTooltip = 'BONDED';
+
       break;
     default:
-      statusColor = 'neutral';
+      statusColor = DotColors.purple;
+      textTooltip = 'UNSPECIFIED';
       break;
   }
 
   return (
-    <Pane marginRight={10} display="flex" alignItems="center">
-      <Tooltip
-        placement="bottom"
-        tooltip={
-          <Pane display="flex" alignItems="center" paddingX={10} paddingY={10}>
-            Validator status:&nbsp;
-            {statusHeroes[status] === 1 && 'unbonded'}
-            {statusHeroes[status] === 2 && 'unbonding'}
-            {statusHeroes[status] === 3 && 'bonded'}
-          </Pane>
-        }
-      >
-        <Pill
-          height={7}
-          width={7}
-          borderRadius="50%"
-          paddingX={4}
-          paddingY={0}
-          // marginX={20}
-          isSolid
-          color={statusColor}
-        />
+    <Pane display="flex" alignItems="center">
+      <Tooltip placement="top" strategy="fixed" tooltip={textTooltip}>
+        <Dot color={statusColor} size={size} animation={animation} />
       </Tooltip>
     </Pane>
   );

src/containers/application/Header/SwitchAccount/SwitchAccount.tsx

@@ -234,9 +234,9 @@ function SwitchAccount() {
                   image={require('../../../../image/sigma.png')}
                 />
                 <AccountItem
-                  name="keys"
+                  name="settings"
                   setControlledVisible={setControlledVisible}
-                  link={routes.keys.path}
+                  link={routes.settings.path}
                   image={require('./keys.png')}
                 />
               </div>