added tab block in trending channels section in dashboard

push-protocol · Aug 7, 2024 · e0b3025 · e0b3025
2 parents d0d3941 + 7a1049b
commit e0b3025
Show file tree

Hide file tree

Showing 203 changed files with 6,142 additions and 4,909 deletions.
diff --git a/package.json b/package.json
@@ -34,10 +34,12 @@
     "@metamask/eth-sig-util": "^4.0.0",
     "@mui/icons-material": "^5.8.4",
     "@mui/material": "^5.5.0",
-    "@pushprotocol/restapi": "1.7.20",
+    "@pushprotocol/restapi": "1.7.23",
     "@pushprotocol/socket": "0.5.3",
     "@pushprotocol/uiweb": "1.4.2",
+    "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.1",
     "@reach/tabs": "^0.18.0",
     "@reduxjs/toolkit": "^1.7.1",
@@ -50,11 +52,11 @@
     "@uniswap/widgets": "^2.47.3",
     "@unstoppabledomains/resolution": "8.5.0",
     "@web3-name-sdk/core": "^0.1.18",
-    "@web3-onboard/coinbase": "^2.2.5",
-    "@web3-onboard/core": "2.21.6",
-    "@web3-onboard/injected-wallets": "2.10.16",
-    "@web3-onboard/react": "^2.8.9",
-    "@web3-onboard/walletconnect": "2.5.5",
+    "@web3-onboard/coinbase": "^2.4.1",
+    "@web3-onboard/core": "2.22.2",
+    "@web3-onboard/injected-wallets": "2.11.1",
+    "@web3-onboard/react": "^2.9.2",
+    "@web3-onboard/walletconnect": "2.6.1",
     "@yisheng90/react-loading": "1.2.3",
     "assert": "2.0.0",
     "babel-plugin-styled-components": "1.10.7",

diff --git a/public/svg/Base.svg b/public/svg/Base.svg
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,5 @@
 // React + Web3 Essentials
-import { FC, useContext, useEffect, useMemo, useState } from 'react';
+import { FC, useContext, useEffect, useMemo, useRef, useState } from 'react';
 
 // External Packages
 import * as dotenv from 'dotenv';
@@ -85,6 +85,16 @@ const GlobalStyle = createGlobalStyle`
     --s13: 52px;
     --s14: 56px;
     --s15: 60px;
+    --s16: 64px;
+    --s17: 68px;
+    --s18: 72px;
+    --s19: 76px;
+    --s20: 80px;
+    --s21: 84px;
+    --s22: 88px;
+    --s23: 92px;
+    --s24: 96px;
+    --s25: 100px;
     // TODO: Add more as needed
 
     /* deprecated */
@@ -186,6 +196,7 @@ export default function App() {
 
   const { pgpPvtKey } = useContext<any>(AppContext);
   const { sidebarCollapsed, setSidebarCollapsed } = useContext(GlobalContext);
+  const [hasMounted, setHasMounted] = useState(false);
 
   const updateOnboardTheme = useUpdateTheme();
   const { userPushSDKInstance } = useSelector((state: any) => {
@@ -208,14 +219,22 @@ export default function App() {
     setcurrentTime(now);
   }, []);
 
-  useEffect(() => {
-    if (!account) return;
+  const resetState = () => {
     dispatch(resetSpamSlice());
     dispatch(resetNotificationsSlice());
     dispatch(resetCanSendSlice());
     dispatch(resetChannelCreationSlice());
     dispatch(resetAdminSlice());
     dispatch(resetUserSlice());
+  };
+
+  useEffect(() => {
+    if (!hasMounted) {
+      // do componentDidMount logic
+      setHasMounted(true);
+      if (!account) return;
+      resetState();
+    }
   }, [account]);
 
   // Initialize Theme
@@ -453,7 +472,7 @@ const LeftBarContainer = styled.div`
   position: fixed;
   // position: absolute;
 
