New Channel Creation Flow

src/App.tsx

@@ -105,8 +105,8 @@ const GlobalStyle = createGlobalStyle`
  /* deprecated */
  /* Colors */
  ${Object.entries(blocksColors)
-  .map(([colorName, code]) => `--${colorName}: ${code};`)
-  .join('')}
+ .map(([colorName, code]) => `--${colorName}: ${code};`)
+ .join('')}
 
  /* Font Family */
  --font-family: 'FK Grotesk Neu';
@@ -136,15 +136,15 @@ const extendConsole = () => {
  window.console = {};
  }
  if (window.console[level] === 'undefined' || !window.console[level] || window.console[level] === null) {
- window.console[level] = function () {};
+ window.console[level] = function () { };
  }
  if (enabled) {
  if (disabledConsoles[level]) {
  window.console[level] = disabledConsoles[level];
  }
  } else {
  disabledConsoles[level] = window.console[level];
- window.console[level] = function () {};
+ window.console[level] = function () { };
  }
  };
  } catch (e) {
@@ -393,8 +393,8 @@ export default function App() {
  isSidebarHidden
  ? GLOBALS.CONSTANTS.NO_LEFT_BAR_WIDTH
  : sidebarCollapsed
- ? GLOBALS.CONSTANTS.COLLAPSABLE_RIGHT_BAR_WIDTH
- : GLOBALS.CONSTANTS.LEFT_BAR_WIDTH
+  ? GLOBALS.CONSTANTS.COLLAPSABLE_RIGHT_BAR_WIDTH
+  : GLOBALS.CONSTANTS.LEFT_BAR_WIDTH
  }
  >
  {/* Shared among all pages, load universal things here */}

src/blocks/icons/components/CloudUpload.tsx

@@ -0,0 +1,47 @@
+import { FC } from 'react';
+import { IconWrapper } from '../IconWrapper';
+import { IconProps } from '../Icons.types';
+
+const CloudUpload: FC<IconProps> = (allProps) => {
+ const { svgProps: props, ...restProps } = allProps;
+ return (
+ <IconWrapper
+ componentName="CloudUpload"
+ icon={
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="inherit"
+ height="inherit"
+ viewBox="0 0 53 52"
+ fill="none"
+ {...props}
+ >
+ <path
+ d="M16.1888 26.3978L26.7966 15.7901L37.4043 26.3978"
+ stroke="#C4CBD5"
+ stroke-width="2.5"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ <path
+ d="M27.0618 50.0001V16.8509"
+ stroke="#C4CBD5"
+ stroke-width="2.5"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ <path
+ d="M21.4927 35.4144H11.1502C8.05625 35.0608 1.86841 32.4972 1.86841 25.0718C1.86841 17.6464 8.05625 14.9061 11.1502 14.4641C11.769 10.3094 15.6585 2 26.2662 2C39.2607 2 41.0286 10.8398 41.9126 16.0553C45.0065 15.9669 51.4596 19.2906 51.4596 26.9282C51.2828 29.7569 49.6032 35.4144 44.2993 35.4144C38.9955 35.4144 34.1336 35.4144 32.3656 35.4144"
+ stroke="#C4CBD5"
+ stroke-width="2.5"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ />
+ </svg>
+ }
+ {...restProps}
+ />
+ );
+};
+
+export default CloudUpload;

src/blocks/icons/index.ts

@@ -28,6 +28,8 @@ export { default as ChannelHomeFilled } from './components/ChannelHomeFilled';
 export { default as Chat } from './components/Chat';
 export { default as ChatFilled } from './components/ChatFilled';
 
+export { default as CloudUpload } from './components/CloudUpload';
+
 export { default as Copy } from './components/Copy';
 
 export { default as Cross } from './components/Cross';

src/blocks/textInput/TextInput.tsx

@@ -161,7 +161,7 @@ const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
  variant="c-regular"
  color={{ light: 'gray-600', dark: 'gray-500' }}
  >
- {`${value?.length}/${totalCount}`}
+ {`${value?.length} / ${totalCount}`}
  </Text>
  )}
  </div>

src/common/components/Stepper.tsx

@@ -16,17 +16,20 @@ const Stepper: FC<StepperProps> = ({ steps, setActiveStepIndex, completedSteps }
  setActiveStepIndex(stepIndex);
  }
  };
+
  return (
  <Box
  display="flex"
  gap="s8"
+ width='-webkit-fill-available'
  >
  {steps.map((step, index) => (
  <Box
+ key={index}
  display="flex"
  flexDirection="column"
  gap="s3"
- width="180px"
+ width="inherit"
  cursor="pointer"
  color={completedSteps.includes(index) ? 'pink-500' : 'gray-500'}
  onClick={() => handleChangeActiveStep(index)}

src/components/reusables/progress/ProgressBarUnit.tsx

@@ -13,6 +13,8 @@ interface ProgressBarPropsI {
  color?: string;
  notice?: string;
  noticePositioning?: number;
+ backgroundColor?: string;
+ height?: string;
 }
 
 // Constants
@@ -27,17 +29,21 @@ const ProgressBar = ({
  color = GLOBALS.COLORS.PRIMARY_PINK,
  notice = null,
  noticePositioning = NOTICE_POSITIONING.BOTTOM,
+ backgroundColor = GLOBALS.COLORS.PLACEHOLDER_DARK_GRAY,
+ height = '10px',
 }: ProgressBarPropsI) => {
  const theme = useTheme();
 
  return (
  <ItemVV2
  zIndex="1000"
- flexDirection={noticePositioning == NOTICE_POSITIONING.BOTTOM ? 'column' : 'column-reverse'}
+ flexDirection={noticePositioning == NOTICE_POSITIONING.BOTTOM ? "column" : "column-reverse"}
+ height={height}
  >
  <Progress
  percent={percent}
  color={color}
+ backgroundColor={backgroundColor}
  />
 
  {notice && (
@@ -48,9 +54,8 @@ const ProgressBar = ({
  textTransform="none"
  textAlign="center"
  letterSpacing="normal"
- margin={`${noticePositioning == NOTICE_POSITIONING.BOTTOM ? '5px' : 0} 0 ${
- noticePositioning == NOTICE_POSITIONING.TOP ? '5px' : 0
- } 0`}
+ margin={`${noticePositioning == NOTICE_POSITIONING.BOTTOM ? '5px' : 0} 0 ${noticePositioning == NOTICE_POSITIONING.TOP ? '5px' : 0
+ } 0`}
  >
  {notice}
  </SpanV2>
@@ -61,9 +66,9 @@ const ProgressBar = ({
 export default ProgressBar;
 
 const Progress = styled.div`
