= ({ setUrl, url, setIsUploading }) => {
alt='image'
/>
- {`Drag & drop an image here or`}{' '}
+ Drag & drop an image here or{' '}
Upload from device.
@@ -102,7 +106,7 @@ const ImageUploader: FC = ({ setUrl, url, setIsUploading }) => {
)}
-
+
)}
@@ -116,11 +120,8 @@ const ShowingImage = styled.div`
}
`;
-const DropZone = styled.div`
- display: flex;
+const DropZone = styled(FlexCenter)`
flex-direction: column;
- align-items: center;
- justify-content: center;
border: 1px dotted ${neutralColors.gray[400]};
margin: 24px 0 16px 0;
padding: 64px 20px;
@@ -160,7 +161,7 @@ const move = keyframes`
}
`;
-const UplaodBar = styled.div<{ uploading: boolean }>`
+const UploadBar = styled.div<{ uploading?: boolean }>`
width: 100%;
height: 4px;
border-radius: 2px;
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
index 7b1e5249bb..53797919fc 100644
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -1,26 +1,28 @@
import {
- brandColors,
- neutralColors,
GLink,
+ neutralColors,
semanticColors,
+ SublineBold,
} from '@giveth/ui-design-system';
-import { InputHTMLAttributes } from 'react';
+import React, { FC, InputHTMLAttributes, ReactElement, useId } from 'react';
import styled from 'styled-components';
+import { IIconProps } from '@giveth/ui-design-system/lib/esm/components/icons/giv-economy/type';
+import { EInputValidation, IInputValidation } from '@/types/inputValidation';
+import InputStyled from './styled-components/Input';
+import LottieControl from '@/components/animations/lottieControl';
+import LoadingAnimation from '@/animations/loading_giv_600.json';
+import { FlexCenter } from '@/components/styled-components/Flex';
import type {
+ DeepRequired,
FieldError,
+ FieldErrorsImpl,
+ Merge,
RegisterOptions,
UseFormRegister,
} from 'react-hook-form';
export interface IFormValidations {
- [key: string]: InputValidationType;
-}
-
-export enum InputValidationType {
- NORMAL,
- WARNING,
- ERROR,
- SUCCESS,
+ [key: string]: EInputValidation;
}
export enum InputSize {
@@ -29,17 +31,26 @@ export enum InputSize {
LARGE,
}
+interface IInputLabelProps {
+ required?: boolean;
+ disabled?: boolean;
+}
interface IInput extends InputHTMLAttributes {
label?: string;
caption?: string;
+ isValidating?: boolean;
size?: InputSize;
- error?: FieldError;
+ LeftIcon?: ReactElement;
}
interface IInputWithRegister extends IInput {
register: UseFormRegister;
registerName: string;
registerOptions?: RegisterOptions;
+ error?:
+ | FieldError
+ | undefined
+ | Merge>>>;
}
const InputSizeToLinkSize = (size: InputSize) => {
@@ -61,47 +72,79 @@ type InputType =
registerName?: never;
register?: never;
registerOptions?: never;
+ error?: never;
} & IInput);
-const Input = (props: InputType) => {
+const Input: FC = props => {
const {
label,
caption,
size = InputSize.MEDIUM,
+ disabled,
+ LeftIcon,
register,
registerName,
registerOptions = { required: false },
error,
+ maxLength,
+ value,
+ isValidating,
...rest
} = props;
- const validationStatus = error
- ? InputValidationType.ERROR
- : InputValidationType.NORMAL;
+ const id = useId();
+ const validationStatus =
+ !error || isValidating
+ ? EInputValidation.NORMAL
+ : EInputValidation.ERROR;
return (
{label && (
-
- {label}
-
+
)}
-
+
+ {LeftIcon && LeftIcon}
+
+
+ {isValidating && (
+
+ )}
+ {maxLength && (
+
+ {value ? String(value)?.length : 0}/{maxLength}
+
+ )}
+
+
{error?.message ? (
- {error?.message}
+ {error.message as string}
) : (
@@ -112,14 +155,35 @@ const Input = (props: InputType) => {
);
};
+const Absolute = styled(FlexCenter)`
+ position: absolute;
+ right: 10px;
+ top: 0;
+ bottom: 0;
+`;
+
+const CharLength = styled(SublineBold)`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 12px;
+ background: ${neutralColors.gray[300]};
+ color: ${neutralColors.gray[700]};
+ font-weight: 500;
+ border-radius: 64px;
+ width: 52px;
+ height: 30px;
+ margin-right: 6px;
+`;
+
const InputContainer = styled.div`
flex: 1;
`;
-const InputLabel = styled(GLink)<{ required?: boolean }>`
- text-transform: uppercase;
+const InputLabel = styled(GLink)`
padding-bottom: 4px;
- color: ${brandColors.deep[500]};
+ color: ${props =>
+ props.disabled ? neutralColors.gray[600] : neutralColors.gray[900]};
::after {
content: '*';
display: ${props => (props.required ? 'inline-block' : 'none')};
@@ -128,117 +192,46 @@ const InputLabel = styled(GLink)<{ required?: boolean }>`
}
`;
-interface IValidation {
- validation: InputValidationType;
-}
-
-interface IInputField extends IValidation {
- inputSize: InputSize;
-}
-
-const InputField = styled.input`
- width: 100%;
- height: ${props => {
- switch (props.inputSize) {
- case InputSize.SMALL:
- return '32px';
- case InputSize.MEDIUM:
- return '54px';
- case InputSize.LARGE:
- return '56px';
- default:
- break;
- }
- }};
- border: 2px solid
- ${props => {
- switch (props.validation) {
- case InputValidationType.NORMAL:
- return neutralColors.gray[300];
- case InputValidationType.WARNING:
- return semanticColors.golden[600];
- case InputValidationType.ERROR:
- return semanticColors.punch[500];
- case InputValidationType.SUCCESS:
- return semanticColors.jade[500];
- default:
- return neutralColors.gray[300];
- }
- }};
- border-radius: 8px;
- padding: ${props => {
- switch (props.inputSize) {
- case InputSize.SMALL:
- return '8px';
- case InputSize.MEDIUM:
- return '15px 16px';
- case InputSize.LARGE:
- return '18px 16px';
- default:
- break;
- }
- }};
- font-size: ${props => {
- switch (props.inputSize) {
- case InputSize.SMALL:
- return '12px';
- case InputSize.MEDIUM:
- return '16px';
- case InputSize.LARGE:
- return '16px';
- default:
- break;
- }
- }};
- line-height: 150%;
- /* font-weight: 500; */
- font-family: 'Red Hat Text';
- caret-color: ${brandColors.giv[300]};
- :focus {
- border: 2px solid
- ${props => {
- switch (props.validation) {
- case InputValidationType.NORMAL:
- return neutralColors.gray[500];
- case InputValidationType.WARNING:
- return semanticColors.golden[700];
- case InputValidationType.ERROR:
- return semanticColors.punch[700];
- case InputValidationType.SUCCESS:
- return semanticColors.jade[700];
- default:
- return neutralColors.gray[500];
- }
- }};
- }
- ::placeholder {
- color: ${neutralColors.gray[500]};
- }
-`;
-
const InputDesc = styled(GLink)`
padding-top: 4px;
- color: ${brandColors.deep[500]};
+ color: ${neutralColors.gray[900]};
display: block;
`;
-const InputValidation = styled(GLink)`
+const InputValidation = styled(GLink)`
padding-top: 4px;
display: block;
color: ${props => {
switch (props.validation) {
- case InputValidationType.NORMAL:
+ case EInputValidation.NORMAL:
return neutralColors.gray[900];
- case InputValidationType.WARNING:
+ case EInputValidation.WARNING:
return semanticColors.golden[600];
- case InputValidationType.ERROR:
+ case EInputValidation.ERROR:
return semanticColors.punch[500];
- case InputValidationType.SUCCESS:
+ case EInputValidation.SUCCESS:
return semanticColors.jade[500];
default:
return neutralColors.gray[300];
}
- }}; ;
+ }};
+`;
+
+const InputWrapper = styled.div`
+ position: relative;
+ display: flex;
+ > svg {
+ position: absolute;
+ transform: translateY(-50%);
+ padding-left: 20px;
+ padding-right: 8px;
+ border-right: 1px solid ${neutralColors.gray[400]};
+ width: 52px;
+ height: 23px;
+ top: 50%;
+ left: 0;
+ overflow: hidden;
+ }
`;
export default Input;
diff --git a/src/components/views/project/NotAvailableProject.tsx b/src/components/NotAvailableProject.tsx
similarity index 91%
rename from src/components/views/project/NotAvailableProject.tsx
rename to src/components/NotAvailableProject.tsx
index 0449bc0794..cfc29b5531 100644
--- a/src/components/views/project/NotAvailableProject.tsx
+++ b/src/components/NotAvailableProject.tsx
@@ -18,7 +18,9 @@ const NotAvailableProject = () => {
height={112}
alt='missing-project-image'
/>
- Oops! This project is no longer available!
+
+ Oops! This project is no longer available or not found!
+
);
diff --git a/src/components/views/donate/RadioTitle.tsx b/src/components/RadioButton.tsx
similarity index 58%
rename from src/components/views/donate/RadioTitle.tsx
rename to src/components/RadioButton.tsx
index d538531ac7..905ddabf7a 100644
--- a/src/components/views/donate/RadioTitle.tsx
+++ b/src/components/RadioButton.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FC } from 'react';
import Image from 'next/image';
import styled from 'styled-components';
import {
@@ -8,53 +8,61 @@ import {
Subline,
} from '@giveth/ui-design-system';
import { ETheme } from '@/features/general/general.slice';
-
-import RadioOnIcon from '../../../../public/images/radio_on.svg';
-import RadioOffIcon from '../../../../public/images/radio_off.svg';
import { useAppSelector } from '@/features/hooks';
+import RadioOnIcon from '/public/images/radio_on.svg';
+import RadioOffIcon from '/public/images/radio_off.svg';
-const RadioTitle = (props: {
+interface IProps {
+ isSelected: boolean;
title: string;
subtitle?: string;
- isSelected: boolean;
toggleRadio: () => void;
+}
+
+const RadioButton: FC = ({
+ title,
+ subtitle,
+ isSelected,
+ toggleRadio,
}) => {
- const { title, subtitle, isSelected, toggleRadio } = props;
const theme = useAppSelector(state => state.general.theme);
return (
-
+
-
{title}
-
-
+
+
{subtitle}
-
+
-
+
);
};
-const RadioTitleBox = styled.div`
+const Container = styled.div`
display: flex;
cursor: pointer;
margin-bottom: 10px;
+ > :first-child {
+ flex-shrink: 0;
+ }
> :last-child {
margin-left: 16px;
}
`;
-const RadioTitleText = styled(Lead)`
- color: ${(props: { isSelected: boolean; isDark: boolean }) =>
+const RadioTitle = styled(Lead)<{ isDark: boolean; isSelected: boolean }>`
+ color: ${props =>
props.isSelected
? props.isDark
? 'white'
@@ -62,9 +70,9 @@ const RadioTitleText = styled(Lead)`
: neutralColors.gray[600]};
`;
-const RadioSubtitleText = styled(Subline)`
- color: ${(props: { isSelected: boolean }) =>
+const RadioSubtitle = styled(Subline)<{ isSelected: boolean }>`
+ color: ${props =>
props.isSelected ? brandColors.deep[900] : neutralColors.gray[600]};
`;
-export default RadioTitle;
+export default RadioButton;
diff --git a/src/components/RichTextInput.tsx b/src/components/RichTextInput.tsx
index 690b97192f..0cd731fa72 100644
--- a/src/components/RichTextInput.tsx
+++ b/src/components/RichTextInput.tsx
@@ -15,7 +15,7 @@ import { captureException } from '@sentry/nextjs';
import ImageUploader from './richImageUploader/imageUploader';
import { UPLOAD_IMAGE } from '@/apollo/gql/gqlProjects';
import { client } from '@/apollo/apolloClient';
-import { showToastError } from '@/lib/helpers';
+import { isSSRMode, showToastError } from '@/lib/helpers';
(window as any).Quill = Quill;
@@ -42,7 +42,7 @@ class Video extends BlockEmbed {
}
static formats(domNode: any) {
- if (typeof window === 'undefined') {
+ if (isSSRMode) {
return;
}
const iframe = domNode?.getElementsByTagName('iframe')[0];
@@ -188,6 +188,9 @@ function TextRichWithQuill(props: any) {
const ReactQuillStyled = styled(ReactQuill)`
> .ql-container {
height: 30rem;
+ > .ql-editor {
+ word-break: break-word;
+ }
}
`;
diff --git a/src/components/RichTextViewer.tsx b/src/components/RichTextViewer.tsx
index 4e82d4f427..7299d31131 100644
--- a/src/components/RichTextViewer.tsx
+++ b/src/components/RichTextViewer.tsx
@@ -22,6 +22,10 @@ const Wrapper = styled.div`
}
}
+ .ql-container > .ql-editor {
+ word-break: break-word;
+ }
+
${mediaQueries.tablet} {
padding: 0 16px;
}
diff --git a/src/components/Spinner.tsx b/src/components/Spinner.tsx
new file mode 100644
index 0000000000..bba204b9fd
--- /dev/null
+++ b/src/components/Spinner.tsx
@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+import LottieControl from '@/components/animations/lottieControl';
+import { FlexCenter } from '@/components/styled-components/Flex';
+import LoadingAnimation from '@/animations/loading_giv.json';
+
+export default function Spinner() {
+ return (
+
+
+
+ );
+}
+
+const Container = styled(FlexCenter)`
+ min-height: 700px;
+`;
diff --git a/src/components/VerificationBadge.tsx b/src/components/VerificationBadge.tsx
new file mode 100644
index 0000000000..4d89c777a6
--- /dev/null
+++ b/src/components/VerificationBadge.tsx
@@ -0,0 +1,32 @@
+import { FC } from 'react';
+import { semanticColors } from '@giveth/ui-design-system';
+import { EVerificationStatus } from '@/apollo/types/types';
+import { Badge } from './styled-components/Badge';
+
+interface IProps {
+ status?: EVerificationStatus;
+ simplified?: boolean;
+}
+
+const VerificationBadge: FC = ({ status, simplified }) => {
+ if (!status || status === EVerificationStatus.DRAFT) return null;
+ let title, color;
+ switch (status) {
+ case EVerificationStatus.REJECTED:
+ title = simplified ? 'Rejected' : 'Verification rejected';
+ color = semanticColors.punch;
+ break;
+ case EVerificationStatus.SUBMITTED:
+ title = simplified ? 'Request sent' : 'Verification request sent';
+ color = semanticColors.golden;
+ break;
+ case EVerificationStatus.VERIFIED:
+ title = 'Verified';
+ color = semanticColors.jade;
+ break;
+ }
+
+ return {title};
+};
+
+export default VerificationBadge;
diff --git a/src/components/badges/VerificationBadge.tsx b/src/components/badges/VerificationBadge.tsx
index c40599db7e..657e301e04 100644
--- a/src/components/badges/VerificationBadge.tsx
+++ b/src/components/badges/VerificationBadge.tsx
@@ -3,7 +3,7 @@ import { IconVerified, Overline } from '@giveth/ui-design-system';
import styled from 'styled-components';
import { FlexCenter } from '../styled-components/Flex';
-import TraceIcon from '/public//images/trace.svg';
+import TraceIcon from '/public/images/trace.svg';
const VerificationBadge = (props: { verified?: boolean; trace?: boolean }) => {
const { verified, trace } = props;
diff --git a/src/components/badges/WarningBadge.tsx b/src/components/badges/WarningBadge.tsx
deleted file mode 100644
index 2ad4bc591d..0000000000
--- a/src/components/badges/WarningBadge.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import Image from 'next/image';
-import WarningIcon from '../../../public/images/icons/warning_filled.svg';
-
-const WarningBadge = () => {
- return ;
-};
-
-export default WarningBadge;
diff --git a/src/components/cards/BaseStakingCard.tsx b/src/components/cards/BaseStakingCard.tsx
index 1d02439cbd..002f15c9e3 100644
--- a/src/components/cards/BaseStakingCard.tsx
+++ b/src/components/cards/BaseStakingCard.tsx
@@ -72,8 +72,8 @@ import { Flex } from '../styled-components/Flex';
import { IStakeInfo } from '@/hooks/useStakingPool';
import { TokenDistroHelper } from '@/lib/contractHelper/TokenDistroHelper';
import { useAppSelector } from '@/features/hooks';
-import { SubgraphDataHelper } from '@/lib/subgraph/subgraphDataHelper';
import Routes from '@/lib/constants/Routes';
+import { SubgraphDataHelper } from '@/lib/subgraph/subgraphDataHelper';
import { IconAngelVault } from '../Icons/AngelVault';
import type { LiquidityPosition } from '@/types/nfts';
diff --git a/src/components/controller/modal.ctrl.tsx b/src/components/controller/modal.ctrl.tsx
index d42fd6d4b0..dddd03ca01 100644
--- a/src/components/controller/modal.ctrl.tsx
+++ b/src/components/controller/modal.ctrl.tsx
@@ -38,10 +38,10 @@ const ModalController = () => {
}, [isRegistered]);
useEffect(() => {
- if (showWelcomeModal) {
+ if (showWelcomeModal && active) {
dispatch(setShowWelcomeModal(false));
}
- }, [active]);
+ }, [active, showWelcomeModal]);
useEffect(() => {
if (isSignedIn && showSignWithWallet) {
diff --git a/src/components/controller/user.ctrl.tsx b/src/components/controller/user.ctrl.tsx
index 5d52f6ca83..c2384d21aa 100644
--- a/src/components/controller/user.ctrl.tsx
+++ b/src/components/controller/user.ctrl.tsx
@@ -1,5 +1,5 @@
import { useWeb3React } from '@web3-react/core';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
import { formatEther } from '@ethersproject/units';
import { captureException } from '@sentry/nextjs';
import { InjectedConnector } from '@web3-react/injected-connector';
@@ -18,6 +18,8 @@ import { walletsArray } from '@/lib/wallet/walletTypes';
const UserController = () => {
const { account, library, chainId, activate } = useWeb3React();
const dispatch = useAppDispatch();
+ //TODO: Remove this state before merfing verification-develop-branch to DEVELOP
+ const [isActivatedCalled, setIsActivatedCalled] = useState(false);
const token = !isSSRMode ? localStorage.getItem(StorageLabel.TOKEN) : null;
useEffect(() => {
@@ -26,11 +28,13 @@ const UserController = () => {
if (wallet && wallet.connector instanceof InjectedConnector) {
wallet.connector.isAuthorized().then(isAuthorized => {
if (isAuthorized) {
- activate(wallet.connector, console.log).then();
+ activate(wallet.connector, console.log).then(() =>
+ setIsActivatedCalled(true),
+ );
}
});
}
- }, [activate]);
+ }, [activate, isActivatedCalled]);
useEffect(() => {
if (account) dispatch(fetchUserByAddress(account));
diff --git a/src/components/homeTabs/GIVfarm.tsx b/src/components/homeTabs/GIVfarm.tsx
index 519a93fee6..b97718afa6 100644
--- a/src/components/homeTabs/GIVfarm.tsx
+++ b/src/components/homeTabs/GIVfarm.tsx
@@ -27,7 +27,7 @@ import {
GIVfarmBottomContainer,
ArchivedPoolsToggle,
} from './GIVfarm.sc';
-import RadioTitle from '@/components/views/donate/RadioTitle';
+import RadioButton from '@/components/RadioButton';
import { NetworkSelector } from '@/components/NetworkSelector';
import StakingPositionCard from '@/components/cards/StakingPositionCard';
import { getGivStakingConfig } from '@/helpers/networkProvider';
@@ -203,7 +203,7 @@ export const TabGIVfarmBottom = () => {
- setArchivedPools(!showArchivedPools)}
isSelected={showArchivedPools}
diff --git a/src/components/homeTabs/Overview.sc.tsx b/src/components/homeTabs/Overview.sc.tsx
index 973ac6beb3..1cde912cab 100644
--- a/src/components/homeTabs/Overview.sc.tsx
+++ b/src/components/homeTabs/Overview.sc.tsx
@@ -86,7 +86,7 @@ export const ClaimCard = styled.div`
bottom: -4px;
left: 0;
}
- @media ${device.laptop} {
+ @media ${device.laptopS} {
padding: 100px 50px 146px;
}
@media ${device.laptopL} {
@@ -144,7 +144,7 @@ export const VideoOverlay = styled.div<{ hidden: boolean }>`
export const ClaimRow = styled(Flex)`
gap: 8px;
- ${mediaQueries.laptop} {
+ ${mediaQueries.laptopS} {
gap: 32px;
}
`;
diff --git a/src/components/homeTabs/Overview.tsx b/src/components/homeTabs/Overview.tsx
index 28c8ea9d37..1f9d19972c 100644
--- a/src/components/homeTabs/Overview.tsx
+++ b/src/components/homeTabs/Overview.tsx
@@ -1,8 +1,6 @@
import Link from 'next/link';
import router from 'next/router';
import { Button, IconExternalLink, P } from '@giveth/ui-design-system';
-import { useRef, useState } from 'react';
-import Image from 'next/image';
import { useWeb3React } from '@web3-react/core';
import {
OverviewTopContainer,
@@ -19,8 +17,6 @@ import {
DataBlockWithMargin,
ClaimCardQuote,
DataBlockButton,
- VideoContainer,
- VideoOverlay,
ClaimRow,
} from './Overview.sc';
import { IconGIV } from '../Icons/GIV';
@@ -49,48 +45,6 @@ export const TabOverviewTop = () => {
);
};
-export const TabOverviewVideo = () => {
- const [isPlaying, setIsPlaying] = useState(false);
- const videoRef = useRef(null);
- function handleVideoClick() {
- const { current: video } = videoRef;
- if (video?.paused) {
- video?.play();
- setIsPlaying(true);
- } else {
- video?.pause();
- setIsPlaying(false);
- }
- }
- function handleVideoEnd() {
- const { current: video } = videoRef;
- video && (video.currentTime = 0);
- setIsPlaying(false);
- }
- return (
-
-
-
-
-
-
- );
-};
-
export const TabOverviewBottom = () => {
const { chainId } = useWeb3React();
diff --git a/src/components/homeTabs/TabOverviewVideo.tsx b/src/components/homeTabs/TabOverviewVideo.tsx
new file mode 100644
index 0000000000..60d6530f23
--- /dev/null
+++ b/src/components/homeTabs/TabOverviewVideo.tsx
@@ -0,0 +1,47 @@
+import { useState, useRef } from 'react';
+import Image from 'next/image';
+import { VideoContainer, VideoOverlay } from './Overview.sc';
+
+export const TabOverviewVideo = () => {
+ const [isPlaying, setIsPlaying] = useState(false);
+ const videoRef = useRef(null);
+ function handleVideoClick() {
+ const { current: video } = videoRef;
+ if (video?.paused) {
+ video?.play();
+ setIsPlaying(true);
+ } else {
+ video?.pause();
+ setIsPlaying(false);
+ }
+ }
+ function handleVideoEnd() {
+ const { current: video } = videoRef;
+ video && (video.currentTime = 0);
+ setIsPlaying(false);
+ }
+ return (
+
+
+
+
+
+
+ );
+};
+
+export default TabOverviewVideo;
diff --git a/src/components/map.tsx b/src/components/map.tsx
deleted file mode 100644
index 6156c48a2e..0000000000
--- a/src/components/map.tsx
+++ /dev/null
@@ -1,196 +0,0 @@
-import React, { Component } from 'react';
-import {
- withGoogleMap,
- GoogleMap,
- Marker,
- InfoWindow,
-} from 'react-google-maps';
-import PlacesAutocomplete, {
- geocodeByAddress,
- getLatLng,
-} from 'react-places-autocomplete';
-
-import { captureException } from '@sentry/nextjs';
-import { Regular_Input } from '@/components/styled-components/Input';
-import CheckBox from '@/components/Checkbox';
-import { globalLocation } from '@/lib/constants/projects';
-
-type MyProps = {
- index?: any;
- handleCloseCall?: any;
- extraComponent?: any;
- defaultLocation?: string;
- setLocation?: any;
-};
-type MyState = {
- isOpen: boolean;
- coords: any;
- address: string;
-};
-
-class Map extends Component {
- constructor(props: any) {
- super(props);
- this.state = {
- isOpen: false,
- coords: { lat: 41.3879, lng: 2.15899 },
- address: '',
- };
- }
-
- componentDidMount() {
- const { defaultLocation } = this.props;
- if (defaultLocation) {
- if (defaultLocation === globalLocation) {
- this.setState({ address: globalLocation });
- } else this.handleSelect(defaultLocation);
- }
- }
-
- handleSelect = (address: any) => {
- geocodeByAddress(address)
- .then((results: any) => {
- return getLatLng(results[0]);
- })
- .then((latLng: any) => {
- this.props.setLocation(address);
- this.setState({
- address,
- coords: latLng,
- });
- })
- .catch((error: any) => {
- console.error('Error: ', error);
- captureException(error, {
- tags: {
- section: 'Map',
- },
- });
- });
- };
-
- render() {
- const { coords, address, isOpen } = this.state;
- const { index, setLocation, handleCloseCall } = this.props;
- const isGlobal = address === globalLocation;
-
- const GoogleMapComponent = withGoogleMap(() => (
-
- this.setState({ isOpen: true })}
- >
- {isOpen && (
-
- {address}
-
- )}
-
-
- ));
-
- return (
-
-
this.setState({ address })}
- onSelect={this.handleSelect}
- >
- {({
- getInputProps,
- suggestions,
- getSuggestionItemProps,
- loading,
- }) => (
-
-
-
{
- const loc = isGlobal ? '' : globalLocation;
- setLocation(loc);
- this.setState({ address: loc });
- }}
- style={{ marginTop: '20px' }}
- />
-
- {loading &&
Loading...
}
- {suggestions.map((suggestion: any) => {
- const className = suggestion.active
- ? 'suggestion-item--active'
- : 'suggestion-item';
- // inline style for demonstration purpose
- const style = suggestion.active
- ? {
- backgroundColor: '#fafafa',
- cursor: 'pointer',
- padding: '4px 0',
- }
- : {
- backgroundColor: '#ffffff',
- cursor: 'pointer',
- padding: '4px 0',
- };
- return (
-
-
- {suggestion.description}
-
-
- );
- })}
-
-
}
- mapElement={
-
- }
- />
-
With a complete profile you can:
-
- Create projects and receive funds.
-
-
- Better communicate with the community.
-
-
- Let others know you a little better.
-
+ Create projects and receive funds.
+ Better communicate with the community.
+ Let others know you a little better.
= ({ setShowModal }) => {
/>
setShowModal(false)}
+ onClick={closeModal}
buttonType='primary'
/>
@@ -60,20 +52,11 @@ export const CompleteProfileModal: FC = ({ setShowModal }) => {
);
};
-const Bullets = styled.ul`
- padding-left: 17px;
- list-style-image: url('/images/bullet_tiny.svg');
- margin-bottom: 30px;
- li {
- margin: 10px 0;
- color: ${neutralColors.gray[900]};
- }
-`;
-
-const Container = styled.div`
+const Container = styled(Lead)`
max-width: 528px;
padding: 24px;
text-align: left;
+ color: ${brandColors.deep[900]};
`;
const OkButton = styled(Button)`
@@ -94,11 +77,6 @@ const SkipButton = styled(Button)`
`;
const Title = styled(H5)`
- margin-top: 24px;
+ margin: 24px 0;
font-weight: 700;
`;
-
-const Description = styled(Lead)`
- margin-top: 24px;
- color: ${brandColors.deep[900]};
-`;
diff --git a/src/components/modals/DeactivateProjectModal.tsx b/src/components/modals/DeactivateProjectModal.tsx
deleted file mode 100644
index 4f6bbc9cd4..0000000000
--- a/src/components/modals/DeactivateProjectModal.tsx
+++ /dev/null
@@ -1,399 +0,0 @@
-import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
-import Image from 'next/image';
-import Select, { StylesConfig } from 'react-select';
-import styled from 'styled-components';
-import {
- brandColors,
- Button,
- GLink,
- Lead,
- neutralColors,
- semanticColors,
-} from '@giveth/ui-design-system';
-import { AnimatePresence, motion } from 'framer-motion';
-import Link from 'next/link';
-import { client } from '@/apollo/apolloClient';
-
-import {
- DEACTIVATE_PROJECT,
- GET_STATUS_REASONS,
-} from '@/apollo/gql/gqlProjects';
-import QuestionBadge from '@/components/badges/QuestionBadge';
-import FormProgress from '@/components/FormProgress';
-import { Shadow } from '@/components/styled-components/Shadow';
-import { Modal } from './Modal';
-import ArchiveIcon from '../../../public/images/icons/archive_deep.svg';
-import Routes from '@/lib/constants/Routes';
-import { IModal } from '@/types/common';
-import { useAppDispatch, useAppSelector } from '@/features/hooks';
-import { setShowSignWithWallet } from '@/features/modal/modal.slice';
-
-interface ISelectObj {
- value: number;
- label: string;
-}
-
-const buttonLabels: { [key: string]: string }[] = [
- { confirm: 'okay, do it', cancel: "nope, don't do it" },
- { confirm: 'deactivate this project', cancel: 'cancel' },
- { confirm: '', cancel: 'close' },
-];
-
-interface IDeactivateProjectModal extends IModal {
- projectId?: string;
- setIsActive: Dispatch>;
-}
-
-const DeactivateProjectModal = ({
- projectId,
- setIsActive,
- setShowModal,
-}: IDeactivateProjectModal) => {
- const [tab, setTab] = useState(0);
- const [motive, setMotive] = useState('');
- const [reasons, setReasons] = useState([]);
- const [selectedReason, setSelectedReason] = useState(
- undefined,
- );
- const dispatch = useAppDispatch();
- const isSignedIn = useAppSelector(state => state.user.isSignedIn);
- const fetchReasons = async () => {
- const { data } = await client.query({
- query: GET_STATUS_REASONS,
- fetchPolicy: 'no-cache',
- });
- const fetchedReasons = data.getStatusReasons.map((elem: any) => ({
- label: elem.description,
- value: elem.id,
- }));
- console.log(fetchedReasons);
- setReasons(fetchedReasons);
- };
-
- const handleChange = (e: React.ChangeEvent) => {
- const { value } = e.target;
- setMotive(value);
- };
-
- const handleConfirmButton = async () => {
- if (!!tab && !!selectedReason) {
- if (!isSignedIn) {
- dispatch(setShowSignWithWallet(true));
- return;
- }
- const { data } = await client.mutate({
- mutation: DEACTIVATE_PROJECT,
- variables: {
- projectId: Number(projectId),
- reasonId: Number(selectedReason.value),
- },
- });
- const status = data.deactivateProject;
- setIsActive(!status);
- }
- setTab(previousTab => previousTab + 1);
- };
-
- useEffect(() => {
- fetchReasons();
- }, [selectedReason]);
-
- return (
-
- }
- headerTitle='Deactivating project'
- headerTitlePosition='left'
- >
-
-
-
-
-
-
-
-
-
-
- {tab < 2
- ? 'You can reactivate later from your projects section under your account space!'
- : 'Your project is deactivated now, you can still find it on your own projects.'}
-
-
- {tab < 2 && (
- 0 && !!!selectedReason}
- />
- )}
- setShowModal(false)}
- />
-
-
- );
-};
-
-const formSteps = ['Deactivating', 'Why?', 'Done'];
-
-const Wrapper = styled.div`
- max-width: 500px;
- padding: 0 24px;
-`;
-
-const TextWrapper = styled.div`
- text-align: left;
-`;
-
-const GivBackNotif = styled.div`
- display: flex;
- justify-content: center;
- align-items: center;
- gap: 12px;
- padding: 16px;
- background: ${semanticColors.blueSky[100]};
- border-radius: 8px;
- border: 1px solid ${semanticColors.blueSky[700]};
- margin-top: 36px;
- color: ${semanticColors.blueSky[700]};
- text-align: left;
-`;
-
-const ConfirmButton = styled(Button)`
- text-transform: uppercase;
- width: 100%;
- margin-top: 12px;
-`;
-
-const CancelButton = styled(Button)`
- text-transform: uppercase;
- width: 100%;
- margin: 8px 0;
-
- &:hover {
- background-color: transparent;
- }
-`;
-
-interface IDeactivatingContent {
- show: boolean;
-}
-
-const DeactivatingContent = ({ show }: IDeactivatingContent) => (
- <>
- {show && (
- <>
- Before deactivating your project, be aware that:
-
- {bulletPointsText.map((text, index) => (
-
- {text}
-
- ))}
-
-
- )}
-
-);
-
-const bulletPointsText = [
- 'Your project will be unlisted from Giveth',
- 'All donors will be notified about this action',
- 'Your project will be accessible only via direct link and donations will be disabled',
- 'If you decide to activate it later, your project will have to be reviewed again',
-];
-
-const CustomList = styled.ul`
- list-style-image: url('/images/icons/bullet_icon.svg');
- padding-inline-start: 20px;
-`;
-
-const BulletPoint = styled.li`
- margin-bottom: 12px;
-
- div {
- position: relative;
- left: 4px;
- }
-`;
-
-interface IWhyContent {
- handleChange: (e: React.ChangeEvent) => void;
- handleSelect: (e: any) => void;
- options: ISelectObj[];
- selectedOption: ISelectObj | void;
- show: boolean;
- textInput: string;
-}
-
-const WhyContent = ({
- handleChange,
- handleSelect,
- options,
- selectedOption,
- show,
- textInput,
-}: IWhyContent) => (
- <>
- {show && (
- <>
-
- Please let us know why you are deactivating this project!
-
-
- ) : (
-
- )}
-