From e313de9e45224e918a4292c4a58836b38be39827 Mon Sep 17 00:00:00 2001 From: abhishek-01k Date: Wed, 10 Jul 2024 12:45:14 +0530 Subject: [PATCH 01/18] New Channel Creation Flow based on new UI --- src/blocks/icons/components/CloudUpload.tsx | 47 +++++ src/blocks/icons/index.ts | 2 + src/common/components/Stepper.tsx | 1 + .../reusables/progress/ProgressBarUnit.tsx | 19 ++- src/helpers/PushTokenContractHelper.ts | 20 +-- .../createChannel/CreateChannel.constants.ts | 13 ++ src/modules/createChannel/CreateChannel.tsx | 96 +++++++++-- .../createChannel/components/ChannelInfo.tsx | 12 +- .../components/CreateChannelFaucet.tsx | 122 ++++++++++--- .../CreateChannelProcessingInfo.tsx | 56 ++++++ .../components/CreateChannelStep.tsx | 70 -------- .../createChannel/components/StakeFees.tsx | 151 +++++++++++----- .../createChannel/components/UploadLogo.tsx | 161 +++++++++++++++--- 13 files changed, 573 insertions(+), 197 deletions(-) create mode 100644 src/blocks/icons/components/CloudUpload.tsx create mode 100644 src/modules/createChannel/CreateChannel.constants.ts create mode 100644 src/modules/createChannel/components/CreateChannelProcessingInfo.tsx delete mode 100644 src/modules/createChannel/components/CreateChannelStep.tsx diff --git a/src/blocks/icons/components/CloudUpload.tsx b/src/blocks/icons/components/CloudUpload.tsx new file mode 100644 index 0000000000..a69652196e --- /dev/null +++ b/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 = (allProps) => { + const { svgProps: props, ...restProps } = allProps; + return ( + + + + + + } + {...restProps} + /> + ); +}; + +export default CloudUpload; diff --git a/src/blocks/icons/index.ts b/src/blocks/icons/index.ts index fe2feec934..bafa78afb0 100644 --- a/src/blocks/icons/index.ts +++ b/src/blocks/icons/index.ts @@ -26,6 +26,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'; diff --git a/src/common/components/Stepper.tsx b/src/common/components/Stepper.tsx index 1187eaedf7..8da7a0a852 100644 --- a/src/common/components/Stepper.tsx +++ b/src/common/components/Stepper.tsx @@ -23,6 +23,7 @@ const Stepper: FC = ({ steps, setActiveStepIndex, activeStepIndex, > {steps.map((step, index) => ( { +const ProgressBar = ({ + percent, + color = GLOBALS.COLORS.PRIMARY_PINK, + notice = null, + noticePositioning = NOTICE_POSITIONING.BOTTOM, + backgroundColor = GLOBALS.COLORS.PLACEHOLDER_DARK_GRAY, + height = '10px', +}: ProgressBarPropsI) => { const theme = useTheme(); return ( {notice && @@ -54,9 +65,9 @@ const ProgressBar = ({ percent, color = GLOBALS.COLORS.PRIMARY_PINK, notice = nu 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; diff --git a/src/helpers/PushTokenContractHelper.ts b/src/helpers/PushTokenContractHelper.ts index 37112dad25..649eb48c6d 100644 --- a/src/helpers/PushTokenContractHelper.ts +++ b/src/helpers/PushTokenContractHelper.ts @@ -11,7 +11,7 @@ type PushTokenApprovalAmountType = { export const getPushTokenApprovalAmount = async ({ address, provider, - contractAddress, + contractAddress }: PushTokenApprovalAmountType): Promise => { 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 => { 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 => { +export const importPushToken = async (): Promise => { 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; } }; diff --git a/src/modules/createChannel/CreateChannel.constants.ts b/src/modules/createChannel/CreateChannel.constants.ts new file mode 100644 index 0000000000..448584a465 --- /dev/null +++ b/src/modules/createChannel/CreateChannel.constants.ts @@ -0,0 +1,13 @@ +export const CreateChannelSteps = [ + { + label: 'Channel Info' + }, + { + label: 'Upload Logo' + }, + { + label: 'Stake Fees' + } +]; + +export const minStakeFees = 50; diff --git a/src/modules/createChannel/CreateChannel.tsx b/src/modules/createChannel/CreateChannel.tsx index 1ec47defc1..4e804c3a4d 100644 --- a/src/modules/createChannel/CreateChannel.tsx +++ b/src/modules/createChannel/CreateChannel.tsx @@ -1,25 +1,46 @@ // This is the Parent component for the Create Channel flow. +// React + web3 essentials +import { useEffect, useState } from "react"; + +//common +import { Stepper } from "common"; // Components import { Box } from "blocks"; import { CreateChannelHeader } from "./components/CreateChannelHeader"; -import { CreateChannelStep } from "./components/CreateChannelStep"; import { ChannelInfo } from "./components/ChannelInfo"; -import { useState } from "react"; import { UploadLogo } from "./components/UploadLogo"; import { StakeFees } from "./components/StakeFees"; import { isEmpty, isValidUrl } from "./CreateChannel.utils"; +import { CreateChannelSteps, minStakeFees } from "./CreateChannel.constants"; +import { handleLogoSizeLimitation, toDataURL } from "helpers/LogoSizeHelper"; +import { CreateChannelProcessingInfo } from "./components/CreateChannelProcessingInfo"; const CreateChannel = () => { - const [stepFlow, setStepFlow] = useState(0); + const [activeStepIndex, setActiveStepIndex] = useState(0); + + + const [channelStakeFees, setChannelStakeFees] = useState(minStakeFees); + let restrictedForwardSteps = [1, 2] + + // Channel Info const [channelName, setChannelName] = useState(''); const [channelDesc, setChannelDesc] = useState(''); const [channelURL, setChannelURL] = useState(''); + // Upload Logo + const [view, setView] = useState(false); + const [imageSrc, setImageSrc] = useState(undefined); + const [imageType, setImageType] = useState(undefined); + const [croppedImage, setCroppedImage] = useState(undefined); + const [channelFile, setChannelFile] = useState(undefined); + + // Process status const [channelInfoDone, setChannelInfoDone] = useState(false); const [uploadLogoDone, setUploadLogoDone] = useState(false); + const [stakeFeesChosen, setStakeFeesChoosen] = useState(false); const [errorInfo, setErrorInfo] = useState({ name: '', @@ -27,6 +48,20 @@ const CreateChannel = () => { url: '' }); + useEffect(() => { + if (croppedImage) { + console.debug('Image cropped', croppedImage); + toDataURL(croppedImage, function (dataUrl: string) { + const response = handleLogoSizeLimitation(dataUrl); + console.debug('response', response); + if (response.success) { + console.debug('Cropped Image....', croppedImage); + setChannelFile(croppedImage); + } + }); + } + }, [croppedImage]); + // Setting Error Infos for missing Fields const checkFormInput = () => { @@ -80,13 +115,23 @@ const CreateChannel = () => { } + const handleNextStep = () => { + if (activeStepIndex < 2) setActiveStepIndex(activeStepIndex + 1); + }; + restrictedForwardSteps = restrictedForwardSteps.filter((item) => item !== activeStepIndex); + console.debug(restrictedForwardSteps); + + const handleCreateChannel = () => { + + } + return ( { alignItems='center' alignSelf='stretch' > - - {stepFlow == 0 && { setChannelURL={setChannelURL} checkFormInput={checkFormInput} setChannelInfoDone={setChannelInfoDone} - setStepFlow={setStepFlow} + setActiveStepIndex={setActiveStepIndex} + handleNextStep={handleNextStep} + />} + {activeStepIndex === 1 && } - {stepFlow === 1 && } - {stepFlow === 2 && } + {activeStepIndex === 2 && } + + {/* */} + + ); }; diff --git a/src/modules/createChannel/components/ChannelInfo.tsx b/src/modules/createChannel/components/ChannelInfo.tsx index 118b5524cf..cb99f0d8e2 100644 --- a/src/modules/createChannel/components/ChannelInfo.tsx +++ b/src/modules/createChannel/components/ChannelInfo.tsx @@ -18,7 +18,9 @@ type ChannelInfoProps = { setChannelURL: (channelURL: string) => void; checkFormInput: () => boolean; setChannelInfoDone: (channelInfoDone: boolean) => void; - setStepFlow: (stepFlow: number) => void; + setActiveStepIndex: (stepFlow: number) => void; + handleNextStep: () => void; + } const ChannelInfo: FC = ({ @@ -31,7 +33,8 @@ const ChannelInfo: FC = ({ setChannelURL, checkFormInput, setChannelInfoDone, - setStepFlow + setActiveStepIndex, + handleNextStep }) => { const checkButtonStatus = () => { @@ -93,7 +96,7 @@ const ChannelInfo: FC = ({ - Channel Wensite URL + Channel Website URL { @@ -112,7 +115,8 @@ const ChannelInfo: FC = ({ console.log("Next is clicked") if (!checkFormInput()) return; setChannelInfoDone(true); - setStepFlow(1); + handleNextStep(); + setActiveStepIndex(1); }} > Next diff --git a/src/modules/createChannel/components/CreateChannelFaucet.tsx b/src/modules/createChannel/components/CreateChannelFaucet.tsx index 506eb3241a..8c1ced30dc 100644 --- a/src/modules/createChannel/components/CreateChannelFaucet.tsx +++ b/src/modules/createChannel/components/CreateChannelFaucet.tsx @@ -1,6 +1,33 @@ -import { Box, Button, Lozenge, Text } from "blocks"; +// React+web3 essentials +import { FC } from "react"; + +// Components +import { Box, Button, Link, Swap, Text } from "blocks"; +import { UniswapWidgetModal } from "components/UniswapWidget"; + +// Hooks +import useModalBlur, { MODAL_POSITION } from "hooks/useModalBlur"; + +// Config +import { appConfig } from "config"; + +type CreateChannelFaucetProps = { + mintPushToken: (noOfTokens: number) => void; + noOfPushTokensToCheck: number; +} + +const CreateChannelFaucet: FC = ({ + mintPushToken, + noOfPushTokensToCheck +}) => { + const isProd = appConfig.appEnv === 'prod'; + + const { + isModalOpen: isUniswapWidgetModalOpen, + showModal: showUniswapWidgetModal, + ModalComponent: UniswapWidgetModalComponent, + } = useModalBlur(); -const CreateChannelFaucet = () => { return ( { backgroundColor='pink-200' borderRadius="r0 r0 r4 r4" justifyContent='space-between' + alignItems='center' > - Follow these Steps to get Testnet Push - - + {isProd ? + 'Your balance is low. Swap to get PUSH Tokens.' : + 'Follow these steps to get Testnet PUSH.'} + + + {isProd ? ( + + ) : ( + + + + + 1 + + Sepolia ETH Faucet + + + mintPushToken(1000)} > - 1 + + 2 + + Get Testnet Push - Sepolia ETH Faucet - - - 2 - Get Testnet Push - + )} + + {isUniswapWidgetModalOpen && ( + + )} ); + + }; export { CreateChannelFaucet }; \ No newline at end of file diff --git a/src/modules/createChannel/components/CreateChannelProcessingInfo.tsx b/src/modules/createChannel/components/CreateChannelProcessingInfo.tsx new file mode 100644 index 0000000000..f5c3d2ac13 --- /dev/null +++ b/src/modules/createChannel/components/CreateChannelProcessingInfo.tsx @@ -0,0 +1,56 @@ +import { Box, Text } from "blocks"; +import ProgressBar from "components/reusables/progress/ProgressBarUnit"; +import Spinner, { SPINNER_TYPE } from "components/reusables/spinners/SpinnerUnit"; +import { FC } from "react"; + +type CreateChannelProcessingInfoProps = { + progress: number; + processingInfo: string; +} + +const CreateChannelProcessingInfo: FC = ({ + progress, + processingInfo +}) => { + return ( + + + + Please complete the transaction in your wallet to proceed. + + + + + + + + + + + {processingInfo} + + + + + + + ); +}; + +export { CreateChannelProcessingInfo }; \ No newline at end of file diff --git a/src/modules/createChannel/components/CreateChannelStep.tsx b/src/modules/createChannel/components/CreateChannelStep.tsx deleted file mode 100644 index 23c298c314..0000000000 --- a/src/modules/createChannel/components/CreateChannelStep.tsx +++ /dev/null @@ -1,70 +0,0 @@ -// React + web3 essentials -import { FC } from 'react'; - -// Components -import { Box, Text } from 'blocks'; - -type CreateChannelStepsProps = { - stepFlow: number; - setStepFlow: (stepFlow: number) => void; -}; - -const CreateChannelStep: FC = ({ - stepFlow, - setStepFlow -}) => { - return ( - - setStepFlow(0)} - > - - Channel Info - - - - setStepFlow(1)} - > - - Upload Logo - - - - setStepFlow(2)} - > - - Stake Fees - - - - - ); -}; - -export { CreateChannelStep }; diff --git a/src/modules/createChannel/components/StakeFees.tsx b/src/modules/createChannel/components/StakeFees.tsx index 048b26090e..fc3aa7b4ee 100644 --- a/src/modules/createChannel/components/StakeFees.tsx +++ b/src/modules/createChannel/components/StakeFees.tsx @@ -1,68 +1,131 @@ -import { Box, Button, Text } from "blocks"; -import { FC } from "react"; -import { css } from "styled-components"; -import { CreateChannelFaucet } from "./CreateChannelFaucet"; +import { Box, Button, Text } from 'blocks'; +import { FC, useEffect, useMemo, useState } from 'react'; +import { css } from 'styled-components'; +import { CreateChannelFaucet } from './CreateChannelFaucet'; +import { getHasEnoughPushToken, getPushTokenFromWallet, importPushToken, mintPushToken } from 'helpers'; +import { useAccount, useAsyncOperation } from 'hooks'; type StakeFeesProps = { + channelStakeFees: number; + handleCreateChannel: () => void; + setStakeFeesChoosen: (stakeFeesChosen: boolean) => void; +}; + +const StakeFees: FC = ({ + channelStakeFees, + handleCreateChannel, + setStakeFeesChoosen + +}) => { + const noOfPushTokensToCheck = 50; + const { provider, account, isWalletConnected, connect } = useAccount(); + const { loading, error, executeAsyncFunction: executeImportPushTokenFunc } = useAsyncOperation(importPushToken); + + const [balance, setBalance] = useState(0); + const [faucetLoading, setFaucetLoading] = useState(false); + + + const mintPushTokenHandler = async (noOfTokens: number) => { + if (!isWalletConnected) { + connect(); + } + if (isWalletConnected) { + setFaucetLoading(true); + const amount = await mintPushToken({ noOfTokens, provider, account }); + console.log('Token Minted >>>', amount); + setFaucetLoading(false); + setBalance(amount); + } + }; + + //check Push token in wallet + const pushTokenInWallet = async () => { + const amount = await getPushTokenFromWallet({ + address: account, + provider: provider + }); + console.log('Amount in the wallet >>', amount); + setBalance(amount); + }; -} + useEffect(() => { + pushTokenInWallet(); + checkSetFaucetVisibility(); + }, [balance, account]); + + + const handlePushTokenImport = async () => { + await executeImportPushTokenFunc(); + }; + + const [isFaucetVisible, setIsFaucetVisible] = useState(false); + + const checkSetFaucetVisibility = async () => { + const hasEnoughPushToken = await getHasEnoughPushToken({ + address: account, + provider: provider, + noOfPushTokensToCheck, + }); + console.log("Has Enough Push Token >>>", hasEnoughPushToken); + setIsFaucetVisible(!hasEnoughPushToken); + } -const StakeFees: FC = () => { return ( - - - + + + Amout For Staking - 50 PUSH - Balance: 5,000 + + {channelStakeFees} PUSH + + + Balance: {balance?.toLocaleString()} + - + {!faucetLoading && isFaucetVisible && } - - + + Don't see Push token in your wallet? - Import Token + + Import Token + - - - + + ); }; -export { StakeFees }; \ No newline at end of file +export { StakeFees }; diff --git a/src/modules/createChannel/components/UploadLogo.tsx b/src/modules/createChannel/components/UploadLogo.tsx index 90aa1a91d8..e124e2dddb 100644 --- a/src/modules/createChannel/components/UploadLogo.tsx +++ b/src/modules/createChannel/components/UploadLogo.tsx @@ -1,29 +1,57 @@ -import { Box, Button, Text } from "blocks"; -import { FC, useState } from "react"; +// React + web3 essentials +import { FC, useRef } from "react"; -type UploadLogoProps = { +// Third party libraries +import { css } from "styled-components"; -} -const UploadLogo: FC = () => { +// Component +import { Box, Button, CloudUpload, Text } from "blocks"; +import ImageClipper from "primaries/ImageClipper"; - const [view, setView] = useState(false); - const [imageSrc, setImageSrc] = useState(undefined); - const [imageType, setImageType] = useState(null); - const [croppedImage, setCroppedImage] = useState(undefined); +type UploadLogoProps = { + view: boolean; + imageSrc: string | undefined; + imageType: string | undefined; + croppedImage: string | undefined; + setView: (view: boolean) => void; + setImageSrc: (imageSrc: string | undefined) => void; + setImageType: (imageType: string | undefined) => void; + setCroppedImage: (croppedImage: string | undefined) => void; + setUploadDone: (uploadDone: boolean) => void; + setActiveStepIndex: (stepFlow: number) => void; + handleNextStep: () => void; + +} - const handleFile = async (file, path) => { +const UploadLogo: FC = ({ + view, + imageSrc, + imageType, + croppedImage, + setView, + setImageSrc, + setImageType, + setCroppedImage, + setUploadDone, + setActiveStepIndex, + handleNextStep +}) => { + + const childRef = useRef(); + + const handleFile = async (file: HTMLInputElement) => { setCroppedImage(undefined); setView(true); //you can carry out any file validations here... - if (file?.files[0]) { + if (file?.files?.[0]) { var reader = new FileReader(); reader.readAsDataURL(file?.files[0]); - reader.onloadend = function (e) { - setImageSrc(reader.result); - setImageType(file?.files[0]?.type); + reader.onloadend = function () { + setImageSrc(reader.result as string); + setImageType(file?.files?.[0]?.type); }; } else { return 'Nothing....'; @@ -38,31 +66,108 @@ const UploadLogo: FC = () => { alignItems='center' alignSelf='stretch' > - + Upload a PNG, JPG upto 1MB. Crop the image to resize to 128px. - + + + {view ? ( + croppedImage ? ( + + Cropped Img + + ) : ( + setCroppedImage(croppedImage)} + ref={childRef} + /> + ) + ) : ( + + )} + + + Drag and Drop or + + + + {/* //TODO: Change this to new input block when it supports file */} + { + handleFile(e.target as HTMLInputElement) + }} + type="file" + className="sr-only" + readOnly + /> + + + {!croppedImage && view ? ( + + ) : ( + + )} + - handleFile(e.target, 'target')} - type="file" - className="sr-only" - readOnly - /> - - ); }; From afe469c1b0f68075dbf7a71dc5b33677136645ab Mon Sep 17 00:00:00 2001 From: abhishek-01k Date: Wed, 10 Jul 2024 17:59:10 +0530 Subject: [PATCH 02/18] Function implementation of the create Channel --- src/blocks/textInput/TextInput.tsx | 2 +- src/modules/createChannel/CreateChannel.tsx | 320 ++++++++++++++---- .../createChannel/CreateChannel.types.ts | 1 + .../createChannel/components/ChannelInfo.tsx | 22 +- .../components/CreateChannelFaucet.tsx | 74 ++-- .../CreateChannelProcessingInfo.tsx | 4 +- .../createChannel/components/StakeFees.tsx | 35 +- 7 files changed, 344 insertions(+), 114 deletions(-) diff --git a/src/blocks/textInput/TextInput.tsx b/src/blocks/textInput/TextInput.tsx index 33a259eb44..b25f127bf1 100644 --- a/src/blocks/textInput/TextInput.tsx +++ b/src/blocks/textInput/TextInput.tsx @@ -161,7 +161,7 @@ const TextInput = forwardRef( variant="c-regular" color={{ light: 'gray-600', dark: 'gray-500' }} > - {`${value?.length}/${totalCount}`} + {`${value?.length} / ${totalCount}`} )} diff --git a/src/modules/createChannel/CreateChannel.tsx b/src/modules/createChannel/CreateChannel.tsx index 4e804c3a4d..918fe6963c 100644 --- a/src/modules/createChannel/CreateChannel.tsx +++ b/src/modules/createChannel/CreateChannel.tsx @@ -1,12 +1,12 @@ // This is the Parent component for the Create Channel flow. // React + web3 essentials -import { useEffect, useState } from "react"; +import { useEffect, useMemo, useState } from "react"; //common import { Stepper } from "common"; // Components -import { Box } from "blocks"; +import { Box, Text } from "blocks"; import { CreateChannelHeader } from "./components/CreateChannelHeader"; import { ChannelInfo } from "./components/ChannelInfo"; import { UploadLogo } from "./components/UploadLogo"; @@ -15,20 +15,32 @@ import { isEmpty, isValidUrl } from "./CreateChannel.utils"; import { CreateChannelSteps, minStakeFees } from "./CreateChannel.constants"; import { handleLogoSizeLimitation, toDataURL } from "helpers/LogoSizeHelper"; import { CreateChannelProcessingInfo } from "./components/CreateChannelProcessingInfo"; +import { abis, addresses, appConfig } from "config"; +import { IPFSupload } from "helpers/IpfsHelper"; +import { useAccount } from "hooks"; +import { ethers } from "ethers"; +import { CHANNEL_TYPE } from "helpers/UtilityHelper"; + +const coreChainId = appConfig.coreContractChain; +const CORE_CHAIN_ID = appConfig.coreContractChain; const CreateChannel = () => { + const { account, provider, chainId } = useAccount(); - const [activeStepIndex, setActiveStepIndex] = useState(0); + const onCoreNetwork = CORE_CHAIN_ID === chainId; + const [activeStepIndex, setActiveStepIndex] = useState(0); const [channelStakeFees, setChannelStakeFees] = useState(minStakeFees); + const [pushTokenAmountVal, setPushTokenAmountVal] = useState(50.0); - let restrictedForwardSteps = [1, 2] + let restrictedForwardSteps = [] // Channel Info const [channelName, setChannelName] = useState(''); const [channelDesc, setChannelDesc] = useState(''); const [channelURL, setChannelURL] = useState(''); + const [chainDetails, setChainDetails] = useState(CORE_CHAIN_ID); // Upload Logo const [view, setView] = useState(false); @@ -42,12 +54,25 @@ const CreateChannel = () => { const [uploadLogoDone, setUploadLogoDone] = useState(false); const [stakeFeesChosen, setStakeFeesChoosen] = useState(false); + const [progress, setProgress] = useState(0); + const [progressInfo, setProgressInfo] = useState(''); + const [processingInfo, setProcessingInfo] = useState(''); + + const [isChannelCreationStarted, setIsChannelCreationStarted] = useState(false); + const [errorInfo, setErrorInfo] = useState({ name: '', description: '', url: '' }); + const handleNextStep = () => { + if (activeStepIndex < 2) setActiveStepIndex(activeStepIndex + 1); + }; + restrictedForwardSteps = restrictedForwardSteps.filter((item) => item !== activeStepIndex); + console.debug(restrictedForwardSteps); + + useEffect(() => { if (croppedImage) { console.debug('Image cropped', croppedImage); @@ -62,6 +87,17 @@ const CreateChannel = () => { } }, [croppedImage]); + const checkPushTokenApprovalFunc = async () => { + let checkPushTokenApprovedAmount = new ethers.Contract(addresses.pushToken, abis.pushToken, provider); + + let value = await checkPushTokenApprovedAmount.allowance(account, addresses.epnscore); + value = value?.toString(); + const convertedVal = ethers.utils.formatEther(value); + console.log("Number value >>>", convertedVal, Number(convertedVal)) + setPushTokenAmountVal(Number(convertedVal)); + return Number(convertedVal) + }; + // Setting Error Infos for missing Fields const checkFormInput = () => { @@ -115,13 +151,165 @@ const CreateChannel = () => { } - const handleNextStep = () => { - if (activeStepIndex < 2) setActiveStepIndex(activeStepIndex + 1); - }; - restrictedForwardSteps = restrictedForwardSteps.filter((item) => item !== activeStepIndex); - console.debug(restrictedForwardSteps); - const handleCreateChannel = () => { + const handleCreateChannel = async () => { + + // TODO: Handle all the cases here + /** + * Process for the Channel Creation + * 1. Check if all the Channel Inputs are filled or not + * 2. Check if the user has uploaded the logo or not + * 3. Start the progressbar + * 3. Calculate the approval token amount + * 4. Upload the stringify input to the IPFS. + * 5. If the user approval token amount is less than 50, then ask user to approve the token amount + * 6. Create the channel + * + * 7. If at any state the user rejects the signature then, redirect the user to the Stake Fees Page + * 8. If the channel Creation is successful then what? + * 9. What if their is a smart contract error + * + */ + + if (!checkFormInput) { + console.log("Errors are present in channel Info") + return + } + + if (!channelFile) { + console.log("Channel Logo is not correct") + return + } + + // Start the progress bar of the channel creation + setIsChannelCreationStarted(true); + + // Calculate the approval amount of the user + const approvedTokenAmount = await checkPushTokenApprovalFunc(); + console.log("Approved Token Amount >>", approvedTokenAmount); + + let input = { + name: channelName, + info: channelDesc, + url: channelURL, + icon: channelFile, + }; + + console.log("Channel Input before >>", input); + + const ChannelInput = JSON.stringify(input); + setProgress(0); + + console.log("Channel Input after>>", ChannelInput); + + setProcessingInfo('Loading...'); + setProgressInfo('Please wait, payload is getting uploaded to IPFS.'); + setProgress(5); + + let storagePointer = await IPFSupload(ChannelInput); + console.log('IPFS storagePointer:', storagePointer); + + setProcessingInfo('Payload Uploaded'); + setProgressInfo('Please complete the transaction in your wallet to continue.'); + setProgress(10); + + + var signer = provider.getSigner(account); + console.debug(signer); + let pushTokenContract = new ethers.Contract(addresses.pushToken, abis.pushToken, signer); + + // Total fee required to create a channel + const fees = ethers.utils.parseUnits(channelStakeFees.toString(), 18); + + try { + + // Asking user to approve 50 PUSH token + if (approvedTokenAmount < 50.0) { + var sendTransactionPromise = pushTokenContract.approve(addresses.epnscore, fees); + const tx = await sendTransactionPromise; + + console.debug(tx); + console.debug('waiting for tx to finish'); + setProgress(30); + + await provider.waitForTransaction(tx.hash); + } + + let contract = new ethers.Contract(addresses.epnscore, abis.epnscore, signer); + + let channelType = CHANNEL_TYPE['GENERAL']; // Open Channel + const identity = '1+' + storagePointer; // IPFS Storage Type and HASH + const identityBytes = ethers.utils.toUtf8Bytes(identity); + + setProgress(50); + console.log("Processing contract wait ser") + + let timestampIfTimebound = 0; + + const tx = await contract.createChannelWithPUSH(channelType, identityBytes, fees, timestampIfTimebound, { + gasLimit: 600000, + }); + + console.debug(tx); + console.debug('Check: ' + account); + let txCheck = await provider.waitForTransaction(tx.hash); + + console.log("Tx Check >>>", txCheck); + + if (txCheck.status === 0) { + // Error from the contract side handle it here + console.log("Channel Not created their is an error>>"); + // setTxStatus(0); + setActiveStepIndex(1); + + } else { + // Channel Creation successfull + setProgress(60); + setProgressInfo('Please wait while we confirm the transaction.'); + setProcessingInfo('Transaction Confirmed'); + + setTimeout(() => { + setProgress(80); + setProgressInfo('Creating your channel, Aligning pixels, adjusting padding... This may take some time.'); + setProcessingInfo('Redirecting... Please do not refresh'); + setProgress(90); + }, 2000); + + + //TODO: What to do when the process if completed + // setTimeout(() => { + // setProgress(100); + // window.location.reload(); + // }, 2000); + + + } + + + } catch (error) { + if (error.code === 4001 || error.code === 'ACTION_REJECTED') { + // EIP-1193 userRejectedRequest error + console.log("Signature error ", error); + } else { + console.error('Error --> %o', error); + console.error({ error }); + setProgress(0); + setProgressInfo('There was an error in creating the Channel'); + setProcessingInfo('Kindly Contact support@epns.io to resolve the issue.'); + } + + + console.log("Error in the transaction >>", error); + // Stop the channel creation flow + setIsChannelCreationStarted(false); + + + + + + } + + } @@ -139,58 +327,74 @@ const CreateChannel = () => { > - - + Transaction failed due to one of the following reasons: + 1. There is not enough PUSH in your wallet. + 2. Gas price increased due to network congestion. Adjust gas limit manually. + + )} */} + + {!isChannelCreationStarted ? ( + + + + {activeStepIndex == 0 && } + {activeStepIndex === 1 && } + {activeStepIndex === 2 && } + + + ) : ( + + )} + - {activeStepIndex == 0 && } - {activeStepIndex === 1 && } - {activeStepIndex === 2 && } - - {/* */} diff --git a/src/modules/createChannel/CreateChannel.types.ts b/src/modules/createChannel/CreateChannel.types.ts index e69de29bb2..8b13789179 100644 --- a/src/modules/createChannel/CreateChannel.types.ts +++ b/src/modules/createChannel/CreateChannel.types.ts @@ -0,0 +1 @@ + diff --git a/src/modules/createChannel/components/ChannelInfo.tsx b/src/modules/createChannel/components/ChannelInfo.tsx index ba41744a43..958ccf802b 100644 --- a/src/modules/createChannel/components/ChannelInfo.tsx +++ b/src/modules/createChannel/components/ChannelInfo.tsx @@ -1,4 +1,4 @@ -import { Box, Button, Text, TextInput } from "blocks"; +import { Box, Button, Text, TextArea, TextInput } from "blocks"; import { FC, useMemo } from "react"; import { isEmpty } from "../CreateChannel.utils"; @@ -69,7 +69,7 @@ const ChannelInfo: FC = ({ label="Channel Name" value={channelName} onChange={(e) => { - setChannelName(e.target.value.slice(0.32)) + setChannelName(e.target.value.slice(0, 32)) }} error={!!errorInfo?.name} errorMessage={errorInfo.name} @@ -78,19 +78,21 @@ const ChannelInfo: FC = ({ - { - setChannelDesc(e.target.value.slice(0, 250)) - }} error={!!errorInfo?.description} errorMessage={errorInfo.description} totalCount={250} + value={channelDesc} + onChange={(e) => { + setChannelDesc(e.target.value.slice(0, 250)) + }} /> + @@ -99,7 +101,7 @@ const ChannelInfo: FC = ({ required value={channelURL} onChange={(e) => { - setChannelURL(e.target.value.slice(0.32)) + setChannelURL(e.target.value.slice(0, 32)) }} error={!!errorInfo?.url} errorMessage={errorInfo.url} @@ -107,12 +109,8 @@ const ChannelInfo: FC = ({ /> - - - - ) : ( - + + + + + 1 + + Sepolia ETH Faucet + + + + + mintPushToken(1000)} > = ({ justifyContent='center' > - 1 + 2 - Sepolia ETH Faucet - - - - mintPushToken(1000)} - > - - 2 + Get Testnet Push - Get Testnet Push - + )} diff --git a/src/modules/createChannel/components/CreateChannelProcessingInfo.tsx b/src/modules/createChannel/components/CreateChannelProcessingInfo.tsx index abfd57cdf0..d10e40722d 100644 --- a/src/modules/createChannel/components/CreateChannelProcessingInfo.tsx +++ b/src/modules/createChannel/components/CreateChannelProcessingInfo.tsx @@ -5,11 +5,13 @@ import { FC } from "react"; type CreateChannelProcessingInfoProps = { progress: number; + progressInfo: string; processingInfo: string; } const CreateChannelProcessingInfo: FC = ({ progress, + progressInfo, processingInfo }) => { return ( @@ -27,7 +29,7 @@ const CreateChannelProcessingInfo: FC = ({ width='-webkit-fill-available' > - Please complete the transaction in your wallet to proceed. + {progressInfo} diff --git a/src/modules/createChannel/components/StakeFees.tsx b/src/modules/createChannel/components/StakeFees.tsx index da3e08d8dc..fa855db2a6 100644 --- a/src/modules/createChannel/components/StakeFees.tsx +++ b/src/modules/createChannel/components/StakeFees.tsx @@ -22,24 +22,32 @@ const StakeFees: FC = ({ const { loading, error, executeAsyncFunction: executeImportPushTokenFunc } = useAsyncOperation(importPushToken); const [balance, setBalance] = useState(0); - const [faucetLoading, setFaucetLoading] = useState(false); + const [mintingPush, setMintingPush] = useState(false); const mintPushTokenHandler = async (noOfTokens: number) => { if (!isWalletConnected) { connect(); } if (isWalletConnected) { - setFaucetLoading(true); - const amount = await mintPushToken({ noOfTokens, provider, account }); - console.log('Token Minted >>>', amount); - setFaucetLoading(false); - setBalance(amount); + setMintingPush(true); + try { + const amount = await mintPushToken({ noOfTokens, provider, account }); + console.log('Token Minted >>>', amount); + setMintingPush(false) + setBalance(amount); + + } catch (error) { + console.log("Error >>", error); + setMintingPush(false) + + } } }; //check Push token in wallet const pushTokenInWallet = async () => { + console.log("Fetching token") const amount = await getPushTokenFromWallet({ address: account, provider: provider @@ -49,18 +57,24 @@ const StakeFees: FC = ({ }; useEffect(() => { + console.log("Balance useEffect is called", balance); pushTokenInWallet(); checkSetFaucetVisibility(); }, [balance, account]); const handlePushTokenImport = async () => { + if (!isWalletConnected) { + return; + } await executeImportPushTokenFunc(); }; const [isFaucetVisible, setIsFaucetVisible] = useState(false); const checkSetFaucetVisibility = async () => { + console.log("Checking if faucet should be displayed"); + const hasEnoughPushToken = await getHasEnoughPushToken({ address: account, provider: provider, @@ -79,7 +93,7 @@ const StakeFees: FC = ({ flexDirection="row" justifyContent="space-between" backgroundColor={{ light: "gray-100", dark: 'gray-1000' }} - borderRadius={!faucetLoading && isFaucetVisible ? "r4 r4 r0 r0" : "r4"} + borderRadius={isFaucetVisible ? "r4 r4 r0 r0" : "r4"} padding="s4 s6" alignItems="center" > @@ -98,9 +112,10 @@ const StakeFees: FC = ({ - {!faucetLoading && isFaucetVisible && } @@ -127,7 +142,9 @@ const StakeFees: FC = ({ setStakeFeesChoosen(true) handleCreateChannel() }} - >Create Channel + > + Create Channel + ); From 1ad498f0410ba7c030a9ccf5a2f2d5b034f1106f Mon Sep 17 00:00:00 2001 From: abhishek-01k Date: Thu, 11 Jul 2024 17:25:26 +0530 Subject: [PATCH 03/18] Added New Page when chain is diff --- src/config/AppPaths.ts | 2 +- src/modules/createChannel/CreateChannel.tsx | 12 +++++- .../createChannel/components/ChannelInfo.tsx | 9 ++++- .../components/CreateChannelError.tsx | 7 +++- .../components/CreateChannelHeader.tsx | 1 + .../CreateChannelProcessingInfo.tsx | 7 +++- .../components/DifferentChainPage.tsx | 37 +++++++++++++++++++ .../createChannel/components/UploadLogo.tsx | 2 +- .../createChannel/approvePUSHTokens.ts | 6 +-- .../createChannel/createNewChannel.ts | 8 +--- src/queries/types/createChannel.ts | 13 +++++++ src/queries/types/index.ts | 1 + 12 files changed, 86 insertions(+), 19 deletions(-) create mode 100644 src/modules/createChannel/components/DifferentChainPage.tsx create mode 100644 src/queries/types/createChannel.ts diff --git a/src/config/AppPaths.ts b/src/config/AppPaths.ts index 9dfcbb6fea..8ba21b35c3 100644 --- a/src/config/AppPaths.ts +++ b/src/config/AppPaths.ts @@ -6,7 +6,7 @@ enum APP_PATHS { Chat = '/chat', Spaces = '/spaces', Channels = '/channels', - CreateChannel = '/createChannel', + CreateChannel = '/channel/create', Dashboard = '/dashboard', DiscordVerification = '/discord/verification', Rewards = '/points', diff --git a/src/modules/createChannel/CreateChannel.tsx b/src/modules/createChannel/CreateChannel.tsx index fbd5f9af28..acfe23df0e 100644 --- a/src/modules/createChannel/CreateChannel.tsx +++ b/src/modules/createChannel/CreateChannel.tsx @@ -23,6 +23,7 @@ import { CreateChannelProcessingInfo } from './components/CreateChannelProcessin import { CHANNEL_STAKE_FEES, CreateChannelSteps } from './CreateChannel.constants'; import { ChannelCreationError, ChannelInfoFormValues, CreateChannelProgressType } from './CreateChannel.types'; import { channelInfoValidationSchema, checkImageSize, checkPushTokenApprovalFunc } from './CreateChannel.utils'; +import { DifferentChainPage } from './components/DifferentChainPage'; // Helpers import { IPFSupload } from 'helpers/IpfsHelper'; @@ -30,6 +31,8 @@ import { CHANNEL_TYPE } from 'helpers/UtilityHelper'; // Config import { useApprovePUSHToken, useCreateChannel } from 'queries/hooks/createChannel'; +import { appConfig } from 'config'; + const completedSteps = [0]; const fees = ethers.utils.parseUnits(CHANNEL_STAKE_FEES.toString(), 18); @@ -46,7 +49,9 @@ const errorInitialState: ChannelCreationError = { }; const CreateChannel = () => { - const { account, provider, isWalletConnected, connect } = useAccount(); + const { account, provider, isWalletConnected, chainId, connect } = useAccount(); + + const onCoreNetwork = appConfig.coreContractChain === chainId; const { mutate: approvePUSHToken, isPending: pendingApproval } = useApprovePUSHToken(); const { mutate: createNewChannel, isPending: createChannelPending } = useCreateChannel(); @@ -74,7 +79,7 @@ const CreateChannel = () => { // Progress Bar and text const [progressState, setProgressState] = useState(progressInitialState); - //Error status and text + // Error status and text const [channelCreationError, setChannelCreationError] = useState(errorInitialState); @@ -281,12 +286,15 @@ const CreateChannel = () => { backgroundColor={{ light: 'white', dark: 'gray-900' }} borderRadius="r8" display="flex" + width={{ initial: '648px', ml: '325px' }} flexDirection="column" alignItems="center" gap="s10" > + {!onCoreNetwork && } + {channelCreationError.txErrorStatus !== 0 && } {progressState.progress === null ? ( diff --git a/src/modules/createChannel/components/ChannelInfo.tsx b/src/modules/createChannel/components/ChannelInfo.tsx index c2198f2ffc..11578ff51c 100644 --- a/src/modules/createChannel/components/ChannelInfo.tsx +++ b/src/modules/createChannel/components/ChannelInfo.tsx @@ -1,6 +1,13 @@ -import { Box, Button, TextArea, TextInput } from "blocks"; +// React + web3 essentials import { FC } from "react"; + +// Third party librabries import { FormikProps } from "formik"; + +// Components +import { Box, Button, TextArea, TextInput } from "blocks"; + +// Types import { ChannelInfoFormValues } from "../CreateChannel.types"; type ChannelInfoProps = { diff --git a/src/modules/createChannel/components/CreateChannelError.tsx b/src/modules/createChannel/components/CreateChannelError.tsx index 64e8421154..ed71154d04 100644 --- a/src/modules/createChannel/components/CreateChannelError.tsx +++ b/src/modules/createChannel/components/CreateChannelError.tsx @@ -1,5 +1,10 @@ -import { Box, ErrorFilled, Text } from 'blocks'; +//React + web3 essentials import { FC } from 'react'; + +// Components +import { Box, ErrorFilled, Text } from 'blocks'; + +// Types import { ChannelCreationError } from '../CreateChannel.types'; type CreateChannelError = { diff --git a/src/modules/createChannel/components/CreateChannelHeader.tsx b/src/modules/createChannel/components/CreateChannelHeader.tsx index 09b7c480b2..792ba867fa 100644 --- a/src/modules/createChannel/components/CreateChannelHeader.tsx +++ b/src/modules/createChannel/components/CreateChannelHeader.tsx @@ -1,3 +1,4 @@ +// Components import { Box, Text } from 'blocks'; const CreateChannelHeader = () => { diff --git a/src/modules/createChannel/components/CreateChannelProcessingInfo.tsx b/src/modules/createChannel/components/CreateChannelProcessingInfo.tsx index 2148c7028b..1a74fec9ec 100644 --- a/src/modules/createChannel/components/CreateChannelProcessingInfo.tsx +++ b/src/modules/createChannel/components/CreateChannelProcessingInfo.tsx @@ -1,7 +1,12 @@ +// React + web3 essentials +import { FC } from "react"; + +// Components import { Box, Text } from "blocks"; import ProgressBar from "components/reusables/progress/ProgressBarUnit"; import Spinner, { SPINNER_TYPE } from "components/reusables/spinners/SpinnerUnit"; -import { FC } from "react"; + +// Types import { CreateChannelProgressType } from "../CreateChannel.types"; type CreateChannelProcessingInfoProps = { diff --git a/src/modules/createChannel/components/DifferentChainPage.tsx b/src/modules/createChannel/components/DifferentChainPage.tsx new file mode 100644 index 0000000000..13e07b924b --- /dev/null +++ b/src/modules/createChannel/components/DifferentChainPage.tsx @@ -0,0 +1,37 @@ +// Hooks +import { useAccount } from 'hooks'; + +// Components +import { Box, Button, Text } from 'blocks'; + +// Configs +import { appConfig } from 'config'; + +const DifferentChainPage = () => { + const { switchChain } = useAccount(); + return ( + <> + + + Please select Ethereum Sepolia Network in your Wallet to create a channel. + + + + + + + + + ); +}; + +export { DifferentChainPage }; \ No newline at end of file diff --git a/src/modules/createChannel/components/UploadLogo.tsx b/src/modules/createChannel/components/UploadLogo.tsx index 0104c3936a..9fc5c1e5a6 100644 --- a/src/modules/createChannel/components/UploadLogo.tsx +++ b/src/modules/createChannel/components/UploadLogo.tsx @@ -6,11 +6,11 @@ import { FC, useRef } from "react"; // Third party libraries import { css } from "styled-components"; import * as Yup from 'yup'; +import { useFormik } from "formik"; // Component import { Box, Button, CloudUpload, Text } from "blocks"; import ImageClipper from "primaries/ImageClipper"; -import { useFormik } from "formik"; import { isImageFile } from "../CreateChannel.utils"; type UploadLogoProps = { diff --git a/src/queries/services/createChannel/approvePUSHTokens.ts b/src/queries/services/createChannel/approvePUSHTokens.ts index 4831897214..ad95349129 100644 --- a/src/queries/services/createChannel/approvePUSHTokens.ts +++ b/src/queries/services/createChannel/approvePUSHTokens.ts @@ -1,10 +1,6 @@ import { abis, addresses } from 'config'; import { ContractReceipt, ethers } from 'ethers'; - -type ApprovePUSHTokenPayload = { - noOfTokenToApprove: ethers.BigNumber; - signer: ethers.providers.JsonRpcSigner; -}; +import { ApprovePUSHTokenPayload } from 'queries/types'; export const approvePUSHTokens = async (payload: ApprovePUSHTokenPayload): Promise => { const { noOfTokenToApprove, signer } = payload; diff --git a/src/queries/services/createChannel/createNewChannel.ts b/src/queries/services/createChannel/createNewChannel.ts index 45f444a76e..aba1e2e48a 100644 --- a/src/queries/services/createChannel/createNewChannel.ts +++ b/src/queries/services/createChannel/createNewChannel.ts @@ -1,12 +1,6 @@ import { abis, addresses } from 'config'; import { ContractReceipt, ethers } from 'ethers'; - -type CreateNewChannelPayload = { - channelType: number; - identityBytes: Uint8Array; - fees: ethers.BigNumber; - signer: ethers.providers.JsonRpcSigner; -}; +import { CreateNewChannelPayload } from 'queries/types'; export const createNewChannel = async (payload: CreateNewChannelPayload): Promise => { const { channelType, identityBytes, fees, signer } = payload; diff --git a/src/queries/types/createChannel.ts b/src/queries/types/createChannel.ts new file mode 100644 index 0000000000..8e46434a7f --- /dev/null +++ b/src/queries/types/createChannel.ts @@ -0,0 +1,13 @@ +import { ethers } from 'ethers'; + +export type CreateNewChannelPayload = { + channelType: number; + identityBytes: Uint8Array; + fees: ethers.BigNumber; + signer: ethers.providers.JsonRpcSigner; +}; + +export type ApprovePUSHTokenPayload = { + noOfTokenToApprove: ethers.BigNumber; + signer: ethers.providers.JsonRpcSigner; +}; diff --git a/src/queries/types/index.ts b/src/queries/types/index.ts index fdcb1f07a9..5f30e3836e 100644 --- a/src/queries/types/index.ts +++ b/src/queries/types/index.ts @@ -2,3 +2,4 @@ export * from './channels'; export * from './user'; export * from './rewards'; export * from './pointsVault'; +export * from './createChannel'; From 623d9db988424efe4b1ba3487c2b5e06bca7ebd2 Mon Sep 17 00:00:00 2001 From: abhishek-01k Date: Fri, 12 Jul 2024 14:57:16 +0530 Subject: [PATCH 04/18] Fixed the navigation for channel creation flow --- .../ChannelOwnerDashboard.tsx | 54 ++++++++++-- .../channelDashboardModule.tsx | 82 +------------------ src/modules/createChannel/CreateChannel.tsx | 4 +- .../components/CreateChannelError.tsx | 4 +- .../CreateChannelProcessingInfo.tsx | 2 +- .../createChannel/components/UploadLogo.tsx | 1 - 6 files changed, 54 insertions(+), 93 deletions(-) diff --git a/src/modules/channelDashboard/ChannelOwnerDashboard.tsx b/src/modules/channelDashboard/ChannelOwnerDashboard.tsx index 4a33aef36e..b4bcc43ccc 100644 --- a/src/modules/channelDashboard/ChannelOwnerDashboard.tsx +++ b/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 && } + {/* {!channelDetails && processingState === 0 && } */} + {!channelDetails && processingState === 0 && } {isChannelDetails && processingState !== null && ( - <> + {editChannel ? ( { <> {channelDetails && !isMobile && ( {!isChannelExpired && onCoreNetwork && ( Edit Channel @@ -252,7 +253,7 @@ const ChannelOwnerDashboard = () => { )} )} - + )} {/* 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%'}; diff --git a/src/modules/channelDashboard/channelDashboardModule.tsx b/src/modules/channelDashboard/channelDashboardModule.tsx index e048416be5..1037b39c22 100644 --- a/src/modules/channelDashboard/channelDashboardModule.tsx +++ b/src/modules/channelDashboard/channelDashboardModule.tsx @@ -37,7 +37,7 @@ function ChannelDashboardModule() { // Render return ( - + <> {adminStatusLoaded ? : } {toast && ( )} - + ); } // css style -const Container = styled(Section)` - align-items: center; - align-self: center; - background: ${(props) => props.theme.default.bg}; - border-radius: ${GLOBALS.ADJUSTMENTS.RADIUS.LARGE} ${GLOBALS.ADJUSTMENTS.RADIUS.LARGE} - ${GLOBALS.ADJUSTMENTS.RADIUS.LARGE} ${GLOBALS.ADJUSTMENTS.RADIUS.LARGE}; - box-shadow: ${GLOBALS.ADJUSTMENTS.MODULE_BOX_SHADOW}; - display: flex; - flex-direction: column; - flex: initial; - justify-content: center; - max-width: 1200px; - 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 Container = styled(Section)` -// align-items: center; -// align-self: center; -// background: ${(props) => props.theme.default.bg}; -// border-radius: ${GLOBALS.ADJUSTMENTS.RADIUS.LARGE}; -// box-shadow: ${GLOBALS.ADJUSTMENTS.MODULE_BOX_SHADOW}; -// display: flex; -// flex-direction: column; -// flex: initial; -// justify-content: center; -// max-width: 1200px; -// 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.HUGE}; -// 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.MINI_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} -// ); -// } -// `; - const Interface = styled.div` flex: 1; display: flex; diff --git a/src/modules/createChannel/CreateChannel.tsx b/src/modules/createChannel/CreateChannel.tsx index acfe23df0e..23bf3de8b2 100644 --- a/src/modules/createChannel/CreateChannel.tsx +++ b/src/modules/createChannel/CreateChannel.tsx @@ -174,7 +174,6 @@ const CreateChannel = () => { // We are not sure about this error so we cant display (EDGE CASE) updateChannelCreationError(2, 'Transaction failed due to one of the following reasons:'); } else { - console.log('Tx Successful', response); updateProgressState( 80, @@ -209,7 +208,7 @@ const CreateChannel = () => { setProgressState(progressInitialState) } else { // Other unknown error - console.error('Error --> %o', error); + console.error('Error in creating channel--> %o', error); console.error({ error }); updateProgressState( 0, @@ -245,7 +244,6 @@ const CreateChannel = () => { // Calculate the approval amount of the user const approvedTokenAmount = await checkPushTokenApprovalFunc({ provider, account }); - console.log('Approved Token Amount >>', approvedTokenAmount); let input = { name: channelInfoFormik.values.channelName, diff --git a/src/modules/createChannel/components/CreateChannelError.tsx b/src/modules/createChannel/components/CreateChannelError.tsx index ed71154d04..7e76ed6c69 100644 --- a/src/modules/createChannel/components/CreateChannelError.tsx +++ b/src/modules/createChannel/components/CreateChannelError.tsx @@ -7,10 +7,10 @@ import { Box, ErrorFilled, Text } from 'blocks'; // Types import { ChannelCreationError } from '../CreateChannel.types'; -type CreateChannelError = { +type CreateChannelErrorProp = { channelCreationError: ChannelCreationError; } -const CreateChannelError: FC = ({ +const CreateChannelError: FC = ({ channelCreationError }) => { return ( diff --git a/src/modules/createChannel/components/CreateChannelProcessingInfo.tsx b/src/modules/createChannel/components/CreateChannelProcessingInfo.tsx index 1a74fec9ec..7939652517 100644 --- a/src/modules/createChannel/components/CreateChannelProcessingInfo.tsx +++ b/src/modules/createChannel/components/CreateChannelProcessingInfo.tsx @@ -45,7 +45,7 @@ const CreateChannelProcessingInfo: FC = ({ - + {progressState.processingInfo} diff --git a/src/modules/createChannel/components/UploadLogo.tsx b/src/modules/createChannel/components/UploadLogo.tsx index 9fc5c1e5a6..e3b2150ec1 100644 --- a/src/modules/createChannel/components/UploadLogo.tsx +++ b/src/modules/createChannel/components/UploadLogo.tsx @@ -52,7 +52,6 @@ const UploadLogo: FC = ({ // handle Input file type const handleFileChange = async (e: React.ChangeEvent) => { - console.log("File change") const file = e.currentTarget.files?.[0]; setView(false) setCroppedImage(undefined) From 6033576fefd45755aefb25e6dd0e22a8949667bd Mon Sep 17 00:00:00 2001 From: abhishek-01k Date: Fri, 12 Jul 2024 15:24:01 +0530 Subject: [PATCH 05/18] Pulled the main to change the theme way --- src/modules/createChannel/CreateChannel.tsx | 77 ++++++++++--------- .../createChannel/components/ChannelInfo.tsx | 36 ++++----- .../components/CreateChannelError.tsx | 8 +- .../components/CreateChannelFaucet.tsx | 12 +-- .../components/CreateChannelHeader.tsx | 10 +-- .../CreateChannelProcessingInfo.tsx | 12 +-- .../components/DifferentChainPage.tsx | 8 +- .../createChannel/components/StakeFees.tsx | 27 ++++--- .../createChannel/components/UploadLogo.tsx | 6 +- 9 files changed, 102 insertions(+), 94 deletions(-) diff --git a/src/modules/createChannel/CreateChannel.tsx b/src/modules/createChannel/CreateChannel.tsx index 23bf3de8b2..3ef7b6ddc0 100644 --- a/src/modules/createChannel/CreateChannel.tsx +++ b/src/modules/createChannel/CreateChannel.tsx @@ -280,9 +280,9 @@ const CreateChannel = () => { return ( { > - {!onCoreNetwork && } - - {channelCreationError.txErrorStatus !== 0 && } - - {progressState.progress === null ? ( - - - - {activeStepIndex == 0 && } - - {activeStepIndex === 1 && ( - + {!onCoreNetwork ? : ( + <> + {channelCreationError.txErrorStatus !== 0 && } + + {progressState.progress === null ? ( + + + + {activeStepIndex == 0 && } + + {activeStepIndex === 1 && ( + + )} + + {activeStepIndex === 2 && ( + + )} + + ) : ( + )} - {activeStepIndex === 2 && ( - - )} - - ) : ( - + )} + + + + ); }; diff --git a/src/modules/createChannel/components/ChannelInfo.tsx b/src/modules/createChannel/components/ChannelInfo.tsx index 11578ff51c..aab83609c1 100644 --- a/src/modules/createChannel/components/ChannelInfo.tsx +++ b/src/modules/createChannel/components/ChannelInfo.tsx @@ -22,23 +22,20 @@ const ChannelInfo: FC = ({ - - -
+ + = ({ error={channelInfoFormik.touched.channelURL && Boolean(channelInfoFormik.errors.channelURL)} errorMessage={channelInfoFormik.touched.channelURL ? channelInfoFormik.errors.channelURL : ''} /> - - - - - -
- + + + + + + ); }; diff --git a/src/modules/createChannel/components/CreateChannelError.tsx b/src/modules/createChannel/components/CreateChannelError.tsx index 7e76ed6c69..3b740b2858 100644 --- a/src/modules/createChannel/components/CreateChannelError.tsx +++ b/src/modules/createChannel/components/CreateChannelError.tsx @@ -18,15 +18,15 @@ const CreateChannelError: FC = ({ gap="s2" display="flex" flexDirection="row" - backgroundColor={{ light: 'red-100', dark: 'red-800' }} - borderRadius="r4" - padding={{ ml: 's2', lp: 's2', initial: 's2' }} + backgroundColor='surface-danger-subtle' + borderRadius="radius-xs" + padding='s2' width="100%" > - + {channelCreationError.txError} diff --git a/src/modules/createChannel/components/CreateChannelFaucet.tsx b/src/modules/createChannel/components/CreateChannelFaucet.tsx index bb99e53b87..34318d9d4a 100644 --- a/src/modules/createChannel/components/CreateChannelFaucet.tsx +++ b/src/modules/createChannel/components/CreateChannelFaucet.tsx @@ -33,16 +33,16 @@ const CreateChannelFaucet: FC = ({ return ( - + {isProd ? 'Your balance is low. Swap to get PUSH Tokens.' : 'Follow these steps to get Testnet PUSH.'} @@ -65,7 +65,7 @@ const CreateChannelFaucet: FC = ({ display='flex' gap='s2' alignItems='baseline' - color='pink-600' + color='text-brand-medium' cursor='pointer' > = ({ display='flex' gap='s2' alignItems='baseline' - color='pink-600' + color='text-brand-medium' cursor='pointer' onClick={() => mintPushToken(1000)} > diff --git a/src/modules/createChannel/components/CreateChannelHeader.tsx b/src/modules/createChannel/components/CreateChannelHeader.tsx index 792ba867fa..109b58fb6b 100644 --- a/src/modules/createChannel/components/CreateChannelHeader.tsx +++ b/src/modules/createChannel/components/CreateChannelHeader.tsx @@ -12,8 +12,8 @@ const CreateChannelHeader = () => { > Create Your Channel @@ -21,7 +21,7 @@ const CreateChannelHeader = () => { Creating your own notification channel to manage, send and notify users. @@ -30,7 +30,7 @@ const CreateChannelHeader = () => { Create Your Channel @@ -38,7 +38,7 @@ const CreateChannelHeader = () => { diff --git a/src/modules/createChannel/components/CreateChannelProcessingInfo.tsx b/src/modules/createChannel/components/CreateChannelProcessingInfo.tsx index 7939652517..a78c66d8e1 100644 --- a/src/modules/createChannel/components/CreateChannelProcessingInfo.tsx +++ b/src/modules/createChannel/components/CreateChannelProcessingInfo.tsx @@ -21,16 +21,16 @@ const CreateChannelProcessingInfo: FC = ({ display='flex' flexDirection='column' alignSelf='stretch' - gap='s10' + gap='spacing-xl' alignItems='center' > - + {progressState.progressInfo} @@ -44,9 +44,9 @@ const CreateChannelProcessingInfo: FC = ({ /> - + - + {progressState.processingInfo} diff --git a/src/modules/createChannel/components/DifferentChainPage.tsx b/src/modules/createChannel/components/DifferentChainPage.tsx index 13e07b924b..468d9bc272 100644 --- a/src/modules/createChannel/components/DifferentChainPage.tsx +++ b/src/modules/createChannel/components/DifferentChainPage.tsx @@ -14,12 +14,12 @@ const DifferentChainPage = () => { - + Please select Ethereum Sepolia Network in your Wallet to create a channel. diff --git a/src/modules/createChannel/components/StakeFees.tsx b/src/modules/createChannel/components/StakeFees.tsx index 4588b889ee..a4c9d18ac3 100644 --- a/src/modules/createChannel/components/StakeFees.tsx +++ b/src/modules/createChannel/components/StakeFees.tsx @@ -85,21 +85,21 @@ const StakeFees: FC = ({ return ( - - + + Amout For Staking @@ -107,23 +107,28 @@ const StakeFees: FC = ({ Amout For Staking - + {channelStakeFees} PUSH - + Balance: {balance?.toLocaleString()} + {showFaucet && = ({ - + Don't see Push token in your wallet? = ({ cursor: pointer; `} variant="bes-semibold" - color="pink-500" + color="text-brand-medium" onClick={handlePushTokenImport} > Import Token diff --git a/src/modules/createChannel/components/UploadLogo.tsx b/src/modules/createChannel/components/UploadLogo.tsx index e3b2150ec1..ac24ce1b4b 100644 --- a/src/modules/createChannel/components/UploadLogo.tsx +++ b/src/modules/createChannel/components/UploadLogo.tsx @@ -100,20 +100,20 @@ const UploadLogo: FC = ({ alignItems='center' gap='s8' > - + Upload a PNG, JPG upto 1MB. Crop the image to resize to 128px.
e.preventDefault()} onDrop={handleDrop} From 1f082546f9ce4da8177ac8da96b28038c5751a3d Mon Sep 17 00:00:00 2001 From: abhishek-01k Date: Fri, 12 Jul 2024 15:45:09 +0530 Subject: [PATCH 06/18] Removed the new createChannel route --- src/config/AppPaths.ts | 1 - src/pages/CreateChannelPage.tsx | 12 ------------ src/structure/MasterInterfacePage.tsx | 6 ------ 3 files changed, 19 deletions(-) delete mode 100644 src/pages/CreateChannelPage.tsx diff --git a/src/config/AppPaths.ts b/src/config/AppPaths.ts index 8ba21b35c3..f65a85010c 100644 --- a/src/config/AppPaths.ts +++ b/src/config/AppPaths.ts @@ -6,7 +6,6 @@ enum APP_PATHS { Chat = '/chat', Spaces = '/spaces', Channels = '/channels', - CreateChannel = '/channel/create', Dashboard = '/dashboard', DiscordVerification = '/discord/verification', Rewards = '/points', diff --git a/src/pages/CreateChannelPage.tsx b/src/pages/CreateChannelPage.tsx deleted file mode 100644 index 87610a504b..0000000000 --- a/src/pages/CreateChannelPage.tsx +++ /dev/null @@ -1,12 +0,0 @@ -//components -import { CreateChannel } from 'modules/createChannel'; -import { ContentLayout } from 'common'; - -const CreateChannelPage = () => { - return ( - - - - ); -}; -export default CreateChannelPage; diff --git a/src/structure/MasterInterfacePage.tsx b/src/structure/MasterInterfacePage.tsx index 6f9a7075b8..c53e9ce4de 100644 --- a/src/structure/MasterInterfacePage.tsx +++ b/src/structure/MasterInterfacePage.tsx @@ -42,7 +42,6 @@ const ClaimGalxePage = lazy(() => import('pages/ClaimGalxePage')); const WelcomDashboardPage = lazy(() => import('pages/WelcomeDashboardPage')); const RewardPointsPage = lazy(() => import('pages/RewardPointsPage')); const PointsVaultPage = lazy(() => import('pages/PointsVaultPage')); -const CreateChannelPage = lazy(() => import('pages/CreateChannelPage')); const DiscordVerificationPage = lazy(() => import('pages/DiscordVerificationPage')); // import AirdropPage from 'pages/AirdropPage'; @@ -230,11 +229,6 @@ function MasterInterfacePage() { element={} /> - } - /> - } From 4e441032b14bd45d8c15b7cd9aeabccdc9c0a7a7 Mon Sep 17 00:00:00 2001 From: abhishek-01k Date: Fri, 12 Jul 2024 15:46:38 +0530 Subject: [PATCH 07/18] Removed faucet duplication --- src/modules/createChannel/components/StakeFees.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/modules/createChannel/components/StakeFees.tsx b/src/modules/createChannel/components/StakeFees.tsx index a4c9d18ac3..77c8c08380 100644 --- a/src/modules/createChannel/components/StakeFees.tsx +++ b/src/modules/createChannel/components/StakeFees.tsx @@ -124,11 +124,6 @@ const StakeFees: FC = ({ - {showFaucet && Date: Mon, 15 Jul 2024 21:29:44 +0530 Subject: [PATCH 08/18] Fixed issue with the text and text color --- src/modules/createChannel/components/StakeFees.tsx | 2 +- src/modules/createChannel/components/UploadLogo.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/modules/createChannel/components/StakeFees.tsx b/src/modules/createChannel/components/StakeFees.tsx index 77c8c08380..eb329ae564 100644 --- a/src/modules/createChannel/components/StakeFees.tsx +++ b/src/modules/createChannel/components/StakeFees.tsx @@ -102,7 +102,7 @@ const StakeFees: FC = ({ color='text-primary' display={{ ml: 'none', dp: 'block' }} > - Amout For Staking + Amount for Staking = ({ Drag and Drop or