-  @media (max-width: 992px) {
+  @media (max-width: 1024px) {
     display: none;
   }
 `;
@@ -465,7 +484,7 @@ const ContentContainer = styled.div`
   width: calc(100% - ${(props) => props.leftBarWidth}px);
   margin: 0px 0px 0px ${(props) => props.leftBarWidth}px;
 
-  @media (max-width: 992px) {
+  @media (max-width: 1024px) {
     margin: 0px;
   }
 `;
@@ -475,30 +494,6 @@ const PushLogo = styled.div`
   padding-bottom: 20px;
 `;
 
-const ProviderButton = styled.button`
-  flex: none;
-  min-width: 179px;
-  background: ${(props) => props.theme.default.bg};
-  margin: 20px 15px;
-  overflow: hidden;
-  padding: 20px 5px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 24px;
-  display: flex;
-  flex-direction: column;
-
-  &:hover {
-    cursor: pointer;
-    background: rgba(207, 206, 255, 0.24);
-  }
-  &:active {
-    cursor: pointer;
-    background: rgba(207, 206, 255, 0.24);
-  }
-`;
-
 const ProviderImage = styled.img`
   width: 73px;
   height: 69px;

diff --git a/src/blocks/Blocks.constants.ts b/src/blocks/Blocks.constants.ts
@@ -1,7 +1,3 @@
-export const newRadiusRegex = /\bradius-[a-z]+\b/g;
+export const radiusRegex = /\bradius-[a-z]+\b/g;
 
-export const oldRadiusRegex = /\br[0-9]+\b/g;
-
-export const newSpacingRegex = /\bspacing-[a-z]+\b/g;
-
-export const oldSpacingRegex = /\bs[0-9]+\b/g;
+export const spacingRegex = /\bspacing-[a-z]+\b/g;
diff --git a/src/blocks/Blocks.types.ts b/src/blocks/Blocks.types.ts
@@ -1,7 +1,7 @@
 import { HTMLAttributes } from 'react';
 import { BoxResponsiveCSSProperties, BoxResponsiveCSSPropertiesData, BoxResponsivePropValues } from './box';
 import { blocksColorsLegacy } from './Blocks.colors';
-import { ThemeBorderRadius, ThemeBorderSize, ThemeColors, ThemeSpacing } from './theme/Theme.types';
+import { StrokeColors, ThemeBorderRadius, ThemeBorderSize, ThemeSpacing } from './theme/Theme.types';
 import {
   SkeletonResponsiveCSSProperties,
   SkeletonResponsiveCSSPropertiesData,
@@ -21,20 +21,12 @@ export type Breakpoint = 'initial' | 'ms' | 'mm' | 'ml' | 'tb' | 'lp' | 'll' | '
 
 export type ResponsiveProp<T> = T | { [key in Breakpoint]?: T };
 
-// Remove old RadiusType types
 export type BlocksRadiusType =
-  | `r${number}`
-  | `r${number} r${number}`
-  | `r${number} r${number} r${number} r${number}`
   | ThemeBorderRadius
   | `${ThemeBorderRadius} ${ThemeBorderRadius}`
   | `${ThemeBorderRadius} ${ThemeBorderRadius} ${ThemeBorderRadius} ${ThemeBorderRadius}`;
 
-// Remove old SpaceType types
 export type BlocksSpaceType =
-  | `s${number}`
-  | `s${number} s${number}`
-  | `s${number} s${number} s${number} s${number}`
   | ThemeSpacing
   | `${ThemeSpacing} ${ThemeSpacing}`
   | `${ThemeSpacing} ${ThemeSpacing} ${ThemeSpacing} ${ThemeSpacing}`;
@@ -74,12 +66,6 @@ export type BlocksColors = keyof BlocksColorData;
 
 export type ThemeMode = 'light' | 'dark';
 
-// TODO: Remove ThemeModeColors
-export type ThemeModeColors = Record<ThemeMode, BlocksColors | ThemeColors>;
-
-// TODO: Remove the blocks colors border size
-export type BorderValue = `${number}px ${string} ${BlocksColors}` | `${number}px ${string} ${ThemeBorderSize}` | 'none';
-
-export type ThemeModeBorder = Record<ThemeMode, BorderValue>;
+export type BorderValue = `${ThemeBorderSize} ${string} ${StrokeColors}` | 'none';
 
 export type ModeProp = { mode: ThemeMode };
diff --git a/src/blocks/Blocks.utils.ts b/src/blocks/Blocks.utils.ts
@@ -1,21 +1,18 @@
 import { css } from 'styled-components';
 import { deviceMediaQ, deviceSizes, breakpointMap } from './theme';
 import {
-  BlocksColors,
   Breakpoint,
   CSSPropName,
   CSSPropValueType,
   DeviceSizeName,
-  ThemeModeColors,
   PixelValue,
   ResponsiveCSSPropertyData,
-  ThemeMode,
-  ThemeModeBorder,
   BorderValue,
   BlocksRadiusType,
 } from './Blocks.types';
+import { radiusRegex, spacingRegex } from './Blocks.constants';
+import { textVariants, TextVariants } from './text';
 import { ThemeColors } from './theme/Theme.types';
-import { newRadiusRegex, newSpacingRegex, oldRadiusRegex, oldSpacingRegex } from './Blocks.constants';
 
 /**
  * @param propName
@@ -25,10 +22,7 @@ import { newRadiusRegex, newSpacingRegex, oldRadiusRegex, oldSpacingRegex } from
 const getCSSValue = (propName: CSSPropName, value: CSSPropValueType | undefined) => {
   if (propName === 'padding' || propName === 'margin') {
     if (typeof value === 'string') {
-      return value.replace(
-        newSpacingRegex.test(value) ? newSpacingRegex : oldSpacingRegex,
-        (match) => `var(--${match})`
-      );
+      return value.replace(spacingRegex, (match) => `var(--${match})`);
     }
   } else if (propName === 'gap' || propName === 'border-radius') {
     return `var(--${value})`;
@@ -139,39 +133,20 @@ export const getResponsiveCSS = (data: ResponsiveCSSPropertyData[]) => {
   `;
 };
 
-/**
- * @deprecated
- * @param color
- * @returns color as a css variable: var(--primary)
- *
- * // TODO: Remove this function. We don't need it.
- */
-export const getBlocksColor = (mode: ThemeMode, color?: BlocksColors | ThemeModeColors | ThemeColors) => {
-  // If color is not given return undefined, to avoid any breakages
-  if (!color) return color;
-
-  // Handle the colors for light and dark mode
-  if (typeof color === 'object') {
-    return `var(--${color[mode]})`;
-  }
-
-  // If passed a design system color then use color as a variable
-  return `var(--${color})`;
-};
-
 /**
  * @param border
  * @returns border
  */
-export const getBlocksBorder = (mode: ThemeMode, border?: BorderValue | ThemeModeBorder) => {
+export const getBlocksBorder = (border?: BorderValue) => {
   // If border is not given return undefined, to avoid any breakages
   if (!border) return border;
-  // Handle the border for light and dark mode
+
   let borderValues;
-  if (typeof border === 'object') borderValues = border[mode].split(' ');
-  else borderValues = border.split(' ');
 
-  // If passed a design system border then use border as a variable
+  borderValues = border.split(' ');
+
+  borderValues[0] = `var(--${borderValues[0]})`;
+
   borderValues[2] = `var(--${borderValues[2]})`;
   return borderValues.join(' ');
 };
@@ -184,10 +159,19 @@ export const getBlocksBorderRadius = (radius?: BlocksRadiusType) => {
   // If border-radius is not given return undefined, to avoid any breakages
   if (!radius) return radius;
 
-  const result = radius.replace(
-    newRadiusRegex.test(radius) ? newRadiusRegex : oldRadiusRegex,
-    (match) => `var(--${match})`
-  );
+  const result = radius.replace(radiusRegex, (match) => `var(--${match})`);
 
   return result;
 };
+
+export const getTextVariantStyles = (variant: TextVariants, color: ThemeColors) => css`
+  color: var(--${color});
+  font-family: var(--font-family);
+  font-size: ${textVariants[variant].fontSize};
+  font-style: ${textVariants[variant].fontStyle};
+  font-weight: ${textVariants[variant].fontWeight};
+  line-height: ${textVariants[variant].lineHeight};
+  letter-spacing: ${textVariants[variant].letterSpacing};
+  text-transform: ${textVariants[variant].textTransform};
+  margin: var(--spacing-none);
+`;