From 2116e48ca89a6cd2033e242e7104fc61e87fc347 Mon Sep 17 00:00:00 2001 From: Monalisha Mishra Date: Mon, 8 Jul 2024 19:13:36 +0530 Subject: [PATCH 01/13] added basic layout --- src/App.tsx | 20 +++--- src/blocks/icons/components/Curve.tsx | 31 ++++++++ src/common/components/Stepper.tsx | 6 +- src/config/AppPaths.ts | 3 +- .../addNewChain/AddNewChain.constants.tsx | 7 ++ src/modules/addNewChain/AddNewChain.tsx | 72 +++++++++++++++++++ src/modules/addNewChain/AddNewChain.types.tsx | 4 ++ .../addNewChain/components/ChangeNetwork.tsx | 33 +++++++++ .../addNewChain/components/NewAddress.tsx | 67 +++++++++++++++++ .../components/VerifyAliasChain.tsx | 38 ++++++++++ src/modules/addNewChain/index.tsx | 1 + src/pages/AddNewChain.tsx | 12 ++++ src/structure/MasterInterfacePage.tsx | 5 ++ src/structure/Navigation.tsx | 33 ++++++++- 14 files changed, 317 insertions(+), 15 deletions(-) create mode 100644 src/blocks/icons/components/Curve.tsx create mode 100644 src/modules/addNewChain/AddNewChain.constants.tsx create mode 100644 src/modules/addNewChain/AddNewChain.tsx create mode 100644 src/modules/addNewChain/AddNewChain.types.tsx create mode 100644 src/modules/addNewChain/components/ChangeNetwork.tsx create mode 100644 src/modules/addNewChain/components/NewAddress.tsx create mode 100644 src/modules/addNewChain/components/VerifyAliasChain.tsx create mode 100644 src/modules/addNewChain/index.tsx create mode 100644 src/pages/AddNewChain.tsx diff --git a/src/App.tsx b/src/App.tsx index cd66931f2c..230f06d4ca 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -116,13 +116,13 @@ const GlobalStyle = createGlobalStyle` /* Colors */ ${Object.entries(blocksColors) - .map(([colorName, code]) => `--${colorName}: ${code};`) - .join('')} + .map(([colorName, code]) => `--${colorName}: ${code};`) + .join('')} /* Typography Variants */ ${Object.entries(textVariants) - .map( - ([fontVariant, value]) => ` + .map( + ([fontVariant, value]) => ` --${fontVariant}-font-size: ${value.fontSize}; --${fontVariant}-line-height: ${value.lineHeight}; --${fontVariant}-font-weight: ${value.fontWeight}; @@ -130,8 +130,8 @@ const GlobalStyle = createGlobalStyle` ${value.letterSpacing ? `--${fontVariant}-letter-spacing: ${value.letterSpacing};` : ''} ${value.textTransform ? `--${fontVariant}-text-transform: ${value.textTransform};` : ''} ` - ) - .join('')} + ) + .join('')} } `; @@ -155,7 +155,7 @@ 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]) { @@ -163,7 +163,7 @@ const extendConsole = () => { } } else { disabledConsoles[level] = window.console[level]; - window.console[level] = function () { }; + window.console[level] = function () {}; } }; } catch (e) { @@ -408,8 +408,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 */} diff --git a/src/blocks/icons/components/Curve.tsx b/src/blocks/icons/components/Curve.tsx new file mode 100644 index 0000000000..9f30d5a6ab --- /dev/null +++ b/src/blocks/icons/components/Curve.tsx @@ -0,0 +1,31 @@ +import { FC } from 'react'; +import { IconWrapper } from '../IconWrapper'; +import { IconProps } from '../Icons.types'; + +const Curve: FC = (allProps) => { + const { svgProps: props, ...restProps } = allProps; + return ( + + + + } + {...restProps} + /> + ); +}; + +export default Curve; diff --git a/src/common/components/Stepper.tsx b/src/common/components/Stepper.tsx index 8dadfc14f3..bc57f1938f 100644 --- a/src/common/components/Stepper.tsx +++ b/src/common/components/Stepper.tsx @@ -7,10 +7,10 @@ import { Box, Text } from 'blocks'; type StepperProps = { steps: Array<{ label: string }>; activeStepIndex: number; - setActiveStep: (stepIndex: number) => void; + setActiveStepIndex: (stepIndex: number) => void; }; -const Stepper: FC = ({ steps, setActiveStep, activeStepIndex }) => { +const Stepper: FC = ({ steps, setActiveStepIndex, activeStepIndex }) => { return ( = ({ steps, setActiveStep, activeStepIndex }) => width="180px" cursor="pointer" color={activeStepIndex == index ? 'pink-500' : 'gray-500'} - onClick={() => setActiveStep(1)} + onClick={() => setActiveStepIndex(index)} > = () => { + const [activeStepIndex, setActiveStepIndex] = useState(0); + const [address, setAddress] = useState(''); + + const handleNextStep = () => { + if (activeStepIndex < 2) setActiveStepIndex(activeStepIndex + 1); + }; + + return ( + + + + Add New Chain to Channel + + + Add an alias chain to your channel to enable notifications to that chain. + + + + {/* check if we need formik */} + {activeStepIndex === 0 && ( + + )} + {activeStepIndex === 1 && } + {activeStepIndex === 2 && } + + ); +}; + +export { AddNewChain }; +// colors > brand tokens > semantics (for individual components) diff --git a/src/modules/addNewChain/AddNewChain.types.tsx b/src/modules/addNewChain/AddNewChain.types.tsx new file mode 100644 index 0000000000..73c87e615b --- /dev/null +++ b/src/modules/addNewChain/AddNewChain.types.tsx @@ -0,0 +1,4 @@ +export type AddNewChainStepsType = Array<{ label: string }>; +export type NewChainAddressValue = { + address: string; +}; diff --git a/src/modules/addNewChain/components/ChangeNetwork.tsx b/src/modules/addNewChain/components/ChangeNetwork.tsx new file mode 100644 index 0000000000..668123329c --- /dev/null +++ b/src/modules/addNewChain/components/ChangeNetwork.tsx @@ -0,0 +1,33 @@ +import { Box, Button, Text } from 'blocks'; +import { useAccount } from 'hooks'; +import { FC, useEffect } from 'react'; +import { useSelector } from 'react-redux'; + +export type ChangeNetworkProps = { + handleNextStep: () => void; +}; + +const ChangeNetwork: FC = ({ handleNextStep }) => { + const { switchChain, chainId } = useAccount(); + + //this chanin will be fetched from the select chainvalue + + useEffect(() => { + if (chainId === 80002) { + handleNextStep(); + } + }, [chainId]); + return ( + + Switch to the desired chain in your wallet to add it to your channel. + + + ); +}; + +export { ChangeNetwork }; diff --git a/src/modules/addNewChain/components/NewAddress.tsx b/src/modules/addNewChain/components/NewAddress.tsx new file mode 100644 index 0000000000..5ae734121c --- /dev/null +++ b/src/modules/addNewChain/components/NewAddress.tsx @@ -0,0 +1,67 @@ +import { useFormik } from 'formik'; +import * as yup from 'yup'; + +// Components +import { Box, Button, TextInput } from 'blocks'; +import { NewChainAddressValue } from '../AddNewChain.types'; +import { FC } from 'react'; + +export type NewAddressProps = { + setAddress: React.Dispatch>; + handleNextStep: () => void; +}; + +const NewAddress: FC = ({ setAddress, handleNextStep }) => { + const validationSchema = yup.object().shape({ + address: yup.string().required('Address is required'), + }); + const formik = useFormik({ + initialValues: { + address: '', + }, + validationSchema: validationSchema, + onSubmit: (values) => { + console.debug('in set addrss', values); + setAddress(values.address); + handleNextStep(); + }, + }); + + return ( + +
+ + + + + + +
+ + ); +}; + +export { NewAddress }; diff --git a/src/modules/addNewChain/components/VerifyAliasChain.tsx b/src/modules/addNewChain/components/VerifyAliasChain.tsx new file mode 100644 index 0000000000..2bacfa339e --- /dev/null +++ b/src/modules/addNewChain/components/VerifyAliasChain.tsx @@ -0,0 +1,38 @@ +import { Box, Button, Text, TextInput } from 'blocks'; +import { FC } from 'react'; + +export type VerifyAliasChainProps = { + address: string; +}; + +const VerifyAliasChain: FC = ({ address }) => { + return ( + + + + You’re almost there! +
Verify the address on the new chain to send notifications. + + + + + + ); +}; + +export { VerifyAliasChain }; diff --git a/src/modules/addNewChain/index.tsx b/src/modules/addNewChain/index.tsx new file mode 100644 index 0000000000..f112d9f6e4 --- /dev/null +++ b/src/modules/addNewChain/index.tsx @@ -0,0 +1 @@ +export { AddNewChain } from './AddNewChain'; diff --git a/src/pages/AddNewChain.tsx b/src/pages/AddNewChain.tsx new file mode 100644 index 0000000000..99e45501e2 --- /dev/null +++ b/src/pages/AddNewChain.tsx @@ -0,0 +1,12 @@ +//components +import { AddNewChain } from 'modules/addNewChain'; +import { ContentLayout } from 'common'; + +const AddNewChainPage = () => { + return ( + + + + ); +}; +export default AddNewChainPage; diff --git a/src/structure/MasterInterfacePage.tsx b/src/structure/MasterInterfacePage.tsx index 1164fae664..8123385dde 100644 --- a/src/structure/MasterInterfacePage.tsx +++ b/src/structure/MasterInterfacePage.tsx @@ -43,6 +43,7 @@ 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 AddNewChain = lazy(() => import('pages/AddNewChain')); // import AirdropPage from 'pages/AirdropPage'; // import ChannelDashboardPage from 'pages/ChannelDashboardPage'; @@ -160,6 +161,10 @@ function MasterInterfacePage() { } > + } + /> } diff --git a/src/structure/Navigation.tsx b/src/structure/Navigation.tsx index 80ad3e71a8..6271194e97 100644 --- a/src/structure/Navigation.tsx +++ b/src/structure/Navigation.tsx @@ -3,7 +3,7 @@ import { useContext, useEffect, useState } from 'react'; // External Packages import { useDispatch, useSelector } from 'react-redux'; -import { useLocation } from 'react-router-dom'; +import { useLocation, useNavigate } from 'react-router-dom'; import styled, { css, useTheme } from 'styled-components'; // Internal Compoonents @@ -23,6 +23,8 @@ import GLOBALS from 'config/Globals'; import navigationList from 'config/NavigationList'; import { appConfig } from 'config/index.js'; import { GlobalContext } from 'contexts/GlobalContext'; +import { Box, PlusCircle, Text } from 'blocks'; +import Curve from 'blocks/icons/components/Curve'; // Create Header function Navigation() { @@ -43,6 +45,7 @@ function Navigation() { const theme = useTheme(); const location = useLocation(); + const navigate = useNavigate(); const dispatch = useDispatch(); const { canSend } = useSelector((state: any) => { @@ -430,6 +433,7 @@ function Navigation() { const section = items[key]; const data = section.data; const uid = section.data.uid; + const isChannelPresent = channelDetails !== 'unfetched' && channelDetails != null; // if(uid === 2 ){ // if(section.opened) // dispatch(setCommunicateOpen(true)) @@ -557,6 +561,33 @@ function Navigation() { active={checkIfNavigationItemIsActive(section)} bg={returnNavigationBgColor(checkIfNavigationItemIsActive(section))} /> + {isChannelPresent && data.name === channelDetails.name && ( + + + navigate('/addNewChain')} + > + + + Add New Chain + + + + )} {/* { From d9355bfc796a21474d0fa72eb5eaa70425409059 Mon Sep 17 00:00:00 2001 From: Monalisha Mishra Date: Tue, 9 Jul 2024 18:21:57 +0530 Subject: [PATCH 02/13] finished ui --- package.json | 2 +- src/modules/addNewChain/AddNewChain.tsx | 15 ++-- src/modules/addNewChain/AddNewChain.types.tsx | 2 +- .../addNewChain/components/ChangeNetwork.tsx | 9 ++- .../addNewChain/components/NewAddress.tsx | 76 ++++++++++++++++--- .../components/VerifyAliasChain.tsx | 55 +++++++++++++- src/queries/hooks/channels/index.ts | 2 + .../hooks/channels/useInitiateNewChain.ts | 13 ++++ .../hooks/channels/useVerifyAliasChain.ts | 13 ++++ src/queries/models/channels/index.ts | 2 + .../channels/initiateNewChainModelCreator.ts | 6 ++ .../channels/verifyAliasChainModalCreator.ts | 6 ++ src/queries/queryKeys.ts | 2 + src/queries/services/channels/index.ts | 2 + .../services/channels/initiateNewChain.ts | 10 +++ .../services/channels/verifyAliasChain.ts | 10 +++ src/queries/types/channels.ts | 4 + src/structure/Navigation.tsx | 1 + yarn.lock | 10 +-- 19 files changed, 208 insertions(+), 32 deletions(-) create mode 100644 src/queries/hooks/channels/useInitiateNewChain.ts create mode 100644 src/queries/hooks/channels/useVerifyAliasChain.ts create mode 100644 src/queries/models/channels/initiateNewChainModelCreator.ts create mode 100644 src/queries/models/channels/verifyAliasChainModalCreator.ts create mode 100644 src/queries/services/channels/initiateNewChain.ts create mode 100644 src/queries/services/channels/verifyAliasChain.ts diff --git a/package.json b/package.json index e860d36f2a..8f8fdb20d9 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "@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.25", "@pushprotocol/socket": "0.5.3", "@pushprotocol/uiweb": "1.6.0-alpha.6", "@radix-ui/react-dropdown-menu": "^2.1.1", diff --git a/src/modules/addNewChain/AddNewChain.tsx b/src/modules/addNewChain/AddNewChain.tsx index 402016f2d9..187dc28661 100644 --- a/src/modules/addNewChain/AddNewChain.tsx +++ b/src/modules/addNewChain/AddNewChain.tsx @@ -12,9 +12,10 @@ import { VerifyAliasChain } from './components/VerifyAliasChain'; export type AddNewChainProps = {}; +//new to switch to write mode for adding chain const AddNewChain: FC = () => { const [activeStepIndex, setActiveStepIndex] = useState(0); - const [address, setAddress] = useState(''); + const [alias, setAlias] = useState(''); const handleNextStep = () => { if (activeStepIndex < 2) setActiveStepIndex(activeStepIndex + 1); @@ -58,15 +59,19 @@ const AddNewChain: FC = () => { {/* check if we need formik */} {activeStepIndex === 0 && ( )} - {activeStepIndex === 1 && } - {activeStepIndex === 2 && } + {activeStepIndex === 1 && ( + + )} + {activeStepIndex === 2 && } ); }; export { AddNewChain }; -// colors > brand tokens > semantics (for individual components) diff --git a/src/modules/addNewChain/AddNewChain.types.tsx b/src/modules/addNewChain/AddNewChain.types.tsx index 73c87e615b..d13bca0e7b 100644 --- a/src/modules/addNewChain/AddNewChain.types.tsx +++ b/src/modules/addNewChain/AddNewChain.types.tsx @@ -1,4 +1,4 @@ export type AddNewChainStepsType = Array<{ label: string }>; export type NewChainAddressValue = { - address: string; + alias: string; }; diff --git a/src/modules/addNewChain/components/ChangeNetwork.tsx b/src/modules/addNewChain/components/ChangeNetwork.tsx index 668123329c..30fec5a815 100644 --- a/src/modules/addNewChain/components/ChangeNetwork.tsx +++ b/src/modules/addNewChain/components/ChangeNetwork.tsx @@ -5,15 +5,16 @@ import { useSelector } from 'react-redux'; export type ChangeNetworkProps = { handleNextStep: () => void; + alias: string; }; -const ChangeNetwork: FC = ({ handleNextStep }) => { +const ChangeNetwork: FC = ({ handleNextStep, alias }) => { const { switchChain, chainId } = useAccount(); - - //this chanin will be fetched from the select chainvalue + const aliasChainId = parseInt(alias.split(':')[1]); useEffect(() => { - if (chainId === 80002) { + console.debug(chainId === aliasChainId, chainId, aliasChainId); + if (chainId === aliasChainId) { handleNextStep(); } }, [chainId]); diff --git a/src/modules/addNewChain/components/NewAddress.tsx b/src/modules/addNewChain/components/NewAddress.tsx index 5ae734121c..143bf88239 100644 --- a/src/modules/addNewChain/components/NewAddress.tsx +++ b/src/modules/addNewChain/components/NewAddress.tsx @@ -5,6 +5,13 @@ import * as yup from 'yup'; import { Box, Button, TextInput } from 'blocks'; import { NewChainAddressValue } from '../AddNewChain.types'; import { FC } from 'react'; +import { useInitiateNewChain } from 'queries'; +import { useSelector } from 'react-redux'; +import { UserStoreType } from 'types'; +import useToast from 'hooks/useToast'; +import { MdError } from 'react-icons/md'; +import { isValidAddress } from 'helpers/ValidationHelper'; +import { convertAddressToAddrCaip } from 'helpers/CaipHelper'; export type NewAddressProps = { setAddress: React.Dispatch>; @@ -12,21 +19,62 @@ export type NewAddressProps = { }; const NewAddress: FC = ({ setAddress, handleNextStep }) => { + const { userPushSDKInstance } = useSelector((state: UserStoreType) => { + return state.user; + }); + + const toast = useToast(); + + const { mutate: initiateNewChain, isPending } = useInitiateNewChain(); + const validationSchema = yup.object().shape({ - address: yup.string().required('Address is required'), + alias: yup + .string() + .required('Address is required') + .test('is-valid-address', 'Invalid wallet address', isValidAddress), }); const formik = useFormik({ initialValues: { - address: '', + alias: '', }, validationSchema: validationSchema, onSubmit: (values) => { - console.debug('in set addrss', values); - setAddress(values.address); - handleNextStep(); + setAddress(convertAddressToAddrCaip(values.alias, 80002)); + handleInitiate(values.alias); }, }); + //convert to caip before passing the address + const handleInitiate = (alias: string) => { + initiateNewChain( + { + userPushSDKInstance, + alias, + }, + { + onSuccess: (response) => { + console.debug(response, 'error'); + handleNextStep(); + }, + onError: (error: any) => { + if (error.name) { + console.debug(error, 'error'); + toast.showMessageToast({ + toastTitle: 'Error', + toastMessage: error.response.data.error, + toastType: 'ERROR', + getToastIcon: (size) => ( + + ), + }); + } + }, + } + ); + }; return (
@@ -45,18 +93,18 @@ const NewAddress: FC = ({ setAddress, handleNextStep }) => { > @@ -65,3 +113,7 @@ const NewAddress: FC = ({ setAddress, handleNextStep }) => { }; export { NewAddress }; + +//toast and take to channel page +// stepper +// navigation diff --git a/src/modules/addNewChain/components/VerifyAliasChain.tsx b/src/modules/addNewChain/components/VerifyAliasChain.tsx index 2bacfa339e..77703b32c2 100644 --- a/src/modules/addNewChain/components/VerifyAliasChain.tsx +++ b/src/modules/addNewChain/components/VerifyAliasChain.tsx @@ -1,11 +1,53 @@ import { Box, Button, Text, TextInput } from 'blocks'; +import useToast from 'hooks/useToast'; +import { useVerifyAliasChain } from 'queries'; import { FC } from 'react'; +import { MdError } from 'react-icons/md'; +import { useSelector } from 'react-redux'; +import { UserStoreType } from 'types'; export type VerifyAliasChainProps = { - address: string; + alias: string; }; -const VerifyAliasChain: FC = ({ address }) => { +const VerifyAliasChain: FC = ({ alias }) => { + const { userPushSDKInstance } = useSelector((state: UserStoreType) => { + return state.user; + }); + const { mutate: verifyAliasChain, isPending } = useVerifyAliasChain(); + + const toast = useToast(); + + const aliasParts = alias.split(':'); + const handleVerifyAliasChain = () => { + verifyAliasChain( + { + userPushSDKInstance, + alias, + }, + { + onSuccess: (response) => { + console.debug(response, 'response'); + }, + onError: (error: any) => { + if (error.name) { + console.debug(error, 'error'); + toast.showMessageToast({ + toastTitle: 'Error', + toastMessage: error.response.data.error, + toastType: 'ERROR', + getToastIcon: (size) => ( + + ), + }); + } + }, + } + ); + }; return ( = ({ address }) => { - +
); }; diff --git a/src/queries/hooks/channels/index.ts b/src/queries/hooks/channels/index.ts index 3de72513aa..85900b08ee 100644 --- a/src/queries/hooks/channels/index.ts +++ b/src/queries/hooks/channels/index.ts @@ -1,2 +1,4 @@ export * from './useGetTrendingChannels'; export * from './useGetChannelDetails'; +export * from './useInitiateNewChain'; +export * from './useVerifyAliasChain'; diff --git a/src/queries/hooks/channels/useInitiateNewChain.ts b/src/queries/hooks/channels/useInitiateNewChain.ts new file mode 100644 index 0000000000..a425456289 --- /dev/null +++ b/src/queries/hooks/channels/useInitiateNewChain.ts @@ -0,0 +1,13 @@ +import { useMutation } from '@tanstack/react-query'; + +//Constants +import { initiateNewChain } from '../../queryKeys'; + +//Services +import { initiateNewChain as initiateNewChainService } from '../../services'; + +export const useInitiateNewChain = () => + useMutation({ + mutationKey: [initiateNewChain], + mutationFn: initiateNewChainService, + }); diff --git a/src/queries/hooks/channels/useVerifyAliasChain.ts b/src/queries/hooks/channels/useVerifyAliasChain.ts new file mode 100644 index 0000000000..ecf20b112f --- /dev/null +++ b/src/queries/hooks/channels/useVerifyAliasChain.ts @@ -0,0 +1,13 @@ +import { useMutation } from '@tanstack/react-query'; + +//Constants +import { verifyAliasChain } from '../../queryKeys'; + +//Services +import { verifyAliasChain as verifyAliasChainService } from '../../services'; + +export const useVerifyAliasChain = () => + useMutation({ + mutationKey: [verifyAliasChain], + mutationFn: verifyAliasChainService, + }); diff --git a/src/queries/models/channels/index.ts b/src/queries/models/channels/index.ts index 04655a7ec7..5a67bc14e0 100644 --- a/src/queries/models/channels/index.ts +++ b/src/queries/models/channels/index.ts @@ -1,2 +1,4 @@ export * from './getTrendingChannelsModelCreator'; export * from './getChannelDetailsModelCreator'; +export * from './initiateNewChainModelCreator'; +export * from './verifyAliasChainModalCreator'; diff --git a/src/queries/models/channels/initiateNewChainModelCreator.ts b/src/queries/models/channels/initiateNewChainModelCreator.ts new file mode 100644 index 0000000000..1a126ca8bb --- /dev/null +++ b/src/queries/models/channels/initiateNewChainModelCreator.ts @@ -0,0 +1,6 @@ +import { InitiateVerifyAliasChainResponse } from '../../types'; + +//any remodelling needed in the response can be done here +export const initiateNewChainModelCreator = ( + response: InitiateVerifyAliasChainResponse +): InitiateVerifyAliasChainResponse => response; diff --git a/src/queries/models/channels/verifyAliasChainModalCreator.ts b/src/queries/models/channels/verifyAliasChainModalCreator.ts new file mode 100644 index 0000000000..fae950ef8b --- /dev/null +++ b/src/queries/models/channels/verifyAliasChainModalCreator.ts @@ -0,0 +1,6 @@ +import { InitiateVerifyAliasChainResponse } from '../../types'; + +//any remodelling needed in the response can be done here +export const verifyAliasChainModelCreator = ( + response: InitiateVerifyAliasChainResponse +): InitiateVerifyAliasChainResponse => response; diff --git a/src/queries/queryKeys.ts b/src/queries/queryKeys.ts index 2bcd343398..ff5fc0a1ac 100644 --- a/src/queries/queryKeys.ts +++ b/src/queries/queryKeys.ts @@ -19,3 +19,5 @@ export const userTwitterDetails = 'userTwitterDetails'; export const pointsVaultSearch = 'pointsVaultSearch'; export const approveVaultUser = 'approveVaultUser'; export const rejectVaultUser = 'rejectVaultUser'; +export const initiateNewChain = 'initiateNewChain'; +export const verifyAliasChain = 'verifyAliasChain'; diff --git a/src/queries/services/channels/index.ts b/src/queries/services/channels/index.ts index dbc6aed82b..98dce61ad4 100644 --- a/src/queries/services/channels/index.ts +++ b/src/queries/services/channels/index.ts @@ -1,2 +1,4 @@ export * from './getTrendingChannels'; export * from './getChannelDetails'; +export * from './initiateNewChain'; +export * from './verifyAliasChain'; diff --git a/src/queries/services/channels/initiateNewChain.ts b/src/queries/services/channels/initiateNewChain.ts new file mode 100644 index 0000000000..0143e6097c --- /dev/null +++ b/src/queries/services/channels/initiateNewChain.ts @@ -0,0 +1,10 @@ +import { PushAPI } from '@pushprotocol/restapi'; +import { initiateNewChainModelCreator } from '../../models'; + +type InitiateNewChainParams = { + userPushSDKInstance: PushAPI; + alias: string; //chain address in caip format +}; + +export const initiateNewChain = ({ userPushSDKInstance, alias }: InitiateNewChainParams) => + userPushSDKInstance.channel.alias.initiate(alias).then(initiateNewChainModelCreator); diff --git a/src/queries/services/channels/verifyAliasChain.ts b/src/queries/services/channels/verifyAliasChain.ts new file mode 100644 index 0000000000..92a7ab5fbd --- /dev/null +++ b/src/queries/services/channels/verifyAliasChain.ts @@ -0,0 +1,10 @@ +import { PushAPI } from '@pushprotocol/restapi'; +import { verifyAliasChainModelCreator } from '../../models'; + +type VerifyAliasChainParams = { + userPushSDKInstance: PushAPI; + alias: string; //chain address in caip format +}; + +export const verifyAliasChain = ({ userPushSDKInstance, alias }: VerifyAliasChainParams) => + userPushSDKInstance.channel.alias.verify(alias).then(verifyAliasChainModelCreator); diff --git a/src/queries/types/channels.ts b/src/queries/types/channels.ts index 977fae776e..d05963f1e8 100644 --- a/src/queries/types/channels.ts +++ b/src/queries/types/channels.ts @@ -60,3 +60,7 @@ export type ChannelDetailsResponse = { verified_status: number; verify_verification_proof: string | null; }; + +export type InitiateVerifyAliasChainResponse = { + tx: string; +}; diff --git a/src/structure/Navigation.tsx b/src/structure/Navigation.tsx index 6271194e97..e789326cca 100644 --- a/src/structure/Navigation.tsx +++ b/src/structure/Navigation.tsx @@ -52,6 +52,7 @@ function Navigation() { return state.canSend; }); + console.debug(channelDetails, 'channel'); useEffect(() => { if (!navigationSetup) return; diff --git a/yarn.lock b/yarn.lock index 2492ea4b46..d6d9488ac6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4386,9 +4386,9 @@ __metadata: languageName: node linkType: hard -"@pushprotocol/restapi@npm:1.7.20": - version: 1.7.20 - resolution: "@pushprotocol/restapi@npm:1.7.20" +"@pushprotocol/restapi@npm:1.7.25": + version: 1.7.25 + resolution: "@pushprotocol/restapi@npm:1.7.25" dependencies: "@metamask/eth-sig-util": "npm:^5.0.2" axios: "npm:^0.27.2" @@ -4411,7 +4411,7 @@ __metadata: peerDependenciesMeta: ethers: optional: true - checksum: 10/42ca0e0ce0ba2068c330973f0252dd5cb18167d5375cb191371086a0a5be9cf46382c5125503fe4dac1c2d33641b37f43348f160802e3d48cb2eea860b6c856d + checksum: 10/1da9268e81c3038871904336f16b6161fb039e9d0995a060f403f95c553a8ca8c9faada73c1806fb8ba3557cbdcc33b53c0e223c4cb743ddc9ed24da0b91c992 languageName: node linkType: hard @@ -18575,7 +18575,7 @@ __metadata: "@metamask/eth-sig-util": "npm:^4.0.0" "@mui/icons-material": "npm:^5.8.4" "@mui/material": "npm:^5.5.0" - "@pushprotocol/restapi": "npm:1.7.20" + "@pushprotocol/restapi": "npm:1.7.25" "@pushprotocol/socket": "npm:0.5.3" "@pushprotocol/uiweb": "npm:1.6.0-alpha.6" "@radix-ui/react-dropdown-menu": "npm:^2.1.1" From bce272d11f8f7a3c29440a41a4937c2c1c8f2f00 Mon Sep 17 00:00:00 2001 From: Monalisha Mishra Date: Tue, 9 Jul 2024 19:27:02 +0530 Subject: [PATCH 03/13] added fixes --- src/common/components/Stepper.tsx | 9 ++++-- src/modules/addNewChain/AddNewChain.tsx | 29 +++++++++++++++++-- .../addNewChain/components/NewAddress.tsx | 19 ++++++------ .../components/VerifyAliasChain.tsx | 22 +++++++++++--- 4 files changed, 61 insertions(+), 18 deletions(-) diff --git a/src/common/components/Stepper.tsx b/src/common/components/Stepper.tsx index bc57f1938f..1187eaedf7 100644 --- a/src/common/components/Stepper.tsx +++ b/src/common/components/Stepper.tsx @@ -8,9 +8,14 @@ type StepperProps = { steps: Array<{ label: string }>; activeStepIndex: number; setActiveStepIndex: (stepIndex: number) => void; + config?: { restrictedForwardSteps?: Array; restrictedBackwardSteps?: Array }; }; -const Stepper: FC = ({ steps, setActiveStepIndex, activeStepIndex }) => { +const Stepper: FC = ({ steps, setActiveStepIndex, activeStepIndex, config }) => { + const handleChangeActiveStep = (stepIndex: number) => { + if (!config?.restrictedBackwardSteps?.includes(stepIndex) && !config?.restrictedForwardSteps?.includes(stepIndex)) + setActiveStepIndex(stepIndex); + }; return ( = ({ steps, setActiveStepIndex, activeStepIndex width="180px" cursor="pointer" color={activeStepIndex == index ? 'pink-500' : 'gray-500'} - onClick={() => setActiveStepIndex(index)} + onClick={() => handleChangeActiveStep(index)} > = () => { const [activeStepIndex, setActiveStepIndex] = useState(0); const [alias, setAlias] = useState(''); + const { userPushSDKInstance } = useSelector((state: UserStoreType) => state.user); + const handleNextStep = () => { if (activeStepIndex < 2) setActiveStepIndex(activeStepIndex + 1); }; - + restrictedForwardSteps = restrictedForwardSteps.filter((item) => item !== activeStepIndex); + console.debug(restrictedForwardSteps); return ( = () => { steps={addNewChainSteps} setActiveStepIndex={setActiveStepIndex} activeStepIndex={activeStepIndex} + config={{ restrictedForwardSteps: restrictedForwardSteps }} /> {/* check if we need formik */} {activeStepIndex === 0 && ( @@ -70,6 +79,22 @@ const AddNewChain: FC = () => { /> )} {activeStepIndex === 2 && } + {userPushSDKInstance && userPushSDKInstance?.readmode() && ( + + + + )} ); }; diff --git a/src/modules/addNewChain/components/NewAddress.tsx b/src/modules/addNewChain/components/NewAddress.tsx index 143bf88239..b26f6a2d4c 100644 --- a/src/modules/addNewChain/components/NewAddress.tsx +++ b/src/modules/addNewChain/components/NewAddress.tsx @@ -25,7 +25,7 @@ const NewAddress: FC = ({ setAddress, handleNextStep }) => { const toast = useToast(); - const { mutate: initiateNewChain, isPending } = useInitiateNewChain(); + const { mutate: initiateNewChain, isPending, isError } = useInitiateNewChain(); const validationSchema = yup.object().shape({ alias: yup @@ -52,16 +52,14 @@ const NewAddress: FC = ({ setAddress, handleNextStep }) => { alias, }, { - onSuccess: (response) => { - console.debug(response, 'error'); + onSuccess: () => { handleNextStep(); }, onError: (error: any) => { - if (error.name) { - console.debug(error, 'error'); + if (error) { toast.showMessageToast({ toastTitle: 'Error', - toastMessage: error.response.data.error, + toastMessage: error.message, toastType: 'ERROR', getToastIcon: (size) => ( = ({ setAddress, handleNextStep }) => { /> @@ -114,6 +112,7 @@ const NewAddress: FC = ({ setAddress, handleNextStep }) => { export { NewAddress }; -//toast and take to channel page -// stepper +//error messages fix // navigation +//fix import order +//select button diff --git a/src/modules/addNewChain/components/VerifyAliasChain.tsx b/src/modules/addNewChain/components/VerifyAliasChain.tsx index 77703b32c2..2f829bfeb1 100644 --- a/src/modules/addNewChain/components/VerifyAliasChain.tsx +++ b/src/modules/addNewChain/components/VerifyAliasChain.tsx @@ -1,9 +1,11 @@ import { Box, Button, Text, TextInput } from 'blocks'; +import APP_PATHS from 'config/AppPaths'; import useToast from 'hooks/useToast'; import { useVerifyAliasChain } from 'queries'; import { FC } from 'react'; -import { MdError } from 'react-icons/md'; +import { MdCheckCircle, MdError } from 'react-icons/md'; import { useSelector } from 'react-redux'; +import { useNavigate } from 'react-router-dom'; import { UserStoreType } from 'types'; export type VerifyAliasChainProps = { @@ -17,6 +19,7 @@ const VerifyAliasChain: FC = ({ alias }) => { const { mutate: verifyAliasChain, isPending } = useVerifyAliasChain(); const toast = useToast(); + const navigate = useNavigate(); const aliasParts = alias.split(':'); const handleVerifyAliasChain = () => { @@ -28,13 +31,24 @@ const VerifyAliasChain: FC = ({ alias }) => { { onSuccess: (response) => { console.debug(response, 'response'); + toast.showMessageToast({ + toastTitle: 'Success', + toastMessage: 'Verification Successfull', + toastType: 'SUCCESS', + getToastIcon: (size) => ( + + ), + }); + navigate(APP_PATHS.Dashboard); }, onError: (error: any) => { - if (error.name) { - console.debug(error, 'error'); + if (error) { toast.showMessageToast({ toastTitle: 'Error', - toastMessage: error.response.data.error, + toastMessage: error.message, toastType: 'ERROR', getToastIcon: (size) => ( Date: Wed, 10 Jul 2024 11:54:58 +0530 Subject: [PATCH 04/13] addes stepper --- src/modules/addNewChain/AddNewChain.tsx | 14 ++++--- .../addNewChain/components/ChangeNetwork.tsx | 7 ++-- .../addNewChain/components/NewAddress.tsx | 18 ++++---- .../components/VerifyAliasChain.tsx | 15 ++++--- src/structure/Navigation.tsx | 41 +++++++++++++++---- 5 files changed, 66 insertions(+), 29 deletions(-) diff --git a/src/modules/addNewChain/AddNewChain.tsx b/src/modules/addNewChain/AddNewChain.tsx index ff26b9eda0..f38e78069d 100644 --- a/src/modules/addNewChain/AddNewChain.tsx +++ b/src/modules/addNewChain/AddNewChain.tsx @@ -1,19 +1,21 @@ // React and other libraries import { FC, useState } from 'react'; -// Components -import { Box, Text } from 'blocks'; -import { Stepper } from 'common'; +import { useSelector } from 'react-redux'; +import { css } from 'styled-components'; + import { addNewChainSteps } from './AddNewChain.constants'; +// Components import { NewAddress } from './components/NewAddress'; import { ChangeNetwork } from './components/ChangeNetwork'; import { VerifyAliasChain } from './components/VerifyAliasChain'; -import { useSelector } from 'react-redux'; -import { UserStoreType } from 'types'; -import { css } from 'styled-components'; +import { Box, Text } from 'blocks'; +import { Stepper } from 'common'; import UnlockProfileWrapper, { UNLOCK_PROFILE_TYPE } from 'components/chat/unlockProfile/UnlockProfileWrapper'; +import { UserStoreType } from 'types'; + export type AddNewChainProps = {}; let restrictedForwardSteps = [1, 2]; diff --git a/src/modules/addNewChain/components/ChangeNetwork.tsx b/src/modules/addNewChain/components/ChangeNetwork.tsx index 30fec5a815..ac11c87b4b 100644 --- a/src/modules/addNewChain/components/ChangeNetwork.tsx +++ b/src/modules/addNewChain/components/ChangeNetwork.tsx @@ -1,7 +1,8 @@ -import { Box, Button, Text } from 'blocks'; -import { useAccount } from 'hooks'; import { FC, useEffect } from 'react'; -import { useSelector } from 'react-redux'; + +import { useAccount } from 'hooks'; + +import { Box, Button, Text } from 'blocks'; export type ChangeNetworkProps = { handleNextStep: () => void; diff --git a/src/modules/addNewChain/components/NewAddress.tsx b/src/modules/addNewChain/components/NewAddress.tsx index b26f6a2d4c..1aab4245ee 100644 --- a/src/modules/addNewChain/components/NewAddress.tsx +++ b/src/modules/addNewChain/components/NewAddress.tsx @@ -1,18 +1,22 @@ +import { FC } from 'react'; + +import { useSelector } from 'react-redux'; +import { MdError } from 'react-icons/md'; import { useFormik } from 'formik'; import * as yup from 'yup'; +import useToast from 'hooks/useToast'; +import { useInitiateNewChain } from 'queries'; + // Components import { Box, Button, TextInput } from 'blocks'; -import { NewChainAddressValue } from '../AddNewChain.types'; -import { FC } from 'react'; -import { useInitiateNewChain } from 'queries'; -import { useSelector } from 'react-redux'; -import { UserStoreType } from 'types'; -import useToast from 'hooks/useToast'; -import { MdError } from 'react-icons/md'; + import { isValidAddress } from 'helpers/ValidationHelper'; import { convertAddressToAddrCaip } from 'helpers/CaipHelper'; +import { NewChainAddressValue } from '../AddNewChain.types'; +import { UserStoreType } from 'types'; + export type NewAddressProps = { setAddress: React.Dispatch>; handleNextStep: () => void; diff --git a/src/modules/addNewChain/components/VerifyAliasChain.tsx b/src/modules/addNewChain/components/VerifyAliasChain.tsx index 2f829bfeb1..59643341e1 100644 --- a/src/modules/addNewChain/components/VerifyAliasChain.tsx +++ b/src/modules/addNewChain/components/VerifyAliasChain.tsx @@ -1,11 +1,16 @@ -import { Box, Button, Text, TextInput } from 'blocks'; -import APP_PATHS from 'config/AppPaths'; -import useToast from 'hooks/useToast'; -import { useVerifyAliasChain } from 'queries'; import { FC } from 'react'; + import { MdCheckCircle, MdError } from 'react-icons/md'; import { useSelector } from 'react-redux'; import { useNavigate } from 'react-router-dom'; + +import useToast from 'hooks/useToast'; +import { useVerifyAliasChain } from 'queries'; + +import APP_PATHS from 'config/AppPaths'; + +import { Box, Button, Text, TextInput } from 'blocks'; + import { UserStoreType } from 'types'; export type VerifyAliasChainProps = { @@ -33,7 +38,7 @@ const VerifyAliasChain: FC = ({ alias }) => { console.debug(response, 'response'); toast.showMessageToast({ toastTitle: 'Success', - toastMessage: 'Verification Successfull', + toastMessage: 'Verification Successful', toastType: 'SUCCESS', getToastIcon: (size) => ( item?.is_alias_verified)?.map((item) => item.alias_blockchain_id) || + []; + // if(uid === 2 ){ // if(section.opened) // dispatch(setCommunicateOpen(true)) @@ -565,13 +571,29 @@ function Navigation() { {isChannelPresent && data.name === channelDetails.name && ( + + {/* add sepolia */} + {verifiedAliasChainIds.length > 0 && + [80002, 11155111, 97].map((aliasChainId: number) => { + const LogoComponent = LOGO_ALIAS_CHAIN[aliasChainId]; + return LogoComponent ? ( + + ) : null; + })} + navigate('/addNewChain')} > - - Add New Chain - + + {!verifiedAliasChainIds?.length && ( + + Add New Chain + + )} )} From ba301a0edf269ac58de7ce72bb8115921a3baa7e Mon Sep 17 00:00:00 2001 From: Monalisha Mishra Date: Thu, 11 Jul 2024 17:09:32 +0530 Subject: [PATCH 05/13] added layout of select --- package.json | 1 + src/blocks/icons/components/ArrowDown.tsx | 33 +++ src/blocks/icons/index.ts | 1 + src/blocks/illustrations/index.ts | 7 + src/blocks/index.ts | 1 + src/blocks/select/Select.tsx | 212 ++++++++++++++++++ src/blocks/select/index.tsx | 1 + src/blocks/textInput/TextInput.tsx | 3 +- src/blocks/textarea/TextArea.tsx | 11 +- .../addNewChain/AddNewChain.constants.tsx | 19 ++ .../addNewChain/components/ChangeNetwork.tsx | 7 +- .../addNewChain/components/NewAddress.tsx | 29 ++- .../components/VerifyAliasChain.tsx | 1 + src/structure/Navigation.tsx | 6 +- yarn.lock | 73 ++++++ 15 files changed, 394 insertions(+), 11 deletions(-) create mode 100644 src/blocks/icons/components/ArrowDown.tsx create mode 100644 src/blocks/select/Select.tsx create mode 100644 src/blocks/select/index.tsx diff --git a/package.json b/package.json index 07de1921b6..62686ea13f 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "@pushprotocol/uiweb": "1.4.2", "@radix-ui/react-dropdown-menu": "^2.1.1", "@radix-ui/react-tooltip": "^1.1.1", + "@reach/combobox": "^0.18.0", "@reach/tabs": "^0.18.0", "@reduxjs/toolkit": "^1.7.1", "@tanstack/react-query": "^5.44.0", diff --git a/src/blocks/icons/components/ArrowDown.tsx b/src/blocks/icons/components/ArrowDown.tsx new file mode 100644 index 0000000000..70377f979a --- /dev/null +++ b/src/blocks/icons/components/ArrowDown.tsx @@ -0,0 +1,33 @@ +import { FC } from 'react'; +import { IconWrapper } from '../IconWrapper'; +import { IconProps } from '../Icons.types'; + +const ArrowDown: FC = (allProps) => { + const { svgProps: props, ...restProps } = allProps; + return ( + + + + } + {...restProps} + /> + ); +}; + +export default ArrowDown; diff --git a/src/blocks/icons/index.ts b/src/blocks/icons/index.ts index dbf5c774f8..5dee39af9e 100644 --- a/src/blocks/icons/index.ts +++ b/src/blocks/icons/index.ts @@ -2,6 +2,7 @@ export * from './IconWrapper'; export * from './Icons.types'; export { default as Add } from './components/Add'; +export { default as ArrowDown } from './components/ArrowDown'; export { default as AddEmoji } from './components/AddEmoji'; diff --git a/src/blocks/illustrations/index.ts b/src/blocks/illustrations/index.ts index 6e0636a6e1..3e6dcdbc2e 100644 --- a/src/blocks/illustrations/index.ts +++ b/src/blocks/illustrations/index.ts @@ -1,6 +1,10 @@ export * from './IllustrationWrapper'; export * from './Illustrations.types'; +export { default as Arbitrum } from './components/Arbitrum'; + +export { default as BNB } from './components/BNB'; + export { default as ChatIllustration } from './components/Chat'; export { default as ChatDark } from './components/ChatDark'; @@ -32,3 +36,6 @@ export { default as Twitter } from './components/Twitter'; export { default as RewardsActivity } from './components/RewardsActivity'; export { default as PushLogo } from './components/PushLogo'; + +export { default as Polygon } from './components/Polygon'; +export { default as PolygonZK } from './components/PolygonZK'; diff --git a/src/blocks/index.ts b/src/blocks/index.ts index 391c79191b..2960f1bfac 100644 --- a/src/blocks/index.ts +++ b/src/blocks/index.ts @@ -12,6 +12,7 @@ export { Text, type TextProps } from './text'; export { Tooltip, type TooltipProps } from './tooltip'; export { TextArea, type TextAreaProps } from './textarea'; export { TextInput } from './textInput'; +export { Select } from './select'; export * from './Blocks.colors'; export * from './Blocks.types'; diff --git a/src/blocks/select/Select.tsx b/src/blocks/select/Select.tsx new file mode 100644 index 0000000000..80b98945e2 --- /dev/null +++ b/src/blocks/select/Select.tsx @@ -0,0 +1,212 @@ +import styled, { FlattenSimpleInterpolation, css } from 'styled-components'; +import { textVariants } from '../text'; +import { + Combobox, + ComboboxInput, + ComboboxPopover, + ComboboxList, + ComboboxOption, + ComboboxOptionText, +} from '@reach/combobox'; +import '@reach/combobox/styles.css'; +import { ArrowDown } from '../icons'; + +export type SelectOption = { + value: string; + label: string; + icon?: React.ReactNode; +}; + +export type SelectProps = { + options: SelectOption[]; + onSelect?: (value: string) => void; + selectedValue?: string; + css?: FlattenSimpleInterpolation; + description?: string; + disabled?: boolean; + error?: boolean; + errorMessage?: string; + label?: string; + placeholder?: string; + required?: boolean; + success?: boolean; +}; +const Container = styled.div<{ css?: FlattenSimpleInterpolation }>` + align-items: flex-start; + display: flex; + flex-direction: column; + flex: 1 0 0; + gap: var(--spacing-xxs, 8px); + + /* Custom CSS applied via styled component css prop */ + ${(props) => props.css || ''}; +`; + +const StyledBox = styled.div<{ + error?: boolean; + success?: boolean; + disabled?: boolean; +}>` + ${({ theme, success, error, disabled }) => { + const colors = theme?.blocksTheme?.colors; + const defaultState = error ? 'danger' : success ? 'success' : disabled ? 'disabled' : 'default'; + const focusState = error ? 'danger' : success ? 'success' : 'focus'; + + return css` + display: flex; + align-self: stretch; + align-items: center; + border-radius: var(--radius-xs, 12px); + border: 1.5px solid + var(--components-inputs-stroke-${defaultState}, ${colors[`components-inputs-stroke-${defaultState}`]}); + background: var( + --components-inputs-background-${defaultState}, + ${colors[`components-inputs-background-${defaultState}`]} + ); + padding: var(--spacing-xs, 12px); + &:hover { + border: 1.5px solid var(--components-inputs-stroke-hover, #c4cbd5); + } + + &:focus { + border: 1.5px solid + var(--components-inputs-stroke-${focusState}, ${colors[`components-inputs-stroke-${focusState}`]}); + outline: none; + } + + [data-reach-combobox-input] { + background-color: transparent; + border: none; + color: var(--components-inputs-text-default, ${colors['components-inputs-text-default']}); + + display: flex; + + font-family: var(--font-family); + font-size: ${textVariants['bs-regular'].fontSize}; + font-style: ${textVariants['bs-regular'].fontStyle}; + font-weight: ${textVariants['bs-regular'].fontWeight}; + line-height: ${textVariants['bs-regular'].lineHeight}; + + gap: var(--spacing-none, 0px); + + &:focus { + outline: none; + } + &:hover { + outline: none; + } + &:disabled { + background-color: transparent; + cursor: not-allowed; + color: var(--components-inputs-text-disabled, ${colors['components-inputs-text-disabled']}); + } + + ::placeholder { + color: var(--components-inputs-text-placeholder, ${colors['components-inputs-text-placeholder']}); + } + } + `; + }} +`; + +const StyledPopover = styled(ComboboxPopover)` + position: absolute; + padding: var(--spacing-xxs, 8px); + border-radius: var(--radius-xs, 12px); + border: var(--border-sm, 1px) solid var(--stroke-secondary, #eaebf2); + background: var(--surface-primary, #fff); +`; + +const StyledList = styled(ComboboxList)` + display: flex; + flex-direction: column; + gap: var(--spacing-xs, 12px); +`; +const StyledCombobox = styled(Combobox)` + position: relative; +`; +const StyledOption = styled(ComboboxOption)` + display: flex; + align-items: center; + padding: var(--spacing-xxxs, 4px); + gap: var(--spacing-xxs, 8px); + color: var(--components-dropdown-text-default, #17181b); + text-align: center; + font-family: var(--font-family); + white-space: nowrap; + font-size: ${textVariants['bs-regular'].fontSize}; + font-style: ${textVariants['bs-regular'].fontStyle}; + font-weight: ${textVariants['bs-regular'].fontWeight}; + line-height: ${textVariants['bs-regular'].lineHeight}; + &:hover { + border-radius: var(--radius-xxs, 8px); + background: var(--surface-secondary, #f5f6f8); + } + [role:img] { + width: 24px; + height: 24px; + } +`; + +const Select: React.FC = ({ + options, + onSelect, + css, + selectedValue, + placeholder = '', + error, + success, + disabled, +}) => { + // check if there is other way to get value + const selectedOption = options.find((option) => option.value === selectedValue); + console.debug(selectedOption, 'option'); + return ( + + {/* label will be added here */} + + onSelect?.(value)} + > + + {/* icon not working */} + {/* {selectedOption?.icon} */} + + + + + + + {options.map((option) => ( + + {option?.icon} + + ))} + + + + {/* description and error message will be added here */} + + ); +}; + +Select.displayName = 'Select'; + +export { Select }; diff --git a/src/blocks/select/index.tsx b/src/blocks/select/index.tsx new file mode 100644 index 0000000000..7868ecbae2 --- /dev/null +++ b/src/blocks/select/index.tsx @@ -0,0 +1 @@ +export * from './Select'; diff --git a/src/blocks/textInput/TextInput.tsx b/src/blocks/textInput/TextInput.tsx index 33a259eb44..1c4927817a 100644 --- a/src/blocks/textInput/TextInput.tsx +++ b/src/blocks/textInput/TextInput.tsx @@ -80,7 +80,8 @@ const StyledTextInput = styled.div` flex: 1; border: none; background-color: transparent; - padding: var(--s3) var(--s0); + height: 44px; + // padding: var(--s3) var(--s0); margin-left: var(--s1); &:focus { outline: none; diff --git a/src/blocks/textarea/TextArea.tsx b/src/blocks/textarea/TextArea.tsx index 501ef1079d..871896ec1d 100644 --- a/src/blocks/textarea/TextArea.tsx +++ b/src/blocks/textarea/TextArea.tsx @@ -1,5 +1,6 @@ import { Asterisk } from 'blocks/icons'; import { Text } from 'blocks/text/Text'; +import { textVariants } from '../text'; import React, { forwardRef } from 'react'; import styled, { FlattenSimpleInterpolation, css } from 'styled-components'; @@ -56,14 +57,12 @@ const StyledTextArea = styled.textarea<{ display: flex; font-family: var(--font-family); - font-size: 14px; - font-style: normal; - font-weight: 400; - + font-size: ${textVariants['bs-regular'].fontSize}; + font-style: ${textVariants['bs-regular'].fontStyle}; + font-weight: ${textVariants['bs-regular'].fontWeight}; + line-height: ${textVariants['bs-regular'].lineHeight}; gap: var(--spacing-none, 0px); - line-height: 20px; - padding: var(--spacing-xs, 12px); ::placeholder { color: var(--components-inputs-text-placeholder, ${colors['components-inputs-text-placeholder']}); diff --git a/src/modules/addNewChain/AddNewChain.constants.tsx b/src/modules/addNewChain/AddNewChain.constants.tsx index 88a0f7ab1e..3ed205e660 100644 --- a/src/modules/addNewChain/AddNewChain.constants.tsx +++ b/src/modules/addNewChain/AddNewChain.constants.tsx @@ -5,3 +5,22 @@ export const addNewChainSteps: AddNewChainStepsType = [ { label: 'Change Network' }, { label: 'Verify Alias Chain' }, ]; + +export const chainLabels: { [key: number]: string } = { + 1: 'Ethereum', + 11155111: 'Ethereum Testnet', + 137: 'Polygon', + 80002: 'Polygon Testnet', + 97: 'BNB Testnet', + 56: 'BNB', + 42161: 'Arbitrum', + 421614: 'Arbitrum Testnet', + 11155420: 'Optimisim Testnet', + 10: 'Optimisim', + 2442: 'PolygonZK', + 1101: 'PolygonZK Mainnet', + 111557560: 'Cyber', + 7560: 'Cyber Testnet', + 122: 'Fuse', + 123: 'Fuse Testnet', +}; diff --git a/src/modules/addNewChain/components/ChangeNetwork.tsx b/src/modules/addNewChain/components/ChangeNetwork.tsx index ac11c87b4b..79afeeeb94 100644 --- a/src/modules/addNewChain/components/ChangeNetwork.tsx +++ b/src/modules/addNewChain/components/ChangeNetwork.tsx @@ -26,7 +26,12 @@ const ChangeNetwork: FC = ({ handleNextStep, alias }) => { gap="s10" alignItems="center" > - Switch to the desired chain in your wallet to add it to your channel. + + Switch to the desired chain in your wallet to add it to your channel. + ); diff --git a/src/modules/addNewChain/components/NewAddress.tsx b/src/modules/addNewChain/components/NewAddress.tsx index 1aab4245ee..e91b33a698 100644 --- a/src/modules/addNewChain/components/NewAddress.tsx +++ b/src/modules/addNewChain/components/NewAddress.tsx @@ -1,4 +1,4 @@ -import { FC } from 'react'; +import { FC, useState } from 'react'; import { useSelector } from 'react-redux'; import { MdError } from 'react-icons/md'; @@ -9,13 +9,15 @@ import useToast from 'hooks/useToast'; import { useInitiateNewChain } from 'queries'; // Components -import { Box, Button, TextInput } from 'blocks'; +import { BNB, Box, Button, Polygon, Select, TextInput } from 'blocks'; import { isValidAddress } from 'helpers/ValidationHelper'; import { convertAddressToAddrCaip } from 'helpers/CaipHelper'; import { NewChainAddressValue } from '../AddNewChain.types'; import { UserStoreType } from 'types'; +import { LOGO_ALIAS_CHAIN } from 'modules/dashboard/configs'; +import { chainLabels } from '../AddNewChain.constants'; export type NewAddressProps = { setAddress: React.Dispatch>; @@ -23,6 +25,7 @@ export type NewAddressProps = { }; const NewAddress: FC = ({ setAddress, handleNextStep }) => { + const [selectedChainValue, setSelectedChainValue] = useState('80002'); const { userPushSDKInstance } = useSelector((state: UserStoreType) => { return state.user; }); @@ -31,6 +34,19 @@ const NewAddress: FC = ({ setAddress, handleNextStep }) => { const { mutate: initiateNewChain, isPending, isError } = useInitiateNewChain(); + //optimise this + const selectOptions = Object.keys(LOGO_ALIAS_CHAIN).map((key) => { + const chainId = parseInt(key, 10); + const Component = LOGO_ALIAS_CHAIN[chainId]; + return { + value: key, + label: chainLabels[chainId], + icon: , + }; + }); + + console.debug(selectOptions, 'chain'); + const validationSchema = yup.object().shape({ alias: yup .string() @@ -92,6 +108,7 @@ const NewAddress: FC = ({ setAddress, handleNextStep }) => { alignItems="center" gap="s3" width="100%" + justifyContent="center" > = ({ setAddress, handleNextStep }) => { error={formik.touched.alias && Boolean(formik.errors.alias)} errorMessage={formik.touched.alias ? formik.errors.alias : ''} /> +