Skip to content

Commit

Permalink
chore: add ticker to nfs
Browse files Browse the repository at this point in the history
  • Loading branch information
@kalashshah
kalashshah committed Oct 18, 2023
1 parent a0cbffe commit e8b93aa
Show file tree
Hide file tree
Showing 8 changed files with 172 additions and 12 deletions.
2 changes: 1 addition & 1 deletion src/components/SendNotifications.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -907,7 +907,7 @@ function SendNotifications() {
x={nfSliderValue}
axis="x"
onChange={({ x }) => setNfSliderValue(x)}
xstep={1}
xstep={channelSettings[nfSettingType - 1]?.ticker || 1}
xmin={channelSettings[nfSettingType - 1]?.lowerLimit}
xmax={channelSettings[nfSettingType - 1]?.upperLimit}
/>
Expand Down
141 changes: 138 additions & 3 deletions src/components/channel/AddSettingModalContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import React, { useState } from 'react';
import styled, { useTheme } from 'styled-components';
import { useClickAway } from 'react-use';
import { MdClose } from 'react-icons/md';
import Slider from 'react-input-slider';

// Internal Components
import ModalConfirmButton from 'primaries/SharedModalComponents/ModalConfirmButton';
Expand Down Expand Up @@ -81,7 +82,12 @@ const AddSettingModalContent = ({
const [defaultValue, setDefaultValue] = useState<string>(
settingToEdit && settingToEdit.type === 2 ? settingToEdit.default.toString() : ''
);
const [sliderStep, setSliderStep] = useState<string>(
settingToEdit && settingToEdit.type === 2 && settingToEdit.ticker ? settingToEdit.ticker.toString() : '1'
);
const [sliderPreviewVal, setSliderPreviewVal] = useState<number>();
const [errorInfo, setErrorInfo] = useState<any>();
const previewSliderRef = React.useRef<HTMLDivElement>(null);

const theme = useTheme();

Expand All @@ -101,6 +107,7 @@ const AddSettingModalContent = ({
lowerLimit,
type: isRange ? 2 : 1,
upperLimit,
sliderStep,
})
) {
const index = settingToEdit ? settingToEdit.index : Math.floor(Math.random() * 1000000);
Expand All @@ -113,6 +120,7 @@ const AddSettingModalContent = ({
index: index,
lowerLimit: Number(lowerLimit),
upperLimit: Number(upperLimit),
ticker: Number(sliderStep),
}
: {
type: 1,
Expand All @@ -126,6 +134,8 @@ const AddSettingModalContent = ({
setIsLoading(false);
};

console.log('typeof Number(sliderPreviewVal) === number', typeof Number(sliderPreviewVal));

return (
<ModalContainer ref={containerRef}>
<FormSubmision onSubmit={onConfirm}>
Expand Down Expand Up @@ -254,17 +264,17 @@ const AddSettingModalContent = ({
</Item>
<Item
direction="column"
align="flex-start"
align="stretch"
flex="1"
self="stretch"
margin="12px 0px"
>
<Label>Default Value</Label>
<MaxWidthInput
<InputWithError
padding="13px 16px"
weight="400"
type="number"
placeholder="e.g. 0"
placeholder="e.g. 5"
size="15px"
resize="none"
overflow="hidden"
Expand All @@ -285,6 +295,91 @@ const AddSettingModalContent = ({
/>
<ErrorInfo>{errorInfo?.default}</ErrorInfo>
</Item>
<Item
direction="column"
align="stretch"
flex="1"
self="stretch"
margin="12px 0px"
>
<Label>Slider Step Value</Label>
<InputWithError
padding="13px 16px"
weight="400"
type="number"
placeholder="e.g. 1"
size="15px"
resize="none"
overflow="hidden"
line-height="19.5px"
margin="8px 0px 0px 0px"
border={theme.textAreaBorderColor}
focusBorder={theme.textAreaFocusBorder}
radius="12px"
bg={theme.editChannelInputbg}
color={theme.editChannelPrimaryText}
value={sliderStep}
onChange={(e) => {
setSliderStep(e.target.value);
setErrorInfo((prev) => ({ ...prev, sliderStep: undefined }));
setSliderPreviewVal(lowerLimit === '' ? 0 : Number(lowerLimit));
}}
autocomplete="off"
hasError={errorInfo?.sliderStep ? true : false}
/>
<ErrorInfo>{errorInfo?.sliderStep}</ErrorInfo>
</Item>
{(lowerLimit !== '' || upperLimit !== '') && (
<Item
direction="column"
align="flex-start"
flex="1"
self="stretch"
margin="12px 0px"
>
<LabelLight>Preview</LabelLight>
<SliderPreviewContainer>
<Label>{lowerLimit}</Label>
<SliderContainer>
<Slider
onDragStart={() => previewSliderRef.current?.style.setProperty('display', 'flex')}
onDragEnd={() => previewSliderRef.current?.style.setProperty('display', 'none')}
axis="x"
styles={{
active: {
backgroundColor: theme.sliderActiveColor,
},
track: {
height: 4,
flex: 1,
backgroundColor: theme.sliderTrackColor,
},
thumb: {
width: 16,
height: 16,
},
}}
xstep={Number(sliderStep)}
xmin={Number(lowerLimit)}
xmax={Number(upperLimit)}
x={sliderPreviewVal}
onChange={({ x }) => {
setSliderPreviewVal(x);
previewSliderRef.current?.style.setProperty(
'left',
`${(x / (Number(upperLimit) - Number(lowerLimit))) * 90}%`
);
}}
disabled={lowerLimit === '' || upperLimit === '' || sliderStep === ''}
/>
{!Number.isNaN(Number(sliderPreviewVal)) && (
<PreviewContainer ref={previewSliderRef}>{sliderPreviewVal}</PreviewContainer>
)}
</SliderContainer>
<Label>{upperLimit}</Label>
</SliderPreviewContainer>
</Item>
)}
</>
)}
<ModalConfirmButton
Expand Down Expand Up @@ -340,6 +435,10 @@ const Label = styled.div<{ padding?: string }>`
padding: ${(props) => props.padding || '0px'};
`;

const LabelLight = styled(Label)`
color: ${(props) => props.theme.default.secondaryColor};
`;

const Description = styled.div`
font-size: 12px;
font-weight: 400;
Expand Down Expand Up @@ -372,4 +471,40 @@ const ErrorInfo = styled.span`
margin-top: 4px;
`;

const SliderPreviewContainer = styled.div`
display: flex;
padding: 12px;
gap: 12px;
margin-top: 8px;
flex-direction: row;
justify-content: space-between;
align-items: center;
align-self: stretch;
border-radius: 8px;
background: rgba(182, 188, 214, 0.12);
`;

const PreviewContainer = styled.div`
display: none;
position: absolute;
bottom: -48px;
border-radius: 4px;
border: 1px solid ${(props) => props.theme.default.border};
background: ${(props) => props.theme.default.bg};
color: ${(props) => props.theme.default.color};
width: max-content;
padding: 8px;
justify-content: center;
align-items: center;
gap: 10px;
`;

const SliderContainer = styled.div`
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
position: relative;
`;

export default AddSettingModalContent;
4 changes: 2 additions & 2 deletions src/components/channel/ChannelInfoList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ const ChannelInfoList = (props: ChannelInfoListProps) => {
) : (
<>
<NotificationSettingName>{item.description}</NotificationSettingName>
{item.lowerLimit !== undefined && <Tag>Range</Tag>}
{item.type === 2 && <Tag>Range</Tag>}
</>
)}
{props.isAddress && isOwner(props.account, item) && <Tag>Creator</Tag>}
Expand Down Expand Up @@ -134,7 +134,7 @@ const DelegatesList = styled.div<{ isLoading: boolean }>`
@media ${device.tablet} {
flex: 0;
padding: ${(props) => (props.isLoading ? '0px' : '0px 16px 10px')};
padding: ${(props) => (props.isLoading ? '0px' : '0px 0px 10px')};
}
`;

Expand Down
5 changes: 3 additions & 2 deletions src/components/channel/NotificationSettings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ function NotificationSettings() {
} else if (setting.type === 2) {
_notifSettings += `${setting.type}-${setting.enabled ? '1' : '0'}-${setting.default}-${setting.lowerLimit}-${
setting.upperLimit
}`;
}-${setting.ticker}`;
}
_notifDescription += setting.description;
});
Expand Down Expand Up @@ -225,7 +225,8 @@ function NotificationSettings() {
setting1.default === setting2.default &&
setting1.enabled === setting2.enabled &&
setting1.lowerLimit === setting2.lowerLimit &&
setting1.upperLimit === setting2.upperLimit;
setting1.upperLimit === setting2.upperLimit &&
setting1.ticker === setting2.ticker;
}
}
return isUnchanged === false;
Expand Down
2 changes: 1 addition & 1 deletion src/components/dropdowns/OptinNotifSettingDropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ const OptinNotifSettingDropdownContainer: React.FC<OptinNotifSettingDropdownCont
axis="x"
x={setting.default}
onChange={({ x }) => handleSliderChange(index, x)}
xstep={1}
xstep={setting.ticker || 1}
xmin={setting.lowerLimit}
xmax={setting.upperLimit}
/>
Expand Down
2 changes: 1 addition & 1 deletion src/components/dropdowns/UpdateNotifSettingDropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ const UpdateNotifSettingDropdownContainer: React.FC<UpdateNotifSettingDropdownCo
axis="x"
x={setting.user}
onChange={({ x }) => handleSliderChange(index, x)}
xstep={1}
xstep={setting.ticker || 1}
xmin={setting.lowerLimit}
xmax={setting.upperLimit}
/>
Expand Down
25 changes: 24 additions & 1 deletion src/helpers/channel/InputValidation.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export const isAllFilledAndValid = ({
type,
settingName,
defaultValue,
sliderStep,
}: {
setErrorInfo: React.Dispatch<
React.SetStateAction<{
Expand All @@ -22,6 +23,7 @@ export const isAllFilledAndValid = ({
>;
upperLimit: string;
lowerLimit: string;
sliderStep: string;
type: ChannelSetting['type'];
settingName: string;
defaultValue: string;
Expand Down Expand Up @@ -60,7 +62,14 @@ export const isAllFilledAndValid = ({
}));
hasError = true;
}
if (!isEmpty(lowerLimit) && !isEmpty(upperLimit) && !isEmpty(defaultValue)) {
if (isEmpty(sliderStep)) {
setErrorInfo((x) => ({
...x,
sliderStep: 'Slider step is required',
}));
hasError = true;
}
if (!isEmpty(lowerLimit) && !isEmpty(upperLimit) && !isEmpty(defaultValue) && !isEmpty(sliderStep)) {
if (Number(lowerLimit) < 0) {
setErrorInfo((x) => ({
...x,
Expand Down Expand Up @@ -89,6 +98,20 @@ export const isAllFilledAndValid = ({
}));
hasError = true;
}
if (Number(sliderStep) <= 0) {
setErrorInfo((x) => ({
...x,
sliderStep: 'Slider step should be greater than 0',
}));
hasError = true;
}
if (Number(sliderStep) > Number(upperLimit) - Number(lowerLimit)) {
setErrorInfo((x) => ({
...x,
sliderStep: 'Slider step should be less than range',
}));
hasError = true;
}
}
}
return !hasError;
Expand Down
3 changes: 2 additions & 1 deletion src/helpers/channel/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ export type ChannelSetting =
index: number;
lowerLimit: number;
upperLimit: number;
ticker: number;
};

export type UserSetting =
Expand All @@ -32,5 +33,5 @@ export type UserSetting =
lowerLimit: number;
upperLimit: number;
user: number;
ticker: number;
};

0 comments on commit e8b93aa

Please sign in to comment.