- background: ${GLOBALS.COLORS.PLACEHOLDER_DARK_GRAY};
+ background: ${(props) => props.backgroundColor ? props.backgroundColor : GLOBALS.COLORS.PLACEHOLDER_DARK_GRAY};
  border-radius: 18px;
- height: 8px;
+ height: inherit;
  overflow: hidden;
  width: 100%;
  position: relative;

src/config/AppPaths.ts

@@ -6,7 +6,6 @@ enum APP_PATHS {
  Chat = '/chat',
  Spaces = '/spaces',
  Channels = '/channels',
- CreateChannel = '/createChannel',
  Dashboard = '/dashboard',
  DiscordVerification = '/discord/verification',
  Rewards = '/points',

src/helpers/PushTokenContractHelper.ts

@@ -11,7 +11,7 @@ type PushTokenApprovalAmountType = {
 export const getPushTokenApprovalAmount = async ({
  address,
  provider,
- contractAddress,
+ contractAddress
 }: PushTokenApprovalAmountType): Promise<string> => {
  try {
  const pushTokenContract = new ethers.Contract(addresses.pushToken, abis.pushToken, provider);
@@ -32,7 +32,7 @@ type HasEnoughPushToken = {
 export const getHasEnoughPushToken = async ({
  address,
  provider,
- noOfPushTokensToCheck,
+ noOfPushTokensToCheck
 }: HasEnoughPushToken): Promise<boolean> => {
  try {
  const pushTokenContract = new ethers.Contract(addresses.pushToken, abis.pushToken, provider);
@@ -82,25 +82,22 @@ export const approvePushToken = async ({ signer, contractAddress, amount }: Push
  }
 };
 
-type ImportPushTokenType = {
- provider: any;
-};
-export const importPushToken = async ({ provider }: ImportPushTokenType): Promise<boolean> => {
+export const importPushToken = async (): Promise<boolean> => {
  try {
  const name = 'Ethereum Push Notification Service';
  const symbol = 'PUSH';
  const decimals = 18;
 
- await provider.request({
+ await window.ethereum.request({
  method: 'wallet_watchAsset',
  params: {
  type: 'ERC20',
  options: {
  address: addresses.pushToken,
  symbol: symbol,
- decimals: decimals,
- },
- },
+ decimals: decimals
+ }
+ }
  });
  return true;
  } catch (err) {
@@ -119,7 +116,7 @@ export const mintPushToken = async ({ noOfTokens, provider, account }: MintPushT
  var signer = provider.getSigner(account);
  let pushTokenContract = new ethers.Contract(addresses.pushToken, abis.pushToken, signer);
  console.info({
- pushTokenContract,
+ pushTokenContract
  });
  console.info(1);
  let pushTokenAmount = noOfTokens;
@@ -136,5 +133,6 @@ export const mintPushToken = async ({ noOfTokens, provider, account }: MintPushT
  return noOfTokens;
  } catch (err) {
  console.error(err);
+ return 0;
  }
 };

src/modules/channelDashboard/ChannelOwnerDashboard.tsx

@@ -32,6 +32,8 @@ import { Button } from 'components/SharedStyling';
 import EditChannel from 'modules/editChannel/EditChannel';
 import useModalBlur from 'hooks/useModalBlur';
 import { AppContext } from 'contexts/AppContext';
+import { CreateChannel } from 'modules/createChannel';
+import GLOBALS, { device, globalsMargin } from 'config/Globals';
 
 // Constants
 // interval after which alias details api will be called, in seconds
@@ -201,10 +203,11 @@ const ChannelOwnerDashboard = () => {
  height="fit-content"
  >
  {/* display the create channel page if there are no details */}
- {!channelDetails && processingState === 0 && <CreateChannelModule />}
+ {/* {!channelDetails && processingState === 0 && <CreateChannelModule />} */}
+ {!channelDetails && processingState === 0 && <CreateChannel />}
 
  {isChannelDetails && processingState !== null && (
- <>
+ <Container>
  {editChannel ? (
  <EditChannel
  closeEditChannel={closeEditChannel}
@@ -216,10 +219,8 @@ const ChannelOwnerDashboard = () => {
  <>
  {channelDetails && !isMobile && (
  <ItemHV2
- position="absolute"
- top="0"
- right="0"
  zIndex="1"
+ justifyContent="end"
  >
  {!isChannelExpired && onCoreNetwork && (
  <SubmitButton onClick={showEditChannel}>Edit Channel</SubmitButton>
@@ -252,7 +253,7 @@ const ChannelOwnerDashboard = () => {
  )}
  </>
  )}
- </>
+ </Container>
  )}
 
  {/* processing box */}
@@ -272,6 +273,47 @@ const ChannelOwnerDashboard = () => {
 
 export default ChannelOwnerDashboard;
 
+const Container = styled(ItemVV2)`
+ align-items: center;
+ align-self: center;
+ background: ${(props) => props.theme.default.bg};
+ display: flex;
+ flex-direction: column;
+ flex: initial;
+ justify-content: center;
+ max-width: 1200px;
+ border-radius: ${GLOBALS.ADJUSTMENTS.RADIUS.LARGE} ${GLOBALS.ADJUSTMENTS.RADIUS.LARGE}
+ ${GLOBALS.ADJUSTMENTS.RADIUS.LARGE} ${GLOBALS.ADJUSTMENTS.RADIUS.LARGE};
+ width: calc(
+ 100% - ${globalsMargin.MINI_MODULES.DESKTOP.RIGHT} - ${globalsMargin.MINI_MODULES.DESKTOP.LEFT} -
+ ${GLOBALS.ADJUSTMENTS.PADDING.HUGE} - ${GLOBALS.ADJUSTMENTS.PADDING.HUGE}
+ );
+ padding: ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT};
+ position: relative;
+ margin: ${GLOBALS.ADJUSTMENTS.MARGIN.MINI_MODULES.DESKTOP};
+
+ @media ${device.laptop} {
+ margin: ${GLOBALS.ADJUSTMENTS.MARGIN.MINI_MODULES.TABLET};
+ padding: ${GLOBALS.ADJUSTMENTS.PADDING.BIG};
+ width: calc(
+ 100% - ${globalsMargin.MINI_MODULES.TABLET.RIGHT} - ${globalsMargin.MINI_MODULES.TABLET.LEFT} -
+ ${GLOBALS.ADJUSTMENTS.PADDING.BIG} - ${GLOBALS.ADJUSTMENTS.PADDING.BIG}
+ );
+ }
+
+ @media ${device.mobileL} {
+ margin: ${GLOBALS.ADJUSTMENTS.MARGIN.BIG_MODULES.MOBILE};
+ padding: ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT};
+ width: calc(
+ 100% - ${globalsMargin.MINI_MODULES.MOBILE.RIGHT} - ${globalsMargin.MINI_MODULES.MOBILE.LEFT} -
+ ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT} - ${GLOBALS.ADJUSTMENTS.PADDING.DEFAULT}
+ );
+ min-height: calc(100vh - ${GLOBALS.CONSTANTS.HEADER_HEIGHT}px - ${globalsMargin.BIG_MODULES.MOBILE.TOP});
+ overflow-y: scroll;
+ border-radius: ${GLOBALS.ADJUSTMENTS.RADIUS.LARGE} ${GLOBALS.ADJUSTMENTS.RADIUS.LARGE} 0 0;
+ }
+`;
+
 const DestroyChannelBtn = styled(ButtonV2)`
  height: ${(props) => props.height || '100%'};
  width: ${(props) => props.width || '100%'};