Channels listing and details page

src/App.tsx

@@ -293,7 +293,6 @@ export default function App() {
   }, []);
 
   const steps = UserJourneySteps({ darkMode });
-
   const handleJoyrideCallback = (data: CallBackProps) => {
     const { action, lifecycle, index } = data;
     if (lifecycle === 'ready') {

src/blocks/button/Button.tsx

@@ -40,6 +40,7 @@ const StyledButton = styled.button<ButtonProps>`
   font-family: var(--font-family);
   justify-content: center;
   white-space: nowrap;
+  flex-shrink: 0;
 
   /* Common icon css added through CSS class */
   .icon {

src/blocks/icons/components/CaretLeft.tsx

@@ -9,16 +9,17 @@ const CaretLeft: FC<IconProps> = (allProps) => {
       componentName="CaretLeft"
       icon={
         <svg
-          xmlns="http://www.w3.org/2000/svg"
           width="inherit"
           height="inherit"
-          viewBox="0 0 6 10"
+          viewBox="0 0 24 24"
           fill="none"
+          xmlns="http://www.w3.org/2000/svg"
           {...props}
         >
           <path
-            d="M4.89258 8.72499L1.16758 4.99999L4.89258 1.27499"
+            d="M14.8389 17.5875L9.25137 12L14.8389 6.41248"
             stroke="currentColor"
+            stroke-width="1.5"
             stroke-linecap="round"
             stroke-linejoin="round"
           />

src/blocks/icons/components/CaretRight.tsx

@@ -9,19 +9,32 @@ const CaretRight: FC<IconProps> = (allProps) => {
       componentName="CaretRight"
       icon={
         <svg
-          xmlns="http://www.w3.org/2000/svg"
           width="inherit"
           height="inherit"
-          viewBox="0 0 6 10"
+          viewBox="0 0 24 24"
           fill="none"
+          xmlns="http://www.w3.org/2000/svg"
           {...props}
         >
-          <path
-            d="M1.16748 1.27502L4.89246 5L1.16748 8.72498"
-            stroke="currentColor"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          />
+          <g clip-path="url(#clip0_4239_16009)">
+            <path
+              d="M9.25146 6.41254L14.8389 12L9.25146 17.5875"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </g>
+          <defs>
+            <clipPath id="clip0_4239_16009">
+              <rect
+                width="15.9553"
+                height="8.72765"
+                fill="white"
+                transform="translate(16.4089 4.02235) rotate(90)"
+              />
+            </clipPath>
+          </defs>
         </svg>
       }
       {...restProps}

src/blocks/icons/components/Chat.tsx

@@ -9,8 +9,7 @@ const Chat: FC<IconProps> = (allProps) => {
       componentName="Chat"
       icon={
         <svg
-          width="inherit"
-          height="inherit"
+          style={{ width: 'inherit', height: 'inherit' }}
           viewBox="0 0 32 32"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"

src/blocks/icons/components/Tutotial.tsx

@@ -0,0 +1,37 @@
+import { FC } from 'react';
+import { IconWrapper } from '../IconWrapper';
+import { IconProps } from '../Icons.types';
+
+const Tutorial: FC<IconProps> = (allProps) => {
+  const { svgProps: props, ...restProps } = allProps;
+  return (
+    <IconWrapper
+      componentName="Tutorial"
+      icon={
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          style={{ width: 'inherit', height: 'inherit' }}
+          viewBox="0 0 22 21"
+          fill="none"
+          {...props}
+        >
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M0 2.09998V14.9666C0 16.0712 0.895431 16.9666 2 16.9666H20C21.1046 16.9666 22 16.0712 22 14.9666V2.09998C22 0.995407 21.1046 0.0999756 20 0.0999756H2C0.89543 0.0999756 0 0.995406 0 2.09998ZM8.8 4.31022V12.6964C8.8 12.9192 9.06929 13.0307 9.22678 12.8732L13.7424 8.35756C13.8454 8.25459 13.8389 8.08575 13.7284 7.99097L9.2127 4.12041C9.05053 3.98141 8.8 4.09663 8.8 4.31022Z"
+            fill="currentColor"
+          />
+          <path
+            d="M5.8667 19.9H16.1334"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+          />
+        </svg>
+      }
+      {...restProps}
+    />
+  );
+};
+
+export default Tutorial;

src/blocks/icons/index.ts

@@ -159,6 +159,7 @@ export { default as Swap } from './components/Swap';
 export { default as Tick } from './components/Tick';
 export { default as TickCircleFilled } from './components/TickCircleFilled';
 export { default as TickDecoratedCircleFilled } from './components/TickDecoratedCircleFilled';
+export { default as Tutorial } from './components/Tutotial';
 
 export { default as UserFilled } from './components/UserFilled';
 

src/blocks/index.ts

@@ -9,6 +9,7 @@ export { Menu, type MenuProps, MenuItem, type MenuItemComponentProps } from './m
 export { Modal, type ModalProps, modal } from './modal';
 export { notification } from './notification';
 export { Pagination, type PaginationProps } from './pagination';
+export { Pill, type PillProps } from './pill';
 export { ProgressBar, type ProgressBarProps } from './progressBar';
 export { Separator, type SeparatorProps } from './separator';
 export { Skeleton, type SkeletonProps } from './skeleton';

src/blocks/pill/Pill.tsx

@@ -0,0 +1,45 @@
+import { FC, ReactNode } from 'react';
+import styled, { FlattenSimpleInterpolation } from 'styled-components';
+import { TransformedHTMLAttributes } from '../Blocks.types';
+import { getTextVariantStyles } from '../Blocks.utils';
+
+export type PillProps = {
+  /* Child react nodes rendered by Pill */
+  children?: ReactNode;
+  /* Additional prop from styled components to apply custom css to Lozenge */
+  css?: FlattenSimpleInterpolation;
+  /* Decides the UI state of the component */
+  isActive?: boolean;
+} & TransformedHTMLAttributes<HTMLDivElement>;
+
+const StyledPill = styled.div<PillProps>`
+  align-items: center;
+  border-radius: var(--radius-xl);
+  background: var(--${({ isActive }) => (isActive ? 'surface-primary-inverse' : 'surface-secondary')});
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  height: 40px;
+  justify-content: center;
+  max-width: max-content;
+  padding: var(--spacing-none) var(--spacing-sm);
+
+  ${({ isActive }) => getTextVariantStyles('bs-semibold', isActive ? 'text-primary-inverse' : 'text-primary')}
+
+  /* Custom CSS applied via styled component css prop */
+  ${(props) => props.css || ''}
+`;
+
+const Pill: FC<PillProps> = ({ children, isActive = false, onClick, ...props }) => {
+  return (
+    <StyledPill
+      isActive={isActive}
+      onClick={onClick}
+      {...props}
+    >
+      {children}
+    </StyledPill>
+  );
+};
+
+export { Pill };

src/blocks/pill/index.ts

@@ -0,0 +1 @@
+export * from './Pill';

src/blocks/select/Select.tsx

@@ -41,12 +41,12 @@ export type SelectProps = {
   action?: ReactNode;
 };
 
-const Container = styled.div<{ css?: FlattenSimpleInterpolation }>`
+const Container = styled.div<{ css?: FlattenSimpleInterpolation; label: SelectProps['label'] }>`
   align-items: flex-start;
   display: flex;
   flex-direction: column;
   flex: 1 0 0;
-  gap: var(--spacing-xxs, 8px);
+  gap: var(--spacing-${({ label }) => (label ? 'xxs' : 'none')});
 
   /* Custom CSS applied via styled component css prop */
   ${(props) => props.css || ''};
@@ -255,7 +255,10 @@ const Select: React.FC<SelectProps> = ({
   };
 
   return (
-    <Container css={css}>
+    <Container
+      css={css}
+      label={label}
+    >
       <LabelContainer>
         <LabelText color={disabled ? 'components-inputs-text-disabled' : 'components-inputs-text-default'}>
           <LabelTextContainer>

src/blocks/textInput/TextInput.tsx

@@ -21,12 +21,12 @@ export type TextInputProps = {
   value: string | number;
 };
 
-const Container = styled.div<{ css?: FlattenSimpleInterpolation }>`
+const Container = styled.div<{ css?: FlattenSimpleInterpolation; label: TextInputProps['label'] }>`
   align-items: flex-start;
   display: flex;
   flex-direction: column;
   flex: 1 0 0;
-  gap: var(--spacing-xxs, 8px);
+  gap: var(--spacing-${({ label }) => (label ? 'xxs' : 'none')});
 
   /* Custom CSS applied via styled component css prop */
   ${(props) => props.css || ''};
@@ -151,7 +151,10 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
     ref
   ) => {
     return (
-      <Container css={css}>
+      <Container
+        css={css}
+        label={label}
+      >
         {label && (
           <LabelContainer>
             <InputText

src/common/Common.utils.tsx

@@ -1,6 +1,11 @@
+import { appConfig } from 'config';
 import { LOGO_ALIAS_CHAIN } from './Common.constants';
 import { networkName } from 'helpers/UtilityHelper';
 
+export const allowedNetworks = appConfig.allowedNetworks.filter(
+  (chain: number) => chain != appConfig.coreContractChain
+);
+
 export const getSelectChains = (chainIdList: Array<number>) => {
   return chainIdList?.map((key: number) => {
     const Component = LOGO_ALIAS_CHAIN[key];
@@ -11,3 +16,21 @@ export const getSelectChains = (chainIdList: Array<number>) => {
     };
   });
 };
+
+/**
+ * @param count
+ * @returns returns formatted number
+ */
+export const formatSubscriberCount = (count?: number) => {
+  if (count) {
+    if (count >= 1000000) {
+      return (count / 1000000).toFixed(1) + 'M';
+    } else if (count >= 1000) {
+      return (count / 1000).toFixed(1) + 'K';
+    } else {
+      return count;
+    }
+  } else {
+    return 0;
+  }
+};