Feat/hub (#1154)

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

Author: dimakorzhovnik

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];